h1{
    color: rgb(17, 124, 67);
}



.sec1,#zmf1,.sec2,.sec5,.sec3,.sec4,.sec7,#fon5,.sec6{
  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;
  justify-items: end;
 

}



#zmf1{
     background-image:url(../images/zmey/fondom.webp);
}

.sec2{
    background-image:url(../images/zmey/fongor.webp);
}
.sec5{
    background-image:url(../images/zmey/fon51.webp);
}
#lp5{
    height: 100%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards, skock 6s ease-in-out forwards 2s;
    margin-bottom: -35%;
}
@keyframes skock {
    
    from{transform: translate();}
    to{transform: translate(260%,-45%) scale(1.6);}
}
#m1{
    height: 100%;
    margin-left: 45%;
    opacity: 0;
    animation:apir 2s ease-in-out forwards, skk 8s ease-in-out forwards 3s;
}
#pa1{
    height: 90%;
    margin-left: -100%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards;
}
@keyframes jumpupz {
    from{transform: translateY();opacity: 1;}
    to{transform: translateY(-45%) rotate(3deg);opacity: 1;}
    65%{transform: translateY(-75%) rotate(-3deg);opacity: 1;}
   
}
#lg1{
    height: 60%;
    opacity: 0%;
    margin-left: 25%;
    margin-bottom: -20%;
    animation: apir 2s ease-in-out forwards,jumpupz 6s ease-in-out 3 2s;
    position: relative;
    z-index: 1;
}
@keyframes rost4{
    from{transform: scale(1) ;}
    to{transform: scale(3) translate(-20%,2%);}
}
#lg2{
    height: 25%;
    margin-bottom: 20%;
    margin-left: 20%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards,rost4 5s ease-in-out forwards 2s,cartd4 6s ease-in-out forwards 7s;;
}
@keyframes cartd4 {
    from{transform: scale(3) translate(-20%,2%);}
    50%{transform: scale(3)  translate(-20%,2%) rotate(-3deg);}
    100%{transform: scale(3)  translate(-20%,2%) rotate(3deg);}
}
@keyframes jumpup31 {
    from{ttransform: translateY(-185%) rotate(8deg) scale(3);opacity: 1;}
    to{transform: translate(-200%,-120%) rotate(3deg);opacity: 1;}
   
}
#fon3{
    background-image:url(../images/zmey/fonsk1.webp);
    background-position: left; 
    animation: letu 14s ease-in-out forwards;
}
#fonm3{
    background-image:url(../images/zmey/fonm3.webp);
    background-position: left; 
    animation: letu 14s ease-in-out forwards;
}
#fon5{
    background-image:url(../images/zmey/fon5.webp);
    background-position: left; 
    animation: letu 14s ease-in-out forwards;
}
@keyframes karmuv{
    from{transform: translate();}
    to{transform: translate(45%,-10%) scale(1.5);}
}
#ka5{
    height: 100%;
    opacity: 0;
    margin-bottom: -55%;
    margin-left: -65%;
    animation: apir 2s ease-in-out forwards,karmuv 7s ease-in-out forwards 2s;
}
.sec4{
    background-image:url(../images/zmey/fonm4.webp);
}
@keyframes kovmo{
    0%{transform: translate();}
    50%{transform: translate() ; filter: brightness(3);}
    100%{transform: translateX(-20%);}
}
#kz4{
    height: 150%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards,kovmo 8s ease-in-out forwards 2s;
}
#lgp31{
    opacity: 0;
    height: 100%;
    margin-bottom: -25%;
    animation: apir 2s ease-in-out forwards, skk 6s ease-in-out 2;
    position: relative;
    z-index: 1;
}
#zmk{
    height: 210%;
    opacity: 0;
    margin-left: -50%;
    margin-bottom: -150%;
    position: relative;
    z-index: 2;
    animation: apir 2s ease-in-out forwards 14s, jumpup 12s ease-in-out 16s;
}
#lgp3{
    opacity: 0;
    height: 100%;
    margin-bottom: -25%;
    animation: apir 2s ease-in-out forwards, skk 6s ease-in-out 2;
}
@keyframes movz{
    from{transform: translate() rotate(-2deg);}
    to{transform: translateY(-15%) rotate(2deg) scale(1.3);}
}
#lg22{
    height: 100%;
    margin-left: -5%;
    margin-bottom: -70%;
    opacity: 0;
    animation:apir 2s ease-in-out forwards, movz 8s ease-in-out forwards 4s;
}
@keyframes cartd {
    from{transform: scale(3) translateY(5%);}
    50%{transform: scale(3)  translateY(5%) rotate(-3deg);}
    100%{transform: scale(3)  translateY(5%) rotate(3deg);}
}
#ca2{
    height: 50%;
    
    margin-left: -20%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards,rost 5s ease-in-out forwards 2s,cartd 6s ease-in-out forwards 7s;
}
#zm1{
    height: 45%;
    margin-left: -80%;
    margin-bottom: -20%;
    position: relative;
    z-index: 2;
    opacity: 0;
    animation: apir 2s ease-in-out forwards, dfli 8s ease-in-out 2 2s;
    
    
}

#bz6{
   background-image:url(../images/zmey/fonba.webp); 
}
#lf7{
   background-image:url(../images/zmey/fonze.webp);
  background-position: right; 
  animation: letunaz 8s ease-in-out forwards;
}
#fonl72{
    background-image:url(../images/zmey/fon22.webp);
}
#zz7{
    height: 150%;
    opacity: 0;
    margin-left: -15%;
    margin-bottom: -55%;
    animation: apir 2s ease-in-out forwards, zdmove 5s ease-in-out forwards 4s;
    
}
@keyframes ivap{
    from{transform: translateX(0);}
    to{transform: translateX(-5%);}
}
#zmn7{
    height: 200%;
    margin-bottom: -95%;
    margin-left: -40%;
     opacity: 0;
    animation: apir 2s ease-in-out forwards 2s, ivap 8s ease-in-out forwards 4.5s;
}
#zm7{
    opacity: 0;
    height: 20%;
    margin-left: 42%;
    margin-bottom: -3%;
    animation: apir 2s ease-in-out forwards 8s, dfli 8s ease-in-out 10s,disapr 2s ease-in-out forwards 18s;
}
#sd7{
    opacity: 0;
    height: 100%;
    margin-left: -45%;
    animation: apir 2s ease-in-out forwards 18s;
}
#pm6{
    height: 130%;
    margin-bottom: -70%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards, skk 6s ease-in-out 3 2s;
}
#zv6{
    height: 150%;
    margin-left: -55%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 8s, vetmuv 12s ease-in-out forwards 10s;
    
}
#mz6{
    height: 95%;
    margin-bottom: -5%;
    opacity: 0;
    position: relative;
    z-index: 1;
    
    animation: apir 2s ease-in-out forwards;
}
#mz6:hover, #mz6:focus{
    z-index: 3;
    transform: scale(1.2);
}
#mu6{
    height: 120%;
    margin-bottom: -20%;
    opacity: 0;
    margin-left: -5%;
    position: relative;
    z-index: 2;
    animation: apir 2s ease-in-out forwards;
}
#mu6:hover,#mu6:focus{
    animation:apir 2s ease-in-out forwards, rost2 8s ease-in-out forwards 2s;
}
#ht2{
    height: 100%;
    margin-left: -25%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards, zdmove 3s ease-in-out forwards 8s;
}
@media screen and (width>=1200px) {
.sec1,#zmf1,.sec2,#dv1,#kof2,.sec3,.sec4,.sec7,#fon5,.sec6,.sec5{
    height: 600px;
    width: 620px;
}

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

}

@media screen and (width<330px) {
.sec1,#zmf1,.sec2,#dv1,#kof2,.sec3,.sec4,.sec7,#fon5,.sec6,.sec5{
    height: 254px;
    width: 260px;
}

}