/*-----------------Banner----------------*/
	
	.clases-banner {
		margin-top: calc(4.25rem + 0.1vw);
		background-color: black;
	}

	.clases-banner-container {
		display: flex;
		min-height: calc(8rem + 10vw);
		justify-content: center;
		align-items: center;
		background-image: url('../Imagenes/CLASES/BANNER_PROYECTO.jpg');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
	}

	.clases-banner-title {
		font-weight: 700;
		font-size: calc(2rem + 1.75vw);
		color: white;
	}

/*-----------------Mapa de Proyectos----------------*/

	.mapa-proyectos {
		width: 100vw;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.mapa-proyectos-container {
		position: relative;
		width: 80vw;
		margin: 5vw 10vw;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		max-width: 1000px;
	}

	.map-selector {
		width: 200px;
	}

	.color_code {
		width: 50vw;
		 display: flex;
		 flex-direction: row;
	}

	.color_code {
		width: 50vw;
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin: 1vw 0;
	}

	.color_code h3 {
		font-size: calc(.65rem + .65vw);
		margin: 0 1vw;
	}

	.color_show {
		width: calc(.75rem + .75vw);
		height: calc(.75rem + .75vw);
		border: none;
		border-radius: 50%;
	}

	.color_show.Residencial {
		background-color: #009238;
	}
	.color_show.Usos_Mixtos {
		background-color: #be393d;
	}
	.color_show.Plataforma_Médica {
		background-color: #7c7c7c;
	}
	.color_show.Industrial {
		background-color: #ffbb00;
	}

	/*-----------------Mapas----------------*/

		.mapa-proyectos-container .mapa-principal, 
		.mapa-proyectos-container .estado {
			width: 100%;
		}

		.mapa-principal {
			transition: opacity 0.4s ease-in-out;
			opacity: 1;
		}

		.mapa-principal.inactive {
			opacity: 0;
		}

		#san-luis-potosi-image {
			transform: translateX(6%);
		}

		#sonora-image {
			transform: translateX(6%);
		}

		#baja-norte-image {
			transform: translateX(6%);
		}

		#san-luis-potosi-image.active {
			transform: translateX(0);
		}

		#sonora-image.active {
			transform: translateX(0);
		}

		#baja-norte-image.active {
			transform: translateX(0);
		}

		#guanajuato-image.active {
			transform: translateX(-6%);
		}

		#edo-mexico-image.active {
			transform: translateX(-3%);
		}

		.estado {
			position: absolute;
			opacity: 0;
			transition: opacity 0.4s ease-in-out, transform 0.2s ease-in-out, top 0.4s ease-in-out, left 0.4s ease-in-out;
		}

		.estado.active {
			opacity: 1;
		}

		.proyectos-location {
			position: absolute;
			width: inherit;
			height: 100%;
			max-width: 1000px;
		}

	/*-----------------Estado----------------*/

		.estado-btn {
			background: none;
			border: none;
			position: absolute;
			transition: opacity 0.4s ease-in-out;
			opacity: 1;
			pointer-events: all;
			margin: 0;
			max-width: calc(1.3rem + 1vw);
		}

		.estado-btn.inactive {
			opacity: 0;
			pointer-events: none;
		}

		.estado-btn.blocked {
			opacity: 0;
			pointer-events: none;
		}

		.type_indicator {
			border: none;
			width: calc(1.25rem + 1vw);
			height: calc(.625rem + .5vw);
			transition: opacity 0.4s ease-in-out;
			opacity: 1;
			padding: .15rem;
		}

		.type_indicator.inactive {
			opacity: 0;
			pointer-events: none;
		}

		.type_indicator.blocked {
			pointer-events: none;
			display: none;
		}

		.type_indicator_inner {
			margin: calc(.05rem + .075vw);
			width: 100%;
			height: 100%;
			transition: opacity 0.4s ease-in-out;
			border-radius: 50%;
			opacity: 1;
		}

		.type_indicator_inner.blocked {
			opacity: 0;
			pointer-events: none;
		}

		.type_indicator_inner.Residencial {
			background-color: #009238;
		}
		.type_indicator_inner.Usos_Mixtos {
			background-color: #be393d;
		}
		.type_indicator_inner.Plataforma_Médica {
			background-color: #7c7c7c;
		}
		.type_indicator_inner.Industrial {
			background-color: #ffbb00;
		}

		.guanajuato {
			top: 65%;
			left: calc(-.3rem + 48%);
		}

		.san-luis-potosi {
			top: calc(-.3rem + 60%);
			left: calc(-.5rem + 54%);
		}

		.sonora {
			top: 20%;
			left: 17%;
		}

		.edo-mexico {
			top: calc(-.1rem + 74%);
			left: calc(-.3rem + 53.5%);
		}

		.baja-norte {
			top: calc(-.3rem + 1%);
			left: calc(-.5rem + 4%);
		}

		.close-estado {
			position: absolute;
			top: 0;
			left: 100%;
			color: gray;
			background: none;
			border: none;
			font-weight: 900;
			opacity: 0;
			transition: opacity 0.4s ease-in-out;
			pointer-events: none;
		}

		.close-estado.active {
			opacity: 1;
			pointer-events: all;
		}

	/*-----------------Selectores----------------*/

		.project_loc {
			transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
			position: absolute;
			background: none;
			border: none;
			display: flex;
			align-items: flex-end;
			justify-content: center;
			opacity: 0;
			pointer-events: none;
			margin: 0 .3vw;
		}

		.project_loc.active {
			opacity: 1;
			pointer-events: all;
		}

		.project_loc.blocked {
			opacity: 0 !important;
			pointer-events: none !important;
		}

		.project_image {
			max-width: calc(.9rem + .9vw);

		}

		.big_project_image {
			width: 10vw;
			height: 10vw;
			background-color: black;
			background-repeat: no-repeat;
			background-size: cover;
			background-position: center;
			border-radius: 50%;
			transition: opacity 0.4s ease-in-out;
			opacity: 0;
			position: absolute;
			pointer-events: none;
			z-index: -100;
			box-shadow: 5px 5px 18px black;
		}

		.project_loc:hover {
			z-index: 1200;
			transform: scale(1.25, 1.25);
		}

		.project_loc:hover .big_project_image {
			opacity: 1;
			display: block;
			pointer-events: none;
			z-index: 1200;
		}

		.big_project_image.active {
			opacity: 1;
			display: block;
			pointer-events: none;
			z-index: 1200;
		}

	/*-----------------Descripción del proyecto----------------*/

		.proyectos-description {
			position: absolute;
			left: calc(50% + 20vw);
			top: 10%;
			display: flex;
			flex-direction: column;
			align-items: center;
			transition: opacity 0.4s ease-in-out;
			opacity: 0;
			pointer-events: none;
			min-width: 30%;
		}

		.proyectos-description.active {
			opacity: 1;
			pointer-events: all;
		}

		.proyectos-description hr {
			min-width: 60%;
			max-width: 100%;
			border: 2px solid gray;
			margin: 1vw 0;
		}

		.project_name {
			font-size: calc(.5rem + 2.75vw);
			font-weight: 700;
			color: gray;
			margin: 0;
			text-align: center;
		}

		.project_location {
			font-size: calc(.5rem + 1.5vw);
			color: gray;
			text-align: center;
		}

		.project_type {
			max-width: 80%;
			font-size: calc(.5rem + 1vw);
			text-align: justify;
			color: gray;
		}

		.project_link {
			font-size: calc(.65rem + .35vw);
		}

	/*-----------------Lista del proyectos en el estado----------------*/

		.proyectos-list {
			position: absolute;
			left: -10%;
			top: 80%;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			transition: opacity 0.4s ease-in-out;
			opacity: 0;
			pointer-events: none;
		}

		.proyectos-list.active {
			opacity: 1;
			pointer-events: all;
		}

		.proyectos-list hr {
			min-width: 60%;
			max-width: 100%;
			border: 2px solid gray;
			margin: 1vw 0;
		}

		.proyecto-list-inner {
			display: flex;
			flex-direction: row;
		}

		.proyecto-list-inner .project_name {
			font-size: calc(.4rem + 1vw);
			font-weight: 700;
			color: gray;
			margin: 0 1vw;
		}

		.proyecto-list-inner .project_location {
			font-size: calc(.4rem + 1vw);
			color: gray;
			text-align: center;
		}

		.proyecto-list-inner .project_link {
			font-size: calc(.65rem + .35vw);
		}



/*=====================================
=            Media Queries            =
=====================================*/
	@media (min-width: 1200px) {
		
	}

	@media (max-width: 1200px) {
		
	}

	@media (max-width: 992px) {
		.clase-image {
			min-height: 55vw;
		}

		.clase-container:hover {
			transform: scale(1.1,1.1);
		}
	}

	@media (max-width: 768px) {

		
	}

	@media (max-width: 576px) {
		
	}