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

*{ margin: 0; }


body {
	width:100%;
	min-height:100%;
    margin: 0 auto;
    overflow-x: hidden;
    background-attachment: fixed;
	background-position: center;
	background-size: cover;
	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;
	
	Inspiracion 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;
        overflow-x: hidden;
}

body{padding-top:60px;}

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

#cabecera{
	background-image:url(../Imagenes/planos.png);
	background-position:center;
	background-size:cover;
	position: center;
	float:left;
	width:100%;
	height:300px;
	margin:0 auto;
}

#logo{
	padding-top:60px;
	float: left;
    width: 100%;
    display: flex;
    position: relative;
    align-self: flex-end;
    text-align: center;
    margin: 0 auto;
}

#logo a{
	float: left;
    width: 200px;
    height: 200px;
    margin: 0 auto;
	background-image:url(../Imagenes/identidadheader.png);
	background-position: center;
    background-size: cover;
	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;
}

#contenedor{
	width:100%;
	float:left;
	margin:0 auto;
}

#cuerpo{
	float: left;
    width: 100%;
    display: flex;
    align-self: flex-end;
    text-align: center;
    margin: 0 auto;
}

#contenido{   
	align-self: flex-end;
	text-align:center; 
	float: left;
    width: 1024px;
    height: auto;
    margin: 0 auto;
	padding-top:50px;
	padding-left:20px;
	background-position: center;
	background-size: cover;
}

#descripciones{
    width: 100%;
    height: auto;
    margin: 0 auto;
}

#izq{
	float:left;
	width:150px;
	height:auto;
	margin-bottom:110px;
}

#fila1{float:left; width:100%; height:auto;}

#fila1 a{text-decoration:none; font-style:font-family:'Trirong:400i', serif; font-style:italic; font-size:14px; color:rgba(13, 47, 111, 0.8); text-align:left;}

#fila2{float:left; width:100%; margin-top:100px; height:auto;}

#fila2 a{text-decoration:none; font-style:font-family:'Trirong:400i', serif; font-style:italic; font-size:14px; color:rgba(13, 47, 111, 0.8); text-align:left;}

#fila3{float:left; width:100%; margin-top:100px; height:auto;}

#fila3 a{text-decoration:none; font-style:font-family:'Trirong:400i', serif; font-style:italic; font-size:14px; color:rgba(13, 47, 111, 0.8); text-align:left;}

#titulo{float:left; width:100%; height:auto; margin-bottom:10px;}

#titulo p{text-decoration:none; font-style:font-family:'Trirong:400i', serif; font-style:italic; font-size:22px; color:rgba(13, 47, 111, 0.8); text-align:left;}

#descarga a img{margin-left:10px;}

#plano1{
	float:left;
	width:150px;
	height:150px;
	margin-left:0px;
	border:1px solid rgba(13, 47, 111, 0.8);
}

#plano2{
	float:left;
	width:150px;
	height:150px;
	margin-top:70px;
	margin-left:0px;
	border:1px solid rgba(13, 47, 111, 0.8);
}

#der{
	float:left;
	width:300px;
	height:auto;
	margin-left:0px;
}

#belleza{float:left; width:100%; margin-top:30px;}

#belleza p{font-style:font-family:'Trirong:400i', serif; font-style:italic; font-size:25px; color:rgba(13, 47, 111, 0.8); text-align:left;}

#info{
	float:left;
	margin-top:10px;
	padding-right:10px;
}

#info p{float:left; font-family:'Trirong:400i', serif; font-style:italic; text-align:left; font-size:17px; line-height:22px;}

footer{
	align-self: flex-end;
	text-align:center;
	margin-top:60px;
	float:left;
	width:100%;
	height:auto;
	background-color: /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#d1d4d6+0,b3b6bc+100 */
 	background: #d1d4d6;
    background: -moz-linear-gradient(top, #d1d4d6 0%, #b3b6bc 100%);
    background: -webkit-linear-gradient(top, #d1d4d6 0%,#b3b6bc 100%);
    background: linear-gradient(to bottom, #d1d4d6 0%,#b3b6bc 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1d4d6', endColorstr='#b3b6bc',GradientType=0 );
    padding: 20px 0 40px;
    color: #fff;
}

#logos{
	float:left;
	margin:0 auto;
	width:90%;
}

#logos img{
	margin-bottom:50px;
}

}

/* 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;
        overflow-x: hidden;
}

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

#cabecera{
	background-image:url(../Imagenes/planos.png);
	background-position:center;
	background-size:cover;
	position: relative;
	float:left;
	width:100%;
	height:300px;
}

#logo{
	float:left;
	width:5px;
	height:5px;
}

#logo a{
	margin-left:80px;
	margin-top:70px;
	float:left;
	width:200px;
	height:200px;
	text-indent:-50000px;
	background-image:url(../Imagenes/identidadheader.png);	
}

.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;
	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 10px;
	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);
}
	
	
#cuerpo{
	float: left;
    width: 100%;
    display: flex;
    position: relative;
    align-self: flex-end;
    text-align: center;
    margin: 0 auto;
}

#contenido{   
	align-self: flex-end;
	text-align:center; 
	float: left;
    width: 1024px;
    height: auto;
    margin: 0 auto;
	padding-top:50px;
	padding-left:20px;
	background-position: center;
	background-size: cover;
}

#descripciones{
    width: 70%;
    height: auto;
    margin: 0 auto;
}

#izq{
	float:left;
	width:auto;
	height:auto;
	margin-bottom:110px;
}

#fila1{float:left; width:100%; height:auto;}

#fila1 a{text-decoration:none; font-style:font-family:'Trirong:400i', serif; font-style:italic; font-size:16px; color:rgba(13, 47, 111, 0.8); text-align:left;}

#fila2{float:left; width:100%; margin-top:145px; height:auto;}

#fila2 a{text-decoration:none; font-style:font-family:'Trirong:400i', serif; font-style:italic; font-size:16px; color:rgba(13, 47, 111, 0.8); text-align:left;}

#fila3{float:left; width:100%; margin-top:145px; height:auto;}

#fila3 a{text-decoration:none; font-style:font-family:'Trirong:400i', serif; font-style:italic; font-size:16px; color:rgba(13, 47, 111, 0.8); text-align:left;}

#titulo{float:left; width:100%; height:auto; margin-bottom:10px;}

#titulo p{text-decoration:none; font-style:font-family:'Trirong:400i', serif; font-style:italic; font-size:22px; color:rgba(13, 47, 111, 0.8); text-align:left;}

#descarga a img{margin-left:10px;}

#plano1{
	float:left;
	width:100px;
	height:100px;
	margin-left:5px;
	border:1px solid rgba(13, 47, 111, 0.8);
}

#plano2{
	float:left;
	width:100px;
	height:100px;
	margin-left:40px;
	border:1px solid rgba(13, 47, 111, 0.8);
}

#der{
	float:left;
	width:300px;
	height:auto;
        margin-top:50px;
	margin-left:0px;
}

#belleza{float:left; width:200px;}

#belleza p{font-style:font-family:'Trirong:400i', serif; font-style:italic; font-size:25px; color:rgba(13, 47, 111, 0.8); text-align:left;}

#info{
	float:left;
	margin-top:15px;
}

#info p{float:left; font-family:'Trirong:400i', serif; font-style:italic; text-align:left; font-size:17px; line-height:22px;}
	
	
footer{
	align-self: flex-end;
	text-align:center;
	margin-top:60px;
	float:left;
	width:100%;
	height:auto;
	background-color: /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#d1d4d6+0,b3b6bc+100 */
 	background: #d1d4d6;
    background: -moz-linear-gradient(top, #d1d4d6 0%, #b3b6bc 100%);
    background: -webkit-linear-gradient(top, #d1d4d6 0%,#b3b6bc 100%);
    background: linear-gradient(to bottom, #d1d4d6 0%,#b3b6bc 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1d4d6', endColorstr='#b3b6bc',GradientType=0 );
    padding: 20px 0 40px;
    color: #fff;
}

#logos {
	float:left;
	width:100%;
	margin:0 auto;
	margin-left:5%;
}

#logos img{
	margin-right:50px;
	margin-bottom:20px;
}

}

/* 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{
	min-height:100%; 
	width:100%; 
	margin:0 auto; 
	overflow-x: hidden;
}

#cabecera{
	background-image:url(../Imagenes/planos.png);
	background-position:center;
	background-size:cover;
	margin:0 auto;
	float:left;
	width:100%;
	height:300px;
}

#logo{
	float:left;
}

#logo a{
	margin-left:100px;
	background-image:url(../Imagenes/identidadheader.png);
	margin-top:60px;
	float:left;
	width:200px;
	height:200px;
	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;
	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);
}

#cuerpo{
	float: left;
    width: 100%;
    display: flex;
    position: relative;
    align-self: flex-end;
    text-align: center;
    margin: 0 auto;
}

#contenido{   
	align-self: flex-end;
	text-align:center; 
	float: left;
    width: 1024px;
    height: auto;
    margin: 0 auto;
	padding-top:50px;
	padding-left:20px;
	background-position: center;
	background-size: cover;
}

#descripciones{
    width: 70%;
    height: auto;
    margin: 0 auto;
}

#izq{
	float:left;
	width:385px;
	height:auto;
	margin-bottom:110px;
}

#fila1{float:left; width:100%; height:auto;}

#fila1 a{text-decoration:none; font-style:font-family:'Trirong:400i', serif; font-style:italic; font-size:16px; color:rgba(13, 47, 111, 0.8); text-align:left;}

#fila2{float:left; width:100%; margin-top:100px; height:auto;}

#fila2 a{text-decoration:none; font-style:font-family:'Trirong:400i', serif; font-style:italic; font-size:16px; color:rgba(13, 47, 111, 0.8); text-align:left;}

#fila3{float:left; width:100%; margin-top:100px; height:auto;}

#fila3 a{text-decoration:none; font-style:font-family:'Trirong:400i', serif; font-style:italic; font-size:16px; color:rgba(13, 47, 111, 0.8); text-align:left;}

#titulo{float:left; width:100%; height:auto; margin-bottom:10px;}

#titulo p{text-decoration:none; font-style:font-family:'Trirong:400i', serif; font-style:italic; font-size:22px; color:rgba(13, 47, 111, 0.8); text-align:left;}

#descarga a img{margin-left:10px;}

#plano1{
	float:left;
	width:150px;
	height:150px;
	margin-left:5px;
	border:1px solid rgba(13, 47, 111, 0.8);
}

#plano2{
	float:left;
	width:150px;
	height:150px;
	margin-left:40px;
	border:1px solid rgba(13, 47, 111, 0.8);
}

#der{
	float:left;
	width:300px;
	height:auto;
        margin-top:0px;
	margin-left:30px;
}

#belleza{float:left; width:100%;}

#belleza p{font-style:font-family:'Trirong:400i', serif; font-style:italic; font-size:25px; color:rgba(13, 47, 111, 0.8); text-align:left;}

#info{
	float:left;
	margin-top:50px;
}

#info p{float:left; font-family:'Trirong:400i', serif; font-style:italic; text-align:left; font-size:17px; line-height:22px;}

footer{
	align-self: flex-end;
	text-align:center;
	margin-top:120px;
	float:left;
	width:100%;
	height:100%;
	background-color: /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#d1d4d6+0,b3b6bc+100 */
 	background: #d1d4d6;
    background: -moz-linear-gradient(top, #d1d4d6 0%, #b3b6bc 100%);
    background: -webkit-linear-gradient(top, #d1d4d6 0%,#b3b6bc 100%);
    background: linear-gradient(to bottom, #d1d4d6 0%,#b3b6bc 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1d4d6', endColorstr='#b3b6bc',GradientType=0 );
    padding: 20px 0 40px;
    color: #fff;
}

#logos {
	float:left;
	width:100%;
	margin:0 auto;
}

#logos img{
	margin-right:100px;
}

}