/* the background gradient */
#cj-wrapper {

																				   /* <------ first color ------>            <-- second color --> */
	background: #444; /* fallback */
	background: -moz-radial-gradient(center, ellipse cover,                                      #0082C6 0%,                           #0082C6 100%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #0082C6),            color-stop(100%, #0082C6));
	background: -webkit-radial-gradient(center, ellipse cover,                                   #0082C6 0%,                           #0082C6 100%);
	background: -o-radial-gradient(center, ellipse cover,                                        #0082C6 0%,                           #0082C6 100%);
	background: -ms-radial-gradient(center, ellipse cover,                                       #0082C6 0%,                           #0082C6 100%);
	background: radial-gradient(ellipse at center,                                               #0082C6 0%,                           #0082C6 100%);
	
}

/* these numbers should be equal the width below divided by 2 */
#cj-container {

	margin: -15px 0 0 -15px;
	
}

/* the size of the preloader */
.cj-preloader {

	width: 30px;
	height: 30px;

}

/* preloader color */
.cj-preloader span {

	background-color: #EC9123;
	
}

/* should be the same color as the background gradient's first color above */
.cj-preloader div {
	
	background-color: #003964;
	
}

/* *************************************************************** */
/* --------------------------------------------------------------- */
/* UNDER THE HOOD: no need to edit below unless you really want to */
/* --------------------------------------------------------------- */
/* *************************************************************** */

/* main background wrapper */
#cj-wrapper {
	
	width: 100%;
	height: 100%;
	
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	
	/* css3 transitions, first number represents duration, second represents delay */
	-webkit-transition: opacity 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) 0.5s;
	-moz-transition: opacity 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) 0.5s;
	-o-transition: opacity 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) 0.5s;
	-ms-transition: opacity 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) 0.5s;
	transition: opacity 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) 0.5s;
	
}

/* gets applied when the window has loaded and starts the transition */
.cj-fade-out {

	opacity: 0;
	
}

/* main preloader container, center it on the screen */
#cj-container {

	position: absolute;
	left: 50%;
	top: 50%;
	
}

/* main preloader div */
.cj-preloader {
	
	display: inline-block;
	position: relative;
	
	-webkit-transition: opacity 0.4s cubic-bezier(0.230, 1.000, 0.320, 1.000);
	-moz-transition: opacity 0.4s cubic-bezier(0.230, 1.000, 0.320, 1.000);
	-o-transition: opacity 0.4s cubic-bezier(0.230, 1.000, 0.320, 1.000);
	-ms-transition: opacity 0.4s cubic-bezier(0.230, 1.000, 0.320, 1.000);
	transition: opacity 0.4s cubic-bezier(0.230, 1.000, 0.320, 1.000);
	
}

/* seperate class so we can add/remove it */
.cj-spin {

	-webkit-animation: rotator 1s linear infinite;
	-moz-animation: rotator 1s linear infinite;
	-o-animation: rotator 1s linear infinite;
	-ms-animation: rotator 1s linear infinite;
	animation: rotator 1s linear infinite;
	
}

/* the inside of the preloader */
.cj-preloader div {

	position: absolute;
	left: 25%;
	top: 25%;
	
	width: 50%;
	height: 50%;
	
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	
}

/* the spinner line shapes */
.cj-preloader span {

	width: 10%;
	height: 100%;	

	position: absolute;
	left: 50%;
	
	width: 10%;
	margin-left: -5%;
	
}

/* rotate second line */
.cj-preloader span:nth-child(1) {
	
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
	
}

/* rotate third line */
.cj-preloader span:nth-child(2) {
	
	-webkit-transform: rotate(135deg);
	-moz-transform: rotate(135deg);
	-o-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
	transform: rotate(135deg);
	
}

/* rotate fourth line */
.cj-preloader span:nth-child(3) {
	
	-webkit-transform: rotate(225deg);
	-moz-transform: rotate(225deg);
	-o-transform: rotate(225deg);
	-ms-transform: rotate(225deg);
	transform: rotate(225deg);
	
}

/* below are the css3 keyframe animations that spin the preloader */
@-webkit-keyframes rotator {

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

@-moz-keyframes rotator {

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

@-o-keyframes rotator {

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

@-ms-keyframes rotator {

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

@keyframes rotator {

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