/*******************************
 * 
 *	loader.css 
 *	written by Nathan Magrofuoco
 *
 *  last modification : 03th October 2015 by Nathan Magrofuoco
 *******************************/
 
 /*
  * COLOR SCHEME :
  * WHITE = white	60%
  * GREY = #5F5C5B	30%
  * BLUE = #304F86	10%
  *	BLACK = black	others
  */

/*
 * When body gets the class "loaded", the whole loader will slide off and disappear
 */
.loaded  #loader-container {
    -webkit-transform: translateY(-100%);
	   -moz-transform: translateY(-100%);
		-ms-transform: translateY(-100%);
		 -o-transform: translateY(-100%);
			transform: translateY(-100%);
    -webkit-transition: all 0.3s 2.5s ease-out;
	   -moz-transition: all 0.3s 2.5s ease-out;
	     -o-transition: all 0.3s 2.5s ease-out;
            transition: all 0.3s 2.5s ease-out;
}

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

.loaded #loader-container .loader-section.section-right,
.loaded #loader-container .loader-section.section-left {
	-webkit-transition: all 1.5s 1s cubic-bezier(0.645, 0.045, 0.355, 1.000);
	   -moz-transition: all 1.5s 1s cubic-bezier(0.645, 0.045, 0.355, 1.000);
		 -o-transition: all 1.5s 1s cubic-bezier(0.645, 0.045, 0.355, 1.000);
			transition: all 1.5s 1s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

.loaded #loader {
	opacity: 0;
    -webkit-transition: all 1s ease-out;
	   -moz-transition: all 1s ease-out;
		 -o-transition: all 1s ease-out;
            transition: all 1s ease-out;
}

#loader {
    display: block;
    left: 50%;
	margin: -65px 0 0 -75px;
	position: relative;
    top: 50%;
    z-index: 1501;
}

#loader-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#loader-container .loader-section {
	background: white;
	height: 100%;
    position: fixed;
    top: 0;
    width: 51%;
    z-index: 1500;
}
 
#loader-container .loader-section.section-left {
    left: 0;
}
 
#loader-container .loader-section.section-right {
    right: 0;
}

/* keyframes used for the logo-loader-bottom and logo-loader-top */
@keyframes loader-fade-away-grey {
    0% {background: #EFEEEE;}
    50% {background: #5F5C5B;}
	100% {background: #EFEEEE;}
}

@keyframes loader-fade-away-blue {
    0% {background: #EAEDF3;}
    50% {background: #355082;}
	100% {background: #EAEDF3;}
}

#loader .logo-loader-bottom {
	animation-name: loader-fade-away-grey;
    animation-duration: 5s;
	animation-iteration-count: infinite;
	background: white;
	display: block;
	height: 42px;
	margin-top: -1px;
	-webkit-transform: skew(45deg);
	   -moz-transform: skew(45deg);
		-ms-transform: skew(45deg);
	     -o-transform: skew(45deg);
		 	transform: skew(45deg);
	width: 42px;
}

#loader .logo-loader-bottom:after {
	animation-name: loader-fade-away-blue;
    animation-duration: 5s;
	animation-iteration-count: infinite;
	background: white;
	content: "";
	display: block;
	height: 12px;
	margin-left: 130px;
	margin-top: -6px;
	position: absolute;
	-webkit-transform: skew(295deg);
	   -moz-transform: skew(295deg);
	    -ms-transform: skew(295deg);
	     -o-transform: skew(295deg);
			transform: skew(295deg);
	width: 42px;
}

#loader .logo-loader-bottom:before {
	animation-name: loader-fade-away-blue;
    animation-duration: 5s;
	animation-iteration-count: infinite;
	background: white;
	content: "";
	display: block;
	height: 28px;
	margin-left: 74px;
	margin-top: 14px;
	position:absolute;
	-webkit-transform: skew(295deg);
	   -moz-transform: skew(295deg);
		-ms-transform: skew(295deg);
	     -o-transform: skew(295deg);
		 	transform: skew(295deg);
	width: 42px;
}

#loader .logo-loader-top {
	animation-name: loader-fade-away-grey;
    animation-duration: 5s;
	animation-iteration-count: infinite;
	background: white;
	display: block;
	height: 42px;
	-webkit-transform: skew(315deg);
	   -moz-transform: skew(315deg);
		-ms-transform: skew(315deg);
	     -o-transform: skew(315deg);
		 	transform: skew(315deg);
	width: 42px;
}

#loader .logo-loader-top:after {
	animation-name: loader-fade-away-grey;
    animation-duration: 5s;
	animation-iteration-count: infinite;
	background: white;
	content: "";
	display: block;
	height: 28px;
	margin-left: 74px;
	position: absolute;
	-webkit-transform: skew(65deg);
	   -moz-transform: skew(65deg);
		-ms-transform: skew(65deg);
	     -o-transform: skew(65deg);
			transform: skew(65deg);
	width: 42px;
}