/* Department CSS Document */
/*For mobile first adaptive design place styles for mobile and up in the mobile and up area.
Place styles for tablet and up inside the media query in the tablet and up area.
Place styles for desktop only inside the media query in the desktop only area.

For questions or media query training contact Web Development Services.
*/
/* ====================== Mobile and Up ========================== */
h1,
h2 {
	font-weight: 600;
}
.gap-10 {
	gap: 10px;
}

/* DEADLINES BANNER */
.text-55 {
	font-size: 55px;
}
div.application-banner {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}
div.application-banner-inner {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
}
div.application-banner-inner div {
	padding: 20px;
}

/* REMOVE SPACE AND BORDER ON HERO IMAGES. USE ON HOME PAGES THAT HAVE A BANNER FLUSH WITH THE HERO */
.fullbleed:has(+ [class*='bg-']) {
	margin-bottom: 0;
	border-bottom: none;
}

/* ADD OVERLAY TO HERO IMAGES */
.fullbleed::before {
	background: linear-gradient(to bottom, #000000b3, #000000b3);
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0.5;
	z-index: 0;
}

/* BASIC STYLING FOR STANDARD UVU DROPDOWN */
.accordion:not(.accordion-unstyled) {
	padding: 10px 40px 10px 10px;
}
.accordion-content {
	padding-top: 10px;
}
.accordion-content td {
	vertical-align: top;
}

/* FOR BANNERS WITH AN ADVISOR CARD */
section[class*='bg-']:has([data-directory-style='styleAdvisor2']) {
	position: relative;
	z-index: 0;
}

/* HALF TEXT HALF IMAGE BANNER W/ SHAPES */
.text-64 {
	font-size: 64px;
}
.shapes-banner {
	margin-right: -15px;
	margin-left: -15px;
}
.shapes-banner .banner-content {
	padding: 40px 15px;
}
.shapes-banner .banner-img img {
	max-height: 300px;
	height: 100%;
	width: 100%;
	object-fit: cover;
}
.contained {
	max-width: 1200px;
	margin-right: auto;
	margin-left: auto;
}

/* STYLED LIST */
ol.styled-list {
	padding-inline-start: 65px;
}
ol.styled-list > li + li {
	margin-block-start: 30px;
}
ol.styled-list > li::before {
	font-size: 2em;
	content: counter(orderedList) '';
	left: -65px;
	top: -10px;
	color: #ffffff;
	background-color: #4ba23f;
	width: 50px;
	height: 50px;
	border-radius: 100%;
	text-align: center;
	padding-top: 2px;
}

/* FOR ABOUT PAGE ICON/TEXT SECTION */
.w-fifth {
	width: 20%;
	min-width: 170px;
}

/* ICON BANNER */
.icon-banner-left {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 15px;
}

/*End mobile and up styles*/
/* ====================== Tablet and Up (Overrides Mobile Styles) ========================== */
@media only screen and (min-width: 768px) {
	div.application-banner {
		align-items: center;
	}
	div.application-banner-inner {
		grid-template-columns: 1fr 1fr;
		width: 100%;
	}
	.icon-banner-left {
		flex-direction: row;
	}
}

/*end media query*/
/*End tablet and up styles*/
/* ====================== Landscape Tablet and Up (Overrides Mobile Styles) ========================== */
@media only screen and (min-width: 992px) {	
	div.application-banner-inner div {
		padding: 10px 30px;
	}
	.shapes-banner {
		display: grid;
		grid-template-columns: 1fr 1fr;
		max-height: 480px; /* Will need to Chrome inspect the page and see what the max-height should be */
	}
	.shapes-banner .banner-img {
		height: 100%;
	}
	.shapes-banner .banner-img img {
		max-height: 480px; /* Will need to Chrome inspect the page and see what the max-height should be */
	}
}

/*end media query*/
/*End landscape tablet and up styles*/
/* ====================== Desktop Only (Overrides Mobile and Tablet Styles) ========================== */
@media only screen and (min-width: 1200px) {
	div.application-banner {
		flex-direction: row;
		gap: 30px;
	}
	div.application-banner-inner {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
	.border-right {
		border-right: 1px solid #00843d;
	}
	a.button-border.no-margin {
		margin: 0;
	}
	.shapes-banner {
		justify-content: end;
		max-height: 410px; /* Will need to Chrome inspect the page and see what the max-height should be */
		position: relative;
	}
	.shapes-banner::before {
		position: absolute;
		content: '';
		background: url('/cet/images/banner-shapes.svg');
		width: 125px;
		height: 111px;
		left: 0;
		top: -50px;
	}
	.shapes-banner .banner-content {
		max-width: 600px;
		justify-self: end;
	}
	.shapes-banner .banner-img img {
		max-height: 410px; /* Will need to Chrome inspect the page and see what the max-height should be */
	}
}

/*end media query*/
/*End desktop and up styles*/
/* ====================== Wide Desktop Only (Overrides Mobile and Tablet Styles) ========================== */
@media only screen and (min-width: 1500px) {
	/* LARGE TITLE AND SHAPES VERSION */
	.shapes-banner::before {
		top: -30px;
		left: 40px;
	}
}

/*end media query*/
/*End wide desktop and up styles*/
/* ====================== Extra-Wide Desktop Only (Overrides Mobile and Tablet Styles) ========================== */
@media only screen and (min-width: 1700px) {
	/* LARGE TITLE AND SHAPES VERSION */
	.shapes-banner::before {
		top: -20px;
		left: 125px;
	}
}

/*end media query*/
/*End extra-wide desktop only styles*/
/*END OF DOCUMENT*/