/* Preloaders */

/*--------------------------------------------------------------
Preloaders
--------------------------------------------------------------*/
	.preloader {
	    background: none repeat scroll 0 0 #fff;
	    height: 100%;
	    opacity: 1;
	    position: fixed;
	    text-align: center;
	    transition: all 0.5s ease 0s;
	    width: 100%;
	    z-index: 9999;
	}
/*--------------------------------------------------------------
Preloader 1 (Sound Wave)
--------------------------------------------------------------*/
	.loader-wave {
	    height: 40px;
		width: 100px;
	    left: 50%;
	    margin-left: -50px;
	    margin-top: -20px;
	    position: relative;
	    top: 50%;
		font-size:10px;
	}


.loader-wave > div {
  background-color: #428fb5;
  height: 100%;
  width: 6px;
  display: inline-block;
  
  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
}

.loader-wave .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.loader-wave .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.loader-wave .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.loader-wave .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes stretchdelay {
  0%, 40%, 100% { 
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% { 
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}
/*--------------------------------------------------------------
Preloader 2 (Rotating Thin Circle)
--------------------------------------------------------------*/
.loader-thin-circle {
  margin: 60px auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  top: 30%;
  border-top: 0.1em solid rgba(66, 143, 181, 0.2);
  border-right: 0.1em solid rgba(66, 143, 181, 0.2);
  border-bottom: 0.1em solid rgba(66, 143, 181, 0.2);
  border-left: 0.1em solid #428fb5;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
.loader-thin-circle,
.loader-thin-circle:after {
  border-radius: 50%;
  width: 9em;
  height: 9em;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/*--------------------------------------------------------------
Preloader 3 (Rotating Large Circle)
--------------------------------------------------------------*/
.loader-large-circle {
  margin: 60px auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  top: 30%;
  border-top: 1.1em solid rgba(66, 143, 181, 0.2);
  border-right: 1.1em solid rgba(66, 143, 181, 0.2);
  border-bottom: 1.1em solid rgba(66, 143, 181, 0.2);
  border-left: 1.1em solid #428fb5;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
.loader-large-circle,
.loader-large-circle:after {
  border-radius: 50%;
  width: 9em;
  height: 9em;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/*--------------------------------------------------------------
Preloader 4-5 (Normal / Large Clock)
--------------------------------------------------------------*/
.la-timer,
.la-timer > div {
    position: relative;
	top:35%;
	margin: 0 auto;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
.la-timer {
    display: block;
    font-size: 0;
    color: #428fb5;
}
.la-timer > div {
    display: inline-block;
    float: none;
    background-color: currentColor;
    border: 0 solid currentColor;
}
.la-timer {
    width: 32px;
    height: 32px;
}
.la-timer > div {
    width: 32px;
    height: 32px;
    background: transparent;
    border-width: 2px;
    border-radius: 100%;
}
.la-timer > div:before,
.la-timer > div:after {
    position: absolute;
    top: 14px;
    left: 14px;
    display: block;
    width: 2px;
    margin-top: -1px;
    margin-left: -1px;
    content: "";
    background: currentColor;
    border-radius: 2px;
    -webkit-transform-origin: 1px 1px 0;
       -moz-transform-origin: 1px 1px 0;
        -ms-transform-origin: 1px 1px 0;
         -o-transform-origin: 1px 1px 0;
            transform-origin: 1px 1px 0;
    -webkit-animation: timer-loader 1250ms infinite linear;
       -moz-animation: timer-loader 1250ms infinite linear;
         -o-animation: timer-loader 1250ms infinite linear;
            animation: timer-loader 1250ms infinite linear;
    -webkit-animation-delay: -625ms;
       -moz-animation-delay: -625ms;
         -o-animation-delay: -625ms;
            animation-delay: -625ms;
}
.la-timer > div:before {
    height: 12px;
}
.la-timer > div:after {
    height: 8px;
    -webkit-animation-duration: 15s;
       -moz-animation-duration: 15s;
         -o-animation-duration: 15s;
            animation-duration: 15s;
    -webkit-animation-delay: -7.5s;
       -moz-animation-delay: -7.5s;
         -o-animation-delay: -7.5s;
            animation-delay: -7.5s;
}
.la-timer.la-sm {
    width: 16px;
    height: 16px;
}
.la-timer.la-sm > div {
    width: 16px;
    height: 16px;
    border-width: 1px;
}
.la-timer.la-sm > div:before,
.la-timer.la-sm > div:after {
    top: 7px;
    left: 7px;
    width: 1px;
    margin-top: -.5px;
    margin-left: -.5px;
    border-radius: 1px;
    -webkit-transform-origin: .5px .5px 0;
       -moz-transform-origin: .5px .5px 0;
        -ms-transform-origin: .5px .5px 0;
         -o-transform-origin: .5px .5px 0;
            transform-origin: .5px .5px 0;
}
.la-timer.la-sm > div:before {
    height: 6px;
}
.la-timer.la-sm > div:after {
    height: 4px;
}
.la-timer.la-2x {
    width: 64px;
    height: 64px;
}
.la-timer.la-2x > div {
    width: 64px;
    height: 64px;
    border-width: 4px;
}
.la-timer.la-2x > div:before,
.la-timer.la-2x > div:after {
    top: 28px;
    left: 28px;
    width: 4px;
    margin-top: -2px;
    margin-left: -2px;
    border-radius: 4px;
    -webkit-transform-origin: 2px 2px 0;
       -moz-transform-origin: 2px 2px 0;
        -ms-transform-origin: 2px 2px 0;
         -o-transform-origin: 2px 2px 0;
            transform-origin: 2px 2px 0;
}
.la-timer.la-2x > div:before {
    height: 24px;
}
.la-timer.la-2x > div:after {
    height: 16px;
}
.la-timer.la-3x {
    width: 96px;
    height: 96px;
}
.la-timer.la-3x > div {
    width: 96px;
    height: 96px;
    border-width: 6px;
}
.la-timer.la-3x > div:before,
.la-timer.la-3x > div:after {
    top: 42px;
    left: 42px;
    width: 6px;
    margin-top: -3px;
    margin-left: -3px;
    border-radius: 6px;
    -webkit-transform-origin: 3px 3px 0;
       -moz-transform-origin: 3px 3px 0;
        -ms-transform-origin: 3px 3px 0;
         -o-transform-origin: 3px 3px 0;
            transform-origin: 3px 3px 0;
}
.la-timer.la-3x > div:before {
    height: 36px;
}
.la-timer.la-3x > div:after {
    height: 24px;
}
/*
 * Animation
 */
@-webkit-keyframes timer-loader {
    0% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}
@-moz-keyframes timer-loader {
    0% {
        -moz-transform: rotate(0deg);
             transform: rotate(0deg);
    }
    100% {
        -moz-transform: rotate(360deg);
             transform: rotate(360deg);
    }
}
@-o-keyframes timer-loader {
    0% {
        -o-transform: rotate(0deg);
           transform: rotate(0deg);
    }
    100% {
        -o-transform: rotate(360deg);
           transform: rotate(360deg);
    }
}
@keyframes timer-loader {
    0% {
        -webkit-transform: rotate(0deg);
           -moz-transform: rotate(0deg);
             -o-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
           -moz-transform: rotate(360deg);
             -o-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}
/*--------------------------------------------------------------
Preloader 6-7 (Normal / Large Square Loader)
--------------------------------------------------------------*/
.la-square-loader,
.la-square-loader > div {
    position: relative;
	top:35%;
	margin: 0 auto;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
.la-square-loader {
    display: block;
    font-size: 0;
    color: #428fb5;
}
.la-square-loader > div {
    display: inline-block;
    float: none;
    background-color: currentColor;
    border: 0 solid currentColor;
}
.la-square-loader {
    width: 32px;
    height: 32px;
}
.la-square-loader > div {
    width: 100%;
    height: 100%;
    background: transparent;
    border-width: 2px;
    border-radius: 0;
    -webkit-animation: square-loader 2s infinite ease;
       -moz-animation: square-loader 2s infinite ease;
         -o-animation: square-loader 2s infinite ease;
            animation: square-loader 2s infinite ease;
}
.la-square-loader > div:after {
    display: inline-block;
    width: 100%;
    vertical-align: top;
    content: "";
    background-color: currentColor;
    -webkit-animation: square-loader-inner 2s infinite ease-in;
       -moz-animation: square-loader-inner 2s infinite ease-in;
         -o-animation: square-loader-inner 2s infinite ease-in;
            animation: square-loader-inner 2s infinite ease-in;
}
.la-square-loader.la-sm {
    width: 16px;
    height: 16px;
}
.la-square-loader.la-sm > div {
    border-width: 1px;
}
.la-square-loader.la-2x {
    width: 64px;
    height: 64px;
}
.la-square-loader.la-2x > div {
    border-width: 4px;
}
.la-square-loader.la-3x {
    width: 96px;
    height: 96px;
}
.la-square-loader.la-3x > div {
    border-width: 6px;
}
/*
 * Animations
 */
@-webkit-keyframes square-loader {
    0% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    25% {
        -webkit-transform: rotate(180deg);
                transform: rotate(180deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
                transform: rotate(180deg);
    }
    75% {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}
@-moz-keyframes square-loader {
    0% {
        -moz-transform: rotate(0deg);
             transform: rotate(0deg);
    }
    25% {
        -moz-transform: rotate(180deg);
             transform: rotate(180deg);
    }
    50% {
        -moz-transform: rotate(180deg);
             transform: rotate(180deg);
    }
    75% {
        -moz-transform: rotate(360deg);
             transform: rotate(360deg);
    }
    100% {
        -moz-transform: rotate(360deg);
             transform: rotate(360deg);
    }
}
@-o-keyframes square-loader {
    0% {
        -o-transform: rotate(0deg);
           transform: rotate(0deg);
    }
    25% {
        -o-transform: rotate(180deg);
           transform: rotate(180deg);
    }
    50% {
        -o-transform: rotate(180deg);
           transform: rotate(180deg);
    }
    75% {
        -o-transform: rotate(360deg);
           transform: rotate(360deg);
    }
    100% {
        -o-transform: rotate(360deg);
           transform: rotate(360deg);
    }
}
@keyframes square-loader {
    0% {
        -webkit-transform: rotate(0deg);
           -moz-transform: rotate(0deg);
             -o-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    25% {
        -webkit-transform: rotate(180deg);
           -moz-transform: rotate(180deg);
             -o-transform: rotate(180deg);
                transform: rotate(180deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
           -moz-transform: rotate(180deg);
             -o-transform: rotate(180deg);
                transform: rotate(180deg);
    }
    75% {
        -webkit-transform: rotate(360deg);
           -moz-transform: rotate(360deg);
             -o-transform: rotate(360deg);
                transform: rotate(360deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
           -moz-transform: rotate(360deg);
             -o-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}
@-webkit-keyframes square-loader-inner {
    0% {
        height: 0;
    }
    25% {
        height: 0;
    }
    50% {
        height: 100%;
    }
    75% {
        height: 100%;
    }
    100% {
        height: 0;
    }
}
@-moz-keyframes square-loader-inner {
    0% {
        height: 0;
    }
    25% {
        height: 0;
    }
    50% {
        height: 100%;
    }
    75% {
        height: 100%;
    }
    100% {
        height: 0;
    }
}
@-o-keyframes square-loader-inner {
    0% {
        height: 0;
    }
    25% {
        height: 0;
    }
    50% {
        height: 100%;
    }
    75% {
        height: 100%;
    }
    100% {
        height: 0;
    }
}
@keyframes square-loader-inner {
    0% {
        height: 0;
    }
    25% {
        height: 0;
    }
    50% {
        height: 100%;
    }
    75% {
        height: 100%;
    }
    100% {
        height: 0;
    }
}
/*--------------------------------------------------------------
Preloader 8-9 (Normal / Large Square Spin)
--------------------------------------------------------------*/
.la-square-spin,
.la-square-spin > div {
    position: relative;
	top:35%;
	margin: 0 auto;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
.la-square-spin {
    display: block;
    font-size: 0;
    color: #428fb5;
}
.la-square-spin > div {
    display: inline-block;
    float: none;
    background-color: currentColor;
    border: 0 solid currentColor;
}
.la-square-spin {
    width: 32px;
    height: 32px;
}
.la-square-spin > div {
    width: 100%;
    height: 100%;
    border-radius: 0;
    -webkit-animation: square-spin 3s 0s cubic-bezier(.09, .57, .49, .9) infinite;
       -moz-animation: square-spin 3s 0s cubic-bezier(.09, .57, .49, .9) infinite;
         -o-animation: square-spin 3s 0s cubic-bezier(.09, .57, .49, .9) infinite;
            animation: square-spin 3s 0s cubic-bezier(.09, .57, .49, .9) infinite;
}
.la-square-spin.la-sm {
    width: 16px;
    height: 16px;
}
.la-square-spin.la-2x {
    width: 64px;
    height: 64px;
}
.la-square-spin.la-3x {
    width: 96px;
    height: 96px;
}
/*
 * Animation
 */
@-webkit-keyframes square-spin {
    0% {
        -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
                transform: perspective(100px) rotateX(0) rotateY(0);
    }
    25% {
        -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
                transform: perspective(100px) rotateX(180deg) rotateY(0);
    }
    50% {
        -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
                transform: perspective(100px) rotateX(180deg) rotateY(180deg);
    }
    75% {
        -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
                transform: perspective(100px) rotateX(0) rotateY(180deg);
    }
    100% {
        -webkit-transform: perspective(100px) rotateX(0) rotateY(360deg);
                transform: perspective(100px) rotateX(0) rotateY(360deg);
    }
}
@-moz-keyframes square-spin {
    0% {
        -moz-transform: perspective(100px) rotateX(0) rotateY(0);
             transform: perspective(100px) rotateX(0) rotateY(0);
    }
    25% {
        -moz-transform: perspective(100px) rotateX(180deg) rotateY(0);
             transform: perspective(100px) rotateX(180deg) rotateY(0);
    }
    50% {
        -moz-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
             transform: perspective(100px) rotateX(180deg) rotateY(180deg);
    }
    75% {
        -moz-transform: perspective(100px) rotateX(0) rotateY(180deg);
             transform: perspective(100px) rotateX(0) rotateY(180deg);
    }
    100% {
        -moz-transform: perspective(100px) rotateX(0) rotateY(360deg);
             transform: perspective(100px) rotateX(0) rotateY(360deg);
    }
}
@-o-keyframes square-spin {
    0% {
        transform: perspective(100px) rotateX(0) rotateY(0);
    }
    25% {
        transform: perspective(100px) rotateX(180deg) rotateY(0);
    }
    50% {
        transform: perspective(100px) rotateX(180deg) rotateY(180deg);
    }
    75% {
        transform: perspective(100px) rotateX(0) rotateY(180deg);
    }
    100% {
        transform: perspective(100px) rotateX(0) rotateY(360deg);
    }
}
@keyframes square-spin {
    0% {
        -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
           -moz-transform: perspective(100px) rotateX(0) rotateY(0);
                transform: perspective(100px) rotateX(0) rotateY(0);
    }
    25% {
        -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
           -moz-transform: perspective(100px) rotateX(180deg) rotateY(0);
                transform: perspective(100px) rotateX(180deg) rotateY(0);
    }
    50% {
        -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
           -moz-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
                transform: perspective(100px) rotateX(180deg) rotateY(180deg);
    }
    75% {
        -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
           -moz-transform: perspective(100px) rotateX(0) rotateY(180deg);
                transform: perspective(100px) rotateX(0) rotateY(180deg);
    }
    100% {
        -webkit-transform: perspective(100px) rotateX(0) rotateY(360deg);
           -moz-transform: perspective(100px) rotateX(0) rotateY(360deg);
                transform: perspective(100px) rotateX(0) rotateY(360deg);
    }
}
/*--------------------------------------------------------------
Preloader 10 (Colorful Expanding Circle)
--------------------------------------------------------------*/
.loading {
    background: rgba(0, 50, 250, 0);
    position: relative;
    margin: 5em auto 0 auto;
	top:30%;
    width: 3em; height: 3em;
    -webkit-animation-name: rotate;
       -moz-animation-name: rotate;
        -ms-animation-name: rotate;
            animation-name: rotate;
}

.loading,
.loading:before,
.loading:after {
    border-radius: 100%;
    -webkit-animation-duration: 3s;
       -moz-animation-duration: 3s;
        -ms-animation-duration: 3s;
            animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
       -moz-animation-iteration-count: infinite;
        -ms-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in;
       -moz-animation-timing-function: ease-in;
        -ms-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
}


.loading:before,
.loading:after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: inherit; height: inherit;
}

.loading:before {
    background: rgba(200, 250, 100, 0);
    -webkit-animation-name: ring;
       -moz-animation-name: ring;
        -ms-animation-name: ring;
            animation-name: ring;
}

.loading:after {
    background: rgba(250, 0, 200, 0);
    -webkit-animation-name: ring2;
       -moz-animation-name: ring2;
        -ms-animation-name: ring2;
            animation-name: ring2;
}

@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotateZ(0deg) scaleX(0.1) scaleY(0.1) translateZ(0);
        box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
    }
    85%, 100% {  
        -webkit-transform: rotateZ(3600deg) scaleX(2.01) scaleY(2) translateZ(0);
        box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
    }
}

@-moz-keyframes rotate {
    0% {
        -moz-transform: rotateZ(0deg) scaleX(0.1) scaleY(0.1) translateZ(0);
        box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
    }
    85%, 100% {  
        -moz-transform: rotateZ(3600deg) scaleX(2.01) scaleY(2) translateZ(0);
        box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
    }
}

@-ms-keyframes rotate {
    0% {
        -ms-transform: rotateZ(0deg) scaleX(0.1) scaleY(0.1) translateZ(0);
        box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
    }
    85%, 100% {  
        -ms-transform: rotateZ(3600deg) scaleX(2.01) scaleY(2) translateZ(0);
        box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
    }
}

@keyframes rotate {
    0% {
        transform: rotateZ(0deg) scaleX(0.1) scaleY(0.1) translateZ(0);
        box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
    }
    85%, 100% {  
        transform: rotateZ(3600deg) scaleX(2.01) scaleY(2) translateZ(0);
        box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
    }
}

@-webkit-keyframes ring {
    0% {
        -webkit-transform: scaleX(0.1) scaleY(0.5);
        box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
    }
    75%, 100% {
        -webkit-transform: scaleX(2) scaleY(2.1);
        box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
    }
}

@-moz-keyframes ring {
    0% {
        -moz-transform: scaleX(0.1) scaleY(0.5);
        box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
    }
    75%, 100% {
        -moz-transform: scaleX(2) scaleY(2.1);
        box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
    }
}

@-ms-keyframes ring {
    0% {
        -ms-transform: scaleX(0.1) scaleY(0.5);
        box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
    }
    75%, 100% {

        -ms-transform: scalex(2) scaleY(2.1);
        box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
    }
}

@keyframes ring {
    0% {
        transform: scaleX(0.1) scaleY(0.5);
        box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
    }
    75%, 100% {
        transform: scaleX(2) scaleY(2.1);
        box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
    }
}

@-webkit-keyframes ring2 {
    0% {
        -webkit-transform: scaleX(0.5) scaleY(0.1);
        box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
    }
    65%, 100% {
        -webkit-transform: scaleX(2) scaleY(2.1);
        box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
    }
}

@-moz-keyframes ring2 {
    0% {
        -moz-transform: scaleX(0.5) scaleY(0.1);
        box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
    }
    65%, 100% {
        -moz-transform: scaleX(2) scaleY(2.1);
        box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
    }
}

@-ms-keyframes ring2 {
    0% {
        -ms-transform: scaleX(0.5) scaleY(0.1);
        box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
    }
    65%, 100% {
        -ms-transform: scaleX(2) scaleY(2.1);
        box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
    }
}

@keyframes ring2 {
    0% {
        transform: scaleX(0.5) scaleY(0.1);
        box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), inset 0 0.8em 0 rgba(252, 150, 0, 0.5), inset -0.8em 0 0 rgba(0, 255, 0, 0.5), inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
    }
    65%, 100% {
        transform: scaleX(2) scaleY(2.1);
        box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), inset 0 0 0 rgba(252, 150, 0, 0), inset 0 0 0 rgba(0, 255, 0, 0), inset 0 0 0 rgba(0, 150, 255, 0);
    }
}
/*--------------------------------------------------------------
Preloader 11-12-13 (Colorful Top Bar - Orbit Loader - Gmail Loader)
--------------------------------------------------------------*/
.go-red { background-color: #D50F25 }
.go-yellow { background-color: #EEB211 }
.go-green { background-color: #009925 } /* or 009939? */
.go-blue { background-color: #3369E8 }


.go-wrap {
  margin: 0 auto;
  line-height: 6rem;
  text-align: center;
}

.go-loader {
  position: absolute;
  margin: 0 auto 3rem auto;
  overflow: hidden;
}

.go-loader > div { 
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 100%;
}


/* BAR */
.go-bar {
  width: 100%;
  height: .5rem;
  top: 0; left: 0;
}

.go-go .go-loader.go-bar > div{
  animation: go-loading-bar 2s infinite backwards ease-out;
}

.go-bar > div {
  transform: scaleX(1);
}

.go-loader.go-bar div:nth-child(1) {
  animation-delay: -1.5s;
}
.go-loader.go-bar div:nth-child(2) {
  animation-delay: -1s;
}
.go-loader.go-bar div:nth-child(3) {
  animation-delay: -.5s;
}
.go-loader.go-bar div:nth-child(4) {
  animation-delay: 0s;
}

@keyframes go-loading-bar {
  0% { 
    transform: scaleX(0);
    z-index: 15;
  }
  22% { 
    transform: scaleX(0);
    z-index: 15;
  }
  50% { 
    transform: scaleX(1);
  }
  90% { 
    transform: scaleX(1);
    z-index: 1;
  }
  100% {
    transform: scaleX(1);
    z-index: 0;
  }
}



/* CIRCLE */
.go-circle {
  height: 6rem;
  width: 6rem;
  border-radius: 50%;
  transform: scale(1);
  top: 0; left: 0; bottom: 0; right: 0;
  margin: auto
}

.go-circle > div {
  height: 100%; width: 100%;
  border-radius: 50%;
}

.go-go .go-loader.go-circle > div { 
  animation: go-loading-circle 2s infinite backwards ease-out;
}

.go-loader.go-circle div:nth-child(1) {
  animation-delay: -1.5s;
  transform: translateX(-500%);
}
.go-loader.go-circle div:nth-child(2) {
  animation-delay: -1s;
  transform: translateY(500%);
}
.go-loader.go-circle div:nth-child(3) {
  animation-delay: -.5s;
  transform: translateX(500%);
}
.go-loader.go-circle div:nth-child(4) {
  animation-delay: 0s;
  transform: translateY(-500%);
}

@keyframes go-loading-circle {
   0% { 
    z-index: 10;
  }
  75% {
    transform: translateX(0);
    z-index: 1;
  }
  
  100% {
    transform: translateX(0);
    z-index: 0;
  }
}

/* ORBIT */

.go-orbit {
  height: 20rem;
  width: 20rem;
  top: 0; left: 0; bottom: 0; right: 0;
  margin: auto;
  overflow: visible;
  background: transparent;
  border-radius: 50%;
}

.go-orbit > div {
  top: 2.5rem; left: 2.5rem;
  font-size: 1rem;
  height: 15rem;
  width: 15rem;
  transform-origin: center center;
}

.go-orbit > div::before {
  position: absolute;
  left: calc(50% - .5em);
  display: block;
  content: '';
  height: 1em;
  width: 1em;
  border-radius: 50%;
  transform: scale(1);
}

.go-orbit > div:nth-child(1)::before {
  background-color: #3369E8; 
}
.go-orbit > div:nth-child(2)::before {
  background-color: #D50F25;
}
.go-orbit > div:nth-child(3)::before {
  background-color: #009925; 
}
.go-orbit > div:nth-child(4)::before { 
  background-color: #EEB211; 
}

.go-go .go-loader.go-orbit > div { 
  animation: go-loading-orbit 6s infinite linear;
}

.go-go .go-loader.go-orbit > div::before { 
  animation: go-loading-orbit-before 2s infinite ease-in-out;
}

.go-loader.go-orbit > div:nth-child(1) {
  animation-delay: 0s;
}
.go-loader.go-orbit > div:nth-child(2) {
  animation-delay: -.75s;
}
.go-loader.go-orbit > div:nth-child(3) {
  animation-delay: -1.5s;
}
.go-loader.go-orbit > div:nth-child(4) {
  animation-delay: -2.25s;
}

.go-loader.go-orbit > div:nth-child(1)::before {
  animation-delay: 0s;
}
.go-loader.go-orbit > div:nth-child(2)::before {
  animation-delay: -.5s;
}
.go-loader.go-orbit > div:nth-child(3)::before {
  animation-delay: -1s;
}
.go-loader.go-orbit > div:nth-child(4)::before {
  animation-delay: -1.5s;
}

@keyframes go-loading-orbit {
   0% { 
    transform: rotate(0deg);
  }
  100% {
     transform: rotate(360deg);
  }
}

@keyframes go-loading-orbit-before {
   0% { 
    height: 1em; width: 1em;
    transform: translate3d(0,0,0);
    z-index: 5;
  }
  5%{
    height: 1.25em; width: 1.25em;
  }
  25% {
    height: 2em; width: 2em;
    z-index: 10;
  }
  50% {
    transform: translate3d(1rem,15rem,0);
    z-index: 0;
    height: 1em; width: 1em;
  }
  100% {
    transform: translate3d(0,0,0);
    z-index: 0;
    height: 1em; width: 1em;
  }
}
/*--------------------------------------------------------------
Preloader 14 (Android Style Loader)
--------------------------------------------------------------*/
.android-loader { 
  position: absolute;
  margin: auto;
  top: 0; bottom: 0; left: 0; right: 0;
  width: 6.250em; height: 6.250em;
  animation: rotate2 2.4s linear infinite;
}
.android-white { 
  top: 0; bottom: 0; left: 0; right: 0; 
  background: white; 
  animation: flash 2.4s linear infinite;
  opacity: 0;
}
.android-dot {
  position: absolute;
  margin: auto;
  width: 2.4em; height: 2.4em;
  border-radius: 100%;
  transition: all 1s ease;
}
.android-dot:nth-child(2) { top: 0; bottom: 0; left: 0; background: #FF4444; animation: dotsY 2.4s linear infinite; }
.android-dot:nth-child(3) { left: 0; right: 0; top: 0; background: #FFBB33; animation: dotsX 2.4s linear infinite; }
.android-dot:nth-child(4) { top: 0; bottom: 0; right: 0; background: #99CC00; animation: dotsY 2.4s linear infinite; }
.android-dot:nth-child(5) { left: 0; right: 0; bottom: 0; background: #33B5E5; animation: dotsX 2.4s linear infinite; }

@keyframes rotate2 {
  0% { transform: rotate2( 0 ); }
  10% { width: 6.250em; height: 6.250em; }
  66% { width: 2.4em; height: 2.4em; }
  100%{ transform: rotate(360deg); width: 6.250em; height: 6.250em; }
}

@keyframes dotsY {
  66% { opacity: .1; width: 2.4em; }
  77%{ opacity: 1; width: 0; }
}
@keyframes dotsX {
  66% { opacity: .1; height: 2.4em;}
  77%{ opacity: 1; height: 0; }
}

@keyframes flash {
  33% { opacity: 0; border-radius: 0%; }
  55%{ opacity: .6; border-radius: 100%; }
  66%{ opacity: 0; }
}
/*--------------------------------------------------------------
Preloader 15 (Colorful circle loader)
--------------------------------------------------------------*/
.colorful-circle-loader{
  margin:auto;
  position:absolute;
  top:0px;
  bottom:0px;
  left:0px;
  right:0px;
  width:80px;
  height:80px;
  -moz-animation:spin 2s linear 0s infinite;
  border-radius:100%;
  -webkit-animation:spin 2s linear 0s infinite;
  animation:spin 2s linear 0s infinite;
  box-shadow:0px 2px 1px #0000FF,
    0px -2px 1px #FFE000,
    -2px 0px 1px #00FF00,
    2px 0px 1px #FF0000;
}
@keyframes spin{
	from{
	  -moz-transform:rotate(0deg);
    -webkit-transform:rotate(0deg);
    transform:rotate(0deg);
  }
  to{
    -moz-transform:rotate(360deg);
    -webkit-transform:rotate(360deg);
    transform:rotate(360deg);
  }
}@-webkit-keyframes spin{
	from{
	  -moz-transform:rotate(0deg);
    -webkit-transform:rotate(0deg);
    transform:rotate(0deg);
  }
  to{
    -moz-transform:rotate(360deg);
    -webkit-transform:rotate(360deg);
    transform:rotate(360deg);
  }
}
/*--------------------------------------------------------------
Preloader 16 (Colorful Expand Contract)
--------------------------------------------------------------*/
.cec-square 
{
  width: 6px;
  height: 23px;
  border-radius: 9px;
  background: rgba(0, 255, 255, 1);
  display: block;  
  margin: 13px;  
  animation: moveAround 2.1s ease infinite;
}


.cec-original 
{
  position: absolute;
  top: 50%;
  left: 50%;
}

.cec-reverse 
{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: rotate(180deg);
}


.cec-reverse .cec-square
{
  background: rgba(30, 255, 110, 1);
}


.cec-top 
{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: rotate(-90deg);  
}

.cec-top .cec-square
{
  background: rgba(255, 0, 0, 1);
}

.cec-bottom 
{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: rotate(90deg);
}

.cec-bottom .cec-square
{
  background: rgba(255, 255, 0, 1);
}

@keyframes moveAround 
{
  0% { transform: translateX(0); }  
  35% { transform: translateX(400%) translateY(0%) rotate(0deg); }
  50% { transform: translateX(500%) translateY(50%) rotate(45deg); }
  85% { transform: translateX(30%) translateY(-50%) rotate(45deg); }
  100% { transform: translateX(0%) translateY(0%) rotate(0deg); }
}
/*--------------------------------------------------------------
Preloader 17 (Atomic Loader)
--------------------------------------------------------------*/
.science {
  position: absolute;
  width: 120px; height: 120px;
  top: 50%; left: 50%;
  margin: -60px 0 0 -60px;
  transform: rotate(45deg);
}
.isthis {
  width: 100%; height: 100%;
  transform: rotate(-45deg);
}
  .thisisscienceiguess,
  .andthisistoo,
  .thisistooofcourse {
    position: absolute;
    display: block;
    width: 100%; height: 100%;
    top: 0; left: 0;
    border-width: 4px;
    border-style: solid;
    border-radius: 100%;
    opacity: .9;
  }
  .thisisscienceiguess {
    border-color: #707c7d;
    animation: center 2s ease-in-out infinite;
  }
  .andthisistoo {
    border-color: #dd6822;
    animation: top 2s ease-in-out infinite;
  }
  .thisistooofcourse {
    border-color: #3bbfd6;
    animation: bottom 2s ease-in-out infinite;
  }

@keyframes center {
  0%   {transform: rotateY(0deg)}
  50%  {transform: rotateY(90deg)}
  100% {transform: rotateY(360deg)}
}
@keyframes top {
  0%   {transform: rotateY(0deg) rotateX(0deg)}
  50%  {transform: rotateY(90deg) rotateX(45deg)}
  100% {transform: rotateY(360deg) rotateX(0deg)}
}
@keyframes bottom {
  0%   {transform: rotateY(0deg) rotateX(0deg)}
  50%  {transform: rotateY(90deg) rotateX(-45deg)}
  100% {transform: rotateY(360deg) rotateX(0deg)}
}
/*--------------------------------------------------------------
Preloader 18 (Hourglass)
--------------------------------------------------------------*/
#hourglass {
  animation: hourglass 5s cubic-bezier(.8,0,.2,1) infinite;
  height: 40px;
  width: 41px;
  position: absolute;
  top:calc(50% - 20px);
  left:calc(50% - 20px);
}
@keyframes hourglass {
  90% { transform: rotate(0deg); }
  100% { transform: rotate(180deg); }
}
#hourglass-top {
  animation: hourglass-top 5s linear infinite;
  border-top: 20px solid #428fb5;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
  height: 0px;
  width: 1px;
  transform-origin: 50% 100%;
}
@keyframes hourglass-top {
  90% { transform: scale(0); }
  100% { transform: scale(0);}
}
#hourglass-bottom {
  animation: hourglass-bottom 5s linear infinite;
  border-right: 20px solid transparent;
  border-bottom: 20px solid #428fb5;
  border-left: 20px solid transparent;
  height: 0px;
  width: 1px;
  transform: scale(0);
  transform-origin: 50% 100%;
}
@keyframes hourglass-bottom {
  10% { transform: scale(0); }
  90% { transform: scale(1); }
  100% { transform: scale(1); }
}
#hourglass-line {
  animation: hourglass-line 5s linear infinite;
  border-left: 1px dotted #428fb5;
  height: 0px;
  width: 0px;
  position: absolute;
  top: 20px;
  left: 20px;
}
@keyframes hourglass-line {
  10% { height: 20px; }
  100% { height: 20px; }
}