#izb{
    height: 250px;
    filter: blur(5px);  
    
    animation: strah 3s ease-in-out forwards,ukmove ease-in-out 3s 2s;
    position: relative;
    z-index: 1;
    margin-top: -60%;
    margin-left: -55%;
    
    
}
h1{
    color: red;
}


@keyframes strah{
    from{filter:blur(5px);}
    to{filter: blur(0px);}
}
@keyframes strah1{
    from{background-color: black;}
    to{background-color: rgb(124, 129, 46);}
}
@keyframes strah2{
    from{background-color: black;}
    to{background-image: url(../images/vasil/isbfon.webp);background-size: cover;}
}


.isnakur,#isku,.kuk,#kuk,#fly, .stupa,#lch,.babroom, #bizb,.uborka,#ubr,.gornis,#grm,.gornis2,#grd,.opwind1{
    height: 300px;
    width: 310px;
    display: flex;   
    background-color: black;
    border-radius: 8px;
    justify-self: center;
    overflow: hidden;
    
}
.isnakur,#isku,#fly, .stupa,#lch,.babroom, #bizb,.uborka,#ubr,.gornis,#grm,.gornis2,#grd,.opwind1{
    animation: playbg 2s ease-in-out forwards;
}
#isku{
    animation: strah2 4s ease-in-out forwards;
    justify-content: center;
}
.luz{
    height: 85px;
    width: 120px;
    margin-top: -20%;
    animation: strah1 3s ease-in-out forwards;
    justify-self: center;
    align-self: center;
    position: relative;
    z-index: 0;
    
    
}
.kuk{
    background-color: rgb(163, 184, 96);
    background-image: url(../images/vasil/kupgor.webp);
    background-size: cover;   
    animation: playbg 0.1s ease-in-out forwards;
}
#dolh{
    height: 255px;
    position: relative;
    z-index: 1;    
    opacity: 0;
    animation: opa1 3s ease-in-out forwards,muvhe 5s ease 5s 3;
    
}
#dolb{
    height: 115px;
    position: relative;
    z-index: 0;
    margin-left: -95%;
    margin-bottom: -8%;
    opacity: 0;
    animation: opa1 3s ease-in-out forwards;
    align-self: end;
    
}

@keyframes muvhe{
    from{transform: rotate(1deg);}
    to{transform: rotate(0deg);}
    50%{transform: rotate(-5deg);}
}
#vma{
    height: 310px;
    animation: opa 5s ease-in-out forwards;
   
}
#vas1{
    height: 290px;
    animation: opa1 3s ease-in-out ;
   align-self:  end;
 
}
@keyframes opa {
  from {opacity: 0.5;}
  to {opacity: 0;}
  75%{opacity: 1;}
  50%{ opacity: 0.8;}

}

#bv,#dn,#nch,.stway, .walkch{
    width: 600px;
    height: 330px;
    background-color: cadetblue;
    border-radius: 8px;
    overflow: hidden;    
    background-size: cover;
    display: flex;
    animation: playbg 2s ease-in-out forwards;
}
#bv{
    animation: izm 8s ease-in-out forwards;
}
#vsd{
    height: 150px;
    position: relative;
    z-index: 0;
    align-self:  end;
    animation: skak 8s linear forwards;
}
#vasv{
    height: 160px;
    justify-content: start;
    align-self: end;
    filter: brightness(0.7);
    
}
@keyframes izm {
  from {background-image: url(../images/vasil/night.webp);}
  to {background-image: url(../images/vasil/rasv.webp);}
}
@keyframes skak {
  from {transform: translate(0%,0%) scale(0.8);}
 to{transform: translate(400%, 130%) scale(1.7);}
  90%{transform: translate(380%,50%) scale(1.5);}
   50%{transform: translate(250%,-70%) scale(1.3);}
}

#rvsd{
    height: 150px;
    position: relative;
    z-index: 0;
    align-self:  end;
    animation: skak 8s linear forwards;
}
@keyframes izm2 {
  from {background-image: url(../images/vasil/rasv.webp);}
  to {background-image: url(../images/vasil/sun3_3.webp);}
  75%{background-image: url(../images/vasil/sun3_2.webp);}
  50%{background-image: url(../images/vasil/sun3_1.webp);}

}
#dn{
    background-color: rgb(22, 68, 234);    
    animation: izm2 8s ease-in-out forwards;  
  
}
#nch{
    background-color: rgb(27, 30, 41);
    animation: izm3 8s ease-in-out forwards;
   
}
#bln{
    height: 250px;
    position: relative;
    z-index: 0;
    align-self:  end;
    animation: skak1 8s linear forwards;

}
@keyframes skak1 {
  from {transform: translate(200%,0%) ;}  
  to{transform: translate(95%, 10%);opacity: 0;}
  90%{transform: translate(95%, 10%); opacity:1;}
  75%{transform: translate(120%,-20%) ;}
   50%{transform: translate(150%,-10%);}
}

@keyframes izm3 {
  from {background-image: url(../images/vasil/some2.webp);}
  to{background-image: url(../images/vasil/night.webp); }
  93%{background-image: url(../images/vasil/night.webp);opacity: 0.9;}
  85%{background-image: url(../images/vasil/some.webp); }  
  64%{background-image: url(../images/vasil/some.webp); opacity: 0.9;}

}
#chz{
    position: relative;
    z-index: -1;
    margin-left: -45%;
    height: 258px;
    align-self: end;
    animation: zabdi 8s linear forwards;
}

@keyframes zabdi{
    from{opacity: 0;}
    to{opacity: 1;filter: brightness(0.4);}
    50%{opacity: 0;}
    77%{opacity: 0;}
    95%{opacity: 1;}
}

.stway{
    background-color: cadetblue;
    background-image: url(../images/vasil/les.webp);
    background-size: cover;
}

#fly, .stupa{   
    background-color: rgb(42, 46, 29);
    background-image: url(../images/vasil/isbfon.webp);
    background-size: cover;
    justify-content: center;
}

#babf{
    height: 60px;
    margin-bottom: 65%;
    margin-left: 19%;
    filter: brightness(0.4);    
}
#bay{
    height: 60px;
    margin-bottom: 65%;
    margin-left: 19%;
    filter: brightness(0.4);
    animation:stupm 10s ease-in-out forwards ;
    animation-delay: 1s;
}


#lch{
    background-color:rgba(165, 42, 42, 0.237);    
    animation: choto 3s linear forwards;
    background-size: cover;
    align-items: end;
}

#d1,#d2{
    height: 180px;
    filter: brightness(0.8);
    position: relative;
   
}
@keyframes choto{
    from{background-image:url(../images/vasil/fonluch.webp);filter: brightness(1) ;}
    to {background-image:url(../images/vasil/fonluch3.webp);filter: brightness(0.6);}
}

.babroom, #bizb{
    background-image:url(../images/vasil/izbin.webp);
    background-size: cover;
}
#baev{
    height: 210px;
    margin-top: 19%;
    justify-self: center;
    filter: brightness(0.8);
    margin-left: 15%;
    animation: muvba 1s linear forwards;
    animation-delay: 4s;
    display: none;
    
}
#hd1,#hd2{
    height: 85px;    
}
#hd1{
    margin-top: 5%;
    justify-self: center;
    animation: muvha1 6s ease forwards;
    margin-right: 10%;
    animation-delay: 2s;
    
}
#hd2{
    margin-top: 15%;
    justify-self: center;
    margin-left:2%;
    animation: muvha2 2s ease-out forwards;   
}


#hd3{
    height: 65px;
    margin-left: -45%;
    animation: ukmove ease-in-out 1s 2s 3;
}
@keyframes muvha1{
    from{transform: translate(0%,0%) ;}
    to {transform: translate(0%,195%) rotate(-3deg); filter: brightness(0.6);}
}
@keyframes muvha2{
    from{transform: translate(0%,0%) ;}
    to {transform: translate(-80%,25%)  rotate(-43deg); }
}
@keyframes muvba{
    from{transform: translate(0%,0%) ;}
    to {transform: translate(-10%,25%) scale(1.3);filter:brightness(1);}
}

.walkch{
    background-image: url(../images/vasil/fonid2.webp);
}

#vasa{
    height:180px;
    align-self: end;
    margin-left:85%;
    position: relative;
    z-index: 1;
    filter: brightness(0.9);
    animation: moval 19s ease-in-out forwards;
}    
#kst{
    height: 90px;
    margin-bottom: 25%;
    margin-left:-25%;
    align-self: end;
    position: relative;
    z-index: 0;
    animation: moval1 19s ease-in-out forwards;
}


@keyframes moval{
    from{transform: translate(0,0);filter:brightness(0.9)}
    to{transform: translate(-395%,8%); filter: brightness(0.7);}
    50%{transform: translate(-200%,35%); filter: brightness(1);}
    
}
@keyframes moval1{
    from{transform: translate(0,0);filter: brightness(0.9)}
    to{transform: translate(-805%,15%);filter: brightness(0.8);}
    50%{transform: translate(-400%,60%); filter: brightness(1);}
    
}
@keyframes movala{
    from{transform: translateY(-3%);}
    to{transform: translateY(5%);}}


#blc{
    height: 75px;
    margin-left:-25%;
    margin-top: 45%;
}   


#ubr{
    animation: ubr 7s ease-out forwards;
    background-size: cover;
}

@keyframes ubr{
    from{background-image: url(../images/vasil/uborka.webp); filter: brightness(0.6);}
    to{background-image: url(../images/vasil/izbin.webp);filter: brightness(0.8)}
}

#dlv{
    align-self: end;
    justify-self: center;
    height: 80px;
    opacity: 0;
    animation: kubr 7s ease-out;
}
@keyframes kubr{
    from{opacity: 0;}
    to{opacity: 1;}
}

#grm{
    background-color: brown;
    background-image: url(../images/vasil/gorho.webp);
    background-size: cover;
    
}
#mch{
    height: 180px;
    position: relative;
    z-index: 1;
    align-self: end;
    animation: birnd2 10s ease-in-out forwards;
    margin-left: -105%;
    animation-delay: 2s;
    
}
#kst1{
    height: 130px;
    position: relative;
    z-index: 2;
    align-self:center;
   margin-left: 105%;
   animation: birnd 8s ease-in-out forwards;
    
}

@keyframes birnd{
    from{transform: scale(1) ;}
    
    to{transform: scale(1.2) translateX(-125%) rotate(-21deg); filter: brightness(2);}
}

@keyframes birnd2{
    from{transform: scale(1) ;}
    to{transform: translate(-135%,35%) rotate(-25deg) scale(0.3); filter: brightness(0.1); }
    85%{transform: translate(-120%,15%) rotate(-15deg); filter: brightness(0.1);}
    70%{transform: translate(-90%,15%) rotate(-15deg); filter: brightness(1.4);}
}
.gornis2,#grd{
   
    background-image: url(../images/vasil/spal1.webp);
    background-size: cover;
    
}
#gornis{
   
    background-image: url(../images/vasil/gorho.webp);
    background-size: cover;
    
}

#doc1,#doc2{
    height: 180px;
    position: relative;
    align-self: end;
    filter: brightness(0.6);
    z-index: 2;
     animation: birnd4 8s ease-in-out forwards;
}
#doc2{
    margin-left: -20%;
}
#che3{
    position: relative;
    z-index: 1;
    height: 90px;
    margin-left: -20%;
    animation: birnd3 6s ease-in-out forwards;
}

@keyframes birnd3{
    from{transform: scale(1) ;filter: brightness(0.8);}
    
    to{transform: scale(1.8) translateY(65%) ; filter: brightness(2);}
}

@keyframes birnd4{
    from{transform: scale(1); filter: sepia(0%);}
    to{transform: translateY(55%)  scale(0.3); filter: brightness(0.1); }
    85%{transform: translateY(15%) scale(0.8); filter: brightness(0.1);}
    70%{transform: translateY(15%) ; filter: sepia(90%) brightness(1.5);}
}


#vaspr{
    height: 95px;
    justify-self: center;
    align-self: center;
    margin-left: 37%;
    margin-top: 18%;
    filter: brightness(0.8);
}
#vsar{
    height: 190px;
    margin-top: 37%;
}
#vasz{
    margin-top: 18%;
    height: 110px;
    margin-left: 10%;
    opacity: 0;
    animation: agan 7s ease-out forwards;
}
.opwind1{
    
    background-image: url(../images/vasil/ramky.webp);
    background-size: cover;
}   
#zarv{
    
    height: 120px;
    margin-left: 24%;
    margin-top: 19%;
    opacity: 0;
    animation: agan 5s ease-out forwards;
}

@keyframes agan{
    from{opacity: 0;}
     to{opacity: 1;}
     50%{opacity: 0.5;}
}

@media screen and (max-width:470px){
  
  #vasv{
    
    margin-left: 35%;
   
  }
  
}
@media screen and (max-width:680px){

     #vasv{
    
    margin-left: 35%;
   
  }
}