/* ==========================================================================
     Project:     SUSCC
     Date:        05/23/2022 - File created	
     Created by:  Third Wave Digital (www.thirdwavedigital.com)
========================================================================== */

/* ==========================================================================
     Typograpy
========================================================================== */

body {font-family: "Muli", sans-serif;line-height:1.6; font-size: .875rem; color:#212121;}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {font-family: "Libre Franklin", sans-serif; line-height: 1.1; font-weight:700; color: #24408F; margin-bottom: 1.5rem}
h1,.h1 {font-weight:800;}

/* ==========================================================================
     Main Layout
========================================================================== */ 

/* Header */
header { z-index:99; background: #24408F; width: 100%;border-bottom: 1.5px solid rgba(255,255,255,.2)}
     header .container-fluid {position:relative;}

     /* Header menus */
     .headermenu ul {margin: 0px; padding: 0px; list-style:none;}
     .headermenu li {display:inline-block}
     .headermenu a {text-decoration: none;display:block;}

     .headermenu .quicklinks {font-size: .75rem;}
     .headermenu .quicklinks li:not(:first-child) {margin-left: 25px}
     .headermenu .quicklinks li:nth-child(2) {margin-left: 5px}
     .headermenu .quicklinks li:last-child {margin-left: 10px}
     .headermenu .quicklinks a {color: #fff}
     .headermenu .quicklinks a:not(.btn):hover, .headermenu .quicklinks a:not(.btn):focus {text-decoration: underline;}
     .headermenu .quicklinks .btn-blue {position: relative; border-radius: 0px; height: 35px;line-height: 35px; padding: 0px 40px 0px 20px}
     .headermenu .quicklinks .btn-blue::after {content:""; background: url(/img/icon-yellow-arrow.svg) no-repeat top left; height: 15px; width: 20px; background-size:contain; position: absolute; right: 5px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);}
     .headermenu .quicklinks .btn-toggle-search {width: 35px; height: 35px; color: #fff;-webkit-text-stroke: 1px #212121; border-radius: 0px; padding: 2px 0px 0px 0px; }
     .headermenu .quicklinks .btn-toggle-search:hover, .headermenu .quicklinks .btn-toggle-search:focus {color: #FAD347;}
     
     .headermenu .mainmenu { font-size: .875rem;font-weight: bold;}
     .headermenu .mainmenu .fa-angle-down {opacity: .5; transition: transform 250ms ease; font-size: .75rem}
     .headermenu .mainmenu a[aria-expanded=true] .fa-angle-down {-ms-transform: rotate(-180deg); -webkit-transform: rotate(-180deg); transform: rotate(-180deg)}
     .headermenu .mainmenu > li {position: relative;height: 100%;text-align:center; line-height: 1.4} 
     .headermenu .mainmenu > li.show {display: inline-block !important}
     .headermenu .mainmenu > li.active > a {position: relative; }
     .headermenu .mainmenu > li.active > a::after {content: ""; position: absolute; height:2px;top: 60px;background: #FAD347; left:10px; right: 10px; margin:auto; }
     .headermenu .mainmenu > li > a {color: #fff;height: 100%;display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items:center;transition: color 250ms ease}
     .headermenu .mainmenu > li:hover > a, .headermenu .mainmenu > li > a:focus {color: #FAD347}
     
	/* Header menu dropdowns */
	.headermenu .mainmenu ul {text-align:left; z-index:3; text-transform: none; background: #fff;border-radius: 3px;  pointer-events:none; width: 200px;top:100%;position: absolute; left: 50%; margin-left: -100px;opacity: 0; visibility: hidden; transition: all 250ms ease;box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.125);}
          .headermenu .mainmenu ul::before {content:""; position: absolute; top: -4px; left: 50%; margin-left: -5px; width: 0px; height: 0px;border-left: 5px solid transparent;border-right: 5px solid transparent;border-bottom: 5px solid #fff;}
          .headermenu .mainmenu ul.active {opacity:1;top: calc(100% - 10px); pointer-events: all;visibility: visible;}
          .headermenu .mainmenu ul li {display:block}
          .headermenu .mainmenu ul a {color:#212121; padding: 10px; font-size: .75rem; line-height: 1.2; transition: background .25s ease;width: 100%}
          .headermenu .mainmenu ul a:hover, .headermenu .mainmenu ul a:focus {background: #f1f1f1}

          .headermenu .mainmenu li:last-child ul {right: 0px; left:auto; margin: 0px;}
          .headermenu .mainmenu li:last-child ul::before {left:auto; right: 30px;}

          .headermenu .mainmenu ul li:not(:last-child) {border-bottom: 1px solid rgba(0,0,0,.05)}
          .headermenu .mainmenu ul li:first-child a {border-radius: 3px 3px 0px 0px}
          .headermenu .mainmenu ul li:last-child a {border-radius: 0px 0px 3px 3px}
          .headermenu .mainmenu ul li:last-child {border-bottom:none;}
          
          header .hamburger-inner, header .hamburger-inner:after, header .hamburger-inner:before {background: #fff;}

 /* Offcanvas menu */
.offcanvasmenu {position:fixed; width: 100%; bottom: 0px; left: 0px; background: #fff; overflow-x:hidden; overflow-y:auto; z-index:-1;font-size: .875rem;-webkit-transform: scale(.75); -ms-transform: scale(.75); transform: scale(.75); transform-origin: top center; pointer-events: none; opacity: 0; visibility: hidden; transition: all 250ms ease}
     .offcanvasmenu .mainmenu {list-style:none; margin: 0px; padding:0px; background: #fff}
     .offcanvasmenu .mainmenu > li {border-bottom: 1px solid #e5e5e5; position: relative;text-transform: uppercase; font-weight: 700}
     .offcanvasmenu .mainmenu a:not(.btn) {height: 44px; color: #212121; display: block; padding: 0px 15px;text-decoration: none; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items:center;}
     .offcanvasmenu .mainmenu a:not(.btn):hover, .offcanvasmenu .mainmenu a:not(.btn):focus {background: rgba(0,0,0,.05); color:#212121; }
     .offcanvasmenu .mainmenu li a[aria-haspopup] {margin-right: 45px;}
     .offcanvasmenu .mainmenu li .fa-angle-right {margin-right: 10px}
     .offcanvasmenu .mainmenu li .fa-angle-down {font-size: 1rem; transition: transform 200ms ease-in-out}
     .offcanvasmenu .mainmenu li .fa-angle-down.rotate {-webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg)}
     .offcanvasmenu .mainmenu li ul {list-style:none; background: #f9f9f9; color: #212121;margin: 0;font-size:.8125rem; padding: 0px; text-transform:none;visibility: hidden; overflow:hidden; height: 0px; transition: all 500ms ease}
     .offcanvasmenu .mainmenu li ul li { font-weight: 400; margin-bottom: 0px;}
     .offcanvasmenu .mainmenu li ul a:not(.btn) {height:auto; min-height: 40px}

     .offcanvasmenu .mainmenu li.active a:hover, .offcanvasmenu .mainmenu li.active a:focus, .offcanvasmenu .mainmenu li.active a {background:#FAD347; color: #24408F;text-decoration:none;}
     .offcanvasmenu .mainmenu li.active li a {color: #212121;  white-space: normal; background:none}
     .offcanvasmenu .mainmenu li.active li a:hover, .offcanvasmenu .mainmenu li.active li a:focus {color: #212121; background: rgba(0,0,0,.05)}

     .offcanvasmenu .mainmenu li ul.active {visibility: visible;}

     .offcanvasmenu .mainmenu .btn-gradient {margin: 15px;width: calc(100% - 30px); padding: 10px}

     .offcanvasmenu .btn-toggle-dropdown {position: absolute; top: 3px; right:3px; width: 42px; height:42px;padding: 0px;color: #24408F; border-radius: 0px; border: none; background: none;border-left: 1px solid #e5e5e5;}
     .offcanvasmenu .btn-toggle-dropdown:hover, .offcanvasmenu .btn-toggle-dropdown:focus {}

     .offcanvasmenu .bg-grey { border-bottom: 3px solid #24408F; padding: 10px 15px;  display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items:center;}
     .offcanvasmenu form {position: relative; height: 35px;width: 100%}
     .offcanvasmenu form .btn {width: 30px; height: 30px; padding: 0px; position: absolute; top: 2px;right: 2px; border-radius: 0px;background:none;font-size: .813rem; padding: 0px;color: #24408F; }
     .offcanvasmenu form .btn:hover, .offcanvasmenu form .btn:focus {color: #24408F}
     .offcanvasmenu form .btn span {margin: 4px 0px -4px 0px}
     .offcanvasmenu form input {height: 33px; position: absolute; top: 0px; font-size: .875rem; left: 0px; width: 100%;  border: 1px solid #e2e2e2; padding: 0px 35px 0px 15px;border-radius: 5px;}
     .offcanvasmenu form input::-ms-clear {display:none}

     .offcanvasmenu .quicklinks {list-style:none; padding: 15px;}
     .offcanvasmenu .quicklinks li:not(:last-child) {margin-bottom: 10px}
     .offcanvasmenu .quicklinks li:nth-child(2) {margin-bottom: 15px}
     .offcanvasmenu .quicklinks .btn {border-radius: 0px; width: 100%}

     /* Webkit's scrollbar */
     .offcanvasmenu::-webkit-scrollbar {-webkit-appearance: none;width:5px;}
     .offcanvasmenu::-webkit-scrollbar-track-piece {margin: 15px 0px;}
     .offcanvasmenu::-webkit-scrollbar-thumb {border-radius: 4px;background-color: rgba(0,0,0,.3);}

     /* Offcanvas animation */
     .offcanvas-open .offcanvasmenu {pointer-events: all; opacity: 1; z-index: 3; visibility: visible; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1);}

/* Footer */
footer {color: #fff; font-size: .813rem}
     footer a {color: #FAD347;}
     footer a:hover {color: #fff;}
     footer .social a {color: #24408F; display:block; font-size: .8125rem;background: #fff;transition: background 250ms ease; border-radius: 50%;width: 30px;height: 30px;text-align: center;display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items:center; text-decoration: none; justify-content: center;}
     footer .bg-yellow, footer .bg-yellow a {color: #24408F;font-size: .75rem}

/* Search */
.search-wrapper {position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; background: rgba(18,32,71,.95);z-index:-1; opacity: 0; visibility: hidden; transition: opacity 250ms ease}
     .search-open body {overflow:hidden}
     .search-open .search-wrapper {visibility: visible; opacity: 1; z-index: 2}
     .search-wrapper .btn-close-search {position: absolute; top: 15px; right: 15px; padding: 0px; height: 40px; width: 40px;}
     .search-wrapper .btn-close-search::before { content: '';height: 40px;border-left: 2px solid #FAD347;position: absolute;-webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg);left: 18px;top: 0px;}
     .search-wrapper .btn-close-search::after { content: '';height: 40px;border-left: 2px solid #FAD347;position: absolute;-webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);left:18px;top: 0px}
     .search-wrapper form {position: relative; height: 150px;width: 100%; max-width: 600px;margin:auto}
	.search-wrapper form .btn {color: #24408F; width: 90px; height: 90px; padding: 0px; position: absolute; top: 60px;right: 0px; border-radius: 0px;background:none;font-size: 1.8rem;display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;flex-direction: row; align-items:center;justify-content: center;}
	.search-wrapper form .btn:hover, .search-wrapper form .btn:focus {color: #24408F}
     .search-wrapper form .btn span {-webkit-text-stroke: 2px #fff}
	.search-wrapper form input {height: 90px; border-radius: 3px; position: absolute; top: 60px; left: 0px; width: 100%;  border: none; padding: 10px 85px 10px 30px;font-size: 1.5rem}
	.search-wrapper form input::-ms-clear {display:none}

/* ==========================================================================
     Components
========================================================================== */ 

/* Grid */
.page-wrapper {overflow:hidden;}
.page-wrapper .container, .page-wrapper .container-fluid {padding-left: 30px; padding-right: 30px;}
.page-wrapper .container-fluid {max-width: 1000px}
.container-wide, .container-narrow { margin-left: auto; margin-right:auto}
.container-narrow {max-width: 600px;}
.container-wide {max-width: 1400px}
.page-wrapper .form-row>.col, .page-wrapper .form-row>[class*=col-] {padding-right: 7.5px;padding-left: 7.5px;}

/* Links */
a {color: #24408F;text-decoration: underline;}
a:hover { text-decoration: none;color: #24408F}
.page-wrapper a:focus, .page-wrapper input:focus, .page-wrapper select:focus, .page-wrapper button:focus-visible {outline: 5px auto #24408F;}
.page-wrapper button:focus {box-shadow:none}

/* Images */
img {max-width: 100%; height: auto}

/* Skip */
.skip {position:absolute;top:-1000px;left:15px;width:auto;height:auto;text-align:center;overflow:hidden;transition:.25s;background:#212121; width:auto;height:auto;overflow:visible;padding:10px;color:#fff;font-weight:700;font-size:.875rem;z-index:9999;text-decoration:underline}
     .skip:active,.skip:focus,.skip:hover{left:15px;top:15px;color: #fff; background:#212121}

/* Hamburgers */
.btn-hamburger {border-radius: 0px; height: 36px;margin:0;padding:5px;transition-timing-function:linear;transition-duration:.15s;transition-property:opacity,filter;text-transform:none;color:inherit;border:0;}
     .hamburger-box {position: relative;display: inline-block;width: 24px;height: 24px;}
     .hamburger-inner,.hamburger-inner:after,.hamburger-inner:before{position:absolute;width:24px;height:2px;transition-timing-function:ease;transition-duration:.15s;transition-property:transform;border-radius:4px;background-color:#212121}
     .hamburger-inner{top:50%;display:block;transition-timing-function:cubic-bezier(.55,.055,.675,.19);transition-duration:.22s;}
     .hamburger-inner:after,.hamburger-inner:before{display:block;content:"";}
     .hamburger-inner:before{transition:top .1s ease-in .25s,opacity .1s ease-in; top:-8px;}
     .hamburger-inner:after{transition:bottom .1s ease-in .25s,transform .22s cubic-bezier(.55,.055,.675,.19); bottom:-8px;}
     .btn-hamburger.active .hamburger-inner{transition-delay:.12s;transition-timing-function:cubic-bezier(.215,.61,.355,1);transform:rotate(-225deg)}
     .btn-hamburger.active .hamburger-inner:before{top:0;transition:top .1s ease,opacity .1s ease .12s;opacity:0}
     .btn-hamburger.active .hamburger-inner:after{bottom:0;transition:bottom .1s ease,transform .22s cubic-bezier(.215,.61,.355,1) .12s;transform:rotate(90deg)}

/* Animations - AOS */
[data-aos=fade-up] { transform:translate3d(0,50px,0)}
[data-aos=fade-down] { transform:translate3d(0,-25px,0)}

/* Images */
.img-fit {overflow:hidden;}
     .img-fit-overlay::before {z-index: 0; content:""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(0,0,0,.3);}
     .img-fit img {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit:cover;z-index:0}
     .img-fit p {margin: 0px;display:inline} /* CKeditor might have wrapped the image with a <p> tag */
     .img-fit-top-center img {object-position: top center; font-family: "object-fit: cover; object-position: top center;"}
     .img-fit-bottom-center img {object-position: bottom center; font-family: "object-fit: cover; object-position: bottom center;"}
     .img-fit-center-center img {object-position: center center; font-family: "object-fit: cover; object-position: center center;"}
     .img-fit-center-70 img {object-position: center 70%; font-family: "object-fit: cover; object-position: center 70%;"}
     .img-fit-right-center img {object-position: right center; font-family: "object-fit: cover; object-position: right center;"}

.img-aspectratio {position: relative;}
     .img-aspectratio-4x3 { padding-bottom: 75%;}
     .img-aspectratio-16x9 {padding-bottom: 56.25%}
     .img-aspectratio-22x15 {padding-bottom: 70%}
     .img-aspectratio-1x1 {padding-bottom: 100%}
     .img-aspectratio-5x7 {padding-bottom: 135.41%}
     .img-aspectratio-11x14 {padding-bottom: 127.27%}

.img-gradient {}
     .img-gradient::before {content:""; position: absolute; bottom: 0px; left: 0px; width: 100%;  height: 50%; background: linear-gradient(to bottom, rgba(18,32,71,0) 0%,rgba(18,32,71,0) 1%,rgba(18,32,71,1) 100%); }
     .img-gradient div {color: #fff; position: absolute; bottom: 20px; left: 15px; transition: all 250ms ease; text-align:center; width: calc(100% - 30px);margin-bottom: 0px;}
     .img-gradient:hover div, .img-gradient:focus div {color:#FAD347;}

/* Heros */
.hero-wrapper {position: relative;}
     .hero-wrapper .cms-slideshow {}
     .hero-wrapper .cms-slideshow .slick-track {height: 450px} /* Negates adaptiveHeight on cms slideshow plugin */
     .hero-wrapper .item::after {content:""; position: absolute;  height: 100%; }
     .hero-wrapper img {object-position: top center; font-family: "object-fit: cover; object-position: top center;"}
     .hero-wrapper .cms-slideshow .slick-dots {position: absolute; bottom: 10px;position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);}
     .hero-wrapper .cms-slideshow .slick-dots button, .hero-wrapper .cms-slideshow .slick-dots .slick-active button {background: #fff}
     .hero-wrapper .caption-wrapper h2 {margin-bottom: 1rem !important; border-left: 4px solid #FAD347; padding-left: 20px;font-weight:800; line-height:1}
     .hero-wrapper .caption-wrapper p {font-weight: 700;padding-left: 20px; font-size: .938rem}
     .hero-wrapper .caption-wrapper p:last-child {margin: 0px}
     .hero-wrapper .caption-wrapper .btn-primary {position: relative; background:none; border:none; color: #FAD347;padding:0px 35px 0px 0px;font-weight:700;font-size: .938rem}
     .hero-wrapper .caption-wrapper .btn-primary::after {content:""; background: url(/img/icon-yellow-arrow.svg) no-repeat top left; height: 17px; width: 20px; margin-top: -2px; background-size:contain; position: absolute; right: 5px;top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);}
     
/* Backgrounds */
.bg-yellow { background: #FAD347;}
.bg-yellow-campus {background: url(/img/bg-campus-01.jpg) center top no-repeat;position: relative;}
.bg-yellow-campus::before {z-index: 0; content:""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(250,211,71,.9);}
.bg-blue {background: #24408F}
.bg-blue-90 {background: rgba(36,64,143,.9)}
.bg-dark-blue {background: #122047}
.bg-blue-lines {background: url(/img/bg-lines.svg) #24408F; background-size:cover;}
.bg-dark-blue-lines {background: url(/img/bg-lines.svg) #122047; background-size:cover;}
.bg-grey {background: #F1F1F1}
.bg-logomark-top {position: relative; border-top: 2px solid #FAD347;}
     .bg-logomark-top::before {content:""; width: 30px; height: 30px; background: url(/img/suscc-logomark.png) center center no-repeat; background-size: contain; position: absolute; top: -15px; left: 50%; margin-left: -15px;}

/* Breadcrumbs */
.breadcrumb {color: #444; font-weight: 800;padding-top: 15px; padding-bottom: 10px;}
.breadcrumb a {text-decoration: none;}
.breadcrumb .active {color: #999}

/* Corners */
.rounded-20 {border-radius: 20px}
     .rounded-20 .card-img-top {border-top-left-radius: 20px; border-top-right-radius: 20px}

/* Borders */
.border-blue {border: 1.5px solid #24408F}

/* Cards */
.card .h6 {line-height:1.6;}

/* Indexes */
.z-index--1 {z-index: -1}
.z-index-0 {z-index:0}
.z-index-1 {z-index:1}

/* Submenu */
.submenu {transition: opacity 500ms ease;}
     .submenu.active {visibility: visible;opacity: 1; overflow:visible; }
     .submenu li {position: relative;}
     .submenu a {font-weight: 800; font-size: .75rem; display:block; border-bottom: 1px solid #ccc;padding: 10px; text-decoration:none; transition: background 200ms ease; color: #333; line-height: 1.3}
     .submenu a:hover, .submenu a:focus {color:#212121;background:rgba(0,0,0,.05)}
     .submenu li.active > a {color: #24408F; border-left: 3px solid #FAD347;}

     /* Submenu subs  */
	.submenu ul {font-weight: 400; list-style: none; margin: 0px; padding: 0px;text-transform: none; visibility: hidden;overflow:hidden; height: 0px; transition: opacity 300ms ease}
	.submenu ul.show {visibility: visible;opacity: 1; overflow:visible;height:auto}
     .submenu ul a {padding-left: 30px;font-weight:400}
     .submenu ul ul a {padding-left: 50px;}
	.submenu .has-ul > a:first-child {padding-right: 40px;}
	.submenu li ul li a:first-child { padding:7px 40px 7px 20px;}
	.submenu li ul li ul a:first-child { padding:7px 40px 7px 30px;}
	.submenu li ul li ul li ul a:first-child { padding:7px 40px 7px 40px;}
	
	/* Submenu dropdown toggles */
	.submenu .btn-toggle-dropdown {color: #999; width:34px; height: 34px; line-height: 1; font-size: .875rem; position: absolute; right: 0px; top: -1.5px; border-radius: 0px; background: none;}
     .submenu .btn-toggle-dropdown::before {content:""; width: 1px; left: 0px; height: 20px; background: #ccc; top: 50%; margin-top: -10px; position: absolute;}
     .submenu .btn-toggle-dropdown span {position: absolute; top: 50%; left: 50%;-webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); transition: transform 300ms ease}
	.submenu .btn-toggle-dropdown span.rotate {-webkit-transform: translate(-50%, -50%) rotate(-180deg); -ms-transform: translate(-50%, -50%) rotate(-180deg); transform: translate(-50%, -50%) rotate(-180deg)}
	.submenu .btn-toggle-dropdown:hover, .submenu .btn-toggle-dropdown:focus {}

     .btn-toggle-submenu.active {margin-bottom: 10px;}
     .btn-toggle-submenu span.ml-3 {position: relative;}
     .btn-toggle-submenu span.ml-3::after {content:""; width: 1px; left: -15px; height: 20px; background: #ccc; top: 50%; margin-top: -10px; position: absolute;}

/* Alerts */
.alert-wrapper {top: 0px; left: 0px; width: 100%; z-index:2;}
     .alert-wrapper .alert {text-align:center; background: #FAD347; color: #24408F; position: relative;width: 100%;font-size: 1.25rem; padding: 8px 0px 8px 0px; line-height: 1.2; margin: 0px; border-radius: 0px}
     .alert-wrapper .alert + .alert {border-top: 1px solid rgba(0,0,0,.15)}
     .alert-wrapper a {color: #24408F;}
     .alert-wrapper button {position: absolute; width: 25px; height: 25px; right: 15px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);padding: 0px; background:none; border:none; }
     .alert-wrapper button::before { content: '';height: 15px;border-left: 1.5px solid #24408F;position: absolute;-webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg);left: 11px;top: 3px;}
     .alert-wrapper button::after { content: '';height: 15px;border-left: 1.5px solid #24408F;position: absolute;-webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);left:11px;top: 3px}

/* Search Fields (Remove "x") */
input[type=search]::-ms-clear {  display: none; width : 0; height: 0; }
input[type=search]::-ms-reveal {  display: none; width : 0; height: 0; }
input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-results-button,input[type="search"]::-webkit-search-results-decoration { display: none; }

/* Masthead */
.masthead-wrapper .container {position: relative;}
     .masthead-wrapper .container::after {content:""; position: absolute; background: url(/img/sussc-logomark-s.svg) center center no-repeat; background-size: contain;}
     .masthead-wrapper-sm .container::after {width: 325px; height: 325px;top: -130px; right: 0px;  }
     .masthead-wrapper-lg .container::after {width: 900px; height: 900px;top: -100px; right: -150px;  }
     .masthead-wrapper .col-sm-7 p {margin: 0px;}

/* Modals */
.modal-backdrop {background-color: #122047}
.modal-backdrop.show {opacity: .95}

.custom-modal .modal-content {border: 2px solid #24408F}
     .custom-modal .modal-content ul:not(.cms-dropdown) a {color:#FAD347 }
     .custom-modal .modal-content li {margin-bottom: 5px;}
     .custom-modal .modal-content li span {color: #fff}
     .custom-modal .btn-close {color:#fff; position: absolute; top: 5px; right: 5px}
     .custom-modal .btn-close::before { content: '';height: 20px;border-left: 1.5px solid #fff;position: absolute;-webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg);left: 11px;top: 3px;}
     .custom-modal .btn-close::after { content: '';height: 20px;border-left: 1.5px solid #fff;position: absolute;-webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);left:11px;top: 3px}
     .custom-modal .btn-close:hover, .custom-modal .btn-close:focus {color: #FAD347}

/* Dropcaps */
.dropcap {font-family: 'Droid Serif',sans-serif; font-size: 40px;line-height: 1;color: #fff; background: #1c3f94; border: 4px solid #ffd200;padding: 12px 7px 12px 7px; margin: 0px 10px 0px 0px; float: left;}

/* ==========================================================================
     Templates
========================================================================== */ 

/* Home */
.audiencelinks-wrapper {z-index: 1; position: absolute; left: -5px;width: 180px}

.paths-wrapper {}
     .paths-wrapper select, .paths-wrapper .btn {height: 38px; padding-top: 0px; padding-bottom: 0px;}
     .paths-wrapper select {border: 2px solid #24408F; border-radius: 5px; color: #24408F; font-weight: 700;font-size: .875rem;}

.calendar-wrapper {}
     .calendar-wrapper .date {width: 50px; height: 50px; position: absolute; top: -30px; right: 20px}

.tabs-wrapper {position: relative;color: #fff}
     .tabs-wrapper .bg {width: 100%; height: 100%; top: 0px; left: 0px; position: absolute; z-index: -1; background-size:cover;background-position: center top}
     .tabs-wrapper .bg::before {content:""; height: 100%; top: 0px; left: 0px; position: absolute; z-index: 0; width: 50%; background: linear-gradient(to right, rgba(0,0,0,.6) 0%,rgba(0,0,0,.5) 50%,rgba(0,0,0,0) 100%);} 
     .tabs-wrapper .nav-tabs {border-bottom: 1px solid rgba(255,255,255,.3);}
     .tabs-wrapper .nav-item {width: 45px}
     .tabs-wrapper .nav-tabs .nav-link {text-decoration: none;border-radius: 0px; border:none; padding: 0px}
     .tabs-wrapper .nav-tabs .nav-link span {color: #24408F; font-size: 1.063rem; background: #fff; width: 45px; height: 45px; position: relative; z-index: 1; border-radius: 30px;display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items:center; justify-content: center;}
     .tabs-wrapper .nav-tabs .nav-link.active {background:none;border:none;border-radius:0px; position: relative;}
     .tabs-wrapper .nav-tabs .nav-link.active::before {background: #FAD347; content:""; position: absolute; left: -7px; width: calc(100% + 14px); top: -7px; height: 90px; z-index: 0}

/* Admissions */
.programs-wrapper {position: relative; z-index: 0}
     .admissions-tabs-nav a {line-height: 1.3;border: 1.5px solid #24408F;background: #fff; color: #24408F; transition: background ease 250ms}
     .admissions-tabs-nav a.active {background: #24408F;color: #fff}
     .admissions-tabs-nav a:hover, .admissions-tabs-nav a:focus {}
     .admissions-tabs-nav-scroll {overflow-x:auto; overflow-y: hidden;-webkit-overflow-scrolling: auto;}
     .admissions-tabs-nav-scroll::-webkit-scrollbar {-webkit-appearance: none;height: 4px}
     .admissions-tabs-nav-scroll::-webkit-scrollbar-track {margin: 0px;background: #ccc; border-radius: 4px;}
     .admissions-tabs-nav-scroll::-webkit-scrollbar-thumb {background: rgba(0,0,0,.4);border-radius: 4px;}
     .admissions-tabs-nav-scroll::-webkit-scrollbar-thumb:hover {background: rgba(0,0,0,.6);}

.students-wrapper {}
     .students-wrapper .btn-custom-modal {position: relative;}
     .students-wrapper .btn-custom-modal::after {content:"\f067"; font-size: .625rem; font-family: "Font Awesome 5 Free"; font-weight: 800; transition: all 250ms ease; position: absolute; top: 10px; right: 10px; background: #FAD347; width: 25px; height: 25px; border-radius: 50%; color: #24408F; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items:center; justify-content: center;}
     .students-wrapper .btn-custom-modal:hover::after, .students-wrapper .btn-custom-modal:focus::after {background:#122047; color:#ecc127 }

.quicklinks-wrapper {line-height:1.2}

/* Faculty / Staff Directory */
.facultystaff-directory {}
     .facultystaff-directory .dropdown-item.active, .facultystaff-directory .dropdown-item:active {background: #24408F; color: #fff}
     .facultystaff-directory input {border: 1px solid #dee2e6}
     .facultystaff-directory input::-webkit-input-placeholder {color:#212121}

/* ==========================================================================
     CMS Classes
========================================================================== */

/* Buttons */
.btn-yellow, .btn-blue, .btn-yellow-link, .btn-blue-border, form[name=frmSearch] .btn-primary {border:none; font-family: "Libre Franklin", sans-serif;font-size: .75rem; text-decoration: none; font-weight: 700; text-transform: uppercase; padding: 7.5px 35px; border-radius: 3px; margin: 0px}
     .btn-yellow {background: #FAD347; color: #24408F}
          .btn-yellow:hover, .btn-yellow:focus {background: #ecc127; color: #24408F}

     .btn-yellow-link {color: #FAD347; position: relative; padding: 0px 0px 0px 27px;font-size: 1rem}
          .btn-yellow-link::before {content:""; background: url(/img/icon-yellow-arrow.svg) no-repeat top left; height: 17px; width: 20px; background-size:contain; position: absolute; left: 0px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);}
          .btn-yellow-link:hover, .btn-yellow-link:focus {color: #fff}

     .btn-blue, form[name=frmSearch] .btn-primary {background:#24408F;color: #fff}
          .btn-blue:hover, .btn-blue:focus,form[name=frmSearch] .btn-primary:hover, form[name=frmSearch] .btn-primary:focus {background: #122047;color: #fff}

     .btn-blue-border {border: 1.5px solid #24408F;color: #24408F; background:none}
          .btn-blue-border:hover, .btn-blue-border:focus {border: 1.5px solid #122047;color: #122047; background:none}

     .btn-sm {font-size: .6875rem; padding: 5px 20px}
     
/* Lists */
.list-spaced {padding: 0px; list-style:none}
     .list-spaced li {margin-bottom: 8px}

.list-yellowdots {list-style:none;padding: 0px;}
     .list-yellowdots li {position: relative;padding: 0px 0px 0px 20px;}
     .list-yellowdots li::before {content:""; background: #FAD347; border-radius: 50%; position: absolute; top: 6px; left: 0px; border: 1.5px solid #24408F;width: 8px; height: 8px; }

/* Type */
.text-large {font-size: 115%}
.text-medium {font-size: 90%}
.text-xsmall {font-size: 60%}
.text-small,small, .small {font-size: 80%}
.text-yellow {color:#FAD347}
.text-blue {color: #24408F}
.text-dark {color: #212121 !important}
.h1-large {/* Defined responsinvely below */}
.line-top {position: relative; margin-top: 15px;}
.line-top::before {content:""; position: absolute; top: -15px; left: 0px; height: 3px; width: 50px; background: #FAD347}
.text-librefranklin {font-family: "Libre Franklin", sans-serif;font-weight: 700; }
 
/* ==========================================================================
     CMS Plugins
========================================================================== */

/* Accordions */
.cms-accordion {}
     .cms-accordion .card {background:none; border-radius: 0px; border: none; border-bottom: 2px solid rgba(165,163,162,0.25) !important;}
	.cms-accordion .card:first-child {border-top: 2px solid rgba(165,163,162,0.25);}
     .cms-accordion .card-header {transition: color 250ms ease;position: relative;border-radius: 0px; background:none;border:none; padding: 15px 50px 15px 0px!important; color: #111; font-weight: 700;}
     .cms-accordion .card-header:hover, .cms-accordion .card-header:focus {text-decoration:none}
     .cms-accordion .card-header::before {transition: transform 250ms ease; background: url(/img/icon-plus.svg) center center no-repeat;background-size: 100% 100%; width: 25px; height: 25px; content:""; position: absolute; right: 0px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);}
     .cms-accordion .card-header[aria-expanded=true] { color: #24408F; border-bottom: none}
     .cms-accordion .card-header[aria-expanded=true]::before {-webkit-transform: translateY(-50%) rotate(45deg); -ms-transform: translateY(-50%) rotate(45deg);transform: translateY(-50%) rotate(45deg); }
     .cms-accordion .card-body {padding: 0px 30px 30px 30px; margin-bottom: 20px;position: relative; margin-top: 20px; overflow:hidden /* This last property will grow this element with it's floated children */ }
     .cms-accordion .card-body::after {width: 4px; background: #24408F; content: ""; position: absolute; top: 0px; left: 0px; bottom: 30px; }
     .cms-accordion .card-body *:last-child {margin-bottom: 0px}
     .cms-accordion .collapsing {transition-duration: 500ms; transition-timing-function: ease-in-out;}

/* Tabs */
.cms-tabs {}
	.cms-tabs .nav {margin-bottom: 0px !important}
	.cms-tabs .nav p:hover {cursor: pointer}
	.cms-tabs .nav-pills .nav-link {background: #111; color: #fff; font-weight: bold;border-radius: 0px; border:none; padding: 5px 25px}
	.cms-tabs .nav-pills .nav-link.active, .cms-tabs.nav-pills .show>.nav-link {background: #f1f1f1;color: #111; }
	.cms-tabs .tab-content {background: #f1f1f1; padding: 1.5rem;}
	.cms-tabs .tab-content *:last-child {margin-bottom: 0px}

/* ==========================================================================
     Media Queries
========================================================================== */

/* Min Width */
@media (min-width: 0px) {	
     /* Header */
     body {padding-top: 60px}
     header { position: fixed; top: 0px; left: 0px; }
     header .container.d-flex {height: 60px}
     header .logo img, footer .logo img {width:  200px}
     .page-wrapper header .container-fluid {padding-left: 15px; padding-right: 15px;}

     /* Submenu */
     .submenu {visibility: hidden; opacity:0; overflow:hidden; height: 0px;}

     /* Alert */
     .alert-wrapper {position: fixed; }

     /* Heros */
     .hero-wrapper h2 {font-size: 1.875rem;}
     .hero-wrapper .item::after {width: 80%; background: linear-gradient(to right, rgba(0,0,0,.6) 0%,rgba(0,0,0,.5) 50%,rgba(0,0,0,0) 100%);left: 0px;}
     .hero-wrapper .caption-wrapper {left: 40px; right: 40px !important}

     /* Offcanvas */
     .offcanvasmenu {top: 60px}

     /* Home */
     .audiencelinks-wrapper {top: 20px;}
     .audiencelinks-wrapper .btn {font-size: .688rem}
     .paths-wrapper .bg-white h2 {width: 90px}
     .paths-wrapper .bg-white .btn {width: 100%}
     .paths-wrapper select {width: calc(100% - 90px);}
     .tabs-wrapper .nav-item {-webkit-transform: scale(.9); -ms-transform: scale(.9); transform: scale(.9); }
     .tabs-wrapper .nav-item:not(:last-child) {margin-right:5px}

     /* CMS */
     .h1-large {font-size: 2.5rem}

     /* Masthead */
     .masthead-wrapper h1 {font-size: 1.875rem}

     /* Admissions */
     .admissions-tabs-nav {padding-top: 20px;padding-bottom: 10px; margin-top: 65px}
     .admissions-tabs-nav a {width: 80px; height: 80px;font-size: .625rem}
     .admissions-tabs-nav img {width: 25px;}
     .admissions-tabs-nav li {margin: 0px 10px 10px 10px !important}
}

@media (min-width:400px) {
     /* Home */
     .tabs-wrapper .nav-item {-webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }
     .tabs-wrapper .nav-item:not(:last-child) {margin-right:30px}     
}

@media (max-width: 575px) {
     /* Faculty / Staff Directory */
     .facultystaff-directory table tbody td:first-of-type {background: #f1f1f1; border-bottom: 2px solid #dee2e6}
     .facultystaff-directory table .bt-content {padding-left: 15px;}
}

@media (min-width: 576px) {    
     /* Header */
     body {padding-top: 95px}
     header .bg-dark-blue {height: 35px}


     /* Offcanvas */
     .offcanvasmenu {top: 95px}

     /* Heros */
     .hero-wrapper h2 {font-size: 2.188rem;}
}

@media (min-width: 768px) {	
     /* Header */
     header .logo img, footer .logo img {width: 250px}
     .page-wrapper header .container-fluid, .page-wrapper .alert-wrapper .container-fluid {padding-left: 30px; padding-right: 30px;}

     /* Grid */
     .container-wide {max-width: 780px}
 
      /* Submenu */
      .submenu {visibility: visible; opacity:1;overflow:unset; height: auto;}

     /* Heros */
     .hero-wrapper h2 {font-size: 2.813rem;}
     .hero-wrapper .caption-wrapper {width: 55% !important}
     .hero-wrapper .item::after {width: 80%; background: linear-gradient(to left, rgba(0,0,0,.8) 0%,rgba(0,0,0,.5) 50%,rgba(0,0,0,0) 100%);right: 0px;left: auto}
     .hero-wrapper .caption-wrapper {left: auto; right: 50px !important}

     /* Home */
     .audiencelinks-wrapper {top: 100px;}
     .audiencelinks-wrapper .btn {font-size: .75rem}
     .paths-wrapper .bg-white h2, .paths-wrapper .bg-white .btn {width: auto}
     .paths-wrapper select {width: 190px}

     /* CMS */
     .h1-large {font-size: 3.75rem}

     /* Masthead */
     .masthead-wrapper h1 {font-size: 2.188rem}

     /* Admissions */
     .admissions-tabs-nav {padding-top: 80px; padding-bottom: 20px;margin-top: 0px}
     .admissions-tabs-nav a {width: 140px; height: 140px;font-size: .875rem}
     .admissions-tabs-nav img {width: 45px;}
     .admissions-tabs-nav li {margin: 0px 20px 20px 20px !important}
}

@media (min-width: 992px) {	
     /* Header */
     body {padding-top: 0px}
     header {height: auto; position: relative;}
     header .container.d-flex {height: 85px}
     header .logo img {width: 300px}
     header .container.d-flex {position: relative;}
     header .container.d-flex::before {content:""; height: 3px; width: 2000px; background:#24408F; position: absolute; bottom: -2px; right: -1931px;pointer-events:none}
     header .container.d-flex::after {content:"";background: url(/img/suscc-logomark.png) no-repeat; background-size: contain; mix-blend-mode: luminosity; opacity: .2; width: 50px; height: 40px; position: absolute; right: 25px; bottom: -20px;pointer-events:none}
     .headermenu .mainmenu > li > a {padding: 30px 25px;}

     .fixed-header body {padding-top: 115px}
     .fixed-header header {position:fixed; -webkit-animation: fixed-header 500ms ease-out; animation: fixed-header 500ms ease-out;}
     .fixed-header header .container.d-flex::before, .fixed-header header .container.d-flex::after {content:none}

     @-webkit-keyframes fixed-header {
          0% { transform: translateY(-170px); }
          100% { transform: translateY(0px); }
      }
      @keyframes fixed-header {
          0% { transform: translateY(-170px); }
          100% { transform: translateY(0px); }
      }

     /* Alert */
     .alert-wrapper {position: relative;}
     
     /* Heros */
     .hero-wrapper .caption-wrapper {width: 45% !important}

     /* Home */
     .paths-wrapper h2 {width: auto}
     .paths-wrapper select {width: 220px}
}

@media (min-width: 1200px) {
     /* Header */
     .headermenu .mainmenu > li > a {padding: 30px;}
}

@media (prefers-reduced-motion: reduce) {
     * { animation-duration: 0.01ms !important;animation-iteration-count: 1 !important;transition-duration: 0.01ms !important;scroll-behavior: auto !important;transition: none !important}
   }