h1{
    color: rgb(192, 192, 7);
}

.sadur,#sdu,#syn,#syn3,#ldr,.dvorles,#pdr,.mountain,.change,.meetvh,#cha2,#fly1,.umenia,#um1,#um2,.peremen,#bazd,.basmak,#chndr,.sosedi,.darbasm,.kareta,.sosedi6,.muka{
  height: 300px;
  width: 310px;
  display: flex;
  align-items: end;
  border-radius: 9px;  
  background-size: cover;
  justify-content: end;
  justify-self: center;
  overflow: hidden;
  animation: playbg 1s ease-in-out forwards;
}
#syn,#syn3{
  background-image: url(../images/tres2/zardvor.webp);
}

#sdu,#sadur{
  background-image: url(../images/tres2/fonvor.webp);
   animation: playbg 0.5s ease-in-out forwards;
  
}
#sdu{
  
  animation: krutit 5s ease-in-out forwards 3s;
}

#pdr,.mountain{
  background-image: url(../images/tres2/cave4.webp);
  background-position: left;
  justify-content: start;
}  
#pdr{
  animation: letu 5s ease-in forwards;
}
#ldr{
  background-image: url(../images/tres2/dvor1.webp);
  background-position: right;
  animation: moverd 8s ease-in-out forwards 1s;
}
@keyframes moverd{
  from{background-position: right;}
  to{background-position:center;}
   55%{background-position: left;}
}

#zrv0{
  height: 290px;
  margin-right: 16.2%;
  
  
}
#zrv{
  height: 290px;
  margin-left: 150%;
  animation: disapr 1s linear forwards 6s;
  
}
#vhr{
  height: 50px;
  padding-top: 50%;
  animation: kruti2 5s ease-in-out forwards 3s;
  opacity: 0;
   
}
@keyframes krutit{
  from{filter: blur(0) brightness(1);}
  to{filter: blur(0) brightness(1);}
  99%{filter: blur(0.7px) brightness(0.3); }
  
  
}
@keyframes kruti2{
  from{transform: scale(1); opacity: 0.6;}
  to{transform: translateX(150%);opacity: 0.6;}
  85%{transform: scale(12) translate(-15%,-38%); opacity: 0.6; }
  
  
}

@keyframes disapr2{
  from{transform: translateX(0);opacity: 0.6;}
  to{transform: translateX(150%);opacity: 0.6;}
}
#ptr,#vasz,#ivz{
  height: 250px;
  opacity: 0;
  animation: apir 2s ease-in forwards, disapr 2s ease-in forwards 5s;
}
#vasz{
  margin-left: -10%;
}

#das{
  height:250px;
  opacity: 0;
  animation: apir 2s ease-in forwards 8s;
  margin-right: 10%;
  margin-bottom: -15%;
}
#shr{
  height: 75px;
  justify-self: start;
  animation: kats 12s ease-out forwards;
  margin-bottom:-15%;
}
@keyframes kats{
  from{transform: rotate(-5deg);}
  to{transform: rotate(3deg) translate(145%,-115%) scale(0.3);}
  25%{transform: rotate(5deg)scale(0.7);}
  50%{transform: rotate(-5deg)translate(105%,-75%)scale(0.4);}
}

#pt2,#ivz2{
  height: 230px;
  position: relative;
  z-index: 2;
   margin-left: -5%;
}
#ivz2{
  height: 220px;
  margin-bottom: -5%;
 
}
#vs2{
  margin-left: -19%;
  height: 230px;
  position: relative;
  z-index: 1;
}

.cuper,#md0,.silver,.gold,#gd1,.diamond,#dz1,.kostr,#fiyt,.transmz,#mr1,#cup{
  height: 330px;
  width: 600px;
  display: flex;
  justify-self: center;
  align-items: end;
  overflow: hidden;  
  border-radius: 8px;
  animation: playbg 1s ease-in-out forwards;
}
.silver{
   background-image: url(../images/tres2/dold29.webp);
  background-color: cadetblue;
  background-size: cover;
  filter: brightness(1.1);
  
 
  align-items: end;
}
#md0{
  background-image: url(../images/tres2/med5.webp);
  background-color: cadetblue;
  background-size: cover;
  filter: brightness(1.1);
  
 
}
#vhd{
  height: 250px;
  display: flex;
  align-self: end;
  position: relative;
  z-index: 1;
  margin-top: 15%;
}

#zmd{
  height: 120px;
  position: relative;
  z-index: 2; 
  margin-left:-65%;
  margin-bottom: -2%;
  animation: zmh 5s ease-in-out forwards 3s;
  

}
#zmd2{
  height: 120px;
  position: relative;
  z-index: 2; 
  margin-left: 15%;
  margin-bottom: -2%;
  animation: zmh2 5s ease-in-out forwards 1s;
  

}
@keyframes zmh{
  from{transform: scale(1);}
  to{transform: scale(3) rotate(-5deg) translateY(-9%);filter: brightness(1.5);}
}
@keyframes zmh2{
  from{transform: scale(1);}
  to{transform: scale(3) rotate(5deg) translateY(-8%);filter: brightness(1.5);}
}
#md1{
  background-image: url(../images/tres2/med5.webp);
  background-color: cadetblue;
  background-position: center;
  filter: brightness(1.1);
 
}
#krc{
  height: 370px;
  margin-left: 65%;
  margin-bottom: -30%;
  animation: apir 2s ease-in forwards;
  position: relative;
  z-index: 1;
}
@keyframes aprd{
  from{transform: scale(1);}
  to{transform:  translateY(38%) scale(1.7); }
}
#ksr{
  height: 85px;
  margin-left: -25%;
  position: relative;
  opacity: 0;
  margin-bottom: -5%;
  z-index: 2;
  animation: apir 2s ease-in forwards 4s;
}
#gvhd{
  height: 150px;
}
#sd1{
  background-image: url(../images/tres2/dold29.webp);
  display: flex;
  
  
  
}
#sd2{
  background-image: url(../images/tres2/dold29.webp);
}

#vr2{
  align-self: end;
  height: 230px;
  margin-bottom: -5%;
  position: relative;
  z-index: 1;
  
}
#ws2,#ws1{
  height: 150px;
  position: relative;
  z-index: 2;
  margin-bottom: -2%;
  
}
#ws2{
  margin-left: 10%;
  animation: rost 3s ease-out 5 3s;
}
#ws1{
  margin-left: -100%;
  animation: rost 3s ease-out 5 4s;
}

#ws3{
  height: 160px;
  position: relative;
  z-index: 2;
  margin-left: 1%;
  margin-bottom: -9%;
  animation: rost1 3s ease-in-out 5 1s,rost 3s ease-out 5 10s;
}

@keyframes rost{
  from{transform: scale(1);}
  to{transform:   scale(2);}
  70%{transform:  scale(1.5);}
}
@keyframes rost1{
  from{transform: rotate3d(1, 1, 0, 20deg)}
  to{transform: rotate3d(1, 1, 0, -10deg) }
  65%{transform: rotate3d(1, 1, 0, 10deg) }
} 
#skr{
  height: 390px;
  margin-bottom: -10%;
  margin-left: 45%;
  opacity: 0;
  animation: apir 3s ease-in-out forwards;
}
.gold{
  background-image:url(../images/tres2/gold2.webp) ;
  background-size: cover;
  overflow:hidden;
}
#zz1{
  height: 340px;
  margin-bottom: -20%;
  margin-left: -7%;
  position: relative;
  z-index: 1;
}

#zmg{
  height: 95px;
  align-self: end;
  margin-bottom:-5% ;
  margin-left: -85%;
  position: relative;
  z-index: 2;
  opacity: 0;
}
#gzmg{
  height: 80px;
  align-self: end;
  position: relative;
  z-index: 2;
  margin-left: -136%;
  margin-bottom: -1%;
  animation: motat1 5s ease-in-out  forwards 3s;
  
}
@keyframes motat1 {
  from{transform: rotate(0deg);}
  to{transform:  scale(1.5) translate(90%,-5%);}
  
}
@keyframes motat2 {
  from{transform: rotate(0deg);}
  to{transform:  scale(1.5) translate(-65%,-3%);}
  
}
#gzmg2{
height: 90px;
  align-self: end;
  position: relative;
  z-index: 2;
  margin-left: 95%;
  margin-bottom: -1%;
   animation: motat2 5s ease-in-out forwards;
}
#gd1{
  background-image: url(../images/tres2/gold21.webp);
  background-size: cover;
  display: flex;
  align-items: end;
  overflow: hidden;
  
}

#gkrs{
  height: 290px;
  margin-left: 65%;
  margin-bottom: -10%;
  animation: apir 3s ease-out forwards;
  position: relative;
  z-index: 1;
}
#gbol{
  height: 85px;
  position: relative;
  z-index: 2;
  margin-left: -23%;
  margin-bottom: -5%;
  opacity: 0;
  animation: apir 3s ease forwards 3s;
}

#diamond{
  background-image:url(../images/tres2/golg31.webp) ;
  background-position: right;
  background-size: cover;
  overflow:hidden;
  border-radius: 8px;
  
}

#dz1{
  background-image:url(../images/tres2/zal6.webp) ;
  animation: zoom 8s ease-in forwards;
  
  background-repeat: no-repeat;
  overflow:hidden;
  display: flex;
  
}
@keyframes into{
  from{background-position:top left;}
  to{background-position: bottom right; }
}
#ohr1{
  height: 310px;
  align-self: end;
  margin-bottom: -15%;
  animation: apir 2s ease-in-out forwards,zmeimuvv1 8s ease-in-out 5;
  margin-left: -19%;
  
}
#ohr3{
  height: 210px;
  align-self: end;
  margin-bottom: -11%;
  animation: apir 3s ease-in-out forwards,zmeimuvv1 7s ease-in-out 8;
  margin-left: -35%;
  
}
#ohr{
  height: 260px;
  align-self: end;
  margin-bottom: -15%;
  animation: apir 3s ease-in-out forwards,zmeimuvv 6s ease-in 5;
  margin-left: 12%;
}
#ohr2{
  height: 230px;
  align-self: end;
  margin-bottom: -15%;
  opacity: 0;
  animation:apir 4s ease-in-out forwards, zmeimuvv 7s ease 5;
  margin-left: -25%;
}
@keyframes zmeimuvv1{
  from{transform: rotate(5deg);}
  to{transform: rotate(3deg);}
  65%{transform: rotate(-5deg) scale(1.3) translateY(-5%);}
}
@keyframes zmeimuvv{
  from{transform: rotate(3deg);}
  to{transform: rotate(3deg);}
  65%{transform: rotate(-2deg) translateY(-2%);}
}
#zl{
  height: 250px;
  margin-bottom: -15%;
  justify-self: end;
  margin-left: 20%;
}
#zab{
  height: 390px;
  margin-bottom: -12%;
  opacity: 0;
  animation: apir 3s ease-in-out forwards 8s;
}
.change{
  background-image:url(../images/tres2/intdvor.webp);
  background-position: center;
  
 
}
#ann{
  height: 150px;
  margin-bottom: 32%;
  opacity: 0;
  position: relative;
  z-index: 1;
  animation: apir 30ms ease-in forwards;
  
}
#ann1{
  height: 150px;
  margin-bottom: 32%;
  opacity: 0;
  position: relative;
  z-index: 1;
  animation: apir 2s ease-in forwards;
  
}

#bd1,#bd2,#bdf1,#bdf2,#bdf3,#bdf4{
  height: 45px;
  margin-bottom: 25%;
  position: relative;
  z-index: 2;
  
  
}
#bdf3{
  animation: drink 5s ease 2 2s;
}
@keyframes drink{
  from{transform: translate(0%,-0%);}
  to{transform: translate(0%,-0%);}
  50%{transform: translate(55%,-275%) rotate(18deg);filter:brightness(3)}
}
#bdf1{
  margin-right: 25%;
}
#bdf2,#bd2,#bdf4{
  margin-right: 20%;
 }
#bd2{
 
  animation: muvrb 2s ease forwards 3s;
}
#bd1{
  animation: blesk 2s ease-in 2s,muvlb 2s ease forwards 3s, blesk 2s ease-in 6s;
}
@keyframes muvrb{
  from{transform: translate(0,0);}
  to{transform: translate(-235%,-2%) scale(1);}
  50%{transform: translate(-235%, 3%) scale(1.1);}
}
@keyframes muvlb{
  from{transform: translate(0,0);}
  to{transform: translate(235%,2%) scale(1);}
  50%{transform: translate(235%,-3%) scale(0.9);}
}


.meetvh,#cha2{
  background-image: url(../images/tres2/vihrap.webp);
  
  
  
}
#cha2{
  animation: temen 3s ease-in-out forwards; 
}
#vhm{
  height: 380px;
  margin-right: -75%;
  margin-bottom: -30%;
  opacity: 0;
  animation: apir 3s ease-in-out forwards 2s;
}
@keyframes blizk{
  from{transform: scale(1);}
  to{transform: scale(2) translateY(20%);}
}
@keyframes temen{
  from{filter: brightness(0.1);}
  3%{filter: brightness(2);}
  25%{filter: brightness(0.1)}
  to{filter: brightness(1);}
}
#vhra{
  height: 95px;
}
#vhra{
  margin-right: -90%;
  animation:vihrlet 3s ease-in forwards ;
}
@keyframes vihrlet{
  from{transform: translate(0,0) rotate(-85deg);filter:  blur(0.3px)}
  to {transform: translate(-135%,-25%) scale(5) rotate( -25deg); filter:  blur(1px); opacity: 0;}
  75%{transform: translate(-135%,-25%) scale(3) rotate( 85deg); filter:  blur(1px); opacity: 1;}
}
#plz{
  height: 280px;
  opacity: 0;
  animation: apir 3s ease-in-out forwards 3s;
  filter: brightness(0.6) blur(0.4px);
  margin-right: -10%;
  margin-bottom: -35%;
}
#fly1{
   background-image: url(../images/tres2/clvar3.webp);
   background-position: left;
   animation:letu 1s linear 27;
   
}



#ger1{
  height: 690px;
  transform: rotate(3deg);
  margin-bottom: -85%;
  margin-right: -132%;
  animation: dfli 3s ease-in-out 15,disapr 2s linear forwards 25s;
  filter: drop-shadow(2px);
  position: relative;
  z-index: 3;
  opacity: 0.7;
   
}
#ger2{
  height: 160px;
  transform: rotate(3deg);
  margin-bottom: -14%;
  animation: dfli 3s ease-in-out 15,disapr 2s linear forwards 25s;
  position: relative;
  z-index: 1;
 
}
#paz{
  height: 160px;
 transform: rotate(15deg);
 margin-bottom: -33%;
 margin-right: -35%;
 position: relative;
  z-index: 2;
  animation: dflip 4s ease-in-out 15,disapr 2s linear forwards 25s;

}


#fiyt{
 background-image: url(../images/tres2/intdvor.webp);
 background-size: cover;
 filter: brightness(0.7);
  display: flex;
  align-items: end;
  animation: temno2 5s ease-in-out forwards;

}
#gero{
  height: 400px;
  justify-self: start;
  margin-bottom: -25%;
  position: relative;
  z-index: 1;
  animation:apir 2s ease-in forwards, dflig1 2s linear  forwards 2s;
}
#gero2{
  height: 300px;
  justify-self: end;
  margin-bottom: -10%;
  margin-left: -30%;
  position: relative;
  z-index: 1;
  animation: apir 2s ease-in forwards,dflig 2s linear  forwards 2s;
}
#pazz{
  height: 250px;
  margin-bottom: -15%;
  margin-left: -25%;
  position: relative;
  z-index: 2;
  opacity: 0;
  animation: apir 2s ease-in forwards,dfli20 0.6s linear forwards 2s;
}
#mc1{
  height: 250px;
  margin-bottom: -20%;
  margin-left: -15%;
  position: relative;
  opacity: 0;
  z-index: 2;
  animation: apir 2s ease-in forwards, dfli0 2s ease-in-out forwards 2s;
}
@keyframes dflig{
  from{transform: translate(0px,-2px) rotate(2deg);}
  to{transform: translate(-225px,-6px)rotate(2deg);}
  10%{transform: translate(3px,6px) rotate(-1deg);}
  70%{transform: translate(-108px,6px) rotate(-1deg);}
}
@keyframes dflig1{
  from{transform: translate(0px,-2px) rotate(2deg);}
  to{transform: translate(-155px,8px)rotate(2deg);}
  10%{transform: translate(3px,6px) rotate(-1deg);}
  70%{transform: translate(-88px,6px) rotate(-1deg);}
}
@keyframes dfli2{
  from{transform: translate(0px,-2px) rotate(-2deg);}
  to{transform: translate(-8px,-1px)rotate(-2deg);z-index: 3;}
  50%{transform: translate(8px,6px) rotate(1deg);z-index: 2;}
}
@keyframes dfli0{
  from{transform: translate(0px,-8px) rotate(2deg);}
  to{transform: translate(-120%,-30px)rotate(2deg);}
  10%{transform: translate(3px,36px) rotate(-1deg);}
  70%{transform: translate(-108px,6px) rotate(-1deg);}
}

@keyframes temno2{
  from{filter:brightness(0.7);}
  to{filter: brightness(0);}
  99%{filter: brightness(0.4);}
  95%{filter: brightness(2);}
  90%{filter:brightness(1)};
  50%{filter:brightness(0.5);}
}
#ks1,#kr1{
  height: 250px;
  margin-bottom: -10%;
  opacity: 0;
  
}
#ks1{
  margin-left:-55%;
  animation: apir 1s ease-in forwards 1s,klan 9s ease-in-out forwards,disapr 2s ease forwards 14s;
}
#kr1{
  animation:apir 1s ease-in forwards,klan2 9s ease-in-out forwards,disapr 2s ease forwards 14s;
}
@keyframes chud{
  from{background-image:url(../images/tres2/fonkosoy3.webp) ;}
  to{background-image: url(../images/tres2/spat2.webp);}
  50%{background-image: url(../images/tres2/eda66.webp); }
} 
  

@keyframes klan{
  from{transform: rotate();}
  to{transform: rotate(10deg)translate(-65%,8%);}
 50%{transform: rotate(5deg) translate(-5%,-1%) ;}
  90%{transform: rotate(2deg) translateX(-65%) ;}
  99%{ransform: rotate(5deg) translateX(-65%);}
}
@keyframes klan2{
  from{transform: rotate();}
  to{transform: rotate(-10deg)translate(65%,8%);}
 50%{transform: rotate(-5deg) translate(5%,-1%);}
 90%{transform: rotate(-5deg) translate(65%);}
  99%{transform: rotate(-5deg) translateX(65%);}
}

.kostr{
  background-image: url(../images/tres2/fogofon.webp);
  background-size: cover;
  
}

#um1,.umenia{
  background-image:url(../images/tres2/fonkosoy3.webp) ;
  background-position: right;
  
  
}
#um1{
  animation: chud 15s ease-out forwards 1s;
}
#fg{
  height: 280px;
  margin-left: 35%;
  margin-bottom: -6%;
  filter: brightness(1);
  
}
#fg1{
  height: 280px;
  margin-left: 35%;
  margin-bottom: -6%;
  filter: brightness(2);
  
}
#um2{
  background-image: url(../images/tres2/zardvor.webp);
  background-position: right;
  overflow: visible;
  
}
#pt3{
  height: 210px;
  margin-right: -25%;
  opacity: 0;
  position: relative;
  z-index: 1;
  animation: apir 5s ease-in 1s, disapr 5s ease-in forwards 5s;

}
#krp2{
  height: 290px;
  margin-bottom: -25%; 
  margin-right: -65%;
  opacity: 0;
  position: relative;
  z-index: 2;
  
  animation: apir 5s ease-in 1s, disapr 5s ease-in forwards 5s;
}
#vkr{
  height: 230px;
  margin-right: -15%;
  opacity: 0;
  position: relative;
  z-index: 2;
  animation: apir 5s ease-in 6s, disapr 5s ease-in forwards 10s;
}
#skr2{
  height: 250px;
  margin-bottom: -2%;
   margin-right:-25%;
   opacity: 0;
   position: relative;
   z-index: 1;
   animation: apir 5s ease-in 6s, disapr 5s ease-in forwards 10s;
}
#gen2{
  height: 450px;
  margin-bottom: -65%;
  margin-right: -85%;
  position: relative;
  opacity: 0;
  z-index: 1;
  animation: apir 5s ease-in 10s, disapr 5s ease-in forwards 15s;
}
#mk2{
  height: 380px;
  margin-bottom: -45%;
  margin-right: -40%;
  position: relative;
  opacity: 0;
  z-index: 2;
  animation: apir 5s ease-in 10s, disapr 5s ease-in forwards 15s;
}
.peremen,#bazd{
  background-image:url(../images/tres2/spat2.webp);
  
}
#bazd{
  animation: transzar 5s ease-in forwards 2s; 
}
@keyframes transzar{
  from{background-image:url(../images/tres2/spat2.webp);}
  to{background-image:url(../images/tres2/bazar.webp) ;}
}
#ivo1{
  height: 210px;
  opacity: 0;  
  margin-right: -75%;
 
}
#ivo0{
  height: 210px;
  opacity: 1;  
  
 
}
#ivo1{
  animation: apir 2s ease-in forwards 1s,disapr 5s ease-in forwards 5s;
}

#ivo2{
  height: 230px;
  opacity: 0;
  animation: apir 5s ease-in forwards 5s;
}

#mr1{
  background-image:url(../images/tres2/morevd2.webp);
  animation:blackix 5s ease;
  overflow: hidden;
  background-size: cover;
 
}
@keyframes blackix {
  from{filter: brightness(1);}
  to{filter: brightness(1);}
  50%{filter:brightness(0.4)}
}
.basmak{
  background-image: url(../images/tres2/lavrka.webp);
}
#hr4{
  height:330px;
  opacity: 0;
  animation: apir 5s ease-in-out forwards 2s,blesk 3s ease-in 5s 2;
}
#dre1{
  height: 250px;
  opacity: 0;
  margin-bottom:-10%;
   margin-right:-75%;
  animation: apir8 5s ease-in forwards 15s, blesk 3s ease-in 18s 2;
}
@keyframes apir8{
  from{opacity: 0;}
  to{opacity: 1; }
  50%{opacity: 0.5; }
}
#rk0{
  height: 240px;
  margin-right:-55%;
  opacity: 0;
  animation:apir 2s ease-in forwards, disapr 2s ease-in forwards 5s;
   
}
#rk10{
  height: 370px;
  margin-bottom: -42%;
  opacity: 0;
  animation: apir 3s ease-in forwards 5s,blesk 3s ease-in 8s 2;
  
}
#chndr{
  background-image: url(../images/tres2/witedvor1.webp);
  background-position: right;
}
#dre2{
  height: 250px;
  opacity: 0;
  margin-bottom: -20%;
  animation: apir 3s ease-in-out forwards ,blesk 3s ease-in 3s 2,disapr 3s ease-in forwards 4s;
}
.darbasm{
  background-image: url(../images/tres2/witedvor2.webp);

  
 
  
}
#bsm{
  height: 250px;
  margin-bottom: 8%;
  margin-right: -35%;
  opacity: 0;
  animation:apir 2s ease-in forwards 1s;
  position: relative;
  z-index: 1;
  
}

@keyframes dvig{
  from{ transform: translateY(0);}
  to{ transform: translateY(-9%) scale(0.8);}
}
#tf{
  height: 65px;
  margin-right: 35%;
  position: relative;
  margin-bottom: -2%;
  opacity: 0;
  z-index: 2;
  animation: apir 2s ease-in forwards 3s,blesk 3s ease-in 4s 2;
}
#bsm2{
  height: 390px;
  margin-bottom: -55%;
  margin-right: -75%;
  position: relative;
  z-index: 1;
  opacity: 0;
  animation: apir 2s ease-in forwards;
}
#ivn2{
  height: 230px;
  margin-right: -65%;
  opacity: 0;
  position: relative;
  z-index: 1;
  animation:apir 2s ease-in forwards 1s;
}
#du5{
  position: relative;
  opacity: 0;
  z-index: 2;
  height: 95px;
  margin-right:28%;
   margin-bottom: 12%;
   animation:apir 2s ease-in forwards 2s, disapr 2s forwards 5s;
}
#kru{
  height: 75px;
  position: relative;
  margin-right: 13%;
  z-index: 2;
  opacity: 0;
  animation:apir 2s ease-in forwards 1s,pit 5s ease-in-out 3 3s ;
}
@keyframes pit {
  from{transform: translateY();}
  50%{transform: translateY(-118%) rotate(-3deg) scale(0.9);}
  to{transform: translateY() rotate(2deg);}
}
.sosedi{
  background-image:url(../images/tres2/dombash.webp);
}
@keyframes duda {
  from{transform: translate();}
  50%{transform: translate(-4%,6%)  scale(1.2) rotate(-1deg);}
  to{transform: translate() ;}
}
.kareta{
  background-image: url(../images/tres2/bdkar6.webp);
  background-position: left;
  
  
}
#kar1{
  height: 330px;
  margin-bottom: -25%;  
  opacity: 0;
  animation: apir 3s ease-in-out forwards;
  
 

}
#kar2{
  height: 330px;
  margin-bottom: -25%;   
  opacity: 0;
  animation: apir 3s ease-in-out forwards;
}
#hk1{
  height: 330px;
  margin-bottom: -25%;
  opacity: 0;
  animation: apir 3s ease-in-out forwards;
}
.cont2{
  float: right;
    width: 330px;
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
    height: 380px;
}
.sosedi6{
  background-color: aliceblue;
  background-image: url(../images/tres2/bdkar6.webp);
  opacity: 0;
  animation: apir 3s ease-in-out forwards;
}
  



.sosedi6 img{
  opacity: 0;
  animation: apir 3s ease-in-out forwards 3s;
}
#bsm1{
  height: 390px;
  margin-bottom: -55%;  
  position: relative;
  z-index: 1;
  opacity: 0;
  
}

@media screen and (max-width:470px){
  #dz1{
    background-position: left;
   
  }
  #zab,#gkrs,#krc{
    
    margin-left: 28%;
   
  }
  #gd1{
    background-position: center;
  }
}