@charset "UTF-8";
/* CSS Document
Client: Coe College
Company: Informatics, Inc
Author: Jeff S
Date: Mar 2018

red: #880011
gold: #d3902f
*/

/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/3647c9");
@font-face {font-family: 'BillyOhio';src: url('../fonts/3647C9_0_0.eot');src: url('../fonts/3647C9_0_0.eot?#iefix') format('embedded-opentype'),url('../fonts/3647C9_0_0.woff2') format('woff2'),url('../fonts/3647C9_0_0.woff') format('woff'),url('../fonts/3647C9_0_0.ttf') format('truetype');}
body {font-family: "Roboto", sans-serif; font-weight: 400; font-size: 1.6rem; line-height: 24px; background: #fff; color: #444;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
-moz-font-feature-settings: "liga" on;
}
:root {
--red: #880011;
--gold: #d3902f;	
--lightgold: #DAA252;
--headers: "Roboto", sans-serif;
--script: "BillyOhio", "Montserrat";
--condensed: "Montserrat", sans-serif;
}

/* TYPOGRAPHY */
h1, h1.h2, h2, .h2-like, h3, h4, h5 {font-family: "Montserrat", sans-serif; font-weight: 800; color: #880011; letter-spacing: -.5px;}
h1 {font-size: 4em; font-weight: 400; font-family: "BillyOhio", "Montserrat";}
h2, .h2-like {font-size: 1.6em;}
h3 {font-size: 1.4em; letter-spacing:normal;}
h4 {font-size: 1.2em; font-weight: 700;}
p, ul, ol {margin-bottom: 2em;}
p strong {color: #222;}
input:focus {box-shadow: 0 0 5px #d3902f; border-color: #880011;}

p { line-height: 1.5; }
h2.lead { font-family: unset;font-weight: 300; color: unset; letter-spacing: 0;}
p.lead, h2.lead {font-size: 1.5em; line-height: 1.5; position: relative; padding: 0 0 25px 0;}
/* AS (01/14/2022) - Updates for homepage slider */
p.lead:not(.homepage-lead):after, h2.lead:not(.homepage-lead):after {width: 50px; height: 5px; background: #d3902f; display: block; position: absolute; bottom: -2.5px; left: 0; content: "";}
img {max-width: 100%; height: auto;}
img + p {margin-top: 2em;}
.img-right {margin: 0 0 25px 0;}
.img-left {margin: 0 0 25px 0;}

hr {border: none; background: url(../img/hr-logo.png) center center no-repeat; margin: 20px 0; display: block; height: 50px; width: 100%; overflow: hidden;}
p a {text-decoration: underline;}
p.well {font-size: 0.87em; line-height: 1.5;}
.well ol, .well ul {font-size: 0.93em; line-height: 22px; padding: 10px 0 0 20px; margin-bottom: 1em;}
.well ol li, .well ul li {margin-bottom: 5px; padding-bottom: 5px; border-bottom: 1px dotted #ccc;}
blockquote, .quote {font-size: 1.5em; line-height: 1.25em; font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif; border-left: 5px solid #d3902f; padding: 10px 0 10px 15px;}

/* LINKS */
a {color: #880011; text-decoration: underline;}
a:hover {text-decoration: none;}
a:visited {opacity: .8;}
a.btn-theme, .btn-theme > a {display: inline-block; padding: 10px 20px; background: #DCDDDE; color: #880011; font-family: var(--headers); border-radius: 5px; font-size: .9em; border: 2px solid #880011; font-weight: 700; text-decoration: none;}
a.btn-theme:hover, .btn-theme > a:hover {background: #dcddde; color: #880011; text-decoration: none; border-color: #dcddde;}

/* Mobile First */
/* Nav */
.container {position: relative;}
#header {display: block; text-align: center; background: #fff; box-shadow: 0 5px 5px rgba(0,0,0,.05); position: fixed; top: 0; width: 100%; height: 110px; z-index: 500;}
.hdr-tools {text-align: center; background: #880011; padding: 5px;}
/* OLD CSS */
/* .hdr-tools .btn-theme {font-size: 1.1em; padding: 4px 4px; background: #c98638; box-shadow: 2px 2px 3px rgba(0,0,0,.2); text-transform: none;} */
/* NEW CSS */
.hdr-tools .btn-theme {font-size: 1.1em; padding: 9px 4px; background: #dcddde; box-shadow: 2px 2px 3px rgba(0,0,0,.2); text-transform: none; color:#880011 !important;}
.hdr-tools .btn-theme:hover {background: #DCDDDE; border-color: #880011;}
#logo {padding: 15px 0; display: block; float: left; width: 225px;}

#btn-menu {width: 40px; height: 40px; display: block; float: right; margin: 12px 0 0 0; padding: 7px; background: #880011;}
#btn-menu .icon-bar {display: block; width: 100%; height: 3px; background: #fff; margin: 4px 0;}
#btn-menu.btn-close .icon-bar:first-of-type {transform: rotate(45deg) translate(5px,5px);}
#btn-menu.btn-close .icon-bar:nth-of-type(2) {opacity: 0;}
#btn-menu.btn-close .icon-bar:nth-of-type(3) {transform: rotate(-45deg) translate(9px,-14px); transform-origin: right center;}

#menu {width: 100%; overflow: scroll; position: fixed; right: -100%; top: 110px; bottom:0; z-index: 500; box-shadow: inset 0 10px 10px -8px rgba(0,0,0,.1); background: #f3f3f3;}
#menu.open {right: 0;}
#menu ul {list-style: none; text-align: left;}
#menu ul a {display: block;}
.menu-content {display: none;}

#nav-main {padding: 25px; margin: 0;}
#nav-main a {text-decoration: none;}
#nav-main > li > a {font-family: "Montserrat", sans-serif; font-size: 1.1m; font-weight: 700;}
#nav-main ul li a {display: block; color: #444; font-size: 0.9em;}
#nav-main > .nav-path-selected > a {color: #880011; font-weight: bold;}

/* MOBILE EXPANDER MAIN NAV ONLY */
@media (max-width: 992px) {
#nav-main li {position: relative;}
#nav-main > li > a {padding: 15px; border-bottom: 1px solid #ccc; box-shadow: 0 1px 0 #fff; color: #333;}
#nav-main > li > a:hover {color: #880011;}
#nav-main li:last-of-type a {border: none; box-shadow: none;}
#nav-main li button {position: absolute; right: 0; top: 0; padding: 15px 20px; background: none; border: none;}
#nav-main li button:before {position: absolute; left: 0; top: 10px; bottom: 10px; width: 1px; background: #ccc; content: ""; opacity: .7;}
#nav-main li button.collapsed {transform: none; color: #222;}
#nav-main li button i {transform: rotate(45deg); color: #999;}
#nav-main li button.collapsed i {transform: none; color: #880011;}
#nav-main ul {padding: 0 0 0 25px; margin: 0; border: 0; border-bottom: 1px dotted #ccc;}
#nav-main ul li:first-of-type {padding-top: 10px;}
#nav-main ul li:last-of-type {padding-bottom: 15px;}
#nav-main ul a {padding: 5px; display: block; font-size: 0.93em; font-weight: 500; border: 0;}
#nav-main ul a:hover {padding: 5px 2px 5px 8px; color: #880011;}
}
.nav-path-selected > a {font-weight: bold; position: relative;}
#nav-mini {background: #ccc; border-top: 1px solid #aaa; overflow: hidden; padding: 25px 25px 50px 25px; margin: 0;}
#nav-mini li {display: block;}
#nav-mini > li > a {width: calc(50% - 10px); font-size: 0.90em; float: left; padding: 5px; text-align: center; background: #880011; color: #fff; margin: 5px; font-weight: 600; border-radius: 4px; text-decoration: none;}
#nav-mini form {display: block; position: relative; width: 100%; margin: 5px; float: left;}
#nav-mini form input {border: 1px solid #ccc; height: 40px; padding: 0 50px 0 0; text-indent: 10px; width: 100%;}
#nav-mini form button {position: absolute; right: 0; top: 0; height: 40px; width: 40px; background: none; padding: 0; border: 0; color: #880011;}

/* Skip Link */
#skip-link {position: absolute; width: 100%; opacity: 0; top: 110px; background: #fff; background: #880011; color: #fff; text-align: center; padding: 5px; text-decoration: underline; z-index: 150; left:-100%;}
#skip-link:focus, #skip-link:active {left: 0; opacity: 1;}

/* Coe Alert */
.coe-alert {position: fixed; bottom: 10px; left: 5%; width: 90%; background: #111; color: #fff; z-index: 75; box-shadow: 0 0 10px 10px rgba(0,0,0,.2); margin: 0;}
.coe-alert .fa {margin-right: 5px;}
.coe-alert .close {opacity: .5; padding: 10px; font-size: 2em; right: -30px;}
.coe-alert .close:hover {opacity: 1; color: #fff;}
.coe-alert p {margin: 0; font-size: 0.81em; font-weight: 600;}
.coe-alert p strong {text-transform: uppercase; color: #fff; font-family: var(--headers); font-weight: 800;}
.coe-alert p a {color: #c98638;}
.coe-alert p:before {content: "\f071";font-family: FontAwesome; color: #d6243b; margin: 0 5px 0 0;}
.coe-alert + #skip-link {top: 175px;}

#quick-links .modal-content {border-radius: 0; border-top: 5px solid #d3902f; padding: 5px 25px 25px 25px;}
#quick-links .close {position: absolute; right: 0; top: 0; padding: 20px; color: #333; line-height: 20px; font-size: 2.5em; opacity: .75;}
#quick-links .close i {font-size: 0.75em; display: block; font-style: normal;}
#quick-links ul {list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 15px;}
#quick-links ul * {-webkit-column-break-inside: avoid;column-break-inside: avoid;}
#quick-links a {display: block; font-size: 1em; padding: 10px 25px 10px 15px; color: #444; background: #f3f3f3;margin: 0 0 5px 5px;}
#quick-links a:hover {padding: 10px 20px 10px 20px; background: #f9f9f9; text-decoration: underline; color: #880011}

/* Homepage */
#hero {width: 100%; height: calc(100vh - 130px); min-height: 600px; position: relative; padding: 0; overflow: hidden; background: #880011;}
#hero-visual video, #hero-slider img {position: absolute; height: 100%; width: 100%; object-fit: cover; background-color: transparent; left: 0; top: 0;}
#hero-slider, #hero-slider div {height: 100%;}

#hero-text {position: absolute; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; text-align: center; padding: 50px; color: #fff; background: rgba(0,0,0,.1); left: 0; top: 0;}
#hero-text h1, #hero-text p.lead {font-size: 3.75em; line-height: 1.5; color: #fff; text-shadow: 3px 3px 0 #880011; margin-bottom: 10px;}
#hero-text p {margin: 15px 0;}
#hero-text .lead {margin: 15px auto; width: 100%; text-align: center; font-family: "BillyOhio", "Montserrat"; font-size: 0.8em;}
#hero-text .lead:after {display: none;}
#hero-text p {font-size: 1.12em; text-align: center;}
#hero-text p a {align-self: center;}
#hero-text .btn-theme a {align-self: center; background: #d3902f;}
#hero-text .btn-theme a:hover {background: #880011;}
#hero-text img:hover {transform: scale(1.05,1.05);}

#hero-text .visit-bell {background: url(../img/bkg-bell.png) center center no-repeat; background-size: contain; padding: 25px 20px; font-family: var(--headers); text-transform: uppercase; font-weight: 700; display: block; width: 125px; height: 120px; margin: 0 auto; font-family: var(--tall); font-size: 1.25em; position: relative;}
#hero-text .visit-bell i {font-size: 0.93em; margin: 0 5px 0 0; background: #d3902f; color: #fff; display: inline-block; width: 30px; height: 30px; border-radius: 50%; line-height: 30px; position: absolute; bottom: 15px; left: 50%; margin-left: -15px; padding-left: 3px;}
#hero-text .visit-bell:hover {text-decoration: none; color: #d3902f; transform: scale(1.1,1.1);}
#hero-text .visit-bell:hover i {background: #880011;}

.hero-message {display: none; position: relative; background: #880011; max-width: 400px; margin: 15px auto; text-align: left; padding: 15px;font-family: var(--headers); text-transform: uppercase; overflow: hidden; opacity: .9; box-shadow: 5px 5px 2px rgba(0,0,0,.3);}
.hero-message img {width: 150px; float: left; margin: 0 15px 0 0;}
.hero-message p {color: #fff; font-weight: bold; margin: 5px 0 10px 10px;}
.hero-message span {font-size: 0.75em; color: #d3902f;}
.hero-message:hover {opacity: 1; transform: scale(1.1,1.1); text-decoration: none;}

#hero .explore {position: absolute; bottom: -50px; left: 50%; margin-left: -50px; font-size: 0.75em; width: 100px; height: 100px; background: #fff; padding-top: 15px; color: #880011; border-radius: 50%; text-transform: uppercase; z-index: 50; display: block; text-align: center; text-decoration: none;}
#hero .explore:after {position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; background: #fff; border: 5px solid #d3902f; content: ""; border-radius: 50%; z-index: -1;-webkit-clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);}
#hero .explore i {display: block; font-size: 0.93em; position: relative; top: -3px;}

.main-content {margin-top: 110px;}
.main-content section {padding: 25px 0;}
.center-header {text-align: center; margin: 25px 0; position: relative;}
.center-header:after {left: 50%; margin-left: -25px;}

.stats-container:before {content: "Stats Container"; display: block; background: green; color: #fff; position: absolute; left: 0; top: -27px; font-size: 0.80em; padding: 2px 15px; text-transform: uppercase; display: none;}
.stat-row:before {content: "Stat Row"; display: block; background: #8bbd7c; color: #fff; position: absolute; left: 0; top: -3px; font-size: 0.80em; padding: 2px 15px; text-transform: uppercase; opacity: .6; display: none;}
.stats-container .slick-arrow {border: none; background: none; display: block; width: 25px; height: 50px;position: absolute; top: 50%; margin-top: -25px; text-indent: -999em; font-size: 1.9em; line-height: 50px; text-align: center;color: #880011;}
.stats-container .slick-prev {left: 0;}
.stats-container .slick-prev:before {content: "\f053";font-family: FontAwesome; position: absolute; left: 0; top: 0; display: block; width: 25px; height: 50px; text-indent: initial;}
.stats-container .slick-next {right: 0;}
.stats-container .slick-next:before {content: "\f054";font-family: FontAwesome; position: absolute; right: 0; top: 0; display: block; width: 25px; height: 50px; text-indent: initial;}
.stats-container .slick-arrow:hover {color: #d3902f;}
.stats-container .slick-dots {list-style: none; margin: 0; padding: 0; text-align: center;}
.stats-container .slick-dots li {margin: 0 3px; display: inline-block;}
.stats-container .slick-dots button {border: none; background: #ccc; display: block; width: 44px; height: 44px; border-radius: 50%;  text-indent: -999em; padding: 0;}
.stats-container .slick-dots .slick-active button {background: #d3902f;}

/* font-size:0; has been removed from .feature-stat as it was creating text invisible when sizes porvided in em -AS */
.feature-stat {padding: 15px; text-align: center;}
.feature-stat img {max-width: 75px; margin: 0 auto 15px auto; display: block;}
/* Commented out for ada compliance css chnages-AS */
/* .feature-stat .number {font-size: 0;} */

.feature-stat .number span {font-size: 4.25em; font-family: "Montserrat", sans-serif; font-weight: 800; letter-spacing: -2px; display: inline-block; color: #880011; text-shadow: 5px 5px 0 rgba(0,0,0,.1);}
.feature-stat .number .numscroller {line-height: 75px; margin: 0;}
.feature-stat .number .numscroller.large-number {font-size: 3em;}
.feature-stat .number .small {font-size: 1.6em; line-height: normal; letter-spacing: normal; margin: 0; display: block;}
.feature-stat .number .small:nth-of-type(1) {display: block;}
.feature-stat p {margin: 0; font-weight: 600; font-size: 1.1em; color: #666; display: block; padding: 5px;}
.feature-stat h2, .feature-stat h3 {font-size: 2em;}

.img-hover {position: relative;}
.img-hover img {max-width: 100%;}
.img-hover img:first-of-type {position: absolute; left: 0; top: 0;}
.img-hover img:first-of-type {display: none;}

.coe-grid .item {position: relative; display: block; margin: 0 0 25px 0;}
.coe-grid .item a {text-decoration: none; display: block; height: 100%; width: 100%;}
.coe-grid .item h3 {position: absolute; left: 0; top :0; display: inline-block; background: #880011; color: #fff; padding: 10px 15px; margin: 0; font-size: 1em; z-index: 5; overflow: hidden;}
.coe-grid .text {background: #666; padding: 15px; color: #fff; overflow: hidden; min-height: 105px;}
.coe-grid .text p {margin: 0; color: #fff; text-align: center; position: relative; z-index: 5; text-transform: uppercase; letter-spacing: 2px; font-weight: 700;}
.coe-grid .text p strong {color: #fff; font-size: 1.5em; font-weight: 300; display: block; font-family: var(--headers);}

#main-content .success-story {padding: 0;}
.success-story .text {padding: 25px;}
.success-story .text h2 {color: #e5a84f; font-size: 1.2em; letter-spacing: .5px; text-transform: uppercase; margin: 0; display: inline-block;}
.success-story .text h3 {font-size: 1.75em; margin: 5px 0 15px 0;}
.success-story .text .btn-theme {background: #dcddde; color: #880011 !important; border-color: #dcddde; margin: 0 10px 10px 0; border-radius: 4px;}
.success-story .text .btn-theme:after {content: "\f054";font-family: FontAwesome; margin-left: 10px; position: relative; left: 0;}
.success-story .text .btn-theme:hover {background: #DCDDDE; color: #880011 !important;}
.success-story .text .btn-theme:hover:after {left: 5px;}
.success-story.small-photo img {margin: 0 auto; display: block; max-width: 100%;}

.cta-full {position: relative; z-index: 5; box-shadow: 10px 10px 10px rgba(0,0,0,.1); overflow: hidden; margin: 0 0 25px 0;}
.cta-full a {display: block; padding: 0; height: 100%;}
.cta-full .text {width: 100%; padding: 30px; background: url(../img/bkg-stripes.png) left bottom repeat-x #880011; border-left: 10px solid #d3902f;}
.cta-full .lead {color: #fff; font-size: 1.6em; padding: 0 0 10px 0; margin: 0 0 10px 0;}
.cta-full p {font-size: 1em; color: #fff; line-height: 1.5;}
.cta-full span {color: #d3902f; text-transform: uppercase; font-weight: 700; font-family: var(--headers); font-size: 0.87em; padding: 0 25px 0 0; position: relative; opacity: 1; display: none; font-size: 1.2em;}
.cta-full span:after {content: "\f054";font-family: FontAwesome; margin: 0 0 0 15px; color: #df9e40;}
.cta-full a span {display: block;}

.cta-list {display: flex; flex-direction: column; justify-content: space-between; height: 350px;}
.cta-list a {display: block; padding: 15px 15px 15px 25px; background: #880011; color: #fff; font-size: 1.10em; border-radius: 4px; position: relative; z-index: 5; overflow: hidden; box-shadow: 4px 4px 4px rgba(0,0,0,.1);}
.cta-list a img {max-width: 25px; margin: 0 10px 0 0;}
.cta-list a:before {position: absolute; right: 98%; top: 0; width: 100%; height: 100%; background: #d3902f; display: block; content: ""; z-index: -1;}

.cta-list a:after {content: "\f054";font-family: FontAwesome; float: right; position: relative; right: 0;}
.cta-list a:hover {background: #880011; color: #fff; text-decoration: none; padding: 15px 15px 15px 30px;}
.cta-list a:hover:before {right: 96%;}
.cta-list a:focus:before {right: 0;}
.cta-list a:hover:after {right: -5px;}

/* Footer */
.footer {background: url(../img/bkg-ftr.jpg) center center #333; color: #fff; margin: 0; padding: 20px 0 0 0;}
.footer h3 {color: #d3902f;}
.footer img {margin: 25px 0;}
.footer ul {list-style: none; padding: 0; margin: 0;}
.footer ul li {margin-bottom: 5px;}
/* OLD CSS */
/* .footer ul a {display: block; padding: 4px 3px 4px 0; color: #fff; font-size: 0.90em; line-height: 20px;} */
/* NEW CSS */
.footer ul a {display: block; padding: 12px 3px 12px 0; color: #fff; font-size: 0.90em; line-height: 20px;}
.footer a {color: #fff; text-decoration: none;}
.footer ul a:hover {color: #daa540; padding: 4px 0 4px 3px; text-decoration: underline;}
.footer .ftr-cta a {display: block; padding: 13px; background: url(../img/bkg-ftr-btn.png) bottom right no-repeat #880011; margin: 0 10px 10px 0; text-align: center; border: 2px solid #880011; border-radius: 4px; text-transform: uppercase; font-weight: 700; font-size: 1.1em; color:#fff ;}
.footer .ftr-cta a:hover {color: #880011; background: #fff; text-decoration: none; padding: 13px; border: 2px solid #880011; border-radius: 4px;}
.footer .col {padding: 15px 25px;}

.contact {text-align: center; background: #880011; padding: 25px; margin: 30px 0 0 0;}
.contact a {text-decoration: underline;}
.contact .social {margin: 20px 0 40px 0; position: relative; z-index: 5; display: flex; justify-content: center; list-style: none;}
.contact .social:before {position: absolute; left: 45%; top: 30px; width: 350px; height: 2px; background: var(--lightgold); content: ""; display: block; margin-left: -100px; z-index: -1;}
.contact .social li {margin: 0 10px;}
.contact .social a {color: #880011; font-size: 2em; width: 60px; height: 60px; display: flex; flex-direction: column; justify-content: center; background: #d3902f; float: left; padding: 0; border-radius: 50%; border: 5px solid #880011; text-decoration: none;}
.contact .social a:hover {color: #FFFFFF; padding: 0; text-decoration: none;}
.contact p {color: #f4d1af; font-size: 1em; margin: 0;}
.contact p a {color: #f4d1af;}
.contact p a:hover {color: #fff; padding: 0;}

.contact .copy {color: #fff; font-size: 0.8em; margin: 10px 0 0 0; opacity: .8;}
.contact .copy a {color: #fff;}
.contact .copy a:hover {padding: 0; color: #fff; text-decoration: underline;}
.contact .copy span {margin: 0 10px;}

.contact {padding: 25px 0 50px 0;}
.contact p {font-size: 1.12em;}

/* Page Header */
.page-hdr {margin: 110px 0 0 0; background: url(../img/hdr-bell.jpg) #444; background-size: cover; background-position: center; padding: 80px 0 50px 0; text-align: center; overflow: hidden; position: relative; width: 100%;}
.page-hdr img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}
.page-hdr h1 {margin: 0; color: #fff; padding: 0; font-family: "Montserrat", sans-serif; font-size: 2em; text-transform: uppercase; font-weight: 800; text-shadow: 2px 2px 3px rgba(0,0,0,.3);}
.page-hdr .bread-wrap {background: rgba(0,0,0,.75); padding: 5px; position: absolute; top: 0; width: 100%; z-index: 50;}
.page-hdr .breadcrumb {background: none; padding: 0; margin: 0;}
.page-hdr .breadcrumb a, .page-hdr .breadcrumb li {color: #fff; font-size: 0.8em;}

/* Content */
.col-alpha, .col-beta {padding: 15px;}
aside h3 {text-transform: uppercase; font-size: 0.9em; margin: 50px 0 25px 0; padding: 0 0; color: #a16b2c; position: relative; z-index: 5; 
text-shadow:-3px -3px 0 #fff,  3px -3px 0 #fff,-3px 3px 0 #fff,3px 3px 0 #fff; display: block; width: 100%; overflow: hidden;}
aside h3:before {position: absolute; left: 0; top: 7px; width: 100%; height: 1px; background: #ddd; content: ""; z-index: -1;}
aside h3:first-of-type {margin-top: 0;}
aside blockquote {margin-top: 25px;}

#sec-nav {box-shadow: 5px 5px 15px rgba(0,0,0,.035); border-top: 5px solid #d3902f;}
#sec-nav ul {list-style: none; padding: 0; background: #fefefe; border: 1px dotted #ccc;}
#sec-nav a {color: #444; font-weight: 600; border-bottom: 1px dotted #ccc; text-decoration: none;}
#sec-nav > ul > li > a {display: block; padding: 15px 10px 15px 15px; font-size: 1em; }
#sec-nav > ul > li > a:hover {text-decoration: underline; color: #880011; background: #fff; padding: 15px 5px 15px 20px;}
#sec-nav ul li {position: relative;}

#sec-nav ul li button {position: absolute; right: 0; top: 0; padding: 15px 16px; background: #fff; border: 0; border: 1px dotted #ccc; border-top: none; border-right: none; opacity: .8;}
#sec-nav ul li button.collapsed {transform: none; color: #222; background: #f9f9f9;}
#sec-nav ul li button i {transform: rotate(180deg); color: #880011;}
#sec-nav ul li button.collapsed i {transform: none; color: #784C19;}
#sec-nav ul li button:hover {background: #fff; opacity: 1;}
#sec-nav ul li button:hover i {color: #880011;}

#sec-nav ul ul {padding: 0 0 0 20px; border: 0; border-bottom: 1px dotted #ccc;}
#sec-nav ul ul li:first-of-type {padding-top: 10px;}
#sec-nav ul ul li:last-of-type {padding-bottom: 15px;}
#sec-nav ul ul a {padding: 5px; display: block; font-size: 0.9em; font-weight: 500; border: 0;}
#sec-nav ul ul a:hover {padding: 5px 2px 5px 8px; color: #880011;}

#sec-nav ul ul li:first-of-type button {top: 10px;}
#sec-nav ul ul li button.collapsed {background: none;}
#sec-nav ul ul li button.collapsed i {color: #999;}
#sec-nav ul ul li button.collapsed:hover {background: #f9f9f9;}
#sec-nav ul ul li button {position: absolute; right: 0; top: 0; padding: 6px 16px; background: none; border: 0; border: none; opacity: .8;}
#sec-nav ul ul ul {list-style: disc; padding-left: 25px; border: none;}
#sec-nav ul ul ul a {padding: 2px 5px 2px 0; font-size: 0.9em;}
#sec-nav ul ul ul a:hover {padding: 2px 0px 2px 5px;}

#sec-nav ul ul ul ul {padding: 0 0 0 20px; position: relative; left: -13px; list-style: none; border-left: 1px solid #ccc;}
#sec-nav ul ul ul ul a {padding: 5px 5px 5px 0; line-height: 18px;}
#sec-nav ul ul ul ul a:hover {padding: 5px 0 5px 5px;}
#sec-nav ul ul ul li button {padding: 2px 16px;}

#sec-nav .nav-path-selected > a, #nav-main .menu-drop .nav-path-selected > a {font-weight: bold; position: relative; color: #880011;}
#sec-nav .nav-path-selected > a:before {display: none;}
.non-expand-nav #sec-nav ul li button {display: none;}

/* Landing */
#landing {background: none; position: relative; overflow: visible; padding: 0;}
#landing img {position: relative; height: auto; width: 100%;}
#landing h1 {position: relative; z-index: 50; color: #880011; text-shadow: 3px 3px 0 #FFFFFF; margin: 15px 0 0 0; font-family: "BillyOhio", "Montserrat"; text-transform: none; font-weight: 400; font-size: 3.9em;}
#landing #dots, #hero #dots {display: none;}
#landing .slider {margin-bottom: 25px;}
.main-content .feature-content {overflow: hidden; position: relative; padding: 0;}
.feature-content .text {padding: 25px; background: #f2f2f2; width: 80%; margin: -10% 0 10% 10%; position: relative; z-index: 5;}
.feature-content h2 {color: #c98638; font-size: 1.2em; text-transform: uppercase; margin: 0; display: inline-block;}

/* Department */
#department {background: none; position: relative; overflow: visible; padding: 0;}
#department img {position: relative;}
#department h1 {position: relative; z-index: 50; color: #880011; text-shadow: 3px 3px 0 #FFFFFF; margin: 15px 0 0 0; font-family: "BillyOhio", "Montserrat"; text-transform: none; font-weight: 400; font-size: 3.9em;}
.main-content .department-main {padding: 0 10px;}
.department-main .text {padding: 0 0;}
.department-main .youtubeBlock, .department-main img, .department-main .col-md-5 > div {box-shadow: 3px 3px 0 #fff, 7px 7px 0 #d3902f; margin-bottom: 25px;}
.department-main .text h2 {}
.department-main .text .lead {font-size: 1.31em;}

/* Directory */
.directory-search-class {display: flex; background: #eee; margin: 0 0 40px 0; padding: 15px; border-top: 5px solid #880011;}
.directory-search-class label {font-family: var(--headers); color: #333; text-transform: uppercase; font-size: 0.9em;}
.directory-search-class .form-control {height: auto; padding: 10px; border: 1px solid #ccc;}
.directory-search-class .alpha-list {width: 100%; float: left; text-align: center; border-top: 1px solid rgba(0,0,0,.15); padding-top: 10px; margin-top: 15px;}
.directory-search-class .alpha-list a {color: rgba(0,0,0,.75); font-size: 1em;}
.directory-search-class .alpha-list a:hover {background: rgba(0,0,0,.1); text-decoration: none;}
.directory-search-class .btn-theme {display: block; padding: 7px 15px; margin: 0; overflow: hidden; text-align: center; font-size: 1em; width: 48%; float: left;}
.directory-search-class .search-reset {margin-left: 4%; background: #595959; border-color: #525252;}
.directory-search-class .form-control {border-radius: 0; background: #fff; border: 1px solid #aaa}
.directory-search-class  form .form-control:focus {background: #fff;}

.directory-list header {border-top: 1px solid #ccc; overflow: hidden; font-size: 0.9em; margin: 0 0 25px 0;}
.directory-list header p {margin: 0; padding: 5px; float: left; font-size: 0.9em;}
.directory-list header ul {list-style: none; padding: 0; margin: 0; float: left;}
.directory-list header ul li {float: left;}
.directory-list header a {display: block; padding: 5px;}
.directory-list header a:hover {cursor: pointer; background: #f9f9f9;}
.directory-list header .active-filters a:before {content: "\f00d";font-family: FontAwesome; margin-right: 5px;}
.directory-list .item {padding: 25px; background: #f4f4f4; margin: 0 0 25px 0; max-width: 300px;}
.directory-list .item h2 {font-size: 1.12em; margin: 20px 0 5px 0; text-align: center;}
.directory-list .item p {margin: 0 0 8px 0; font-size: 0.9em; line-height: 1.1;}
.directory-list .item p.title {font-weight: bold; font-size: 0.9em; text-align: center; border-bottom: 1px dotted #ccc; padding: 0 0 20px 0; margin: 0 0 10px 0; line-height: 1.5; color: #555;}
.directory-list .item .text {padding: 0 20px;}
.directory-list .phone:before {content: "\f10b";font-family: FontAwesome; width: 15px; margin-right: 4px; font-size: 1.25em; display: inline-block; vertical-align: middle;}
.directory-list .email:before {content: "\f0e0";font-family: FontAwesome; width: 15px; margin-right: 4px; display: inline-block; font-size:  0.7em;vertical-align: middle;}
.directory-list .office:before {content: "\f1ad";font-family: FontAwesome; width: 15px; margin-right: 4px; display: inline-block;vertical-align: middle;}

ul.fun-list {list-style: none; padding: 0;}
ul.fun-list li {padding: 8px 10px; border-bottom: 1px dotted #ccc; font-size: 0.9em;}
ul.fun-list li:before {content: "\f054";font-family: FontAwesome; margin: 0 5px 0 0; font-size: 0.75em; float: left; color: #880011;}
ul.fun-list a {display: block; padding: 0 5px 0 0;}
ul.fun-list a:hover {color: #333; text-decoration: underline;}

span.fun-list {display: block; padding: 8px 10px; border-bottom: 1px dotted #ccc; font-size: 0.9em; position: relative; background: #fff; left: -40px;}
span.fun-list a {display: block;}
span.fun-list:before {content: "\f054";font-family: FontAwesome; margin: 0 5px 0 0; font-size: 0.75em; color: #880011;}
span.fun-list:hover {color: #333; padding: 8px 5px 8px 15px; text-decoration: none; background: #f9f9f9;}

/* Calendar */
.coe-cal header {border-top: 1px dotted #ccc; padding: 25px 0; margin: 0 0 15px 0;}
.coe-cal header h2 {margin: 0;}
.coe-cal header ul {list-style: none; padding: 0; margin: 0;}
.coe-cal header li {display: inline-block;}
.coe-cal header a {display: block; padding: 5px; font-size: 0.9em; color: #444;}
.coe-cal header a:hover {cursor: pointer;}
.coe-cal header a span {display: inline-block; width: 10px; height: 10px; content :""; margin: 0 5px 0 0;}

.academics {background: #700602;}
.admission {background: #d3902f;}
.alumni {background: #376a7b;}
.arts {background: #665d55;}
.faculty {background: #78a7ae;}
.athletics {background: #880011;}
.warmgray {background: #665d55;}

.coe-cal .item {background: #f9f9f9; position: relative; padding: 15px; margin: 0 0 15px 0; display: block; overflow: hidden; text-decoration: none;}
.coe-cal .item.featured {border: 3px solid #880011; box-shadow: 5px 5px 10px rgba(0,0,0,.1);}
.coe-cal .item.featured h3:before {background: #880011; color: #fff; display: inline-block; content: "Featured"; text-transform: uppercase; font-size: 0.9em; padding: 6px 8px 4px 8px; border-radius: 4px; margin: 0 10px 0 0; position: relative; top: -4px;}
.coe-cal .item img {width: 100%;}
.coe-cal .item h3 {font-size: 1.5em; font-family: "Roboto";}
.coe-cal .item p {margin: 0; font-size: 0.87em; line-height: 1.5; margin-bottom: 5px; color: #555; position: relative; padding: 0 0 0 25px;}
.coe-cal .item p:before {position: absolute; left: 0; top: 50%; margin-top: -10px;}
.coe-cal .item p.when:before {content: "\f017";font-family: FontAwesome; margin-right: 5px; width: 20px; display: inline-block; text-align: center; color: #880011;} 
.coe-cal .item p.event-date:before {content: "\f274";font-family: FontAwesome; margin-right: 5px; width: 20px; display: inline-block; text-align: center; color: #880011;} 
.coe-cal .item p.where:before {content: "\f041";font-family: FontAwesome; margin-right: 5px; width: 20px; display: inline-block; text-align: center; color: #880011;} 
.coe-cal .item p.department:before {content: "\f19d";font-family: FontAwesome; margin-right: 5px; width: 20px; display: inline-block; text-align: center; color: #880011;} 
.coe-cal .item p.cost:before {content: "\f155";font-family: FontAwesome; margin-right: 5px; width: 20px; display: inline-block; text-align: center; color: #880011;} 

.coe-cal .item p.desc {margin-top: 10px; padding-top: 10px; border-top: 1px dotted #ccc;}
.coe-cal .item .date {position: absolute; left: 0; top: 0; color: #fff; font-family: var(--headers); text-align: center; padding: 10px; font-size: 0.75em; letter-spacing: 2px; text-transform: uppercase; font-weight: 400; background:#564F48 !important;}
.coe-cal .item .date span {display: block; font-size: 1.6em; position: relative; top: -3px;}
.coe-cal .item:hover {text-decoration: none;}
.coe-cal .item:hover h3 {text-decoration: underline;}
.coe-cal .item:hover img {transform: scale(1.1,1.1);}
.coe-cal aside form {position: relative;}
.coe-cal aside form input {width: 100%; border: 1px solid #ccc; padding: 10px; border-radius: 4px;}
.coe-cal aside form input:focus {box-shadow: 0 0 5px #d3902f; border-color: #880011;}
.coe-cal aside form button {background: none; border: none; color: #880011; padding: 12px;}
.coe-cal aside form input#filter {border: none;}

/* Calendar Search */
#cal-search form {background: #f9f9f9; border: 1px solid #eee; padding: 15px;}
#cal-search form h3 {text-shadow: -3px -3px 0 #f9f9f9, 3px -3px 0 #fff,-3px 3px 0 #f9f9f9,3px 3px 0 #f9f9f9; margin: 20px 0 10px 0;}
#cal-search .btn-theme.btn-cal-expand {display: block; text-transform: none; font-size: 1em; border-radius: 0; font-weight: bold; width: 100%; padding: 10px; background: #880011; color: #fff; margin-top: 10px; box-shadow: 5px 5px 5px rgba(0,0,0,.1);}
#cal-search .btn-theme:hover, #cal-search .btn-theme:focus, #cal-search .btn-theme:active {background: #880011; color: #fff;}
#cal-search .calendar-view {display: none;}
#cal-search .form-control {font-size: 1em;}

#cal-search .fun-list li {margin: 0; padding: 0;}
#cal-search .fun-list li::before {margin-top: 5px;}
#cal-search .fun-list a {padding: 5px 10px 5px 10px; font-size: 0.8em;}
#cal-search .fun-list a:hover {padding: 5px 5px 5px 15px;}
#cal-search .fun-list li:last-of-type a {border-bottom: none;}

#cal-search .btn-link {color: #880011; text-decoration: underline;}
#cal-search .btn-link:hover, #cal-search .btn-link:focus {background: #eee;}
.cal-detail-sidebar .cal-detail-list {list-style: none; padding: 0; margin: 0; display: block;}
.cal-detail-sidebar .cal-detail-list li {display: block; padding: 8px 0px 8px 35px; font-size: 1.12em; position: relative;}
.cal-detail-sidebar .cal-detail-list li span {text-align: center; color: #880011; margin: 0 5px 0 0; position: absolute; left: 0; top: 50%; margin-top: -10px; font-size: 1em; width: 30px; text-align: center;}
.cal-direction-link {}
.cal-direction-link span {display: block; padding: 7px 20px; background: #880011; color: #fff; font-family: var(--headers); border-radius: 5px; font-size: .9em; border: 2px solid #880011; font-weight: 700; margin: 10px 0 0 0; text-align: center;}

.cal-detail-sidebar .btn-default {background: #880011; color: #fff; padding: 10px; font-size: 1em; font-weight: bold; border: none;}
.cal-detail-sidebar .ui-widget-content {box-shadow: 5px 5px 15px rgba(0,0,0,.3); border: 2px solid #880011;}

#cal-search .calendar-view .ui-widget-content {box-shadow: none; border: 1px solid #eee;}
.ui-datepicker-inline {width: 100%;}
.ui-datepicker-inline td {padding: 7px}
.coe-cal .active-filters {display: block; overflow: hidden;}
li.active {font-weight: 700;}
.full-top {margin-bottom: 25px;}

/* Blog and News */
.clean-list-item {display: block; overflow: hidden; border-bottom: 1px dotted #ccc; padding: 25px 0;}
.clean-list-item img {margin: 0 0 15px 0;}
.clean-list-item h2 {font-size: 1.5em; margin: 0 0 10px 0;}
.clean-list-item .date {margin: 0 0 10px 0; text-transform: capitalize; font-size: 0.9em;}

.blog-page .page-hdr {background: none; padding: 0;}
.blog-page .page-hdr h1 {text-transform: none; color: #222; margin: 75px 0 25px 0; text-shadow: none; display: block; border-bottom: 1px solid #ccc; position: relative; padding: 0 0 50px 0; text-align: center;}
.blog-page .page-hdr h1:after {width: 50px; height: 5px; background: #d3902f; display: block; position: absolute; bottom: -2.5px; left: 50%; margin-left: -25px; content: "";}
.blog-page .page-hdr .bread-wrap {background: #444;}

.ccm-block-page-title-byline {padding: 5px 0; text-transform: uppercase; font-size :14px;}
.ccm-block-page-title-byline * {border-right: 1px solid #ccc; padding: 0 5px 0 0; margin: 0 8px 0 0;}
.ccm-block-page-title-byline *:last-of-type {border: 0;}
.ccm-block-page-title-byline .page-date {}
.ccm-block-page-title-byline .page-author {}

.ccm-block-share-this-page:before {display: block; content: "Share This Page"; font-weight: 700; font-family: "Montserrat", sans-serif; color: #880011; margin: 5px 0 15px 0;}
.ccm-block-share-this-page a {font-size: 1.56em; padding: 9px 0 0 0; display: inline-block; width: 45px; height: 45px; text-align: center; background: #880011; color: #fff; border-radius: 50%;}
.ccm-block-share-this-page a:hover {background: #dcddde;}
.ccm-block-share-this-page {}

#tag-key-search {display: block; background: #f9f9f9; position: relative;}
#tag-key-search input {display: block; width: 100% !important; height: 40px; padding: 7px; background: #fff; border: 1px solid #ccc; border-radius: 0;}
#tag-key-search .btn {background: #880011; background: none; border: none; position: absolute; right: 0; top: 0; color: #880011; padding: 6px 10px; font-size: 1.25em;}

/* Search Results */
.ccm-search-block-form h3 {font-size: 1.5em; margin: 15px 0;}
.ccm-search-block-form input {width: 75%; float: left; height: 50px; background: #f4f4f4; border: 1px solid #ccc; padding: 10px;}
.ccm-search-block-form .btn {width: 23%; float: right; height: 50px; background: #880011; color: #fff; font-weight: bold; font-size: 1.12em; border: none;}
.ccm-search-block-form #searchResults {display: block; padding: 15px 0; width: 100%; overflow: hidden;}
.ccm-search-block-form #searchResults .searchResult {display: block; padding: 15px 0; border-bottom: 1px dotted #ccc; margin: 0;}
.ccm-search-block-form #searchResults .searchResult p {margin: 0; font-size: 0.9em;}
.tab-content .tab-pane {border: none; padding: 0;}

/* Majors Page List */
.grid-list {}
.grid-list-item {position: relative; width: 100%; display: block; margin-bottom: 10px; overflow: hidden;}
.grid-list-item img {width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; opacity: 0;}
.grid-list-item .text {background: #f9f9f9; text-align: center; z-index: 5; position: relative;}
.grid-list-item .text h3 {color: #333; margin: 0; font-size: 1.12em;}
.grid-list-item .text h3 a {color: #333; display: block; padding: 25px; font-weight: 400;}
.grid-list-item:hover .text:after {left: 0;}
.grid-list-item:hover .text {background: rgba(126,0,17,.7);}
.grid-list-item:hover .text h3 a {color: #fff; text-decoration: none;}
.grid-list-item:hover img {opacity: 1;}

.block-list {list-style: none; padding: 0; margin: 25px 0 15px 0;}
.block-list li {margin: 0 0 15px 0;}
.block-list li a {position: relative; width: 100%; display: flex; justify-content: center; flex-direction: column; overflow: hidden; font-size: 1em; line-height: 21px; font-weight: 400; background: #f9f9f9; font-family: "Montserrat", sans-serif; padding: 20px 10px; text-align: center; height: 100%; color: #444;}
.block-list li:hover a {background: #880011; text-decoration: none; color: #fff;}
.block-list li:nth-child(2n+2):hover a {background: #dcddde; color:#880011;}
.block-list li:nth-child(3n+3):hover a {background: #444;}
.block-list + h4 {margin-top: 25px;}
/* SR updates - to correct the extra space on the right on mobile view. */
.content-designed-block {margin: 15px 0px;}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {

/* Typography */
p.lead, h2.lead {font-size: 1.9em; line-height: 1.5; padding: 0 0 40px 0; margin-bottom: 40px;}

/* Homepage */
#hero {min-height: 600px;}
#hero-text h1 {font-size: 6em; line-height: 90px; margin: 0;}
#hero-text p {font-size: 1.3em; max-width: 600px; margin: 0 auto 25px auto;}
#hero-text p.lead {font-size: 3.1em; margin: 20px auto;}

/* Coe Alert */
.coe-alert {border-left: 10px solid #880011; display: flex; flex-direction: column; justify-content: center; min-height: 75px;bottom: 20px;}
.coe-alert .close {position: absolute; right: 10px; top: 50%; margin-top: -25px;}
.coe-alert p {font-size: 1em;}
.stats .flex {display: flex; flex-wrap: wrap; justify-content: space-between;}
.stats .flex .feature-stat {width: 50%;}
.coe-grid {display: flex; flex-wrap: wrap; justify-content: space-between;}
.coe-grid .item {width: 48%;}
.success-story {position: relative; overflow: hidden;}
.success-story img {position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover;}
.success-story .text {position: relative; z-index: 5; width: 60%; color: #fff; padding: 75px 30px;}
.success-story .text h2 {text-transform: uppercase; margin: 0;}
.success-story .text h3 {color: #fff; margin: 10px 0; font-size: 2.6em;}
.success-story .text .lead {font-size: 1.5em; padding: 0 0 15px 0; margin: 0 0 15px 0;}
.success-story.light-photo .text {background: rgba(136,0,17,.8); padding: 50px;}
.success-story.small-photo {background: #880011;}
.success-story.small-photo img {position: relative; float: left; width: auto; height: auto; max-width: 25%; border: 10px solid #fff; box-shadow: 5px 5px 5px rgba(0,0,0,.2); margin: 50px 0 0 0;}
.success-story.small-photo .text {padding: 50px 0; width: 70%; float: right; box-shadow: none;}

/** .cta-full {height: 350px;} **/
.cta-full .text {position: relative; top: 0; bottom: 0; height: 100%; background: url(../img/bkg-stripes.png) left bottom repeat-x rgba(133,0,17,.8); }
.cta-full img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;}
.cta-full span {opacity: 1;}
.cta-full a:hover {text-decoration: none;}
.cta-full a:hover img {transform: scale(1.1,1.1);}
.cta-full a:hover span:after {margin-left: 20px;}
.cta-full .text {width: 50%;}
.cta-full a:hover .text {background: var(-red); width: calc(50% + 40px); padding: 30px 50px;}

/* Footer */
.footer .row {display: flex; justify-content: center;}
.footer .col {margin: 0 5px;}

/* Page Header */
.page-hdr {text-align: left;}
.page-hdr h1 {font-size: 2.5em;}
.page-hdr img {display: block;}

/* Content */
.col-alpha, .col-beta {padding: 10px 0;}
.main-content section {padding: 50px 0;}

/* Landing */
#landing #dots, #hero #dots {display: block; position: absolute; right: 25px; bottom: 25px;}
#hero #dots {height: auto;}
#landing #dots ul, #hero #dots ul {list-style: none; margin: 0; padding: 0;}
#landing #dots ul li, #hero #dots ul li {float: left; margin: 0 0 0 5px;}
#landing #dots button, #hero #dots button {border: none; background: #fff; display: block; width: 24px; height: 24px; border-radius: 50%;  text-indent: -999em; padding: 0;}
#landing #dots .slick-active button, #hero #dots .slick-active button {background: #d3902f;}
#landing {height: 40vh;}
#landing .slider {margin-bottom: 75px; height: 40vh; width: 100%; overflow: hidden;}
#landing .hgroup {position: absolute; bottom: 0; left: 0; width: 100%;}
#landing h1 {font-size: 7em; padding: 0; margin: 15px 0 -70px 0;}

.main-content .feature-content {padding: 50px;}
.feature-content img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top;}
.feature-content .text {width: 45%; float: right; padding: 25px; margin: 0; background: #fff; box-shadow: 5px 5px 10px rgba(0,0,0,.2); border-top: 5px solid #880011;}

/* Deartment */
#department {background: none; position: relative; overflow: visible; padding: 0; text-align: center;}
#department img {position: relative;}
#department .hgroup {margin: -30px 0 0 0;}
#department h1 {font-size: 6em;}

/* Directory */
.directory-search-class {padding: 20px; box-shadow: 10px 10px 5px rgba(0,0,0,.025);}
.directory-search-class .inputs {display: flex;}
.directory-search-class .form-group {padding: 0 5px; flex: 1;}
.directory-search-class .inputs .form-group:last-of-type {margin-top: 29px;}

.directory-list .flex {display: flex; flex-wrap: wrap; justify-content: left;}
.directory-list .item {width: 30.33%; padding: 0; position: relative; margin: 1.5%;}

/* Majors Page List */
.grid-list {display: flex; justify-content: space-between; flex-wrap: wrap;}
.grid-list-item {width: 49%;}
.grid-list-item .text {height: 100%;}
.block-list {display: flex; justify-content: center; flex-wrap: wrap;}
.block-list li {width: 48%; margin: 0 1% 15px 1%}
/* SR updates - to correct the extra space on the right on mobile view. */
.content-designed-block {margin: 15px 25px;}
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
	
/* Typography */
h2, .h2-like {font-size: 1.75em;}
.img-right {max-width: 50%; margin: 0 0 25px 25px; float: right;}
.img-left {max-width: 50%; margin: 0 25px 25px 0; float: left;}

/* Header */
#header {height: 125px; position: relative;}
#header.affix {position: fixed; top: -53px;}
.fix-affix {min-height: 125px;}
/* OLD CSS */
/* .hdr-tools {text-align: left; height: 50px; padding: 0;} */
/* NEW CSS */
.hdr-tools {text-align: left; height: 55px; padding: 0;}
.hdr-tools .btn-theme {margin: 7px 5px 0 0;}
#logo {padding: 19px 0;}
#btn-menu {display: none;}
#skip-link {top: 125px;}
#menu {padding: 0; width: auto; left: auto; overflow: visible; position: absolute; right: 15px; top: -50px; float: right; background: none; box-shadow: none;}
#menu ul ul {display: none;}
#menu ul a {display: block;}

#nav-main {float: right; margin: 50px 0 0 0; padding: 0; position: relative; z-index: 50;}
#nav-main > li {display: inline-block; float: left; z-index: 50;}
#nav-main > li > a {padding: 25px 15px; color: #444; position: relative; margin: 0; font-size: 1em; letter-spacing: -.5px;}
#nav-main > li > a:after {position: absolute; bottom: 0; left: 50%; margin-left: -7px; content: ""; opacity: 0;
border-left: 7px solid transparent;border-right: 7px solid transparent;border-bottom: 7px solid #d3902f;}
#nav-main > li:hover > a {color: #880011; text-decoration: none; background: #f9f9f9;}
#nav-main > li:hover > a:after {opacity: 1;}
#nav-main li button {display: none;}

.menu-drop {position: absolute; right: 0; top: -1000px; width: 950px; background: #fff; box-shadow: 0 7px 15px rgba(0,0,0,.2); border-top: 5px solid #d3902f; z-index: 25; visibility: hidden; opacity: 0;}
#nav-main .menu-drop ul {display: block !important; padding: 35px; float: left; columns: 2; width: 65%;}
#nav-main .menu-drop ul li {-webkit-column-break-inside: avoid; column-break-inside: avoid; overflow: hidden;}
#nav-main .menu-drop ul a {font-size: 1em; padding: 10px 25px 10px 15px; color: #444; background: url(../img/bkg-nav-item.png) top right -20px no-repeat #f3f3f3;margin: 0 0 5px 5px;}
#nav-main .menu-drop ul a:hover {padding: 10px 20px 10px 20px; background: url(../img/bkg-nav-item.png) top right -10px no-repeat #f9f9f9; text-decoration: underline; color: #880011}

.menu-drop .menu-content {display: block; width: 35%; float: left; padding: 35px; color: #fff; position: relative; min-height:450px;}
.menu-drop .menu-content img {position: absolute; width: 100%; height: 100%; left: 0; top: 0; object-fit: cover;}
.menu-drop .menu-content .lead {font-family: "BillyOhio", "Montserrat"; font-size: 3.5em; margin-top: 10px; padding-bottom: 25px; position: relative; border: 0;}
.menu-drop .menu-content a {display: block; background: #dcddde; border: 2px solid #dcddde; text-align: center; box-shadow: 4px 4px 2px rgba(0,0,0,.1); border-radius: 4px;}
.menu-drop .menu-content a:hover {background: rgba(0,0,0,.5);}
.menu-drop .menu-content p, .menu-drop .menu-content a {position: relative;}
.menu-drop .menu-content .lead {position: relative; opacity: 0; left: -10px; transition-duration: 1s;}
.menu-drop .menu-content p, .menu-drop .menu-content a {position: relative; opacity: 0; left: -10px; transition-duration: 1s;}

#nav-main li:hover .menu-drop {visibility: visible; opacity: 1; z-index: 30; top: 100%;}
#nav-main li:hover .menu-content p.lead, #nav-main li:hover .menu-content h2.lead {opacity: 1; transition-delay: .15s;}
#nav-main li:hover .menu-content p {left: 0; opacity: 1; transition-delay: .3s;}
#nav-main li:hover .menu-content a {left: 0; opacity: 1; transition-delay: .45s; color: #880011 !important;}
#nav-main li:hover .menu-content a:hover {transition-delay: 1ms; color: #fff !important;}

#nav-mini {height: 50px; position: absolute; top: 0; right: 0; background: none; border: 0; padding: 0; margin: 0;}
#nav-mini li {display: inline-block; float: left; position: relative;}
/* OLD NAV */
/* #nav-mini li a {color: #fff; font-size: 0.9em; padding: 8px 5px; width: auto; opacity: .9;} */
/* NEW NAV */
#nav-mini li a {color: #fff; font-size: 0.9em; padding: 10px 5px; width: auto; opacity: .9;}
#nav-mini li a:hover {opacity: 1;}
#nav-mini form {width: auto; padding: 0; margin: 7px 0 0 10px;}
#nav-mini form input {height: 35px; border: none; border: 1px solid rgba(255,255,255,.5); background: rgba(0,0,0,.2); color: #fff; width: 160px; padding: 0 35px 0 0; text-indent: 12px;}
#nav-mini form input:focus {border-color: #eee; box-shadow: none; outline: none;}
#nav-mini ::placeholder {color: #fff; opacity: 1; /* Firefox */}
#nav-mini :-ms-input-placeholder {color: #fff;}
#nav-mini ::-ms-input-placeholder {color: #fff;}
#nav-mini form button {color: #fff; font-size: 0.93em; width: 35px; height: 35px; padding: 0; opacity: .6;}
#nav-mini form input:focus {background:  rgba(0,0,0,.4); width: 180px;}
#nav-mini form button:hover {opacity: 1; color: #d3902f;}

/* Homepage */
#hero {height: calc(100vh - 200px); box-shadow: 0 50px 100px #fff;}
#hero-text {padding: 0;}
#hero-text h1 {font-size: 8.5em;}
#hero-text p.lead {font-size: 6.6em; margin: 40px auto 20px auto;}
#hero-text .btn-theme {font-size: 1.1em;}

.pattern-one {background: url(../img/bkg-pattern.jpg);}
.pattern-two {background: #f9f9f9;}
.img-hover img:first-of-type {opacity: 1; display: block;}
.img-hover img:last-of-type {opacity: 0;}
.img-hover:hover img:last-of-type {opacity: 1;}
.img-hover:hover img:first-of-type {opacity: 0;}
.stats-container .slick-prev {left: -25px;}
.stats-container .slick-next {right: -25px;}

.coe-grid .item:first-of-type, .coe-grid .item:last-of-type {width: 50%;}
.coe-grid .item {width: 25%; margin: 0; height: 260px; overflow: hidden; border: 10px solid transparent;}
.coe-grid .item img {width: 100%; height: 100%; object-fit: cover;}
.coe-grid .item:hover img {transform: scale(1.1,1.1);}
.coe-grid .text {position: absolute; left: 0; top: 100%; width: 100%; bottom: 0; display: flex; flex-direction: column; justify-content: center; background: none; opacity: 0;}
.coe-grid .text:after {position: absolute; left: 0; top: 0; width: 100%; bottom: 0; background: #880011; opacity: .8; display: block; content: "";}
.coe-grid .text p {font-size: 1.12em; text-transform: uppercase; letter-spacing: 2px;}
.coe-grid .text p strong {margin: 10px 0; line-height: 1.5; font-family: var(--headers); font-size: 2em;}
.coe-grid .item:hover .text {top: 0; opacity: 1;}
.coe-grid .item:hover h3 {background: #d3902f;}
.coe-grid .item:nth-of-type(even) .text {top: 0; left: 100%;}
.coe-grid .item:nth-of-type(even):hover .text {top: 0; left: 0;}
.coe-grid .item:nth-of-type(2) .text:after {background: #d3902f; opacity: .9;}
.coe-grid .item:nth-of-type(2):hover h3 {background: #880011;}
.coe-grid .item:nth-of-type(3) .text:after {background: #111; opacity: .8;}
.coe-grid .item:nth-of-type(3):hover h3 {background: #880011;}
.coe-grid .item:nth-of-type(4) .text:after {background: #111; opacity: .8;}
.coe-grid .item:nth-of-type(4):hover h3 {background: #880011;}
.coe-grid .item:nth-of-type(5) .text:after {background: #d3902f; opacity: .9;}
.coe-grid .item:nth-of-type(5):hover h3 {background: #880011;}
.success-story .text {padding: 100px 0 150px 10%;}
.success-story .text .lead {font-size: 1.75em;}

/* Footer */
.footer .ftr-cta ul li {display: inline-block; width: 45%;}
.footer .col {margin: 0 15px;}

/* Page Header */
.page-hdr {margin-top: 0;}

/* Content */
.main-content {margin: 0;}
.flex {display: flex;}
.flex .item {padding: 15px;}
.col-alpha {width: 28%; float: left; padding: 25px 0 0 0;}
.col-beta {width: 72%; float: right; padding: 25px 0 0 50px;}
.stat-row .feature-stat {width: 25%; float: left;}

/* Landing */
#landing {height: 62vh; width: 100%; margin: 0 0 20px 0;}
#landing .slider {height: 62vh; top: -25px;}
#landing h1 {font-size: 10.1em;}
#landing #dots {bottom: 50px;}

.main-content .department-main {padding: 0;}
.department-main .text {padding: 0 0 0 15px;}
.department-main .text .lead {font-size: 1.5em;}
.main-content .feature-content {padding: 50px;}
.feature-content .text {padding: 35px;}

/* Deartment */
#department {text-align: left;}
#department img {height: 250px;}
#department .hgroup {margin: -60px 0 0 0;}
#department h1 {font-size: 8em;}

/* Directory */
.directory-search-class {border-top: none; border-left: 10px solid #880011;}
.directory-search-class .form-group {padding: 0 15px;}
.directory-list .item {width: 22%; padding: 0; position: relative; background: none;}
.directory-list .item .text {padding: 25px; position: absolute; left: 0; top: 25px; width: 100%; background: #f4f4f4; z-index: 150; opacity: 0; border-top: 5px solid #d3902f; height: 290px;}
.directory-list .item p.title {border: 0;}
.directory-list .item:hover .text {opacity: .95; top: 0;}
.col-beta .directory-list .item {width: 32%;}
.col-beta .directory-list .item .text {height: 258px;}

/* Coe Cal */
.coe-cal .col-alpha {float: right;}
.coe-cal .col-beta {float: left; padding: 25px 50px 0 0;}
.coe-cal .item img {position: absolute; left: 0; top: 0; height: 100%; width: 30%; object-fit: cover; transform-origin: right center;}
.coe-cal .item {padding: 15px 15px 25px 35%;}

/* Calendar Search */
#cal-search form {padding-top: 0;}
#cal-search .btn-theme.btn-cal-expand.no-desktop
 {display: none;}
#cal-search #cal-filter-expand {display: block; height: auto;}
#cal-search .calendar-view {display: block; margin: 0 0 25px 0;}
#cal-search form h3 {margin: 20px 0;}
#cal-search .fun-list {padding: 10px 0;}

/* Majors Page List */
.grid-list-item {width: 32%; margin-bottom: 15px;}
.grid-list-item .text {display: flex; flex-direction: column; justify-content: center;}
.block-list li {width: 31%;}
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
body {font-size: 1.7rem;}
h1 {font-size: 2em;}

/* Header */
#header {height: 135px;}
.fix-affix {height: 135px;}
#skip-link {top: 135px;}
#logo {width: 300px; padding: 18px 0;}
#nav-main > li > a {padding: 30.5px 22px; font-size: 1.05em;}
.menu-drop {width: 1140px;}
.menu-drop .menu-content {padding: 40px;}

/* Coe Alert */
.coe-alert {width: 1140px; left: 50%; margin-left: -570px;}

/* Homepage */
.success-story .text {width: 1140px; margin: 0 auto; padding: 100px 600px 100px 5px; box-shadow: 10px 10px 3px rgba(0,0,0,.1);}
.success-story .text .lead {font-size: 1.9em;}
.success-story.light-photo .text {width: 650px; position: relative; left: -250px; margin: 50px auto;}
.feature-stat .number span {font-size:  4.5em;}
.cta-full .lead {font-size: 1.9em;}
.col-beta .directory-list .item .text {height: 318px;}
.directory-list .item {width: 17%;}
.directory-list .item .text {height: 265px;}

/* Page Header */
.page-hdr {padding: 75px 0 50px 0;}

/* Landing */
.feature-content .text {padding: 50px; width: 35%; right: 8%;}

/* Majors Page List */
.grid-list-item {width: 24%;}

.block-list li {width: 23%;}
}

/* ------ Additional CSS By Dev Team ------- */
.coe-alert p:before {content: "" !important;}
/*To remove the alert icon as the icon picker can take its place*/
.col-sm-9 + .col-sm-3 h3:first-of-type {margin-top: 0;}
.col-sm-9 + .col-sm-3 h3 {text-transform: uppercase; font-size: 0.75em;margin: 50px 0 25px 0;padding: 0 0;color: #c98638;position: relative;z-index: 5;text-shadow: -3px -3px 0 #fff, 3px -3px 0 #fff, -3px 3px 0 #fff, 3px 3px 0 #fff;}
.col-sm-9 + .col-sm-3 h3:before {position: absolute;left: 0;top: 7px;width: 100%;height: 1px;background: #ddd;content: "";z-index: -1;}
ul.ui-autocomplete {max-width: 250px !important;}

@media(max-width: 426px) {
.ccm-search-block-form .btn {padding: 5px !important;}
#header {height: 200px;}
#menu {top: 200px;}
}
  

/*-----CSS for Accessibility-----*/
.diversity-video {padding:56.25% 0 0 0; position:relative;}
.iframe-style {position:absolute; top:0; left:0; width:100%; height:100%; border: none;}
.formify-form.with-style textarea:focus {box-shadow: 0 0 5px #d3902f;}

/* ---- FIX IE 10 and 11 -----*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
#hero-visual video, #hero-slider img {height: auto;}
#hero-text {display: block; padding-top: 100px;}
.coe-grid .item img {width: auto; max-width: none;}
.coe-grid .item:first-of-type img, .coe-grid .item:last-of-type img {height: auto; width: 100%;}
.success-story img {height: auto; width: 100%;}
.cta-full img {width: 100%; height: auto;}
.col-md-7 .cta-full img {width: 100%; height: auto;}
.page-hdr img {height: auto;}
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  #nav-mini form input:focus {background:  rgba(0,0,0,.4); width: 170px;}
  #nav-mini {left: 100px;}
}

/* AS css updates for Homepage rotator */

/* Mobile First */
#hero-updated {width: 100%; position: relative; padding: 0; overflow: hidden; background: #880011;}
#hero-updated img {width: 100%; height: 250px; object-fit: cover;}

/* Explore css */
#hero-updated .explore {position: absolute; bottom: -50px; left: 50%; margin-left: -50px; font-size: 0.75em; width: 100px; height: 100px; background: #fff; padding-top: 15px; color: #880011; border-radius: 50%; text-transform: uppercase; z-index: 50; display: block; text-align: center; text-decoration: none;}
#hero-updated .explore:after {position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; background: #fff; border: 5px solid #d3902f; content: ""; border-radius: 50%; z-index: -1;-webkit-clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);}
#hero-updated .explore i {display: block; font-size: 0.93em; position: relative; top: -3px;}
#hero-updated .explore {display: none;}

/* Dots */
#hero-updated #dots {height: auto;}
#hero-updated #dots ul {list-style: none; margin: 0; padding: 0;}
#hero-updated #dots ul li {margin: 0 3px;}
#hero-updated #dots button {border: none; background: #222; display: block; width: 24px; height: 24px; border-radius: 50%;  text-indent: -999em; padding: 0;}
#hero-updated #dots .slick-active button {background: #d3902f;}

/* Slider */
#hero-updated {position: relative; background: #fff;}
#hero-updated .slider {position: relative; overflow: hidden;}
#hero-updated .slide {width: 100%; position: relative;}
#hero-updated .slide .slide-text-wrap {background: #222; padding: 25px; margin: 0 25px; top: -25px; position: relative; color: #fff;}
#hero-updated .slide .slide-text {text-align: center}
#hero-updated .slide .slide-text h2 {color: #fff; margin: 5px 0 15px 0; font-weight: 400; padding: 0; text-align: center;}
#hero-updated .slide .slide-text h2:after {display: none;}
#hero-updated .slide .slide-text p {font-family: var(--headers); font-size: 1.5rem; margin: 0 0 15px 0; padding: 15px 0; text-align: center;}
#hero-updated .slide .slide-text .btn-learn-more {align-self: center;}

#hero-updated .img-view-full {background: rgba(0,0,0,.8); color: #fff; text-decoration: none; padding: 10px 40px 10px 10px; overflow: hidden; position: relative; display: block; margin: 0 25px; top: -25px; font-size: 0.9em;}
#hero-updated .img-view-full:after {background: #4b7ead; content:"\f08e"; font-family: FontAwesome; position: absolute; right: 0; top: 0; bottom: 0; width: 40px; text-align: center; font-size: 1.4em; display: flex; flex-direction: column; justify-content: center;}
#hero-updated .img-view-full:hover, .img-view-full:focus {text-decoration: none; color: #fff; background: #4695dd;}
#hero-updated .img-view-full:hover:after {background: #222;}

/* Button */
#hero-updated a.btn-learn-more {padding: 10px 20px; background: #880011; color: #fff; font-family: var(--headers); border-radius: 5px; font-size: .9em; border: 2px solid #880011; font-weight: 700; text-decoration: none; text-align: center}
#hero-updated a.btn-learn-more:hover {background: #880011; color: #fff; text-decoration: none; border-color: #fff;}
#hero-updated .slide .slide-text p.homepage-lead:before{ width: 50px; height: 5px; background:  #dcddde; content: ""; position: absolute; left: calc(50% - 25px); top: 0;}

#hero-updated .slick-dots {list-style: none; padding: 0; margin: 0; text-align: center; position: relative; top: -15px;}
#hero-updated .slick-dots li {display: inline-block; margin: 0 2.5px;}
#hero-updated .slick-dots button {border: 0; background: #fff; width: 10px; height: 10px; text-indent: -999em; display: block; padding: 0;}
#hero-updated .slick-dots .slick-active button {background: #4b7ead;}

#hero-updated #prev, #hero-updated #next {position: absolute; left: 0; top: 80px; background: rgba(0,0,0,.5); color: #fff; padding: 10px 10px;}
#hero-updated #next {left: auto; right: 0;}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
#hero-updated .explore {display: block;}
#hero-updated {height: 70vh; width: 100%; overflow: hidden; background: none; min-height: 600px; background: #000;}
#hero-updated .slider {height: 100%;}
#hero-updated .slide, .slick-list, .slick-track {height: 100%;}
#hero-updated .slide img {width: 100%; height: 100%; object-fit: cover; opacity: .5;}
#hero-updated .slide .slide-text {position: absolute; left: 0; top: 0; right: 0; bottom: 0;
background: -moz-linear-gradient(left, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 61%, rgba(0,0,0,0) 98%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(0,0,0,0.35) 0%,rgba(0,0,0,0) 61%,rgba(0,0,0,0) 98%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(0,0,0,0.35) 0%,rgba(0,0,0,0) 61%,rgba(0,0,0,0) 98%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */}
#hero-updated .slide .slide-text .container {height: 100%;}
#hero-updated .slide .slide-text-wrap {position: realtive; left: 0; top: 0; width: 100%; height: 100%; bottom: 0;display: flex; flex-direction: column; justify-content: center; background: none; padding: 0; margin: 0;}
#hero-updated .slide .slide-text .category {display: inline-block; background: rgba(0,0,0,.75); padding: 5px 10px; align-self: flex-start;}
#hero-updated .slide .slide-text h2 {font-size: 5rem; line-height: 52px; text-shadow: 3px 3px 6px rgba(0,0,0,.2);}
#hero-updated .slide .slide-text p {font-size: 3rem; line-height: 1.5;}

#hero-updated .img-view-full {display: inline-block; position: absolute; left: auto; top: auto; right: -5px; bottom: 75px; padding-right: 50px;}
#hero-updated .slick-dots { bottom: 85px; top: auto;}
#hero-updated #prev, #hero-updated #next {top: 40%;}
#hero-updated #dots button {background: #fff;}
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
#hero-updated .explore {display: block;}
#hero-updated #dots button {background: #fff;}
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
#hero-updated .explore {display: block;}
#hero-updated #prev, #hero-updated #next {padding: 25px; font-size: 1.25em;}
#hero-updated .slide .slide-text-wrap {padding: 0 0 50px 0; left: 15%; width: 70%;}
#hero-updated .slide .slide-text .category {font-size: 1.1em;}
#hero-updated .slide .slide-text h2 {font-size: 6rem; line-height: 1.2;}
#hero-updated .slide .slide-text p {font-size: 3rem; line-height: 1.5; padding: 25px 0; margin: 15px 0;}
.img-view-full {bottom: 100px; right: -7.5px;}
#hero-updated #dots button {background: #fff;}
}

aside .h3-aside:first-of-type {
  margin-top: 0;
}
aside .h3-aside {
  margin-top: 0;
  font-size: 0.9em;
  margin: 50px 0 25px 0;
  padding: 0 0;
  color: #a16b2c;
  position: relative;
  z-index: 5;
  text-shadow: -3px -3px 0 #fff, 3px -3px 0 #fff, -3px 3px 0 #fff, 3px 3px 0 #fff;
  display: block;
  width: 100%;
  overflow: hidden;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
}

aside .h3-aside:before {
  position: absolute;
  left: 0;
  top: 11px;
  width: 100%;
  height: 1px;
  background: #ddd;
  content: "";
  z-index: -1;
}

.category-navbar li.select a{
  background: #595959 !important;
}

.rslides_nav{
  width: 45px !important;
}

@media (min-width: 1200px) {
  #hero-updated .slide .slide-text .h2-like-text {
      font-size: 6rem;
      line-height: 1.2;
  }
}

@media (min-width: 768px) {
  #hero-updated .slide .slide-text .h2-like-text {
      font-size: 5rem;
      line-height: 52px;
      text-shadow: 3px 3px 6px rgba(0, 0, 0, .2);
  }
}

@media (min-width: 992px) {
  h2, .h2-like-text {
      font-size: 1.75em;
  }
}

#hero-updated .slide .slide-text .h2-like-text {
  color: #fff;
  margin: 5px 0 15px 0;
  font-weight: 400;
  padding: 0;
  text-align: center;
}
.h2-like-text{
  font-family: "Montserrat", sans-serif;
  letter-spacing: -.5px;
  font-size: 1.6rem;
}

.twitter-icon svg,
.tiktok-icon svg {
  fill: #880011;
  stroke: #880011;
  transition: fill 0.3s ease, stroke 0.3s ease; /* Transition for color change */
}

.twitter-icon:hover svg,
.tiktok-icon:hover svg {
  fill: #ffffff;
  stroke: #ffffff;
}


@media (max-width: 769px) {
   .main-content {margin-top: 200px;}
   #header {height: 200px;}
  .hdr-tools form {display: block; position: relative; width: 100%; margin: 5px; float: left;}
.hdr-tools form input {border: 1px solid #ccc; height: 40px; padding: 0 50px 0 0; text-indent: 10px; width: 100%;}
.hdr-tools form button {position: absolute; right: 0; top: 0; height: 40px; width: 40px; background: none; padding: 0; border: 0; color: #880011;}
.hdr-tools form input:focus {border-color: #eee; box-shadow: none; outline: none;}
.hdr-tools ::placeholder {color: #fff; opacity: 1; /* Firefox */}
.hdr-tools :-ms-input-placeholder {color: #fff;}
.hdr-tools ::-ms-input-placeholder {color: #fff;}
.hdr-tools form button {color: #fff; font-size: 0.93em; width: 35px; height: 35px; padding: 0; opacity: .6;}
.hdr-tools form input:focus {background:  rgba(0,0,0,.4); width: 180px;}
.hdr-tools form button:hover {opacity: 1; color: #d3902f;}

   .hdr-tools form {
      display: block;
      position: relative;
      width: 100%;
      margin: 5px;
      float: left;
   }
   .hdr-tools form input {
        height: 35px;
        border: none;
        border: 1px solid rgba(255, 255, 255, .5);
        background: rgba(0, 0, 0, .2);
        color: #fff;
        width: 160px;
        padding: 0 35px 0 0;
        text-indent: 12px;
    }
    .hdr-tools form button {
        display:none
     }
     .mar-bottom {margin-bottom: 5px;}

}
@media (min-width: 770px) {
.hdr-tools form {display: none;}
}

@media (min-width: 325px) and (max-width: 375px) {
  #menu {top: 200px;}
  .main-content {margin-top: 200px;}
   #header {height: 180px;}
}

@media (min-width: 375px) and (max-width: 769px) {
  #menu {top: 180px;}
  .main-content {margin-top: 180px;}
   #header {height: 180px;}
}

@media (min-width: 325px) and (max-width: 371px) {
   #header {height: 200px !important;}
}

.contact .social {
    flex-wrap: wrap; /* Allows icons to wrap */
    margin: 20px 5px 40px 5px;
}

.contact .social li {
    margin: 5px;
    flex: 1 0 20%; /* Ensure items can shrink and wrap */
    max-width: 60px; /* Ensure the width doesn't overflow */
}

.contact .social a {
    text-align: center;
}

/* Media Query for smaller screens */
@media (max-width: 600px) {
    .contact .social li {
        flex: 1 0 30%; /* Increase the size slightly on mobile for better spacing */
        max-width: 50px;
    }
}

.contact .social:before {display: none;}

@media (min-width: 769px) {
.contact .social:before {display: block; left: 40%}
}

@media (min-width: 768px) {
.contact .social:before {display: block; left: 40%}
}

@media (min-width: 992px) {
  .contact .social:before {left: 45%}
}

/* ADA Changes */

.category-navbar li a{color: #333;}
.slick-dots li button {color: #000000;}
.pagination > .disabled > span, .pagination>.disabled>span:hover {color: #555555;}
.ccm-ui .btn-success {background: #3A823A; border-color: #3A823A;}
.ccm-conversation-message-username{color: #0066CC !important;}
.ccm-conversation-message-date{color: #575757 !important;}
.image-tabs.category-navbar a[data-tag="Outdoor Activities"]{background: #9C6B26 !important;}
.image-tabs.category-navbar a[data-tag="Religious & Spiritual Life"], .image-tabs.category-navbar a[data-tag="All"]{background: #517B85 !important;}
a.btn-login button.btn-login {background-color:#388038; border-color:#388038; color:#fff !important;}




/* Accordion styling */

.accordion-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  background: #eee;
  color: #000;
  font-weight: bold;
  font-size: 15px;
  padding: 8px 15px;
  border: none;
  box-shadow: none;
  outline: none;
  white-space: nowrap;
  width: 100%;
}

/* Arrow on the left */
.accordion-button::before {
  font-family: "FontAwesome";
  content: "\f0da"; /* Right arrow */
  margin-right: 8px;
}

/* Down arrow when expanded */
.accordion-button:not(.collapsed)::before {
  content: "\f0d7";
}

/* Hide default Bootstrap right arrow */
.accordion-button::after {
  display: none;
}

/* Open state styling */
.accordion-button:not(.collapsed) {
  background: #eee !important;
  color: #000 !important;
  box-shadow: none !important;
}

/* Remove blue focus ring */
.accordion-button:focus,
.accordion-button:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* Accordion body */
.accordion-body {
  background: #fefefe;
  padding: 20px;
  font-size: 15px;
  border-top: 1px solid #ddd;
}

/* Item spacing */
.accordion-item {
  border: none;
  margin-bottom: 10px;
}