/* Material Loaders Library */

/* Author: Idrees Dargahwala 
   Created on 08/02/2017 */

.mloader {
    width:48px;
    height:48px;
    display:inline-block;
    box-sizing:border-box;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

/* Ring */
.r-red-500 {
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #f44336; /* Red 500 */
    border-radius: 50%;
    animation: spin 2s linear infinite;
}

.r-pink-500 {
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #e91e63; /* Pink 500 */
    border-radius: 50%;
    animation: spin 2s linear infinite;
}

.r-purple-500 {
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #9c27b0; /* Purple 500 */
    border-radius: 50%;
    animation: spin 2s linear infinite;
}

.r-deep-purple-500 {
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #673ab7; /* Deep Purple 500 */
    border-radius: 50%;
    animation: spin 2s linear infinite;
}

.r-indigo-500 {
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #3f51b5; /* Indigo 500 */
    border-radius: 50%;
    animation: spin 2s linear infinite;
}

.r-blue-500 {
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #2196f3; /* Blue 500 */
    border-radius: 50%;
    animation: spin 2s linear infinite;
}

.r-light-blue-500 {
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #03a9f4; /* Light-Blue 500 */
    border-radius: 50%;
    animation: spin 2s linear infinite;
}

.r-cyan-500 {
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #00bcd4; /* Cyan 500 */
    border-radius: 50%;
    animation: spin 2s linear infinite;
}

.r-teal-500 {
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #009688; /* Teal 500 */
    border-radius: 50%;
    animation: spin 2s linear infinite;
}

.r-green-500 {
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #4caf50; /* Green 500 */
    border-radius: 50%;
    animation: spin 2s linear infinite;
}

.r-light-green-500 {
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #8bc34a; /* Light-Green 500 */
    border-radius: 50%;
    animation: spin 2s linear infinite;
}

.r-lime-500 {
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #cddc39; /* Lime 500 */
    border-radius: 50%;
    animation: spin 2s linear infinite;
}

.r-yellow-500 {
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #ffeb3b; /* Yellow 500 */
    border-radius: 50%;
    animation: spin 2s linear infinite;
}

.r-amber-500 {
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #ffc107; /* Amber 500 */
    border-radius: 50%;
    animation: spin 2s linear infinite;
}

.r-orange-500 {
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #ff9800; /* Orange 500 */
    border-radius: 50%;
    animation: spin 2s linear infinite;
}

.r-deep-orange-500 {
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #ff5722; /* Deep Orange 500 */
    border-radius: 50%;
    animation: spin 2s linear infinite;
}

.r-brown-500 {
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #795548; /* Brown 500 */
    border-radius: 50%;
    animation: spin 2s linear infinite;
}

.r-blue-grey-500 {
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #607d8b; /* Blue Grey 500 */
    border-radius: 50%;
    animation: spin 2s linear infinite;
}

.r-black {
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #000000; /* Black */
    border-radius: 50%;
    animation: spin 2s linear infinite;
}

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

    }

    100% { 

     transform: rotate(360deg); 

    }
}

@-moz-keyframes spin {
    0% {
        
     transform: rotate(0deg); 

    }

    100% { 

     transform: rotate(360deg); 

    }
}

@keyframes spin {
    0% {

     transform: rotate(0deg); 

    }

    100% { 

     transform: rotate(360deg); 

    }
}



/* Square */

.s-red-500 {
    background: #f44336;
    animation: square-anim 3s ease-in-out infinite;
    display: flex;
    align-items: center;
    justify-content: center;
}

.s-pink-500 {
    background: #e91e63;
    animation: square-anim 3s ease-in-out infinite;
    display: flex;
    align-items: center;
    justify-content: center;
}

.s-purple-500 {
    background: #9c27b0;
    animation: square-anim 3s ease-in-out infinite;
    display: flex;
    align-items: center;
    justify-content: center;
}

.s-deep-purple-500 {
    background: #673ab7;
    animation: square-anim 3s ease-in-out infinite;
    display: flex;
    align-items: center;
    justify-content: center;
}

.s-indigo-500 {
    background: #3f51b5;
    animation: square-anim 3s ease-in-out infinite;
    display: flex;
    align-items: center;
    justify-content: center;
}

.s-blue-500 {
    background: #2196f3;
    animation: square-anim 3s ease-in-out infinite;
    display: flex;
    align-items: center;
    justify-content: center;
}

.s-light-blue-500 {
    background: #03a9f4;
    animation: square-anim 3s ease-in-out infinite;
    display: flex;
    align-items: center;
    justify-content: center;
}

.s-cyan-500 {
    background: #00bcd4;
    animation: square-anim 3s ease-in-out infinite;
    display: flex;
    align-items: center;
    justify-content: center;
}

.s-teal-500 {
    background: #009688;
    animation: square-anim 3s ease-in-out infinite;
    display: flex;
    align-items: center;
    justify-content: center;
}

.s-green-500 {
    background: #4caf50;
    animation: square-anim 3s ease-in-out infinite;
    display: flex;
    align-items: center;
    justify-content: center;
}

.s-light-green-500 {
    background: #8bc34a;
    animation: square-anim 3s ease-in-out infinite;
    display: flex;
    align-items: center;
    justify-content: center;
}

.s-lime-500 {
    background: #cddc39;
    animation: square-anim 3s ease-in-out infinite;
    display: flex;
    align-items: center;
    justify-content: center;
}

.s-yellow-500 {
    background: #ffeb3b;
    animation: square-anim 3s ease-in-out infinite;
    display: flex;
    align-items: center;
    justify-content: center;
}

.s-amber-500 {
    background: #ffc107;
    animation: square-anim 3s ease-in-out infinite;
    display: flex;
    align-items: center;
    justify-content: center;
}

.s-orange-500 {
    background: #ff9800;
    animation: square-anim 3s ease-in-out infinite;
    display: flex;
    align-items: center;
    justify-content: center;
}

.s-deep-orange-500 {
    background: #ff5722;
    animation: square-anim 3s ease-in-out infinite;
    display: flex;
    align-items: center;
    justify-content: center;
}

.s-brown-500 {
    background: #795548;
    animation: square-anim 3s ease-in-out infinite;
    display: flex;
    align-items: center;
    justify-content: center;
}

.s-blue-grey-500 {
    background: #607d8b;
    animation: square-anim 3s ease-in-out infinite;
    display: flex;
    align-items: center;
    justify-content: center;
}

.s-black {
    background: #000000;
    animation: square-anim 3s ease-in-out infinite;
    display: flex;
    align-items: center;
    justify-content: center;
}

.square-inside {
    width: 15px;
    height: 15px;
    margin: 0 auto;
    background: #fff;
    animation: square-anim 3s ease-in-out infinite;
}

@-webkit-keyframes square-anim {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(90deg);
    }

    50% {
        transform: rotate(180deg);
    }

    75% {
        transform: rotate(270deg);
    }

    100% {
        transform: rotate(360deg);
    }

}

@-moz-keyframes square-anim {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(90deg);
    }

    50% {
        transform: rotate(180deg);
    }

    75% {
        transform: rotate(270deg);
    }

    100% {
        transform: rotate(360deg);
    }

}


@keyframes square-anim {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(90deg);
    }

    50% {
        transform: rotate(180deg);
    }

    75% {
        transform: rotate(270deg);
    }

    100% {
        transform: rotate(360deg);
    }

}

/* Circle */ 

.c-red-500 {
    border-radius: 50%;
    background: #f44336;
    animation: circle-shape 800ms ease-in-out infinite;
    animation-direction: alternate;
}

.c-pink-500 {
    border-radius: 50%;
    background: #e91e63;
    animation: circle-shape 800ms ease-in-out infinite;
    animation-direction: alternate;
}

.c-purple-500 {
    border-radius: 50%;
    background: #9c27b0;
    animation: circle-shape 800ms ease-in-out infinite;
    animation-direction: alternate;
}

.c-deep-purple-500 {
    border-radius: 50%;
    background: #673ab7;
    animation: circle-shape 800ms ease-in-out infinite;
    animation-direction: alternate;
}

.c-indigo-500 {
    border-radius: 50%;
    background: #3f51b5;
    animation: circle-shape 800ms ease-in-out infinite;
    animation-direction: alternate;
}

.c-blue-500 {
    border-radius: 50%;
    background: #2196f3;
    animation: circle-shape 800ms ease-in-out infinite;
    animation-direction: alternate;
}

.c-light-blue-500 {
    border-radius: 50%;
    background: #03a9f4;
    animation: circle-shape 800ms ease-in-out infinite;
    animation-direction: alternate;
}

.c-cyan-500 {
    border-radius: 50%;
    background: #00bcd4;
    animation: circle-shape 800ms ease-in-out infinite;
    animation-direction: alternate;
}

.c-teal-500 {
    border-radius: 50%;
    background: #009688;
    animation: circle-shape 800ms ease-in-out infinite;
    animation-direction: alternate;
}

.c-green-500 {
    border-radius: 50%;
    background: #4caf50;
    animation: circle-shape 800ms ease-in-out infinite;
    animation-direction: alternate;
}

.c-light-green-500 {
    border-radius: 50%;
    background: #8bc34a;
    animation: circle-shape 800ms ease-in-out infinite;
    animation-direction: alternate;
}

.c-lime-500 {
    border-radius: 50%;
    background: #cddc39;
    animation: circle-shape 800ms ease-in-out infinite;
    animation-direction: alternate;
}

.c-yellow-500 {
    border-radius: 50%;
    background: #ffeb3b;
    animation: circle-shape 800ms ease-in-out infinite;
    animation-direction: alternate;
}

.c-amber-500 {
    border-radius: 50%;
    background: #ffc107;
    animation: circle-shape 800ms ease-in-out infinite;
    animation-direction: alternate;
}

.c-orange-500 {
    border-radius: 50%;
    background: #ff9800;
    animation: circle-shape 800ms ease-in-out infinite;
    animation-direction: alternate;
}

.c-deep-orange-500 {
    border-radius: 50%;
    background: #ff5722;
    animation: circle-shape 800ms ease-in-out infinite;
    animation-direction: alternate;
}

.c-brown-500 {
    border-radius: 50%;
    background: #795548;
    animation: circle-shape 800ms ease-in-out infinite;
    animation-direction: alternate;
}

.c-blue-grey-500 {
    border-radius: 50%;
    background: #607d8b;
    animation: circle-shape 800ms ease-in-out infinite;
    animation-direction: alternate;
}

.c-black {
    border-radius: 50%;
    background: #000000;
    animation: circle-shape 800ms ease-in-out infinite;
    animation-direction: alternate;
}

@-webkit-keyframes circle-shape {
    0% {
        left: 0px;
        right: 0px;
        transform: translate(0);
    }

    50% {
        left: 0px;
        right: 10px;
        transform: translate(30px);
    }

    100% {
        right: 10px;
        left: 0px;
        transform: translate(0);
    }
}

@-moz-keyframes circle-shape {
    0% {
        left: 0px;
        right: 0px;
        transform: translate(0);
    }

    50% {
        left: 0px;
        right: 10px;
        transform: translate(30px);
    }

    100% {
        right: 10px;
        left: 0px;
        transform: translate(0);
    }
}

@keyframes circle-shape {
    0% {
        left: 0px;
        right: 0px;
        transform: translate(0);
    }

    50% {
        left: 0px;
        right: 10px;
        transform: translate(30px);
    }

    100% {
        right: 10px;
        left: 0px;
        transform: translate(0);
    }
}

/* Colorful Square */
.s-colorful {
    animation: squarecolorful 1.6s linear infinite;
}

@-webkit-keyframes squarecolorful {
    0% {
        border-top: 10px solid #2196f3;
        border-left: transparent;
        border-bottom: transparent;
        border-right: transparent;
        background: #81d4fa;
        transform: rotate(0deg);
    }

    25% {
        border-top: transparent;
        border-left: transparent;
        border-bottom: transparent;
        border-right: 10px solid #d32f2f;
        background: #80cbc4;
        transform: rotate(90deg);
    }

    50% {
        border-top: transparent;
        border-left: transparent;
        border-bottom: 10px solid #d32f2f;
        border-right: transparent;
        background: #ef9a9a;
        transform: rotate(180deg);
    }

    75% {
        border-top: transparent;
        border-left: 10px solid #fff59d;
        border-bottom: transparent;
        border-right: transparent;
        background: #fbc02d;
        transform: rotate(270deg);
    }

    100% {
        border-top: 10px solid #2196f3;
        border-left: transparent;
        border-bottom: transparent;
        border-right: transparent;
        background: #81d4fa;
        transform: rotate(360deg);
    }
}

@-moz-keyframes squarecolorful {
    0% {
        border-top: 10px solid #2196f3;
        border-left: transparent;
        border-bottom: transparent;
        border-right: transparent;
        background: #81d4fa;
        transform: rotate(0deg);
    }

    25% {
        border-top: transparent;
        border-left: transparent;
        border-bottom: transparent;
        border-right: 10px solid #d32f2f;
        background: #80cbc4;
        transform: rotate(90deg);
    }

    50% {
        border-top: transparent;
        border-left: transparent;
        border-bottom: 10px solid #d32f2f;
        border-right: transparent;
        background: #ef9a9a;
        transform: rotate(180deg);
    }

    75% {
        border-top: transparent;
        border-left: 10px solid #fff59d;
        border-bottom: transparent;
        border-right: transparent;
        background: #fbc02d;
        transform: rotate(270deg);
    }

    100% {
        border-top: 10px solid #2196f3;
        border-left: transparent;
        border-bottom: transparent;
        border-right: transparent;
        background: #81d4fa;
        transform: rotate(360deg);
    }
}

@keyframes squarecolorful {
    0% {
        background: #81d4fa;
        transform: rotate(0deg);
    }

    25% {
        background: #80cbc4;
        transform: rotate(90deg);
    }

    50% {
        background: #ef9a9a;
        transform: rotate(180deg);
    }

    75% {
        background: #fbc02d;
        transform: rotate(270deg);
    }

    100% {
        background: #81d4fa;
        transform: rotate(360deg);
    }
}

/* Bouncy Balls */

.bouncy {
  width: 48px;
  height: 48px;
  background: transparent;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  left: -10px;
}

.bouncy:after, .bouncy:before {
  content: "";
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.bouncy-balls {
  height: 0px;
  width: 0px;
}

.bouncy-balls span {
  display: block;
  height: 20px;
  width: 20px;
  background: transparent;
  border-radius: 50%;
  position: absolute;
  top: 0px;
}

.bouncy-balls span:nth-child(1) {
  left: -40px;
  -webkit-animation: bounce 1s ease-in-out infinite;
          animation: bounce 1s ease-in-out infinite;
          background: #f44336;
}

.bouncy-balls span:nth-child(2) {
  -webkit-animation: bounce 1s ease-in-out 0.33s infinite;
          animation: bounce 1s ease-in-out 0.33s infinite;
          background: #2196f3;
}

.bouncy-balls span:nth-child(3) {
  left: 40px;
  -webkit-animation: bounce 1s ease-in-out 0.66s infinite;
          animation: bounce 1s ease-in-out 0.66s infinite;
          background: #4caf50;
}

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

  25% {
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px);
  }

}

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

  25% {
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px);
  }

}

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

  25% {
    -webkit-transform: translateY(-30px);
     
            transform: translateY(-30px);
  }
}

  /* Fancy Circle */
  .fancy-circle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.fancy-circle span {
    height: 48px;
    width: 48px;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 100%;
    border: 4px solid transparent;
    opacity: 0.5;
    box-sizing: border-box;
}

.fancy-circle span:nth-child(1) {
    border-top-color: red;
    animation: rotation 1s ease-in-out infinite;
}

.fancy-circle span:nth-child(2) {
    border-bottom-color: black;
    animation: rotation 1s ease-in-out infinite;
}

@-webkit-keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }

}

@-moz-keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }

}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Timer */
.timer {
    border-radius:50%;
    border-top:solid 6px #03a9f4;
    border-bottom:solid 6px #03a9f4;
    border-left:solid 6px #03a9f4;
    border-right:solid 6px #03a9f4;
    display:inline-block;
    box-sizing:border-box;
    animation: timer 1.5s linear infinite;
}

.timer:before {
    border-radius:3px;
    content:" ";
    width:6px;
    height:12px;
    display:inline-block;
    box-sizing:border-box;
    background-color:#0fd6ff;
    position:absolute;
    top:5px;
    left:16px;
    transform-origin:center bottom;
    animation:timer-before 1s ease infinite;
}

@-webkit-keyframes timer {
    0%, 100%{
        border-top:solid 6px #03a9f4; /* Light Blue */
        border-bottom:solid 6px #03a9f4;
        border-left:solid 6px #03a9f4;
        border-right:solid 6px #03a9f4;
    }

    25%{
        border-top:solid 6px #8bc34a; /* Light Green*/
        border-bottom:solid 6px #8bc34a;
        border-left:solid 6px #8bc34a;
        border-right:solid 6px #8bc34a;
    }

    50% {
        border-top:solid 6px #ffeb3b; /* Yellow */
        border-bottom:solid 6px #ffeb3b;
        border-left:solid 6px #ffeb3b;
        border-right:solid 6px #ffeb3b;
    }

    75%{
        border-top:solid 6px #f44336; /* Red */
        border-bottom:solid 6px #f44336;
        border-left:solid 6px #f44336;
        border-right:solid 6px #f44336;
    }
}

@-moz-keyframes timer {
    0%, 100%{
        border-top:solid 6px #03a9f4; /* Light Blue */
        border-bottom:solid 6px #03a9f4;
        border-left:solid 6px #03a9f4;
        border-right:solid 6px #03a9f4;
    }

    25%{
        border-top:solid 6px #8bc34a; /* Light Green*/
        border-bottom:solid 6px #8bc34a;
        border-left:solid 6px #8bc34a;
        border-right:solid 6px #8bc34a;
    }

    50% {
        border-top:solid 6px #ffeb3b; /* Yellow */
        border-bottom:solid 6px #ffeb3b;
        border-left:solid 6px #ffeb3b;
        border-right:solid 6px #ffeb3b;
    }

    75%{
        border-top:solid 6px #f44336; /* Red */
        border-bottom:solid 6px #f44336;
        border-left:solid 6px #f44336;
        border-right:solid 6px #f44336;
    }
}

@keyframes timer {
    0%, 100%{
        border-top:solid 6px #03a9f4; /* Light Blue */
        border-bottom:solid 6px #03a9f4;
        border-left:solid 6px #03a9f4;
        border-right:solid 6px #03a9f4;
    }

    25%{
        border-top:solid 6px #8bc34a; /* Light Green*/
        border-bottom:solid 6px #8bc34a;
        border-left:solid 6px #8bc34a;
        border-right:solid 6px #8bc34a;
    }

    50% {
        border-top:solid 6px #ffeb3b; /* Yellow */
        border-bottom:solid 6px #ffeb3b;
        border-left:solid 6px #ffeb3b;
        border-right:solid 6px #ffeb3b;
    }

    75%{
        border-top:solid 6px #f44336; /* Red */
        border-bottom:solid 6px #f44336;
        border-left:solid 6px #f44336;
        border-right:solid 6px #f44336;
    }
}

@-webkit-keyframes timer-before {
    0% {
        transform:rotate(-45deg);
    }

    100% {
        transform:rotate(315deg);
    }
}

@-moz-keyframes timer-before {
    0% {
        transform:rotate(-45deg)
    }
    100% {
        transform:rotate(315deg)
    }
}

@keyframes timer-before {
    0% {
        transform:rotate(-45deg)
    }
    100% {
        transform:rotate(315deg)
    }
}

/* Dotted Circle */
.circle-dot {
    background: #000;
    animation: c-dotted 1s cubic-bezier(.46,.03,.52,.96) infinite;
    border: 4px solid #000;
    border-top-color:rgba(255,255,255,1);
    border-left-color:rgba(255,255,255,0.9);
    border-bottom-color:rgba(255,255,255,0.8);
    border-right-color:rgba(255,255,255,0.7);
    border-style: dotted;
    border-radius: 50%;
}

@-webkit-keyframes c-dotted {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@-moz-keyframes c-dotted {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes c-dotted {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Ring Evolution */
.e-ring {
    border: 4px solid #0052ec;
    border-radius: 50%;
    position: relative;
    animation: e-ring-scale 1s ease-out infinite;
    margin: auto;
    position: relative;
}

@-webkit-keyframes e-ring-scale {
    0% {
       transform: scale(0);
       opacity: 0;
    }

    50% {
       opacity: 1;
    }

    100% {
       transform: scale(1);
       opacity: 0;
       border-color: #ffeb3b;
    }
}

@-moz-keyframes e-ring-scale {
    0% {
       transform: scale(0);
       opacity: 0;

    }

    50% {
       opacity: 1;
    }

    100% {
       transform: scale(1);
       opacity: 0;
       border-color: #ffeb3b;
    }
}

@keyframes e-ring-scale {
    0% {
       transform: scale(0);
       opacity: 0;

    }

    50% {
       opacity: 1;
    }

    100% {
       transform: scale(1);
       opacity: 0;
       border-color: #ffeb3b;
    }
}

/* Sticks */
.sticks {
  width: 10px;
  height: 48px;
  background: #009688;
  position: absolute;
  animation: sticks-anim 1s ease-in-out infinite;
  animation-delay: 0.5s;
  top: 50%;
  margin: auto;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

.sticks:after, .sticks:before {
    content: '';
    position: absolute;
    width: 10px;
    height: 48px;
    background: #009688;
    animation: sticks-anim 1s ease-in-out infinite; 
}

.sticks:before {
    right: 18px;
    animation-delay: 0.3s;
}

.sticks:after {
    left: 18px;
    animation-delay: 0.8s; 
}

@-webkit-keyframes sticks-anim {
  0%, 100% {
    box-shadow: 0 0 0 #009688, 0 0 0 #009688; }
  50% {
    box-shadow: 0 -8px 0 #009688, 0 8px 0 #009688; } }

@-moz-keyframes sticks-anim {
  0%, 100% {
    box-shadow: 0 0 0 #009688, 0 0 0 #009688; }
  50% {
    box-shadow: 0 -8px 0 #009688, 0 8px 0 #009688; } }


@keyframes sticks-anim {
  0%, 100% {
    box-shadow: 0 0 0 #009688, 0 0 0 #009688; }
  50% {
    box-shadow: 0 -8px 0 #009688, 0 8px 0 #009688; } }
    

/* Fill Circle */
.fill-circle {
    border-radius: 50%;
    border: 8px solid #000;
    z-index: 1;
    position: absolute;
    background: transparent;
    animation: fill-circle 4s cubic-bezier(1, 0, 0, 1) infinite;
}

@-webkit-keyframes fill-circle {
    0%, 100% {
        border-color: #FF5722;
    }

    50%{
        border-color: #4CAF50;
    }
}

@-moz-keyframes fill-circle {
    0%, 100% {
        border-color: #FF5722;
    }

    50%{
        border-color: #4CAF50;
    }
}

@keyframes fill-circle {
    0%, 100% {
        border-color: #FF5722;
    }

    50%{
        border-color: #4CAF50;
    }
}

.fill-circle span {
    position: absolute;
    border: 5px solid #000;
    background: #000;
    border-right: transparent;
    border-left: transparent;
    border-bottom: transparent;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 0%;
    animation: inner-circle-fill 4s cubic-bezier(1, 0, 0, 1) infinite;
    z-index: -99999;
    animation-delay: 1ms;
}

@-webkit-keyframes inner-circle-fill {
    0%, 100% {
        height: 0%;
        background: #FF5722;
        border-color: #FF5722;
    }

    50%{
        height: 100%;
        background: #4CAF50;
        border-color: #4CAF50;
    }
}

@-moz-keyframes inner-circle-fill {
    0%, 100% {
        height: 0%;
        background: #FF5722;
        border-color: #FF5722;
    }

    50%{
        height: 100%;
        background: #4CAF50;
        border-color: #4CAF50;
    }
}

@keyframes inner-circle-fill {
    0%, 100% {
        height: 0%;
        background: #FF5722;
        border-color: #FF5722;
    }

    50%{
        height: 100%;
        background: #4CAF50;
        border-color: #4CAF50;
    }
}

/* Flip Board*/
.flip-board {
    background: #FF5722;
    animation: flip-board 1.2s infinite ease-in-out;
}

@-webkit-keyframes flip-board {
    0% {
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
        background: #FF5722;
    }
    50% {
        transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
        background: #FF9800;
    }
    100% {
        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        background: #FF5722;
    }
}

@-moz-keyframes flip-board {
    0% {
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
        background: #FF5722;
    }
    50% {
        transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
        background: #FF9800;
    }
    100% {
        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        background: #FF5722;
    }
}

@keyframes flip-board {
    0% {
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
        background: #FF5722;
    }
    50% {
        transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
        background: #FF9800;
    }
    100% {
        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        background: #FF5722;
    }
}

/* Google Loader */
.google div {
  height: 15px;
  width: 15px;
  position: absolute;
  border-radius: 50%;
  background: #000;
  display: inline-block;
  left: -10px;
  top: 15px;
}

.google div:first-child {
  animation: move 1s ease-in-out infinite alternate;
  background: #4285f4;
  margin-left: 0;
}

.google div:nth-child(2) {
  animation: move 1s ease-in-out -0.25s infinite alternate;
  margin-left: 17px;
  background: #db4437;
}

.google div:nth-child(3) {
  animation: move 1s ease-in-out -0.5s infinite alternate;
  margin-left: 35px;
  background: #f4b400;
}

.google div:nth-child(4) {
  animation: move 1s ease-in-out -0.75s infinite alternate;
  margin-left: 54px;
  background: #0f9d58;
}

@-moz-keyframes move {
  0% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(5px);
  }
}
@-webkit-keyframes move {
  0% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(5px);
  }
}

@keyframes move {
  0% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(5px);
  }
}