﻿/*@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700&display=swap');*/

body {
	min-height: 100vh;
}

main {
	min-height: 100vh;
}

/* Firefox */
* {
	scrollbar-width: thin;
	scrollbar-color: #193C66 #3C8FF3;
}

	/* Chrome, Edge and Safari */
	*::-webkit-scrollbar {
		width: 6px;
		display: none;
	}

	*::-webkit-scrollbar-track {
		border-radius: 5px;
		background-color: rgba(34,39,45,0);
	}

		*::-webkit-scrollbar-track:hover {
			background-color: rgba(34,39,45,1);
		}

		*::-webkit-scrollbar-track:active {
			background-color: rgba(34,39,45,1);
		}

	*::-webkit-scrollbar-thumb {
		border-radius: 5px;
		background-color: #193C66;
	}

		*::-webkit-scrollbar-thumb:hover {
			background-color: #62A34B;
		}

		*::-webkit-scrollbar-thumb:active {
			background-color: #62A34B;
		}


.home .home-full-screen-image {
	width: calc(100vw - 0px);
	height: 100vh;
	position: relative;
	background-image: url('/assets/images/portada/portada.webp');
	background-size: cover;
	background-position-x: center;
	background-position-y: center;
	color: white;
	display: flex;
	flex-direction: column;
	justify-content: center;
	font-size: 20px;
}

.home-page-content {
	width: 400px;
	margin-left: 200px;
}





.footer {
	position: relative;
	height: 200px;
	width: 100%;
}

	.footer > .footer-video {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		margin-bottom: -7px;
	}

	.footer > .footer-content {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		color: white;
		display: flex;
		align-content: center;
		background-color: rgb(25, 60, 102);
		opacity: 0.9;
	}

		.footer > .footer-content .footer-content-col {
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
		}


.transparent-button {
	border-radius: 6px;
	border: 0.425px solid #FFF;
	background: rgba(255, 255, 255, 0.19);
	width: 200px;
	height: 34px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.dark-background {
	background: linear-gradient(0deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.92) 100%), linear-gradient(90deg, #004E86 0%, #6EC3FF 100%);
}

.content-block-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 70px;
	padding-bottom: 70px;
}

	/*.content-block {
	display: flex;
	flex-direction: column;
	align-content: center;
	align-items: center;
	width: 1000px;
}*/

	.content-block-container > .content-block-header {
		width: fit-content;
		margin-bottom: 50px;
		min-width: 300px;
	}

		.content-block-container > .content-block-header > .content-block-header-title {
			font-size: 28px;
			display: flex;
			justify-content: center;
		}

		.content-block-container > .content-block-header > .content-block-header-icon {
			display: flex;
			align-items: center;
			justify-content: center;
		}

			.content-block-container > .content-block-header > .content-block-header-icon > .content-block-header-line {
				height: 1px;
				background: black;
				width: 40%;
			}

			.content-block-container > .content-block-header > .content-block-header-icon > .content-block-header-svg {
				width: 20%;
				display: flex;
				justify-content: center;
			}

	.content-block-container > .content-block-content {
		justify-content: center;
		display: flex;
		flex-direction: row;
		gap: 50px;
		width: 100%;
		flex-wrap: wrap;
	}

		.content-block-container > .content-block-content a {
			color: black;
			text-decoration: none;
			font-weight: 600;
		}


		.content-block-container > .content-block-content .content-card-2 {
			width: 400px;
		}

		.content-block-container > .content-block-content .image-pill-2 {
			width: 400px;
			height: 400px;
		}


		.content-block-container > .content-block-content .content-card-3 {
			width: 250px;
		}

		.content-block-container > .content-block-content .image-pill-3 {
			width: 250px;
			height: 250px;
		}

		.content-block-container > .content-block-content .content-pill-1 {
			width: 100%;
		}

		.content-block-container > .content-block-content .image-pill-1 {
			width: 100%;
			height: 400px;
		}

		.content-block-container > .content-block-content .content-pill-1 {
			width: 100%;
		}

		.content-block-container > .content-block-content .image-pill-1 {
			width: 100%;
			height: 400px;
		}




		.content-block-container > .content-block-content .content-pill-image {
			border-radius: 5px;
			background-position-x: center;
			background-position-y: center;
			background-size: cover;
			margin-bottom: 30px;
		}

			.content-block-container > .content-block-content .content-pill-image:is(:hover) {
				box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
			}

		.content-block-container > .content-block-content .content-pill-title {
			font-weight: bold;
			margin-bottom: 10px;
		}

		.content-block-container > .content-block-content .content-pill-text {
		}



.content-block > .content-block-content-calendar {
	width: fit-content;
	display: flex;
	gap: 50px;
}

	.content-block > .content-block-content-calendar .calendar-block {
		width: 50%;
	}

	.content-block > .content-block-content-calendar .form-container {
		display: flex;
		flex-direction: column;
		width: 50%;
	}



@media only screen and (min-width: 768px) and (max-width: 1024px) {

	.home-page-content {
		width: calc(100vw - 40px);
		margin-left: 50px;
		padding-bottom: 20px;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		height: 100vh;
		padding-bottom: 20px;
	}

	.content-block-container {
		padding-top: 50px;
		padding-bottom: 50px;
	}

	.content-block {
		width: 100%;
	}

		.content-block > .content-block-header {
			width: 100vw;
			display: flex;
			flex-direction: column;
		}

			.content-block > .content-block-header > .content-block-header-title {
				padding-left: 20px;
				padding-right: 20px;
			}

			.content-block > .content-block-header > .content-block-header-icon {
				padding-left: 20px;
				padding-right: 20px;
			}

				.content-block > .content-block-header > .content-block-header-icon > .content-block-header-line {
				}

				.content-block > .content-block-header > .content-block-header-icon > .content-block-header-svg {
				}


		.content-block > .content-block-content {
			flex-direction: column;
			align-items: center;
		}


			.content-block > .content-block-content .content-pill-1 {
				width: 950px;
				padding-left: 20px;
				padding-right: 20px;
			}

			.content-block > .content-block-content .image-pill-1 {
				width: 100%;
				height: 400px;
			}

			.content-block > .content-block-content .content-card-2 {
				width: 400px;
			}

			.content-block > .content-block-content .content-card-3 {
				width: 400px;
			}

			.content-block > .content-block-content .image-pill-3 {
				width: 400px;
				height: 400px;
			}

			.content-block > .content-block-content .image-pill-2 {
				width: 400px;
				height: 400px;
			}


		.content-block > .content-block-content-calendar {
			width: 100vw;
			padding-left: 20px;
			padding-right: 20px;
			display: flex;
			gap: 50px;
			flex-direction: column;
		}

			.content-block > .content-block-content-calendar .calendar-block {
				width: 100%;
			}

			.content-block > .content-block-content-calendar .form-container {
				display: flex;
				flex-direction: column;
				width: 100%;
			}



	.footer {
		height: 250px;
	}

		.footer > .footer-video {
			margin-bottom: -7px;
		}

		.footer > .footer-content {
			padding-top: 20px;
			flex-direction: column;
			align-items: center;
			gap: 20px;
		}

			.footer > .footer-content .footer-content-col {
				flex-direction: row;
				gap: 20px;
				width: 100vw;
			}
}

@media only screen and (min-width: 300px) and (max-width: 991px) {

	.home-page-content {
		width: calc(100vw - 40px);
		margin-left: 20px;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		height: 100vh;
		padding-bottom: 20px;
	}

	.content-block-container {
		padding-top: 50px;
		padding-bottom: 50px;
	}

	.content-block {
		width: 100%;
	}
/*
		.content-block > .content-block-header {
			width: 100vw;
			display: flex;
			flex-direction: column;
		}

			.content-block > .content-block-header > .content-block-header-title {
				padding-left: 20px;
				padding-right: 20px;
			}

			.content-block > .content-block-header > .content-block-header-icon {
				padding-left: 20px;
				padding-right: 20px;
			}

				.content-block > .content-block-header > .content-block-header-icon > .content-block-header-line {
				}

				.content-block > .content-block-header > .content-block-header-icon > .content-block-header-svg {
				}


		.content-block > .content-block-content {
			flex-direction: column;
			align-items: center;
		}

			.content-block > .content-block-content .content-card-2 {
				width: 300px;
			}

			.content-block > .content-block-content .content-card-3 {
				width: 300px;
			}

			.content-block > .content-block-content .image-pill-2 {
				width: 300px;
				height: 300px;
			}

			.content-block > .content-block-content .image-pill-3 {
				width: 300px;
				height: 300px;
			}

			.content-block > .content-block-content .content-pill-1 {
				width: 100%;
				padding-left: 20px;
				padding-right: 20px;
			}

			.content-block > .content-block-content .image-pill-1 {
				width: 100%;
				height: 400px;
			}


		.content-block > .content-block-content-calendar {
			width: 100vw;
			padding-left: 20px;
			padding-right: 20px;
			display: flex;
			gap: 50px;
			flex-direction: column;
		}

			.content-block > .content-block-content-calendar .calendar-block {
				width: 100%;
			}

			.content-block > .content-block-content-calendar .form-container {
				display: flex;
				flex-direction: column;
				width: 100%;
			}



	.footer {
		height: 250px;
	}

		.footer > .footer-video {
			margin-bottom: -7px;
		}

		.footer > .footer-content {
			padding-top: 20px;
			flex-direction: column;
			align-items: center;
			gap: 20px;
		}

			.footer > .footer-content .footer-content-col {
				flex-direction: row;
				gap: 20px;
				width: 100vw;
			}
			*/
}
