h1{
    color: rgb(125, 37, 47);
}
.bol5,#bol5,.fin6,#sd6,#dv6{
    height: 330px;
  width: 600px;
  display: flex;
  justify-self: center;
  align-items: end;
  background-size: cover;
  overflow: hidden;  
  border-radius: 8px;
  background-color: rgb(226, 216, 235);
}
.za1,#st1,#seb1,#fon31,#fon32,#les3,.apl4,#sd4,#sd41{
height:321px;
  width:330px;
  display: flex;    
  align-items: end;
  justify-content: center;  
  justify-self: center;    
  background-size: cover;
  border-radius: 8px;
  overflow: hidden;
    
    
}
@keyframes zoomn {
  0% {
    background-size: 200% 100%;
    background-position: right;
  }
  50% {
    background-size: 250% 130%;
     background-position: right;
  }
  100% {
   background-position: right ;
   background-size: 280% 160% ;
  }
}
#ss1{
    opacity: 0;
    height: 75%;
    margin-left: -20%;
    margin-bottom: -5%;
    animation: apir 2s ease-in-out forwards 8s,dfli 15s ease-in-out 10s,rost2 4s ease-in-out forwards 15s;
}
#st1{
    background-image: url(../images/trek/bolot1.webp);
    background-position: left;
    animation: letu 5s ease-in-out forwards 3s,zoomn 4s ease-in-out forwards 15s;
}
#ses1{
    background-image: url(../images/trek/mlfon.webp);
    background-position: left;
    animation: zoom 4s ease-in-out forwards 5s;
}
@keyframes alive{
    from{transform: translate(2%,2%);}
     to{transform: translate(-2%,-2%);}
}
#sr1{
    height: 75%;
    opacity: 0;
    margin-bottom: -10%;
    animation:apir 2s ease-in-out forwards,alive 10s ease-in-out 2s, rost2  4s ease-in-out forwards 5s;
}

#sov5{
    height: 200%;
    margin-bottom: 10%;   
    opacity: 0;
    animation: apir 2s ease-in-out forwards,rost2 5s ease-in-out forwards,disapr 3s ease-in-out forwards 5s;
}


#seb1{
    background-image: url(../images/trek/boloto3.webp);
    background-position: left;
    animation: letu 5s ease-in-out forwards 1s,zoomn 4s ease-in-out forwards 8s;
    
}
#srs1{
    opacity: 0;
    height: 75%;
    margin-bottom: -10%;
    animation: apir 2s ease-in-out forwards 5s,rost2 4s ease-in-out forwards 8s;
}
#fon31{
    background-image: url(../images/trek/yaffon.webp);
}
#fon32{
    background-image: url(../images/trek/yagafon2.webp);
}
#les3{
    background-image: url(../images/trek/les31.webp);
    animation: letu 5s ease-in-out forwards 1s;
}
#sd4{
   background-image: url(../images/trek/varsad.webp);
    animation: letu 5s ease-in-out forwards 1s, zoomn 4s ease-in forwards 8s; 
}
#zd4{
    height: 100%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 6s,rost2 4s ease-in forwards 8s;
}
#dk5{
    opacity: 0;
    height: 150%;
    margin-bottom: -45% ;
    animation: apir 2s ease-in-out forwards 7s, devskak 3s linear forwards 9s;
}
#dsk5{
    opacity: 0;
    height: 100%;
    margin-bottom: -25% ;
    margin-left: -75%;
    animation: apir 2s ease-in-out forwards 10s, devskak 3s linear forwards 12s;
}
@keyframes devskak{
    0%{
        transform: translate(-5%,10%);
    }
    
    45%{
        transform: translate(-120%,-5%) ;
    }
    
    100%{
        transform: translate(-255%,5%) ;
    }
}
#sd41{
   background-image: url(../images/trek/varsad.webp);
    animation: letu 5s ease-in-out forwards 1s; 
}
#sd6{
    
    background-size: cover;
    animation:perenos 15s ease-in-out forwards ;
}
@keyframes perenos{
    from{background-image: url(../images/trek/palat1.webp);

    }
    to{background-image: url(../images/trek/sad3.webp);}
}
#zd6{
    height: 100%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 2s,zdmove 5s ease-in-out forwards 3s;
    position: relative;
    z-index: 2;
    margin-left: -10%;
}
#is6:hover,#zd6:hover{
    animation: disapr 2s ease-in-out;
}
#is6{
    height: 150%;
    opacity: 0;
    margin-bottom: -20%;
    margin-left: -20%;
    animation: apir 2s ease-in-out forwards,dfli 8s ease-in-out 1s;
    position: relative;
    z-index: 1;
}
@keyframes skokup{
    from{transform: translate();}
    to{transform: translate(149%,-95%);}
}

#ik4{
    height: 120%;
    margin-bottom: -35%;
    margin-left: -45%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards, dfli 8s ease-in-out 1s,skokup 1s ease-in forwards 9s;
}
#ki3{
    opacity: 0;
    height: 90%;
    margin-left: 30%;
     position: relative;
    z-index: 1;
      animation: apir 2s ease-in-out forwards 16s,dfli 10s ease-in-out 18s;
}
#ru3{
    opacity: 0;
    height: 35%;
    margin-left: 15%;
    position: relative;
    z-index: 3;
    animation: apir 2s ease-in-out forwards 8s, dfli 5s ease-in-out 3 9s,vetmuv 2s ease-in-out forwards 22s;
}

#yg33{
    opacity: 0;
    height: 80%;
    margin-left: -5%;
    position: relative;
    z-index: 2;
    margin-bottom: -5%;
    animation: apir 2s ease-in-out forwards 6s,alive 5s ease-in-out 3 9s;
}
#yg3{
    opacity: 0;
    height: 180%;
    margin-bottom: -120%;
    animation: apir 2s ease-in-out forwards,jumpup 5s ease-in-out forwards;
}
#ygg3{
    height: 120%;    
    margin-bottom: -5%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards,dfli 8s ease-in-out forwards 5s 3;
}
#ygg3:hover{
    opacity: 1;
    animation:  dfli20 6s ease-in-out;
}
#yg3:hover{
    opacity: 1;
    animation: dflig 5s ease-in-out;
}

#bol5{
    background-image: url(../images/trek/pog5.webp);
    
}
#dv6{
    background-image: url(../images/trek/dvorez.webp);
}

#sk6{
    height: 120%;
    margin-left: 15%;
    margin-bottom: -8%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards, disapr 4s ease-in-out forwards 6s;
}
#mk6{
    height: 120%;
    margin-bottom: -3%;
    margin-left: -65%;
    opacity: 0;
    animation: apir 4s ease-in-out forwards 6s,dfli 9s ease-in-out 10s;
}
#pn6{
    height: 65%;
    margin-bottom: -42%;
    margin-left: -75%;
    opacity: 0;
    position: relative;
    z-index: 3;
    animation: apir 1s ease-in-out forwards 2s, jumpup 5s ease-in-out 3s;
}

@media screen and (width>=1200px) {
 
  .bol5,#bol5,.fin6,#sd6,#dv6{
      height: 600px;
      width: 1200px;
  }
  
  .za1,#st1,#seb1,#fon31,#fon32,#les3,.apl4,#sd4,#sd41{
    height:600px;
    width: 620px;
}  

  
}

@media screen and (width<330px) {
.za1,#st1,#seb1,#fon31,#fon32,#les3,.apl4,#sd4,#sd41,.bol5,#bol5,.fin6,#dv6{
    height: 254px;
    width: 260px;
}


}