/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 6 version
*/

*{
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
html{
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
}
body{
  width: 100%;
  max-width: 100%;
  min-height:100vh;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  overflow: hidden;
  overflow-y: auto;
}

/*Start Page*/

.start-page{
background-image: url(../images/bg.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
position: relative;
height: 100vh;
width: 100%;
overflow: hidden;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
}
.start-logo{
  top: 0;
  left: 1%;
  z-index: 3;
  position: absolute;
  max-height: 100vh;
  z-index: 4;
}
.start-page > img{position: absolute;}
.img2,
.img3,
.start-logo{
  max-height: 100vh;
  z-index: 4;
}
.persons{
  max-width: 100%;
  bottom: 0;
}
.start-page .start-btn{
  right: 41%;
  z-index: 11;
  max-width: 321px;
  width: 19vw;
  background: transparent;
  border: 0;
  outline: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
  cursor: pointer;
  text-align: center;
  display: block;
  position: absolute;
  bottom: 24%;
}

@media (max-width:860px) and (orientation:landscape){
  .start-page .start-logo{
    top: 0;
    }
    
}
@media (max-width:1441px){
  .start-page .start-logo{
    top: 0;
    }
    
}

/* Login Page */

.login_img{
  position: absolute;
  max-width: 100%;
  bottom: 0;
  right: 0;
}
.login_form{
  position: absolute;
  max-width: 100%;
  bottom: 0;
  right: 0;
}
.login-page{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: none;
  background-color: #f8353c;
}
.login-page .login-content{
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0 15px;
  overflow: hidden;
  z-index: 5;
}

.login-container{
  position: relative;
  width: 50%;
  max-width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0;
  top: 50%;
  left: 4%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  height: 100%;
}
.login-form-bg{
  max-width: 100%;
  display: block;
  width: 58%;
  position: absolute;
  left: 0;
  z-index: 1;
}
.login-form{
  max-width: 500px;
  display: block;
  width: 38%;
  position: absolute;
  left: 6%;
  bottom: 0%;
  z-index: 2;
  height: 100%;
  left: 10%;
  height: 48%;
}
.login-form >label, .login-form >input{
  display: block;
  background-color: #dddddd;
}
.login-form >label{
  padding: 5px 0px;
  color: #FFF;
  font-family: "Arial";
  position: relative;
}
.login-form >input{
  width: 100%;
  /* height: 7vw; */
  border: 0;
  outline: 0;
  border-radius: 20px;
  /* max-height: 50px;
  min-height: 30px; */
  margin: auto;
  padding: 10px;
  font-size: 17px;
  color: #555;
  position: relative;
  margin-bottom: 1rem;
}
#name_form-group,
#email_form-group{
  position: relative;
}
.invalid-feedback{
  position: absolute;
  left: 0%;
  bottom: 0rem;
  color: red;
  font-size: 10px;
  width: 204px;
  height: 15px;
  font-weight: bold;
  display: block;
  margin: 0;
}


button{
  outline: none;
  border: none;
  background-color: #FFF;
}
button:checked{
  outline: none;
  border: none;
  background-color: #FFF;
}
.login-btn{
  background: #3cc4eb;
  outline: 0;
  border: 0;
  color: #FFF;
  display: block;
  margin: 15px auto;
  border-radius: 10px;
  cursor: pointer;
  width: 100%;
  height: 7vw;
  max-height: 50px;
  min-height: 28px;
  font-size: 20px;
}
@media screen and (max-width:768px){
  .login-container{
      /* max-height: 36vw; */
  }
  .login-form{
      top: 7%;
      /* max-height: 89%; */
  }
  .login-form >label{
      font-size: 14px;
      margin: 0;
      padding: 1px 0;
  }
  .login-btn{
      font-size: 15px;
      margin: 15px 0;
      min-height: 25px;
  }
  .login-form >input{    
      min-height: 18px;
  }
  .invalid-feedback{
font-size: 7px;
  }
}

@media screen and (max-width:1366px) and (min-width:1024px) and (orientation: landscape){
  .login-container{
      max-width: 650px;
      /* max-height: 420px; */
  }
  .login-form >input,
  .login-btn{
      max-height: 45px;
  }
  .login-form{
      top: 48%;
      width: 45%;
      left: 7%;
  }
  .gameover-page .start-logo {
    max-width: 100%;
    width: 100%;
}
}
@media screen and (max-width:1050px) and (height:625px) {
  .login-container{
      max-width: 650px;
      max-height: 420px;
  }
  .login-form >input,
  .login-btn{
      max-height: 29px;
      FONT-SIZE: 16px;
  }
  .login-form{
      top: 47%;
  }
}
@media screen and (max-height:624px) and (orientation: landscape){
  .login-container{
      /* max-width: 490px; */
      /* max-height: 300px; */
      height: 100%;
  }
  .login-form-bg {
    width: 57%;
}
  .login-form >input,
  .login-btn{
      max-height: 40px;
      font-size: 12px;
      padding: 4px;
      height: 3vw;
  }
  .login-btn{
      margin: 10px auto;
  }
  .login-form{
      top: 44%;
      left: 8%;
      width: 42%;
  }


}


/* start Game*/
.game-page{
background: url(../images/flipping/game-bg.png);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
position: absolute;
display: none;

}
.right-img{
  max-width: 14vw;
  width: 100%;
}
#smily_img{display: none;}
#sad_img{display: none;}
.game-page .game-center{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
padding: 0 5px;
height: 100%;
width: 100%;
position: relative;
}
.game-page .game-center .left-sec{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
    -ms-flex-align: start;
        align-items: flex-start;
height: 100%;
max-width: 315px;
width: 30%;
min-width: 140px;
padding-top: 0;
padding-left: 60px;
position: absolute;
left: 0;
z-index: 2;
}
.game-page .game-center .left-sec .logo{
  height: 69%;
  margin-top: 1rem;
}
/* .game-page .game-center .left-sec .leg{
  height:100%;
} */
.game-page .game-center .right-sec .score{max-width: 153px;width: 100%;position: relative;height: -webkit-fit-content;height: -moz-fit-content;height: fit-content;}
.game-page .game-center .right-sec .score img{max-width: 100%;/* width: 100%; *//* height: fit-content; */}
.game-page .game-center .right-sec .score span{
  position: absolute;
  color: #ffffff;
  bottom: 24%;
  left: 62%;
  font-size: 18px;
  font-family: 'Arla InterFace';
  font-weight: 900;
}
.game-page .game-center .right-sec{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
    -ms-flex-align: end;
        align-items: flex-end;
height: 100%;
max-width: 315px;
width: 30%;
min-width: 140px;
padding-top: 16px;
padding-right: 10px;
position: absolute;
right: 0;
z-index: 2;
}
.game-center .right-sec .right-container{position: relative;height: 2%;margin-left: auto;}
.game-page .game-center .right-sec .timer{max-width: 190px;width: 100%;position: relative;height: -webkit-fit-content;height: -moz-fit-content;height: fit-content;}
.game-page .game-center .right-sec .timer img{
max-width: 100%;
}
.game-page .game-center .right-sec .timer #timer-num{
  position: absolute;
  color: #ffffff;
  bottom: 26%;
  right: 16%;
  font-size: 19px;
  font-family: 'Arla InterFace';
  font-weight: 900;
}


/* for flipping cards */
.memory-game {
max-width: 640px;
height: 61vh;
width: 100%;
margin: auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
    flex-wrap: wrap;
-webkit-perspective: 1000px;
        perspective: 1000px;
border-radius: 15px;
z-index: 10;
position: relative;
-webkit-box-sizing: border-box;
        box-sizing: border-box;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
}
.memory-game .custom-row{
height: 100%;
max-height: 13vh;
width: 100%;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
}

.memory-card {
margin: 0px auto;
-webkit-transform: scale(1);
    -ms-transform: scale(1);
        transform: scale(1);
-webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
-webkit-transition: -webkit-transform .5s;
transition: -webkit-transform .5s;
-o-transition: transform .5s;
transition: transform .5s;
transition: transform .5s, -webkit-transform .5s;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
position: relative;
width: 100%;
/* height: 100%; */
/* flex: 0 0 20%;
max-width: 20%; */
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
}

.memory-card:active {
-webkit-transform: scale(0.97);
    -ms-transform: scale(0.97);
        transform: scale(0.97);
-webkit-transition: -webkit-transform .2s;
transition: -webkit-transform .2s;
-o-transition: transform .2s;
transition: transform .2s;
transition: transform .2s, -webkit-transform .2s;
}

.memory-card.flip {
-webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);

}

.front-face,
.back-face {
max-width: 100%;
max-height: 100%;
position: absolute;
left: 0;
right: 0;
padding: 0 5px;
border-radius: 5px;
-webkit-backface-visibility: hidden;
        backface-visibility: hidden;
text-align: center;
}

.front-face {
-webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
max-width: 100%;
margin: 0 auto;
}
.back-face{
 max-width: 100%;
 left: 0;
 right: 0;
 -webkit-backface-visibility: hidden;
         backface-visibility: hidden;
 margin: auto;
}



/*win Page */

.win-page{
  height: 100vh;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  display: none;
  z-index: 20;
}

.win-page .win-center{
  background-image: url(../images/flipping/win_bg-07.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  position: relative;
}
.win-center .start-logo{
  top: 4%;
  left: 1%;
  z-index: 3;
  position: absolute;
  max-height: 100vh;
  z-index: 4;
  max-width: 9vw;
  width: 100%;
}
.win-center .start-logo img{
  max-width: 100%;
}
.win-page .head-img{
height: 100%;
max-width: 100%;
position: relative;
left: 0;
top: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
    -ms-flex-direction: column;
        flex-direction: column;
}
.win-page .head-img img{
max-width: 100%;
max-height: 680px;
}
.win-page .leader-btn{
border: 0;
background: transparent;
-webkit-box-shadow: none;
        box-shadow: none;
max-width: 12%;
margin: auto;
outline: 0;
position: absolute;
bottom: 4%;
left: 8%;
cursor: pointer;
height: 18vh;
right: 0;
z-index: 5;
}
.win-page .leader-btn img{
max-width: 100%;
max-height: 100%;
}

.game-score{
position: absolute;
bottom: 5px;
left: 0;
font-size: 20px;
line-height: 21px;
color: black;
right: 0;
margin: auto;
width: 100%;
text-align: center;
}


/*gameover Page */

.gameover-page{

  height: 100%;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  display: none;
  background-color: #f8353c;
}
.gameover-page .start-logo{
  top: 0%;
  left: 0%;
  position: relative;
  max-width: 100%;
  width: 86%;
  margin: auto;
}
.gameover-page .start-logo img{
  max-width: 100%;
  height: auto;
}

.gameover-page .gameover-img{height: 89%;max-width: 100%;max-height: 930px;position: relative;left: 0;top: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}
.gameover-page .gameover-img img{max-width: 100%;max-height: 100%;}
.gameover-page .leader-btn{border: 0;background: transparent;-webkit-box-shadow: none;box-shadow: none;max-width: 130px;width: 12%;margin: auto;outline: 0;position: absolute;bottom: 7%;left: 30%;cursor: pointer;height: 18vh;right: 0;z-index:5;}
.gameover-page .leader-btn img{
max-width: 100%;
max-height: 100%;
}













/*responsive*/
@media (min-height:767px) {
.gameover-page .leader-btn{
      bottom: 14%;
}

.win-page .leader-btn{
  
bottom: 4%;
}
}

@media (min-width: 991px) and (max-width: 1336px){
.login-bg .login .form-input input{
  font-size: 45px;
}
.start-page .start-btn{
  margin-top: -45px;
}
.s-down{
  width: 60px;
  height: 60px;
  bottom: 0;
}
.s-up{
  width: 60px;
  height: 60px;
  top: 0;
}


}


@media only screen and (max-width: 1366px) and (max-height: 950px){
  .game-page .game-center .right-sec .score,
  .game-page .game-center .right-sec .timer {
    max-width: 160px;
    position: relative;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
  }
  .game-page .game-center .right-sec .score span {
    /* bottom: 22%; */
    left: 62%;
    font-size: 18px;
  }
  .game-page .game-center .right-sec .timer #timer-num{
      font-size: 18px;
      /* bottom: 3.5%; */
  }
  
  
  }
@media only screen and (max-width:1366px) and (max-height: 800px){
    .game-page .game-center .right-sec .score,
    .game-page .game-center .right-sec .timer {
      max-width: 160px;
      position: relative;
      height: -webkit-fit-content;
      height: -moz-fit-content;
      height: fit-content;
    }
    .game-page .game-center .right-sec .score span {
      /* bottom: 22%; */
      left: 65%;
      font-size: 18px;
    }
    .game-page .game-center .right-sec .timer #timer-num{
        font-size: 18px;
        /* bottom: 24.5%; */
    }
    
    
}
@media only screen and (max-width:1366px) and (max-height: 800px){
  .gameover-page .start-logo {
     width: 97%;
}
    
}



@media (max-width:992px){

.start-page .start-btn{
  max-width: 210px;
}
.start-page .start-btn{
  margin-top: -10px;
}
.start-page .head-img {
  max-width: 95%;
}

}
@media (max-width:992px) and (orientation:landscape){
.start-page .head-img {
  max-width: 80%;
}
.game-page .game-center .right-sec .score, .game-page .game-center .right-sec .timer {
  /* max-width: 110px; */
  /* position: relative; */
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content !important;
}
.memory-game{
  max-width: 50%;
}
.game-page .leg img{
  width: 43%;
}
.game-page .logo img{

  width: 60%;
}
.game-page .right-img img{
  width: 65%;
}
.game-page .game-center .right-sec .score span {
  /* position: absolute; */
  /* top: 4%; */
  /* left: 62%; */
  /* font-size: 14px; */
  /* font-weight: bold; */
  /* font-family: 'NexaBold'; */
}
.game-page .game-center .right-sec .timer #timer-num {
  position: absolute;
  /* bottom: 3%; */
  right: 16%;
  font-size: 17px;

  font-weight: bold;
}

}




@media (max-width:560px){

.game-page .game-center .right-sec .timer #timer-num{
  left: 47%;
  /* bottom: 1.5%; */
}
.game-page .game-center .right-sec .score span{
  right: 30.5%;
  bottom: 1.5%;
}


}

@media (max-width:500px){

.start-page .start-btn{
  max-width: 130px;
  margin-top: -15px;
}
.game-page .game-center .right-sec .timer #timer-num{
  font-size: 10px;
  /* bottom: 2%; */
}
.game-page .game-center .right-sec .score span{
  font-size: 10px;
  bottom: 2.5%;
}
} 


@media only screen and (device-width: 823px) and (device-height: 411px) and (orientation:landscape) {

  .game-page .game-center .right-sec .timer #timer-num {
    position: absolute;
    top: 7%;
    right: 17%;
    font-size: 14px;
    font-weight: bold;
}
.game-page .game-center .right-sec .score span {
  position: absolute;
  top: 8%;
  left: 62%;
  font-size: 14px;
  font-weight: bold;
}
.win-page .head-img img {
  max-width: 70%;
  max-height: 680px;
}
.win-page .leader-btn img {
  max-width: 68%;
  max-height: 100%;
}
  .win-page .leader-btn {
    top: 50%;
    bottom: 0 !important;
    -webkit-transform: translateY(65%);
        -ms-transform: translateY(65%);
            transform: translateY(65%);
    max-width: 22%;
}


}
@media only screen and  (max-device-width:768px) and (orientation:landscape){
  .question-poup .question{
       -webkit-transform: translateY(-55%);
           -ms-transform: translateY(-55%);
               transform: translateY(-55%);
       max-width: 840px;
       max-height: 55%;
  }
  .game-page .logo img{
    width: 53%;
  }
  .question-poup .question .next-btn{
    max-width: 100px;
       -webkit-transform: translateY(60px);
           -ms-transform: translateY(60px);
               transform: translateY(60px);
  }
  .win-page .leader-btn {
    bottom: 0%;
    top: 83%;
   
}
  .game-page .game-center .right-sec .timer #timer-num {
   position: absolute;
   /* bottom: 18%; */
   right: 17%;
   font-size: 13px;
   font-weight: bold;
 }
 .game-page .game-center .right-sec .score span {
  /* bottom: 13%; */
  font-size: 14px;
}

 }

@media only screen and  (max-device-width:728px) and (orientation:landscape){
 .question-poup .question{
      -webkit-transform: translateY(-55%);
          -ms-transform: translateY(-55%);
              transform: translateY(-55%);
      max-width: 840px;
      max-height: 55%;
 }
 .game-page .logo img{
   width: 53%;
 }
 .question-poup .question .next-btn{
   max-width: 100px;
      -webkit-transform: translateY(60px);
          -ms-transform: translateY(60px);
              transform: translateY(60px);
 }
 .game-page .game-center .right-sec .timer #timer-num {
  position: absolute;
  /* bottom: 3%; */
  right: 17%;
  font-size: 13px;
  font-weight: bold;
}

}
@media only screen and  (max-device-width:700px) and (device-height: 375px) and  (orientation:landscape){
  .question-poup .question{
       -webkit-transform: translateY(-55%);
           -ms-transform: translateY(-55%);
               transform: translateY(-55%);
       max-width: 840px;
       max-height: 55%;
  }
  .game-page .logo img{
    width: 53%;
  }
  .question-poup .question .next-btn{
    max-width: 100px;
       -webkit-transform: translateY(60px);
           -ms-transform: translateY(60px);
               transform: translateY(60px);
  }
  .game-page .game-center .right-sec .timer #timer-num {
   position: absolute;
   bottom: 19%;
   right: 17%;
   font-size: 13px;
   font-weight: bold;
 }
 .game-page .game-center .right-sec .score span {

  bottom: 16%;
  left: 62%;
  font-size: 14px;

}
}
@media only screen and (device-width: 653px) and (device-height: 280px) and (orientation:landscape) {

  .game-page .game-center .right-sec .timer #timer-num {
    position: absolute;
    top: 11%;
    right: 17%;
    font-size: 13px;
    font-weight: bold;
}
.game-page .game-center .right-sec .score span {
  position: absolute;
  top: 11%;
  left: 62%;
  font-size: 14px;
  font-weight: bold;
}

}
@media only screen and (device-width: 640px) and (max-device-height: 385px) and (orientation:landscape) {

  .game-page .game-center .right-sec .timer #timer-num {
    position: absolute;
    bottom: 16.5%;
    right: 17%;
    font-size: 13px;
    font-weight: bold;
}
.game-page .game-center .right-sec .score span {
  position: absolute;
  bottom: 14%;
  left: 62%;
  font-size: 14px;
  font-weight: bold;
}

}
@media only screen and  (max-device-width:568px) and (device-height: 320px) and  (orientation:landscape){
  .question-poup .question{
       -webkit-transform: translateY(-55%);
           -ms-transform: translateY(-55%);
               transform: translateY(-55%);
       max-width: 840px;
       max-height: 55%;
  }
  .game-page .logo img{
    width: 53%;
  }
  .question-poup .question .next-btn{
    max-width: 100px;
       -webkit-transform: translateY(60px);
           -ms-transform: translateY(60px);
               transform: translateY(60px);
  }
  .game-page .game-center .right-sec .timer #timer-num {
   position: absolute;
   /* bottom: 4%; */
   right: 17%;
   font-size: 13px;
   font-weight: bold;
 }
 .game-page .game-center .right-sec .score span {
  position: absolute;
  bottom: 5%;
  left: 62%;
  font-size: 14px;
  font-weight: bold;
}

}
@media only screen and  (max-device-width:480px) and (device-height: 320px) and  (orientation:landscape){
  .question-poup .question{
       -webkit-transform: translateY(-55%);
           -ms-transform: translateY(-55%);
               transform: translateY(-55%);
       max-width: 840px;
       max-height: 55%;
  }
  .game-page .logo img{
    width: 53%;
  }
  .question-poup .question .next-btn{
    max-width: 100px;
       -webkit-transform: translateY(60px);
           -ms-transform: translateY(60px);
               transform: translateY(60px);
  }
  .game-page .game-center .right-sec .timer #timer-num {
   position: absolute;
   /* bottom: 26%; */
   right: 17%;
   font-size: 8px;
   font-weight: bold;
 }
 .game-page .game-center .right-sec .score span {
  position: absolute;
  bottom: 14%;
  left: 62%;
  font-size: 10px;
  font-weight: bold;
}

}
@media (max-width:450px){
.overlay .q-content{
  padding: 12%;
}
.overlay .q-content .answer label {
  font-size: 12px;
  line-height: 12px;
}
.overlay .q-content .q-title {
  font-size: 15px;
  line-height: 16px;
  margin-bottom: 7px;
}
.overlay .q-content .next {
  max-width: 135px;
}

.s-up {
  width: 40px;
  height: 40px;
  top: -15vh;
  right: 9vw;
}
.s-down {
  width: 40px;
  height: 40px;
  top: 13vh;
  right: 9vw;
}
.game-page .game-center .right-sec .score span {
  top: 1.5%;
  left: 62%;
  font-size: 10px;
}
.game-page .game-center .right-sec .timer #timer-num {
  font-size: 10px;
  top: 1.5%;
}


}






/*Ipad style*/
@media only screen and (device-width : 768px) and (device-height : 1024px){
/* .memory-game{
  max-height: 30%;
  max-width: 84%;
} */

.game-page .game-center .right-sec .score span {
  top: 2%;
  left: 62%;
  font-size: 16px;
}
.game-page .game-center .right-sec .timer #timer-num {
  font-size: 16px;
  top: 2%;
}
.s-up {
  width: 40px;
  height: 40px;
  top: -13vh;
  right: 7vw;
}
.s-down {
  width: 40px;
  height: 40px;
  top: 9vh;
  right: 7vw;
}
.win-page .leader-btn {
  bottom: 22%;
}
.gameover-page .leader-btn {
  top: 45% ;
}

}

@media only screen and (device-height : 768px) and (device-width : 1024px){
/* .memory-game{
  max-height: 35%;
  max-width: 56%;
} */
.login-form-bg {
  width: 68%;
}
.login-form {
  top: 48%;
  width: 55%;
  left: 7%;
}
.game-page .game-center .right-sec .score,
.game-page .game-center .right-sec .timer{
  height: 8vh;
}
.game-page .game-center .right-sec .score span {
  /* bottom: 26%; */
  left: 61%;
  font-size: 16px;
}
.game-page .game-center .right-sec .timer #timer-num {
  font-size: 16px;
  /* bottom: 100%;  */
}
.s-up {
  width: 40px;
  height: 40px;
  top: -23vh;
  right: 7vw;
}
.s-down {
  width: 40px;
  height: 40px;
  top: 18vh;
  right: 7vw;
}

}

@media (max-width : 1024px){
/* .memory-game{
  max-height: 35%;
  max-width: 56%;
} */
.login-form-bg {
  width: 68%;
}
.login-form {
  top: 48%;
  width: 55%;
  left: 7%;
}
.gameover-page .start-logo {
  max-width: 100%;
  width: 100%;
}
.game-page .game-center .right-sec .timer {
  max-width: 190px;
  width: 100%;
  position: relative;
  height: 8vh;
}
.game-page .game-center .right-sec .score {
  max-width: 153px;
  width: 100%;
  position: relative;
  height: 8vh;
}
}
@media (max-width:1049px){
  .game-page .game-center .right-sec .score, .game-page .game-center .right-sec .timer {
    /* max-width: 110px; */
    /* position: relative; */
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: 8vh !important;
  }
  .game-page .game-center .right-sec .score span, 
  .game-page .game-center .right-sec .timer #timer-num{
    /* max-width: 110px; */
    /* position: relative; */
   
    top: 40% !important;
  }
}
@media (max-width: 992px) {
  .gameover-page .start-logo {
    max-width: 87%;
    width: 100%;
}
.game-page .game-center .right-sec .score,
.game-page .game-center .right-sec .timer{
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content !important;
}
.game-page .game-center .right-sec .score span, 
.game-page .game-center .right-sec .timer #timer-num{
  /* max-width: 110px; */
  /* position: relative; */
 
  bottom: 26%;
}
}
/* ------------------------------------------------------------------------------------ */
/*Ipad pro*/
/* @media only screen and  (max-device-width: 1200px)
{
  .game-page .game-center .right-sec .score,
.game-page .game-center .right-sec .timer{
  height:  8em !important;
}
.game-page .game-center .right-sec .score span,
.game-page .game-center .right-sec #timer-num span {
  top:  1.2em !important;
}

} */
@media only screen and (device-width : 1024px) and (device-height : 1366px){
/* .memory-game{
  max-height: 25%;
  max-width: 70%;
} */

.s-up {
  width: 50px;
  height: 50px;
  top: -13vh;
  right: 7vw;
}
.s-down {
  width: 50px;
  height: 50px;
  top: 10vh;
  right: 7vw;
}
.game-page .game-center .right-sec .score span {
  top: 2.5%;
  left: 62%;
  font-size: 16px;
}
.game-page .game-center .right-sec .timer #timer-num {
  font-size: 16px;
  top: 2%;
}
.win-page .leader-btn{
  top: 0;
  bottom: 21% !important;
  -webkit-transform: translateY(65%);
      -ms-transform: translateY(65%);
          transform: translateY(65%);
  max-width: 22%;
}
.gameover-page .leader-btn {
  top: 45% ;
}
}
@media only screen and (device-width : 1366px) and (device-height : 1024px) {
.s-up {
  width: 60px;
  height: 60px;
  top: -21vh;
  right: 7vw;
}
.s-down {
  width: 60px;
  height: 60px;
  top: 15vh;
  right: 7vw;
}
.game-page .game-center .right-sec .score span {
  /* top: 4%; */
  left: 62%;
  font-size: 16px;
}
.game-page .game-center .right-sec .timer #timer-num {
  font-size: 16px;
  /* top: 3.5%; */
}
.win-page .leader-btn{
  top: 50%;
  bottom: 0 !important;
  -webkit-transform: translateY(65%);
      -ms-transform: translateY(65%);
          transform: translateY(65%);
  max-width: 22%;
}

}
/* ----------------------------------------------------------------------------------- */

/* IphoneX */
@media only screen and (device-width : 375px) and (device-height : 812px){
  .s-up {
    width: 60px;
    height: 60px;
    top: -21vh;
    right: 7vw;
  }
  .s-down {
    width: 60px;
    height: 60px;
    top: 15vh;
    right: 7vw;
  }
  .game-page .game-center .right-sec .score span {
    top: 1.5%;
    left: 62%;
    font-size: 10px;
  }
  .game-page .game-center .right-sec .timer #timer-num {
    font-size: 11px;
    top: 1%;
  }
  .win-page .leader-btn {
    top:0;
  }
}
@media only screen and (device-width : 812px) and (device-height : 375px){
    .s-up {
      width: 60px;
      height: 60px;
      top: -21vh;
      right: 7vw;
    }
    .s-down {
      width: 60px;
      height: 60px;
      top: 15vh;
      right: 7vw;
    }
    .game-page .game-center .right-sec .score span {
      bottom: 23%;
      left: 62%;
      font-size: 16px;
    }
    .game-page .game-center .right-sec .timer #timer-num {
      font-size: 16px;
      top: 8%;
    }
    .win-page .head-img img {
      max-width: 65%;
      max-height: 680px;
  }
    .win-page .leader-btn img {
      max-width: 83%;
      max-height: 100%;
  }
 
}
@media (max-width : 570px) {
  .login-form-bg {
    width: 77%;
    top: 26%;
}
.login-form {
  top: 54%;
  left: 13%;
  width: 54%;
}
}
@media (max-width : 480px) {
  .login-form-bg {
    width: 87%;
    top: 26%;
}
.login-form {
  top: 54%;
  left: 13%;
  width: 63%;
}
}
    /* ------------------------------------------------------------------------------ */
@media only screen and (device-width : 412px) and (device-height : 732px){
     
      .win-page .head-img img {
        max-width: 100%;
        max-height: 680px;
    }
      .win-page .leader-btn img {
        max-width: 100%;
        max-height: 100%;
    }
      .win-page .leader-btn {
        top: 7%;
        bottom: 0 !important;
        -webkit-transform: translateY(65%);
            -ms-transform: translateY(65%);
                transform: translateY(65%);
        max-width: 22%;
    }
  }



/*rotateMessage*/
.rotateMessage{
  text-align: center;
  display: none;
  position: absolute;
  top: 0;
  background-color: #000000e3;
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  z-index: 9999;
  
}
.rotateMessage-container{
width: 100%;
height: 100%;
position: relative;
margin: auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;

}
.rotateMessage-content{
position: relative;
background-color: #FFF;
width: 100%;
max-width: 80%;
height: 100%;
max-height: 32%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
border-radius: 25px;
}
.rotateMessage-text{
text-align: center;
color: #01303f;
font-family: 'Nexa Bold';
font-size: 27px;
line-height: 29px;
}