/* ******************** Reset and HTML5 Stuff *********************** */

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
 margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }

audio, canvas, video { display:inline-block; *display:inline; *zoom:1; }	/* El asterisco es para que solo lo interprete Internet Explorer. */

body {line-height: 1;}

ol, ul {list-style: none;}

blockquote, q {quotes: none;}

blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none; }

table { border-collapse: collapse; border-spacing: 0;}

a:link, a:visited {color:#175E4C;text-decoration:none;}
a:hover {color:#000;}
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }

body {
	font: normal 100% Cambria, Georgia, Serif;
	background-color:#ffffff;
}

b, strong {font-weight: bold;}
i, em {font-style: italic;}

/* ****************************** BOX MODEL A BORDER-BOX ****************************** */

*, *:before, *:after {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}

/* **************************** ESTRUCTURA DE CONTENEDORES **************************** */

#contenedor{
	width:100%;
	max-width:1000px;
	min-width:240px;
	margin:0 auto;
	padding:0;
	text-align:left;
}

#sobrepapel, #bajopapel { width:100%; max-width:1000px; margin:0 auto; display: block; overflow: hidden; }

#idiomas{
	margin:0 auto;
	padding:0;
	text-align: right;
}

#encabezado{
	margin:0 auto;
	padding:0;
}

#papel {
	width:100%;
	max-width:1000px;
	margin:0 auto;
	padding:0px;
	display: block;
	overflow: hidden;
	text-align:left;
	line-height:20px;
	background-color: #ffffff;
/*	background-image:  url(images/barrocotiffany.png);*/
	background-repeat: repeat;
	/*-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: 0px 0px 3px 4px rgba(187, 127, 158, 0.6);
	-moz-box-shadow: 0px 0px 3px 4px rgba(187, 127, 158, 0.6);
	box-shadow: 0px 0px 3px 4px rgba(187, 127, 158, 0.6);
	*/
}

#espacio {display:block; }

header { text-align: center; }

div.user { text-align: right; padding-bottom: 10px;}

#NavegacionPrimaria { text-align: left; }

#wrap {
	width:100%;
	max-width:1000px; 
	margin:0 auto;
	display: block;
	overflow: hidden;
	position: relative;
}

#contenido {
	width:100%;
	max-width:1000px;
	float:left;
	margin:0 auto;
	display:block;
	overflow:hidden;
	text-align: center;
	position: relative;
	padding:20px;
}

aside {
	width: 25%;
/*	width: 240px; */
	float: right;
	margin:0 auto;
	display:block;
	overflow:hidden;
	text-align: center;
	position: relative;
}

.social{
	text-align: center;
}

.icono{
	margin-left: 5px; margin-right: 5px;
	-webkit-border-radius: 37px; -moz-border-radius: 37px; border-radius: 37px;
	-webkit-box-shadow: 3px 3px 3px #000000; -moz-box-shadow: 3px 3px 3px #000000; box-shadow: 3px 3px 3px #000000;
}

.icono:hover {-webkit-box-shadow: inset 3px 3px 3px #000000; -moz-box-shadow: inset 3px 3px 3px #000000; box-shadow: inset 3px 3px 3px #000000;}


.tesela, .tesela_m{
	position:relative;
	width:80%;
	max-width:220px; min-width:180px;
	overflow:hidden;
	display: inline-block;
	margin: 0 auto;
	text-align: center;
	border:1px solid black;
	-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
	-webkit-box-shadow: 5px 5px 5px #000000; -moz-box-shadow: 5px 5px 5px #000000; box-shadow: 5px 5px 5px #000000;
}

.tesela_m{ max-width:160px; min-width:130px;}

.tesela:hover, .tesela_m:hover {-webkit-box-shadow: inset 3px 3px 3px #000000; -moz-box-shadow: inset 3px 3px 3px #000000; box-shadow: inset 3px 3px 3px #000000;}

.tesela:before, .tesela_m:before{
	content: "";
	display: block;
	padding-top: 100%;
}

.content{
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	-webkit-box-shadow: inset 0 0 5px #000000; -moz-box-shadow: inset 0 0 5px #000000; box-shadow: inset 0 0 5px #000000;
}

#footer, #piepagina {
	width:100%;
	max-width:1000px; 
	margin:0 auto;
	display: block;
	overflow: hidden;
	font-family: "Forte", cursive;
	font-weight: normal;
	font-size:1.5rem;
	text-align: center;
	color:#f00;
}

#footer li a { font-size: 80%;}

#footer a:link, a:visited {color:#dddd00;text-decoration:none;}

div.medio {margin:0 0%; float:left; min-width:150px; padding:0 0%;
	-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;
	width:50%;
}

div.tercio {margin:0 0%; float:left; min-width:150px; padding:0 0%;
	-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;
	width:33%;
}

div.tercios {margin:0 0%; float:left; min-width:150px; padding:0 0%;
	-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;
	width:66%;
}

img { max-width:100%; width:auto/9; }


article, div.article{
	background-color:#111111;
	background: -webkit-linear-gradient(315deg, #111 1%, #333 70%, #111);
	background: -moz-linear-gradient(315deg, #111 1%, #333 70%, #111);
	background: -o-linear-background(315deg, #111 1%, #333 70%, #111);
	background: -ms-linear-background(315deg, #111 1%, #333 70%, #111);
	background: linear-gradient(315deg, #111 1%, #555 30%, #111);

	margin:3%; width:94%;
	float:left;
	min-width:150px; padding:2%;
	box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;
	border-radius:7px; -moz-border-radius:7px; -webkit-border-radius:7px;
	box-shadow: 3px 3px 3px #333333; -webkit-box-shadow: 3px 3px 3px #333333; -moz-box-shadow: 3px 3px 3px #333333;
	padding-bottom: 20px;
	border: 5px outset #bbb;
	color: #ddd;
}

article p, div.article p{
	text-indent: 2em;
	margin-bottom: 1em;
}

article p.centro, div.article p.centro{text-indent: 0em;}

article.titulo, div.article.titulo{
	font-weight: bold;
	min-height: 32px;
	padding-left: 40px;
	background-image:  url(images/bullets/articulo_p.png);
	background-repeat: no-repeat;
	background-position: 0 0;
}

article h1, div.article h1 {
	border: solid 1px #114336;
	/*border-top: solid 1px #114336;
	border-bottom: solid 1px #114336;*/
	margin: 10px 0 10px 0;
	padding: 10px;
	background-color: #7FA69B;
	color: #114336;
}

/* ***************************** ESTILO DEL MENU ***************************** */

div.menu nav, ul, li, a  {margin: 0; padding: 0;}

div.menu {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }

div.menu a {text-decoration: none;}

div.menu .container {
    width: 95%;
    max-width: 900px;
    margin: 10px auto;
}

div.menu .toggleMenu {
    display:  none;
    background: #666;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(white), to(black));
    background: -webkit-linear-gradient(top, #175E4C 4%, white 5%, #175E4C, black 95%);
    background: -moz-linear-gradient(top, #175E4C 4%, white 5%, #175E4C, black 95%);
    background: -o-linear-background(top, #175E4C 4%, white 5%, #175E4C, black 95%);
    background: -ms-linear-background(top, #175E4C 4%, white 5%, #175E4C, black 95%);
    background: linear-gradient(top, #175E4C 4%, white 5%, #175E4C, black 95%);
    padding: 10px 15px;
    color: #FFFFFF;
    border-radius:7px; -moz-border-radius:7px; -webkit-border-radius:7px;
    box-shadow: 5px 5px 5px #333333; -webkit-box-shadow: 5px 5px 5px #333333; -moz-box-shadow: 5px 5px 5px #333333;
}

div.menu .nav {
    list-style: none;
    *zoom: 1;
    background:#175E4C;
    background: -webkit-linear-gradient(top, #175E4C 4%, white 5%, #175E4C, black 95%);
    background: -moz-linear-gradient(top, #175E4C 4%, white 5%, #175E4C, black 95%);
    background: -o-linear-background(top, #175E4C 4%, white 5%, #175E4C, black 95%);
    background: -ms-linear-background(top, #175E4C 4%, white 5%, #175E4C, black 95%);
    background: linear-gradient(top, #175E4C 4%, white 5%, #175E4C, black 95%);
    border-radius:7px; -moz-border-radius:7px; -webkit-border-radius:7px;
    box-shadow: 5px 5px 5px #333333; -webkit-box-shadow: 5px 5px 5px #333333; -moz-box-shadow: 5px 5px 5px #333333;
}

div.menu .nav:before, .nav:after { content: " "; display: table;}

div.menu .nav:after { clear: both;}

div.menu .nav ul { list-style: none; width: 9em;}

div.menu .nav a { padding: 10px 15px; color:#FFFFFF;}

div.menu .nav li { position: relative;}

div.menu .nav > li { float: left; /* border-top: 1px solid #104336; */ }

div.menu .nav > li > .parent {
    background-image: url("images/downArrow.png");
    background-repeat: no-repeat;
    background-position: right;
}

div.menu .nav > li > a {display: block;}

div.menu .nav li  ul {position: absolute; left: -9999px;}

div.menu .nav > li.hover > ul {left: 0;}

div.menu .nav li li.hover ul {left: 100%; top: 0;}

div.menu .nav li li a {
    display: block;
    background: #1d7a62;
    position: relative;
    z-index:100;
    border-top: 1px solid #175e4c;
    box-shadow: 3px 3px 3px #333333; -webkit-box-shadow: 3px 3px 3px #333333; -moz-box-shadow: 3px 3px 3px #333333;
}

div.menu .nav li li li a {
    background:#249578;
    z-index:200;
    border-top: 1px solid #1d7a62;
    box-shadow: 2px 2px 2px #333333; -webkit-box-shadow: 2px 2px 2px #333333; -moz-box-shadow: 2px 2px 2px #333333;
}

@media screen and (max-width: 768px) {

    div.menu .active {display: block;}
    
    div.menu .nav {background:#175E4C;}
    
    div.menu .nav > li {float: none;}

    div.menu .nav > li > .parent {background-position: 95% 50%;}

    div.menu .nav li li .parent {
        background-image: url("images/downArrow.png");
        background-repeat: no-repeat;
        background-position: 95% 50%;
    }

    div.menu .nav ul {display: block; width: 100%;}

    div.menu .nav > li.hover > ul , .nav li li.hover ul {position: static;}

    div.menu a.toggleMenu {color: #FFFFFF;}
}


/* **************************** TAMAÑOS DE LETRAS, COLORES, ... **************************** */

/*<style type="text/css">
p.sample {
	font-family: "Forte", cursive;
	font-style: italic;
	font-variant: small-caps;
	font-weight: bold;
	font-size: larger;
	line-height: 150%;
	word-spacing: normal;
	letter-spacing: 0.1ex;
	text-decoration: none;
	text-transform: none;
	text-align: left;
	text-indent: 0ex;
}
</style>

<p class="sample">
You are old, Father William, ...</p>
*/

h1,h2 {
	font-family: "Forte", cursive;
	font-weight: normal;
	line-height: 150%;
	margin-top: 0;
	color: #f00;
}

h1 {font-size:1.5rem; text-align: center;}

h1 em {color: darkgrey; font-size:.5rem;}

h1.titulo{
	width: 95%;
	font-family: "Forte", cursive;
	font-weight: normal;
	font-size:3.5rem;
	color: #fff;
	text-shadow: 0.05em 0.05em 0.1em red; 
	/*border: solid 1px #1c559b;*/
	margin: 10px 0 10px 0;
	margin-left: auto; margin-right: auto;
	padding: 10px;
	/*background-color: #f00;*/
	background-image: url(images/red3b.png);
	background-repeat: repeat;
	/*background-position: top right;
	color: #ff0;
	border: 5px outset #ddd;
	-moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;
	-webkit-box-shadow:  0 0 3px 2px rgba(0, 0, 0, 0.6); -moz-box-shadow:  0 0 3px 2px rgba(0, 0, 0, 0.6); box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.6);
	*/
}

h1.contacto{
	width: 95%;
	font-family: "Forte", cursive;
	font-weight: normal;
	font-size:4.5rem;
	color: #fff;
	text-shadow: 0.05em 0.05em 0.1em red; 
	margin: 10px 0 10px 0;
	margin-left: auto; margin-right: auto;
	padding: 10px;
	background-image: url(images/contacto.jpg);
	background-size: cover;
}

h1.minoristas{
	width: 95%;
	font-family: "Forte", cursive;
	font-weight: normal;
	font-size:4.5rem;
	color: #fff;
	text-shadow: 0.05em 0.05em 0.1em red; 
	margin: 10px 0 10px 0;
	margin-left: auto; margin-right: auto;
	padding: 10px;
	background-image: url(images/minoristas.jpg);
	background-size: cover;
}

h1.productos{
	width: 95%;
	font-family: "Forte", cursive;
	font-weight: normal;
	font-size:4.5rem;
	color: #fff;
	text-shadow: 0.05em 0.05em 0.1em red; 
	margin: 10px 0 10px 0;
	margin-left: auto; margin-right: auto;
	padding: 10px;
	background-image: url(images/productos.jpg);
	background-size: cover;
}

h1.encontrarnos{
	width: 95%;
	font-family: "Forte", cursive;
	font-weight: normal;
	font-size:4.5rem;
	color: #fff;
	text-shadow: 0.05em 0.05em 0.1em red; 
	margin: 10px 0 10px 0;
	margin-left: auto; margin-right: auto;
	padding: 10px;
	background-image: url(images/encontrarnos.jpg);
	background-size: cover;
}

h1.inicio{
	width: 95%;
	font-family: "Forte", cursive;
	font-weight: normal;
	font-size:4.5rem;
	color: #fff;
	text-shadow: 0.05em 0.05em 0.1em red; 
	margin: 10px 0 10px 0;
	margin-left: auto; margin-right: auto;
	padding: 10px;
	background-image: url(images/inicio.jpg);
	background-size: cover;
}

h1.especial {
	width: 85%;
	max-width: 500px;
	margin: 10px 0 10px 0;
	margin-left: auto; margin-right: auto;
	padding: 10px;
	background-color: #66cc33;
	color: #ff0;
	font-size:2rem;
	-moz-border-radius:50px 10px 50px 10px; -webkit-border-radius:50px 10px 50px 10px; border-radius:50px 10px 50px 10px;
	-webkit-box-shadow:  0 0 3px 2px rgba(0, 0, 0, 0.6); -moz-box-shadow:  0 0 3px 2px rgba(0, 0, 0, 0.6); box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.6);
	text-shadow: 1px 1px #333, -1px -1px #fff;
	-webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -o-transform: rotate(-5deg);
}

h2 {
	font-size:1.5rem;
	//text-decoration: underline;
}

h3, h4, h5 {
	font-family: "Forte", cursive;
	font-weight: normal;
	color: #f00;
	margin-top: 0;
	line-height: 150%;
	text-align: left;
	text-shadow: 0em 0em 0.2em white;
	text-shadow: 0em 0em 0.2em white;
	text-shadow: 0em 0em 0.2em white;
}

h3 {font-size:2.5rem;}
h4 {font-size:1.0rem;}
h5 {font-size:0.9rem;}

p {
	margin-top: 1rem;
	margin-bottom: 1rem;
	text-indent: 4rem;
}

/* ***************************** LISTAS CON BULLETS **************************** */

ul.bullets {padding-left: 30px; margin-top: 1rem;}

li.accept, li.add, li.delete, li.deny, li.error, li.info, li.articulo {
	min-height: 35px;
	padding-left: 40px;
	background-repeat: no-repeat;
	background-position: 0 0;
	margin-bottom: 1rem;
}

li.accept {background-image:  url(images/bullets/accept_p.png);}
li.add {background-image:  url(images/bullets/add_p.png);}
li.delete {background-image:  url(images/bullets/delete_p.png);}
li.deny {background-image:  url(images/bullets/deny_p.png);}
li.error {background-image:  url(images/bullets/error_p.png);}
li.info {background-image:  url(images/bullets/info_p.png);}
li.articulo {background-image:  url(images/bullets/articulo_p.png);}

/* **************************** ALINEAR PÁRRAFOS *************************** */

p.derecha {text-align: right;}
p.izquierda {text-align: left;}
p.centro {text-align: center; text-indent: 0;}

/* **************************** ALINEAR IMÁGENES Y OTROS OBJETOS *************************** */

div.derecha, img.derecha, a.derecha {float: right; margin-left: 10px; margin-right: 10px; display: block;}
div.izquierda, img.izquierda, a.izquierda {float: left; margin-left: 10px; margin-right: 10px; display: block;}
img.centro, a.centro {margin: 0 auto; display: block;}

object {margin: 0 auto; display: block;}

/* ***************************** TABLAS CON COLORES ALTERNADOS ***************************** */

div.tabla {Width: 100%; overflow: auto;}

table {
	background-color: #5085cb;
	// border: 1px solid #ddd;
	empty-cells: show;
	font-size: 90%;
	margin: 0 0 20px 0;
	margin-left: auto; margin-right: auto;
	padding: 4px;
	text-align: center;
	width: 95%;
	*border-collapse: collapse;
	border-spacing: 0;
	-webkit-border-radius: 10px 10px 0 0; -moz-border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0;
	-webkit-box-shadow: 0 0 8px 5px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0 0 8px 5px rgba(0, 0, 0, 0.6); box-shadow: 0 0 8px 5px rgba(0, 0, 0, 0.6);
}

/* Esquinas superiores redondeadas. */

th:first-child {-webkit-border-radius: 10px 0 0 0; -moz-border-radius: 10px 0 0 0; border-radius: 10px 0 0 0; }
th:last-child {-webkit-border-radius: 0 10px 0 0; -moz-border-radius: 0 10px 0 0; border-radius: 0 10px 0 0; }
th:only-child {-webkit-border-radius: 10px 10px 0 0; -moz-border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0; }

table caption {
	color: #777;
	margin: 0 0 5px 0;
	padding: 0;
	text-align: center;
	text-transform: uppercase;
}

/* Colores alternados */
tr:nth-of-type(odd) {background: #eee;}

th {
	background: #333;
	color: white;
	font-weight: bold;
	font-size: 90%;
	margin: 0 0 5px 0;
}

td, th {
	padding: 3px;
	// border: 1px solid #ccc;
	text-align: center;}

td.izq, th.izq {text-align: left;}

table.activa tbody tr:hover { background-color: #ffe08e; }

table tbody tr:hover td { color: #444; }

table.invisible { background-color: transparent; border: 0px; }

table a:link, a:visited {color:#175e4c; text-decoration:none;}


/* ***************************** ESTILOS DE VISTA DE ARTICULOS DE HIPERBASES ***************************** */

div.HB_artic p.Título {
	text-indent: 0;
	font-size:1.2rem; text-align: center;
	width: 95%;
	margin: 10px 0 10px 0;
	margin-left: auto; margin-right: auto;
	padding: 10px;
	background-color: #333;
	background-image:  url(images/marcas.png);
	background-repeat: no-repeat;
	background-position: top right;
	color: #ff0;
	border: 5px outset #ddd;
	-moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;
	-webkit-box-shadow:  0 0 3px 2px rgba(0, 0, 0, 0.6); -moz-box-shadow:  0 0 3px 2px rgba(0, 0, 0, 0.6); box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.6);
}


/* ***************************** MEDIA QUERIES (480, 600, 768, 992 y 1382) ***************************** */

@media only screen and (max-width: 1000px){
	#sobrepapel, #bajopapel, #espacio {display: none; }
}

@media only screen and (max-width: 768px){
	#logotipo {width: 50%}
	nav {width: 50%}
}

@media only screen and (max-width: 600px){
	#logotipo {width: 100%}
	nav {width: 100%}
	div.medio {width:100%;}
}

@media only screen and (max-width: 480px){
	#contenido {width:100%}
	aside {width: 100%}
}


/* ******************************** MEDIA QUERIES PARA TABLAS RESPONSIVE ******************************* */

@media only screen and (max-width: 768px){

	table, thead, tbody, th, td, tr {display: block; vertical-align: middle;}
	thead tr { position: absolute; top: -9999px;left: -9999px; }
	
	tr { border: 1px solid #ccc; }
	
	td { 
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%;
		text-align: left;
	}
	
	td:before { 
		position: absolute;
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
		text-align: right;
	}
 
	/* Label the data */
	td:before { content: attr(data-title); }
}