h1{
    color: rgb(20, 87, 108);
}



.sec1,#zmf1,.sec2,.sec5,.sec3,.sec4,.sec7,#fon5,.sec6,.sec13,.sec12,.sec10,.sec11,.sec9,.sec8{
  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;
 

}
#ba9{
    height: 35%;
    margin-bottom: 12%;
    animation: orlmove 18s ease-in-out forwards;
}
#fo9{
    background-image:url(../images/pas/fonps.webp); 
    background-position: top;
    animation: zoom2 18s ease-in-out forwards;
}

@keyframes rostyp {
    0%{transform: translate(5%,-15%) scale(0.6);}
    
    50%{transform: translate(-5%,10%) scale(2);}
    75%{transform: translate(10%,30%) scale(2.4);}
    100%{transform: translate(25%,55%) scale(2.8);}
}
#pa9{
    height: 50%;
    margin-left: 15%;
    margin-bottom: 5%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards, rostyp 16s ease-in-out forwards;
}
#sec9{
     background-image:url(../images/pas/ga.webp); 
     animation: zoom 18s ease-in-out forwards;
}
.sec3{
     background-image:url(../images/pas/fon23.webp); 
}
.sec5{
     background-image:url(../images/pas/gorod.webp); 
}
.sec6{
     background-image:url(../images/pas/fon6.webp); 
}
.sec4{
     background-image:url(../images/pas/fon4.webp); 
}
.sec7{
    background-image:url(../images/pas/fon7.webp); 
}
#fe1{
   background-image:url(../images/pas/fonp1.webp); 
}
#fonp2{
    background-image:url(../images/pas/fop2.webp); 
    animation: zoom9 12s ease-in forwards;
}
.sec13{
    background-image:url(../images/pas/fon132.webp); 
}
.sec8{
    background-image:url(../images/pas/fon13.webp); 
}
#fo4{
    background-image:url(../images/pas/fon2.webp);
    position: right;
    animation: letunaz 20s ease-in-out forwards;
}
#go5{
    background-image:url(../images/pas/fonska.webp);
    position: right;
    animation: letut 10s ease-in-out forwards,zoom22 5s ease-in-out forwards 10s;
}
#pa8{
    height: 100%;
    margin-bottom: -3%;
    opacity: 0;
    animation:apir 2s ease-in-out forwards, muvf 15s ease-in-out forwards 2s;
    
}
#zt8{
    height: 100%;
    margin-bottom: -80%;
    margin-left: -55%;
    opacity: 0;
    animation:apir 2s ease-in-out forwards, muvf 15s ease-in-out forwards 2s, bleskv 15s ease-in-out forwards 2s;
}
#ps7{
    height: 160%;
    position: relative;
    z-index: 2;
    margin-bottom: -65%;
    margin-left: -20%;
    opacity: 0;
    animation: apir 2s ease-in forwards, disapr 2s ease-in-out forwards 15s;
    
}
#pzb7{
    height: 160%;
    position: relative;
    z-index: 3;
    margin-bottom: -65%;
    margin-left: -150%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 15s;
}
#ko7{
    height: 100%;
    position: relative;
    z-index: 4;
    margin-bottom: 5%;
    margin-left: -39%;
    opacity: 0;
    animation: apir 3s ease-in-out forwards 14s,bleskv 8s ease-in-out forwards  2 17s;
}
#pa7{
    height: 95%;
    opacity: 0;
    position: relative;
    margin-left: 8%;
    z-index: 1;
    margin-bottom: -5%;
    animation: apir 2s ease-in-out forwards 1s, skk 6s ease-in 3s,ivap2 5s ease-in-out forwards 9s;
}

@keyframes letut {
    from{background-position: right;}
    to{background-position: center;}
}
@keyframes zoom22 {
  0% {
    background-size: 180% 100%;
  }
  50% {
    background-size: 200% 120%;
  }
  100% {
   background-position: center ;
   background-size: 220% 160%;
  }
}
#fon10{
    background-image:url(../images/pas/fo71.webp);
    background-position: left; 
    animation: letu 12s ease-in-out forwards;
}
#fon12{
   
    animation: changfo 12s ease-in-out forwards;
}
#fon11{
    background-image:url(../images/pas/fo81.webp);
    background-position: left; 
    animation: letu 12s ease-in-out forwards;
}
@keyframes jumpupv {
    from{transform: translateY();opacity: 0.7;}
    to{transform: translateY(-45%) rotate(3deg);opacity: 0.7;}
    95%{transform: translateY(-55%) rotate(-3deg);opacity: 0.7;}
    80%{transform: translateY(-65%);opacity: 0.9;}
}
@keyframes changfo {
    from{ background-image:url(../images/pas/fo10.webp);}
    to{ background-image:url(../images/pas/fon121.webp);}
}
@keyframes jumpupv2 {
    from{transform: translateY();opacity: 0.7;}
    to{transform: translateY(-45%) rotate(1deg);opacity: 0.7;}
    95%{transform: translateY(-55%) rotate(-3deg);opacity: 0.8;}
    
}
@keyframes jumpupv3 {
    from{transform: translateY();opacity: 0.6;}
    to{transform: translateY(-200%) rotate(-3deg);opacity: 0.3;}
    75%{transform: translateY(-185%) rotate(5deg) scale(3);opacity: 0.6; }
}
#ve10{
    height: 250%;
    margin-bottom: -250%;
    margin-left: -10%;
    opacity: 0;
    animation: apiry 2s ease-in-out forwards 12s,jumpupv 18s ease-in-out forwards 14s;
}

#ve11{
    height: 250%;
    margin-bottom: -250%;
    margin-left: -5%;
    opacity: 0;
    animation: apiry 2s ease-in-out forwards 12s,jumpupv2 9s ease-in-out forwards 14s;
}
#ve12{
    height: 250%;
    margin-bottom: -150%;
    margin-left: -5%;
    opacity: 0;
    animation: apiry 2s ease-in-out forwards,jumpupv3 6s ease-in-out forwards 6s;
}
#pa5{
    height: 80%;
    margin-bottom: -25%;
    margin-left: 70%;
    animation: apir 2s ease-in forwards, skk 9s ease-in-out,rost2 5s ease-in forwards 10s;
}
#pa41{
    height: 80%;
    margin-bottom: -15%;
    margin-left: 20%;
    animation: apir 2s ease-in forwards, skk 9s ease-in-out 2, ivap2 8s ease-in-out forwards 20s;
}
@keyframes avpr {
    from{transform: rotate(1deg) ;}
    to{transform: translate(19%,1%);}
}
#pav13{
    height: 95%;
    opacity: 0;
    margin-bottom: -5%;
    margin-left: 10%;
    position: relative;
    z-index: 2;
     animation: apir 2s ease-in-out forwards 0.2s,avpr 12s ease-in-out forwards 2s;
}
#rpo13{
    height: 35%;
    margin-bottom: 39%;
    position: relative;
    z-index: 3;
    margin-left: -40%;
    transform: rotate(-3deg);
    animation: apir 2s ease-in-out forwards,glad 8s ease-in-out forwards 2s;
   
}
@keyframes glad {
    from{transform: rotate(-3deg) translateX();}
    to{transform: rotate(3deg) translate(-2%,1%);}
}
#rp13{
    height: 100%;
    margin-bottom: -5%;
    margin-left: -50%;
    position: relative;
   
    z-index: 1;
    animation: apir 2s ease-in-out forwards 0.3s;
}

@keyframes muvp{
    from{transform: translate();}
    to{transform: translate(150%,-2%) scale(1.1);}
}
@keyframes rostp{
    from{transform:translate(150%,-2%) scale(1.1);}
    to{transform: translate(150%,30%) scale(1.9);}
}
#pz6{
    height: 100%;
    margin-left: -45%;
    margin-bottom: -30%;
    position: relative;
    z-index: 1;
    opacity: 0;
    animation: apir 2s ease-in-out forwards,muvp 6s ease-in-out forwards 2s, rostp 8s ease-in-out forwards 8s;
}
@keyframes  apiry {
    from{opacity: 0;}
    to{opacity: 0.6;}
}
@keyframes  bleskv {
    0%{filter: brightness(1);}
    25%{filter: brightness(1.2);}
    50%{filter: brightness(1.6);}
    75%{filter: brightness(1.2);}
    100%{filter: brightness(1);}
}
#zv6{
    opacity: 0;
    height: 100%;
    margin-bottom: -28%;
    margin-left: 13%;
   position: relative;
   z-index: 2;
    animation: apiry 2s ease-in-out forwards 16s, bleskv 10s ease-in-out 5 18s;
}
#pa04{
    height: 80%;
    margin-left: 25%;
    margin-bottom: -5%;
}
#pa04:hover,#pa04:focus{
   transform: translate(-50%,15%) scale(1.1);
}
@keyframes svet{
    from{filter: brightness(0.5);}
    to{fillter:brightness(1);}
}
#fonp3{
    background-image:url(../images/pas/fon21.webp);
    background-position: right;
    
    animation: letunaz 12s ease-in forwards,svet 18s ease-in-out forwards;
}
#bv3{
    opacity: 0;
    height: 200%;
    margin-bottom: -95%;
    margin-left: -40%;
    animation: disapr3 15s ease-in-out forwards 12s;
}
@keyframes disapr3{
    0%{transform: translate(-5%,-1%); opacity: 0.5;}
    60%{transform: scale(1.5)  translate(-10%,5%); opacity: 0.8;}
    100%{transform: scale(1.8)  translate(-20%,-15%); opacity: 0;}
}
#zp3{
    height: 170%;
    margin-left: -85%;
    margin-bottom: -75%;
    opacity: 0;
    animation: apir 10s ease-in-out forwards 21s;
}
#fk3{
    height: 135%;
    margin-bottom: -15%;
   margin-left: -50%;
   
    opacity: 0.5;
    animation: skk 12s ease-in-out forwards 3;
}
#fk3:hover, #fk3:focus{
   opacity: 0.7;
   filter:blur(8px)
}
@keyframes blesk4 {
    0%{ filter: brightness(1); transform: rotate(3deg);}
    30%{filter: brightness(1.5); transform: rotate3d(-5deg);}
    60%{filter: brightness(1); transform: rotate3d(3deg);}
    90%{filter: brightness(1.5); transform: rotate3d(-5deg);}
    100%{filter: brightness(1.2);}
}
@keyframes zoom9 {
  0% {
    background-size: 100% 100%;
  }
  50% {
    background-size: 110% 160%;
  }
  100% {
   background-position: left ;
   background-size: 130% 160% ;
  }
}

#vk2{
    height: 80%;
    margin-bottom: -15%;
    margin-left: -10%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 12s,blesk4 10s ease-in-out forwards 14s;
}

#ps1{
    height: 70%;
    margin-bottom: 15%;
    margin-left: 65%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards,muvf 5s ease-in-out forwards 10s;
}
@keyframes ivap2{
    from{transform: translateX(0);}
    to{transform: translateX(-85%);}
}
@keyframes ivap22{
    from{transform: translateX(-85%);}
    to{transform: translateX(-285%);}
}
@keyframes muvf{
    from{transform: scale();}
    to{transform: scale(1.2) translateY(10%);}
}
@keyframes skyp {
    0%{transform: translateX(-85%); opacity: 1;}
    50%{transform: translate(-85%,-5%);}
    100%{transform: translateX(-85%, 5%);}
}
#ov1{
    height: 65%;
    margin-left: -15%;
    margin-bottom: -30%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 1s,ivap2 8s ease-in-out forwards 4s, skyp 3s ease-in-out forwards 12s, ivap22 8s ease-in-out forwards 15s;
}

#dz13{
    height: 100%;
    position: relative;
    z-index: 66;
    opacity: 0;
    
    transform:translate(-195%,-35%) rotate(-180deg);
    animation: apir 3s ease-in-out forwards 10s;
}
#dza13{
    height: 100%;
    transform:translate(35%,-1%);
    opacity: 0;
    animation: apir 3s ease-in-out forwards 11s;
}
#mk13{
    height: 80%;
    margin-left: -25%;
    margin-bottom: -5%;
    position: relative;
    z-index: 2;
    opacity: 0;
    
    animation:apir 2s ease-in-out forwards, rostpa 8s ease-in-out forwards 2s;
    
}


#de13{
    height: 100%;
    position: relative;
    z-index: 1;
    transform:translate(-195%,-15%);
    opacity: 0;
    animation: apir 2s ease-in-out forwards 7s;
}
#de131{
    height: 100%;
    position: relative;
    z-index: 1;
    transform:translate(-145%,-5%);
    opacity: 0;
    animation: apir 2s ease-in-out forwards 7s;
}
@keyframes rostpa{
    from{transform: translate();}
    to{transform: translate(-15%,25%) scale(1.9);}
}
#psa13{
    height: 100%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards;
    margin-bottom: -15%;
    position: relative;
    z-index: 3;
}

@media screen and (width>=1200px) {
.sec1,#zmf1,.sec2,#dv1,#kof2,.sec3,.sec4,.sec7,#fon5,.sec6,.sec5,.sec13,.sec12,.sec10,.sec11,.sec9,.sec8{
    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,.sec13,.sec12,.sec10,.sec11,.sec9,.sec8{
    height: 254px;
    width: 260px;
}

}