.app-diploma-detail {
	.app-container {
		margin-block: 45px;
		@media (width >= 1024px) {
			margin-block: 60px;
		}
	}

	.app-banner {
		> div:nth-child(3) > div {
			margin: auto auto 30px;
			display: flex;
			gap: 60px;
			font-size: 20px;
			@media (width < 768px) {
				flex-direction: column;
				gap: 30px;
			}
			.app-link {
				margin-block: 0;
				border-bottom: none;
				padding-block: 0;
				font-weight: 300;
				font-size: 1.4rem;
				background-image: url(/wp-content/themes/epmt/assets/images/circle-arrow-white.svg);
				background-size: auto 20px;
				color: #fff;
				@media (width >= 768px) {
					font-size: 1.6rem;
				}
			}
		}
	}

	.app-text-image {
		display: flex !important;
		align-items: flex-start;
		@media (width < 768px) {
			flex-wrap: wrap;
		}

		img {
			width: 100%;
			aspect-ratio: 4 / 3;
			object-fit: cover;
			@media (width < 768px) {
				order: -1 !important;
				margin-bottom: 30px;
			}
			@media (width >= 768px) {
				width: 50%;
				padding: 0 30px 0 60px;
				aspect-ratio: 5/6;
			}
		}
	}

	 .app-prerequisites-modalities {
		 margin: 60px 0;
		 text-align: center;
		 display: flex;
		 justify-content: center;
		 flex-wrap: wrap;

		h2 {
			width: 100%;
			padding: 0 15px;
			margin-bottom: 30px;
			color: var(--yellow);
		}

		> div {
			padding: 0 30px;
			margin-bottom: 45px;
			@media (width >= 768px) {
				width: 50%;
				margin-bottom: 0;
				&:first-of-type + div {
					border-left: 1px solid #999;
				}
			}

			> div:nth-child(1) {
				aspect-ratio: 16 / 9;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				text-transform: uppercase;
				font-weight: 500;
				font-size: 3.6rem;
				letter-spacing: .05em;
				color: #fff;
				text-shadow: 0 0 3px #000;

				img {
					position: absolute;
					z-index: -1;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					object-fit: cover;
					filter: brightness(0.5);
				}
			}

			> div:nth-child(2) {
				margin: 30px auto;
				line-height: 1.6;
				@media (width >= 768px) {
					margin-block: 30px;
					max-width: 70%;
				}
			}

			> div:nth-child(3) {
				h3 {
					margin-bottom: 30px;
					text-transform: uppercase;
					font-weight: 700;
					font-size: 2rem;
					letter-spacing: .1em;
				}

				div {
					margin-bottom: 10px;
					span {
						display: block;
						font-size: 14px;
						&:nth-child(1) {
							font-weight: 500;
							color: var(--yellow);
						}
					}
				}
			}
		}
	}

	.app-required-qualities {
		margin: 60px 0;
		position: relative;
		text-shadow: 0 0 3px #000;
		img {
			position: absolute;
			z-index: -1;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			filter: brightness(0.5);
		}
		> div {
			max-width: 600px;
			margin: 0 auto;
			padding: 60px 15px;
			text-align: center;
			color: #fff;
			h2 {
				margin-bottom: 40px;
				font-size: 24px;
				line-height: 1.8;
				letter-spacing: .1em;
			}
			p {
				line-height: 2;
				font-weight: 300;
			}
		}
	}

	.app-agenda {
		h2 {
			margin-bottom: 30px;
		}
	}

	.app-excellence {
		padding: 45px 0;
		text-transform: uppercase;
		text-align: center;
		background-color: var(--yellow);
		color: #fff;
		h2 {
			margin-bottom: 40px;
			font-size: 24px;
			letter-spacing: .1em;
			color: #fff;
		}
		> div {
			display: flex;
			flex-wrap: wrap;
			a {
				position: relative;
				width: 50%;
				margin-bottom: 90px;
				padding: 0 15px;
				color: currentColor;
				&::after {
					position: absolute;
					content: '';
					bottom: -45px;
					height: 1px;
					left: 50%;
					width: 80px;
					transform: translate(-50%, 0);
					background-color: #fff;
				}

				@media (width >= 768px) {
					width: 20%;
					padding-inline: 45px;
				}

				span {
					display: block;

					&:nth-child(1) {
						font-size: 16px;
						font-weight: 500;
					}

					&:nth-child(2) {
						font-size: 12px;
					}
				}

				&:nth-child(9), &:nth-child(10) {
					margin-bottom: 0;
					&::after {
						display: none;
					}
				}

				@media (width >= 768px) {
					&:nth-child(6), &:nth-child(6) ~ a {
						margin-bottom: 0;
						&::after {
							display: none;
						}
					}
				}
			}
		}
	}

	.app-success-rate {
		padding: 30px 15px;
		text-transform: uppercase;
		text-align: center;
		font-weight: 700;
		font-size: 2rem;
		color: #fff;
		line-height: 1.4;
		letter-spacing: .1em;
		a {
			color: currentColor;
		}
	}

	.app-miscellaneous-information {
		display: flex;
		justify-content: space-between;
		align-items: stretch;
		gap: 30px;
		@media (width < 768px) {
			flex-direction: column;
		}
		> div {
			flex: 1;
			padding: 30px 15px;
			text-align: center;
			font-size: 1.2rem;
			background-color: var(--yellow);
			color: #fff;
			@media (width >= 768px) {
				padding: 45px 15px 15px;
			}

			span {
				text-transform: uppercase;
				font-weight: 700;
				font-size: 2.4rem;
				letter-spacing: .1em;
			}
			a {
				display: block;
				margin: 15px auto 0;
				width: fit-content;
				height: 30px;
				color: currentColor;
			}
		}
	}
}

dialog {
	position: fixed;
	z-index: 10;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: calc(100% - 60px);
	@media (width >= 768px) {
		width: 700px;
	}
	> div {
		padding: 30px;
		h3, p {
			margin-bottom: 15px;
		}
	}
	&::backdrop {
		background-color: #0006;
		backdrop-filter: blur(2px);
	}
}

/* the following styles are read by wkhtmltopdf so don't use CSS nesting */
.app-pdf {
	margin-top: 0;
	margin-bottom: 0;
	font-weight: 300;
}
.app-pdf .app-clear::after {
	content: '';
	display: table;
	clear: both;
}
.app-pdf > div {
	margin: 15px 45px;
}
.app-pdf h1, .app-pdf h2, .app-pdf strong, .app-pdf b {
	font-weight: 700;
}
.app-pdf h1, .app-pdf h2 {
	color: #cea645;
}
.app-pdf h2 {
	margin-bottom: 5px;
	font-size: 16px;
}
.app-pdf h2 ~ ul,
.app-pdf h2 ~ ol {
	margin-left: 18px;
}
.app-pdf h2 ~ ul {
	list-style-image: url(/wp-content/themes/epmt/assets/images/dot.svg);
}
.app-pdf p {
	line-height: 1.4;
	font-size: 14px;
}
.app-pdf a {
	color: currentColor;
}
.app-pdf p a {
	margin-left: 5px;
}
.app-link-pdf {
	text-decoration: none;
	text-transform: uppercase;
}

.app-banner-pdf {
	margin-top: 0 !important;
	text-transform: uppercase;
}
.app-banner-pdf > img {
	height: 85px;
	width: auto;
	margin-right: 15px;
}
.app-banner-pdf > span {
	float: right;
	margin-top: 55px;
	text-transform: none;
	font-weight: 700;
	font-size: 20px;
}
.app-banner-pdf > div {
	margin-top: 15px;
	border: 2px solid #cea645;
	padding: 5px 30px;
}
.app-banner-pdf > div span {
	font-size: 13px;
	font-weight: 700;
	width: 50%;
}
.app-banner-pdf > div span:nth-child(1) {
	float: left;
}
.app-banner-pdf > div span:nth-child(2) {
	float: right;
	text-align: right;
}
.app-banner-pdf h1 {
	clear: both;
	margin: 30px 0 5px;
	text-align: center;
	font-size: 20px;
}
.app-banner-pdf p {
	text-align: center;
	text-transform: none;
}

.app-prerequisites-modalities-pdf {
	position: relative;
	text-align: center;
}
.app-prerequisites-modalities-pdf::before {
	position: absolute;
	content: '';
	left: 50%;
	width: 1px;
	top: 42px;
	bottom: 0;
	background-color: #000;
}
.app-prerequisites-modalities-one-column-pdf::before {
	display: none;
}
.app-prerequisites-modalities-pdf > div {
	width: 50%;
	padding: 0 15px;
	float: left;
}
.app-prerequisites-modalities-one-column-pdf > div {
	margin-left: 25%;
}
.app-prerequisites-modalities-pdf > div:first-of-type:last-of-type {
	margin-left: 25%;
}
.app-prerequisites-modalities-pdf h3 {
	margin: 30px 0;
	text-transform: uppercase;
	font-size: 18px;
	font-weight: 700;
}
.app-prerequisites-modalities-pdf h3 ~ div {
	font-size: 16px;
}
.app-prerequisites-modalities-pdf h3 ~ div span:first-child {
	display: block;
	margin-top: 5px;
	color: #cea645;
}

.app-text-centered-pdf {
	text-align: center;
}

.app-success-rate-pdf {
	border: 2px solid #cea645;
	padding: 5px;
	text-align: center;
	color: #cea645;
	font-weight: 700;
}

.app-diplomas-pdf {
	text-align: center;
}
.app-diplomas-pdf a {
	display: block;
}