:root {
  --rbRight:57;
--mcld1T:20px;
--mcld2T:5px;
--mcld3T:20px;

--mcld21T:15px;
--mcld22T:7px;
--mcld23T:30px;

--mcld31T:7px;
--mcld32T:17px;
--mcld33T:17px; 

--rl1:18%;
--rl2:55%;
--rl3:89%;

--rl4:8%;
--rl5:47%;
--rl6:80%;

--rl7:30%;
--rl8:65%;
--rl9:95%;


}

.bgCl { top:60px;
    position: absolute;
    width:100%;
    height: 80px;
    overflow: hidden; z-index: 100; 
}

.bgCl:before, .bgCl:after {
  
    content: "";
    position: absolute;
    width: 100%;
     height: 80px;

background: url(/images/newdesign/cloud3d4_1.webp) no-repeat,
url(/images/newdesign/cloud3d4_1.webp) no-repeat,
url(/images/newdesign/cloud3d4_1.webp) no-repeat;
   

  
 
     animation: moveCl 320s infinite linear;    
}

.clSizes:before, .clSizes:after {
  background-position: 
    var(--rl1)  var(--mcld1T),  
    var(--rl2)  var(--mcld2T),   
    var(--rl3)  var(--mcld3T) ;  
  background-size: 55px,   58px,   56px;  

}

.bgCl:before {
    right: 100%;
}





.bgCl2 { top:60px;
    position: absolute;
    width:100%;
    height: 80px;
    overflow: hidden;  z-index: 50;
}

.bgCl2:before, .bgCl2:after {
  
    content: "";
    position: absolute;
    width: 100%;
     height: 80px;

background: url(/images/newdesign/cloud3d4_1.webp) no-repeat,
url(/images/newdesign/cloud3d4_1.webp) no-repeat,
url(/images/newdesign/cloud3d4_1.webp) no-repeat;

  

  
 
     animation: moveCl 310s infinite linear;    
}

.clSizes2:before, .clSizes2:after {
  background-position:   
  var(--rl4) var(--mcld21T),   
  var(--rl5) var(--mcld22T),   
  var(--rl6) var(--mcld23T);  
  background-size: 35px, 31px, 30px;  

}

.bgCl2:before {
    right: 100%;
}


.bgCl3 { top:60px;
    position: absolute;
    width:100%;
    height: 80px;
    overflow: hidden;  z-index: 200;
}

.bgCl3:before, .bgCl3:after {
  
    content: "";
    position: absolute;
    width: 100%;
     height: 80px;

background: url(/images/newdesign/cloud3d4_1.webp) no-repeat,
url(/images/newdesign/cloud3d4_1.webp) no-repeat,
url(/images/newdesign/cloud3d4_1.webp) no-repeat;

  

  
 
     animation: moveCl 320s infinite linear;    
}

.clSizes3:before, .clSizes3:after {
  background-position: 
  
  var(--rl7) var(--mcld31T),  
  var(--rl8) var(--mcld32T), 
  var(--rl9) var(--mcld33T);  
  background-size:45px,42px,44px;  

}

.bgCl3:before {
    right: 100%;
}






@keyframes moveCl {
    from {transform: translateX(  0%);}
      to {transform: translateX(100%);}
}


@media (min-width:412px) {  }            
@media (min-width:568px) {



  }             
@media (min-width:600px) {

 }            
@media (min-width:801px) { } 
@media (min-width:1040px){  







:root {

  --rbRight:74;
--cld1T:20px;
--cld2T:13px;
--cld3T:10px;

--cld21T:15px;
--cld22T:8px;
--cld23T:35px;

--cld31T:10px;
--cld32T:15px;
--cld33T:17px; 

--rl1:18%;
--rl2:55%;
--rl3:89%;

--rl4:8%;
--rl5:47%;
--rl6:80%;

--rl7:30%;
--rl8:65%;
--rl9:95%;


}

.bgCl { top:83px;   
    height:87px;
   
}

.bgCl3 { top:83px;    
    height: 90px;
   
}

.bgCl2 { top:83px;   
    height: 90px;
   
}

.clSizes:before, .clSizes:after {
  background-position: 
  var(--rl1) var(--cld1T),   
  var(--rl2) var(--cld2T),   
  var(--rl3) var(--cld3T);    
  background-size: 110px,   120px,   118px;  

}

.clSizes2:before, .clSizes2:after {
  background-position:    
  var(--rl4) var(--cld21T),   
  var(--rl5) var(--cld22T),  
  var(--rl6) var(--cld23T);  
  background-size: 70px,    60px,  50px;  

}


.clSizes3:before, .clSizes3:after {
  background-position:   
  var(--rl7) var(--cld31T),   
  var(--rl8) var(--cld32T),  
  var(--rl9) var(--cld33T);  
  background-size: 90px,88px, 72px;  

}


@keyframes moveClSize {

  


}



}