@-moz-keyframes spinSatelitte {
    0% {
         opacity:1;
        -moz-transform: rotate(-15deg);
    }
    49% {
         opacity:1;
        -moz-transform: rotate(25deg);
    }
    50% {
        opacity:0;
        -moz-transform: rotate(25deg);
    }
    51% {
        -moz-transform: rotate(-45deg);
        opacity:0;
    }
    52% {
        opacity:1;
        -moz-transform: rotate(-45deg);
    }
    100% {
         opacity:1;
        -moz-transform: rotate(-15deg);
    }
}
@-webkit-keyframes spinSatelitte {
    0% {
         opacity:1;
        -webkit-transform: rotate(-15deg);
    }
    49% {
         opacity:1;
        -webkit-transform: rotate(25deg);
    }
    50% {
         opacity:0;
        -webkit-transform: rotate(25deg);
    }
    51% {
         opacity:0;
        -webkit-transform: rotate(-45deg);
    }
    52% {
        opacity:1;
        -webkit-transform: rotate(-45deg);
    }
    100% {
         opacity:1;
        -webkit-transform: rotate(-15deg);
    }
}
@keyframes spinSatelitte {
    0% {
        opacity:1;
        -webkit-transform: rotate(-15deg);
        transform: rotate(-15deg);
    }
    49% {
         opacity:1;
        -webkit-transform: rotate(25deg);
        transform: rotate(25deg);
    }
    50% {
        opacity:0;
        -webkit-transform: rotate(25deg);
        transform: rotate(25deg);
    }
    51% {
        opacity:0;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    52% {
        opacity:1;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    100% {
         opacity:1;
        -webkit-transform: rotate(-15deg);
        transform: rotate(-15deg);
    }
}



@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(360deg);
    }
}
@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}


.loader{
  width: 100px;
  position: absolute;
  left:50%;
  margin: 0px auto 0px auto;
  margin-left:-50px;
  top:0px;
  text-align:center;
  z-index:99999;
}

.loader1 span{
  display: inline-block;
  width: 8px;
  height: 8px;
 background-color: var(--color-pink);
  margin: 25px 8px;
}
.loader1.black span { background-color:#131313; }
.loader1.green span { background-color:#0DD000; }
.loader1.grey span { background-color:#DFDFDF; }
.loader1.mini span
{
	width: 6px;
    height: 6px;
	margin:27px 3px;	
}

.loader1 span:nth-child(1){
  animation: boucing 600ms ease-in-out infinite;
}

.loader1 span:nth-child(2){
  animation: boucing 600ms ease-in-out 0.15s infinite;
}

.loader1 span:nth-child(3){
  animation: boucing 600ms ease-in-out 0.30s infinite;
}

@keyframes boucing{
  0%, 75%, 100%{
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }

  25%{
    -webkit-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -o-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

#loader-main { display:none; position:relative; }

#loader-overlay { width:100%; height:100%; position:fixed; top:0px; left:0px; background-color:#12151d; z-index:999; opacity:0; -webkit-transition: all 500ms ease-out;
    -moz-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    transition: all 500ms ease-out; }
#loader-main.show #loader-overlay { opacity:0.2; }

.loadingSegment {
  display: inline-block;
  width: 150px;
  height: 150px;
  border: 10px solid #38435b;
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s ease-in-out infinite;
  -webkit-animation: spinSegment 0.7s ease-in-out infinite;
  margin-left:auto; 
  margin-right:auto;
}
.loadingSegment-2 {
  display: inline-block;
  width: 150px;
  height: 150px;
  border: 10px solid #00cbf6;
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s ease-in-out infinite;
  animation-delay:0.1s;
  -webkit-animation: spinSegment 0.7s ease-in-out infinite;
  -webkit-animation-delay:0.1s;
}
.loadingSegment-3 {
  display: inline-block;
  width: 150px;
  height: 150px;
  border: 10px solid rgba(0,204,0,1);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s ease-in-out infinite;
  animation-delay:0.2s;
  -webkit-animation: spinSegment 0.7s ease-in-out infinite;
  -webkit-animation-delay:0.1s;
}

.loadingSegment.loaded { border-top-color:#38435b; }
.loadingSegment.green { border: 10px solid rgba(0,204,0,1) !important; }
.loadingSegment-2.loaded { border-top-color:#00cbf6; }
.loadingSegment-3.loaded { border-top-color:rgba(0,204,0,1); }
@keyframes spinSegment {
  to { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes spinSegment {
  to { -webkit-transform: rotate(360deg); }
}

.anim200 {
	-webkit-transition: all 200ms ease-out;
	-moz-transition: all 200ms ease-out;
	-o-transition: all 200ms ease-out;
	transition: all 200ms ease-out;	
}
.anim400 {
	-webkit-transition: all 400ms ease-out;
	-moz-transition: all 400ms ease-out;
	-o-transition: all 400ms ease-out;
	transition: all 400ms ease-out;	
}


.bounce {
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}

@-webkit-keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-12px);
  }
  60% {
    transform: translateY(-6px);
  }
}
@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-12px);
  }
  60% {
    transform: translateY(-6px);
  }
}

.wavebox {
  width: 100%;
  height:100%;
  border-radius: 5px;
  position: absolute;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
  top:0px; left:0px;
}

.wave {
  opacity: .7;
  position: absolute;
  top: 50%;
  left: 50%;
  background: #FFFFFF;
  width: 570px;
  height: 570px;
  margin-left: -285px;
  margin-top: -285px;
  transform-origin: 50% 48%;
  border-radius: 43%;
  animation: drift 5000ms infinite linear;
  border:1px solid #e9e9ed;
}

.wave.-three {
  animation: drift 9000ms infinite linear;
  width: 520px;
  height: 520px;
   margin-left: -260px;
  margin-top: -260px;
  opacity:.6;
}

.wave.-two {
  animation: drift 12000ms infinite linear;
  opacity: .7;
  width: 560px;
  height: 560px;
   margin-left: -280px;
  margin-top: -280px;
  background: #FFFFFF;
   border:1px solid #e9e9ed;
}

.wavebox:after {
  content: '';
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
 
  z-index: 11;
  transform: translate3d(0, 0, 0);
}


@keyframes drift {
  from { transform: rotate(0deg); }
  from { transform: rotate(360deg); }
}

.bounce-login { 
animation-duration: 4s;
	animation-iteration-count: infinite;
	transform-origin: bottom;	
	animation-name: bounce-login;
	animation-timing-function: cubic-bezier(0.140, 0.420, 0.210, 1);
	position:relative; 
}
@keyframes bounce-login {
	0%   { transform: scale(1,1)      translateY(0); }
	4%  { transform: scale(1.1,.9)   translateY(0); }
	12%  { transform: scale(.9,1.1)   translateY(-8px); }
	20%  { transform: scale(1.05,.95) translateY(0); }
	22%  { transform: scale(1,1)      translateY(-3px); }
	28%  { transform: scale(1,1)      translateY(0); }
	40% { transform: scale(1,1)      translateY(0); }
	100% { transform: scale(1,1)      translateY(0); }
}



@-webkit-keyframes blinker {
  from {opacity: 1.0;}
  to {opacity: 0.8;}
}
.blinker {
	text-decoration: blink;
	-webkit-animation-name: blinker;
	-webkit-animation-duration: 0.6s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:ease-in-out;
	-webkit-animation-direction: alternate;
}