/* CSS Document */
/* Resetear CSS ---------------------------------------------------*/
html, body, div, span, applet, object, iframe, table, caption,
tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins,
kbd, q, s, samp, small, strike, sub, sup, tt, var,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
acronym, address, big, cite, code, dl, dt, dd, ol, ul, li,
/*fieldset,*/ form, label, legend {
	border:0;
	font-family:inherit;
	font-size:100%;
	font-style:inherit;
	font-weight:inherit;
	margin:0;
	outline:0;
	padding:0;
	vertical-align: baseline;
}
body {background:#FFF; line-height:normal;}
/*ol, ul {list-style:none;}*/
table {border-collapse:separate; border-spacing:0;}
caption, th {font-weight:normal; text-align:left;}
blockquote:before, blockquote:after, q:before, q:after {content:"";}
blockquote, q {quotes:"" "";}

/* ----------------------------------------------------------------*/

/* Configurar Tags que usare --------------------------------------*/
@font-face {font-family:iconos; src:url(../libs/iconos.woff);}
p {margin:15px 0}
ul {padding:5px 0 15px 20px;}
ol {padding:5px 0 15px 20px;}
table {border-spacing: 2px;}
td {padding:2px; /*vertical-align:middle*/}
small {font-size:12px}
* {box-sizing:border-box;}

/* ----------------------------------------------------------------*/

body {background:url(../imagenes/fondo.jpg) no-repeat top center fixed #000; background-size:cover; color:#F2F2F2; font-family:Arial, Helvetica, sans-serif; font-size:16px; line-height:22px;}
a {color:#60BCD3; cursor:pointer; text-decoration:underline;}
a:hover {color:#006680; text-decoration:none;}
h1, .SubTitulo1 {color:#60BCD3; font-size:22px;}
h2, .SubTitulo2 {color:#006680; font-size:20px;}
h3, .SubTitulo3 {color:#60BCD3; font-size:18px; font-weight:bold;}
h4, .SubTitulo4 {color:#60BCD3; font-weight:bold;}
.Rojo {color:#CC0000}
.BRojo {color:#CC0000; font-weight:bold;}
.Tachado {text-decoration:line-through;}
.Tabla td {padding:5px; vertical-align:middle;}
hr {background:#BBB; border:none; height:2px; margin:20px auto;}


/*MAQUETACION Y CONFIGURACION*/

/* Contenedores ---------------------------------------------------*/
.contenedor {margin:0 auto; max-width:1440px; width:100%;}
.contenedor1, .contenedor2 {margin:0 auto; overflow:auto; padding:100px 0; width:100%;}
.contenedor2 {background:rgba(255,255,255,.05);}
.contenedor983 {margin:0 auto; max-width:983px; width:90%;}

.Col1, .Col2, .Col3 {display:inline-block; padding:5px; vertical-align:top; width:100%;}
.Col2 {width:calc(50% - 4px);}
.Col3 {width:calc(33.333% - 6px);}

header {background:#111; border-bottom:3px solid #006680; color:#333; left:0; top:0; position:fixed; width:100%; z-index:2;}

.Fondo1 {background:url(../imagenes/f1.jpg);}
.Fondo2 {background:url(../imagenes/f2.jpg);}
.Fondo3 {background:url(../imagenes/f3.jpg);}
.Fondo4 {background:url(../imagenes/f4.jpg);}
.Parallax {background-size:cover; background-repeat:no-repeat; background-position:center; background-attachment:fixed;}
 
/* Menu Principal -------------------------------------------------*/
.Menu > .toggle {font-family:iconos;}
.toggle, [id^=drop] {display:none;}

/* Giving a background-color to the nav container. */
nav {padding:1px 10px 0 10px; width:100%;}
nav ul {margin:0; padding:0;}
nav label {font-weight:normal;}

#Logo {display:inline-block; margin-top:5px; overflow:auto; text-decoration:none; width:170px;}
#Logo .eslogan {color:#333; display:inline-block; font-size:13px; margin-top:15px;}
#Logo img {float:left; height:40px; margin-right:5px;}

/* Since we'll have the "ul li" "float:left"
 * we need to add a clear after the container. */

nav:after {content:''; display:table; clear:both;}

/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */
nav ul {float:right; padding:0; margin:0; list-style:none; position:relative;}
	
/* Positioning the navigation items inline */
nav ul li {display:inline-block; margin:0px; float:left;}
/*nav >ul>li {background:#60BCD3;}*/
nav ul ul li {background:#EEE;}

/* Styling the links */
nav ul a {display:block; padding:12px; color:#999; font-size:14px; text-decoration:none;}
nav ul ul a {font-size:13px; padding:5px 8px;}
nav > ul > li:hover {background:#DDD; color:#000;}
nav ul li ul li:hover {background:#DDD;}

/* Background color change on Hover */
nav ul a:hover {background:#DDD; color:#000;}
nav ul ul a:hover {background:#60BCD3; color:#FFF;}

/* Hide Dropdowns by Default
 * and giving it a position of absolute */
nav ul ul {display:none; position:absolute; 
	/* has to be the same number as the "line-height" of "nav a" */
	/*top: 60px;*/
}
	
/* Display Dropdowns on Hover */
nav ul li:hover > ul {display:inherit;}
	
/* Fisrt Tier Dropdown */
nav ul ul li {float:none; display:list-item; position:relative; width:170px;}

/* Second, Third and more Tiers	
 * We move the 2nd and 3rd etc tier dropdowns to the left
 * by the amount of the width of the first tier.
*/
nav ul ul ul li {background:#DDD; position:relative; top:-32px;
	/* has to be the same number as the "width" of "nav ul ul li" */ 
	left:170px;
}

/* Change ' +' in order to change the Dropdown symbol */
li > a:after {content:' +';}
li > a:only-child:after {content: '';}


/* Media Queries
--------------------------------------------- */

@media all and (max-width : 700px) {
	/* Hide the navigation menu by default */
	/* Also hide the  */
	.toggle + a, .menu {display:none;}

	/* Stylinf the toggle lable */
	.toggle {color:#444; cursor:pointer; display:inline-block; margin:0; padding:14px 10px; vertical-align:top;}

	.toggle:hover {background:#EEE;}
	ul .toggle {width:100%}

	/* Display Dropdown when clicked on Parent Lable */
	[id^=drop]:checked + ul {display:block; width:100%;}

	/* Change menu item's width to 100% */
	nav ul li {display:block; width:100%;}

	nav ul ul .toggle, nav ul ul a {padding:5px 40px;}

	ul .toggle:hover, nav ul a:hover, nav ul ul ul a {background:#EEE;}

	nav ul ul ul a {padding:0 60px;}
	nav ul ul ul a:hover {padding:0 60px; background:#006680;}

	/*nav ul li ul li .toggle, nav ul ul a, nav ul ul ul a {padding:14px 20px; color:#FFF; font-size:14px;}*/

	nav ul ul a:hover {background:#EEE; color:#333;}
	nav ul li ul li .toggle, nav ul ul a {background:#DDD;}

	/* Hide Dropdowns by Default */
	nav ul ul {float:none; position:static; color:#FFF;
		/* has to be the same number as the "line-height" of "nav a" */
	}
		
	/* Hide menus on hover */
	nav ul ul li:hover > ul, nav ul li:hover > ul {display:none;}
		
	/* Fisrt Tier Dropdown */
	nav ul ul li {display:block; width:100%;}

	nav ul ul ul li {position:static;
	/* has to be the same number as the "width" of "nav ul ul li" */ 
	}
}

/* Grid -----------------------------------------------------------*/
.Grid, .GridProductos, .GridGalerias, .GridFotos {display:grid; grid-gap:20px; grid-template-columns:repeat(auto-fit, minmax(310px, 1fr)); justify-item:start;}
.GridProductos {grid-gap:15px; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));}
.GridGalerias {grid-gap:10px; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));}
.GridFotos {grid-gap:10px; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));}

.Grid2 {display:grid; grid-gap:40px; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); justify-item:start;}

/* Pie ------------------------------------------------------------*/
.DivArregla {clear:both;}
footer {background:#111; border-top:4px solid #006680; clear:both; color:#F2F2F2; margin:0 auto; overflow:auto; padding:10px;}
footer a {color:#F2F2F2; text-decoration:none;}
footer a:hover {color:#60BCD3; text-decoration:underline;}

/* Botones sociales -----------------------------------------------*/
a.B-Social {color:#777; font-family:iconos; font-size:24px; margin-right:10px; text-decoration:none;}
a.B-Social:hover {color:#A985AD;}

/* Botones generales ----------------------------------------------*/
a.BotonGral {background:#67486B; border-radius:5px; color:#FFF; display:inline-block; margin:10px; padding:5px 8px; text-decoration:none;}
a.BotonGral:hover {background:#95699A;}

.Boton1 {background:none; border:1px solid #555; border-radius:4px; color:#444; height:40px; margin:10px; padding:8px; text-decoration:none;}
.Boton1:hover {background:#60BCD3; border:1px solid #60BCD3; color:#FFF;}
.Boton2 {background:#006680; border:1px solid #006680; border-radius:4px; color:#FFF; height:40px; margin:10px; padding:8px; text-decoration:none;}
.Boton2:hover {background:#60BCD3; border:1px solid #60BCD3; color:#FFF;}

/* Marco del Título -----------------------------------------------*/
.MarcoTitulo {border-radius:14px; box-shadow:3px 3px 20px #60BCD3; color:#60BCD3; font-size:26px; margin-bottom:20px; padding:10px; text-align:center;}
.MarcoTitulo:before {content:'@'; font-family:iconos; font-size:30px; margin-right:10px; vertical-align:middle;}

/* Marcos Varios --------------------------------------------------*/
.MarcoVarios, .MarcoMitad, .MarcoTercio {background:rgba(255,255,255,.85); border-radius:5px; overflow:auto; padding:10px;}
.MarcoMitad, .MarcoTercio {display:inline-block; margin:.5%; vertical-align:top; width:calc(95% / 2);}
.MarcoTercio {width:calc(92% / 3);}

.MarcoOK, .MarcoError, .MarcoAlerta, .MarcoInfo {background:#D4FFCD; border:1px solid #CCC; border-radius:6px; color:#000; padding:10px;}
.MarcoError {background:#FFD2D3;}
.MarcoAlerta {background:#FEFCCB;}
.MarcoInfo {background:#DBECFF;}
.MarcoOK:before, .MarcoError:before, .MarcoAlerta:before, .MarcoInfo:before {color:#3A9805; content:'1'; font-family:iconos; font-size:32px; line-height:32px; margin-right:10px; vertical-align:middle;}
.MarcoError:before {color:#CC0000; content:'2';}
.MarcoAlerta:before {color:#EBAF00; content:'3';}
.MarcoInfo:before {color:#0B4BA3; content:'4';}

/* Servicios ------------------------------------------------------*/
.GridServicios {display:grid; grid-gap:20px; grid-template-columns:repeat(auto-fit, minmax(310px, 1fr)); justify-item:start;}
.Servicio {color:#FFF; text-align:center; text-decoration:none;}
.Servicio:hover {border-bottom:1px solid #60BCD3; border-radius:6px; color:#FFF;}
.Servicio span {color:#60BCD3; font-weight:bold;}
.Servicio img {margin:auto 0; width:70px;}

.ImgServicio {border:2px solid #60BCD3; border-radius:50%; box-shadow:3px 3px 20px #60BCD3; max-width:45%;}

/* Iconos ----------------------------------------------------------*/
.Iconos, .Iconos2 {border:4px solid #67486B; border-radius:50%; color:#444; display:inline-block; font-family:iconos; font-size:52px; line-height:52px; padding:15px; vertical-align:middle;}
.Iconos2 {float:left; margin-right:15px;}
.Iconos0 {color:#60BCD3; display:inline-block; font-family:iconos; font-weight:normal; vertical-align:middle;}
.IconosMenu {font-family:iconos;}

/* Formularios-----------------------------------------------------*/
fieldset {border-radius:6px;}
input[type="text"], input[type="number"], input[type="email"], input[type="password"], textarea, select {border:1px solid #CCC; border-radius:5px; height:24px; padding:0 5px;}
input:focus, textarea:focus {background:#F5F5F5;}
textarea {height:130px;}

input[type="button"], input[type="submit"], button {background:#006680; border:none; border-radius:4px; color:#FFF; cursor:pointer; font-size:14px; padding:9px 10px;}
input[type="button"]:hover, input[type="submit"]:hover, button:hover {background:#60BCD3; border:none;}
button {margin-right:10px;}

select {overflow:hidden;}
select option {padding:5px;}

form div[id^="div_"] {color:#CC0000; font-size:13px;}

/*Para formularios 2*/
.Formulario input[type="text"], .Formulario input[type="number"], .Formulario input[type="email"], .Formulario input[type="password"], .Formulario textarea, .Formulario select {color:#FFF; background:#444; border:1px solid #666; height:32px; padding:0 5px; width:99%;}
.Formulario textarea {height:130px;}
.Formulario input:focus, .Formulario textarea:focus {background:#444;}

/* Encuestas ------------------------------------------------------*/
.Encuesta {color:#555; margin:0 auto; max-width:800px; width:90%;}
.Encuesta .Respuesta {font-weight:bold;}
.Encuesta .BarraPorcentaje {background:#CCC; box-shadow:1px 1px 1px #777; height:12px;}
.Encuesta .BarraPorcentaje, .Encuesta .Total {display:inline-block;}
.Encuesta .Total {font-size:12px;}

/* Flotar Imagenes ------------------------------------------------*/
.flotarimgder {float:right; margin-left:10px;}
.flotarimgizq {float:left; margin-right:10px;}

/* Sombra ---------------------------------------------------------*/
.Sombra {box-shadow:2px 2px 10px #000;}
.Radio {border-radius:6px;}
.Radio2 {border-radius:5px;}

/* Viñetas --------------------------------------------------------*/
.Vineta1 li {
	list-style:none;
	padding:8px 0 8px 10px;
}
.Vineta1 li:before {color:#006680; content:'J'; font-family:iconos; margin-right:10px; vertical-align:middle;}

/* Ventana Modal CSS y JQuery -------------------------------------*/
.Ventana-Fondo {background:rgba(0,0,0,0.8); bottom:0; left:0; overflow:auto; position:fixed; right:0; top:0; z-index:1999; display:none;}
.Ventana-Contenedor {height:80vh; margin:-55% auto 0 auto; max-width:700px; min-width:280px; position:relative; width:100%;}
.Ventana-Cabecera {background:#006680; border-bottom:1px solid #FAFAFA; border-radius:5px 5px 0 0; color:#FFF; font-size:18px; padding:10px;}
.Ventana-Contenido {background:#333; max-height:100%; overflow:auto; border-radius:0 0 5px 5px; padding:10px;}
.Ventana-Cerrar {color:#FFF; font-family:iconos; font-size:24px; line-height:1; position:absolute; right:5px; text-decoration:none; top:8px;}
.Ventana-Cerrar:hover {color:#60BCD3;}
.MarcoBotones {background:#E8E8E8; border-radius:0 0 5px 5px; padding:4px; text-align:right;}
.MarcoBotones a, .MarcoBotones input {margin:0 10px;}

/* Otros ----------------------------------------------------------*/
.Overflow {overflow:hidden}
.Ocultar {display:none;}
.BarraEncuesta {background:#CCC; box-shadow:1px 1px 1px #777; display:inline-block; height:12px;}

/* Pantalla menor a 1000 ------------------------------------------*/
@media only screen and (max-width:1000px) {

}

/* IPad 768x1024 --------------------------------------------------*/
@media only screen and (max-width:768px) {
	
}

/* Pantalla menor a 640 -------------------------------------------*/
@media only screen and (max-width:640px) {
	.Col2 {width:100%;}
	.Col3  {width:calc(50% - 2px);}

	.MarcoMitad, .MarcoTercio {width:100%;}
	footer .Modulo {width:calc(100% / 2.15);}
}

/* Galaxy S2 480x800 ----------------------------------------------*/
@media only screen and (max-width:480px) {
	.Col3 {width:100%;}
}

/*Pantalla menor a 360 --------------------------------------------*/
@media only screen and (max-width:360px) {
	.footer.Modulo {width:100%;}
}