h1{
    color: rgb(141, 69, 43);
}

.term1,#int1,.ozo3,.chan4,#spt5,.spat{
height:321px;
  width:330px;
  display: flex;    
  align-items: end;
  justify-content: center;  
  justify-self: center;    
  background-size: cover;
  border-radius: 8px;
  overflow: hidden;
    
    
}
#int1{
    background-image:url(../images/utk/intdv.webp);
    animation: letu3 5s ease-in forwards ; 
}

#kn1,#knz1{
    opacity: 0;
    
    
}

@keyframes letu3{
    from{background-position: top;}
    to{background-position:bottom;}
}
@keyframes r3{
    from{transform: translate();}
    to{transform: scale(1.6) translate(-30%,30%);}
}
#kn1{
    height: 110%;
   
    margin-left: 65%;
    animation: apir 2s ease-in-out forwards 10s,r3 5s ease-in-out forwards 12s;
     
}


@keyframes dvigk{

    from{transform: translateX(0);}
    25%{transform: translate(-20%,5%) scale(1.3) ;}
     55%{transform:translate(-80%,-2%) scale(1.2);}
    to{transform: translate(-160%,1%) scale(1.2);}
}
#knz1{
    height: 170%;
    animation: apir 2s ease-in-out forwards 5s,dvigk 5s ease-in-out forwards 7s;
    margin-bottom: -70%;
    margin-left: -75%;

}
.ozo3{
   background-image:url(../images/utk/ooz.webp); 
}
#pru2{
  background-image:url(../images/utk/ozero.webp);
}
#ksd{
    background-image:url(../images/utk/dvork.webp);
}
.chan4{
    background-image:url(../images/utk/chan.webp);
}
#spt5{
    background-image:url(../images/utk/spat.webp);
    animation: darke 12s ease-in-out ;
}
#vd4{
    opacity: 0;
    margin-bottom: -15%;
    height: 150%;
}
.stena{
    background-image:url(../images/utk/sten.webp);
}
#ut6,#utk6{
    height: 25%;
    margin-left: -50%;
    
}
#utk6{
     animation: lovm 5s ease-in-out forwards 3s, disapr 2s ease-in-out forwards 8s;
}
#ut6{
    animation: lovm 5s ease-in-out 3;
}
@keyframes lovm{
    from{transform: translate();}
    to{transform: translate(150%,120%) scale(1.3);}
}
#ut6:hover,#ut6:focus{
    animation: lovm 5s ease-in-out;
}
#kg6{
    height: 65%;
    margin-top: 25%;
    margin-left: -15%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 12s;
}
@keyframes berev{
    0%{background-image:url(../images/utk/sten.webp);}
     65%{background-image:url(../images/utk/sten.webp); filter: brightness(0.7);}
  100%{background-image:url(../images/utk/sten2.webp);}
}


#st6{
   animation: berev 15s ease-in-out forwards ;
}

@keyframes dvas2 {
   
    0%{transform: translateX(-35%) scale(1);}
    33%{transform: translate(-45%,10%)scale(1.2); }
   66%{transform: translate(-55%,15%) scale(1.3);}
    100%{transform: translate(-75%,20%) scale(1.4);}
}
#knz6,#knz26{
    height: 80%;
    margin-left: 50%;
    margin-top: 23%;
    
}
#knz26{
    animation:  dvas2 4s ease-in-out forwards 14s;
}
#sy6{
    height: 120% ;
    margin-top: 25%;
    margin-left: 25%;
}
#sy26{
    height:80% ;
    margin-top: 25%;
    
    margin-left: -15%;
}
@keyframes obrat{
    from{ opacity:0.7;
    filter: sepia(95%);}
    to{ opacity:1;
    filter: sepia(0%);}
}
#sy6,#sy26{
    opacity:0.7;
    filter: sepia(95%);
    animation: obrat 5s ease-in-out forwards 3s;
}
#vv6{
    height: 110%;
    position: relative;
    z-index: 100;
    animation:vorl 5s ease-in-out forwards 3s;
}
@keyframes vorl{
    0%{transform: translate();}
    100%{transform: translate(-200%,-50%);}
}
#za6{
    opacity:1;
    margin-top: 50%;
    animation: jumpup 3s ease-in-out forwards 6s;
    height: 40%;
    margin-left: -15%;
    position: relative;
    z-index: 99;
}
#vdk4{
    height: 70%;
    margin-left: -35%;
    margin-bottom: -6%;
    animation: rost2 15.5s ease-in-out forwards;
   
}
#st62{
    background-image: url(../images/utk/sten2.webp) ;
}
@keyframes cold{
    from{background-image:url(../images/utk/chan1.webp) ; filter: brightness(0.7);}
    to{background-image:url(../images/utk/chan.webp) ; filter: brightness(1);}
}
#chan4:has(#vdk4){
    animation: cold 15s ease-in-out forwards;
}
#nj4{
    height: 35%;
    position: relative;
    z-index: 99;
    margin-left:-55% ;
    margin-bottom: -35%;
    animation: jumpup 2s ease-in-out forwards 16s;
}

#sp5:hover{
    filter: brightness(0.6);
}

#vd4:hover{
    animation: apir 5s ease-out;
}
#vd2{
    opacity: 0;
    margin-top: 10%;
    margin-left: 10%;
    height: 120%;
    animation: apir 3s ease-in-out forwards 2s, disapr 2s ease-in forwards 7.5s;
}
#kn3{
    height: 35%;
    margin-left: 70%;
    margin-bottom: -5%;
}
#kn3:hover,#kn3:focus{
    animation: utmuv 5s ease-in-out forwards;
}
#vsy3{
    opacity: 0;
    height: 95%;
    margin-bottom: -85%;
    margin-left: -25%;
    animation:apir 2s ease-in-out forwards,jumpup 2s ease-in-out forwards 3s;
}
#syn3{
    opacity: 0;
    height: 125%;
    margin-bottom: -135%;
    animation:apir 2s ease-in-out forwards,jumpup 2s ease-in-out forwards 3s;
}
#za3{
    opacity: 0;
    height: 45%;
    margin-bottom: -30%;
    margin-left: -25%;
    position: relative;
    z-index: 99;
    animation:apir 2s ease-in-out forwards,jumpup 2s ease-in-out forwards 1s;
}
#syn3:hover,#syn3:focus{
    animation:jumpup2 4s ease-in-out; 
}
#vsy3:hover,#vsy3:focus{
    animation:jumpup2 1s ease-in-out; 
}
#za3:hover,#za3:focus{
    animation: jumpup2 2s ease-in-out;
}
#kn2{
    opacity: 0;
    animation: apir 2s ease-in-out forwards 5s,disapr 2s ease-in forwards 7.5s;
    height: 110%;
    margin-bottom: 5%;
    margin-left: 10%;
}
#utk2{
    opacity: 0;
    height: 50%;
    margin-top: 20%;
    margin-left: -80%;
    animation: apir 2s ease-in-out forwards 8s, utmuv 6s ease-in-out forwards 10s;
}

#knz2{
    height: 130%;
    margin-bottom: -5%;
    margin-left: -15%;
    animation: r3 5s ease-in-out forwards 3s;
    position: relative;
    z-index: 99;
}
#vmk2{
    height: 100%;
    opacity: 0;
    margin-left: 40%;
    animation: apir 2s ease-in-out forwards 9s;
    position: relative;
    z-index: 1;
}
#vm5{
    height: 165%;
    margin-bottom: -55%;
    opacity: 1;
    animation: rost2 2s ease-in-out forwards, disapr 2s ease-in-out forwards 8s;
     margin-left: -15%;
}
#lv5{
    height: 65%;
    margin-bottom: 3%;
    margin-left: -110%;
    position: relative;
    z-index: 99;
    opacity: 0;
    animation: stve 5s ease-in-out 3s;
}
@keyframes stve{
    0%{opacity: 0;}
    25%{opacity: 0.5;}
    50%{opacity: 1; filter:brightness(1.9)}
    25%{opacity: 0.5;}
    100%{opacity: 0;}
}
@keyframes ones {
    0%{opacity: 0;}
    25%{opacity:1;filter: sepia(75%); transform: translateX(15%) scale(1);}
    50%{opacity:1;filter: sepia(85%);transform: translate(25%,10%)scale(1.2); }
    75%{opacity:0.9;filter: sepia(95%);transform: translate(35%,15%) scale(1.3);}
    100%{opacity:0.7;filter: sepia(95%);transform: translate(45%,25%) scale(1.5);}
}
@keyframes dvas {
    0%{opacity: 0;}
    25%{opacity:1;filter: sepia(75%); transform: translateX(-35%) scale(1);}
    50%{opacity:1;filter: sepia(85%);transform: translate(-45%,10%)scale(1.2); }
    75%{opacity:0.9;filter: sepia(95%);transform: translate(-55%,15%) scale(1.3);}
    100%{opacity:0.7;filter: sepia(95%);transform: translate(-75%,25%) scale(1.5);}
}
#sy5{
    height: 90%;
    margin-bottom: -15%;
    margin-left: -25%;
    animation: ones 5s ease-in-out forwards 12s;
    opacity: 0%;
    
}
#sy25{
    height: 82%;
    opacity: 0;
    animation: dvas 5s ease-in-out forwards 12s;
    
    
}
#vdm2{
    height:75%;
    opacity: 0;
    animation: apir 2s ease-in-out  forwards 6s, disapr 2s ease-in-out forwards 8s;
    margin-left: -40%;
    margin-top: 5%;
    position: relative;
    z-index: 2;
    
   
}


@keyframes utmuv{
    0%{transform: translate();}
    100%{transform: translate(-180%,-160%) scale(0.7) ; opacity: 0.6;}
}
.lake2,.stena{
    animation: playbg 2s ease-in-out forwards;
}
.lake2,#pru2,#ksd,.stena,#st6{
    width: 600px;
    height: 330px;
    border-radius: 8px;
    display: flex;
    justify-self: center;    
    background-size: cover;
    overflow: hidden;  
    background-color: rgb(4, 43, 30);
    
  }
@keyframes newap{
    0%{ opacity: 0;transform: translateY(150%);}
    90%{transform: scale(110) translate(-250%,50%);opacity: 0;}
    100%{transform: scale(110) translate(-250%,50%);opacity: 1;}
}

#vdk2{
    margin-left: 35%;
    height: 1%;
    z-index: 99;   
    animation: newap 3s ease-in-out forwards 6s;
    
}

@media screen and (width>=1200px) {
 
  .lake2,#int1,#pru2,#ksd,.stena,#st6{
      height: 600px;
      width: 1080px;
  }
  
  .term1,#int1,.chan4,.ozo3,#spt5,.spat{
    height:600px;
    width: 620px;
}  

  
}
@media screen and (width<650px){

}
@media screen and (width<330px) {
.term1,#int1,#pru2,#ksd,.ozo3,.chan4,#spt5,.spat,.stena,#st6{
    height: 254px;
    width: 260px;
}


}