h1{
    color: rgb(17, 121, 24);
}



.sec1,#sem1,#domv1,.sec2,.sec5,.sec3,.sec4,.sec6,#fon5{
  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;
 

}
.sec6{
  height: 330px;
  width: 600px;
  display: flex;
  justify-self: center;
  align-items: end;
  overflow: hidden;  
  border-radius: 8px;
  background-size:cover ;
  background-color: rgb(226, 216, 235);
}


#sp6{
height: 100%;
margin-bottom: -5%;
margin-left: -5%;
opacity: 0;
animation: apir 2s ease-in-out forwards 14s, trasri 12s linear forwards 16s;
}
@keyframes trasri{
    0%{transform: translate();}
    30%{transform: translate(55%,2%);}
    60%{transform: translate(120%,-2%); scale: 1.1;}
    90%{transform: translate(195%,2%);}
    100%{transform: translate(200%,-2%);}

}
@keyframes trasri1{
    0%{transform: translate();}
    30%{transform: translate(-55%,2%);}
    60%{transform: translate(-120%,-2%); scale: 1.1;}
    90%{transform: translate(-195%,2%);}
    100%{transform: translate(-200%,-2%);}

}
#g1{
    opacity: 0;
    height: 35%;
    margin-bottom: -5%;
    animation: apir 5s ease-in-out forwards,rota2 8s ease-in-out 2 5s;
}
#g2{
    opacity: 0;
    height: 35%;
    margin-bottom: -5%;
    animation: apir 5s ease-in-out forwards,jumpup 2s ease-in-out   5 6s;
}
#g2:hover,#g2:focus{
    animation: jumpup3 2s ease-in-out forwards;
}


@keyframes rota{
    0%{}
    50%{transform:  translateY(5%) rotate(-45deg);}
    75%{transform:  translateY(4%) rotate(-40deg);}
    100%{transform:  translateY(-2%) rotate(8deg);}
}
@keyframes rota2{
    0%{}
    50%{transform:  translateY(5%) rotate(35deg);}
    100%{transform:  translateY(-2%) rotate(-8deg);}
}
#g3{
    opacity: 0;
    height: 35%;
    margin-bottom: -10%;
    animation: apir 5s ease-in-out forwards, rota 8s ease-in-out  2 6s;
}

#kr3{
    height: 100%;
    margin-bottom: -3%;
    margin-left: -10%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards,step 8s ease-in-out forwards 5s;
}
#k3{
    height: 120%;
    margin-bottom: -20%;
    margin-left: -5%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards,deskor 2s ease-in forwards 3s;
}

#pz6{
    height: 100%;
    margin-bottom: -5%;
   margin-left: 10%;
    position: relative;
    z-index: 1;
    
}
#ks6{
    height: 15%;
    margin-bottom: 45%;
     position: relative;
    z-index: 1;
    animation: orlmove 6s ease-in-out forwards,blesk 6s ease-in-out forwards;
}
#ku6{
    height: 75%;
    margin-bottom:-25%;
    position: relative;
    z-index: 3;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 6s,rota2 5s ease-in-out 5 8s,disapr 2s ease-in forwards 24s;
}
@keyframes jumpli{
    0%{}
    50%{transform: translate(45%,-65%) rotate(10deg);}
    100%{transform: translate(65%,45%) rotate(20deg) scale(2);}
}
#ls6{
    height: 65%;
    margin-bottom: -15%;
    margin-left: -55%;
     position: relative;
    z-index: 5;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 18s,jumpli 5s ease-in-out 20s forwards,disapr 2s ease-in forwards 26s;
}
#ma6{
    height: 120%;
    margin-bottom: -15%;
    margin-left: -30%;
    opacity: 0;
    animation: apir 2s ease-in forwards 26s;
}
#vz6{
    height: 100%;
    margin-bottom: -5%;
    margin-left: -5%;
     position: relative;
    z-index: 2;
    animation: disapr 2s ease-in-out forwards 6s;
}
#ko2{
    height: 120%;
    opacity: 0;
    animation: apir 3s ease-in-out forwards;
    position: relative;
    margin-bottom: -15%;
    z-index: 1;
}
#kol2{
    height: 25%;
    margin-left: -88%;
    margin-bottom: 23%;
    opacity: 0;
    position: relative;
    z-index: 2;
    animation: apir 3s ease-in-out forwards,kru 5s ease-in-out 5 3s, disapr 1s ease-in forwards 18s;

}
@keyframes step{
    from{transform:translate();}
    to{transform: translateX(-20%);}
}
@keyframes deskor{
    0%{opacity: 1;}
    99%{opacity: 1; transform: scale(0.2) translate(-95%,-55%);}
    100%{opacity: 0; transform: scale(0.1) translate(-95%,-75%);}
}
@keyframes kru{
    0%{transform: rotate();}
    55%{transform: rotate(-10deg);}
    100%{transform: rotate(8deg);}
}
#sp60{
    height: 100%;
    margin-bottom: -5%;
    margin-left: 30%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards, trasri1 12s ease-in-out forwards 2s,disapr 2s ease-in-out forwards 14s;
}
#dvo2{
    background-image:url(../images/uchenik/fondv.webp); 
    background-position: right;
    animation: letunaz 3s ease-in-out forwards;
}

#fo4{
    background-image:url(../images/uchenik/fonk.webp); 
    
    animation: zoom2 9s ease-in-out forwards;
}

#dvor3{
    background-image:url(../images/uchenik/korf.webp); 
}
#fon5{
    background-image:url(../images/uchenik/meln2.webp); 
    background-position: left;
    animation: letu 8s ease-in-out forwards;
}
#sem1{
    background-image:url(../images/uchenik/fons.webp); 
}

.sec2{
    background-image:url(../images/uchenik/wfon2.webp); 
}
.sec4{
    background-image:url(../images/uchenik/konush.webp); 
}
.sec3{
    background-image:url(../images/uchenik/korf.webp); 
}
.sec6{
    background-image:url(../images/uchenik/dvorp.webp); 
}
#domv1{
    background-image:url(../images/uchenik/vizardf1.webp);
    background-position: left;
    animation: letu 8s ease-in-out forwards; 
}
@keyframes jumpfo{
    from{transform:translate() ;}
    to{transform: translate(85%,115%) scale(1.5) rotate(25deg);}
}
#fr5{
    height: 75%;
    margin-left: -5%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards,jumpfo 1s ease-in-out forwards 8s;
}
#zm5{
    opacity: 0;
    height: 100%;
    margin-bottom: -35%;
    margin-left: -35%;
    animation: apir 2s ease-in-out forwards 9s,orlmove 8s ease-in-out forwards 11s;
}
@keyframes konsk{
    0%{transform: translate();}
    50%{transform: translate(2%,-17%) rotate(-3deg);}
    100%{transform: translate(-1%,5%) rotate(1deg);}

}
#pe4{
    opacity: 0;
    height: 100%;
    margin-bottom: -20%;
    margin-left: -15%;
    animation: apir 2s ease-in-out forwards 9s,konsk 7s ease-in-out forwards 2 11s;
}
#vz4{
    margin-bottom: -10%;
    height: 65%;
    margin-left: -50%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 8s,dfli 12s ease-in-out 2 10s;
}
#gb5{
    height: 100%;
    margin-bottom: -15%;
    margin-left: -135%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 14s,jumpup3 1s ease-in-out forwards 16s;
}
#or5{
    height: 100%;
    margin-bottom: -20%;
    margin-left: -135%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 18s,jumpup3 1s ease-in-out forwards 19s;
}
#vo1{
    height: 70%;
    margin-bottom: 10%;
    margin-left: 45%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 8s, rost2 6s ease-in-out forwards 11s;
}
#sk2{
    margin-bottom: -30%;
    height: 50%;
    opacity: 0;
    position: relative;
    z-index: 1;
    animation: apir 2s ease-in-out forwards 2s,skk 8s ease-in-out 2 5s, disapr 2s ease-in-out forwards 22s;

}
#ch4{
    height: 80%;
    opacity: 0.4;
    margin-left: 5%;
    margin-bottom: -5%;
    animation: rost 9s ease-in-out forwards, disapr 1s ease-in-out forwards 8s;
}
#vk2{
    margin-bottom: 12%;
    opacity:0;
    animation:apir 2s ease-in-out forwards 2s,rost 8s ease-in-out forwards 5s; 
    margin-left: -35%;
    
    position: relative;
    z-index: 2;
    height: 15%;
}
#mp1{
    height: 100%;
    margin-bottom: -5%;
    margin-left: -10%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards;
}

#pe1{
    opacity: 0;
    height: 80%;
    margin-bottom: -5%;
    animation:apir 2s ease-in-out forwards, rost2 6s ease-in-out forwards 6s;
}

@media screen and (width>=1200px) {
.sec1,#sem1,#domv1,.sec2,#dv1,#kof2,.sec3,.sec4,.sec7,#fon5,.sec5,.sec13,.sec12,.sec10,.sec11,.sec9,.sec8{
    height: 600px;
    width: 620px;
}

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

}

@media screen and (width<330px) {
.sec1,#sem1,#domv1,.sec2,#dv1,#kof2,.sec3,.sec4,.sec7,#fon5,.sec6,.sec5,.sec13,.sec12,.sec10,.sec11,.sec9,.sec8{
    height: 254px;
    width: 260px;
}

}