body{ margin: 0; font-family: 'Mukta', sans-serif; }
  

  /*hide checkbox*/
  input{position:fixed; left:-30px; top:0px; z-index: -2;}
  
  h1{margin:0; text-align:center;}
  
  h2{position:fixed; right:20px; bottom:0; font-size:18px; color:red;}
  
  /*play area*/
  .wrapper{  
/*height: 74vh;   
  position: relative;
  cursor: crosshair;
  overflow: hidden;*/
    position: relative;
  overflow: hidden;
  }
  .pajaro,
.pajaro-w{
  display: none;
}

input[type=radio]{
 color:white;
}
input[type=checkbox]{
  width: 20px;
  height: 20px;
  color:white;
}

input[type=checkbox]:after {
  content: "";
  border-bottom: 10px solid white;
  border-top: 10px solid white;
  display: block;
  opacity: 1;
}

input[type=checkbox]:checked:after {
  border-bottom: 10px solid white;
  border-top: 10px solid white;
}

.sum{ position:absolute; font-size:28px; font-weight:bold; color: #101010; top: 0; right: 0; text-align: center; width:12%; background: #dfe4cc; border-radius: 0 0 10px 10px;}
.sum img{ width: 100%; position: relative; top: -15px;}
.sum p{ font-size: 4em; margin: 0; line-height: 120px;}
  
  .input-circle ~ .pajaro{
    transition:1s  cubic-bezier(0,.43,1,0);
    animation: move 3s infinite alternate;
  }

  .input-circle-n ~ .pajaro-w{
    transition:1s  cubic-bezier(0,.43,1,0);
    animation: move2 3s infinite alternate;
  }

  .input-circle1:not(:checked) ~ .pajaro1,
  .input-circle2:not(:checked) ~ .pajaro2,
  .input-circle3:not(:checked) ~ .pajaro3,
  .input-circle4:not(:checked) ~ .pajaro4,
  .input-circle5:not(:checked) ~ .pajaro5,
  .input-circle6:not(:checked) ~ .pajaro6,
  .input-circle7:not(:checked) ~ .pajaro7,
  .input-circle8:not(:checked) ~ .pajaro8,
  .input-circle9:not(:checked) ~ .pajaro9,
  .input-circle10:not(:checked) ~ .pajaro10,
  .input-circle11:not(:checked) ~ .pajaro11,
  .input-circle12:not(:checked) ~ .pajaro12,
  .input-circle13:not(:checked) ~ .pajaro13,
  .input-circle14:not(:checked) ~ .pajaro14,
  .input-circle15:not(:checked) ~ .pajaro15,
  .input-circle16:not(:checked) ~ .pajaro16,
  .input-circle17:not(:checked) ~ .pajaro17
  {
    opacity:1; 
  }
  
  .pajaro{ 
    opacity:0;
    position:absolute;
    left:0;  
    cursor:crosshair;
  }
  .pajaro>span{
    display:none;
    position: absolute;
    z-index: 2;
    left: -36%;
    bottom: -23%;
  /*  background-color: green;
    border: solid 1px #000;
    width: 105px;
    height: 30px;
    padding: 4px;
    border-radius: 50%;*/
  }
  .pajaro>span:before{
    /*content:"योग्य!!"; */
    content:"";
    color: #fff;
    font-weight: bold; font-size: 30px;
  }
  
   .pajaro-w{  
    opacity:0;   
    position:absolute;
    left:0;  
    cursor:crosshair;
  }
  .pajaro-w>span{
    display:none;
    position: absolute;
    z-index: 2;
    left: -36%;
    bottom: -23%;
  /*  background-color: red;
    border: solid 1px #000;
    width: 105px;
    height: 30px;
    padding: 4px;
    border-radius: 50%;*/
  }
 .pajaro-w>span:before{
    /*content:"अयोग्य!!";*/
     content:"";
	color: #fff;
    font-weight: bold;
	font-size:30px;
  }


.pajaro2{
    top:90px;
    background:url('../images/corn-seed.png') no-repeat;
    animation-delay:-0.2s!important;
    transform:scale(0.8);
}

.pajaro4{
    top:280px;
    background:url('../images/corn-seed.png') no-repeat;
    animation-delay:-0.5s!important;
    transform:scale(0.8);
}

.pajaro5{
    top:180px;
    background:url('../images/corn-seed.png') no-repeat;
    animation-delay:-0.8s!important;
    transform:scale(0.8);
}

.pajaro7{
    top:140px;
    background:url('../images/corn-seed.png') no-repeat;
    animation-delay:-1.1s!important;
    transform:scale(0.8);
}

.pajaro8{
    top:240px;
    background:url('../images/corn-seed.png') no-repeat;
    animation-delay:-1.4s!important;
    transform:scale(0.8);
}

.pajaro9{
    top:340px;
    background:url('../images/corn-seed.png') no-repeat;
    animation-delay:-1.7s!important;
    transform:scale(0.8);
}

.pajaro10{
    top:40px;
    background:url('../images/corn-seed.png') no-repeat;
    animation-delay:-2s!important;
    transform:scale(0.8);
}

.pajaro11{
    top:390px;
    background:url('../images/corn-seed.png') no-repeat;
    animation-delay:-2.3s!important;
    transform:scale(0.8);
}

.pajaro14{
    top:160px;
    background:url('../images/corn-seed.png') no-repeat;
    animation-delay:-2.6s!important;
    transform:scale(0.8);
}

.pajaro17{
    top:70px;
    background:url('../images/corn-seed.png') no-repeat;
    animation-delay:-2.9s!important;
    transform:scale(0.8);
}

  
  
.pajaro1,
.pajaro3,
.pajaro6,
.pajaro12,
.pajaro13,
.pajaro15,
.pajaro16{
  background:url('../images/wrong-ans/wrong-corn-seed.png') no-repeat;
  transform:scale(0.5);
}

.pajaro1{ top:50px; animation-delay:-0.5s!important; }
.pajaro3{ top:120px; animation-delay:-1.5s!important; }
.pajaro6{ top:220px; animation-delay:-2.5s!important; }
.pajaro12{ top:340px; animation-delay:-3.5s!important; }
.pajaro13{ top:80px; animation-delay:-4.2s!important; }
.pajaro15{ top:260px; animation-delay:-5s!important; }
.pajaro16{ top:30px; animation-delay:-5.8s!important; }


.input-circle1:checked ~ .pajaro1 span,
.input-circle2:checked ~ .pajaro2 span,
.input-circle3:checked ~ .pajaro3 span,
.input-circle4:checked ~ .pajaro4 span,
.input-circle5:checked ~ .pajaro5 span,
.input-circle6:checked ~ .pajaro6 span,
.input-circle7:checked ~ .pajaro7 span,
.input-circle8:checked ~ .pajaro8 span,
.input-circle9:checked ~ .pajaro9 span,
.input-circle10:checked ~ .pajaro10 span,
.input-circle11:checked ~ .pajaro11 span,
.input-circle12:checked ~ .pajaro12 span,
.input-circle13:checked ~ .pajaro13 span,
.input-circle14:checked ~ .pajaro14 span,
.input-circle15:checked ~ .pajaro15 span,
.input-circle16:checked ~ .pajaro16 span,
.input-circle17:checked ~ .pajaro17 span
{
  display:block;  
}
  
  @keyframes move{
    0%{left:0%;}
    10%{top:70%; left:10%; }
    20%{top:20%; left:50%;}
    30%{top:70%; left:70%;}
    40%{top:20%; left:50%;}
    50%{top:30%; left:20%; }
    60%{left:20%;top:80%; }
    70%{top:30%; left:60%;}
    80%{top:20%;left:80%;}
    90%{top:50%;left:50%;}
    100%{top:90%; left:70%; }
    }
  
    @keyframes move2{
    0%{left:0%;}
    20%{top:50%; left:70%;}
    40%{top:90%; left:10%;}
    50%{top:50%; left:100%; }
    70%{top:30%; left:30%;}
    80%{top:90%;left:20%;}
    100%{top:10%; left:10%; }
    }

    
  
  .gameover{
  position: absolute;
  z-index:10000;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background: rgba(0,0,0,0.8);
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  }

.gameover form1{
 z-index:10001;   
}

.gameover p{font-size: 36px;
  color: #fff;
  font-weight: 400;
  text-align: center;
  text-indent: 0;
  line-height: 48px;
  margin: 0 0 15px 0;}
  
  @keyframes gameover{
  0%{left:-5000px;bottom:100%;}
  97%{left:-5000px;bottom:100%;}
  100%{ left:0px;}
  }
  
  /*------------------------------------------------------ body of the bird
  */
  .pajaro{
    line-height:27px;
    letter-spacing: 2px;
    font-size:0.7em;
    text-align:center;
    position:absolute;
    /*margin-top:-20px; margin-left:-10px;*/
    width:100px; height:100px;
    /*animation:planeo 2s linear infinite;*/
    z-index:999;
  }


  .pajaro-w{
    line-height:27px;
    letter-spacing: 2px;
    font-size:2em;
    text-align:center;
    position:absolute;
   /* margin-top:-20px; margin-left:-10px;*/
    width:100px; height:100px;
   /* animation:planeo 2s linear infinite;*/
    z-index:999;
  }
  
  /*------------------------------------------------------ bird animation
  */
  
  @keyframes planeo {
    40%{
      transform:rotateZ(2deg) translateX(2px) translateY(10px) translateZ(0);
      line-height:16px;
      font-size:0.6em;
    }
    80%{
      transform:rotateZ(-2deg) translateX(5px) translateY(8px) translateZ(0);
    }
  }

  
.top-header-page{ padding-top: 12px;}

.container{ width: 75em; margin: 0 auto;}

.logo-box { display: inline-block; width: 30%;}

.back-box{ width: 70%; display: inline-block; float: right;}

.back-box p{ text-align: right; margin: 0;}

.back-box a {
    display: inline-block;
    padding:15px 40px;
    border-radius: 30px;
    color: #fff;
    text-align: center;
    background: #049c49;
    text-decoration: none;
    margin-top: 15px;  font-size: 17px;
}

.back-box a:hover {
    background: #f6940d;
}

.sub-header-sec {
    background: #f6f4f4;
    padding:69px 0;
}
.logo1 {
    color: #049c49;
    text-align: center;
    margin: 0; 
}

.line{ position: relative; top: -2px;}

.form-btn{  background: #f89607;
    color: #fff;
    border: none;
    padding: 10px 27px;
    border-radius: 10px;
    cursor: pointer;
    letter-spacing: 1px;}
.form-btn:hover{ background: #049c49;}	

.gameover h1{
    font-size:80px; color:white; font-weight:bold; text-align:center; 
    text-indent:0;  
    line-height:500px;
    position: relative; 
    top: 22%;}

.game-sec{ background: url(../images/bg1.jpg) no-repeat center; background-size: cover; /*height: 44em;*/}


/*==fire css and corn grow css==*/
.oniongrowsec{
position: absolute;
width:243px;
height:344px;
bottom: 0;
right: 0;
padding: 0;
background-repeat: no-repeat;
background-size: 100%; background-position: center;
}

.firetap:nth-child(5) {
  position: absolute;
  bottom: 170px;
  left: 50px;
  width: 1920px;
  height: 200px;
  display: flex;
  align-items: flex-end;
}

.firetap:nth-child(6) {
  position: absolute;
  bottom: 130px;
  left: 50px;
  width: 1920px;
  height: 200px;
  display: flex;
  align-items: flex-end;
}

.firetap:nth-child(7) {
  position: absolute;
  bottom: 120px;
  left: 50px;
  width: 1920px;
  height: 200px;
  display: flex;
  align-items: flex-end;
}

.firetap:nth-child(8) {
  position: absolute;
  bottom: 100px;
  left: 50px;
  width: 1920px;
  height: 200px;
  display: flex;
  align-items: flex-end;
}

.firetap:nth-child(5) .firetip {
  width: 25px;
  height: 25px;
  background: #d21b00;
  box-shadow: 0px 0px 45px 5px rgba(206, 30, 4, 0.5);
  border-radius: 25px;
  opacity: 0;
}

.firetap:nth-child(6) .firetip {
  width: 25px;
  height: 25px;
  background: #ff980d;
  box-shadow: 0px 0px 45px 5px rgba(253, 152, 15, 0.5);
  border-radius: 25px;
  opacity: 0;
}

.firetap:nth-child(7) .firetip {
  width: 25px;
  height: 25px;
  background: #ffe479;
  box-shadow: 0px 0px 45px 5px rgba(253, 227, 123, 0.5);
  border-radius: 25px;
  opacity: 0;
}

.firetap:nth-child(8) .firetip {
  width: 25px;
  height: 25px;
  background: #fef1d9;
  box-shadow: 0px 0px 45px 5px rgba(254, 241, 217, 0.5);
  border-radius: 25px;
  opacity: 0;
}

.fireCont {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1920px;
  height: 500px;
  display: flex;
  align-items: flex-end; visibility: hidden;
}

.fire {
  position: relative;
  float: left;
  width: 50px;
  border-radius: 25px;
  height: 100%;
}

.fireCont:nth-child(1) {
  height: 200px;
}

.fireCont:nth-child(1) .fire {
  background: #d21b00;
  box-shadow: 0px 0px 45px 5px rgba(206, 30, 4, 0.5);
}

.fireCont:nth-child(2) {
  height: 190px;
}

.fireCont:nth-child(2) .fire {
  background: #ff980d;
  box-shadow: 0px 0px 45px 5px rgba(253, 152, 15, 0.5);
}

.fireCont:nth-child(3) {
  height: 150px;
}

.fireCont:nth-child(3) .fire {
  background: #ffe479;
  box-shadow: 0px 0px 45px 5px rgba(253, 227, 123, 0.5);
}

.fireCont:nth-child(4) {
  height: 130px;
}

.fireCont:nth-child(4) .fire {
  background: #fef1d9;
  box-shadow: 0px 0px 45px 5px rgba(254, 241, 217, 0.5);
}

.fireCont:nth-child(1) .fire:nth-child(1) {
  animation: flameone 3s ease-in-out 0.09s infinite alternate;
}

.fireCont:nth-child(2) .fire:nth-child(1) {
  animation: flametwo 1s ease-in 0.09s infinite alternate;
}

.fireCont:nth-child(3) .fire:nth-child(1) {
  animation: flamethree 1s ease 0.09s infinite alternate;
}

.fireCont:nth-child(4) .fire:nth-child(1) {
  animation: flamefour 1s ease-out 0.09s infinite alternate;
}

.firetap:nth-child(5) .firetip:nth-child(1) {
  animation: flameoff 4s ease-in-out 0.09s infinite;
}

.firetap:nth-child(6) .firetip:nth-child(1) {
  animation: flameoff 3s ease-in-out 0.09s infinite;
}

.firetap:nth-child(7) .firetip:nth-child(1) {
  animation: flameoff 1s ease-in-out 0.09s infinite;
}

.firetap:nth-child(8) .firetip:nth-child(1) {
  animation: flameoff 5s ease-in-out 0.09s infinite;
}

.fireCont:nth-child(1) .fire:nth-child(2) {
  animation: flameone 1s ease-in-out 0.18s infinite alternate;
}

.fireCont:nth-child(2) .fire:nth-child(2) {
  animation: flametwo 2s ease-in 0.18s infinite alternate;
}

.fireCont:nth-child(3) .fire:nth-child(2) {
  animation: flamethree 3s ease 0.18s infinite alternate;
}

.fireCont:nth-child(4) .fire:nth-child(2) {
  animation: flamefour 2s ease-out 0.18s infinite alternate;
}

.firetap:nth-child(5) .firetip:nth-child(2) {
  animation: flameoff 1s ease-in-out 0.18s infinite;
}

.firetap:nth-child(6) .firetip:nth-child(2) {
  animation: flameoff 3s ease-in-out 0.18s infinite;
}

.firetap:nth-child(7) .firetip:nth-child(2) {
  animation: flameoff 2s ease-in-out 0.18s infinite;
}

.firetap:nth-child(8) .firetip:nth-child(2) {
  animation: flameoff 2s ease-in-out 0.18s infinite;
}

.fireCont:nth-child(1) .fire:nth-child(3) {
  animation: flameone 2s ease-in-out 0.27s infinite alternate;
}

.fireCont:nth-child(2) .fire:nth-child(3) {
  animation: flametwo 3s ease-in 0.27s infinite alternate;
}

.fireCont:nth-child(3) .fire:nth-child(3) {
  animation: flamethree 1s ease 0.27s infinite alternate;
}

.fireCont:nth-child(4) .fire:nth-child(3) {
  animation: flamefour 1s ease-out 0.27s infinite alternate;
}

.firetap:nth-child(5) .firetip:nth-child(3) {
  animation: flameoff 4s ease-in-out 0.27s infinite;
}

.firetap:nth-child(6) .firetip:nth-child(3) {
  animation: flameoff 2s ease-in-out 0.27s infinite;
}

.firetap:nth-child(7) .firetip:nth-child(3) {
  animation: flameoff 5s ease-in-out 0.27s infinite;
}

.firetap:nth-child(8) .firetip:nth-child(3) {
  animation: flameoff 5s ease-in-out 0.27s infinite;
}

.fireCont:nth-child(1) .fire:nth-child(4) {
  animation: flameone 3s ease-in-out 0.36s infinite alternate;
}

.fireCont:nth-child(2) .fire:nth-child(4) {
  animation: flametwo 3s ease-in 0.36s infinite alternate;
}

.fireCont:nth-child(3) .fire:nth-child(4) {
  animation: flamethree 3s ease 0.36s infinite alternate;
}

.fireCont:nth-child(4) .fire:nth-child(4) {
  animation: flamefour 2s ease-out 0.36s infinite alternate;
}

.firetap:nth-child(5) .firetip:nth-child(4) {
  animation: flameoff 5s ease-in-out 0.36s infinite;
}

.firetap:nth-child(6) .firetip:nth-child(4) {
  animation: flameoff 3s ease-in-out 0.36s infinite;
}

.firetap:nth-child(7) .firetip:nth-child(4) {
  animation: flameoff 2s ease-in-out 0.36s infinite;
}

.firetap:nth-child(8) .firetip:nth-child(4) {
  animation: flameoff 3s ease-in-out 0.36s infinite;
}

.fireCont:nth-child(1) .fire:nth-child(5) {
  animation: flameone 2s ease-in-out 0.45s infinite alternate;
}

.fireCont:nth-child(2) .fire:nth-child(5) {
  animation: flametwo 2s ease-in 0.45s infinite alternate;
}

.fireCont:nth-child(3) .fire:nth-child(5) {
  animation: flamethree 2s ease 0.45s infinite alternate;
}

.fireCont:nth-child(4) .fire:nth-child(5) {
  animation: flamefour 2s ease-out 0.45s infinite alternate;
}

.firetap:nth-child(5) .firetip:nth-child(5) {
  animation: flameoff 1s ease-in-out 0.45s infinite;
}

.firetap:nth-child(6) .firetip:nth-child(5) {
  animation: flameoff 1s ease-in-out 0.45s infinite;
}

.firetap:nth-child(7) .firetip:nth-child(5) {
  animation: flameoff 2s ease-in-out 0.45s infinite;
}

.firetap:nth-child(8) .firetip:nth-child(5) {
  animation: flameoff 5s ease-in-out 0.45s infinite;
}

.fireCont:nth-child(1) .fire:nth-child(6) {
  animation: flameone 2s ease-in-out 0.54s infinite alternate;
}

.fireCont:nth-child(2) .fire:nth-child(6) {
  animation: flametwo 3s ease-in 0.54s infinite alternate;
}

.fireCont:nth-child(3) .fire:nth-child(6) {
  animation: flamethree 2s ease 0.54s infinite alternate;
}

.fireCont:nth-child(4) .fire:nth-child(6) {
  animation: flamefour 2s ease-out 0.54s infinite alternate;
}

.firetap:nth-child(5) .firetip:nth-child(6) {
  animation: flameoff 3s ease-in-out 0.54s infinite;
}

.firetap:nth-child(6) .firetip:nth-child(6) {
  animation: flameoff 2s ease-in-out 0.54s infinite;
}

.firetap:nth-child(7) .firetip:nth-child(6) {
  animation: flameoff 5s ease-in-out 0.54s infinite;
}

.firetap:nth-child(8) .firetip:nth-child(6) {
  animation: flameoff 2s ease-in-out 0.54s infinite;
}

@keyframes flameone {
  to {
    height: 120%;
  }
}
@keyframes flametwo {
  to {
    height: 90%;
  }
}
@keyframes flamethree {
  to {
    height: 110%;
  }
}
@keyframes flamefour {
  to {
    height: 80%;
  }
}
@keyframes flameoff {
  0% {
    opacity: 0;
    transform: translateY(0px) scale(0.7, 0.7);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-100px) scale(0.1, 0.1);
  }
}


.nutrition-form{ display: none;}
.next-popupbtn{ display: inline-block;
  background: #fa0;
  color: #101010;
  text-decoration: none;
  font-size: 20px;
  padding: 12px 24px;
  border-radius: 6px;
  border: none;  font-weight: 700; margin: 0 5px;}
.next-popupbtn:hover { background: #eb8200;}  
.collect-form-sec{ text-align: center;}

.score-page-sec{  background:url(../images/nutrition-bg.jpg) no-repeat center;
  width:100%;
  height:100%; background-size: cover;}



/*.wrapper {
  display: none;
}*/

.rules-popup .modal-dialog{  max-width: 34%; margin: 0 auto; height: inherit;}
.rules-popup .modal-content{ background: #dfe4cc url(../images/bg2.png) no-repeat; background-size: cover; padding:40px 40px; border-radius: 20px;}
.rules-popup .modal-content h5{color: #101010; font-size: 24px; font-weight: 600; line-height: 30px; font-family: "Noto Sans", sans-serif; text-align: center;}
.rules-popup .modal-header{ display: block;border: none; border-radius: 0; padding: 0 0 30px 0;}
.rules-popup .modal-body{ padding: 0;}
.rules-popup .modal-body ul{ padding: 0; margin-left: 20px;}
.rules-popup .modal-body li{ color: #101010;font-family: "Noto Sans", sans-serif; margin-bottom: 12px; font-size: 20px;}
.rules-popup .btn-close {
    background: #eb8200;
    width: 20px;
    height: 20px;
    position: absolute;
    right: 18px;
    top: 18px;
    border-radius: 50%;
    text-align: center;
    padding: 6px;
    margin: 0 auto;
    z-index: 9989;
    opacity: 1;
}
.rules-popup .btn-close  img{ width: 16px;}
.rules-popup .btn-close:hover{ background: #fa0;}
.rules-popup .modal-footer{ display: inline-block; text-align: center; padding: 0;}
.rules-popup .btn-success{font-family: "Noto Sans", sans-serif; background: #fa0; color: #101010; border-radius: 4px; padding: 6px 40px; font-size: 20px; font-weight: 700; border:none;}
.rules-popup .btn-success:hover{ background: #eb8200; color: #101010 !important; }

.popupbtn-sec{text-align: center;}
.popupbtn-sec a{ display: inline-block; margin: 0 10px; font-family: "Noto Sans", sans-serif; background: #fa0; color: #101010; border-radius: 4px; padding: 6px 40px; font-size: 20px; font-weight: 700; border:none;}
.popupbtn-sec a:hover{ background: #eb8200; color: #101010 !important; }

/*===clock css===*/
.clock-wrapper {
  position: absolute;
  width: 120px;
  height: 120px;
  margin: 10px auto 0 auto;
}
.clock-wrapper p{     text-align: center;
    font-size: 18px;
    font-weight: 500;
    color: #141414;}
/* SVG */
.progress-ring {
  transform: rotate(-90deg);display: none;
}

.progress-ring circle {
  fill: none;
  stroke-width: 6;
}

.progress-ring .bg {
  stroke: #eee;
}

#progress {
  stroke: black;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s linear; 
  display: none;
}

/* CLOCK UI */
.clock-ui {
  position: absolute;
  top: 28px;
  left: 0;
  width: 120px;
  height: 120px;
  border: 4px solid #082963;
  border-radius: 50%;
  background: #dfe4cc;
}

/* CENTER NUMBER */
#count {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
  font-size: 32px;
  color: #5f7800;
}

/* TICKS */
.ticks {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.ticks span {
  position: absolute;
  width: 3px;
  height: 12px;
  background: #082963;
  top: 0px;            
  left: 50%;
 transform-origin: center 56px;
  transform: translateX(-50%) rotate(0deg);
}
.ticks span:nth-child(1)  { transform: translateX(-50%) rotate(0deg); }
.ticks span:nth-child(2)  { transform: translateX(-50%) rotate(30deg); }
.ticks span:nth-child(3)  { transform: translateX(-50%) rotate(60deg); }
.ticks span:nth-child(4)  { transform: translateX(-50%) rotate(90deg); }
.ticks span:nth-child(5)  { transform: translateX(-50%) rotate(120deg); }
.ticks span:nth-child(6)  { transform: translateX(-50%) rotate(150deg); }
.ticks span:nth-child(7)  { transform: translateX(-50%) rotate(180deg); }
.ticks span:nth-child(8)  { transform: translateX(-50%) rotate(210deg); }
.ticks span:nth-child(9)  { transform: translateX(-50%) rotate(240deg); }
.ticks span:nth-child(10) { transform: translateX(-50%) rotate(270deg); }
.ticks span:nth-child(11) { transform: translateX(-50%) rotate(300deg); }
.ticks span:nth-child(12) { transform: translateX(-50%) rotate(330deg); }


.ticks span:nth-child(1),   /* 12 o'clock */
.ticks span:nth-child(4),   /* 3 o'clock */
.ticks span:nth-child(7),   /* 6 o'clock */
.ticks span:nth-child(10) { /* 9 o'clock */
  height: 18px;
  width: 4px;
}


.popupinfo{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  text-align: center;
}

.pajaro.clicked {
  pointer-events: none;
}

/*=========media query============*/


@media only screen and (max-height: 932px) and (max-width: 1920px){
  .formmodalsec .popup-bg1 {
    width: 40%;
}
}

@media only screen and (max-height: 918px) and (max-width: 1890px){
.formmodalsec .popup-bg { width: 41%;}
}

@media only screen and (max-height: 992px) and (max-width: 1768px){
  .formmodalsec .popup-bg {
    width: 43%;
}
}


@media screen and (max-width: 1680px) {
  .top-header-page .container{ width: 98%; padding: 0 10px;}
  .container{ width: 100%;}
  .sum {
    right: 24px;
    width: 9%;
    line-height: 30px;
    font-size: 22px;
  }
  .sum img{top: -12px;}
  .sum p{ line-height: 78px;}
  .oniongrowsec{ bottom: 0;  right: 8px;}
  .formmodalsec .popup-bg { width: 44%;}
  .gameover p { font-size: 34px;}
}

@media only screen and (max-height: 1050px) and (max-width: 1680px){
  .formmodalsec .popup-bg {
    width: 44%;
}
.sum{  right: 24px; width: 11%; font-size: 20px;}
}

@media screen and (max-width: 1600px) {
  .formmodalsec .popup-bg { width: 45%; } 
  .rules-popup .modal-dialog {max-width: 40%;}
}

@media only screen and (max-height: 1024px) and (max-width: 1600px){
.formmodalsec .popup-bg { width: 50%; }
.oniongrowsec{     width: 190px; height: 270px;}
}

@media only screen and (max-height: 900px) and (max-width: 1600px){
  .formmodalsec .popup-bg {
    width: 47%;
    margin: 7% auto;
}
.oniongrowsec{  width: 190px; height: 270px;}
.sum p { font-size: 3em;}
}

@media only screen and (max-height: 960px) and (max-width: 1536px){
  .formmodalsec .popup-bg { width: 50%; }
}

@media only screen and (max-height: 882px) and (max-width: 1536px){
  .formmodalsec .popup-bg {
    width: 50%;
    margin: 6% auto;
}
.formmodalsec p { font-size: 28px;}
.formmodalsec .scorebtn{  font-size: 20px; }
}

@media only screen and (max-height: 776px) and (max-width: 1536px){
  .formmodalsec .popup-bg {
    width: 48%;
}
}

@media screen and (max-width: 1440px) {
.formmodalsec .popup-bg { width: 50%; }
.oniongrowsec{ width: 216px; height: 307px;}
.sum{width: 9%; }
.rules-popup .modal-dialog { max-width: 50%;}
.next-popupbtn{ font-size: 16px;}
}

@media only screen and (max-height: 900px) and (max-width: 1440px){
  .formmodalsec .popup-bg{  width: 49%;}
  .sum p { line-height: 80px; }
}

@media only screen and (max-height: 1050px) and (max-width: 1400px){
.formmodalsec .popup-bg {
    width: 57%;
}
}

@media screen and (max-width: 1368px) {
.sum p { font-size: 4em; line-height: 86px;}
.formmodalsec .popup-bg {
  width: 65%;
}
.oniongrowsec{ width: 197px; height: 278px;}
.gameover p { font-size: 32px; }
}

@media screen and (max-width: 1366px) {
.formmodalsec .popup-bg { width: 49%;  margin: 5% auto;}
.formmodalsec .popup-bg1 p { font-size: 26px;}
.formmodalsec .popup-bg img{ width: 220px; }
.formmodalsec .scorebtn{ font-size: 20px;}
.formmodalsec .popup-bg h5{ font-size: 3.2em; }
.clock-wrapper{ width: 100px; height: 100px;}
.clock-ui{ width: 100px; height: 100px;}
.ticks span{ width: 3px; height: 10px; transform-origin: center 48px;}
.ticks span:nth-child(1), .ticks span:nth-child(4), .ticks span:nth-child(7), .ticks span:nth-child(10){ height: 14px; width: 4px;}
.sum p{ line-height: 74px;}
.oniongrowsec {  width: 155px; height: 220px;}
}


@media only screen and (max-height: 768px) and (max-width: 1366px){
.formmodalsec img{ margin: 50px auto 20px auto;}
.formmodalsec .popup-bg { width: 49%; }
}


@media only screen and (max-height: 706px) and (max-width: 1366px){
.formmodalsec .popup-bg {
  width: 56%;
  margin: 3% auto;
}
}

@media screen and (max-width: 1280px) {
.sum p { font-size: 3em; line-height: 71px;}
.formmodalsec .popup-bg { width: 55%;  margin: 8% auto;}
.formmodalsec .popup-bg1{ width: 58%;}
.popupinfo{ width: 80%;}
.oniongrowsec { width: 190px; height: 272px; }
.clock-wrapper { width: 95px; height: 95px; }
.clock-ui { width: 95px; height: 95px; }
.ticks span { width: 3px; height: 7px; transform-origin: center 44px; }
}

@media only screen and (max-height: 1024px) and (max-width: 1280px){
.formmodalsec .popup-bg1 {
    width: 56%;
    margin: 14% auto;
}
}

@media only screen and (max-height: 960px) and (max-width: 1280px){
.formmodalsec .popup-bg1 { width: 56%; }
}


@media only screen and (max-height: 800px) and (max-width: 1280px){
  .formmodalsec .popup-bg {
    width: 55%;
    margin: 5% auto;
}
  .formmodalsec .popup-bg1 {
    width: 54%;
    margin: 5% auto;
}
}

@media only screen and (max-height: 720px) and (max-width: 1280px){
  .formmodalsec .popup-bg {
    width: 50%;
    margin: 3% auto;
}
  .formmodalsec .popup-bg1 {
    width: 57%;
    margin: 2% auto;
}
 .oniongrowsec {
      width: 150px;
      height: 212px;
}
.sum{ line-height: 27px;}
.sum p { font-size: 3em; line-height: 64px; }
.sum img{ top: -10px;}
}

@media screen and (max-width: 1180px) {
.sum p{font-size: 4em; }
.formmodalsec .popup-bg { width: 62%;  margin: 10% auto;}
.formmodalsec .popup-bg1{ width: 68%;}
}

@media only screen and (max-height: 664px) and (max-width: 1176px){
  .formmodalsec .popup-bg {
    width: 58%;
    margin: 1% auto;
}
.formmodalsec .popup-bg img {
  width: 220px;
  margin: 30px auto 20px auto;
}
}


@media only screen and (max-height: 864px) and (max-width: 1152px){
  .formmodalsec .popup-bg1 {
      width: 63%;
      margin: 7% auto;
  }
}

@media screen and (max-width: 1024px) {
.sum{ width: 11%; line-height: 26px;}
.oniongrowsec{ bottom: 0;   }
.oniongrowsec img{ width: 130px;}
.sum p { font-size: 3.5em; line-height: 75px; }
.oniongrowsec { width: 176px; height: 250px; }
.formmodalsec .popup-bg { width: 65%; margin: 3% auto; }
.sum img{top: -9px;}
.next-popupbtn{ font-size: 16px;}
.gameover p{ font-size: 30px;  line-height: 36px;}
.rules-popup .modal-dialog { max-width: 65%; }
}

@media only screen and (max-height: 1440px) and (max-width: 1024px){
.formmodalsec .popup-bg {
  width: 67%;
  margin: 40% auto;
}
}

@media only screen and (max-height: 1366px) and (max-width: 1024px){
.formmodalsec .popup-bg {
  width: 68%;
  margin: 36% auto;
}
.sum p { font-size: 3.5em; line-height: 98px; }
}  

@media only screen and (max-height: 768px) and (max-width: 1024px){
.formmodalsec .popup-bg {
  width: 68%;
  margin: 6% auto;
}
.sum p{ line-height: 74px;}
}  

@media only screen and (max-height: 600px) and (max-width: 1024px){
.oniongrowsec { width: 140px; height: 199px;}
.formmodalsec .popup-bg {
  width: 68%;
  margin: 2% auto;
}
#formmodalsec .popup-bg { height: 92%; margin: 0% auto;}
.sum p {
  font-size: 3em;
  line-height: 66px;
}
}  

@media screen and (max-width: 991px) {
.oniongrowsec img{ width: 150px;}
.sum { top:86%; left: 22px; width: 14%; font-size: 24px;}
.sum p{ display: block; font-size: 3em; line-height: 75px; }
.sum img{ top: -17px;}
.oniongrowsec { width: 212px; height: 301px;}
.formmodalsec .popup-bg { width: 69%; margin: 30% auto;}
.clock-wrapper { margin: 7px 0 0 10px; }
.game-sec .container{ padding: 0;}
.ticks span:nth-child(1),  
.ticks span:nth-child(4),  
.ticks span:nth-child(7), 
.ticks span:nth-child(10) {
  height: 14px;
  width: 4px;
}
.ticks span{ height: 9px;}
}

@media only screen and (max-height: 568px) and (max-width: 991px){
.formmodalsec .popup-bg {
    width: 70%;
    margin: 1% auto;
}
.sum { top: 81%;}
}

@media only screen and (max-height: 600px) and (max-width: 960px){
 .sum { top: 69%;}
}

@media screen and (max-width: 932px) {
.oniongrowsec { width: 122px; height: 174px; }
.sum { top: 79%; }
}

@media screen and (max-width: 915px) {
.formmodalsec img{ width: 168px;}
.formmodalsec .popup-bg {
  width: 62%;
  margin: -1% auto;
}
.formmodalsec .popup-bg img {
  margin: 5px auto 0 auto; width: 200px;
}
.formmodalsec .popup-bg  h5 {
  margin-top: 0;
  font-size: 3em;
  line-height: 46px;
}
.formmodalsec .popup-bg .scorebtn{ margin-top: 7px; padding: 5px 4%;
  font-size: 18px;}

.formmodalsec .popup-bg1 img { margin: 5px auto 15px auto; width: 184px;}
.oniongrowsec { width: 122px; height: 174px; }
.gameover p { font-size: 28px;}
}

@media screen and (max-width: 914px) {
.sum { top:81%;}
.formmodalsec img { margin: 17px auto 5px auto;}
.formmodalsec .popup-bg { margin: 0 auto;}
.formmodalsec .popup-bg h5 { font-size: 2.8em;}
.formmodalsec .popup-bg .scorebtn{  margin-top: 0; padding: 6px 4%; font-size: 20px; }
.formmodalsec .popup-bg img{ width:180px ;}
.oniongrowsec { height: 173px; }
}

@media screen and (max-width: 912px) {
.sum { top: 86%;}
.formmodalsec .popup-bg p { font-size:22px;}
.formmodalsec .popup-bg img {width: 220px;}
.formmodalsec .popup-bg h5 { font-size: 3em;}
.formmodalsec .popup-bg .scorebtn { margin-top: 14px; }
.formmodalsec .popup-bg { margin: 25% auto; width: 69%;  }
.formmodalsec .popup-bg1 img{ margin-bottom: 15px ; }
#formmodalsec .popup-bg { width: 68%; }
.oniongrowsec { width: 211px;height: 301px; }
}

@media screen and (max-width: 896px) {
.formmodalsec .popup-bg img { width: 180px; }
.formmodalsec .popup-bg{ margin: 0% auto; width: 63%; }
.formmodalsec .popup-bg1 img { width: 165px;}
.sum { font-size: 24px;}
#formmodalsec .popup-bg { width: 68%; height: 101%;}
.oniongrowsec{width: 132px; height: 189px;}
}

@media screen and (max-width:882px) {
.oniongrowsec { width: 105px; height: 150px; }
}

@media screen and (max-width:853px) {
.oniongrowsec { width: 211px; height: 302px; }
}    

@media screen and (max-width:851px) {
.sum { top:85%; }
.oniongrowsec { height: 300px;}
.formmodalsec .popup-bg img { width: 175px;}
.formmodalsec .popup-bg { margin: 0% auto; width: 69%;}
.formmodalsec .popup-bg p { font-size: 22px; }
#formmodalsec .popup-bg img{margin: 0% auto 8px auto; }
#formmodalsec .popup-bg { width: 68%;}
}

@media screen and (max-width: 844px) {
.sum { top: 80%;}
.rules-popup .modal-body li{ font-size: 18px;}
.oniongrowsec { width: 130px; height: 186px; }
}

@media screen and (max-width: 820px) {
.sum { top:84%;}
.oniongrowsec { width: 216px;height: 308px; }
.formmodalsec .popup-bg img {
  width: 200px;
}
.formmodalsec .popup-bg .scorebtn { margin-top: 14px;}
.formmodalsec .popup-bg {
  margin: 29% auto;
  width: 71%;
}
#formmodalsec .popup-bg {
  width: 65%;
  margin: 44% auto;
}
#formmodalsec .popup-bg img {
  margin: 4% auto 8px auto;
}
.popupinfo{  width:92%; padding: 40px 60px;}
.gameover p{ font-size: 26px; line-height: 37px;}
.rules-popup .modal-dialog { max-width: 72%; }
.rules-popup .btn-success{ font-size: 19px;}
}

@media screen and (max-width: 800px) {
.top-header-page .container { width: 98%; padding: 0 0;}
.back-box p{padding-right: 10px;}
/*.gameover{ padding:49.8% 0;}*/
.sum{ font-size: 22px; top: 86%; line-height: 26px;}
.sum img { top: -10px; }
.oniongrowsec{ height: 302px;}
.sum p{  line-height: 74px;}
.formmodalsec .popup-bg {     width: 74%;
  margin: 38% auto;}
.formmodalsec .scorebtn{  font-size: 20px;}
.formmodalsec .popup-bg img {
  width: 200px;
  margin: 18px auto 10px auto ;
}
#formmodalsec .popup-bg { width: 70%; height: 34%;}
}

@media only screen and (max-height: 600px) and (max-width: 800px){
.formmodalsec .popup-bg {
    width: 71%;
    margin: 2% auto;
}
  .oniongrowsec {
      height: 174px;
  }
  .sum{ top: 63%;}
}

@media screen and (max-width: 768px) {
.sum { top: 79%;}
.oniongrowsec { height: 300px; }
.popupinfo{ width: 75%;}
}

@media screen and (max-width: 767px) {
.clock-ui{ width: 100px; height: 100px; margin: 0 auto;}
.ticks span{ width: 3px; height: 6px; transform-origin: center 46px; top: 0px;}
.gameover p{ font-size: 28px;line-height: 32px;}
.ticks span:nth-child(1),  
.ticks span:nth-child(4),  
.ticks span:nth-child(7), 
.ticks span:nth-child(10) {
  height: 11px;
  width: 3px;
}
#count{ font-size: 24px;}
.next-popupbtn{font-size: 16px; padding: 8px 24px; }
.rules-popup .modal-dialog { max-width: 80%; }
.game-sec .container { padding: 0 !important; max-width: 100%; }
}

@media only screen and (max-height: 1024px) and (max-width: 768px){
.formmodalsec .popup-bg { width: 82%; }
.sum { top: 81%;}
#formmodalsec .popup-bg { width: 70%;}
}

@media only screen and (max-height: 360px) and (max-width: 768px){
.formmodalsec h5 {
    font-size: 2.6em;
    line-height: 41px;
}
.formmodalsec .popup-bg {
  width: 64%;
  margin: -1% auto;
}

.formmodalsec .popup-bg img { width: 170px;}
.formmodalsec .popup-bg .scorebtn{ margin-top: 0;}
.formmodalsec .popup-bg h5 { font-size: 2.6em;}
.formmodalsec .popup-bg1 .scorebtn { margin-top: 0; padding: 1px 10px;}
.formmodalsec .popup-bg1 p { font-size: 23px; line-height: 27px;}
.formmodalsec .popup-bg1 img{  margin: 6% auto 5px auto !important; }
#formmodalsec .popup-bg { height: 101%; margin: 0 auto;}
}

@media screen and (max-width: 740px) {
.oniongrowsec{ height: 301px;}
.oniongrowsec img { width: 130px;}
.sum { top: 76%;}
.formmodalsec .popup-bg p {
  font-size: 23px;
}
.formmodalsec .popup-bg .scorebtn {
  margin-top: 7px;
}
}

@media screen and (max-width: 720px) {
.sum { top: 64%; font-size: 18px; line-height: 21px; }
.sum p { line-height: 60px; }
.oniongrowsec { height: 300px;}
.formmodalsec .popup-bg {
  width: 83%;
  margin: 5% auto;
}
.formmodalsec .popup-bg h5 { font-size: 2.6em;}
.clock-wrapper{margin: 13px 0 0 20px;width: 85px; height: 85px; }
.clock-ui { width: 85px; height: 85px;}
.ticks span{ transform-origin: center 39px;}


/* ✅ Correct corn */
.pajaro2,
.pajaro4,
.pajaro5,
.pajaro7,
.pajaro8,
.pajaro9,
.pajaro10,
.pajaro11,
.pajaro14,
.pajaro17{
  transform: scale(0.6); 
}

/* ❌ Wrong corn */
.pajaro1,
.pajaro3,
.pajaro6,
.pajaro12,
.pajaro13,
.pajaro15,
.pajaro16{
     transform: scale(0.4);
}

.popupinfo { width: 85%; }
}

@media only screen and (max-height: 576px) and (max-width: 720px){
.sum { top: 69%; width: 13%; }
#formmodalsec .popup-bg{
  width: 87%;
  margin: 5% auto;
}
.oniongrowsec { height: 198px; width: 140px; }
}

@media only screen and (max-height: 540px) and (max-width: 720px){
.sum { top: 66%; width: 12%; }
#formmodalsec .popup-bg img {
  width: 189px;
  margin: 8% auto 13px auto;
}
.oniongrowsec { height: 161px; width: 113px; }
}

@media screen and (max-width: 667px) {
.sum { top:76%; }
.formmodalsec .popup-bg {
  width: 83%;
  margin: 0% auto;
}
.formmodalsec .popup-bg img {
  width: 175px;
}
.formmodalsec .popup-bg1 img{ margin: 0px auto 10px auto ; }
#formmodalsec .popup-bg {
  width: 87%;
  margin: 0% auto;
}
#formmodalsec .popup-bg img {
  width: 165px;
  margin: 1% auto 13px auto;
}
.rules-popup .modal-body li{ font-size: 17px;}
.rules-popup .modal-content{ padding: 30px;}
}

@media only screen and (max-height: 375px) and (max-width: 667px){
.sum { top: 46% }
.oniongrowsec { height: 201px; width: 145px; }
}

@media screen and (max-width: 653px) {
.sum { top: 80%;}
.formmodalsec .popup-bg h5 { font-size: 2.2em;}
.formmodalsec .popup-bg .scorebtn {
  margin-top: 6px;
  padding: 3px 8px;
  font-size: 20px;
}
.formmodalsec .popup-bg img { width: 136px; margin: 9px auto 0 auto;}
.formmodalsec .popup-bg {
  width: 83%;  margin: -1% auto;}
.formmodalsec .popup-bg p {
  font-size: 20px;
}
#formmodalsec .popup-bg {
  width: 87%;
  height: 104%;
  margin: -2% auto;
}
#formmodalsec .popup-bg img {
  width: 141px;
  margin: 3% auto -12px auto;
}
}

@media screen and (max-width: 640px) {
.sub-header-sec { padding: 45px 0;}
.pajaro,
.pajaro-w{
  background-size: cover;
  width: 70px;
  height: 75px;
}

/* ✅ Correct corn */
.pajaro2,
.pajaro4,
.pajaro5,
.pajaro7,
.pajaro8,
.pajaro9,
.pajaro10,
.pajaro11,
.pajaro14,
.pajaro17{
  transform: scale(0.8); 
}

/* ❌ Wrong corn */
.pajaro1,
.pajaro3,
.pajaro6,
.pajaro12,
.pajaro13,
.pajaro15,
.pajaro16{
     transform: scale(0.5);
}

.sum{ top:42%; line-height: 24px; font-size: 18px;}
.formmodalsec .popup-bg { width: 83%;  margin: 3% auto;}
.formmodalsec .popup-bg img {
  width: 175px;
  margin: 33px auto 5px auto ;
}
#formmodalsec .popup-bg img {
  width: 170px;
  margin: 6% auto 0 auto;
}
#formmodalsec .popup-bg {
  width: 78%;
  margin: 7% auto;
}
.oniongrowsec {width: 147px; height: 208px;}
.sum img { top: -10px; }
}

@media screen and (max-width: 604px) {
.sum{ right: 7px; top:80%;}
.sum p { font-size: 2.6em;}
.formmodalsec .popup-bg {
  width: 89%;
  margin: 41% auto;
}
.formmodalsec .popup-bg1 {
    width: 91%;
    margin: 51% auto;
}
.formmodalsec .popup-bg img { width: 180px;}
.gameover p{ font-size: 27px; line-height: 33px;}

#formmodalsec .popup-bg {
  width: 80%;
  margin: 41% auto;
}
}

@media screen and (max-width: 600px) {
.pajaro>span:before{ font-size: 20px;}
.pajaro-w>span:before{ font-size:20px;}
.sum {top:80%;}
.formmodalsec img {
  margin: 31px auto 5px auto;
}
.formmodalsec .popup-bg p {
  font-size: 22px;
}
.oniongrowsec { height: 209px; }
}

@media screen and (max-width:576px) {
.sum { top: 71%; }
}

@media screen and (max-width:540px) {
.sum { top: 76%; width: 20%; line-height: 24px;}
.formmodalsec .popup-bg img {
  width: 170px;
  margin: 10px auto 0 auto;
}
.formmodalsec .popup-bg {
  width: 93%;
  margin: 18% auto;
}
.gameover p {
  font-size: 22px;
  line-height: 29px;
  padding: 0 10px;
}
.next-popupbtn { font-size: 15px;}
#formmodalsec .popup-bg {
  width: 87%;
  margin: 28% auto;
}
.oniongrowsec { width: 188px; height: 266px; }
.sum p { font-size: 2em; }
.rules-popup .modal-content{ margin: 0 20px;}
.clock-ui { width: 90px; height: 90px; margin: 0 auto; }
.ticks span{ transform-origin: center 41px; width: 3px; height: 6px;}
#count{ font-size: 24px;}
.popupinfo{     width: 95%; padding: 0 10px;}
.clock-wrapper{ width: 90px;}
.next-popupbtn{ margin-bottom: 15px;}
}

@media screen and (max-width:504px) {
.back-box a { margin-top: 24px;}
.timer span:before{ line-height: 48px; font-size: 18px;}
.sum{  top: 59%; font-size: 18px; width: 15%; line-height: 20px;}
.sub-header-sec { padding: 30px 0;}
.logo1 { font-size: 26px; padding: 0 7px;}
.timer{ width: 100%; }
.timer span{ width: 100%;}
.oniongrowsec{  right:0;}
.game-inner-page{ padding: 20 !important;}
#formmodalsec .popup-bg img { width: 175px; margin-bottom: 15px;}
.formmodalsec .popup-bg h5{line-height: 20px;margin-bottom: 16px; }
.formmodalsec .popup-bg {
  width: 88%;
  margin: 6% auto;
}
#formmodalsec .popup-bg {
  width: 87%;
  margin: 9% auto;
}
.oniongrowsec {width: 130px; height: 185px;}
.sum p { line-height: 58px; }
.clock-ui{ margin: 0 auto 0 0;}
.rules-popup .modal-dialog { max-width: 100%; }
}

@media screen and (max-width:480px) {
.sub-header-sec{ padding: 48px 0;}
.sum{ top:83%;}
.formmodalsec .popup-bg {
  width: 85%;
  margin: 42% auto;
}
#formmodalsec .popup-bg {
  width: 87%;
  margin: 35% auto;
}
}

@media only screen and (max-height: 800px) and (max-width: 480px){
.sum { top: 80%; }
}

@media screen and (max-width:432px) {
.sum { top:78%;}
.oniongrowsec { width: 166px; height: 234px; }
.oniongrowsec img { width: 90px;}
.sum p { font-size: 2.9em;}
.formmodalsec .popup-bg { width: 85%; margin: 32% auto;}
.formmodalsec .popup-bg1{ width: 91%;}
#formmodalsec .popup-bg { width: 87%;}
.sum{font-size: 16px; width: 17%;}
}

@media screen and (max-width:430px) {
.sum { top: 84%; }
.clock-wrapper { width: 92px; }
.clock-ui { margin: 0 auto 0 0; }
}


@media screen and (max-width: 414px) {
  .sub-header-sec{padding: 20px 0;}
  .logo1{ font-size: 24px; padding: 0 15px; line-height: 30px;}
  .firetap:nth-child(5) { left: 0; }
  .firetap:nth-child(6) { left: 0; }
  .firetap:nth-child(7) { left: 0; }
  .firetap:nth-child(8) { left: 0; }
  .pajaro>span{ width: 80px; height: 25px;}
  .pajaro-w>span{ width: 80px; height: 25px;}
  .pajaro>span:before{ font-size: 17px;}
  .pajaro-w>span:before{ font-size:17px;}
  .sum p{ font-size: 3.2em;}
  .formmodalsec .popup-bg { width: 85%;  margin: 38% auto;}
  .clock-ui { width: 80px; height: 80px; margin: 0 auto; }
  .ticks span { transform-origin: center 36px;  }
  .gameover p{ padding: 0 20px;}
  .clock-wrapper {  margin: 12px 0 0 11px; left: 0; width: 82px;}
  .rules-popup .btn-success{ font-size: 18px;}
}

@media only screen and (max-height: 896px) and (max-width: 414px){
.back-box a { margin-top: 16px;}
.sum { top:83%;}
.formmodalsec .popup-bg {
  width: 85%;
  margin: 60% auto;
}
#formmodalsec .popup-bg{ margin: 45% auto;}
}
  
@media only screen and (max-height: 736px) and (max-width: 414px){
.sum { top: 76%; }
.formmodalsec .popup-bg { width: 85%;
  margin: 40% auto;}
#formmodalsec .popup-bg {
  margin: 38% auto;
}
.oniongrowsec { width: 166px; height: 238px; }
}

@media screen and (max-width: 412px) {
  .timer{ height: 30px;}
  .timer span{ height: 30px;}
  .sum{ top: 86%; left: 13px;}
  .timer span:before { line-height: 31px;}
  .sum p { font-size: 3em; line-height: 64px; }
}


@media only screen and (max-height: 915px) and (max-width: 412px){
.sum { top:82%;}
.formmodalsec .popup-bg {
  width: 85%;
  margin: 51% auto;
}
#formmodalsec .popup-bg {
  width: 87%;
  margin: 61% auto;
}
}

@media only screen and (max-height: 914px) and (max-width: 412px){
.sum { top:82%; line-height: 21px;}
.formmodalsec .popup-bg {
  width: 85%;
  margin: 46% auto;
}
#formmodalsec .popup-bg{margin: 57% auto;} 
.sum img { top: -10px; }
}

@media only screen and (max-height: 690px) and (max-width: 412px){ 
.sum { top:73%;}
.next-popupbtn{ font-size: 15px;}
.formmodalsec .popup-bg {
  width: 85%;
  margin: 35% auto;
}
#formmodalsec .popup-bg img{    margin: 9% auto 15px auto; }
#formmodalsec .popup-bg {  margin: 30% auto;}
.oniongrowsec{height: 233px; }
}

@media screen and (max-width: 411px) {
.sum { top: 77%;}
.sum p { font-size: 2.5em;}
.formmodalsec .popup-bg { width: 85%; }
#formmodalsec .popup-bg { margin: 42% auto; }
.oniongrowsec { height: 233px; }
}

@media screen and (max-width:400px) {
.back-box a { margin-top: 29px; padding: 8px 22px;}
.sum { top:72%; line-height: 20px;}
.oniongrowsec {width: 126px;  height: 178px; }
.formmodalsec .popup-bg { width: 85%;  margin: 24% auto;}
#formmodalsec .popup-bg { margin: 24% auto; }
.popupbtn-sec a{ margin-bottom: 15px;}
.gameover p { font-size: 22px;}
}

@media screen and (max-width:393px) {
 .navbar-toggler-icon{width: 1.2em; height: 1.2em; }
 .gameover p{ padding: 0 15px;}
}

@media only screen and (max-height: 851px) and (max-width:393px){
.sum { top:82%;}
.formmodalsec .popup-bg {
  width: 85%;
  margin: 52% auto;
}
#formmodalsec .popup-bg {  margin: 51% auto;} 
}

@media only screen and (max-height: 786px) and (max-width:393px){
.sum { top: 79%;}
.formmodalsec .popup-bg {
  width: 85%;
  margin: 37% auto;
}
#formmodalsec .popup-bg {
  margin: 37% auto;
}
}

@media screen and (max-width: 390px) {
  .sum p { font-size: 34px;}
  .logo1 { font-size: 22px;}
  .firetap:nth-child(5) { left: 20px; }
  .firetap:nth-child(6) { left: 20px; }
  .firetap:nth-child(7) { left: 20px; }
  .firetap:nth-child(8) { left: 20px; }
  .firetap:nth-child(5) .firetip {
    width: 20px;
    height: 20px;
  }
  
  .firetap:nth-child(6) .firetip {
    width: 20px;
    height: 20px;
  }
  
  .firetap:nth-child(7) .firetip {
    width: 20px;
    height: 20px;
  }
  
  .firetap:nth-child(8) .firetip {
    width: 20px;
    height: 20px;
  }
  .sum { top: 80%; }
  .formmodalsec .popup-bg img { width: 160px;}
}

@media only screen and (max-height: 844px) and (max-width:390px){
.sum { top:80%;}
}
@media only screen and (max-height: 695px) and (max-width:390px){
.sum { top:75%;}
#formmodalsec .popup-bg img {
  width: 175px;
  margin: 7% auto 15px auto;
}
#formmodalsec .popup-bg { margin: 35% auto;}
}
@media only screen and (max-height: 390px) and (max-width:390px){
  .formmodalsec .popup-bg {
    width: 85%; margin: 5% auto;
}
.formmodalsec .popup-bg1{  margin: 3% auto;}
.sum { top: 36%;}
#formmodalsec .popup-bg img { margin: 4% auto 15px auto; width: 155px;}
#formmodalsec .popup-bg { margin: 6% auto;}
}

@media screen and (max-width:384px) {
.sum { top:72%;}
.formmodalsec .popup-bg {  margin: 26% auto;}
.formmodalsec .popup-bg1{ margin: 26% auto;}
#formmodalsec .popup-bg {  margin: 26% auto;}
.gameover p { padding: 0 30px; }
}

@media screen and (max-width:375px) {
.sum { top:81%;}
.sum p { font-size: 38px;}
.formmodalsec .popup-bg {
  margin: 55% auto;
}
.formmodalsec .popup-bg h5 {
  font-size: 2em;
}
#formmodalsec .popup-bg {
  margin: 43% auto;
}
.clock-wrapper { width: 82px;}
}

@media only screen and (max-height: 667px) and (max-width:375px){
.sum { top:76%; line-height: 18px;}
.formmodalsec .popup-bg {  margin: 34% auto; }
#formmodalsec .popup-bg {  margin: 32% auto; }
}

@media screen and (max-width:360px) {
.sum { top: 86%;}
.formmodalsec .popup-bg p { font-size: 22px; }
}

@media only screen and (max-height: 740px) and (max-width: 360px){
  .sum { top: 79%; }
  #formmodalsec .popup-bg {  margin: 36% auto;}
}

@media only screen and (max-height: 640px) and (max-width:360px){
.sum { top:74%;}
.oniongrowsec { bottom: 0;}
}

@media only screen and (max-height: 600px) and (max-width:360px){
#formmodalsec .popup-bg {
  margin: 22% auto;
}
}

@media only screen and (max-height: 480px) and (max-width:360px){
.sum { top: 59%;}
.oniongrowsec img { width: 80px;}
.formmodalsec .popup-bg { margin: 14% auto;}
.formmodalsec .popup-bg1{  margin: 14% auto;}
#formmodalsec .popup-bg {
margin: 12% auto;
}
}

@media screen and (max-width:346px) {
.sum { top:27%;}
.oniongrowsec { width: 134px; height: 190px;}
.oniongrowsec img { width: 80px;}
.formmodalsec .popup-bg img {
  width: 145px;
  margin-bottom: 10px !important;
}
.formmodalsec .popup-bg {
  margin: 4% auto;
}
.formmodalsec .popup-bg .scorebtn{ padding: 3px 4%;}
.formmodalsec .popup-bg  .scorebtn a {
  font-size: 18px;
}
.formmodalsec .popup-bg .scorebtn {
  margin-top: 8px;
}
.formmodalsec .popup-bg1{  margin: 2% auto;}
.formmodalsec .popup-bg1 img{ margin-top: 0 !important;}
#formmodalsec .popup-bg {
  margin: 3% auto;
}
#formmodalsec .popup-bg img { margin: -4% auto 15px auto;}
}

@media screen and (max-width:344px) {
.sum {top: 82%; line-height: 16px; width: 21%;}
.sum img { top: -8px; }
.next-popupbtn { font-size: 15px;}
}

@media screen and (max-width:320px) {
.sum { top:67%;}
.sub-header-sec { padding: 20px 5px;}
.formmodalsec .popup-bg {  
  margin: 28% auto;}
#formmodalsec .popup-bg {
  margin: 23% auto;}
.rules-popup .btn-success{ padding: 6px 34px;}
}

@media only screen and (max-height: 480px) and (max-width:320px){
.formmodalsec .popup-bg1{ margin: 24% auto; }
#formmodalsec .popup-bg {  margin: 16% auto;}
.sum { top: 61%; }
}