h1{
    color: rgb(141, 211, 61);
}

.perw1,#prw1,#pru,#chs,#dom,.dom,.maun5,#mnd5,#noj5,.kust6,#vod,.drop7,.fin8,#gf7,#gor8,#puf8{
height:321px;
  width:330px;
  display: flex;    
  align-items: end;
  justify-content: center;  
  justify-self: center;    
  background-size: cover;
  border-radius: 8px;
  overflow: hidden;
    
    
}
#vod{
    background-image: url(../images/govor/kuv2.webp);
    background-position: left;
    animation: letu 3s ease-in-out forwards;
}
#ss6{
    opacity: 0;
    height: 70%;
    margin-bottom: 25%;
    margin-left: 50%;
    animation: apir 2s ease-in-out forwards 4s;
}
@keyframes vdal{
    from{transform: translate(0);}
    to{transform: translate(10%,-290%) scale(0.5);}
}
#kv6{
    height: 25%;
    margin-bottom: -20%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 4s,vdal 5s ease-in-out forwards 6s;
    margin-left: -40%;
}
#kst6{
    background-image: url(../images/govor/kust1.webp);
}

#pt61,#pt62,#pt63{
    opacity: 0;
}

#pt63{
    height: 120%;
    margin-left: -145%;
    margin-bottom: -12%;
    animation: apir 2s ease-in-out forwards 3s,kujp 3s ease-in-out forwards 4s, disapr 2s ease-in-out forwards 6s;
}
#pt62{
    height: 80%;
    margin-left: -40%;
    animation: apir 2s ease-in-out forwards 6s, rost2 3s ease-in-out  forwards 6s, disapr 2s ease-in-out forwards 10s;
}
#pt61{
    height: 100%;
    margin-left: -25%;
    margin-bottom: -12%;
    animation: apir 2s ease-in-out forwards, dflip 2s ease-in 2s, disapr 2s ease-in-out forwards 3s;
}
@keyframes kujp{
   0% {
                transform: rotate(0deg) 
                      translateY(20%) rotate(0deg);
            }

            100% {
                transform: rotate(-180deg) 
                      translateY(20%) rotate(180deg);
            }
        }
.sad3,#sad3{
    width: 600px;
  height: 330px;
  border-radius: 8px;
  display: flex;
  justify-self: center;    
  background-size: cover;
  overflow: hidden;  
  background-color: rgb(4, 43, 30);
  animation: playbg 2s ease-in-out forwards;

}
#sad3{
    background-image: url(../images/govor/sad3.webp);
     animation: zoom1 5s ease-out 5s forwards;
   
   
}


#zd3,#zv3{
    opacity: 0;
}
@keyframes rost3{
    from{transform: scale(1);}
    to{transform: scale(2) translateY(25%);}
}
#zd3{
    height: 120%;
    margin-top: 20%;
    margin-left: 30%;
    animation: apir 2s ease-in-out forwards,disapr 2s ease-in-out forwards 3s;
}
#zv3{
    height: 120%;
     margin-bottom: -25%;
    margin-left: -29%;
    animation: apir 2s ease-in-out forwards 3s,rost3 5s ease-out 5s forwards;
}
#pru{
    background-position: right;
     background-image: url(../images/govor/prud.webp);
     animation: letunaz 7s ease-in-out forwards 2s,letunaz 7s ease-in-out forwards 12s,letunaz 7s ease-in-out forwards 22s;
}
#ml2{
    height: 45%;
    opacity: 0;
    margin-bottom: -25%;   
    animation: apir 2s ease-in-out forwards,dfli 3s ease-in-out 3, namor2 5s ease-in-out forwards 7s;
}
#ml22{
    height: 45%;
    opacity: 0;
    margin-bottom: -20%;
    margin-left: -55%;
    animation: apir 2s ease-in-out forwards 12s,dfli 3s ease-in-out 3 12s, namor2 5s ease-in-out forwards 19s,disapr 2s ease-in-out forwards 21s;
}

#dk2{
    height: 45%;
    opacity: 0;
    margin-bottom: -28%; 
    margin-left: -50%; 
    animation: apir 2s ease-in-out forwards 22s,dfli 3s ease-in-out 3 22s, namor2 5s ease-in-out forwards 29s;
}


#prw1{
    background-image: url(../images/govor/fonw.webp);
}
#slg{
    height: 220%;
    margin-bottom: -120%;
    margin-left: -220%;
    opacity: 0;
    animation:opne 2s ease-in-out forwards 1s, dvigs 2s ease-in forwards 2s,disapr 2s ease-in forwards 4s;
    position: relative;
    z-index: 1;
}
#mld1{
    opacity: 0;
    height: 120%;
    animation: apir 2s ease-in-out forwards;
    margin-bottom: -20%;
    margin-left: -25%;
    position: relative;
    z-index: 2;
    
}
#std1,#hbd1,#srd1{
    height: 120%;
    margin-bottom: -20%;
}
@keyframes opne{
    0%{opacity: 0;}
    100%{opacity: 0.7;}
}
#zr1{
    opacity: 0;
    height: 100%;
    margin-left: -170%;
    animation: opne 2s ease-in-out forwards 1s,apir 2s ease-in forwards 3s;
    position: relative;
    z-index: 1;
}
#chs{
    background-image:  url(../images/govor/fonchas.webp);
    
}




#zch2,#zn2{
    opacity: 0;
    height: 130%;
    margin-bottom: -35%;
}
#zch2{
    animation: apir 2s ease-in-out forwards,disapr 2s ease-in-out forwards 3s;
}
#zn2{
    margin-left: -59%;
    animation: apir 2s ease-in-out forwards 3s;
}
#std1{
    margin-left: 45%;
}
#std1,#srd1{
    opacity: 0;
    animation: apir 2s ease-in-out forwards;
}
#srd1{
    margin-left:-50%;
    position: relative;
    z-index: 2;
}

#dom{
    background-image:url(../images/govor/fond.webp);
    animation: zoom2  5s ease-in-out forwards;
}

#srb4,#stbr4{
    height: 100%;
    
    opacity: 0;
}

#stbr4{
    animation:playbg 2s ease-in-out forwards 5s, apir 2s ease-in forwards 5s,dfli 8s ease-in 6s,disapr 3s ease-in-out forwards 11s;
    margin-left: -15%;
    margin-bottom: -10%;
}
#srb4{
    animation:playbg 2s ease-in-out forwards 8s, apir 2s ease-in forwards 8s,dfli 8s ease-in 9s,disapr 3s ease-in-out forwards 13s;
    margin-left: 25%;
    margin-bottom: -15%;
}
@keyframes namor{
    from{transform: translateX(0%);}
    to{transform: translateX(-55%);}
}
@keyframes namor2{
    from{transform: translateX(0%);}
    to{transform: translateX(-155%);}
}
@keyframes dvigs{
    from{transform: translateX(0%);}
    to{transform: translateX(55%);}
}
#hbd1{
    opacity: 0;
  animation: opne 2s ease-in-out forwards,namor 3s ease-in-out forwards 2s,disapr 2s ease-in forwards 4s;;
    
}
#mnd5{
    background-image: url(../images/govor/gora1.webp);
   
}

#noj5{
    background-image: url(../images/govor/noj1.webp);
}
#gf7{
    background-image: url(../images/govor/gora36.webp);
    
    
}
#pp7{
    height: 75%;
    margin-left: 35%;
    margin-bottom: -25%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 2s,dfli 15s ease-in-out 3 3s;
    position: relative;
    z-index: 2;
}
@keyframes dfli3{
  from{transform: translate(0px,-2px) rotate(2deg) scale(2.2);}
  to{transform: translate(8px,-1px)rotate(2deg)scale(2.4);}
  50%{transform: translate(-8px,6px) rotate(-1deg)scale(2.3);}
}
#drb7{
    height: 65%;
     margin-left: -65%;
     position: relative;
     z-index: 1;
    margin-bottom: -5%;
    opacity: 0;
    animation: apir 5s ease-in-out forwards,dfli3 15s ease-in-out forwards 3 2s;
}
#bb5{
    opacity: 0;
    height: 12%;
    margin-left: -12%;
    transform: rotate(37deg);
    margin-bottom: 40%;
    animation: opne 5s ease-in-out forwards,mbl 12s ease-in forwards 5s;
}
@keyframes mbl{
    from {transform: rotate(37deg);}
    to{transform: rotate(37deg) translateY(750%) scale(2.5);}
    
}
@keyframes mring{
    from {opacity:0.9; transform: rotate(-165deg);}
    to{opacity:0.9; transform: rotate(-165deg);}
    50%{opacity:1; transform: rotate(35deg);}
}
@keyframes birndb{
    from{transform: scale(1); filter: brightness(0.1);}
    to{transform: translateY(-98%) rotate(-2deg) scale(3); filter: brightness(1); }
    85%{transform: translateY(-35%) rotate(-3deg)  scale(2.2); filter: brightness(0.8);}
    70%{transform: translateY(-15%) rotate(5deg)  scale(1.5); filter: brightness(0.6);}
}
#sr5{
    opacity: 0;
    height: 25%;
    margin-left: -25%;
    margin-bottom: 10%;
    animation: apir 3s ease-out forwards 4s, mring 5s ease-in-out 6s 3, vetmuv 2s ease-out forwards 12s;
    position: relative;
    z-index: 2;
}
#mj5{
    opacity: 0;
    animation: apir 2s ease-in-out forwards, dfli 13s ease-out 3s;
    height: 80%;
    margin-left: -65%;
    position: relative;
    z-index: 1;
}
#gor8{
    background-image: url(../images/govor/gora1.webp);
}

#s8{
    opacity: 0;
    animation: apir 2s ease-in-out forwards,dfli 8s ease-in-out;
    height: 70%;
    position: relative;
     margin-bottom: -3%;
    z-index: 2;
}
#vv8{
    opacity: 0;
    animation: apir 2s ease-in-out forwards,dflip 2s ease-in-out 2 2s;
    height: 15%;
    margin-left: -23%;
    margin-bottom: -5%;
    position: relative;
    z-index: 3;
}
#bv8,#bvs8{
    filter: brightness(0.1);
    opacity: 0;
    height: 25%;
    animation:apir 2s ease-in-out forwards 4s, birndb 0.5s ease-in-out forwards 5s;
    position: relative;
    z-index: 1;
    
}
#bv8{
    margin-left: -15%;
}
#bvs8{
    margin-left: 15%;
}


#puf8{
    background-image: url(../images/govor/sad23.webp);
    background-position: left;
    animation: letu 5s ease-in-out forwards 6s;
}
#zr8{
    height: 115%;
     margin-bottom: -20%;
     margin-left: -25%;
     animation: apir 2s ease-in-out forwards,disapr 2s ease-in-out forwards 5s;
}
#zl8{
    height: 45%;
    opacity: 0;
    margin-bottom: 10%;
    margin-left: -60%;
    animation:apir 2s ease-in-out forwards 9s;
}
#pu8{
    height: 100%;
     margin-bottom: -15%;
     margin-left: 5%;
    animation: opne 2s ease-in-out forwards 1s,disapr 2s ease-in-out forwards 5s;
}
#zr8,#zri8,#pu8{
    
    opacity: 0;
   
    
}
#zri8{
     margin-bottom: -15%;
    height: 100%;
    margin-left: -32%;
     animation: apir 2s ease-in-out forwards,disapr 2s ease-in-out forwards 5s;
}
@media screen and (width>=1200px) {
 
  .sad3,#sad3{
      height: 600px;
      width: 1200px;
  }
  
  .perw1,#prw1,#pru,#chs,#dom,.dom,.maun5,#mnd5,#noj5,.kust6,#vod,.drop7,.fin8,#gf7,#gor8,#puf8{
    height:600px;
    width: 620px;
}  

  
}

@media screen and (width<330px) {
.perw1,#prw1,#pru,#chs,.sad3,#dom,.dom,#sad3,.maun5,#mnd5,#noj5,.kust6,#vod,.drop7,.fin8,#gf7,#gor8,#puf8{
    height: 254px;
    width: 260px;
}


}