@charset "utf-8";

/* CSS Document */



/*

*** Ejemplo de transición larga aplicando un "animation-name";, pudiendo aplicar transiciones largas y mas puntos de transiciones en el camino



input[id^="menuBoton"] + * + #mostrarNO {

	animation-name: slideout;

	animation-duration: 1s;

	animation-fill-mode: forwards;

	-webkit-animation-name: slideout;

	-webkit-animation-duration: 1s;

	-webkit-animation-fill-mode: forwards;

	-moz-animation-name: slideout;

	-moz-animation-duration: 1s;

	-moz-animation-fill-mode: forwards;

	-ms-animation-name: slideout;

	-ms-animation-duration: 1s;

	-ms-animation-fill-mode: forwards;

	-o-animation-name: slideout;

	-o-animation-duration: 1s;

	-o-animation-fill-mode: forwards;

}

		@keyframes slideout {

		  100% {

			width: 100%;

			max-height: 0em;

		}

		  0% {

			width:100%;

			max-height: 100em;

		}

		}

		@-webkit-keyframes slideout {

		  100% {

			width: 100%;

			max-height: 0em;

		}

		  0% {

			width:100%;

			max-height: 100em;

		}

		}

		@-moz-keyframes slideout {

		  100% {

			width: 100%;

			max-height: 0em;

		}

		  0% {

			width:100%;

			max-height: 100em;

		}

		}

		@-ms-keyframes slideout {

		  100% {

			width: 100%;

			max-height: 0em;

		}

		  0% {

			width:100%;

			max-height: 100em;

		}

		}

		@-o-keyframes slideout {

		  100% {

			width: 100%;

			max-height: 0em;

		}

		  0% {

			width:100%;

			max-height: 100em;

		}

		}





===============================

Elementos comunes

===============================

 */



html {

	font-size: 16pt;

	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;

	font-weight: normal;

}

body {

	margin-top: 0px;

	margin-right: 0px;

	margin-bottom: 0px;

	margin-left: 0px;

}

ul {

	list-style-position: inside;

	list-style-type: disc;

	color: #996600;

	text-align: justify;

}

a, a:hover, a:visited {

	text-decoration: none;

	color: #2C7EAB;

}

p {

	text-align: justify;

	font-size: 1rem;

}

h1 {

	font-size: 1.8rem;

	color: #8C0F1D;

	font-weight: bolder;

}

h2 {

	font-size: 1.2rem;

	color: #80A312;

	font-weight: bold;

}

h3 {

	font-size: 1rem;

	color: #004B70;

	font-style: normal;

}

h4 {

	text-decoration: underline;

	font-size: 0.8rem;

	font-weight: bold;

}

h5 {

	font-size: 0.8rem;

	font-weight: normal;

	text-align: justify;

	overflow-x: hidden;

	overflow-y: hidden;

}

img {

	vertical-align:middle;

}

section, aside  {

	padding-left: 10px;

	padding-right: 10px;

	-webkit-box-sizing: border-box;

	-moz-box-sizing: border-box;

	box-sizing: border-box;

}

article  {

	overflow-x: hidden;

	overflow-y: hidden;

	position: relative;

}

img.bordeado {

	border: medium solid #8C0F1D;

	border-radius: 15px 0px 15px 15px;

}

.clear {

	clear:both;

}

/*

===============================

Cabecera

===============================

 */



header  {

	padding-left: 10px;

	padding-right: 10px;

	margin-bottom: 10px;

	position: relative;

}

header nav a, header nav a:hover, header nav a:visited {

	text-decoration: none;

	display: block;

	padding-top: 20px;

	padding-bottom: 20px;

}

nav.menuPrincipal {

	overflow: hidden;

	font-size: 1rem;

}

nav.menuPrincipal ul {

	list-style-type: none;

	padding-top: 0px;

	padding-right: 0px;

	padding-bottom: 0px;

	padding-left: 0px;

	color: #8C0F1D;

}

nav.menuPrincipal ul li {

	font-weight: bold;

	clear: both;

	text-align: center;

	font-size: 1.5rem;

	letter-spacing: 0.3rem;

	text-transform: uppercase;

}

nav.menuPrincipal ul li ul {

	overflow-x: hidden;

	overflow-y: hidden;

	margin-bottom: 20px;

}

nav.menuPrincipal ul li ul li {

	background-color: hsla(74,80%,35%,0.30);

	border-radius: 10px;

	margin-bottom: 0.5%;

	height: auto;

	width: 49%;

	margin-top: 0.5%;

	clear: none;

	margin-right: 0.5%;

	margin-left: 0.5%;

	float: left;

	letter-spacing: normal;

	text-transform: none;

	font-weight: normal;

	transition: 0.2s ease-in-out;

	-webkit-transition: 0.2s ease-in-out;

	-moz-transition: 0.2s ease-in-out;

	-ms-transition: 0.2s ease-in-out;

	-o-transition: 0.2s ease-in-out;

}

nav.menuPrincipal ul li ul li:hover {

	background-color: hsla(74,80%,35%,0.50);

}

#telefono {

	width: 50%;

	text-align: center;

	font-size: 2rem;

	font-weight: bold;

	background-color: #80A312;

	color: #FFFFFF;

	border-bottom-left-radius: 25px;

	border-bottom-right-radius: 25px;

	padding-top: 10px;

	top: 0%;

	margin-left: auto;

	margin-right: auto;

	position: absolute;

	left: 25%;

}

/* Ejemplo de transición corta con un inicio y un fin */

#logo {

	width: auto;

	height: auto;

	margin-left: 1%;

	margin-top: 15px;

	max-width: 200px;

	transition: 0.3s ease-in-out;

	-webkit-transition: 0.3s ease-in-out;

	-moz-transition: 0.3s ease-in-out;

	-ms-transition: 0.3s ease-in-out;

	-o-transition: 0.3s ease-in-out;

}

#logo:hover {

	transform:scale(1.1,1.1);

	-webkit-transform:scale(1.1,1.1);

	-moz-transform:scale(1.1,1.1);

	-ms-transform:scale(1.1,1.1);

	-o-transform:scale(1.1,1.1);

}

/*

Ocultar botón radio. Usaremos un filtro para atributos con el fin de que el estilo se aplique sólo a los input cuyo id empiecen por "spoiler" [id^="spoiler"]

*/

input[id^="menuBoton"] {

	display:none;

}

input[id^="menuBoton"] + label {

	height: 70px;

	width: 70px;

	-webkit-box-sizing: content-box;

	-moz-box-sizing: content-box;

	box-sizing: content-box;

	margin-right: 40px;

	margin-top: 30px;

	position: absolute;

	top: 0%;

	right: 0%;

	cursor:pointer;

}

input[id^="menuBoton"] + * + #mostrarNO {

	width: 100%;

	max-height: 0em;

	transition: 0.7s ease-in-out;

	-webkit-transition: 0.7s ease-in-out;

	-moz-transition: 0.7s ease-in-out;

	-ms-transition: 0.7s ease-in-out;

	-o-transition: 0.7s ease-in-out;

}

input[id^="menuBoton"]:checked + * + #mostrarNO {

	max-height: 100em;

}

/*

===============================

ZONA CENTRAL O CONTENIDO

===============================

 */



#div_aviso {

	position: fixed;

	z-index: 20;

	top: 50%;

	left: 50%;

	margin-left: -200px;

}

.div_aviso_error {

	background-color: #E3DDC7;

	margin-right: auto;

	margin-left: auto;

	color: #8F282F;

	border: 1px solid #8F282F;

	margin-bottom: 20px;

	padding: 5px;

	font-weight: bold;

	width: 400px;

	text-align: center;

	font-size: 11px;

}



.div_aviso_error p {

	color: #8F282F;

	font-weight: bold;

	text-align: justify;

	font-size: 11px;

	margin-bottom: 5px;

	margin-top: 0px;

	font-family: Verdana, Geneva, sans-serif;

}

.div_aviso_advertencia {

	background-color: #FFC;

	margin-right: auto;

	margin-left: auto;

	color: #F60;

	border: 1px solid #F60;

	margin-bottom: 20px;

	font-weight: bold;

	width: 400px;

	text-align: center;

	font-size: 11px;

	padding: 5px;

}

.div_aviso_advertencia p {

	color: #F60;

	font-weight: bold;

	text-align: justify;

	font-size: 11px;

	margin-bottom: 5px;

	margin-top: 0px;

	font-family: Verdana, Geneva, sans-serif;

}

.div_aviso_informacion {

	background-color: #D2E4FF;

	margin-right: auto;

	margin-left: auto;

	color: #06F;

	border: 1px solid #06F;

	margin-bottom: 10px;

	font-weight: bold;

	width: 400px;

	text-align: center;

	font-size: 11px;

	background-position: 5px;

	padding: 5px;

	margin-top: 5px;

}

.div_aviso_informacion p {

	color: #06F;

	font-weight: bold;

	text-align: justify;

	font-size: 11px;

	margin-bottom: 5px;

	margin-top: 0px;

	font-family: Verdana, Geneva, sans-serif;

}

.div_aviso_ok {

	background-color: #EBFABC;

	width: 400px;

	margin-right: auto;

	margin-left: auto;

	color: #67840F;

	border: 1px solid #67840F;

	margin-bottom: 20px;

	padding: 5px;

	font-weight: bold;

	text-align: center;

	font-size: 11px;

}

.div_aviso_ok p {

	color: #67840F;

	font-weight: bold;

	text-align: justify;

	font-size: 11px;

	margin-bottom: 5px;

	margin-top: 0px;

	font-family: Verdana, Geneva, sans-serif;

}



.ulServiciosDestacados {

	list-style-type: none;

	padding-top: 0px;

	padding-right: 0px;

	padding-bottom: 0px;

	padding-left: 0px;

}

.ulServiciosDestacados li {

	clear: none;

	overflow-x: hidden;

	overflow-y: hidden;

	position: relative;

	border: medium solid #8C0F1D;

	border-radius: 17px;

	margin-bottom: 20px;

	-webkit-box-sizing: border-box;

	-moz-box-sizing: border-box;

	box-sizing: border-box;

}

.ulServiciosDestacados li > img {

	width: 100%;

	height: auto;

	z-index: 15;

    transition: 0.5s ease-in-out;

	-webkit-transition: 0.5s ease-in-out;

    -moz-transition: 0.5s ease-in-out;

    -ms-transition: 0.5s ease-in-out;

    -o-transition: 0.5s ease-in-out;

	transform:scale(1.1,1.1);

	-webkit-transform:scale(1.1,1.1);

	-moz-transform:scale(1.1,1.1);

	-ms-transform:scale(1.1,1.1);

	-o-transform:scale(1.1,1.1);

}

.ulServiciosDestacados li:hover > img {

	animation-name: serviciosdestacadoszoom;

	transform:scale(1.2,1.2);

	-webkit-transform:scale(1.2,1.2);

	-moz-transform:scale(1.2,1.2);

	-ms-transform:scale(1.2,1.2);

	-o-transform:scale(1.2,1.2);

}

.ulServiciosDestacados li > h2 {

	z-index: 25;

	position: absolute;

	left: 2%;

	font-size: 3rem;

	text-decoration: none;

	font-weight: bold;

	text-shadow: 0px 3px 6px #FFFFFF;

	color: #8C0F1D;

	text-align: left;

	top: 0%;

	display: inherit;

}

.ulServiciosDestacados li > h3 {

	position: absolute;

	z-index: 20;

	left: 0%;

	background-color: hsla(0,0%,100%,0.75);

	padding-left: 5%;

	padding-right: 5%;

	font-size: 1.7rem;

	-webkit-box-sizing: border-box;

	-moz-box-sizing: border-box;

	box-sizing: border-box;

	text-align: justify;

	bottom: 0%;

	color: #000000;

}

#MenuTabs > div {

	display: none;

	padding-top: 5px;

	padding-right: 5px;

	padding-bottom: 5px;

	padding-left: 5px;

	overflow-x: hidden;

	overflow-y: hidden;

}

#MenuTabs input {

	display: none;

}

#MenuTabs label {

	cursor: pointer;

	background-color: hsla(74,80%,35%,0.25);

	padding-top: 0px;

	padding-right: 10px;

	padding-bottom: 1px;

	padding-left: 10px;

	margin-top: 0px;

	margin-right: 0px;

	margin-bottom: 0px;

	margin-left: 0px;

	border: 2pt solid #C10003;

	border-top-left-radius: 10px;

	border-top-right-radius: 10px;

    transition: 0.2s ease-in-out;

	-webkit-transition: 0.2s ease-in-out;

    -moz-transition: 0.2s ease-in-out;

    -ms-transition: 0.2s ease-in-out;

    -o-transition: 0.2s ease-in-out;

}

#MenuTabs label:hover {

	background-color: hsla(0,0%,100%,0.00);

}

#MenuTabs input[id^="Tab_0"]:checked ~ div[id^="Tab_0"], 

#MenuTabs input[id^="Tab_1"]:checked ~ div[id^="Tab_1"],

#MenuTabs input[id^="Tab_2"]:checked ~ div[id^="Tab_2"],

#MenuTabs input[id^="Tab_3"]:checked ~ div[id^="Tab_3"],

#MenuTabs input[id^="Tab_4"]:checked ~ div[id^="Tab_4"],

#MenuTabs input[id^="Tab_5"]:checked ~ div[id^="Tab_5"],

#MenuTabs input[id^="Tab_6"]:checked ~ div[id^="Tab_6"]

{

	display: block;

	border-radius: 0px 0px 10px 10px;

	border: 2pt solid #C10003;

}

#MenuTabs input[id^="Tab_0"]:checked ~ label[for^="Tab_0"], 

#MenuTabs input[id^="Tab_1"]:checked ~ label[for^="Tab_1"],

#MenuTabs input[id^="Tab_2"]:checked ~ label[for^="Tab_2"],

#MenuTabs input[id^="Tab_3"]:checked ~ label[for^="Tab_3"],

#MenuTabs input[id^="Tab_4"]:checked ~ label[for^="Tab_4"],

#MenuTabs input[id^="Tab_5"]:checked ~ label[for^="Tab_5"],

#MenuTabs input[id^="Tab_6"]:checked ~ label[for^="Tab_6"]

{

	background-color: hsla(0,0%,100%,0.00);

	border-top: 2pt solid #C10003;

	border-bottom: 2pt solid #FFFFFF;

	border-right: 2pt solid #C10003;

	border-left: 2pt solid #C10003;

}

section > article > img, body > aside > img {

	height: auto;

	width: 100%;

	-webkit-box-sizing: border-box;

	-moz-box-sizing: border-box;

	box-sizing: border-box;

}

div#MenuTabs > div > img {

	height: auto;

	width: 25%;

	-webkit-box-sizing: border-box;

	-moz-box-sizing: border-box;

	box-sizing: border-box;

}

.floatright {

	float: right;

	margin-left: 1%;

	margin-right: 0%;

	margin-bottom: 1%;

	height: auto;

	clear: both;

}

.floatleft {

	float: left;

	margin-left: 0%;

	margin-right: 1%;

	margin-bottom: 1%;

	height: auto;

}

section > article > p:first-of-type {

	font-weight: bold;

}

div.distribuidores {

	clear: both;

}

div.distribuidores img {

	height: auto;

	width: 31%;

	margin-left: 1%;

	margin-right: 1%;

	margin-bottom: 15px;

	vertical-align: middle;

}

form#contactar input {

	border-style: none none solid;

	padding-top: 10px;

	padding-right: 10px;

	padding-bottom: 10px;

	padding-left: 10px;

	border-bottom-width: medium;

	border-color: #80A312;

	background-color: hsla(74,80%,35%,0.40);

	border-top-left-radius: 10px;

	border-top-right-radius: 10px;

	width: 70%;

	min-height: 3rem;

	-webkit-box-sizing: border-box;

	-moz-box-sizing: border-box;

	box-sizing: border-box;

	font-size: 1rem;

	max-width: 70%;

	height: auto;

}

form#contactar input#checkbox {

	border-style: none;

	padding-top: 10px;

	padding-right: 10px;

	padding-bottom: 10px;

	padding-left: 10px;

	border-top-left-radius: 10px;

	border-top-right-radius: 10px;

	-webkit-box-sizing: border-box;

	-moz-box-sizing: border-box;

	box-sizing: border-box;

	border-width: medium;

	width: 3rem;

	height: 3rem;

	float: left;

	margin-right: 20px;

}

form#contactar textarea {

	border-style: none none solid;

	padding-top: 10px;

	padding-right: 10px;

	padding-bottom: 10px;

	padding-left: 10px;

	border-bottom-width: medium;

	border-color: #80A312;

	background-color: hsla(74,80%,35%,0.40);

	border-top-left-radius: 10px;

	border-top-right-radius: 10px;

	-webkit-box-sizing: border-box;

	-moz-box-sizing: border-box;

	box-sizing: border-box;

	width: 100%;

	min-height: 6rem;

	font-size: 1rem;

	height: auto;

	max-width: 100%;

}

form#contactar input#submit {

	border-style: solid none;

	padding-top: 10px;

	padding-right: 10px;

	padding-bottom: 10px;

	padding-left: 10px;

	border-bottom-width: medium;

	border-color: #80A312;

	background-color: hsla(74,80%,35%,0.40);

	border-top-left-radius: 10px;

	border-top-right-radius: 10px;

	cursor: pointer;

	font-weight: bold;

	font-size: 1rem;

	clear: both;

}

form#contactar input:focus, form#contactar input:hover, form#contactar textarea:focus, form#contactar textarea:hover, form#contactar input#submit:hover, form#contactar input#submit:focus {

	border-color: #8C0F1D;

}

/*

===============================

PIE DEL DOCUMENTO

===============================

*/

footer  {

	background-color: #80A312;

	padding-bottom: 10px;

	padding-top: 10px;

	color: #FFFFFF;

	border-color: #8C0F1D;

	border-top-style: solid;

	overflow-x: hidden;

	overflow-y: hidden;

	padding-right: 10px;

	padding-left: 10px;

	clear: both;

}

footer a, footer a:hover, footer a:visited {

	text-decoration: none;

	color: #FFFFFF;

	padding-top: 20px;

	padding-bottom: 20px;

	display: block;

	padding-right: 0px;

	padding-left: 0px;

}

footer div  {

	border-color: #FFFFFF;

}

footer > div > div > a > img {

	height: auto;

	max-width: 50%;

	width: 500px;

}

footer > div > div > img {

	height: auto;

	max-width: 15%;

	min-width: 50px;

	margin-right:10px;

}

footer nav {

	overflow-x: hidden;

	overflow-y: hidden;

	margin-top: 15px;

}

footer nav ul {

	list-style-type: none;

	padding-top: 0px;

	padding-right: 0px;

	padding-bottom: 0px;

	padding-left: 0px;

	color: #FFFFFF;

}

footer nav ul li {

	font-size: 1.3rem;

	clear: both;

	text-align: center;

	font-weight: normal;

	border-radius: 10px;

	letter-spacing: 0.3rem;

	text-transform: uppercase;

}

footer nav ul li ul  {

	overflow-x: hidden;

	overflow-y: hidden;

	margin-bottom: 40px;

}

footer nav ul li ul li {

	background-color: hsla(0,0%,100%,0.15);

	border-radius: 10px;

	height: auto;

	clear: none;

	width: 49%;

	float: left;

	margin-top: 0.5%;

	margin-right: 0.5%;

	margin-bottom: 0.5%;

	margin-left: 0.5%;

	border-style: none;

	letter-spacing: normal;

	text-transform: none;

	transition: 0.2s ease-in-out;

	-webkit-transition: 0.2s ease-in-out;

	-moz-transition: 0.2s ease-in-out;

	-ms-transition: 0.2s ease-in-out;

	-o-transition: 0.2s ease-in-out;

}

footer nav ul li ul li:hover {

	background-color: hsla(0,0%,100%,0.35);

}



@media (min-device-width:6.5in) and (min-width:670px){

html {

	font-size: 12pt;

}

header, section, footer > div {

	max-width: 1100px;

	margin-left:auto;

	margin-right:auto;

}

.conaside > article {

	width: 70%;

	max-width: 740px;

	float:left;

}

aside {

	width: 30%;

	max-width: 330px;

	float: left;

	border-color: #80A312;

	border-width: thin;

	border-left-style: solid;

	margin-left:10px;

}

.ulServiciosDestacados a li {

	width: 48%;

	height: 300px;

	margin-left:1%;

	margin-right:1%;

	float:left;

}

.ulServiciosDestacados a li h2 {

	font-size: 2rem;

}

.ulServiciosDestacados a li h3 {

	font-size: 1.4rem;

}

header nav a, header nav a:hover, header nav a:visited {

	padding-top: 5px;

	padding-bottom: 5px;

}

nav.menuPrincipal ul li {

	font-size: 1rem;

}

nav.menuPrincipal ul li ul li {

	width: 32%;

	margin-top: 0.5%;

	margin-right: 0.5%;

	margin-left: 0.5%;

	letter-spacing: normal;

	text-transform: none;

	font-weight: normal;

}

section > article > img, body > aside > img {

	height: auto;

	width: 35%;

}

footer > div > nav {

	width: 70%;

	float:left;

}

footer > div > div {

	width: 25%;

	float:left;

	margin-right:5%;

}

footer a, footer a:hover, footer a:visited {

	font-size: 0.8rem;

	margin-top: 0px;

	margin-right: 0px;

	margin-bottom: 0px;

	margin-left: 0px;

	padding-top: 5px;

	padding-right: 0px;

	padding-bottom: 5px;

	padding-left: 0px;

}

footer nav ul li {

	font-size: 0.8rem;

	width: 30%;

	float: left;

	clear: right;

	margin-left: 1.6%;

	margin-right: 1.6%;

	font-weight: bold;

}

footer nav ul li ul li:first-of-type {

	margin-top: 10px;

}

footer nav ul li ul li {

	clear: none;

	float: left;

	border-style: none;

	letter-spacing: normal;

	text-transform: none;

	width: 100%;

	margin-top: 0px;

	margin-right: 0px;

	margin-bottom: 0px;

	margin-left: 0px;

	padding-top: 0px;

	padding-right: 0px;

	padding-bottom: 0px;

	padding-left: 0px;

	background-color: hsla(0,0%,100%,0.00);

	font-weight: normal;

}

}