		<!-- BANNER -->
		<style>
			.above-carousel-banner {
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #003E52;
			}
			.above-carousel-banner .container {
				background-color: transparent;
			} 
			.above-carousel-banner p {
				color: white;
				padding: 1rem 0;
			}
			.above-carousel-banner a {
			    color: #b7e5f0;
			}
		</style>
		
		<!-- HEADER / NAV -->
		<style>
		.head-bg {
			background-color: #007298;
		}
		.cd-main-header {
			background-color: #007298;
		}
		.btn {
			box-shadow: none;
		}
		.nav-item {
			display: flex;
			align-items: center;
		}
			
		.cd-logo {
			background-color: white;
			// bottom: -1rem;
			padding: .9rem;
			width: auto;
		}
		.btn-resources {
			background-color: #007298 !important;
		}
			
		header .cs-logo svg .cls-2 {
			fill: #646569;
		}
		header .cs-logo svg .cls-1 {
			fill: #007298;
		}
		</style>

		<!-- HERO SECTION -->
		<style>
			.chose-hero {
				position: relative;
			}
			.chose-hero img {
				transform: scaleX(-1);
			}
			.around-hero-h1 {
				position: absolute;
				left: calc(50% - 570px);
				bottom: 4rem;
				background-color: #007298;
				padding: 2rem;
				z-index: 99;
				box-shadow: 0.5rem 0.5rem 0.5rem rgba(0,0,0,.2);
				max-width: fit-content;
			}
			.around-hero-h1 h1 {
				color: white;
    			line-height: 1;
			}
			.around-hero-h1 h1 span {
				color: #b7e5f0;
			}
			.around-hero-h1 p {
				color: white;
				font-style: italic;
			}
			.around-hero-h1 .btn {
				border-radius: 0;
				margin: 1rem 0;
			}
			@media screen and (max-width: 1200px) {
				.around-hero-h1 {
					left: 0;
				}
			}
			@media screen and (min-width: 992px) {
				.around-hero-h1 h1 { font-size: 3.4rem; }
			}
			@media screen and (max-width: 991px) {
				.chose-hero img {
					max-height: 400px;
				}
				.around-hero-h1 {
					position: relative;
					padding: 1.5rem;
					max-width: 720px;
					left: calc(50% - 360px);
				}
			}
			@media screen and (max-width: 767px) {
				.around-hero-h1 {
					max-width: 540px;
					left: calc(50% - 270px);
				}
			}
			@media screen and (max-width: 567px) {
				.around-hero-h1 {
					max-width: 100%;
					left: 0;
				}
			}
		</style>
		
		<!-- SECTIONS -->
		<style>
			section {
				margin: 4rem auto;
			}
			.wide-section {
				margin: 2rem -15px;
    			width: calc(100% + 30px);
			}
			section .container {
				background-color: transparent;
			}
			@media screen and (max-width: 767px) {
				section {
					margin: 0;
				}
			}
		</style>
		
		<!-- FEATURED SECTION -->
		<style>
			.featured-container {
				display: flex;
				flex-wrap: wrap;
			}
			.featured-container .feature-item {
				width: calc(33.3333% - 2rem);
				margin: 1rem 1rem 0;
			}
			.featured-container .major-feature-item {
				width: 100% !important;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				margin: 0 1.5rem;
			}
			.major-feature-item img {
				width: 50%;
				background-color: #ebebeb;
				padding: 0;
				max-height: 400px;
				object-fit: cover;
			}
			.major-feature-item .major-content {
				width: 50%;
				background-color: #ebebeb;
				padding: 1.5rem;
				height: fit-content;
			}
			
			.featured-container .feature-item h2 {
				margin: 0;
			}
			@media screen and (max-width: 991px) {
				.featured-container .feature-item {
					width: calc(50% - 2rem);
				}
			}
			@media screen and (max-width: 767px) {
				.featured-container .feature-item {
					width: 100%;
				}
				.major-feature-item img {
					width: 100%;
				}
				.major-feature-item .major-content {
					width: 100%;
				}
			}
		</style>
		
		<!-- NUMBERS CONTAINER -->
		<style>
			.numbers-container {
				background-color: #007298;
				padding: 3rem 0 4rem;
			}
			.numbers-container h2, .numbers-container p {
				color: white;
				text-align: center;
			}
			.numbers-container h2 {
				text-align: center;
				margin: 0 0 1rem;
			}
			.numbers-container p {
				font-style: italic;
			}
			.numbers-container h3 {
				color: #b7e5f0;
				font-size: 5rem;
				margin: 0;
				text-align: center;
			}
			
			.numbers-container .numbers {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
			}
			.numbers-container .numbers .number-item {
				max-width: calc(33.3333% - 1rem);
				margin: .5rem;
			}
			
			.numbers-container hr {
			    margin: 3rem 0 1rem;
				border-color: #b7e5f0;
			}
			
			.numbers-container .numbers-link-container {
				display: flex;
				justify-content: center;
			}
			.numbers-container .numbers-link-container p {
				font-style: normal;
				text-transform: uppercase;
			}
			.numbers-container .numbers-link-container a {
				color: #b7e5f0;
			}
			
			
			@media screen and (min-width: 992px) {
				.numbers-container  h2 { font-size: 2.2rem; }
			}
			@media screen and (max-width: 991px) {
				.numbers-container .numbers .number-item {
					max-width: calc(50% - 1rem);
				}
			}
			@media screen and (max-width: 567px) {
				.numbers-container .numbers .number-item {
					max-width: 100%;
				}
			}
		</style>
		
		<!-- SEARCH SECTION -->
		<style>
			.search-container > .grey-back {
				padding: 3rem !important;
			}
			.search-container > .grey-back h2 {
				margin: 0 !important;
			}
			.search-bar-inner {
				display: flex;
				align-items: center;
				margin-bottom: 0;
			}
			.search-bar-inner input {
				height: 50px;
				border-radius: .5rem 0 0 .5rem;
			}
			.search-bar-inner .btn {
				border-radius: 0 .5rem .5rem 0;
				height: 50px;
				width: 150px;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			
			@media screen and (max-width: 767px) {
				.search-container > .grey-back {
					padding: 2rem !important;
				}
			}
		</style>

		
		<!-- NEWS SECTION -->
		<style>
			.news-section h2 {
				text-align: center;
				margin-bottom: 0;
    			font-size: 1.2rem;
			}
			.featured-tag {
				color: white;
				background-color: #007298;
				width: fit-content;
				padding: .5rem 1rem;
				text-transform: uppercase;
			}
			.news {
				display: flex;
				flex-wrap: wrap;
			}
			.featured-item {
				width: 33.33333%;
			}
			.news-home-items {
				display: flex;
				flex-wrap: wrap;
				background-color: #ebebeb;
				width: 66.666666%;
				min-height: 300px;
			}
			.news-home-item {
				width: 50%;
				min-height: 300px;
				display: flex;
				align-items: flex-end;
				padding: 0;
				color: white;
				background-position: 50%;
    			background-size: cover;
				background-color: rgba(0,0,0,.25);
				position: relative;
				transition: all .3s;
				text-decoration: none !important;
			}
			.news-home-item:hover, .news-home-item:focus {
				z-index: 999;
			}
			.news-home-item:hover p, .news-home-item:focus p {
				border-left: 10px solid white;
			}
			.featured {
				width: 100%;
				height: 600px;
			}
			.news-home-item p {
				color: white;
				z-index: 1;
				padding: 1.5rem;
				background-color: rgba(0,114,152,0.75);
				width: 100%;
				transition: all .3s;
			}
			.news-home-item p:before {
				content: '';
				width: 100%;
				height: 100%;
				display: block;
				position: absolute;
				background-color: rgba(0,0,0,.2);
				background: radial-gradient(circle, rgba(0,0,0,0) 20%, rgba(0,0,0,0.2) 100%);
				top: 0;
				left: 0;
				z-index: -1;
			}
			
			@media screen and (max-width: 991px) {
				.featured-item {
					width: 100%;
				}
				.news-home-items {
					width: 100%;
				}
				.news-home-item {
					min-height: 200px;
					padding-top: 80px;
				}
				.news-home-item p {
					padding: 1rem;
				}
				.featured-item .featured {
					max-height: 300px;
				}
			}
			
			.no-feature .news-home-items {
				width: 100%;
			}
			.no-feature .news-home-item {
				width: 25%;
			}
			
			@media screen and (max-width: 991px) {
				.no-feature .news-home-item {
					width: 50%;
				}
			}
			@media screen and (max-width: 567px) {
				.no-feature .news-home-item {
					width: 100%;
				}
			}
			
		</style>
		
		<!-- CORE BLUE ADJUSTMENT -->
		<style>
			.core-blue-section {
				margin: 2rem -15px;
    			width: calc(100% + 30px);
			}
		</style>
		
		
		
		<!-- EVENTS ITEMS -->
		<style>
			.event-container-three-accross {
				display: flex;
				flex-wrap: wrap;
				margin: 0 1rem;
				max-width: 100%;
			}
			.event-container-three-accross .item {
				background-color: #ebebeb;
				padding: 1rem 0.75rem 1rem 32px;
				border-left: 4px solid #c6c6c6;
				position: relative;
				width: calc(33.3333% - 2rem);
				margin: 0.75rem 1.25rem 1.25rem 0.75rem;
			}
			.event-container-three-accross .item:hover, .item:focus {
				filter: brightness(100%);
				text-decoration: none;
				transition: all .2s;
				border-left: 4px solid #a5a5a5;
			}
			
			.event-container-three-accross .item .date {
				background-color: #003E52;
				position: absolute;
				left: -28px;
				top: 8px;
				width: 48px;
				height: 48px;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				border-left: 3px solid #99DAEA;
			}
			.event-container-three-accross .item:hover .date, .item:focus .date {
				transition: all .2s;
				transform: scale(1.07);
			}
			.event-container-three-accross .item .date p {
				color: white;
				padding: 0;
			}
			.event-container-three-accross .item .date .month {
				font-size: .8rem;
				line-height: 1;
				text-transform: uppercase;
			}
			.event-container-three-accross .item .date .day {
			    font-weight: bold;
				font-size: 1.1rem;
				padding-top: 0.1rem;
				line-height: 1;
			}
			
			.event-container-three-accross .item .info p {
				padding: 0;
    			line-height: 1.3;
			}
			.event-container-three-accross .item .info .title {
				font-weight: bold;
				text-transform: uppercase;
				padding-bottom: 0.5rem;
				color: #003E52;
				font-size: .95rem;
			}
			.event-container-three-accross .item:hover .info .title, .event-container-three-accross .item:focus .info .title {
				transition: all .2s;
				color: #002f3f;
			}
			.event-container-three-accross .item .info .description, .event-container-three-accross .item .info .time {
				font-size: .9rem;
			}
			.event-container-three-accross .item .info .time {
				padding-top: .5rem;
				font-weight: bold;
				display: none;
			}
			
			@media screen and (max-width: 991px) {
				.event-container-three-accross .item {
					width: calc(50% - 2rem);
				}
			}
			@media screen and (max-width: 767px) {
				.event-container-three-accross .item {
					width: 100%;
				}
				.event-container-three-accross .item {
					margin-bottom: .75rem;
					margin-right: 0;
				}
				.event-container-three-accross .item .info .title {
					padding-bottom: 0.15rem;
				}
			}
		</style>

		<style>
			.event-container-list {
				margin: 0 1rem;
			}
			.event-container-list .item {
				display: block;
				width: 100%;
				background-color: #ebebeb;
				margin: 0.75rem 0;
				position: relative;
				padding: 48px .5rem .5rem;
			}
			
			.event-container-list .item .date {
				display: flex;
				background-color: #003e52;
				justify-content: flex-end;
				border-left: 8px solid #03a3b3;
				position: absolute;
				top: 8px;
				left: -8px;
				height: 40px;
				align-items: center;
			}
			.event-container-list .item .date p {
				color: white;
				font-weight: bold;
			}
			.event-container-list .item .date .day {
				padding-left: 0;
			}
			
			.event-container-list .item .info .title {
				text-transform: uppercase;
				font-weight: bold;
				color: #007298;
				font-size: 22px;
			}
			.event-container-list .item .info .description {
				padding-top: 0;
				display: none;
			}
			.event-container-list .item .info .time {
				padding-top: 0;
			}
		</style>

		<style>
			.events-container {
				display: flex;
				flex-wrap: wrap;
				margin-top: 1rem;
				justify-content: flex-start;
			}
			.event-box-subhead {
			    padding-top: 0;
				margin-top: -0.5rem;
				font-weight: bold;
				text-transform: uppercase;
				color: #007298;
			}
			.event-item {
				padding: 1rem;
				margin: 0 .5rem 1rem !important;
				background-color: white;
				text-align: left;
				width: calc(33.3333% - 1rem);
			}
			.event-item h3 {
				font-size: 1.2rem;
				margin-top:.2rem;
			}
			.event-item p {
				padding: 0 0.5rem;
				font-size: .9rem;
			}
			.event-item .date {
				font-weight: bold;
				padding: 0.5rem 0.5rem 0rem;
				font-size: 1rem;
			}
			.event-item .register-button {
				margin-top: 1.5rem;
			}
			
			@media screen and (max-width: 1200px) {
				.event-item {
					width: calc(33% - 1rem);
				}
			}
			@media screen and (max-width: 767px) {
				.event-item {
					width: 100%;
				}
			}		
		
		
		</style>	
		
		<style>
			.event-container-three-accross .slick-arrow, .event-container-list .slick-arrow {
				top: 50%;
				width: auto;
			}
			.event-container-three-accross .slick-next, .event-container-list .slick-next {
				right: 0px;
			}
			.event-container-three-accross .slick-prev, .event-container-list .slick-prev {
				left: 0px;
			}
			.event-container-three-accross .slick-track, .event-container-list .slick-track {
				padding-left: 12px;
			}
		</style>
		
		
		<!-- SECTION EVENTS -->
		<style>
			.events-section h2 {
				text-align: center;
				margin-bottom: 2rem;
			}
			.featured-event {
				display: flex;
				flex-wrap: wrap;
				margin-bottom: 1rem;
			}
			.featured-event img {
				width: 66%;
				padding: 0;
				object-fit: cover;
				object-position: 80%;
				min-height: 200px;
			}
			.featured-event-box {
				background-color: #007298;
				padding: 1.5rem;
				width: 34%;
			}
			.featured-event-box h3 {
				color: white;
				margin: 0;
			}
			.featured-event-box p {
				color: white;
				line-height: 1.2;
			}
			
			.more-events-btn-container {
				display: flex;
				justify-content: center;
			}
			
			@media screen and (max-width: 767px) {
				.featured-event img {
					width: 100%;
				}
				.featured-event-box {
					width: 100%;
				}
			}
		</style>
		
		
		<style>
			.loading-news {
				display: none;
				flex-direction: column;
				align-items: center;
				margin: 0 auto;
				height: 300px;
				align-items: center;
				justify-content: center;
				background-color: #ebebeb;
			}
			.loading-news p {
				animation: loading-news-pulse 2.4s linear infinite;
			}
			
			@keyframes loading-news-pulse {
			  0% {
				opacity: 1;
			  }
			  50% {
				opacity: .5;
			  }
			  100% {
				opacity: 1;
			  }
			}
			
			.loader-ring {
			  color: #007298
			}
			.loader-ring, .loader-ring div {
			  box-sizing: border-box;
			}
			.loader-ring {
			  display: inline-block;
			  position: relative;
			  width: 80px;
			  height: 80px;
			}
			.loader-ring div {
			  box-sizing: border-box;
			  display: block;
			  position: absolute;
			  width: 64px;
			  height: 64px;
			  margin: 8px;
			  border: 8px solid currentColor;
			  border-radius: 50%;
			  animation: loader-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
			  border-color: currentColor transparent transparent transparent;
			}
			.loader-ring div:nth-child(1) {
			  animation-delay: -0.45s;
			}
			.loader-ring div:nth-child(2) {
			  animation-delay: -0.3s;
			}
			.loader-ring div:nth-child(3) {
			  animation-delay: -0.15s;
			}
			@keyframes loader-ring {
			  0% {
				transform: rotate(0deg);
			  }
			  100% {
				transform: rotate(360deg);
			  }
			}
		</style>
		
		<style>
			.btn-white {
				padding: .5rem 1rem !important;
    			background-color: white !important;
			}
			.btn-white:hover, .btn-white:focus {
				background-color: #007298 !important;
				color: white !important;
			}
			.btn-white:after {
				border-left: 0.3rem solid #002d3c !important;
			}
			.bottom-breaker {
				height: 2rem;
				dispaly: block;
			}
		</style>
		
		<style>
			section {
				margin: 4rem 0;
			}
		</style>
	
		
		<style>
			.top-cta {
				display: flex;
				width: 100%;
				justify-content: center;
				margin-top: 3rem;
			}
			.top-cta .btn {
				padding: 1rem 2rem;
				margin: .5rem !important;
				font-size: 1.15rem;
				border-radius: 0;
				width: 300px;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.top-cta .btn:after { 
				margin-bottom: 0 !important;
			}
			@media screen and (max-width: 567px) {
				.top-cta {
					flex-wrap: wrap;
				}
				.top-cta .btn {
					width: 100%;
				}
				.bottom-cta .cta-message {
					max-width: 100% !important;
				}
			}
		</style>
		
		<!-- VIDEO SECTION -->
		<style>
			#video-hero {
				position: relative;
				overflow: hidden;
			}
			.home-vid-container {
				height: 650px;
				width: 100vw;
				overflow: hidden
			}

			.home-vid-container video {
				display: block;
				max-width: 100%;
				min-width: 100%;
			}

			@media screen and (max-width:1200px) {
				.home-vid-container {
					max-height: 550px
				}
			}

			@media screen and (max-width:991px) {
				.home-vid-container, .backup-bg {
					max-height: 350px;
				}
			}

			@media screen and (max-width:640px) {
				.home-vid-container {
					height: calc((100vw * 9) / 16)
				}
				
			}
			#vid1-btn {
				position: absolute;
				top: -50px;
				right: 0;
				border: 2px solid transparent;
				color: white;
				z-index: 500;
				width: 50px;
				height: 50px;
				cursor: pointer;
				background: rgba(255,255,255,.1);
				transition: border .3s;
			}
			#vid1-btn:hover {
				background: rgba(255,255,255,.25);
			}
			#vid1-btn:focus {
				border: 2px solid white;
			}
		</style>

		<!-- career and academic pathways -->
<style> 

			.pathway-home-container {
				display: flex;
				flex-wrap: wrap;
			}
			.pathwayHomeLink {
				position: relative;
				width: calc(25% - 1rem);
				margin: .5rem;
				min-height: 150px;
				padding: 0 !important;
				background-color:#007298;
			}
			.degree-item .img  {
				z-index: -1;
				object-fit: cover;
				padding: 0;
			}
			.pathwayHomeLink .pathwayHomeTitle {
				padding: .5rem .5rem 1rem .5rem;
				color: white;
				display: flex;
				text-align: center;
				justify-content: center;
				font-style: italic;
			}

		@media screen and (max-width: 1200px) {

			}
			@media screen and (max-width: 991px) {
				.pathwayHomeLink {
					width: calc(33% - 1rem);
				}
			}
			@media screen and (max-width: 767px) {
				.pathwayHomeLink {
					width: calc(50% - 1rem);
				}

			}

	
	.backup-bg {
		background-image: url(https://www.cscc.edu/_resources/images/hero-images/in-demand-careers-hero.jpg);
		background-position: center;
		background-size: cover;
		height: 550px;
		position: absolute;
		top: 0;
		width: 100%;
		z-index: -1;
	}
	

</style>