:root{
  --char:0;
  --cor:rgb(66, 66, 175);
}



.svadba{

  background-image: url(../images/dadka/fon.webp);
}
#khn{
  background-image: url(../images/dadka/kuhna.webp);
  background-size: cover;
  background-position: right;
  
}

.quadeimage,.gornisa,.ovalimage,.smena,.korable,#korb,#korb2,#sm1,.kuhn,#khn,#konh,.korskak,#sk1,#sk2,.oldy,.otnul{
    background-size: cover;
   height: 300px;
   width: 310px;  
   display: flex;
   justify-self: center;    
   justify-content:end;
  border-radius: 8px;
  overflow: hidden;
  animation: playbg 1s ease-in-out forwards;
}
.quadeimage{
    background-image: url(../images/dadka/nwin.webp);
    background-color: brown;
}

.gornisa{
  background-image: url(../images/dadka/gornisa.webp);
  background-color: burlywood;
  
}
#olk,#mz1k{
  height: 390px;
  margin-bottom: -35%;
  margin-right: -10%;
}
#rama2{
  margin-left: 55%;
  margin-top: 15%;
  height: 128px;
}
#vor{
  display: flex;
   
}


#pvk{
  height: 250px;
  align-self: end;
  opacity: 0;
  margin-bottom: -10%;
  animation: apir 3s ease-in-out forwards 1s, skk 2s ease-in-out 2 2s;
}

#konh{
    background-image: url(../images/dadka/fonkony.webp);
    background-size: cover;   
    
    
}
#knh{
  height: 290px;
  position: relative;
  z-index:2 ;
  align-self: end;
  margin-right: 55%;
  margin-bottom: -25%;
  opacity: 0;
  animation: apir 3s ease-in-out forwards,dfli 6s ease-in-out forwards 4s;
 
  
}
#tbn{
  height: 95px;
  margin-bottom: 25%;
  position: relative;
  z-index:1 ;
  margin-right: -100%;
  align-self: end;
  opacity: 0;
  animation: apir 3s ease-in-out forwards;
    
}
.scatert,#scatert1,#bfi,.batle_field,.svadba,#tanzy{
    width: 600px;
    height: 330px;
    background-size: cover;
    align-items: end;
    justify-content:center;
    overflow: hidden;
    display: flex;
    animation: playbg 1s ease-in-out forwards;
}
.scatert{
    background-image: url(../images/dadka/windo.webp); 
}

.korskak,#sk1{
    background-image: url(../images/dadka/batfon3.webp); 
    background-position: left;
    background-size: cover;
    overflow: visible;
   
}
#bk5{
  height: 400px;
  align-self: end;
  margin-bottom: -40%;
  margin-right: -140%;
   opacity: 0;
   position: relative;
  z-index: 2;
  animation:apir 2s ease-in-out forwards, dfli 3s ease-in-out  7s;
  }
#gor5{
  height: 250px;
  align-self: end;
  margin-bottom: -15%;
  margin-right: 35%;
  opacity: 0;
  animation:apir 2s ease-in-out forwards,rost 5s ease-out forwards 3s,disapgor 3s ease-in forwards 8s;
}
#mch{
  position: relative;
  z-index: 1;
  height: 140px;
  margin-top: 40%;
  margin-left: 90%;
  animation:apir 2s ease-in-out forwards, mechi1 5s ease-in  forwards 7s;
  
}
#golov{
  height: 100px;
  justify-self:start;
  margin-left: -150%;
  margin-bottom: 20%;
  animation: golovi 3s linear 7s  forwards;
  animation-fill-mode: forwards;
  animation-delay: 10s;

}
#sk1{
   
    animation: letunaz 0.3s linear 15;
}
#sk2{
  background-image: url(../images/dadka/batfon1.webp); 
    background-position: left;
    background-size: cover;
    animation: letunaz 3s linear 8;
}
#bgk{
  height: 290px;
  animation: skk 1s ease-in-out 5;
  align-self: end;
  margin-bottom: -35%;
  margin-right: 5%;
}
#klch{
  height: 290px;
  animation: skk 3s ease-in-out 8;
  align-self: end;
  margin-bottom: -35%;
  margin-right: 5%;
  
}
#krlf{
  height: 250px;
  margin-bottom: -5%;
}
#tanzy{
  
  background-image:url(../images/dadka/windo.webp); /* сделать замену картинки с фейерверками или с меняющими положение цыганами? */
  background-size: cover;  
  border-radius: 3%;
  align-items: end;
  justify-content:end;
  display: flex;
  overflow: visible;
  
 
}
#tryt1{
  height: 290px;
  margin-bottom: -15%;
  margin-left: -150%;
  position: relative;
  z-index: 1;
  opacity: 0;
  animation: apir 2s ease-in-out forwards 1s, dfli 3s ease-in-out 3s;
}
#d3{
  margin-right: 50%;
  position: relative;
  z-index: 2;
}
#scatert1{
  background-image:url(../images/dadka/scat2.webp);  
  align-items: end;
  justify-content:center;
  animation: samobrank 4s 1 ease-in-out forwards;
  
}
#zercalo{
  height: 350px;
  width: auto;  
  display: flex;
  align-items: end;
  justify-items: center;
  
}
#nz{
    height: 160px;
    justify-self: end;
    display: flex;
    background-color: rgb(72, 84, 74);
    width: 135px;
    border-radius: 50%;

}

#d2{
  justify-self: start;
}

 #d1, #d2,#d3{
  opacity: 0;
     height: 185px;
     display: flex;     
     animation: apir 1s ease-in-out forwards;

}
#rama{
  position: relative;
  height: 110px;
  z-index: 999;
  margin-top:-44%;
  
}
.ovalzerc{
  
   z-index: 1000;
    margin-bottom: 10%;
    display: flex;
    height: 70px;
    width: 65px;
    border-radius: 50%;
    
    animation: showk 2s 3 ease-in-out 1s;
    

}

@keyframes showk{
  from {
      background-image: url(../images/dadka/dadka.webp);
      background-size: cover;
      border-radius: 50%;
      opacity: 0.5;
                }
    to {
      background-image:url(../images/dadka/zdada.webp);
      opacity: 1;
      background-size: cover;
      border-radius: 50%;
                }
    66%{background-image:url(../images/dadka/korolevich.webp);
      opacity: 1;
      background-size: cover;
    border-radius: 50%;}       
    33%{background-image:url(../images/dadka/korol_d.webp);
      opacity: 1;
      background-size: cover;
    border-radius: 50%;}            
}

 

#uznik{
  margin-top: 19%;
  opacity: 0;
  animation: apir 2s ease-in-out forwards 1s;
  margin-right: 73%;
  height: 65px;
  width: auto;
}






@keyframes samobrank {
    from {
      background-image: url(../images/dadka/scat0.webp);
      background-position: center;
      opacity: 0.5;
                }
    to {
      background-image:url(../images/dadka/scat2.webp);
      background-position: center;
      opacity: 1;
                }
}

.ovalimage{
    background-image: url(../images/dadka/image.webp);
    background-color: rgb(58, 112, 139);   
    align-items: end;
    justify-content:end;
    border-radius: 12px;  
    animation: playbg 0.1s ease-in-out forwards;
}

.ovalimage img,.ovalimage2 img{
  display: flex;  
  
  transition-duration: 2s;
  transition-property: transform;
  transition-timing-function: linear;
  animation: opa 1s ease-in-out;
 
}
.ovalimage img:hover, .ovalimage2 img:hover{
  transform: translateX(-250px);
  
}

.pravda img{
  height: 250px;
  width: 200px;
  animation: opa 1s ease-in-out;
  
}


.smena,#sm1{
  
  background-image: url(../images/dadka/kolodez.webp);
  background-color: rgb(83, 55, 127);
  
  
}
#sm1{
  background-position: bottom;
  animation:letu1 4s ease-in-out forwards 5s;
  
}


#hek{
  opacity: 1;
  padding-top: 15%;
  margin-right:30%;
  animation: disapr 2s ease-in-out forwards 4s;
 
  height: 180px;
}

#voz{
  height: 180px;
  padding-top:45%;
  margin-right: -15%;
}
#uho{
  opacity: 0;
  padding-top:45%;
  margin-right:16%;
  height: 180px;
  animation: apir 3s ease-in-out forwards 10s;


}
#gol{
  opacity: 0;
  height: 180px;
  margin-right: -95%;
  padding-top:45%;  
   animation: apir 3s ease-in-out forwards 10s;
  
}


#vorka{
  height: 250px;
  opacity: 0;
  align-self: end;
  animation: apir 2s ease-in-out forwards 1s, disapr 2s ease-in-out forwards 6s;
}
#newz{
  animation: showk, disapr 6s ease-in-out;
  animation-fill-mode: forwards;
}

#wedfot{
  opacity: 0;
  animation: apir 6s ease-in-out;
  animation-fill-mode: forwards;  
  display: flex;
  margin-top: 15%;
  margin-left: 60%;
  height: 58px;
  position: absolute;
  
}


#bogatir{
  height: 85px;
  
}


@keyframes silbogat {
  from{transform: translate(50px,-50px) scale(2);
  }
  to {transform: translate(100px,-150px) scale(4);
  }
  50%{transform: translate(75px,-100px) scale(3);}

  
}




.batle_field{
  background-image: url(../images/dadka/batfon2.webp);
  background-color: rgb(77, 149, 113);  
  justify-content:end;
  
  
}




#da_p{
    height: 255px;
    margin-bottom:-15%;
    margin-right: 50%;
    animation: lazo 2s ease-in-out ;
    animation-delay: 4s;
    animation-fill-mode: forwards;
  
}

@keyframes lazo {
  from{transform: rotate(-15deg);
  }
  to {transform: rotate(5deg);
  }
  

  
}
#pl{
  opacity: 1;
  height: 190px;
  margin-top: 30%;
  animation: plaz 3s ease-in;
  animation-fill-mode: forwards;
  animation-delay: 2s;
}

@keyframes plaz {
  from{transform: translate(-80%,10%) scale(0.9);
  }
  to {transform: translate(-10px,10px) scale(0.8);
  }
  50%{transform: translate(-280%,-10%) scale(0.8);}
  25%{transform: translate(-180%,-8%) scale(0.8);}
  70%{transform: translate(-380%,-12%) scale(0.7) rotate(-30deg); }
  
}

#gor{
  height: 255px;
  margin-top: 8%;
  margin-left: -7%;
  animation: disapgor 3s ease-in forwards 6s;
  
}
#ost{
  margin-top: 20%;
  margin-right: 100%;
  display: flex;
  
  animation: golovi 3s linear 7s  forwards;
}



@keyframes golovi{
  from {transform:translate(0%,0%);}
  to {transform:translate(1500%,10%);}
  
}
@keyframes disapgor {
  from {transform:translate(0%,0%);}
  to {transform:translate(-200%,10%);}
  
}



@keyframes mechi1 {
  from{transform: translate(-150px,10px) scale(0.9);
  }
  to {transform: translate(15px,10px) scale(0.8);
  }
  50%{transform: translate(-500px,-100px) scale(0.8);}
  25%{transform: translate(-300px,-75px) scale(0.8);}
  70%{transform: translate(-780px,-110px) scale(0.7) rotate(-30deg); }
  
}


#plf{
  background-color: aquamarine;
  color: darkcyan;
  display: block;
  background-size: cover;
  height: 420px;
  width:650px;
  text-align: center;    
}

.korable{
  background-image: url(../images/dadka/korable.webp);
  background-size: cover;
 
}
#korb{
  background-image: url(../images/dadka/kor0.webp);
  
}
#korb2{
  background-image: url(../images/dadka/kor0.webp);
  
}
#nevm{
  padding-top: 30%;
  display: flex;
  animation: movdoice 6s linear;
  animation-delay: 1.5s;
  animation-fill-mode: forwards;
}
#mkk{
  height: 18px;
  margin-right: 45%;
  margin-top: 62%;
  animation: meshfly 6s linear;
  animation-delay: 3s;
  animation-fill-mode: forwards;

}
@keyframes meshfly{
  from{transform: translate(-180%,-150%) scale(0.9)rotate(-30deg);
  }
  to {transform: translate(-870%,100%) scale(2) rotate(-30deg);
  }
  50%{transform: translate(-520%,-450%) scale(1.1);}
  
  70%{transform: translate(-650%,-150%) scale(1.5) ; }
}
#mkk2{
  height: 55px;
 padding-right: 120%;
  margin-top: 30%;
  position: absolute;
}

#krvl{
  height: 350px;
  align-self: end;
  margin-left: -25%;
}
#prl{
  height: 350px;
  align-self: end;
  margin-left: 15%;
  margin-bottom: -3%;
}



#nev{
  max-width: 100%;
  
}

@keyframes movdoice{
  from{transform: translate(0%,0%) rotate(-10deg);
  }
  to {transform: translate(-150%,0%) rotate(10deg);
  }
}
#first_block{
  height: 720px;
  width: auto;
}

#kr8{
  height: 250px;
  display: flex;
  margin-top: 25%;
}
.svadba img:hover{
  animation: opa 1s ease-in-out;
}



#krl{
  height: 250px;
}

@media screen and (max-width:470px){
  .batle_field{
    background-position: left;
   
  }
  #d3{
    
    margin-right:100%;
   
  }
  #da_p{
    margin-right: 55%;
  }
  #pl{
    margin-right: -35%;
  }
  #tryt1{
    margin-bottom: -10%;
  }
}