*{
  margin: 0;
  padding: 0;
  box-sizing: border-box; 
  }
  /* linear-gradient(-90deg , rgba(197,32,38,0.2), rgba(0,173,240,0.2), rgba(247,146,55,0.2),rgba(0,141,68,0.2)), */
  body{
    
    position: relative;
    width: 100vw;
    height: 100vh;
   
    
  }

  .bg{
    position: absolute;
    top:0%;
    width: 100vw;
    height: 100vh;
    background: url(swing.jpg) no-repeat;
    background-size: 100%;
    z-index: -15;
  background-image: url(swing.jpg);
transition: all 0.8s;

background-position: contain;
opacity: 0.8;
  }
  
  .toysoman{
    position: absolute;
    top:5%;
    right:5%;
    width: 40vh;
    height: 40vh;
    background: url(babytoys.png) no-repeat center;
    background-size: 80%;
    z-index: -14;
    border: 5px solid rgba(197,32,38,1);
    border-radius: 50%;
    animation: flipx 3s  ease-in-out infinite forwards;
    perspective: 1000px;
    transform-style: preserve-3d;
    /* backface-visibility: hidden; */
  }
  @keyframes flipx {
    from {
      transform: rotateY(0deg);
    }
    to {
      transform: rotateY(-360deg);
    }
   
  }
.stage{
  position: fixed;
  top:50%;
    right:10%;
  border-radius: 50%;
  background-image: linear-gradient(-90deg , rgba(197,32,38,0.2), rgba(0,173,240,0.2), rgba(247,146,55,0.2),rgba(0,141,68,0.2));
}
  #spinner div {
    position: absolute;
    width: 140px;
    height: 140px;
    border: 1px solid #ccc;
    background: rgba(255,255,255,0.8);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
    text-align: center;
    line-height: 140px;
    font-size: 100px;
    border-radius: 50%;
    border: 2px solid rgba(247,146,55,0.2);
    backface-visibility: hidden;
  }

  #spinner .face1 { transform: translateZ(60px); 
      backface-visibility: hidden;                            
     }
  #spinner .face2 { transform: rotateY(90deg) translateZ(60px);
      backface-visibility: hidden;               
    }
  #spinner .face3 { transform: rotateY(90deg) rotateX(90deg) translateZ(60px);
    backface-visibility: hidden;  
  }
  #spinner .face4 { transform: rotateY(180deg) rotateZ(90deg) translateZ(60px);
    backface-visibility: hidden; 
  }
  #spinner .face5 { transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px);
    backface-visibility: hidden; 
  }
  #spinner .face6 { transform: rotateX(-90deg) translateZ(60px); 
     backface-visibility: hidden;              
    }

  @keyframes spincube {
    from,to  { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
    16%      { transform: rotateY(-90deg);                           }
    33%      { transform: rotateY(-90deg) rotateZ(90deg);            }
    50%      { transform: rotateY(-180deg) rotateZ(90deg);           }
    66%      { transform: rotateY(90deg) rotateX(90deg);             }
    83%      { transform: rotateX(90deg);                            }
  }

  #spinner {
    animation-name: spincube;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 6s;
    transform-style: preserve-3d;
    transform-origin: 70px 70px 0;
    border-radius: 50%;
  }
  #spinner div img{
    width: 100%;
  height: 100%;
  border-radius: 50%;
  }


  @keyframes spinner1 {
    from {
      transform: rotateY(0deg);
    }
    to {
      transform: rotateY(-360deg);
    }
  }
  
  #stage1 {
    margin: 1em auto;
    perspective: 1200px;
    position: fixed;
  top: 3%;
  left:35%;
  background-color: transparent;
  }
  
  #spinner1 {
    animation-name: spinner1;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 12s;
    transform-style: preserve-3d;
    background-color: transparent;
  }
  #spinner1:hover {
    animation-play-state: paused;
  }
  
  #spinner1 img {
    position: absolute;
    /* border: 1px solid #ccc; */
    background: rgba(255,255,255,0.8);
    background-color: transparent;
    /* box-shadow: inset 0 0 20px rgba(0,0,0,0.2); */
    
  }



  #spinner:hover {
    animation-play-state: paused;
  }



  .loginlogo{
    border: 2px solid rgba(247,146,55,0.2);
    position: fixed;
    top:5%;
    left:5%;
    border-radius: 50%;
    width:8rem;
    height:8rem;
  z-index: 40;
  box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14),
  0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(90, 50, 201, 0.4);
  padding: 0.8rem;
  animation: flipx 6s  ease-in-out infinite forwards;
  background-color: transparent;
  }
  
  .loginlogo:hover{
    filter: grayscale(0%);
    width: 8rem;
    height: 8rem;
    box-shadow: 0 24px 38px 3px rgba(39, 37, 178, 0.5),
  0 9px 46px 8px rgba(143, 49, 49, 0.62), 0 11px 15px -7px rgba(201, 50, 50, 0.4);
  border-radius: 50%;
  animation-play-state: paused;
  }
  .loginlogo img{
    border-radius: 50%;
    width: 100%;
height: 100%;
  }

  .truck{
    
    position: fixed;
    bottom:0%;
    right:5%;
    
    width:15rem;
    height:15rem;
  z-index: 40;
  
  
  animation: truck 8s  linear infinite forwards;
  background-color: transparent;
  }
  
  .truck img{
    
    width: 100%;
height: 100%;

  }

  
  @keyframes truck {
    from {
      right: -10%;
      
    }
    to {
      right:100%;
     
    }
   
    
  }



  
.instagram {
  position: relative;
  margin: 3rem auto;
  width: 250px;
  height: 250px;
  align-self: center;
  border-radius: 55px;
  background: radial-gradient(circle at 30% 110%, #ffdb8b 0%, #ee653d 25%, #d42e81 50%, #a237b6 75%, #3e5fbc 100%);
  box-shadow: 0 15px 40px 1px rgba(0, 0, 0, 0.3);
 }
 .instagram:hover {
  box-shadow: 1px 1px 40px 1px #3e5fbc,1px 1px 40px 1px #d42e81;
  animation-play-state: paused;
 }
 .instagram span {
  display: block;
  border: 15px solid #fff;
  width: 150px;
  height: 150px;
  border-radius: 55px;
  position: absolute;
  top: 50%;
  left: 50%;
  
 transform: translate(-50%, -50%);
 }
 .instagram span:before, .instagram span:after {
  content: "";
  position: absolute;
 }
 .instagram span:before {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 15px solid #fff;
  top: 50%;
  left: 50%;
  
          transform: translate(-50%, -50%);
 }
 .instagram span:after {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  top: 16px;
  right: 16px;
 }
 
 
 .insto{
  position: fixed;
  top: 22%;
  left: 20%;
 width:50%;
/* transform: translate(-50%); */
 margin: 1rem auto;
 display: grid;
 grid-template-columns: 1fr;
 /* position: relative; */
 
z-index: 50;
/* animation: instoanim 4s  ease-in-out infinite forwards; */
transform: scale(0.4);
}

@keyframes instoanim {
  from {
    transform: rotateY(0deg)  scale(0);
  }
  to {
    transform: rotateY(-700deg)  scale(0.4);
  }
 
}


.whatsappcont{
  position: absolute;
  top:45%;
  left: 0%;
 width:28%;
 
 /* margin: 1rem auto; */
 
 /* position: relative; */
 transform: scale(0.8);

box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14),
0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(201, 50, 50, 0.4);
padding: 0.1rem;
z-index: 100;

}




.popup-whatsapp{
  display: block;
  /* background-color: #77bb4a; */
 }
 
 
 
 input.whats-input::placeholder {
  /* Most modern browsers support this now. */
  color: rgba(68, 68, 68, 0.705);
  opacity: 0.8;
  /* box-shadow: 1px 1px 2px 0px rgba(68, 68, 68, 0.705); */
  
  padding: 0.3rem;
  font-size: 120%;
  font-weight: bold;
 }
 input.whats-input[type=text] {
  background-color: #f8f8f8;
 
  transition: width 0.3s ease-in-out;
  transition: .3s;
  line-height: 1.7rem;
  font-size: 120%;
  font-weight: bold;
  outline: none;
  border: thin solid #eee;
  box-shadow: 1px 1px 2px 0px rgba(68, 68, 68, 0.705);
  border-radius: 8px;
  padding-right: 0.8rem;
 }
 
 .icon-whatsapp {
  width: 60px;
  height: 60px;
  position: absolute;
  right: -10%;
  top:-40%;
  text-shadow: 1px 1px 2px  rgba(68, 68, 68, 0.705);
 }
 
 .icon-font-color {
  color: #77bb4a;
  /* background-color: #77bb4a; */
 }
 
 .icon-font-color--black {
  color: #ccc;
  transform: scaleX(-1);
  vertical-align: middle;
  text-shadow: 1px 1px 2px  rgba(68, 68, 68, 0.705);
  background-color: transparent;
 }
 .whatsappp{
  background-color: #c2f79f;
  padding: 0.4rem;
  box-shadow: 0px 0px 2px 2px rgba(220, 220, 220, 0.86);
  border-radius: 8px;
 }

 
.popup-whatsapp {
  display: flex;
  /* position: absolute; */
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: auto;
  height: auto;
  padding: 10px;
  bottom: 85px;
  /* right: 6px; */
  transition: .5s;
  border-radius: 10px;
  background-color: white;
  /* offset-x > | offset-y ^| blur-radius | spread-radius | color */
  -webkit-box-shadow: 2px 1px 6px 0px rgba(68, 68, 68, 0.705);
  -moz-box-shadow: 2px 1px 6px 0px rgba(68, 68, 68, 0.705);
  box-shadow: 2px 1px 6px 0px rgba(68, 68, 68, 0.705);
  animation: slideInRight .6s 0.0s both;
  background: url(whatsupbackground.jpg) no-repeat center;
 
 }
 .popup-whatsapp > div {
  margin: 5px;
 }
 button{
  outline: none;
  border: 0;
 /* display: inline-block; */
 place-items: center;
 }
 /* material-icons{

 } */
 .txt{
  position: absolute;
  top:4%;
  left:50%;
  transform: translateX(-50%);
  width:30rem;
  font-size: 120%;
  font-weight: bolder;
  text-align: center;
  color:rgba(197,32,38,1);
text-shadow: 1px 0px 2px  rgba(0,0,0,0.7);
display: inline-block;
white-space:normal; 
z-index: 4;
}
.txtsub5{
  color:rgba(0,141,68,1);
  font-size: 160%;
}


.txtsub6{
  color:rgba(0,173,240,1);
  font-size: 180%;
}


.txtsub7{
  color:rgba(247,146,55,1);
  font-size: 190%;
}

 @media only screen and (max-width: 860px) {
  body{
    
    position: relative;
    width: 100vw;
    height: 100vh;
   display: grid;
    grid-template-columns: 1fr;
    place-items: center;

  }
  .toysoman{
    position: absolute;
    top:1vh;
    left:3%;
    transform: translateX(-2%);
    width: 20vh;
    height: 20vh;
    background: url(babytoys.png) no-repeat center;
    background-size: 80%;
    z-index: -40;
    border: 5px solid rgba(197,32,38,1);
    border-radius: 50%;
    animation: none;
    
  }
  .stage{
    display: none;
  }
  
  .loginlogo{
    border: 2px solid rgba(247,146,55,0.2);
    position: fixed;
    
    border-radius: 50%;
   
  z-index: 40;
  box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14),
  0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(90, 50, 201, 0.4);
  padding: 0.8rem;
  animation: none;
  background-color: transparent;
  top:1vh;
  left:23vh;
    /* transform: translateX(-1%); */
    width: 20vh;
    height: 20vh;
    
  }
  
  .loginlogo:hover{
    filter: grayscale(0%);
   
    box-shadow: 0 24px 38px 3px rgba(39, 37, 178, 0.5),
  0 9px 46px 8px rgba(143, 49, 49, 0.62), 0 11px 15px -7px rgba(201, 50, 50, 0.4);
  border-radius: 50%;
  animation-play-state: paused;
  
    
  }
  .loginlogo img{
    border-radius: 50%;
    width: 100%;
height: 100%;
  }
  .txt{
    top:40vh;
    width:95vw;
    font-size: 100%;
  }
  #stage1 {
    display: none;
  }
  
 .insto{
  position: fixed;
  transform: scale(0.8),translateX(-10%);
  top: 10vh;
  left: 10%;
 width:50%;

/* transform: translate(-50%); */
 margin: 0rem auto;
 display: grid;
 grid-template-columns: 1fr;
 /* position: relative; */
 
z-index: 50;
/* animation: instoanim 4s  ease-in-out infinite forwards; */

}

.truck{
    
  position: fixed;
  bottom:0%;
  right:1%;
  
  width:12rem;
  height:12rem;
z-index: 40;


animation: none;
background-color: transparent;
}

.whatsappcont{
  position: absolute;
  top:64vh;
  right: 0%;
 width:80%;
 
 /* margin: 1rem auto; */
 
 /* position: relative; */
 transform: scale(0.8);

box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14),
0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(201, 50, 50, 0.4);
padding: 0.1rem;
z-index: 100;

}
.bg{
  display: none;
}
 }