#background-wrap {
    bottom: 0;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 900;
}

  #slider1 {
    background-image: url("https://vossle-v2.s3.ap-south-1.amazonaws.com/frontend2/ponds/img/screenn/bgframe3.png");
    overflow: hidden;
	  z-index: 2000;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size:100% 100%;
    width : 101%;
    height : 101%;
	  visibility: hidden;
    position:absolute;
    top:0%;
    bottom:20%;
    left:0%;
  }

  #fg1{
    z-index: 2001;
    width: 100vw;
    position: absolute;
    bottom: 0vw;
    left: 0%;
  }
  #slider2 {
    background-image: url("https://vossle-v2.s3.ap-south-1.amazonaws.com/frontend2/ponds/img/screen2/bg.png");
    overflow: hidden;
	z-index: 2010;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size:100% 100%;
    width : 101%;
    height : 101%;
	  visibility: hidden;
    position:absolute;
    top:0%;
    bottom:20%;
    left:0%;
  }
  #fg2{
    z-index: 2011;
    width: 100vw;
    visibility: hidden;
    position: absolute;
    bottom: 0vw;
    left: 0%;
  }
  #topgroup{
    position: fixed;
    top: 10%;
    right: 0%;
    left: 0%;
    margin: auto;
    width: 60vw;
    height: auto;
    z-index: 2126;
    visibility: hidden;
  }
  #name {
    background-color: #00AFD2;
    width: 77vw;
    height: 10vw;
    border: none;
    position: absolute;
    top: 44%;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    z-index: 2125;
}
    
    #phone {
      background-color: #00AFD2;
    width: 77vw;
    height: 10vw;
    border: none;
    position: absolute;
    top: 57%;
    left: 0;
    margin: auto;
    right: 0;
    text-align: center;
    z-index: 2125;
      }
      #namelabel {
        font-weight: bold;
        position: absolute;
        font-size: 175%;
        top: 39%;
        left: 0;
        right: 0;
        margin: auto;
        text-align: center;
        z-index: 2125;
        color:#004F6F;
    }
        
        #phonelabel {
        font-weight: bold;
        position: absolute;
        font-size: 175%;
        top: 52%;
        left: 0;
        color:#004F6F;
        margin: auto;
        right: 0;
        text-align: center;
        z-index: 2125;
          }
        
        #checkholder
        {
          top: 69%;
          left: 2%;
          margin: auto;
          right: 0;
          z-index: 2125;
          /* text-align: center; */
          font-size: 72%;
          position: fixed;
            }
  #textstuff{
    z-index: 2013;
    width: 90vw;
    visibility: hidden;
    position: absolute;
    top: 5vw;
    left: 5vw;
    right: 5vw;
  }
  #slider3 {
    background-image: url("https://vossle-v2.s3.ap-south-1.amazonaws.com/frontend2/ponds/img/screen3/bg.png");
    overflow: hidden;
	z-index: 2020;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size:100% 100%;
    width : 101%;
    height : 101%;
	visibility: hidden;
    position:absolute;
    top:0%;
    bottom:20%;
    left:0%;
  }
  #coupon{
      font-size: 190%;
      color: white;
      position: relative;
      left: 0;
      right: 0;
      margin: auto;
      text-align: center;
      top: 8%;
      z-index: 3000;
      font-weight: bold;
  }
  #fg3{
    z-index: 2031;
    width: 104vw;
    visibility: hidden;
    position: absolute;
    bottom: 0vw;
    right: 0%;
  }
  #textstuff2{
    z-index: 2033;
    width: 90vw;
    visibility: hidden;
    position: absolute;
    top: 5vw;
    left: 5vw;
    right: 5vw;
  }
  #slider4 {
    background-image: url("https://vossle-v2.s3.ap-south-1.amazonaws.com/frontend2/ponds/img/screen4/bg.png");
    overflow: hidden;
	z-index: 2040;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size:100% 100%;
    width : 101%;
    height : 101%;
	  visibility: hidden;
    position:absolute;
    top:0%;
    bottom:20%;
    left:0%;
  }
  #fg4{
    z-index: 2041;
    width: 80vw;
    visibility: hidden;
    position: absolute;
    bottom: 13vw;
    right: 10vw;
    left: 10vw;
  }
  #textstuff3{
    z-index: 2043;
    width: 50vw;
    visibility: hidden;
    position: absolute;
    top: 14vw;
    left: 25vw;
    right: 25vw;
  }
  #bub{
    z-index: 2043;
    width: 18vw;
    visibility: hidden;
    position: absolute;
    top: 0vw;
    left: 0vw;
  }

  html,body
  {
      width: 100%;
      height: 100%;
      margin: 0px;
      padding: 0px;
      overflow-x: hidden; 
  }
  @font-face {
    font-family: font;
    src: url("https://vossle-v2.s3.ap-south-1.amazonaws.com/frontend2/ponds/assets/Guthen.ttf");
  }

#startdiv {
    background-image: url("https://vossle-v2.s3.ap-south-1.amazonaws.com/frontend2/ponds/img/sscreen.png");
    overflow: hidden;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size:100% 100%;
    width : 101%;
    height : 101%;
    position:absolute;
    display:bloxk;
    top:0%;
    bottom:20%;
    left:0%;
	z-index:2000;  }

  #pondsbox{
    position: fixed;
    top: 0%;
    left: -2%;
    margin: auto;
    width: 35vw;
    z-index: 2100;
    visibility: hidden;
  }
  #b1{
    position: fixed;
    top: 20%;
    left: 0%;
    margin: auto;
    width: 35vw;
    z-index: 2100;
    visibility: hidden;
  }
  #b2{
    position: fixed;
    top: 20%;
    left: 0%;
    margin: auto;
    width: 35vw;
    z-index: 2102;
    visibility: hidden;
  }
  #b3{
    position: fixed;
    top: 20%;
    left: 0%;
    margin: auto;
    width: 35vw;
    z-index: 2104;
    visibility: hidden;
  }

  #startbtn{
    position: fixed;
    top: 60%;
    right: 0%;
    left: 0%;
    margin: auto;
    width: 44%;
    z-index: 2100;
  }
  #availnow{
    position: fixed;
    opacity: 100%;
    bottom: 5%;
    right: 0%;
    left: 0%;
    visibility: hidden;
    margin-bottom: -10%;
    width: 100%;
    z-index: 2040;
    }
  #buybtn{
	position: fixed;
    bottom: 0%;
    right: 0%;
    left: -10%;
	visibility: hidden;
    margin-bottom: -10%;
    width: 120%;
    z-index: 2050;
  }
  #endfail{
    position: fixed;
    top: 25%;
    right: 0%;
    left: 0%;
    margin: auto;
    width: 52vw;
    z-index: 2100;
    visibility: hidden;
  }

  #beg{
    position: fixed;
    top: 25%;
    right: 0%;
    left: 0%;
    margin: auto;
    width: 52vw;
    z-index: 2100;
    visibility: hidden;
  }
  #endpass{
    position: fixed;
    top: 25%;
    right: 0%;
    left: 0%;
    margin: auto;
    width: 52vw;
    z-index: 2100;
    visibility: hidden;
  }
#loadstep0{
  position: fixed;
  top: 6%;
  right: 0%;
  left: 0%;
  margin: auto;
  width: 52vw;
  z-index: 2100;
  visibility: hidden;
}
#loadstep1{
  position: fixed;
  top: 6%;
  right: 0%;
  left: 0%;
  margin: auto;
  width: 52vw;
  z-index: 2120;
  visibility: hidden;
}
#loadstep2{
  position: fixed;
  top: 6%;
  right: 0%;
  left: 0%;
  margin: auto;
  width: 52vw;
  z-index: 2122;
  visibility: hidden;
}
#loadstep3{
  position: fixed;
  top: 6%;
  right: 0%;
  left: 0%;
  margin: auto;
  width: 52vw;
  z-index: 2124;
  visibility: hidden;
}
#loadstep4{
  position: fixed;
  top: 6%;
  right: 0%;
  left: 0%;
  margin: auto;
  width: 52vw;
  z-index: 2126;
  visibility: hidden;
}
#loadstep5{
  position: fixed;
  top: 6%;
  right: 0%;
  left: 0%;
  margin: auto;
  width: 52vw;
  z-index: 2128;
  visibility: hidden;
}
#loadstep6{
  position: fixed;
  top: 6%;
  right: 0%;
  left: 0%;
  margin: auto;
  width: 52vw;
  z-index: 2130;
  visibility: hidden;
}
#loadstep7{
  position: fixed;
  top: 6%;
  right: 0%;
  left: 0%;
  margin: auto;
  width: 52vw;
  z-index: 2132;
  visibility: hidden;
}
#loadstep8{
  position: fixed;
  top: 6%;
  right: 0%;
  left: 0%;
  margin: auto;
  width: 52vw;
  z-index: 2134;
  visibility: hidden;
}
#loadstep9{
  position: fixed;
  top: 6%;
  right: 0%;
  left: 0%;
  margin: auto;
  width: 52vw;
  z-index: 2136;
  visibility: hidden;
}
#loadstep10{
  position: fixed;
  top: 6%;
  right: 0%;
  left: 0%;
  margin: auto;
  width: 52vw;
  z-index: 2138;
  visibility: hidden;
}

.center-btn-screen2 {
  position: absolute; 
  bottom: 5%; 
  left: 5%;
  margin: auto; 
  z-index: 1400;       
}
.share2 {
  position: absolute; 
  bottom: 5%; 
  right: 5%;
  margin: auto; 
  z-index: 1400;
}
#loading_ff2{
  position: absolute; 
  font-size: 250%;
  left: 0px; 
  right: 0px;   
  text-align: center;
  margin: auto;
  z-index: 1000;
  top: 30%; 
  display: none;
}
  /* #screenwater{
	position: fixed;
    bottom: 0%;
    right: 0%;
	visibility: visible;
    width: 100%;
    z-index: 95;
	opacity: 60%;
  } */

  /* w3s css */
  .w3-container{padding:0.01em 16px}
  .w3-border-light-blue{border-color:#87CEEB!important}
 .w3-blue-grey{color:#fff!important;background-color:#607d8b!important}
 .w3-blue{color:#fff!important;background-color:#2196F3!important}
#timer{
  position: absolute;
  top: 1%;
  left: 45px;
  right: 0;
  width: 30%;
  padding-top: 0%;
  margin: auto;
  z-index: 2001;
  visibility: hidden;

}

 body {
  font-family: sans-serif;
  display: grid;
  height: 100vh;
  place-items: center;
}

.base-timer {
  position: relative;
  width: 20vmin;
  height: 20vmin;
}

.base-timer__svg {
  transform: scaleX(-1);
}

.base-timer__circle {
  fill: none;
  stroke: none;
}

.base-timer__path-elapsed {
  stroke-width: 7px;
  stroke: rgb(245, 245, 245);
}

.base-timer__path-remaining {
  stroke-width: 7px;
  stroke-linecap: round;
  transform: rotate(90deg);
  transform-origin: center;
  transition: 1s linear all;
  fill-rule: nonzero;
  stroke: currentColor;
}

.base-timer__path-remaining.green {
  color: #00b7ff;;
}

.base-timer__path-remaining.orange {
  color: orange;
}

.base-timer__path-remaining.red {
  color: red;
}

.base-timer__label {
  position: absolute;
  width: 20vmin;
  height: 20vmin;
  top: 0;
  display: flex;
  color:#004F6F;
  align-items: center;
  justify-content: center;
  font-size: 250%;
}
 /* png animation css */
 #pnganimation{
  position: absolute; 
  top: 30; 
  bottom: 0%; 
  left: 0%; 
  right: 0%; 
  padding-top: 10%;
  margin: auto; 
  z-index: 90;
  width: 100%;
  /* opacity: 70%; */
 }

 @media (min-height: 780px) {
  
  #textstuff{
    top: 15vw;
  }
  #textstuff2{
    top: 22vw;
  }
  #textstuff3 {
    width: 55vw;
    top: 21vw;
    left: 23vw;
    right: 25vw;
}
  #fg2{
    width: 105vw;
  }
  #fg3{
    width: 114vw;
  }
  #fg4 {
    width: 97vw;
    bottom: 23.5vw;
    right: 2vw;
    left: 2vw;
}
#coupon{
  top:10%
}
#bub{
  width: 23vw;
}
#checkholder{
  font-size:79%;
}
#namelabel{
  font-size:200%;
  top:38%;
}
#phonelabel{
  font-size:200%;
  top:51%;

}

  }
  @media (max-height: 645px) {
  #checkholder{
    font-size:59%;
  }
  #namelabel{
    top:38%;
  }
  #phonelabel{
    top:51%;

  }
}
  @media (max-height: 485px) {
    #textstuff{
      width: 70vw;
      left: 15vw;
      right: 15vw;
    }
    #textstuff2{
      width: 70vw;
      left: 15vw;
      right: 15vw;
    }
    #textstuff3 {
      width: 35vw;
      top: 12vw;
      left: 33vw;
      right: 33vw;
  }
  #fg1{
    width: 80vw;
    bottom: 0;
    left: 10%;
  }
  #coupon{
    font-size: 110%;
  }
    #fg2{
      width: 85vw;
    }
    #fg3{
      width: 85vw;
    }
    #fg4 {
      width: 70vw;
      bottom: 17vw;
      right: 16vw;
      left: 16vw;
  }
  #namelabel{
    font-size: 150%;
    top:38%;
  }
  #phonelabel{
    font-size: 150%;
    top:51%;
  }
  #checkholder{
    font-size:61%;
  }
}