@font-face{
	font-family: Lato;
    src: url(../fonts/Lato-Light.woff2),
         url(../fonts/Lato-Light.woff),
	     url(../fonts/Lato-Light.ttf);
    font-weight: 300; font-display: swap;}
@font-face{
	font-family: Lato;
    src: url(../fonts/Lato-Regular.woff2),
         url(../fonts/Lato-Regular.woff),
	     url(../fonts/Lato-Regular.ttf);
    font-weight: 400; font-display: swap;}
@font-face{
	font-family: Lato;
    src: url(../fonts/Lato-Bold.woff2),
         url(../fonts/Lato-Bold.woff),
	     url(../fonts/Lato-Bold.ttf);
    font-weight: 700; font-display: swap;}
@font-face{
	font-family: Bai Jamjuree;
    src: url(../fonts/BaiJamjuree-Regular.woff2),
         url(../fonts/BaiJamjuree-Regular.woff),
	     url(../fonts/BaiJamjuree-Regular.ttf);
    font-weight: normal; font-display: swap;}
*{
	margin: 0; padding: 0;}
body{
	font-family: 'Lato', sans-serif;
	line-height: 2em; color: #50504f; font-size: 17px; font-weight: 300;}
img a, a, a img{
	text-decoration: none; border: none;}
#idiomas{
	width: 50px; float: right; font-size: 0.7em; text-align: center; margin: 0 20px 0 0;}
#idiomas a{
	padding: 10px 10px 5px 10px; display: block; 
	color:#50504f; width: 50px; float: left;}
#idiomas a:hover{
	color: #aaa;}
#logo{
	clear: both; opacity: 0.7;}
#menu ul li{
	list-style-type: none; text-align: center; font-weight: 400; font-size: 1.1em;
	font-family: 'Bai Jamjuree', sans-serif; letter-spacing: 1px;}
#menu ul li a{
	color: #50504f; padding: 20px 0 15px 0; display: block;}
.contenido{
	text-align: center; }
.foto-cab, .foto-cab-p, .galeria-movil img{
	width: 100%; height: auto;}
.galeria-movil img{
	margin-bottom: 20px;}
h1{
	font-family: 'Bai Jamjuree', sans-serif; 
	margin: 0 0 20px 0; color: #b7b3a9; letter-spacing: 1px;}
.duo h2, .productos h2, .estilo{
	font-size: 18px; color: #8f8e8a; font-weight: 300; text-transform:uppercase;}
.productos{
	margin-top: 100px;}
.productos ul li{
    list-style-type: none; border: 1px solid #dddad3; }
.productos ul li img{
	width: 100%; height: auto;}
.productos ul li:hover img{
	opacity: 0.6;}
#ins-inicio{
	margin-top: 80px;}
address{
	font-style: normal;
	display: inline;}	
.borra{
	clear: both;}
.faldon a{ 
	font-size: 0.7em;
	color: #50504f; display: inline-block; padding: 20px 0;}
iframe{
	border: none; width: 100%; 
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-filter: grayscale(100%);
	filter: gray; /* For IE 6 - 9 */}
.redes a{
	display: block; width: 40px; height: 40px; margin: 0 10px 10px 0;}
.redes a:hover{
	opacity: 0.5;}
#page .redes, #pags .redes{
	z-index: 4; position: fixed; width: auto; right: 25px; top: 55px;}
.trio a{
	display: block; font-size: 13px; font-weight: 400;
	color: #666; border: 1px solid #666;
	padding: 5px 0; margin: 10px auto 0 auto;}
.trio a:hover{
	color: #000; background: #fff;}
.trio img{
	width: 100%; height: auto;}
.trio h2{
	color: #666 !important;}
.productos ul li img{
	display: block;}
.top-60{
	padding-top: 60px; clear: both;}
.telefono{
	font-size: 35px; margin: 0 0 30px 0; display: block; color: #666; padding: 5px 0;}
.email{
	margin: 0 0 30px 0; display: block; color: #666; padding: 0 0 10px 0; font-weight: 400;}
.telefono:hover, .email:hover{
	color: #000;}
#pags .faldon{
	background: #e1e1de; margin-top: 100px;}
.mapa{
	margin-top: 80px;}
.est a{
	display: block; font-size: 1.6em; padding: 5px; color: #333; font-weight: 400;}
.est a:hover{
	color: #aaa;}
.est .email{
	font-size: 17px;}
.instagram a{
	text-indent: -999em; 
	background: url(../imagenes/instagram.svg) no-repeat center center;
	width: 80px; height: 80px; display: block; padding: 5px; margin: 0 auto; }
.instagram a:hover{
	background: url(../imagenes/instagram.svg) no-repeat center center; opacity: 0.6;}
.coleccion a{
	background: #dd2104; color: #fff; font-size: 12px; text-align: center; display: none;
	width: 90px; line-height: 16px; padding: 8px 0; position: fixed; top: 65px; right: 0; }
.coleccion a:hover{
	background: #555;}
.col-eusk a{
	width: 80px;}
.boton a{display: block; margin: 50px auto; padding: 15px; color: #444; border: 1px solid #444; text-align: center; width: 200px;}
.boton a:hover{background: #444; color: #fff;}
@media only screen 
and (max-width : 480px){
#page .container{
	z-index: 2; position: relative;}
#page .cb-slideshow{
	z-index: 1; position: absolute;}
#page .faldon{
	z-index: 3; position: fixed; width: auto; bottom: 0px; padding: 10px 0;}
.container {
	width: 100%; margin: 0 auto;}
.todo {
	margin: 0 25px;}
#idiomas{
	margin: 0;}
#idiomas a{
	padding: 5px 10px;}
#logo{
	width: 160px; position: relative;
	margin: 0 auto;}
#logo img{
	width: 100%; height: auto;}
#menu{
	width: 100%; margin: 0 auto;}
#menu ul li{
	float: none; }
#menu ul li a{
	padding: 7px 0; }
#menu ul li ul li a{
	color: #aaa;}
.contenido{
	padding: 30px; margin: 50px 0 0 0;}
h1{
	font-size: 26px; margin: 80px 0 20px 0;}
.est{
	margin: 10px auto; }
.sin-m{
	margin: 0 0 20px 0;}
.duo{
	margin: 80px 0 0 0;}
.duo h2{
	margin-top: 80px;}
.dcho img{
	width: 100%; height: auto;  margin: 20px auto 0 auto;}
#pags .redes{
	float: right;}
#pags .faldon {
    margin-top: 60px;}
#pags .faldon footer{
	width: 80%; float: left;}
.productos ul li{
    width: 100%; height: auto; margin: 5% 0;}
footer{font-size: 0.8em; line-height: 1.6em; padding-top: 10px;}
.redes a{
	margin: 0;}
.linea2, .linea1, .foto-cab, #box-container{
	display: none;}
.tel-footer{
	display: block;}
#page .faldon a{
	padding-bottom: 0;}
.faldon a {
    padding: 0 0 10px 0;}
.toggleMenu {
    display: block !important;}
iframe{
	height: 350px;}
.coleccion a{
	position: absolute; top: 75px; }
}

@media only screen 
and (min-width : 481px)
and (max-width : 750px) {
#page .container{
	z-index: 2; position: relative;}
#page .cb-slideshow{
	z-index: 1; position: absolute;}
#page .faldon{
	z-index: 3; position: fixed; width: auto; bottom: 10px; padding: 10px 0;}
.container {
	width: 100%;
	margin: 0 auto;}
.todo {
	margin: 0 40px;}
#idiomas{
	margin: 0;}
#logo{
	width: 200px; position: relative;
	margin: -25px auto 0 auto;}
#menu{
	width: 100%; margin: 0 auto;}
#menu ul li{
	float: none; }
#menu ul li a{
	padding: 10px 0; }
#menu ul li ul li a{
	color: #aaa;}
.contenido{
	padding: 50px; margin: 50px 0 0 0;}
h1{
	font-size: 30px; margin: 80px 0 20px 0;}
.est{
	margin: 10px auto; max-width: 600px; }
.sin-m{
	margin: 0 0 20px 0;}
.duo{
	margin: 80px 0 0 0;}
.duo h2{
	margin-top: 100px;}
.dcho{
	margin-top: 30px;}
.dcho img{
	width: 100%; height: auto; max-width: 500px; margin: 0 auto;}
#pags .redes{
	float: right;}
#pags .faldon {
    margin-top: 80px;}
#pags .faldon footer{
	width: 80%; float: left;}
.productos ul li{
    width: 30.8%; height: auto; float: left; margin: 1%;}
footer{font-size: 0.9em; line-height: 15px; padding-top: 20px;}
.redes a{
	margin: 0;}
.linea1, .foto-cab-p, .galeria-movil{
	display: none;}
.toggleMenu {
    display: block !important;}
.coleccion a{
	position: absolute; top: 90px; }
#page .redes, #pags .redes {
    right: 40px; float: none; top: 70px;}
}

@media only screen 
and (min-width : 751px)
and (max-width : 1249px) {
.salto, .toggleMenu{
	display: none;}
#page .container{
	z-index: 2; position: relative;}
#page .cb-slideshow{
	z-index: 1; position: absolute;}
#page .faldon{
	z-index: 3; position: fixed; width: auto; bottom: 10px; padding: 10px 0;}
.container {
	width: 100%; margin: 0 auto;}
.todo {
	margin: 0 40px;}
#logo{
	width: 200px; position: relative;
	margin: -25px auto 0 auto;}
#menu{
	width: 650px; margin: 0 auto;}
#menu ul li{
	float: left; width: 20%;}
.eusk #menu {
	width: 100%; max-width: 750px;}
.eusk #menu ul li{
	width: 13%;}
.eusk #menu ul .p{
	width: 11%;}
.eusk #menu ul .m{
	width: 18%;}	
.eusk #menu ul .x{
	width: 25%;}
.contenido{
	padding: 50px; margin: 50px 0 0 0;}
h1{
	font-size: 30px; margin: 80px 0 20px 0;}
.est{
	margin: 10px auto; max-width: 600px; }
.sin-m{
	margin: 0 0 20px 0;}
.duo{
	margin: 80px 0 0 0;}
.duo h2{
	margin-top: 20%;}
.izdo{
	width: 40%; float: left;}
.dcho{
	width: 50%; float: right;}
.dcho img{
	width: 100%; height: auto;}
#pags .redes{
	float: right;}
#pags .faldon footer{
	width: 80%; float: left;}
.productos ul li{
    width: 22.6%; height: auto; float: left; margin: 1%;}
footer{font-size: 0.9em; padding-top: 10px;}
.redes a{
	margin: 0;}
.foto-cab-p, .galeria-movil{
	display: none;}
#page .redes, #pags .redes {
    right: 60px; float: none;}
}
	
@media only screen 
and (min-width : 1250px){ 
.salto, .toggleMenu{
	display: none;}
#page .container{
	z-index: 2; position: relative;}
#page .cb-slideshow{
	z-index: 1; position: absolute;}
#page .faldon{
	z-index: 3; position: fixed; width: auto; bottom: 10px; padding: 10px 0;}
.container {
	width: 1200px;
	margin: 0 auto;}
.todo {
	margin: 0 50px;}
#logo{
	width: 200px; float: left; position: relative;
	margin: -25px 0 0 0;}
#menu{
	width: 650px; float: right;}
#menu ul li{
	float: left; width: 18%;}
.eusk #menu {
	width: 750px;}
.eusk #menu ul li{
	width: 17%;}
.eusk #menu ul .p{
	width: 14%;}
.eusk #menu ul .m{
	width: 22%;}	
.eusk #menu ul .x{
	width: 30%;}
.contenido{
	padding: 50px; margin: 50px 0 0 0;}
h1{
	font-size: 30px; margin: 80px 0 20px 0;}
.est{
	margin: 10px 200px;}
.sin-m{
	margin: 0 0 20px 0;}
.duo{
	margin: 80px 0 0 0;}
.duo h2{
	margin-top: 140px;}
.margen{
	margin-top: 80px;}
.izdo{
	width: 40%; float: left;}
.dcho{
	width: 500px; float: right;}
#pags .redes{
	float: right;}
#pags .faldon footer{
	width: 80%; float: left;}
.productos ul li{
    width: 22.8%; height: auto; float: left; margin: 1%;}
.foto-cab-p, .galeria-movil{
	display: none;}
	}