@charset "UTF-8";
/* CSS Document */

*{ margin: 0; }


body {
    width:100%;
    min-height:100%;
    margin: 0 auto;
    overflow-x: hidden;
    background-color:/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#3b679e+0,207cca+44,2b88d9+55,2b88d9+55,7db9e8+100 */
background: rgb(59,103,158); /* Old browsers */
background: -moz-linear-gradient(45deg,  rgba(59,103,158,1) 0%, rgba(32,124,202,1) 44%, rgba(43,136,217,1) 55%, rgba(43,136,217,1) 55%, rgba(125,185,232,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg,  rgba(59,103,158,1) 0%,rgba(32,124,202,1) 44%,rgba(43,136,217,1) 55%,rgba(43,136,217,1) 55%,rgba(125,185,232,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg,  rgba(59,103,158,1) 0%,rgba(32,124,202,1) 44%,rgba(43,136,217,1) 55%,rgba(43,136,217,1) 55%,rgba(125,185,232,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b679e', endColorstr='#7db9e8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

    background-repeat:no-repeat;
    background-color: #464646;
    background-attachment: fixed;
    background-size:cover;
    background-position: center;
    display:flex;
    flex-wrap: wrap; 
    -webkit-background-size: cover !important;  
    -moz-background-size: cover !important; 
    -o-background-size: cover !important; 
    background-size: cover !important;
}


@charset "UTF-8";
/* Medios fluidos sencillos
   Nota: Los medios fluidos exigen la eliminación de los atributos de altura y anchura de los medios del código HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 no admite max-width (anchura máxima), por lo que usa de manera predeterminada una anchura del 100% */
.ie6 img {
	width:100%;
}

/*
	Propiedades de cuadrícula fluida de Dreamweaver
	----------------------------------
	dw-num-cols-mobile:		5;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	10;
	dw-gutter-percentage:	25;
	
	Inspiración obtenida de "Responsive Web Design" de Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	y Golden Grid System de Joni Korpi
	http://goldengridsystem.com/
*/

/* Diseño movil: 480 px e inferior. */

@media only screen and (max-width: 481px) {
	
.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	padding-left: 0px;
	padding-right: 0px;
}

body{padding-top:60px;}

#contenedor{
    width:100%;
    min-height:500px;
    background-size:cover;
    background-position: center;
    margin:0 auto;
}

#cabecera{
	background-position:center;
	background-size:cover;
	margin:0 auto;
	float:left;
	width:100%;
	height:auto;
}

#sello{
	float:left;
	width: 230px;
	height: 200px;
	margin-left: 10%;
	margin-top: 20px;
	z-index: 1;
	position: absolute;
}

#centrarlogos{
	float:left;
	position:absolute;
	margin-top:0px;
	width:350px;
	height:auto;
	left:50%;
	margin-left:-175px;
	margin-bottom:70px;
}

#logo{
	float:left;
	width: 350px;
    height: 560px;
    text-indent: -50000px;
    background-image:url(../Imagenes/edificioh.png)
}

#logo a{
	float:left;
	position:relative;
	width:160px;
	height:160px;
	left:50%;
	margin-left:-80px;
	margin-top:380px;
	background-image:url(../Imagenes/identidadheaderh.png);
	text-indent:-50000px;	
}

#claroh{
	float:left;
	width: 350px;
    height: 560px;
    text-indent: -50000px;
    background-image:url(../Imagenes/clarocol.png);
}

#claroh a{
	float:left;
	position:relative;
	width:160px;
	height:160px;
	left:50%;
	margin-left:-80px;
	margin-top:380px;
	background-image:url(../Imagenes/clarohh.png);
	text-indent:-50000px;
}

#azudh{
	float:left;
	width: 350px;
    height: 560px;
    text-indent: -50000px;
    background-image:url(../Imagenes/azudcol.png);
}

#azudh a{
	float:left;
	position:relative;
	width:160px;
	height:160px;
	left:50%;
	margin-left:-80px;
	margin-top:380px;
	background-image:url(../Imagenes/azudhh.png);
	text-indent:-50000px;
}

.menu_bar{
	display:block;
	float:right;
	width:100%;
	top:0;
	position:fixed;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#67b1ea+0,3680b5+100 */
background: #67b1ea; /* Old browsers */
background: -moz-linear-gradient(top,  #67b1ea 0%, #3680b5 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #67b1ea 0%,#3680b5 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #67b1ea 0%,#3680b5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#67b1ea', endColorstr='#3680b5',GradientType=0 ); /* IE6-9 */	
}

.menu_bar .bt-menu{
		float:right;
		display: block;
		padding: 10px;
		color: #fff;
		overflow: hidden;
		font-family: 'Trirong:300', serif;
		font-size:30px;
		text-decoration: none;
}

.menu_bar span{
		float: right;
		font-size: 40px;
}

.menu nav{
		margin-top:3000px;
		width:70%;
		height: auto;
		position: fixed;
		right:-100%;
		margin: 0;
		overflow: scroll;
		overflow-x:hidden;
		display:block;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#67b1ea+0,3680b5+100 */
background: #67b1ea; /* Old browsers */
background: -moz-linear-gradient(top,  #67b1ea 0%, #3680b5 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #67b1ea 0%,#3680b5 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #67b1ea 0%,#3680b5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#67b1ea', endColorstr='#3680b5',GradientType=0 ); /* IE6-9 */
}

.menu nav ul{
	display:block;
	list-style:none;
	padding-left:0px;
}

.menu nav li{
	display:block;
	text-align:right;
	color:#FFF;
	font-family: 'Trirong:300', serif;
	font-size:20px;	
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#67b1ea+0,3680b5+100 */
background: #67b1ea; /* Old browsers */
background: -moz-linear-gradient(top,  #67b1ea 0%, #3680b5 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #67b1ea 0%,#3680b5 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #67b1ea 0%,#3680b5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#67b1ea', endColorstr='#3680b5',GradientType=0 ); /* IE6-9 */
}
 
.menu nav ul li a{
	display: block;
	text-decoration:none;
	color:#FFF;
	font-family: 'Trirong:300', serif;
	font-size:20px;
	padding:15px 20px;
	padding-top:20px;
	padding-bottom:20px;
}

nav li a:hover{
	background-color: rgba(0, 0, 0, 0.3);
	padding-top:8px;
	padding-bottom:10px;
}

nav a:hover{
	background-color: rgba(0, 0, 0, 0.3);
	padding-top:8px;
	padding-bottom:10px;
}

nav p{
	text-align:justify;
	color:#FFF;
    font-family: 'Trirong:300', serif;
	font-size:13px;
}

.current{
	background-color: rgba(0, 0, 0, 0.3);
	padding-top:8px;
	padding-bottom:10px;
}

}

/* Diseño tableta: de 481 px a 768 px. Hereda estilos de: Diseño movil. */

@media only screen and (min-width: 481px) {
	
.gridContainer {
	width: 100%;
	padding-left:0px;
	padding-right:0px;
}

#contenedor{
	width:100%;
	min-height:100%;
	margin:0 auto;
}

#cabecera{
	background-position:center;
	background-size:cover;
	margin:0 auto;
	float:left;
	width:100%;
	height:auto;
}

#sello{
	float:left;
	width: 230px;
	height: 200px;
	margin-left: 10%;
	margin-top: 20px;
	z-index: 1;
	position: absolute;
}

#centrarlogos{
	float:left;
	position:absolute;
	margin-top:100px;
	width:500px;
	height:auto;
	left:50%;
	margin-left:-250px;
	margin-bottom:70px;
}

#logo{
	float:left;
	width: 500px;
    height: 600px;
    text-indent: -50000px;
    background-image:url(../Imagenes/edificioh.png)
}

#logo a{
	float:left;
	position:relative;
	width:160px;
	height:160px;
	left:50%;
	margin-left:-80px;
	margin-top:380px;
	background-image:url(../Imagenes/identidadheaderh.png);
	text-indent:-50000px;	
}

#claroh{
	float:left;
	width: 500px;
    height: 600px;
    text-indent: -50000px;
    background-image:url(../Imagenes/clarocol.png);
}

#claroh a{
	float:left;
	position:relative;
	width:160px;
	height:160px;
	left:50%;
	margin-left:-80px;
	margin-top:380px;
	background-image:url(../Imagenes/clarohh.png);
	text-indent:-50000px;
}

#azudh{
	float:left;
	width: 500px;
    height: 600px;
    text-indent: -50000px;
    background-image:url(../Imagenes/azudcol.png);
}

#azudh a{
	float:left;
	position:relative;
	width:160px;
	height:160px;
	left:50%;
	margin-left:-80px;
	margin-top:380px;
	background-image:url(../Imagenes/azudhh.png);
	text-indent:-50000px;
}

.menu_bar{display:none;}

.menu{
	margin-top:16px;
	float:right;
	width:auto;
	height:34px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#67b1ea+0,3680b5+100 */
background: #67b1ea; /* Old browsers */
background: -moz-linear-gradient(top,  #67b1ea 0%, #3680b5 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #67b1ea 0%,#3680b5 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #67b1ea 0%,#3680b5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#67b1ea', endColorstr='#3680b5',GradientType=0 ); /* IE6-9 */	
}

nav{
	float:left;
	z-index:1000;
	position:relative;
	max-width: 1000px;
	width:100%;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#67b1ea+0,3680b5+100 */
background: #67b1ea; /* Old browsers */
background: -moz-linear-gradient(top,  #67b1ea 0%, #3680b5 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #67b1ea 0%,#3680b5 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #67b1ea 0%,#3680b5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#67b1ea', endColorstr='#3680b5',GradientType=0 ); /* IE6-9 */
}

nav ul{
	list-style: none;
	margin: 0;
	padding-left: 0;	
}

nav li{
	float:left;
	position:relative;
	color:#FFF;
	font-family: 'Trirong:300', serif;
	font-weight:bold;
	font-size:13px;
}

nav li a{
	float:left;
	padding:10px 12px;
	display:block;
	text-decoration:none;
	color:#FFF;
	font-family: 'Trirong:300', serif;
	font-weight:bold;
	font-size:13px;
}

nav li a:hover{
	background-color: rgba(0, 0, 0, 0.3);	
}

nav a:hover{
	background-color: rgba(0, 0, 0, 0.3);	
}

.current{
	background-color: rgba(0, 0, 0, 0.3);
}


}


/* Diseño escritorio: de 769 px hasta un máximo de 1232 px.  Hereda estilos de: Diseño movil y Diseño tableta. */

@media only screen and (min-width: 769px) {

.gridContainer {
	width:100%;
    max-width:100%;
	padding-left: 0px;
	padding-right: 0px;
	margin:0 auto;
}

#contenedor{
	width:100%;
	min-height:100%;
	margin:0 auto;
}

#cabecera{
	background-position:center;
	background-size:cover;
	margin:0 auto;
	float:left;
	width:100%;
	height:auto;
}

#sello{
	float:left;
	width: 230px;
	height: 200px;
	margin-left: 25%;
	margin-top: 20px;
	z-index: 1;
	position: absolute;
}

#centrarlogos{
	float:left;
	position:absolute;
	margin-top:70px;
	width:1500px;
	height:auto;
	left:50%;
	margin-left:-750px;
	margin-bottom:0px;
}

#logo{
	float:left;
	width: 500px;
    height: 600px;
    text-indent: -50000px;
    background-image:url(../Imagenes/edificioh.png)
}

#logo a{
	float:left;
	position:relative;
	width:160px;
	height:160px;
	left:50%;
	margin-left:-80px;
	margin-top:400px;
	background-image:url(../Imagenes/identidadheaderh.png);
	text-indent:-50000px;	
}

#claroh{
	float:left;
	width: 500px;
    height: 600px;
    text-indent: -50000px;
    background-image:url(../Imagenes/clarocol.png);
}

#claroh a{
	float:left;
	position:relative;
	width:160px;
	height:160px;
	left:50%;
	margin-left:-80px;
	margin-top:400px;
	background-image:url(../Imagenes/clarohh.png);
	text-indent:-50000px;
}

#azudh{
	float:left;
	width: 500px;
    height: 600px;
    text-indent: -50000px;
    background-image:url(../Imagenes/azudcol.png);
}

#azudh a{
	float:left;
	position:relative;
	width:160px;
	height:160px;
	left:50%;
	margin-left:-80px;
	margin-top:400px;
	background-image:url(../Imagenes/azudhh.png);
	text-indent:-50000px;
}

.menu_bar{display:none;}

.menu{
	margin-top:16px;
	float:right;
	width:600px;
	height:34px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#67b1ea+0,3680b5+100 */
background: #67b1ea; /* Old browsers */
background: -moz-linear-gradient(top,  #67b1ea 0%, #3680b5 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #67b1ea 0%,#3680b5 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #67b1ea 0%,#3680b5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#67b1ea', endColorstr='#3680b5',GradientType=0 ); /* IE6-9 */	
}

nav{
	float:left;
	z-index:1000;
	position:absolute;
	max-width: 1000px;
	width:100%;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#67b1ea+0,3680b5+100 */
background: #67b1ea; /* Old browsers */
background: -moz-linear-gradient(top,  #67b1ea 0%, #3680b5 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #67b1ea 0%,#3680b5 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #67b1ea 0%,#3680b5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#67b1ea', endColorstr='#3680b5',GradientType=0 ); /* IE6-9 */
}

nav ul{
	list-style: none;
	margin: 0;
	padding-left: 0;	
}

nav li{
	float:left;
	position:relative;
	color:#FFF;
	font-family: 'Trirong:300', serif;
	font-weight:bold;
	font-size:15px;
}

nav li a{
	float:left;
	padding:10px 15px;
	display:block;
	text-decoration:none;
	color:#FFF;
	font-family: 'Trirong:300', serif;
	font-weight:bold;
	font-size:15px;
}

nav li a:hover{
	background-color: rgba(0, 0, 0, 0.3);	
}

nav a:hover{
	background-color: rgba(0, 0, 0, 0.3);	
}

.current{
	background-color: rgba(0, 0, 0, 0.3);
}

}