/* ==========================================================================
   Courses Hero Section (v1)
   ========================================================================== */

#courses-hero-section-content {
	display: none;
}

#courses-hero-section,
#courses-hero-section-video {
	align-items: center;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
	justify-content: center;
}

#courses-hero-section {
	min-height: 490px;
}

#courses-hero-section-video {
	padding-top: 30px;
}

.courses-hero-section-content,
.courses-hero-section-content-video {
	display: grid;
	grid-gap: 30px;
	grid-template-columns: 1fr 1fr;
	max-width: 1440px;
	width: 85%;
}

.content-text {
	max-width: 600px;
	width: 100%;
}

.content-text .title {
	color: #215ba8;
	font-size: 46px;
	line-height: 1.15;
	margin-bottom: 25px;
}

.content-text .subtitle {
	color: #215ba8;
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 10px;
}

.content-text .description-top {
	font-size: 18px;
	line-height: 1.6;
	margin-bottom: 20px;
}

.content-text .motto {
	color: #215ba8;
	font-size: 20px;
	font-style: italic;
}

.content-video {
	height: 0;
	overflow: hidden;
	padding-bottom: 56.25%;
	position: relative;
	width: 100%;
}

.content-video iframe {
	border: 0;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

.content-below-video {
	padding-top: 20px;
}

section#courses-hero-section {
	position: relative;
}

img.hero-image {
	bottom: 0;
	display: block;
	height: 100%;
	min-height: 490px;
	object-fit: cover;
	object-position: 100%;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -1;
}

/* ==========================================================================
   Tablet (≤ 1024px)
   ========================================================================== */

@media (max-width: 1024px) {
	#courses-hero-section {
		background-position: center;
		min-height: 400px;
	}

	.content-text {
		margin: auto;
		text-align: center;
	}

	.content-text .title {
		font-size: 36px;
	}

	.content-text .subtitle {
		font-size: 22px;
	}

	img.hero-image {
		position: relative;
	}

	section#courses-hero-section {
		flex-direction: column;
	}

	.courses-hero-section-content {
		padding-bottom: 50px;
		padding-top: 50px;
	}

	.courses-hero-section-content ul {
		text-align: left;
	}

	.courses-hero-section-content,
	.courses-hero-section-content-video {
		display: grid;
		grid-gap: 30px;
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		max-width: 1440px;
		width: 85%;
	}
}

/* ==========================================================================
   Mobile (≤ 768px)
   ========================================================================== */

@media (max-width: 768px) {
	.content-text .title {
		font-size: 32px;
	}

	.content-video iframe {
		height: 250px;
	}
}

/* ==========================================================================
   Mobile small (≤ 500px)
   ========================================================================== */

@media (max-width: 500px) {
	.content-text .title {
		font-size: 28px;
	}

	.content-video iframe {
		height: 200px;
	}
}