/*
	Lexington Styles
*/

/*================================== Lexington 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');

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

/*================================== Lexington Variables ==================================*/
	
	:root {
	    /* Scrollbar Colors */
	    --scrollBarBG: var(--mediumBlueLexingtonWater);
	    --blueLexingtonWater: #010C41;
	    --mediumBlueLexingtonWater: #1249B8;
	    --footerBlueLexingtonWater: #2B4D79;
	}

/*================================== Lexington Colors ==================================*/

	.c-blue-lexington-water {
		color: var(--blueLexingtonWater) !important;
	}

	.bg-blue-lexington-water {
		background-color: var(--blueLexingtonWater);
	}

	.c-medium-blue-lexington-water {
		color: var(--mediumBlueLexingtonWater) !important;
	}

	.bg-medium-blue-lexington-water {
		background-color: var(--mediumBlueLexingtonWater);
	}

	.border-medium-blue-lexington-water {
		border-color: var(--mediumBlueLexingtonWater);
	}

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

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

	.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(--blueLexingtonWater);
		z-index: 50;
	}

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

	.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 gray;
	}

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

	.menu-item-has-children a:after, .sub-menu .menu-item a:after {
		content: '';
		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;
	}

	.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 ==================================*/

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

	.lexington-water-medium-btn {
		background: var(--mediumBlueLexingtonWater);
		border: 2px solid var(--mediumBlueLexingtonWater);
		border-radius: 10px;
	}
	.lexington-water-medium-btn:hover, .lexington-btn:focus, .lexington-btn.active {
		border: 2px solid var(--mediumBlueLexingtonWater);
		color: var(--mediumBlueLexingtonWater);
		background: white;
	}

	.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;
	}

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

	.filter-black-medium-blue-lexington-water {
		filter: brightness(0%) invert(21%) sepia(62%) saturate(3789%) hue-rotate(217deg) brightness(79%) contrast(93%);
	}

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

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

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

	.wpcf7-form span, .wpcf7-form input, .wpcf7-form textarea {
		width: 100%;
		border-radius: 20px;
	}

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

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

	.wpcf7-spinner {
		width: 24px !important;
		position: absolute;
		right: 0;
	}
	
	.wpcf7-form-control {
		padding: .3rem .75rem;
		border-radius: 5px;
		border: 1px solid white;
		margin-top: .5rem;
		margin-bottom: .5rem;
	}

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

	.wpcf7-submit {
		max-width: max-content;
		padding: .5rem 4rem;
		border-radius: 10px !important;
		margin-bottom: 3rem;
		color: var(--blueLexingtonWater);
	}

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

/*================================== 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;
	}

/*================================== Proyect Cards ==================================*/

	.lexington-water-card {
		border-radius: 20px;
		box-shadow: 0px 14px 16px 0 rgba(0, 0, 0, .25);
	}
	
	.lexington-water-card .card-header {
		border-radius: 20px 20px 0 0 !important;
		background-color: var(--blueLexingtonWater) !important;
		padding-left: 3rem;
		padding-top: 1rem;
		padding-bottom: 1rem;
		font-size: var(--big-p-size);
	}


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

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

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

		.menu-principal > .menu-item:hover > a {
			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;
		}

		.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 {
			font-size: 10px;
			transform: translate(-2.5rem, calc(0% - 3px));
		}

		.lang-item a {
			color: white;
		}

		.current-lang a {
			color: white;
		}

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

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

		.figure-image img {
			position: absolute;
		}

		/*================================== Areas de Oportunidad ==================================*/

		.border-start-md {
			border-left: 1px solid var(--blueLexingtonWater);
		}
		.border-end-md {
			border-right: 1px solid var(--blueLexingtonWater);
		}
	}

	@media (min-width: 992px) {
		.figure-image-lg img {
			position: absolute !important;
		}
	}