h1{
    color: rgb(11, 81, 62);
}



.sec1,#dv1,.sec2,.sec5,.sec3,.sec4,.sec6,#fon5,.sec7,.sec8,.sec10,.sec9{
  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;
 

}


.sec3{
    background-image:url(../images/veter/fon1.webp); 
}


#dv2{
    height: 65%;
    margin-bottom: 35%;
    opacity: 0.5;
    margin-left: 55%;
    animation:vetdu 8s ease-in-out forwards 3s;
}


#hp2{
    height: 75%;
    margin-bottom: 35%;
    margin-left: -175%;
    position: relative;
    z-index: 1;
    opacity: 0;
    animation: apir 2s ease-in-out forwards, dfli 8s ease-in-out 4 7s;
}
#ps2{
    height: 100%;
    position: relative;
    z-index: 2;
    margin-bottom: -5%;
    margin-left: -90%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards;
}
@keyframes veta{
    from{opacity: 0;}
    to{opacity: 0.5 ;}
}
@keyframes skk5{
    from{}
    to{transform: translateY(5%) rotate(-9deg);}
 }
#gve2{
    height: 100%;
    opacity: 0;
    position: relative;
    z-index: 3;
    margin-left: 15%;
    animation: veta 2s ease-in-out forwards 5s, skk5 9s ease-in-out forwards 3 7s;
    
    
}
@keyframes vetdu{
    from{transform:translate() ;}
    to{transform:translate(-190%,5%) scale(1.3) rotate(5deg);}
}

#kr1{
    height: 60%;
    opacity: 0;
    margin-left: 30%;
    margin-bottom:-1%;
     position: relative;
    z-index: 3;
    animation:apir 2s ease-in-out forwards, rost2 6s ease-in-out forwards 2s;
}
#dm1{
    opacity: 0;
    animation: apir 2s ease-in-out forwards 8s,damh 9s ease-in-out forwards 10s;
    height: 55%;
    margin-bottom: 10%;
    margin-left: -75%;
    position: relative;
    z-index: 2;
}

#so9{
    height:105%;
    position: relative;
    z-index: 2;
    margin-left:  -10%;
    margin-bottom: -22%;
    
}
#ni9{
    height: 160%;
    margin-bottom: -69%;
    position: relative;
    z-index: 1;
    margin-left: -65%;
}
#ks1{
    height: 23%;
    position: relative;
    margin-bottom: 10%;
    z-index: 1;
   
    opacity: 0;
    animation: apir 2s ease-in-out forwards 12s, jumpup 2s ease-in  3 14s ;
}
#ce1:hover,#ce1:focus{
    animation:apir 2s ease-in-out forwards, rost 5s ease-in-out forwards 2s;
}

@keyframes damh{
    from{}
    to{transform: translate(255%,25%) scale(1.5); }
}
#dv1,.sec1{
    background-image:url(../images/veter/fonv2.webp);
    
}
.sec5,#fo5{
    background-image:url(../images/veter/vikf.webp);
   
    
}
#fo5{
    animation: zoom24 15s ease-in-out forwards;
}
#vk5{
    height: 100%;
    margin-bottom: -15%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 15s, skk 18s ease-in-out forwards 17s;
}
#ve5{
    height: 75%;
    margin-bottom: -25%;
    opacity: 0;
    margin-left: -85%;
    animation: apir 2s ease-in-out forwards 15s,dfli 8s ease-in-out forwards 4 17s;
}

.sec2{
    background-image:url(../images/veter/fonv21.webp);
    
}
.sec8,#fn8{
    background-image:url(../images/veter/soff.webp);
}
.sec10{
    background-image:url(../images/veter/fonve.webp);
}
#fos10{
    background-image:url(../images/veter/vela.webp);
    background-position: right;
    animation: letunaz 18s ease-in-out forwards;
}
#p10{
    height: 100%;
    margin-bottom: -25%;
    margin-left: -25%;
    animation: skk 12s ease-in 3;
}
#dv10{
    height: 45%;
    opacity: 0.6;
    margin-left: -125%;
    margin-bottom: -35%;
    animation: jumpup3 3s ease-in-out forwards;
}
@keyframes zoom24 {
  0% {
    background-size: 100% 100%;
  }
  50% {
    background-size: 190% 190%;
  }
  100% {
   background-position: 30% 10%;
   background-size: 280% 280%;
  }
}
@keyframes zoom23 {
  0% {
    background-size: 100% 100%;
  }
  50% {
    background-size: 260% 260%;
  }
  100% {
   background-position: 30% 40%;
   background-size: 450% 450%;
  }
}


#fn8{
    animation: zoom23 13s ease-in-out forwards;
}
@keyframes korm{
    0%{opacity: 0;}
    10%{ transform: translate(0%,-5%) scale(1.3) rotate(10deg); opacity: 0.6; filter: brightness(1.2);}
    89%{ transform: translate(17%,2%) scale(1.6); opacity: 0.7; filter: brightness(0.8);}
    100%{ transform: translate(20%,1%) scale(1.2);opacity: 0; filter: brightness(1.8);}
}

.sec9,#fok9{
    background-image:url(../images/veter/fonge.webp);
   
}
#fo9{
   animation: trip 45s ease-in-out forwards ;
}
@keyframes trap{
    from{}
    to{transform: translateX(-299%);}
}
#kn9{
    height: 90%;
    margin-bottom: -10%;
    margin-left: 15%;
}
#kr9{
    margin-left: -45%;
     height: 43%;
    position: relative;
    margin-bottom: -20%;
    z-index: 1;
   
    opacity: 0;
    animation: apir 2s ease-in-out forwards 12s, jumpup 2s ease-in  3 14s ;
}
#vk9{
    height: 60%;
    margin-bottom: -2%;
    animation: trap 8s ease-in-out forwards;
    
}
@keyframes trip0{
    from{ background-image:url(../images/veter/fonm.webp);
   background-position: left;}
    to{background-image:url(../images/veter/fonm.webp);
   background-position: right;}

}
@keyframes trip{
    0%{background-image:url(../images/veter/var9.webp);}
    50%{background-image:url(../images/veter/fonv93.webp);}
     
   
    
    100%{background-image:url(../images/veter/foni.webp);}
}
#pa8{
    height: 16%;
    opacity: 0;
    margin-bottom: 30%;
    margin-left: 35%;
    animation: korm 16s ease-in-out forwards 13s;
}
#dvo2{
    animation: noch 25s linear forwards;
}
#sp2{
    height: 80%;
    margin-bottom: -5%;
    filter: brightness(0.8);
    margin-left: -5%;
    animation: skk 8s ease-in-out 9;
}
#s4{
   height: 80%;
    margin-bottom: -5%;
    filter: brightness(0.8);
    margin-left: -95%;
    animation: skk 8s ease-in-out 9 3s; 
}
@keyframes noch{
    0%{background-image:url(../images/veter/fonv21.webp);}
   85%{background-image:url(../images/veter/fonv22.webp);}
    100%{background-image:url(../images/veter/fonv22.webp); filter: brightness(0.5);}
}
#da2{
    height: 100%;
    margin-bottom: -5%;
}
#sr2{
    height: 80%;
    margin-bottom: -5%;
     filter: brightness(0.8);
     margin-left: -5%;
     animation: skk 8s ease-in-out 5,disapr 2s ease-in-out forwards 18s;
}
#sta2{
    height: 80%;
    margin-bottom: -5%;
    margin-left: 20%;
    opacity: 0;
    animation:apir 2s ease-in-out forwards 3s;
}
@keyframes muvhe{
    from{transform: rotate(-1deg);}
    to{transform: rotate(0deg);}
    50%{transform: rotate(5deg);}
}
#gde2{
    height: 35%;
    margin-bottom: 65%;
    margin-left: -41%;
    opacity: 0;
    animation:apir 2s ease-in-out forwards 3s, muvhe 5s ease-in-out 8 5s;
}
#ps61{
    opacity: 0;
    height: 100%;
    margin-bottom: -20%;
    animation: apir 2s ease-in-out forwards,sbeg1 8s ease-in-out forwards 2s;
}
#pz61{
    opacity: 0;
    height: 100%;
    margin-bottom: -20%;
    margin-left: -85%;
    position: relative;
    z-index: 3;
    animation: apir 2s ease-in-out forwards,sbeg 8s ease-in-out forwards 3s;
}
#pz2{
    opacity: 0;
    height: 110%;
    margin-left: 55%;
    margin-bottom: -30%;
    position: relative;
    z-index: 2;
    animation: apir 2s ease-in-out forwards,sbeg1 8s ease-in-out forwards 2s;
}
#ko6{
    height: 120%;
    margin-bottom: -35%;
    margin-left: 55%;
    position: relative;
    z-index: 1;
    opacity: 0;
    animation: apir 2s ease-in-out forwards,dfli 18s ease-in-out 2s;
}
#ps62{
    opacity: 0;
    height: 100%;
    margin-bottom: -20%;
    animation: apir 2s ease-in-out forwards,sbeg 8s ease-in-out forwards 2s;
}

.sec7{
    background-image:url(../images/veter/fonz.webp);
    
}
.sec4{
    background-image: url(../images/veter/fonkor.webp);
}
.sec6{
    background-image: url(../images/veter/fonk.webp);
}
#nfo7{
    background-image:url(../images/veter/nikfon.webp);
    background-position: left;
    animation: letu 8s ease-in-out forwards,chan 19s ease-in-out forwards;
    
}

@keyframes muvhe1{
    0%{transform: rotate(0deg)  translate(25%,6%);;}
    30%{transform: rotate(-15deg)  translate(23%,10%);}
    60%{transform: rotate(5deg) translate(25%,6%);}
    90%{transform: rotate(-18deg) translate(23%,10%);}
    100%{transform: rotate(5deg) translate(25%,6%);}

}
#li4{
    height: 45%;
    margin-bottom: 55%;
    margin-left: -53%;
    transform: rotate(-8deg);
   animation: zlost 3s ease-in-out forwards 3s, skk2 4s ease-in-out forwards 5 6s;
}
@keyframes skk2{
  from{transform: translateY(0);filter: hue-rotate(-60deg);}
  to{transform: translate(-19%,2%) rotate(-30deg) ; filter: hue-rotate(-60deg); }
  50%{transform: translate(-3%,5%)  rotate(10deg) ; filter: hue-rotate(-60deg) brightness(0.8);}
}
@keyframes skez{
    from{fllter:contrast(4);}
    to{fllter:contrast(4); }
}
@keyframes zlost{
    from{}
    to{filter: hue-rotate(-60deg);}
}
#ky4{
    height: 160%;
    margin-bottom: -60%;
    margin-left: 35%;
    animation:dfli 4s ease-in-out forwards 5 6s;
}
@keyframes sbeg1{
    from{}
    to{transform: translateX(-150%);}
}
#da7{
    height: 105%;
    margin-bottom: -20%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 9s,sbeg 12s ease-in-out forwards 12s;
}
@keyframes sbeg{
    from{}
    to{transform: translateX(150%);}
}
@keyframes chan{
    from{}
    to{background-image:url(../images/veter/fonv21.webp)}
}
#ni7{
    height: 100%;
    margin-bottom: -5%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 8s;
}
#dv1{
    animation: zoom2 6s ease-in-out forwards 2s; 
}
#ce1{
    height: 80%;
    margin-left: 15%;
    margin-bottom: -35%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 2s;
}
@media screen and (width>=1200px) {
.sec1,#sem1,#domv1,.sec2,#dv1,#kof2,.sec3,.sec4,.sec7,#fon5,.sec5,.sec13,.sec12,.sec10,.sec11,.sec9,.sec8{
    height: 600px;
    width: 620px;
}

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

}

@media screen and (width<330px) {
.sec1,#sem1,#domv1,.sec2,#dv1,#kof2,.sec3,.sec4,.sec7,#fon5,.sec6,.sec5,.sec13,.sec12,.sec10,.sec11,.sec9,.sec8{
    height: 254px;
    width: 260px;
}

}