/**
 * This work is licensed under the Creative Commons
 * Attribution 3.0 Unported License. To view a copy
 * of this license, visit http://creativecommons.org/licenses/by/3.0/.
 *
 * Author: Girish Sharma <scrapmachines@gmail.com>
 */
/* Demo specific styles start */


.loader-gplus {
  position: absolute;
  top: calc(50% - 25px);
  left: calc(50% - 25px);
}
/* Demo specific styles end */

.loader-gplus {
  height: 50px;
  width: 50px;
  border-radius: 25px;
  animation: rotate 2.4s linear infinite;
}

.loader-gplus:before, .loader-gplus:after {
  position: absolute;
  width: 50px;
  height: 25px;
  right: 0px;
  border-radius: 50px 50px 0 0;
  z-index: 2;
  content: '';
  animation: color-switch 2.4s linear infinite;
}

.loader-gplus:after {
  transform-origin: 0% 100%;
  animation-name: unfold, color-shift;
  animation-timing-function: linear, linear;
  animation-iteration-count: infinite, infinite;
  animation-duration: .6s, 2.4s;
}

@keyframes rotate {
  0.0001% {
    transform: rotateZ(0deg);
    background-color: rgb(58,123,247);
  }
  25% {
    transform: rotateZ(0deg);
    background-color: rgb(58,123,247);
  }
  25.0001% {
    transform: rotateZ(90deg);
    background-color: rgb(222,74,66);
  }
  50% {
    transform: rotateZ(90deg);
    background-color: rgb(222,74,66);
  }
  50.0001% {
    transform: rotateZ(180deg);
    background-color: rgb(255,214,74);
  }
  75% {
    transform: rotateZ(180deg);
    background-color: rgb(255,214,74);
  }
  75.0001% {
    transform: rotateZ(270deg);
    background-color: rgb(33,173,100);
  }
  100% {
    transform: rotateZ(270deg);
    background-color: rgb(33,173,100);
  }
}

@keyframes unfold {
  to {
    transform: rotateX(180deg) rotateZ(0deg);
  }
}

@keyframes color-switch {
  0.0001% {
    background-color: rgb(222,74,66);
  }
  25% {
    background-color: rgb(222,74,66);
  }
  25.0001% {
    background-color: rgb(255,214,74);
  }
  50% {
    background-color: rgb(255,214,74);
  }
  50.0001% {
    background-color: rgb(33,173,100);
  }
  75% {
    background-color: rgb(33,173,100);
  }
  75.0001% {
    background-color: rgb(58,123,247);
  }
  100% {
    background-color: rgb(58,123,247);
  }
}

@keyframes color-shift {
  0.0001% {
    background-color: rgb(58,123,247);
    border-bottom: 1px solid rgb(58,123,247);
  }
  12.5% {
    background-color: rgb(40,95,195);
    border-bottom: 1px solid rgb(45,105,200);
  }
  12.5001% {
    background-color: rgb(232,120,115);
    border-bottom: 1px solid rgb(232,120,115);
  }
  25% {
    background-color: rgb(222,74,66);
    border-bottom: 1px solid rgb(222,74,66);
  }
  37.5% {
    background-color: rgb(230,107,99);
    border-bottom: 1px solid rgb(230,107,99);
  }
  37.5001% {
    background-color: rgb(255,222,123);
    border-bottom: 1px solid rgb(255,222,123);
  }
  50% {
    background-color: rgb(255,214,90);
    border-bottom: 1px solid rgb(255,214,90);
  }
  62.5% {
    background-color: rgb(255,222,123);
    border-bottom: 1px solid rgb(255,222,123);
  }
  62.5001% {
    background-color: rgb(25,140,74);
    border-bottom: 1px solid rgb(25,140,74);
  }
  75% {
    background-color: rgb(33,173,100);
    border-bottom: 1px solid rgb(33,173,100);
  }
  87.5% {
    background-color: rgb(82,189,132);
    border-bottom: 1px solid rgb(82,189,132);
  }
  87.5001% {
    background-color: rgb(82,148,247);
    border-bottom: 1px solid rgb(82,148,247);
  }
  100% {
    background-color: rgb(58,123,247);
    border-bottom: 1px solid rgb(58,123,247);
  }
}