@charset "UTF-8";
/* =====================================================================
   Adaptacion a movil y tablet - Cerveceria La Villa
   Solo se aplica en pantallas de menos de 1040px de ancho.
   En ordenador la web se ve exactamente igual que antes.
   ===================================================================== */

/* El boton del menu no se ve en ordenador */
.menu-boton { display: none; }

@media screen and (max-width: 1040px) {

	html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
	body { overflow-x: hidden; }

	/* --- Anchos fijos fuera: todo ocupa el ancho de la pantalla --- */
	.encabezado,
	.topnavigationgroup,
	.content,
	.contentsugerencias,
	.contexto,
	.foot,
	#contenido_galeria,
	.menucarta,
	.menucarta p {
		width: auto !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}
	.contentsugerencias { height: auto !important; }
	/* Bloques con ancho escrito en la propia pagina */
	[style*="width: 875px"], [style*="width: 900px"], [style*="width: 874px"],
	[style*="width: 751px"], [style*="width: 752px"], [style*="width: 756px"],
	.auto-style3 {
		width: auto !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}
	body div { max-width: 100%; }

	/* Imagenes nunca mas anchas que la pantalla */
	img { max-width: 100%; height: auto; }

	/* Fondo de pagina */
	.fotoatras img { width: 100%; height: 100%; object-fit: cover; }

	/* --- Cabecera --- */
	.encabezado { height: auto !important; padding-bottom: 6px; }
	.toplogo { width: auto; text-align: center; padding-top: 12px; margin-bottom: 10px; }
	.toplogo p { margin: 0; }
	.toplogo img { width: 200px; height: auto; }

	/* --- Menu con boton (hamburguesa) --- */
	.menu-boton {
		display: block;
		width: 100%;
		margin: 0;
		padding: 12px 16px;
		background: none;
		border: 0;
		border-top: 1px solid #907b5e;
		border-bottom: 1px solid #907b5e;
		color: #907b5e;
		font: bold 17px Arial, Helvetica, sans-serif;
		letter-spacing: 1px;
		cursor: pointer;
		text-align: center;
	}
	.menu-boton:hover, .menu-boton:focus { color: #fff; outline: none; }
	.menu-boton .icono { font-size: 22px; vertical-align: -2px; margin-right: 8px; }

	ul.MenuBarHorizontal { display: none; float: none; width: auto; margin: 0; padding: 0; }
	.menu-abierto ul.MenuBarHorizontal { display: block; }

	ul.MenuBarHorizontal li,
	ul.MenuBarHorizontal ul li {
		float: none !important;
		width: auto !important;
		border-top: 0;
		border-bottom: 1px solid rgba(144,123,94,.35);
		text-align: center;
	}
	ul.MenuBarHorizontal a { padding: 14px 16px; font-size: 16px; }

	/* Submenus: debajo de su apartado, se abren al tocar */
	ul.MenuBarHorizontal ul,
	ul.MenuBarHorizontal ul ul {
		position: static !important;
		left: auto !important;
		top: auto !important;
		margin: 0 !important;
		width: auto !important;
		display: none;
		background-color: #241d12;
	}
	ul.MenuBarHorizontal li.abierto > ul { display: block; }
	ul.MenuBarHorizontal ul a { font-size: 15px; font-weight: normal; }
	ul.MenuBarHorizontal ul ul a { font-size: 14px; }

	ul.MenuBarHorizontal a.MenuBarItemSubmenu,
	ul.MenuBarHorizontal ul a.MenuBarItemSubmenu,
	ul.MenuBarHorizontal a.MenuBarItemSubmenuHover,
	ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover {
		background-image: none !important;
	}
	ul.MenuBarHorizontal a.MenuBarItemSubmenu:after { content: "  \25BE"; }
	ul.MenuBarHorizontal li.abierto > a.MenuBarItemSubmenu:after { content: "  \25B4"; }

	/* --- Textos --- */
	.contexto {
		padding: 22px 18px !important;
		font-size: 17px;
		line-height: 1.5;
		text-align: justify;
		-webkit-hyphens: auto;
		hyphens: auto;
	}
	.contentsugerencias { font-size: 16px; text-align: justify; }
	.contentsugerencias p, .textoizquierda, .textoderecha, .fotoizquierda, .fotoderecha {
		text-align: justify;
		-webkit-hyphens: auto;
		hyphens: auto;
	}
	/* Los titulos de cada apartado siguen centrados */
	.menucarta, .menucarta p { text-align: center !important; -webkit-hyphens: manual; hyphens: manual; }
	/* En las tablas de precios el texto va alineado a la izquierda */
	:where(.contentsugerencias) td { text-align: left; -webkit-hyphens: manual; hyphens: manual; }
	.menucarta { padding: 16px 12px 8px; }
	.menucarta a { display: inline-block; padding: 6px 4px; }
	h1, h2, h3 { font-size: 21px; margin: 10px 16px 12px !important; padding-top: 14px; text-align: left; float: none; }

	/* --- Tablas de carta, vinos y menus --- */
	.contentsugerencias table { width: 100% !important; padding: 0 10px 10px; box-sizing: border-box; }
	.contentsugerencias td { padding: 5px 2px; vertical-align: top; line-height: 1.35; overflow-wrap: anywhere; word-break: break-word; }
	.contentsugerencias td div[align="right"] { white-space: nowrap; padding-left: 10px; }

	/* --- Sugerencias: foto arriba y texto debajo --- */
	.fotoizquierda, .fotoderecha, .textoizquierda, .textoderecha, .precio {
		float: none !important;
		width: auto !important;
		margin: 10px 16px !important;
		line-height: 1.5 !important;
		font-size: 17px;
	}
	.fotoizquierda img, .fotoderecha img { width: 100%; height: auto; display: block; }
	.fotoizquierda:empty { display: none; }

	/* --- Galerias de fotos --- */
	#contenido_galeria {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 875 / 450;
		overflow: hidden;
	}
	#contenido_galeria > div { width: 100%; height: 100%; top: 0; left: 0; }
	#contenido_galeria img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover;
	}
	#contenido_galeria .gal-flecha { width: 36px !important; height: 52px !important; line-height: 46px !important; font-size: 40px !important; margin-top: -26px !important; }

	/* --- Pie --- */
	.foot { height: auto !important; padding: 14px 16px; text-align: center; overflow: hidden; }
	.footleft, .footright, .facebook {
		float: none !important;
		width: auto !important;
		margin: 6px auto !important;
		text-align: center !important;
	}
	.footleft p, .footright p, .facebook p { margin: 0; }
	.pie-sep { display: none; }
	.pie-tel { display: block; white-space: nowrap; margin-top: 4px; }
	.facebook { width: 30px !important; }
}

/* Telefonos */
@media screen and (max-width: 600px) {
	.contentsugerencias, .contexto, .foot { margin-top: 8px; }
	.foot { font-size: 14px; }
	.contexto { font-size: 16px; }
	.contentsugerencias td { font-size: 16px; }
}