h1{
    color: rgb(122, 77, 101);
}
.opwindb,#opwi,.yagadom,#yagadom,#tet,#ygd,.tkatk,#tka,#stk,.pole,#pole,#let,#brz,
 #tfon,.step,#step,#stp,.uhod, #uhod,#vyho,#sobk,#rab,#pole{
  height: 300px;
  width: 310px;
  display: flex;
  align-items: end;
  border-radius: 8px;  
  justify-self: center;
  overflow: hidden;
  animation: playbg 0.1s ease-in-out forwards;

}
.uhod{
    background-image: url(../images/yaga2/nebo.webp);
    background-size: cover;
    background-color: blueviolet;
}
#newh{
    height: 450px;
}
#opwi{
    background-image: url(../images/yaga2/devfon.webp);
    background-size: cover;
    background-position: left;
   
}
#ygd{
    background-image: url(../images/yaga2/dom.webp);
    background-size: cover;      
    animation: zoom1 5s ease-in forwards;
}
#dvk{
    height: 250px;
    margin-left: -105%;
    position: relative;
    z-index: 1;

}
#vtk{
    height: 350px;
    margin-bottom: 13%;
    position: relative;
    z-index: 2;
    animation: vetmuv 5s ease-in forwards;
}
#byg{
    height: 550px;
    margin-bottom: -165%;
    margin-left: -40%;
    opacity: 1;
    animation: jumpup 0.2s ease-in-out forwards 5s;
    
}
#tet{
    background-image:  url(../images/yaga2/okno.webp);
    background-size: cover;
    animation: playbg 2s ease-in-out forwards;
   
}
#tdr,#mh{
    height: 250px;
}
#mh{
    
    margin-bottom: -3%;
    position: relative;
    z-index: 2;
}

#pl{
    height: 200px;
    margin-left: -40%;
    margin-bottom: -25%;
    animation: dfli 2s ease-in 4;
     position: relative;
    z-index: 3;
}
#stk{
    background-image:  url(../images/yaga2/tkat4.webp);
    background-size: cover;
    background-position: left;    
    animation:letu 5s ease-in-out forwards 8s;
    overflow: visible;
}
#kt1{
    height: 220px;
    margin-bottom: -70%;
    margin-left: -20%;
    animation: jumpup 2s ease-in-out  3;
    
}

#vck{
    height: 65px;
    margin-left: 25%;
    margin-bottom: 30%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 5s,dfli20 2s ease-in forwards 6s;
}
#kt2{
    opacity: 0;
    animation:apir 2s ease-in-out forwards 12s,muvhe 4s ease-in  forwards 13s 3;
    margin-bottom: 43%;
    margin-left: -62%;
    height: 58px;

}
#pole{
    background-image:  url(../images/yaga2/yaga3fon.webp);
    background-size: cover;
    animation: playbg 2s ease-in-out forwards;
}
#brz{
     background-image:  url(../images/yaga2/berez2.webp);
    background-size: cover;
    animation: playbg 2s ease-in-out forwards;
       
}
#tfon{
     background-image:  url(../images/yaga2/fonteta.webp);
    background-size: cover;
    animation: playbg 2s ease-in-out forwards;
       
}
#uhod{
    background-image:  url(../images/yaga2/dom.webp);
    background-size: cover;
    animation: playbg 2s ease-in-out forwards;
       
}
#bka{
    height: 5px;
    margin-bottom: 65%;
    margin-left: 55%;
    animation: stupm 4s ease-in forwards;
    position: relative;
    z-index: 1;
}
#grb{
    height: 350px;
    margin-left: -80%;
    position: relative;
    z-index: 2;
    margin-bottom: -115%;
    animation: jumpup3 2s ease-in forwards 1s;
}
#ls{
    height: 350px;
    margin-left: -125%;
    opacity: 0;
     position: relative;
    z-index: 3;
    animation: apir 1s ease-in forwards 2s;
}
#vtb{
    height: 350px;
    animation:movk 4s ease-in  forwards 3,disapr 2s ease-in forwards 12s;
    position: relative;
    z-index: 1;
}

#sv{
    height: 280px;
    margin-left: -85%;
    opacity: 0;
    margin-bottom: 35%;
    position: relative;
    z-index: 2;
    animation: apir 2s ease-in forwards 8s,disapr 2s ease-in forwards 12s;
}
#stp{
    background-image:  url(../images/yaga2/step.webp);
    background-size: cover;
    animation: playbg 2s ease-in-out forwards;   

    animation: chp 7s ease-in-out forwards 2s;
}

#rk{
    height: 320px;
    opacity: 0;
    animation: apir 2s ease-in-out 2s;
}
@keyframes chp{
    from{background-image: url(../images/yaga2/step.webp);}
    to{background-image: url(../images/yaga2/step.webp);}
   83%{background-image: url(../images/yaga2/reka4.webp);}
}

#bls{
    height: 330px;
    margin-left: -105%;
    margin-bottom: -35%;
    opacity: 0;
    animation: apir 2s ease-in-out 6s;
}
#vr0{
    height: 190px;
    margin-bottom: -10%;
    margin-left: -9%;
}
#vr{
    height: 190px;
    margin-bottom: -10%;
    margin-left: -9%;
    animation: blesk 2s ease-in-out 2;
}
#dv2{
    height: 350px;
    margin-left: -65%;
    margin-bottom: -15%;
   
}
#sobk{
     background-image:  url(../images/yaga2/budka.webp);
     animation: playbg 2s ease-in-out forwards;
    background-size: cover;
}
#sb1,#sb2{
    height: 250px;
    animation: disapr 3s ease-in forwards 5s;
    
}
#sb2{
    margin-left: -82%;
    opacity: 0;
    animation: apir 3s ease-in forwards 5s;
}
#ed2{
    height: 95px;
    margin-bottom: -5%;
    margin-left: -5%;
    opacity: 0;
     animation: apir 3s ease-in forwards 3s;
}
#rab{
    background-image:  url(../images/yaga2/fonrab.webp);
    background-size: cover;
    animation: playbg 2s ease-in-out forwards;
}
#dr{
    height: 250px;
}
#plk{
    height: 90px;
    margin-left: -63%;
    margin-bottom: 53%;
    opacity: 0;
    animation: apir 3s ease-in forwards 3s;
}