@charset "utf-8";
/* CSS Document */
*{
    padding:0px;
    margin:0px;
}

body{
    background-color: rgb(0,74,130);
}

.contenido{
	width:960px;
	height:245px;
	margin:50px auto auto auto;
	float:none;
	
}

#logo{
	width:275;
	height:245;
	float:left;
	z-index:-1;
	
}

#redes{
    width:168px;
	height:75px;
	margin-left:795px;
}

#blog{
    width:56px;
	height:75px;
	float:left;
}

#facebook{
	width:56px;
	height:75px;
	float:left;
}

#twitter{
	width:56px;
	height:75px;
	float:right;
}

.panel {
	width:680px;
	height:50px;
	float:right;
	box-shadow: 5px 4px 10px 5px rgba(0,0,0,0.1);
	position:relative;
	z-index:2; /* esta propiedad faltaba z-index significa nivel de profundidad de elementos esto quiere decir que el menu estara 2 niveles hacia arriba, al parecer un elemento te hacia conflicto en el mismo nivel */
}


.botones li {
	width:136px;
	height:50px;
	display:block;
	float:left;
	list-style-type:none;
	text-align:center;
	line-height:50px;
	background-color:rgb(0,102,153);
	transition:all 0.3s ease-out;
	-moz-transition:all 0.3s ease-out;
	-ms-transition:all 0.3s ease-out;
	-o-transition:all 0.3s ease-out;
	-webkit-transition:all 0.3s ease-out;	
}
	
.botones li a{
	color:white;
	display:block;
	width:136px;
	height:50px;
	font-family:Arial Helvetica, sans-serif;
	font-weight:bold;
	text-decoration:none;
	font-size:12px;
}


.botones li:hover{
	background-color:rgba(0,153,255,1);		
}

.botones .submenu {
	height:50px;
	overflow:hidden;
	top:-50px;
	position:relative;
	z-index:-1;
	transition:all 0.3s ease-out;
	-moz-transition:all 0.3s ease-out;
	-ms-transition:all 0.3s ease-out;
	-o-transition:all 0.3s ease-out;
	-webkit-transition:all 0.3s ease-out;
}
.submenu li {
	width:136px;
	height:50px;
}

.submenu li:hover {
	background-color:rgba(0,204,255,0.4);
}

.botones li:hover .submenu {
	top:0px;
	height:50px;
	}
	

.cabecera{
	width:960px;
	height:530px;
	margin:10px auto auto auto;
	box-shadow: 0px -20px 50px 0px rgba(0,0,0,0.3);
}

.historia{
	width:560px;
	height:530px;
	float:left;
	background-color: rgb(0,102,149);
}

#principios2{
	width:480px;
	height:300px;
	text-align:justify;
	font-size:17px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	color:white;
	margin-left:35px;
    margin-top:15px;
}

#titulo{
	text-align:center;
	color:white;
	font-size:20px;
	font-family: "Arial Black", Gadget, sans-serif;
	margin-top:40px;
	font-weight:bold;
}


#rompecabezas{
	width:530px;
	height:135px;
	margin-top:25px;
	margin-left:15px;
	margin-bottom:2px;
}


.mision{
	width:400px;
	height:530px;
	float:right;
	background-color:rgb(0,81,128);
}


.titulosmision{
	font-family:"Arial Black", Gadget, sans-serif; 
	font-size:22px;
	color:white;
	margin-top:15px;
	margin-left:30px;
	margin-right:30px;
	margin-bottom:5px;
	font-weight:bold;
}

.negrita{
	font-weight:bold;
	font-family:"Arial Black", Gadget, sans-serif;
    font-size:16px;
}

.parrafo{
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	color:white;
    margin:0px 30px;
	font-size:14px;
	text-align:justify;
}

.beneficios{
	width: 960px;
	height: 50px;
	text-align:center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	line-height: 50px;
	color: white;
	font-weight: bold;
	margin:5px auto;
}



#slideshow{
	width:960px;
	height:372px;
	box-shadow: 0px 20px 50px 0px rgba(0,0,0,0.3);
	margin:5px auto;
}

.medio{
	width:960px;
	height:50px;
	margin-top:500px;
}

#slideshow img {
	position:absolute;
	float: left;
}

.cuadros{
	width:960px;
	height:312px;
	margin:5px auto;
}


#crecimiento{
	width:470px;
	height:312px;
	float:left;
	margin-left:5px;
	box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.3);
    margin-top:3px;

}

#nuestros{
	width:470px;
	height:312px;
	float:right;
	margin-right:5px;
    margin-top:3px;
	box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.3);
}

.cabeceraultimo{
	width:960px;
	height:70px;
	background-color:rgb(0,81,148);
	margin:10px auto;
	box-shadow: 0px 20px 50px 0px rgba(0,0,0,0.3);
}


.derecho{
	width:210px;
	height:70px;
	float:left;
    margin-left:190px;
	line-height:70px;
	text-align:center;
	color:white;
	font-weight:bold;
	font-size:21px;	
}

.agencia{
	width:180px;
	height:70px;
	float:left;
	margin-left:10px;
	line-height:70px;
	text-align:center;
	color:white;
	font-size:12px;	
}

#blogbajo{
    width:41px; 
	height:60px;
	float:right;
	margin-top:5px;
	margin-right:8px;
}

#fbabajo{
	width:41px;
	height:60px;
	float:right;
	margin-top:5px;
	margin-right:10px;
}

#twiabajo{
	width:41px; 
	height:60px;
	float:right;
	margin-top:5px;
	margin-right:8px;
}
.espacio{
	width:960px;
	height:20px;
	margin:0px auto;
}