/* CSS content (all pages) */
:root {
  --blak-text: #555555;
  --navbar-height: 3.5rem;
  --background-menu: #163216;
  --menu-color: #fff;
  --menu-contrast-color: #aaa234;
  --banner-full-height: 84.5vh;
  --banner-height: 65vh;
  --banner-width: 90vw;
  --primary-color: #033e30;
  --secondary-color: #bdcec8;
  --contrast-color: #c29a62;
  --atention-color: #ffb727;
  --font-size-btn: 1.5rem;
  --firs-color: #000a54;
  --second-color: #888;
  --principal-margin: 150px;
  --global-x-margin: 2rem;
	--button-face: #c3bd72;
	--button-color: #2a652a;
}

.nav__link {
  font-weight: normal;
  font-size: calc(var(--navbar-height) * 0.3) !important;
  text-transform: uppercase;
}

img.slide-01.stretch {
  max-width: 515px !important;
  min-width: 400px !important;
  display: block;
  margin: auto;
  height: auto !important;
}
#splide-banner-slide01 {
  height: var(--banner-full-height) !important;
  top: 28px;
}

.dropdown__item .dropdown__menu {
  max-height: 1000px;
  transition: max-height 0.4s ease-out;
}

/* Rotate dropdown icon */
.dropdown__item .dropdown__arrow {
  display: none;
}

.dropdown__link {
  color: #fff!important;
  background-color: var(--background-menu)!important;
  text-transform: uppercase;
  font-weight: 500!important;
}

.dropdown__link:hover {
  color: var(--menu-contrast-color)!important;
  background-color: var(--secondary-color)!important;
}

@media screen and (max-width: 1400px) {
  .nav__listx {
    column-gap: 2.5rem !important;
  }
}

@media screen and (max-width: 1200px) {
  .nav__listx {
    column-gap: 1.5rem !important;
  }
}

@media screen and (max-width: 1100px) {
  .nav__listx {
    column-gap: 0.5rem !important;
  }
}

@media screen and (max-width: 770px) {
  #splide-banner-slide01 .slider-page {
    background-size: 100%!important;
  }

  img.slide-01.stretch {
    max-width: 330px !important;
    min-width: 330px !important;
  }  
}

@media screen and (min-width: 1000px) {
  .dropdown__link {
    color: var(--background-menu)!important;
    width: 12rem!important;
    background-color: #fff!important;
    border: solid 1px var(--background-menu)!important;
    border-radius: 5px!important;
  }
  .dropdown__link:hover {
    color: var(--menu-contrast-color)!important;
    background-color: var(--background-menu)!important;
  }
  .dropdown__menu {
    left: -55%!important;
  }
  .dropdown__list {
    border-radius: 5px!important;
  }
  .dropdown__item .dropdown__arrow {
    display: block;
  }

}












.web-button {
	margin: 2rem auto;
	display: block;
	padding: 8px 20px;
	font-size: 105%;
	border-radius: 8px;
	border: none;
	background-color: var(--button-face);
	color: var(--button-color);
	cursor: pointer;
	transition: all 0.2s;
}
.web-button:hover {
	color: var(--button-face);
	background-color: var(--button-color);
	box-shadow: 2px 2px 5px var(--button-face);
}

#ix_categories {
		padding-top: 1rem;
		padding-bottom: 1rem;
		background-color: #f6f6f6;
		background-image: url(/medias/image/tlayoli/textura_inicio_tlayoli.svg);
		background-repeat: no-repeat;
		background-position-x: right;
		background-size: auto 80%;
		background-position-y: center;
	}
	#ix_categories .container {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		align-items: center;
		margin-top: 3rem;
		margin-bottom: 3rem;

	}
	.green-ttl {
		color: #2b662b;
		font-size: 2.5rem;
		font-weight: 800;
		font-family: serifserif!important;
	}
	.categories-grid {
		display: flex;
		justify-content: space-around;
		width: 100%;
		gap: 2rem;
		margin-top: 3rem;
	}
	.card-content {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.card-icon img {
		width: 15rem;
	}
	.card-title {
		font-weight: lighter;
		font-family: sans-serif!important;
		font-size: 1.8rem;
		letter-spacing: 3px;
	}
	#ix_nosotros {
		padding-top: 5rem;
		padding-bottom: 5rem;
		display: flex;
		margin-top: 1rem;
		margin-bottom: 1rem;
		background-image: url(/medias/image/tlayoli/textura_izquierda.svg);
		background-repeat: no-repeat;
		background-position-x: left;

	}
	.nosotros-texto {
		display: flex;
		flex-direction: column;
		text-align: right;
		width: 50%;
		padding-inline-start: var(--global-x-margin);
	}
	.nosotros-texto img {
		height: 3rem;
		display: block;
		margin-left: auto;
	}
	.nosotros-texto section {
		margin-top: 2rem;
		font-size: 1.5rem;
		line-height: 2rem;
	}
	#ix_nosotros > img {
		width: 50vw;
		height: auto;
		max-width: unset;
	}
	.beneficios-grid {
		display: flex;
		justify-content: space-between;
	}
	.beneficio-card {
		display: flex;
		flex-direction: column;
		width: 120px;
		align-items:center;
	}
	.beneficio-card img {
		width: 80px;
	}
	.beneficio-card h2 {
		font-weight: lighter!important;
		font-family: sans-serif!important;
		font-size: 20px;
		text-align: center;
	}
	#ix_xqelegirnos .green-ttl {
		position: relative;
	}
	#ix_xqelegirnos .green-ttl::after {
		position: absolute;
		content: '';
		width: calc(150% + 1rem);
		background-color: #f7f1d7;
		height: 1rem;
		bottom: -0.5rem;
		left: -50%;
	}
	#ix_kosher {
		margin-top: 3rem;
	}
	#ix_kosher .container {
		display: flex;
	}
	#ix_kosher img {
		width: 220px;
	}
	#ix_kosher section {
		background-color: #f7f1d7;
		padding: 1rem;
		margin-left: 2rem;
		width: 100%;
		text-align-last: center;
		margin-top: auto;
		margin-bottom: auto;
	}
	#business {
		margin-top: 3rem;
		background-image: url(/medias/image/tlayoli/inicio_pa.webp);
		background-size: cover;
		padding: 5rem var(--global-x-margin);
		display: grid;
		grid-template-columns: 50% 50%;
	}
	#business .place {
		position: relative;
		background-color: rgba(0, 0, 0, 0.5);
		color: #fff;
		border-radius: 0 03rem 3rem 0;
		font-size: 200%;
		grid-column: 1;
		padding: 3rem 4rem 1.5rem;
	}
	#business .web-button {
		--button-face: #FFF;
    --button-color: darkslategrey;
    font-size: 110%;
    width: min-content;
    display: block;
    float: left;
	}
	#business .logo {
		grid-column: 2;
		display: block;
		margin: auto;
		max-width: 340px;
	}
	#business .place::after {
		position: absolute;
		content: '';
		width: 50%;
		height: 100%;
		left: -50%;
		background-color:	rgba(0, 0, 0, 0.5);
		top: 0;
	}
	#ix_marcas .green-ttl {
		margin: 4rem auto;
	}
	.marcas.green-ttl {
		position: relative;
		text-align: center;
	}
	.marcas.green-ttl::before,
	.marcas.green-ttl::after {
			height: 6px;
			content: "";
			width: 230px;
			position: absolute;
			background: #f7f1d7;
			transform: translate(28px, 1.3rem);
			border-radius: 10px;
	}
	.marcas.green-ttl::before {
		transform: translate(calc(-100% - 28px), 1.3rem);
	}
	#parners-slider .splide__slide img {
		margin-left: 3rem;
		margin-right: 3rem;
	}
	.spot-page {
		background-image: url(/medias/image/tlayoli/frase_inicio.webp);
		background-size: cover;
		padding: 8rem var(--global-x-margin);
		color: #fff;
		text-align: center;
	}
	.spot-page section {
		font-size: 3rem;
		font-weight: 800;
	}
	
	#contactus .body {
    width: 47rem;
		margin: auto;
  }
  #contactus h2 {
    font-family: serif;
    font-weight: 900;
    font-size: 2rem;
    color: var(--text-color);
  }
  #contactus .control {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
    margin-right: 2rem;
    margin-top: 2rem;
    padding: 0.4rem 0.4rem 0.4rem 0.7rem;
    font-size: 1.2rem;
    width: 13rem;
  }
  #contactus .control::placeholder {
    color: var(--text-color);
    opacity: 1;
  }


	@media (max-width: 900px) {
		.ix_contact {

		}
		.ix_contact img {

		}
	}

	.ix_contact {
		--border-color: #aaa234; 
		--text-color: #CCC;
		position: relative;
		padding-top: 3rem;
    padding-left: 20vw;
		margin-top: 6rem;
    margin-bottom: 6rem;
	}
	.ix_contact #contactus {
		background-image: url(/medias/image/tlayoli/solicita_cotizacion_pa.webp);
    background-size: 100% 100%;
    padding: 2rem 4rem;
    width: 70vw;
    min-width: 50rem;
		border-radius: 4rem
	}
	.ix_contact img {
		position: absolute;
		height: calc(100% - 3rem);
		left: 0;
		width: 23vw;
		top: 0;
		border-radius: 0 4rem 4rem 0;
	}

	.footer {
		background-color: #2b662b;
		padding-top: 4rem;
		padding-bottom: 1rem;
	}
	.footer-content {
		display: flex;
		justify-content: space-evenly;
		flex-wrap: wrap;
		color: #fff;
	}
	.footer-bottom {
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		margin-top: 2rem;
		width: 100%;
	}
	.footer .logo-shapes {
		width: 18rem;
		margin-bottom: 1rem;
	}
	.footer .company-description {
		font-size: 1.4rem;
	}
	.footer .contact-icon {
		display: inline-block;
		width: 2.5rem;
		margin-right: 1rem;
	}
	.footer .contact-text {
		font-size: 1.2rem;
		line-height: 2.5rem;
    display: table-caption;
		color: #fff;
		text-wrap-mode: nowrap;
	}
	.footer .nav-link {
		color: #fff;
		display: block;
		font-size: 1.2rem;
		line-height: 2.1rem;
	}
	.footer .footer-section strong {
		font-size: 1.2rem;
    text-transform: uppercase;
    margin-bottom: 1.2rem;
    display: block;
	}
	.footer-bottom a {
		color: #fff;
		text-decoration: none;
	}


			.main-menu {
			position: absolute;
		}
		.page-title {
			position: relative;
			background-size: 100% 100% !important;
			text-align: center;
			position: relative;
			padding-top: var(--navbar-height);
		}
		.page-title h1 {
			text-transform: uppercase;
			color: white;
			font-size: 4rem;
			letter-spacing: 0.1rem;
			padding: 10rem 0;
			font-family: serif !important;
			margin: 0;
		}
		.page-title img {
			position: absolute;
			top: 13rem;
			left: var(--global-x-margin);
			height: 5rem;
		}

		.page-desc {
			padding-top: 5rem;
			padding-bottom: 5rem;
			font-size: 200%;
			background-image: url(/medias/image/tlayoli/textura_derecha_elote.svg);
			background-size: auto 100%;
			background-position-y: center;
			background-position-x: right;
			background-repeat: no-repeat;

		}
		.page-desc section {
			max-width: 846px;
			margin: auto;
			text-align: center;
		}

		.button-place {
			display: flex;
			justify-content: space-around;
			margin-top: 3rem;
			justify-self: anchor-center;
			gap: 4rem;
		}

		#splide-productos {
			margin-top: 3rem;
			margin-bottom: 3rem;
		}
		.producto-list {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 1rem;
			text-align: center;
			font-size: 150%;
			background-color: #f8f2df;
			margin: 3rem;
			border-radius: 1rem;
			box-shadow: 2px 2px 5px lightgrey;
		}

		.producto-list img {
			margin-top: 1rem;
		}
		.producto-list span {
			margin-bottom: 1rem;
			min-height: 3.5rem;
			align-content: center;
		}

		.kosher {
			position: relative;
		}
		.kosher::after {
			content: "";
			position: absolute;
			top: -1rem;
			left: -1rem;
			width: 4rem;
			height: 4rem;
			background: url(/medias/image/tlayoli/kosher_producto.svg);
			background-size: contain;
			background-repeat: no-repeat;
		}

		#grupo-prods {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-evenly;
	        gap: 1rem;
		}
		#grupo-prods .producto-list {
			min-width: 250px;
            max-width: 250px;
            min-height: 116px;
            margin: 1rem 1rem;
		}
		#grupo-prods .producto-list span{
			display: block;
			margin: auto;
			max-width: 11rem;
		}
		#grupo-prods .kosher::after {
			top: 2.4rem;
    	left: -2rem;
		}

		.filosofia {
			display: flex;
			margin-top: 4rem;
		}
		.filosofia img {
			box-shadow: 1rem -1rem #163216;
			margin-right: 5rem;
		}
		.filosofia .body {
			font-size: 170%;
			color: #2b662b;
			text-align: right;
		}
		.filosofia .body h2 {
			font-family: serif!important;
			border-bottom: 5px solid #f6efd5;
			padding-bottom: 1rem;
			max-width: 400px;
			display: block;
			margin-left: auto;
		}
		.mvv {
			display: flex;
			gap: 3rem;
			margin-top: 5rem;
			> div {
				flex: 1 1 300px;
			}
		}
		.ision {
			display: flex;
			flex-direction: column;
			font-size: 170%;
		}
		.ision img {
			width: 10rem;
			display: block;
	    margin: 0 auto;
		}
		.ision h2 {
			display: block;
			margin: 2rem auto 3rem;
			color: #2c662c;
		}
		.ision section {
			color: #5e3a19;
		}
		.valores {
			margin-top: 4rem;
			display: flex;
		}
		.valores .ision {
			display: flex;
			gap: 4rem;
			flex-direction: row;
			margin-top: 3rem;
			margin-bottom: 3rem;
		}


	@media screen and (max-width: 1000px) {
		.filosofia {
			position: relative;
		}
		.filosofia img {
			position: absolute;
			z-index: -1;
			opacity: .4;
			box-shadow: none;
			top: 1rem;
		}
		.mvv,
		.valores .ision {
			flex-direction: column;
			gap: 0;
		}
		.ision.aux {
			margin-top: 5rem;
		}
		.button-place {
			font-size: 1.5rem!important;
			gap: 1rem;
		}

		.web-button {
			display: flex;
			flex-wrap: wrap;
			flex-direction: column;
			align-self: center;
			text-align: center;
		}
		.page-title img {
			display: none;
		}
		#ix_kosher .container {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 2rem;
		}
		#ix_kosher section {
			margin-left: 0;
			font-size: 1.8rem;
		}
	}

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

		:root {
			--banner-full-height: 65vh;
		}
		.categories-grid {
			flex-direction: column;
		}
		#ix_nosotros > img {
			display: none;
		}
		.nosotros-texto {
			width: 100%;
    	margin-right: var(--global-x-margin);
		}
		/* #ix_xqelegirnos */
		.green-ttl {
			width: 100%;
			text-align: center;
			margin-bottom: 3rem;
			padding-bottom: 1.5rem;
		}
		.beneficios-grid {
			flex-direction: column;
			align-items: center;
		}

		.button-place {
			font-size: 1rem!important;
		}

		#contactus .body {
			width: unset!important;
			margin: 0 var(--global-x-margin)!important;
		}
		#contactus .control {
			width: 100%!important;
		}

		.ix_contact {
			padding-left: 0;
		}
		.ix_contact img {
			display: none;
		}
		.ix_contact #contactus {
			width: 100%;
			min-width: unset;
			padding: 2rem 0;
			border-radius: 0;
		}

		.footer-content {
			flex-direction: column;
			align-items: center;
			gap: 2rem
		}
		.footer-section {
			width: 100%;
			justify-items: center;
		}
		.page-title h1 {
			font-size: 2.5rem;
		}
		#business {
			display: flex;
			flex-direction: column-reverse;
		}
		#business .place {
			width: 100%;
			padding: 1rem;
			border-radius: 0;
			font-size: 150%;
		}
		#business .logo {
			margin-bottom: 3rem;
		}
		#business .place::after {
			display: none;
		}
		.spot-page {
			background-position: center;
			padding: 5rem var(--global-x-margin);
		}
		.spot-page section {
			font-size: 2rem;
			padding: 0 1rem;
		}
		.page-title {
			background-position: center !important;
			background-size: 170% 100% !important;
		}
	}