h1{
    color: rgb(128, 0, 70);
}


#re{
    height: 95px;
    align-self: end;
    justify-self:center ;
    margin-left: 50%;
}


#sa2,#sa1{
  height: 220px;
  
  align-self: end;
  
}
#ols{
  height: 190px;
  align-self: end;
  margin-left: 25%;
  margin-bottom: -3%;
  
  filter: brightness(0.7);
}
#ols1{
  height: 190px;
  align-self: end;
  margin-left: 25%;
  margin-bottom: -3%;
  animation: olmove 7s ease-in-out forwards 8s;
  filter: brightness(0.7);
}
#mas,#mas1{
  height: 130px;
  align-self: end;
  margin-left: 25%;
  margin-bottom: 5%;
  
}
#mas1{
  animation: marmove 7s ease-in-out forwards;
}

@keyframes marmove{
  from{transform: scale(1) translate(0,0); filter: brightness(0.7);}
  to{transform: scale(2.2) translate(-30%,15%);filter: brightness(0.9) ; }
}
#ans{
  height: 280px;
  align-self: end;
  margin-left: 7%;
  margin-bottom: -13%;
  animation: anmove 7s ease-in-out forwards 3s;
}

@keyframes anmove{
  from{transform:  translate(0,0); filter: brightness(0.7);}
  to{transform:  translateX(-195%);filter: brightness(1.3);}
}
@keyframes olmove{
  from{transform:  translate(0,0); filter: brightness(0.7);}
  to{transform:  translate(-95%,15%) scale(1.5);filter: brightness(1) ;}
}
.dvor_int,.sad_g, #dvrl,#dvint1,#dvra,.alpic{
  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;


}


.sad_g{
  background-image: url(../images/skas2/fond.webp);
  animation: playbg 0.1s ease-in-out forwards;
  
}
 #dvrl{
  background-image: url(../images/skas2/dvorint2.webp);  
  animation: britf 6s ease-in forwards;
  


}
@keyframes britf{
  from{filter: brightness(1);}

  to {filter: brightness(1);}
  5% {filter: brightness(3);}
  10%{filter: brightness(0.7);}
  33% {filter: brightness(0.5);}
  66% {filter: brightness(0.2);}
}

#orl{
  height: 95px;
  margin-left: 35%;
  margin-top: -15%;
  animation: orlmove 5s ease forwards 3s;
  opacity: 0;
  position: relative;
}

#orlm{
  align-self: end;
  margin-left:-30%;
  height: 180px;
   position: relative;
  filter: brightness(0.1);
  opacity: 0;
  animation: apior 1s ease-out forwards 8s;
}
#orll{
  height: 160px;
  margin-left: 25%;
  animation: lovor 4s ease-out forwards 8s;
  align-self: end;
  position: relative;
}
@keyframes apior{
  from{filter: blur(1px);transform: scale(0.5) translateY(45%);opacity: 1;}
  to{filter:brightness(1);transform: scale(1) translateY(-0%);opacity: 1;}
}

@keyframes lovor{
  from{transform:  translateX(0%);}
  to{transform: translateX(-180%);}
}
#sokl{
  height: 65px;
  margin-left: 105%;
  animation: solmo 5s ease-in forwards 2s;
}
@keyframes solmo{
  from{transform:  translate(0,0);}
  to{transform: scale(2.5) translate(-300%,250%); filter: brightness(0.2);}
  99%{transform: scale(2.5) translate(-300%,150%);filter: brightness(0);}
}
@keyframes solap{
  from{opacity: 1; filter: brightness(0);transform: scale(0.5);transform: translateY(50%)}
  to{transform: scale(1 ) translateY(0%); filter: brightness(1); opacity: 1;}
  
}
#sokm{
  height: 210px;
  align-self: end;
  margin-left: -85%;
  opacity: 0;
  animation: solap 1s linear forwards 8s;
}
#mar1{
  height: 350px;
  margin-left: -50%;
  margin-top: 25%;
}
@keyframes britf1{
  from{filter: brightness(1);}

  to {filter: brightness(1);}
  5% {filter: brightness(3);}
  10%{filter: brightness(0.7);}
  33% {filter: brightness(0.5);}
  66% {filter: brightness(0.2);}
  90% {filter: brightness(3);}
  95% {filter: brightness(0.2);}
}
#dvint1{
  
  background-image: url(../images/skas2/dvorint.webp);  
  animation: britf1 8s ease-in forwards;
  
}
#dvra{
  background-image: url(../images/skas2/dvorint1.webp);  
  animation: britf 6s ease-in forwards;
  
}
#anl{

  height: 180px;
  align-self: end;
  margin-left: -99%;
  filter: brightness(1);
  align-self:end;
  position: relative;
  animation: anm2 5s ease-in forwards 5s;
  z-index: 2;
}

#vrm{
  margin-left:45%;
  height: 190px;
  align-self:end;
  position: relative;
  z-index: 1;
  opacity: 0;
  filter: brightness(1.5);
  animation: ap 3s ease-in forwards 4s;
}
#vrp{
 opacity: 1;
  height:50px;
  position: relative;
  z-index: 2;
  filter: brightness(0.5);
  animation: flyp3 5s ease-in-out forwards ;
}

@keyframes anm2{
  from{transform: translateX(0);}
  to{transform: translateX(360%);}
}
@keyframes ap{
  from{opacity: 0;}
  to{opacity: 1;}
  50%{opacity: 0.5; filter: brightness(0.5);}
}

@keyframes flyp3{
  from{transform: translate(0,0);}
  to{transform: translate(950%,390%) scale(3) rotate(30deg);opacity: 0; }
 85%{transform: translate(750%,350%) scale(3) rotate(30deg); }

}

#mrv{
  height: 210px;
  opacity: 1;
  margin-left: 25%;
  position: relative;
  animation: transm 5s ease-in forwards 1s;
}
#mrk{
  height: 250px;
  margin-left: -65%;
  opacity: 0;
  position: relative;
  animation: transm1 2s ease-in forwards 4.5s;
}

@keyframes transm{
  from{transform:translate(0,0);opacity: 1;}
   to{transform:translate(-20%,35%) scale(2.1); opacity: 0;}
   99%{transform:translate(-19%,33%) scale(2.1); opacity: 0.7; filter:brightness(1.5);}
}
@keyframes transm1{
  from{transform:translate(0,0);opacity: 0;}
   to{ opacity: 1;}
   
}

.beesm,.kony,.bochk,#bch,#stado,.morevna,.stado{
  height: 300px;
    width: 310px;
    display: flex;    
    align-items: end;
    justify-content: center;  
    justify-self: center;    
    background-size: cover;
    border-radius: 8px;
    overflow: hidden;
     animation: playbg 2s ease-in-out forwards;
    
    
}
.morevna{
    
    align-items: end;
    justify-content: center;
    background-color: black;
    background-image: url(../images/skas2/marbat.webp);
        

}

@keyframes brk{
  from{filter:brightness(0.2)}
  to{filter:brightness(1)}
  
  75%{filter:brightness(0.7)}
  95%{filter:brightness(0.9)}
}

#kv{
  
  height: 250px;
  margin-bottom: 15%;
  animation: movk 5s ease-out 6 2s;
  filter: brightness(0.6);
}



.bom,#bsmb{
  height: 300px;
    width: 310px;
    display: flex;    
    overflow: hidden;
    justify-content: center;  
    justify-self: center;  
    background-size: cover;
    border-radius: 8px;
     animation: playbg 2s ease-in-out forwards;
       

}
.bom{
  background-color: rgb(93, 189, 133);
  background-image: url(../images/skas2/batfon2.webp);
}
#bsmb{
  
    align-items: end;   
    background-color: black;
    background-image: url(../images/skas2/cheinwall.webp);   
    filter: brightness(0.2);
    animation: brk 3s ease-out forwards;

}
#kv1{
  
  height: 250px;
  margin-bottom: 15%;
  align-self: end;
  filter: brightness(0.6);
  position: relative;
  z-index: 1;
  margin-left: 25%;
}
#vh{
  opacity: 0.8;
  height: 450px;
  position: relative;
  filter: blur(0.9px);
  z-index: 999;
   margin-left: -205%;
   align-self: end;
   margin-bottom: -35%;
   animation:storm 4s linear forwards ;
  
}
#mrk8{
  height: 290px;
  opacity: 1;
  margin-left: 84%;
  position: relative;
  align-self: end;
   
  
}
#mrk2{
  height: 290px;
  opacity: 1;
  margin-left: 25%;
  position: relative;
  align-self: end;
   animation:movs 2s linear forwards 2s;
  
}
@keyframes storm{
  from{transform: translate(0%,0%) rotate(2deg) scale(2.5);}
  to{transform: translate(150%,30%) rotate(-2deg) scale(4); opacity: 0;}
  99%{transform: translate(130%,30%) rotate(-2deg) scale(4); opacity: 1;}
}
@keyframes movs{
  from{transform: translate(0%,0%) rotate(2deg) ;}
  to{transform: translate(160%,10%) rotate(-2deg); opacity: 0.7;}
}



#sko,#sko2{
  width: 310px;
  height: 300px;
  display: flex;  
  overflow: hidden;
  border-radius: 8px;
  background-position:left;
   
}
#sko{
  background-image: url(../images/skas2/fonid1.webp);
    
  animation: skkf 2s linear 8, skkf1 6s ease-in  forwards 5s;
}
#sko2{
  background-image: url(../images/skas2/fonid1.webp);
    
  animation: skkf 4s linear 8, skkf1 6s ease-in  forwards 7s;
}
#rka,.skakosh,#dmy,.foto,#fto,#sdo,#sdo1,.reka,.yagafon{
  background-size: cover;
  height: 300px;
  width: 310px;
  display: flex;
  justify-content: center;
  justify-self: center;
  overflow: hidden;
  border-radius: 8px;
  
}

@keyframes skkf{
  from{background-position:left;}
  to{background-position: right;}
  50%{background-position: center;}
  
}
@keyframes skkf1{
  from{ background-image:url(../images/skas2/fonid1.webp);}
  to{background-image:url(../images/skas2/fon3p.webp);}
  
}
.voronh,#vrh,#vrh2,#vrh3{
    background-size: cover;
    height: 330px;
    width: 600px;
    display: flex;    
    justify-self: center;
    overflow: hidden;
    border-radius: 8px;
    animation: playbg 2s ease-in-out forwards;
}
.voronh{
   background-image: url(../images/skas2/startmuv.webp);
}
#vrh{
    background-image: url(../images/skas2/zamok66.webp);   
      
}

#vrnh{

  height: 160px;
  justify-self: center;
  margin-top:36%;
  margin-left: 25%;
  opacity: 0.6;
  
}
#vrnh1{
  height: 160px;
  justify-self: center;
  margin-top: 18%;
  margin-left: 25%;
  

}
#vetk{
  height: 280px;
  margin-left: 45%;
  align-self: end;
  backdrop-filter: blur(0.5px);
  animation: vetmuv 8s  ease-in forwards 2s;
  position: relative;
  z-index: 2;
}
#soc4{
  height: 65px;
  margin-top: -65px;
  margin-left: -10%;
  filter:brightness(0.6);
  animation: soc4muv 8s  ease-in forwards 5s;
}

@keyframes soc4muv{
  from{transform: rotate();}
  to{transform: rotate(-36deg) scale(1.8) translate(-625%,-15%);filter: brightness(1);}
}


#vrh2{
    background-image: url(../images/skas2/orelhous.webp);    
}

#cld{
    height: 350px;
    opacity: 0.9;
    margin-top: -15%;
    position: relative;
    z-index: 2;
    animation: clumuv 6s ease-in-out forwards 2s;
    backdrop-filter: blur(0.5px);
    position: relative;
    z-index: 2;
}

@keyframes clumuv{
  from{transform: scale(1);}
  to{transform: scale(1.3) translate(45%, -45%);}
}

#vrh3{
    background-image: url(../images/skas2/zamokBl77.webp);
  }

#st2{
  height: 650px;
  margin-top: -17%;
  margin-left: -15%;  
  animation: sontmuv 8s  ease-in forwards 2s;
  position: relative;
  z-index: 2;
}
#vron4{
  margin-left: -60%;
  height: 65px;
  position: relative;
  z-index: 1;
  animation: vron4muv 8s ease-in-out forwards 5s;
}
#orl4{
  height: 160px;
  margin-top: -25%;
  margin-left: -45%;
  position: relative;
  z-index: 1;
  animation: orl4muv 6s ease-in-out forwards;
}
@keyframes orl4muv{
  from{transform: rotate();}
  
 to{transform:  scale(1.8) translateY(183%);filter: brightness(1);}
}
@keyframes sontmuv{
  from{transform: rotate();}
  to{transform: rotate(-36deg) scale(0.8) translate(-125%,-60%);filter: blur(0.1);}
}
@keyframes vron4muv{
  from{transform: rotate();}  
  to{transform: rotate(-36deg) scale(2.8) translate(-425%,-5%);filter: brightness(1);}
}
#sksh{
  height: auto;
  margin-bottom: -3%;
  animation: skk 1s ease-in 16;
  height: 260px;
  align-self: end;
  margin-right: 25%;

}
@keyframes skk1{
  from{transform: translateX(-1%) scale(1);}
  to{transform: translate(1%,20%) scale(1.2);}
  
}
#sksdv{
   animation: skk 2s ease-in 16;
   height: auto;
   margin-bottom: -43%;
    height: 360px;
  align-self: end;
    margin-right: 25%;
}
#rka,.reka{
  background-image: url(../images/skas2/reka.webp); 
}
#ogn{
  height: 150px;
  margin-left: 50%;
  margin-top: 18%;
  animation: govi 6s ease-out 4s 55;
  filter: brightness(0.6) opacity(0.6);
  position: relative;
   z-index: 1;
}
#ogn2{
  height: 110px;
  margin-left: -95%;
  margin-top: 15%;
   animation: govi 5s ease-out 3s 56;
   filter: brightness(0.6) opacity(0.6);
   position: relative;
   z-index: 1;
 
 
}
#ogn3{
  height: 70px;
  margin-top: 55%;
  margin-left: -15%;
  animation: govi 4s ease-out 1s 58;
  filter: brightness(0.6) opacity(0.6);
  position: relative;
   z-index: 1;
  
}
#ogn4{
  height: 110px;
  margin-left: -35%;
  margin-top: 35%;
   animation: govi 4s ease-out 2s 56;
   filter: brightness(0.6) opacity(0.6);
   position: relative;
   z-index: 1; 
}

@keyframes govi{
  from{transform: scaleY(1) translateY();filter: brightness(0.6) opacity(0.6);position: relative;z-index: 1;}
  to{transform:scaleY(1.1) translateY(-4%);filter: brightness(1) opacity(0.6);position: relative;z-index: 1;}
  50%{transform:scaleY(1.1) translateY(-4%);filter: brightness(1.2) opacity(1) ;position: relative;z-index: 1;}
  75%{transform:scaleY(1.2) translateY(-6%);filter: brightness(0.8) opacity(0.8);position: relative;z-index: 1;}
}
#brd{
  position: relative;
  z-index: 2;
  margin-left:-45%;
  margin-bottom: -5%;
  filter: brightness(0.5);
  opacity: 1;
  animation: orlmove 1s linear forwards 1s;
 
}
#brd1{
  position: relative;
  z-index: 2;
  margin-left:-45%;
  margin-bottom: -5%;
  filter: brightness(0.5);
  opacity: 0;
  animation: ap 2s ease-in forwards 2s;
}

#dmy{
  background-image: url(../images/skas2/domjag.webp); 
 
}
#yag{
  height: 270px;
  margin-left: -33%;
  display: flex;
  align-self: end;
  animation: moveryag 1s ease-in 12,moval 1s ease forwards 13s;
  position: relative;
  z-index: 1;
}
@keyframes moveryag {
   from{transform:translate(0%,0%) ;}
  to{transform: translate(-0.1%,0.1%) }
  66%{transform: translate(0.2%,-0.2%) ;}
  
}
#ruk{
  height: 270px;
  margin-top: 12%;
  animation:  movr 1s ease-in 13,moval 1s ease forwards 13s;
  filter: brightness(1.1);
}
@keyframes movr {
  from{transform:translate(0%,0%) ;}
  to{transform: translate(-0%,0.5%); }
  66%{transform: translate(0%,-0.8%); }
  
}
#stup{
  height: 120px;
  margin-left: -15%;
  margin-top: 65%;
}
@keyframes moval {
  from{transform:translate(0%,0%) ;}
  to{transform: translate(15%,25%) scale(1.5); }
  
  
}
#fto{
  background-image: url(../images/skas2/ivan.webp);
  align-items: end;
  
}
#fto{
  animation: disapiar 2s ease-out forwards 1s;
}
#lk,#vlk,#tbk{
  height: 65px;
  animation: blacksh 2s ease-out forwards 3s;
}
@keyframes blacksh {
  from{filter: brightness(1);}
  to{filter: brightness(0.2);}
}

@keyframes disapiar {
  from{background-image: url(../images/skas2/ivan.webp);}
  to{background-image: url(../images/skas2/beziv.webp);}
}
.bochk,#bch{
  background-image: url(../images/skas2/nochv.webp);  
  align-items: end; 
 
}
#bch{
  animation: chakg 6s ease-in-out 2s;
}

#bck{
  height: 65px;
  margin-left: 55%;
  margin-bottom: 19%;
  position: relative;
  z-index: 1;
  animation:  transm 1s linear forwards 5s;
}
#obck,#sbck,#vbck{
  height: 75px;  
  position: relative;
  z-index: 2;
}
#vbck{
  margin-left: -60%;
  margin-bottom:15%;
  animation: flvr 2s ease-in forwards, transm 1s linear forwards 5s;
}
#obck{
  margin-bottom: 35%;
  margin-left: -20%;
  animation: florl 2s ease-in forwards, transm 1s linear forwards 5s;
}
#sbck{
  margin-bottom: 20%;
   margin-left: -7%;
   animation: flsk 2s ease-in forwards, transm 1s linear forwards 5s;
}
@keyframes florl{
  from{transform: translateX(0);}
  to{transform: translateY(15%) scale(1.5) rotate(3deg);}
}
@keyframes flvr{
  from{transform: translateX(0);}
  to{transform: translateX(35%) scale(1.2) rotate(-5deg);}
}
@keyframes flsk{
  from{transform: translateX(0);}
  to{transform: translateX(-35%) scale(1.2) rotate(5deg);}
}
@keyframes chakg{
  from{filter: brightness(1);}
  10%{filter: brightness(3);}
  12%{filter: brightness(1);}
  50%{filter: brightness(0.4) blur(0.5px);}
  to{filter: brightness(0.2) blur(0);}
}
#yast{
  height: 160px;
  position: relative;
  margin-left: -80%;
  z-index: 3;
  filter:brightness(0.6);
  animation: babd 2s linear forwards 1s;
}
#srbck{
  opacity: 0;
  height: 230px;
  margin-left: -25%;
  animation: transm1 1s linear forwards 6s;
}
.kony{
  background-color: orange;
  background-image: url(../images/skas2/kony.webp);
  
}
#sdo{
  animation: muvkon 1s linear forwards;
  filter: brightness(0.7);
  
  
}
#zbr{
  height: 160px;
  position: relative;
  z-index: 2;
  align-self:end ;
  margin-left: -95%;
  opacity: 0;
  animation: ap 2s ease-in forwards 2s;
  
}

#sdo1{
   background-image: url(../images/skas2/isbfon.webp);
   background-size: cover;
   height: 300px;
   display: flex;
   filter: brightness(0.5);
   
  
}
#tbun{
  height: 210px;
  align-self:end ;
  position: relative;
  z-index: 1;
  margin-bottom: 9%;
  opacity: 0;
  animation: ap 2s ease-in forwards ;
}
@keyframes muvkon{
  from{background-image: url(../images/skas2/kony.webp);}
  
  to{background-image: url(../images/skas2/kony6.webp);}
  55%{background-image: url(../images/skas2/kony4.webp);}
  75%{background-image: url(../images/skas2/kony5.webp);}
}
@keyframes babd {
  from{z-index: 0;}
  to{transform: translateY(55%) scale(0.2);z-index: 0;opacity: 0;}
  99%{transform: translateY(55%) scale(0.2);z-index: 0;opacity: 1; }
  95%{z-index: 0;transform: translateY(45%) scale(0.5);}
  
}

#fin{
  background-image: url(../images/skas2/fonlas.webp);
  background-position: left;

  display: flex;
  align-items: end;
  animation:nov 13s linear forwards;
}
.alpic,#fin0{
   background-image: url(../images/skas2/fonlas.webp);
   background-position: left;
  justify-content: center;
}
@keyframes nov{
  from{background-position: left;}
  to{background-position: right;}
  33%{background-position: center;}
}




#lmch{
  height: 350px;
  position: relative;
  z-index: 1;
  margin-left: -15%;
  margin-bottom: -45%;
  animation: dvig 1s ease-in-out 12,easyh 1s linear forwards 13s;
 

}
#ldv{
  position: relative;
  z-index: 2;
  height: 350px;  
  margin-bottom: -45%;
  animation: dvig2 2s ease-in-out 22 2s, girlfir 2s ease-out forwards 6s,easyh 1s linear forwards 13s;
  
}

@keyframes dvig {
  from{transform: rotate(0);}
  to{transform: rotate(-1deg);}
  66%{transform: rotate(1deg);}
  
}
@keyframes dvig2 {
  from{transform: rotate(0);}
  to{transform: rotate(-2deg);}
  66%{transform: rotate(1deg);}
  
}
@keyframes girlfir {
  from{transform: translateX(0) rotate(-2deg);}
  to{transform: translateX(45%) rotate(2deg);}
  
  
}
#kmr{
  height: 190px;
  display: flex;
  align-self:  end;   
  position: relative;
  z-index: 2;
  animation: kospd 1s ease-in forwards 3s,easyh 1s linear forwards 10s;
}
@keyframes kospd {
  from{transform: translateY(0);}
  to{transform: translateY(75%);}
  
}
@keyframes easyh{
  from{opacity: 1;}
  to{opacity:0;}
}

#kost{
  height: 175px;
  margin-left: -25%;
  display: flex;
  align-self: end;
  margin-bottom: -3%;
  position: relative;
  opacity: 0;  
  z-index: 3;
  animation: ap 2s ease-in-out forwards 6s,easyh 1s linear forwards 10s;
}
#dvp1{
  height: 85px;
  margin-left: -30%;
  margin-top: 33%;
  position: relative;
  z-index: 1;
  animation: movst 3s ease-in-out forwards, kospd2 1s ease-in forwards 3s,easyh 1s ease-in forwards 4s;
  
}

@keyframes movst{
  from{transform: translate(0%,0%) ;}
  to{transform: translate(2%,-65%) scale(2);}
}
@keyframes kospd2 {
  from{transform: translateY(0) scale(2);}
  to{transform: translateY(35%) scale(3); z-index: 3;}
  
}
@media screen and (max-width:470px){
  
  #sa2{
    
    margin-left: 20%;
   
  }
  #mas1,#mas{
    margin-left:-1% ;
  }
  
}