@media screen and (min-width: 451px) and (max-width:768px) {


.sc{
width: 100%;
overflow-x: hidden;
 position: relative;
}


.body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow-x: hidden;
background-color: #FFF7E8;
}






.stroke{

    position: relative;
    width: 100%;
 height: 8vw;
    top: 0;
    left: 0;
    word-wrap: nowrap;
    z-index: 1;
    overflow-x: hidden;
}

.st{
  position: absolute;
     animation: text 6s linear infinite;
}

@keyframes text{
0%{ left: -100%; top: 0;}
100%{ left: 0%; top: 0;}

}






.bu1{
position: absolute;
margin-top: 40%;
margin-left: -3%;
}

.b1, .bc1 {
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
transform: scale(0.6);
}

.b1{
  opacity: 1;
  z-index: 1;
}

.bc1{
  opacity: 0;
  z-index: 1;
}

.bu1:hover .b1{
  opacity: 0;
}

.bu1:hover .bc1{
  opacity: 1;
}

 







.bu2{

position: absolute;
margin-left: 15%;
margin-top: 40%;

}

.b2, .bc2 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease; 
  transform: scale(0.6);
}

.b2{
  opacity: 1;
  z-index: 1;
}

.bc2{
  opacity: 0;
  z-index: 1;
}
.bu2:hover .b2{
  opacity: 0;
}
.bu2:hover .bc2{
  opacity: 1;
 
}









.bu3{

position: absolute;

margin-left: 35%;
margin-top: 40%;

}

.b3, .bc3 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease; 
  transform: scale(0.6);
}

.b3{
  opacity: 1;
  z-index: 1;
}

.bc3{
  opacity: 0;
  z-index: 1;
}
.bu3:hover .b3{
  opacity: 0;
}
.bu3:hover .bc3{
  opacity: 1;
}







.bu4{

position: absolute;

margin-left: 54%;
margin-top: 40%;

}

.b4, .bc4 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease; 
  transform: scale(0.6);
}

.b4{
  opacity: 1;
  z-index: 1;
}

.bc4{
  opacity: 0;
  z-index: 1;
}
.bu4:hover .b4{
  opacity: 0;
}
.bu4:hover .bc4{
  opacity: 1;
}





.bu5{

position: absolute;

margin-left: 74%;
margin-top: 40%;

}

.b5, .bc5 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease; 
  transform: scale(0.6);
}

.b5{
  opacity: 1;
  z-index: 1;
}

.bc5{
  opacity: 0;
  z-index: 1;
}
.bu5:hover .b5{
  opacity: 0;
}
.bu5:hover .bc5{
  opacity: 1;
}










.shtrih {
width: 274px;
height: 131px;
margin-left: 32%;
margin-top: -60%;
background: url("./img/r768.svg");
animation: flick 3s steps(1) infinite;
z-index: 1;

}

@keyframes flick{
 0%{ background-position: 0px top;}
 70%{ background-position: -274px top;}
 80%{ background-position: -548px top;}
 90%{ background-position: -822px top;}

}

.el1{
    margin-top: 11%;
    margin-left: 10%;
    animation: el1 6s linear infinite both;
    z-index: -1; 
}

@keyframes el1 {
0% {transform: scale(0.5) rotate(0);}
100% {transform: scale(0.5) rotate(360deg);}
}

.el2{
    margin-top: -22%;
    margin-left: 67%;
    animation: el2 4s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
}

@keyframes el2 {
  0% {transform: scale(0.5) rotateY(0);}
  100% {transform: scale(0.5) rotateY(360deg); }
}

.el3{
    margin-top: 25%;
    margin-left: 15%;
    animation: el3 5s linear infinite both;
    width: 18%;
    height: 12%;
}

@keyframes el3 {
  0% {transform: scale(0.7) rotateY(0);}
  100% {transform: scale(0.7) rotateY(360deg);}
}

.el4{
    margin-top: -15%;
    margin-left: 60%;
    animation: el4 8s linear infinite both;
    width: 17%;
    height: 11%;
}

@keyframes el4 {
  0% {transform: scale(0.7) rotate(0);}
  100% {transform: scale(0.7) rotate(360deg);}
}









.cont2{
  margin-top: 57%;
flex-direction: row;
justify-content: center;
align-items: center;
}




.k6{
width: 20%;
height: 25vw;
background-color: #B44B47;
display: flex;
  justify-content: center;
  align-items: center;
position: absolute;
margin-left: 0%;
}


.b6, .bc6 {
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
transform: scale(0.6);
  
}

.b6{
  opacity: 1;
  z-index: 1;
  animation: bounce-top 1.5s infinite both;
}

@keyframes bounce-top {
  0% {transform: scale(0.6) translateY(-45px); animation-timing-function: ease-in; opacity: 1;}
  24% {opacity: 1;}
  40% {transform: scale(0.6) translateY(-24px); animation-timing-function: ease-in;}
  65% {transform: scale(0.6) translateY(-12px); animation-timing-function: ease-in;}
  82% {transform: scale(0.6) translateY(-6px); animation-timing-function: ease-in;}
  93% {transform: scale(0.6) translateY(-4px); animation-timing-function: ease-in;}
  25%,
  55%,
  75%,
  87% {transform: scale(0.6) translateY(0px); animation-timing-function: ease-out;}
  100% {transform: scale(0.6) translateY(0px);animation-timing-function: ease-out; opacity: 1;}
}

.bc6{
  opacity: 0;
 
}
.k6:hover .b6{
  opacity: 0;
  animation-play-state: paused;
}
.k6:hover .bc6{
  opacity: 1;
}








.k7{

position: absolute; margin-left: 20%;
background-color: #F5DE91;
width: 20%;
height: 25vw;
display: flex;
  justify-content: center;
  align-items: center;
}

.b7, .bc7 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;

  
}

.b7img, .bc7img{
    transform: scale(0.5);
}

.b7{
  opacity: 1;
  z-index: 1;
  animation: rotate-center 1.5s ease-in-out infinite both;
}

@keyframes rotate-center {
  0% { transform: rotate(0); scale: 0.5;}
  100% {transform: rotate(360deg); scale: 0.5; }
}

.bc7{
  opacity: 0;
  z-index: 1;
}
.k7:hover .b7{
  opacity: 0;
  animation-play-state: paused;
}
.k7:hover .bc7{
  opacity: 1;
}






.k8{

position: absolute; margin-left: 40%;
background-color: #82A985;
width: 20%;
height: 25vw;
display: flex;
  justify-content: center;
  align-items: center;
}
.b8, .bc8 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;

  
}

.b8{
  opacity: 1;
  z-index: 1;
   animation: jello 1.5s infinite both;
}

@keyframes jello {
  0% {transform: scale(0.5) scale3d(1, 1, 1);}
  30% {transform: scale(0.5) scale3d(1.25, 0.75, 1);}
  40% {transform: scale(0.5) scale3d(0.75, 1.25, 1);}
  50% {transform:scale(0.5) scale3d(1.15, 0.85, 1);}
  65% {transform: scale(0.5) scale3d(0.95, 1.05, 1);}
  75% {transform: scale(0.5) scale3d(1.05, 0.95, 1);}
  100% {transform: scale(0.5) scale3d(1, 1, 1);}
}

.bc8{
  opacity: 0;
  z-index: 1;
}
.k8:hover .b8{
  opacity: 0;
  animation-play-state: paused;
}
.k8:hover .bc8{
  opacity: 1;
}








.k9{

position: absolute; margin-left: 60%;
background-color: #B44B47;
width: 20%;
height: 25vw;
display: flex;
  justify-content: center;
  align-items: center;
}
.b9, .bc9 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;

  
}

.b9{
  opacity: 1;
  z-index: 1;
  animation: scale-down 1s linear infinite both;
}

@keyframes scale-down {
  0% {transform: scale(0.7) scale(1);}
  100% {transform: scale(0.7) scale(0.5); }
}


.bc9{
  opacity: 0;
  z-index: 1;
}
.k9:hover .b9{
  opacity: 0;
   animation-play-state: paused;
}
.k9:hover .bc9{
  opacity: 1;
}







.k10{

position: absolute; margin-left: 80%;
background-color: #2C3872;
width: 20%;
height: 25vw;
display: flex;
  justify-content: center;
  align-items: center;
}
.b10, .bc10 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;

  
}

.b10{
  opacity: 1;
  z-index: 1;
   animation: wobble 1.5s infinite both;
}

@keyframes wobble {
  0%,
  100% {transform: scale(0.5) translateX(0%); transform-origin: 50% 50%;}
  15% {transform: scale(0.5) translateX(-30px) rotate(-6deg);}
  30% {transform: scale(0.5) translateX(15px) rotate(6deg);}
  45% {transform: scale(0.5) translateX(-15px) rotate(-3.6deg);}
  60% {transform: scale(0.5) translateX(9px) rotate(2.4deg);}
  75% {transform: scale(0.5) translateX(-6px) rotate(-1.2deg);}
}

.bc10{
  opacity: 0;
  z-index: 1;
}
.k10:hover .b10{
  opacity: 0;
  animation-play-state: paused;
}
.k10:hover .bc10{
  opacity: 1;
}






.play{
 display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}


.div1{
 
background-color: #2C3872;
width: 40%;
height: 50vw;
margin-top: 23.9%;
display: flex;
  justify-content: center;
  align-items: center;
}

.div2{
  background-color: #F5DE91;
  width: 60%;
height: 50vw;
margin-top: 23.9%;
display: flex;
justify-content: initial;
 display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    height: 50vw;
    width: 60%;
}

.e1 {
    grid-area: 1 / 1 / 2 / 2;
}

.e12 {
    grid-area: 3 / 3 / 4 / 4;
}







.e1, .ec1{
  margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
  transform: scale(0.7);
}
.e1{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }

    @keyframes rotate-center {
  0% {transform: scale(0.7) rotate(0);}
  100% {transform: scale(0.7) rotate(360deg);}
  }

  .ec1{
  opacity: 0;
  z-index: 1;
  }

.eu1:hover .e1{
  opacity: 0;
  animation-play-state: paused;
}
.eu1:hover .ec1{
  opacity: 1;}







.e2, .ec2{
  margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}
.e2{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec2{
  opacity: 0;
  z-index: 1;
 
}

.eu2:hover .e2{
  opacity: 0;
  animation-play-state: paused;
}
.eu2:hover .ec2{
  opacity: 1;}











.e3, .ec3{
 margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}
.e3{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec3{
  opacity: 0;
  z-index: 1;
 
}
.eu3:hover .e3{
  opacity: 0;
  animation-play-state: paused;
}
.eu3:hover .ec3{
  opacity: 1;}












.e4, .ec4{
margin-top: 5%;
margin-left: 5%;
position: absolute;
object-fit: contain;
transition: opacity 0.1s ease;
}
.e4{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec4{
  opacity: 0;
  z-index: 1;
 
}
.eu4:hover .e4{
  opacity: 0;
  animation-play-state: paused;
}
.eu4:hover .ec4{
  opacity: 1;}










.e5, .ec5{
  margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}
.e5{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec5{
  opacity: 0;
  z-index: 1;

}
.eu5:hover .e5{
  opacity: 0;
  animation-play-state: paused;
}
.eu5:hover .ec5{
  opacity: 1;}









.e6, .ec6{
 margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}
.e6{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec6{
  opacity: 0;
  z-index: 1;
  
}
.eu6:hover .e1{
  opacity: 0;
  animation-play-state: paused;
}
.eu6:hover .ec6{
  opacity: 1;}







.e7, .ec7{
 margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}
.e7{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec7{
  opacity: 0;
  z-index: 1;
  
}
.eu7:hover .e7{
  opacity: 0;
  animation-play-state: paused;
}
.eu7:hover .ec7{
  opacity: 1;}






.e8, .ec8{
 margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}
.e8{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec8{
  opacity: 0;
  z-index: 1;
  
}
.eu8:hover .e8{
  opacity: 0;
  animation-play-state: paused;
}
.eu8:hover .ec8{
  opacity: 1;}




.e9, .ec9{
 margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}
.e9{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec9{
  opacity: 0;
  z-index: 1;
 
}
.eu9:hover .e9{
  opacity: 0;
  animation-play-state: paused;
}
.eu9:hover .ec9{
  opacity: 1;}






.e10, .ec10{
  margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}
.e10{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec10{
  opacity: 0;
  z-index: 1;
 
}
.eu10:hover .e10{
  opacity: 0;
  animation-play-state: paused;
}
.eu10:hover .ec10{
  opacity: 1;}




.e11, .ec11{
 margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}
.e11{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec11{
  opacity: 0;
  z-index: 1;
  
}
.eu11:hover .e11{
  opacity: 0;
  animation-play-state: paused;
}
.eu11:hover .ec11{
  opacity: 1;}




.e12, .ec12{
 margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}
.e12{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec12{
  opacity: 0;
  z-index: 1;
 
}
.eu12:hover .e12{
  opacity: 0;
  animation-play-state: paused;
}
.eu12:hover .ec12{
  opacity: 1;}




.eu1, .eu2, .eu3, .eu4, .eu5, .eu6, .eu7, .eu8, .eu9, .eu10, .eu11, .eu12{
    transform: scale(0.7);
}




















.korzina{
  margin-left: -10vw;
  animation: wobble-hor-bottom 3s linear infinite both;
  width: 110%;
}

@keyframes wobble-hor-bottom {
  0%,
  100% {transform: scale(0.5) translateX(0%); transform-origin: 50% 50%;}
  15% {transform: scale(0.5)  translateX(-30px) rotate(-6deg);}
  30% {transform: scale(0.5) translateX(15px) rotate(6deg);}
  45% {transform: scale(0.5) translateX(-15px) rotate(-3.6deg);}
  60% {transform: scale(0.5) translateX(9px) rotate(2.4deg);}
  75% {transform: scale(0.5) translateX(-6px) rotate(-1.2deg);}
}

.vkorzine{
  width: 227px;
height: 100px;
margin-left:-40vw;
display: block;
position: relative;
background: url("./img/vkorzine.svg");
animation: walk1 1.5s steps(1) infinite;
}

@keyframes walk1{
    0%{ background-position: 0px top;}
    25%{ background-position: -227px top;}
    75% { background-position: -464px top;}
    100% { background-position: -701px top;}
}







.cont3{
width: 100%;
height: 45vw;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}

.bukvaU{
height: 100%;
width: 50%;
background-color: #FFF7E8;
background: url("./img/u768.svg");
animation: walk2 1.5s steps(1) infinite;
}
@keyframes walk2{
    0%{ background-position: 0px top;}
    25%{ background-position: -370px top;}
    75% { background-position: -740px top;}
    100% { background-position: -1110px top;}
}

.bukvaA{
height: 28vw;
width: 35%;
background-color: #B44B47;
 position: relative; 
  overflow: hidden;
  margin-left: 60%;
  margin-top: -36.6%;
  transform: scale(1.6);
}

.ba{
margin-top: 0%;
margin-left: 40%;
  
  top: 0; 
  left: 50%;
  transform: translateX(-50%); 
  animation: fall 1s ease-in forwards infinite; 
}

@keyframes fall {
  0% {transform:  scale(0.7) translateX(-50%) translateY(0); }
  100% {transform: scale(0.7) translateX(-50%) translateY(320px); }
}

.ba:hover{
   animation: rotate-scale-up 0.65s linear infinite both;
}

@keyframes rotate-scale-up {
  0% {transform: scale(1) rotateZ(0);}
  50% {transform: scale(2) rotateZ(180deg);}
  100% {transform: scale(1) rotateZ(360deg);}
}

.fa{
  margin-top: -20vw;
  margin-left: 22%;
  width: 90%;
   animation: shake-br 2s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
}

@keyframes shake-br {
  0%,
  100% {transform:  rotate(0deg); transform-origin: 100% 100%;}
  10% {transform:  rotate(2deg);}
  20%,
  40%,
  60% {transform:  rotate(-4deg);}
  30%,
  50%,
  70% {transform:  rotate(4deg);}
  80% {transform:  rotate(-2deg);}
  90% {transform: rotate(2deg);}
}

.bukvaI{
height: 52vw;
width: 50%;
background-color: #221E1B;
margin-top: -0.5%;
margin-left: 50%;
z-index: 1;
}

.bi{
margin-top: -5%;
margin-left: 15%;
  animation: wobble-hor-bottom 3s linear infinite both;
}



@keyframes wobble-hor-bottom {
  0%,
  100% {transform: scale(0.7) translateX(0%); transform-origin: 50% 50%;}
  15% {transform: scale(0.7) translateX(-30px) rotate(-6deg);}
  30% {transform: scale(0.7) translateX(15px) rotate(6deg);}
  45% {transform: scale(0.7) translateX(-15px) rotate(-3.6deg);}
  60% {transform: scale(0.7) translateX(9px) rotate(2.4deg);}
  75% {transform: scale(0.7) translateX(-6px) rotate(-1.2deg);}
}

.fi{
margin-left: 20%;
margin-top: -15%;
animation: shake-br 2s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
}
@keyframes shake-br {
  0%,
  100% {transform: rotate(0deg); transform-origin: 100% 100%;}
  10% {transform: rotate(2deg);}
  20%,
  40%,
  60% {transform: rotate(-4deg);}
  30%,
  50%,
  70% {transform: rotate(4deg);}
  80% {transform: rotate(-2deg);}
  90% {transform: rotate(2deg);}
}

.shtrihi{
margin-top: 0%;
width: 100%;
height: 20vw;
background-color: #2C3872;
overflow: hidden;
position: relative;
display: flex;
align-items: center;

}

.sh2{
position: absolute;
animation: sh22 4s linear infinite alternate;

}

@keyframes sh22 {
  0% {transform: scale(0.6) translateX(-100%);}
  100% {transform: scale(0.6) translateX(-50%);}}



.cont4{
height: 36vw;
display: flex;
flex-direction: row;
}

.move{
width: 100%;
height: 36vw;
background-color: #82A985;
z-index: 1;
margin-top: 20%;
}

.bukvaB{
width: 50%;
height: 52vw;
background-color: #B44B47;
margin-left: -100%;
margin-top: -0.5%;
}

.bb{
  margin-top: 14%;
margin-left: 20%;
animation: wobble-ver-left 1.5s infinite both;
transform: scale(0.5);
transition: opacity 0.8s ease;
}

.bb:hover{
  opacity: 0;
}


@keyframes wobble-ver-left {
  0%,
  100% {transform: scale(0.5) translateY(0) rotate(0); transform-origin: 50% 50%;}
  15% {transform: scale(0.5) translateY(-30px) rotate(-6deg);}
  30% {transform: scale(0.5) translateY(15px) rotate(6deg);}
  45% {transform: scale(0.5) translateY(-15px) rotate(-3.6deg);}
  60% {transform: scale(0.5) translateY(9px) rotate(2.4deg);}
  75% {transform: scale(0.5) translateY(-6px) rotate(-1.2deg);}
}

.fb{
margin-left: -3%;
animation: wobble-ver-left 1.5s infinite both;
margin-top: 0%;
}

@keyframes wobble-ver-left {
  0%,
  100% {transform: translateY(0) rotate(0); transform-origin: 50% 50%;}
  15% {transform: translateY(-30px) rotate(-6deg);}
  30% {transform: translateY(15px) rotate(6deg);}
  45% {transform: translateY(-15px) rotate(-3.6deg);}
  60% {transform: translateY(9px) rotate(2.4deg);}
  75% {transform: translateY(-6px) rotate(-1.2deg);}
}








.move{

  display: flex;
  flex-direction: row;
  margin-top: 70vw;
  height: 38vw;
}

.item1, .item2, .item3, .item4, .item5, .item6 {
  background-color: #FFF7E8;
 
  width: 15%;
  height: 8%;

  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;

  transform: scale(0.5);
}



.item1{

  margin-top: 5%;
  margin-left: 5%;
  animation: move1 8s linear infinite alternate;
}
@keyframes move1 {
  0%   { left: 5%;  top: 10%; }
  25%  { left: 15%; top: 5%;  }
  50%  { left: 30%; top: 22%; }
  75%  { left: 12%; top: 30%; }
  100% { left: 5%;  top: 10%; }
}
.figc1:hover{
  opacity: 0;
}


.item2{

  margin-top: 5%;
  margin-left: 0%;
  animation: move2 11s linear infinite alternate;
}

@keyframes move2 {
  0%   { left: 40%; top: 5%;  }
  20%  { left: 60%; top: 8%;  }
  40%  { left: 55%; top: 30%; }
  70%  { left: 30%; top: 28%; }
  100% { left: 40%; top: 5%;  }
}

.figc2:hover{
  opacity: 0;
}

.item3{

  margin-top: 15%;
  margin-left: -50%;
  animation: move3 9s linear infinite alternate;
}

@keyframes move3 {
  0%   { left: 75%; top: 15%; }
  30%  { left: 70%; top: 35%; }
  60%  { left: 82%; top: 50%; }
  100% { left: 75%; top: 15%; }
}

.figc3:hover{
  opacity: 0;
}

.item4{

  margin-top: 5%;
  margin-left: 10%;
 animation: move4 10s linear infinite alternate;
}
@keyframes move4 {
  0%   { left: 40%; top: 40%; }
  25%  { left: 48%; top: 55%; }
  50%  { left: 35%; top: 65%; }
  75%  { left: 25%; top: 45%; }
  100% { left: 40%; top: 40%; }
}

.figc4:hover{
  opacity: 0;
}

.item5{

  margin-top: 0%;
  margin-left: -10%;
  animation: move5 7s linear infinite alternate;
  
}

@keyframes move5 {
  0%   { left: 8%;  top: 60%; }
  30%  { left: 20%; top: 72%; }
  60%  { left: 10%; top: 80%; }
  100% { left: 8%;  top: 60%; }
}

.figc5:hover{
  opacity: 0;
}

.item6{
 margin-top: 0%;
  margin-left: -60%;
 animation: move6 12s linear infinite alternate;
}

@keyframes move6 {
  0%   { left: 68%; top: 60%; }
  25%  { left: 55%; top: 70%; }
  50%  { left: 72%; top: 82%; }
  75%  { left: 80%; top: 62%; }
  100% { left: 68%; top: 60%; }
}

.figc6:hover{
  opacity: 0;
}

.fig1, .figc1{
position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.fig2, .figc2{
   position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.fig3, .figc3{
   position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.fig4, .figc4{
   position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.fig5, .figc5{
   position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.fig6, .figc6{
   position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}














.cont5{
height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
}




.alf{
background-color: #FFF7E8;
  width: 70%;
  height: 44vw;

   display: grid;
   
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(4, 1fr);
    width: 70%;
  height: 44vw;
  padding: 2%;
  margin-top: 70vw;
}
.y1{
  grid-area: 1 / 2 / 3 / 4 / 5;
}

.y29{
  grid-area: 25 / 26 / 27 / 28 / 29;
}


.y6, .y7, .y8, .y14, .y15, .y16, .y22, .y23, .y24, .y30, .y31, .y32, .yc6, .yc7, .yc8, .yc14, .yc15, .yc16, .yc22, .yc23, .yc24, .yc30, .yc31, .yc32{
    display: none;
}

.y1, .y2, .y3, .y4, .y5, .y6, .y7, .y8, .y9, .y10, .y11, .y12, .y13, .y14, .y15, .y16, .y17, .y18, .y19, .y20, .y21, .y22, .y23, .y24, .y25, .y26, .y27, .y28, .y29, .y30, .y31, .y32{
  z-index: 1;
  opacity: 1;
transform: scale(0.7);
  }

  .yc1, .yc2, .yc3, .yc4, .yc5, .yc6, .yc7, .yc8, .yc9, .yc10, .yc11, .yc12, .yc13, .yc14, .yc15, .yc16, .yc17, .yc18, .yc19, .yc20, .yc21, .yc22, .yc23, .yc24, .yc25, .yc26, .yc27, .yc28, .yc29, .yc30, .yc31, .yc32{

  opacity: 0;
  z-index: 1;
 transform: scale(0.7);
}
.yct1:hover .y1, .yct2:hover .y2, .yct3:hover .y3, .yct4:hover .y4, .yct5:hover .y5, .yct6:hover .y6, .yct7:hover .y7, .yct8:hover .y8, .yct9:hover .y9, .yct10:hover .y10, .yct11:hover .y11, .yct12:hover .y12, .yct13:hover .y13, .yct14:hover .y14, .yct15:hover .y15, .yct16:hover .y16, .yct17:hover .y17, .yct18:hover .y18, .yct19:hover .y19,  .yct20:hover .y20,  .yct21:hover .y21, .yct22:hover .y22,  .yct23:hover .y23, .yct24:hover .y24, .yct25:hover .y25, .yct26:hover .y26, .yct27:hover .y27, .yct28:hover .y28, .yct29:hover .y29, .yct30:hover .y30, .yct31:hover .y31, .yct32:hover .y32 {
  opacity: 0; 
}
.yct1:hover .yc1, .yct2:hover .yc2, .yct3:hover .yc3, .yct4:hover .yc4, .yct5:hover .yc5, .yct6:hover .yc6, .yct7:hover .yc7, .yct8:hover .yc8, .yct9:hover .yc9, .yct10:hover .yc10, .yct11:hover .yc11, .yct12:hover .yc12, .yct13:hover .yc13, .yct14:hover .yc14, .yct15:hover .yc15, .yct16:hover .yc16, .yct17:hover .yc17, .yct18:hover .yc18, .yct19:hover .yc19,  .yct20:hover .yc20,  .yct21:hover .yc21, .yct22:hover .yc22,  .yct23:hover .yc23, .yct24:hover .yc24, .yct25:hover .yc25, .yct26:hover .yc26, .yct27:hover .yc27, .yct28:hover .yc28, .yct29:hover .yc29, .yct30:hover .yc30, .yct31:hover .yc31, .yct32:hover .yc32{
  opacity: 1;}





.y1, .yc1{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y2, .yc2{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y3, .yc3{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y4, .yc4{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y5, .yc5{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y6, .yc6{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y7, .yc7{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y8, .yc8{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y9, .yc9{
  position: absolute;
  object-fit: contain;
  margin-left: -41%;
  transition: opacity 0.1s ease;
}

.y10, .yc10{
  position: absolute;
  object-fit: contain;
  margin-left: -42%;
  transition: opacity 0.1s ease;
}

.y11, .yc11{
  position: absolute;
  object-fit: contain;
  margin-left: 25%;
  margin-top: -12%;
  transition: opacity 0.1s ease;
}

.y12, .yc12{
  position: absolute;
  object-fit: contain;
   margin-left: 27%;
  margin-top: -12%;
  transition: opacity 0.1s ease;
}

.y13, .yc13{
  position: absolute;
  object-fit: contain;
   margin-left: 27%;
  margin-top: -11%;
  transition: opacity 0.1s ease;
}

.y14, .yc14{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y15, .yc15{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y16, .yc16{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y17, .yc17{
  position: absolute;
  object-fit: contain;
  margin-left: -15%;
  margin-top: -12%;
  transition: opacity 0.1s ease;
}

.y18, .yc18{
  position: absolute;
  object-fit: contain;
   margin-left: -15%;
  margin-top: -12%;
  transition: opacity 0.1s ease;
}

.y19, .yc19{
  position: absolute;
  object-fit: contain;
   margin-left: -15%;
  margin-top: -12%;
  transition: opacity 0.1s ease;
}

.y20, .yc20{
  position: absolute;
  object-fit: contain;
   margin-left: -15%;
  margin-top: -12%;
  transition: opacity 0.1s ease;
}

.y21, .yc21{
  position: absolute;
  object-fit: contain;
   margin-left: 54%;
  margin-top: -24%;
  transition: opacity 0.1s ease;
}

.y22, .yc22{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y23, .yc23{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y24, .yc24{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y25, .yc25{
  position: absolute;
  object-fit: contain;
  margin-top: -12%;
  transition: opacity 0.1s ease;
}

.y26, .yc26{
  position: absolute;
  object-fit: contain;
   margin-top: -12%;
  transition: opacity 0.1s ease;
}

.y27, .yc27{
  position: absolute;
  object-fit: contain;
   margin-top: -12%;
  transition: opacity 0.1s ease;
}

.y28, .yc28{
  position: absolute;
  object-fit: contain;
   margin-top: -12%;
  transition: opacity 0.1s ease;
}

.y29, .yc29{
  position: absolute;
  object-fit: contain;
   margin-top: -12%;
  transition: opacity 0.1s ease;
}

.y30, .yc30{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y31, .yc31{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y32, .yc32{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}
 .y1, .y2, .y3, .y4, .y5, .y6, .y7, .y8, .y9, .y10, .y11, .y12, .y13, .y14, .y15, .y16, .y17, .y18, .y19, .y20, .y21, .y22, .y23, .y24, .y25, .y26, .y27, .y28, .y29, .y30, .y31, .y32{
  z-index: 1;
 }






.fall{
background-color: #F5DE91;
  width: 30%;
  height: 48vw;
  position: relative;
  overflow: hidden;
  margin-top: 70vw;
}



.h1 {
    left: 5%;
    top: -20%;
    position: absolute;
    animation: fall1 4000ms linear infinite;
}

@keyframes fall1 {
    0%   { top: -20%; transform: rotate(0deg); }
    25%  { top: 10%;  transform: rotate(90deg); }
    50%  { top: 40%;  transform: rotate(180deg); }
    75%  { top: 70%;  transform: rotate(270deg); }
    100% { top: 110%; transform: rotate(360deg); }
}

.h2 {
    left: 15%;
    top: -30%;
     position: absolute;
    animation: fall2 4500ms linear infinite;
}

@keyframes fall2 {
    0%   { top: -30%; transform: rotate(0deg); }
    20%  { top: 0%;   transform: rotate(-80deg); }
    40%  { top: 30%;  transform: rotate(-160deg); }
    70%  { top: 70%;  transform: rotate(-260deg); }
    100% { top: 120%; transform: rotate(-360deg); }
}

.h3 {
    left: 25%;
    top: -10%;
     position: absolute;
    animation: fall3 3800ms linear infinite;
}

@keyframes fall3 {
    0%   { top: -10%; transform: rotate(0deg); }
    30%  { top: 20%;  transform: rotate(120deg); }
    60%  { top: 60%;  transform: rotate(240deg); }
    100% { top: 115%; transform: rotate(480deg); }
}

.h4 {
    left: 35%;
    top: -25%;
     position: absolute;
    animation: fall4 5000ms linear infinite;
}

@keyframes fall4 {
    0%   { top: -25%; transform: rotate(0deg); }
    15%  { top: 0%;   transform: rotate(-60deg); }
    40%  { top: 35%;  transform: rotate(-160deg); }
    75%  { top: 80%;  transform: rotate(-300deg); }
    100% { top: 130%; transform: rotate(-420deg); }
}


.h5 {
    left: 45%;
    top: -15%;
     position: absolute;
    animation: fall5 4200ms linear infinite;
}

@keyframes fall5 {
    0%   { top: -15%; transform: rotate(0deg); }
    25%  { top: 15%;  transform: rotate(100deg); }
    50%  { top: 50%;  transform: rotate(220deg); }
    75%  { top: 85%;  transform: rotate(340deg); }
    100% { top: 125%; transform: rotate(460deg); }
}

/* h6 */
.h6 {
    left: 55%;
    top: -35%;
     position: absolute;
    animation: fall6 4700ms linear infinite;
}

@keyframes fall6 {
    0%   { top: -35%; transform: rotate(0deg); }
    30%  { top: 5%;   transform: rotate(-110deg); }
    55%  { top: 45%;  transform: rotate(-230deg); }
    85%  { top: 95%;  transform: rotate(-350deg); }
    100% { top: 135%; transform: rotate(-430deg); }
}

/* h7 */
.h7 {
    left: 65%;
    top: -5%;
     position: absolute;
    animation: fall7 3600ms linear infinite;
}

@keyframes fall7 {
    0%   { top: -5%;  transform: rotate(0deg); }
    35%  { top: 25%;  transform: rotate(140deg); }
    65%  { top: 65%;  transform: rotate(280deg); }
    100% { top: 120%; transform: rotate(560deg); }
}

/* h8 */
.h8 {
    left: 75%;
    top: -20%;
     position: absolute;
    animation: fall8 5200ms linear infinite;
}

@keyframes fall8 {
    0%   { top: -20%; transform: rotate(0deg); }
    20%  { top: 5%;   transform: rotate(-90deg); }
    45%  { top: 40%;  transform: rotate(-200deg); }
    80%  { top: 90%;  transform: rotate(-340deg); }
    100% { top: 140%; transform: rotate(-480deg); }
}

/* h9 */
.h9 {
    left: 10%;
    top: -40%;
     position: absolute;
    animation: fall9 5500ms linear infinite;
}

@keyframes fall9 {
    0%   { top: -40%; transform: rotate(0deg); }
    25%  { top: -5%;  transform: rotate(120deg); }
    50%  { top: 35%;  transform: rotate(240deg); }
    75%  { top: 80%;  transform: rotate(360deg); }
    100% { top: 145%; transform: rotate(540deg); }
}

/* h10 */
.h10 {
    left: 30%;
    top: -30%;
     position: absolute;
    animation: fall10 4300ms linear infinite;
}

@keyframes fall10 {
    0%   { top: -30%; transform: rotate(0deg); }
    20%  { top: 0%;   transform: rotate(-100deg); }
    50%  { top: 45%;  transform: rotate(-220deg); }
    80%  { top: 95%;  transform: rotate(-340deg); }
    100% { top: 150%; transform: rotate(-460deg); }
}

/* h11 */
.h11 {
    left: 50%;
    top: -10%;
     position: absolute;
    animation: fall11 3900ms linear infinite;
}

@keyframes fall11 {
    0%   { top: -10%; transform: rotate(0deg); }
    30%  { top: 20%;  transform: rotate(130deg); }
    60%  { top: 60%;  transform: rotate(260deg); }
    100% { top: 135%; transform: rotate(520deg); }
}

/* h12 */
.h12 {
    left: 70%;
    top: -25%;
     position: absolute;
    animation: fall12 4800ms linear infinite;
}

@keyframes fall12 {
    0%   { top: -25%; transform: rotate(0deg); }
    25%  { top: 5%;   transform: rotate(-120deg); }
    55%  { top: 50%;  transform: rotate(-260deg); }
    85%  { top: 100%; transform: rotate(-380deg); }
    100% { top: 155%; transform: rotate(-520deg); }
}

/* h13 */
.h13 {
    left: 85%;
    top: -15%;
     position: absolute;
    animation: fall13 5100ms linear infinite;
}

@keyframes fall13 {
    0%   { top: -15%; transform: rotate(0deg); }
    20%  { top: 10%;  transform: rotate(150deg); }
    45%  { top: 45%;  transform: rotate(300deg); }
    75%  { top: 95%;  transform: rotate(480deg); }
    100% { top: 160%; transform: rotate(660deg); }
}
.h1, .h2, .h3, .h4, .h5, .h6, .h7, .h8, .h9, .h10, .h11, .h12, .h13{
    transform: scale(0.6);
}







.podval{

   position: relative;
    width: 100%;
    height: 16vw;
    top: 0;
    left: 0;
    word-wrap: nowrap;
    z-index: 1;
    overflow-x: hidden;
}

.pd{
  position: absolute;
    animation: text3 20s linear infinite;
    height: 16vw;
}

@keyframes text3{
0%{ left: 0%; top: 0;}
100%{ left: -400%; top: 0;}
}


}



































@media screen and (min-width: 1px) and (max-width: 450px)  {

.sc{
width: 100%;
overflow-x: hidden;
 position: relative;
}


.body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow-x: hidden;
background-color: #FFF7E8;
}






.stroke{

    position: relative;
    width: 100%;
 height: 18vw;
    top: 0;
    left: 0;
    word-wrap: nowrap;
    z-index: 1;
    overflow-x: hidden;
}

.st{
  position: absolute;
     animation: text 6s linear infinite;
}

@keyframes text{
0%{ left: -100%; top: 0;}
100%{ left: 0%; top: 0;}

}






.bu1{
position: absolute;
margin-top: 40%;
margin-left: -15%;
}

.b1, .bc1 {
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
transform: scale(0.3);
}

.b1{
  opacity: 1;
  z-index: 1;
}

.bc1{
  opacity: 0;
  z-index: 1;
}

.bu1:hover .b1{
  opacity: 0;
}

.bu1:hover .bc1{
  opacity: 1;
}

 







.bu2{

position: absolute;
margin-left: 3%;
margin-top: 40%;

}

.b2, .bc2 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease; 
  transform: scale(0.3);
}

.b2{
  opacity: 1;
  z-index: 1;
}

.bc2{
  opacity: 0;
  z-index: 1;
}
.bu2:hover .b2{
  opacity: 0;
}
.bu2:hover .bc2{
  opacity: 1;
 
}









.bu3{

position: absolute;

margin-left: 22%;
margin-top: 40%;

}

.b3, .bc3 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease; 
  transform: scale(0.3);
}

.b3{
  opacity: 1;
  z-index: 1;
}

.bc3{
  opacity: 0;
  z-index: 1;
  width: 30%;
}
.bu3:hover .b3{
  opacity: 0;
}
.bu3:hover .bc3{
  opacity: 1;
}







.bu4{

position: absolute;

margin-left: 41%;
margin-top: 40%;

}

.b4, .bc4 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease; 
  transform: scale(0.3);
}

.b4{
  opacity: 1;
  z-index: 1;
}

.bc4{
  opacity: 0;
  z-index: 1;
}
.bu4:hover .b4{
  opacity: 0;
}
.bu4:hover .bc4{
  opacity: 1;
}





.bu5{

position: absolute;

margin-left: 61%;
margin-top: 40%;

}

.b5, .bc5 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease; 
  transform: scale(0.3);
}

.b5{
  opacity: 1;
  z-index: 1;
}

.bc5{
  opacity: 0;
  z-index: 1;
}
.bu5:hover .b5{
  opacity: 0;
}
.bu5:hover .bc5{
  opacity: 1;
}










.shtrih {
width: 274px;
height: 131px;
margin-left: 18%;
margin-top: -120%;
background: url("./img/r768.svg");
animation: flick 3s steps(1) infinite;
z-index: 1;

}

@keyframes flick{
 0%{ background-position: 0px top;}
 70%{ background-position: -274px top;}
 80%{ background-position: -548px top;}
 90%{ background-position: -822px top;}

}

.el1{
    margin-top: 1%;
    margin-left: 10%;
    animation: el1 6s linear infinite both;
    z-index: -1; 
}

@keyframes el1 {
0% {transform: scale(0.3) rotate(0);}
100% {transform: scale(0.3) rotate(360deg);}
}

.el2{
    margin-top: -50%;
    margin-left: 67%;
    animation: el2 4s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
}

@keyframes el2 {
  0% {transform: scale(0.3) rotateY(0);}
  100% {transform: scale(0.3) rotateY(360deg); }
}

.el3{
    margin-top: 29%;
    margin-left: 15%;
    animation: el3 5s linear infinite both;
    width: 18%;
    height: 12%;
}

@keyframes el3 {
  0% {transform: scale(0.5) rotateY(0);}
  100% {transform: scale(0.5) rotateY(360deg);}
}

.el4{
    margin-top: -15%;
    margin-left: 60%;
    animation: el4 8s linear infinite both;
    width: 17%;
    height: 11%;
}

@keyframes el4 {
  0% {transform: scale(0.5) rotate(0);}
  100% {transform: scale(0.5) rotate(360deg);}
}









.cont2{
  margin-top: 95%;
flex-direction: row;
justify-content: center;
align-items: center;
}




.k6{
width: 50%;
height: 60vw;
background-color: #B44B47;
display: flex;
  justify-content: center;
  align-items: center;
position: absolute;
margin-left: 0%;
}


.b6, .bc6 {
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
transform: scale(0.9);
  
}

.b6{
  opacity: 1;
  z-index: 1;
  animation: bounce-top 1.5s infinite both;
}

@keyframes bounce-top {
  0% {transform: scale(0.9) translateY(-45px); animation-timing-function: ease-in; }
  24% {}
  40% {transform: scale(0.9) translateY(-24px); animation-timing-function: ease-in;}
  65% {transform: scale(0.9) translateY(-12px); animation-timing-function: ease-in;}
  82% {transform: scale(0.9) translateY(-6px); animation-timing-function: ease-in;}
  93% {transform: scale(0.9) translateY(-4px); animation-timing-function: ease-in;}
  25%,
  55%,
  75%,
  87% {transform: scale(0.9) translateY(0px); animation-timing-function: ease-out;}
  100% {transform: scale(0.9) translateY(0px);animation-timing-function: ease-out; }
}

.bc6{
  opacity: 0;
 
}
.k6:hover .b6{
  opacity: 0;
  animation-play-state: paused;
}
.k6:hover .bc6{
  opacity: 1;
}








.k7{

position: absolute; margin-left: 20%;
background-color: #F5DE91;
width: 50%;
height: 60vw;
display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 50%;
}

.b7, .bc7 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;

  
}

.b7img, .bc7img{
    transform: scale(0.8);
}

.b7{
  opacity: 1;
  z-index: 1;
  animation: rotate-center 1.5s ease-in-out infinite both;
}

@keyframes rotate-center {
  0% { transform: rotate(0); scale: 0.8;}
  100% {transform: rotate(360deg); scale: 0.8; }
}

.bc7{
  opacity: 0;
  z-index: 1;
}
.k7:hover .b7{
  opacity: 0;
  animation-play-state: paused;
}
.k7:hover .bc7{
  opacity: 1;
}






.k8{

position: absolute; margin-left: 40%;
background-color: #82A985;
width: 50%;
height: 60vw;
display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 60vw;
  margin-left: 0%;
}
.b8, .bc8 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;

  
}

.b8{
  opacity: 1;
  z-index: 1;
   animation: jello 1.5s infinite both;
}

@keyframes jello {
  0% {transform: scale(0.8) scale3d(1, 1, 1);}
  30% {transform: scale(0.8) scale3d(1.25, 0.75, 1);}
  40% {transform: scale(0.8) scale3d(0.75, 1.25, 1);}
  50% {transform:scale(0.8) scale3d(1.15, 0.85, 1);}
  65% {transform: scale(0.8) scale3d(0.95, 1.05, 1);}
  75% {transform: scale(0.8) scale3d(1.05, 0.95, 1);}
  100% {transform: scale(0.8) scale3d(1, 1, 1);}
}

.bc8{
  opacity: 0;
  z-index: 1;
}
.k8:hover .b8{
  opacity: 0;
  animation-play-state: paused;
}
.k8:hover .bc8{
  opacity: 1;
}








.k9{

position: absolute; margin-left: 60%;
background-color: #B44B47;
width: 20%;
height: 25vw;
display: flex;
  justify-content: center;
  align-items: center;
  display: none;
}
.b9, .bc9 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
display: none;
  
}

.b9{
  opacity: 1;
  z-index: 1;
  animation: scale-down 1s linear infinite both;
}

@keyframes scale-down {
  0% {transform: scale(0.8) scale(1);}
  100% {transform: scale(0.8) scale(0.8); }
}


.bc9{
  opacity: 0;
  z-index: 1;
}
.k9:hover .b9{
  opacity: 0;
   animation-play-state: paused;
}
.k9:hover .bc9{
  opacity: 1;
}







.k10{

position: absolute; margin-left: 80%;
background-color: #2C3872;
width: 50%;
height: 60vw;
display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 60vw;
  margin-left: 50%;
}
.b10, .bc10 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;

  
}

.b10{
  opacity: 1;
  z-index: 1;
   animation: wobble 1.5s infinite both;
}

@keyframes wobble {
  0%,
  100% {transform: scale(0.7) translateX(0%); transform-origin: 50% 50%;}
  15% {transform: scale(0.7) translateX(-30px) rotate(-6deg);}
  30% {transform: scale(0.7) translateX(15px) rotate(6deg);}
  45% {transform: scale(0.7) translateX(-15px) rotate(-3.6deg);}
  60% {transform: scale(0.7) translateX(9px) rotate(2.4deg);}
  75% {transform: scale(0.7) translateX(-6px) rotate(-1.2deg);}
}

.bc10{
  opacity: 0;
  z-index: 1;
}
.k10:hover .b10{
  opacity: 0;
  animation-play-state: paused;
}
.k10:hover .bc10{
  opacity: 1;
  transform: scale(0.7);
}






.play{
 display: flex;
flex-direction:  column-reverse;
justify-content: center;
align-items: center;

}


.div1{
 
background-color: #2C3872;
width: 100%;
height: 130vw;
margin-top: 0%;
display: flex;
  justify-content: center;
  align-items: center;
}

.div2{
  background-color: #F5DE91;
  width: 100%;
height: 100vw;
margin-top: 120%;
margin-left: 0%;
display: flex;
justify-content: initial;
 display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    height: 100vw;
    width: 100%;
}

.e1 {
    grid-area: 1 / 1 / 2 / 2;
}

.e12 {
    grid-area: 3 / 3 / 4 / 4;
}







.e1, .ec1{
  margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
  transform: scale(0.5);
}
.e1{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }

    @keyframes rotate-center {
  0% {transform: scale(0.5) rotate(0);}
  100% {transform: scale(0.5) rotate(360deg);}
  }

  .ec1{
  opacity: 0;
  z-index: 1;
  }

.eu1:hover .e1{
  opacity: 0;
  animation-play-state: paused;
}
.eu1:hover .ec1{
  opacity: 1;}







.e2, .ec2{
  margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}
.e2{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec2{
  opacity: 0;
  z-index: 1;
 
}

.eu2:hover .e2{
  opacity: 0;
  animation-play-state: paused;
}
.eu2:hover .ec2{
  opacity: 1;}











.e3, .ec3{
 margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}
.e3{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec3{
  opacity: 0;
  z-index: 1;
 
}
.eu3:hover .e3{
  opacity: 0;
  animation-play-state: paused;
}
.eu3:hover .ec3{
  opacity: 1;}












.e4, .ec4{
margin-top: 5%;
margin-left: 5%;
position: absolute;
object-fit: contain;
transition: opacity 0.1s ease;
}
.e4{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec4{
  opacity: 0;
  z-index: 1;
 
}
.eu4:hover .e4{
  opacity: 0;
  animation-play-state: paused;
}
.eu4:hover .ec4{
  opacity: 1;}










.e5, .ec5{
  margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}
.e5{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec5{
  opacity: 0;
  z-index: 1;

}
.eu5:hover .e5{
  opacity: 0;
  animation-play-state: paused;
}
.eu5:hover .ec5{
  opacity: 1;}









.e6, .ec6{
 margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}
.e6{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec6{
  opacity: 0;
  z-index: 1;
  
}
.eu6:hover .e1{
  opacity: 0;
  animation-play-state: paused;
}
.eu6:hover .ec6{
  opacity: 1;}







.e7, .ec7{
 margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}
.e7{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec7{
  opacity: 0;
  z-index: 1;
  
}
.eu7:hover .e7{
  opacity: 0;
  animation-play-state: paused;
}
.eu7:hover .ec7{
  opacity: 1;}






.e8, .ec8{
 margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}
.e8{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec8{
  opacity: 0;
  z-index: 1;
  
}
.eu8:hover .e8{
  opacity: 0;
  animation-play-state: paused;
}
.eu8:hover .ec8{
  opacity: 1;}




.e9, .ec9{
 margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}
.e9{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec9{
  opacity: 0;
  z-index: 1;
 
}
.eu9:hover .e9{
  opacity: 0;
  animation-play-state: paused;
}
.eu9:hover .ec9{
  opacity: 1;}






.e10, .ec10{
  margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}
.e10{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec10{
  opacity: 0;
  z-index: 1;
 
}
.eu10:hover .e10{
  opacity: 0;
  animation-play-state: paused;
}
.eu10:hover .ec10{
  opacity: 1;}




.e11, .ec11{
 margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}
.e11{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec11{
  opacity: 0;
  z-index: 1;
  
}
.eu11:hover .e11{
  opacity: 0;
  animation-play-state: paused;
}
.eu11:hover .ec11{
  opacity: 1;}




.e12, .ec12{
 margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}
.e12{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec12{
  opacity: 0;
  z-index: 1;
 
}
.eu12:hover .e12{
  opacity: 0;
  animation-play-state: paused;
}
.eu12:hover .ec12{
  opacity: 1;}




.eu1, .eu2, .eu3, .eu4, .eu5, .eu6, .eu7, .eu8, .eu9, .eu10, .eu11, .eu12{
    transform: scale(0.5);
}




















.korzina{
  margin-left: -35vw;
  animation: wobble-hor-bottom 3s linear infinite both;
  transform: scale(0.5);
}

@keyframes wobble-hor-bottom {
  0%,
  100% {transform: scale(0.5) translateX(0%); transform-origin: 50% 50%;}
  15% {transform: scale(0.5)  translateX(-30px) rotate(-6deg);}
  30% {transform: scale(0.5) translateX(15px) rotate(6deg);}
  45% {transform: scale(0.5) translateX(-15px) rotate(-3.6deg);}
  60% {transform: scale(0.5) translateX(9px) rotate(2.4deg);}
  75% {transform: scale(0.5) translateX(-6px) rotate(-1.2deg);}
}

.vkorzine{
  width: 227px;
height: 100px;
margin-left:-90vw;
display: block;
position: relative;
background: url("./img/vkorzine.svg");
animation: walk1 1.5s steps(1) infinite;
}

@keyframes walk1{
    0%{ background-position: 0px top;}
    25%{ background-position: -227px top;}
    75% { background-position: -464px top;}
    100% { background-position: -701px top;}
}







.cont3{
width: 100%;
height: 45vw;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}

.bukvaU{
height: 190%;
width: 100%;
background-color: #FFF7E8;
background: url("./img/u768.svg");
animation: walk2 1.5s steps(1) infinite;
}
@keyframes walk2{
    0%{ background-position: 0px top;}
    25%{ background-position: -370px top;}
    75% { background-position: -740px top;}
    100% { background-position: -1110px top;}
}

.bukvaA{
height: 70vw;
width: 100%;
background-color: #B44B47;
 position: relative; 
  overflow: hidden;
  margin-left: 0%;
  margin-top: 25%;
  transform: scale(1.6);
}

.ba{
margin-top: -5%;
margin-left: 40%;
  
  top: 0; 
  left: 50%;
  transform: translateX(-50%); 
  animation: fall 1s ease-in forwards infinite; 
}

@keyframes fall {
  0% {transform:  scale(0.7) translateX(-50%) translateY(0); }
  100% {transform: scale(0.7) translateX(-50%) translateY(320px); }
}

.ba:hover{
   animation: rotate-scale-up 0.65s linear infinite both;
}

@keyframes rotate-scale-up {
  0% {transform: scale(1) rotateZ(0);}
  50% {transform: scale(2) rotateZ(180deg);}
  100% {transform: scale(1) rotateZ(360deg);}
}

.fa{
  margin-top: 0vw;
  margin-left: 22%;
  transform: scale(0.5);
   animation: shake-br 2s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
}

@keyframes shake-br {
  0%,
  100% {transform: scale(0.5)  rotate(0deg); transform-origin: 100% 100%;}
  10% {transform: scale(0.5)  rotate(2deg);}
  20%,
  40%,
  60% {transform: scale(0.5)  rotate(-4deg);}
  30%,
  50%,
  70% {transform: scale(0.5)  rotate(4deg);}
  80% {transform: scale(0.5)  rotate(-2deg);}
  90% {transform: scale(0.5) rotate(2deg);}
}

.bukvaI{
height: 100vw;
width: 100%;
background-color: #221E1B;
margin-top: 20%;
margin-left: 0%;
z-index: 1;
}

.bi{
margin-top: -5%;
margin-left: 15%;
  animation: wobble-hor-bottom 3s linear infinite both;
}



@keyframes wobble-hor-bottom {
  0%,
  100% {transform: scale(0.7) translateX(0%); transform-origin: 50% 50%;}
  15% {transform: scale(0.7) translateX(-30px) rotate(-6deg);}
  30% {transform: scale(0.7) translateX(15px) rotate(6deg);}
  45% {transform: scale(0.7) translateX(-15px) rotate(-3.6deg);}
  60% {transform: scale(0.7) translateX(9px) rotate(2.4deg);}
  75% {transform: scale(0.7) translateX(-6px) rotate(-1.2deg);}
}

.fi{
margin-left: 20%;
margin-top: -15%;
animation: shake-br 2s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
}
@keyframes shake-br {
  0%,
  100% {transform: rotate(0deg); transform-origin: 100% 100%;}
  10% {transform: rotate(2deg);}
  20%,
  40%,
  60% {transform: rotate(-4deg);}
  30%,
  50%,
  70% {transform: rotate(4deg);}
  80% {transform: rotate(-2deg);}
  90% {transform: rotate(2deg);}
}

.shtrihi{
margin-top: 95vw;
width: 100%;
height: 40vw;
background-color: #2C3872;
overflow: hidden;
position: relative;
display: flex;
align-items: center;

}

.sh2{
position: absolute;
animation: sh22 5s linear infinite alternate;
transform: scale(0.6);
}

@keyframes sh22 {
  0% {transform: scale(0.6) translateX(-50%);}
  100% {transform: scale(0.6) translateX(0);}}



.cont4{
height: 36vw;
display: flex;
flex-direction: row;
}

.move{
width: 100%;
height: 36vw;
background-color: #82A985;
z-index: 1;
margin-top: 20%;
}

.bukvaB{
width: 100%;
height: 100vw;
background-color: #B44B47;
margin-left: -100%;
margin-top: 255%;
}

.bb{
  margin-top: 14%;
margin-left: 20%;
animation: wobble-ver-left 1.5s infinite both;
transform: scale(0.5);
transition: opacity 0.8s ease;
}

.bb:hover{
  opacity: 0;
}


@keyframes wobble-ver-left {
  0%,
  100% {transform: scale(0.5) translateY(0) rotate(0); transform-origin: 50% 50%;}
  15% {transform: scale(0.5) translateY(-30px) rotate(-6deg);}
  30% {transform: scale(0.5) translateY(15px) rotate(6deg);}
  45% {transform: scale(0.5) translateY(-15px) rotate(-3.6deg);}
  60% {transform: scale(0.5) translateY(9px) rotate(2.4deg);}
  75% {transform: scale(0.5) translateY(-6px) rotate(-1.2deg);}
}

.fb{
margin-left: -3%;
animation: wobble-ver-left 1.5s infinite both;
margin-top: 0%;
}

@keyframes wobble-ver-left {
  0%,
  100% {transform: translateY(0) rotate(0); transform-origin: 50% 50%;}
  15% {transform: translateY(-30px) rotate(-6deg);}
  30% {transform: translateY(15px) rotate(6deg);}
  45% {transform: translateY(-15px) rotate(-3.6deg);}
  60% {transform: translateY(9px) rotate(2.4deg);}
  75% {transform: translateY(-6px) rotate(-1.2deg);}
}








.move{

  display: flex;
  flex-direction: row;
  margin-top: 390vw;
  height: 70vw;
}

.item1, .item2, .item3, .item4, .item5, .item6 {
  background-color: #FFF7E8;
 
  width: 15%;
  height: 8%;

  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;

  transform: scale(0.5);
}



.item1{

  margin-top: 5%;
  margin-left: 5%;
  animation: move1 8s linear infinite alternate;
}
@keyframes move1 {
  0%   { left: 5%;  top: 10%; }
  25%  { left: 15%; top: 5%;  }
  50%  { left: 30%; top: 22%; }
  75%  { left: 12%; top: 30%; }
  100% { left: 5%;  top: 10%; }
}
.figc1:hover{
  opacity: 0;
}


.item2{

  margin-top: 5%;
  margin-left: 0%;
  animation: move2 11s linear infinite alternate;
}

@keyframes move2 {
  0%   { left: 40%; top: 5%;  }
  20%  { left: 60%; top: 8%;  }
  40%  { left: 55%; top: 30%; }
  70%  { left: 30%; top: 28%; }
  100% { left: 40%; top: 5%;  }
}

.figc2:hover{
  opacity: 0;
}

.item3{

  margin-top: 15%;
  margin-left: -50%;
  animation: move3 9s linear infinite alternate;
}

@keyframes move3 {
  0%   { left: 75%; top: 15%; }
  30%  { left: 70%; top: 35%; }
  60%  { left: 82%; top: 50%; }
  100% { left: 75%; top: 15%; }
}

.figc3:hover{
  opacity: 0;
}

.item4{

  margin-top: 5%;
  margin-left: 10%;
 animation: move4 10s linear infinite alternate;
}
@keyframes move4 {
  0%   { left: 40%; top: 40%; }
  25%  { left: 48%; top: 55%; }
  50%  { left: 35%; top: 65%; }
  75%  { left: 25%; top: 45%; }
  100% { left: 40%; top: 40%; }
}

.figc4:hover{
  opacity: 0;
}

.item5{

  margin-top: 0%;
  margin-left: -10%;
  animation: move5 7s linear infinite alternate;
  
}

@keyframes move5 {
  0%   { left: 8%;  top: 60%; }
  30%  { left: 20%; top: 72%; }
  60%  { left: 10%; top: 80%; }
  100% { left: 8%;  top: 60%; }
}

.figc5:hover{
  opacity: 0;
}

.item6{
 margin-top: 0%;
  margin-left: -60%;
 animation: move6 12s linear infinite alternate;
}

@keyframes move6 {
  0%   { left: 68%; top: 60%; }
  25%  { left: 55%; top: 70%; }
  50%  { left: 72%; top: 82%; }
  75%  { left: 80%; top: 62%; }
  100% { left: 68%; top: 60%; }
}

.figc6:hover{
  opacity: 0;
}

.fig1, .figc1{
position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.fig2, .figc2{
   position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.fig3, .figc3{
   position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.fig4, .figc4{
   position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.fig5, .figc5{
   position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.fig6, .figc6{
   position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}














.cont5{
height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column ;
}




.alf{
background-color: #FFF7E8;
  width: 100%;
  height: 44vw;

   display: grid;
   
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(4, 1fr);
    width: 100%;
  height: 70vw;
  padding: 2%;
  margin-top: 425vw;
}
.y1{
  grid-area: 1 / 2 / 3 / 4;
}

.y29{
  grid-area: 25 / 26 / 27 / 28;
}


.y6, .y7, .y8, .y14, .y15, .y16, .y22, .y23, .y24, .y30, .y31, .y32, .yc6, .yc7, .yc8, .yc14, .yc15, .yc16, .yc22, .yc23, .yc24, .yc30, .yc31, .yc32, .y5, .y13, .y21, .y29, .yc5, .yc13, .yc21, .yc29{
    display: none;
}

.y1, .y2, .y3, .y4, .y5, .y6, .y7, .y8, .y9, .y10, .y11, .y12, .y13, .y14, .y15, .y16, .y17, .y18, .y19, .y20, .y21, .y22, .y23, .y24, .y25, .y26, .y27, .y28, .y29, .y30, .y31, .y32{
  z-index: 1;
  opacity: 1;
transform: scale(0.7);
  }

  .yc1, .yc2, .yc3, .yc4, .yc5, .yc6, .yc7, .yc8, .yc9, .yc10, .yc11, .yc12, .yc13, .yc14, .yc15, .yc16, .yc17, .yc18, .yc19, .yc20, .yc21, .yc22, .yc23, .yc24, .yc25, .yc26, .yc27, .yc28, .yc29, .yc30, .yc31, .yc32{

  opacity: 0;
  z-index: 1;
 transform: scale(0.7);
}
.yct1:hover .y1, .yct2:hover .y2, .yct3:hover .y3, .yct4:hover .y4, .yct5:hover .y5, .yct6:hover .y6, .yct7:hover .y7, .yct8:hover .y8, .yct9:hover .y9, .yct10:hover .y10, .yct11:hover .y11, .yct12:hover .y12, .yct13:hover .y13, .yct14:hover .y14, .yct15:hover .y15, .yct16:hover .y16, .yct17:hover .y17, .yct18:hover .y18, .yct19:hover .y19,  .yct20:hover .y20,  .yct21:hover .y21, .yct22:hover .y22,  .yct23:hover .y23, .yct24:hover .y24, .yct25:hover .y25, .yct26:hover .y26, .yct27:hover .y27, .yct28:hover .y28, .yct29:hover .y29, .yct30:hover .y30, .yct31:hover .y31, .yct32:hover .y32 {
  opacity: 0; 
}
.yct1:hover .yc1, .yct2:hover .yc2, .yct3:hover .yc3, .yct4:hover .yc4, .yct5:hover .yc5, .yct6:hover .yc6, .yct7:hover .yc7, .yct8:hover .yc8, .yct9:hover .yc9, .yct10:hover .yc10, .yct11:hover .yc11, .yct12:hover .yc12, .yct13:hover .yc13, .yct14:hover .yc14, .yct15:hover .yc15, .yct16:hover .yc16, .yct17:hover .yc17, .yct18:hover .yc18, .yct19:hover .yc19,  .yct20:hover .yc20,  .yct21:hover .yc21, .yct22:hover .yc22,  .yct23:hover .yc23, .yct24:hover .yc24, .yct25:hover .yc25, .yct26:hover .yc26, .yct27:hover .yc27, .yct28:hover .yc28, .yct29:hover .yc29, .yct30:hover .yc30, .yct31:hover .yc31, .yct32:hover .yc32{
  opacity: 1;}





.y1, .yc1{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y2, .yc2{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y3, .yc3{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
  margin-left: 9%;
}

.y4, .yc4{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
  margin-left: 13%;
}

.y5, .yc5{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y6, .yc6{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y7, .yc7{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y8, .yc8{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y9, .yc9{
  position: absolute;
  object-fit: contain;
  margin-left: -60%;
  margin-top: 5%;
  transition: opacity 0.1s ease;
}

.y10, .yc10{
  position: absolute;
  object-fit: contain;
  margin-left: -60%;
  margin-top: 5%;
  transition: opacity 0.1s ease;
}

.y11, .yc11{
  position: absolute;
  object-fit: contain;
  margin-left: 46%;
  margin-top: -16%;
  transition: opacity 0.1s ease;
}

.y12, .yc12{
  position: absolute;
  object-fit: contain;
   margin-left: 53%;
  margin-top: -16%;
  transition: opacity 0.1s ease;
}

.y13, .yc13{
  position: absolute;
  object-fit: contain;
   margin-left: 27%;
  margin-top: -11%;
  transition: opacity 0.1s ease;
}

.y14, .yc14{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y15, .yc15{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y16, .yc16{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y17, .yc17{
  position: absolute;
  object-fit: contain;
  margin-left: -20%;
  margin-top: -10%;
  transition: opacity 0.1s ease;
}

.y18, .yc18{
  position: absolute;
  object-fit: contain;
   margin-left: -19%;
  margin-top: -10%;
  transition: opacity 0.1s ease;
}

.y19, .yc19{
  position: absolute;
  object-fit: contain;
   margin-left: -15%;
  margin-top: -12%;
  transition: opacity 0.1s ease;
}

.y20, .yc20{
  position: absolute;
  object-fit: contain;
   margin-left: -15%;
  margin-top: -10%;
  transition: opacity 0.1s ease;
}

.y21, .yc21{
  position: absolute;
  object-fit: contain;
   margin-left: 54%;
  margin-top: -24%;
  transition: opacity 0.1s ease;
}

.y22, .yc22{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y23, .yc23{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y24, .yc24{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y25, .yc25{
  position: absolute;
  object-fit: contain;
  margin-top: -7%;
  margin-left: -10%;
  transition: opacity 0.1s ease;
}

.y26, .yc26{
  position: absolute;
  object-fit: contain;
   margin-top: -6%;
  transition: opacity 0.1s ease;
}

.y27, .yc27{
  position: absolute;
  object-fit: contain;
   margin-top: -4%;
   margin-left: 5%;
  transition: opacity 0.1s ease;
}

.y28, .yc28{
  position: absolute;
  object-fit: contain;
   margin-top: -4%;
   margin-left: 8%;
  transition: opacity 0.1s ease;
}

.y29, .yc29{
  position: absolute;
  object-fit: contain;
   margin-top: -12%;
  transition: opacity 0.1s ease;
}

.y30, .yc30{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y31, .yc31{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y32, .yc32{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}
 .y1, .y2, .y3, .y4, .y5, .y6, .y7, .y8, .y9, .y10, .y11, .y12, .y13, .y14, .y15, .y16, .y17, .y18, .y19, .y20, .y21, .y22, .y23, .y24, .y25, .y26, .y27, .y28, .y29, .y30, .y31, .y32{
  z-index: 1;
 }






.fall{
background-color: #F5DE91;
  width: 100%;
  height: 58vw;
  position: relative;
  overflow: hidden;
  margin-top: 25vw;
}



.h1 {
    left: 5%;
    top: -20%;
    position: absolute;
    animation: fall1 4000ms linear infinite;
}

@keyframes fall1 {
    0%   { top: -20%; transform: rotate(0deg); }
    25%  { top: 10%;  transform: rotate(90deg); }
    50%  { top: 40%;  transform: rotate(180deg); }
    75%  { top: 70%;  transform: rotate(270deg); }
    100% { top: 110%; transform: rotate(360deg); }
}

.h2 {
    left: 15%;
    top: -30%;
     position: absolute;
    animation: fall2 4500ms linear infinite;
}

@keyframes fall2 {
    0%   { top: -30%; transform: rotate(0deg); }
    20%  { top: 0%;   transform: rotate(-80deg); }
    40%  { top: 30%;  transform: rotate(-160deg); }
    70%  { top: 70%;  transform: rotate(-260deg); }
    100% { top: 120%; transform: rotate(-360deg); }
}

.h3 {
    left: 25%;
    top: -10%;
     position: absolute;
    animation: fall3 3800ms linear infinite;
}

@keyframes fall3 {
    0%   { top: -10%; transform: rotate(0deg); }
    30%  { top: 20%;  transform: rotate(120deg); }
    60%  { top: 60%;  transform: rotate(240deg); }
    100% { top: 115%; transform: rotate(480deg); }
}

.h4 {
    left: 35%;
    top: -25%;
     position: absolute;
    animation: fall4 5000ms linear infinite;
}

@keyframes fall4 {
    0%   { top: -25%; transform: rotate(0deg); }
    15%  { top: 0%;   transform: rotate(-60deg); }
    40%  { top: 35%;  transform: rotate(-160deg); }
    75%  { top: 80%;  transform: rotate(-300deg); }
    100% { top: 130%; transform: rotate(-420deg); }
}


.h5 {
    left: 45%;
    top: -15%;
     position: absolute;
    animation: fall5 4200ms linear infinite;
}

@keyframes fall5 {
    0%   { top: -15%; transform: rotate(0deg); }
    25%  { top: 15%;  transform: rotate(100deg); }
    50%  { top: 50%;  transform: rotate(220deg); }
    75%  { top: 85%;  transform: rotate(340deg); }
    100% { top: 125%; transform: rotate(460deg); }
}

/* h6 */
.h6 {
    left: 55%;
    top: -35%;
     position: absolute;
    animation: fall6 4700ms linear infinite;
}

@keyframes fall6 {
    0%   { top: -35%; transform: rotate(0deg); }
    30%  { top: 5%;   transform: rotate(-110deg); }
    55%  { top: 45%;  transform: rotate(-230deg); }
    85%  { top: 95%;  transform: rotate(-350deg); }
    100% { top: 135%; transform: rotate(-430deg); }
}

/* h7 */
.h7 {
    left: 65%;
    top: -5%;
     position: absolute;
    animation: fall7 3600ms linear infinite;
}

@keyframes fall7 {
    0%   { top: -5%;  transform: rotate(0deg); }
    35%  { top: 25%;  transform: rotate(140deg); }
    65%  { top: 65%;  transform: rotate(280deg); }
    100% { top: 120%; transform: rotate(560deg); }
}

/* h8 */
.h8 {
    left: 75%;
    top: -20%;
     position: absolute;
    animation: fall8 5200ms linear infinite;
}

@keyframes fall8 {
    0%   { top: -20%; transform: rotate(0deg); }
    20%  { top: 5%;   transform: rotate(-90deg); }
    45%  { top: 40%;  transform: rotate(-200deg); }
    80%  { top: 90%;  transform: rotate(-340deg); }
    100% { top: 140%; transform: rotate(-480deg); }
}

/* h9 */
.h9 {
    left: 10%;
    top: -40%;
     position: absolute;
    animation: fall9 5500ms linear infinite;
}

@keyframes fall9 {
    0%   { top: -40%; transform: rotate(0deg); }
    25%  { top: -5%;  transform: rotate(120deg); }
    50%  { top: 35%;  transform: rotate(240deg); }
    75%  { top: 80%;  transform: rotate(360deg); }
    100% { top: 145%; transform: rotate(540deg); }
}

/* h10 */
.h10 {
    left: 30%;
    top: -30%;
     position: absolute;
    animation: fall10 4300ms linear infinite;
}

@keyframes fall10 {
    0%   { top: -30%; transform: rotate(0deg); }
    20%  { top: 0%;   transform: rotate(-100deg); }
    50%  { top: 45%;  transform: rotate(-220deg); }
    80%  { top: 95%;  transform: rotate(-340deg); }
    100% { top: 150%; transform: rotate(-460deg); }
}

/* h11 */
.h11 {
    left: 50%;
    top: -10%;
     position: absolute;
    animation: fall11 3900ms linear infinite;
}

@keyframes fall11 {
    0%   { top: -10%; transform: rotate(0deg); }
    30%  { top: 20%;  transform: rotate(130deg); }
    60%  { top: 60%;  transform: rotate(260deg); }
    100% { top: 135%; transform: rotate(520deg); }
}

/* h12 */
.h12 {
    left: 70%;
    top: -25%;
     position: absolute;
    animation: fall12 4800ms linear infinite;
}

@keyframes fall12 {
    0%   { top: -25%; transform: rotate(0deg); }
    25%  { top: 5%;   transform: rotate(-120deg); }
    55%  { top: 50%;  transform: rotate(-260deg); }
    85%  { top: 100%; transform: rotate(-380deg); }
    100% { top: 155%; transform: rotate(-520deg); }
}

/* h13 */
.h13 {
    left: 85%;
    top: -15%;
     position: absolute;
    animation: fall13 5100ms linear infinite;
}

@keyframes fall13 {
    0%   { top: -15%; transform: rotate(0deg); }
    20%  { top: 10%;  transform: rotate(150deg); }
    45%  { top: 45%;  transform: rotate(300deg); }
    75%  { top: 95%;  transform: rotate(480deg); }
    100% { top: 160%; transform: rotate(660deg); }
}
.h1, .h2, .h3, .h4, .h5, .h6, .h7, .h8, .h9, .h10, .h11, .h12, .h13{
    transform: scale(0.6);
}







.podval{

   position: relative;
    width: 100%;
    height: 16vw;
    top: 0;
    left: 0;
    word-wrap: nowrap;
    z-index: 1;
    overflow-x: hidden;
}

.pd{
  position: absolute;
    animation: text3 20s linear infinite;
    height: 16vw;
}

@keyframes text3{
0%{ left: 0%; top: 0;}
100%{ left: -400%; top: 0;}
}
}
















@media screen and (min-width: 1441px) and (max-width: 1920px) {
/* desctop */

body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow-x: hidden;
background-color: #FFF7E8;
position: relative;
}






.stroke{

    position: relative;
    width: 100%;
 height: 4vw;
    top: 0;
    left: 0;
    word-wrap: nowrap;
    z-index: 1;
    overflow-x: hidden;
}

.st{
  position: absolute;
     animation: text 6s linear infinite;
}

@keyframes text{
0%{ left: -100%; top: 0;}
100%{ left: 0%; top: 0;}

}

.bu1{

position: absolute;
margin-top: 16%;
margin-left: 5%;


}

.b1, .bc1 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
transform: scale(1.4);
  
}

.b1{
  opacity: 1;
  z-index: 1;
}

.bc1{
  opacity: 0;
  z-index: 1;
}
.bu1:hover .b1{
  opacity: 0;
}
.bu1:hover .bc1{
  opacity: 1;
}

 







.bu2{

position: absolute;
margin-left: 23%;
margin-top: 16%;

}

.b2, .bc2 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease; 
  transform: scale(1.4);
}

.b2{
  opacity: 1;
  z-index: 1;
}

.bc2{
  opacity: 0;
  z-index: 1;
}
.bu2:hover .b2{
  opacity: 0;
}
.bu2:hover .bc2{
  opacity: 1;
 
}









.bu3{

position: absolute;

margin-left: 43%;
margin-top: 16%;

}

.b3, .bc3 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease; 
  transform: scale(1.4);
}

.b3{
  opacity: 1;
  z-index: 1;
}

.bc3{
  opacity: 0;
  z-index: 1;
}
.bu3:hover .b3{
  opacity: 0;
}
.bu3:hover .bc3{
  opacity: 1;
}







.bu4{

position: absolute;

margin-left: 63%;
margin-top: 16%;

}

.b4, .bc4 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease; 
  transform: scale(1.4);
}

.b4{
  opacity: 1;
  z-index: 1;
}

.bc4{
  opacity: 0;
  z-index: 1;
}
.bu4:hover .b4{
  opacity: 0;
}
.bu4:hover .bc4{
  opacity: 1;
}





.bu5{

position: absolute;

margin-left: 82%;
margin-top: 16%;

}

.b5, .bc5 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease; 
  transform: scale(1.4);
}

.b5{
  opacity: 1;
  z-index: 1;
}

.bc5{
  opacity: 0;
  z-index: 1;
}
.bu5:hover .b5{
  opacity: 0;
}
.bu5:hover .bc5{
  opacity: 1;
}










.shtrih {
width: 532px;
height: 254px;
margin-left: 36%;
margin-top: -16%;
background: url("./img/shtrix.svg");
animation: flick 3s steps(1) infinite;
z-index: 1;

}

@keyframes flick{
 0%{ background-position: 0px top;}
 70%{ background-position: -532px top;}
 80%{ background-position: -1064px top;}
 90%{ background-position: -1596px top;}

}

.el1{
    margin-top: 11%;
    margin-left: 10%;
    animation: el1 6s linear infinite both;
    width: 23%;
    height: 20%;
    z-index: -1;

    
}

@keyframes el1 {
   0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
}

.el2{
    margin-top: -22%;
    margin-left: 67%;
    animation: el2 4s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
}

@keyframes el2 {
  0% {transform: rotateY(0);}
  100% {transform: rotateY(360deg); }
}

.el3{
    margin-top: 23%;
    margin-left: 10%;
    animation: el3 5s linear infinite both;
    width: 18%;
    height: 12%;
}

@keyframes el3 {
  0% {transform: rotateY(0);}
  100% {transform: rotateY(360deg);}
}

.el4{
    margin-top: -15%;
    margin-left: 72%;
    animation: el4 8s linear infinite both;
    width: 17%;
    height: 11%;
}

@keyframes el4 {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
}









.cont2{
  margin-top: 20vw;
flex-direction: row;
justify-content: center;
align-items: center;
}




.k6{
width: 20%;
height: 24vw;
background-color: #B44B47;
display: flex;
  justify-content: center;
  align-items: center;
position: absolute;
margin-left: 0%;
}


.b6, .bc6 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;

  
}

.b6{
  opacity: 1;
  z-index: 1;
  animation: bounce-top 1.5s infinite both;
}

@keyframes bounce-top {
  0% {transform: scale(1.4) translateY(-45px); animation-timing-function: ease-in; }
  24% {}
  40% {transform: scale(1.4) translateY(-24px); animation-timing-function: ease-in;}
  65% {transform: scale(1.4) translateY(-12px); animation-timing-function: ease-in;}
  82% {transform: scale(1.4) translateY(-6px); animation-timing-function: ease-in;}
  93% {transform: scale(1.4) translateY(-4px); animation-timing-function: ease-in;}
  25%,
  55%,
  75%,
  87% {transform: scale(1.4) translateY(0px); animation-timing-function: ease-out;}
  100% {transform: scale(1.4) translateY(0px);animation-timing-function: ease-out; }
}

.bc6{
  opacity: 0;
 transform: scale(1.4);
}
.k6:hover .b6{
  opacity: 0;
  animation-play-state: paused;
}
.k6:hover .bc6{
  opacity: 1;
}








.k7{

position: absolute; margin-left: 20%;
background-color: #F5DE91;
width: 20%;
height: 24vw;
display: flex;
  justify-content: center;
  align-items: center;
}

.b7, .bc7 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;

  
}
.b7img, .bc7img{
    transform: scale(1.4);
}

.b7{
  opacity: 1;
  z-index: 1;
  animation: rotate-center 1.5s ease-in-out infinite both;
}

@keyframes rotate-center {
  0% { transform: scale(1.4) rotate(0);}
  100% {transform: scale(1.4) rotate(360deg);}
}

.bc7{
  opacity: 0;
  z-index: 1;
}
.k7:hover .b7{
  opacity: 0;
  animation-play-state: paused;
}
.k7:hover .bc7{
  opacity: 1;
}






.k8{

position: absolute; margin-left: 40%;
background-color: #82A985;
width: 20%;
height: 24vw;
display: flex;
  justify-content: center;
  align-items: center;
}
.b8, .bc8 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;

  
}

.b8{
  opacity: 1;
  z-index: 1;
   animation: jello 1.5s infinite both;
}

@keyframes jello {
  0% {transform: scale(1.4) scale3d(1, 1, 1);}
  30% {transform: scale(1.4) scale3d(1.25, 0.75, 1);}
  40% {transform: scale(1.4) scale3d(0.75, 1.25, 1);}
  50% {transform: scale(1.4) scale3d(1.15, 0.85, 1);}
  65% {transform:  scale(1.4) scale3d(0.95, 1.05, 1);}
  75% {transform: scale(1.4) scale3d(1.05, 0.95, 1);}
  100% {transform: scale(1.4) scale3d(1, 1, 1);}
}

.bc8{
  opacity: 0;
  z-index: 1;
  transform: scale(1.4);
}
.k8:hover .b8{
  opacity: 0;
  animation-play-state: paused;
}
.k8:hover .bc8{
  opacity: 1;
}








.k9{

position: absolute; margin-left: 60%;
background-color: #B44B47;
width: 20%;
height: 24vw;
display: flex;
  justify-content: center;
  align-items: center;
}
.b9, .bc9 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;

  
}

.b9{
  opacity: 1;
  z-index: 1;
  animation: scale-down 1s linear infinite both;
}

@keyframes scale-down {
  0% {transform: scale(1.4) scale(1);}
  100% {transform: scale(1.4) scale(0.5); }
}


.bc9{
  opacity: 0;
  z-index: 1;
  transform: scale(1.4);
}
.k9:hover .b9{
  opacity: 0;
   animation-play-state: paused;
}
.k9:hover .bc9{
  opacity: 1;
}







.k10{

position: absolute; margin-left: 80%;
background-color: #2C3872;
width: 20%;
height: 24vw;
display: flex;
  justify-content: center;
  align-items: center;
}
.b10, .bc10 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;

  
}

.b10{
  opacity: 1;
  z-index: 1;
   animation: wobble 1.5s infinite both;
}

@keyframes wobble {
  0%,
  100% {transform: scale(1.4) translateX(0%); transform-origin: 50% 50%;}
  15% {transform: scale(1.4) translateX(-30px) rotate(-6deg);}
  30% {transform: scale(1.4) translateX(15px) rotate(6deg);}
  45% {transform: scale(1.4) translateX(-15px) rotate(-3.6deg);}
  60% {transform: scale(1.4) translateX(9px) rotate(2.4deg);}
  75% {transform: scale(1.4) translateX(-6px) rotate(-1.2deg);}
}

.bc10{
  opacity: 0;
  z-index: 1;
  transform: scale(1.4);
}
.k10:hover .b10{
  opacity: 0;
  animation-play-state: paused;
}
.k10:hover .bc10{
  opacity: 1;
}






.play{
 display: flex;
flex-direction: row;
justify-content: center;
align-items: center;

}


.div1{
 
background-color: #2C3872;
width: 40%;
height: 50vw;
margin-top: 23.9%;
display: flex;
  justify-content: center;
  align-items: center;
}

.div2{


  background-color: #F5DE91;
  width: 60%;
height: 50vw;
margin-top: 23.9%;
display: flex;
justify-content: initial;

 display: grid;
   
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    height: 50vw;
    width: 60%;
}

.e1 {
    grid-area: 1 / 1 / 2 / 2;
}

.e12 {
    grid-area: 3 / 3 / 4 / 4;
}







.e1, .ec1{
  margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
  width: 8%;
}
.e1{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }

    @keyframes rotate-center {
  0% {transform:  rotate(0);}
  100% {transform: rotate(360deg);}
  }

  .ec1{
  opacity: 0;
  z-index: 1;
  }

.eu1:hover .e1{
  opacity: 0;
  animation-play-state: paused;
}
.eu1:hover .ec1{
  opacity: 1;}







.e2, .ec2{
  margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
  width: 8%;
}
.e2{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec2{
  opacity: 0;
  z-index: 1;
 
}

.eu2:hover .e2{
  opacity: 0;
  animation-play-state: paused;
}
.eu2:hover .ec2{
  opacity: 1;}











.e3, .ec3{
 margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
  width: 8%;
}
.e3{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec3{
  opacity: 0;
  z-index: 1;
 
}
.eu3:hover .e3{
  opacity: 0;
  animation-play-state: paused;
}
.eu3:hover .ec3{
  opacity: 1;}












.e4, .ec4{
 margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
  width: 8%;
}
.e4{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec4{
  opacity: 0;
  z-index: 1;
 
}
.eu4:hover .e4{
  opacity: 0;
  animation-play-state: paused;
}
.eu4:hover .ec4{
  opacity: 1;}










.e5, .ec5{
  margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
  width: 8%;
}
.e5{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec5{
  opacity: 0;
  z-index: 1;

}
.eu5:hover .e5{
  opacity: 0;
  animation-play-state: paused;
}
.eu5:hover .ec5{
  opacity: 1;}









.e6, .ec6{
 margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
  width: 8%;
}
.e6{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec6{
  opacity: 0;
  z-index: 1;
  
}
.eu6:hover .e6{
  opacity: 0;
  animation-play-state: paused;
}
.eu6:hover .ec6{
  opacity: 1;}







.e7, .ec7{
 margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
  width: 8%;
}
.e7{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec7{
  opacity: 0;
  z-index: 1;
  
}
.eu7:hover .e7{
  opacity: 0;
  animation-play-state: paused;
}
.eu7:hover .ec7{
  opacity: 1;}






.e8, .ec8{
 margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
  width: 8%;
}
.e8{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec8{
  opacity: 0;
  z-index: 1;
  
}
.eu8:hover .e8{
  opacity: 0;
  animation-play-state: paused;
}
.eu8:hover .ec8{
  opacity: 1;}




.e9, .ec9{
 margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
  width: 8%;
}
.e9{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec9{
  opacity: 0;
  z-index: 1;
 
}
.eu9:hover .e9{
  opacity: 0;
  animation-play-state: paused;
}
.eu9:hover .ec9{
  opacity: 1;}






.e10, .ec10{
  
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
  width: 8%;
}
.e10{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec10{
  opacity: 0;
  z-index: 1;
 
}
.eu10:hover .e10{
  opacity: 0;
  animation-play-state: paused;
}
.eu10:hover .ec10{
  opacity: 1;}




.e11, .ec11{
 margin-top: 2%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
  width: 8%;
}
.e11{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec11{
  opacity: 0;
  z-index: 1;
  
}
.eu11:hover .e11{
  opacity: 0;
  animation-play-state: paused;
}
.eu11:hover .ec11{
  opacity: 1;}




.e12, .ec12{
 margin-top: 3%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
  width: 8%;
}
.e12{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec12{
  opacity: 0;
  z-index: 1;
 
}
.eu12:hover .e12{
  opacity: 0;
  animation-play-state: paused;
}
.eu12:hover .ec12{
  opacity: 1;}
























.korzina{
  margin-left: -10vw;
  animation: wobble-hor-bottom 3s linear infinite both;
  transform: scale(1.5);
  width: 80%;
}

@keyframes wobble-hor-bottom {
  0%,
  100% {transform: scale(1.5) translateX(0%); transform-origin: 50% 50%;}
  15% {transform: scale(1.5) translateX(-30px) rotate(-6deg);}
  30% {transform: scale(1.5) translateX(15px) rotate(6deg);}
  45% {transform: scale(1.5) translateX(-15px) rotate(-3.6deg);}
  60% {transform: scale(1.5) translateX(9px) rotate(2.4deg);}
  75% {transform: scale(1.5) translateX(-6px) rotate(-1.2deg);}
}

.vkorzine{
  width: 227px;
height: 100px;
margin-left:-23vw;
display: block;
position: relative;
background: url("./img/vkorzine.svg");
animation: walk1 1.5s steps(1) infinite;
}

@keyframes walk1{
    0%{ background-position: 0px top;}
    25%{ background-position: -227px top;}
    75% { background-position: -464px top;}
    100% { background-position: -701px top;}
}







.cont3{
width: 100%;
height: 45vw;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}

.bukvaU{
height: 60%;
width: 26%;
background-color: #FFF7E8;
background: url("./img/u1920.svg");
animation: walk2 1.5s steps(1) infinite;
}
@keyframes walk2{
    0%{ background-position: 0px top;}
    25%{ background-position: -531px top;}
    75% { background-position: -1062px top;}
    100% { background-position: -1593px top;}
}

.bukvaA{
height: 60%;
width: 37.4%;
background-color: #B44B47;
 position: relative; 
  overflow: hidden;
}

.ba{
margin-top: 10%;
margin-left: 60%;
transform: scale(1.5);
  
  top: 0; 
  left: 50%;
  transform: translateX(-50%); 
  animation: fall 1s ease-in forwards infinite; 
}

@keyframes fall {
  0% {transform: scale(1.5) translateX(-50%) translateY(0); }
  100% {transform: scale(1.5) translateX(-50%) translateY(320px); }
}

.ba:hover{
   animation: rotate-scale-up 0.65s linear infinite both;
}

@keyframes rotate-scale-up {
  0% {transform: scale(1) rotateZ(0);}
  50% {transform: scale(2) rotateZ(180deg);}
  100% {transform: scale(1) rotateZ(360deg);}
}

.fa{
  
  margin-left: 42%;
  margin-top: 10%;
  width: 70%;
   animation: shake-br 2s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
}

@keyframes shake-br {
  0%,
  100% {transform: scale(1.5) rotate(0deg); transform-origin: 100% 100%;}
  10% {transform: scale(1.5) rotate(2deg);}
  20%,
  40%,
  60% {transform: scale(1.5) rotate(-4deg);}
  30%,
  50%,
  70% {transform: scale(1.5) rotate(4deg);}
  80% {transform: scale(1.5) rotate(-2deg);}
  90% {transform: scale(1.5) rotate(2deg);}
}

.bukvaI{
height: 100%;
width: 36.6%;
background-color: #221E1B;
z-index: 1;
}

.bi{
margin-top: 30%;
margin-left: 15%;
width: 90%;
  animation: wobble-hor-bottom 3s linear infinite both;
}



@keyframes wobble-hor-bottom {
  0%,
  100% {transform: translateX(0%); transform-origin: 50% 50%;}
  15% {transform: translateX(-30px) rotate(-6deg);}
  30% {transform: translateX(15px) rotate(6deg);}
  45% {transform: translateX(-15px) rotate(-3.6deg);}
  60% {transform: translateX(9px) rotate(2.4deg);}
  75% {transform: translateX(-6px) rotate(-1.2deg);}
}

.fi{
margin-left: 20%;
width: 80%;
animation: shake-br 2s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
}
@keyframes shake-br {
  0%,
  100% {transform: rotate(0deg); transform-origin: 100% 100%;}
  10% {transform: rotate(2deg);}
  20%,
  40%,
  60% {transform: rotate(-4deg);}
  30%,
  50%,
  70% {transform: rotate(4deg);}
  80% {transform: rotate(-2deg);}
  90% {transform: rotate(2deg);}
}

.shtrihi{
margin-top: -19.8%;
width: 63.4%;
height: 44%;
background-color: #2C3872;
overflow: hidden;
position: relative;
display: flex;
align-items: center;

}

.sh2{
position: absolute;
width: 500%;
animation: sh22 5s linear infinite alternate;
}

@keyframes sh22 {
  0% {transform: translateX(-50%);}
  100% {transform: translateX(0);}}



.cont4{
height: 36vw;
display: flex;
flex-direction: row;
}

.move{
width: 63.4%;
height: 36vw;
background-color: #82A985;
z-index: 1;
}

.bukvaB{
width: 36.6%;
height: 36vw;
background-color: #B44B47;

}

.bb{
  margin-top: 20%;
margin-left: 20%;
animation: wobble-ver-left 1.5s infinite both;
width: 50%;
transition: opacity 0.8s ease;
}

.bb:hover{
  opacity: 0;
}


@keyframes wobble-ver-left {
  0%,
  100% {transform: scale(1.5) translateY(0) rotate(0); transform-origin: 50% 50%;}
  15% {transform: scale(1.5) translateY(-30px) rotate(-6deg);}
  30% {transform: scale(1.5) translateY(15px) rotate(6deg);}
  45% {transform: scale(1.5) translateY(-15px) rotate(-3.6deg);}
  60% {transform: scale(1.5) translateY(9px) rotate(2.4deg);}
  75% {transform: scale(1.5) translateY(-6px) rotate(-1.2deg);}
}

.fb{
margin-left: -3%;
width: 70%;
animation: wobble-ver-left 1.5s infinite both;
}

@keyframes wobble-ver-left {
  0%,
  100% {transform: translateY(0) rotate(0);transform-origin: 50% 50%;}
  15% {transform: translateY(-30px) rotate(-6deg);}
  30% {transform: translateY(15px) rotate(6deg);}
  45% {transform: translateY(-15px) rotate(-3.6deg);}
  60% {transform: translateY(9px) rotate(2.4deg);}
  75% {transform: translateY(-6px) rotate(-1.2deg);}
}








.move{

  display: flex;
  flex-direction: row;
  
}

.item1, .item2, .item3, .item4, .item5, .item6 {
  background-color: #FFF7E8;
 
  width: 15%;
  height: 8%;

  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;

  
}



.item1{

  margin-top: 5%;
  margin-left: 5%;
  animation: move1 8s linear infinite alternate;
  transform: scale(1.3);
}
@keyframes move1 {
  0%   { left: 5%;  top: 10%; }
  25%  { left: 15%; top: 5%;  }
  50%  { left: 30%; top: 22%; }
  75%  { left: 12%; top: 30%; }
  100% { left: 5%;  top: 10%; }
}
.figc1:hover{
  opacity: 0;
}


.item2{

  margin-top: 5%;
  margin-left: 0%;
  animation: move2 11s linear infinite alternate;
  transform: scale(1.3);
}

@keyframes move2 {
  0%   { left: 40%; top: 5%;  }
  20%  { left: 60%; top: 8%;  }
  40%  { left: 55%; top: 30%; }
  70%  { left: 30%; top: 28%; }
  100% { left: 40%; top: 5%;  }
}

.figc2:hover{
  opacity: 0;
}

.item3{

  margin-top: 15%;
  margin-left: -50%;
  animation: move3 9s linear infinite alternate;
  transform: scale(1.3);
}

@keyframes move3 {
  0%   { left: 75%; top: 15%; }
  30%  { left: 70%; top: 35%; }
  60%  { left: 82%; top: 50%; }
  100% { left: 75%; top: 15%; }
}

.figc3:hover{
  opacity: 0;
}

.item4{

  margin-top: 5%;
  margin-left: 10%;
 animation: move4 10s linear infinite alternate;
 transform: scale(1.3);
}
@keyframes move4 {
  0%   { left: 40%; top: 40%; }
  25%  { left: 48%; top: 55%; }
  50%  { left: 35%; top: 65%; }
  75%  { left: 25%; top: 45%; }
  100% { left: 40%; top: 40%; }
}

.figc4:hover{
  opacity: 0;
}

.item5{

  margin-top: 0%;
  margin-left: -10%;
  animation: move5 7s linear infinite alternate;
  transform: scale(1.3);
  
}

@keyframes move5 {
  0%   { left: 8%;  top: 60%; }
  30%  { left: 20%; top: 72%; }
  60%  { left: 10%; top: 80%; }
  100% { left: 8%;  top: 60%; }
}

.figc5:hover{
  opacity: 0;
}

.item6{
 margin-top: 0%;
  margin-left: -60%;
 animation: move6 12s linear infinite alternate;
 transform: scale(1.3);
}

@keyframes move6 {
  0%   { left: 68%; top: 60%; }
  25%  { left: 55%; top: 70%; }
  50%  { left: 72%; top: 82%; }
  75%  { left: 80%; top: 62%; }
  100% { left: 68%; top: 60%; }
}

.figc6:hover{
  opacity: 0;
}

.fig1, .figc1{
position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.fig2, .figc2{
   position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.fig3, .figc3{
   position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.fig4, .figc4{
   position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.fig5, .figc5{
   position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.fig6, .figc6{
   position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}














.cont5{
height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
}






.alf{
background-color: #FFF7E8;
  width: 70%;
  height: 44vw;

   display: grid;
   
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(4, 1fr);
    width: 70%;
  height: 44vw;
  padding: 2%;
}
.y1{
  grid-area: 1 / 2 / 3 / 4 / 5 / 6 / 7 / 8;
}
.y32{
  grid-area: 25 / 26 / 27 / 28 / 29 / 30 / 31 / 32;
}




.y1, .y2, .y3, .y4, .y5, .y6, .y7, .y8, .y9, .y10, .y11, .y12, .y13, .y14, .y15, .y16, .y17, .y18, .y19, .y20, .y21, .y22, .y23, .y24, .y25, .y26, .y27, .y28, .y29, .y30, .y31, .y32{
  z-index: 1;
  opacity: 1;
  transform: scale(1.3);
  }

  .yc1, .yc2, .yc3, .yc4, .yc5, .yc6, .yc7, .yc8, .yc9, .yc10, .yc11, .yc12, .yc13, .yc14, .yc15, .yc16, .yc17, .yc18, .yc19, .yc20, .yc21, .yc22, .yc23, .yc24, .yc25, .yc26, .yc27, .yc28, .yc29, .yc30, .yc31, .yc32{

  opacity: 0;
  z-index: 1;
 transform: scale(1.3);
}
.yct1:hover .y1, .yct2:hover .y2, .yct3:hover .y3, .yct4:hover .y4, .yct5:hover .y5, .yct6:hover .y6, .yct7:hover .y7, .yct8:hover .y8, .yct9:hover .y9, .yct10:hover .y10, .yct11:hover .y11, .yct12:hover .y12, .yct13:hover .y13, .yct14:hover .y14, .yct15:hover .y15, .yct16:hover .y16, .yct17:hover .y17, .yct18:hover .y18, .yct19:hover .y19,  .yct20:hover .y20,  .yct21:hover .y21, .yct22:hover .y22,  .yct23:hover .y23, .yct24:hover .y24, .yct25:hover .y25, .yct26:hover .y26, .yct27:hover .y27, .yct28:hover .y28, .yct29:hover .y29, .yct30:hover .y30, .yct31:hover .y31, .yct32:hover .y32 {
  opacity: 0; 
}
.yct1:hover .yc1, .yct2:hover .yc2, .yct3:hover .yc3, .yct4:hover .yc4, .yct5:hover .yc5, .yct6:hover .yc6, .yct7:hover .yc7, .yct8:hover .yc8, .yct9:hover .yc9, .yct10:hover .yc10, .yct11:hover .yc11, .yct12:hover .yc12, .yct13:hover .yc13, .yct14:hover .yc14, .yct15:hover .yc15, .yct16:hover .yc16, .yct17:hover .yc17, .yct18:hover .yc18, .yct19:hover .yc19,  .yct20:hover .yc20,  .yct21:hover .yc21, .yct22:hover .yc22,  .yct23:hover .yc23, .yct24:hover .yc24, .yct25:hover .yc25, .yct26:hover .yc26, .yct27:hover .yc27, .yct28:hover .yc28, .yct29:hover .yc29, .yct30:hover .yc30, .yct31:hover .yc31, .yct32:hover .yc32{
  opacity: 1;}





.y1, .yc1{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y2, .yc2{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y3, .yc3{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y4, .yc4{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y5, .yc5{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y6, .yc6{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y7, .yc7{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y8, .yc8{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y9, .yc9{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y10, .yc10{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y11, .yc11{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y12, .yc12{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y13, .yc13{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y14, .yc14{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y15, .yc15{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y16, .yc16{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y17, .yc17{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y18, .yc18{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y19, .yc19{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y20, .yc20{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y21, .yc21{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y22, .yc22{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y23, .yc23{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y24, .yc24{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y25, .yc25{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y26, .yc26{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y27, .yc27{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y28, .yc28{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y29, .yc29{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y30, .yc30{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y31, .yc31{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y32, .yc32{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}
 .y1, .y2, .y3, .y4, .y5, .y6, .y7, .y8, .y9, .y10, .y11, .y12, .y13, .y14, .y15, .y16, .y17, .y18, .y19, .y20, .y21, .y22, .y23, .y24, .y25, .y26, .y27, .y28, .y29, .y30, .y31, .y32{
  z-index: 1;
 }






.fall{
background-color: #F5DE91;
  width: 30%;
  height: 48vw;
  position: relative;
  overflow: hidden;
}



.h1 {
    left: 5%;
    top: -20%;
    position: absolute;
    animation: fall1 4000ms linear infinite;
}

@keyframes fall1 {
    0%   { top: -20%; transform: rotate(0deg); }
    25%  { top: 10%;  transform: rotate(90deg); }
    50%  { top: 40%;  transform: rotate(180deg); }
    75%  { top: 70%;  transform: rotate(270deg); }
    100% { top: 110%; transform: rotate(360deg); }
}

.h2 {
    left: 15%;
    top: -30%;
     position: absolute;
    animation: fall2 4500ms linear infinite;
}

@keyframes fall2 {
    0%   { top: -30%; transform: rotate(0deg); }
    20%  { top: 0%;   transform: rotate(-80deg); }
    40%  { top: 30%;  transform: rotate(-160deg); }
    70%  { top: 70%;  transform: rotate(-260deg); }
    100% { top: 120%; transform: rotate(-360deg); }
}

.h3 {
    left: 25%;
    top: -10%;
     position: absolute;
    animation: fall3 3800ms linear infinite;
}

@keyframes fall3 {
    0%   { top: -10%; transform: rotate(0deg); }
    30%  { top: 20%;  transform: rotate(120deg); }
    60%  { top: 60%;  transform: rotate(240deg); }
    100% { top: 115%; transform: rotate(480deg); }
}

.h4 {
    left: 35%;
    top: -25%;
     position: absolute;
    animation: fall4 5000ms linear infinite;
}

@keyframes fall4 {
    0%   { top: -25%; transform: rotate(0deg); }
    15%  { top: 0%;   transform: rotate(-60deg); }
    40%  { top: 35%;  transform: rotate(-160deg); }
    75%  { top: 80%;  transform: rotate(-300deg); }
    100% { top: 130%; transform: rotate(-420deg); }
}


.h5 {
    left: 45%;
    top: -15%;
     position: absolute;
    animation: fall5 4200ms linear infinite;
}

@keyframes fall5 {
    0%   { top: -15%; transform: rotate(0deg); }
    25%  { top: 15%;  transform: rotate(100deg); }
    50%  { top: 50%;  transform: rotate(220deg); }
    75%  { top: 85%;  transform: rotate(340deg); }
    100% { top: 125%; transform: rotate(460deg); }
}

/* h6 */
.h6 {
    left: 55%;
    top: -35%;
     position: absolute;
    animation: fall6 4700ms linear infinite;
}

@keyframes fall6 {
    0%   { top: -35%; transform: rotate(0deg); }
    30%  { top: 5%;   transform: rotate(-110deg); }
    55%  { top: 45%;  transform: rotate(-230deg); }
    85%  { top: 95%;  transform: rotate(-350deg); }
    100% { top: 135%; transform: rotate(-430deg); }
}

/* h7 */
.h7 {
    left: 65%;
    top: -5%;
     position: absolute;
    animation: fall7 3600ms linear infinite;
}

@keyframes fall7 {
    0%   { top: -5%;  transform: rotate(0deg); }
    35%  { top: 25%;  transform: rotate(140deg); }
    65%  { top: 65%;  transform: rotate(280deg); }
    100% { top: 120%; transform: rotate(560deg); }
}

/* h8 */
.h8 {
    left: 75%;
    top: -20%;
     position: absolute;
    animation: fall8 5200ms linear infinite;
}

@keyframes fall8 {
    0%   { top: -20%; transform: rotate(0deg); }
    20%  { top: 5%;   transform: rotate(-90deg); }
    45%  { top: 40%;  transform: rotate(-200deg); }
    80%  { top: 90%;  transform: rotate(-340deg); }
    100% { top: 140%; transform: rotate(-480deg); }
}

/* h9 */
.h9 {
    left: 10%;
    top: -40%;
     position: absolute;
    animation: fall9 5500ms linear infinite;
}

@keyframes fall9 {
    0%   { top: -40%; transform: rotate(0deg); }
    25%  { top: -5%;  transform: rotate(120deg); }
    50%  { top: 35%;  transform: rotate(240deg); }
    75%  { top: 80%;  transform: rotate(360deg); }
    100% { top: 145%; transform: rotate(540deg); }
}

/* h10 */
.h10 {
    left: 30%;
    top: -30%;
     position: absolute;
    animation: fall10 4300ms linear infinite;
}

@keyframes fall10 {
    0%   { top: -30%; transform: rotate(0deg); }
    20%  { top: 0%;   transform: rotate(-100deg); }
    50%  { top: 45%;  transform: rotate(-220deg); }
    80%  { top: 95%;  transform: rotate(-340deg); }
    100% { top: 150%; transform: rotate(-460deg); }
}

/* h11 */
.h11 {
    left: 50%;
    top: -10%;
     position: absolute;
    animation: fall11 3900ms linear infinite;
}

@keyframes fall11 {
    0%   { top: -10%; transform: rotate(0deg); }
    30%  { top: 20%;  transform: rotate(130deg); }
    60%  { top: 60%;  transform: rotate(260deg); }
    100% { top: 135%; transform: rotate(520deg); }
}

/* h12 */
.h12 {
    left: 70%;
    top: -25%;
     position: absolute;
    animation: fall12 4800ms linear infinite;
}

@keyframes fall12 {
    0%   { top: -25%; transform: rotate(0deg); }
    25%  { top: 5%;   transform: rotate(-120deg); }
    55%  { top: 50%;  transform: rotate(-260deg); }
    85%  { top: 100%; transform: rotate(-380deg); }
    100% { top: 155%; transform: rotate(-520deg); }
}

/* h13 */
.h13 {
    left: 85%;
    top: -15%;
     position: absolute;
    animation: fall13 5100ms linear infinite;
}

@keyframes fall13 {
    0%   { top: -15%; transform: rotate(0deg); }
    20%  { top: 10%;  transform: rotate(150deg); }
    45%  { top: 45%;  transform: rotate(300deg); }
    75%  { top: 95%;  transform: rotate(480deg); }
    100% { top: 160%; transform: rotate(660deg); }
}

.h1, .h2, .h3, .h4, .h5, .h6, .h7, .h8, .h9, .h10, .h11, .h12, .h13{
  width: 20%;
}







.podval{

   position: relative;
    width: 100%;
    height: 12vw;
    top: 0;
    left: 0;
    word-wrap: nowrap;
    z-index: 1;
    overflow-x: hidden;
}

.pd{
  position: absolute;
    animation: text3 20s linear infinite;
}

@keyframes text3{
0%{ left: 0%; top: 0;}
100%{ left: -400%; top: 0;}
}

}





























@media screen and (min-width:  1366px) and (max-width: 1470px) {
/* маленькие ноуты */








body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow-x: hidden;
background-color: #FFF7E8;
position: relative;
}






.stroke{

    position: relative;
    width: 100%;
 height: 4vw;
    top: 0;
    left: 0;
    word-wrap: nowrap;
    z-index: 1;
    overflow-x: hidden;
}

.st{
  position: absolute;
     animation: text 6s linear infinite;
}

@keyframes text{
0%{ left: -100%; top: 0;}
100%{ left: 0%; top: 0;}

}

.bu1{

position: absolute;
margin-top: 16%;
margin-left: 5%;


}

.b1, .bc1 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
transform: scale(1);
  
}

.b1{
  opacity: 1;
  z-index: 1;
}

.bc1{
  opacity: 0;
  z-index: 1;
}
.bu1:hover .b1{
  opacity: 0;
}
.bu1:hover .bc1{
  opacity: 1;
}

 







.bu2{

position: absolute;
margin-left: 23%;
margin-top: 16%;

}

.b2, .bc2 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease; 
  transform: scale(1);
}

.b2{
  opacity: 1;
  z-index: 1;
}

.bc2{
  opacity: 0;
  z-index: 1;
}
.bu2:hover .b2{
  opacity: 0;
}
.bu2:hover .bc2{
  opacity: 1;
 
}









.bu3{

position: absolute;

margin-left: 43%;
margin-top: 16%;

}

.b3, .bc3 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease; 
  transform: scale(1);
}

.b3{
  opacity: 1;
  z-index: 1;
}

.bc3{
  opacity: 0;
  z-index: 1;
}
.bu3:hover .b3{
  opacity: 0;
}
.bu3:hover .bc3{
  opacity: 1;
}







.bu4{

position: absolute;

margin-left: 63%;
margin-top: 16%;

}

.b4, .bc4 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease; 
  transform: scale(1);
}

.b4{
  opacity: 1;
  z-index: 1;
}

.bc4{
  opacity: 0;
  z-index: 1;
}
.bu4:hover .b4{
  opacity: 0;
}
.bu4:hover .bc4{
  opacity: 1;
}





.bu5{

position: absolute;

margin-left: 82%;
margin-top: 16%;

}

.b5, .bc5 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease; 
  transform: scale(1);
}

.b5{
  opacity: 1;
  z-index: 1;
}

.bc5{
  opacity: 0;
  z-index: 1;
}
.bu5:hover .b5{
  opacity: 0;
}
.bu5:hover .bc5{
  opacity: 1;
}










.shtrih {
width: 532px;
height: 254px;
margin-left: 30%;
margin-top: -15%;
background: url("./img/shtrix.svg");
animation: flick 3s steps(1) infinite;
z-index: 1;

}

@keyframes flick{
 0%{ background-position: 0px top;}
 70%{ background-position: -532px top;}
 80%{ background-position: -1064px top;}
 90%{ background-position: -1596px top;}

}

.el1{
    margin-top: 7%;
    margin-left: 10%;
    animation: el1 6s linear infinite both;
    width: 20%;
    height: 17%;
    z-index: -1;

    
}

@keyframes el1 {
   0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
}

.el2{
    margin-top: -22%;
    margin-left: 67%;
    animation: el2 4s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
}

@keyframes el2 {
  0% {transform: rotateY(0);}
  100% {transform: rotateY(360deg); }
}

.el3{
    margin-top: 10%;
    margin-left: 10%;
    animation: el3 5s linear infinite both;
    width: 18%;
    height: 12%;
}

@keyframes el3 {
  0% {transform: scale(0.8) rotateY(0);}
  100% {transform: scale(0.8) rotateY(360deg);}
}

.el4{
    margin-top: -15%;
    margin-left: 72%;
    animation: el4 8s linear infinite both;
    width: 17%;
    height: 11%;
}

@keyframes el4 {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
}









.cont2{
  margin-top: 20vw;
flex-direction: row;
justify-content: center;
align-items: center;
}




.k6{
width: 20%;
height: 24vw;
background-color: #B44B47;
display: flex;
  justify-content: center;
  align-items: center;
position: absolute;
margin-left: 0%;
}


.b6, .bc6 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;

  
}

.b6{
  opacity: 1;
  z-index: 1;
  animation: bounce-top 1.5s infinite both;
}

@keyframes bounce-top {
  0% {transform: scale(1) translateY(-45px); animation-timing-function: ease-in; }
  24% {}
  40% {transform: scale(1) translateY(-24px); animation-timing-function: ease-in;}
  65% {transform: scale(1) translateY(-12px); animation-timing-function: ease-in;}
  82% {transform: scale(1) translateY(-6px); animation-timing-function: ease-in;}
  93% {transform: scale(1) translateY(-4px); animation-timing-function: ease-in;}
  25%,
  55%,
  75%,
  87% {transform: scale(1) translateY(0px); animation-timing-function: ease-out;}
  100% {transform: scale(1) translateY(0px);animation-timing-function: ease-out; }
}

.bc6{
  opacity: 0;
 transform: scale(1);
}
.k6:hover .b6{
  opacity: 0;
  animation-play-state: paused;
}
.k6:hover .bc6{
  opacity: 1;
}








.k7{

position: absolute; margin-left: 20%;
background-color: #F5DE91;
width: 20%;
height: 24vw;
display: flex;
  justify-content: center;
  align-items: center;
}

.b7, .bc7 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;

  
}
.b7img, .bc7img{
    transform: scale(1);
}

.b7{
  opacity: 1;
  z-index: 1;
  animation: rotate-center 1.5s ease-in-out infinite both;
}

@keyframes rotate-center {
  0% { transform: scale(1) rotate(0);}
  100% {transform: scale(1) rotate(360deg);}
}

.bc7{
  opacity: 0;
  z-index: 1;
}
.k7:hover .b7{
  opacity: 0;
  animation-play-state: paused;
}
.k7:hover .bc7{
  opacity: 1;
}






.k8{

position: absolute; margin-left: 40%;
background-color: #82A985;
width: 20%;
height: 24vw;
display: flex;
  justify-content: center;
  align-items: center;
}
.b8, .bc8 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;

  
}

.b8{
  opacity: 1;
  z-index: 1;
   animation: jello 1.5s infinite both;
}

@keyframes jello {
  0% {transform: scale(1) scale3d(1, 1, 1);}
  30% {transform: scale(1) scale3d(1.25, 0.75, 1);}
  40% {transform: scale(1) scale3d(0.75, 1.25, 1);}
  50% {transform: scale(1) scale3d(1.15, 0.85, 1);}
  65% {transform:  scale(1) scale3d(0.95, 1.05, 1);}
  75% {transform: scale(1) scale3d(1.05, 0.95, 1);}
  100% {transform: scale(1) scale3d(1, 1, 1);}
}

.bc8{
  opacity: 0;
  z-index: 1;
  transform: scale(1);
}
.k8:hover .b8{
  opacity: 0;
  animation-play-state: paused;
}
.k8:hover .bc8{
  opacity: 1;
}








.k9{

position: absolute; margin-left: 60%;
background-color: #B44B47;
width: 20%;
height: 24vw;
display: flex;
  justify-content: center;
  align-items: center;
}
.b9, .bc9 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;

  
}

.b9{
  opacity: 1;
  z-index: 1;
  animation: scale-down 1s linear infinite both;
}

@keyframes scale-down {
  0% {transform: scale(1) scale(1);}
  100% {transform: scale(1) scale(0.5); }
}


.bc9{
  opacity: 0;
  z-index: 1;
  transform: scale(1);
}
.k9:hover .b9{
  opacity: 0;
   animation-play-state: paused;
}
.k9:hover .bc9{
  opacity: 1;
}







.k10{

position: absolute; margin-left: 80%;
background-color: #2C3872;
width: 20%;
height: 24vw;
display: flex;
  justify-content: center;
  align-items: center;
}
.b10, .bc10 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;

  
}

.b10{
  opacity: 1;
  z-index: 1;
   animation: wobble 1.5s infinite both;
}

@keyframes wobble {
  0%,
  100% {transform: scale(1) translateX(0%); transform-origin: 50% 50%;}
  15% {transform: scale(1) translateX(-30px) rotate(-6deg);}
  30% {transform: scale(1) translateX(15px) rotate(6deg);}
  45% {transform: scale(1) translateX(-15px) rotate(-3.6deg);}
  60% {transform: scale(1) translateX(9px) rotate(2.4deg);}
  75% {transform: scale(1) translateX(-6px) rotate(-1.2deg);}
}

.bc10{
  opacity: 0;
  z-index: 1;
  transform: scale(1);
}
.k10:hover .b10{
  opacity: 0;
  animation-play-state: paused;
}
.k10:hover .bc10{
  opacity: 1;
}






.play{
 display: flex;
flex-direction: row;
justify-content: center;
align-items: center;

}


.div1{
 
background-color: #2C3872;
width: 40%;
height: 50vw;
margin-top: 23.9%;
display: flex;
  justify-content: center;
  align-items: center;
}

.div2{


  background-color: #F5DE91;
  width: 60%;
height: 50vw;
margin-top: 23.9%;
display: flex;
justify-content: initial;

 display: grid;
   
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    height: 50vw;
    width: 60%;
}

.e1 {
    grid-area: 1 / 1 / 2 / 2;
}

.e12 {
    grid-area: 3 / 3 / 4 / 4;
}







.e1, .ec1{
  margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
  width: 8%;
}
.e1{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }

    @keyframes rotate-center {
  0% {transform:  rotate(0);}
  100% {transform: rotate(360deg);}
  }

  .ec1{
  opacity: 0;
  z-index: 1;
  }

.eu1:hover .e1{
  opacity: 0;
  animation-play-state: paused;
}
.eu1:hover .ec1{
  opacity: 1;}







.e2, .ec2{
  margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
  width: 8%;
}
.e2{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec2{
  opacity: 0;
  z-index: 1;
 
}

.eu2:hover .e2{
  opacity: 0;
  animation-play-state: paused;
}
.eu2:hover .ec2{
  opacity: 1;}











.e3, .ec3{
 margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
  width: 8%;
}
.e3{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec3{
  opacity: 0;
  z-index: 1;
 
}
.eu3:hover .e3{
  opacity: 0;
  animation-play-state: paused;
}
.eu3:hover .ec3{
  opacity: 1;}












.e4, .ec4{
 margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
  width: 8%;
}
.e4{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec4{
  opacity: 0;
  z-index: 1;
 
}
.eu4:hover .e4{
  opacity: 0;
  animation-play-state: paused;
}
.eu4:hover .ec4{
  opacity: 1;}










.e5, .ec5{
  margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
  width: 8%;
}
.e5{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec5{
  opacity: 0;
  z-index: 1;

}
.eu5:hover .e5{
  opacity: 0;
  animation-play-state: paused;
}
.eu5:hover .ec5{
  opacity: 1;}









.e6, .ec6{
 margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
  width: 8%;
}
.e6{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec6{
  opacity: 0;
  z-index: 1;
  
}
.eu6:hover .e6{
  opacity: 0;
  animation-play-state: paused;
}
.eu6:hover .ec6{
  opacity: 1;}







.e7, .ec7{
 margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
  width: 8%;
}
.e7{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec7{
  opacity: 0;
  z-index: 1;
  
}
.eu7:hover .e7{
  opacity: 0;
  animation-play-state: paused;
}
.eu7:hover .ec7{
  opacity: 1;}






.e8, .ec8{
 margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
  width: 8%;
}
.e8{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec8{
  opacity: 0;
  z-index: 1;
  
}
.eu8:hover .e8{
  opacity: 0;
  animation-play-state: paused;
}
.eu8:hover .ec8{
  opacity: 1;}




.e9, .ec9{
 margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
  width: 8%;
}
.e9{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec9{
  opacity: 0;
  z-index: 1;
 
}
.eu9:hover .e9{
  opacity: 0;
  animation-play-state: paused;
}
.eu9:hover .ec9{
  opacity: 1;}






.e10, .ec10{
  
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
  width: 8%;
}
.e10{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec10{
  opacity: 0;
  z-index: 1;
 
}
.eu10:hover .e10{
  opacity: 0;
  animation-play-state: paused;
}
.eu10:hover .ec10{
  opacity: 1;}




.e11, .ec11{
 margin-top: 2%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
  width: 8%;
}
.e11{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec11{
  opacity: 0;
  z-index: 1;
  
}
.eu11:hover .e11{
  opacity: 0;
  animation-play-state: paused;
}
.eu11:hover .ec11{
  opacity: 1;}




.e12, .ec12{
 margin-top: 3%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
  width: 8%;
}
.e12{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec12{
  opacity: 0;
  z-index: 1;
 
}
.eu12:hover .e12{
  opacity: 0;
  animation-play-state: paused;
}
.eu12:hover .ec12{
  opacity: 1;}
























.korzina{
  margin-left: -10vw;
  animation: wobble-hor-bottom 3s linear infinite both;
  transform: scale(1.5);
  width: 80%;
}

@keyframes wobble-hor-bottom {
  0%,
  100% {transform: scale(1.5) translateX(0%); transform-origin: 50% 50%;}
  15% {transform: scale(1.5) translateX(-30px) rotate(-6deg);}
  30% {transform: scale(1.5) translateX(15px) rotate(6deg);}
  45% {transform: scale(1.5) translateX(-15px) rotate(-3.6deg);}
  60% {transform: scale(1.5) translateX(9px) rotate(2.4deg);}
  75% {transform: scale(1.5) translateX(-6px) rotate(-1.2deg);}
}

.vkorzine{
  width: 227px;
height: 100px;
margin-left:-23vw;
display: block;
position: relative;
background: url("./img/vkorzine.svg");
animation: walk1 1.5s steps(1) infinite;
}

@keyframes walk1{
    0%{ background-position: 0px top;}
    25%{ background-position: -227px top;}
    75% { background-position: -464px top;}
    100% { background-position: -701px top;}
}







.cont3{
width: 100%;
height: 45vw;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}

.bukvaU{
height: 60%;
width: 26%;
background-color: #FFF7E8;
background: url("./img/bukvaU.svg");
animation: walk2 1.5s steps(1) infinite;
}
@keyframes walk2{
    0%{ background-position: 0px top;}
    25%{ background-position: -370px top;}
    75% { background-position: -740px top;}
    100% { background-position: -1110px top;}
}

.bukvaA{
height: 60%;
width: 37.4%;
background-color: #B44B47;
 position: relative; 
  overflow: hidden;
}

.ba{
margin-top: 10%;
margin-left: 60%;
transform: scale(1.5);
  
  top: 0; 
  left: 50%;
  transform: translateX(-50%); 
  animation: fall 1s ease-in forwards infinite; 
}

@keyframes fall {
  0% {transform: scale(1.5) translateX(-50%) translateY(0); }
  100% {transform: scale(1.5) translateX(-50%) translateY(320px); }
}

.ba:hover{
   animation: rotate-scale-up 0.65s linear infinite both;
}

@keyframes rotate-scale-up {
  0% {transform: scale(1) rotateZ(0);}
  50% {transform: scale(2) rotateZ(180deg);}
  100% {transform: scale(1) rotateZ(360deg);}
}

.fa{
  
  margin-left: 42%;
  margin-top: 10%;
  width: 70%;
   animation: shake-br 2s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
}

@keyframes shake-br {
  0%,
  100% {transform: scale(1.5) rotate(0deg); transform-origin: 100% 100%;}
  10% {transform: scale(1.5) rotate(2deg);}
  20%,
  40%,
  60% {transform: scale(1.5) rotate(-4deg);}
  30%,
  50%,
  70% {transform: scale(1.5) rotate(4deg);}
  80% {transform: scale(1.5) rotate(-2deg);}
  90% {transform: scale(1.5) rotate(2deg);}
}

.bukvaI{
height: 100%;
width: 36.6%;
background-color: #221E1B;
z-index: 1;
}

.bi{
margin-top: 30%;
margin-left: 15%;
width: 80%;
  animation: wobble-hor-bottom 3s linear infinite both;
}



@keyframes wobble-hor-bottom {
  0%,
  100% {transform: translateX(0%); transform-origin: 50% 50%;}
  15% {transform: translateX(-30px) rotate(-6deg);}
  30% {transform: translateX(15px) rotate(6deg);}
  45% {transform: translateX(-15px) rotate(-3.6deg);}
  60% {transform: translateX(9px) rotate(2.4deg);}
  75% {transform: translateX(-6px) rotate(-1.2deg);}
}

.fi{
margin-left: 20%;
width: 80%;
animation: shake-br 2s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
}
@keyframes shake-br {
  0%,
  100% {transform: rotate(0deg); transform-origin: 100% 100%;}
  10% {transform: rotate(2deg);}
  20%,
  40%,
  60% {transform: rotate(-4deg);}
  30%,
  50%,
  70% {transform: rotate(4deg);}
  80% {transform: rotate(-2deg);}
  90% {transform: rotate(2deg);}
}

.shtrihi{
margin-top: -19.8%;
width: 63.4%;
height: 44%;
background-color: #2C3872;
overflow: hidden;
position: relative;
display: flex;
align-items: center;

}

.sh2{
position: absolute;
width: 500%;
animation: sh22 5s linear infinite alternate;
}

@keyframes sh22 {
  0% {transform: translateX(-50%);}
  100% {transform: translateX(0);}}



.cont4{
height: 36vw;
display: flex;
flex-direction: row;
}

.move{
width: 63.4%;
height: 36vw;
background-color: #82A985;
z-index: 1;
}

.bukvaB{
width: 36.6%;
height: 36vw;
background-color: #B44B47;

}

.bb{
  margin-top: 20%;
margin-left: 20%;
animation: wobble-ver-left 1.5s infinite both;
width: 50%;
transition: opacity 0.8s ease;
}

.bb:hover{
  opacity: 0;
}


@keyframes wobble-ver-left {
  0%,
  100% {transform: scale(1.5) translateY(0) rotate(0); transform-origin: 50% 50%;}
  15% {transform: scale(1.5) translateY(-30px) rotate(-6deg);}
  30% {transform: scale(1.5) translateY(15px) rotate(6deg);}
  45% {transform: scale(1.5) translateY(-15px) rotate(-3.6deg);}
  60% {transform: scale(1.5) translateY(9px) rotate(2.4deg);}
  75% {transform: scale(1.5) translateY(-6px) rotate(-1.2deg);}
}

.fb{
margin-left: -3%;
width: 70%;
animation: wobble-ver-left 1.5s infinite both;
}

@keyframes wobble-ver-left {
  0%,
  100% {transform: translateY(0) rotate(0);transform-origin: 50% 50%;}
  15% {transform: translateY(-30px) rotate(-6deg);}
  30% {transform: translateY(15px) rotate(6deg);}
  45% {transform: translateY(-15px) rotate(-3.6deg);}
  60% {transform: translateY(9px) rotate(2.4deg);}
  75% {transform: translateY(-6px) rotate(-1.2deg);}
}








.move{

  display: flex;
  flex-direction: row;
  
}

.item1, .item2, .item3, .item4, .item5, .item6 {
  background-color: #FFF7E8;
 
  width: 15%;
  height: 8%;

  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;

  
}



.item1{

  margin-top: 5%;
  margin-left: 5%;
  animation: move1 8s linear infinite alternate;
  transform: scale(1);
}
@keyframes move1 {
  0%   { left: 5%;  top: 10%; }
  25%  { left: 15%; top: 5%;  }
  50%  { left: 30%; top: 22%; }
  75%  { left: 12%; top: 30%; }
  100% { left: 5%;  top: 10%; }
}
.figc1:hover{
  opacity: 0;
}


.item2{

  margin-top: 5%;
  margin-left: 0%;
  animation: move2 11s linear infinite alternate;
  transform: scale(1);
}

@keyframes move2 {
  0%   { left: 40%; top: 5%;  }
  20%  { left: 60%; top: 8%;  }
  40%  { left: 55%; top: 30%; }
  70%  { left: 30%; top: 28%; }
  100% { left: 40%; top: 5%;  }
}

.figc2:hover{
  opacity: 0;
}

.item3{

  margin-top: 15%;
  margin-left: -50%;
  animation: move3 9s linear infinite alternate;
  transform: scale(1);
}

@keyframes move3 {
  0%   { left: 75%; top: 15%; }
  30%  { left: 70%; top: 35%; }
  60%  { left: 82%; top: 50%; }
  100% { left: 75%; top: 15%; }
}

.figc3:hover{
  opacity: 0;
}

.item4{

  margin-top: 5%;
  margin-left: 10%;
 animation: move4 10s linear infinite alternate;
 transform: scale(1);
}
@keyframes move4 {
  0%   { left: 40%; top: 40%; }
  25%  { left: 48%; top: 55%; }
  50%  { left: 35%; top: 65%; }
  75%  { left: 25%; top: 45%; }
  100% { left: 40%; top: 40%; }
}

.figc4:hover{
  opacity: 0;
}

.item5{

  margin-top: 0%;
  margin-left: -10%;
  animation: move5 7s linear infinite alternate;
  transform: scale(1);
  
}

@keyframes move5 {
  0%   { left: 8%;  top: 60%; }
  30%  { left: 20%; top: 72%; }
  60%  { left: 10%; top: 80%; }
  100% { left: 8%;  top: 60%; }
}

.figc5:hover{
  opacity: 0;
}

.item6{
 margin-top: 0%;
  margin-left: -60%;
 animation: move6 12s linear infinite alternate;
 transform: scale(1);
}

@keyframes move6 {
  0%   { left: 68%; top: 60%; }
  25%  { left: 55%; top: 70%; }
  50%  { left: 72%; top: 82%; }
  75%  { left: 80%; top: 62%; }
  100% { left: 68%; top: 60%; }
}

.figc6:hover{
  opacity: 0;
}

.fig1, .figc1{
position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.fig2, .figc2{
   position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.fig3, .figc3{
   position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.fig4, .figc4{
   position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.fig5, .figc5{
   position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.fig6, .figc6{
   position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}














.cont5{
height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
}






.alf{
background-color: #FFF7E8;
  width: 70%;
  height: 44vw;

   display: grid;
   
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(4, 1fr);
    width: 70%;
  height: 44vw;
  padding: 2%;
}
.y1{
  grid-area: 1 / 2 / 3 / 4 / 5 / 6 / 7 / 8;
}
.y32{
  grid-area: 25 / 26 / 27 / 28 / 29 / 30 / 31 / 32;
}




.y1, .y2, .y3, .y4, .y5, .y6, .y7, .y8, .y9, .y10, .y11, .y12, .y13, .y14, .y15, .y16, .y17, .y18, .y19, .y20, .y21, .y22, .y23, .y24, .y25, .y26, .y27, .y28, .y29, .y30, .y31, .y32{
  z-index: 1;
  opacity: 1;
  transform: scale(1);
  }

  .yc1, .yc2, .yc3, .yc4, .yc5, .yc6, .yc7, .yc8, .yc9, .yc10, .yc11, .yc12, .yc13, .yc14, .yc15, .yc16, .yc17, .yc18, .yc19, .yc20, .yc21, .yc22, .yc23, .yc24, .yc25, .yc26, .yc27, .yc28, .yc29, .yc30, .yc31, .yc32{

  opacity: 0;
  z-index: 1;
 transform: scale(1);
}
.yct1:hover .y1, .yct2:hover .y2, .yct3:hover .y3, .yct4:hover .y4, .yct5:hover .y5, .yct6:hover .y6, .yct7:hover .y7, .yct8:hover .y8, .yct9:hover .y9, .yct10:hover .y10, .yct11:hover .y11, .yct12:hover .y12, .yct13:hover .y13, .yct14:hover .y14, .yct15:hover .y15, .yct16:hover .y16, .yct17:hover .y17, .yct18:hover .y18, .yct19:hover .y19,  .yct20:hover .y20,  .yct21:hover .y21, .yct22:hover .y22,  .yct23:hover .y23, .yct24:hover .y24, .yct25:hover .y25, .yct26:hover .y26, .yct27:hover .y27, .yct28:hover .y28, .yct29:hover .y29, .yct30:hover .y30, .yct31:hover .y31, .yct32:hover .y32 {
  opacity: 0; 
}
.yct1:hover .yc1, .yct2:hover .yc2, .yct3:hover .yc3, .yct4:hover .yc4, .yct5:hover .yc5, .yct6:hover .yc6, .yct7:hover .yc7, .yct8:hover .yc8, .yct9:hover .yc9, .yct10:hover .yc10, .yct11:hover .yc11, .yct12:hover .yc12, .yct13:hover .yc13, .yct14:hover .yc14, .yct15:hover .yc15, .yct16:hover .yc16, .yct17:hover .yc17, .yct18:hover .yc18, .yct19:hover .yc19,  .yct20:hover .yc20,  .yct21:hover .yc21, .yct22:hover .yc22,  .yct23:hover .yc23, .yct24:hover .yc24, .yct25:hover .yc25, .yct26:hover .yc26, .yct27:hover .yc27, .yct28:hover .yc28, .yct29:hover .yc29, .yct30:hover .yc30, .yct31:hover .yc31, .yct32:hover .yc32{
  opacity: 1;}





.y1, .yc1{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y2, .yc2{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y3, .yc3{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y4, .yc4{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y5, .yc5{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y6, .yc6{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y7, .yc7{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y8, .yc8{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y9, .yc9{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y10, .yc10{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y11, .yc11{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y12, .yc12{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y13, .yc13{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y14, .yc14{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y15, .yc15{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y16, .yc16{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y17, .yc17{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y18, .yc18{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y19, .yc19{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y20, .yc20{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y21, .yc21{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y22, .yc22{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y23, .yc23{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y24, .yc24{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y25, .yc25{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y26, .yc26{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y27, .yc27{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y28, .yc28{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y29, .yc29{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y30, .yc30{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y31, .yc31{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y32, .yc32{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}
 .y1, .y2, .y3, .y4, .y5, .y6, .y7, .y8, .y9, .y10, .y11, .y12, .y13, .y14, .y15, .y16, .y17, .y18, .y19, .y20, .y21, .y22, .y23, .y24, .y25, .y26, .y27, .y28, .y29, .y30, .y31, .y32{
  z-index: 1;
 }






.fall{
background-color: #F5DE91;
  width: 30%;
  height: 48vw;
  position: relative;
  overflow: hidden;
}



.h1 {
    left: 5%;
    top: -20%;
    position: absolute;
    animation: fall1 4000ms linear infinite;
}

@keyframes fall1 {
    0%   { top: -20%; transform: rotate(0deg); }
    25%  { top: 10%;  transform: rotate(90deg); }
    50%  { top: 40%;  transform: rotate(180deg); }
    75%  { top: 70%;  transform: rotate(270deg); }
    100% { top: 110%; transform: rotate(360deg); }
}

.h2 {
    left: 15%;
    top: -30%;
     position: absolute;
    animation: fall2 4500ms linear infinite;
}

@keyframes fall2 {
    0%   { top: -30%; transform: rotate(0deg); }
    20%  { top: 0%;   transform: rotate(-80deg); }
    40%  { top: 30%;  transform: rotate(-160deg); }
    70%  { top: 70%;  transform: rotate(-260deg); }
    100% { top: 120%; transform: rotate(-360deg); }
}

.h3 {
    left: 25%;
    top: -10%;
     position: absolute;
    animation: fall3 3800ms linear infinite;
}

@keyframes fall3 {
    0%   { top: -10%; transform: rotate(0deg); }
    30%  { top: 20%;  transform: rotate(120deg); }
    60%  { top: 60%;  transform: rotate(240deg); }
    100% { top: 115%; transform: rotate(480deg); }
}

.h4 {
    left: 35%;
    top: -25%;
     position: absolute;
    animation: fall4 5000ms linear infinite;
}

@keyframes fall4 {
    0%   { top: -25%; transform: rotate(0deg); }
    15%  { top: 0%;   transform: rotate(-60deg); }
    40%  { top: 35%;  transform: rotate(-160deg); }
    75%  { top: 80%;  transform: rotate(-300deg); }
    100% { top: 130%; transform: rotate(-420deg); }
}


.h5 {
    left: 45%;
    top: -15%;
     position: absolute;
    animation: fall5 4200ms linear infinite;
}

@keyframes fall5 {
    0%   { top: -15%; transform: rotate(0deg); }
    25%  { top: 15%;  transform: rotate(100deg); }
    50%  { top: 50%;  transform: rotate(220deg); }
    75%  { top: 85%;  transform: rotate(340deg); }
    100% { top: 125%; transform: rotate(460deg); }
}

/* h6 */
.h6 {
    left: 55%;
    top: -35%;
     position: absolute;
    animation: fall6 4700ms linear infinite;
}

@keyframes fall6 {
    0%   { top: -35%; transform: rotate(0deg); }
    30%  { top: 5%;   transform: rotate(-110deg); }
    55%  { top: 45%;  transform: rotate(-230deg); }
    85%  { top: 95%;  transform: rotate(-350deg); }
    100% { top: 135%; transform: rotate(-430deg); }
}

/* h7 */
.h7 {
    left: 65%;
    top: -5%;
     position: absolute;
    animation: fall7 3600ms linear infinite;
}

@keyframes fall7 {
    0%   { top: -5%;  transform: rotate(0deg); }
    35%  { top: 25%;  transform: rotate(140deg); }
    65%  { top: 65%;  transform: rotate(280deg); }
    100% { top: 120%; transform: rotate(560deg); }
}

/* h8 */
.h8 {
    left: 75%;
    top: -20%;
     position: absolute;
    animation: fall8 5200ms linear infinite;
}

@keyframes fall8 {
    0%   { top: -20%; transform: rotate(0deg); }
    20%  { top: 5%;   transform: rotate(-90deg); }
    45%  { top: 40%;  transform: rotate(-200deg); }
    80%  { top: 90%;  transform: rotate(-340deg); }
    100% { top: 140%; transform: rotate(-480deg); }
}

/* h9 */
.h9 {
    left: 10%;
    top: -40%;
     position: absolute;
    animation: fall9 5500ms linear infinite;
}

@keyframes fall9 {
    0%   { top: -40%; transform: rotate(0deg); }
    25%  { top: -5%;  transform: rotate(120deg); }
    50%  { top: 35%;  transform: rotate(240deg); }
    75%  { top: 80%;  transform: rotate(360deg); }
    100% { top: 145%; transform: rotate(540deg); }
}

/* h10 */
.h10 {
    left: 30%;
    top: -30%;
     position: absolute;
    animation: fall10 4300ms linear infinite;
}

@keyframes fall10 {
    0%   { top: -30%; transform: rotate(0deg); }
    20%  { top: 0%;   transform: rotate(-100deg); }
    50%  { top: 45%;  transform: rotate(-220deg); }
    80%  { top: 95%;  transform: rotate(-340deg); }
    100% { top: 150%; transform: rotate(-460deg); }
}

/* h11 */
.h11 {
    left: 50%;
    top: -10%;
     position: absolute;
    animation: fall11 3900ms linear infinite;
}

@keyframes fall11 {
    0%   { top: -10%; transform: rotate(0deg); }
    30%  { top: 20%;  transform: rotate(130deg); }
    60%  { top: 60%;  transform: rotate(260deg); }
    100% { top: 135%; transform: rotate(520deg); }
}

/* h12 */
.h12 {
    left: 70%;
    top: -25%;
     position: absolute;
    animation: fall12 4800ms linear infinite;
}

@keyframes fall12 {
    0%   { top: -25%; transform: rotate(0deg); }
    25%  { top: 5%;   transform: rotate(-120deg); }
    55%  { top: 50%;  transform: rotate(-260deg); }
    85%  { top: 100%; transform: rotate(-380deg); }
    100% { top: 155%; transform: rotate(-520deg); }
}

/* h13 */
.h13 {
    left: 85%;
    top: -15%;
     position: absolute;
    animation: fall13 5100ms linear infinite;
}

@keyframes fall13 {
    0%   { top: -15%; transform: rotate(0deg); }
    20%  { top: 10%;  transform: rotate(150deg); }
    45%  { top: 45%;  transform: rotate(300deg); }
    75%  { top: 95%;  transform: rotate(480deg); }
    100% { top: 160%; transform: rotate(660deg); }
}

.h1, .h2, .h3, .h4, .h5, .h6, .h7, .h8, .h9, .h10, .h11, .h12, .h13{
  width: 20%;
}







.podval{

   position: relative;
    width: 100%;
    height: 15vw;
    top: 0;
    left: 0;
    word-wrap: nowrap;
    z-index: 1;
    overflow-x: hidden;
}

.pd{
  position: absolute;
    animation: text3 20s linear infinite;
}

@keyframes text3{
0%{ left: 0%; top: 0;}
100%{ left: -400%; top: 0;}
}



}
























@media screen and (min-width: 769px) and (max-width:  1366px) {

body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow-x: hidden;
background-color: #FFF7E8;
position: relative;
}






.stroke{

    position: relative;
    width: 100%;
 height: 5vw;
    top: 0;
    left: 0;
    word-wrap: nowrap;
    z-index: 1;
    overflow-x: hidden;
}

.st{
  position: absolute;
     animation: text 6s linear infinite;
}

@keyframes text{
0%{ left: -100%; top: 0;}
100%{ left: 0%; top: 0;}

}

.bu1{

position: absolute;
margin-top: 14%;
margin-left: 5%;


}

.b1, .bc1 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
transform: scale(0.9);
  
}

.b1{
  opacity: 1;
  z-index: 1;
}

.bc1{
  opacity: 0;
  z-index: 1;
}
.bu1:hover .b1{
  opacity: 0;
}
.bu1:hover .bc1{
  opacity: 1;
}

 







.bu2{

position: absolute;
margin-left: 23%;
margin-top: 14%;

}

.b2, .bc2 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease; 
  transform: scale(0.9);
}

.b2{
  opacity: 1;
  z-index: 1;
}

.bc2{
  opacity: 0;
  z-index: 1;
}
.bu2:hover .b2{
  opacity: 0;
}
.bu2:hover .bc2{
  opacity: 1;
 
}









.bu3{

position: absolute;

margin-left: 42%;
margin-top: 14%;

}

.b3, .bc3 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease; 
  transform: scale(0.9);
}

.b3{
  opacity: 1;
  z-index: 1;
}

.bc3{
  opacity: 0;
  z-index: 1;
}
.bu3:hover .b3{
  opacity: 0;
}
.bu3:hover .bc3{
  opacity: 1;
}







.bu4{

position: absolute;

margin-left: 60%;
margin-top: 14%;

}

.b4, .bc4 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease; 
  transform: scale(0.9);
}

.b4{
  opacity: 1;
  z-index: 1;
}

.bc4{
  opacity: 0;
  z-index: 1;
}
.bu4:hover .b4{
  opacity: 0;
}
.bu4:hover .bc4{
  opacity: 1;
}





.bu5{

position: absolute;

margin-left: 77%;
margin-top: 14%;

}

.b5, .bc5 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease; 
  transform: scale(0.9);
}

.b5{
  opacity: 1;
  z-index: 1;
}

.bc5{
  opacity: 0;
  z-index: 1;
}
.bu5:hover .b5{
  opacity: 0;
}
.bu5:hover .bc5{
  opacity: 1;
}










.shtrih {
width: 532px;
height: 254px;
margin-left: 30%;
margin-top: -26%;
background: url("./img/shtrix.svg");
animation: flick 3s steps(1) infinite;
z-index: 1;

}

@keyframes flick{
 0%{ background-position: 0px top;}
 70%{ background-position: -532px top;}
 80%{ background-position: -1064px top;}
 90%{ background-position: -1596px top;}

}

.el1{
    margin-top: 7%;
    margin-left: 10%;
    animation: el1 6s linear infinite both;
    width: 20%;
    height: 17%;
    z-index: -1;

    
}

@keyframes el1 {
   0% {transform: scale(0.7) rotate(0);}
  100% {transform: scale(0.7) rotate(360deg);}
}

.el2{
    margin-top: -22%;
    margin-left: 67%;
    animation: el2 4s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
}

@keyframes el2 {
  0% {transform: scale(0.7) rotateY(0);}
  100% {transform: scale(0.7) rotateY(360deg); }
}

.el3{
    margin-top: 10%;
    margin-left: 10%;
    animation: el3 5s linear infinite both;
    width: 18%;
    height: 12%;
}

@keyframes el3 {
  0% {transform: scale(0.7) rotateY(0);}
  100% {transform: scale(0.7) rotateY(360deg);}
}

.el4{
    margin-top: -15%;
    margin-left: 72%;
    animation: el4 8s linear infinite both;
    width: 17%;
    height: 11%;
}

@keyframes el4 {
  0% {transform: scale(0.7) rotate(0);}
  100% {transform: scale(0.7) rotate(360deg);}
}









.cont2{
  margin-top: 10vw;
flex-direction: row;
justify-content: center;
align-items: center;
}




.k6{
width: 20%;
height: 24vw;
background-color: #B44B47;
display: flex;
  justify-content: center;
  align-items: center;
position: absolute;
margin-left: 0%;
}


.b6, .bc6 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;

  
}

.b6{
  opacity: 1;
  z-index: 1;
  animation: bounce-top 1.5s infinite both;
}

@keyframes bounce-top {
  0% {transform: scale(1) translateY(-45px); animation-timing-function: ease-in; }
  24% {}
  40% {transform: scale(1) translateY(-24px); animation-timing-function: ease-in;}
  65% {transform: scale(1) translateY(-12px); animation-timing-function: ease-in;}
  82% {transform: scale(1) translateY(-6px); animation-timing-function: ease-in;}
  93% {transform: scale(1) translateY(-4px); animation-timing-function: ease-in;}
  25%,
  55%,
  75%,
  87% {transform: scale(1) translateY(0px); animation-timing-function: ease-out;}
  100% {transform: scale(1) translateY(0px);animation-timing-function: ease-out; }
}

.bc6{
  opacity: 0;
 transform: scale(1);
}
.k6:hover .b6{
  opacity: 0;
  animation-play-state: paused;
}
.k6:hover .bc6{
  opacity: 1;
}








.k7{

position: absolute; margin-left: 20%;
background-color: #F5DE91;
width: 20%;
height: 24vw;
display: flex;
  justify-content: center;
  align-items: center;
}

.b7, .bc7 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;

  
}
.b7img, .bc7img{
    transform: scale(1);
}

.b7{
  opacity: 1;
  z-index: 1;
  animation: rotate-center 1.5s ease-in-out infinite both;
}

@keyframes rotate-center {
  0% { transform: scale(1) rotate(0);}
  100% {transform: scale(1) rotate(360deg);}
}

.bc7{
  opacity: 0;
  z-index: 1;
}
.k7:hover .b7{
  opacity: 0;
  animation-play-state: paused;
}
.k7:hover .bc7{
  opacity: 1;
}






.k8{

position: absolute; margin-left: 40%;
background-color: #82A985;
width: 20%;
height: 24vw;
display: flex;
  justify-content: center;
  align-items: center;
}
.b8, .bc8 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;

  
}

.b8{
  opacity: 1;
  z-index: 1;
   animation: jello 1.5s infinite both;
}

@keyframes jello {
  0% {transform: scale(1) scale3d(1, 1, 1);}
  30% {transform: scale(1) scale3d(1.25, 0.75, 1);}
  40% {transform: scale(1) scale3d(0.75, 1.25, 1);}
  50% {transform: scale(1) scale3d(1.15, 0.85, 1);}
  65% {transform:  scale(1) scale3d(0.95, 1.05, 1);}
  75% {transform: scale(1) scale3d(1.05, 0.95, 1);}
  100% {transform: scale(1) scale3d(1, 1, 1);}
}

.bc8{
  opacity: 0;
  z-index: 1;
  transform: scale(1);
}
.k8:hover .b8{
  opacity: 0;
  animation-play-state: paused;
}
.k8:hover .bc8{
  opacity: 1;
}








.k9{

position: absolute; margin-left: 60%;
background-color: #B44B47;
width: 20%;
height: 24vw;
display: flex;
  justify-content: center;
  align-items: center;
}
.b9, .bc9 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;

  
}

.b9{
  opacity: 1;
  z-index: 1;
  animation: scale-down 1s linear infinite both;
}

@keyframes scale-down {
  0% {transform: scale(1) scale(1);}
  100% {transform: scale(1) scale(0.5); }
}


.bc9{
  opacity: 0;
  z-index: 1;
  transform: scale(1);
}
.k9:hover .b9{
  opacity: 0;
   animation-play-state: paused;
}
.k9:hover .bc9{
  opacity: 1;
}







.k10{

position: absolute; margin-left: 80%;
background-color: #2C3872;
width: 20%;
height: 24vw;
display: flex;
  justify-content: center;
  align-items: center;
}
.b10, .bc10 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;

  
}

.b10{
  opacity: 1;
  z-index: 1;
   animation: wobble 1.5s infinite both;
}

@keyframes wobble {
  0%,
  100% {transform: scale(1) translateX(0%); transform-origin: 50% 50%;}
  15% {transform: scale(1) translateX(-30px) rotate(-6deg);}
  30% {transform: scale(1) translateX(15px) rotate(6deg);}
  45% {transform: scale(1) translateX(-15px) rotate(-3.6deg);}
  60% {transform: scale(1) translateX(9px) rotate(2.4deg);}
  75% {transform: scale(1) translateX(-6px) rotate(-1.2deg);}
}

.bc10{
  opacity: 0;
  z-index: 1;
  transform: scale(1);
}
.k10:hover .b10{
  opacity: 0;
  animation-play-state: paused;
}
.k10:hover .bc10{
  opacity: 1;
}






.play{
 display: flex;
flex-direction: row;
justify-content: center;
align-items: center;

}


.div1{
 
background-color: #2C3872;
width: 40%;
height: 50vw;
margin-top: 23.9%;
display: flex;
  justify-content: center;
  align-items: center;
}

.div2{


  background-color: #F5DE91;
  width: 60%;
height: 50vw;
margin-top: 23.9%;
display: flex;
justify-content: initial;

 display: grid;
   
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    height: 50vw;
    width: 60%;
}

.e1 {
    grid-area: 1 / 1 / 2 / 2;
}

.e12 {
    grid-area: 3 / 3 / 4 / 4;
}







.e1, .ec1{
  margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
  width: 8%;
}
.e1{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }

    @keyframes rotate-center {
  0% {transform:  rotate(0);}
  100% {transform: rotate(360deg);}
  }

  .ec1{
  opacity: 0;
  z-index: 1;
  }

.eu1:hover .e1{
  opacity: 0;
  animation-play-state: paused;
}
.eu1:hover .ec1{
  opacity: 1;}







.e2, .ec2{
  margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
  width: 8%;
}
.e2{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec2{
  opacity: 0;
  z-index: 1;
 
}

.eu2:hover .e2{
  opacity: 0;
  animation-play-state: paused;
}
.eu2:hover .ec2{
  opacity: 1;}











.e3, .ec3{
 margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
  width: 8%;
}
.e3{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec3{
  opacity: 0;
  z-index: 1;
 
}
.eu3:hover .e3{
  opacity: 0;
  animation-play-state: paused;
}
.eu3:hover .ec3{
  opacity: 1;}












.e4, .ec4{
 margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
  width: 8%;
}
.e4{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec4{
  opacity: 0;
  z-index: 1;
 
}
.eu4:hover .e4{
  opacity: 0;
  animation-play-state: paused;
}
.eu4:hover .ec4{
  opacity: 1;}










.e5, .ec5{
  margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
  width: 8%;
}
.e5{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec5{
  opacity: 0;
  z-index: 1;

}
.eu5:hover .e5{
  opacity: 0;
  animation-play-state: paused;
}
.eu5:hover .ec5{
  opacity: 1;}









.e6, .ec6{
 margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
  width: 8%;
}
.e6{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec6{
  opacity: 0;
  z-index: 1;
  
}
.eu6:hover .e6{
  opacity: 0;
  animation-play-state: paused;
}
.eu6:hover .ec6{
  opacity: 1;}







.e7, .ec7{
 margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
  width: 8%;
}
.e7{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec7{
  opacity: 0;
  z-index: 1;
  
}
.eu7:hover .e7{
  opacity: 0;
  animation-play-state: paused;
}
.eu7:hover .ec7{
  opacity: 1;}






.e8, .ec8{
 margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
  width: 8%;
}
.e8{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec8{
  opacity: 0;
  z-index: 1;
  
}
.eu8:hover .e8{
  opacity: 0;
  animation-play-state: paused;
}
.eu8:hover .ec8{
  opacity: 1;}




.e9, .ec9{
 margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
  width: 8%;
}
.e9{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec9{
  opacity: 0;
  z-index: 1;
 
}
.eu9:hover .e9{
  opacity: 0;
  animation-play-state: paused;
}
.eu9:hover .ec9{
  opacity: 1;}






.e10, .ec10{
  
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
  width: 8%;
}
.e10{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec10{
  opacity: 0;
  z-index: 1;
 
}
.eu10:hover .e10{
  opacity: 0;
  animation-play-state: paused;
}
.eu10:hover .ec10{
  opacity: 1;}




.e11, .ec11{
 margin-top: 2%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
  width: 8%;
}
.e11{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec11{
  opacity: 0;
  z-index: 1;
  
}
.eu11:hover .e11{
  opacity: 0;
  animation-play-state: paused;
}
.eu11:hover .ec11{
  opacity: 1;}




.e12, .ec12{
 margin-top: 3%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
  width: 8%;
}
.e12{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec12{
  opacity: 0;
  z-index: 1;
 
}
.eu12:hover .e12{
  opacity: 0;
  animation-play-state: paused;
}
.eu12:hover .ec12{
  opacity: 1;}
























.korzina{
  margin-left: -10vw;
  animation: wobble-hor-bottom 3s linear infinite both;
  transform: scale(1.5);
  width: 80%;
}

@keyframes wobble-hor-bottom {
  0%,
  100% {transform: scale(1.5) translateX(0%); transform-origin: 50% 50%;}
  15% {transform: scale(1.5) translateX(-30px) rotate(-6deg);}
  30% {transform: scale(1.5) translateX(15px) rotate(6deg);}
  45% {transform: scale(1.5) translateX(-15px) rotate(-3.6deg);}
  60% {transform: scale(1.5) translateX(9px) rotate(2.4deg);}
  75% {transform: scale(1.5) translateX(-6px) rotate(-1.2deg);}
}

.vkorzine{
  width: 227px;
height: 100px;
margin-left:-23vw;
display: block;
position: relative;
background: url("./img/vkorzine.svg");
animation: walk1 1.5s steps(1) infinite;
}

@keyframes walk1{
    0%{ background-position: 0px top;}
    25%{ background-position: -227px top;}
    75% { background-position: -464px top;}
    100% { background-position: -701px top;}
}







.cont3{
width: 100%;
height: 45vw;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}

.bukvaU{
height: 60%;
width: 26%;
background-color: #FFF7E8;
background: url("./img/bukvaU.svg");
animation: walk2 1.5s steps(1) infinite;
}
@keyframes walk2{
    0%{ background-position: 0px top;}
    25%{ background-position: -370px top;}
    75% { background-position: -740px top;}
    100% { background-position: -1110px top;}
}

.bukvaA{
height: 60%;
width: 37.4%;
background-color: #B44B47;
 position: relative; 
  overflow: hidden;
}

.ba{
margin-top: 5%;
margin-left: 60%;
  top: 0; 
  left: 50%;
  transform: translateX(-50%); 
  animation: fall 1s ease-in forwards infinite; 
}

@keyframes fall {
  0% {transform: scale(1.1) translateX(-50%) translateY(0); }
  100% {transform: scale(1.1) translateX(-50%) translateY(320px); }
}

.ba:hover{
   animation: rotate-scale-up 0.65s linear infinite both;
}

@keyframes rotate-scale-up {
  0% {transform: scale(1) rotateZ(0);}
  50% {transform: scale(2) rotateZ(180deg);}
  100% {transform: scale(1) rotateZ(360deg);}
}

.fa{
  
  margin-left: 42%;
  margin-top: 10%;
  width: 70%;
   animation: shake-br 2s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
}

@keyframes shake-br {
  0%,
  100% {transform: scale(1) rotate(0deg); transform-origin: 100% 100%;}
  10% {transform: scale(1) rotate(2deg);}
  20%,
  40%,
  60% {transform: scale(1) rotate(-4deg);}
  30%,
  50%,
  70% {transform: scale(1) rotate(4deg);}
  80% {transform: scale(1) rotate(-2deg);}
  90% {transform: scale(1) rotate(2deg);}
}

.bukvaI{
height: 100%;
width: 36.6%;
background-color: #221E1B;
z-index: 1;
}

.bi{
margin-top: 30%;
margin-left: 15%;
width: 70%;
  animation: wobble-hor-bottom 3s linear infinite both;
}



@keyframes wobble-hor-bottom {
  0%,
  100% {transform: translateX(0%); transform-origin: 50% 50%;}
  15% {transform: translateX(-30px) rotate(-6deg);}
  30% {transform: translateX(15px) rotate(6deg);}
  45% {transform: translateX(-15px) rotate(-3.6deg);}
  60% {transform: translateX(9px) rotate(2.4deg);}
  75% {transform: translateX(-6px) rotate(-1.2deg);}
}

.fi{
margin-left: 20%;
width: 80%;
animation: shake-br 2s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
}
@keyframes shake-br {
  0%,
  100% {transform: rotate(0deg); transform-origin: 100% 100%;}
  10% {transform: rotate(2deg);}
  20%,
  40%,
  60% {transform: rotate(-4deg);}
  30%,
  50%,
  70% {transform: rotate(4deg);}
  80% {transform: rotate(-2deg);}
  90% {transform: rotate(2deg);}
}

.shtrihi{
margin-top: -19.8%;
width: 63.4%;
height: 44%;
background-color: #2C3872;
overflow: hidden;
position: relative;
display: flex;
align-items: center;

}

.sh2{
position: absolute;
width: 500%;
animation: sh22 5s linear infinite alternate;
}

@keyframes sh22 {
  0% {transform: translateX(-50%);}
  100% {transform: translateX(0);}}



.cont4{
height: 36vw;
display: flex;
flex-direction: row;
}

.move{
width: 63.4%;
height: 36vw;
background-color: #82A985;
z-index: 1;
}

.bukvaB{
width: 36.6%;
height: 36vw;
background-color: #B44B47;

}

.bb{
  margin-top: 20%;
margin-left: 20%;
animation: wobble-ver-left 1.5s infinite both;
width: 50%;
transition: opacity 0.8s ease;
}

.bb:hover{
  opacity: 0;
}


@keyframes wobble-ver-left {
  0%,
  100% {transform: scale(1.5) translateY(0) rotate(0); transform-origin: 50% 50%;}
  15% {transform: scale(1.5) translateY(-30px) rotate(-6deg);}
  30% {transform: scale(1.5) translateY(15px) rotate(6deg);}
  45% {transform: scale(1.5) translateY(-15px) rotate(-3.6deg);}
  60% {transform: scale(1.5) translateY(9px) rotate(2.4deg);}
  75% {transform: scale(1.5) translateY(-6px) rotate(-1.2deg);}
}

.fb{
margin-left: -3%;
width: 70%;
animation: wobble-ver-left 1.5s infinite both;
}

@keyframes wobble-ver-left {
  0%,
  100% {transform: translateY(0) rotate(0);transform-origin: 50% 50%;}
  15% {transform: translateY(-30px) rotate(-6deg);}
  30% {transform: translateY(15px) rotate(6deg);}
  45% {transform: translateY(-15px) rotate(-3.6deg);}
  60% {transform: translateY(9px) rotate(2.4deg);}
  75% {transform: translateY(-6px) rotate(-1.2deg);}
}








.move{

  display: flex;
  flex-direction: row;
  
}

.item1, .item2, .item3, .item4, .item5, .item6 {
  background-color: #FFF7E8;
 
  width: 15%;
  height: 8%;

  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;

  
}



.item1{

  margin-top: 5%;
  margin-left: 5%;
  animation: move1 8s linear infinite alternate;
  transform: scale(1);
}
@keyframes move1 {
  0%   { left: 5%;  top: 10%; }
  25%  { left: 15%; top: 5%;  }
  50%  { left: 30%; top: 22%; }
  75%  { left: 12%; top: 30%; }
  100% { left: 5%;  top: 10%; }
}
.figc1:hover{
  opacity: 0;
}


.item2{

  margin-top: 5%;
  margin-left: 0%;
  animation: move2 11s linear infinite alternate;
  transform: scale(1);
}

@keyframes move2 {
  0%   { left: 40%; top: 5%;  }
  20%  { left: 60%; top: 8%;  }
  40%  { left: 55%; top: 30%; }
  70%  { left: 30%; top: 28%; }
  100% { left: 40%; top: 5%;  }
}

.figc2:hover{
  opacity: 0;
}

.item3{

  margin-top: 15%;
  margin-left: -50%;
  animation: move3 9s linear infinite alternate;
  transform: scale(1);
}

@keyframes move3 {
  0%   { left: 75%; top: 15%; }
  30%  { left: 70%; top: 35%; }
  60%  { left: 82%; top: 50%; }
  100% { left: 75%; top: 15%; }
}

.figc3:hover{
  opacity: 0;
}

.item4{

  margin-top: 5%;
  margin-left: 10%;
 animation: move4 10s linear infinite alternate;
 transform: scale(1);
}
@keyframes move4 {
  0%   { left: 40%; top: 40%; }
  25%  { left: 48%; top: 55%; }
  50%  { left: 35%; top: 65%; }
  75%  { left: 25%; top: 45%; }
  100% { left: 40%; top: 40%; }
}

.figc4:hover{
  opacity: 0;
}

.item5{

  margin-top: 0%;
  margin-left: -10%;
  animation: move5 7s linear infinite alternate;
  transform: scale(1);
  
}

@keyframes move5 {
  0%   { left: 8%;  top: 60%; }
  30%  { left: 20%; top: 72%; }
  60%  { left: 10%; top: 80%; }
  100% { left: 8%;  top: 60%; }
}

.figc5:hover{
  opacity: 0;
}

.item6{
 margin-top: 0%;
  margin-left: -60%;
 animation: move6 12s linear infinite alternate;
 transform: scale(1);
}

@keyframes move6 {
  0%   { left: 68%; top: 60%; }
  25%  { left: 55%; top: 70%; }
  50%  { left: 72%; top: 82%; }
  75%  { left: 80%; top: 62%; }
  100% { left: 68%; top: 60%; }
}

.figc6:hover{
  opacity: 0;
}

.fig1, .figc1{
position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.fig2, .figc2{
   position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.fig3, .figc3{
   position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.fig4, .figc4{
   position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.fig5, .figc5{
   position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.fig6, .figc6{
   position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}














.cont5{
height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
}






.alf{
background-color: #FFF7E8;
  width: 70%;
  height: 44vw;

   display: grid;
   
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(4, 1fr);
    width: 70%;
  height: 44vw;
  padding: 2%;
}
.y1{
  grid-area: 1 / 2 / 3 / 4 / 5 / 6 / 7 / 8;
}
.y32{
  grid-area: 25 / 26 / 27 / 28 / 29 / 30 / 31 / 32;
}




.y1, .y2, .y3, .y4, .y5, .y6, .y7, .y8, .y9, .y10, .y11, .y12, .y13, .y14, .y15, .y16, .y17, .y18, .y19, .y20, .y21, .y22, .y23, .y24, .y25, .y26, .y27, .y28, .y29, .y30, .y31, .y32{
  z-index: 1;
  opacity: 1;
  transform: scale(0.9);
  }

  .yc1, .yc2, .yc3, .yc4, .yc5, .yc6, .yc7, .yc8, .yc9, .yc10, .yc11, .yc12, .yc13, .yc14, .yc15, .yc16, .yc17, .yc18, .yc19, .yc20, .yc21, .yc22, .yc23, .yc24, .yc25, .yc26, .yc27, .yc28, .yc29, .yc30, .yc31, .yc32{

  opacity: 0;
  z-index: 1;
 transform: scale(0.9);
}
.yct1:hover .y1, .yct2:hover .y2, .yct3:hover .y3, .yct4:hover .y4, .yct5:hover .y5, .yct6:hover .y6, .yct7:hover .y7, .yct8:hover .y8, .yct9:hover .y9, .yct10:hover .y10, .yct11:hover .y11, .yct12:hover .y12, .yct13:hover .y13, .yct14:hover .y14, .yct15:hover .y15, .yct16:hover .y16, .yct17:hover .y17, .yct18:hover .y18, .yct19:hover .y19,  .yct20:hover .y20,  .yct21:hover .y21, .yct22:hover .y22,  .yct23:hover .y23, .yct24:hover .y24, .yct25:hover .y25, .yct26:hover .y26, .yct27:hover .y27, .yct28:hover .y28, .yct29:hover .y29, .yct30:hover .y30, .yct31:hover .y31, .yct32:hover .y32 {
  opacity: 0; 
}
.yct1:hover .yc1, .yct2:hover .yc2, .yct3:hover .yc3, .yct4:hover .yc4, .yct5:hover .yc5, .yct6:hover .yc6, .yct7:hover .yc7, .yct8:hover .yc8, .yct9:hover .yc9, .yct10:hover .yc10, .yct11:hover .yc11, .yct12:hover .yc12, .yct13:hover .yc13, .yct14:hover .yc14, .yct15:hover .yc15, .yct16:hover .yc16, .yct17:hover .yc17, .yct18:hover .yc18, .yct19:hover .yc19,  .yct20:hover .yc20,  .yct21:hover .yc21, .yct22:hover .yc22,  .yct23:hover .yc23, .yct24:hover .yc24, .yct25:hover .yc25, .yct26:hover .yc26, .yct27:hover .yc27, .yct28:hover .yc28, .yct29:hover .yc29, .yct30:hover .yc30, .yct31:hover .yc31, .yct32:hover .yc32{
  opacity: 1;}





.y1, .yc1{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y2, .yc2{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y3, .yc3{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y4, .yc4{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y5, .yc5{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y6, .yc6{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y7, .yc7{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y8, .yc8{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y9, .yc9{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y10, .yc10{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y11, .yc11{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y12, .yc12{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y13, .yc13{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y14, .yc14{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y15, .yc15{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y16, .yc16{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y17, .yc17{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y18, .yc18{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y19, .yc19{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y20, .yc20{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y21, .yc21{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y22, .yc22{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y23, .yc23{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y24, .yc24{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y25, .yc25{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y26, .yc26{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y27, .yc27{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y28, .yc28{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y29, .yc29{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y30, .yc30{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y31, .yc31{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y32, .yc32{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}
 .y1, .y2, .y3, .y4, .y5, .y6, .y7, .y8, .y9, .y10, .y11, .y12, .y13, .y14, .y15, .y16, .y17, .y18, .y19, .y20, .y21, .y22, .y23, .y24, .y25, .y26, .y27, .y28, .y29, .y30, .y31, .y32{
  z-index: 1;
 }






.fall{
background-color: #F5DE91;
  width: 30%;
  height: 48vw;
  position: relative;
  overflow: hidden;
}



.h1 {
    left: 5%;
    top: -20%;
    position: absolute;
    animation: fall1 4000ms linear infinite;
}

@keyframes fall1 {
    0%   { top: -20%; transform: rotate(0deg); }
    25%  { top: 10%;  transform: rotate(90deg); }
    50%  { top: 40%;  transform: rotate(180deg); }
    75%  { top: 70%;  transform: rotate(270deg); }
    100% { top: 110%; transform: rotate(360deg); }
}

.h2 {
    left: 15%;
    top: -30%;
     position: absolute;
    animation: fall2 4500ms linear infinite;
}

@keyframes fall2 {
    0%   { top: -30%; transform: rotate(0deg); }
    20%  { top: 0%;   transform: rotate(-80deg); }
    40%  { top: 30%;  transform: rotate(-160deg); }
    70%  { top: 70%;  transform: rotate(-260deg); }
    100% { top: 120%; transform: rotate(-360deg); }
}

.h3 {
    left: 25%;
    top: -10%;
     position: absolute;
    animation: fall3 3800ms linear infinite;
}

@keyframes fall3 {
    0%   { top: -10%; transform: rotate(0deg); }
    30%  { top: 20%;  transform: rotate(120deg); }
    60%  { top: 60%;  transform: rotate(240deg); }
    100% { top: 115%; transform: rotate(480deg); }
}

.h4 {
    left: 35%;
    top: -25%;
     position: absolute;
    animation: fall4 5000ms linear infinite;
}

@keyframes fall4 {
    0%   { top: -25%; transform: rotate(0deg); }
    15%  { top: 0%;   transform: rotate(-60deg); }
    40%  { top: 35%;  transform: rotate(-160deg); }
    75%  { top: 80%;  transform: rotate(-300deg); }
    100% { top: 130%; transform: rotate(-420deg); }
}


.h5 {
    left: 45%;
    top: -15%;
     position: absolute;
    animation: fall5 4200ms linear infinite;
}

@keyframes fall5 {
    0%   { top: -15%; transform: rotate(0deg); }
    25%  { top: 15%;  transform: rotate(100deg); }
    50%  { top: 50%;  transform: rotate(220deg); }
    75%  { top: 85%;  transform: rotate(340deg); }
    100% { top: 125%; transform: rotate(460deg); }
}

/* h6 */
.h6 {
    left: 55%;
    top: -35%;
     position: absolute;
    animation: fall6 4700ms linear infinite;
}

@keyframes fall6 {
    0%   { top: -35%; transform: rotate(0deg); }
    30%  { top: 5%;   transform: rotate(-110deg); }
    55%  { top: 45%;  transform: rotate(-230deg); }
    85%  { top: 95%;  transform: rotate(-350deg); }
    100% { top: 135%; transform: rotate(-430deg); }
}

/* h7 */
.h7 {
    left: 65%;
    top: -5%;
     position: absolute;
    animation: fall7 3600ms linear infinite;
}

@keyframes fall7 {
    0%   { top: -5%;  transform: rotate(0deg); }
    35%  { top: 25%;  transform: rotate(140deg); }
    65%  { top: 65%;  transform: rotate(280deg); }
    100% { top: 120%; transform: rotate(560deg); }
}

/* h8 */
.h8 {
    left: 75%;
    top: -20%;
     position: absolute;
    animation: fall8 5200ms linear infinite;
}

@keyframes fall8 {
    0%   { top: -20%; transform: rotate(0deg); }
    20%  { top: 5%;   transform: rotate(-90deg); }
    45%  { top: 40%;  transform: rotate(-200deg); }
    80%  { top: 90%;  transform: rotate(-340deg); }
    100% { top: 140%; transform: rotate(-480deg); }
}

/* h9 */
.h9 {
    left: 10%;
    top: -40%;
     position: absolute;
    animation: fall9 5500ms linear infinite;
}

@keyframes fall9 {
    0%   { top: -40%; transform: rotate(0deg); }
    25%  { top: -5%;  transform: rotate(120deg); }
    50%  { top: 35%;  transform: rotate(240deg); }
    75%  { top: 80%;  transform: rotate(360deg); }
    100% { top: 145%; transform: rotate(540deg); }
}

/* h10 */
.h10 {
    left: 30%;
    top: -30%;
     position: absolute;
    animation: fall10 4300ms linear infinite;
}

@keyframes fall10 {
    0%   { top: -30%; transform: rotate(0deg); }
    20%  { top: 0%;   transform: rotate(-100deg); }
    50%  { top: 45%;  transform: rotate(-220deg); }
    80%  { top: 95%;  transform: rotate(-340deg); }
    100% { top: 150%; transform: rotate(-460deg); }
}

/* h11 */
.h11 {
    left: 50%;
    top: -10%;
     position: absolute;
    animation: fall11 3900ms linear infinite;
}

@keyframes fall11 {
    0%   { top: -10%; transform: rotate(0deg); }
    30%  { top: 20%;  transform: rotate(130deg); }
    60%  { top: 60%;  transform: rotate(260deg); }
    100% { top: 135%; transform: rotate(520deg); }
}

/* h12 */
.h12 {
    left: 70%;
    top: -25%;
     position: absolute;
    animation: fall12 4800ms linear infinite;
}

@keyframes fall12 {
    0%   { top: -25%; transform: rotate(0deg); }
    25%  { top: 5%;   transform: rotate(-120deg); }
    55%  { top: 50%;  transform: rotate(-260deg); }
    85%  { top: 100%; transform: rotate(-380deg); }
    100% { top: 155%; transform: rotate(-520deg); }
}

/* h13 */
.h13 {
    left: 85%;
    top: -15%;
     position: absolute;
    animation: fall13 5100ms linear infinite;
}

@keyframes fall13 {
    0%   { top: -15%; transform: rotate(0deg); }
    20%  { top: 10%;  transform: rotate(150deg); }
    45%  { top: 45%;  transform: rotate(300deg); }
    75%  { top: 95%;  transform: rotate(480deg); }
    100% { top: 160%; transform: rotate(660deg); }
}

.h1, .h2, .h3, .h4, .h5, .h6, .h7, .h8, .h9, .h10, .h11, .h12, .h13{
  width: 20%;
}







.podval{

   position: relative;
    width: 100%;
    height: 17vw;
    top: 0;
    left: 0;
    word-wrap: nowrap;
    z-index: 1;
    overflow-x: hidden;
}

.pd{
  position: absolute;
    animation: text3 20s linear infinite;
}

@keyframes text3{
0%{ left: 0%; top: 0;}
100%{ left: -400%; top: 0;}
}


}












@media screen and (min-width: 769px) and (max-width:  1024px) {

  body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow-x: hidden;
background-color: #FFF7E8;
position: relative;
}






.stroke{

    position: relative;
    width: 100%;
 height: 7vw;
    top: 0;
    left: 0;
    word-wrap: nowrap;
    z-index: 1;
    overflow-x: hidden;
}

.st{
  position: absolute;
     animation: text 6s linear infinite;
}

@keyframes text{
0%{ left: -100%; top: 0;}
100%{ left: 0%; top: 0;}

}

.bu1{

position: absolute;
margin-top: 14%;
margin-left: 3%;


}

.b1, .bc1 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
transform: scale(0.8);
  
}

.b1{
  opacity: 1;
  z-index: 1;
}

.bc1{
  opacity: 0;
  z-index: 1;
}
.bu1:hover .b1{
  opacity: 0;
}
.bu1:hover .bc1{
  opacity: 1;
}

 







.bu2{

position: absolute;
margin-left: 20%;
margin-top: 14%;

}

.b2, .bc2 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease; 
  transform: scale(0.8);
}

.b2{
  opacity: 1;
  z-index: 1;
}

.bc2{
  opacity: 0;
  z-index: 1;
}
.bu2:hover .b2{
  opacity: 0;
}
.bu2:hover .bc2{
  opacity: 1;
 
}









.bu3{

position: absolute;

margin-left: 39%;
margin-top: 14%;

}

.b3, .bc3 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease; 
  transform: scale(0.8);
}

.b3{
  opacity: 1;
  z-index: 1;
}

.bc3{
  opacity: 0;
  z-index: 1;
}
.bu3:hover .b3{
  opacity: 0;
}
.bu3:hover .bc3{
  opacity: 1;
}







.bu4{

position: absolute;

margin-left: 58%;
margin-top: 14%;

}

.b4, .bc4 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease; 
  transform: scale(0.8);
}

.b4{
  opacity: 1;
  z-index: 1;
}

.bc4{
  opacity: 0;
  z-index: 1;
}
.bu4:hover .b4{
  opacity: 0;
}
.bu4:hover .bc4{
  opacity: 1;
}





.bu5{

position: absolute;

margin-left: 77%;
margin-top: 14%;

}

.b5, .bc5 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease; 
  transform: scale(0.8);
}

.b5{
  opacity: 1;
  z-index: 1;
}

.bc5{
  opacity: 0;
  z-index: 1;
}
.bu5:hover .b5{
  opacity: 0;
}
.bu5:hover .bc5{
  opacity: 1;
}










.shtrih {
width: 532px;
height: 254px;
margin-left: 25%;
margin-top: -29%;
background: url("./img/shtrix.svg");
animation: flick 3s steps(1) infinite;
z-index: 1;

}

@keyframes flick{
 0%{ background-position: 0px top;}
 70%{ background-position: -532px top;}
 80%{ background-position: -1064px top;}
 90%{ background-position: -1596px top;}

}

.el1{
    margin-top: 5%;
    margin-left: 10%;
    animation: el1 6s linear infinite both;
    width: 20%;
    height: 17%;
    z-index: -1;

    
}

@keyframes el1 {
   0% {transform: scale(0.7) rotate(0);}
  100% {transform: scale(0.7) rotate(360deg);}
}

.el2{
    margin-top: -27%;
    margin-left: 67%;
    animation: el2 4s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
}

@keyframes el2 {
  0% {transform: scale(0.7) rotateY(0);}
  100% {transform: scale(0.7) rotateY(360deg); }
}

.el3{
    margin-top: 10%;
    margin-left: 10%;
    animation: el3 5s linear infinite both;
    width: 18%;
    height: 12%;
}

@keyframes el3 {
  0% {transform: scale(0.7) rotateY(0);}
  100% {transform: scale(0.7) rotateY(360deg);}
}

.el4{
    margin-top: -15%;
    margin-left: 72%;
    animation: el4 8s linear infinite both;
    width: 17%;
    height: 11%;
}

@keyframes el4 {
  0% {transform: scale(0.7) rotate(0);}
  100% {transform: scale(0.7) rotate(360deg);}
}









.cont2{
  margin-top: 10vw;
flex-direction: row;
justify-content: center;
align-items: center;
}




.k6{
width: 20%;
height: 24vw;
background-color: #B44B47;
display: flex;
  justify-content: center;
  align-items: center;
position: absolute;
margin-left: 0%;
}


.b6, .bc6 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;

  
}

.b6{
  opacity: 1;
  z-index: 1;
  animation: bounce-top 1.5s infinite both;
}

@keyframes bounce-top {
  0% {transform: scale(0.8) translateY(-45px); animation-timing-function: ease-in; }
  24% {}
  40% {transform: scale(0.8) translateY(-24px); animation-timing-function: ease-in;}
  65% {transform: scale(0.8) translateY(-12px); animation-timing-function: ease-in;}
  82% {transform: scale(0.8) translateY(-6px); animation-timing-function: ease-in;}
  93% {transform: scale(0.8) translateY(-4px); animation-timing-function: ease-in;}
  25%,
  55%,
  75%,
  87% {transform: scale(0.8) translateY(0px); animation-timing-function: ease-out;}
  100% {transform: scale(0.8) translateY(0px);animation-timing-function: ease-out; }
}

.bc6{
  opacity: 0;
 transform: scale(0.8);
}
.k6:hover .b6{
  opacity: 0;
  animation-play-state: paused;
}
.k6:hover .bc6{
  opacity: 1;
}








.k7{

position: absolute; margin-left: 20%;
background-color: #F5DE91;
width: 20%;
height: 24vw;
display: flex;
  justify-content: center;
  align-items: center;
}

.b7, .bc7 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;

  
}
.b7img, .bc7img{
    transform: scale(0.8);
}

.b7{
  opacity: 1;
  z-index: 1;
  animation: rotate-center 1.5s ease-in-out infinite both;
}

@keyframes rotate-center {
  0% { transform: scale(1) rotate(0);}
  100% {transform: scale(1) rotate(360deg);}
}

.bc7{
  opacity: 0;
  z-index: 1;
}
.k7:hover .b7{
  opacity: 0;
  animation-play-state: paused;
}
.k7:hover .bc7{
  opacity: 1;
}






.k8{

position: absolute; margin-left: 40%;
background-color: #82A985;
width: 20%;
height: 24vw;
display: flex;
  justify-content: center;
  align-items: center;
}
.b8, .bc8 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;

  
}

.b8{
  opacity: 1;
  z-index: 1;
   animation: jello 1.5s infinite both;
}

@keyframes jello {
  0% {transform: scale(0.8) scale3d(1, 1, 1);}
  30% {transform: scale(0.8) scale3d(1.25, 0.75, 1);}
  40% {transform: scale(0.8) scale3d(0.75, 1.25, 1);}
  50% {transform: scale(0.8) scale3d(1.15, 0.85, 1);}
  65% {transform:  scale(0.8) scale3d(0.95, 1.05, 1);}
  75% {transform: scale(0.8) scale3d(1.05, 0.95, 1);}
  100% {transform: scale(0.8) scale3d(1, 1, 1);}
}

.bc8{
  opacity: 0;
  z-index: 1;
  transform: scale(0.8);
}
.k8:hover .b8{
  opacity: 0;
  animation-play-state: paused;
}
.k8:hover .bc8{
  opacity: 1;
}








.k9{

position: absolute; margin-left: 60%;
background-color: #B44B47;
width: 20%;
height: 24vw;
display: flex;
  justify-content: center;
  align-items: center;
}
.b9, .bc9 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;

  
}

.b9{
  opacity: 1;
  z-index: 1;
  animation: scale-down 1s linear infinite both;
}

@keyframes scale-down {
  0% {transform: scale(0.8) scale(1);}
  100% {transform: scale(0.8) scale(0.5); }
}


.bc9{
  opacity: 0;
  z-index: 1;
  transform: scale(0.8);
}
.k9:hover .b9{
  opacity: 0;
   animation-play-state: paused;
}
.k9:hover .bc9{
  opacity: 1;
}







.k10{

position: absolute; margin-left: 80%;
background-color: #2C3872;
width: 20%;
height: 24vw;
display: flex;
  justify-content: center;
  align-items: center;
}
.b10, .bc10 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;

  
}

.b10{
  opacity: 1;
  z-index: 1;
   animation: wobble 1.5s infinite both;
}

@keyframes wobble {
  0%,
  100% {transform: scale(0.8) translateX(0%); transform-origin: 50% 50%;}
  15% {transform: scale(0.8) translateX(-30px) rotate(-6deg);}
  30% {transform: scale(0.8) translateX(15px) rotate(6deg);}
  45% {transform: scale(0.8) translateX(-15px) rotate(-3.6deg);}
  60% {transform: scale(0.8) translateX(9px) rotate(2.4deg);}
  75% {transform: scale(0.8) translateX(-6px) rotate(-1.2deg);}
}

.bc10{
  opacity: 0;
  z-index: 1;
  transform: scale(0.8);
}
.k10:hover .b10{
  opacity: 0;
  animation-play-state: paused;
}
.k10:hover .bc10{
  opacity: 1;
}






.play{
 display: flex;
flex-direction: row;
justify-content: center;
align-items: center;

}


.div1{
 
background-color: #2C3872;
width: 40%;
height: 50vw;
margin-top: 23.9%;
display: flex;
  justify-content: center;
  align-items: center;
}

.div2{


  background-color: #F5DE91;
  width: 60%;
height: 50vw;
margin-top: 23.9%;
display: flex;
justify-content: initial;

 display: grid;
   
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    height: 50vw;
    width: 60%;
}

.e1 {
    grid-area: 1 / 1 / 2 / 2;
}

.e12 {
    grid-area: 3 / 3 / 4 / 4;
}







.e1, .ec1{
  margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
  width: 8%;
}
.e1{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }

    @keyframes rotate-center {
  0% {transform:  rotate(0);}
  100% {transform: rotate(360deg);}
  }

  .ec1{
  opacity: 0;
  z-index: 1;
  }

.eu1:hover .e1{
  opacity: 0;
  animation-play-state: paused;
}
.eu1:hover .ec1{
  opacity: 1;}







.e2, .ec2{
  margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
  width: 8%;
}
.e2{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec2{
  opacity: 0;
  z-index: 1;
 
}

.eu2:hover .e2{
  opacity: 0;
  animation-play-state: paused;
}
.eu2:hover .ec2{
  opacity: 1;}











.e3, .ec3{
 margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
  width: 8%;
}
.e3{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec3{
  opacity: 0;
  z-index: 1;
 
}
.eu3:hover .e3{
  opacity: 0;
  animation-play-state: paused;
}
.eu3:hover .ec3{
  opacity: 1;}












.e4, .ec4{
 margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
  width: 8%;
}
.e4{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec4{
  opacity: 0;
  z-index: 1;
 
}
.eu4:hover .e4{
  opacity: 0;
  animation-play-state: paused;
}
.eu4:hover .ec4{
  opacity: 1;}










.e5, .ec5{
  margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
  width: 8%;
}
.e5{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec5{
  opacity: 0;
  z-index: 1;

}
.eu5:hover .e5{
  opacity: 0;
  animation-play-state: paused;
}
.eu5:hover .ec5{
  opacity: 1;}









.e6, .ec6{
 margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
  width: 8%;
}
.e6{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec6{
  opacity: 0;
  z-index: 1;
  
}
.eu6:hover .e6{
  opacity: 0;
  animation-play-state: paused;
}
.eu6:hover .ec6{
  opacity: 1;}







.e7, .ec7{
 margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
  width: 8%;
}
.e7{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec7{
  opacity: 0;
  z-index: 1;
  
}
.eu7:hover .e7{
  opacity: 0;
  animation-play-state: paused;
}
.eu7:hover .ec7{
  opacity: 1;}






.e8, .ec8{
 margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
  width: 8%;
}
.e8{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec8{
  opacity: 0;
  z-index: 1;
  
}
.eu8:hover .e8{
  opacity: 0;
  animation-play-state: paused;
}
.eu8:hover .ec8{
  opacity: 1;}




.e9, .ec9{
 margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
  width: 8%;
}
.e9{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec9{
  opacity: 0;
  z-index: 1;
 
}
.eu9:hover .e9{
  opacity: 0;
  animation-play-state: paused;
}
.eu9:hover .ec9{
  opacity: 1;}






.e10, .ec10{
  
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
  width: 8%;
}
.e10{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec10{
  opacity: 0;
  z-index: 1;
 
}
.eu10:hover .e10{
  opacity: 0;
  animation-play-state: paused;
}
.eu10:hover .ec10{
  opacity: 1;}




.e11, .ec11{
 margin-top: 2%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
  width: 8%;
}
.e11{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec11{
  opacity: 0;
  z-index: 1;
  
}
.eu11:hover .e11{
  opacity: 0;
  animation-play-state: paused;
}
.eu11:hover .ec11{
  opacity: 1;}




.e12, .ec12{
 margin-top: 3%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
  width: 8%;
}
.e12{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec12{
  opacity: 0;
  z-index: 1;
 
}
.eu12:hover .e12{
  opacity: 0;
  animation-play-state: paused;
}
.eu12:hover .ec12{
  opacity: 1;}
























.korzina{
  margin-left: -5vw;
  animation: wobble-hor-bottom 3s linear infinite both;
  transform: scale(1.5);
  width: 80%;
}

@keyframes wobble-hor-bottom {
  0%,
  100% {transform: scale(1.5) translateX(0%); transform-origin: 50% 50%;}
  15% {transform: scale(1.5) translateX(-30px) rotate(-6deg);}
  30% {transform: scale(1.5) translateX(15px) rotate(6deg);}
  45% {transform: scale(1.5) translateX(-15px) rotate(-3.6deg);}
  60% {transform: scale(1.5) translateX(9px) rotate(2.4deg);}
  75% {transform: scale(1.5) translateX(-6px) rotate(-1.2deg);}
}

.vkorzine{
  width: 227px;
height: 100px;
margin-left:-30vw;
display: block;
position: relative;
background: url("./img/vkorzine.svg");
animation: walk1 1.5s steps(1) infinite;
}

@keyframes walk1{
    0%{ background-position: 0px top;}
    25%{ background-position: -227px top;}
    75% { background-position: -464px top;}
    100% { background-position: -701px top;}
}







.cont3{
width: 100%;
height: 45vw;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}

.bukvaU{
height: 60%;
width: 26%;
background-color: #FFF7E8;
background: url("./img/u1024.svg");
animation: walk2 1.5s steps(1) infinite;
}
@keyframes walk2{
    0%{ background-position: 0px top;}
    25%{ background-position: -265px top;}
    75% { background-position: -530px top;}
    100% { background-position: -795px top;}
}

.bukvaA{
height: 60%;
width: 37.4%;
background-color: #B44B47;
 position: relative; 
  overflow: hidden;
}

.ba{
margin-top: -3%;
margin-left: 60%;
  top: 0; 
  left: 50%;
  transform: translateX(-50%); 
  animation: fall 1s ease-in forwards infinite; 
}

@keyframes fall {
  0% {transform: scale(0.9) translateX(-50%) translateY(0); }
  100% {transform: scale(0.9) translateX(-50%) translateY(320px); }
}

.ba:hover{
   animation: rotate-scale-up 0.65s linear infinite both;
}

@keyframes rotate-scale-up {
  0% {transform: scale(1) rotateZ(0);}
  50% {transform: scale(2) rotateZ(180deg);}
  100% {transform: scale(1) rotateZ(360deg);}
}

.fa{
  
  margin-left: 42%;
  margin-top: 10%;
  width: 70%;
   animation: shake-br 2s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
}

@keyframes shake-br {
  0%,
  100% {transform: scale(0.9) rotate(0deg); transform-origin: 100% 100%;}
  10% {transform: scale(0.9) rotate(2deg);}
  20%,
  40%,
  60% {transform: scale(0.9) rotate(-4deg);}
  30%,
  50%,
  70% {transform: scale(0.9) rotate(4deg);}
  80% {transform: scale(0.9) rotate(-2deg);}
  90% {transform: scale(0.9) rotate(2deg);}
}

.bukvaI{
height: 100%;
width: 36.6%;
background-color: #221E1B;
z-index: 1;
}

.bi{
margin-top: 30%;
margin-left: 15%;
width: 70%;
  animation: wobble-hor-bottom 3s linear infinite both;
}



@keyframes wobble-hor-bottom {
  0%,
  100% {transform: translateX(0%); transform-origin: 50% 50%;}
  15% {transform: translateX(-30px) rotate(-6deg);}
  30% {transform: translateX(15px) rotate(6deg);}
  45% {transform: translateX(-15px) rotate(-3.6deg);}
  60% {transform: translateX(9px) rotate(2.4deg);}
  75% {transform: translateX(-6px) rotate(-1.2deg);}
}

.fi{
margin-left: 20%;
width: 80%;
animation: shake-br 2s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
}
@keyframes shake-br {
  0%,
  100% {transform: rotate(0deg); transform-origin: 100% 100%;}
  10% {transform: rotate(2deg);}
  20%,
  40%,
  60% {transform: rotate(-4deg);}
  30%,
  50%,
  70% {transform: rotate(4deg);}
  80% {transform: rotate(-2deg);}
  90% {transform: rotate(2deg);}
}

.shtrihi{
margin-top: -19.8%;
width: 63.4%;
height: 44%;
background-color: #2C3872;
overflow: hidden;
position: relative;
display: flex;
align-items: center;

}

.sh2{
position: absolute;
width: 500%;
animation: sh22 5s linear infinite alternate;
}

@keyframes sh22 {
  0% {transform: translateX(-50%);}
  100% {transform: translateX(0);}}



.cont4{
height: 36vw;
display: flex;
flex-direction: row;
}

.move{
width: 63.4%;
height: 36vw;
background-color: #82A985;
z-index: 1;
}

.bukvaB{
width: 36.6%;
height: 36vw;
background-color: #B44B47;

}

.bb{
  margin-top: 20%;
margin-left: 20%;
animation: wobble-ver-left 1.5s infinite both;
width: 50%;
transition: opacity 0.8s ease;
}

.bb:hover{
  opacity: 0;
}


@keyframes wobble-ver-left {
  0%,
  100% {transform: scale(1.5) translateY(0) rotate(0); transform-origin: 50% 50%;}
  15% {transform: scale(1.5) translateY(-30px) rotate(-6deg);}
  30% {transform: scale(1.5) translateY(15px) rotate(6deg);}
  45% {transform: scale(1.5) translateY(-15px) rotate(-3.6deg);}
  60% {transform: scale(1.5) translateY(9px) rotate(2.4deg);}
  75% {transform: scale(1.5) translateY(-6px) rotate(-1.2deg);}
}

.fb{
margin-left: -3%;
width: 70%;
animation: wobble-ver-left 1.5s infinite both;
}

@keyframes wobble-ver-left {
  0%,
  100% {transform: translateY(0) rotate(0);transform-origin: 50% 50%;}
  15% {transform: translateY(-30px) rotate(-6deg);}
  30% {transform: translateY(15px) rotate(6deg);}
  45% {transform: translateY(-15px) rotate(-3.6deg);}
  60% {transform: translateY(9px) rotate(2.4deg);}
  75% {transform: translateY(-6px) rotate(-1.2deg);}
}








.move{

  display: flex;
  flex-direction: row;
  
}

.item1, .item2, .item3, .item4, .item5, .item6 {
  background-color: #FFF7E8;
 
  width: 15%;
  height: 8%;

  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;

  
}



.item1{

  margin-top: 5%;
  margin-left: 5%;
  animation: move1 8s linear infinite alternate;
  transform: scale(0.8);
}
@keyframes move1 {
  0%   { left: 5%;  top: 10%; }
  25%  { left: 15%; top: 5%;  }
  50%  { left: 30%; top: 22%; }
  75%  { left: 12%; top: 30%; }
  100% { left: 5%;  top: 10%; }
}
.figc1:hover{
  opacity: 0;
}


.item2{

  margin-top: 5%;
  margin-left: 0%;
  animation: move2 11s linear infinite alternate;
  transform: scale(0.8);
}

@keyframes move2 {
  0%   { left: 40%; top: 5%;  }
  20%  { left: 60%; top: 8%;  }
  40%  { left: 55%; top: 30%; }
  70%  { left: 30%; top: 28%; }
  100% { left: 40%; top: 5%;  }
}

.figc2:hover{
  opacity: 0;
}

.item3{

  margin-top: 15%;
  margin-left: -50%;
  animation: move3 9s linear infinite alternate;
  transform: scale(0.8);
}

@keyframes move3 {
  0%   { left: 75%; top: 15%; }
  30%  { left: 70%; top: 35%; }
  60%  { left: 82%; top: 50%; }
  100% { left: 75%; top: 15%; }
}

.figc3:hover{
  opacity: 0;
}

.item4{

  margin-top: 5%;
  margin-left: 10%;
 animation: move4 10s linear infinite alternate;
 transform: scale(0.8);
}
@keyframes move4 {
  0%   { left: 40%; top: 40%; }
  25%  { left: 48%; top: 55%; }
  50%  { left: 35%; top: 65%; }
  75%  { left: 25%; top: 45%; }
  100% { left: 40%; top: 40%; }
}

.figc4:hover{
  opacity: 0;
}

.item5{

  margin-top: 0%;
  margin-left: -10%;
  animation: move5 7s linear infinite alternate;
  transform: scale(0.8);
  
}

@keyframes move5 {
  0%   { left: 8%;  top: 60%; }
  30%  { left: 20%; top: 72%; }
  60%  { left: 10%; top: 80%; }
  100% { left: 8%;  top: 60%; }
}

.figc5:hover{
  opacity: 0;
}

.item6{
 margin-top: 0%;
  margin-left: -60%;
 animation: move6 12s linear infinite alternate;
 transform: scale(0.8);
}

@keyframes move6 {
  0%   { left: 68%; top: 60%; }
  25%  { left: 55%; top: 70%; }
  50%  { left: 72%; top: 82%; }
  75%  { left: 80%; top: 62%; }
  100% { left: 68%; top: 60%; }
}

.figc6:hover{
  opacity: 0;
}

.fig1, .figc1{
position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.fig2, .figc2{
   position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.fig3, .figc3{
   position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.fig4, .figc4{
   position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.fig5, .figc5{
   position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.fig6, .figc6{
   position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}














.cont5{
height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
}






.alf{
background-color: #FFF7E8;
  width: 70%;
  height: 44vw;

   display: grid;
   
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(4, 1fr);
    width: 70%;
  height: 44vw;
  padding: 2%;
}
.y1{
  grid-area: 1 / 2 / 3 / 4 / 5 / 6 / 7 / 8;
}
.y32{
  grid-area: 25 / 26 / 27 / 28 / 29 / 30 / 31 / 32;
}




.y1, .y2, .y3, .y4, .y5, .y6, .y7, .y8, .y9, .y10, .y11, .y12, .y13, .y14, .y15, .y16, .y17, .y18, .y19, .y20, .y21, .y22, .y23, .y24, .y25, .y26, .y27, .y28, .y29, .y30, .y31, .y32{
  z-index: 1;
  opacity: 1;
  transform: scale(0.7);
  }

  .yc1, .yc2, .yc3, .yc4, .yc5, .yc6, .yc7, .yc8, .yc9, .yc10, .yc11, .yc12, .yc13, .yc14, .yc15, .yc16, .yc17, .yc18, .yc19, .yc20, .yc21, .yc22, .yc23, .yc24, .yc25, .yc26, .yc27, .yc28, .yc29, .yc30, .yc31, .yc32{

  opacity: 0;
  z-index: 1;
 transform: scale(0.7);
}
.yct1:hover .y1, .yct2:hover .y2, .yct3:hover .y3, .yct4:hover .y4, .yct5:hover .y5, .yct6:hover .y6, .yct7:hover .y7, .yct8:hover .y8, .yct9:hover .y9, .yct10:hover .y10, .yct11:hover .y11, .yct12:hover .y12, .yct13:hover .y13, .yct14:hover .y14, .yct15:hover .y15, .yct16:hover .y16, .yct17:hover .y17, .yct18:hover .y18, .yct19:hover .y19,  .yct20:hover .y20,  .yct21:hover .y21, .yct22:hover .y22,  .yct23:hover .y23, .yct24:hover .y24, .yct25:hover .y25, .yct26:hover .y26, .yct27:hover .y27, .yct28:hover .y28, .yct29:hover .y29, .yct30:hover .y30, .yct31:hover .y31, .yct32:hover .y32 {
  opacity: 0; 
}
.yct1:hover .yc1, .yct2:hover .yc2, .yct3:hover .yc3, .yct4:hover .yc4, .yct5:hover .yc5, .yct6:hover .yc6, .yct7:hover .yc7, .yct8:hover .yc8, .yct9:hover .yc9, .yct10:hover .yc10, .yct11:hover .yc11, .yct12:hover .yc12, .yct13:hover .yc13, .yct14:hover .yc14, .yct15:hover .yc15, .yct16:hover .yc16, .yct17:hover .yc17, .yct18:hover .yc18, .yct19:hover .yc19,  .yct20:hover .yc20,  .yct21:hover .yc21, .yct22:hover .yc22,  .yct23:hover .yc23, .yct24:hover .yc24, .yct25:hover .yc25, .yct26:hover .yc26, .yct27:hover .yc27, .yct28:hover .yc28, .yct29:hover .yc29, .yct30:hover .yc30, .yct31:hover .yc31, .yct32:hover .yc32{
  opacity: 1;}





.y1, .yc1{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y2, .yc2{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y3, .yc3{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y4, .yc4{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y5, .yc5{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y6, .yc6{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y7, .yc7{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y8, .yc8{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y9, .yc9{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y10, .yc10{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y11, .yc11{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y12, .yc12{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y13, .yc13{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y14, .yc14{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y15, .yc15{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y16, .yc16{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y17, .yc17{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y18, .yc18{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y19, .yc19{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y20, .yc20{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y21, .yc21{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y22, .yc22{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y23, .yc23{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y24, .yc24{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y25, .yc25{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y26, .yc26{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y27, .yc27{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y28, .yc28{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y29, .yc29{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y30, .yc30{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y31, .yc31{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y32, .yc32{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}
 .y1, .y2, .y3, .y4, .y5, .y6, .y7, .y8, .y9, .y10, .y11, .y12, .y13, .y14, .y15, .y16, .y17, .y18, .y19, .y20, .y21, .y22, .y23, .y24, .y25, .y26, .y27, .y28, .y29, .y30, .y31, .y32{
  z-index: 1;
 }






.fall{
background-color: #F5DE91;
  width: 30%;
  height: 48vw;
  position: relative;
  overflow: hidden;
}



.h1 {
    left: 5%;
    top: -20%;
    position: absolute;
    animation: fall1 4000ms linear infinite;
}

@keyframes fall1 {
    0%   { top: -20%; transform: rotate(0deg); }
    25%  { top: 10%;  transform: rotate(90deg); }
    50%  { top: 40%;  transform: rotate(180deg); }
    75%  { top: 70%;  transform: rotate(270deg); }
    100% { top: 110%; transform: rotate(360deg); }
}

.h2 {
    left: 15%;
    top: -30%;
     position: absolute;
    animation: fall2 4500ms linear infinite;
}

@keyframes fall2 {
    0%   { top: -30%; transform: rotate(0deg); }
    20%  { top: 0%;   transform: rotate(-80deg); }
    40%  { top: 30%;  transform: rotate(-160deg); }
    70%  { top: 70%;  transform: rotate(-260deg); }
    100% { top: 120%; transform: rotate(-360deg); }
}

.h3 {
    left: 25%;
    top: -10%;
     position: absolute;
    animation: fall3 3800ms linear infinite;
}

@keyframes fall3 {
    0%   { top: -10%; transform: rotate(0deg); }
    30%  { top: 20%;  transform: rotate(120deg); }
    60%  { top: 60%;  transform: rotate(240deg); }
    100% { top: 115%; transform: rotate(480deg); }
}

.h4 {
    left: 35%;
    top: -25%;
     position: absolute;
    animation: fall4 5000ms linear infinite;
}

@keyframes fall4 {
    0%   { top: -25%; transform: rotate(0deg); }
    15%  { top: 0%;   transform: rotate(-60deg); }
    40%  { top: 35%;  transform: rotate(-160deg); }
    75%  { top: 80%;  transform: rotate(-300deg); }
    100% { top: 130%; transform: rotate(-420deg); }
}


.h5 {
    left: 45%;
    top: -15%;
     position: absolute;
    animation: fall5 4200ms linear infinite;
}

@keyframes fall5 {
    0%   { top: -15%; transform: rotate(0deg); }
    25%  { top: 15%;  transform: rotate(100deg); }
    50%  { top: 50%;  transform: rotate(220deg); }
    75%  { top: 85%;  transform: rotate(340deg); }
    100% { top: 125%; transform: rotate(460deg); }
}

/* h6 */
.h6 {
    left: 55%;
    top: -35%;
     position: absolute;
    animation: fall6 4700ms linear infinite;
}

@keyframes fall6 {
    0%   { top: -35%; transform: rotate(0deg); }
    30%  { top: 5%;   transform: rotate(-110deg); }
    55%  { top: 45%;  transform: rotate(-230deg); }
    85%  { top: 95%;  transform: rotate(-350deg); }
    100% { top: 135%; transform: rotate(-430deg); }
}

/* h7 */
.h7 {
    left: 65%;
    top: -5%;
     position: absolute;
    animation: fall7 3600ms linear infinite;
}

@keyframes fall7 {
    0%   { top: -5%;  transform: rotate(0deg); }
    35%  { top: 25%;  transform: rotate(140deg); }
    65%  { top: 65%;  transform: rotate(280deg); }
    100% { top: 120%; transform: rotate(560deg); }
}

/* h8 */
.h8 {
    left: 75%;
    top: -20%;
     position: absolute;
    animation: fall8 5200ms linear infinite;
}

@keyframes fall8 {
    0%   { top: -20%; transform: rotate(0deg); }
    20%  { top: 5%;   transform: rotate(-90deg); }
    45%  { top: 40%;  transform: rotate(-200deg); }
    80%  { top: 90%;  transform: rotate(-340deg); }
    100% { top: 140%; transform: rotate(-480deg); }
}

/* h9 */
.h9 {
    left: 10%;
    top: -40%;
     position: absolute;
    animation: fall9 5500ms linear infinite;
}

@keyframes fall9 {
    0%   { top: -40%; transform: rotate(0deg); }
    25%  { top: -5%;  transform: rotate(120deg); }
    50%  { top: 35%;  transform: rotate(240deg); }
    75%  { top: 80%;  transform: rotate(360deg); }
    100% { top: 145%; transform: rotate(540deg); }
}

/* h10 */
.h10 {
    left: 30%;
    top: -30%;
     position: absolute;
    animation: fall10 4300ms linear infinite;
}

@keyframes fall10 {
    0%   { top: -30%; transform: rotate(0deg); }
    20%  { top: 0%;   transform: rotate(-100deg); }
    50%  { top: 45%;  transform: rotate(-220deg); }
    80%  { top: 95%;  transform: rotate(-340deg); }
    100% { top: 150%; transform: rotate(-460deg); }
}

/* h11 */
.h11 {
    left: 50%;
    top: -10%;
     position: absolute;
    animation: fall11 3900ms linear infinite;
}

@keyframes fall11 {
    0%   { top: -10%; transform: rotate(0deg); }
    30%  { top: 20%;  transform: rotate(130deg); }
    60%  { top: 60%;  transform: rotate(260deg); }
    100% { top: 135%; transform: rotate(520deg); }
}

/* h12 */
.h12 {
    left: 70%;
    top: -25%;
     position: absolute;
    animation: fall12 4800ms linear infinite;
}

@keyframes fall12 {
    0%   { top: -25%; transform: rotate(0deg); }
    25%  { top: 5%;   transform: rotate(-120deg); }
    55%  { top: 50%;  transform: rotate(-260deg); }
    85%  { top: 100%; transform: rotate(-380deg); }
    100% { top: 155%; transform: rotate(-520deg); }
}

/* h13 */
.h13 {
    left: 85%;
    top: -15%;
     position: absolute;
    animation: fall13 5100ms linear infinite;
}

@keyframes fall13 {
    0%   { top: -15%; transform: rotate(0deg); }
    20%  { top: 10%;  transform: rotate(150deg); }
    45%  { top: 45%;  transform: rotate(300deg); }
    75%  { top: 95%;  transform: rotate(480deg); }
    100% { top: 160%; transform: rotate(660deg); }
}

.h1, .h2, .h3, .h4, .h5, .h6, .h7, .h8, .h9, .h10, .h11, .h12, .h13{
  width: 20%;
}







.podval{

   position: relative;
    width: 100%;
    height: 24vw;
    top: 0;
    left: 0;
    word-wrap: nowrap;
    z-index: 1;
    overflow-x: hidden;
}

.pd{
  position: absolute;
    animation: text3 20s linear infinite;
}

@keyframes text3{
0%{ left: 0%; top: 0;}
100%{ left: -400%; top: 0;}
}


}



















@media screen and (min-width: 1px) and (max-width:  360px) {





.sc{
width: 100%;
overflow-x: hidden;
 position: relative;
}


.body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow-x: hidden;
background-color: #FFF7E8;
}






.stroke{

    position: relative;
    width: 100%;
 height: 18vw;
    top: 0;
    left: 0;
    word-wrap: nowrap;
    z-index: 1;
    overflow-x: hidden;
}

.st{
  position: absolute;
     animation: text 6s linear infinite;
}

@keyframes text{
0%{ left: -100%; top: 0;}
100%{ left: 0%; top: 0;}

}






.bu1{
position: absolute;
margin-top: 40%;
margin-left: -18%;
}

.b1, .bc1 {
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
transform: scale(0.3);
}

.b1{
  opacity: 1;
  z-index: 1;
}

.bc1{
  opacity: 0;
  z-index: 1;
}

.bu1:hover .b1{
  opacity: 0;
}

.bu1:hover .bc1{
  opacity: 1;
}

 







.bu2{

position: absolute;
margin-left: -2%;
margin-top: 40%;

}

.b2, .bc2 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease; 
  transform: scale(0.3);
}

.b2{
  opacity: 1;
  z-index: 1;
}

.bc2{
  opacity: 0;
  z-index: 1;
}
.bu2:hover .b2{
  opacity: 0;
}
.bu2:hover .bc2{
  opacity: 1;
 
}









.bu3{

position: absolute;

margin-left: 17%;
margin-top: 40%;

}

.b3, .bc3 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease; 
  transform: scale(0.3);
}

.b3{
  opacity: 1;
  z-index: 1;
}

.bc3{
  opacity: 0;
  z-index: 1;
}
.bu3:hover .b3{
  opacity: 0;
}
.bu3:hover .bc3{
  opacity: 1;
}







.bu4{

position: absolute;

margin-left: 36%;
margin-top: 40%;

}

.b4, .bc4 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease; 
  transform: scale(0.3);
}

.b4{
  opacity: 1;
  z-index: 1;
}

.bc4{
  opacity: 0;
  z-index: 1;
}
.bu4:hover .b4{
  opacity: 0;
}
.bu4:hover .bc4{
  opacity: 1;
}





.bu5{

position: absolute;

margin-left: 56%;
margin-top: 40%;

}

.b5, .bc5 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease; 
  transform: scale(0.3);
}

.b5{
  opacity: 1;
  z-index: 1;
}

.bc5{
  opacity: 0;
  z-index: 1;
}
.bu5:hover .b5{
  opacity: 0;
}
.bu5:hover .bc5{
  opacity: 1;
}










.shtrih {
width: 274px;
height: 131px;
margin-left: 14%;
margin-top: -100%;
background: url("./img/r768.svg");
animation: flick 3s steps(1) infinite;
z-index: 1;

}

@keyframes flick{
 0%{ background-position: 0px top;}
 70%{ background-position: -274px top;}
 80%{ background-position: -548px top;}
 90%{ background-position: -822px top;}

}

.el1{
    margin-top: 1%;
    margin-left: 20%;
    animation: el1 6s linear infinite both;
    z-index: -1; 
}

@keyframes el1 {
0% {transform: scale(0.3) rotate(0);}
100% {transform: scale(0.3) rotate(360deg);}
}

.el2{
    margin-top: -60%;
    margin-left: 55%;
    animation: el2 4s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
}

@keyframes el2 {
  0% {transform: scale(0.3) rotateY(0);}
  100% {transform: scale(0.3) rotateY(360deg); }
}

.el3{
    margin-top: 20%;
    margin-left: 15%;
    animation: el3 5s linear infinite both;
    width: 18%;
    height: 12%;
}

@keyframes el3 {
  0% {transform: scale(0.4) rotateY(0);}
  100% {transform: scale(0.4) rotateY(360deg);}
}

.el4{
    margin-top: -50%;
    margin-left: 60%;
    animation: el4 8s linear infinite both;
    width: 17%;
    height: 11%;
}

@keyframes el4 {
  0% {transform: scale(0.5) rotate(0);}
  100% {transform: scale(0.5) rotate(360deg);}
}









.cont2{
  margin-top: 75%;
flex-direction: row;
justify-content: center;
align-items: center;
}




.k6{
width: 50%;
height: 60vw;
background-color: #B44B47;
display: flex;
  justify-content: center;
  align-items: center;
position: absolute;
margin-left: 0%;
}


.b6, .bc6 {
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
transform: scale(0.9);
  
}

.b6{
  opacity: 1;
  z-index: 1;
  animation: bounce-top 1.5s infinite both;
}

@keyframes bounce-top {
  0% {transform: scale(0.7) translateY(-45px); animation-timing-function: ease-in; }
  24% {}
  40% {transform: scale(0.7) translateY(-24px); animation-timing-function: ease-in;}
  65% {transform: scale(0.7) translateY(-12px); animation-timing-function: ease-in;}
  82% {transform: scale(0.7) translateY(-6px); animation-timing-function: ease-in;}
  93% {transform: scale(0.7) translateY(-4px); animation-timing-function: ease-in;}
  25%,
  55%,
  75%,
  87% {transform: scale(0.7) translateY(0px); animation-timing-function: ease-out;}
  100% {transform: scale(0.7) translateY(0px);animation-timing-function: ease-out; }
}

.bc6{
  opacity: 0;
 
}
.k6:hover .b6{
  opacity: 0;
  animation-play-state: paused;
}
.k6:hover .bc6{
  opacity: 1;
}








.k7{

position: absolute; margin-left: 20%;
background-color: #F5DE91;
width: 50%;
height: 60vw;
display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 50%;
}

.b7, .bc7 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;

  
}

.b7img, .bc7img{
    transform: scale(0.7);
}

.b7{
  opacity: 1;
  z-index: 1;
  animation: rotate-center 1.5s ease-in-out infinite both;
}

@keyframes rotate-center {
  0% { transform: rotate(0); scale: 0.8;}
  100% {transform: rotate(360deg); scale: 0.8; }
}

.bc7{
  opacity: 0;
  z-index: 1;
}
.k7:hover .b7{
  opacity: 0;
  animation-play-state: paused;
}
.k7:hover .bc7{
  opacity: 1;
}






.k8{

position: absolute; margin-left: 40%;
background-color: #82A985;
width: 50%;
height: 60vw;
display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 60vw;
  margin-left: 0%;
}
.b8, .bc8 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;

  
}

.b8{
  opacity: 1;
  z-index: 1;
   animation: jello 1.5s infinite both;
}

@keyframes jello {
  0% {transform: scale(0.8) scale3d(1, 1, 1);}
  30% {transform: scale(0.8) scale3d(1.25, 0.75, 1);}
  40% {transform: scale(0.8) scale3d(0.75, 1.25, 1);}
  50% {transform:scale(0.8) scale3d(1.15, 0.85, 1);}
  65% {transform: scale(0.8) scale3d(0.95, 1.05, 1);}
  75% {transform: scale(0.8) scale3d(1.05, 0.95, 1);}
  100% {transform: scale(0.8) scale3d(1, 1, 1);}
}

.bc8{
  opacity: 0;
  z-index: 1;
}
.k8:hover .b8{
  opacity: 0;
  animation-play-state: paused;
}
.k8:hover .bc8{
  opacity: 1;
}








.k9{

position: absolute; margin-left: 60%;
background-color: #B44B47;
width: 20%;
height: 25vw;
display: flex;
  justify-content: center;
  align-items: center;
  display: none;
}
.b9, .bc9 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
display: none;
  
}

.b9{
  opacity: 1;
  z-index: 1;
  animation: scale-down 1s linear infinite both;
}

@keyframes scale-down {
  0% {transform: scale(0.8) scale(1);}
  100% {transform: scale(0.8) scale(0.8); }
}


.bc9{
  opacity: 0;
  z-index: 1;
}
.k9:hover .b9{
  opacity: 0;
   animation-play-state: paused;
}
.k9:hover .bc9{
  opacity: 1;
}







.k10{

position: absolute; margin-left: 80%;
background-color: #2C3872;
width: 50%;
height: 60vw;
display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 60vw;
  margin-left: 50%;
}
.b10, .bc10 {

  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;

  
}

.b10{
  opacity: 1;
  z-index: 1;
   animation: wobble 1.5s infinite both;
}

@keyframes wobble {
  0%,
  100% {transform: scale(0.7) translateX(0%); transform-origin: 50% 50%;}
  15% {transform: scale(0.7) translateX(-30px) rotate(-6deg);}
  30% {transform: scale(0.7) translateX(15px) rotate(6deg);}
  45% {transform: scale(0.7) translateX(-15px) rotate(-3.6deg);}
  60% {transform: scale(0.7) translateX(9px) rotate(2.4deg);}
  75% {transform: scale(0.7) translateX(-6px) rotate(-1.2deg);}
}

.bc10{
  opacity: 0;
  z-index: 1;
}
.k10:hover .b10{
  opacity: 0;
  animation-play-state: paused;
}
.k10:hover .bc10{
  opacity: 1;
  transform: scale(0.7);
}






.play{
 display: flex;
flex-direction:  column-reverse;
justify-content: center;
align-items: center;

}


.div1{
 
background-color: #2C3872;
width: 100%;
height: 130vw;
margin-top: 0%;
display: flex;
  justify-content: center;
  align-items: center;
}

.div2{
  background-color: #F5DE91;
  width: 100%;
height: 100vw;
margin-top: 120%;
margin-left: 0%;
display: flex;
justify-content: initial;
 display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    height: 100vw;
    width: 100%;
}

.e1 {
    grid-area: 1 / 1 / 2 / 2;
}

.e12 {
    grid-area: 3 / 3 / 4 / 4;
}







.e1, .ec1{
  margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
  transform: scale(0.5);
}
.e1{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }

    @keyframes rotate-center {
  0% {transform: scale(0.5) rotate(0);}
  100% {transform: scale(0.5) rotate(360deg);}
  }

  .ec1{
  opacity: 0;
  z-index: 1;
  }

.eu1:hover .e1{
  opacity: 0;
  animation-play-state: paused;
}
.eu1:hover .ec1{
  opacity: 1;}







.e2, .ec2{
  margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}
.e2{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec2{
  opacity: 0;
  z-index: 1;
 
}

.eu2:hover .e2{
  opacity: 0;
  animation-play-state: paused;
}
.eu2:hover .ec2{
  opacity: 1;}











.e3, .ec3{
 margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}
.e3{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec3{
  opacity: 0;
  z-index: 1;
 
}
.eu3:hover .e3{
  opacity: 0;
  animation-play-state: paused;
}
.eu3:hover .ec3{
  opacity: 1;}












.e4, .ec4{
margin-top: 5%;
margin-left: 5%;
position: absolute;
object-fit: contain;
transition: opacity 0.1s ease;
}
.e4{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec4{
  opacity: 0;
  z-index: 1;
 
}
.eu4:hover .e4{
  opacity: 0;
  animation-play-state: paused;
}
.eu4:hover .ec4{
  opacity: 1;}










.e5, .ec5{
  margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}
.e5{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec5{
  opacity: 0;
  z-index: 1;

}
.eu5:hover .e5{
  opacity: 0;
  animation-play-state: paused;
}
.eu5:hover .ec5{
  opacity: 1;}









.e6, .ec6{
 margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}
.e6{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec6{
  opacity: 0;
  z-index: 1;
  
}
.eu6:hover .e1{
  opacity: 0;
  animation-play-state: paused;
}
.eu6:hover .ec6{
  opacity: 1;}







.e7, .ec7{
 margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}
.e7{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec7{
  opacity: 0;
  z-index: 1;
  
}
.eu7:hover .e7{
  opacity: 0;
  animation-play-state: paused;
}
.eu7:hover .ec7{
  opacity: 1;}






.e8, .ec8{
 margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}
.e8{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec8{
  opacity: 0;
  z-index: 1;
  
}
.eu8:hover .e8{
  opacity: 0;
  animation-play-state: paused;
}
.eu8:hover .ec8{
  opacity: 1;}




.e9, .ec9{
 margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}
.e9{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec9{
  opacity: 0;
  z-index: 1;
 
}
.eu9:hover .e9{
  opacity: 0;
  animation-play-state: paused;
}
.eu9:hover .ec9{
  opacity: 1;}






.e10, .ec10{
  margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}
.e10{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec10{
  opacity: 0;
  z-index: 1;
 
}
.eu10:hover .e10{
  opacity: 0;
  animation-play-state: paused;
}
.eu10:hover .ec10{
  opacity: 1;}




.e11, .ec11{
 margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}
.e11{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec11{
  opacity: 0;
  z-index: 1;
  
}
.eu11:hover .e11{
  opacity: 0;
  animation-play-state: paused;
}
.eu11:hover .ec11{
  opacity: 1;}




.e12, .ec12{
 margin-top: 5%;
  margin-left: 5%;
    position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}
.e12{
  opacity: 1;
  animation: rotate-center 0.6s infinite both;
  }
   @keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
  }
  .ec12{
  opacity: 0;
  z-index: 1;
 
}
.eu12:hover .e12{
  opacity: 0;
  animation-play-state: paused;
}
.eu12:hover .ec12{
  opacity: 1;}




.eu1, .eu2, .eu3, .eu4, .eu5, .eu6, .eu7, .eu8, .eu9, .eu10, .eu11, .eu12{
    transform: scale(0.5);
}




















.korzina{
  margin-left: -26vw;
  animation: wobble-hor-bottom 3s linear infinite both;
  transform: scale(0.5);
}

@keyframes wobble-hor-bottom {
  0%,
  100% {transform: scale(0.5) translateX(0%); transform-origin: 50% 50%;}
  15% {transform: scale(0.5)  translateX(-30px) rotate(-6deg);}
  30% {transform: scale(0.5) translateX(15px) rotate(6deg);}
  45% {transform: scale(0.5) translateX(-15px) rotate(-3.6deg);}
  60% {transform: scale(0.5) translateX(9px) rotate(2.4deg);}
  75% {transform: scale(0.5) translateX(-6px) rotate(-1.2deg);}
}

.vkorzine{
  width: 227px;
height: 100px;
margin-left:-95vw;
display: block;
position: relative;
background: url("./img/vkorzine.svg");
animation: walk1 1.5s steps(1) infinite;
}

@keyframes walk1{
    0%{ background-position: 0px top;}
    25%{ background-position: -227px top;}
    75% { background-position: -464px top;}
    100% { background-position: -701px top;}
}







.cont3{
width: 100%;
height: 45vw;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}

.bukvaU{
height: 190%;
width: 100%;
background-color: #FFF7E8;
background: url("./img/u768.svg");
animation: walk2 1.5s steps(1) infinite;
}
@keyframes walk2{
    0%{ background-position: 0px top;}
    25%{ background-position: -370px top;}
    75% { background-position: -740px top;}
    100% { background-position: -1110px top;}
}

.bukvaA{
height: 70vw;
width: 100%;
background-color: #B44B47;
 position: relative; 
  overflow: hidden;
  margin-left: 0%;
  margin-top: 25%;
  transform: scale(1.6);
}

.ba{
margin-top: -5%;
margin-left: 40%;
  
  top: 0; 
  left: 50%;
  transform: translateX(-50%); 
  animation: fall 1s ease-in forwards infinite; 
}

@keyframes fall {
  0% {transform:  scale(0.7) translateX(-50%) translateY(0); }
  100% {transform: scale(0.7) translateX(-50%) translateY(320px); }
}

.ba:hover{
   animation: rotate-scale-up 0.65s linear infinite both;
}

@keyframes rotate-scale-up {
  0% {transform: scale(1) rotateZ(0);}
  50% {transform: scale(2) rotateZ(180deg);}
  100% {transform: scale(1) rotateZ(360deg);}
}

.fa{
  margin-top: 0vw;
  margin-left: 22%;
  width: 70%;
  transform: scale(0.5);
   animation: shake-br 2s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
}

@keyframes shake-br {
  0%,
  100% {transform: scale(0.5)  rotate(0deg); transform-origin: 100% 100%;}
  10% {transform: scale(0.5)  rotate(2deg);}
  20%,
  40%,
  60% {transform: scale(0.5)  rotate(-4deg);}
  30%,
  50%,
  70% {transform: scale(0.5)  rotate(4deg);}
  80% {transform: scale(0.5)  rotate(-2deg);}
  90% {transform: scale(0.5) rotate(2deg);}
}

.bukvaI{
height: 100vw;
width: 100%;
background-color: #221E1B;
margin-top: 20%;
margin-left: 0%;
z-index: 1;
}

.bi{
margin-top: 0%;
margin-left: 15%;
width: 100%;
  animation: wobble-hor-bottom 3s linear infinite both;
}



@keyframes wobble-hor-bottom {
  0%,
  100% {transform: scale(0.7) translateX(0%); transform-origin: 50% 50%;}
  15% {transform: scale(0.7) translateX(-30px) rotate(-6deg);}
  30% {transform: scale(0.7) translateX(15px) rotate(6deg);}
  45% {transform: scale(0.7) translateX(-15px) rotate(-3.6deg);}
  60% {transform: scale(0.7) translateX(9px) rotate(2.4deg);}
  75% {transform: scale(0.7) translateX(-6px) rotate(-1.2deg);}
}

.fi{
margin-left: 20%;
margin-top: -15%;
width: 90%;
animation: shake-br 2s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
}
@keyframes shake-br {
  0%,
  100% {transform: rotate(0deg); transform-origin: 100% 100%;}
  10% {transform: rotate(2deg);}
  20%,
  40%,
  60% {transform: rotate(-4deg);}
  30%,
  50%,
  70% {transform: rotate(4deg);}
  80% {transform: rotate(-2deg);}
  90% {transform: rotate(2deg);}
}

.shtrihi{
margin-top: 95vw;
width: 100%;
height: 40vw;
background-color: #2C3872;
overflow: hidden;
position: relative;
display: flex;
align-items: center;

}

.sh2{
position: absolute;
animation: sh22 5s linear infinite alternate;
transform: scale(0.6);
}

@keyframes sh22 {
  0% {transform: scale(0.6) translateX(-100%);}
  100% {transform: scale(0.6) translateX(-50%);}}



.cont4{
height: 36vw;
display: flex;
flex-direction: row;
}

.move{
width: 100%;
height: 36vw;
background-color: #82A985;
z-index: 1;
margin-top: 20%;
}

.bukvaB{
width: 100%;
height: 100vw;
background-color: #B44B47;
margin-left: -100%;
margin-top: 255%;
}

.bb{
  margin-top: 14%;
margin-left: 20%;
animation: wobble-ver-left 1.5s infinite both;
transform: scale(0.5);
transition: opacity 0.8s ease;
}

.bb:hover{
  opacity: 0;
}


@keyframes wobble-ver-left {
  0%,
  100% {transform: scale(0.5) translateY(0) rotate(0); transform-origin: 50% 50%;}
  15% {transform: scale(0.5) translateY(-30px) rotate(-6deg);}
  30% {transform: scale(0.5) translateY(15px) rotate(6deg);}
  45% {transform: scale(0.5) translateY(-15px) rotate(-3.6deg);}
  60% {transform: scale(0.5) translateY(9px) rotate(2.4deg);}
  75% {transform: scale(0.5) translateY(-6px) rotate(-1.2deg);}
}

.fb{
margin-left: -3%;
animation: wobble-ver-left 1.5s infinite both;
margin-top: 0%;
width: 80%;
}

@keyframes wobble-ver-left {
  0%,
  100% {transform: translateY(0) rotate(0); transform-origin: 50% 50%;}
  15% {transform: translateY(-30px) rotate(-6deg);}
  30% {transform: translateY(15px) rotate(6deg);}
  45% {transform: translateY(-15px) rotate(-3.6deg);}
  60% {transform: translateY(9px) rotate(2.4deg);}
  75% {transform: translateY(-6px) rotate(-1.2deg);}
}








.move{

  display: flex;
  flex-direction: row;
  margin-top: 390vw;
  height: 70vw;
}

.item1, .item2, .item3, .item4, .item5, .item6 {
  background-color: #FFF7E8;
 
  width: 15%;
  height: 8%;

  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;

  transform: scale(0.5);
}



.item1{

  margin-top: 5%;
  margin-left: 5%;
  animation: move1 8s linear infinite alternate;
}
@keyframes move1 {
  0%   { left: 5%;  top: 10%; }
  25%  { left: 15%; top: 5%;  }
  50%  { left: 30%; top: 22%; }
  75%  { left: 12%; top: 30%; }
  100% { left: 5%;  top: 10%; }
}
.figc1:hover{
  opacity: 0;
}


.item2{

  margin-top: 5%;
  margin-left: 0%;
  animation: move2 11s linear infinite alternate;
}

@keyframes move2 {
  0%   { left: 40%; top: 5%;  }
  20%  { left: 60%; top: 8%;  }
  40%  { left: 55%; top: 30%; }
  70%  { left: 30%; top: 28%; }
  100% { left: 40%; top: 5%;  }
}

.figc2:hover{
  opacity: 0;
}

.item3{

  margin-top: 15%;
  margin-left: -50%;
  animation: move3 9s linear infinite alternate;
}

@keyframes move3 {
  0%   { left: 75%; top: 15%; }
  30%  { left: 70%; top: 35%; }
  60%  { left: 82%; top: 50%; }
  100% { left: 75%; top: 15%; }
}

.figc3:hover{
  opacity: 0;
}

.item4{

  margin-top: 5%;
  margin-left: 10%;
 animation: move4 10s linear infinite alternate;
}
@keyframes move4 {
  0%   { left: 40%; top: 40%; }
  25%  { left: 48%; top: 55%; }
  50%  { left: 35%; top: 65%; }
  75%  { left: 25%; top: 45%; }
  100% { left: 40%; top: 40%; }
}

.figc4:hover{
  opacity: 0;
}

.item5{

  margin-top: 0%;
  margin-left: -10%;
  animation: move5 7s linear infinite alternate;
  
}

@keyframes move5 {
  0%   { left: 8%;  top: 60%; }
  30%  { left: 20%; top: 72%; }
  60%  { left: 10%; top: 80%; }
  100% { left: 8%;  top: 60%; }
}

.figc5:hover{
  opacity: 0;
}

.item6{
 margin-top: 0%;
  margin-left: -60%;
 animation: move6 12s linear infinite alternate;
}

@keyframes move6 {
  0%   { left: 68%; top: 60%; }
  25%  { left: 55%; top: 70%; }
  50%  { left: 72%; top: 82%; }
  75%  { left: 80%; top: 62%; }
  100% { left: 68%; top: 60%; }
}

.figc6:hover{
  opacity: 0;
}

.fig1, .figc1{
position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.fig2, .figc2{
   position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.fig3, .figc3{
   position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.fig4, .figc4{
   position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.fig5, .figc5{
   position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.fig6, .figc6{
   position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}














.cont5{
height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column ;
}




.alf{
background-color: #FFF7E8;
  width: 100%;
  height: 44vw;

   display: grid;
   
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(4, 1fr);
    width: 100%;
  height: 70vw;
  padding: 2%;
  margin-top: 425vw;
}
.y1{
  grid-area: 1 / 2 / 3 / 4;
}

.y29{
  grid-area: 25 / 26 / 27 / 28;
}


.y6, .y7, .y8, .y14, .y15, .y16, .y22, .y23, .y24, .y30, .y31, .y32, .yc6, .yc7, .yc8, .yc14, .yc15, .yc16, .yc22, .yc23, .yc24, .yc30, .yc31, .yc32, .y5, .y13, .y21, .y29, .yc5, .yc13, .yc21, .yc29{
    display: none;
}

.y1, .y2, .y3, .y4, .y5, .y6, .y7, .y8, .y9, .y10, .y11, .y12, .y13, .y14, .y15, .y16, .y17, .y18, .y19, .y20, .y21, .y22, .y23, .y24, .y25, .y26, .y27, .y28, .y29, .y30, .y31, .y32{
  z-index: 1;
  opacity: 1;
transform: scale(0.7);
  }

  .yc1, .yc2, .yc3, .yc4, .yc5, .yc6, .yc7, .yc8, .yc9, .yc10, .yc11, .yc12, .yc13, .yc14, .yc15, .yc16, .yc17, .yc18, .yc19, .yc20, .yc21, .yc22, .yc23, .yc24, .yc25, .yc26, .yc27, .yc28, .yc29, .yc30, .yc31, .yc32{

  opacity: 0;
  z-index: 1;
 transform: scale(0.7);
}
.yct1:hover .y1, .yct2:hover .y2, .yct3:hover .y3, .yct4:hover .y4, .yct5:hover .y5, .yct6:hover .y6, .yct7:hover .y7, .yct8:hover .y8, .yct9:hover .y9, .yct10:hover .y10, .yct11:hover .y11, .yct12:hover .y12, .yct13:hover .y13, .yct14:hover .y14, .yct15:hover .y15, .yct16:hover .y16, .yct17:hover .y17, .yct18:hover .y18, .yct19:hover .y19,  .yct20:hover .y20,  .yct21:hover .y21, .yct22:hover .y22,  .yct23:hover .y23, .yct24:hover .y24, .yct25:hover .y25, .yct26:hover .y26, .yct27:hover .y27, .yct28:hover .y28, .yct29:hover .y29, .yct30:hover .y30, .yct31:hover .y31, .yct32:hover .y32 {
  opacity: 0; 
}
.yct1:hover .yc1, .yct2:hover .yc2, .yct3:hover .yc3, .yct4:hover .yc4, .yct5:hover .yc5, .yct6:hover .yc6, .yct7:hover .yc7, .yct8:hover .yc8, .yct9:hover .yc9, .yct10:hover .yc10, .yct11:hover .yc11, .yct12:hover .yc12, .yct13:hover .yc13, .yct14:hover .yc14, .yct15:hover .yc15, .yct16:hover .yc16, .yct17:hover .yc17, .yct18:hover .yc18, .yct19:hover .yc19,  .yct20:hover .yc20,  .yct21:hover .yc21, .yct22:hover .yc22,  .yct23:hover .yc23, .yct24:hover .yc24, .yct25:hover .yc25, .yct26:hover .yc26, .yct27:hover .yc27, .yct28:hover .yc28, .yct29:hover .yc29, .yct30:hover .yc30, .yct31:hover .yc31, .yct32:hover .yc32{
  opacity: 1;}





.y1, .yc1{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y2, .yc2{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y3, .yc3{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
  margin-left: 9%;
}

.y4, .yc4{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
  margin-left: 13%;
}

.y5, .yc5{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y6, .yc6{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y7, .yc7{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y8, .yc8{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y9, .yc9{
  position: absolute;
  object-fit: contain;
  margin-left: -60%;
  margin-top: 5%;
  transition: opacity 0.1s ease;
}

.y10, .yc10{
  position: absolute;
  object-fit: contain;
  margin-left: -60%;
  margin-top: 5%;
  transition: opacity 0.1s ease;
}

.y11, .yc11{
  position: absolute;
  object-fit: contain;
  margin-left: 46%;
  margin-top: -16%;
  transition: opacity 0.1s ease;
}

.y12, .yc12{
  position: absolute;
  object-fit: contain;
   margin-left: 53%;
  margin-top: -16%;
  transition: opacity 0.1s ease;
}

.y13, .yc13{
  position: absolute;
  object-fit: contain;
   margin-left: 27%;
  margin-top: -11%;
  transition: opacity 0.1s ease;
}

.y14, .yc14{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y15, .yc15{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y16, .yc16{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y17, .yc17{
  position: absolute;
  object-fit: contain;
  margin-left: -20%;
  margin-top: -10%;
  transition: opacity 0.1s ease;
}

.y18, .yc18{
  position: absolute;
  object-fit: contain;
   margin-left: -19%;
  margin-top: -10%;
  transition: opacity 0.1s ease;
}

.y19, .yc19{
  position: absolute;
  object-fit: contain;
   margin-left: -15%;
  margin-top: -12%;
  transition: opacity 0.1s ease;
}

.y20, .yc20{
  position: absolute;
  object-fit: contain;
   margin-left: -15%;
  margin-top: -10%;
  transition: opacity 0.1s ease;
}

.y21, .yc21{
  position: absolute;
  object-fit: contain;
   margin-left: 54%;
  margin-top: -24%;
  transition: opacity 0.1s ease;
}

.y22, .yc22{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y23, .yc23{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y24, .yc24{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y25, .yc25{
  position: absolute;
  object-fit: contain;
  margin-top: -7%;
  margin-left: -10%;
  transition: opacity 0.1s ease;
}

.y26, .yc26{
  position: absolute;
  object-fit: contain;
   margin-top: -6%;
  transition: opacity 0.1s ease;
}

.y27, .yc27{
  position: absolute;
  object-fit: contain;
   margin-top: -4%;
   margin-left: 5%;
  transition: opacity 0.1s ease;
}

.y28, .yc28{
  position: absolute;
  object-fit: contain;
   margin-top: -4%;
   margin-left: 8%;
  transition: opacity 0.1s ease;
}

.y29, .yc29{
  position: absolute;
  object-fit: contain;
   margin-top: -12%;
  transition: opacity 0.1s ease;
}

.y30, .yc30{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y31, .yc31{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}

.y32, .yc32{
  position: absolute;
  object-fit: contain;
  transition: opacity 0.1s ease;
}
 .y1, .y2, .y3, .y4, .y5, .y6, .y7, .y8, .y9, .y10, .y11, .y12, .y13, .y14, .y15, .y16, .y17, .y18, .y19, .y20, .y21, .y22, .y23, .y24, .y25, .y26, .y27, .y28, .y29, .y30, .y31, .y32{
  z-index: 1;
 }






.fall{
background-color: #F5DE91;
  width: 100%;
  height: 58vw;
  position: relative;
  overflow: hidden;
  margin-top: 25vw;
}



.h1 {
    left: 5%;
    top: -20%;
    position: absolute;
    animation: fall1 4000ms linear infinite;
}

@keyframes fall1 {
    0%   { top: -20%; transform: rotate(0deg); }
    25%  { top: 10%;  transform: rotate(90deg); }
    50%  { top: 40%;  transform: rotate(180deg); }
    75%  { top: 70%;  transform: rotate(270deg); }
    100% { top: 110%; transform: rotate(360deg); }
}

.h2 {
    left: 15%;
    top: -30%;
     position: absolute;
    animation: fall2 4500ms linear infinite;
}

@keyframes fall2 {
    0%   { top: -30%; transform: rotate(0deg); }
    20%  { top: 0%;   transform: rotate(-80deg); }
    40%  { top: 30%;  transform: rotate(-160deg); }
    70%  { top: 70%;  transform: rotate(-260deg); }
    100% { top: 120%; transform: rotate(-360deg); }
}

.h3 {
    left: 25%;
    top: -10%;
     position: absolute;
    animation: fall3 3800ms linear infinite;
}

@keyframes fall3 {
    0%   { top: -10%; transform: rotate(0deg); }
    30%  { top: 20%;  transform: rotate(120deg); }
    60%  { top: 60%;  transform: rotate(240deg); }
    100% { top: 115%; transform: rotate(480deg); }
}

.h4 {
    left: 35%;
    top: -25%;
     position: absolute;
    animation: fall4 5000ms linear infinite;
}

@keyframes fall4 {
    0%   { top: -25%; transform: rotate(0deg); }
    15%  { top: 0%;   transform: rotate(-60deg); }
    40%  { top: 35%;  transform: rotate(-160deg); }
    75%  { top: 80%;  transform: rotate(-300deg); }
    100% { top: 130%; transform: rotate(-420deg); }
}


.h5 {
    left: 45%;
    top: -15%;
     position: absolute;
    animation: fall5 4200ms linear infinite;
}

@keyframes fall5 {
    0%   { top: -15%; transform: rotate(0deg); }
    25%  { top: 15%;  transform: rotate(100deg); }
    50%  { top: 50%;  transform: rotate(220deg); }
    75%  { top: 85%;  transform: rotate(340deg); }
    100% { top: 125%; transform: rotate(460deg); }
}

/* h6 */
.h6 {
    left: 55%;
    top: -35%;
     position: absolute;
    animation: fall6 4700ms linear infinite;
}

@keyframes fall6 {
    0%   { top: -35%; transform: rotate(0deg); }
    30%  { top: 5%;   transform: rotate(-110deg); }
    55%  { top: 45%;  transform: rotate(-230deg); }
    85%  { top: 95%;  transform: rotate(-350deg); }
    100% { top: 135%; transform: rotate(-430deg); }
}

/* h7 */
.h7 {
    left: 65%;
    top: -5%;
     position: absolute;
    animation: fall7 3600ms linear infinite;
}

@keyframes fall7 {
    0%   { top: -5%;  transform: rotate(0deg); }
    35%  { top: 25%;  transform: rotate(140deg); }
    65%  { top: 65%;  transform: rotate(280deg); }
    100% { top: 120%; transform: rotate(560deg); }
}

/* h8 */
.h8 {
    left: 75%;
    top: -20%;
     position: absolute;
    animation: fall8 5200ms linear infinite;
}

@keyframes fall8 {
    0%   { top: -20%; transform: rotate(0deg); }
    20%  { top: 5%;   transform: rotate(-90deg); }
    45%  { top: 40%;  transform: rotate(-200deg); }
    80%  { top: 90%;  transform: rotate(-340deg); }
    100% { top: 140%; transform: rotate(-480deg); }
}

/* h9 */
.h9 {
    left: 10%;
    top: -40%;
     position: absolute;
    animation: fall9 5500ms linear infinite;
}

@keyframes fall9 {
    0%   { top: -40%; transform: rotate(0deg); }
    25%  { top: -5%;  transform: rotate(120deg); }
    50%  { top: 35%;  transform: rotate(240deg); }
    75%  { top: 80%;  transform: rotate(360deg); }
    100% { top: 145%; transform: rotate(540deg); }
}

/* h10 */
.h10 {
    left: 30%;
    top: -30%;
     position: absolute;
    animation: fall10 4300ms linear infinite;
}

@keyframes fall10 {
    0%   { top: -30%; transform: rotate(0deg); }
    20%  { top: 0%;   transform: rotate(-100deg); }
    50%  { top: 45%;  transform: rotate(-220deg); }
    80%  { top: 95%;  transform: rotate(-340deg); }
    100% { top: 150%; transform: rotate(-460deg); }
}

/* h11 */
.h11 {
    left: 50%;
    top: -10%;
     position: absolute;
    animation: fall11 3900ms linear infinite;
}

@keyframes fall11 {
    0%   { top: -10%; transform: rotate(0deg); }
    30%  { top: 20%;  transform: rotate(130deg); }
    60%  { top: 60%;  transform: rotate(260deg); }
    100% { top: 135%; transform: rotate(520deg); }
}

/* h12 */
.h12 {
    left: 70%;
    top: -25%;
     position: absolute;
    animation: fall12 4800ms linear infinite;
}

@keyframes fall12 {
    0%   { top: -25%; transform: rotate(0deg); }
    25%  { top: 5%;   transform: rotate(-120deg); }
    55%  { top: 50%;  transform: rotate(-260deg); }
    85%  { top: 100%; transform: rotate(-380deg); }
    100% { top: 155%; transform: rotate(-520deg); }
}

/* h13 */
.h13 {
    left: 85%;
    top: -15%;
     position: absolute;
    animation: fall13 5100ms linear infinite;
}

@keyframes fall13 {
    0%   { top: -15%; transform: rotate(0deg); }
    20%  { top: 10%;  transform: rotate(150deg); }
    45%  { top: 45%;  transform: rotate(300deg); }
    75%  { top: 95%;  transform: rotate(480deg); }
    100% { top: 160%; transform: rotate(660deg); }
}
.h1, .h2, .h3, .h4, .h5, .h6, .h7, .h8, .h9, .h10, .h11, .h12, .h13{
    transform: scale(0.6);
}







.podval{

   position: relative;
    width: 100%;
    height: 16vw;
    top: 0;
    left: 0;
    word-wrap: nowrap;
    z-index: 1;
    overflow-x: hidden;
}

.pd{
  position: absolute;
    animation: text3 20s linear infinite;
    height: 16vw;
}

@keyframes text3{
0%{ left: 0%; top: 0;}
100%{ left: -400%; top: 0;}
}
}