@import url(https://fonts.googleapis.com/css?family=Lato:400,700);
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(https://fonts.googleapis.com/css?family=Fjalla+One);

html, body {
	background-color: #fff;
	color: #000;
	font-family: 'Lato', sans-serif;
	font-weight: 400;
	font-size:16px;
	font-weight: normal;
	height:100%;
	line-height:1.2em;
	position: relative;
	}

/* 
---------- // reset // ------------------- */
img,
ol, ul, li, 
h1, h2, h3, h4, h5, h6 {
	list-style: none;
	margin: 0px;
	padding: 0px;
	}
/* 
---------- // a general // ------------------- */

a, a:visited, a:hover {
	color: #5DC1EB; 
	text-decoration:underline;
	}


/* 
---------- // z index // ------------------- */
body {z-index:1 }
div.banner { z-index: 2 }
section {z-index:14;}
header { z-index:15; }
div#black {z-index:16;}
nav {z-index:17; }
div.toggle{z-index:18;}
div.toggle input#togglebutton{z-index:19;}
div.toggle input#togglebutton[type=checkbox] + label {z-index:20;}
div.paneles ul li a span.circle span.pic{ z-index: 10; }
.rslides_tabs { z-index:3;}

/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< ESTRUCTURA >>>>>>>>>>*/	
header, 
section, 
footer, 
div.banner, 
div.bienvenida,
div.paneles,
div.contenedor{
	display: block;
	float: left;
	height: auto;
	position: relative;
	width: 100%;
	}

div.in{
	display: block;
	height: auto;
	float: none;
	margin:0px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	width:960px;
	}
	@media only screen and (max-width:980px) {
	div.in{
	width:800px;
	}}
	@media only screen and (max-width:820px) {
	div.in{
	width:700px;
	}}
	@media only screen and (max-width:720px) {
	div.in {
	width:600px;
	}}
	@media only screen and (max-width:620px) {
	div.in{
	width:90%;
	margin-right: 5%;
	margin-left: 5%;
	}}


/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< HEADER >>>>>>>>>>*/
header {
	background-color: #fff;
	}

ul.logotipo {
	float: left;
	height: auto;
	text-align: center;
	margin:15px 0px;
	width: 100%;
	}

ul.logotipo li{
	display:block;
	float:left;
	height:120px;
	}

a.logotipo{
	display: block;
	float: left;
	height: auto;
	margin:10px 0px;
	width:360px;
	}
	@media only screen and (max-width:720px) {
	a.logotipo {
	margin-right: 10%;
	margin-left: 10%;
	width:80%;
	}}
	@media only screen and (max-width:620px) {
	a.logotipo {
	margin-top: 50px;
	width:80%;
	margin-right: 10%;
	margin-left: 10%;
	}}

a.logotipo img{
	display: block;
	float: left;
	height: auto;
	width: 100%;
	}


header ul{
	float: right;
	margin-top:35px;
	width:auto;
	}
	@media only screen and (max-width:720px) {
	header ul{
	float: left;
	margin-top:20px;
	width: 100%;
	}}



header ul li{
	display: block;
	color: #666;
	font-family: 'Fjalla One', sans-serif;
	font-size:1.2em;
	float: left;
	height:60px;
	line-height: 60px;
	margin: 0px;
	overflow: hidden;
	padding: 0px;
	text-align: right;
	}
	@media only screen and (max-width:820px) {
	header ul li{
	font-size:1em;
	}}
	@media only screen and (max-width:720px) {
	header ul li{
	font-size:1.2em;
	line-height:1.2em;
	height: auto;
	}}


header ul li:nth-child(1) {
	width:260px;
	}
	@media only screen and (max-width:820px) {
	header ul li:nth-child(1){
	width:220px;
	}}
	@media only screen and (max-width:720px) {
	header ul li:nth-child(1){
	text-align:center;
	width:100%;
	}}


header ul li:nth-child(2){
	float: right;
	margin-left:10px;
	width:100px;
	}
	@media only screen and (max-width:820px) {
	header ul li:nth-child(2){
	width:70px;
	}}
	@media only screen and (max-width:720px) {
	header ul li:nth-child(2){
	float:left;	
	margin-left:0px;
	width:100%;
	}}


header ul li:nth-child(2) img{
	float: right;
	height: auto;
	margin-top: -20px;
	width:100%;
	}
	@media only screen and (max-width:820px) {
	header ul li:nth-child(2) img{
	margin-top:-8px;
	}}
	@media only screen and (max-width:720px) {
	header ul li:nth-child(2) img{
	margin-left:35%;
	margin-right:35%;
	margin-top:-30px;
	width:30%;
	}}


header ul li:nth-child(3){
	font-family: 'Lato', sans-serif;
	font-size:0.8em;
	height: auto;
	line-height: 30px;
	width:260px;
	}
	@media only screen and (max-width:820px) {
	header ul li:nth-child(3){
	width:220px;
	}}
	@media only screen and (max-width:720px) {
	header ul li:nth-child(3){
	width:33.33%;
	}}
	@media only screen and (max-width:620px) {
	header ul li:nth-child(3){
	text-align: center;
	width:100%;
	}}

header ul li:nth-child(3) img{
	display: block;
	height: 30px;
	float: right;
	width:30px;
	}
	@media only screen and (max-width:620px) {
	header ul li:nth-child(3) img{
	float:none;
	display: inline-block;
	}}


header ul li a,
header ul li a:visited{
	color: #666;
	text-decoration: none;
	} 

header ul li a:hover{
	color: #666;
	text-decoration:underline;
	} 


/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< NAV >>>>>>>>>>*/
nav {
	background-color: #eee;
	border-bottom: 1px solid #fff;
	float:left;
	height:auto;
	width:100%;
	}
		@media only screen and (max-width:620px) {
		nav {
		background-color:#fff;
		bottom: 0px;
		box-shadow:3px 0px 3px rgba(0, 0, 0, 0.2);
		height: auto;
		left: 0px;
		margin-left: -290px;
		position: fixed;
		top: 0px;
		text-align: center;
		width:280px;
		transition:all 0.3s;
		-webkit-transition:all 0.3s ; /* Safari and Chrome */
		-o-transition:all 0.3s ;   /* Opera */
		-moz-transition:all 0.3s ; /* Mozilla Firefox */
	    -ms-transition:all 0.3s;   /* Internet Explorer */


	    -webkit-transform: translate(0px, 0px);
		-moz-transform: translate(0px, 0px);
		-o-transform: translate(0px, 0px);
		-ms-transform: translate(0px, 0px);
		transform: translate(0px, 0px);
		}}


nav ul{
	float:left;
	height: auto;
	text-align: center;
	width:100%;
	}
		@media only screen and (max-width:620px) {
		nav ul{
		margin: 20px 0px 0px -15px; 
		background-color:#eee;
		width:280px;
		}}

nav ul li{
	display:block;
	float:left;
	height: auto;
	margin:0px 0px;
	padding: 0px;
	width:20%;
	}
		@media only screen and (max-width:620px) {
		nav ul li{
		background-color:#eee;
		border-bottom: 2px solid #fff;
		width: 100%;
		}}

nav ul li a,
nav ul li a:visited {
	display: block;
	float: left;
	font-size:1em;
	color: #000;
	font-family: 'Montserrat', sans-serif;
	font-size:1em;
	height:42px;
	line-height:42px;
	text-decoration: none;
	text-align: center;
	text-transform: uppercase;
	width:100%;
	}
	@media only screen and (max-width:820px) {
	nav ul li a,
	nav ul li a:visited {
	font-size: 0.8em;
	}}
	@media only screen and (max-width:720px) {
	nav ul li a,
	nav ul li a:visited {
	font-size: 0.7em;
	}}
	@media only screen and (max-width:620px) {
	nav ul li a,
	nav ul li a:visited {
	font-size: 0.9em;
	}}

nav ul li a:hover {
	background-color: #5DC1EB;
	color: #fff;
	text-decoration: none;
	}


/* -------------------- Menu toggle para moviles -------------------- */
#togglelogo{ 
	display: none; 
	height: auto;
	margin: 30px 60px;
	padding-top: 20px;
	visibility: hidden; 
	width: 120px;
	}
		@media only screen and (max-width:620px) {
		#togglelogo{
		display: block;
		visibility: visible;
		}}

div.toggle {
	display: none;
	height:40px;
	position: fixed;
	right: 12px;
	top: 12px;
	width:60px;
	}
	@media only screen and (max-width:620px) {
	div.toggle {
	display: block;
	}}

input#togglebutton { display: none; }
input#togglebutton[type=checkbox] { visibility: hidden; }

input#togglebutton[type=checkbox] + label{
	background-color:#5DC1EB;
	border-radius: 4px;
	cursor: pointer;
	display: block;
	float: left;
	height:20px;
	padding:10px; 
	position:relative;
	width:40px;
	}

input#togglebutton[type=checkbox] + label:before {
	bottom: 0px;
	color: #5DC1EB;
	content: "";
	font-family: 'Quicksand', sans-serif; 
	font-size:2.2em;
	font-weight:700;
	line-height: 40px;
	left: 0px;
	position:absolute;
	right: 0px;
	text-align: center;
	top: 0px;
	}

input#togglebutton[type=checkbox]:checked + label:before {
	background-color:rgba(255, 255, 255, 1);
	border-radius:4px;
	content: "×";
	}

input#togglebutton[type=checkbox] + label span{
	background-color: #fff;
	border-radius: 2px;
	display: block;
	float: left;
	height:4px;
	margin-bottom:5px;
	width:100%;
	}

input#togglebutton[type=checkbox]:checked + label span{ display:none; }

#togglelogo{ 
	display: none; 
	height: auto;
	margin: 10px auto;
	visibility: hidden;
	text-align: center; 
	width: 100px;
	}
		@media only screen and (max-width:620px) {
		#togglelogo{
		display: block;
		visibility: visible;
		}}

.show {
	-webkit-transform: translate(290px, 0px);
	-moz-transform: translate(290px, 0px);
	-o-transform: translate(290px, 0px);
	-ms-transform: translate(290px, 0px);
	transform: translate(290px, 0px);
	}

div#black {
	background-color: #000;
	bottom: 0px;
	display: none;
	opacity: 1;
	position: fixed;
	top: 0px;
	width: 100%;
	}

.showdos{
	display: block!important;
	opacity: 0.6!important;
	}
	
	
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< INDEX BANNER >>>>>>>>>>*/
div.banner{
	height:380px;
	}
	@media only screen and (max-width:980px) {
	div.banner {
	height:360px;
	}}
	@media only screen and (max-width:820px) {
	div.banner {
	height:340px;
	}}
	@media only screen and (max-width:720px) {
	div.banner {
	height:320px;
	}}
	@media only screen and (max-width:620px) {
	div.banner{
	height:340px;
	}}

/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< INDEX BIENVENIDA >>>>>>>>>>*/
div.bienvenida{
	background-color: #383d3c;
	padding:30px 0px;
	}

div.bienvenida p{
	color: #fff;
	float: left;
	font-size:1.6em;
	line-height: 1.3em;
	margin: 0px;
	text-align: center;
	padding: 0px;
	width: 100%;
	}
	@media only screen and (max-width:720px) {
	div.bienvenida p {
	font-size: 1.2em;
	margin: 0 5px 0 0;
	}}


div.bienvenida p a,
div.bienvenida p a:visited{
	background-color: #fff;
	color: #000;
	border-radius: 20px;
	font-size: 0.8em;
	padding:8px 15px;
	line-height: 60px;
	text-align: center;
	text-decoration: none;
	width: auto;
	}

div.bienvenida p a:hover{
	background-color: #5DC1EB;
	color: #fff;
	text-decoration: none;
	}

/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< PANELES >>>>>>>>>>*/
div.paneles{
	background-color: #f3f3f3;
	}

div.paneles ul{
	float: left;
	height: auto;
	text-align: center;
	padding:20px 0px;
	width:100%;
	}

div.paneles ul li{
	display: inline-block;
	float:none;
	height:auto;
	margin:10px 30px;
	width:auto;
	}

div.paneles ul li a,
div.paneles ul li a:visited,
div.paneles ul li a:hover{
	height: auto;
	text-decoration: none;
	font-family: 'Fjalla One', sans-serif;
	width:auto;
	}

div.paneles ul li a span.circle{
	display: block;
	height: auto;
	position: relative;
	width:auto;
	}

div.paneles ul li a span.circle span.color{
	display: block;
	background-color: #a1a1a1;
	border-radius: 50%;
	float: left;
	height:180px;
	width:180px;
	}

div.paneles ul li a span.circle span.pic{
	display: block;
	background-color: #fff;
	border-radius: 50%;
	float:none;
	position: absolute;
	left: 10px;
	top:10px;
	height:160px;
	width:160px;
	}

div.paneles ul li a span.circle span.pic img{
	border-radius: 50%;
	display: block;
	float: left;
	height: auto;
	width: 100%;
	}

div.paneles ul li a h3{
	color: #000;
	font-size: 1.4em;
	line-height: 1.6em;
	margin-top: 10px;
	text-align: center;
	text-transform: uppercase;
	width: 100%;
	}

/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< CONTENEDOR >>>>>>>>>>*/
div.contenedor{
	background-color: #f3f3f3;
	padding-bottom: 40px;
	}
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< SECTION >>>>>>>>>>*/

section,
aside {
	float: left;
	height: auto;
	margin-top:60px;
	}	 

section {
	height: auto;
	width:69%;
	}
	@media only screen and (max-width:620px) {
	section{
	width: 100%;
	}}


/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< ARTICLE >>>>>>>>>>*/
article {
	float: left;
	height: auto;
	margin:0px 5%;
	width:90%;
	}

article h2,
article p,
article ul {
	float: left;
	width: 100%;
	}

article h2{
	font-size: 1.8em;
	line-height: 1.2em;
	margin-bottom: 15px;
	}


article p {
	height: auto;
	text-align: justify;
	}

article p img{
	display: block;
	float: left;
	}

img.media{
	max-width:55%;
	margin:0px 15px 15px 0px;
	}

img.full{
	max-width:100%;
	margin:20px 0px;
	width: 100%;
	}

article ul {
	margin: 20px 0px;
	}

article ul li {
	float: left;
	height: auto;
	list-style: disc;
	margin:5px 0px 5px 4%;
	width:96%;
	}

article a{
	display: block;
	text-decoration: none;
}

article .cintillo{
	background-color: #dde6ea;
	height: 30px;
	font-size: 1.0em;
	text-align: right;
	line-height: 30px;
	margin-bottom: 15px;
	padding-right: 2%;
	width: 98%;
	}


/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< ASIDE >>>>>>>>>>*/
aside {
	border-right: 1px solid #c6c6c6;
	float: left;
	height:auto;
	text-align:left;
	width:30%
	}
	@media only screen and (max-width:620px) {
	aside {
	border-right: 0px;
	width: 100%;
	}}

aside img{
	float: left;
	height: auto;
	margin: 0px;
	margin-bottom: 15px;
	width:100%;
	}
	@media only screen and (max-width:620px) {
	aside img {
	margin-left: 10%;
	margin-bottom: 0px;
	width: 80%;
	}}

aside ul {
	float: left;
	height: auto;
	padding:0px 10% 0px 0px;
	width: 90%;
	}
	@media only screen and (max-width:620px) {
	aside ul {
	padding:0px 0px 0px 0px;
	width: 100%;
	}}

aside ul li{
	border-bottom: 1px solid #c6c6c6;
	float: left;
	height: auto;
	width:100%;
	}

aside ul li a,
aside ul li a:visited{
	color: #666;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 0.9em;
	float: left;
	height: auto;
	padding:8px 0px;
	text-decoration: none;
	text-transform: uppercase;
	width:100%;
	}

aside ul li a:hover {
	background-color: #eee;
	color: #000;
	text-decoration: none;
	}
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< PRODUCTOS >>>>>>>>>>*/
div.pic,
ul.combinaciones {
	float: left;
	height: auto;
	width:100%;
	}


div.pic img{
	float: left;
	height: auto;
	width:60%;
	}

ul.combinaciones{
	list-style: none;
	padding: 0px;
	margin: 0px;
	}

ul.combinaciones li{
	list-style: none;
	line-height:80px;
	padding: 0px;
	margin:3px 0px;
	width: 100%;
	}

ul.combinaciones li img{
	border-radius: 50%;
	float: left;
	height:80px;
	margin-right:10px;
	width:80px;
	}




/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< FOOTER >>>>>>>>>>*/
footer {
	float: left;
	height: auto;
	padding: 15px 0px;
	position: relative;
	width: 100%;
	}


footer p{
	display: block;
	float: left;
	font-size: 0.8em;
	height: auto;
	text-align:left;
	width: 100%;
	}
	@media only screen and (max-width:620px) {
	footer p{
	text-align: center;
	margin-top: 30px;
	width: 100%;
	}}


footer div.logotipos{
	right: 0px;
	position: absolute;
	top: 0px;
	}
	@media only screen and (max-width:820px) {
	footer div.logotipos{
	float: left;
	margin-top: 10px;
	position: relative;
	text-align: center;
	width: 100%;
	}}

footer div.logotipos img{
	display: block;
	float:left;
	height:100px;
	margin: 0px;
	padding: 0px;
	width:auto;
	}
	@media only screen and (max-width:820px) {
	footer div.logotipos img {
	float: none;
	display: inline-block;
	}}
	@media only screen and (max-width:620px) {
	footer div.logotipos img {
	height:70px;
	}}

footer a.signature,
footer a.signature:visited{
	font-size: 0.7em;
	display:inline-block;
	color: inherit;
	float:none;
	text-decoration: none;
	width:auto;
	}

footer a.signature:hover{
	color:inherit;
	text-decoration: none;
	}

footer a.signature:hover strong{
	color:#000;
	}


footer a.signature i,
footer a.signature span,
footer a.signature strong{
	height: 20px;
	line-height: 20px;
	float: left;
	}

footer a.signature i,
footer a.signature strong {
	font-style: normal;
	font-weight: normal;
	}


footer a.signature span{
	background-image: url(../svg/icon-ls.svg);
	background-size:40px 20px;
	background-position:0px 0px;
	display:inline-block;
	background-color: #da1f43;
	border-radius:50%;
	float:left;
	height:20px;
	margin:0px 3px 0px 3px;
	width:20px;
	}

footer a.signature:hover span{
	background-color: #da1f43;
	}


/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< hide>>>>>>>*/
.hide { display:none!important;}