/*** BANNER ***/

.banner-container {
	position: relative;
	display: flex;
	height: calc(100vh - 158px);
}

.banner-content-container-background {
	display: flex;
	justify-content: center;
	position: absolute;
	width: 100%;
	height: 30%;
	bottom: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));;
}

.banner-image {
	width: 100%;
	object-fit: cover;
}

.banner-video {
	width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner-content-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-around;
	max-width: 2000px;
	padding: 1rem;
	width: 100%;
}

.banner-content-container p:nth-child(1) {
	font-family: 'Arial';
	color: white;
	font-size: 1em;
	line-height: 1.5rem;
	max-width: 700px;
}

.banner-content-container p:nth-child(2) span {
	color: white;
	background: #C00;
}

@media (max-width: 450px) {
	
	.banner-content-container-background {
		height: 40%;
	}
	
	.banner-content-container p:nth-child(1) {
		font-size: 0.75em;
		line-height: 1.2rem;
		letter-spacing: 0.01rem;
	}
	.banner-content-container p:nth-child(2) {
		margin-top: 0;
	}
	.banner-content-container p:nth-child(2) span {
		font-size: 0.75em;
	}

}

@media (min-width: 2000px) {
	
	.banner-content-container p:nth-child(1) {
		font-size: 1.25em;
		line-height: 2.25rem;
		max-width: 1000px;
	}
}


/*** PROMOTION SECTION ***/

.promotion-section {
	background: #000;
	display: flex;
	justify-content: center;
	padding-bottom: 5em;
}

.max-width-section {
	max-width: 2000px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.ttu-statistics {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	padding-top: 4em;
	padding-bottom: 6em;
}

.statistics-card {
	text-align: center;
	border-bottom: 3px solid white;
	margin: 1em 3em;
}

.statistics-card h3{
	font-family: 'Arial';
	line-height: 3.5rem;
	font-weight: 100;
	color: white;
}

.testimonials-container {
	display: flex;
    flex-direction: row;
    flex-wrap: wrap-reverse;
    margin-bottom: 8em;
    justify-content: space-around;
}

.testimonials-text-container {
	display: flex;
	flex-direction: column;
	max-width: 26em;
	padding: 0 1em;
}

.testimonials-video-container {
	width: 35em;
}

.testimonials-text-container p {
	font-size: 1em;
	letter-spacing: 0.1em;
	line-height: 1.3em;
}

.testimonials-text-container h3, .testimonials-text-container p {
	color: white;
	font-family: 'Arial';
}

.programs-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.find-programs-container {
	position: relative;
	display: flex;
}

.slide-img {
	display: none;
	object-fit: cover;
}

.popular-programs-container {
	background: #900;
	display: flex;
	flex-direction: column;
	justify-content: center;
	/*align-items: flex-start; *** UNCOMMENT THIS AFTER REMOVING temp-programs-container *** */
	height: 30rem;
	padding: 1em 2em;
	position: relative;
	right: 3em;
	width: 25em;
}

.find-programs-container-background {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding-left: 10em;
	position: absolute;
	height: 100%;
	width: 100%;
	background: linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0, 0.6), rgba(0,0,0,0.85) 80%);
}

.find-programs-container-background h3, .find-programs-container-background p {
	color: white;
	font-family: 'Arial';
}

.find-programs-container-background p {
	margin-bottom: 0;
	font-weight: bold;
	letter-spacing: 0.03rem;
	text-indent: 1rem;
	font-size: 1em;
}

.temp-programs-container {
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.temp-programs-container h2 {
	font-family: 'Arial';
	color: white;
}

.see-programs-btn {
	background-color: white;
    color: black;
    padding: 0.5em;
}

.see-programs-btn:hover {
	background-color: black;
	color: white;
}

.popular-programs-container h4, .popular-programs-container h3, .popular-programs-container p {
	color: white;
	font-family: 'Arial';
}

.popular-programs-container h3 {
	font-weight: lighter;
	margin-top: 1rem;
    margin-bottom: 2rem;
    letter-spacing: 0.05em;
	max-width: 20em;
	height: 2.3em;
}

.popular-programs-container p {
	max-width: 20em;
	height: 10em;
}

.slider h3 {
	margin-top: 0;
}

.slider-buttons {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	height: 1em;
}

.dot {
	cursor: pointer;
	height: 15px;
	width: 15px;
	margin: 0 2px;
	background-color: white;
	opacity: 0.25;
	border-radius: 50%;
	display: inline-block;
	transition: background-color 0.6s ease;
}

.active, .dot:hover {
	background-color: white;
	opacity: 1;
}

.prev-arrow, .next-arrow {
	cursor: pointer;
	width: auto;
	padding: 16px;
	margin-top: -22px;
	color: white;
	font-weight: bold;
	font-size: 1.25em;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
	user-select: none;
}

.slider-buttons p {
	font-size: 1.25em;
}

.slider-buttons {
	margin-top: 25px;
    margin-right: auto;
    margin-left: auto;
}

.slide {
	display: none;
}

.fa-solid {
	color: white;
	font-size: 3em;
}

@media (max-width: 450px) {
	.ttu-statistics {
		padding-top: 0;
	}
	.statistics-card {
		margin-top: 0;
		margin-bottom: 0;
	}
	.statistics-card h3 {
		line-height: 2rem;
    	font-size: 1em;
	}
	.popular-programs-container {
		right: 0;
		width: 100%;
		height: 40em;
	}
	.popular-programs-container h4 {
		margin-top: 0;
	}
	.popular-programs-container p {
		height: 18em;
	}
	.slider h3 {
		height: 5em;
	}
	.find-programs-container-background {
		padding-left: 1.5em;
		right: 0;
	}
	
	.find-programs-container-background h3 {
		margin-top: 0;
	}
	.find-programs-container-background p {
		font-size: 0.8em;
		margin-top: 10px;
	}
}

@media (min-width: 2000px) {
	
	.prev-arrow, .next-arrow {
		padding-top: 0.825em;
	}
}


/* Fading animation */
.fade {
	-webkit-animation-name: fade;
	-webkit-animation-duration: 1.5s;
	animation-name: fade;
	animation-duration: 1.5s;
}
@-webkit-keyframes fade {
	from {
		opacity: .4
	}
	to {
		opacity: 1
	}
}
@keyframes fade {
	from {
		opacity: .4
	}
	to {
		opacity: 1
	}
}

.first-steps-container {
	padding-top: 9rem;
}

.first-steps-container h2 {
	margin-bottom: 2em;
	font-family: 'Arial';
	color: white;
	text-align: center;
    line-height: 1.5em;
}

.first-steps-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	
}

.first-steps-tile-link
.first-steps-tile-text {
    font-size: 1.5rem;
    text-transform: uppercase;
    color: white;
}

.first-steps-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-left: 0.5em;
	padding-right: 0.5em;
	padding-top: 1em;
	padding-bottom: 1em;
	width: 15em;
	gap: 2.5rem 0;
}

.first-steps-tile p {
	font-family: 'Arial';
	font-weight: bold;
	color: white;
	text-align: center;
    font-size: 1.5rem;
}

.first-steps-tile-link {
	transition: background 0.1s ease-in;
}

.first-steps-tile-link:hover {
	background: #900;
}

@media (max-width: 450px) {
	.first-steps-grid {
		flex-direction: row;
    	flex-wrap: wrap;
	}
	.first-steps-tile {
		min-width: 150px;
		max-width: 250px;
		margin: 0.5em;
	}
}

/*** WELCOME WEEK LETTER SECTION ***/
.welcome-letter-section {
	display: flex;
	justify-content: center;
	padding-top: 2em;
	padding-bottom: 5em;
	background-color: #EDEDED;
}

.welcome-letter-container {
	width: 60%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	background-color: #FFFFFF;
}

.welcome-letter-container h2 {
	text-align: center;
}

.welcome-letter-text {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	flex-direction: column;
	padding-left: 1em;
	padding-right: 1em;
	padding-bottom: 2em;
}

/*** SPOTLIGHTS SECTION ***/

.stories-section {
	display: flex;
	justify-content: center;
	padding-top: 2em;
	padding-bottom: 5em;
}

.stories-container {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.main-story-container {
	max-width: 450px;
	margin: 1em;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.main-story-image {
	width: 450px;
    height: 250px;
    margin-left: auto;
    object-fit: cover;
    margin-right: auto;
}

.main-story-container h4{
	font-family: 'Arial';
}

#main-story-text-container {
	height: 15em;
}

.main-story-container p, .read-more-link {
	font-family: 'Arial';
	color: #666;
}

.stories-spotlight-container {
	max-width: 400px;
	margin: 1em;
}

.stories-spotlight-container h2 {
	font-family: 'Arial';
	text-align: center;
}

.story-link {
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
    gap: 1em;
	background-color: #990000;
    margin-top: 2em;
    margin-bottom: 2em;
	padding-left: 1em;
    padding-right: 1em;
	height: 7em;
	transition: transform 0.25s ease-in-out;
}

.story-link:hover {
	transform: scale(1.05);
	cursor: pointer;
}

.story-link {
	font-family: 'Arial';
	color: white;
	font-size: 1.3rem;
	line-height: 1.8rem;
}

@media (max-width: 450px) {
	.story-link {
		gap: 5em;
	}
	.story-link p {
		font-size: 1rem;
	}
}

#story-link-top span p, #story-link-middle span p, #story-link-bottom span p {
	color: white;
	margin-top: 1.75em;
	margin-bottom: 1.75em;
	font-size: 1.5em;
    font-weight: bold;
	opacity: 0;
	transition: opacity 0.25s ease-in-out;
}

#story-link-top span p:hover, #story-link-middle span p:hover, #story-link-bottom span p:hover {
	opacity: 1;
}

/*** EVENTS SECTION ***/
.events-section {
	display: flex;
	justify-content: center;
	padding-bottom: 5em;
}

.events-container {
	border: 2px solid #707070;
	margin: 1em;
}

.events-container h2 {
	text-align: center;
	font-family: 'Arial';
	margin-bottom: 1.5em;
}

.events-grid {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	margin: 2em;
}

.events-tile {
	min-width: 100px;
    max-width: 250px;
    margin: 0.5em;
	padding: 0.5em;
	border: 1.5px solid white;
	-webkit-transition: background-color 0.1s ease;
	transition: background-color 0.1s ease;
}

.events-tile:hover {
	cursor: pointer;
	background: #EDEDED;
}

.month-day {
	background-color: #333333;
    padding: 0.25em;
    color: #FFFFFF;
    font-weight: bold;
    border: 1.5px black solid;
}

.time {
	font-weight: bold;
	margin-left: 1em;
}

.event-info h5 {
	font-family: 'Arial';
	font-weight: bold;
}

.events-btn-container{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 5em;
}

.events-btn {
	background: #C00;
    padding: 0.5rem;
	color: white;
	font-size: 1.2rem;
	font-family: 'Arial';
	letter-spacing: 0.05em;
}

.events-btn:hover {
	background: black;
	cursor: pointer;
}


/*** STUDENT RESOURCES SECTION ***/

.student-resources-section {
	display: flex;
	justify-content: center;
	padding-bottom: 5em;
	padding-top: 3em;
	background-color: #990000;	
}

.student-resources-container h2 {
	margin-top: 1.5em;
	margin-bottom: 1.5em;
	text-align: center;
	font-family: 'Arial';
	color: white;
}

.student-resources-grid {	
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	margin: 2em;
}

.student-resources-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 100px;
    max-width: 250px;
    margin: 0.5em;
	padding-top: 1em;
}

.student-resources-tile-link {
	transition: background 0.1s ease-in;
}

.student-resources-tile-link:hover {
	background: #000;
}

.student-resources-tile h5{
	text-align: center;
	font-family: 'Arial';
	font-weight: bold;
	color: white;
	height: 2.2rem;
	text-decoration: none;
}

.student-resources-tile p {
	text-align: center;
	font-family: 'Arial';
	color: white;
	text-decoration: none;
}


/*** DEAN MESSAGE SECTION ***/

.dean-message-section {
	display: flex;
	justify-content: center;
	padding-bottom: 5em;
	padding-top: 3em;
	background-color: #000;
}

.dean-message-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	margin: 2em;
	gap: 2em;
}

.dean-message-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	max-width: 25em;
}

.dean-message-text h2 {
	text-align: center;
	font-family: 'Arial';
	font-weight: bold;
	color: white;
}

.dean-message-text p {
	text-align: center;
	font-family: 'Arial';
	color: white;
}


/*** DONATIONS SECTION ***/

.donation-section {
	display: flex;
	justify-content: center;
	padding-bottom: 5em;
	padding-top: 3em;
}

.donation-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	margin: 2em;
	gap: 2em;
}

.donation-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	max-width: 500px;
}

.donation-text img {
	width: 100%;
}

.donation-text h2 {
	text-align: center;
	font-family: 'Arial';
	font-weight: bold;
	text-align: left;
}

.donation-text p {
	text-align: center;
	font-family: 'Arial';
	text-align: left;
}

.donate-btn-container{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 5em;
}

.donate-btn {
	background: #C00;
    padding: 0.5rem;
	color: white;
	font-size: 1.2rem;
	font-family: 'Arial';
	letter-spacing: 0.05em;
}

.donate-btn:hover {
	background: black;
	cursor: pointer;
}

.donation-image-container {
	position: relative;
	display: flex;
}

.donation-image-gradient-overlay {
	position: absolute;
	height: 100%;
	width: 100%;
	background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255, 0) 50%);
}