h1{
    color: rgb(109, 5, 61);
}
.sad1,#brz2,#brz3,.vorz,#vrz,.uezd,#udz,.polvol,#vlk,.zardol,#dlz0,#dlz1,.ivaniv,
.meetfr,#mfr,#ivs,.usld,#dmr,.afzar,#afz,#maf,.nochi,#nsk,#elz,.metelen,#mel,
.polvol2,#veli,#mel2,.konush,#mek,.transvl,#tvl,.putdl, #ptd,.killiv,#kiv,.ugrel,#elur,
.porst,#prtr,.tresf,#trf,#dob,.spasd,#spd,#nhp,.fondols,#dolsk,#trans{
  height: 300px;
  width: 310px;
  display: flex;
  align-items: end;
  border-radius: 8px;  
  justify-self: center;
  overflow: hidden;
  
  }
.vorz{
    animation: playbg 1s ease-in-out forwards;
}

.sad1,.uezd,#udz,.polvol,#vlk,.zardol,#dlz0,#dlz1,.ivaniv,
.meetfr,#mfr,#ivs,.usld,#dmr,.afzar,#afz,#maf,.nochi,#nsk,#elz,.metelen,#mel,
.polvol2,#veli,#mel2,.konush,#mek,.transvl,#tvl,.putdl, #ptd,.killiv,#kiv,.ugrel,#elur,
.porst,#prtr,.tresf,#trf,#dob,.spasd,#spd,#nhp,.fondols,#dolsk{
   animation: playbg 2s ease-in-out forwards;
}
  
#nhp{
    background-image: url(../images/sey2/wintfon.webp);
    background-size: cover;
    background-position: right;
}
#evp{
    height: 250px;
    margin-bottom: -15%;
    margin-left: -15%;
    animation:ukmove 1s ease-in 1 1s, skokup 1s linear forwards 2s;
}
@keyframes skokup{
    from{transform: translate();}
    to{transform: translate(149%,-95%);}
}


.polet{
    animation: playbg 2s ease-in-out forwards;
}
.sad1{
    background-image: url(../images/sey2/fonsad.webp);
    background-size: cover;
    background-position: left;
    
    
}


#vrz{
   background-image: url(../images/sey2/fonyab.webp);
    background-size: cover;
   animation: changey 3s ease-in-out forwards 2s; 
}
@keyframes changey{
    from{background-image: url(../images/sey2/fonyab.webp) ;}
    to{background-image: url(../images/sey2/fonbez.webp) ;}
}
#md{
    height: 350px;
    margin-bottom: -25%;
    margin-left: 25%;
     animation: apir 2s ease-in forwards ;
     
    
}  
#iv{
   height: 350px;
    margin-bottom: -25%;
    opacity: 0;
    animation: apir 2s ease-in forwards 3s;
    
    
}
#vs{
   height: 350px;
    margin-bottom: -25%;
    margin-left: -5%;
    animation: apir ease-in forwards 3s;
   
}
#brz3{
    animation:letu 3s ease-in forwards;
}
#brz2{
    animation:letus 3s ease-in forwards;
}
.polet,#plt,.lastiv,#lv{
  height: 330px;
  width: 600px;
  display: flex;
  justify-self: center;
  align-items: end;
  overflow: hidden;  
  border-radius: 8px;
  background-color: rgb(226, 216, 235);
}
#plt{
    background-image: url(../images/sey2/sad.webp);
    background-size: cover;
    filter: brightness(0.6);
    
}


#zpv{
    height: 170px;
    animation: blesk 2s ease-in-out 3,jumpup3 0.3s ease-in-out forwards 3s;
    margin-left: 35%;
     margin-bottom: 25%;
    
}
#ivt{
    height: 250px;
    margin-left: 15%;
   
}
#p1{
    height: 55px;
    opacity: 0;
    margin-left: -50%;
    margin-bottom: 25%;
    animation:apir 2s ease-in-out forwards 2s,blesk 2s ease-in-out 3 5s, vetmuv 5s ease-in-out forwards 4s;
}
#zr2{
    height: 250px;
    margin-bottom: -25%;
    opacity: 0;
    animation: apir 2s ease-in forwards;
}

#udz{
    background-image: url(../images/sey2/bratfon1.webp);
    background-size: cover;
    background-position:right;
    animation:letunaz 9s ease-in-out forwards, darke 7s ease-in-out forwards;
}

#vsk{
    height: 250px;
    margin-left: -5%;
     opacity: 0;
    animation: apir 1s ease-in forwards, skk 4s ease-in 7,disapr 2s forwards 7s;
    
}
#dmk{
    height: 300px;
     margin-left: -45%;
     
     opacity: 0;
    animation: apir 1s ease-in forwards, skk 4s ease-in 7 0.5s,disapr 2s forwards 7s;
}

#vlk{
     background-image: url(../images/sey2/fonvolk.webp);
    background-size: cover;
    background-position:right;
}
#polvol2,#veli{
     background-image: url(../images/sey2/fonskak.webp);
    background-size: cover;
    background-position:right;
    
}
#veli{
    filter: brightness(0.6);
}
#vlk,#veli{
    animation:letunaz 0.5s linear 22;
}
#viv{
    height: 250px;
    margin-bottom: -10%;
    margin-left: 25%;
    animation:skk 2s ease-in 5 0.5s,disapr 2s ease-in-out forwards 9s;
}
#viv2{
    height: 250px;
    margin-bottom: -35%;
    margin-left: 25%;
    animation:skk 2s ease-in 5 0.5s,disapr 2s ease-in-out forwards 9s;
}
#dlz0{
    background-image: url(../images/sey2/dolmszarstv.webp);
    background-size: cover;
    background-position: left;
    animation: letu 5s ease-in forwards;
    
}

#dlz1{
    background-image: url(../images/sey2/domlat.webp);
    background-size: cover;
    
}
#zp2{
    height: 230px;
    margin-left: 80%;
    margin-bottom: -15%;
    animation: prygsk 5s ease-in-out forwards,blesk 2s ease-in 3 2s;
}
@keyframes prygsk{
    from{transform: translate(0);}
    50%{transform: translate(-35%,-125%);}
    to{transform: translate(-65%,25%) scale(1.5);}
}
#vzd{
    opacity: 0;
    margin-left: 75%;
    height: 250px;
    animation: apir 3s ease-in forwards 5s;
}
#ivs{
    background-image: url(../images/sey2/zakat235.webp);
    background-size: cover;
    background-position: right;
    animation: letunaz 1s linear forwards 6;
    
}

#mfr{
    background-image: url(../images/sey2/meetdr.webp);
    background-size: cover;
}
#urk{
    height: 350px;
    margin-bottom: -35%;
    animation: skk 2s ease-in 3 0.5s,ivap3 0.5s ease-in-out forwards 6s;
}
#gvl{
    height: 450px;
   

}
#gvl{
    margin-left: -85%;
    animation: vlap 4s ease-in-out forwards 5s;
     margin-bottom: -55%;
}
#ivv{
    height: 330px;
    margin-left: 95%;
    animation: ivap 4s ease-in forwards 2s;
    margin-bottom: -15%;
}
@keyframes ivap{
    from{transform: translateX(0);}
    to{transform: translateX(-55%);}
}
@keyframes ivap3{
    from{transform: translateX(0);}
    to{transform: translateX(-105%);}
}
@keyframes ivap2{
    from{transform: translateX(0);}
    to{transform: translateX(-85%);}
}
@keyframes vlap{
    from{transform: translateX(0);}
    to{transform: translateX(65%);}
}
@keyframes vlap2{
    from{transform: translateX(0);}
    to{transform: translate(95%,10%);}
}

#dmr{
     background-image: url(../images/sey2/konfon2.webp);
    background-size: cover;
    
}
@keyframes ukr{
    from{background-image: url(../images/sey2/konfon.webp);}
    to{background-image: url(../images/sey2/konfon2.webp);}
}
#dml{
    height: 250px;
    margin-bottom: -5%;
    margin-left: 15%;
    position: relative;
    z-index: 2;
    opacity: 0;
    animation: apir 2s ease-in forwards,rost 3s ease-in-out forwards 6s;
}
#hz{
    height: 300px;
    position: relative;
    z-index: 1;
    margin-left: -105%;
    opacity: 0;
    animation: apir 3s ease-in-out forwards 3s, disapr 3s ease-in-out forwards 6s;
    filter: blur(0.7px);
}

#afz{
    background-image: url(../images/sey2/afonzar.webp);
     background-size: cover;
    background-position: left;
    animation: letu 5s linear forwards;
}
#vlz{
    height: 150px;
    margin-bottom: -20%;
    margin-left: -5%;
    animation:skk 2s ease-in 4, ivap2 6s ease-in-out forwards;
}
#maf{
    background-image: url(../images/sey2/afonfon1.webp);
    background-size: cover;
    animation: zoom1 6s ease-in-out forwards 3s;
}
#af{
    height: 190px;
    margin-left: 15%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards,rost2 6s ease-in-out forwards 3s;
}
@keyframes rost2{
    from{transform: scale(1);}
    to{transform: scale(3) translateY(35%);}
}
.nochi,#nsk{
     background-image: url(../images/sey2/fonsk.webp);
    background-size: cover;
    
}
#nsk{
    animation: letu 1s linear forwards 7;
}
#ic1{
    height: 350px;
    margin-bottom: -58%;
    margin-left: -30%;
    animation:skk 2s ease-in-out 4, vlap2 2s linear forwards 7s;
}
#elz{
     background-image: url(../images/sey2/zarstvoelena2.webp);
    background-size: cover;
    background-position: left;
    animation: letu 6s ease-out forwards;
    
}
#mel{
    background-image: url(../images/sey2/wintfon.webp);
    background-size: cover;
    background-position: left;
    animation: letu 5s ease-in forwards 1s;
}
#nel{
    height: 290px;
    opacity: 0;
   
    animation: apir 3s  ease-in-out forwards 6s;
}
#vle{
    height: 350px;
    margin-bottom: -45%;
    opacity: 0;
    animation: apir 3s  ease-in-out forwards 8s;
}
#vl{
    height: 270px;
    margin-bottom: -25%;
    margin-left:-80%;
    opacity: 0;
    position: relative;
    z-index: 2;
    animation: apir 3s  ease-in-out forwards 2s;
}


#ivev{
    height: 290px;
    margin-left: 45%;
    opacity: 0;
    animation: apir 3s  ease-in-out forwards 3s;
}
#mek{
    background-image: url(../images/sey2/konhouse.webp);
    background-size: cover;
    background-position: right;
    filter: brightness(0.4);
    animation: letunaz 5s ease-in-out forwards,liter 2s ease-in-out forwards 15s;
}
@keyframes liter{
    from{ filter:brightness()}
    to{ filter:brightness(1)}
}
#kkz{
    height: 290px;
    margin-bottom: -25%;
    margin-left: 105%;
    animation: ivap2 6s ease-in-out forwards 5s;
}
#uz{
    height: 95px;
    margin-bottom: 55%;
    margin-left: -15%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 7s,blesk 2s ease-in 2 8s, ivap 0.5s ease-in forwards 12s;
}
#trans{
    background-image: url(../images/sey2/foneiv.webp);
    background-size: cover;
    background-position: center;
}
#eh{
    height: 350px;
    margin-left: 10%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 3s;
}
#vh{
    height: 350px;
    margin-left: -105%;
    margin-bottom: -10%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 1s, disapr 2s ease-in-out forwards 3s;
}
#ptd{
     background-image: url(../images/sey2/dvafon.webp);
    background-size: cover;
   
}

#elb{
    height: 250px;
    margin-left: -55%;
    margin-bottom: -15%;
    position: relative;
    z-index: 1;
    animation: skk 2s ease-in-out 5 0.5s,vlap2 1s ease-in-out forwards 8s,skk 2s ease-in-out 5 9.5s,vlap5 0.1s ease-in-out forwards 21s;
    
}
#ivl2{
    height: 210px;
    margin-left: -29%;
    margin-bottom: -10%;
    position: relative;
    z-index: 2;
    animation: skk 2s ease-in-out 15,vlap5 0.1s ease-in-out forwards 18s;
}
@keyframes vlap5{
    from{transform: translate();}
    to{transform: translate(195%,15%);}
}
#ptd{
     background-position: left;
    animation: letu 2s linear forwards 11;
}
#kiv{
    background-image: url(../images/sey2/dub1.webp);
    background-size: cover;    
    animation: temno 5s ease-in-out 8s forwards; 
}
@keyframes temno{
    from{filter: brightness();}
    to{filter: brightness(0.2);}

}
#dk{
    height: 280px;
    margin-bottom: -10%;
    margin-left: -40%;
    opacity: 0;
    position: relative;
    z-index: 1;
    animation: apir 2s ease-in-out forwards 2s,vlap 3s ease-in forwards 5s,disapr 3s ease-in-out forwards 12s;

}
#vak{
    height: 280px;
    margin-bottom: -10%;
    margin-left: 15%;
    opacity: 0;
    position: relative;
    z-index: 2;
    animation: apir 2s ease-in-out forwards 2s,ivap 3s ease-in forwards 5s,disapr 3s ease-in-out forwards 12s;
   
}
#ik{
    height: 55px;
    margin-bottom: 25%;
    margin-left: 15%;
     position: relative;
    z-index: 0;
    animation: disapr 3s ease-in-out forwards 12s;
    
}

#elur{
    background-image: url(../images/sey2/elenfonk.webp);
    background-size: cover;
    
    animation: letu 5s linear forwards 2s;
    
}
#edk{
    height: 110px;
    margin-bottom: 23%;
    opacity: 0;
    margin-left: -25%;
    position: relative;
    z-index: 1;
    animation: apir 1s ease-in-out forwards 7s;
}
#dmi{
    height: 320px;
    margin-bottom: -10%;
     position: relative;
    
    z-index: 2;
    opacity: 0;
    filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.3));
    animation: apir 2s ease-in-out forwards 7s,ugrd 2s ease-in-out forwards 8s;
}
@keyframes ugrd{
    from{ transform: scale(1);}
    to{ transform: scale(0.9) translate(5%,-5%);}
}
#prtr{
    background-image: url(../images/sey2/fontrup.webp);
    background-size: cover;
    animation: zoom 5s linear forwards 2s;
}
#vir{
    height: 350px;
    opacity: 0;
    margin-left: -50%;
    animation: orlmove 5s ease-in-out forwards 6s;
}

#ki{
    height: 150px;
    margin-bottom: -20%;
    animation: orlmove 3s ease-in-out forwards 2s;
}
#dob{
    background-image: url(../images/sey2/fonpro.webp);
    background-size: cover;
    background-position:right;
}
.tresf{
    background-image: url(../images/sey2/fonpro.webp);
    background-size: cover;
    background-position: center;
    
}
#ev4,#e4{
    height: 250px;
    position: relative;
    opacity: 0;
    
}
#e4{
    animation: apir 2s ease-in-out forwards;
}
#ev4{
    z-index: 2;
    margin-left: -5%;
    margin-bottom:-8%;
    animation:apir 2s ease-in-out forwards, dflip 5s ease-in-out  forwards 3 5s;
}
#e4{
    z-index: 1;
    margin-left: -15%;
    margin-bottom:-8%;
}
#g4{
    height: 450px;
    margin-bottom: -55%;
    margin-left: -25%;
    position: relative;
    z-index: 3;
    transform: rotate(25deg);
    opacity: 0;
    animation: apir 2s ease-in-out forwards, dfli 5s ease-in-out  forwards 4,orlmove 2s ease-in-out forwards 18s;
}

#pk2{
    height: 350px;
    margin-left: -30%;
    margin-bottom: -50%;
    transform: rotate(15deg);
     animation: jumpup 7s ease-in-out  forwards 8s;
}
#pz2{
    height: 250px;
    margin-bottom: -22%;
    margin-left: 15%;
    animation: blesk 2s ease-in 2 2s,ukmove 3s ease-in-out 3s;
    
}
.lastiv,#lv{
    background-image: url(../images/sey2/fonlast4.webp);
    background-size: cover;
    background-position: center;
    
}
#lv{
    animation: lastch 3s ease-in-out forwards 15s;
}
#ivl{
    height: 350px;
    margin-left: -45%;
    position: relative;
    z-index: 2;
    opacity: 0;
    animation:apir 2s ease-in forwards 4s;
}
#vsl{
    height: 450px;
    margin-bottom: -25%;
    margin-left: -35%;
     position: relative;
    z-index: 1;
    opacity: 0;
    animation:apir 2s ease-in forwards 1s,disapr 2s ease-in forwards 9s;
}
#ell{
    height: 300px;
    margin-left: -45%;
    
    position: relative;
    z-index: 1;
    animation:apir 2s ease-in forwards 1s, together 2s ease-in-out forwards 6s;
   
    opacity: 0;
    
}
#za6{
    height: 320px;
    margin-left: -20%;
    margin-bottom: -3%;
     position: relative;
    z-index: 2;
     opacity: 0;
     animation: apir 2s ease-in forwards 1s,disapr 2s ease-in forwards 12s;
}
#drl{
    height: 310px;
    margin-left: -25%;
    opacity: 0;
    animation: apir 2s ease-in forwards 1s,disapr 2s ease-in forwards 9s;
}
@keyframes together{
    from{transform: scale();}
    to{transform: scale(1.5) translate(15%,7%); z-index: 3;}
}
@keyframes lastch{
    from{background-image: url(../images/sey2/fonlast4.webp);}
    to{background-image: url(../images/sey2/sad.webp); background-size: cover;}
}
#spd{
    background-image: url(../images/sey2/dub2.webp);
    background-size: cover;  
   animation: zoom2 5s ease-in-out forwards, darke 3s ease-in-out forwards 19s;
}
#vks{
    position: relative;
    z-index: 1;
    height: 250px;
   margin-left: -55%;
    margin-bottom: -18%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 7s;
    
}
#ivkus{
    position: relative;
    z-index: 2;
    height: 230px;
    margin-bottom: -25%;
    margin-left: 28%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 5s;
    
}


#vpz{
    height: 380px;
    
    margin-left:-112%;
    position: relative;
    z-index: 3;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 9s,ukmove 5s ease-in-out 2 11s, rost2 5s ease-in-out forwards 15s;
}



#dolsk{
    background-image: url(../images/sey2/fonskakd2.webp);
    background-size: cover;
    background-position: left;
    animation: letu 1s linear forwards 8;
    
}

#dks{
    height: 250px;
    animation: skk 2s ease-in 3 0.5s,disapr 2s ease-in-out forwards 6s;
    margin-bottom: -25%;
}
#dvs{
    height: 250px;
    opacity: 0;
    margin-left: -95%;
    margin-bottom: -25%;
    animation: apir 2s ease-in-out forwards 6s,skokup 1s linear forwards 7s;
}
#vbs{
    height: 250px;
    opacity: 0;
    margin-left: -18%;
    margin-bottom: -35%;
    animation: apir 2s ease-in-out forwards 9s,ukmove 5s ease-in-out 2 10s,disapr 2s ease-in forwards 12s;
}