h1{
    color: rgb(171, 133, 21);
}

.derf1,#fons1,#tum6,.uch6,.dver7,#dvr7,.dom8,#mor5,.pir5,#fsk4{
  height: 321px;
  width: 330px;
  display: flex;
  align-items: end;
  border-radius: 8px;  
  animation: playbg 1s ease-in-out forwards;
  justify-self: center;
  overflow: hidden;
  background-size: cover;
 

}
.domsr2{
    width: 600px;
    height: 330px;
    border-radius: 8px;
    display: flex;
    justify-self: center;    
    background-size: cover;
    overflow: hidden;  
    background-color: rgb(4, 43, 30);
    background-size: cover;
    
  }

@keyframes memu {
    0%{transform: rotate();}
    33%{transform:translateY(25%) rotate(-45deg); filter: brightness(3);}
    66%{transform:translateY(25%) rotate(45deg); filter: brightness(1);}
    99%{transform:translateY(20%) rotate(-45deg); filter:brightness(3)}
     100%{transform: rotate(20deg); filter:brightness(1)}
}


#vm1:hover, #vm1:focus{
    animation: disapr 2s ease-in-out forwards;
}
#vm1{
    height:80%;
    margin-left: 50%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards, memu 8s  ease-in-out forwards 2s 3;
}

#ss1{
    opacity: 0;
    height: 83%;
    margin-left: 50%;
    margin-bottom: -35%;
    animation: apir 2s ease-in-out forwards 5s,jumpup 1s ease-in forwards 6s;
}
#me7{
    opacity: 0;
    height: 65%;
    transform: rotate(-90deg);
    margin-left: 50%;
    animation: apir 2s ease-in-out forwards, blesk 2s ease-in-out 3, rost 5s ease-in-out forwards 6s,blesk 2s ease-in-out 2 10s;
}
#rs2{
    height: 70%;
    margin-top: 17.5%;
    margin-left: 20%;
    position: relative;
    z-index: 2;
    opacity: 0;
    animation: apir 2s ease-in-out forwards, movr 1s ease-in 5 2s;
}
#mt6{
    opacity: 0;
    height: 80%;
    margin-bottom: -19%;
    animation: apir 2s ease-in-out forwards,dfli20 1s ease-in-out 6  2s, devskak 1s ease-in forwards 8s;
}
@keyframes movr {
  from{transform:translate(0%,0%) ;}
  to{transform: translate(-0%,0.5%); }
  66%{transform: translate(0%,-0.8%); }
  
}
@keyframes moveryag {
   from{transform:translate(0%,0%) ;}
  to{transform: translate(-0.1%,0.1%) }
  66%{transform: translate(0.2%,-0.2%) ;}  
}
@keyframes devskak{
    0%{
        transform: translate(-5%,10%);
    }
    
    45%{
        transform: translate(-120%,-5%) ;
    }
    
    100%{
        transform: translate(-255%,5%) ;
    }
}
#st2{
    margin-top: 5%;
    height: 100%;
    margin-left: -9%;
    position: relative;
    z-index: 1;
    opacity: 0;
    animation: apir 2s ease-in-out forwards,moveryag 1s ease-in 5 2s;
    
}
#fons1{
    background-position: right;
    background-image: url(../images/kon/fonst1.webp);
    animation: letu 5s ease-in-out forwards;

}
#tum6{
    background-position: right;
    background-image: url(../images/kon/fon6.webp);
    animation: letunaz 8s ease-in-out forwards 2s;

}
#dvr7{
    background-image: url(../images/kon/dverfon.webp);
}
#kav7{
    background-image: url(../images/kon/kave2.webp);
}
#ks7{
    height: 100%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards,jumpup 5s ease-in-out forwards 2s, disapr 2s ease-in-out forwards 4s;
}
#so7{
    height: 90%;
    opacity: 0;
    margin-left: -100%;
    animation: apir 2s ease-in-out forwards 4s,dfli 8s ease-in-out forwards 3 5s;
    position: relative;
    z-index: 1;
}
#ke7{
    height: 40%;
    opacity: 0;
    margin-left: -40%;
    margin-bottom: 5%;
    position: relative;
    z-index: 2;
    animation: apir 2s ease-in-out forwards 4s,kefl 3s ease-in forwards 3 5s,orlmove 2s ease-in-out forwards 8s;
}
@keyframes kefl {
    0%{transform: rotate(3deg);}
    33%{transform: rotate(90deg); filter: brightness(1.8);}
    66%{transform: rotate(-90deg); filter: brightness(1.8);}
    100%{transform: rotate(-3deg);}
}
#fonm1{
    background-position: left;
    background-image: url(../images/kon/fon11.webp);
    animation: letunaz 5s ease-in-out forwards;

}
#fony1{
    background-position: left;
    background-image: url(../images/kon/fon13.webp);
    animation: letunaz 5s ease-in-out forwards;
}
#ska8{
     background-image: url(../images/kon/fonsky1.webp);
     animation: letu 1s linear 11;
}
@keyframes chmo {
    0%{background-image:url(../images/kon/motr.webp);}
    50%{background-image:url(../images/kon/beg.webp) ;}
    100%{background-image:url(../images/kon/motr.webp);}
}
@keyframes letu6{
  from{background-position: top;}
  to{background-position:bottom;}
}
@keyframes fall{
    from{transform: translateY();}
    to{transform: translateY(200%) scale(0.5);}
}
#mor5{
    
    animation: chmo 13s ease-in-out forwards ;
    
    
}
#fb4{
    height: 60%;
    opacity: 0;
    margin-bottom: 25%;
    margin-left: 35%;
    animation: apir 2s ease forwards,fall 9s ease-in-out forwards 2.5s;
}
#lk4{
    height: 100%;
    margin-left: -95%;
    margin-bottom: -5%;
    opacity: 0;
    animation: apir 2s ease forwards,jumpup3 2s ease-in-out forwards 2s;
}
#pr5{
    opacity: 0;
    height: 60%;
    animation: apir 2s ease-in-out forwards 2s, dfli 8s ease-in-out 7s;
     position: relative;
    z-index: 2;
}
#pr25{
    opacity: 0;
    height: 100%;
    margin-left: -55%;
    margin-bottom: -30%;
    position: relative;
    z-index: 1;
    animation: apir 2s ease-in-out forwards,dfli 8s ease-in-out 5s;
}
#fsk4{
    background-image: url(../images/kon/fsk5.webp);
    background-position: top;
    animation: letu6 9s ease-in-out forwards 2s;
}
#pr35{
    opacity: 0;
    height: 60%;
    margin-left: -55%;
     position: relative;
    z-index: 2;
    animation: apir 2s ease-in-out forwards 2s,dfli 8s ease-in-out 7s;
}
#mk8{
    opacity: 0;
    height: 60%;
    animation: apir 2s ease-in forwards, skk 5s ease-in-out 6, jumpup 2s ease-in-out forwards 8s,pryg 1s ease-in forwards 10s ;
}
#ys1{
    opacity: 0;
    height: 60%;
    margin-left: 35%;
    animation: apir 2s ease-in-out forwards 5s,skk 1s ease-in-out 5 7s;
}
#ms1{
    opacity: 0;
    animation: apir 2s ease-in-out forwards 5s,rost2 3s ease-in-out forwards 7s;
    height: 60%;
    margin-bottom: -5%;
    margin-left: 25%;
    
}
#kk2{
    margin-top: 28%;
    height: 110%;
    opacity: 0;
    transform: rotate(-20deg);
    animation: apir 2s ease-in-out forwards 6s, kond 5s ease-in-out 8s;
    margin-left: -45%;
    position: relative;
    z-index: 3;
}
@keyframes kond{
    from{transform:translate() rotate(-10deg);}
   to{transform:translate(5%,-2%) rotate(-15deg);}

}
@keyframes pryg{
    from{transform: translateY(-35%);}
    to{transform: translateX(150%);}
}
.derf1{
    background-image: url(../images/kon/fon121.webp)
}
.domsr2{
    background-image: url(../images/kon/starikdom.webp)
}

@media screen and (width>=1200px) {
.derf1,#fons1,#tum6,.uch6,.dver7,#dvr7,.dom8,#mor5,.pir5,#fsk4{
    height: 600px;
    width: 620px;
}


.domsr2{
   height: 600px;
   width: 1080px; 
}
}

@media screen and (width<330px) {
.derf1,.domsr2,#fons1,#tum6,.uch6,.dver7,#dvr7,.dom8,#mor5,.pir5,#fsk4{
    height: 254px;
    width: 260px;
}

}