/*
	Brands Styles
*/

/*================================== Brands Imports ==================================*/

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

html, body {
	font-family: 'Poppins' !important;
}

/*================================== Brands Variables ==================================*/
	
	:root {
	    /* Scrollbar Colors */
	    --grayBrands: #B0B0B0;
	    --pinkBrands: #E79A9B;
	    --softPinkBrands: #FFE6E6;
	    --redAgave211: #C32E2A;
	    --scrollBarBG: var(--pinkBrands);

		/* 211 Colors */
		--red211: #C32E2A;
		--green211: #6F924B;
	}

/*================================== Brands Font ==================================*/

	.baskervville-regular {
		font-family: "Baskervville", serif;
		font-style: normal;
	}

	.baskervville-regular-italic {
		font-family: "Baskervville", serif;
		font-style: italic;
	}

	.poppins-thin {
		font-family: "Poppins", sans-serif;
		font-weight: 100;
		font-style: normal;
	}

	.poppins-thin-italic {
		font-family: "Poppins", sans-serif;
		font-weight: 100;
		font-style: italic;
	}

	.poppins-extralight {
		font-family: "Poppins", sans-serif;
		font-weight: 200;
		font-style: normal;
	}

	.poppins-extralight-italic {
		font-family: "Poppins", sans-serif;
		font-weight: 200;
		font-style: italic;
	}

	.poppins-light {
		font-family: "Poppins", sans-serif;
		font-weight: 300;
		font-style: normal;
	}

	.poppins-light-italic {
		font-family: "Poppins", sans-serif;
		font-weight: 300;
		font-style: italic;
	}

	.poppins-regular {
		font-family: "Poppins", sans-serif;
		font-weight: 400;
		font-style: normal;
	}

	.poppins-regular-italic {
		font-family: "Poppins", sans-serif;
		font-weight: 400;
		font-style: italic;
	}

	.poppins-medium {
		font-family: "Poppins", sans-serif;
		font-weight: 500;
		font-style: normal;
	}

	.poppins-medium-italic {
		font-family: "Poppins", sans-serif;
		font-weight: 500;
		font-style: italic;
	}

	.poppins-semibold {
		font-family: "Poppins", sans-serif;
		font-weight: 600;
		font-style: normal;
	}

	.poppins-semibold-italic {
		font-family: "Poppins", sans-serif;
		font-weight: 600;
		font-style: italic;
	}

	.poppins-bold {
		font-family: "Poppins", sans-serif;
		font-weight: 700;
		font-style: normal;
	}

	.poppins-bold-italic {
		font-family: "Poppins", sans-serif;
		font-weight: 700;
		font-style: italic;
	}

	.poppins-extrabold {
		font-family: "Poppins", sans-serif;
		font-weight: 800;
		font-style: normal;
	}

	.poppins-extrabold-italic {
		font-family: "Poppins", sans-serif;
		font-weight: 800;
		font-style: italic;
	}

	.poppins-black {
		font-family: "Poppins", sans-serif;
		font-weight: 900;
		font-style: normal;
	}

	.poppins-black-italic {
		font-family: "Poppins", sans-serif;
		font-weight: 900;
		font-style: italic;
	}

	// <uniquifier>: Use a unique and descriptive class name
	// <weight>: Use a value from 100 to 900

	.work-sans-<uniquifier> {
	  font-family: "Work Sans", sans-serif;
	  font-optical-sizing: auto;
	  font-weight: <weight>;
	  font-style: normal;
	}

/*================================== Brands Colors ==================================*/

	.bg-soft-pink-brands {
		background-color: var(--softPinkBrands);
	}

	.bg-pink-brands {
		background-color: var(--pinkBrands);
	}

	.bg-gray-brands {
		background-color: var(--pinkBrands);
	}

	.c-soft-pink-brands {
		color: var(--softPinkBrands);
	}

	.c-pink-brands {
		color: var(--pinkBrands);
	}

	.c-gray-brands {
		color: var(--pinkBrands);
	}

	.c-red-211 {
      color: var(--red211) !important;
    }

    .c-green-211 {
      color: var(--green211) !important;
    }


	.filter-black-pink-brands {
		filter: brightness(0) invert(70%) sepia(18%) saturate(767%) hue-rotate(310deg) brightness(93%) contrast(94%);
	}

/*================================== Navigation ==================================*/

	.navigation {
		background-color: var(--grayBrands);
	}

	.menu-principal {
		padding: 0%;
		margin: 0%;
		height: 100%;
		min-height: calc(2rem + 2vw);
		flex-wrap: nowrap !important;
	}

	.menu-principal > .menu-item:hover > a {
		background-color: transparent;
		border-bottom: 1px solid var(--jetBlack);
	}

	.menu-item:hover > .sub-menu, .menu-item:focus > .sub-menu, .menu-item.active > .sub-menu {
		background-color: var(--grayBrands);
		z-index: 50;
	}

	.menu-item > .sub-menu > .menu-item:hover > a {
		background-color: transparent;
		border-bottom: 1px solid var(--jetBlack);
		color: white;
	}

	.menu-item:not(.lang-menu, .lang-item) {
		transition: all 0.4s ease-in-out;
		max-width: 50vw;
		position: relative;
	}

	.menu-principal > .menu-item:not(.lang-menu, .lang-item) a {
		font-size: calc(.65rem + .65vw);
		padding: .5rem 2rem;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.menu-principal > .menu-item.menu-item-has-children:not(.lang-menu, .lang-item) a {
		padding: .5rem 3.5rem .5rem 2rem;
	}

	.lang-item a {
		padding: .5rem 1.5rem;
	}

	.current-lang a {
		border-bottom: 2px solid white;
	}

	.menu-item a:hover, .menu-item a:focus {
		color: var(--jetBlack);
	}

	.menu-item-has-children a:after, .sub-menu .menu-item a:after {
		color: var(--jetBlack);
		object-fit: contain;
		background-size: contain;
		background-repeat: no-repeat;
		width: 20px;
		height: 20px;
		left: 100%;
		transform: rotate(-90deg) translate(50%, -1.5rem);
	}

	.menu-item-has-children.current-menu-item a:after {
		color: var(--jetBlack);
	}

	.menu-item-has-children.current-menu-item a:after, .menu-item-has-children:hover a:after {
		color: var(--jetBlack);
	}

	.current-menu-item > a {
		color: var(--jetBlack);
	}

	.current-lang a {
		color: var(--jetBlack);
	}

	.nxt-posts-link a, .pre-posts-link a {
		
	}

	.menu-item .sub-menu {
		position: absolute;
		width: 50vw;
		left: 100%;
		top: 0%;
		max-height: 0;
		height: 0;
		overflow: hidden;
		padding: 0;
	}
	
	.menu-item:hover .sub-menu, .menu-item:focus .sub-menu, .menu-item.active .sub-menu {
		border: 1px solid lightgray;
		border-radius: 3px;
	}

	.sub-menu .menu-item {
		margin: 0 .5rem;
	}

	.sub-menu div, .lang-item div {
		display: none !important;
	}

	.navbar-brand {
		padding: 5px 0;
	}

	.navbar-brand img {
		padding: 5px 0;
		max-height: 50px;
	}

/*================================== Page Navigation ==================================*/

	.page-numbers {
		position: relative;
	}

	.prev.page-numbers span, .next.page-numbers span {
		filter: brightness(100%);
		padding: .5rem 1rem;
		display: flex;
		justify-content: center;
		align-items: center;
	}

/*================================== Buttons ==================================*/

	.brands-btn {
		background: var(--pinkBrands);
		border: 2px solid var(--pinkBrands);
		border-radius: 10px;
	}

	.brands-btn, .brands-btn a {
		color: white;
		text-decoration: none;
	}

	.brands-btn:hover, .brands-btn:focus, .brands-btn.active {
		border: 2px solid var(--pinkBrands);
		color: var(--pinkBrands);
		background: white;
	}

	.brands-btn:hover a, .brands-btn:focus a, .brands-btn.active a {
		color: var(--pinkBrands);
	}

	.agave-211-btn {
		background: var(--redAgave211);
		border: 2px solid var(--redAgave211);
		border-radius: 10px;
	}

	.agave-211-btn, .agave-211-btn a {
		color: white;
		text-decoration: none;
	}

	.agave-211-btn:hover, .agave-211-btn:focus, .agave-211-btn.active {
		border: 2px solid var(--redAgave211);
		color: var(--redAgave211);
		background: white;
	}

	.agave-211-btn:hover a, .agave-211-btn:focus a, .agave-211-btn.active a {
		color: var(--redAgave211);
	}

	.white-btn {
		background: white;
		color: var(--jetBlack);
		border: 2px solid white;
		border-radius: 20px;
	}

	.white-btn:hover, .white-btn:focus, .white-btn.active {
		background: white;
		color: var(--jetBlack);
		border: 2px solid var(--jetBlack);
		border-radius: 20px;
	}

	.lightgray-btn {
		background: lightgray;
		color: var(--jetBlack);
		border: 2px solid lightgray;
		border-radius: 20px;
	}

	.lightgray-btn:hover, .lightgray-btn:focus, .lightgray-btn.active {
		background: lightgray;
		color: var(--jetBlack);
		border: 2px solid var(--jetBlack);
		border-radius: 20px;
	}

	.brand_logo_link img {
		border: 1px solid transparent;
		border-radius: 45px;
	}

/*================================== Filters & Opacity ==================================*/

	

/*================================== Footer ==================================*/

	footer {
		background-color: var(--grayBrands);
	}

	.social-menu .menu-item, .social-menu .wp-block-navigation-item {
		padding: 0 .5rem;
		transform: scale(1.2);
	}

	.social-menu .menu-item a, .menu-footer .menu-item a {
		color: white;
	}

	.menu-footer .menu-item a {
		font-size: var(--subheader-small-size);
	}

	.wpcf7-form p {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		position: relative;
		width: 80%;
		max-width: 1500px;
		margin-left: auto;
		margin-right: auto;
	}

	.wpcf7-form span:not(.wpcf7-radio, .wpcf7-checkbox, .first, .last), .wpcf7-form input:not([type="radio"], [type="checkbox"]), .wpcf7-form textarea {
		width: 100%;
	}

	.wpcf7-form p label, .wpcf7-submit, .wpcf7-response-output {
		width: 100% !important;
	}

	.wpcf7-form p label {
		font-size: var(--big-p-size);
	}

	.wpcf7-spinner {
		width: 24px !important;
		position: absolute;
		right: 0;
	}
	
	.wpcf7-form-control:not(.wpcf7-radio, .wpcf7-checkbox) {
		background-color: #D9D9D9;
		padding: .3rem .75rem;
		border: 1px solid white;
		margin-top: .5rem;
		margin-bottom: .5rem;
	}

	.wpcf7-response-output {
		margin-left: auto !important;
		margin-right: auto !important;
	}

	.map-container {
		height: calc(12rem + 10vw);
	}

	.wpcf7-list-item {
		margin-left: 0;
	}

	.wpcf7-list-item > label {
		display: flex;
		align-items: center;
	}

	.wpcf7-list-item:not(.first) > label {
		margin-left: 1rem;
	}

	.wpcf7-list-item > label > span {
		margin-left: 1rem;
	}

	.wpcf7-submit {
		margin-top: 2rem !important;
		background-color: var(--pinkBrands) !important;
		max-width: max-content !important;
		padding: .5rem 4rem !important;
		margin-bottom: 3rem !important;
		color: white !important;
	}

/*================================== Figure Image Fix ==================================*/

	.figure-image figure {
		width: 100%;
		height: 100%;
	}

	.figure-image img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover;
		position: relative;
	}

	.figure-relative img, .figure-image-lg img {
		position: relative !important;
	}

/*=====================================
=            Media Queries            =
=====================================*/

	@media (min-width: 768px) {
		

		/*================================== Figure Image Fix ==================================*/

		.figure-image img {
			position: absolute;
		}
	}

	@media (min-width: 992px) {
		.collapse {
			background-color: var(--grayBrands);
		}

		.collapse, .collapsing {
			border-bottom: none;
		}

		.menu-principal > .menu-item:hover > a {
			color: white;
			background-color: transparent;
			border-bottom: 1px solid white;
		}

		.menu-principal > .menu-item:not(.lang-menu, .lang-item) a {
			color: white;
		}

		/*.menu-item:not(.lang-menu, .lang-item) {
			position: unset;
		}*/

		.menu-item .sub-menu {
			position: absolute;
			width: 100vw;
			left: 0;
			top: 100%;
			max-height: 0;
			height: 0;
			overflow: hidden;
		}

		.menu-item:hover .sub-menu, .menu-item:focus .sub-menu {
			height: auto;
			max-height: none;
			width: max-content;
		}

		.sub-menu .menu-item {
			width: 30vw;
			margin: 0.5rem 0;
		}

		.sub-menu .menu-item:hover {
			background: none;
		}

		.sub-menu .menu-item a {
			text-align: left;
			width: 100%;
			height: 100%;
			transition: none;
		}

		.sub-menu .menu-item a:hover {
			background-color: transparent;
			border-bottom: 2px solid var(--jetBlack);
		}

		.menu-item-has-children a:after {
			color: white;
			font-size: 10px;
			transform: translate(-2.5rem, calc(0% - 6px));
		}

		.lang-item a {
			color: white;
		}

		.current-lang a {
			color: white;
			border-bottom: 2px solid white;
		}

		.menu-item a:hover, .menu-item a:focus {
			color: white;
		}

		.figure-image-lg img {
			position: absolute !important;
		}
	}