/* Extra small devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap*/
@font-face {
  font-family: BebasNeue;
  src: url(fonts/BebasNeue\ Bold.otf);
}
@font-face {
  font-family: AvertaBlack;
  src: url(fonts/Averta\ Black.otf);
}
@font-face {
  font-family: AvertaSemibold;
  src: url(fonts/Averta\ Semibold.otf);
}
@font-face {
  font-family: Averta;
  src: url(fonts/Averta.otf);
}
@font-face {
  font-family: Bubble;
  src: url(fonts/Bubbleboddy-FatTrial.ttf);
}
b{
  font-family: AvertaBlack;
}

html, body {
  height: 100vh;
  width: 100vw;
  margin: 0;
}

body, main, header, footer, p{
  margin:0;
  padding:0
}
h1, h2{
  font-size:3rem;
  margin-bottom:0;
  font-family: Bubble;
}
button:focus, input:focus{outline:none}
footer{
  background-color: #1e59e9;
  color: #ffffff;
  font-family: Averta;
  text-align: center;
   padding: 30px;
}
.blue-bar {
  padding: 10px 0 10px 15px;
  font-size:2.6rem;    
  height:77px; 
  background-color:#1e59e9;
  display: flex;
  align-items: center;
  justify-content: left;
}
.navbar-brand{
  margin-right:0
}
.navbar-nav {
  flex-direction: row;
}
.nav-link, #wallet, .tooth-menu{
  position:relative;
  top:50%;
  transform:translateY(-50%)
}
.tooth-menu{
  margin-left:1rem;
}
.logo{
  width:167px;
  /*transition: all ease 1s;*/
}
#wallet{
  background-color: #d53ff5;
  color:#fff;
  padding:15px 25px;
  font-family: AvertaBlack;
  font-size: 12pt;
  text-transform: uppercase;
  border-radius: 25px;    
  cursor:pointer;
  margin-left:0.5rem
}

#token{
  display:flex; align-items: center; justify-content: center;
  background-color: #faf7f7;
  /*background-image: url('img/bg_token_grid.png');
  background-repeat: no-repeat;
  background-size: cover;*/          
  --g:transparent 0  calc(90px - 2px),#2cc4ff 0 90px; 
  background:
    repeating-linear-gradient(to right, var(--g)),     
    repeating-linear-gradient(to bottom,var(--g))     
    #faf7f7;
    height: 100%;
    width: 100%;
}
.one{
  position:absolute;    
}
.item1{
  left:0;
  top:0
}
.item2{
  top:0;
  right:0;
}
.item3{ bottom:0; left:8%}
.item4{ bottom:0; right:8%}

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 500px){
  #wt{
    margin-left:auto;
  }
  
}
@media (min-width: 576px) { 
     
  footer{
      padding: 40px;
  }
}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
  .logo{
      width:217px;
      /*transition: all ease 1s;*/
  }   
  footer{
      padding: 2em;
  }
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) { 
  .logo{
      width:267px;
  }
  
  footer{
      padding: 3em;
  }
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) { 
  h1{
      text-align:left;        
      padding-left:1.8rem;
      margin:0
  }
  h1, h2{
      font-size:4rem;
  }   
  .logo{
      width:267px;
  }
  #welcome-content{
      /*background: url("../img/welcomeBG.png");
      background-repeat: no-repeat;         
      background-size: 50% auto;
      background-position: right bottom;*/        
      padding-top:20px
  }
  
  #welcome-content img{
      position: absolute; 
      bottom:0;
      right:20px;        
  }
  footer{
      padding: 5em;
  }
  
}

@media (max-width: 1899px){
  .one{
   display:none
  }
}
/*AQUI LO NUEVO*/
html,body, .wrappser-relative{
  position:relative;
  width: 100%;
  height:auto;
}
.wrappser-absolute{
  position:absolute;
  width: 100%;
  height:auto;
}


      .rounded-circle {
        width:20px;
        height: 20px;
        display:inline-block;
        margin-right:15px;
        
        /*-webkit-border-top-left-radius: 1px;
        -webkit-border-top-right-radius: 2px;
        -webkit-border-bottom-right-radius: 3px;
        -webkit-border-bottom-left-radius: 4px;
      
        -moz-border-radius-topleft: 1px;
        -moz-border-radius-topright: 2px;
        -moz-border-radius-bottomright: 3px;
        -moz-border-radius-bottomleft: 4px;
      
        border-top-left-radius: 1px;
        border-top-right-radius: 2px;
        border-bottom-right-radius: 3px;
        border-bottom-left-radius: 4px;*/
      }
      .red{background-color: #e33d3d}
      .yellow{background-color: #f7f035}
      .green{background-color: #35a01b}

      #id_token{
        background-color:#f5fa63;
        font-family: AvertaBlack;
        font-size:32px;
        color:#1e59e9;        
        border:none;
        border-radius: 50px;        
        padding: 8px;
        margin-bottom: 20px;
        text-align: center;
        -webkit-box-shadow: -2px 9px 15px -2px rgba(0,0,0,0.45); 
        box-shadow: -2px 9px 15px -2px rgba(0,0,0,0.45);
        width: 90%
      }
      #loading{
        -webkit-box-shadow: -2px 9px 15px -2px rgba(0,0,0,0.45); 
        box-shadow: -2px 9px 15px -2px rgba(0,0,0,0.45);
        margin-top: 20px;
        text-align: center;
        border:none;
        border-radius: 50px;
        background-color:#1e59e9;
        color:#e4f848;
        text-shadow: 3px 3px 2px #D53FF5;
        width: 90%;                
        font-size:2.8rem;
        letter-spacing: 3px;
        font-family: Bubble;
        -webkit-text-stroke: 2px black;
        cursor:pointer
      }