h1{
    color: rgb(65, 133, 124);
}

#izb11,.bazar,#gor31,.gor30,.picg,.hoy7,.hoy5,.hoy6,#ls5,#ls6,#ls7,#inh52,#inh62,#inh72,.mzr8,.bld9,
#wind41,.wind4,#ne42,#put81,#bl91,#fver11,#plz101,.sonf,#sfi12,#fonla12{
height:321px;
  width:330px;
  display: flex;    
  align-items: end;
  justify-content: center;  
  justify-self: center;    
  background-size: cover;
  border-radius: 8px;
  overflow: hidden;
    
    
}
#ff1{
    animation: playbg 0.2s ease-in-out forwards;
}

#ne42{
    animation: playbg 2s ease-in-out forwards;
}

#izb11 img,.picg img,#inh52 img,#inh62 img,.mzr8 img,.sonf img{
    height: 100%;

    
}

#d31{
    margin-bottom: -15%;
}
#wind41 img{
    height: 60%;
    opacity: 0;
    
}
#ls5{
    overflow: visible;
}
#mr5{
    height: 100%;
   opacity: 0;
    margin-right: -55%;
   animation: apir 3s ease-in forwards 5s, disapr 2s ease-in-out forwards 9s;
    
}
#vr51{
    height: 120%;
   
    opacity: 0;
    margin-right: -55%;
    animation: opa1 3s ease-in-out forwards 8s,rost2 5s ease-in-out forwards 9s,disapr 2s ease-in-out forwards 14s;
   
}
@keyframes ivap{
    from{transform: translateX(0);}
    to{transform: translateX(-55%);}
}

@keyframes vlap{
    from{transform: translateX(0);}
    to{transform: translateX(65%);}
}


@keyframes nojw{
    from {background-image: url(../images/finis/var1.webp);} 
    50%{background-image: url(../images/finis/var1.webp); opacity: 0.8;}
    75%{background-image: url(../images/finis/var2.webp); opacity: 0.8;}
    to {background-image: url(../images/finis/var2.webp);} 
}



#sn41{
    margin-left: 5%;
    animation: apir 2s ease-in-out forwards,vlap 5s ease-in 2s forwards,disapr 2s ease-in-out forwards 8s;
}
#snd41{
    margin-left: 50%;
    animation: apir 2s ease-in-out forwards,ivap 5s ease-in 2s forwards,disapr 2s ease-in-out forwards 8s;
}
#kt61{
    opacity: 0;
    height: 25%;
    animation: apir 2s ease-in-out forwards 7s,rost 2s ease-in-out forwards 7s,disapr 2s ease-in-out forwards 9s;
    margin-right: 45%;
    margin-bottom: 2%;
}
#mr6{
    height: 100%;
    margin-right: -45%;
    margin-bottom:-5%;
    opacity: 0;
    animation: apir 3s ease-in forwards 5s,disapr 2s ease-out forwards 8s;
}

#ya6{
    opacity: 0;
    animation: apir 3s ease-in-out forwards 4s;
    margin-left:45% ;
}
#izb11,.gor30 img,#gor31{
    animation: playbg 2s ease-in-out forwards;
  
}

#izb11{
  background-image: url(../images/finis/izba2.webp);
  
}
#ne42{
    background-image: url(../images/finis/nobo2.webp);
}
#fn42{
    position: relative;
    opacity: 0;
    animation: apir 2s ease-in-out forwards, rost 3s ease-in-out forwards 3,disapr 2s ease-in-out forwards 8s;
    height: 45%;
    margin-bottom: 45%;
    margin-left: -135%;
    z-index: 1;
}
#nv42{
    height: 160%;
    margin-bottom: -75%;
    margin-left: -65%;
    position: relative;
    opacity: 0;
    animation: apir 2s ease-in-out forwards;
    z-index: 2;
   
}   
#bl42{
    height: 30%;
    position: relative;    
    z-index: 3;
    margin-left: -23%;
    margin-bottom: 42%;
    opacity: 0;
    animation: apir 2s ease-in forwards 6s;
}
#baz22{
  background-image: url(../images/finis/fon22.webp);
  animation: letu 5s ease-in-out forwards 1s;
  
}

#baz21{
  background-image: url(../images/finis/bazar.webp);
  animation: letu 5s ease-in-out forwards 1s;
  
}
#fver11 img{
    height: 80%;
    margin-bottom: 10%;
    animation:  blesk 3s ease-in-out 5,dflip 3s ease-out 5;
}


@keyframes liter {
    0%{filter:brightness(0.6)}
    100%{filter:brightness(1)}
    
}
#fver11{
    background-image: url(../images/finis/fonver.webp);
    filter: brightness(0.6);
    animation: liter 3s ease-in-out 5;
}
#baz22 img,#inh52 img{
   
    opacity: 0;
    animation: apir 2s ease-in-out forwards 3s;
    animation: playbg 2s ease-in-out forwards 3s;
}
#sp212,#sp211{
   height: 25%;
   margin-bottom: 15%;
}
#pl21,#pl212{
    height: 45%;
}
#pl21,#sp212{
    margin-right: 10%;
}
#pl212,#sp211{
    margin-right: -50%;
}
#d11,#d12{
    opacity: 0;
    animation: apir 2s ease-in-out forwards;
     animation: playbg 2s ease-in-out forwards;
}
#wind41{
 
 animation:nojw 13s ease-in-out forwards;
}


#gor31{
 background-image: url(../images/finis/fomper.webp);
}
#bl91{
    background-image: url(../images/finis/fonbl.webp);
   
}


#mr7{
    opacity: 0;
    height: 100%;
    animation: apir 3s ease-in forwards 4s, disapr 2s ease-in-out forwards 6s;
    margin-bottom: -7%;
    margin-right: -105%;
  
  
}
#ch71{
    height: 145%;
     margin-right: -75%;
    margin-bottom:-95%;
    opacity: 0;
    
    animation: apir 2s ease-in-out forwards 5s,jumpup3 1s ease-in forwards 6s,disapr 2s ease-in-out forwards 8s;
}
#ff9{
    height: 125%;
    margin-bottom: -48%;
    margin-left: -15%;
    opacity: 0;
    animation: apir 6s ease-in-out forwards 5s, disapr 2s ease-in-out forwards 12s;
}

@keyframes tranya{
   0% {
                transform: rotate(0deg) 
                      translateY(100%) rotate(0deg);
            }

            100% {
                transform: rotate(-360deg) 
                      translateY(100%) rotate(360deg);
            }
        }
    


#ls5{
    background-image: url(../images/finis/fonles.webp);
    animation: letu 6s ease-in-out forwards;
     background-position: right;
}

#plz101{
    background-image: url(../images/finis/palz3.webp);
}

#lst10{
    height: 65%;
    margin-bottom: 15%;
    margin-left: -19%;
    opacity: 0;
    animation: apir 4s ease-in-out forwards, blesk 2s ease-in-out 1s;
}
#mal10{
    height: 60%;
    margin-left: -57%;
    margin-bottom: 15%;
    opacity: 0;
    animation: apir 4s ease-in-out forwards 3s;
}

#yz9{
    height: 35%;
    margin-left: -50%;
    margin-bottom: 25%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards,tranya 8s ease-in-out forwards 3s;
}

#sfi12{
    background-image: url(../images/finis/cama.webp);
    animation: letu 2s ease-in-out forwards;
}
#fup121{
     height: 100%;
     opacity: 0;
     animation: apir 2s ease-in-out forwards 2s;
     margin-left: -35%;
     position: relative;
     z-index: 2;

}
#mr121{
    height: 100%;
    position: relative;
    margin-bottom: -5%;
     opacity: 0;
     animation: apir 2s ease-in-out forwards 3s;
     z-index: 1;
     margin-left: -25%;
}
#mr7,#mr5{
    margin-left: -45%;
}

@keyframes luze{
  from{filter: brightness(0.6);}
  to{filter: brightness(1);}
}
#ls6{
    background-image: url(../images/finis/fonles2.webp);
    background-position: left;
   
    animation: letunaz 6s ease-in-out forwards 1s,darke 3s ease-in-out forwards 9s;
}

#inh52{
     background-image: url(../images/finis/int1.webp);
    background-position: left;
    animation: letus 6s ease-in-out forwards;
}

#inh62{
     background-image: url(../images/finis/intd.webp);
    background-position: right;
    animation: letu 6s ease-in-out forwards;
}
#ya7{
    height: 80%;
    margin-bottom: -3%;
    margin-left: 55%;
    opacity: 0;
    animation: apir 3s ease-in-out forwards 7s;
}
#inh72{
    background-image: url(../images/finis/int33.webp);
    background-position: right;
    animation: zoom 5s ease-in-out forwards 2s;
}
#ls7{
    background-image: url(../images/finis/fonles3.webp);
     animation: letus 6s ease-in-out forwards,darke 2s ease-in-out forwards 6s;
     background-position: right;
}

#mzr82 img{
    height: 55%;
    opacity: 0;
    animation: apir 2s ease-out forwards 5s,rost 2s ease-in-out forwards 6s;
    margin-bottom: -5%;
}
#put81{
    background-image:url(../images/finis/vokfon.webp);
    animation: letunaz 9s ease-in-out forwards;

}

#put81 img{
    height: 75%;
    opacity: 0;
    margin-bottom: -6%;
    animation: apir 2s ease-in-out forwards,dfli 4s ease-in-out forwards 4, disapr 2s ease-in forwards 7s;
}
#mzr82{
    background-image:url(../images/finis/vardvor2.webp);
    background-position: right;
     animation: letunaz 6s ease-in-out forwards;
}
#pr3{
    height: 20%;
    margin-left: 25%;
    margin-bottom: 25%;
    opacity: 0;
    animation: apir 4s ease-in-out;
    
}
#fp3{
    height: 45%;
    margin-left: -45%;
    animation: apir 5s ease-in-out 4s,rost 2s ease-in-out 7s;
     opacity: 0;
}

#fpr3{
    height: 100%;
   opacity: 0;
   margin-left: -30%;
   animation: apir 2s ease-in-out forwards 8s;
   margin-bottom: -15%;
    
   
}
@keyframes letu2{
  from{background-position: top;}
  to{background-position:bottom;}
}
#fonla12{
    background-image: url(../images/finis/fonlas1.webp);
    background-position: bottom;
    animation: letu1 4s ease-in-out forwards 4s;
}

#mr122{
    height: 135%;
    margin-bottom: -30%;
    margin-left: 5%;
    position: relative;
    z-index: 2;
    opacity: 0;
    animation: apir 2s ease-in-out forwards, disapr 2s ease-in-out forwards 3s;
}

#fn122{
    height: 200%;
    margin-left: -52%;
    margin-bottom: -90%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards, disapr 2s ease-in-out forwards 3s;
    position: relative;
    z-index: 1;
}
#pf12{
    height: 35%;
    opacity: 0;
    margin-left: -5%;
    margin-bottom: 55%;
     animation: opne 2s ease-in-out forwards 8s,jumpup3 2s ease-in-out forwards 10s;
}

@keyframes opne{
    0%{opacity: 0;}
    100%{opacity: 0.7;}
}
#pmr12{
    height: 35%;
    opacity:0;
    margin-left: -105%;
    margin-bottom: 55%;
    animation: opne 2s ease-in-out forwards 8s,jumpup3 2s ease-in-out forwards 10s;
}
@media screen and (width>=1200px) {
 
  .dvor_int{
      height: 600px;
      width: 1200px;
  }
  
  #izb11,.bazar,.picg,#gor31,.hoy7,.hoy5,.hoy6,#ls5,#ls6,#ls7,#inh52,#inh62,#inh72,
  .mzr8,.bld9,#wind41,.wind4,#ne42,#put81,#bl91,#fver11,#plz101,.sonf,#sfi12,#fonla12{
    height:600px;
    width: 620px;
}  

  
}

@media screen and (width<330px) {
#izb11,.bazar,.hoy7,.hoy5,.hoy6,#ls5,#ls6,#ls7,.picg,#gor31,#inh52,#inh62,#inh72,.mzr8,.bld9,
#wind41,.wind4,#ne42,#put81,#bl91,#fver11,#plz101,.sonf,#sfi12,#fonla12{
    height: 254px;
    width: 260px;
}


}