@import url('https://fonts.googleapis.com/css?family=Roboto:300');

@font-face{
	font-family: 'OPTICS';
	src: url('../fonts/Haettenschweiler-Regular.ttf') format('OpenType');
}
:root{
	--color_1: #F58634;	/* Naranja*/
	--color_2: #FFF;	/* Blanco */
	--espacio: 60px;
}
/*@media only screen and (min-width: 481px) and (orientation : portrait), (-webkit-device-pixel-ratio : 2), (-webkit-device-pixel-ratio : 3){*/
	*{
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		font-family: 'Roboto', sans-serif;
	}
	body{
		height: auto;
		background: var(--color_1);
		display: flex;
		flex-flow: column wrap;
		justify-content: space-between;
		align-items: center;
	}
	header, section, footer, .menu{
		width: 100%;
		color: var(--color_2);
	}
	header, footer{
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		align-items: center;
		background: var(--color_2);
	}
	header{
		height: 120px;
		box-shadow: 0px 1px 3px #666;
	}
	header img{
		width: auto;
		height: 100px;
		margin: 0 auto;
	}
	section{width: 60%;}
	section, .menu>ul{
		display: flex;
		flex-flow: column wrap;
		align-items: center;
		justify-content: center;
	}
	/*========================= M E N U ==========================*/
	nav {
		display: flex;
		align-items: flex-start;
		width: 100%;
		height: 100%;
	}
	.nav-area li, label, ul, a {
		width: 100%;
		color: var(--color_2);
		display: block;
	}
	.nav-area ul label{
		height: 100px;
	}
	.nav-area ul li{
		height: 100px;
		overflow: hidden;
		transition: all .3s;
		display: block;
		border-top: 2px var(--color_2) solid;
	}
	.nav-area ul li:last-child{
		border-bottom: 2px var(--color_2) solid;
	}
	.nav-area label{
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: 'OPTICS';
		font-size: 1.5em;
		text-transform: uppercase;
		text-align: center;
		letter-spacing: 0.1em;
		padding: 0;
		cursor: pointer;
		transition: all .25s;
	}
	.nav-area a{
		font-family: 'OPTICS';
		font-size: 1.2em;
		text-decoration: none;
		text-transform: uppercase;
		letter-spacing: 0.2em;
		text-align: center;
		display: block;
		padding: 25px 0;
		transition: all .25s;
	}
	.nav-area a:hover, .nav-area label:hover{
		background: var(--color_2);
		color: var(--color_1);
	}
	.nav-area input[type="checkbox"] {
		display: none;
	}
	#focales:checked + li, #tratamientos:checked + li, #solares:checked + li {
		height: auto;
	}
	/*============================================================*/
	/*============= S L I D E - D E - I M A G E N E S ============*/
	.swiper-container{
	    width: 100%;
	    height: auto;
	}
	.swiper-container img{
		width: 100%;
		height: auto;
	}
	/*============================================================*/
	section{
		margin-top: 5px;
	}
	footer{
		height: var(--espacio);
		position: fixed;
		bottom: 0px;
		color: var(--color_1);
		box-shadow: 0px -1px 3px #666;
		z-index: 10000;
	}
	footer h2{width: 60%;}
	footer div{
		width: 20%;
		text-align: center;
	}
	footer div i{font-size: 1.8em;}
	footer a, footer i{color: var(--color_1);}
	/* -------------------------------------- */
	.title{
		margin: 20px 0;
		font-size: 3em;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		text-align: center;
		font-family: 'OPTICS';
	}
	.slogan{
		text-align: center;
		text-transform: uppercase;
		font-family: 'OPTICS';
		font-size: 1.5em;
		font-weight: lighter;
		letter-spacing: 0.1em;
	}
	.espacio{
		width: 100%;
		height: var(--espacio);
		margin: 0;
		padding: 0;
	}
	.tarjeta{
		width: 90%;
		margin: 10px auto;
		padding: 25px;
		box-sizing: border-box;
		background: var(--color_2);
		color: var(--color_1);
		border-radius: 12px;
		display: flex;
		flex-flow: column wrap;
	}
	.tarjeta img{
		width: 60%;
		height: auto;
		margin: auto;
	}
	.tarjeta h2{
		font-size: 1.3em;
		text-align: center;
		text-transform: uppercase;
		letter-spacing: 0.1em;
		margin-bottom: 20px;
		font-family: 'OPTICS';
	}
	.tarjeta p{
		font-size: 1.2em;
		line-height: 1.5em;
		color: #000;
	}
	.tarjeta ul{
		width: 100%;
		margin: 0 0 0 5px;
		list-style: disc;
		font-size: 1.2em;
		line-height: 1.5em;
		color: #000;
	}
/*}*/
/* Móviles en horizontal o tablets en vertical
------------------------------------------------------------------------ */
@media only screen and (max-width: 768px) {

}

/* Móviles en vertical
------------------------------------------------------------------------ */
@media only screen and (max-width: 480px) and (orientation : portrait), (-webkit-device-pixel-ratio : 2), (-webkit-device-pixel-ratio : 3){
	header{height: auto;}
	header img{
		width: 40%;
		height: auto;
		margin: 10px 0;
	}
	.nav-area label{font-size: 1.2em;}
	.nav-area a{
		font-size: 0.9em;
		letter-spacing: 0.1em;
	}
	section{width: 100%;}
	footer{height: calc( var(--espacio) - 20px );}
	.title{
		font-size: 2em;
	}
	.tarjeta img{width: 100%;}
	.tarjeta h2{
		font-size: 1.5em;
		letter-spacing: 0.1em;
	}
	.tarjeta p, .tarjeta ul{
		font-size: 0.9em;
		text-align: justify;
	}
	.slogan{
		font-size: 1.3em;em;
	}
}