/************************** ESTILOS GENERALES ********************************/
h1, h2, h3, h4, h5, p{
	margin: 										0;
	padding: 										0;
	font-family: 									helvetica, arial, sans-serif;
}

h1, h2, h3, h4, h5{
	text-transform: 								uppercase;
}

img{
	max-width: 										100%
}

.body{
	margin: 										0;
	padding: 										0;
}

.centrado{
	text-align: 									center;
}

.wrapper{
	width: 											100%;
	background-color: 								#3e505b;
}

.wrapper960{
	width: 											960px;
	margin: 										0 auto;
}

.azul{
	background-color: 								#61737f;
	padding: 										40px 0;
}

.azul p, .azul h2{
	color: 											#fff;
	padding: 										10px 20px;
	width: 											920px;
	margin: 										0 auto;
}

/**************************** ESTILOS HEADER **********************************/

header{
	width: 											100%;
	height: 										80px;
	background-color: 								rgba(255, 255, 255, .9);
	position: 										fixed;
	top: 											0;
	left: 											0;
}

header img{
	width: 											150px;
	float: 											left;
	margin: 										10px 20px;

}

header h1{
	padding: 										27px 0 0 0;
	color: 											#333333;
	font-size: 										1.7em;

}

/*********************** PRELOADER **************************************/

#loader-wrapper{
	position: 										fixed;
	top: 											0;
	left: 											0;
	width: 											100%;
	height: 										100%;
	z-index: 										100;
	background-color: #FFF							 ;
}

#loader{
	display: 										block;
	position: 										relative;
	left: 											50%;
	top: 											50%;
	width: 											120px;
	height: 										100px;
	margin: 										-50px 0 0 -60px;
	border: 										2px solid  #FFF;
	z-index: 										150;

	
}

#loader:before {
    content: 										"";
    position: 										absolute;
    top: 											5px;
    left: 											5px;
    right: 											5px;
    bottom: 										5px;
    border: 										2px solid #FFF;
	
}

#loader:after {
    content: 										"";
    position: 										absolute;
    top: 											15px;
    left: 											15px;
    right: 											15px;
    bottom: 										15px;
    border: 										2px solid #FFF;
}

/**************************** ANIMACION ************************************/

#loader {
-webkit-animation: giro 10s linear infinite;
animation: giro 10s linear infinite;


}

#loader:before {
-webkit-animation: giro 5s reverse infinite;
animation: giro 5s linear infinite;
}

#loader:after {
-webkit-animation: giro 2s linear infinite;
animation: giro 2s linear infinite;
}

@-webkit-keyframes giro {
    0%{
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100%{
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}

@keyframes giro {
    0%{
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100%{
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}