.cm-water-spin-wrap{
  position: relative;
  display: inline-block;
  vertical-align: middle;
  border-radius: 50%;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
  box-shadow: 0 0 20px #029502;
  border: 5px solid #53fc53;
  width: 250px;
  height: 250px;
}

.cm-water-spin-inner{
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  z-index: 2;
  border-radius: 50%;
}

.cm-water-spin-text{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-weight: bold;
  text-align: center;
  line-height: 240px;
  font-size: 75px;
  color: #03c603;
  text-shadow: 0 0 10px #029502;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
  font-family: tahoma;
}

.cm-water-spin{
  position: absolute;
  z-index: 1;
  width: 200%;
  height: 200%;
  left: -50%;
  border-radius: 40%;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: spin;
  animation-name: spin;
  background: rgba(83,252,83,0.5);
  -webkit-animation-duration: 10s;
  animation-duration: 10s;
  box-shadow: 0 0 20px #03bc03;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

.cm-water-glare{
  position: absolute;
  top: -120%;
  left: -120%;
  z-index: 5;
  width: 200%;
  height: 200%;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  border-radius: 50%;
  background-color: rgba(255,255,255,0.15);
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

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

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.cm-spin-wrap,
.cm-svg-spin-wrap{
  position: relative;
}
.cm-spin-blur,
.cm-svg-spin-blur{
  opacity: .7;
  -webkit-filter: blur(.8px);
  filter: blur(.8px);
  -webkit-filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=1,MakeShadow=false);
  filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=1,MakeShadow=false);
  -webkit-transform: translateZ(0);

  &:after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #fff;
    opacity: .2;
    -webkit-transition: all .3s;
    transition: all .3s;
  }
}
.cm-spin-inner,
.cm-svg-spin-inner{
  position: absolute;
  display: inline-block;
  text-align: center;
  width: 40px;
  height: 40px;
  top: 45%;
  left: 50%;
  margin-top: -20px;
  margin-left: -20px;
  color: #108ee9;
  vertical-align: middle;
  font-size: 12px;
  z-index: 10003;
}

.cm-svg-spin-gear1{
  -webkit-transform: translate(-20px, -20px) rotate(15deg);
  transform: translate(-20px, -20px) rotate(15deg);
  -webkit-animation: spin2 4s linear infinite;
  animation: spin2 4s linear infinite;
  -webkit-transform-origin: center;
  transform-origin: center;
}

.cm-svg-spin-gear2{
  -webkit-transform: translate(20px, 20px) rotate(15deg);
  transform: translate(20px, 20px) rotate(15deg);
  -webkit-animation: spin3 4s linear infinite;
  animation: spin3 4s linear infinite;
  -webkit-transform-origin: center;
  transform-origin: center;
}

@-webkit-keyframes spin2 {
  0% {
    -webkit-transform: translate(-20px, -20px) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(-20px, -20px) rotate(-360deg);
  }
}

@keyframes spin2 {
  0% {
    transform: translate(-20px, -20px) rotate(0deg);
  }
  100% {
    transform: translate(-20px, -20px) rotate(-360deg);
  }
}

@-webkit-keyframes spin3 {
  0% {
    -webkit-transform: translate(20px, 20px) rotate(15deg);
  }
  100% {
    -webkit-transform: translate(20px, 20px) rotate(345deg);
  }
}

@keyframes spin3 {
  0% {
    transform: translate(20px, 20px) rotate(15deg);
  }
  100% {
    transform: translate(20px, 20px) rotate(345deg);
  }
}

.cm-spin-mask{
  .cm-spin,
  .cm-spin-inner{
    width:70px;
    height:60px;
  }
  .cm-spin-inner{
    margin-top: -30px;
    margin-left: -35px;
  }
  .cm-mask{
    position:absolute;
    border-radius:2px;
    overflow:hidden;
    perspective: 1000;
    backface-visibility: hidden;
  }

  .cm-mask-plane{
    background:#108ee9;
    width:400%;
    height:100%;
    position:absolute;
    transform : translate3d(0,0,0);
    z-index:100;
    perspective: 1000;
    backface-visibility: hidden;

  }

  .cm-mask-top .cm-mask-plane{
    z-index:2000;
    -webkit-animation: trans1 1.3s ease-in infinite  0s backwards;
    -o-animation: trans1 1.3s ease-in infinite  0s backwards;
    animation: trans1 1.3s ease-in infinite  0s backwards;
  }
  .cm-mask-middle .cm-mask-plane{
    transform : translate3d(0,0,0);
    background : #bbbbbb;
    -webkit-animation: trans2 1.3s linear infinite  0s backwards;
    -o-animation: trans2 1.3s linear infinite  0s backwards;
    animation : trans2 1.3s linear infinite  0.3s  backwards;
  }
  .cm-mask-bottom .cm-mask-plane{
    z-index:2000;
    -webkit-animation: trans3 1.3s ease-out infinite  0s backwards;
    -o-animation: trans3 1.3s ease-out infinite  0s backwards;
    animation : trans3 1.3s ease-out infinite  0.7s backwards;
  }
  .cm-mask-top{
    width:53px;
    height:20px;
    left:20px;
    transform: skew(-15deg, 0);
    z-index:100;
  }

  .cm-mask-middle{
    width:33px;
    height:20px;
    left:20px;
    top:15px;

    transform: skew(-15deg, 40deg)
  }
  .cm-mask-bottom{
    width:53px;
    height:20px;
    top:30px;
    transform: skew(-15deg, 0)
  }

  @-webkit-keyframes trans1{
    from {
      -webkit-transform : translate3d(53px,0,0)
    }
    to {
      -webkit-transform : translate3d(-250px,0,0)
    }
  }

  @keyframes trans1{
    from {
      transform : translate3d(53px,0,0)
    }
    to {
      transform : translate3d(-250px,0,0)
    }
  }

  @-webkit-keyframes trans2{
    from {
      -webkit-transform : translate3d(-160px,0,0)
    }
    to {
      -webkit-transform : translate3d(53px,0,0)
    }
  }

  @keyframes trans2{
    from {
      transform : translate3d(-160px,0,0)
    }
    to {
      transform : translate3d(53px,0,0)
    }
  }

  @-webkit-keyframes trans3{
    from {
      -webkit-transform : translate3d(53px,0,0)
    }
    to {
      -webkit-transform : translate3d(-220px,0,0)
    }
  }

  @keyframes trans3{
    from {
      transform : translate3d(53px,0,0)
    }
    to {
      transform : translate3d(-220px,0,0)
    }
  }
}


.cm-spin-waves{
  .cm-spin-inner{
    width: 120px;
    margin-left: -60px;
  }
  .cm-waves,
  .cm-waves:before,
  .cm-waves:after{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: solid 3px transparent;
  }
  .cm-waves{
    border-bottom-color: #108ee9;
    margin: auto;
    margin-bottom: 10px;
    text-align: center;
    animation: waver 1s infinite alternate ease-in-out;
    position: relative;
    &:before{
      content: '';
      display: block;
      position: absolute;
      border-bottom-color: #108ee9;
      left: -28px;
      top: -3px;
      animation: waver 1s infinite alternate ease-in-out;
    }
    &:after{
      content: '';
      display: block;
      position: absolute;
      border-bottom-color: #108ee9;
      left: 23px;
      top: -3px;
      animation: waver 1s infinite alternate ease-in-out;
    }
  }

  @-webkit-keyframes waver {
    0% { border-radius: 2px; }
    100% { border-radius: 20px; }
  }

  @keyframes waver {
    0% { border-radius: 2px; }
    100% { border-radius: 20px; }
  }
}