h1{
    color: rgb(124, 49, 17);
}



.star1,#dv1,#kof2,.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;
 

}

@keyframes letu2{
  from{background-position: top;}
  to{background-position:bottom;}
}
#dv1{
    background-image:url(../images/marty/dvor1.webp);
    background-position: top;
    animation:letu2 12s ease-in-out forwards;
}
.sec3{
    background-image:url(../images/marty/vtutder.webp);
    
}
#dvs1{
    background-image:url(../images/marty/dvor1fon.webp);
    
  
}
#mk3{
    height: 70%;
    margin-bottom: -2%;
    opacity: 0%;
    margin-left: 35%;
    animation: apir 2s ease-in forwards;
    position: relative;
    z-index: 3;
}
#mmk3{
    height: 75%;
    margin-left: -35%;
    margin-bottom: 13%;
    position: relative;
    z-index: 1;
    opacity: 0;
    animation: apir 2s ease-in forwards,dfli 8s ease-in-out forwards 2s;
}
#fon7{
    background-image:url(../images/marty/fonex1.webp);
    animation: zoom 8s ease-in-out forwards 11s;
}
#kof2{
    background-image:url(../images/marty/fon31.webp);
    animation: zoom2 5s ease-in-out forwards 10s;
    
}
#ska4{
    background-image:url(../images/marty/fonm.webp);
    background-position: left;
    animation: letu 12s ease-in-out forwards;
}
#fon5{
    background-image:url(../images/marty/fon51.webp);
    
}
.sec6{
    background-image:url(../images/marty/vnutder2.webp);
}
.sec8{
    background-image:url(../images/marty/fonza.webp);
    width: 600px;
    height: 330px;
    border-radius: 8px;
    display: flex;
    justify-self: center;    
    background-size: cover;
    overflow: hidden;     
    background-size: cover;
}
#vm8{
    height: 100%;
    margin-top: 15%;
    margin-left: -10%;
    opacity: 0;
     position: relative;
     z-index: 1;
    animation: apir 2s ease-in-out forwards, disapr 2s ease-in-out forwards 3s;
}
#pm8{
    height: 100%;
    margin-left: 20%;
    opacity: 0;   
    animation: apir 2s ease-in-out forwards 1s, disapr 2s ease-in-out forwards 4s;
     position: relative;
     z-index: 3;
}
#tm8{
    height: 100%;
    opacity: 0;
    margin-left: -30%;
    animation: apir 2s ease-in-out forwards 2s, disapr 2s ease-in-out forwards 5s;
     position: relative;
     z-index: 2;
}
#pp8{
     margin-top: 5%;
    height: 120%;
    margin-left: -73%;
    opacity: 0;
     animation: apir 2s ease-in-out forwards 4s;
      position: relative;
     z-index: 3;
}
#vp8{
    height:110%;
    margin-left: -18%;
    margin-top: 15%;
    opacity: 0;
     animation: apir 2s ease-in-out forwards 3s;
     position: relative;
     z-index: 1;
}
#tp8{
    margin-top: 5%;
     margin-left: -17%;
    height: 150%;
    opacity: 0;
     animation: apir 2s ease-in-out forwards 5s;
      position: relative;
     z-index: 2;
}
#pk5{
    height: 110%;
    margin-bottom: -5%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards,dfli 8s ease-in-out 2s,disapr 2s ease-in-out forwards 4s;
}
#pt5{
    height: 100%;
    margin-left: -100%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 3.5s,dfli 8s ease-in-out 6s;
}
#pk4{
    
    margin-left: -10%;
    height: 100%;
    margin-bottom: -25%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards, skk 5s ease-in-out 2 2s;
}
#tp3,#tc3,#tг3,#tb3{
    position: relative;
    z-index: 4;
    height: 30%;
    margin-bottom: -5%;
    opacity: 0;
}
#tp3:hover,#tc3:hover,#tг3:hover,#tb3:hover,#tp3:focus,#tc3:focus,#tг3:focus,#tb3:focus{
    transform: translateY(5%);
}
#tp3{
    margin-left: -55%;
    height: 35%;
    transform: rotate(-15deg);
    margin-bottom: -10%;
    animation: apir 2s ease-in-out forwards;
}
#tb3{
    height: 35%;
    transform: rotate(15deg);
    margin-left: -10%;
    margin-bottom: -12%;
    animation: apir 2s ease-in-out forwards 3s;
}
#tc3{
    margin-left: -10%;
    animation: apir 2s ease-in-out forwards 1s;
}
#tг3{
    margin-left: -10%;
    transform: rotate(10deg);
    animation: apir 2s ease-in-out forwards 2s;
}
#pms3{
    height: 115%;
    margin-bottom: -15%;
    opacity: 0;
    animation: apir 3s ease-in-out forwards, disapr 3s ease-in-out forwards 5s;
}
#np3{
    height: 115%;
    margin-bottom: -3%;
    margin-left: -115%;
    opacity: 0;
    animation: apir 3s ease-in-out forwards 5s,blij 8s ease-in-out 8s forwards;
}
@keyframes blij{
    from{transform: scale(1);}
    to{transform: scale(1.3) translateY(15%);}
}

@keyframes madmove {
    0%{transform: translateX(0);}
    95%{transform: translateX(85%); opacity: 1;}
    100%{transform: translateX(85%); opacity: 0;}
}
#ml7{
    height: 100%;
    margin-bottom: -25%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards, madmove 8s ease-in-out forwards 2s;
}
#prn7{
    height: 100%;
    margin-bottom: -25%;
    margin-left: -10%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 9s,rost2 8s ease-in-out forwards 11s;
    
}


@keyframes ivap5{
    0%{transform: translateX(0);}
   75%{transform: translateX(-85%) scale(1.5);}
   85%{transform: translate(-85%,2%) scale(1.5);}
   100%{transform: translate(-85%,-2%) scale(1.5);}
}

#mm2{
    height: 70%;
    margin-left: 10%;
    margin-bottom: -5%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 15s,ivap5 7s ease-in-out forwards 17s;
}
@keyframes skoy{
    from{transform: translateX();}
    
    to{transform: translateX(130%);}
}
#ma2{
    height: 100%;
    opacity: 0;
    margin-bottom: -35%;
    margin-left: -35%;
    animation: apir 2s ease-in-out forwards,skoy 8s ease-in-out forwards 2s;
}
#sts1{
    height: 100%;
    margin-left: -10%;
    margin-bottom: -10%;
     position: relative;
    z-index: 1;
    opacity: 0;
     animation: apir 3s ease-in-out forwards 1s,rost2 5s ease-in-out forwards 5s;
}
#ms1{
    height: 110%;
    margin-left: -10%;
    margin-bottom: -15%;
    position: relative;
    z-index: 3;
    opacity: 0;
    animation: apir 3s ease-in-out forwards 3s,rost2 5s ease-in-out forwards 5s;
}
#vs1{
    height: 150%;
    margin-bottom: -55%;
    margin-left: -30%;
     position: relative;
    z-index: 2;
    opacity: 0;
     animation: apir 3s ease-in-out forwards 2s,rost2 5s ease-in-out forwards 5s ;
}
#kr1{
    height: 100%;
    opacity: 0;
    animation: apir 2s ease-in-out forwards 12s,rost2  6s ease-in-out forwards 14s;
}
#mk6{
    height: 30%;
    margin-bottom: 20%;
    margin-left: 40%;
    opacity: 0;
    position: relative;
    z-index: 2;
    animation: apir 2s ease-in-out forwards, rost2 12s ease-in-out forwards;
}
#ed6{
    height: 20%;
    margin-bottom: -40%;
    position: relative;
    z-index: 2;
    margin-left: -25%;
     opacity: 0;
    animation: apir 2s ease-in-out forwards,jumpup3 12s ease-in-out forwards;
}
@media screen and (width>=1200px) {
.star1,#dv1,#kof2,.sec3,.sec4,.sec7,#fon5,.sec6{
    height: 600px;
    width: 620px;
}

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

}

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

}