h1{
    color: rgb(126, 10, 93);
}

.dom1,.kon2,.mon3,.run4{
  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;
 

}
.fin5{
     background-image:url(../images/lis/lastf.webp);
}
.run4{
     background-image:url(../images/lis/fonfo.webp);
}

#hs4{
    height: 100%;
    margin-bottom: -10%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards,dfli 5s ease-in-out 2s;
    position: relative;
    z-index: 3;
}
#mb4{
    height: 100%;
    margin-bottom: -10%;
    opacity: 0;
    position: relative;
    z-index: 2;
    animation: apir 2s ease-in-out forwards 1s,dfli 5s ease-in-out 3s;
}
@keyframes vetmuv2{
  from{transform: rotate();}
  to{transform: rotate(-36deg) scale(0.8) translate(-255%,135%);filter: blur(0.1);}
}
#bm4{
    height: 18%;
    margin-left: -55%;
    margin-bottom: 70%;
    transform: rotate(-15deg);
    opacity: 0;
    animation: apir 2s ease-in-out forwards 1s,vetmuv2 6s ease-in-out forwards 3s;
    position: relative;
    z-index: 1;
}
#br5{
    height: 90%;
    margin-left: 20%;
    margin-top: 10%;
}
#st5{
    height: 100%;
    animation: skk 6s ease-in-out 5;
    margin-top: 5%;
}
#st51{
    height: 120%;
    animation: skk 6s ease-in-out 3;
    margin-top: 5%;
    margin-left: 45%;
    position: relative;
    z-index: 1;
}
@keyframes vniz{
    from{transform:translate();}
    to{transform: translateY(199%);}
}
#st52{
    height: 120%;
    animation: skk 6s ease-in-out 3,vniz 10s ease-in forwards 12s;
    margin-top: 5%;
    margin-left: 45%;
    position: relative;
    z-index: 1;
}
@keyframes apv{
    0%{opacity: 0; transform: scale(0.6) translateY(5%); }
   33%{opacity: 0.8; transform: scale(0.8)  translateY(-5%);}
   66%{opacity: 0.9; transform: scale(0.9)  translateY(5%);}
   100%{opacity: 1; transform: scale(1.2)  translateY(-5%);}
}
#dd5{
    height: 100%;
    margin-top: -5%;
    opacity: 0;
    margin-left: -35%;
    animation:apir 2s ease-in forwards, apv 8s ease-in-out 2 2s;
}
#st50{
    height: 120%;
    animation: skk 6s ease-in-out 3;
    margin-top: 5%;
    margin-left: -35%;
    position: relative;
    z-index: 1;
}
@keyframes plamrost{
    0%{transform: translateY();}
     40%{transform: translateY(5%) scale(1.3); opacity: 1;}
    80%{transform: translateY(-5%) scale(1);} 
    100%{transform: translateY(-5%) scale(1.6); opacity: 0;}
}
#pl5{
    height: 120%;
    margin-left: 35%;
     position: relative;
    z-index: 2;
    animation: plamrost 15s ease-in-out forwards;
}
@keyframes volnm{
 0%{transform: scale(3)  }
 50%{transform: scale(3)  rotate(15deg)}
 100%{transform: scale(3)  rotate(-15deg);}
 }
#vd5{
    height: 70%;
    margin-top: 35%;
    opacity: 0.7;
    position: relative;
    z-index: 2;
    animation: rost 6s ease-in-out forwards,volnm 11s ease-in-out  forwards 6s;
   
}
#dm1{
    height: 100%;
   
}
#do1{
    opacity: 0;
    animation: apir 2s ease-in-out forwards 1s,disapr 2s ease-in-out forwards 3s,apir 2s ease-in-out forwards 5s;;
    height: 50%;
    margin-bottom: -5%;
    margin-left: -45%;
}
#kon2{
    background-image:url(../images/lis/korov.webp);
    animation:playbg 1s ease-in-out forwards, darke 8s ease-in-out forwards 2s;
}

@keyframes oddf {
    from{}
    to{filter: sepia(0.5);}
}
@keyframes oddf1{
    0%{}
    50%{filter: sepia(0.5);}
    90%{filter: sepia(0.5); opacity: 0.5;}
    100%{opacity: 0;}
}
#fok2{
    background-image:url(../images/lis/fons.webp);
    
}

#kv2{
    height: 80%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards,oddf1 6s ease-in forwards 3s;
    position: relative;
    z-index: 2;
}

#rd2{
    height: 60%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards,oddf1 6s ease-in forwards 5s;
    margin-left: -5%;
    position: relative;
    z-index: 2;
}
#de2{
    height: 25%;
    margin-bottom:40%;
   
    opacity: 0;
    margin-left: -60%;
    animation:apir 2s ease-in-out forwards 3s, rost2 0.3s ease-in-out forwards 11s;
    position: relative;
    z-index: 1;
}

.mon3{
   background-image:url(../images/lis/monastr.webp);
}
#mf3{
   background-image:url(../images/lis/fonbr.webp);
   background-size:cover ;
   animation: letunaz 12s ease-in-out forwards;
   background-position: right;
}
@keyframes ivap3{
    from{transform: translateX(0);}
    to{transform: translateX(-105%);}
}
#b3{
    height: 95%;
    margin-bottom: -45%;
    animation: skk 8s ease-in-out, ivap3 6s ease-in 8s forwards ;
}
#mn3{
    height: 65%;
    opacity: 0;
    margin-bottom: -5%;
    animation: apir 9s ease-in-out  5;
    
}

#fm1{
    height: 60%;
    opacity: 0;
    animation: apir 2s ease-in forwards;
}
#vn2{
    height: 80%;
    margin-left: 25%;
    opacity: 0;
    animation: apir 2s ease-in forwards,gimuv 8s ease-in-out forwards 2s;
}
@keyframes gimuv{
    0%{transform: translate();}
    30%{transform: translate(-3%,-18%); scale: 0.6; filter:blur(0.3px);}
    100%{transform: translate(3%,-25%); scale: 0.4;filter:blur(0.5px);}
}
#kr2{
    height: 130%;
    margin-bottom: -10%;
    margin-left: 5%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards, disapr 2s ease-in-out forwards 3s;
}

#ls1{
    height: 60%;
    margin-bottom: -10%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 3s,disapr 2s ease-in-out forwards 5s;
}
@keyframes lisp{
   from{ background-image:url(../images/lis/dom1.webp);}
    to{ background-image:url(../images/lis/dom.webp);}
}
#dom1{
     animation: lisp 9s ease-in-out forwards;
}
.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) {
.dom1,.kon2,.mon3,.run4{
    height: 600px;
    width: 620px;
}

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

@media screen and (width<330px) {
.dom1,.kon2,.mon3,.run4,.fin5{
    height: 254px;
    width: 260px;
}

}