
/* GENERAL */
.body-text {
	font-size: 1.75rem;
	line-height: 1.4;
}

.body-heading {
	font-size: 4.875rem;
	line-height: 1.2;
}

.body-subheading {
	margin-top: 3.5rem;
	margin-bottom: 3.5rem;
	font-size: 3.5625rem;
}

/* INTRO */
.intro,
.coordinate,
.footer {
	text-align: center;
}

.intro {
	padding: 7.5rem 15px 0 15px;
  background: transparent url(../img/bg-body.jpg) no-repeat center top;
}

.intro,
.appointment-btn, .appointment-btn:active, .appointment-btn:visited {
	color: var(--color-red);
}

.intro-text {
  font-size: 2.625rem;
	margin-bottom: 18rem;
}

.button-list > li,
.coordinate,
.footer,
.footer a, .footer a:active, .footer a:visited {
	color: var(--color-white);
}

.button-list > li {
	padding: 4px 8px;
	margin: 8px;
	background-color: var(--color-red);
	font-size: 1.875rem;
}

.video-container-full {
	width: 90%;
	max-width: 1020px;
	margin: 50px auto;
}

.video-container-full video,
.video-container-thumbs video {
	aspect-ratio: 1920 / 1080;
}

.video-container-full video {
	width: 100%;
}

.video-container-thumbs video {
	width: 31%;
	max-width: 322px;
	margin: 2.3%;
}

/* COORDINATE - COORDINA */
.coordinate {
	padding: 5rem 15px;
	background: transparent url(../img/bg-red-track.jpg) no-repeat center top;
}

.appointment-btn {
	padding: 1rem 1.25rem;
	margin: 0.75rem;
	background-color: var(--color-white);
	font-size: 1.375rem;
}

.footnote {
	font-weight: 200;
	font-size: 1.5rem;
	line-height: 1.2;
}

/* HOSPITAL LOGOS */
.hospital-logos,
.footer {
	padding: 5.75rem 15px;
}

.hospital-logos {
	background: transparent url(../img/bg-logo-section.jpg) no-repeat center center;
}

.hospital-logos a {
	width: 45%;
	max-width: 568px;
	margin: 2rem;
	aspect-ratio: 568 / 138;
}

/* FOOTER */
.footer {
	background: transparent url(../img/bg-red-track-short.jpg) no-repeat center center;
}

/* MEDIA QUERIES */
@media (max-width: 992px) {
  .intro {
    padding-top: 4rem;
  }

	.intro,
	.hospital-logos {
		background-size: cover;
	}
}
@media (max-width: 800px) {
	.footnote br {
		display: none;
	}
}

@media (max-width: 768px) {
	.intro {
    padding-top: 2.5rem;
		background-color: #e9ddd0;
		background-image: none;
  }

	.intro-text br,
	.body-text br {
		display: none;
	}

	.intro-text {
		margin-bottom: 3rem;
	}

	.video-container-thumbs video {
		width: 30%;
		margin: 10px;
	}

	.body-heading {
		font-size: 2.5rem;
	}

	.appointment-buttons-container,
	.hospital-logos {
		flex-direction: column;
	}

	.hospital-logos {
		padding: 3rem 15px;
		align-items: center;
	}
}
#loader{
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.7) url(../img/ajax-loader.gif) no-repeat center center;
}