/* ==== Bubbles ==== */


#bg-bubbles{  position: absolute;top: 0; left: 0;right: 0;width: 100%;  margin-top: 65px;  height: calc(100vh - 190px);  z-index: 1001;  }
#bg-bubbles li{
    position: absolute;
    list-style: none;
    display: inline-block;
    width: 40px;
    height: 40px;
    transform: scale(1); 
    background-color: rgba(255,255,255,0.1);
    
    top:-120px;
    -webkit-animation: square 25s infinite;
    animation:         square 25s infinite;
    
    -webkit-transition-timing-function: linear;
    transition-timing-function: linear;transition: all .5s;
}
#bg-bubbles li:hover{
  transform: scale(1.5); 
  border-radius: 45px;
  opacity:.1;

  -webkit-transition: opacity .4s ease-in, all .3s,transform .2s;
    -moz-transition: opacity .4s ease-in, all .3s,transform .2s;
    -o-transition: opacity .4s ease-in, all .3s,transform .2s;
    transition: opacity .4s ease-in, all .3s,transform .2s;
    
     -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
     animation-play-state: paused;
}


#bg-bubbles li:after {
    content: "";
    background: #404040;
    border:1px solid #f1f1f1;
    display: block;
    position: relative;
    width:100%;
    height: 100%;
    border-radius: 45px;
    animation-play-state:running;
    opacity: 0;
    transition: all 0.5s
}

#bg-bubbles li:active:after {   padding: 0; margin: 0; opacity: 1;transition: 0s }


#bg-bubbles li:nth-child(1){  left: 5%;   border:1px solid red;} 
#bg-bubbles li:nth-child(2){  left: 20%;  animation-delay: 2s;  animation-duration: 17s; }
#bg-bubbles li:nth-child(3){  left: 25%;  animation-delay: 4s; }    
#bg-bubbles li:nth-child(4){  left: 40%;  border:1px solid violet; animation-duration: 22s; }   
#bg-bubbles li:nth-child(5){  left: 70%;  }  
#bg-bubbles li:nth-child(6){  left: 50%;  animation-delay: 3s; }
#bg-bubbles li:nth-child(7){  left: 32%;  animation-delay: 7s; } 
#bg-bubbles li:nth-child(8){  left: 10%;  animation-delay: 15s;  animation-duration: 40s;  }  
#bg-bubbles li:nth-child(9){  left: 90%;  animation-delay: 2s;   }  
#bg-bubbles li:nth-child(10){ left: 5%;  animation-delay: 11s;  }

/*#bg-bubbles li:hover{   padding: 10px }*/



@-webkit-keyframes square {
  0%   { transform: translateY(0px); }
  100% { transform: translateY(900px) rotate(1200deg); }
}
@keyframes square {
  0%   { transform: translateY(0px); }
  100% { transform: translateY(900px) rotate(1200deg); }
}













#background-wrap {
 top: 0; left: 0;right: 0;width: 100%;   height: calc(40vh);  z-index: 1001;
}

/* KEYFRAMES */

@-webkit-keyframes animateCloud {
    0% {
        margin-left: -1000px;
    }
    100% {
        margin-left: 100%;
    }
}

@-moz-keyframes animateCloud {
    0% {
        margin-left: -1000px;
    }
    100% {
        margin-left: 100%;
    }
}

@keyframes animateCloud {
    0% {
        margin-left: -1000px;
    }
    100% {
        margin-left: 100%;
    }
}

/* ANIMATIONS */

.x1 {
  -webkit-animation: animateCloud 35s linear infinite;
  -moz-animation: animateCloud 35s linear infinite;
  animation: animateCloud 35s linear infinite;
  
  -webkit-transform: scale(0.35);
  -moz-transform: scale(0.35);
  transform: scale(0.35);
}

.x2 {
  -webkit-animation: animateCloud 120s linear infinite;
  -moz-animation: animateCloud 120s linear infinite;
  animation: animateCloud 120s linear infinite;
  
  -webkit-transform: scale(0.3);
  -moz-transform: scale(0.3);
  transform: scale(0.3);
}

.x3 {
  -webkit-animation: animateCloud 130s linear infinite;
  -moz-animation: animateCloud 130s linear infinite;
  animation: animateCloud 130s linear infinite;
  
  -webkit-transform: scale(0.5);
  -moz-transform: scale(0.5);
  transform: scale(0.5);
}

.x4 {
  -webkit-animation: animateCloud 118s linear infinite;
  -moz-animation: animateCloud 118s linear infinite;
  animation: animateCloud 118s linear infinite;
  
  -webkit-transform: scale(0.4);
  -moz-transform: scale(0.4);
  transform: scale(0.4);
}

.x5 {
  -webkit-animation: animateCloud 125s linear infinite;
  -moz-animation: animateCloud 125s linear infinite;
  animation: animateCloud 125s linear infinite;
  
  -webkit-transform: scale(0.55);
  -moz-transform: scale(0.55);
  transform: scale(0.55);
}

/* OBJECTS */

.cloud {
  /*filter: blur(5px);*/
  background: #fff; opacity:.2;
  background: -moz-linear-gradient(top,  #fff 5%, #f1f1f1 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(5%,#fff), color-stop(100%,#f1f1f1));
  background: -webkit-linear-gradient(top,  #fff 5%,#f1f1f1 100%);
  background: -o-linear-gradient(top,  #fff 5%,#f1f1f1 100%);
  background: -ms-linear-gradient(top,  #fff 5%,#f1f1f1 100%);
  background: linear-gradient(top,  #fff 5%,#f1f1f1 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#f1f1f1',GradientType=0 );
  
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
  
  -webkit-box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
  box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);

  height: 120px;
  position: relative;
  width: 350px;
}

.cloud:after, .cloud:before {
    background: #fff;
  content: '';
  position: absolute;
  z-index: -1;
}

.cloud:after {
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;

  height: 100px;
  left: 50px;
  top: -50px;
  width: 100px;
}

.cloud:before {
  -webkit-border-radius: 200px;
  -moz-border-radius: 200px;
  border-radius: 200px;

  width: 180px;
  height: 180px;
  right: 50px;
  top: -90px;
}






/* BOX */

.box{position: absolute;
  top:calc(50% - 150px);
  left:calc(50% - 100px);
  transform: perspective(2000px) rotateY(-45deg);
  width:100px; 
  height:300px;
  transform-style: preserve-3d;
}

.box:before{content: '';position: absolute;bottom:-100px; left:0;width: 100%;height: 50px;background: #fff;filter: blur(40px);opacity: .5;transform: rotateX(90deg);}
.box div{ position:absolute; 
  top:0px;
  left:0px; 
  width:100%; 
  height: 100%;
  transform-style: preserve-3d;
  animation: animate 5s linear infinite
} 
.box div span{ color:#404040;
  text-align:center;
  font-size:50px;
  position:absolute; 
  top:0px;
  left:0px;
   width:100%; 
   height: 100%;
   display: block;
   background: linear-gradient(0deg,rgba(240,240,240,0.3),rgba(28,78,169,0.1),rgba(240,240,240,0.3));
   border-radius: 90px;border:1px solid #f1f1f1;} 





   /* BOX */
.box div span:nth-child(1){ transform:rotateX(0deg);}
.box div span:nth-child(2){ transform:rotateX(45deg);}
.box div span:nth-child(3){ transform:rotateX(-45deg);}
.box div span:nth-child(4){ transform:rotateX(90deg);}

@keyframes animate{
  0%{transform: perspective(2000px) rotateX(0deg);}
  100%{transform: perspective(2000px) rotateX(359deg);}
}

.box div:hover{ 
 animation-play-state: paused;
 }









.cssload-wrap {
  position: absolute;
  margin: 0 auto 0;
  top:calc(50%);
  left:calc(50% );
  transform: rotateX(75deg);
}
.cssload-circle {
  position: absolute;
  float: left;
  border: 1px solid white;
  animation: 2s bounce 1.73s infinite ease-in-out alternate;
    -o-animation:  2s bounce 1.73s infinite ease-in-out alternate;
    -ms-animation:  2s bounce 1.73s infinite ease-in-out alternate;
    -webkit-animation:  2s bounce 1.73s infinite ease-in-out alternate;
    -moz-animation: 2s bounce 1.73s infinite ease-in-out alternate;
  border-radius: 100%;
  background: transparent;
  top: -73px;
  left: -73px;
}
.cssload-circle:nth-child(1) {
  margin: 0 288px;
  width: 10px;
  height: 10px;
  animation-delay: 115ms;
    -o-animation-delay: 115ms;
    -ms-animation-delay: 115ms;
    -webkit-animation-delay: 115ms;
    -moz-animation-delay: 115ms;
  z-index: -1;
  border: 1px solid rgb(255,43,0);
}
.cssload-circle:nth-child(2) {
  margin: 0 283px;
  width: 19px;
  height: 19px;
  animation-delay: 230ms;
    -o-animation-delay: 230ms;
    -ms-animation-delay: 230ms;
    -webkit-animation-delay: 230ms;
    -moz-animation-delay: 230ms;
  z-index: -2;
  border: 1px solid rgba(255,85,0,0.7);
}
.cssload-circle:nth-child(3) {
  margin: 0 278px;
  width: 29px;
  height: 29px;
  animation-delay: 345ms;
    -o-animation-delay: 345ms;
    -ms-animation-delay: 345ms;
    -webkit-animation-delay: 345ms;
    -moz-animation-delay: 345ms;
  z-index: -3;
  border: 1px solid rgba(255,128,0,0.7);
}
.cssload-circle:nth-child(4) {
  margin: 0 273px;
  width: 39px;
  height: 39px;
  animation-delay: 460ms;
    -o-animation-delay: 460ms;
    -ms-animation-delay: 460ms;
    -webkit-animation-delay: 460ms;
    -moz-animation-delay: 460ms;
  z-index: -4;
  border: 1px solid rgba(255,170,0,0.7);
}
.cssload-circle:nth-child(5) {
  margin: 0 268px;
  width: 49px;
  height: 49px;
  animation-delay: 575ms;
    -o-animation-delay: 575ms;
    -ms-animation-delay: 575ms;
    -webkit-animation-delay: 575ms;
    -moz-animation-delay: 575ms;
  z-index: -5;
  border: 1px solid rgba(255,213,0,0.7);
}
.cssload-circle:nth-child(6) {
  margin: 0 263px;
  width: 58px;
  height: 58px;
  animation-delay: 690ms;
    -o-animation-delay: 690ms;
    -ms-animation-delay: 690ms;
    -webkit-animation-delay: 690ms;
    -moz-animation-delay: 690ms;
  z-index: -6;
  border: 1px solid rgba(255,255,0,0.7);
}
.cssload-circle:nth-child(7) {
  margin: 0 258px;
  width: 68px;
  height: 68px;
  animation-delay: 805ms;
    -o-animation-delay: 805ms;
    -ms-animation-delay: 805ms;
    -webkit-animation-delay: 805ms;
    -moz-animation-delay: 805ms;
  z-index: -7;
  border: 1px solid rgba(212,255,0,0.7);
}
.cssload-circle:nth-child(8) {
  margin: 0 253px;
  width: 78px;
  height: 78px;
  animation-delay: 920ms;
    -o-animation-delay: 920ms;
    -ms-animation-delay: 920ms;
    -webkit-animation-delay: 920ms;
    -moz-animation-delay: 920ms;
  z-index: -8;
  border: 1px solid rgba(170,255,0,0.7);
}
.cssload-circle:nth-child(9) {
  margin: 0 249px;
  width: 88px;
  height: 88px;
  animation-delay: 1035ms;
    -o-animation-delay: 1035ms;
    -ms-animation-delay: 1035ms;
    -webkit-animation-delay: 1035ms;
    -moz-animation-delay: 1035ms;
  z-index: -9;
  border: 1px solid rgba(128,255,0,0.7);
}
.cssload-circle:nth-child(10) {
  margin: 0 244px;
  width: 97px;
  height: 97px;
  animation-delay: 1150ms;
    -o-animation-delay: 1150ms;
    -ms-animation-delay: 1150ms;
    -webkit-animation-delay: 1150ms;
    -moz-animation-delay: 1150ms;
  z-index: -10;
  border: 1px solid rgba(85,255,0,0.7);
}
.cssload-circle:nth-child(11) {
  margin: 0 239px;
  width: 107px;
  height: 107px;
  animation-delay: 1265ms;
    -o-animation-delay: 1265ms;
    -ms-animation-delay: 1265ms;
    -webkit-animation-delay: 1265ms;
    -moz-animation-delay: 1265ms;
  z-index: -11;
  border: 1px solid rgba(43,255,0,0.7);
}
.cssload-circle:nth-child(12) {
  margin: 0 234px;
  width: 117px;
  height: 117px;
  animation-delay: 1380ms;
    -o-animation-delay: 1380ms;
    -ms-animation-delay: 1380ms;
    -webkit-animation-delay: 1380ms;
    -moz-animation-delay: 1380ms;
  z-index: -12;
  border: 1px solid rgba(0,255,0,0.7);
}
.cssload-circle:nth-child(13) {
  margin: 0 229px;
  width: 127px;
  height: 127px;
  animation-delay: 1495ms;
    -o-animation-delay: 1495ms;
    -ms-animation-delay: 1495ms;
    -webkit-animation-delay: 1495ms;
    -moz-animation-delay: 1495ms;
  z-index: -13;
  border: 1px solid rgba(0,255,43,0.7);
}
.cssload-circle:nth-child(14) {
  margin: 0 224px;
  width: 136px;
  height: 136px;
  animation-delay: 1610ms;
    -o-animation-delay: 1610ms;
    -ms-animation-delay: 1610ms;
    -webkit-animation-delay: 1610ms;
    -moz-animation-delay: 1610ms;
  z-index: -14;
  border: 1px solid rgba(0,255,85,0.7);
}
.cssload-circle:nth-child(15) {
  margin: 0 219px;
  width: 146px;
  height: 146px;
  animation-delay: 1725ms;
    -o-animation-delay: 1725ms;
    -ms-animation-delay: 1725ms;
    -webkit-animation-delay: 1725ms;
    -moz-animation-delay: 1725ms;
  z-index: -15;
  border: 1px solid rgba(0,255,128,0.7);
}
.cssload-circle:nth-child(16) {
  margin: 0 214px;
  width: 156px;
  height: 156px;
  animation-delay: 1840ms;
    -o-animation-delay: 1840ms;
    -ms-animation-delay: 1840ms;
    -webkit-animation-delay: 1840ms;
    -moz-animation-delay: 1840ms;
  z-index: -16;
  border: 1px solid rgba(0,255,170,0.7);
}
.cssload-circle:nth-child(17) {
  margin: 0 210px;
  width: 166px;
  height: 166px;
  animation-delay: 1955ms;
    -o-animation-delay: 1955ms;
    -ms-animation-delay: 1955ms;
    -webkit-animation-delay: 1955ms;
    -moz-animation-delay: 1955ms;
  z-index: -17;
  border: 1px solid rgba(0, 255, 213, 0.7);
}
.cssload-circle:nth-child(18) {
  margin: 0 205px;
  width: 175px;
  height: 175px;
  animation-delay: 2070ms;
    -o-animation-delay: 2070ms;
    -ms-animation-delay: 2070ms;
    -webkit-animation-delay: 2070ms;
    -moz-animation-delay: 2070ms;
  z-index: -18;
  border: 1px solid rgba(0, 255, 255, 0.7);
}
.cssload-circle:nth-child(19) {
  margin: 0 200px;
  width: 185px;
  height: 185px;
  animation-delay: 2185ms;
    -o-animation-delay: 2185ms;
    -ms-animation-delay: 2185ms;
    -webkit-animation-delay: 2185ms;
    -moz-animation-delay: 2185ms;
  z-index: -19;
  border: 1px solid rgba(0, 212, 255, 0.7);
}
.cssload-circle:nth-child(20) {
  margin: 0 195px;
  width: 195px;
  height: 195px;
  animation-delay: 2300ms;
    -o-animation-delay: 2300ms;
    -ms-animation-delay: 2300ms;
    -webkit-animation-delay: 2300ms;
    -moz-animation-delay: 2300ms;
  z-index: -20;
  border: 1px solid rgba(0, 170, 255, 0.7);
}
.cssload-circle:nth-child(21) {
  margin: 0 190px;
  width: 205px;
  height: 205px;
  animation-delay: 2415ms;
    -o-animation-delay: 2415ms;
    -ms-animation-delay: 2415ms;
    -webkit-animation-delay: 2415ms;
    -moz-animation-delay: 2415ms;
  z-index: -21;
  border: 1px solid rgba(0, 127, 255, 0.7);
}
.cssload-circle:nth-child(22) {
  margin: 0 185px;
  width: 214px;
  height: 214px;
  animation-delay: 2530ms;
    -o-animation-delay: 2530ms;
    -ms-animation-delay: 2530ms;
    -webkit-animation-delay: 2530ms;
    -moz-animation-delay: 2530ms;
  z-index: -22;
  border: 1px solid rgba(0, 85, 255, 0.7);
}
.cssload-circle:nth-child(23) {
  margin: 0 180px;
  width: 224px;
  height: 224px;
  animation-delay: 2645ms;
    -o-animation-delay: 2645ms;
    -ms-animation-delay: 2645ms;
    -webkit-animation-delay: 2645ms;
    -moz-animation-delay: 2645ms;
  z-index: -23;
  border: 1px solid rgba(0, 43, 255, 0.7);
}
.cssload-circle:nth-child(24) {
  margin: 0 175px;
  width: 234px;
  height: 234px;
  animation-delay: 2760ms;
    -o-animation-delay: 2760ms;
    -ms-animation-delay: 2760ms;
    -webkit-animation-delay: 2760ms;
    -moz-animation-delay: 2760ms;
  z-index: -24;
  border: 1px solid rgba(0, 0, 255, 0.7);
}
.cssload-circle:nth-child(25) {
  margin: 0 171px;
  width: 244px;
  height: 244px;
  animation-delay: 2875ms;
    -o-animation-delay: 2875ms;
    -ms-animation-delay: 2875ms;
    -webkit-animation-delay: 2875ms;
    -moz-animation-delay: 2875ms;
  z-index: -25;
  border: 1px solid rgba(42, 0, 255, 0.7);
}
.cssload-circle:nth-child(26) {
  margin: 0 166px;
  width: 253px;
  height: 253px;
  animation-delay: 2990ms;
    -o-animation-delay: 2990ms;
    -ms-animation-delay: 2990ms;
    -webkit-animation-delay: 2990ms;
    -moz-animation-delay: 2990ms;
  z-index: -26;
  border: 1px solid rgba(85, 0, 255, 0.7);
}
.cssload-circle:nth-child(27) {
  margin: 0 161px;
  width: 263px;
  height: 263px;
  animation-delay: 3105ms;
    -o-animation-delay: 3105ms;
    -ms-animation-delay: 3105ms;
    -webkit-animation-delay: 3105ms;
    -moz-animation-delay: 3105ms;
  z-index: -27;
  border: 1px solid rgba(127, 0, 255, 0.7);
}
.cssload-circle:nth-child(28) {
  margin: 0 156px;
  width: 273px;
  height: 273px;
  animation-delay: 3220ms;
    -o-animation-delay: 3220ms;
    -ms-animation-delay: 3220ms;
    -webkit-animation-delay: 3220ms;
    -moz-animation-delay: 3220ms;
  z-index: -28;
  border: 1px solid rgba(170, 0, 255, 0.7);
}
.cssload-circle:nth-child(29) {
  margin: 0 151px;
  width: 283px;
  height: 283px;
  animation-delay: 3335ms;
    -o-animation-delay: 3335ms;
    -ms-animation-delay: 3335ms;
    -webkit-animation-delay: 3335ms;
    -moz-animation-delay: 3335ms;
  z-index: -29;
  border: 1px solid rgba(212, 0, 255, 0.7);
}
.cssload-circle:nth-child(30) {
  margin: 0 146px;
  width: 292px;
  height: 292px;
  animation-delay: 3450ms;
    -o-animation-delay: 3450ms;
    -ms-animation-delay: 3450ms;
    -webkit-animation-delay: 3450ms;
    -moz-animation-delay: 3450ms;
  z-index: -30;
  border: 1px solid rgba(255, 0, 255, 0.7);
}


@keyframes bounce {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(97px);
  }
}

@-o-keyframes bounce {
  0% {
    -o-transform: translateY(0px);
  }
  100% {
    -o-transform: translateY(97px);
  }
}

@-ms-keyframes bounce {
  0% {
    -ms-transform: translateY(0px);
  }
  100% {
    -ms-transform: translateY(97px);
  }
}

@-webkit-keyframes bounce {
  0% {
    -webkit-transform: translateY(0px);
  }
  100% {
    -webkit-transform: translateY(97px);
  }
}

@-moz-keyframes bounce {
  0% {
    -moz-transform: translateY(0px);
  }
  100% {
    -moz-transform: translateY(97px);
  }
}