@import 'reset.css';
body {
 width: 100%;
 height: 1555px;
 margin: 0 auto;
 background: white;
 display: block;
 position: relative;
 padding-top: 1px;
}
body::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  z-index: -5;
  background: url("../images/skelet_2.png") no-repeat;
  background-size: 100% auto;
  animation: skeletappears 10s infinite linear;
}
@keyframes skeletappears {
  49%{opacity: 0}
  50%{opacity: 1}
  59%{opacity: 1}
  60%{opacity: 0}
}
@keyframes restdisappears {
  49%{opacity: 1}
  50%{opacity: 0}
  59%{opacity: 0}
  60%{opacity: 1}
}
.wrapper {
  position: relative;
  width: 100%;
}
.content {
  position: absolute;
  top: 0;  bottom: 0;  left: 0;  right: 0;
  padding-bottom: 141%;
}
.big_one {
  display: flex;
  width: 100%;
  height: 44%;
  display: block;
  position: absolute;
  width: 100%;
  /* padding-bottom: 62.5%; */
}
.experiment {
  width: 300px;
  height: 400px;
  background-color: red;
  position: absolute;
}
.s1 {
  height: 100%;
  width: 20.5%;
  position: relative;
  display: inline-block;
  overflow: hidden;
}
.s1 div {
  position: absolute;
}
.d1 {
  height: 67%;
  width: 37%;
  margin-top: 13%;
  background: #00B6F4;
  animation: restdisappears 10s infinite linear;
}
.d2 {
  height: 20%;
  width: 30%;
  margin-top: 88%;
  margin-left: 37%;
  background: black;
  animation: restdisappears 10s infinite linear;
}
.d3 {
  height: 30%;
  width: 22%;
  margin-top: 73%;
  margin-left: 66%;
  background: black;
  border-radius: 50px;
  animation: turntoblue 2s infinite ease-in;
}
.d4 {
  height: 39%;
  width: 23%;
  margin-top: 61%;
  margin-left: 77%;
  background: #00B6F4;
  border-radius: 50px;
  animation: turntoblack 2s infinite ease-in;
}
.d5 {
  height: 49%;
  width: 26%;
  margin-top: 47%;
  margin-left: 89%;
  background: black;
  border-radius: 50px;
  animation: turntoblue 2s infinite ease-in;
}
@keyframes turntoblack {
  49% {background-color: #00B6F4}
  50% {background-color: black}
  100% {background-color: black}
}
@keyframes turntoblue {
  49% {background-color:  black}
  50% {background-color: #00B6F4}
  100% {background-color: #00B6F4}
}
.d6 {
  height: 15%;
  width: 32%;
  margin-top: 12%;
  margin-left: 50%;
  animation: bzz 0.2s infinite alternate ease-in-out;
  animation-play-state: running;
}
.d6:hover {animation-play-state: paused;}

@keyframes bzz {
  0%{transform: rotateZ(-1deg)}
  5%{transform: rotateZ(2deg);}
  10%{transform: rotateZ(-2deg);}
  15%{transform: rotateZ(1deg);}
  70% {transform: scale(1.05) rotateX(30deg);}
  100% {transform: scale(1.2) rotateX(-30deg);}
}
@keyframes bzz2 {
  0%{transform: rotateZ(-1deg)}
  5%{transform: rotateZ(2deg);}
  10%{transform: rotateZ(-2deg);}
  15%{transform: rotateZ(1deg);}
  70% {transform: rotateX(30deg);}
  100% {transform: rotateX(-30deg);}
}
.d6 img {
  height: 100%;
  width: 100%;
}
.red_lamp {
  height: 23.5%;
  width: 74%;
  margin-left: 17%;
  margin-top: 217%;
  /* background: red;
  opacity: 0.2; */
}
.d38_1 {
  height: 83%;
  width: 70%;
  margin-top: 26%;
  margin-left: 15%;
}
.d38_1 img {
  height: 100%;
  width: 100%;
}
.d39_1 {
  height: 33%;
  width: 100%;
  background: black;
  border-radius: 40px;
  /* bottom: -35px; */
  margin-top: 81%;
  z-index: 2;
}
.d401 {
  height: 29%;
  width: 72%;
  margin-top: 1%;
  margin-left: 2%;
}
.d401 div {
  position: absolute;
  height: 33%;
  width: 25%;
  border-radius: 50px;
  background-color: #F24941;
  opacity: 0;
}
.d401_2 {
  margin-top: 17%;
  transform: rotate(45deg);
  animation: lineappears 4s alternate infinite linear;

}
.d401_3 {
  margin-top: 6%;
  margin-left: 55%;
  transform: rotate(90deg);
  animation: lineappears 4s 1s alternate infinite linear;

}
.d401_4 {
  margin-top: 7%;
  margin-left: 79%;
  transform: rotate(100deg);
  animation: lineappears 4s 2s alternate infinite linear;
}
@keyframes lineappears {
  49%{opacity: 0;}
  50%{opacity: 1;}
  100%{opacity: 1;}

}
.d41_1 {
  height: 55%;
  width: 22%;
  margin-left: 39%;
  margin-top: 40%;
  border-radius:50px;
  background: white;
  opacity: 0.2;
  z-index: 0;
  animation: lamp1 1s linear alternate infinite;
}
.s2 {
  height: 96%;
  width: 59.3%;
  display: inline-block;
  position: relative;
  vertical-align: top;
  z-index: 2;
  left: -0.4%;
  margin-top: 2.5%;
  /* margin: 0 auto; */
  /* margin-left: 295px; */
}
/* .s2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  background: url("../images/head.png");
  height: 100%;
  display: block;
  opacity: 1;
} */
.d7 {
  height: 100%;
  width: 100%;
  position: absolute;
}
.d7 img {
  height: 100%;
  width: 100%;
}
.d8_2 {
  height: 38%;
  width: 38%;
  margin-left: 2%;
  margin-top: 12.5%;
  position: absolute;
  animation: restdisappears 10s infinite linear;
}
.d8_2 div {
  position: absolute;
}
.d8 {
  height: 100%;
  width: 100%;
  border-radius: 50%;
  background-color: black;
}
.d9 {
  height: 69%;
  width: 69%;
  border-radius: 50%;
  background-color: #FFD42E;
  margin-left: 15%;
  margin-top: 15%;
  animation: eye_yellow 2s infinite ease-in-out;
}
@keyframes eye_yellow {
  49% {background-color: #FFD42E}
  50% {background-color: #F24941}
  100% {background-color: #F24941}
}
.d10 {
  height: 43%;
  width: 43%;
  border-radius: 50%;
  background-color: #F24941;
  margin-left: 28%;
  margin-top: 28%;
  position: absolute;
  animation: eye_red 2s infinite ease-in-out;
}
@keyframes eye_red {
  49% {background-color:  #F24941}
  50% {background-color: #FFD42E}
  100% {background-color: #FFD42E}
}
.d11 {
  height: 6%;
  width: 6%;
  border-radius: 50%;
  background-color: black;
  margin-left: 7%;
  margin-top: 7%;
  position: absolute;
  animation: restdisappears 10s infinite linear;
}
.d12 {
  height: 27%;
  width: 65%;
  border: 38px solid black;
  border-radius: 107px;
  margin-left: 0%;
  margin-top: 53%;
  position: absolute;
  animation: bzz2 0.2s infinite alternate ease-in-out;
  animation-play-state: running;
}
.d12:hover {animation-play-state: paused;}

.d12 div {
  display: inline-flex;
  vertical-align: top;
}
.d13 {
  height: 102%;
  width: 9%;
  background-color: black;
  margin-left: 4%;
  /* margin-top: -2px; */
  animation: restdisappears 10s infinite linear;
}
.d14 {
  height: 102%;
  width: 9%;
  background-color: black;
  margin-left: 23%;
  margin-top: -2px;
}
.d15 {
  height: 102%;
  width: 9%;
  background-color: black;
  margin-left: 8%;
  margin-top: -2px;
  animation: restdisappears 10s infinite linear;
}
.d16 {
  height: 102%;
  width: 9%;
  background-color: black;
  margin-left: 16%;
  margin-top: -2px;
}
.d17 {
  height: 27%;
  width: 27%;
  border: 38px solid black;
  border-radius: 50%;
  margin-top: 4.5%;
  right: 4.5%;
  position: absolute;
  z-index: 2;
  animation: restdisappears 10s infinite linear;
}
.d18 {
  height: 42%;
  width: 42%;
  border-radius: 50%;
  background-color: red;
  margin-top: 29%;
  right: 29%;
  position: absolute;
  animation: eye 3s 1s infinite alternate ease-in;
  animation-play-state: running;
}
.d18:hover {animation-play-state: paused;}

@keyframes eye {
  26%{transform: scale(1);}

  27% {transform: scale(2.1);}
  34% {transform: scale(2.1);}

  35% {transform: scale(1.5);}
  42% {transform: scale(1.5);}

  43% {transform: scale(2.1);}
  50% {transform: scale(2.1);}

  51% {transform: scale(1.3);}
  58% {transform: scale(1.3);}

  59% {transform: scale(2.2);}
  66% {transform: scale(2.2);}

  67% {transform: scale(1.5);}
  75% {transform: scale(1.5);}

  76% {transform: scale(1);}
}

.details {
  width: 500px;
  height: 500px;
  position: absolute;
  right: 0px;
  bottom: 0px;
}
.d19 {
  height: 6%;
  width: 6%;
  border-radius: 50%;
  background-color: black;
  bottom: 7%;
  right: 7%;
  position: absolute;
  animation: restdisappears 10s infinite linear;
}
.d20{
  height: 7%;
  width: 4%;
  border-radius: 50px;
  background-color: black;
  position: absolute;
  right: 38%;
  bottom: 49%;
  animation: restdisappears 10s infinite linear;
}
.d21{
  height: 7%;
  width: 4%;
  border-radius: 50px;
  background-color: black;
  position: absolute;
  right: 29%;
  bottom: 47%;
  transform: rotate(30deg);
  animation: restdisappears 10s infinite linear;
}
.d22{
  height: 7%;
  width: 4%;
  border-radius: 50px;
  background-color: black;
  position: absolute;
  right: 15%;
  bottom: 26%;
  transform: rotate(90deg);
  animation: restdisappears 10s infinite linear;
}
.d23{
  height: 7%;
  width: 4%;
  border-radius: 50px;
  background-color: black;
  position: absolute;
  right: 15%;
  bottom: 16%;
  transform: rotate(110deg);
  animation: restdisappears 10s infinite linear;
}
.d24{
  height: 16%;
  width: 11%;
  margin-left: 0px;
  margin-top: 0px;
  position: absolute;
  right: 11%;
  bottom: 37%;
  animation: bzz 0.2s infinite alternate ease-in-out;
  animation-play-state: running;
}
.d24:hover {animation-play-state: paused;}

.d24 img{
  height: 100%;
  width: 100%;
}
.s3 {
  height: 100%;
  width: 20%;
  display: inline-block;
  position: relative;
  vertical-align: top;
  margin-left: -0.75%;
  overflow: hidden;
  /* background: red; */
}
.s3 div {position: absolute;}
.d25 {
  height: 49%;
  width: 26%;
  bottom: 15%;
  margin-left: -14%;
  background: black;
  border-radius: 50px;
  z-index: 3;
  animation: turntoblue 2s infinite ease-in;

}
.d26 {
  height: 39%;
  width: 23%;
  bottom: 20%;
  margin-left: 1%;
  background: #00B6F4;
  border-radius: 50px;
  z-index: 2;
  animation: turntoblack 2s infinite ease-in;

}
.d27 {
  height: 30%;
  width: 22%;
  bottom: 24%;
  margin-left: 15%;
  background: black;
  border-radius: 50px;
  animation: turntoblue 2s infinite ease-in;

}
.d28 {
  height: 20%;
  width: 35%;
  bottom: 29%;
  margin-left: 36%;
  background: black;
  animation: restdisappears 10s infinite linear;
}
.d29 {
  height: 70%;
  width: 29%;
  margin-top: 13%;
  right: 0px;
  background: black;
  animation: restdisappears 10s infinite linear;
}
.d30 {
  height: 4%;
  width: 29%;
  background: #F655A0;
  margin-top: 42%;
  right: 0px;
  animation: restdisappears 10s infinite linear;
}
.d31 {
  height: 4%;
  width: 29%;
  background: #F655A0;
  margin-top: 66%;
  right: 0px;
  animation: restdisappears 10s infinite linear;
}
.s4 {
  height: 33%;
  width: 17%;
  display: inline-block;
  position: absolute;
  vertical-align: top;
  z-index: 1;
  /* margin-left: -34px; */

  top: 0px;
  right: 8.5%;
}
.s4 div {
  position: absolute;
}
.d32 {
  height: 27%;
  width: 57%;
  background: #F24941;
  bottom: 6.5%;
  margin-left: 16%;
}
.d33 {
  height: 52%;
  width: 33%;
  background: #F24941;
  bottom: 6.5%;
  right: 16%;
}
.d34 {
  height: 44%;
  width: 52%;
  border-radius: 50%;
  background: #F24941;
  right: 6%;
  margin-top: 14%;
}
.d35 {
  height: 26%;
  width: 31%;
  background: white;
  border-radius: 50%;
  opacity: 0.2;
  margin-top: 24%;
  right: 16.5%;
  animation: lamp1 1s linear alternate infinite;
}
@keyframes lamp1 {
  0% {opacity: 0;}
  39%{opacity: 0;}
  40%{opacity: 1; background-color: #FFD42E; filter: blur(2px); transform: scale(1.2);}
  45%{opacity: 0;}
  50%{opacity: 1; background-color: #FFD42E; filter: blur(2px); transform: scale(1.2);}
  55%{opacity: 0;}
  60%{opacity: 1; background-color: #FFD42E; filter: blur(2px); transform: scale(1.2);}
  65%{opacity: 0;}
  100%{opacity: 0;}
}
@keyframes lamp2 {
  0% {opacity: 0;}
  39%{opacity: 0;}
  40%{opacity: 1;}
  45%{opacity: 0;}
  50%{opacity: 1;}
  55%{opacity: 0;}
  60%{opacity: 1;}
  65%{opacity: 0;}
  100%{opacity: 0;}
}
.s5 {
  height: 4.5%;
  width: 14%;
  display: inline-flex;
  position: absolute;
  vertical-align: top;
  right: 3%;
  bottom: 4%;
}
.d36{
  height: 100%;
  width: 42%;
  background: #F655A0;
  /* margin-left: 81px; */
  position: relative;
}
.d37{
  height: 100%;
  width: 42%;
  background: #F655A0;
  margin-left: 12%;
  position: relative;
  animation: press 2s alternate infinite ease-in-out;
}
@keyframes press {
  100% {transform: translateY(10px) scaleX(1.1); border-radius: 20% 20% 0 0; }
}
.s6 {
  height: 206px;
  width: 220px;
  margin-top: 645px;
  margin-left: 50px;
  overflow: hidden;
  position: absolute;
}
.big_two {
  width: 100%;
  height: 57%;
  display: block;
  position: absolute;
  margin-top: -3%;
  bottom: 1%;
}
.ticket {
  position: absolute;
  height: 65%;
  width: 12%;
  margin-top: 16.6%;
  right: 16.9%;
  z-index: 5;
  overflow: hidden;
  /* animation: restdisappears 10s infinite linear; */
}
/* .ticket_line {
  margin-top: -11%;
  height: 5%;
  width: 100%;
  border-radius: 50px;
  background-color: black;
} */
.ticket img {
  width: 100%;
  position: absolute;
  height: 55%;
  top: -35%;
  animation: ticket_move 5s ease-in infinite;
  animation-play-state: paused;
}
.ticket img:hover {
  animation-play-state: running;
}
@keyframes ticket_move {
  /* 0% {transform: translateY(-200px);} */
  40% {transform: translateY(370px)}
  60% {transform: translateY(370px)}
  80% {transform: translateY(0)}
  100% {transform: translateY(0)}
}
.s7 {
  height: 34.9%;
  width: 100%;
  display: flex;
  overflow: hidden;
}
.s7 div{
  /* display: inline-block; */
  /* position: absolute; */
}
.d38 {
  width: 30%;
  height: 24%;
  margin-left: -4%;
  margin-top: 5.5%;
  background: #C4C4C4;
  border-radius: 38px;
  position: absolute;
  /* animation: restdisappears 10s infinite linear; */
}
.d38 div {
  width: 6.5%;
  height: 69%;
  display: inline-block;
}
/* .d39 {
  margin-left: 19%;
  background: black;
  border-radius: 50px;
  margin-top: 10%;
}
.d40 {
  margin-left: 9%;
  background: black;
  border-radius: 50px;
}
.d41 {
  margin-left: 9%;
  background: black;
  border-radius: 50px;
}
.d42 {
  margin-left: 9%;
  background: black;
  border-radius: 50px;
}
.d43 {
  margin-left: 9%;
  background: black;
  border-radius: 50px;
} */
.d44 {
  width: 19.5%;
  height: 24.21%;
  border-radius: 50%;
  /* background-color: #00B6F4; */
  margin-left: 28.8%;
  margin-top: 5.7%;
  position: absolute;
  /* opacity: 0.2; */
  animation: linerotate 5s infinite ease-in-out;
  animation-play-state: running;
}
.d44:hover {animation-play-state: paused;}

.d444 {
  width: 19.5%;
  height: 24.21%;
  border-radius: 50%;
  background-color: #00B6F4;
  margin-left: 28.8%;
  margin-top: 5.7%;
  position: absolute;
  /* opacity: 0.2; */
  /* animation: linerotate 5s infinite linear; */
}
.d44_2 {
  position: absolute;
  width: 19%;
  height: 19%;
  background: black;
  top: 41.5%;
  left: 41.5%;
  border-radius: 50%;
  z-index: 2;
}
.d44_3 {
  position: absolute;
  width: 12%;
  height: 34%;
  background: #FFD42E;
  top: 15%;
  left: 45%;
  border-radius: 50px;
  /* transform: rotate(0deg); */
}
@keyframes linerotate {
  25% {transform: rotate(-90deg);}
  35% {transform: rotate(90deg);}
  39% {transform: rotate(-20deg);}
  50% {transform: rotate(90deg);}
  55% {transform: rotate(-45deg)}
}
.d444 img{
  margin-left: 9%;
  margin-top: 8%;
  height: 48%;
  width: 84%;
}
.d45 {
  width: 100%;
  height: 4%;
  background-color: black;
  position: absolute;
}
.d46 {
  width: 36%;
  height: 18%;
  border-radius: 23px;
  background-color: #F24941;
  position: absolute;
  right: 5%;
  margin-top: 11%;
  /* opacity: 0.2; */
  /* animation: restdisappears 10s infinite linear; */
}
.d46 img {
  margin-left: 3%;
  margin-top: 2%;
  height: 89%;
}
.d47 {
  width: 4%;
  height: 30%;
  background-color: black;
  margin-left: 51.5%;
  margin-top: 5.5%;
  position: absolute;
}
.d48 {
  width: 45%;
  height: 4%;
  background-color: black;
  margin-top: 5.5%;
  right: 0%;
  position: absolute;
}
.s8 {
  width: 100%;
  height: 55%;
  position: relative;
}
.s8 img {
  position: absolute;
}
.d49 {
  height: 84%;
  width: 86.3%;
  margin-left: 3%;
  border: 37px solid black;
  position: absolute;
  /* overflow: hidden; */
  /* background: white; */
  /* z-index: 5; */
}
/* .d49 div, .d49 img {animation: restdisappears 10s infinite linear;} */

.vertical_line {
  background-color: red;
  height: 40%;
  width: 3%;
  position: absolute;
  left: 0%;
  top: 8%;
  border-radius: 50px;
  z-index: 3;
  animation: vertical_line_animation 7s cubic-bezier(.35,.73,.37,.77) infinite;
}

@keyframes vertical_line_animation {
  1% {opacity: 1;}
  2% {opacity: 0;}
  3% {opacity: 1;}
  4% {opacity: 0;}
  5% {opacity: 1;}
  6% {opacity: 0;}
  7% {opacity: 1;}
  8% {opacity: 0;}
  9% {opacity: 1;}
  10% {opacity: 0;}
  11% {opacity: 1;}

  14% {left: 0%; top: 8%;}
  20% {left: 97%; top: 8%;}

  22% {opacity: 1;}
  23% {opacity: 0;}
  24% {opacity: 1;}
  25% {opacity: 0;}
  26% {opacity: 1;}
  27% {opacity: 0;}
  28% {opacity: 1;}
  29% {opacity: 0;}
  30% {opacity: 1;}

  35% {left: 97%; top: 8%;}
  37% {left: 97%; top: 53%;}

  38% {opacity: 1;}
  39% {opacity: 0;}
  40% {opacity: 1;}
  41% {opacity: 0;}
  42% {opacity: 1;}
  43% {opacity: 0;}
  44% {opacity: 1;}
  45% {opacity: 0;}
  46% {opacity: 1;}

  47% {left: 97%; top: 53%; }
  53% {left: 0%; top: 53%; }

  54% {opacity: 1;}
  55% {opacity: 0;}
  56% {opacity: 1;}
  57% {opacity: 0;}
  58% {opacity: 1;}
  59% {opacity: 0;}
  60% {opacity: 1;}
  61% {opacity: 0;}
  62% {opacity: 1;}
  63% {left: 0%; top: 53%;}
  65% {left: 0%; top: 8%;}
}

.rectangle {
  background-color: white;
  height: 40%;
  width: 3%;
  position: absolute;
  left: 0%;
  top: 8%;
  z-index: 2;
  /* background: red; */
  animation: rectangle_animation 14s cubic-bezier(.35,.73,.37,.77) infinite;
  /* animation-play-state: paused; */
}

@keyframes rectangle_animation {
  7% {left: 0%; width: 1%;}
  10% {left: 0%; width: 97%;}
  57% {left: 0%; width: 97%;}
  60% {left: 97%; width: 1%;}
  100% {left: 97%; width: 1%;}
}

.rectangle2 {
  background-color: white;
  height: 42%;
  width: 3%;
  position: absolute;
  right: 0%;
  top: 51%;
  z-index: 2;
  /* background: red; */
  animation: rectangle_animation2 14s infinite cubic-bezier(.35,.73,.37,.77);
  /* animation-play-state: paused; */
}

@keyframes rectangle_animation2 {
  23.5% {width: 1%; left: 97%;}
  26.5% {left: 1%; width: 97%;}
  73.5% {left: 1%; width: 97%;}
  76.5% {left: 1%; width: 1%;}
  100% {left: 1%; width: 1%;}
}

.d49__2 {border-radius: 50%; height: 9.5%; width: 4%; background: black; position: absolute; left: 1%; top: 2%;}
.d49__3 {border-radius: 50%; height: 9.5%; width: 4%; background: black; position: absolute; left: 1%; bottom: 2%;}
.d49__4 {border-radius: 50%; height: 9.5%; width: 4%; background: black; position: absolute; top: 2%; right: 1%;}
.d49__5 {border-radius: 50%; height: 9.5%; width: 4%; background: black; position: absolute; bottom: 2%; right: 1%;}

.d {height: 37%; width: 19%; margin-left: 3%; margin-top: 4.2%; animation: letter_opacity 28s linear infinite; }
.o {height: 37%; width: 13%; margin-left: 24.5%; margin-top: 4.2%; animation: letter_opacity 28s linear infinite; }
.i {height: 37%; width: 16.2%; margin-left: 43%; margin-top: 4.2%; animation: letter_opacity 28s linear infinite; }
.g {height: 37%; width: 13.2%; margin-left: 63.3%; margin-top: 4.2%; animation: letter_opacity 28s linear infinite; }
.r {height: 37%; width: 13.5%; margin-left: 82.5%; margin-top: 4.2%; animation: letter_opacity 28s linear infinite; }
.a {height: 37%; width: 13.5%; margin-left: 5.5%; margin-top: 23.5%;  animation: letter_opacity 28s linear infinite; }
.l {height: 37%; width: 16.5%; margin-left: 24.5%; margin-top: 23.5%;  animation: letter_opacity 28s linear infinite; }
.i2 {height: 37%; width: 16.2%; margin-left: 43%; margin-top: 23.5%;  animation: letter_opacity 28s linear infinite; }
.s {height: 37%; width: 13.7%; margin-left: 63%; margin-top: 23.5%;  animation: letter_opacity 28s linear infinite; }
.soft_sign {height: 37%; width: 13.7%; margin-left: 82.5%; margin-top: 23.5%;  animation: letter_opacity 28s linear infinite; }

@keyframes letter_opacity {
  21% {opacity: 1;}
  25% {opacity: 0;}
  72% {opacity: 0;}
  75% {opacity: 1;}
  100% {opacity: 1;}
}

.o2 {height: 37%; width: 13%; margin-left: 6%; margin-top: 4.2%; opacity: 0; animation: letter_opacity2 28s linear infinite;}
.p {height: 37%; width: 13%; margin-left: 24.5%; margin-top: 4.2%; opacity: 0; animation: letter_opacity2 28s linear infinite;}
.e {height: 37%; width: 13.5%; margin-left: 43%; margin-top: 4.2%; opacity: 0; animation: letter_opacity2 28s linear infinite;}
.n {height: 37%; width: 16%; margin-left: 60.3%; margin-top: 4.2%; opacity: 0; animation: letter_opacity2 28s linear infinite; transform: rotate(180deg);}
.t {height: 37%; width: 14%; margin-left: 24.5%; margin-top: 23.5%; opacity: 0; animation: letter_opacity2 28s linear infinite;}
.a2 {height: 37%; width: 13.5%; margin-left: 43%; margin-top: 23.5%; opacity: 0; animation: letter_opacity2 28s linear infinite;}
.l2 {height: 37%; width: 16.2%; margin-left: 63%; margin-top: 23.5%; opacity: 0; animation: letter_opacity2 28s linear infinite;}
.k {height: 37%; width: 13.7%; margin-left: 82.5%; margin-top: 23.5%; opacity: 0; animation: letter_opacity2 28s linear infinite;}

@keyframes letter_opacity2 {
  21% {opacity: 0;}
  25% {opacity: 1;}
  55% {opacity: 1;}
  75% {opacity: 1;}
  76% {opacity: 0;}
  100% {opacity: 0;}
}

.s9 {
  width: 100%;
  height: 13%;
  display: flex;
  margin-top: -0.5%;
  position: relative;
}
.s9 div {
  position: relative;
}
.d50_1 {
  width: 34%;
  height: 100%;
}
.d50_1 div {
  position: absolute;
}
.d50 {
  height: 40%;
  width: 12%;
  border-radius: 50%;
  background: black;
  margin-left: 10.5%;
  margin-top: 7.7%;
  animation: colorchange1 4s infinite linear;
  animation-play-state: running;
}
.d50:hover {animation-play-state: paused;}

@keyframes colorchange1 {
  29%{background: black;}
  30%{background: #00B6F4;}
  79%{background: #00B6F4;}
  80%{background: #F24941;}
  100%{background: #F24941;}
}
.d51 {
  height: 40%;
  width: 12%;
  border-radius: 50%;
  background: black;
  margin-left: 25.5%;
  margin-top: 7.7%;
  animation: colorchange2 4s  2s infinite linear;
  animation-play-state: running;
}
.d51:hover {animation-play-state: paused;}

@keyframes colorchange2 {
  29%{background: black;}
  30%{background: #FFD42E;}
  79%{background: #FFD42E;}
  80%{background: #00B6F4;}
  100%{background: #00B6F4;}
}
.d52 {
  height: 40%;
  width: 50%;
  border-radius: 50px;
  background: black;
  margin-left: 41%;
  margin-top: 7.7%;
  animation: colorchange3 2s infinite linear;
  animation-play-state: running;
}
.d52:hover {animation-play-state: paused;}

@keyframes colorchange3 {
  49%{background: black;}
  50%{background: #F655A0;}
  100%{background: #F655A0;}
}
.d53_1 {
  width: 29%;
  height: 100%;
}
.d53_1 div {
  position: absolute;
}
.d53 {
  height: 100%;
  width: 12%;
  background: black;
}
.d54 {
  height: 52%;
  width: 40%;
  border-radius: 50px;
  background: black;
  margin-left: 32%;
  margin-top: 7%;
  /* opacity: 0; */
}

.d55 {
  height: 36%;
  width: 13%;
  border-radius: 50%;
  background: #F655A0;
  margin-left: 55%;
  margin-top: 9.5%;
  /* animation: iphonebutton 2s alternate infinite cubic-bezier(.75,.3,.25,.86); */
}

@keyframes iphonebutton {
  78%{background: #F655A0;}
  80%{transform: translate(-145%); background: #F24941;}
}
.d56 {
  height: 100%;
  width: 12%;
  background: black;
  margin-left: 89%;
}
.d57_1 {
  width: 37%;
  height: 100%;
}
.d57_1 div {
  position: absolute;
}
.d57 {
  height: 39%;
  width: 10.8%;
  border-radius: 50%;
  background: #F655A0;
  margin-left: 16%;
  margin-top: 7%;
  animation: colorchange4 2s infinite linear;
}
.d57, .d58, .d59 {animation-play-state: running;}
.d57:hover, .d58:hover, .d59:hover {animation-play-state: paused;}

@keyframes colorchange4 {
  19%{background: #F655A0;}
  20%{background: black;}
  39%{background: black;}
  40%{background: #F24941;}
  59%{background: #F24941;}
  60%{background: #FFD42E;}
  100%{background: #FFD42E;}
}
.d58 {
  height: 39%;
  width: 10.8%;
  border-radius: 50%;
  background: #F655A0;
  margin-left: 30%;
  margin-top: 7%;
  animation: colorchange2 2s 4s infinite linear;
}
.d59 {
  height: 38%;
  width: 46%;
  border-radius: 50px;
  background: black;
  margin-left: 45%;
  margin-top: 7%;
  animation: colorchange6 5s infinite linear;
}
@keyframes colorchange6 {
  49%{background: black;}
  50%{background: #F24941;}
  100%{background: #F24941;}
}
.d60 {
  height: 12%;
  width: 7%;
  margin-left: 33.5%;
  margin-top: -16.5%;
  position: absolute;
  animation: bzz 0.2s infinite alternate ease-in-out;
  animation-play-state: running;
  z-index: 5;
}
.d60:hover {animation-play-state: paused;}

.d60 img {
  width: 100%;
  height: 100%;
}