h1{
    color: rgb(150, 69, 11);
}



.sec1,#zmf1,.sec2,.sec5,.sec3,.sec4,.sec7,#fon5,.sec6{
  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;
  justify-items: end;
 

}
.sec1{
     background-image:url(../images/kobr/dom1.webp);
}
.sec3{
     background-image:url(../images/kobr/zamfo.webp);
}
.sec6,#fo6{
     background-image:url(../images/kobr/fonl.webp);
}
.sec2{
     background-image:url(../images/kobr/fonlog.webp);
}
#fdn3{
     background-image:url(../images/kobr/fonnd.webp);
}
#dor6{
     background-image:url(../images/kobr/fon51.webp);
     background-position: left;
     animation: letu 12s ease-in-out forwards;
}
#fons4{
     background-image:url(../images/kobr/fonpa.webp);
     background-position: left;
     animation: letu 12s ease-in-out forwards 2s;
}
#fons2{
    background-image:url(../images/kobr/sunfo.webp);
}
@keyframes dvigky {
    from{transform:rotate() ;}
    to{transform:  translate(-10%,-20%);}
}
#sz2{
    height: 80%;
    margin-bottom: -5%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards;
    position: relative;
    z-index: 1;
}
#ot4{
    opacity: 0;
    height: 100%;
    margin-left: -35%;
    margin-bottom: -10%;
    animation: apir 2s ease-in-out forwards, skk 8s ease-in-out forwards 2;
}
#kr2{
    height: 70%;
   margin-left: -115%;
    position: relative;
    z-index: 3;
    margin-bottom: 35%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards,dvigky 6s ease-in-out forwards 5s;
    
}
#mo2{
    height: 40%;
    margin-left: -135%;
    position: relative;
    z-index: 2;
    margin-bottom: 40%;
    transform: rotate(5deg);
    opacity: 0;
    animation:apir 2s ease-in-out forwards 7s, blesk 5s ease-in 2 10s;
 }
#kr6{
    height: 90%;
    filter: brightness(0.8);
    margin-bottom: -25%;
    position: relative;
    z-index: 1;
    animation: apir 1s ease-in-out forwards, skk 6s ease-in-out forwards 2 1s;
}
#kb5{
    height: 30%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 10s,blesk 6s ease-in-out 3 12s;
    margin-left: -75%;
    position: relative;
    z-index: 2;
    margin-bottom: -5%;
}
#hl6{
    opacity: 0;
    animation: apir 2s ease-in-out forwards 10s;
    height: 100%;
    margin-left: -80%;
    margin-bottom: -25%;
    position: relative;
    z-index: 3;
}
#gk6{
    margin-left: -5%;
    margin-bottom: -30%;
    height: 100%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 2s, dfli 6s ease-in-out forwards 4s, disapr 2s ease-in-out forwards 10s;
}
#rp6{
    height: 100%;
    margin-bottom: -10%;
    margin-left: -55%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 10s;
}
#ps6{
    height: 100%;
    margin-bottom: -10%;
    margin-left: -10%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards;
}
#bu3{
   height: 65%;
   margin-bottom: -8%;
   margin-left: -45%;
   position: relative;
   z-index: 3;
   opacity: 0;
   animation: apir 2s ease-in-out forwards 9s;
}
#zm6{
    height: 50%;
    opacity: 0;
    margin-bottom: -20%;
    animation: apir 2s ease-in-out forwards, disapr 3s ease-in-out forwards 6s;
}
#prz3{
    height: 100%;
    margin-bottom: -15%;
    margin-left: 55%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards;
}
@keyframes rost5{
    from{transform: translate();}
    to{transform:  scale(1.3);}
}
#prs3{
    height: 150%;
    filter: brightness(0.9);
    margin-left: -135%;
    margin-bottom: -75%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 3s,rost5 6s ease-in-out forwards 6s;
    
}
@keyframes rum{
    from{transform: rotate();}
    to{transform: rotate(20deg) translate(25%,-1%);}
}
#vp1{
    height: 60%;
    margin-bottom: 43%;
    opacity: 0;
    position: relative;
    z-index: 2;
    margin-left: -99%;
    animation:apir 2s ease-in-out forwards 8s,rum 9s ease-in-out forwards 10s;
}
#zm1{
    height: 15%;
    margin-bottom: -5%;
    position: relative;
    z-index: 3;
    margin-left: -5%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 19s;
}
@keyframes vlap{
    from{transform: translateX(0);}
    to{transform: translateX(65%);}
}
@keyframes moval2{
    from{transform: translate(0,0);filter:brightness(0.9)}
    to{transform: translate3d(395%,8%,5rem); filter: brightness(0.7);}
    50%{transform: translate3d(200%,35%,5rem); filter: brightness(1);}
    
}
#ps2{
    height: 70%;
    margin-left: 15%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards, rost2  7s ease-in-out forwards 5s;
}
#pz3{
    height: 90%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards, moval2 12s ease-in-out forwards 3s;
}
#km1{
    height: 80%;
    margin-bottom: -5%;
    margin-left: -25%;
    opacity: 0;
   
    animation: apir 2s ease-in-out forwards,vlap 5s ease-in-out forwards 3s;
}
#kr1{
    opacity: 0;
    height: 80%;
    margin-left: 55%;
    
    animation: apir 2s ease-in-out forwards, dfli 9s ease-in-out forwards 2s;
}

#nch1{
     background-image:url(../images/kobr/fon.webp);
}
#vd1{
    height: 100%;
    position: relative;
    z-index: 3;
    margin-left: -45%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards,vlap 5s ease-in-out forwards 3s;
}
#kp1{
    height: 110%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards;
    margin-left: -3%;
    filter: brightness(0.6);
    position: relative;
    z-index: 1;
}
@media screen and (width>=1200px) {
.sec1,#zmf1,.sec2,#dv1,#kof2,.sec3,.sec4,.sec7,#fon5,.sec6,.sec5{
    height: 600px;
    width: 620px;
}

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

}

@media screen and (width<330px) {
.sec1,#zmf1,.sec2,#dv1,#kof2,.sec3,.sec4,.sec7,#fon5,.sec6,.sec5{
    height: 254px;
    width: 260px;
}

}