/* ==========================================================================
   Loader custom styles
   ========================================================================== */

p {
	line-height: 1.33em;
	color: #7E7E7E;
}
h1 {
	color: #EEEEEE;
}

#loader-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
}
#loader {
	display: block;
	position: relative;

	top: 50%;
	z-index: 1001;
}

#loader-wrapper .loader-section {
	position: fixed;
	top: 0;
	width: 51%;
	height: 100%;
	background: #C4415D;
	z-index: 1000;
	-webkit-transform: translateX(0);  /* Chrome, Opera 15+, Safari 3.1+ */
	-ms-transform: translateX(0);  /* IE 9 */
	transform: translateX(0);  /* Firefox 16+, IE 10+, Opera */
}

#loader-wrapper .loader-section.section-left {
	left: 0;
}

#loader-wrapper .loader-section.section-right {
	right: 0;
}

/* Loaded */
.loaded #loader-wrapper .loader-section.section-left {
	-webkit-transform: translateX(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
	-ms-transform: translateX(-100%);  /* IE 9 */
	transform: translateX(-100%);  /* Firefox 16+, IE 10+, Opera */

	-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);  
	transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

.loaded #loader-wrapper .loader-section.section-right {
	-webkit-transform: translateX(100%);  /* Chrome, Opera 15+, Safari 3.1+ */
		-ms-transform: translateX(100%);  /* IE 9 */
			transform: translateX(100%);  /* Firefox 16+, IE 10+, Opera */

-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);  
	transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}
	
.loaded #loader {
	opacity: 0;
	-webkit-transition: all 0.3s ease-out;  
			transition: all 0.3s ease-out;
}
.loaded #loader-wrapper {
	visibility: hidden;

	-webkit-transform: translateY(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
		-ms-transform: translateY(-100%);  /* IE 9 */
			transform: translateY(-100%);  /* Firefox 16+, IE 10+, Opera */

	-webkit-transition: all 0.3s 1s ease-out;  
			transition: all 0.3s 1s ease-out;
}

/* JavaScript Turned Off */
.no-js #loader-wrapper {
	display: none;
}
.no-js h1 {
	color: #222222;
}

/* ==========================================================================
   CUSTOM LOADER
   ========================================================================== */

 .griffin-sun { 
	text-align: center;
	margin-top: 30px;
	color: #ffffde;
	font: 16px century gothic, verdana, sans-serif;
	z-index: 1002;
}

.sun-block {
	margin: auto;
	position: absolute;
	top: 50px; left: 0; bottom: 0; right: 0;    
	width: 210px;
	height: 150px;
	background-color: #C4415D;
	border-top:4px solid #ffffde;
	border-radius: 2px;
	z-index: 1002;
}

.sun {
	margin: auto;
	position: absolute;
	top: -50px; left: 0; bottom: 0; right: 0;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	border:6px solid #ffffde;
	animation-name: sun;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1.275);
	z-index: 1001;

}

@keyframes sun {

	0%   {transform: translateY(0px);}
	15%  {transform: translateY(-40px) ;}
	70%  {transform: translateY(-55px) ;}
	75%  {transform: translateY(-0px);}

}

.eyes {
	animation-name: eyes;
	animation-duration: 4s;
	animation-iteration-count: infinite;
}

@keyframes eyes {

	0%, 15%{
		transform: translate(-20px); 
	}

	20%, 32% {
		transform: translate(-20px, -10px);
	}
	
	35%, 38% {
		transform: translate(20px);
	}

	39% {
		transform:translate(20px, 40px) scaleY(0.2);
	}

	41% {
		transform: translate(20, 40px) scaleY(1);
	}

	43%, 50%, 60% {
		transform: translate(20px);
	}

	66%, 69% {
		transform: translate(0px);
	}
}

/* Sunray rotate Animation */

.sun-rays {
	margin: auto;
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	animation-name: rays;
	animation-duration: 12s;
	animation-iteration-count: infinite;
	animation-timing-function:linear;
}

.ray { 
	margin: auto;
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	display: block;
	width: 19px; 
	height: 6px; 
	background-color: #ffffde;
	border-radius:15px;
}

	.deg0 { transform: translate(79px); } /* 79px = half the width of the wrapper */
	.deg45 { transform: rotate(45deg) translate(79px); }
	.deg90 {transform: rotate(90deg) translate(79px);}
	.deg135 { transform: rotate(135deg) translate(79px); }
	.deg180 { transform: translate(-79px); }
	.deg225 { transform: rotate(225deg) translate(79px); }
	.deg315 { transform: rotate(315deg) translate(79px); }
	.deg270 { transform: rotate(270deg) translate(79px); }


@keyframes rays {

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