@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/ 
*/


<style>
@import url"/css/reset.css";
</style>

/*Fuentes...ptsans*/


<style>
@import url('https://fonts.googleapis.com/css?family=PT+Sans');
</style>

<style>
@import url('https://fonts.googleapis.com/css?family=PT+Sans:700');
</style>



@font-face {
	font-family:"PT Sans";
	src:url(../fuentes/PT_Sans/PT_Sans-Web-Regular.ttf);
}

@font-face {
	font-family:"PT Sans-bold";
	src:url(../fuentes/PT_Sans/PT_Sans-Web-Bold.ttf);
}

/*Fuentes...rubik*/

<style>
@import url('https://fonts.googleapis.com/css?family=Rubik:500');
</style>

@font-face {
	font-family:"Rubik-Medium";
	src:url(../fuentes/Rubik/Rubik-Medium.ttf);
}

<style>
@import url('https://fonts.googleapis.com/css?family=Rubik:700');
</style>

	@font-face {
	font-family:"Rubik-Bold";
	src:url(../fuentes/Rubik/Rubik-Bold.ttf);
}





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 generales */

body {
	font-family:'PT Sans', sans-serif; margin:0; padding:0; }
	
a {text-decoration:none; list-style:none; color:#FFF; }
a:hover {text-decoration:none; color:#AFC75F; }
a:active {text-decoration:none; color:#AFC75F; }

li { list-style:none; }

#todo { width:100%; margin:auto; clear:both; position:static; position:relative; z-index:50;}

#wrap { width:90%; margin:auto; clear:both; padding:20px; }

#VIDEO { width:90%; margin:auto; }

#VIDEO table { margin:auto;}


/*
	Propiedades de cuadrícula fluida de Dreamweaver
	----------------------------------
	dw-num-cols-mobile:		4;
	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 móvil: 480 px e inferior. */

.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	padding-left: 0%;
	padding-right:0%;
}
#LayoutDiv1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
/* header */

header { width:100%; height:120px; float:left; background:#003340; top:0; left:0; right:0; position:fixed; z-index:100;}

.celular { float:right; padding-left:5%; margin-top:10px; margin-right:5%;}

#subheader {width:90%; margin:auto; padding-top:20px;}

#logotipo {float:left; width:130px; padding:3% 0%; overflow:hidden; }

#todo { padding-top:110px;}


/* menu */

.menuicono { float:right; margin-top:40px; overflow:hidden; position:static;}

.menuicono img { float:right;}


header #subheader nav { text-align:right; color:#FFF; font-size:17px; background:rgba(0,51,64, .9); width:70%; height:100%; float:right; padding:25px; margin-top:0px;}

header #subheader nav a { color:#FFF; }

header #subheader nav a:hover { color:#AFC75F;}

header #subheader nav a:active { color:#AFC75F;}

header #subheader nav ul li { display:block; padding:8%; border-bottom:1px solid #AFC75F;}


/* TODO*/
#imagen { display:none;}
#imagen2 {margin:auto; float:left;}

/*wrap*/

#textoprinc { border-bottom:1px solid #AFC75F;}


#textoprinc article h2 { font-family:'Rubik-Bold', sans-serif; font-weight:700; padding:0; font-size:20px; color:#00596F; line-height:29px; text-align:center;}

#textoprinc article p {font-family:'PT Sans', sans-serif; padding:0; font-size:13px; color:#333; text-align:justify;}

#textoprinc article h3 { font-family:'Rubik', sans-serif; font-weight:700; padding:0; font-size:17px; color:#00596F; text-align:center;}

/* planes*/

#planes article { margin-top: 20px; width:100%; font-family:'PT Sans', sans-serif; padding:0; font-size:13px; color:#333; text-align:center;}

#planes article p {margin-top: -5px;}

#planes h1 {font-family:'Rubik-Bold', sans-serif; font-weight:700; padding:0; font-size:16px; color:#00596F; line-height:20px; text-align:center;}


#planes {width:100%;text-align:center; margin:auto; float:inherit; padding-top:30px; }

#contenedor1 {width:100%;text-align:center; margin:auto; float:inherit;}

#contenedor2 {width:100%;text-align:center; margin:auto; float:inherit;}

#contenedor3 {width:100%;text-align:center; margin:auto; float:inherit;}

#contenedor4 {width:100%;text-align:center; margin:auto; float:inherit;}

#contenedor5 {width:100%;text-align:center; margin:auto; float:inherit;}

/* footer*/

footer { width:100%; color:#FFF; float:left; background:url(../imagenes/footer.png); background-repeat:no-repeat; background-position:center}

footer #contenido { width:80%; margin:auto;}


footer section { float:left; text-align:center; padding-top:10px; padding-right:10px;

}

footer #redes { display:none; width:100%; 
	}
	
	
footer #redes .facebook { width:100px; float:inherit; margin:auto;
	}
	
footer #contacto { width:100%; font-size:12px; text-align: center;

}

	
	footer #copy {  border-top:1px solid #AFC75F;  width:100%; font-size:17px; text-align:center; margin:auto; float:inherit; font-size:12px 
	}


@media only screen and (min-width: 755px) {
.gridContainer {
	width: 100%;
	padding-left: 0%;
	padding-right: 0%;
}
#LayoutDiv1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

/* header */

header { width:100%; height:130px;}

#logotipo { width:140px; padding:4% 0%}

.celular { float:right; padding-left:5%; margin-top:10px; margin-right:5%;}

#subheader {width:90%; margin:auto; padding-top:20px;}

#todo { padding-top:20px;}

.header2 { width:100%; height:100px; position:fixed; z-index:100; background:rgba(0,51,64, .9);}

.header2 #logotipo { width:120px; padding:0; margin-top:0px;}

.header2 #subheader nav { font-size:13px; padding:10px; margin-top:10px;}

.header2 .celular {display:none;}


/* menú */

.menuicono {display:none;}

header #subheader nav { display:block; text-align:right; color:#FFF; font-size:14px; background:none; float:right; padding-top:0; margin-top:39px; }

header #subheader nav a { color:#FFF; }

header #subheader nav a:hover { color:#AFC75F;}

header #subheader nav a:active { color:#AFC75F;}

header #subheader nav ul li { display:inline; float:right; padding:1%; border-bottom:none; border-right:1px solid #AFC75F; padding-right:10px; padding-left:10px; }

/*todo */

#imagen2{ display:none;}
#imagen { display:block; width:100%; margin:0; position:relative;}

/*wrap*/

#textoprinc { border-bottom:1px solid #AFC75F;}

#textoprinc article h2 { font-family:'Rubik-Bold', sans-serif; font-weight:700; padding:0; font-size:22px; color:#00596F; line-height:29px; text-align:center;}

#textoprinc article p {font-family:'PT Sans', sans-serif; padding:0; font-size:15px; color:#333; text-align:justify;}

#textoprinc article h3 { font-family:'Rubik', sans-serif; font-weight:700; padding:0; font-size:18px; color:#00596F; line-height:29px; text-align:center;}

/*planes*/

#planes { display:inline; margin:auto;}

#contenedor1 { width:29%; float:left; padding:2%;}

#contenedor2 { width:29%; float:left; padding:2%;}

#contenedor3 { width:29%; float:left; padding:2%;}

#contenedor4 { width:29%; float:left;padding:2%; }

#contenedor5 { width:29%; float:left;padding:2%;  }


#contenedor6 { width:29%; float:left;padding:2%;  }



#planes article { font-family:'PT Sans', sans-serif; padding:0; font-size:13px; color:#333; text-align:center;}

#planes h1 { margin-top:-10px; font-family:'Rubik-Bold', sans-serif; font-weight:700; padding:0; font-size:16px; color:#00596F; line-height:20px; text-align:center;}

/* footer*/

footer { width:100%; height:190px; color:#FFF; float:left; background:url(../imagenes/footer.png); background-repeat:no-repeat; background-position:center}

footer #contenido { width:80%; margin:auto;}


footer section { float:left; text-align:center; padding-top:10px; padding-right:10px;

}

footer #redes { display:inherit; width:30%; 
	}
	
footer #redes .facebook {  width:130px;float:right; 
	}
	
footer #contacto { width:65%; font-size:15px; text-align: left;

	}
	
footer #copy {  border-top:1px solid #AFC75F;  width:100%; font-size:17px; text-align:center; margin:auto; float:inherit; font-size:15px 
	}

}

/* Diseño tableta: de 481 px a 768 px. Hereda estilos de: Diseño móvil. */

@media only screen and (min-width: 860px) {
.gridContainer {
	width: 100%;
	padding-left: 0%;
	padding-right: 0%;
}
#LayoutDiv1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

/* header */

header { width:100%; height:150px;}

.celular { float:right; padding-left:5%; margin-top:10px; margin-right:5%;}

#subheader {width:90%; margin:auto; padding-top:20px;}

#logotipo {float:left; width:150px; padding:3% 0%; }

#todo { padding-top:0px;}

.header2 { width:100%; height:110px; position:fixed; z-index:100; background:rgba(0,51,64, .9);}

.header2 #logotipo { width:150px; padding:0; margin-top:0px;}

.header2 #subheader nav { font-size:14px; padding:10px; margin-top:10px;}

.header2 .celular {display:none;}

/* menu */

.menuicono {display:none;}

header #subheader nav { display:block; text-align:right; color:#FFF; font-size:15px; background:none; height:3%; float:right; padding-top:0; margin-top:50px; }

header #subheader nav a { color:#FFF; }

header #subheader nav a:hover { color:#AFC75F;}

header #subheader nav a:active { color:#AFC75F;}

header #subheader nav ul li { display:inline; float:right; padding:1%; border-bottom:none; border-right:1px solid #AFC75F; padding-right:9px; padding-left:9px; }

/*todo */

#imagen2{ display:none;}
#imagen { display:block; width:100%; margin:0; position:relative;}

/*wrap*/

#textoprinc { border-bottom:1px solid #AFC75F;}

#textoprinc article h2 { font-family:'Rubik-Bold', sans-serif; font-weight:700; padding:0; font-size:22px; color:#00596F; line-height:29px; text-align:center;}

#textoprinc article p {font-family:'PT Sans', sans-serif; padding:0; font-size:15px; color:#333; text-align:justify;}

#textoprinc article h3 { font-family:'Rubik', sans-serif; font-weight:700; padding:0; font-size:19px; color:#00596F; line-height:29px; text-align:center;}

/*planes*/

#planes { display:inline; margin:auto;}

#contenedor1 { width:29%; float:left; padding:2%;}

#contenedor2 { width:29%; float:left; padding:2%;}

#contenedor3 { width:29%; float:left; padding:2%;}

#contenedor4 { width:29%; float:left;padding:2%; }

#contenedor5 { width:29%; float:left;padding:2%;  }


#contenedor6 { width:29%; float:left;padding:2%;  }



#planes article { font-family:'PT Sans', sans-serif; padding:0; font-size:14px; color:#333; text-align:center;}

#planes h1 { margin-top:-10px; font-family:'Rubik-Bold', sans-serif; font-weight:700; padding:0; font-size:16px; color:#00596F; line-height:20px; text-align:center;}

/* footer*/

footer { width:100%; height:170px; color:#FFF; float:left; background:url(../imagenes/footer.png); background-repeat:no-repeat; background-position:center}

footer #contenido { width:80%; margin:auto;}


footer section { float:left; text-align:center; padding-top:10px; padding-right:10px;

}

footer #redes { display:inherit; width:30%; 
	}
	
footer #redes .facebook {  width:130px;float:right; 
	}
	
footer #contacto { width:65%; font-size:15px; text-align: left;

	}
	
	footer #copy { border-top:1px solid #AFC75F;  width:100%; font-size:17px; text-align:center; margin:auto; float:inherit;
	}

}

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

@media only screen and (min-width: 1030px) {
.gridContainer {
	max-width: 2000px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	padding-left: 0%;
	padding-right: 0%;
	display: block;
}
#LayoutDiv1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

/* header */


header { width:100%; height:160px;}

.celular { float:right; padding-left:5%; margin-top:10px; margin-right:5%;}

#subheader {width:90%; margin:auto; padding-top:20px;}

#logotipo {float:left; width:190px; padding:2% 0%; }

#todo { padding-top:0px;}

.header2 { width:100%; height:110px; position:fixed; z-index:100; background:rgba(0,51,64, .9);}

.header2 #logotipo { width:150px; padding:0; margin-top:0px;}

.header2 #subheader nav { font-size:14px; padding:10px; margin-top:10px;}

.header2 .celular {display:none;}

/* menu */

.menuicono {display:none;}

header #subheader nav { display:block; text-align:right; color:#FFF; font-size:17px; background:none; height:5%; float:right; padding-top:0; margin-top:60px; }

header #subheader nav a { color:#FFF; }

header #subheader nav a:hover { color:#AFC75F;}

header #subheader nav a:active { color:#AFC75F;}

header #subheader nav ul li { display:inline; float:right; padding:1%; border-bottom:none; border-right:1px solid #AFC75F; padding-right:14px; padding-left:14px;}

/*todo */

#imagen2{ display:none;}
#imagen { display:block; width:100%; margin:0; position:relative;}

/*wrap*/


#textoprinc article h2 { font-family:'Rubik-Bold', sans-serif; font-weight:700; padding:0; font-size:24px; color:#00596F; line-height:29px; text-align:center;}

#textoprinc article h3 { font-family:'Rubik', sans-serif; font-weight:700; padding:0; font-size:19px; color:#00596F; line-height:29px; text-align:center;}

#textoprinc article p {font-family:'PT Sans', sans-serif; padding:0; font-size:17px; color:#333; text-align:justify;}

/*planes*/

#planes { display:inline; margin:auto;}

#contenedor1 { width:29%; float:left; padding:2%; padding-bottom:0;}

#contenedor2 { width:29%; float:left; padding:2%;}

#contenedor3 { width:29%; float:left; padding:2%;}

#contenedor4 { width:29%; float:left;padding:2%; }

#contenedor5 { width:29%; float:left;padding:2%;  }


#contenedor6 { width:29%; float:left;padding:2%;  }



#planes article { font-family:'PT Sans', sans-serif; padding:0; font-size:15px; color:#333; text-align:center;}

#planes h1 { margin-top:-10px; font-family:'Rubik-Bold', sans-serif; font-weight:700; padding:0; font-size:18px; color:#00596F; line-height:20px; text-align:center;}






/* footer*/

footer { width:100%; height:190px; color:#FFF; float:left; background:url(../imagenes/footer.png); background-repeat:no-repeat; background-position:center}

footer #contenido { width:80%; margin:auto;}


footer section { float:left; text-align:center; padding-top:10px; padding-right:10px;

}

footer #redes { display:inherit; width:34%; 
	}
	
footer #redes .facebook { width:180px; float:right; 
	}
	
footer #contacto { width:60%; font-size:17px; text-align: left;
	}
	
	footer #copy { width:100%; font-size:17px; text-align:center; margin:auto; float:inherit; border-top:1px solid #AFC75F; 
	}
}