/* ---------------------------------------------------------------------------------------------------- */
/* Stylesheet: Loaders */
/* © 2020/06 VANHORICK Nicolas (Digicious) */
/* Source: http://tobiasahlin.com/spinkit/ */
/* Colors HEX: #336996			/	#BA50A5			*/
/* Colors RGB: (51, 105, 150)	/	(186, 80, 165)	*/
/* ---------------------------------------------------------------------------------------------------- */


/* -------------------------------------------------- */
/* --- ALL LOADERS ---*/
/* -------------------------------------------------- */
/*
	-- HTML --
	<div class="loader square-rotate"></div>
	<div class="loader circle-double-bounce"><div class="double-bounce-1"></div><div class="double-bounce-2"></div></div>
	<div class="loader lines-stretch"><div class="line-1"></div><div class="line-2"></div><div class="line-3"></div><div class="line-4"></div><div class="line-5"></div></div>
	<div class="loader cubes-move"><div class="cube-1"></div><div class="cube-2"></div></div>
	<div class="loader circle-scale"></div>
	<div class="loader circles-scale-rotate"><div class="circle-1"></div><div class="circle-2"></div></div>
	<div class="loader circles-bounce"><div class="circle-1"></div><div class="circle-2"></div><div class="circle-3"></div></div>
	<div class="loader circle-dots-scale"><div class="dot dot-1"></div><div class="dot dot-2"></div><div class="dot dot-3"></div><div class="dot dot-4"></div><div class="dot dot-5"></div><div class="dot dot-6"></div><div class="dot dot-7"></div><div class="dot dot-8"></div><div class="dot dot-9"></div><div class="dot dot-10"></div><div class="dot dot-11"></div><div class="dot dot-12"></div></div>
	<div class="loader cube-squares-scale"><div class="square square-1"></div><div class="square square-2"></div><div class="square square-3"></div><div class="square square-4"></div><div class="square square-5"></div><div class="square square-6"></div><div class="square square-7"></div><div class="square square-8"></div><div class="square square-9"></div></div>
	<div class="loader circle-dots-fade"><div class="dot dot-1"></div><div class="dot dot-2"></div><div class="dot dot-3"></div><div class="dot dot-4"></div><div class="dot dot-5"></div><div class="dot dot-6"></div><div class="dot dot-7"></div><div class="dot dot-8"></div><div class="dot dot-9"></div><div class="dot dot-10"></div><div class="dot dot-11"></div><div class="dot dot-12"></div></div>
	<div class="loader cube-squares-fold"><div class="square square-1"></div><div class="square square-2"></div><div class="square square-4"></div><div class="square square-3"></div></div>
*/


/* -------------------------------------------------- */
/* --- LOADER OVERLAY ---*/
/* -------------------------------------------------- */
.loader-overlay {
	position:fixed;
	top:0px;
	left:0px;
	height:100%;
	width:100%;
	background:#336996;
	z-index:999999;
	opacity:1;
	text-align:center;
}
.loader-overlay .loader-wrapper {
	position:absolute;
	top:50%;
	left:50%;
	width:440px;
	height:220px;
	margin:-110px 0px 0px -220px;
}
.loader-overlay .loader-wrapper .loader-logo {
	display:block;
	width:50%;
	max-width:64px;
	max-height:64px;
	margin:0px auto 32px auto;
}
.loader-overlay .loader-wrapper .loader-text {
	margin:40px 0px;
	color:#FFFFFF;
	text-align:center;
}
.loader-overlay .loader-wrapper .loader-text a, .loader-overlay .loader-wrapper .loader-text a:active {
	color:#FFFFFF;
	text-decoration:none;
}
.loader-overlay .loader-wrapper .loader-text a:hover { text-decoration:underline; }
.loader-overlay .loader {
	display:inline-block;
	width:40px;
	height:40px;
	margin:0px 0px 0px 0px;
}




/* -------------------------------------------------- */
/* --- LOADER: SQUARE-ROTATE ---*/
/* -------------------------------------------------- */
/*
	-- HTML --
	<div class="loader square-rotate"></div>
*/
.loader.square-rotate {
	background-color: #FFFFFF;
	-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
	animation: sk-rotateplane 1.2s infinite ease-in-out;
}
@-webkit-keyframes sk-rotateplane {
	0% { -webkit-transform: perspective(120px) }
	50% { -webkit-transform: perspective(120px) rotateY(180deg) }
	100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}
@keyframes sk-rotateplane {
	0% { 
		transform: perspective(120px) rotateX(0deg) rotateY(0deg);
		-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
	} 50% { 
		transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
		-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
	} 100% { 
		transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
		-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
	}
}


/* -------------------------------------------------- */
/* --- LOADER: CIRCLE-DOUBLE-BOUNCE ---*/
/* -------------------------------------------------- */
/*
	-- HTML --
	<div class="loader circle-double-bounce"><div class="double-bounce-1"></div><div class="double-bounce-2"></div></div>
*/
.loader.circle-double-bounce {
	position: relative;
}
.loader.circle-double-bounce .double-bounce-1, .loader.circle-double-bounce .double-bounce-2 {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-color: #FFFFFF;
	opacity: 0.6;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-animation: sk-doublebounce 2.0s infinite ease-in-out;
	animation: sk-doublebounce 2.0s infinite ease-in-out;
}
.loader.circle-double-bounce .double-bounce-2 {
	-webkit-animation-delay: -1.0s;
	animation-delay: -1.0s;
}
@-webkit-keyframes sk-doublebounce {
	0%, 100% { -webkit-transform: scale(0.0) }
	50% { -webkit-transform: scale(1.0) }
}
@keyframes sk-doublebounce {
	0%, 100% { 
		transform: scale(0.0);
		-webkit-transform: scale(0.0);
	} 50% { 
		transform: scale(1.0);
		-webkit-transform: scale(1.0);
	}
}


/* -------------------------------------------------- */
/* --- LOADER: LINES-STRETCH ---*/
/* -------------------------------------------------- */
/*
	-- HTML --
	<div class="loader lines-stretch"><div class="line-1"></div><div class="line-2"></div><div class="line-3"></div><div class="line-4"></div><div class="line-5"></div></div>
*/
.loader.lines-stretch {
	text-align: center;
	font-size: 10px;
}
.loader.lines-stretch > div {
	background-color: #FFFFFF;
	height: 100%;
	width: 5px;
	display: inline-block;
	margin: 0px 1px;
	-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
	animation: sk-stretchdelay 1.2s infinite ease-in-out;
}
.loader.lines-stretch .line-2 {
	-webkit-animation-delay: -1.1s;
	animation-delay: -1.1s;
}
.loader.lines-stretch .line-3 {
	-webkit-animation-delay: -1.0s;
	animation-delay: -1.0s;
}
.loader.lines-stretch .line-4 {
	-webkit-animation-delay: -0.9s;
	animation-delay: -0.9s;
}
.loader.lines-stretch .line-5 {
	-webkit-animation-delay: -0.8s;
	animation-delay: -0.8s;
}
@-webkit-keyframes sk-stretchdelay {
	0%, 40%, 100% {
		background-color: #FFFFFF;
		-webkit-transform: scaleY(0.33);
	}  
	20% {
		background-color: #BA50A5;
		-webkit-transform: scaleY(1.0);
	}
}
@keyframes sk-stretchdelay {
	0%, 40%, 100% {
		background-color: #FFFFFF;
		transform: scaleY(0.4);
		-webkit-transform: scaleY(0.33);
	} 20% {
		background-color: #BA50A5;
		transform: scaleY(1.0);
		-webkit-transform: scaleY(1.0);
	}
}


/* -------------------------------------------------- */
/* --- LOADER: CUBE-MOVE ---*/
/* -------------------------------------------------- */
/*
	-- HTML --
	<div class="loader cubes-move"><div class="cube-1"></div><div class="cube-2"></div></div>
*/
.loader.cubes-move {
	position: relative;
}
.loader.cubes-move .cube-1, .loader.cubes-move .cube-2 {
	background-color: #FFFFFF;
	width: 15px;
	height: 15px;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-animation: sk-cubemove 1.8s infinite ease-in-out;
	animation: sk-cubemove 1.8s infinite ease-in-out;
}
.loader.cubes-move .cube-2 {
	-webkit-animation-delay: -0.9s;
	animation-delay: -0.9s;
}
@-webkit-keyframes sk-cubemove {
	25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }
	50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }
	75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }
	100% { -webkit-transform: rotate(-360deg) }
}
@keyframes sk-cubemove {
	25% { 
		transform: translateX(42px) rotate(-90deg) scale(0.5);
		-webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
	} 50% { 
		transform: translateX(42px) translateY(42px) rotate(-179deg);
		-webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
	} 50.1% { 
		transform: translateX(42px) translateY(42px) rotate(-180deg);
		-webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
	} 75% { 
		transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
		-webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
	} 100% { 
		transform: rotate(-360deg);
		-webkit-transform: rotate(-360deg);
	}
}


/* -------------------------------------------------- */
/* --- LOADER: CIRCLE-SCALE ---*/
/* -------------------------------------------------- */
/*
	-- HTML --
	<div class="loader circle-scale"></div>
*/
.loader.circle-scale {
	background-color: #FFFFFF;
	border-radius: 100%;  
	-webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
	animation: sk-scaleout 1.0s infinite ease-in-out;
}
@-webkit-keyframes sk-scaleout {
	0% { -webkit-transform: scale(0) }
	100% {
		-webkit-transform: scale(1.0);
		opacity: 0;
	}
}
@keyframes sk-scaleout {
	0% { 
		-webkit-transform: scale(0);
		transform: scale(0);
	} 100% {
		-webkit-transform: scale(1.0);
		transform: scale(1.0);
		opacity: 0;
	}
}


/* -------------------------------------------------- */
/* --- LOADER: CIRCLES-SCALE-ROTATE ---*/
/* -------------------------------------------------- */
/*
	-- HTML --
	<div class="loader circles-scale-rotate"><div class="circle-1"></div><div class="circle-2"></div></div>
*/
.loader.circles-scale-rotate {
	position: relative;
	text-align: center;
	-webkit-animation: sk-rotatecircle 2.0s infinite linear;
	animation: sk-rotatecircle 2.0s infinite linear;
}
.loader.circles-scale-rotate .circle-1, .loader.circles-scale-rotate .circle-2 {
	width: 60%;
	height: 60%;
	display: inline-block;
	position: absolute;
	top: 0;
	background-color: #FFFFFF;
	border-radius: 100%;
	-webkit-animation: sk-bouncecircle 2.0s infinite ease-in-out;
	animation: sk-bouncecircle 2.0s infinite ease-in-out;
}
.loader.circles-scale-rotate .circle-2 {
	top: auto;
	bottom: 0;
	-webkit-animation-delay: -1.0s;
	animation-delay: -1.0s;
}
@-webkit-keyframes sk-rotatecircle { 100% { -webkit-transform: rotate(360deg) }}
@keyframes sk-rotatecircle { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}
@-webkit-keyframes sk-bouncecircle {
	0%, 100% { -webkit-transform: scale(0.0) }
	50% { -webkit-transform: scale(1.0) }
}
@keyframes sk-bouncecircle {
	0%, 100% { 
		transform: scale(0.0);
		-webkit-transform: scale(0.0);
	} 50% { 
		transform: scale(1.0);
		-webkit-transform: scale(1.0);
	}
}


/* -------------------------------------------------- */
/* --- LOADER: CIRCLES-BOUNCE ---*/
/* -------------------------------------------------- */
/*
	-- HTML --
	<div class="loader circles-bounce"><div class="circle-1"></div><div class="circle-2"></div><div class="circle-3"></div></div>
*/
.loader.circles-bounce {
	text-align: center;
}
.loader.circles-bounce > div {
	width: 23.333333%;
	height: 23.333333%;
	margin: 0px 5%;
	background-color: #FFFFFF;
	border-radius: 100%;
	display: inline-block;
	-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
	animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.loader.circles-bounce .circle-1 {
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
}
.loader.circles-bounce .circle-2 {
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
}
@-webkit-keyframes sk-bouncedelay {
	0%, 80%, 100% { -webkit-transform: scale(0) }
	40% { -webkit-transform: scale(1.0) }
}
@keyframes sk-bouncedelay {
	0%, 80%, 100% { 
		-webkit-transform: scale(0);
		transform: scale(0);
	} 40% { 
		-webkit-transform: scale(1.0);
		transform: scale(1.0);
	}
}


/* -------------------------------------------------- */
/* --- LOADER: CIRCLE-DOTS-SCALE ---*/
/* -------------------------------------------------- */
/*
	-- HTML --
	<div class="loader circle-dots-scale"><div class="dot dot-1"></div><div class="dot dot-2"></div><div class="dot dot-3"></div><div class="dot dot-4"></div><div class="dot dot-5"></div><div class="dot dot-6"></div><div class="dot dot-7"></div><div class="dot dot-8"></div><div class="dot dot-9"></div><div class="dot dot-10"></div><div class="dot dot-11"></div><div class="dot dot-12"></div></div>
*/
.loader.circle-dots-scale {
	position: relative;
}
.loader.circle-dots-scale .dot {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}
.loader.circle-dots-scale .dot:before {
	content: '';
	display: block;
	margin: 0 auto;
	width: 15%;
	height: 15%;
	background-color: #FFFFFF;
	border-radius: 100%;
	-webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
	animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
}
.loader.circle-dots-scale .dot-2 {
  -webkit-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
          transform: rotate(30deg); }
.loader.circle-dots-scale .dot-3 {
  -webkit-transform: rotate(60deg);
      -ms-transform: rotate(60deg);
          transform: rotate(60deg); }
.loader.circle-dots-scale .dot-4 {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg); }
.loader.circle-dots-scale .dot-5 {
  -webkit-transform: rotate(120deg);
      -ms-transform: rotate(120deg);
          transform: rotate(120deg); }
.loader.circle-dots-scale .dot-6 {
  -webkit-transform: rotate(150deg);
      -ms-transform: rotate(150deg);
          transform: rotate(150deg); }
.loader.circle-dots-scale .dot-7 {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg); }
.loader.circle-dots-scale .dot-8 {
  -webkit-transform: rotate(210deg);
      -ms-transform: rotate(210deg);
          transform: rotate(210deg); }
.loader.circle-dots-scale .dot-9 {
  -webkit-transform: rotate(240deg);
      -ms-transform: rotate(240deg);
          transform: rotate(240deg); }
.loader.circle-dots-scale .dot-10 {
  -webkit-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
          transform: rotate(270deg); }
.loader.circle-dots-scale .dot-11 {
  -webkit-transform: rotate(300deg);
      -ms-transform: rotate(300deg);
          transform: rotate(300deg); }
.loader.circle-dots-scale .dot-12 {
  -webkit-transform: rotate(330deg);
      -ms-transform: rotate(330deg);
          transform: rotate(330deg); }
.loader.circle-dots-scale .dot-2:before {
  -webkit-animation-delay: -1.1s;
          animation-delay: -1.1s; }
.loader.circle-dots-scale .dot-3:before {
  -webkit-animation-delay: -1s;
          animation-delay: -1s; }
.loader.circle-dots-scale .dot-4:before {
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s; }
.loader.circle-dots-scale .dot-5:before {
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s; }
.loader.circle-dots-scale .dot-6:before {
  -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s; }
.loader.circle-dots-scale .dot-7:before {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s; }
.loader.circle-dots-scale .dot-8:before {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s; }
.loader.circle-dots-scale .dot-9:before {
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s; }
.loader.circle-dots-scale .dot-10:before {
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s; }
.loader.circle-dots-scale .dot-11:before {
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s; }
.loader.circle-dots-scale .dot-12:before {
  -webkit-animation-delay: -0.1s;
          animation-delay: -0.1s; }
@-webkit-keyframes sk-circleBounceDelay {
	0%, 80%, 100% {
		-webkit-transform: scale(0);
		transform: scale(0);
	} 40% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}
@keyframes sk-circleBounceDelay {
	0%, 80%, 100% {
		-webkit-transform: scale(0);
		transform: scale(0);
	} 40% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}


/* -------------------------------------------------- */
/* --- LOADER: CUBE-SQUARES-SCALE ---*/
/* -------------------------------------------------- */
/*
	-- HTML --
	<div class="loader cube-squares-scale"><div class="square square-1"></div><div class="square square-2"></div><div class="square square-3"></div><div class="square square-4"></div><div class="square square-5"></div><div class="square square-6"></div><div class="square square-7"></div><div class="square square-8"></div><div class="square square-9"></div></div>
*/
.loader.cube-squares-scale {
	position:relative;
}
.loader.cube-squares-scale .square {
	width: 33.333333%;
	height: 33.333333%;
	background-color: #FFFFFF;
	float: left;
	-webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
	animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; 
}
.loader.cube-squares-scale .square-1 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s; }
.loader.cube-squares-scale .square-2 {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s; }
.loader.cube-squares-scale .square-3 {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s; }
.loader.cube-squares-scale .square-4 {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s; }
.loader.cube-squares-scale .square-5 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s; }
.loader.cube-squares-scale .square-6 {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s; }
.loader.cube-squares-scale .square-7 {
  -webkit-animation-delay: 0s;
          animation-delay: 0s; }
.loader.cube-squares-scale .square-8 {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s; }
.loader.cube-squares-scale .square-9 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s; }
@-webkit-keyframes sk-cubeGridScaleDelay {
	0%, 70%, 100% {
		-webkit-transform: scale3D(1, 1, 1);
		transform: scale3D(1, 1, 1);
	} 35% {
		-webkit-transform: scale3D(0, 0, 1);
		transform: scale3D(0, 0, 1); 
	}
}
@keyframes sk-cubeGridScaleDelay {
	0%, 70%, 100% {
		-webkit-transform: scale3D(1, 1, 1);
		transform: scale3D(1, 1, 1);
	} 35% {
		-webkit-transform: scale3D(0, 0, 1);
		transform: scale3D(0, 0, 1);
	}
}


/* -------------------------------------------------- */
/* --- LOADER: CIRCLE-DOTS-FADE ---*/
/* -------------------------------------------------- */
/*
	-- HTML --
	<div class="loader circle-dots-fade"><div class="dot dot-1"></div><div class="dot dot-2"></div><div class="dot dot-3"></div><div class="dot dot-4"></div><div class="dot dot-5"></div><div class="dot dot-6"></div><div class="dot dot-7"></div><div class="dot dot-8"></div><div class="dot dot-9"></div><div class="dot dot-10"></div><div class="dot dot-11"></div><div class="dot dot-12"></div></div>
*/
.loader.circle-dots-fade {
	position: relative;
}
.loader.circle-dots-fade .dot {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}
.loader.circle-dots-fade .dot:before {
	content: '';
	display: block;
	margin: 0 auto;
	width: 15%;
	height: 15%;
	background-color: #FFFFFF;
	border-radius: 100%;
	-webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
	animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
}
.loader.circle-dots-fade .dot-2 {
  -webkit-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
          transform: rotate(30deg);
}
.loader.circle-dots-fade .dot-3 {
  -webkit-transform: rotate(60deg);
      -ms-transform: rotate(60deg);
          transform: rotate(60deg);
}
.loader.circle-dots-fade .dot-4 {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
}
.loader.circle-dots-fade .dot-5 {
  -webkit-transform: rotate(120deg);
      -ms-transform: rotate(120deg);
          transform: rotate(120deg);
}
.loader.circle-dots-fade .dot-6 {
  -webkit-transform: rotate(150deg);
      -ms-transform: rotate(150deg);
          transform: rotate(150deg);
}
.loader.circle-dots-fade .dot-7 {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}
.loader.circle-dots-fade .dot-8 {
  -webkit-transform: rotate(210deg);
      -ms-transform: rotate(210deg);
          transform: rotate(210deg);
}
.loader.circle-dots-fade .dot-9 {
  -webkit-transform: rotate(240deg);
      -ms-transform: rotate(240deg);
          transform: rotate(240deg);
}
.loader.circle-dots-fade .dot-10 {
  -webkit-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
          transform: rotate(270deg);
}
.loader.circle-dots-fade .dot-11 {
  -webkit-transform: rotate(300deg);
      -ms-transform: rotate(300deg);
          transform: rotate(300deg); 
}
.loader.circle-dots-fade .dot-12 {
  -webkit-transform: rotate(330deg);
      -ms-transform: rotate(330deg);
          transform: rotate(330deg); 
}
.loader.circle-dots-fade .dot-2:before {
  -webkit-animation-delay: -1.1s;
          animation-delay: -1.1s; 
}
.loader.circle-dots-fade .dot-3:before {
  -webkit-animation-delay: -1s;
          animation-delay: -1s; 
}
.loader.circle-dots-fade .dot-4:before {
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s; 
}
.loader.circle-dots-fade .dot-5:before {
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s; 
}
.loader.circle-dots-fade .dot-6:before {
  -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s; 
}
.loader.circle-dots-fade .dot-7:before {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s; 
}
.loader.circle-dots-fade .dot-8:before {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s; 
}
.loader.circle-dots-fade .dot-9:before {
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s;
}
.loader.circle-dots-fade .dot-10:before {
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s;
}
.loader.circle-dots-fade .dot-11:before {
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s;
}
.loader.circle-dots-fade .dot-12:before {
  -webkit-animation-delay: -0.1s;
          animation-delay: -0.1s;
}
@-webkit-keyframes sk-circleFadeDelay {
	0%, 39%, 100% { opacity: 0; }
	40% { opacity: 1; }
}
@keyframes sk-circleFadeDelay {
	0%, 39%, 100% { opacity: 0; }
	40% { opacity: 1; } 
}


/* -------------------------------------------------- */
/* --- LOADER: CUBE-SQUARES-FOLD ---*/
/* -------------------------------------------------- */
/*
	-- HTML --
	<div class="loader cube-squares-fold"><div class="square square-1"></div><div class="square square-2"></div><div class="square square-4"></div><div class="square square-3"></div></div>
*/
.loader.cube-squares-fold {
  position: relative;
  -webkit-transform: rotateZ(45deg);
          transform: rotateZ(45deg);
}
.loader.cube-squares-fold .square {
  float: left;
  width: 50%;
  height: 50%;
  position: relative;
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1); 
}
.loader.cube-squares-fold .square:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
          animation: sk-foldCubeAngle 2.4s infinite linear both;
  -webkit-transform-origin: 100% 100%;
      -ms-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
}
.loader.cube-squares-fold .square-2 {
  -webkit-transform: scale(1.1) rotateZ(90deg);
          transform: scale(1.1) rotateZ(90deg);
}
.loader.cube-squares-fold .square-3 {
  -webkit-transform: scale(1.1) rotateZ(180deg);
          transform: scale(1.1) rotateZ(180deg);
}
.loader.cube-squares-fold .square-4 {
  -webkit-transform: scale(1.1) rotateZ(270deg);
          transform: scale(1.1) rotateZ(270deg);
}
.loader.cube-squares-fold .square-2:before {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.loader.cube-squares-fold .square-3:before {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s; 
}
.loader.cube-squares-fold .square-4:before {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}
@-webkit-keyframes sk-foldCubeAngle {
	0%, 10% {
		-webkit-transform: perspective(140px) rotateX(-180deg);
		transform: perspective(140px) rotateX(-180deg);
		opacity: 0; 
	} 25%, 75% {
		-webkit-transform: perspective(140px) rotateX(0deg);
		transform: perspective(140px) rotateX(0deg);
		opacity: 1; 
	} 90%, 100% {
		-webkit-transform: perspective(140px) rotateY(180deg);
		transform: perspective(140px) rotateY(180deg);
		opacity: 0; 
	} 
}
@keyframes sk-foldCubeAngle {
	0%, 10% {
		-webkit-transform: perspective(140px) rotateX(-180deg);
		transform: perspective(140px) rotateX(-180deg);
		opacity: 0; 
	} 25%, 75% {
		-webkit-transform: perspective(140px) rotateX(0deg);
		transform: perspective(140px) rotateX(0deg);
		opacity: 1; 
	} 90%, 100% {
		-webkit-transform: perspective(140px) rotateY(180deg);
		transform: perspective(140px) rotateY(180deg);
		opacity: 0; 
	}
}