h1{
    color: blue;
}

.meezar,#meezar1,.machehaf,#yag1,.yag,#yag2,.vyag,#vyag1,#vyag2,.tyag,#tyag1,#tyag2,.flyd,#flyd1,.dub{
  height: 300px;
  width: 310px;
  display: flex;
  align-items: end;
  border-radius: 8px;
  
  animation: playbg 1s ease-in-out forwards;
  justify-self: center;
  overflow: hidden;
 

}

#meezar1{
    background-image: url(../images/deviz2/meetfon.webp);
    display: flex;
    justify-content: end;
    background-size: cover;
     animation: playbg 1s ease-in-out forwards;
}
.machehaf{
    background-image: url(../images/deviz2/macheh.webp);
    display: flex;
    background-size: cover;
     animation: playbg 2s ease-in-out forwards;
}
#zdev{
    height: 290px;
    opacity: 0;
    animation: apir 3s ease-in-out forwards;
    align-self: end;
    justify-self: start;
    margin-left: -50%;
    margin-bottom: -19%;
}
#skup{
    height: 250px;
    opacity: 0;
    animation: apir 3s ease-in-out forwards;

}

#mha{
    height: 250px;    
   
    opacity: 0;
    animation: apir 3s ease-in-out forwards 1s;

}
#bl{
    height: 85px;
    margin-left: -73%;
    margin-bottom: -12%;
    opacity: 0;
    animation: apir 3s ease-in-out forwards 3s,blesk 1s ease-in 1 4s;
}

.yag1{
    background-image: url(../images/deviz2/yagfon1.webp);
    background-size: cover;
    background-position: left;
    
    display: flex;
   
    
}

#vyag1{
    background-image: url(../images/deviz2/fondezd.webp);
    background-size: cover;
    background-position: left;
    animation: letu 5s ease-in-out forwards 1s;
    display: flex;
    
    
}
#yag1{
     background-image: url(../images/deviz2/yagfon1.webp);
    background-size: cover;
    background-position: left;
     animation: letu 5s ease-in-out forwards 1s;
    display: flex;
     
}
#izbz{
    height: 370px;
    margin-bottom: -25%;
    opacity: 0;
    animation:apir 2s ease-in forwards 5s, ukmove 3s ease-in  7s;
    margin-left:27%;
}

#yag2{
     background-image: url(../images/deviz2/intyag1.webp);
    background-size: cover;
    background-position: left;
    
    display: flex;
    animation: letu 5s ease-in-out forwards 1s;
}
#y1{
    height: 250px;
    justify-self: end;
    opacity: 0;
    animation: apir 3s ease-in-out forwards 5s;
}
#y2{
    height: 250px;
    justify-self: end;
    opacity: 0;
   
    animation: apir 3s ease-in-out forwards 4s;
}
#izbz2{
    height: 370px;
    margin-bottom: -28%;
    opacity: 0;
    animation:apir 2s ease-in forwards 5s, ukmove 3s ease-in  7s;
    margin-left:5%;
}
#vyag2{
     background-image: url(../images/deviz2/yaga2fon1.webp);
    background-size: cover;
    background-position: left;
    animation: letu 5s ease-in-out forwards 1s; 
    display: flex;
    
}

#tyag1{
    background-image: url(../images/deviz2/yaga3g.webp);
    background-size: cover;    
    animation: letu 5s ease-in-out forwards 1s; 
    display: flex;
    
    
}

@keyframes jumpup2 {
    from{transform: translateY();opacity: 1;}
    to{transform: translateY(5%) rotate(3deg);opacity: 1;}
    75%{transform: translateY(-55%) rotate(8deg);opacity: 1; filter: brightness(2);}
    40%{transform: translateY(-85%) rotate(-13deg);opacity: 1;}
}

#izbz3{
    height: 350px;       
    margin-bottom:-55%;
    opacity: 0;
    animation: jumpup 1s ease-in forwards 6s;
}
#tyag2{
    background-image: url(../images/deviz2/izbyg3.webp);
    background-size: cover;    
    animation: letu 5s ease-in-out forwards 1s; 
    display: flex;
    
    
}
#y3{
    height: 300px;
    opacity: 0;
    animation: apir 2s ease-in forwards 5s;
   
    

}
#hvy{
    height: 170px;
    margin-bottom: -60%;
    animation: jumpup2 5s ease-in forwards 6s;
    justify-self: end;
    margin-left: 20%;
    
}
#mck{
    height: 170px;
    margin-bottom: -60%;
    animation: jumpup3 1s ease-in forwards 6s,ukmove 3s ease-in forwards 7s ;
    justify-self: end;
    margin-left: -10%;
    
}
.flyd{
    background-image: url(../images/deviz2/dlzp.webp);
    background-size: cover;    
    animation: playbg 2s ease-in-out forwards;
    display: flex;
   
    
    
}
#flyd1{
    background-image: url(../images/deviz2/night.webp);
    background-size: cover;    
    animation: letu1 0.5s linear  16;
    display: flex;
    
    
}
#zp{
    height: 500px;
    margin-bottom: -40%;
    position: relative;
    z-index: 2;
    animation:dfli 5s ease-in-out 6, jumpup3 1s ease-in forwards 8s;
}
#fivd{
    height: 50px;
    position: relative;
    z-index: 1;
    margin-left: -50%;
     margin-bottom: 55%;
    animation:dfli 5s ease-in-out 6, disapr 0.5s ease-in forwards 8s;
}
#zp1{
    animation: jumpup3 0.5s ease-in forwards 5s;
    margin-bottom: -180%;
    height: 450px;
}
#d1,#d2,#d3{
    height: 150px;
   
}
#d1{
    margin-left: -120%;
    margin-bottom: -5%;
    opacity: 0;
    animation: apir 2s ease-in-out 3s;
}
#d2{
     margin-left: -120%;
     margin-bottom: 20%;
     opacity: 0;
      animation: apir 2s ease-in-out 2s;
}
#d3{
     margin-left: -50%;
     margin-bottom: 40%;
     opacity: 0;
    animation: apir 2s ease-in-out 1s;
}
.dub{
    background-image: url(../images/deviz2/dub.webp);
    background-size: cover;
    animation: playbg 2s ease-in-out forwards; 
       
}
@keyframes apir4{
    from{ transform: translateY();}
    to{transform: translateY(150%) scale(3);opacity: 0;}
    95%{transform: translateY(150%) scale(3);opacity: 1;}
    90%{ transform: translateY(-50%) scale(3);}
}
#snz{
    height: 30px;
    filter: brightness(0.8);
    opacity: 0;
    animation: apir 2s ease-in forwards 2s,apir4 2s ease-in forwards 5s;
    margin-bottom: 23%;
    margin-left: 32%;

}
#zz{
    height: 150px;
    margin-bottom: -50%;
    animation: jumpup 2s ease-in-out 7s;
}
#utz{
    height: 150px;
    margin-bottom: -45%;
    animation: jumpup 2s ease-in-out 9s;
    margin-left: -100%;
}
#yz{
    height: 150px;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 11s, ukmove 3s ease-in 3 13s;
    margin-left: -100%;
    margin-bottom: -10%;
}
#fil,.fifl{
    height: 330px;
    width: 600px;
    display: flex;
    justify-self: center;
    align-items: end;
    overflow: hidden;  
    border-radius: 8px;
    background-image: url(../images/deviz2/finfon.webp);
    background-size: cover;
    
}
.fifl{
    animation: playbg 2s ease-in-out forwards;
}
#fil{
   
    animation: shaf 3s ease-in forwards 7s;
}
@keyframes shaf {
    from {background-image: url(../images/deviz2/finfon.webp);}
   
   to{background-image: url(../images/deviz2/fon22.webp);}
}
#kz0,#kz4{
    height: 300px;
    position: relative;
    margin-bottom: -3%;
    z-index: 1;
}
#kz4{
    margin-bottom: -6%;
    position: relative;
    z-index: 1;
}
#kz6,#kz5{
    height: 300px;
    margin-bottom: -6%;
    margin-left: -8%;
    position: relative;
    z-index: 1;
}
#kz1,#kz6{
    height: 350px;
    margin-bottom: -10%;
    margin-left: -18%;
    position: relative;
    z-index: 1; 
}
#kz4{
     height: 300px;
    margin-bottom: -8%;
    margin-left: -15%;
    position: relative;
    z-index: 1; 
}
#kz5{
     height: 400px;
    margin-bottom: -18%;
    margin-left: -25%;
    position: relative;
    z-index: 1; 
}
#kz3{
    height: 330px;
    margin-bottom: -6%;
    margin-left: -12%;
     position: relative;
    z-index: 1;
}
#mkz{
    height: 350px;
    margin-bottom: -6%;
    margin-left: -25%;
    position: relative;
    z-index: 3;
    opacity: 1;
}
#nvz{
    height: 280px;
    margin-bottom: -2%;
    margin-left: -15%;
    position: relative;
    z-index: 3;
    opacity: 0;
    animation: apir 3s ease-in-out forwards 4s,zdmove 2s ease-in-out forwards 6s;
}
#kzl{
    height: 420px;
    margin-bottom: -22%;
    position: relative;
    z-index: 2;
    margin-left: -11%;
    opacity: 0;
    animation: apir 3s ease-in-out forwards 5s;
}
#mkz{
    animation: apir 3s ease-in-out forwards,disapr 3s ease-in-out forwards 3s;
}
#kz0,#kz4,#kz6,#kz5,#kz3,#kz1{
    opacity: 0;
    animation: apir 3s ease-in-out forwards,disapr 3s ease-in-out forwards 5s;
}
#yz1{
    height: 85px;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 1s, ukmove 3s ease-in 3 2s;   
    margin-bottom: -3%;
    margin-left: 45%;
}