/* 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;
}
body{
    height: 100vh;
    font-family: Nunito;
}
body, main, header, footer, p, marquee{
    margin:0;
    padding:0
}
h1, h2{
    font-size:3rem !important;
    margin-bottom:0;
    font-family: Bubble !important;
}
.ico-twitter{
    color:#191FFF; 
    font-size:40px;
    position:absolute; 
    bottom:0;
    transform: translate(-50%, -100%)
}

button:focus, input:focus{outline:none}
h1{    
    text-shadow: -4px 5px 0px #ffffff;        
}
a:link, a:visited, a:active {
    text-decoration:none;
}
.ticker {
    display: flex;
    flex-wrap: wrap;    
    margin: 0 auto
}

.text-waiting {
    font-family: 'AvertaBlack';
    color: #2D25CA;
    font-size: 20px;
    text-transform: uppercase;
}


.text-preWhite {
    font-family: 'AvertaBlack';
    color: #2D25CA;
    font-size: 20px;
    text-transform: uppercase;
}

footer.front{
    /* background-color: #1e59e9; */
    background: url("../img/fondo_footer.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    /* color: #ffffff; */
    color: #371BE6;
    font-weight: bold;
}
.iso-marquee {
    padding: 10px 0;
    font-size:2.6rem;    
    overflow: hidden;
	background-color:#1e59e9;
 }

 /*.iso-marquee--long {
    font-size: 1.25vw;
 }*/

 .iso-marquee-linkwrap{
	text-transform: uppercase;
    font-family: BebasNeue;    
    color: #ffffff
}
.iso-marquee span p{
    display: inline-block;
     white-space: nowrap;
}
.iso-marquee span p:before{
    content: "•"; color: #f7f035;
    margin-right: 10px;
    margin-left: 10px;
    font-size: 2rem;
    vertical-align: middle;
}
 .iso-marquee span {
     display: inline-block;
     white-space: nowrap;
     color: #fff;
     width: var(--tw);     
     will-change: transform;
     animation: iso-marquee var(--ad) linear infinite;
     animation-play-state: play;
 }

 @keyframes iso-marquee {
     0% { transform: translateX(0); }
     100% { transform: translateX(-100%); }
 }

 /*
  * on MacOs: System Preferences >
  *           Accessibility >
  *           Display > Reduce motion
  */

 @media (prefers-reduced-motion: reduce) {
   .iso-marquee span {
     animation: none;
     text-shadow: none;
     width: auto;
     display: block;
     line-height: 1.5;
     text-align: center;
     white-space: normal;
   }
 }
.navbar-brand{
    margin-right:0
}
.navbar-nav {
    flex-direction: row;
  }
.nav-link, #wallet, .tooth-menu{
    position:relative;
    top:50%;
    transform:translateY(-50%)
}
#social{
    width: 38%;
}
#social .nav-link{
    margin-left:0.2rem;
    margin-right:0;
}
#social .nav-link img{
    width: 80%;
    height:auto
}
.tooth-menu{
    margin-left:1rem;
}
.logo{
    width:167px;
    /*transition: all ease 1s;*/
}
#wallet{
    background-color: #d53ff5;
    color:#fff;
    padding:15px 25px;
    font-family: Nunito;
    font-size: 12pt;
    text-transform: uppercase;
    border-radius: 25px;    
    cursor:pointer;
    margin-left:0.5rem
}
.terms p span{
    color:#1e59e9;
}
.banner{
    background-color: #6ed7de;
    text-align:center;
    position:relative
}
#welcome{
    background: radial-gradient(circle, #ffffff, #d3fa71); 
    /* background: url("../img/weapons.jpg"); */
    color:#1e59e9;
    font-size: 1.5rem
}
#welcome p{
    font-family: Nunito;
}
#welcome-content p.last{
    padding-bottom: 100px;
}
.welcomeBG{
    position:absolute;
    bottom:0;
    right:0;
}
.discord{
    color: #1e59e9;
    display: inline-block;
    vertical-align: top;
    font-size: 1rem;    
    line-height: 30px;
    padding: 0 2px;
    min-width: 100px;
    text-align: center;
    padding-left:15px;
    padding-right:15px
}
.qty .count {
    color: #1e59e9;
    display: inline-block;
    vertical-align: top;
    font-size: 1rem;    
    line-height: 30px;
    padding: 0 2px;
    min-width: 100px;
    text-align: center;
    margin-right:15px;
    margin-left:15px;
    border-radius: 1rem;
    border-color:#1e59e9;
    padding-left:15px;
    padding-right:15px
}
.qty .plus {
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
    color: white;
    width: 30px;
    height: 30px;
    font-size: 30px;
    text-align: center;
    border-radius: 50%;
    line-height: 25px;
    }
.qty .minus {
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
    color: white;
    width: 30px;
    height: 30px;
    font-size: 30px;
    text-align: center;
    border-radius: 50%;
    background-clip: padding-box;
    line-height: 25px;
}
/*.minus:hover{
    background-color: #717fe0 !important;
}
.plus:hover{
    background-color: #717fe0 !important;
}*/
/*Prevent text selection*/
.qty span{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
.qty input{  
    border: 0;
    width: 5%;
    border:1px solid #1e59e9
}

.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.qty .bg-dark{ 
    background-color: #1e59e9!important;     
}
.boxShadow{
    box-shadow: 1px 3px 5px 0px rgba(0,0,0,0.75);
-webkit-box-shadow: 1px 3px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 1px 3px 5px 0px rgba(0,0,0,0.75);
}
.minusplus{
    position:absolute;
    top:50%;
    left:50%;    
    margin:0 auto;
    transform: translate(-50%,-50%);
    width:200px
}
.waiting{
    position:absolute;
    top:50%;
    left:50%;    
    margin:0 auto;
    transform: translate(-50%,-50%);
    width:500px
}
.mintline{
    position:relative;
    left:50%;
    transform:translateX(-50%);
    width:200px;
    margin-top: 15px;
}
.img-waiting, .img-whitelist{
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    position: relative;
    width: 60px;
}
.mint{
    width: 190px;
    background-color: #EFF654;
    color: #1e59e9;
    text-transform: uppercase;
    font-family: AvertaBlack;
    border:none;
    border-radius: 1rem;  
    cursor: pointer;
    padding-top:5px;
    padding-bottom:5px;
    margin-top: 15px  
}
.mint:disabled{
    width: 190px;
    background-color: #cccccc;
    color: #666666;
    text-transform: uppercase;
    font-family: Nunito;
    border:none;
    border-radius: 1rem;  
    cursor: pointer;
    padding-top:5px;
    padding-bottom:5px;
    margin-top: 15px  
}
.qty input:disabled{
    background-color:white;
}
#roadmap{
    background: url("../img/ilustracionBG.jpg") no-repeat; 
    padding-bottom:80px;
    background-size: cover;
}
#roadmapTitle h2{
    font-size: 2.5rem;
}
#roadmapTitle{
    background-color: #d53ff5;
    color:#fff;
    padding:15px 30px;
    font-family: AvertaBlack;        
    border-radius: 50px;    
}
.trans-white{
    background:rgba(255,255,255, 0.5)!important;
}
.trans{
    border-radius: 35px;    
    font-family: Nunito;
    font-weight: 700;
    font-size:18px;
    background:rgba(244,80,234, 0.5);  
}
.left-content{ text-align:center}
.left-content span{ 
    color: #ffffff; 
    position:relative;
    top:50%;
    transform:translateY(-50%);
    margin:0 auto;
    font-size: 17pt; 
    font-family: Nunito;
    display: inline-block;   
    padding:10px 0 10px 0
}
.right-content{
    border-radius: 35px;
    background-color: #f7f035;
    color: #1e59e9;
    padding:15px 25px
}
#videos{
    /* background-image: radial-gradient(circle, #ffffff, #b1f9b7); */
    background: url("../img/fight.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
#videos h2{
    color: #f450ea;
    text-shadow: -4px 5px 0px #1edb2e;
}
#videos p{
    font-family: Nunito;
    font-size: 1.3rem;
    color:#1e59e9
}
#team{
    /* background-image: radial-gradient(circle, #ffffff, #d53ff5);  */
    background-color: #d53ff5;
    /* background-color: #D731F8; */
}
#team h2{
    color: #68f875;
    text-shadow: -4px 5px 0px #981cb3;
}
#team .card{
    background-color: transparent;
    background: linear-gradient(transparent 25%, #ffffff 25%) no-repeat;
   
    text-align: center;
    box-shadow: 0 12px 6px -6px rgba(0, 0, 0, 0.5);
    border: transparent;
    margin-bottom: 10px;
    border-radius: 20px;
}
#team .card img{
    max-width: 180px;
    margin:0 auto;
}
#team p{
    font-size:2.5rem;
    color:#191FFF;
    font-family: Bubble;
}
#team div{
    color: #191FFF;
}
.card-body{
    background-color: #ffffff;
    border-radius: 20px;
    min-height: 304px;
}
footer.front{        
    font-family: Nunito;
    font-weight: 700;
    text-align: center;
    padding: 30px;
}
.modal .close{    
    background-color:#cdcbcb;
    border-radius: 50%;
    text-shadow: none;
    opacity:unset;
    font-weight: normal;
    font-family: Nunito;
    font-size: 16pt;
    padding:0.5rem 0.6rem;
    margin:-0.2rem -0.2rem -1rem auto
}
.close span{
    color:#fefefe;
    font-weight: normal;
    font-family: Nunito;
    font-size: 16pt;
    text-transform: uppercase;
    text-shadow: none;
    opacity:unset
}
.modal-body{
    padding-top:0;
}
.modal-content{    
    border-radius: 1.5rem;
    text-align: center;
    color: #1e59e9;
    font-size: 15pt;
    font-family: Nunito;
}

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) { 
    #social{
        width: auto;
    }
    #roadmap h2{
        font-size:3rem;
    }     
    footer.front{
        padding: 40px;
    }
    .waiting{
        width:300px 
    }
    .img-waiting{
        width: 40px;
    }
 }

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
    .logo{
        width:217px;
        /*transition: all ease 1s;*/
    }  
    #social .nav-link{
        margin-left:0.5rem;
        margin-right:0.5rem
    }
    #social .nav-link img{
        width: 100%;
        height:auto
    }  
    footer.front{
        padding: 2em;
    }

    .waiting{
        width:500px 
    }
    .img-waiting{
        width: 60px;
    }
   
 }

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) { 
    .logo{
        width:267px;
    }
    
    footer.front{
        padding: 3em;
    }
    #welcome{
        /* background: radial-gradient(circle, #ffffff, #d3fa71); */
        background: url("../img/weapons.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        color:#1e59e9;
        font-size: 1.5rem;
        padding-left: 25%;
        padding-right: 25%;
        padding-bottom: 100px;
    }
    #weapons{
        background: #ffffff;
        border-radius: 7.5% 7.5% 7.5% 7.5%;
        box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.5);
    }
    #welcome-title{
        padding: 0;
    }
    #welcome p{
        font-family: Nunito;
        font-weight: 700
    }
    #welcome-content p.last{
        /* padding-bottom: 100px; */
    }
    .waiting{
        width:500px 
    }
    .img-waiting{
        width: 60px;
    }
 }

/* 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.front{
        padding: 5em;
    }
    .waiting{
        width:500px 
    }
    .img-waiting{
        width: 60px;
    }
 }

 h2.welcome{
    font-size:3rem;
    margin-bottom:0;
    font-family: Bubble;
    text-shadow: -4px 5px 0px #ffffff;
}

 .content {
    align-items: center;
    display: flex;
    height: 100vh;
    justify-content: center;
   /* margin: 0;
    max-width: 100%;
    width: 100vw;
    position:relative;*/
    background: #d3fa71;      
    color:#1e59e9;
    font-size: 1.5rem;
    padding-top:100px;
    padding-bottom:100px; 
    position:relative;
    min-height:800px 
  }
  
  /*div {
    background: #333;
    font-size: 30px;
    font-weight: bold;
    height: 200px;
    line-height: 200px;
    margin: 1em;
    text-align: center;
    width: 300px;
  }*/
  
  .one {
  
    position: absolute;
  }
  
  
  
  .item1{
          left:50px;
          top:30px;
      }
      .item2{
          right:80px; 
          top:30px;   
      }
      .item3{
          left:100px;    
          top:250px;
      }
      .item4{
          left: 250px;
          top: 200px;
      }
      .item5{
          right: 400px;
          top: 250px;
      }
      .item6{
          right: 0px;
          top: 180px;
      }
      .item7{
          left: 0px;
          top: 350px;
      }
      .item8{
          left: 180px;
          top: 440px;
      }
      .item9{
          left: 300px;
          top: 300px;
      }
      .item10{
          right: 380px;
          top: 390px;
      }
      .item11{
          right: 230px;
          top: 300px;
      }
      .item12{
          right: 0px;
          top: 450px;
      }
      .item13{
          left: 80px;
          bottom: 0px;
      }
      .item14{
          left: 380px;
          bottom: 0px;
      }
      .item15{
          left: 570px;
          bottom: 30px;
      }
      .item16{
          right: 700px;
          bottom: 0px;
      }
      .item17{
          right: 450px;
          bottom: 0px;
      }
      .item18{
          right: 250px;
          bottom: 150px;
      }
      .item19{
          right: 0px;
          bottom: 0px;
      }
      .welcome-icons-content{    
      background-color:#ffffff;
      padding:40px 30px;
      border-radius:50px;
      -webkit-box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.29); 
      box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.29);
      font-family: AvertaSemibold;
      font-size: 18px;
      z-index: 2;
      min-height:400px;    
  }
  .welcome-icons-content p{
      margin-bottom:30px
  }
  /*// Extra small devices (portrait phones, less than 576px)*/
  @media (max-width: 575.98px) {
     
      
   }
  
  /*// Small devices (landscape phones, less than 768px)*/
  @media (max-width: 767.98px) { 
      html, body,.content{
          height: auto;
      }
      .one{
          display:none
      }
      .waiting{
        width:200px 
    }
    .img-waiting{
        width: 40px;
    }
    .text-waiting{
        font-size: 19px  !important;
    }
    .img-whitelist{
        display: none;
    }
    .text-preWhite{
        font-size: 15px !important;
    } 
    .mint-text{
        display: none;
    }
    .qty .count {
       
        min-width: 80px;
        
    }
    .qty .plus {
        width: 20px;
        height: 20px;
        font-size: 20px;
        line-height: 15px;
        }
    .qty .minus {
        width: 20px;
        height: 20px;
        font-size: 20px;
        line-height: 15px;
    }
    .mint{
        width: 100px;
        margin-top: 5px;
    }
    .mintline{
        width:100px;
        margin-top: 5px;
    }
   }
  
  /*// Medium devices (tablets, less than 992px)*/
  @media (max-width: 991.98px) {
      html, body,.content{
          height: auto;
      } 
      .item4, .item14, .item16{
          display:none;
      }
   }
  
  /*// Large devices (desktops, less than 1200px)*/
  @media (max-width: 1199.98px) { 
      .item4, .item14, .item16{
          display:none;
      }
   }
  
  @media (min-width: 1300px) { 
      
   }