h1{
    color: rgb(25, 121, 67);
}



.star1,.chet14,.lud2,.fo4,.el11,#fo1,.sin5,.dev9,.sev7,.six6,.vos8,.dve12,#dom3,#finf,.tren13,.chet14,.tres3,#fons10,#six61{
  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;
 

}
#rd1{
    height: 140%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards;
    position: relative;
    z-index: 2;
    margin-bottom: -35%;
    margin-left: -5%;
}
#ma1{
    height: 100%;
    opacity: 0;
    position: relative;
    z-index: 1;
    animation: apir 2s ease-in-out forwards 1s, disapr 2s ease-in-out forwards 5s;
}

#ms1{
    height: 100%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 2s,dotal 8s ease forwards 12s;
    position: relative;
    z-index: 2;
   
   

}
@keyframes dotal{
    from{transform: translate3d();}
    to{ transform: translate3d(2%,2%,1rem);}
}
#ms1:hover,#ms1:focus{
    transform: translate3d(2%,2%,1rem);
}
#ss1{
    height: 100%;
    opacity: 0;
    position: relative;
    z-index: 1;
    animation: apir 2s ease-in-out forwards,domm 5s ease-in-out forwards 6s;
}
@keyframes machm{
    from{transform: translate();}
    to{transform: translateY(25%) scale(1.9); z-index: 3;}
}
@keyframes domm{
    from{transform: translate();}
    to{transform: translate3d(-45%,13%,-15em) scale(1.3) ; }
}
#mh1{
     height: 120%;
    opacity: 0;
    position: relative;
    z-index: 1;
    margin-left: -55%;
    margin-bottom: -35%;
    animation: apir 2s ease-in-out forwards 6s,machm 8s ease-in-out forwards 8s;
}
#pr4{
    height: 100%;
    margin-bottom: -20%;
    margin-left: 15%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards,rost2 8s ease-in-out forwards 4s;
}
#fo1{
    background-image:url(../images/cvetok/lot1.webp);
}
#fon4{
    background-image:url(../images/cvetok/ind3.webp);
    animation: zoom 8s ease-in-out forwards 4s;
}
#dj2{
    background-image:url(../images/cvetok/fon2.webp);
}
.el11{
    background-image:url(../images/cvetok/prudl.webp);
}
.sin5{
    background-image:url(../images/cvetok/dom.webp);
    
}
#pr2{
    background-image:url(../images/cvetok/dprud.webp);
    background-position: left;
    animation: letu 8s ease-in-out forwards;
}
#fons10{
    background-image:url(../images/cvetok/staruh3.webp);
    animation: zoom 9s ease-in forwards 4s;
}
#ms10{
    opacity: 0;
    height: 100%;
    animation: apir 2s ease-out forwards,rost2 9s ease-in forwards 4s;
}
#fn8{
    background-image:url(../images/cvetok/shla.webp);
    background-position: left;
    animation: letu 13s ease-in-out forwards 2s;
}
@keyframes dvm{
    from{transform: rotate(-25deg);}
    to{transform: rotate(25deg);}
}
#ms8{
    height: 100%;
    margin-bottom: -20%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 12s;
}
#mz8{
    height: 15%;
    margin-bottom: 9%;
    margin-left: -15%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 12s,dvm 12s ease-in-out 2 14s;
}
#do4{
    height: 100%;
    opacity: 0;
    margin-left: -15% ;
    animation: apir 2s ease-in forwards, orlmove 2s ease-in-out forwards 1s;
}
.dev9{
    background-image:url(../images/cvetok/foniz.webp);
}

#nv7{
    height: 110%;
    margin-bottom: -25%;
    margin-left: 15%;
    position: relative;
    z-index: 2;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 2s;
}
#zn7{
    height: 110%;
    margin-left: -15%;
    position: relative;
    z-index: 1;
     opacity: 0;
    animation: apir 2s ease-in-out forwards 3s;
}
#zv7{
    height: 150%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards, jumpup 12s ease-in-out forwards 7s;
    margin-left: -100%;
    position: relative;
    z-index: 3;
}
#fos7{
    background-image:url(../images/cvetok/fobzt.webp);
}
#six61{
    background-image:url(../images/cvetok/palan2.webp);
}
.dve12{
     background-image:url(../images/cvetok/svadb3.webp);
}
#dom3{
     background-image:url(../images/cvetok/fon0.webp);
     background-position: left;
     animation: letus 8s ease-in-out forwards;
}
#ss2{
    height: 50%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 8s, dotal 5s ease-in forwards 10s;
   
}
#ms2{
    height: 50%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 8s,domm 8s ease forwards 12s;
    
}
#nv12{
    height: 100%;
    margin-bottom: -5%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 3s, zdmove 5s ease-in-out forwards 5s;
     position: relative;
    z-index: 2;
}
#zn12{
    height: 130%;
    margin-bottom: -20%;
    opacity: 0;
    margin-left: -25%;
    animation:  apir 2s ease-in-out forwards 3s;
    position: relative;
    z-index: 1;
}
#pk6{
    height: 120%;
    animation: skk 12s ease-in-out 3;
    
    position: relative;
    z-index: 2;
     margin-left: -85%;
}
#sp6{
    opacity: 0;
    animation: apir 2s ease-in-out forwards,dfli 12s ease-in-out 3s;
    height: 110%;
    margin-bottom: -15%;
    margin-left: 25%;
    
}
#mz6{
    position: relative;
    z-index: 1;
    height: 35%;
    margin-bottom: -10%;
    margin-left: -40%;
    transform: rotate(35deg);
    opacity: 0;
    animation: apir 2s ease-in-out forwards 1s, vetmuv 6s ease-in-out forwards 3s;
}
#lm11{
    height: 110%;
    opacity: 0;
    margin-bottom: -10%;
    margin-left: -15%;
    animation: apir 2s ease-in-out forwards 10s;
}
#st11{
    height: 120%;
    opacity: 0;
    margin-bottom: -18%;
    animation: apir 2s ease-in-out forwards 8s,disapr 2s ease-in-out forwards 10s;
    margin-left:-100%;
}
#pl11{
    height: 80%;
    margin-bottom: -32%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards,skk 12s ease-in-out  3 2s;
}
#rk2{
    height: 100%;
    margin-left: 67%;
    position: relative;
    z-index: 1;
    opacity: 0;
    animation: apir 2s ease-in-out forwards,dfli 8s ease-in-out;
}
#sg5{
    height: 100%;
    margin-left: 25%;
    opacity: 0;
    animation: apir 2s ease-in forwards,disapr 2s ease-in-out forwards 5s;
}
#ss5{
    height: 100%;
    margin-left: -48%;
     opacity: 0;
    animation: apir 2s ease-in forwards 5s,rost2 9s ease-in-out forwards 9s;
}
@keyframes moval{
    from{transform: translate(0,0);filter:brightness(0.9)}
    to{transform: translate3d(-395%,8%,5rem); filter: brightness(0.7);}
    50%{transform: translate3d(-200%,35%,5rem); filter: brightness(1);}
    
}
@keyframes moval2{
    from{transform: translate(0,0);filter:brightness(0.9)}
    to{transform: translate3d(395%,8%,5rem); filter: brightness(0.7);}
    50%{transform: translate3d(200%,35%,5rem); filter: brightness(1);}
    
}
#dv9{
    height: 100%;
    opacity: 0;
    margin-bottom: -10%;
    margin-left: 90%;
    animation: apir 2s ease-in-out forwards,moval 12s ease-in-out forwards 2s;
}
#st9{
    height: 100%;
    opacity: 0;
    margin-bottom: -10%;
    margin-left: -160%;
    animation: apir 2s ease-in-out forwards 15s,moval2 14s ease-in-out forwards 18s;
}
#gg2{
    height: 7%;
    margin-bottom: 80%;
   
    position: relative;
    z-index: 2;
    margin-left: -32%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 8s, blesk 5s ease-in-out forwards 3 10s,blesk 5s ease-in-out forwards 3 26s;
}
@keyframes djen{
    from{transform: translateY();}
    to{transform: translateY(49%);}
}
@keyframes djen2{
    from{transform: translateY(49%);}
    to{transform: translateY(49%) rotate(2deg);}
}


#finf{
     background-image:url(../images/cvetok/lfon15.webp);
     background-position: right;
     animation: letunaz 6s ease-in-out forwards;
}
.tren13{
    background-image:url(../images/cvetok/domp.webp);
}
.tres3{
    background-image:url(../images/cvetok/var.webp);
}
.chet14{
    background-image:url(../images/cvetok/lfon151.webp);
}
#pt14{
    height: 35%;
    opacity: 0;
    margin-bottom: 55%;
    margin-left: 55%;
    animation: apir 2s ease-in forwards, orlmove 12s ease-out forwards 2s;
}
#st13{
    height: 130%;
    margin-left: -50%;
    margin-bottom: -20%;
    opacity: 0;
    animation: apir 2s ease-in forwards, disapr 2s ease-in-out forwards 4s;
}
#kr13{
    height: 100%;
    margin-left: -75%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 4s;
    
}
@keyframes ivap3{
    from{transform: translateX(0);}
    to{transform: translateX(-105%);}
}
#sl12{
    height: 100%;
    margin-left: -80%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards,ivap3 8s ease-in-out forwards 6s;
    position: relative;
    z-index: 3;
}
#ms14{
    height: 100%;
    margin-left: -20%;
    position: relative;
    z-index: 2;
    margin-bottom: -5%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 12s;
}
#pz14{
    height: 100%;
    margin-left: -30%;
    
    position: relative;
    z-index: 1;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 12s;
}
#op14{
    height: 150%;
    margin-bottom: -40%;
    margin-left: -45%;
     position: relative;
    z-index: 3;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 8s;
}
#mo14{
    height: 150%;
    margin-bottom: -40%;
    margin-left: -55%;
     position: relative;
    z-index: 3;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 8s;
}
#ss14{
    height: 100%;
    margin-left: -40%;
   
    position: relative;
    z-index: 2;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 10s;
   
}
#zn14{
    height: 100%;
    margin-left: -30%;
    
    position: relative;
    z-index: 1;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 10s;
   
}
#rw2{
    height: 215%;
    margin-left: -105%;
    opacity: 0;
     position: relative;
     animation: apir 2s ease-in-out forwards 18s, djen 6s ease-in-out forwards 20s,djen2 6s ease-in-out 26s;
    z-index: 3;
}
#ms3{
    height: 200%;
    margin-bottom: -75%;
    opacity: 0;
    margin-left: 65%;
    animation: apir 2s ease-in-out forwards,moval 62s ease-in-out forwards 3s;
}
 @media screen and (width>=1200px) {
.star1,.lud2,.fo4,#fo1,.el11,.sin5,.dev9,.sev7,.six6,.vos8,.dve12,#dom3,#finf,.tren13,.chet14,.tres3,#fons10,#six61{
    height: 600px;
    width: 620px;
}

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

}

@media screen and (width<330px) {
.star1,.lud2,.fo4,.el11,#fo1,.sin5,.dev9,.sev7,.six6,.vos8,.dve12,#dom3,#finf,.tren13,.chet14,.tres3,#fons10,#six61{
    height: 254px;
    width: 260px;
}

}