/* iMac */
@media screen and (min-width: 1640px) {
	/* section.pagina {width: calc(100% - 32em); padding: 0 16em} */
}

/* Macbook */
@media screen and (min-width: 1334px) and (max-width: 1639px) {
	/* section.pagina .contenedor{width: calc(100% - 16em); padding: 0 8em} */
}




/* Laptop */
@media screen and (min-width: 1160px) and (max-width: 1440px) {


}

@media screen and (min-width: 1080px) and (max-width: 1261px) {


}




/* Celulares */
@media screen and (min-width: 231px) and (max-width: 640px) {


}

/* Tabletas */

@media screen and (min-width: 641px) and (max-width: 1079px) {


}



@media screen and (min-width: 231px) and (max-width: 1079px) {
	header {background-color: transparent; height: auto; min-height: 80px; position: absolute}
	header .espacio {padding: 1em; width: calc(100% - 2em); max-width: auto; gap: 1.5em; }
	header a#menu {display: inline-flex; color: #fff;}
	header .logo {max-width: inherit; position: relative}
	body#home header .logo {top: 100vw;}
	body#home header .logo,
	body.proyecto header .logo {filter: invert();}
	
	header.act .espacio {gap: 4em; justify-content: space-around; height: calc(100vh - 6em)}
	header.act .espacio .der {width: 100%; display: inline-flex; flex-direction: column;}

	header nav.menu {display: none;}
	header .espacio .der nav.idiomas{display: none}
	
	
	#cart .flex i {display: inline-flex}

	span.carrito {position: relative; top: inherit; right: inherit; font-size: .5em; color: #fff}
	span.carrito.empty {color: #fff;}

	body#talleres span.carrito.empty,
	body#talleres header a#menu,
	body#tienda header a#menu,
	body#tienda span.carrito.empty,
	body.producto header a#menu,
	body.producto span.carrito.empty,
	body#checkout header a#menu,
		body#about header #cart h2,
		body#proyectos header #cart h2 {color: var(--color-encabezados)}

	body#talleres header svg,
	body#tienda header svg {height: 25vh;}

	figure.fotograma {min-height: 100vh}
	figure.imagen,
	section#talleres.pagina figure.imagen {height: min(40vh, 270px); border-radius: .5em;}
	
	section.post.proyecto figure.portada {background-attachment: inherit;}

	#cart {width: 100%;top: inherit; bottom: 0; position: fixed; border-radius: 1em 1em 0 0;}
		#cart h5 span.carrito {display: none}
	#cart .contenedor {padding: 1em; width: calc(100% - 2em)}
		.pedido .item {padding: 0 0 .5em; gap: .5em}

	#cart.hide  .contenedor .pedido {display: none;}
	#cart.hide  .contenedor .flex.row i.fa-chevron-down:before {content: "\f077"}
	#cart.hide h5 {text-align: center; padding: 1em;}
	#cart.hide h5 span.carrito {display: inline-flex; color: var(--color-encabezados)}

	body#checkout #cart {display: none;}

	h1 {font-size: 2em; font-weight: 500;}
	h2 { font-size: 2em; }
	h3 {font-size: 1rem}
	h4 {font-size: .75em}
	p {font-size: .75em}
		section input,
		section select,
		section button,
		 {font-size: 1em}

		section form button,
		section form input[type="submit" i],
		section form .cart-action button {font-size: .75em}

	section {}
	.contenedor,
	section.post.proyecto .contenedor,
	section.pagina .contenedor,
	section#domestika.pagina .contenedor {padding: 4em 1em; width: calc(100% - 2em); flex-direction: column; gap: 2em;}


	body#home section#proyectos figure {background-attachment: inherit}


	section.post article {width: 100%; padding: 0}

		.columna.dos,
		.columna.tres,
		.columna.cuatro,
		section aside {width: 100%; flex: 1 0; gap: 1em; }

		ul.grid,
		body#proyectos section#portafolio ul.grid {grid-template-columns: repeat(8,1fr);}

		span.boton {width: 100%}
		span.boton a,
		section#talleres .cuadro span.boton a {width: 100%; text-align: center; flex: inherit; padding: .5em .75em; border-radius: .75em;}

	
		section span.piedefoto {font-size: .75em}

		section.image figure.imagenfondo {background-attachment: inherit;}

		section.pagina.destacado .contenedor,
		section.post.producto .contenedor,
		section#ubicacion .contenedor {padding: 6em 1em 2em; width: calc(100% - 2em); gap: 1em}

		ul.grid.uno li,
		ul.grid.tres li,
		section.post.galeria ul.grid li,
		section#tienda.pagina ul.grid li,
		body#proyectos section#portafolio ul.grid li{grid-column: span 8 !important;}


		ul.grid.uno,
		section#tienda.pagina ul.grid {margin: 2em 0 0}
		ul.grid.uno li {flex-direction: column;}
		ul.grid.uno li a {width: 100%}

				section.post.galeria ul.grid {gap: 0}

		section#portada .contenedor,
				section.image .contenedor,
				section#resenas .contenedor {width: calc(100% - 4rem);padding: 2rem;}
				section.aside figure.imagen {min-height: 40vh}
		
		section#hero.pagina .columna.dos h3 p {font-size: 1.5rem; line-height: 1.5;}


		section#servicios ul.grid li {grid-column: span 8; flex-direction: column}
				section#servicios ul.grid li .slider {width: 100%}
				section#servicios ul.grid li .flex.col {min-height: auto}
				section#servicios blockquote,
				section .columna.dos.form {padding: 2rem 1rem; width:calc(100% - 2rem); flex-direction: column}

				section#reservaciones ol li,
				section#servicios blockquote ul li {font-size: 10pt; font-weight: 300;margin-bottom: 1rem}
				section#servicios blockquote ul,
				section#servicios blockquote h4 {flex: 1}
				section#servicios blockquote ul {width: calc(100% - 1rem); padding-left: 1rem}

		section#testimonios {min-height: 40vh}
		section#testimonios figure.imagenfondo {background-attachment: inherit}

		section#about.pagina {min-height: 100vh; justify-content: flex-end;}
			section#about.pagina .deg.rad {height: 200%}
		
		section#about.pagina .contenedor {padding: 1rem 1rem 2rem; width: calc(100% - 2rem); gap: 0}
		section#about.pagina aside .columna {padding: 4em 1em 2em; width: calc(100% - 2em) }
		section#about.pagina figure.fotograma {width: 100%; min-height: 80vh;}


		section#reservaciones form h2 {font-size: 1.5rem}
				section#reservaciones form .bloque h3,
				section#reservaciones form .bloque label {font-size: 12pt}

		section#historia aside .columna {width: calc(100% - 2rem); padding: 4rem 1rem}
		section#historia aside .columna h3.display {font-size:2rem; line-height: 1.5}
				#huautla .slider.galeriapag {width: 100%; min-height: 50vh}
		section#historia figure.fotograma {min-height: 50vh}

		section.post.galeria .contenedor {padding: 0;}
		section.post.galeria ul.grid li {gap: .5em}
		/* section.post.proyecto .contenedor {padding: 2em; width: calc(100% - )} */

		section#tienda.pagina ul.grid {gap: 2em}
			section#tienda.pagina ul.grid li {flex-direction: column; gap: .5em}
			section#tienda.pagina ul.grid li a {width: 100%}
			section#tienda.pagina ul.grid li span.boton {display: inline-flex;}
			
		
			section.post.producto figure.fotograma {width: 100%; min-height: 50vh}
			section.post.producto article {width: 100%; padding: 0}

		section#pedido .contenedor {flex-direction: column-reverse; padding: 6em 2em;}
			section#pedido .columna.pedido {padding: 2em 1em; width: calc(100% - 2em); gap: 1em}
			section#pedido .columna.pedido .item h4 {font-size: 1em}
			section#pedido .columna.pedido span {font-size: .75em}
			section#pedido form {gap: 1em;}
				section#pedido form .half {width: calc(100% - 10px)}

		section.image.banner {min-height: 100vh;}
			section.image.banner figure.imagenfondo {display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh;}
			section.image.banner figure.imagenfondo .contenedor {align-self: stretch; padding: 0 2em; height: 100%; width: calc(100% - 4em)}
	
	footer {min-height: 80vh;}
		footer .espacio {gap: 2em 1em; width: calc(100% - 2em); padding: 4em 1em 2em}
		footer .columna .logo {width: 80%; max-width: inherit;}
		footer .columna.logopie,
		footer .columna.terms {flex: 1 0 100%;}
		footer .columna.contacto {order: 4; flex: 1 0 calc(40% - 1em);}
		footer .columna.correo {flex: 1 0 55%; order: 5; width: 55%;}
}



/* iPad Pro */
@media only screen  and (min-device-height: 1024px)  and (max-device-height: 1366px)  and (orientation: portrait)and (-webkit-min-device-pixel-ratio: 1.5) {



}