h1{
    color: rgb(17, 153, 187);
}

.fey1,.ole2,#fn1,.dar3,.den4,.edv5,.mam6,#izd4{
  height: 321px;
  width: 330px;
  display: flex;
  align-items: end;
  border-radius: 8px;  
  animation: playbg 1s ease-in-out forwards;
  justify-self: center;
  overflow: hidden;
  background-size: cover;
  
 

}
@keyframes izm{
    from{background-image:url(../images/fey/kusfon.webp);}
    to{background-image:url(../images/fey/variant2.webp);}

}
.dar3{
    background-image: url(../images/fey/kusfon.webp);
}
@keyframes feym{
    from{transform:translateY() ;}
    to{transform: translateY(50%);}
}
#fd3{
    animation: izm 9s ease-in-out forwards;
}
#ff3{
    height: 100%;
    margin-bottom: -15%;
    margin-left: 35%;
    position: relative;
    z-index: 2;
    opacity: 0;
    animation: apir 2s ease-in forwards 1s;
   
}
#p3{
    height: 100%;
    margin-left: -35%;
    margin-bottom: -15%;
     position: relative;
    z-index: 1;
    opacity: 0;    
    animation: apir 2s ease-in forwards 8s;
}
#fe3{
    height: 208%;
    opacity: 0;
    margin-bottom: -25%;
    animation: apir 2s ease-in-out forwards,feym 8s ease-in-out forwards 2s;
}
#fe3:hover,#fe3:focus,#ff3:hover,#ff3:focus{
    animation: disapr 2s ease-in-out;
}
#fe4{
    height: 60%;    
    margin-left: 25%;
    margin-bottom: -5%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards,rost 8s ease-in-out forwards 2s;
}
#fe41{
    height: 150%;    
    margin-left: -25%;
    margin-bottom: -65%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards,disapr 2s ease-in-out forwards 3s;
    position: relative;
    z-index: 2;
}
@keyframes rost1 {
    0%{transform: translate();}
   55%{transform: translateY(65%) scale(3); }
    100%{transform: translateY(85%) scale(3.2);opacity: 0;}
}
#fe42{
    height: 150%;    
    margin-left: -72%;
    margin-bottom: -65%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 3s,rost1 9s ease-in-out forwards 5s;
    position: relative;
    z-index: 2;
}
#se41{
    height: 50%;   
    margin-bottom: -15%;
    margin-left: -20%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards,rost1 9s ease-in-out forwards 5s;
    position: relative;
    z-index: 1;
}
#se42{
    height: 60%;   
    margin-bottom: -15%;
    margin-left: -15%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards,rost1 9s ease-in-out forwards 5s;
    position: relative;
    z-index: 1;
}
#se43{
    height: 60%;   
    margin-bottom: -25%;
    
    opacity: 0;
    animation: apir 2s ease-in-out forwards,rost1 9s ease-in-out forwards 5s;
    position: relative;
    z-index: 1;
}
#fn1{
    background-image:url(../images/fey/fonfe3.webp);
    background-position: left;
    opacity: 0;
    animation: apir 2s ease-in-out forwards,letu 5s ease-in-out forwards 2s;
}
#oz2{
    background-image:url(../images/fey/fonfey1.webp);
    background-position: left;
    opacity: 0;
    animation: apir 2s ease-in-out forwards,letus 5s ease-in-out forwards 2s;
}
@keyframes vetmuv3{
  from{transform: rotate();}
  to{transform:  scale(0.8) translate(55%,135%);filter: blur(0.1);}
}
.den4{
    background-image:url(../images/fey/variant3.webp);
    animation: zoom2 8s ease-in-out forwards 2s;
}
.mam6{
     background-image:url(../images/fey/fonk.webp);
}
#f21{
    height: 100%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 6s, vetmuv3 5s ease-in-out forwards 8s;
}

#f22{
    height: 100%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 8s, vetmuv3 5s ease-in-out forwards 10s;
}
#f23{
    height: 80%;
    margin-left: -95%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 10s, vetmuv3 5s ease-in-out forwards 12s;
    
}
.edv5{
    background-image:url(../images/fey/ozfo21.webp);
}
#db5{
    height: 30%;
    margin-bottom: 25%;
    margin-left: 30%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards,rost2 8s ease-in-out forwards 2s;
}
@keyframes dbm{
    from{transform: translate() ; opacity: 1;}
    to{transform: translateY(150%) scale(3); opacity: 1;}
}

#pk5{
    height: 75%;
    margin-bottom: 15%;
    margin-left: 25%;
    animation: dflip 9s ease-in 5;
}
#pk51{
    height: 75%;
    margin-bottom: 15%;
   margin-left: -75%;
   position: relative;
   z-index: 1;
    opacity: 0;
    animation:apir 2s ease-in-out forwards, dflip 9s ease-in 2s,disapr 2s ease-in-out forwards 11s;
}
#pk52{
    height: 85%;
    margin-bottom: 5%;
    position: relative;
    z-index: 1;
   margin-left: -125%;
    opacity: 0;
    animation:apir 2s ease-in-out forwards 11s,dflip 9s ease-in 13s 5;
}
#mp5{
    height: 100%;
    margin-left: 55%;
    margin-bottom: -15%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards;
    position: relative;
   z-index: 2;
}
#bd5{
    height: 100%;
    margin-bottom: -50%;
    opacity: 0;
    
    position: relative;
    z-index: 2;

}
#bd52{
    height: 100%;
    margin-bottom: -50%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards, letyv 6s ease-in-out forwards 10s;
    position: relative;
    z-index: 2;
    margin-left: -70%;
   
}
@keyframes pdvi{
    from{transform: translateY();}
    to{transform: translateY(-3%);}
}
#pb5{
    height:90%;   
    position: relative;
    margin-left: 25%;
    margin-bottom: -35%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards,pdvi 5s ease-out 2s,letyv1 6s ease-in-out forwards 10s;
    z-index:1;
    
}
@keyframes letyv{
    from{transform: translateY();}
    to{transform: translateY(-125%) scale(0.5); }
}
@keyframes letyv1{
    from{transform: translateY();}
    to{transform: translateY(-135%) scale(0.6); }
}
#dp1{
    height: 80%;
    opacity: 0;
    margin-bottom: -5%;
    margin-left: -90%;
    animation: apir 2s ease-in-out forwards 6s;
     position: relative;
    z-index: 3;
    
}
#izd4{
    background-image:url(../images/fey/variant3.webp);
}
#ol1{
    height: 120%;
    opacity: 0;
    margin-left: -50%;
    animation: apir 2s ease-in-out forwards 8s,skk 9s ease-in-out 2 10s;
    position: relative;
    z-index: 1;
}
#vz1{
    height: 130%;
    margin-bottom: -20%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 6s;
     position: relative;
    z-index: 2;
}

.fin5{
    width: 600px;
    height: 330px;
    border-radius: 8px;
    display: flex;
    justify-self: center;    
    background-size: cover;
    overflow: hidden;  
    background-color: rgb(41, 188, 139);
    background-size: cover;
    
  }

  @media screen and (width>=1200px) {
.fei1,.ole2,#fn1,.dar3,.den4,.edv5,.mam6,#izd4{
    height: 600px;
    width: 620px;
}

.fin5{
   height: 600px;
   width: 1080px; 
}
}

@media screen and (width<330px) {
.fei1,.ole2,.dar3,.den4,.edv5,.mam6,#izd4{
    height: 254px;
    width: 260px;
}

}