@media screen and (min-width:1100px){
	:root{
		--margin-sides:140px;
		--font-intro-phrase: normal normal normal 73px/90px 'Bernier';
		--font-title-large: normal normal bold 63px/1 'Bebas Neue'; 
		--font-title-medium: normal normal bold 50px/70px 'Bebas Neue';
		--font-text-normal: normal normal normal 20px/1.3 'Open Sans';
		--font-text-medium: normal normal normal 22px/1 'Open Sans';
		--font-button-normal: normal normal normal 17px/1 'Bebas Neue';
		--font-footer-title: normal normal normal 28px/1 'Bebas Neue';
		--font-footer-text: normal normal normal 16px/1 'Open Sans';
		--font-history-text: normal normal normal 21px/35px 'Open Sans';
		--font-phrase-title: normal normal normal 61px/80px 'Bernier';
		--font-ourmescales-main: normal normal bold 67px/1 'Bebas Neue';
		--font-ourmezcales-title: normal normal normal 30px/1 'Bebas Neue';
		--font-ourmezcales-text: normal normal normal 22px/27px 'Open Sans';
		--font-ourmezcales-subheading: normal normal normal 18px/27px 'Open Sans';
		--font-mezcal-text: normal normal normal 61px/75px 'Bernier';
		--font-singlemezcal-name: normal normal normal 77px/1 'Bernier';
		--font-singlemezcal-available: normal normal bold 16px/35px 'Bebas Neue';
		--font-menu-main: normal normal normal 18px/1 'Open Sans';
		--font-menu-lang: normal normal normal 16px/1 'Open Sans';
		--font-productos-ficha: normal normal bold 18px/30px 'Open Sans';
		--font-productos-text: normal normal normal 18px/40px 'Open Sans';
	}

	/* General */
	html{background:var(--color-claro);}
	body{position:relative;overflow-x: hidden;}
	body:after{content:'';background-image: url('./assets/maguey_chico.svg');background-size: contain;background-repeat: no-repeat;display:block;width:860px;height: 880px;top:295px;right:-200px;position:fixed;opacity:.3;z-index:-1;}
	.mobile{display:none;}
	article{width:100%;}
	section{width:100%;margin:0 auto;}
	section.fullwidth{width:100%;}
	.columnas{display:flex;}
	.izq, .der{width:49.5%;position:relative;}
	h3{font:var(--font-title-medium);color:var(--color-gris);letter-spacing: 5px;}
	.rombos:before{content: '';display:block;background:url('./assets/tres_rombos.svg') no-repeat left center;width:100%;height:15px;margin-bottom:20px;background-size: contain;}
	.rombos-left:before{content: '';display:block;background:url('./assets/tres_rombos.svg') no-repeat left center;width:100%;height:10px;margin-bottom:20px;background-size: contain;}
	p{font:var(--font-text-medium);color:var(--color-gris);line-height:30pt;max-width:805px;width:100%;}
	.columnas{display:flex;flex-wrap:wrap;}
	.columnas.reverse{display:flex;flex-wrap:wrap-reverse;}
	.btn.rect a{display:inline-block;padding:10px 20px;border:1px solid var(--color-gris);color:var(--color-gris);text-transform: uppercase;}

	/* Términos y restricciones */
	.terminos article {padding-bottom:200px;}

	/* Restricción de edad */
	#restriccion{ height:100vh; z-index: 100; position:fixed; background-color: white; width: 100vw;}
	#restriccion.ofage{ display:none;}
	#restriccion .logo{width:85px;height:85px;margin:0 auto;margin-top:20px;}
	#restriccion .hola {margin-top:10.6vh;margin-bottom:10.8vh;text-align:center;}
	#restriccion .hola h1{font:var(--font-title-large);margin-bottom:28px;}
	#restriccion .hola p{font:var(--font-text-normal);max-width:unset;}
	#restriccion .botones .btn{margin-bottom:36px;}
	#restriccion .botones .btn.rect a{min-width:260px;}
	#restriccion .botones .btn.rect.disabled a{color:#ecebeb;border-color:#ecebeb;pointer-events: none;}
	#restriccion .message{display:none;}
	#restriccion .message.active{display:block;width:500px;margin:0 auto;font:var(--font-text-medium);font-style:italic; text-align: center; line-height: 2;}
	#restriccion .footer{position:absolute;bottom:52px;left:50%;transform:translateX(-50%);font:var(--font-text-medium);}

	/* Menú */
	.menubar{padding:20px 0;width:calc(100% - var(--margin-sides) * 2);margin:0 auto;display: flex;justify-content: space-between;}
	.menubar .izq, .menubar .der{width:43.5%;position:relative;}
	.menubar nav{display: flex;justify-content: flex-end;}
	.menubar nav ul{list-style: none;margin:0;padding:0;display: flex;justify-content: space-between;}
	.menubar nav ul a{text-transform:uppercase;display:inline-block;margin:20px 0;padding:5px;border-bottom:1px solid transparent;transition:all 0.4s ease-in-out;text-decoration: none;}
	.menubar nav ul.links{width:320px;margin-right:15%;margin-left: 5%;}
	.menubar nav ul.lang{width:90px;}
	.menubar nav ul.links a{font:var(--font-menu-main);}
	.menubar nav ul.lang a{font:var(--font-menu-lang);}
	nav ul li a:hover,
	.page.productos nav ul.links li a.productos,
	.page.historia nav ul.links li a.historia,
	[lang="es"] nav ul li a.es,
	[lang="en"] nav ul li a.en
	{border-color:var(--color-gris);}

	/* Footer */
	footer {background-color:var(--color-oscuro);color:white;padding:88px 107px;}
	footer > .wrapper{max-width:1465px;margin:0 auto;display: flex;justify-content: space-between;flex-wrap:wrap;}
	footer > .wrapper div{margin:0;min-width:200px;}
	footer > .wrapper div.logofooter{margin:0;margin-right:90px;}
	footer > .wrapper div.logofooter:hover{opacity:.9;}
	footer h6{font:var(--font-footer-title);color:white;margin:0;margin-bottom:30px;transition:all 0.4s ease-in-out;}
	footer ul li{margin-bottom:10px;}
	footer ul li a{display:block;font:var(--font-footer-text);color:white;text-decoration: none;transition:all 0.4s ease-in-out;}
	footer a{color:white;}
	footer .contacto:hover h6,footer .contacto a:hover{color:var(--color-verde);}
	footer .servicios:hover h6,footer .servicios a:hover{color:var(--color-naranja);}
	footer .redes:hover h6,footer .redes a:hover{color:var(--color-magenta);}
	footer .redes ul{display:flex;}
	footer .redes ul li{margin-right:10px;}
	footer .redes ul li a{width:20px;height:20px;}

	/* Contents */
	article{width:calc(100% - var(--margin-sides) * 2);margin:0 auto;}
	h2.c-verde{color:var(--color-verde);}
	h2{font-size:35px;margin: 0 -10px;}
	.container{position: relative; top: 50%; transform: translateY(-50%);}
	/* Home */
	#intro{margin-top:70px;}
	#intro .der{padding-bottom:40px;padding-left:50px;}
	#intro .der h2{font:var(--font-intro-phrase);margin-bottom:55px;font-size:50px;line-height:1.5;}
	#intro .der .text{position: absolute; top: 50%; transform: translateY(-50%);}
	#intro .der .text .botones{text-align:left;}
	#intro .img{max-width:495px;}
	#intro .img img{width:calc(100vw * .5238);}
	#decalidad .img{text-align:right;margin-right:-100px;}
	#produccion{margin-top:50px;}
	#produccion .izq .img{text-align:left;}
	#produccion .izq .img img{width: 365px; height: 755px; object-fit: cover;}
	#frase h4{padding: 0;}
	#frase{width:100vw;height:790px;overflow:hidden;background-color: var(--color-oscuro);background-image:url('./assets/pleca_rombos.svg');background-repeat: no-repeat;background-position:right 80px;position:relative;margin:0 calc(var(--margin-sides) * -1);margin-bottom:160px;margin-top:145px;}
	#frase:after{content:'';position:absolute;bottom: -60px;left:50%;transform:translateX(-50%);opacity: 0.3;background-image:url('./assets/maguey_chico.svg');width:264px;height:270px;background-repeat: no-repeat;background-position:center bottom;background-size:contain;filter:brightness(0)}
	#frase h4{position:absolute;top:50%;left:50%;transform:translateY(-50%) translateX(-50%);width:1180px;color:white;font:var(--font-phrase-title);margin:0;letter-spacing:5px;text-align:center;}
	#nuestrosmezcales a{text-decoration:none;}#nuestrosmezcales .title{text-align:center;}
	#nuestrosmezcales .title h3{padding:0 24px;display:inline-block;letter-spacing:3px;font:var(--font-ourmescales-main);}
	#nuestrosmezcales .title img{vertical-align: text-top;}
	#nuestrosmezcales .botones{margin-top:135px;}
	#nuestrosmezcales .swiper-container{max-width: 1400px;margin: 0 auto;}
	#nuestrosmezcales .swiper-container .swiper-button-prev{display:none;}
	#nuestrosmezcales .swiper-container .swiper-button-next{display:none;}
	#nuestrosmezcales .swiper-slide{text-align: center;}
	#nuestrosmezcales .swiper-slide img{width:calc(100vw * .4048);max-width:220px;}
	#nuestrosmezcales .swiper-slide h5{font:var(--font-ourmezcales-title);margin:0;margin-bottom:20px;}
	#nuestrosmezcales .swiper-slide h6{font:var(--font-ourmezcales-text);margin:0;}
	.home section.fullwidth{margin-top:185px;margin-bottom:230px;}
	.home section.fullwidth img{width:100%;object-fit: cover;}
	#mision h3{margin-bottom:55px;}
	#mision .der .img{text-align:right;}
	#mision .izq{padding-right:40px;}
	#mision .der{padding-left:40px;}
	#bottom{margin:140px 0 170px 0;text-align:center;}
	#bottom img{width:105px;height:auto;}
	#bottom h3{font:var(--font-mezcal-text);}

	/* Historia */
	#historia .columnas{padding:0 140px;}
	#historia .columnas .izq,
	#historia .columnas .der{padding:20px;}
	#historia .columnas > .der{border-left:1px solid var(--color-gris);}
	#historia .columnas .columnas .der{border-left:unset;}
	#historia .topsymbol{color:var(--color-gris);text-indent: -1em;margin-bottom:-1ch;}
	#historia .botsymbol{color:var(--color-gris);text-indent: -1em;margin-top:-1ch;}
	#historia .topinfo{position:relative;margin:50px auto;}
	#historia .topinfo .bgimg{position:absolute;z-index:1;}
	#historia .topinfo .text1{position:relative;z-index:2;width:200px;left:calc(50%);margin-left:100px;}
	#historia .topinfo .text2{position:relative;z-index:2;width:200px;left: 50%;transform: translateX(calc(-100% - 160px));}
	#historia .topinfo .text2 p{text-align:right;}
	#historia .topinfo .text3{position:relative;z-index:2;width:200px;left:calc(50%);margin-left:160px;}
	#historia-wrapper{position:relative;padding-top:50px;}
	#historia-wrapper .topsymbol{position:absolute;left:11px;top:-10px;}
	#historia-wrapper .botsymbol{position:absolute;left:11px;bottom:-10px;}
	#historia > h3 {margin:80px 0;}
	#historia #vertical {width:1px;background-color: var(--color-gris);position:absolute;top:0;}
	#historia .histelement{max-width:645px;margin:0 auto;margin-bottom:105px;width:calc(50% - 40px);}
	#historia .histelement:nth-child(odd) {margin-right:calc(50% + 40px);}
	#historia .histelement:nth-child(even) {margin-left:calc(50% + 40px);}
	#historia .histelement.frase{margin:0 auto;max-width: unset;width:100%;justify-content: center; display: flex;}
	#historia .histelement.frase .izq{max-width: 645px; width: calc(50% - 40px);margin-right: 80px;}
	#historia .histelement.frase .der{max-width: 645px; width: calc(50% - 40px);}
	#historia .histelement.frase .der .frase{position: absolute;top: calc(50% + 96px);transform: translateY(-50%);width: 100%;}
	#historia .histelement img{margin-bottom:35px;width:100%;}
	#historia .histelement p{font:var(--font-history-text);color:var(--color-gris);text-align: left;}
	#historia .histelement {text-align: center;}
	#historia .histelement.nobotmargin{margin-bottom: 0;}
	#historia .histelement.alwaysRight{margin-left: calc(50% + 40px);}
	#historia .histelement.right .text{font:var(--font-mezcal-text);text-align: left;color:var(--color-oscuro);}
	#historia .histelement.right .sello {filter:hue-rotate();color:#008B88;}
	#historia .botella.bottom{text-align: center;margin-bottom:-5px;}
	#historia .botella.bottom img{object-fit: contain;}
	#historia #vertical{left:50%;transition:all 0.4s ease-in-out;}

	/* Mezcales */
	#mezcales .columnas{justify-content: space-around;}
	#mezcales > h3{margin-top:90px;margin-bottom:90px;font:var(--font-title-large);}
	#mezcales .allcontent{display:flex;justify-content: space-between;margin:0 5%;margin-bottom:90px;}
	#mezcales section{text-align:center;}
	#mezcales section a{text-decoration:none;}
	#mezcales section img{max-width:220px;}
	#mezcales section h5{font:var(--font-ourmezcales-title);margin:0;margin-bottom:15px;}
	#mezcales section h6{font:var(--font-ourmezcales-subheading);margin:0;}

	/* Detalle Mezcal */
	body.bicuixe h1{color:var(--color-verde);}
	body.ensamble h1{color:var(--color-naranja);}
	body.tepeztate h1{color:var(--color-magenta);}
	article.mezcal {text-align:left;margin-top:75px;padding-bottom:300px;position:relative;overflow: hidden;}
	/* article.mezcal:after{content:'';display:block;width:355px;height: 360px;background-image: url('./assets/maguey_chico.svg');background-size: contain;background-repeat: no-repeat;background-position: bottom center;position:absolute;bottom:-75px;left:50%;transform:translateX(-50%);opacity:.4;} */
	article.mezcal .columnas{margin-bottom:100px;}
	article.mezcal .columnas .izq{width:calc(49.5% - 130px);}
	article.mezcal .columnas .der{width:calc(49.5% + 130px);max-width:675px;}
	article.mezcal .ficha{display: flex;justify-content: space-between;font:var(--font-productos-ficha)}	
	article.mezcal p{text-align:left;font:var(--font-productos-text)}
	.productos .titulo{position: absolute; right: 100px; top: calc(100vh - 120px);}
	.productos h1{font:var(--font-singlemezcal-name);margin:0;text-align: right;margin-bottom:15px;}
	article.mezcal h2{font:var(--font-text-medium);font-style: italic;text-transform:none;margin:0;margin-bottom:40px;}
	article.mezcal h3{text-align:left;font:var(--font-ourmezcales-title);margin:0;}
	article.mezcal .menucito h3{cursor:pointer;padding-top:15px;letter-spacing:3px;}
	article.mezcal .menucito h3.active{border-top:3px solid var(--color-gris);}
	article.mezcal h4{display:inline-block; text-align:left;font:var(--font-singlemezcal-available);letter-spacing:2px;margin:0;margin-bottom:20px;margin-right: 20px;}
	article.mezcal h4+p{display:inline;}
	article.mezcal h5{text-align:left;font:var(--font-productos-title);font-weight:bold;margin:0;margin-top:30px;}
	article.mezcal h5+p{margin-top: -10px;}
	article.mezcal .swiper-container{overflow:hidden;position:relative;margin-bottom:120px;}
	article.mezcal .swiper-slide{text-align: center;}
	article.mezcal ul{list-style: none;padding:0;margin:0;}
	article.mezcal li{font: var(--font-productos-text);line-height: 30px;}
	article.mezcal .menucito{display:flex;justify-content: space-between;margin-bottom:105px;}
	article.mezcal .collapsible{display: none;}
	article.mezcal .expanded{display: block;}
	article.mezcal .ficha.expanded{display: flex;}
	article.mezcal .contenido .texto{margin-bottom:60px;}
	article.mezcal .swiper-pagination{bottom:0;}
}
@media screen and (min-width:1300px){
	p{line-height:35pt;}
	#intro .der{padding-left:0;}
	#intro .der h2{font:var(--font-intro-phrase);}
	#produccion .izq .img img{height: 955px;}
	#frase h4{padding: 0;}
}
@media screen and (min-width:1100px) and (max-width:1480px){
	:root{
		--margin-sides:140px;
		--font-intro-phrase: normal normal normal 51px/70px 'Bernier';
		--font-title-large: normal normal bold 45px/1 'Bebas Neue'; 
		--font-title-medium: normal normal bold 45px/70px 'Bebas Neue';
		--font-text-normal: normal normal normal 20px/1.3 'Open Sans';
		--font-text-medium: normal normal normal 16px/1 'Open Sans';
		--font-button-normal: normal normal normal 17px/1 'Bebas Neue';
		--font-footer-title: normal normal normal 28px/1 'Bebas Neue';
		--font-footer-text: normal normal normal 16px/1 'Open Sans';
		--font-history-text: normal normal normal 16px/35px 'Open Sans';
		--font-phrase-title: normal normal normal 45px/80px 'Bernier';
		--font-ourmescales-main: normal normal bold 45px/1 'Bebas Neue';
		--font-ourmezcales-title: normal normal normal 21px/1 'Bebas Neue';
		--font-ourmezcales-text: normal normal normal 16px/27px 'Open Sans';
		--font-ourmezcales-subheading: normal normal normal 16px/27px 'Open Sans';
		--font-mezcal-text: normal normal normal 45px/60px 'Bernier';
		--font-singlemezcal-name: normal normal normal 77px/1 'Bernier';
		--font-singlemezcal-available: normal normal bold 16px/35px 'Bebas Neue';
		--font-menu-main: normal normal normal 18px/1 'Open Sans';
		--font-menu-lang: normal normal normal 16px/1 'Open Sans';
		--font-productos-ficha: normal normal bold 18px/30px 'Open Sans';
		--font-productos-text: normal normal normal 16px/40px 'Open Sans';
	}
	#mezcales .allcontent{margin:0;margin-bottom:90px;}
	#intro{margin-top:0;}
	#intro .der .text{top: 30%;}
	#intro .img{height:70%;transform: translateY(-85px);}
	#intro .img img{width:unset;}
	p{font:var(--font-text-medium);line-height:30pt;}
	h3{margin-bottom:10px;}
	#mision h3{margin-bottom:unset;}
	#frase h4 { max-width: 930px; }
	#nuestrosmezcales .swiper-slide h5 { margin-bottom: 10px; }
	section#decalidad { margin-top: -300px; }
	#nuestrosmezcales a{text-decoration:none;}
	#nuestrosmezcales .title h3 { padding: 0 15px;}
	#historia .histelement p {margin-top:-21px;}
	article.mezcal .menucito {max-width:90%;margin-bottom:55px;}
	.productos .titulo { position: relative; right: unset; top: unset; bottom: 50px; right: var(--margin-sides); }
	article.mezcal{padding-bottom:0;}
	.terminos h4{font-size:30px;}
	.terminos .izq, .terminos .der {width: 69.5%;}
}