/*  extra.css
 *
 *  This file contains additional styles needed with the implementation of the majors pages.
 */
 
 @charset "UTF-8";
 
/* To fix menu area that covers gold alert bar */
.header-menus {
    height: 75px !important;
}
@media only screen and (max-width: 992px) {
    .header-menus {
        height: unset !important;
    }    
}
 
/* Removes the underline from Major's titles on /academics/majors-minors.html */
.filter-results-item > a {
    text-decoration: none !important;
}

/* Adds 50px of padding after each feature */
.feature {
    padding-bottom: 50px;
}
@media only screen and (max-width: 575px) {
    .feature {
        padding-bottom: 50px;
    }
}

.singlecol_center { margin: 0 auto; }

/* Styles for the hero video content */
.hero-video-wrapper {
    height: 0; 
    padding-bottom: 56.25%; 
    position: relative;
}
.hero-video-wrapper > iframe {
    height: 100%; 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%;
}

/***** GENERAL STYLES for NEW LOOK *****/
ol.no-style, ul.no-style {
    list-style: none;
    margin: 0;
    padding: 0;
}

.chevron-right-gold {
    background-image: url(../images/accents/chevron-gold.svg);
    background-position: left;
    background-repeat: no-repeat;
    content: "";
    height: 20px;
    position: absolute;
    left: 5px;
    top: 12px;
    width: 25px;
}

.chevron-right-pink {
    background-image: url(../images/accents/chevron-pink.svg);
    background-position: left;
    background-repeat: no-repeat;
    content: "";
    height: 15px;
    position: absolute;
    width: 20px;
}

.cta-button {
    background-color: #f2a900;
    border: none;
    color: #012169;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 20px;
    font-weight: 600;
    padding: 10px 15px 10px 40px;
    position: relative;
    text-align: left;
    text-transform: uppercase;
    width: 100%;
}
.cta-button > a {
    color: inherit;
    text-decoration: none;
}
.cta-button  > a > .arrow-right-pink {
    background-image: url(../images/accents/arrow-pink.svg);
    background-position: left;
    background-repeat: no-repeat;
    content: "";
    height: 20px;
    position: absolute;
    left: 15px;
    top: 15px;
    width: 20px;
}

.fa-play-circle.hide {
	display: none !important;
}
.fa-pause-circle.hide {
	display: none !important;
}

.video-custom-controls {
	background: transparent;
	border: none;
	cursor: pointer;
	position: absolute;
	transform: translate(-50%);
}

/***** sect-bg-hero-video-with-controls *****/

/*~~~~~~~~~~~~~~~~~~ MEDIA CONTENT w/ CUSTOM CONTROLS ~~~~~~~~~~~~~~~~~~*/

.sect-bg-hero-video-with-controls .media {
	aspect-ratio: 16/9 auto;
	margin: 0;
	position: relative;
}
.sect-bg-hero-video-with-controls .media > iframe {
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
}

/*~~~~~~~~~~~~~~~~~~ CUSTOM CONTROLS ~~~~~~~~~~~~~~~~~~*/

.sect-bg-hero-video-with-controls .media > .video-custom-controls {
	font-size: 36px;
	bottom: 50px;
	right: 50px;
}
.sect-bg-hero-video-with-controls .media > .video-custom-controls > .far {
	 color: rgba(255, 255, 255, .7) !important;
}
.sect-bg-hero-video-with-controls .media > .video-custom-controls:hover {
	 background-color: rgba(50, 50, 50, .7);
}
 .sect-bg-hero-video-with-controls .media > .video-custom-controls:hover > .far {
	 color: rgba(255, 255, 255, 1) !important;
}

/*~~~~~~~~~~~~~~~~~~ CUSTOM PROGRESS BAR ~~~~~~~~~~~~~~~~~~*/

.sect-bg-hero-video-with-controls > .video-custom-progress {
	background-color: #41b6e6;
	border: none;
	border-radius: 0;
	height: 15px;
	position: absolute;
	bottom: 0;
	width: 100%;
}
.sect-bg-hero-video-with-controls > .video-custom-progress > .custom-progress-bar {
	background-color: #f2a900;
	display: block;
	height: 15px;
	width: 25%;
}

/*~~~~~~~~~~~~~~~~~~ TEXT CONTENT~~~~~~~~~~~~~~~~~~*/

.sect-bg-hero-video-with-controls .content {
	background-color: #0c2340;
    background-image: url(../images/backgrounds/bg-overlay-blue-right.svg);
	background-position: 100% 100%;
    background-repeat: no-repeat;
	column-gap: 40px;
    display: flex;
    padding: 50px 100px;
}

.sect-bg-hero-video-with-controls .content > .intro {
    margin-bottom: 150px;
    width: 500px;
}
.sect-bg-hero-video-with-controls .content > .intro > .title {
    border: 1px solid #f2a900;
    color: #41b6e6;
    font-family: 'Barlow Condensed', sans-serif;
    font-size:	88px;
    font-weight: 600;
	letter-spacing: 2px;
    padding: 20px;
    text-transform: uppercase;
}

.sect-bg-hero-video-with-controls .content > .text { 
	color: #ffffff;
	margin-top: 100px;
    width: 55%;	
}

@media only screen and (max-width: 1201px) {
	
	/*~~~~~~~~~~~~~~~~~~ TEXT CONTENT less than 1201px ~~~~~~~~~~~~~~~~~~*/

    .sect-bg-hero-video-with-controls .content > .text {
        width: 50%;
    }
}

@media only screen and (max-width: 1025px) {
	
	/*~~~~~~~~~~~~~~~~~~ TEXT CONTENT less than 1025px ~~~~~~~~~~~~~~~~~~*/
	
	.sect-bg-hero-video-with-controls .content {
        display: block;
        padding: 50px 75px;
    }

    .sect-bg-hero-video-with-controls .content > .intro {
        margin-bottom: 25px;
    }
	.sect-bg-hero-video-with-controls .content > .intro > .title {
		font-size: 72px;
	}

    .sect-bg-hero-video-with-controls .content > .text {
        margin-left: auto;
        margin-top: 25px;
        width: 75%;
    }
}

@media only screen and (max-width: 769px) {
	
	/*~~~~~~~~~~~~~~~~~~ TEXT CONTENT less than 769px ~~~~~~~~~~~~~~~~~~*/
	
	.sect-bg-hero-video-with-controls .content {
        padding: 50px;
    }

    .sect-bg-hero-video-with-controls .content > .intro {
        width: 75%;   
    }

    .sect-bg-hero-video-with-controls .content > .text {
        width: 100%;
    }
}

@media only screen and (max-width: 481px) {
	
	/*~~~~~~~~~~~~~~~~~~ CUSTOM CONTROLS less than 481px ~~~~~~~~~~~~~~~~~~*/
	
	.sect-bg-hero-video-with-controls .media > .video-custom-controls {
		font-size: 24px;
		bottom: 25px;
		right: 25px;
	}
	
	/*~~~~~~~~~~~~~~~~~~ TEXT CONTENT less than 481px ~~~~~~~~~~~~~~~~~~*/
	
	 .sect-bg-hero-video-with-controls .content {
        padding: 50px 25px;
    }

    .sect-bg-hero-video-with-controls .content > .intro {
        text-align: center;
        width: 100%;
    }
    .sect-bg-hero-video-with-controls .content > .intro > .title {
        font-size: 64px;
    }
}

/***** sect-bg-white-col3-with-title *****/

.sect-bg-white-col3-with-title {
	background-color: #ffffff;
    background-image: url(../images/backgrounds/bg-stencil-blue.svg);
    background-size: contain;
    display: block;
    padding: 50px 100px;
}

/*~~~~~~~~~~~~~~~~~~ TITLE SECTION ~~~~~~~~~~~~~~~~~~*/

.sect-bg-white-col3-with-title .intro {
    margin-bottom: 50px;
    text-align: center;
}
.sect-bg-white-col3-with-title .intro > .title {
    background-color: #ffffff;
    border: 1px solid #f2a900;
    color: #012169;
    display: inline-block;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 88px;
    font-weight: 600;
    letter-spacing: 2px;
    padding: 20px;
    text-transform: uppercase;
}

/*~~~~~~~~~~~~~~~~~~ CONTENT SECTION ~~~~~~~~~~~~~~~~~~*/

.sect-bg-white-col3-with-title .cards {
    display: flex;
    justify-content: space-between;
}
.sect-bg-white-col3-with-title .cards > li {         
    width: 31%;
}

/*~~~~~~~~~~~~~~~~~~ CARD DETAILS ~~~~~~~~~~~~~~~~~~*/

.sect-bg-white-col3-with-title .cards .media {
    -moz-box-shadow: -5px -5px 7px 1px rgba(150,150,150,0.30), 5px -5px 7px 1px rgba(150,150,150,0.30);
    -o-box-shadow: -5px -5px 7px 1px rgba(150,150,150,0.30), 5px -5px 7px 1px rgba(150,150,150,0.30);
    -webkit-box-shadow: -5px -5px 7px 1px rgba(150,150,150,0.30), 5px -5px 7px 1px rgba(150,150,150,0.30);
    box-shadow: -5px -5px 7px 1px rgba(150,150,150,0.30), 5px -5px 7px 1px rgba(150,150,150,0.30);
	margin: 0 !important;
    position: relative;
}
.sect-bg-white-col3-with-title .cards .title {
    background-color: #011646;
    color: #ffffff;
	font-family: "Spectral", sans-serif;
    font-size: 32px;
    font-weight: 700;
    opacity: .9;
	margin: 0 !important;
    padding: 15px;
    position: absolute;
    bottom: 0;
	text-transform: none;
    width: -moz-available;
    width: -webkit-fill-available;
    width: fill-available;
}
.sect-bg-white-col3-with-title .cards .text {
    background-color: #012169;  
    -moz-box-shadow: -5px 5px 7px 1px rgba(150,150,150,0.30), 5px 5px 7px 1px rgba(150,150,150,0.30);
    -o-box-shadow: -5px 5px 7px 1px rgba(150,150,150,0.30), 5px 5px 7px 1px rgba(150,150,150,0.30);
    -webkit-box-shadow: -5px 5px 7px 1px rgba(150,150,150,0.30), 5px 5px 7px 1px rgba(150,150,150,0.30);
    box-shadow: -5px 5px 7px 1px rgba(150,150,150,0.30), 5px 5px 7px 1px rgba(150,150,150,0.30);
    color: #ffffff;
    height: auto;
    margin: 0;
	min-height: 185px;
    padding: 15px;
}
.sect-bg-white-col3-with-title .cards .cta-button {
    -moz-box-shadow: -5px 5px 7px 1px rgba(150,150,150,0.30), 5px 5px 7px 1px rgba(150,150,150,0.30);
    -o-box-shadow: -5px 5px 7px 1px rgba(150,150,150,0.30), 5px 5px 7px 1px rgba(150,150,150,0.30);
    -webkit-box-shadow: -5px 5px 7px 1px rgba(150,150,150,0.30), 5px 5px 7px 1px rgba(150,150,150,0.30);
    box-shadow: -5px 5px 7px 1px rgba(150,150,150,0.30), 5px 5px 7px 1px rgba(150,150,150,0.30);
    margin-top: 25px;
}

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

    /*~~~~~~~~~~~~~~~~~~ CARD DETAILS less than 1201px ~~~~~~~~~~~~~~~~~~*/

    .sect-bg-white-col3-with-title .cards .title {
        font-size: 28px;
    }
    .sect-bg-white-col3-with-title .cards .cta-button {
        font-size: 18px;
        padding: 10px 5px 10px 40px;
    }
}

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

    .sect-bg-white-col3-with-title {
        display: flex;
        justify-content: space-between;
        padding: 50px 75px;
    }
    
    /*~~~~~~~~~~~~~~~~~~ TITLE SECTION less than 1025px ~~~~~~~~~~~~~~~~~~*/

    .sect-bg-white-col3-with-title .intro {
        text-align: left;
        width: 50%;
    }
    .sect-bg-white-col3-with-title .intro .title {
		font-size: 72px;
	}

    /*~~~~~~~~~~~~~~~~~~ CONTENT SECTION less than 1025px ~~~~~~~~~~~~~~~~~~*/

    .sect-bg-white-col3-with-title .content {
        width: 45%;
    }
    .sect-bg-white-col3-with-title .cards {
        display: block;
    }
    .sect-bg-white-col3-with-title .cards > li {   
        margin-bottom: 50px;
        width: 100%;
    }
	.sect-bg-white-col3-with-title .cards > li:last-of-type {
		margin-bottom: 0;
	}
	
    /*~~~~~~~~~~~~~~~~~~ CARD DETAILS less than 1025px ~~~~~~~~~~~~~~~~~~*/

	.sect-bg-white-col3-with-title .cards .text {
		min-height: 125px;
	}
}

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

    .sect-bg-white-col3-with-title {
        display: block;
        padding: 50px;
    }

    /*~~~~~~~~~~~~~~~~~~ TITLE SECTION less than 769px ~~~~~~~~~~~~~~~~~~*/

    .sect-bg-white-col3-with-title .intro {
        width: 75%;
    }

    /*~~~~~~~~~~~~~~~~~~ CONTENT SECTION less than 769px ~~~~~~~~~~~~~~~~~~*/

    .sect-bg-white-col3-with-title .content {
        width: 75%;
    }
}

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

    .sect-bg-white-col3-with-title {
        padding: 50px 25px;
    }

    /*~~~~~~~~~~~~~~~~~~ TITLE SECTION less than 481px ~~~~~~~~~~~~~~~~~~*/

    .sect-bg-white-col3-with-title .intro {
        text-align: center;
        width: 100%;
    }
    .sect-bg-white-col3-with-title .intro > .title {
        font-size: 64px;
    }

    /*~~~~~~~~~~~~~~~~~~ CONTENT SECTION less than 481px ~~~~~~~~~~~~~~~~~~*/

    .sect-bg-white-col3-with-title .content {
        width: 100%;
    }
	
    /*~~~~~~~~~~~~~~~~~~ CARD DETAILS less than 481px ~~~~~~~~~~~~~~~~~~*/

	.sect-bg-white-col3-with-title .cards .text {
		height: fit-content;
    }
}

/***** sect-bg-image-with-overlay *****/

/*~~~~~~~~~~~~~~~~~~ IMAGE SECTION ~~~~~~~~~~~~~~~~~~*/

.sect-bg-image-with-overlay .bg-image {
    background-size: contain;
    align-items: center;
    display: flex;
    position: relative;
}

/*~~~~~~~~~~~~~~~~~~ OVERLAY SECTION ~~~~~~~~~~~~~~~~~~*/

.sect-bg-image-with-overlay .overlay {
    background-color: #6d2077;
    color: #ffffff;
    padding: 20px;
    position: absolute;
    right: 100px;
    width: 615px;
}
.sect-bg-image-with-overlay .title {
    color: inherit;
    font-family: 'Barlow Condensed', sans-serif;
    font-size:	88px;
    font-weight: 600;
    letter-spacing: 2px;
    margin-bottom: 10px;
    text-transform: uppercase;
}
.sect-bg-image-with-overlay .items > li {
    border-bottom: 1px solid #ff0000;
    font-family: 'Spectral', sans-serif;
    font-size: 32px;
    font-weight: 400;
    line-height: 1.25;
    padding: 10px 0 10px 40px;
    position: relative;
}
.sect-bg-image-with-overlay .items > li:last-of-type {
    border-bottom: none;
}
.sect-bg-image-with-overlay .chevron-right-gold {
	left: 5px;
	top: 18px;
}
.sect-bg-image-with-overlay .item-cite {
    display: block;
    font-size: 14px;
    font-style: normal;
    margin-top: 5px;
}

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

    /*~~~~~~~~~~~~~~~~~~ OVERLAY SECTION less than 1201px ~~~~~~~~~~~~~~~~~~*/

    .sect-bg-image-with-overlay .overlay {
        width: 550px;
    }

    .sect-bg-image-with-overlay .items > li {
        font-size: 28px;
    }
}

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

    /*~~~~~~~~~~~~~~~~~~ IMAGE SECTION less than 1025px ~~~~~~~~~~~~~~~~~~*/

    .sect-bg-image-with-overlay .bg-image {
        display: block;
    }
    
    .sect-bg-image-with-overlay .ratio-21by9 > .ratio-content {
        height: auto;
    }

    /*~~~~~~~~~~~~~~~~~~ OVERLAY SECTION less than 1025px ~~~~~~~~~~~~~~~~~~*/

    .sect-bg-image-with-overlay .overlay {
        padding: 50px 75px;
        position: static;
        width: -moz-available;
        width: -webkit-fill-available;
        width: fill-available;
    }
    .sect-bg-image-with-overlay .title {
		font-size: 72px;
	}
}

@media only screen and (max-width: 769px) {
    
    /*~~~~~~~~~~~~~~~~~~ OVERLAY SECTION less than 769px ~~~~~~~~~~~~~~~~~~*/

	.sect-bg-image-with-overlay .overlay {
		padding: 50px;
    }
}

@media only screen and (max-width: 481px) {
	
	/*~~~~~~~~~~~~~~~~~~ OVERLAY SECTION less than 481px ~~~~~~~~~~~~~~~~~~*/
	
	.sect-bg-image-with-overlay .overlay {
		padding: 50px 25px;
    }	

	.sect-bg-image-with-overlay .title {
		font-size:	64px;
		text-align: center;
	}
}

/***** sect-bg-white-ctas *****/

.sect-bg-white-ctas {
	background-color: #ffffff;
    background-image: url(../images/backgrounds/bg-overlay-pink.svg);
    background-repeat: no-repeat;
    column-gap: 40px;
    display: flex;
	flex-wrap: wrap;
    justify-content: center;
    padding: 25px 75px;
}
.sect-bg-white-ctas .btn-2xs {
    width: 35%;
}
.sect-bg-white-ctas .btn-3xs {
    width: 28%;
}

@media only screen and (max-width: 1201px) {
	
	.sect-bg-white-ctas .btn-3xs {
		width: 30%;
	}
}

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

	.sect-bg-white-ctas .btn-2xs,
	.sect-bg-white-ctas .btn-3xs {
		width: 45%;	
	}
	.sect-bg-white-ctas .btn-3xs {
		margin-bottom: 25px; 
	}
    .sect-bg-white-ctas .btn-3xs:last-of-type {
   		margin-bottom: 0;
    }
}

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

    .sect-bg-white-ctas {
        display: block;
        text-align: center;
    }
	.sect-bg-white-ctas .btn-2xs,
    .sect-bg-white-ctas .btn-3xs {
        width: 90%;
    }
	.sect-bg-white-ctas .btn-2xs {
		margin-bottom: 25px; 
	}
    .sect-bg-white-ctas .btn-2xs:last-of-type {
   		margin-bottom: 0;
    }
}

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

    .sect-bg-white-ctas {
        padding: 50px;
    }

    .sect-bg-white-ctas .btn-2xs,
	.sect-bg-white-ctas .btn-3xs {
        width: 100%;
    }
}

/***** sect-bg-white-col3-embed-title *****/

.sect-bg-white-col3-embed-title {
    background-color: #ffffff;
    background-image: url(../images/backgrounds/bg-stencil-blue.svg);
    background-size: contain;
    display: flex;
    justify-content: space-between;
    padding: 50px 100px;
}

/*~~~~~~~~~~~~~~~~~~ INTRO SECTION ~~~~~~~~~~~~~~~~~~*/

.sect-bg-white-col3-embed-title .intro {
    width: 35%;
}
.sect-bg-white-col3-embed-title .intro > .title {
    color: #012169;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 52px;
    font-weight: 600;
    text-transform: uppercase;
}
.sect-bg-white-col3-embed-title .intro > .title p {
    letter-spacing: .5px;
    line-height: 1;
    margin: 0;
}
.sect-bg-white-col3-embed-title .intro > .text {
    color: #101820;
}

/*~~~~~~~~~~~~~~~~~~ CONTENT SECTION ~~~~~~~~~~~~~~~~~~*/

.sect-bg-white-col3-embed-title .content {
    width: 60%;
}
.sect-bg-white-col3-embed-title .cards  {   
    display: flex;
    justify-content: space-between;      
}
.sect-bg-white-col3-embed-title .cards > li {
	width: 48%;
}

/*~~~~~~~~~~~~~~~~~~ CARD DETAILS ~~~~~~~~~~~~~~~~~~*/

.sect-bg-white-col3-embed-title .cards .media {
	display: block;
	height: 0;
	overflow: hidden;
	padding: 0;
	padding-bottom: 177.78%; /* for video dimensions 720x1280 */
	position: relative;
}
.sect-bg-white-col3-embed-title .cards iframe,
.sect-bg-white-col3-embed-title .cards video {
	border: 0;
	height: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	top: 0;
	width: 100%;
}
.sect-bg-white-col3-embed-title .cards .video-controls {
	color: rgba(65, 182, 230, 0.5);
	font-size: 88px;
}
.sect-bg-white-col3-embed-title .cards .video-controls:focus,
.sect-bg-white-col3-embed-title .cards .video-controls:hover {
    background-color: rgba(0, 0, 0, .2);
    color: rgba(65, 182, 230);
}
.sect-bg-white-col3-embed-title .cards .text {
	background-color: #012169;
    color: #ffffff;
	font-family: "Spectral", sans-serif;
    font-size: 24px;
    line-height: 1.25;
    margin: 0;
    padding: 15px;
    position: absolute;
    bottom: 0;
    width: -moz-available;
    width: -webkit-fill-available;
    width: fill-available;
}

.sect-bg-white-col3-embed-title .cards .cta-button {
	margin-top: 25px;
}

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

    /*~~~~~~~~~~~~~~~~~~ INTRO SECTION less than 1201px ~~~~~~~~~~~~~~~~~~*/

    .sect-bg-white-col3-embed-title .intro > .title {
        font-size: 48px;
    }
    .sect-bg-white-col3-embed-title .intro > .text {
        font-size: 16px;
    }

    /*~~~~~~~~~~~~~~~~~~ CARD DETAILS less than 1201px ~~~~~~~~~~~~~~~~~~*/

    .sect-bg-white-col3-embed-title .cards .cta-button {
        font-size: 18px;
    }
}

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

    .sect-bg-white-col3-embed-title {
        column-gap: 40px;
        padding: 50px 75px;
    }

    /*~~~~~~~~~~~~~~~~~~ INTRO SECTION less than 1025px ~~~~~~~~~~~~~~~~~~*/

    .sect-bg-white-col3-embed-title .intro {
        width: 50%;
    }

    /*~~~~~~~~~~~~~~~~~~ CONTENT SECTION less than 1025px ~~~~~~~~~~~~~~~~~~*/

    .sect-bg-white-col3-embed-title .content {
        width: 50%;
    }
    .sect-bg-white-col3-embed-title .cards {
        display: block;
    }
    .sect-bg-white-col3-embed-title .cards > li {
        margin-bottom: 50px;
        width: 100%;
    }
	.sect-bg-white-col3-embed-title .cards > li:last-of-type {
		margin-bottom: 0;
	}
}

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

    .sect-bg-white-col3-embed-title {
        display: block;
        padding: 50px;
    }

    /*~~~~~~~~~~~~~~~~~~ INTRO SECTION less than 769px ~~~~~~~~~~~~~~~~~~*/

    .sect-bg-white-col3-embed-title .intro {
        margin-bottom: 20px;
        width: 100%;
    }

    /*~~~~~~~~~~~~~~~~~~ CONTENT SECTION less than 769px ~~~~~~~~~~~~~~~~~~*/

    .sect-bg-white-col3-embed-title .content {
        width: 100%;
    }
    .sect-bg-white-col3-embed-title .cards {
        column-gap: 20px;
        display: flex;
        justify-content: space-between;
    }
    .sect-bg-white-col3-embed-title .cards > li {
		margin-bottom: 0;
    }
}

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

    .sect-bg-white-col3-embed-title {
        padding: 50px 25px;
    }

    /*~~~~~~~~~~~~~~~~~~ CONTENT SECTION less than 481px ~~~~~~~~~~~~~~~~~~*/

    .sect-bg-white-col3-embed-title .cards {
        display: block;
    }
    .sect-bg-white-col3-embed-title .cards > li {
        margin-bottom: 50px;
        width: 100%;
    }
}

/***** .sect-bg-image-slider *****/

@keyframes fade-in {
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}

.sect-bg-image-slider {
    background-color: #ffffff;
	height: 360px;
	overflow: hidden;
	position: relative;
}
.sect-bg-image-slider .slide {
	display: none;
	height: inherit;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
}
.sect-bg-image-slider .slide.active {
	display: block;
}
.sect-bg-image-slider .slide > .image {
	animation: fade-in 1s ease;
	height: inherit;
	width: unset;
}
.sect-bg-image-slider .slide > .caption {
    background-color: rgb(12, 35, 64, 0.7);
    color: #fff;
    font-style: italic;
    padding: 5px;
    position: absolute;
    bottom: 25px;
    right: 0;
    z-index: 10;
}


@media only screen and (max-width: 1801px) {
	
	.sect-bg-image-slider {
		aspect-ratio: unset;
		height: 360px;
	}
}

@media only screen and (max-width: 1201px) {}

@media only screen and (max-width: 1025px) {}

@media only screen and (max-width: 769px) {
	
	.sect-bg-image-slider .slide > .caption {
		display: none;
	}
}

@media only screen and (max-width: 481px) {}

/***** sect-bg-blue-col2-alt *****/

.sect-bg-blue-col2-alt {
    background-color: #0c2340;
    background-image: url(../images/backgrounds/bg-overlay-blue-alt.svg);
    background-position: 100% 100%;
    background-repeat: no-repeat;
	background-size: cover;
    color: #ffffff;
}

/*~~~~~~~~~~~~~~~~~~ INTRO SECTION ~~~~~~~~~~~~~~~~~~*/

.sect-bg-blue-col2-alt .intro {
    padding: 50px 250px 25px;
    text-align: center;
}
.sect-bg-blue-col2-alt .intro > .title {
    border: 1px solid #f2a900;
    color: #41b6e6;
    display: inline-block;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 88px;
    font-weight: 600
    letter-spacing: 2px;
    padding: 20px;
    text-transform: uppercase;
}


/*~~~~~~~~~~~~~~~~~~ LEFT AND RIGHT SECTIONS ~~~~~~~~~~~~~~~~~~*/

.sect-bg-blue-col2-alt .left, 
.sect-bg-blue-col2-alt .right {
    column-gap: 40px;
    display: flex;
}
.sect-bg-blue-col2-alt .media {
    width: 70%;
}
.sect-bg-blue-col2-alt .media > img {
	width: 100%;
}
.sect-bg-blue-col2-alt .content {
    width: 30%;
}
.sect-bg-blue-col2-alt .content > .title {
    color: #41b6e6;
	font-family: "Spectral", sans-serif;
    font-size: 64px;
    font-weight: 700;
    text-transform: none;
}
.sect-bg-blue-col2-alt .content > .text {
    border-bottom: 1px solid #f2a900;
    border-top: 1px solid #f2a900;
    padding: 15px 0;
}

.sect-bg-blue-col2-alt .content > .opts > li {
    margin-bottom: 20px;
}

/*~~~~~~~~~~~~~~~~~~ OPTION DETAILS ~~~~~~~~~~~~~~~~~~*/

.sect-bg-blue-col2-alt .opts-title {
    color: #41b6e6;
	font-family: "Spectral", sans-serif;
    font-size: 32px;
    font-weight: 700;
    text-transform: none;
}

/*~~~~~~~~~~~~~~~~~~ LEFT SECTION ~~~~~~~~~~~~~~~~~~*/

.sect-bg-blue-col2-alt .left {
    padding: 25px 0 25px 100px;
}
.sect-bg-blue-col2-alt .left > .content {
    order: -1;
}

/*~~~~~~~~~~~~~~~~~~ RIGHT SECTION ~~~~~~~~~~~~~~~~~~*/

.sect-bg-blue-col2-alt .right {
    padding: 25px 100px 75px 0;
}

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

    /*~~~~~~~~~~~~~~~~~~ INTRO SECTION less than 1201px ~~~~~~~~~~~~~~~~~~*/

    .sect-bg-blue-col2-alt .intro {
        padding: 50px 175px;
    }
}
@media only screen and (max-width: 1025px) {

    /*~~~~~~~~~~~~~~~~~~ INTRO SECTION less than 1025px ~~~~~~~~~~~~~~~~~~*/

    .sect-bg-blue-col2-alt .intro {
        padding: 50px 100px;
    }
    .sect-bg-blue-col2-alt .intro > .title {
		font-size: 72px;
	}

    /*~~~~~~~~~~~~~~~~~~ LEFT AND RIGHT SECTIONS less than 1025px ~~~~~~~~~~~~~~~~~~*/

    .sect-bg-blue-col2-alt .content > .title {
        font-size: 48px;
    }

    /*~~~~~~~~~~~~~~~~~~ LEFT SECTION less than 1025px ~~~~~~~~~~~~~~~~~~*/

    .sect-bg-blue-col2-alt .left {
        padding-left: 75px;
    }

    /*~~~~~~~~~~~~~~~~~~ RIGHT SECTION less than 1025px ~~~~~~~~~~~~~~~~~~*/

    .sect-bg-blue-col2-alt .right {
        padding-right: 75px;
    }
}

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

    /*~~~~~~~~~~~~~~~~~~ INTRO SECTION less than 769px ~~~~~~~~~~~~~~~~~~*/

    .sect-bg-blue-col2-alt .intro {
        padding: 50px 50px 25px;
    }

    /*~~~~~~~~~~~~~~~~~~ LEFT AND RIGHT SECTIONS less than 769px ~~~~~~~~~~~~~~~~~~*/

    .sect-bg-blue-col2-alt .left,
    .sect-bg-blue-col2-alt .right {
        display: block;
        padding: 0;
    }
	.sect-bg-blue-col2-alt .media {
		width: 100%;
	}
    .sect-bg-blue-col2-alt .content {
        padding: 25px 50px;
        width: 90%;
    }
}

@media only screen and (max-width: 481px) {
	
	/*~~~~~~~~~~~~~~~~~~ INTRO SECTION less than 481px ~~~~~~~~~~~~~~~~~~*/

    .sect-bg-blue-col2-alt .intro {
        padding: 50px 25px 25px;
    }
	.sect-bg-blue-col2-alt .intro > .title {
		font-size: 64px;
	}

    /*~~~~~~~~~~~~~~~~~~ LEFT AND RIGHT SECTIONS less than 481px ~~~~~~~~~~~~~~~~~~*/

    .sect-bg-blue-col2-alt .content {
        padding: 25px;
        width: -moz-available;
        width: -webkit-fill-available;
        width: fill-available;
    }
}

/***** sect-bg-white-scroll-tiles *****/

@keyframes infiniteScroll {
    from {
        transform: translateX(0)
    }
    to {
        /* transform: translateX(calc(0px - 100%)) */
        transform: translateX(-100%)
    }
}

.sect-bg-white-scroll-tiles {
    background-color: #ffffff;
    overflow-x: hidden;
    padding: 50px 0;
    width: 100%;
}

/*~~~~~~~~~~~~~~~~~~ GRID SECTION ~~~~~~~~~~~~~~~~~~*/

.sect-bg-white-scroll-tiles .container {
    display: flex;
    max-width: unset;
    width: 4560px;
}

.sect-bg-white-scroll-tiles .grid {
    animation-name: infiniteScroll;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    display: grid;
    grid-auto-flow: dense;
    grid-auto-rows: 255px;
    grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
    grid-gap: 20px;
    margin-right: 20px;
    white-space: nowrap;
    width: 1140px;
}
.sect-bg-white-scroll-tiles .grid > .tile {
    align-items: center;
    justify-content: center;
}
.sect-bg-white-scroll-tiles .grid > .tile.large {
    grid-column: span 2;
    grid-row: span 2;
}
.sect-bg-white-scroll-tiles .grid > .tile img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

/*~~~~~~~~~~~~~~~~~~ ICONS SECTION ~~~~~~~~~~~~~~~~~~*/

.sect-bg-white-scroll-tiles .icons {
    column-gap: 25px;
    display: flex;
    justify-content: center;
    margin-top: 25px;
}

/***** sect-bg-white-hero-with-overlay *****/

.sect-bg-hero-image-with-overlay {
	aspect-ratio: 21/9;
}

/*~~~~~~~~~~~~~~~~~~ IMAGE SECTION ~~~~~~~~~~~~~~~~~~*/
		
.sect-bg-hero-image-with-overlay .bg-image {
	background-size: contain;
	margin: 0;
	position: relative;
}
.sect-bg-hero-image-with-overlay .bg-image > img {
	width: 100%;
}

/*~~~~~~~~~~~~~~~~~~ SPACE SECTION ~~~~~~~~~~~~~~~~~~*/

.sect-bg-hero-image-with-overlay .bg-space {
	background-color: #ffffff;
	background-position: top right;
	background-repeat: no-repeat;
	background-size: contain;
	position: relative;
}
.sect-bg-hero-image-with-overlay .bg-space.left {
	background-image: url(../images/backgrounds/bg-overlay-pink.svg);
}
.sect-bg-hero-image-with-overlay .bg-space.right {
	background-image: url(../images/backgrounds/bg-overlay-pink-right.jpg);
}

/*~~~~~~~~~~~~~~~~~~ OVERLAY SECTION ~~~~~~~~~~~~~~~~~~*/

.sect-bg-hero-image-with-overlay .overlay {
	background-color: #6d2077;
	color: #ffffff;
	max-width: 575px; 
	min-width: 435px;
	padding: 0 20px;
	position: absolute;
	width: 50%;
	z-index: 1;
}
.sect-bg-hero-image-with-overlay .overlay.left {
	left: 100px;
}
.sect-bg-hero-image-with-overlay .overlay.right {
	right: 100px;
}

.sect-bg-hero-image-with-overlay .bg-image > .overlay {
	bottom: 0;
}
.sect-bg-hero-image-with-overlay .bg-space > .overlay {
	top: 0;	
}

.sect-bg-hero-image-with-overlay .title {
	color: inherit;
	font-family: 'Barlow Condensed', sans-serif !important;
	font-size:	88px;
	font-weight: 600;
	letter-spacing: 2px;
	margin: 0;
	padding: 20px 0;
	text-transform: uppercase;
}

.sect-bg-hero-image-with-overlay .text {
	border-top: 2px solid #c6007e;
	color: inherit;
	margin: 0;
	padding: 20px 0;
}

@media only screen and (max-width: 1201px) {}

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

	/*~~~~~~~~~~~~~~~~~~ OVERLAY SECTION less than 1025px ~~~~~~~~~~~~~~~~~~*/
	
	.sect-bg-hero-image-with-overlay .overlay.left {
		left: 75px;
	}
	.sect-bg-hero-image-with-overlay .overlay.right {
		right: 75px;
	}
	
	.sect-bg-hero-image-with-overlay .title {
		font-size: 72px;
	}
}

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

	/*~~~~~~~~~~~~~~~~~~ SPACE SECTION less than 769px ~~~~~~~~~~~~~~~~~~*/

	.sect-bg-hero-image-with-overlay .bg-space {
		height: auto;
	}

	/*~~~~~~~~~~~~~~~~~~ OVERLAY SECTION less than 769px ~~~~~~~~~~~~~~~~~~*/

	.sect-bg-hero-image-with-overlay .overlay {
		max-width: none;
		min-width: auto;
		padding: 0 50px;
		position: static;
		width: 100%;
	}
}

@media only screen and (max-width: 481px) {
	
	/*~~~~~~~~~~~~~~~~~~ OVERLAY SECTION less than 481px ~~~~~~~~~~~~~~~~~~*/
	
	.sect-bg-hero-image-with-overlay .overlay {
		padding: 0 25px;
	}
	
	.sect-bg-hero-image-with-overlay .title {
		font-size: 64px;
	}
}

/***** sect-bg-image-fixed-tiles *****/

.sect-bg-image-fixed-tiles {
	display: flex;
	justify-content: right;
	overflow: hidden;
	position: relative;
}

/*~~~~~~~~~~~~~~~~~~ BACKGROUND IMAGE w/ BLUE OVERLAY ~~~~~~~~~~~~~~~~~~*/

.sect-bg-image-fixed-tiles > .bg-image {
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
}
.sect-bg-image-fixed-tiles > .bg-image > img {
	width: 100%;
}

/*~~~~~~~~~~~~~~~~~~ OVERLAY FOR TILES ~~~~~~~~~~~~~~~~~~*/

.sect-bg-image-fixed-tiles > .overlay {
    padding: 50px 100px;
    width: 925px;
	z-index: 1;
}
.sect-bg-image-fixed-tiles > .overlay > .title {
    color: #f2a900;
    font-family: 'Barlow Condensed', sans-serif;
    font-size:	88px;
    font-weight: 600;
	letter-spacing: 2px;
    margin-bottom: 10px;
    text-align: center;
    text-transform: uppercase;
}

/*~~~~~~~~~~~~~~~~~~ STAT STRUCTURE ~~~~~~~~~~~~~~~~~~*/

.sect-bg-image-fixed-tiles .stats {
    display: grid;
    grid-auto-rows: 350px;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    grid-gap: 25px;
}
.sect-bg-image-fixed-tiles .stats > li {
    background-color: #ffffff;
	display: flex;
	flex-direction: column;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 28px;
    font-weight: 600;
    padding: 25px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
}

/*~~~~~~~~~~~~~~~~~~ STAT PARTS ~~~~~~~~~~~~~~~~~~*/

.sect-bg-image-fixed-tiles .quality {
	background-image: url("http://localhost/personal_git/oua-apply-site-v3/_images/accents/ring-blue.svg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	height: 200px;
    margin: 0 auto auto !important;
    width: 200px;
}
.sect-bg-image-fixed-tiles .quality > .caption {
    color: #b58500;
    font-size: 80px;
	line-height: 1;
    position: absolute;
    left: 50%;
    top: 80px;
    transform: translateX(-50%);
    width: 100%;
}
.sect-bg-image-fixed-tiles .category {
	line-height: 1;
	margin: 0;
}
.sect-bg-image-fixed-tiles .citation {
    border-top: 1px solid #b58500;
    display: block;
    font-family: 'Spectral', sans-serif;
    font-size: 14px;
	margin-bottom: 20px;
    width: 100%;
}

@media only screen and (max-width: 1650px) {
	
	/*~~~~~~~~~~~~~~~~~~ BACKGROUND IMAGE w/ PURPLE OVERLAY less than 1650px ~~~~~~~~~~~~~~~~~~*/

	.sect-bg-image-fixed-tiles > .bg-image > img {
		height: 100%;
	}
}

@media only screen and (max-width: 1201px) {
	
	/*~~~~~~~~~~~~~~~~~~ BACKGROUND IMAGE w/ PURPLE OVERLAY less than 1201px ~~~~~~~~~~~~~~~~~~*/

	.sect-bg-image-fixed-tiles > .bg-image > img {
		width: unset;
	}
}

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

    .sect-bg-image-fixed-tiles {
        justify-content: center;
    }
	
	/*~~~~~~~~~~~~~~~~~~ OVERLAY FOR TILES less than 1025px ~~~~~~~~~~~~~~~~~~*/

    .sect-bg-image-fixed-tiles > .overlay {
        padding: 50px 75px;
    }
	.sect-bg-image-fixed-tiles > .overlay > .title {
		font-size:	72px;	
	}
	
	/*~~~~~~~~~~~~~~~~~~ STAT STRUCTURE less than 1025px ~~~~~~~~~~~~~~~~~~*/

    .sect-bg-image-fixed-tiles .stats {
        display: grid;
        grid-auto-rows: 290px;
        grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
        grid-gap: 25px;
    }
    .sect-bg-image-fixed-tiles .stats > li {
        padding: 20px;
    }

	/*~~~~~~~~~~~~~~~~~~ STAT PARTS less than 1025px ~~~~~~~~~~~~~~~~~~*/
	
    .sect-bg-image-fixed-tiles .quality {
        width: 175px;
    }

    .sect-bg-image-fixed-tiles .quality > .caption {
        font-size: 72px;
    }
}

@media only screen and (max-width: 769px) {
	
	/*~~~~~~~~~~~~~~~~~~ OVERLAY FOR TILES less than 769px ~~~~~~~~~~~~~~~~~~*/

    .sect-bg-image-fixed-tiles > .overlay {
        padding: 50px;
    }

    .sect-bg-image-fixed-tiles > .overlay > .title {
        font-size:	64px;
    }
	
	/*~~~~~~~~~~~~~~~~~~ STAT STRUCTURE less than 769px ~~~~~~~~~~~~~~~~~~*/

    .sect-bg-image-fixed-tiles .stats {
        grid-auto-rows: 300px;
        grid-template-columns: minmax(275px, 300px);
		justify-content: center;
    }

	/*~~~~~~~~~~~~~~~~~~ STAT PARTS less than 769px ~~~~~~~~~~~~~~~~~~*/
	
    .sect-bg-image-fixed-tiles .quality > .caption {
        font-size: 64px;
    }
}

@media only screen and (max-width: 481px) {
	
	/*~~~~~~~~~~~~~~~~~~ OVERLAY FOR TILES less than 481px ~~~~~~~~~~~~~~~~~~*/

    .sect-bg-image-fixed-tiles > .overlay {
        padding: 50px 25px;
    }
}

/***** sect-bg-white-col2-alt *****/

.sect-bg-white-col2-alt {
    background-color: #ffffff;
    color: #000000;
}
.sect-bg-white-col2-alt > section {
    column-gap: 40px;
    display: flex;
    padding: 25px 100px;
}
.sect-bg-white-col2-alt > section:first-of-type {
    padding-top: 50px;
}
.sect-bg-white-col2-alt > section:last-of-type {
    padding-bottom: 50px;
}

.sect-bg-white-col2-alt .media {
    width: 60%;
}
.sect-bg-white-col2-alt .media > img {
	width: 100%;
}
.sect-bg-white-col2-alt > .right > .media {
    order: 1;
}

.sect-bg-white-col2-alt .content {
    width: 40%;
}
.sect-bg-white-col2-alt .content > .title {
    color: #007dba;
    font-family: "Spectral", sans-serif;
    font-size: 18px;
    font-weight: 700;
	margin: 0;
	text-transform: none;
}
.sect-bg-white-col2-alt .content > .sub-title {
    color: #012169;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 52px;
    font-weight: 600;
	letter-spacing: 1px;
	line-height: 1;
    text-transform: uppercase;
}

@media only screen and (max-width: 1201px) {}

@media only screen and (max-width: 1025px) {
    .sect-bg-white-col2-alt > section {
        display: block;
        padding: 25px 75px;
    }

    .sect-bg-white-col2-alt .content {
        padding-top: 25px;
        width: 60%;
    }

    .sect-bg-white-col2-alt > .right > .media,
    .sect-bg-white-col2-alt > .right > .content {
        margin-left: auto;
    }
}

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

    .sect-bg-white-col2-alt > section {
        padding: 25px 50px;
    }

    .sect-bg-white-col2-alt .media,
    .sect-bg-white-col2-alt .content {
        width: 100%;
    }
}

@media only screen and (max-width: 481px) {
    
    .sect-bg-white-col2-alt > section {
        padding: 25px;
    }
}

/***** sect-bg-image-testimonial *****/

.sect-bg-image-testimonial {
	display: flex;
	height: 450px;
	overflow: hidden;
	position: relative;
}

/*~~~~~~~~~~~~~~~~~~ BACKGROUND IMAGE w/ PURPLE OVERLAY ~~~~~~~~~~~~~~~~~~*/

.sect-bg-image-testimonial > .bg-image {
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
}
.sect-bg-image-testimonial > .bg-image > img {
	width: 100%;
}

/*~~~~~~~~~~~~~~~~~~ FOREGROUND IMAGE ~~~~~~~~~~~~~~~~~~*/

.sect-bg-image-testimonial > .fg-image {
	height: 100%;
	margin: 0;
	position: absolute;
	bottom: 0;
}
.sect-bg-image-testimonial > .fg-image > img {
	height: 100%;
	width: unset;
}

/*~~~~~~~~~~~~~~~~~~ TESTIMONIAL SECTION ~~~~~~~~~~~~~~~~~~*/

.sect-bg-image-testimonial > .text {
	align-self: center;
	color: #ffffff;
	margin: 0;
	padding: 50px;
	position: absolute;
	right: 0;
	width: 50%;
}
.sect-bg-image-testimonial > .text > .quote {
	font-family: "Spectral", sans-serif;
	font-size: 48px;
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 10px;
}
.sect-bg-image-testimonial > .text > .citation {
	font-size: 20px;
	font-weight: 700;
}

@media only screen and (max-width: 1650px) {
	
	/*~~~~~~~~~~~~~~~~~~ BACKGROUND IMAGE w/ PURPLE OVERLAY less than 1650px ~~~~~~~~~~~~~~~~~~*/

	.sect-bg-image-testimonial > .bg-image > img {
		height: 100%;
	}
}

@media only screen and (max-width: 1201px) {
	
	/*~~~~~~~~~~~~~~~~~~ BACKGROUND IMAGE w/ PURPLE OVERLAY less than 1201px ~~~~~~~~~~~~~~~~~~*/

	.sect-bg-image-testimonial > .bg-image > img {
		width: unset;
	}
}

@media only screen and (max-width: 1025px) {
	
	/*~~~~~~~~~~~~~~~~~~ FOREGROUND IMAGE less than 1025px ~~~~~~~~~~~~~~~~~~*/

	.sect-bg-image-testimonial > .fg-image {
		left: -165px;
	}

	/*~~~~~~~~~~~~~~~~~~ TESTIMONIAL SECTION less than 1025px ~~~~~~~~~~~~~~~~~~*/

	.sect-bg-image-testimonial > .text {
		width: 60%;
	}
	.sect-bg-image-testimonial > .text > .quote {
		font-size: 32px;
	}
	.sect-bg-image-testimonial > .text > .citation {
		font-size: 18px;
	}
}

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

	/*~~~~~~~~~~~~~~~~~~ FOREGROUND IMAGE less than 769px ~~~~~~~~~~~~~~~~~~*/

	.sect-bg-image-testimonial > .fg-image {
		bottom: -75px;
		left: 0;
	}

	/*~~~~~~~~~~~~~~~~~~ TESTIMONIAL SECTION less than 769px ~~~~~~~~~~~~~~~~~~*/

	.sect-bg-image-testimonial > .text {
		padding: 25px 50px;
		top: 0;
		width: 100%;
	}
	.sect-bg-image-testimonial > .text > .quote {
		font-size: 32px;
	}
	.sect-bg-image-testimonial > .text > .citation {
		font-size: 18px;
	}
}

@media only screen and (max-width: 481px) {
	
	/*~~~~~~~~~~~~~~~~~~ FOREGROUND IMAGE less than 481px ~~~~~~~~~~~~~~~~~~*/

	.sect-bg-image-testimonial > .fg-image {
		height: 75%;
	}
	
	/*~~~~~~~~~~~~~~~~~~ TESTIMONIAL SECTION less than 481px ~~~~~~~~~~~~~~~~~~*/

	.sect-bg-image-testimonial > .text {
		padding: 25px;
	}
}

/***** sect-bg-white-fixed-tiles *****/

.sect-bg-white-fixed-tiles {
	display: grid;
	grid-gap: 25px;
	grid-template: repeat(3, 1fr) / repeat(3, minmax(250px, 1fr));
	padding: 50px 100px;
}
.sect-bg-white-fixed-tiles .tile {
	color: #012169;	
	display: flex;
	position: relative;
}
.sect-bg-white-fixed-tiles .tile.large {
	grid-column: span 2;
}
.sect-bg-white-fixed-tiles .tile .content {
	padding: 25px;
}
.sect-bg-white-fixed-tiles .tile .content .title {
	color: inherit;
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 32px;
	font-weight: 600;
	text-transform: uppercase;
}
.sect-bg-white-fixed-tiles .tile .content .text {
	margin: 20px 0 0;
}
.sect-bg-white-fixed-tiles .tile .content .cta-button {
	margin: 20px 0 0;
}

/*~~~~~~~~~~~~~~~~~~ TILES w/ BACKGROUND IMAGES ~~~~~~~~~~~~~~~~~~*/

.sect-bg-white-fixed-tiles .tile.bg-image > img {
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
}
.sect-bg-white-fixed-tiles .tile.bg-image > .content {
	color: #ffffff;
	margin-top: auto;
	z-index: 2;
}

/*~~~~~~~~~~~~~~~~~~ TILES w/ BACKGROUND COLOR PINK ~~~~~~~~~~~~~~~~~~*/

.sect-bg-white-fixed-tiles .tile.bg-pink {
	background-color: #c6007e;
	color: #ffffff;	
}
.sect-bg-white-fixed-tiles .tile.bg-pink > .content {
	align-self: center;
}

/*~~~~~~~~~~~~~~~~~~ TILES w/ BACKGROUND COLOR WHITE ~~~~~~~~~~~~~~~~~~*/

.sect-bg-white-fixed-tiles .tile.bg-white {
	flex-direction: column;
}
.sect-bg-white-fixed-tiles .tile.bg-white > .content {
	border: 1px solid #012169;
	height: -moz-fill-available;
	height: -webkit-fill-available;
	height: fill-available;
}

@media only screen and (max-width: 1201px) {}

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

	.sect-bg-white-fixed-tiles {
		grid-template: repeat(5, 1fr) / repeat(2, minmax(250px, 1fr));
		padding: 50px 75px;
	}

	.sect-bg-white-fixed-tiles > .tile.flip {
		order: 1;
	}
}

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

	.sect-bg-white-fixed-tiles {
		grid-template: repeat(8, 1fr) / repeat(1, 1fr);
		padding: 50px;
	}

	.sect-bg-white-fixed-tiles > .tile.flip {
		order: 0;
	}
}

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

	.sect-bg-white-fixed-tiles {
		padding: 25px;
	}
}

/***** sect-bg-purple-col2-alt *****/

.sect-bg-purple-col2-alt {
	background-color: #6d2077;
    color: #ffffff;
}

/*~~~~~~~~~~~~~~~~~~ LEFT AND RIGHT SECTIONS ~~~~~~~~~~~~~~~~~~*/

.sect-bg-purple-col2-alt .left, 
.sect-bg-purple-col2-alt .right {
    column-gap: 40px;
    display: flex;
}
.sect-bg-purple-col2-alt .media {
    width: 70%;
}
.sect-bg-purple-col2-alt .media > img {
    width: 100%;
}
.sect-bg-purple-col2-alt .content {
    width: 30%;
}
.sect-bg-purple-col2-alt .content > .title {
    color: #ffffff;
	font-family: "Spectral", sans-serif;
    font-size: 64px;
    font-weight: 700;
    text-transform: none;
}
.sect-bg-purple-col2-alt .content > .text {
    border-bottom: 1px solid #f2a900;
    border-top: 1px solid #f2a900;
    padding: 15px 0;
}

.sect-bg-purple-col2-alt .content > .opts > li {
	font-family: "Spectral", sans-serif;
	font-size: 24px;
    padding: 0 0 20px 25px;
	position: relative;
}

.sect-bg-purple-col2-alt .chevron-right-pink {
	left: 0;
	top: 10px;
}

/*~~~~~~~~~~~~~~~~~~ LEFT SECTION ~~~~~~~~~~~~~~~~~~*/

.sect-bg-purple-col2-alt .left {
    padding: 50px 0 25px 100px;
}
.sect-bg-purple-col2-alt .left > .content {
    order: -1;
}

/*~~~~~~~~~~~~~~~~~~ RIGHT SECTION ~~~~~~~~~~~~~~~~~~*/

.sect-bg-purple-col2-alt .right {
    padding: 25px 100px 50px 0;
}


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

    /*~~~~~~~~~~~~~~~~~~ LEFT AND RIGHT SECTIONS less than 1201px ~~~~~~~~~~~~~~~~~~*/

    .sect-bg-purple-col2-alt .content > .title {
        font-size: 56px;
    }
}


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

    /*~~~~~~~~~~~~~~~~~~ LEFT AND RIGHT SECTIONS less than 1025px ~~~~~~~~~~~~~~~~~~*/

    .sect-bg-purple-col2-alt .left,
    .sect-bg-purple-col2-alt .right {
        display: block;
        padding: 0;
    }
	.sect-bg-purple-col2-alt .media {
		width: 100%;
	}
	.sect-bg-purple-col2-alt .content {
	    margin-top: 25px;
		width: 100%;
	}
	
	.sect-bg-purple-col2-alt .content > .title {
        font-size: 64px;
    }
	
	/*~~~~~~~~~~~~~~~~~~ LEFT SECTION less than 1025px ~~~~~~~~~~~~~~~~~~*/

	.sect-bg-purple-col2-alt .left {
		padding: 50px 25% 25px 75px;
	}

	/*~~~~~~~~~~~~~~~~~~ RIGHT SECTION less than 1025px ~~~~~~~~~~~~~~~~~~*/

	.sect-bg-purple-col2-alt .right {
		padding: 25px 75px 50px 25%;
	}
}

@media only screen and (max-width: 769px) {
	
	/*~~~~~~~~~~~~~~~~~~ LEFT SECTION less than 769px ~~~~~~~~~~~~~~~~~~*/

	.sect-bg-purple-col2-alt .left {
		padding: 50px 50px 25px;
	}

	/*~~~~~~~~~~~~~~~~~~ RIGHT SECTION less than 769px ~~~~~~~~~~~~~~~~~~*/

	.sect-bg-purple-col2-alt .right {
		padding: 25px 50px 50px;
	}
}

@media only screen and (max-width: 481px) {
	
	/*~~~~~~~~~~~~~~~~~~ LEFT SECTION less than 481px ~~~~~~~~~~~~~~~~~~*/

	.sect-bg-purple-col2-alt .left {
		padding: 50px 25px 25px;
	}

	/*~~~~~~~~~~~~~~~~~~ RIGHT SECTION less than 481px ~~~~~~~~~~~~~~~~~~*/

	.sect-bg-purple-col2-alt .right {
		padding: 25px 25px 50px;
	}
}

/***** sect-bg-media-footer-top *****/

.sect-bg-media-footer-top {
	align-items: center;
	aspect-ratio: 16/9 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	overflow: hidden;
	position: relative;
}
.sect-bg-media-footer-top .video-custom {
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
}

/*~~~~~~~~~~~~~~~~~~ TEXT CONTENT ~~~~~~~~~~~~~~~~~~*/

.sect-bg-media-footer-top .text {
	align-self: center;
	color: #ffffff;
	font-family: 'Spectral', sans-serif;
	font-size: 56px;
	font-weight: bold;
	line-height: 1.25;
	margin: 0;
	padding: 0 200px;
	text-align: center;
	z-index: 5;
}

/*~~~~~~~~~~~~~~~~~~ ROW OF ICONS ~~~~~~~~~~~~~~~~~~*/

.sect-bg-media-footer-top .icons {
	column-gap: 30px;
	display: flex;
	justify-content: center;
	position: absolute;
	bottom: 55px;
	z-index: 5;
}
.sect-bg-media-footer-top .icons > li {
	width: 50px;
}
.sect-bg-media-footer-top .icons > li img {
	width: 100%;
}

/*~~~~~~~~~~~~~~~~~~ CUSTOM CONTROLS ~~~~~~~~~~~~~~~~~~*/

.sect-bg-media-footer-top .video-custom-controls {
	background-color: transparent;
	border: none;
	color: #ffffff !important;
	cursor: pointer;
	font-size: 50px;
	position: absolute;
	bottom: 40px;
	right: 50px;
	z-index: 5;
}
.sect-bg-media-footer-top .video-custom-controls > .far {
	color: #ffffff !important;
}

.fa-play-circle.hide {
	display: none !important;
}
.fa-pause-circle.hide {
	display: none !important;
}

/*~~~~~~~~~~~~~~~~~~ CUSTOM PROGRESS BAR ~~~~~~~~~~~~~~~~~~*/

.sect-bg-media-footer-top .video-custom-progress {
	background-color: #41b6e6;
	border: none;
	border-radius: 0;
	height: 15px;
	position: absolute;
	bottom: 0;
	width: 100%;
}
.sect-bg-media-footer-top .video-custom-progress > .custom-progress-bar {
	background-color: #f2a900;
	display: block;
	height: 15px;
	width: 25%;
}

@media only screen and (max-width: 1201px) {}

@media only screen and (max-width: 1025px) {
	
	/*~~~~~~~~~~~~~~~~~~ TEXT CONTENT less than 1025px ~~~~~~~~~~~~~~~~~~*/

	.sect-bg-media-footer-top .text {
		font-size: 48px;
		padding: 0 100px;
	}
}

@media only screen and (max-width: 769px) {
	
	/*~~~~~~~~~~~~~~~~~~ TEXT CONTENT less than 769px ~~~~~~~~~~~~~~~~~~*/

	.sect-bg-media-footer-top .text {
		font-size: 36px;
		margin-bottom: 50px;
		padding: 0 50px;
	}
	
	/*~~~~~~~~~~~~~~~~~~ ROW OF ICONS less than 769px ~~~~~~~~~~~~~~~~~~*/

	.sect-bg-media-footer-top .icons {
		bottom: 40px;
	}
	.sect-bg-media-footer-top .icons > li {
		width: 40px;
	}
	
	/*~~~~~~~~~~~~~~~~~~ CUSTOM CONTROLS less than 769px ~~~~~~~~~~~~~~~~~~*/

	.sect-bg-media-footer-top .video-custom-controls {
		font-size: 40px;
		bottom: 25px;
	}
}

@media only screen and (max-width: 481px) {
	
	/*~~~~~~~~~~~~~~~~~~ TEXT CONTENT ~~~~~~~~~~~~~~~~~~*/

	.sect-bg-media-footer-top .text {
		font-size: 30px;
		padding: 0 25px;
	}

	/*~~~~~~~~~~~~~~~~~~ ROW OF ICONS less than 481px ~~~~~~~~~~~~~~~~~~*/

	.sect-bg-media-footer-top .icons {
		bottom: 38px;
	}
	.sect-bg-media-footer-top .icons > li {
		width: 36px;
	}
	
	/*~~~~~~~~~~~~~~~~~~ CUSTOM CONTROLS less than 481px ~~~~~~~~~~~~~~~~~~*/

	.sect-bg-media-footer-top .video-custom-controls {
		font-size: 36px;
		bottom: 25px;
		right: 25px;
	}
}

/***** sect-bg-blue-media-carousel.css *****/

/*~~~~~~~~~~~~~~~~~~ FROM BOOTSTRAP ~~~~~~~~~~~~~~~~~~*/

.multi-item-carousel {
	overflow: hidden;
}
.multi-item-carousel .carousel-inner {
	left: -85%;
	width: 270%;
}
.multi-item-carousel .item__third {
	float: left;
	position: relative;
	width: 33.33333333%;
}

/*~~~~~~~~~~~~~~~~~~ CAROUSEL LAYOUT ~~~~~~~~~~~~~~~~~~*/

.sect-bg-blue-media-carousel {
	background-color: #0c2340;
	color: #ffffff;
	padding: 50px 0;
	width: 100%;
}
.sect-bg-blue-media-carousel .carousel-item .item__third {
	column-gap: 40px;
	display: flex;	
	padding: 0 20px;
}
.sect-bg-blue-media-carousel .carousel-item.active .item__third:nth-child(1) .media {
	order: 1;
}
.sect-bg-blue-media-carousel .carousel-item .content,
.sect-bg-blue-media-carousel .carousel-item .media {
	height: 550px;
	position: relative;
}

/*~~~~~~~~~~~~~~~~~~ CONTENT SECTION ~~~~~~~~~~~~~~~~~~*/

.sect-bg-blue-media-carousel .carousel-item .content {
	flex: 1;
}
.sect-bg-blue-media-carousel .carousel-item .content > .title {
	color: #64b4e1;
	font-family: 'Barlow Condensed', sans-serif;
	font-size:	52px;
	font-weight: 600;
	text-transform: uppercase;
}
.sect-bg-blue-media-carousel .carousel-item .content > .sub-title {
	font-family: 'Spectral', sans-serif;
	font-size: 48px;
	font-weight: 700;
}
.sect-bg-blue-media-carousel .carousel-item .content > .text {
	font-family: 'Noto Sans', sans-serif;
	font-size: 18px;
}
.sect-bg-blue-media-carousel .carousel-item .controls {
	color: #64b4e1;
	font-family: 'Barlow Condensed', sans-serif;
	font-size:	32px;
	font-weight: 600;
	position: absolute;
	bottom: 0;
	text-transform: uppercase;
	width: 440px;
}
.sect-bg-blue-media-carousel .carousel-item .controls > a {
	color: #f2a900;
}

/*~~~~~~~~~~~~~~~~~~ MEDIA SECTION ~~~~~~~~~~~~~~~~~~*/

.sect-bg-blue-media-carousel .carousel-item .media {
	aspect-ratio: 1/1;
	margin-bottom: 40px;
}
.sect-bg-blue-media-carousel .carousel-item .media > img,
.sect-bg-blue-media-carousel .carousel-item .media > iframe {
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
}

/*~~~~~~~~~~~~~~~~~~ CAROUSEL INDICATORS SECTION ~~~~~~~~~~~~~~~~~~*/

.sect-bg-blue-media-carousel .carousel-indicators {
	border: none;
	color: #ffffff;
	cursor: pointer;
	height: 25px;
	margin: 0;
	padding: 0;
	bottom: -40px;
	width: 550px;
	z-index: 1;
}
.sect-bg-blue-media-carousel .carousel-indicators > li {
	align-items: center;
	background-color: transparent !important;
	border: 2px solid #ffffff;
	border-radius: 50%;
	display: flex;
	height: 25px !important;
	justify-content: center;
	margin: 0 8px !important;
	width: 25px !important;
}
.sect-bg-blue-media-carousel .carousel-indicators > li.active > span {
	background-color: #c6007e !important;
	border: none;
	border-radius: 50%;
	height: 15px;
	width: 15px;
}

@media only screen and (max-width: 1201px) {}

@media only screen and (max-width: 1025px) {
	
	/*~~~~~~~~~~~~~~~~~~ FROM BOOTSTRAP less than 1025px ~~~~~~~~~~~~~~~~~~*/
	
	.multi-item-carousel {
		overflow: visible;
	}
	
	.multi-item-carousel .carousel-inner {
		left: -70%;
		width: 240%;
	}
	
	/*~~~~~~~~~~~~~~~~~~ CAROUSEL LAYOUT less than 1025px ~~~~~~~~~~~~~~~~~~*/

	.sect-bg-blue-media-carousel .carousel-item {
		height: auto;
	}
	
	.sect-bg-blue-media-carousel .carousel-item .item__third {
		display: block;	
	}
	
	.sect-bg-blue-media-carousel .carousel-item .item__third .content {
		display: none;
	}
	.sect-bg-blue-media-carousel .carousel-item.active .item__third:nth-child(2) .content {
		display: block;
	}
	.sect-bg-blue-media-carousel .carousel-item .content,
	.sect-bg-blue-media-carousel .carousel-item .media {
		height: 100%;
		width: 100%;
	}


	/*~~~~~~~~~~~~~~~~~~ CONTENT SECTION less than 1025px ~~~~~~~~~~~~~~~~~~*/
	
	.sect-bg-blue-media-carousel .carousel-item .content {
		margin-top: 50px;
	}
	.sect-bg-blue-media-carousel .carousel-item .controls {
		margin-top: 20px;
		position: relative;
	}
	
	/*~~~~~~~~~~~~~~~~~~ MEDIA SECTION less than 1025px ~~~~~~~~~~~~~~~~~~*/
	
	.sect-bg-blue-media-carousel .carousel-item .media {
		aspect-ratio: 16/9;
	}

	/*~~~~~~~~~~~~~~~~~~ CAROUSEL INDICATORS less than 1025px ~~~~~~~~~~~~~~~~~~*/

	.sect-bg-blue-media-carousel .carousel-indicators {
		width: 100%;
	}
}

@media only screen and (max-width: 769px) {}

@media only screen and (max-width: 481px) {
	
	/*~~~~~~~~~~~~~~~~~~ FROM BOOTSTRAP less than 481px ~~~~~~~~~~~~~~~~~~*/
	
	.multi-item-carousel .carousel-inner {
		left: -85%;
		width: 270%;
	}
	
	
	/*~~~~~~~~~~~~~~~~~~ CAROUSEL LAYOUT less than 481px ~~~~~~~~~~~~~~~~~~*/

	.sect-bg-blue-media-carousel .carousel-item .item__third {
		padding: 0 10px;
	}
}