/* 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);}
@font-face {font-family:xscale; src:url(../libs/Xscale.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:10px}
* {box-sizing:border-box;}

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

body {background:url(../imagenes/fondo.jpg) no-repeat top center fixed #F2F2F2; background-size:cover; color:#444; font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:22px;}
a {color:#0F516F; text-decoration:underline;}
a:hover {color:#CC0000; text-decoration:none;}
h1, .SubTitulo1 {color:#0F516F; font-size:20px;}
h2, .SubTitulo2 {color:#444; font-size:18px; font-weight:bold;}
h3, .SubTitulo3 {color:#0F516F; font-size:16px; font-weight:bold;}
h4, .SubTitulo4 {color:#444; font-weight:bold;}
h5, .SubTitulo5 {color:#0F516F; font-weight:bold;}
.BCampos, label {color:#158F98; font-weight:bold;}
.Rojo {color:#CC0000}
.BRojo {color:#CC0000; font-weight:bold;}
.Catego {color:#FF5108; font-weight:bold;}
.Tabla td {padding:5px; vertical-align:middle;}
hr {background:#158F98; border:none; height:3px; margin:20px auto;}

/*MAQUETACION Y CONFIGURACION*/

/* Contenedores ---------------------------------------------------*/
.contenedor {margin:0 auto; max-width:1440px;}
.contenedor1, .contenedor2 {margin:0 auto; max-width:1440px; overflow:auto; padding:30px 0; width:100%;}
.contenedor2 {background:rgba(232, 232, 232,.7);}
.contenedor983 {margin:0 auto; width:90%;}
section {text-align:justify; width:100%;}

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

/* Pie ------------------------------------------------------------*/
.Contador, .DivArregla {clear:both;}
.MarcoPie {background:#363B3F; border-top:3px solid #158F98; clear:both; color:#F2F2F2; margin-top:20px; overflow:auto; padding:10px;}
.MarcoPie h3 {color:#158F98;}
.MarcoPie a {color:#34ACCE;}
.MarcoPie .Modulo {display:inline-block; color:#999; margin:1%; vertical-align:top; width:calc(100% / 3.27);}
.MarcoPie .Modulo a {color:#CCC; text-decoration:none;}
.MarcoPie .Modulo a:hover {color:#FFF; text-decoration:none;}

/* Colores G3Bio --------------------------------------------------*/
.Color1, .Color2, .Color3 {background:#0F516F;}
.Color2 {background:#158F98;}
.Color3 {background:#FF5108;}
.ColorM {color:#FFF; display:inline-block; margin:0; padding:10px; text-align:center; vertical-align:top; width:33.33333%;}

header {background:#E8E8E8; box-shadow: inset 0 0 0 2px #DDD; color:#333; left:0; top:0; width:100%; z-index:2;}

/* Menu Principal -------------------------------------------------*/
.toggle, [id^=drop] {display:none;}

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

#Logo {display:inline-block; overflow:auto; text-decoration:none;}
#Logo .eslogan {color:#333; display:inline-block; font-size:12px; line-height:16px; margin-top:10px; width:80px;}
#Logo img {float:left; height:40px; margin:5px 5px 0 5px;}

#Carrito {float:right; padding:12px 15px;}
#Carrito a {text-decoration:none;}
#Carrito a:hover {color:#FF5108; text-decoration:none;}
#Carrito span {font-size:18px;}

/* 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 {margin:0px; display:inline-block; float:left;}
nav >ul>li {background:#158F98;}
nav ul ul li {background:#0F516F;}

/* Styling the links */
nav ul a {display:block; padding:14px 20px; color:#FFF; font-size:14px; text-decoration:none;}
nav ul ul a {font-size:13px; padding:5px 10px;}
nav > ul > li:hover {background:#0F516F;}
nav ul li ul li:hover {background:#0F516F;}

/* Background color change on Hover */
nav ul a:hover {background:#0F516F; color:#FFF;}
nav ul ul a:hover {background:#FF5108;}

/* 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 {width:170px; float:none; display:list-item; position:relative;}

/* 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 {position:relative; top:-60px;
	/* 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 : 768px) {
	/*#logoM {display:block; padding:0; width:100%; text-align:center;}*/

	/* Hide the navigation menu by default */
	/* Also hide the  */
	.toggle + a, .menu {display:none;}

	/* Stylinf the toggle lable */
	.toggle {color:#FFF; cursor:pointer; display:inline-block; margin:0; padding:14px 5px; 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;}

	/*nav ul ul ul a {padding:0 80px;}*/

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

	/*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 li ul li .toggle, nav ul ul a {background:#333;}

	/* 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" */ 
	}
}

.fixed {position:fixed; top:0;}

/* Botones generales ----------------------------------------------*/
.BotonGral {background:#158F98; border-radius:6px; color:#FFF; display:block; padding:4px; text-decoration:none;}
.BotonGral:hover {background:#ff5108;}

/* 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:10px; grid-template-columns:repeat(auto-fit, minmax(200px, 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:20px; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); justify-item:start;}

/* Marco del Título -----------------------------------------------*/
.MarcoTitulo {
	background:url(../imagenes/ico_titulo.png) no-repeat;
	background-position:10px;
	border-bottom:2px solid transparent;
	border-image:linear-gradient(to right, #158F98 0%, rgba(21, 143, 152, 0) 100%);
	border-image-slice: 1;
	color:#444;
	font-size:22px;
	height:40px;
	line-height:40px;
	margin-bottom:20px;
	padding-left:45px;
}

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

.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:'4'; font-family:iconos; font-size:32px; line-height:32px; margin-right:10px; vertical-align:middle;}
.MarcoError:before {color:#CC0000; content:'5';}
.MarcoAlerta:before {color:#EBAF00; content:'6';}
.MarcoInfo:before {color:#0B4BA3; content:'7';}
#Status {position:fixed; right:0; top:50px;}

/* 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 {display:inline-block; font-family:iconos; font-size:16px; font-weight:normal; vertical-align:middle;}

/* Marco Carrito --------------------------------------------------*/
.MarcoCarritoP {background:#DDD; border:1px solid #CCC; border-radius:6px; margin-top:20px; overflow:auto; padding:10px;}

.MarcoCarritoPList {background:#EEE; border:1px solid #CCC; border-radius:6px; font-size:13px; padding:5px;}
.MarcoCarritoPList div {border-top:1px dotted #CCC; padding:10px}
.MarcoCarritoPList table {width:100%;}
.MarcoCarritoPList td {border-bottom:1px solid #CCC; padding:2px; text-align:center; vertical-align:middle}
.MarcoCarritoPList thead tr {font-weight:bold;}
.MarcoCarritoPList tbody tr:nth-child(even) {background:#EEE;}
.MarcoCarritoPList tbody tr:nth-child(odd) {background:#FCFCFC;}

.BotonAgregar, .BotonActualizar, .BotonBorrar {background:#345F8A; border-radius:6px; color:#FFF; display:inline-block; font-size:13px; margin:5px 0px; padding:5px 8px; text-decoration:none;}
.BotonAgregar:hover, .BotonActualizar:hover, .BotonBorrar:hover {background:#4075AA; color:#FFF;}
.BotonActualizar {background:#21399D;}
.BotonActualizar:hover {background:#324DB4;}
.BotonBorrar {background:#8A3340;}
.BotonBorrar:hover {background:#993847;}
.BotonAgregar:before, .BotonActualizar:before, .BotonBorrar:before {content:'8'; font-family:iconos; font-size:18px; vertical-align:middle;}
.BotonActualizar:before {content:'9';}
.BotonBorrar:before {content:'5';}

table .BotonActualizar, table .BotonBorrar {margin:0; padding:1px 3px;}

/* Productos-------------------------------------------------------*/
.CabProducto {background-position:left center; background-repeat:no-repeat; background-size:cover; height:50vh;}
.Producto {text-align:center;ecoration:none;}
.Producto a:hover {color:#444;}
.Producto a:hover .Circulo, .Producto a:hover .Titulo {box-shadow:2px 2px 10px #000;}
.Producto .Circulo {border:5px solid #ff5108; border-radius:50%; display:inline-block; height:150px; overflow:hidden; width:150px;}
.Producto .Titulo {background:#ff5108; border-radius:25px; color:#FFF; display:inline-block; font-family:xscale; font-size:38px; padding:0 10px 10px 10px;}

/* Parallax--------------------------------------------------------*/
.Parallax {background-attachment:fixed; background-repeat:no-repeat; background-size:cover; background-position:center;}
.Bloque1 {background-image:url(../imagenes/bloque2.jpg)}

/* Video embebido--------------------------------------------------*/
.ContenedorVideo {padding-top:100px; padding-bottom:56.25%; position:relative;}
.ContenedorVideo iframe, .ContenedorVideo object, .ContenedorVideo embed {height:100%; left:0; position:absolute; top:0; width:100%;}

/* Tablas de resultados--------------------------------------------*/
.Tabla td, .TablaIndice td {padding:5px; vertical-align:middle}
.TablaIndice thead tr {background:#D6D6D6; color:#444; font-weight:bold; text-align:center;}
.TablaIndice tbody tr:nth-child(even) {background:#E6E6E6;}
.TablaIndice tbody tr:nth-child(odd) {background:#FCFCFC;}
.TablaIndice tbody tr.inactivo {background:#FFD2D3;}
.TablaIndice tbody tr.despublicado {background:#FEFCCB;}

/* Formularios-----------------------------------------------------*/
fieldset {background:rgba(255,255,255,.5); border:1px solid #AAA; border-radius:6px;}
input[type="text"], input[type="email"], input[type="password"], textarea, select {background:#F2F2F2; border:1px solid #BEBEBE; border-radius:5px; height:26px; padding:0 5px;}
input:focus, textarea:focus {background:#FFF; border:1px solid #999;}
textarea {height:130px;}

input[type="button"], input[type="submit"] {background:#158F98; border:none; border-radius:6px; color:#FFF; cursor:pointer; display:inline-block; font-size:15px; font-weight:bold; margin:5px; padding:5px 6px; text-decoration:none; text-shadow:1px 1px 2px #444;}
input[type="button"]:hover, input[type="submit"]:hover {background:#0F516F; color:#FFF;}

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

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

.Form2 input, .Form2 textarea {width:100%;}

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

/* Acordion -------------------------------------------------------*/
.acord-item {border-top:1px dotted #AAA; cursor:pointer;	/*display: block;*/ margin:0;}
.acord-item:last-of-type, .acord-contenedor:last-of-type {border-bottom:1px dotted #AAA; margin-bottom:20px;}
.acord-item a {
	background:url(../imagenes/b_acordion.png) no-repeat 5px 15px;
	display:block;
	color:#888;
	outline:medium none;
	padding:15px 15px 15px 35px;
	text-decoration:none;
	font-size:15px;
	font-weight:bold;
}
.acord-item a:hover {background:url(../imagenes/b_acordion.png) no-repeat 5px 15px rgba(255,255,255,.2);}
.acord-item a:hover, .acord-item.active a, .acord-item.active a:hover {color:#ff5108;}
.acord-item.active {cursor:default;}
.acord-item.active:last-of-type {border-bottom:none; margin-bottom:0;}
.acord-item.active a {background-position:5px -96px; cursor:default;}
.acord-contenedor .acord-contenido {padding:0 20px 25px 40px;}
.acord-contenido {overflow:auto; width:100%;}
.acord-contenido img {border-radius:4px; display:block; max-width:440px; margin-right:10px; width:100%;}

/* 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:8px;}
.Radio2 {border-radius:5px;}

/* Viñetas ---------------------------------------------------------*/
.Vineta1 li {
	background-image: url(../imagenes/vineta1.png);
	background-position: 0 12px;
	background-repeat: no-repeat;
	list-style: none;
	padding:6px 0 6px 15px;
}
.Vineta2 li {
	background-image: url(../imagenes/vineta1.png);
	background-position: left;
	background-repeat: no-repeat;
	border-bottom:1px solid #AAA;
	list-style: none;
	padding:8px 0 8px 15px;
}
.Vineta3 li {list-style:circle; margin-left:20px; padding:0;}

/* Otros ----------------------------------------------------------*/
.Overflow {overflow:hidden}
.Ocultar {display:none;}

/* 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){
	.MarcoPie .Modulo {width:calc(100% / 2.15);}
}

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

	.MarcoPie .Modulo {width:100%;}
}