h1{
    color: green;
}
article{
  margin-left:2% ;
  max-width: 95%;
  text-align: justify;
  
}
h2{
  text-align: center;
}


.first_picture,#kh3,.pic_kh,#kh2,#kh1,.kosh_deth,#kdt,#mre,#ple,.mr0,#mr,#chr,#slk,.chirch1{
    height: 300px;
    width: 310px;    
    display: flex;
    justify-self: center;
    border-radius: 8px;    
    overflow: hidden;
    animation: playbg 2s ease-in-out forwards;

}
.first_picture{
    background-image: url(../images/skas2/palat.webp);
    background-size: cover;
    background-color: brown;
    justify-content: end;
     animation: playbg 0.1s ease-in-out forwards;
}

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

}
.first_picture img:hover{
    animation-name: opa;
    animation-duration: 3s;
    
}

#kh3{
    background-image: url(../images/skas2/khouse3.webp);  
    background-size: cover;
    justify-content: center;   
    
}

#kh2{
    background-image: url(../images/skas2/khouse2.webp);
     
    background-size: cover;
    justify-content: center;
    align-items: end;
        
}
#kch:hover{
    animation: opa 0.3s linear;
}
#rihe{
    height: 100px;
    margin-left: 1%;
    opacity: 0;
    animation:apir 2s ease-in-out forwards 2s, movr 3s ease forwards 4s;
    margin-top: 3%;    
    position: relative;
    z-index: 1;
    
}
#kch{
    height: 350px;
    position: relative;
    z-index: 2;
    margin-top: 8%;
    margin-left: -60%;    

}
#lefh{
    height: 130px;
    position: relative;
    z-index: 1;
    margin-left: 25%;
    margin-top: 3%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 2s,movl 3s ease forwards 4s;
  
}
#hdve{
    height: 250px;
   justify-self: center;
}

#nko{
    height: 200px;
    position:relative;
    margin-right:250%;
    padding-top: 47%;
    opacity: 0.9;
}
.koschey{
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    height: 300px;
    width: 300px;
    
}

#nko:hover,#lkz:hover{
    transform: scale(1.2) rotate(-5deg);
    opacity: 1;
}

@keyframes movl{
  from{transform: translate(0,0) rotate(-15deg);
  }
  to {transform: translate(-0px,0px) rotate(-35deg) scale(1.2);filter: brightness(1.5);
  }
}

@keyframes movr{
    
  from{transform: translate(0,0) rotate(15deg);
  }
  to {transform: translate(0px,0px) rotate(35deg) scale(1.2);filter: brightness(1.5);
  }
}

#dzar{
    height: 300px;
    margin-right: 100%;
    animation: moverd 5s linear forwards;
    margin-bottom: -15%;
}

#mzar{
    height: 160px;
    margin-bottom: 18%;
    margin-left: 7%;
    animation: moverm 3s linear forwards;
    
}
@keyframes moverm {
    from {transform: translateY(10%) scale(1);}
     to {transform:translateX(13%)  translateY(16%) scale(1.9);}
     50% {transform:translateX(17%) translateY(14%) scale(1.6);}
}
  

@keyframes moverd {
    from {transform: translateX(200%);}
     to {transform: translateX(160%);}
     50% {transform: translateX(140%);}
}


#kh1{
     background-image: url(../images/skas2/khouse.webp);   
    background-size: cover;
    justify-content: end;
    align-items: end;   
    
}
.kosh_deth{
    background-image: url(../images/skas2/dub.webp); 
    background-size: cover;
    justify-self: center;    
}


#kdt{
    background-color: black;
   background-image: none;
   justify-self: center;
   align-items: center;
   justify-content: center;   
}
#snd{
    position: absolute;
    z-index: 3;
    justify-self: start;  
    height: 270px;
    animation: shownext 3s linear forwards;
    animation-delay: 3s;
}
#zai{
    z-index:2;
    bottom:15%;
    position: relative;   
    height: 350px;
    width: auto;
    animation: shownext1 3s linear forwards;
    animation-delay: 8s;
   
}
#utk{
    position: absolute;
    z-index: 1;
    animation: shownext1 3s linear forwards;
    animation-delay: 12s;
    height: 85px;
    width: auto;

}

#yzo{
    position: absolute;
    z-index: 0; 
    padding-top: 35px;
    height: 50px;
    width: auto;

}

@keyframes shownext{
    from {
        opacity: 1;
    }
    to{ opacity: 0.3;}
}
@keyframes shownext1{
    from {
        opacity: 1;
    }
    to{ opacity: 0.4;}
}


#mre{
    background-image: url(../images/skas2/more1.webp);  
    background-size: cover;
    display: flex;    
    justify-content:center;
    align-items: end;   
   
}
#сhuk{
    height: 210px;
    animation: buildmt 2s linear forwards;
    animation-delay: 2s;

}
#cmt{height: 250px;
    opacity: 0;
    position: absolute;
    animation: apir 2s linear forwards;
    animation-delay: 5s;
}
#yai{
    height: 75px;
    position: absolute;
    animation: disapr 2s linear forwards;
    padding-bottom: 80px;
}


#ple{
    background-image: url(../images/skas2/dub.webp);
    background-size: cover;   
   
}
#vlk{
    height: 150px;
    position: absolute;
    z-index:2 ;
    opacity: 0;
    animation:  apir 2s  linear forwards;
    animation-delay: 1s;
    margin-bottom: 2%;
    align-self: end;
    
}
#za2{
    height: 150px; 
    margin-bottom: -7%;
    margin-left: -3%;
    animation: none;
    z-index: 3;    
    align-self: end;    
    
}
#vrn{
    height: 90px;
    position: absolute;
    margin-left: 10px;
    margin-top: 5px;
    z-index: 2;    
    animation: moverv 1s linear  forwards;
    animation-delay: 1s;
}
#ut2{
    height: 35px;
    margin-top: 20%;
    margin-left: 28px;
    z-index: 1;    
    animation: moveru 1s ease forwards;
    animation-delay: 1s;
}

@keyframes moveru {
    from {transform: translateY(10%) scale(1);}
     to {transform:translateX(483%)  translateY(570%) rotate(195deg) scale(1.5);}
     50% {transform:translateX(295%) translateY(294%) rotate(95deg) scale(1.2);}
}

@keyframes moverv {
    from {transform: rotate(21deg);}
    to {transform:rotate(-17deg);}
     
}

.mr0{
    background-image: url(../images/skas2/rfon.webp);
    background-size: cover;  
    align-content: end;
    justify-content: center;  
    
}
#mr{
    background-image: url(../images/skas2/fonr.webp);
    background-size: cover;   
    align-content: end;
    justify-content: center;   
    
    
}
#parn{
    opacity: 0;
    animation: apir 3s ease-in-out  forwards 2s, rost2 2s ease-in forwards 4s;
    
    
    justify-self: end;
}    

#prm{
    height:140px;
    width: 110px;
    animation: mring 5s ease-in-out 1 forwards;
    position: absolute;
    animation-delay: 1s;
    display: flex;
    justify-self: center;
    align-self:flex-end ;
    
}
#prm0{
    height:140px;
    width: 110px;    
    display: flex;
    justify-self: center;
    align-self:flex-end ;    
   
}
@keyframes mring{
    from {opacity:0.9; transform: rotate(-165deg);}
    to{opacity:0.9; transform: rotate(-165deg); opacity: 0;}
    50%{opacity:1; transform: rotate(35deg);}
}






.wedding{
    height: auto;
    width: 360px;
    float: right;
    display:grid;
    grid-column: 1fr;
    justify-content: center;
}

#chr{
   background-image: url(../images/skas2/chirch.webp);
  background-size: cover; 
  justify-items: end;
  align-items: end;
 
}
.chirch1{
 
  background-image: url(../images/skas2/chirch1.webp);
  background-size: cover;  
  justify-items: end;
  align-items: end;
  
}
@keyframes slmove {
    from{transform: translateX(0%);}
    to{transform: translateX(-25%);}
}


#zrb{
    height: 180px;
}
#bak{
    height: 150px;
}
#str{
    height: 180px;
    animation: slmove 2s ease-in forwards;
    display: 1s;
    z-index: 0;
    position: relative;    
    
}
#mls{
    height: 200px;    
    animation: slmove 2s ease-in forwards;
    display: 1s;
    z-index: 0;
    position: relative;
}
#zdot {
  height: 150px;
  z-index: 1;  
  position: relative;
  animation: disapr 2s ease-in forwards;
  animation-delay: 1.5s;
}
#zdt{
    height: 170px;
    opacity: 0;
    animation: apir 2s ease-in forwards, zdmove 2s ease-in forwards ;
    animation-delay: 1s;
    z-index: 1;
    
}
#slk{
  background-image: url(../images/skas2/zima.webp);
  background-size: cover;
  justify-items: end;
  align-items: end;
  overflow: hidden;

}

#ziml{
    height: 220px;
    position: relative;
    opacity: 0;
    z-index: 1;
    margin-left: -55%;
    animation: opa 1s ease-in-out 2s forwards;
}
#zist{
    height: 170px;
    opacity: 0;
    position: absolute;
    animation: opa 1s ease-in-out 1s  forwards;
    z-index: 1;
}
#brn{
    height: 275px;
    position: relative;
    z-index: 0;
    margin-left: 15%;
    animation: ukmove ease-in-out 2s forwards;
}
@keyframes ukmove {
    from{transform: rotate(5deg);}
    to{transform: rotate(-5deg);}
}