@font-face {
    font-family: "Maxis-Light";
    src: url("/fonts/site/maxis-light.otf");

}

@font-face {
    font-family: "Maxis-Regular";
    src: url('/fonts/site/maxis-regular.otf');
 
}

@font-face {
    font-family: "Maxis-Semibold";
    src: url("/fonts/site/maxis-semibold.otf");
 
}

@viewport {
  zoom: 1.0;
  min-zoom: 1.0;
  max-zoom: 1.0;
}

body{
    color: white;
    font-family: "Maxis-Regular";
    width: 100%;
    height: 100%;
    overflow: hidden; 
    background-color: rgb(224, 62, 62);
    position: fixed;
    bottom:0;
}

img{
  width: 100%;
  height: auto;
  margin: auto;
}

button{
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
}

button:focus{
	outline: none;
}

.btn:focus {
  outline: none;
  box-shadow: none;
}

.content{
  opacity: 0;
  width: 100%;
  height: 100%;
  margin:auto;
  position: absolute;
  bottom:0;
  left:0;
  pointer-events: none;
  transform-origin: 50% 100%;
  z-index: -110;
}

/* .content *{
  transition: all 0.3s ease;
} */

[id*=logo], [class*=logo]{
  position:absolute;z-index:-4;top:8%;left:50%;transform:translateX(-50%);
  width: 5%;
  min-width: 48px;
  max-width: 80px;
}

.logoSmall{
  width: 4%;
  min-width: 36px;
  max-width: 58px;
  top:10%;
}

.main-box{
    width: 100%;
    height: 100%;
    /* overflow: hidden; */
    z-index: 1;
}

#game{
  pointer-events: auto;
}

.center-box{
    display: grid;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    margin: auto;
}

/* HOME */
#home img{
  pointer-events: auto;
}

#large-scale-banner{
  height: 80%;
  width: auto;
  align-self: flex-end;
}

.flex-container {
  display: -webkit-box;   /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
  flex-wrap: nowrap;
  flex-direction: column;
  align-content: flex-end;
  margin: 4% 0 0 0;  
  height: 100%;
  box-sizing: border-box;
}

.flex-container .flex-item {
  text-align: center;
  flex: 1;
  height: 100%;;
}

.home-l{
  width: 64px;
}

#join-btn{
  display: -webkit-box;   /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
  height:  100%;
  pointer-events:visible;
  cursor: pointer;
}

#lottie-banner{
  height: 90%;
  flex: 1;
}

/* .elements-1{
  position: fixed;
  bottom: 0;
  left: 50%;
  width: 100%;
  transform: translate(-50%);
  pointer-events: auto;
} */


.elements-1 .lottie-animation{
  width: 35%;
  margin: auto;
  position: relative;
  bottom: -4vh;
}

/* END HOME */


/* .elements-2 img{
  width: 32%;
  margin: auto;
} */

.elements-2{
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
  pointer-events: auto;
}

/* Footer */
.footer-pocket{
  position: absolute;
  bottom: 0;
  width: 70%;
  left: 50%;
  transform: translateX(-50%);
}
/* END Footer */

/* FORM */

form{
  font-size: 18px;
  color: white ;
  font-family: "Maxis-Semibold";
}

#signup-form{
    min-width: 360px;
    height: 42%;
    position: relative;
    pointer-events: auto;
  }
  
  #signup-form .btn{
    transition: width .3s ease, margin .3s ease;
  }
  
  #login-form{
    min-width: 360px;
    position: relative;
    pointer-events: auto;
}

input{
    background-color: rgba(0, 0, 0, 0);
    border: 0;
    border-bottom: 1px solid white;
    height: 44px;
    width: 100%;
    text-align: center; 
    font-size: 17px;
    color: white ;
    font-family: "Maxis-Semibold";
    margin:auto;
    -webkit-appearance: none; /* remove ios stlyes */
    -webkit-border-radius: 0; /* remove ios stlyes */
}

.input-row{
    margin-bottom: 9.6%;
    max-width: 360px;
}

::placeholder {
    color: white;
    font-size: 17px;
    font-family: "Maxis-Semibold";
}

 #pdpa-text{
     font-size: 14px;
 }

 .help-block{
   position: relative; 
   top: 4%;
   margin-bottom: -4%;
   height: 0;
 }

 [class*=Help]{
     line-height: 110%;
     font-size: 13px;
     color: rgb(228, 202, 56) !important;
     font-family: "Maxis-Light";
     position: relative;
 }

input:focus {
    outline: none;
    box-shadow: none;
  }

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  background-color: rgba(0, 0, 0, 0);
  border: 0;
  border-bottom: 1px solid white;
  -webkit-text-fill-color: white;
  font-size: 18px;
  font-family: "Maxis-Semibold";
  transition: background-color 5000s ease-in-out 0s;
}

 /* END FORM */

 /* LEADERBOARD */

#top20-banner{
  max-width: 280px;
  min-width: 90px;
  width: 50%;
  /* margin-top: 1%; */
}

.ranking{
  width: 52%;
  transform: translate(8%);
}

.rank-tr{
  text-align: left;
  font-size: calc(10px + .3rem);
  display: flex;
  flex-direction: row;
  letter-spacing: .1rem;
  line-height: 140%;
  font-family: "Maxis-Light";
}

.rank-td{
  flex: 1;
  align-items: flex-end;
  justify-content: start;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

 .top-3{
   font-size: calc(13px + 0.4rem);
   letter-spacing: .15rem;
   line-height: 160%;
   font-family: "Maxis-Semibold";
   z-index: -1;
 }

.rank-tr:nth-child(3){
  padding-bottom: 1vh;
}

 #rank-button-container{
   width: 23%;
   position: absolute;
   bottom: 23%;
   left: 50%;
   transform: translateX(-52%);
   min-width: 180px;
 }

#rank-button-container .btn{
  padding: 0;
  margin: 0;
}

 /* END LEADERBOARD */

/* PLAYER LOGIN */

/* END PLAYER LOGIN */

/* HEALTH */
.health-block{
  margin: auto;
  text-align: center;
  width: 56%;
  font-family: "Maxis-SemiBold";
}

#health h1{
  font-size: calc(28px + 1rem);
  letter-spacing: .2rem;
  line-height: 120%;
  margin-top: -6%;
}

#health h3{
  font-size: calc(17px + .6rem);
  letter-spacing: .1rem;
  line-height: 100%;
}

#health p{
  font-family: "Maxis-Light";
  font-size: calc(12px + .5rem);
  letter-spacing: 0.14rem;
  line-height: 160%;
  opacity: 1;
}

.health-footer{
  width: auto;
  height: 25%;
}

/* END HEALTH */

 .opacity-0 {
    opacity:0!important;
  }
  .opacity-1 {
    opacity:0.2!important;
  }
  .opacity-2 {
    opacity:0.4!important;
  }
  .opacity-3 {
    opacity:0.6!important;
  }
  .opacity-4 {
    opacity:.8!important;
  }
  .opacity-5 {
    opacity:1!important;
  }

  @media (min-width: 1000px) and (max-width: 2000px) and (max-height: 900px){
    #lottie-banner{
      height: 88%;
    }
  }

  @media (min-width: 1000px) and (max-width: 2000px) and (max-height: 760px){
    #lottie-banner{
      min-height: 86%;
    }
  }

  @media (min-width: 1000px) and (max-width: 2000px) and (max-height: 690px){
    #lottie-banner{
      height: 84%;
    }
  }

  @media (min-width: 1000px) and (max-width: 2000px) and (max-height: 600px){
    #lottie-banner{
      height: 80%;
    }
  }

  @media (min-width: 1000px) and (max-width: 2000px) and (max-height: 540px){
    #lottie-banner{
      height: 76%;
    }
  }

  @media (min-width: 1000px) and (max-width: 2000px) and (max-height: 400px){
    .ranking{
      height: 40%;
      max-height: 180px;
      overflow-y: scroll;
      overflow-x: hidden;
      pointer-events: all;
     }
  }

  @media (min-width: 840px) and (max-width: 2000px) and (min-height: 400px){
    .ranking{
      height: 40%;
      max-height: 200px;
      overflow-y: scroll;
      overflow-x: hidden;
      pointer-events: all;
     }
  }

  @media (min-width: 840px) and (max-width: 2000px) and (min-height: 560px){
    .ranking{
      max-height: 240px;
     }
  }

  @media (min-width: 840px) and (max-width: 2000px) and (min-height: 660px){
    .ranking{
      max-height: 300px;
     }
  }

  @media (min-width: 840px) and (max-width: 2000px) and (min-height: 800px) and (max-height: 1100px){
    .ranking{
      height: 100%;
      max-height: 350px;
      overflow-y: scroll;
      overflow-x: hidden;
      pointer-events: all;
     }
  }

  @media only screen and (max-width: 1860px) {
    
    .elements-1 .lottie-animation{
      width: 34% ;
    }

    .elements-2 img{
      width: 86%;
    }
  }

  @media only screen and (max-width: 1700px) {
    
    .elements-2 img{
      width: 76%;
    }
  }

  @media only screen and (max-width: 1760px) {
    #health h1{
      font-size: calc(26px + 1rem);
      letter-spacing: .2rem;
      line-height: 120%;
      margin-top: -8%;
    }
    
    #health h3{
      font-size: calc(16px + .6rem);
      letter-spacing: .1rem;
      line-height: 100%;
      margin-bottom: 0.5%;
    }
    
    #health p{
      font-family: "Maxis-Light";
      font-size: calc(12px + .4rem);
      line-height: 160%;
      margin-bottom: 0.5%;
    }
  }

  @media only screen and (max-width: 1660px) {
    #health h1{
      font-size: calc(25px + 1rem);
      letter-spacing: .2rem;
      line-height: 120%;
      margin-top: -5%;
    }
    
    #health h3{
      font-size: calc(15px + .6rem);
      letter-spacing: .1rem;
      line-height: 100%;
      /* margin-bottom: 0.5%; */
    }
    
    #health p{
      font-family: "Maxis-Light";
      font-size: calc(12px + .3rem);
      line-height: 160%;
      /* margin-bottom: 0.5%; */
    }
  }

  @media only screen and (max-width: 1560px) {
    [id*=logo], [class*=logo]{
      position:absolute;z-index:-4;left:50%;transform:translateX(-50%);
      top: 7%;
    }

    .elements-1 .lottie-animation{
      width: 32% ;
    }

    .elements-2 img{
      width: 70%;
    }

    .logoSmall{
      top:12%;
    }
    
 /* LEADERBOARD */

  #top20-banner{
    width: 15%;
  }

  .ranking{
    width: 58%;
    transform: translateX(10%);
  }

  .rank-tr{
    font-size: calc(10px + .15rem);
    letter-spacing: .1rem;
    line-height: 130%;
  }

  .top-3{
    font-size: calc(14px + .05vw);
    letter-spacing: .1rem;
  }

  .rank-tr:nth-child(3){
    padding-bottom: 1vh;
  }

  #rank-button-container{
    width: 22%;
  }

  #rank-button-container .btn{
    padding: 0;
    margin: 0;
  }
  /* END LEADERBOARD */

  /* HEALTH */
.health-block{
  width: 56%;
}

#health h1{
  font-size: calc(22px + 1rem);
  letter-spacing: .2rem;
  line-height: 100%;
  margin-top: 2%;
}

#health h3{
  font-size: calc(12px + .6rem);
  line-height: 100%;
  margin-bottom: -0.5%;
}

#health p{
  font-size: calc(12px + .2rem);
  margin-bottom: -0.5%;
}

.health-footer{
  width: auto;
  height: 20%;
}
/* END HEALTH */
  }

  @media only screen and (max-width: 1460px) {

    .elements-1 .lottie-animation{
      width: 36% ;
    }

    .elements-2 img{
      width: 46%;
    }

    .health-block{
      width: 60%;
    }
    
    #health h1{
      font-size: calc(24px + 0.5rem);
      letter-spacing: .2rem;
      line-height: 100%;
      margin-top: 3%;
    }
    
    #health h3{
      font-size: calc(14px + .4rem);
      line-height: 100%;
      
    }
    
    #health p{
      font-size: calc(12px + .1rem);
      letter-spacing: 0.1rem;
      line-height: 150%;
    }

    /* RANK */
    
    .rank-tr{
      font-size: calc(12px + .07rem);
      letter-spacing: .1rem;
      line-height: 130%;
    }
  
    .top-3{
      font-size: calc(13px + .1vw);
    }
  
    .rank-tr:nth-child(3){
      padding-bottom: 0.8vh;
    }
    /* END RANK */
  }

  @media screen and (max-width: 1366px) {

    .logoSmall{
      top:9%;
    }

    .elements-1 .lottie-animation{
      width: 32% ;
    }

    /* RANK */
    .rank-tr{
      font-size: calc(11px + .10rem);
      line-height: 135%;
    }
  
    .top-3{
      font-size: calc(13px + .1vw);
    }

    #rank-button-container{
      bottom: 22%;
      width: 22%;
    }

      /* END RANK */

  }

  
  @media (min-width: 1290px) and (max-width: 1400px) and (max-height: 700px) {

    .elements-1 .lottie-animation{
      width: 32% ;
    }

     /* RANK */
     .rank-tr{
      font-size: calc(11px + .10rem);
      line-height: 130%;
    }
  
    .top-3{
      font-size: calc(13px + .1vw);
    }

    #rank-button-container{
      bottom: 22%;
      width: 22%;
    }

      /* END RANK */

  }

  @media (min-width: 1290px) and (max-width: 1400px) and (min-height: 600px) and (max-height: 640px) {

    .elements-1 .lottie-animation{
      width: 32% ;
    }

    /* RANK */
    .ranking{
      transform: translateX(6%);
    }
    
    #top20-banner{
      width: 14%;
      margin-top: -1%;
    }

    .top-3{
      font-size: calc(11px + .1vw);
    }
  
    .rank-tr{
      font-size: calc(10px + .10rem);
    }

    #rank-button-container{
      bottom: 18%;
      width: 20%;
      left: 50%;
      min-width: 220px;
      }

      .leaderboard-footer{
        width: 60%;
      }
    /* END RANK */
  }

  @media (min-width: 1290px) and (max-width: 1400px) and (min-height: 640px) and (max-height: 720px) {

    .elements-1 .lottie-animation{
      width: 34% ;
    }

    /* RANK */

    .top-3{
      font-size: calc(12px + .1vw);
    }
  
    .rank-tr{
      font-size: calc(11px + .10rem);
    }

    #rank-button-container{
      bottom: 20%;
      width: 20%;
      left: 50%;
      min-width: 220px;
      }

      .leaderboard-footer{
        width: 68%;
      }
    /* END RANK */

  }

  @media (min-width: 1290px) and (max-width: 1400px) and (min-height: 720px) and (max-height: 800px) {

    .elements-1 .lottie-animation{
      width: 38% ;
    }

    /* RANK */
    
    .top-3{
      font-size: calc(12px + .1vw);
      line-height: 160% ;
    }
  
    .rank-tr{
      font-size: calc(11px + .10rem);
      line-height: 140% ;
    }

    #rank-button-container{
      bottom: 24%;
      width: 24%;
      left: 50%;
      min-width: 220px;
      }

      .leaderboard-footer{
        width: 74% ;
      }
    /* END RANK */

  }

  @media only screen and (max-width: 1280px) {
    
      /* RANK */
      .top-3{
        font-size: calc(12px + .1vw);
      }

      .rank-tr{
        font-size: calc(11px + .10rem);
        line-height: 130%;
      }

      #rank-button-container{
        bottom: 20%;
        left: 50%;
        transform: translateX(-50%);
        min-width: 220px;
    }

      /* END RANK */

      /* HEALTH */
      .health-block{
        width: 60%;
      }
      
      #health h1{
        font-size: calc(22px + 0.5rem);
        letter-spacing: .2rem;
        line-height: 100%;
      }
      
      #health h3{
        font-size: calc(12px + .4rem);
        line-height: 100%;
      }
      
      #health p{
        font-size: calc(12px + .02rem);
        letter-spacing: 0.1rem;
        line-height: 150%;
      }
      
      /* END HEALTH */
  }
  
  

  /* >1800px width, < 940 height */
  @media (min-width: 1800px) and (max-height: 940px) {

    .elements-1 .lottie-animation{
      width: 34% ;
    }
    
  }

  @media (min-width: 1800px) and (max-height: 1000px) {
    .elements-1 .lottie-animation{
      width: 32% ;
    }

     /* LEADERBOARD */
    #top20-banner{
      max-width: 250px;
      width: 30%;
    }

    .rank-tr{
      font-size: calc(9px + .3rem);
      line-height: 130%;
    }

    .top-3{
      font-size: calc(14px + 0.4rem);
      line-height: 150%;
    }

    #rank-button-container{
      width: 20%;
    }
    /* END LEADERBOARD */
  }

  @media (min-width: 1800px) and (max-height: 860px) {

    .elements-1 .lottie-animation{
      width: 31% ;
    }
  }

  @media (min-width: 1800px) and (max-height: 800px) {

    .elements-1 .lottie-animation{
      width: 28% ;
    }

      /* LEADERBOARD */
      #top20-banner{
        max-width: 220px;
      }
  
      .rank-tr{
        font-size: calc(8px + .3rem);
      }
  
      .rank-td{
        flex: 1;
        align-items: flex-end;
        justify-content: start;
      }
  
      .top-3{
        font-size: calc(12px + 0.4rem);
        line-height: 140%;
      }
  
      #rank-button-container{
        width: 18%;
        min-width: 140px;
      }
      /* END LEADERBOARD */
  }

  @media (min-width: 1800px) and (max-height: 760px) {

    .elements-1 .lottie-animation{
      width: 26% ;
    }


    /* LEADERBOARD */
    #top20-banner{
      max-width: 210px;
      margin-top: -1%;
    }

    .rank-tr{
      font-size: calc(8px + .2rem);
    }

    .rank-td{
      flex: 1;
      align-items: flex-end;
      justify-content: start;
    }

    .top-3{
      font-size: calc(11px + 0.4rem);
      line-height: 130%;
    }

    #rank-button-container{
      width: 16%;
      min-width: 140px;
      bottom: 24%;
    }
    /* END LEADERBOARD */
  }

  @media (min-width: 1800px) and (max-height: 700px) {

    .elements-1 .lottie-animation{
      width: 24% ;
    }
  }

   /* Short laptop */
   @media (min-width: 1200px) and (max-width: 1300px) and (min-height: 500px) and (max-height: 600px){
    
    .elements-1 .lottie-animation{
      width: 30% ;
    }


  }
  /* END Short laptop */

  
  @media (min-width: 1200px) and (max-width: 1300px) and (min-height: 600px) and (max-height: 660px) {
    
    .elements-1 .lottie-animation{
      width: 33% ;
    }
  }

  /* >1200px width, < 760px height > 660px height*/
  /* Short laptop */
  @media (min-width: 1200px) and (max-width: 1300px) and (max-height: 760px) {
  
    /* LEADERBOARD */
    #top20-banner{
      max-width: 280px;
      margin-top: -0.5%;
    }
    
    .ranking{
      width: 55%;
      transform: translateX(9%);
    }
    
    .rank-tr{
      font-size: calc(8px + .10rem);
      line-height: 140%;
    }
    
    .top-3{
      font-size: calc(8px + 0.3rem);
      line-height: 150%;
      letter-spacing: .1rem;
    }
    
    #rank-button-container{
      width: 20%;
    }

    .footer-pocket{
      width: 20%;
      height: auto;
    }
    
    .leaderboard-footer{
      width: 55%;
    }
    /* END LEADERBOARD */

  }
  /* END Short laptop */

  /* >1200px width,  > 660px height < 760px height */
  @media (min-width: 1200px) and (max-width: 1300px) and (min-height: 660px) and (max-height: 760px) {
  
    .elements-1 .lottie-animation{
      width: 36% ;
    }
  }
  
  /* >1200px width,  > 760px height < 820px height */
  /* laptop */
  @media (min-width: 1200px) and (max-width: 1300px) and (min-height: 760px) and (max-height: 820px) {
    
    .elements-1 .lottie-animation{
      width: 42% ;
    }
  }
  /* END laptop */

  @media (min-width: 1200px) and (max-width: 1300px) and (min-height: 610px) and (max-height: 640px) {
  
    /* LEADERBOARD */
    #top20-banner{
      max-width: 280px;
      margin-top: 0;
    }
    
    .rank-tr{
      font-size: calc(9px + .10rem);
      line-height: 140%;
    }
    
    .top-3{
      font-size: calc(9px + 0.3rem);
      line-height: 170%;
      letter-spacing: .1rem;
    }
    
    #rank-button-container{
      width: 22%;
    }

    .footer-pocket{
      width: 28%;
    }
    
    .leaderboard-footer{
      width: 62%;
    }
    /* END LEADERBOARD */
  }

  @media (min-width: 1200px) and (max-width: 1300px) and (min-height: 640px) and (max-height: 740px) {
  
    /* LEADERBOARD */
    #top20-banner{
      max-width: 280px;
      margin-top: 1%;
    }
    
    .rank-tr{
      font-size: calc(9px + .10rem);
      line-height: 140%;
    }
    
    .top-3{
      font-size: calc(9px + 0.3rem);
      line-height: 180%;
      letter-spacing: .1rem;
    }
    
    #rank-button-container{
      width: 22%;
      bottom: 22%;
    }

    .footer-pocket{
      width: 28%;
    }
    
    .leaderboard-footer{
      width: 72%;
    }
    /* END LEADERBOARD */

  }