h1{
    color: rgb(110, 35, 81);
}

.dvor3,.dvor2,#dv3,#bib4,.by5,#hd8,#dvr7,#dvlu5,.oit8,.seve7,#dvor2,#pro2,.hod4,.six6{
height:321px;
  width:330px;
  display: flex;    
  align-items: end;
  justify-content: center;  
  justify-self: center;    
  background-size: cover;
  border-radius: 8px;
  overflow: hidden;
    
    
}

#pro2{
    background-image: url(../images/hodon/fonh1.webp);
    background-position:left;
    animation: letu 2s ease-in-out forwards;
}
.dvor2{
    background-image: url(../images/hodon/smp.webp);
}
#intdv{
    height: 220%;
    margin-bottom: -75%;
}
#ls2{
    height: 65%;
    margin-bottom: 15%;
    transform: rotate(30deg);
    margin-left: -100%;
    animation: stmuv 1s ease-in-out forwards 0.5s;
    
}
#ls21{
    height: 65%;
    margin-bottom: 18%;
    transform: rotate(30deg);
    margin-left: -100%;
    animation: stmuv 1s ease-in-out forwards 1.5s;
    
}
#ls22{
    height: 65%;
    margin-bottom: 10%;
    transform: rotate(30deg);
    margin-left: -100%;
    animation: stmuv 1s ease-in-out forwards 1s;
    
}
#fz2{
    height: 50%;
    opacity: 0;
    margin-left: 250%;
    margin-bottom: 25%;
    position: relative;
    z-index: 3;
    animation:apir 1s ease-in-out forwards, padal2 0.5s ease-in-out forwards 2s;
}
#gu2{
    height: 60%;
    opacity: 0;
    position: relative;
    z-index: 1;
   margin-left: -100%;
    margin-bottom: 35%;
    animation:apir 1s ease-in-out forwards, padal3 0.5s ease-in-out forwards 2.5s;
}

#ut2{
    height: 40%;
    opacity: 0;
    margin-bottom: 25%;
   position: relative;
    z-index: 2;
    animation: apir 1s ease-in-out forwards,padal 0.5s ease-in-out forwards 3s;
}
@keyframes stmuv{
    from{transform: rotate(30deg);}
    to{transform: translateX(590%) rotate(30deg);}
}
@keyframes padal3{
  from{transform: translate(0%,-2%) rotate(-2deg);}
  to{transform: translate(-140%,130%)rotate(60deg)}
 
}
@keyframes padal2{
  from{transform: translate(0%,-2%) rotate(-2deg);}
  to{transform: translate(-180%,80%)rotate(-2deg)}
 
}
@keyframes padal{
  from{transform: translate(0px,-2%) rotate(-2deg);}
  to{transform: translate(-280%,90%)rotate(-2deg)}
 
}
#zr7{
    height: 100%;
}
#dv1{
    height: 100%;
}
.dvor1,#gor1{
    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;
    
  }

#gor1{
    background-image: url(../images/hodon/noch2.webp);
}
#dv3{
    background-image: url(../images/hodon/dvorez.webp);
    background-position: right;
    animation:letunaz 5s ease-in-out forwards ;
}
#dv32{
    background-image: url(../images/hodon/aknan.webp);
    background-position: right;
    animation:letunaz 5s ease-in-out forwards ;
}
#dvor2{
    background-image: url(../images/hodon/dvorez3.webp);
   
    animation:zoom2 5s ease-in-out forwards;
}
#nd1{
    background-image: url(../images/hodon/dvorez1.webp);
   
    
}
#bib4{
    background-image: url(../images/hodon/biblioteka1.webp);
    
}
#hd4{
    opacity: 0;
    height:100%;
    margin-left: -8%;
    margin-bottom: -5%;
    animation: apir 2s ease-in-out forwards 2s,disapr 2s ease-in-out forwards 15s;
}

   
.by5{
    background-image: url(../images/hodon/dever5.webp);
    animation: playbg 2s ease-in-out forwards;
}
#dvr7{
    background-image: url(../images/hodon/aknan.webp);
    animation: darke 3s ease-in-out forwards 12s;
}

.six6{
    background-image: url(../images/hodon/dvorez3.webp);
    animation: playbg 2s ease-in-out forwards;
}
.hod4{
    background-image: url(../images/hodon/fonbar.webp);
}
#hd8{
    background-image: url(../images/hodon/dlin.webp);
    background-position: top;
    animation:letu1 8s ease-in-out forwards, darke 3s ease-in-out forwards 15s;
}
#dvlu5{
    background-image: url(../images/hodon/dvelun.webp);
    background-position: top;
    animation:letu1 8s ease-in-out forwards;
}
.oit8,.seve7{
    background-image: url(../images/hodon/derevo.webp);
    animation: playbg 2s ease-in-out forwards;

}

#tm6{
    height: 180%;
    margin-bottom: -85%;
    margin-left: -35%;
    position: relative;
    z-index: 2;
}
#mv6{
    margin-left: -135%;
    margin-bottom: -25%;
    height: 120%;
    position: relative;
    z-index: 1;
    animation: skk 3s linear 8;
}
#hdn8{
    height: 205%;
    margin-bottom: -75%;
}
#hdn8:hover,#hdn8:focus{
    transform: scale(1.3) translate(-5%,20%);

}
#jv8{
    opacity: 0;
    height: 100%;
    margin-bottom: -8%;
    animation: apir 2s ease-in-out forwards 8s, vetmuv 8s ease-in-out forwards 10s;
}

#hd4:hover, #hd4:focus{
    transform: translate(1%,0.5%);
}
@keyframes drem{
    from{opacity: 0;}
    to{opacity: 0.8;}
  
}
#bar4,#gr4{
    opacity: 0;
    animation: drem 8s ease-in-out   4s;
}

#bar4,#br{
  height: 50%;
  
 
   position: relative;  
    z-index: 2;
}
#gr,#br{
    animation: dfli 5s ease-in-out forwards 5;
}
#gr4,#gr{
    height: 30%;
    margin-left: -35%;
    margin-bottom: 35%;
   
    position: relative;  
    z-index: 1;
   
}
#mz11{
    height: 50%;
    margin-left: 40%;
    margin-top: 30%;
    animation:korm 5s ease-in forwards ;
}
@keyframes korm{
    from{transform: translate();}
     to{transform: scale(2) translate(-5%,5%);}
}
#pr3{
    height: 100%;
    margin-bottom: -5%;
    margin-left: 25%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 5s,rost2 2s ease-in-out forwards 7s ;
}
@keyframes devskak{
    0%{
        transform: translate(75%,10%);
    }
    
    45%{
        transform: translate(-120%,-5%) ;
    }
    
    100%{
        transform: translate(-255%,5%) ;
    }
}

@keyframes devskak2{
    0%{
        transform: translate(75%,10%);
    }
    
    45%{
        transform: translate(-200%,-5%) ;
    }
    
    100%{
        transform: translate(-395%,5%) ;
    }
}
#vnk1{
    opacity: 0;
    height: 100%;
    margin-left: 100%;
    margin-top: 25% ;
    animation: apir 2s ease-in-out forwards 1s, devskak 3s linear forwards 3s;
}
#vnk2,#vnk3{
    height: 70%;
    margin-left: -65%;
    opacity: 0;
    margin-top: 28%;
     

}
@keyframes ivap{
    from{transform: translateX(0);}
    to{transform: translateX(-155%);}
}
#hd5{
    opacity: 0;
    height: 100%;
    margin-left: -8%;
    animation: apir 2s ease-in-out forwards 7s,disapr 2s ease-in-out forwards 10s;
     
}
#pr5{
    opacity: 0;
    height: 125%;
    margin-bottom: -25%;
    margin-left: -15%;
    animation: apir 2s ease-in-out forwards 6s,ivap 5s ease-in-out forwards 11s;
}
#zr3{
    height: 110%;
    margin-bottom: -3%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards, dfli 6s ease-in-out 3s;
}
#vnk2{
   
    margin-left: -65%;
    animation: apir 2s ease-in-out forwards 2s, devskak2 3s linear forwards 4s;

}
#pr7{
    height: 100%;
    opacity: 0;
    margin-left: 25%;
    animation: apir 2s ease-in-out forwards,disapr 6s ease-in-out forwards 10s;
}
@keyframes kutl {
    from{transform: rotate();}
    to{transform: rotate(360deg);}
}
#lp7{
    opacity: 0;
    height: 120%;
    margin-left: -45%;
    animation: apir 2s ease-in-out forwards 4s,kutl 12s ease-in-out forwards 6s, vetmuv 8s ease-in forwards 16s;
}
#vnk3{
   
    margin-left: -15%;
     animation: apir 2s ease-in-out forwards 3s, devskak2 3s linear forwards 5s;

}

#intdv:hover, #intdv:focus{
    transform: scale(1.5) translateY(20%);
}
#hd2{
    height: 100%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 6s,disapr 2s ease-in-out forwards 8s;
    margin-left: -35%;
}
#tm2{
    height: 100%;
    margin-bottom: -5%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 5s,rost2 3s ease-in-out forwards 9s;

}
@keyframes flrein{
    0%{opacity: 0;}
    5%{opacity:0.9;}
    100%{opacity: 0.5; transform: translate(-350%,250%) rotate(-95deg);}
}


#fl3{
    height: 35%;
    margin-bottom: 30%;
    opacity: 0;
    margin-left: -15%;
    animation: flrein 14s ease-in-out forwards 9s;
}
  @media screen and (width>=1200px) {
 
  .dvor1,#gor1{
      height: 600px;
      width: 1080px;
  }
  
  .dvor3,.dvor2,#dv3,#bib4,.by5,#hd8,#dvr7,#dvlu5,.oit8,.seve7,#dvor2,#pro2,.hod4,.six6{
    height:600px;
    width: 620px;
}  

  
}
@media screen and (width<650px){

}
@media screen and (width<330px) {
.dvor1,.dvor3,.dvor2,#dv3,#bib4,.by5,#hd8,#dvr7,#dvlu5,.oit8,.seve7,#dvor2,#pro2,.hod4,.six6{
    height: 254px;
    width: 260px;
}


}