:root {
    --umblue: #002e5e;
    --ummaize: #ffcb05;
    --midnightblue: #003a76;
    --normblue: #225c9a;
    --lightblue: #2f65a7;
    --mustard: #e8ba00;
    --lightyellow: #ffd84a;
    --sunyellow: #fde27d;
    --white: #ffffff;
    --bone:#f9f9f9;
    --lightgrey: #ececec;
    --grey: #e1e1e1;
    --midgrey: #969696;
    --darkgrey: #868686;
    --charcoal: #414141;
    --black: #000000;
}

/* Layout  ################################################### */

body {min-width: 320px; background: var(--white); color: var(--charcoal); font-family: "IBM Plex Sans", sans-serif;}
#wrap {overflow: hidden; min-width: 320px; margin: 0 auto; background: var(--white);}
.container {min-width: 320px; max-width: 1920px;}
.container-fluid {min-width: 320px; max-width: 1920px;}
.container-fluid .container {min-width: 290px;}
.container-fluid .container-lg {min-width: 290px;}

.col-15 {width: 20%;}
@media (min-width: 576px) {
    .col-sm-15 {width: 20%;}
}
@media (min-width: 768px) {
    .col-md-15 {width: 20%;}
}
@media (min-width: 992px) {
    .col-lg-15 {width: 20%;}
}
@media (min-width: 1200px) {
    .col-xl-15 {width: 20%;}
}
@media (min-width: 1400px) {
    .col-xxl-15 {width: 20%;}
}

/* Utility  ################################################### */

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

.bg-cover {
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

/* Backgrounds and Colors  ################################################### */

a {color: var(--umblue);}
a:hover {color: var(--normblue);}

.bg-primary, .bg-hover-primary:hover {background-color: var(--umblue) !important; color: var(--white) !important;}
.bg-primary a, .bg-sub.bg-primary a, .bg-sub.bg-hover-primary:hover a {color: var(--white);}
.bg-primary a:hover, .bg-sub.bg-primary a:hover, .bg-sub.bg-hover-primary:hover a:hover {color: var(--ummaize);}

.bg-secondary, .bg-hover-secondary:hover {background-color: var(--ummaize) !important; color: var(--umblue) !important;}
.bg-secondary a, .bg-sub.bg-secondary a, .bg-sub.bg-hover-secondary:hover a {color: var(--umblue);}
.bg-secondary a:hover, .bg-sub.bg-primary a:hover, .bg-sub.bg-hover-secondary:hover a:hover {color: var(--normblue);}

.bg-midnightblue, .bg-hover-midnightblue:hover {background-color: var(--midnightblue) !important; color: var(--white) !important;}
.bg-midnightblue a, .bg-sub.bg-midnightblue a, .bg-sub.bg-hover-midnightblue:hover a {color: var(--white);}
.bg-midnightblue a:hover, .bg-sub.bg-primary a:hover, .bg-sub.bg-hover-midnightblue:hover a:hover {color: var(--lightyellow);}

.bg-lightblue {background-color: var(--lightblue) !important; color: var(--white)  !important;}
.bg-lightblue a, .bg-sub.bg-lightblue a {color: var(--white);}
.bg-lightblue a:hover, .bg-sub.bg-lightblue a:hover {color: var(--lightyellow);}

.bg-white {background-color: var(--white) !important; color: var(--umblue) !important;}
.bg-white a, .bg-sub.bg-white a {color: var(--umblue);}
.bg-white a:hover, .bg-sub.bg-white a:hover {color: var(--normblue);}

.bg-bone {background-color: var(--bone) !important;}
.bg-bone a, .bg-sub.bg-bone a {color: var(--umblue);}
.bg-bone a:hover, .bg-sub.bg-bone a:hover {color: var(--normblue);}

.bg-sunyellow {background-color: var(--sunyellow) !important;}
.bg-sunyellow a, .bg-sub.bg-sunyellow a {color: var(--umblue);}
.bg-sunyellow a:hover, .bg-sub.bg-sunyellow a:hover {color: var(--normblue);}

.bg-lightgrey {background-color: var(--lightgrey) !important; color: var(--umblue) !important;}
.bg-lightgrey a, .bg-sub.bg-lightgrey a {color: var(--umblue);}
.bg-lightgrey a:hover, .bg-sub.bg-lightgrey a:hover {color: var(--normblue);}

.bg-grey {background-color: var(--grey) !important; color: var(--umblue) !important;}
.bg-grey a, .bg-sub.bg-grey a {color: var(--umblue);}
.bg-grey a:hover, .bg-sub.bg-grey a:hover {color: var(--normblue);}

.bg-darkgrey {background-color: var(--darkgrey) !important; color: var(--white)  !important;}
.bg-darkgrey a, .bg-sub.bg-darkgrey a {color: var(--white);}
.bg-darkgrey a:hover, .bg-sub.bg-darkgrey a:hover {color: var(--ummaize);}

.bg-black {background-color: var(--black) !important; color: var(--white)  !important;}
.bg-black a, .bg-sub.bg-black a {color: var(--white);}
.bg-black a:hover, .bg-sub.bg-black a:hover {color: var(--ummaize);}

.bg-lightgrey .bg-lightblue a {color: var(--white);}
.bg-lightgrey .bg-lightblue a:hover {color: var(--lightyellow);}

/* Typography  ################################################### */

h1, .h1 {font-size: 80px; font-family: "IBM Plex Serif", serif; font-weight: 300; }
h2, .h2, .section-hero-blog h1 {font-size: 48px; font-family: "IBM Plex Sans", sans-serif; font-weight: 300; margin-bottom: 20px;}
h3, .h3 {font-family: "IBM Plex Serif", serif; font-weight: 300;}
h4, .h4 {font-family: "IBM Plex Serif", serif; font-weight: 300;}
h5, .h5 {font-family: "IBM Plex Sans", sans-serif; font-weight: 500;}
h6, .h6 {font-family: "IBM Plex Sans", sans-serif; font-weight: 400;}
.section-top h3 {font-family: "IBM Plex Sans", sans-serif;}
.txt-sans {font-family: "IBM Plex Sans", sans-serif;}

@media (max-width: 991.98px) {
    h1, .h1 {font-size: 68px;}
    h2, .h2, .section-hero-blog h1 {font-size: 36px;}
}

@media (max-width: 575.98px) {
    h1, .h1 {font-size: 48px;}
    h2, .h2, .section-hero-blog h1 {font-size: 28px;}
}

.body h1, .body .h1 {font-size: 80px; font-family: "IBM Plex Serif", serif; font-weight: 300;}
.body h2, .body .h2 {font-size: 48px; font-family: "IBM Plex Sans", sans-serif; font-weight: 300;}
.body h3, .body .h3 {font-size: 28px; font-family: "IBM Plex Sans", sans-serif; font-weight: 300;}
.body h4, .body .h4 {font-size: 28px; font-family: "IBM Plex Serif", serif; font-weight: 300;}
.body h5, .body .h5 {font-size: 20px; font-family: "IBM Plex Sans", sans-serif; font-weight: 500;}
.body h6, .body .h6 {font-size: 18px; font-family: "IBM Plex Sans", sans-serif; font-weight: 400;}

@media (max-width: 991.98px) {
    .body h1, .body .h1 {font-size: 68px;}
    .body h2, .body .h2 {font-size: 36px;}
    .body h3, .body .h3 {font-size: 24px;}
    .body h4, .body .h4 {font-size: 24px;}
    .body h5, .body .h5 {font-size: 20px;}
    .body h6, .body .h6 {font-size: 18px;}
}

@media (max-width: 575.98px) {
    .body h1, .body .h1 {font-size: 48px;}
    .body h2, .body .h2 {font-size: 28px;}
    .body h3, .body .h3 {font-size: 20px;}
    .body h4, .body .h4 {font-size: 20px;}
    .body h5, .body .h5 {font-size: 18px;}
    .body h6, .body .h6 {font-size: 16px;}
}

strong {font-weight: 700 !important;}
.gform-field-label {font-weight: 700 !important;}

mark {background: none; color: var(--lightblue); padding: 0 !important;}
.bg-midnightblue mark {background: none; color: var(--ummaize);}
.bg-lightblue mark {background: none; color: var(--ummaize);}
.bg-primary mark {background: none; color: var(--ummaize);}

sup {font-size: .5em; top: -.75em;}

.txt-umblue {color: var(--umblue) !important;}
.txt-ummaize {color: var(--ummaize) !important;}
.txt-lightblue {color: var(--lightblue) !important;}

/* Buttons and Links  ################################################### */

.btn {font-size: 18px; line-height: 28px; padding: 15px 30px; border-radius: 29px; border: none !important;}
.btn-sm {font-size: 12px; line-height: 28px; padding: 0 15px; border-radius: 14px;}

.text-center .btn.mb-2 {margin: 0 15px 15px 15px;}
.text-start .btn.mb-2 {margin: 0 15px 15px 0;}
.text-center .btn.mb-4 {margin: 0 15px 30px 15px;}
.text-start .btn.mb-4 {margin: 0 15px 30px 0;}

.btn-primary {background-color: var(--ummaize) !important; color: var(--umblue) !important; border: 1px solid var(--ummaize) !important;}
.btn-primary:hover {background-color: var(--lightyellow) !important; color: var(--white) !important; border: 1px solid var(--lightyellow) !important;}

.btn-secondary {background-color: var(--white) !important; color: var(--umblue) !important; border: 1px solid var(--lightgrey) !important;}
.btn-secondary:hover {background-color: var(--lightyellow) !important; color: var(--white) !important; border: 1px solid var(--lightyellow) !important;}

.btn-third{background-color: var(--umblue) !important; color: var(--white) !important; border: 1px solid var(--umblue) !important;}
.btn-third:hover {background-color: var(--lightyellow) !important; color: var(--white) !important; border: 1px solid var(--lightyellow) !important;}

.btn-link {padding: 0; color: var(--lightblue) !important; text-decoration: none !important;}
.btn-link:hover {color: var(--lightblue) !important; text-decoration: underline !important;}

.bg-primary .btn-link, .bg-hover-primary:hover .btn-link {color: var(--ummaize) !important; }
.bg-primary .btn-link:hover, .bg-hover-primary:hover .btn-link:hover {color: var(--white) !important;}

.bg-secondary .btn-link, .bg-hover-secondary:hover .btn-link {color: var(--umblue) !important; }
.bg-secondary .btn-link:hover, .bg-hover-secondary:hover .btn-link:hover {color: var(--normblue) !important;}

.bg-midnightblue .btn-link, .bg-hover-midnightblue:hover .btn-link {color: var(--ummaize) !important; }
.bg-midnightblue .btn-link:hover, .bg-hover-midnightblue:hover .btn-link:hover {color: var(--white) !important;}

.bg-lightblue .btn-link, .bg-hover-lightblue:hover .btn-link {color: var(--ummaize) !important; }
.bg-lightblue .btn-link:hover, .bg-hover-lightblue:hover .btn-link:hover {color: var(--white) !important;}

.bg-white .btn-link, .bg-hover-white .btn-link {color: var(--umblue) !important;}
.bg-white .btn-link:hover, .bg-hover-white:hover .btn-link:hover {color: var(--normblue) !important;}

.bg-lightgrey .btn-link, .bg-hover-lightgrey .btn-link {color: var(--umblue) !important;}
.bg-lightgrey .btn-link:hover, .bg-hover-lightgrey:hover .btn-link:hover {color: var(--normblue) !important;}

.bg-darkgrey .btn-link, .bg-hover-darkgrey .btn-link {color: var(--white) !important;}
.bg-darkgrey .btn-link:hover, .bg-hover-darkgrey:hover .btn-link:hover {color: var(--ummaize) !important;}

.text-start .btn-link {text-align: left !important;}
.btn-link i {margin-left: 10px;}

.btn-dropdown {position: relative; font-size: 16px; line-height: 20px; padding: 10px 30px 10px 15px; border-radius: 5px; white-space: normal; }
.btn-dropdown::after{position: absolute; right: 15px; top: 18px;}

.gform_button {font-size: 18px !important; line-height: 28px !important; padding: 15px 30px !important; min-width: 200px !important; border-radius: 29px !important; background-color: var(--umblue) !important; color: var(--white) !important; border: 1px solid var(--umblue) !important;}
.gform_button:hover {background-color: var(--lightyellow) !important; color: var(--white) !important; border: 1px solid var(--lightyellow) !important;}

#footer .gform_button {font-size: 12px !important; line-height: 28px !important; padding: 0px 15px !important; min-width: 200px !important; border-radius: 19px !important; background-color: var(--ummaize) !important; color: var(--umblue) !important; border: 1px solid var(--ummaize) !important;}
#footer .gform_button:hover {background-color: var(--lightyellow) !important; color: var(--white) !important; border: 1px solid var(--lightyellow) !important;}

/* Layout Header ################################################### */

#header-links li {padding-left: 15px; line-height: 28px; color: var(--normblue);}
#header-links li a {text-decoration: none !important; font-weight: bold;}
#header-links li a.btn-icon {padding: 0; font-size: 18px;}
#header-links li a.btn-link {padding: 0; font-size: 16px; font-weight: 500; color: var(--white) !important;}
#header-links li a.btn-link:hover {color: var(--ummaize) !important;}
#header-links li a:hover {text-decoration: none !important;}
#header-links li.header-links-break {color: var(--lightblue) !important;}
#header-links > li.header-links-break ~ li.header-links-break {color: var(--white) !important;}

#header-hamburger a {font-size: 24px; line-height: 30px;}
.offcanvas-header {display: block;}
.offcanvas-header a {font-size: 24px; line-height: 30px; color: var(--ummaize) !important;}
.offcanvas-header a:hover {color: var(--white) !important;}
#header-links-offcanvas a.btn {font-weight: bold;}
#header-links-offcanvas a.off-link {display: inline-block; font-size: 16px; color: var(--white)!important; text-decoration: none !important;}
#header-links-offcanvas a.off-link:hover {color: var(--ummaize) !important; text-decoration: none !important;}
#header-links-offcanvas a.off-link-link {padding-left: 15px; margin-left: 15px; border-left: 1px solid var(--midnightblue) !important;}

#menu-main {list-style: none; padding: 0; margin: 0;}
#menu-main a {font-size: 14px; line-height: 25px; font-weight: 500; font-family: "IBM Plex Sans Condensed", sans-serif;}
#menu-main a:hover {opacity: 0.8;}
#menu-main ul .caret-line {position: absolute; display: block; height: 46px; width: 1px; top: 0; right: 46px; line-height: 46px;}
#menu-main li {position: relative;}
#menu-main ul {display: none; list-style: none; padding: 0; margin: 0; text-align: left; background-color: var(--white);}
#menu-main ul.active {display: block;}
#menu-main .sub-menu-2 {background-color: var(--umblue);}
#menu-main .sub-menu-3 {background-color: var(--umblue);}
#menu-main .nav-item-0 .sub-menu-1.active {display: block;}
#menu-main .nav-link-0 {padding: 10px 50px 10px 15px; text-transform: uppercase;}
#menu-main .nav-link-1 .caret-line {background: transparent;}
#menu-main .nav-link-1 {padding: 10px 50px 10px 30px; background-color: var(--midnightblue); color: var(--white) !important; border-top: 1px solid var(--normblue);}
#menu-main .nav-link-1 .caret-line {background: var(--normblue);}
#menu-main .nav-link-2 {padding: 10px 50px 10px 45px; background-color: var(--white); color: var(--umblue) !important; border-top: 1px solid var(--lightgrey);}
#menu-main .nav-link-2 .caret-line {background: var(--lightgrey);}
#menu-main .nav-link-3 {padding: 10px 50px 10px 60px; background-color: var(--bone); color: var(--lightblue) !important; border-top: 1px solid var(--lightgrey);}
#menu-main .nav-link-3 .caret-line {background: var(--lightgrey);}
#menu-main .caret {position: absolute; display: block; height: 45px; width: 45px; top: 0; right: 0; line-height: 45px; text-align: center; transition-duration: .5s; -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg);}
#menu-main .caret:hover {-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg);}
#menu-main .caret.active {-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg);}

#menu-main ul .caret-line {position: absolute; display: block; height: 46px; width: 1px; top: 0; right: 46px; line-height: 46px; background: var(--midnightblue);}

@media (max-width: 1399.98px) and (min-width:1200px) {
    #menu-main .nav-link-0 span {display: none;}
    #menu-main .nav-link-0 span.caret {display: block;}
}

@media (max-width: 1199.98px) {

    header#header {position: fixed !important; top: 0; right: 0; left: 0; width: 100%; z-index: 999999;}
    div#wrap {padding-top: 55px;}

    #header-main {border-bottom: 8px solid var(--ummaize);}
    #header-menu.bg-secondary {background-color: var(--umblue) !important; color: var(--ummaize) !important;}

    #menu-main {display: block; background-color: var(--white); border-bottom: 1px solid var(--midnightblue);}
    #menu-main .nav-item {display: block;}
    #menu-main .nav-link-0 {background-color: var(--umblue) !important; color: var(--ummaize) !important; border-top: 1px solid var(--midnightblue); text-align: left;}
    #menu-main .nav-link-0 .caret-line {position: absolute; display: block; height: 46px; width: 1px; top: 0; right: 46px; line-height: 46px; background: var(--midnightblue);}
    #menu-main .caret {width: 45px; -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg);}
    #menu-main .caret:hover {-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg);}
    #menu-main .caret.active {-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg);}
}

@media (min-width: 1200px) {
    #menu-main .nav-item-0 .sub-menu-1 {position: absolute; top: 45px; left: 0; width: 350px; border-radius: 0 0 5px 5px; box-shadow: 0 1px 6px rgba(0,0,0, .35); z-index: 9999;}
    #menu-main .nav-item-0:nth-last-child(-n+2) .sub-menu-1 {left: auto; right: 0;}

    #menu-main .nav-item-0:hover .sub-menu-1 {display: block;}
    #menu-main .nav-link-0 {padding: 10px 20px 10px 0; margin-right: 20px; transition: 0s;}
    #menu-main .nav-link-1 {padding: 10px 50px 10px 15px;}
    #menu-main .nav-link-2 {padding: 10px 50px 10px 30px;}
    #menu-main .nav-link-3 {padding: 10px 50px 10px 45px;}
    #menu-main .nav-link-0 .caret {width: 20px; right: 20px; -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg);}
}

/* Layout Breadcrumbs ################################################### */

.section-breadcrumbsa {color: var(--umblue); text-decoration: none;}
.section-breadcrumbs a:hover {color: var(--normblue); text-decoration: underline;}

/* Layout Footer ################################################### */

#footer {font-size: 14px; line-height: 18px;}
#footer a {text-decoration: none !important;}
#footer-info li {position: relative; padding-bottom: 16px;}
#footer-info li .footer-info-icon {position: absolute; display: block; width: 40px; text-align: center;}
#footer-info li .footer-info-text {display: block; padding-left: 45px;}
#footer hr {color: var(--midnightblue); opacity: 1;}
#footer .gform_validation_errors {display: none !important;}
#footer .gfield label {color: var(--white) !important;}
#footer .validation_message {color: var(--white) !important;}
#footer legend.gfield_label {color: var(--white) !important;}
#footer .gfield_required {color: var(--white) !important;}

#menu-subfooter {display: inline-block; margin: 0;}
#menu-subfooter li {display: inline-block; padding-left: 12px;}
#menu-subfooter li a {display: block; padding-left: 12px; border-left: 1px solid var(--white);}

#menu-social {font-size: 20px;}

@media (max-width: 1199.98px) {
    #menu-subfooter {display: block;}
    #menu-subfooter li:first-child {padding-left: 0;}
    #menu-subfooter li:first-child a {padding-left: 0; border-left: none;}
}
@media (max-width: 767.98px) {
    #menu-social.justify-content-center {justify-content: left !important;}
}

#scroll-to-top {display:none; position:fixed; bottom:120px; right:15px; cursor:pointer; z-index:1045; width: 48px; height: 48px; font-size: 24px; line-height: 42px; padding-bottom: 6px; border: 2px solid var(--umblue); border-radius: 24px; background: var(--ummaize); color: var(--umblue); text-align: center;}
#scroll-to-top:hover {background: var(--lightyellow); color: var(--white);}

/* Layout Main ################################################### */

main {min-height: 500px; background-repeat: no-repeat; background-position: top center;}


/* Page Components ################################################### */

.border {border-color: var(--lightgrey);}

.col-icon img {height: 60px;}

.min-height-image {min-height: 480px;}

.rounded-bottom-end {border-radius: 0 0 60px 0;}
.rounded-bottom-start {border-radius: 0 0 0 60px;}
.rounded-top-end {border-radius: 0 60px 0 0;}
.rounded-top-start {border-radius: 60px 0 0 0;}

.col-line {position: absolute; bottom: 15px; max-width: 75%;}
.col-line-bottom-start {left: 0;}
.col-line-bottom-end {right: 0;}

.bg-pattern-cube {background-image: url('/wp-content/themes/cop/assets/images/bg-lg-cube-pattern.svg');}
.bg-pattern-anim-chain {background-image: url('/wp-content/themes/cop/assets/images/anim-chain.svg');}
.bg-pattern-anim-branch {background-image: url('/wp-content/themes/cop/assets/images/anim-branch.svg');}
.bg-pattern-anim-molecule {background-image: url('/wp-content/themes/cop/assets/images/anim-molecule.svg');}

/* Hero Component ################################################### */

.section-hero .align-items-center {min-height: 640px;}
.home .section-hero .align-items-center {min-height: 840px;}
.home .section-hero {margin-bottom: 60px;}

.section-hero .bg-video {position: absolute; top: 0; bottom: 0; left: 0; right: 0; width:100%; height:100%; margin: 0; overflow: hidden;}
.section-hero .bg-video-in {position: absolute; top: 50%; left: 50%; width: auto; height: auto; min-width: 100%; min-height:100%; filter:opacity(80%); -webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);}
.section-hero .bg-video-content {position: relative;}

.section-hero mark {color: var(--ummaize);}

.section-hero-short .align-items-center {min-height: 300px;}
.section-hero-blog .align-items-center {min-height: 300px;}


@media (max-width: 575.98px) {
    .home .section-hero .align-items-center {min-height: 640px;}
}

/* General Component ########################################################################################## */

/* Box Border Ribbon Subcomponent ########################################### */

.border-ribbon-yellow {border-top-color: #fbc705 !important;}
.border-ribbon-blue {border-top-color: #2f65a7 !important;}
.border-ribbon-purple {border-top-color: #575294 !important;}
.border-ribbon-green {border-top-color: #00b5af !important;}

.border-ribbon {position: relative;}
.ribbon {position: absolute; top: -3px; right: 15px;}

/* Icon Left Subcomponent ################################################### */

.subsection-icon-start .col-box {position: relative; padding-left: 130px !important;}
.subsection-icon-start .col-icon-circle {position: absolute; top: 0; left: 0;}
.subsection-icon-start .col-icon-circle img {max-width: 110px;}
.subsection-icon-start h4 {font-family: "IBM Plex Sans", sans-serif;}

/* Icon List Subcomponent ################################################### */

.subsection-icon-list .row-list {position: relative; padding-left: 50px !important;}
.subsection-icon-list .row-list-icon {position: absolute; top: 0; left: 0; width: 40px;}
.subsection-icon-list .row-list-text {min-height: 40px;}

/* Card Image w/Title Subcomponent ################################################### */

.subsection-card-image-title .col-image {height: 400px;}

@media (max-width: 1199.98px) {
    .subsection-card-image-title .col-image {height: 340px;}
}

@media (max-width: 767.98px) {
    .subsection-card-image-title .col-image {height: 400px;}
}

/* End of General Component ################################################################################### */

/* Fifty-Fifty Component ################################################### */

.subsection-fifty .col-box {min-height: 450px;}
.subsection-fifty h3 {font-size: 48px;}

@media (max-width: 991.98px) {
    .subsection-fifty h3 {font-size: 40px;}
}

@media (max-width: 575.98px) {
    .subsection-fifty h3 {font-size: 32px;}
}

/* Thirty-Sixty Component ################################################### */

.section-thirty_sixty .border-end {border-color: var(--ummaize) !important;}

.section-thirty_sixty .body ul {
    list-style: none;
}
.section-thirty_sixty .body ul li {
    position: relative;
    margin-bottom: 10px;
}
.section-thirty_sixty .body ul li:before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    position: absolute;
    left: -1.5em;
    top: 0.125em;
    font-weight: 900;
    color: var(--ummaize);
}

@media (max-width: 575.98px) {
    .section-thirty_sixty .border-end.col-thirty {border-right: none !important;}
    .section-thirty_sixty .border-end.col-thirty .px-3 {border-left: 1px solid var(--ummaize);}
}

/* Horizontal Accordion Component ################################################### */

.subsection-accordion .accordion-box {min-height: 380px;}

.bg-pattern-sm {background-repeat: no-repeat; background-position: top right;}
.bg-pattern-sm-branch {background-image: url('/wp-content/themes/cop/assets/images/pattern-branch.svg');}
.bg-pattern-sm-chain {background-image: url('/wp-content/themes/cop/assets/images/pattern-chain.svg')}
.bg-pattern-sm-molecule {background-image: url('/wp-content/themes/cop/assets/images/pattern-molecule.svg')}
.bg-pattern-sm-particle {background-image: url('/wp-content/themes/cop/assets/images/pattern-particle.svg')}

.subsection-accordion .col-org {flex: auto; transition: width 0.2s;}
.subsection-accordion .col-org p {display: none;}
.subsection-accordion .bg-img {position: absolute; top: 0; bottom: 0; left: 0; right: 0; width:100%; height:100%; margin: 0; overflow: hidden; opacity: 0; transition: opacity 0.2s;}
.subsection-accordion .col-open .bg-img {opacity: 1;}

@media (max-width: 1199.98px) {
    .subsection-accordion .col-org {width: 100% !important;}
    .subsection-accordion .col-close {width: 100% !important;}
    .subsection-accordion .col-open {width: 100% !important;}
    .subsection-accordion .accordion-box {min-height: 280px;}
}

/* Statistics Component ################################################### */

.section-statistics .border-end {border-color: var(--ummaize) !important;}
.home .section-statistics h2 {color: var(--darkgrey);}
.section-statistics .h2 {font-size: 64px;}
.subsection-stats .border-end:first-child {border-left: 1px solid var(--ummaize);}

@media (max-width: 1199.98px) {
    .subsection-stats .h2 {font-size: 42px;}
}

@media (max-width: 767.98px) {
    .home .section-statistics h2 {}
    .subsection-stats  .h2 {font-size: 96px;}
    .subsection-stats  h5 {font-size: 36px;}
    .subsection-stats .border-end {border: none !important;}
    .subsection-stats .col-box {border-left: 1px solid var(--ummaize); border-right: 1px solid var(--ummaize);}
}

/* Video Component ################################################### */

.section-video .container-lg-medium {max-width: 960px}
.section-video .container-lg-small {max-width: 768px}

.section-video .col-line {bottom: 45px;}

/* People Slider Component ################################################### */

.carousel-indicators button {background-color: var(--ummaize) !important;}

/* FAQs Component ################################################### */

.faq-q a {padding-right: 88px !important; position: relative; }
.faq-toggle {position: absolute; display: block; top: 11px; right: 24px; width: 40px; height: 40px; border: 2px solid #ccc; border-radius: 20px; text-align: center; font-size: 32px; line-height: 38px; color: #ccc !important;}
.faq-q a:hover .faq-toggle {color: var(--lightblue) !important;}

.faq-q a.collapsed .fa-minus {display: none;}
.faq-q a .fa-plus {display: none;}
.faq-q a.collapsed .fa-plus {display: inline-block;}

.faq-step-number {display: inline-block; position: relative; width: 50px; height: 50px; font-size: 20px; line-height: 20px; font-weight: bold; color: var(--ummaize) !important; padding: 15px 0; border-color: var(--normblue) !important; background-color: var(--normblue) !important; transition-duration: .5s; text-decoration: none !important;}
.faq-step-number:hover {color: var(--normblue) !important; border-color: var(--ummaize) !important; background-color: var(--ummaize) !important;}
.faq-step-number.active {color: var(--normblue) !important; border-color: var(--ummaize) !important; background-color: var(--ummaize) !important;}

.faq-a {color: var(--charcoal) !important;}

.col-step-line {margin: 0 auto; height: 2px; background: var(--lightgrey);}
.faq-step {position: relative; top: -27px;}

.bg-bone .faq.bg-bone {background-color: var(--white) !important;}

/* Circles Component ################################################### */

.subsection-circles .border {border-color: var(--bone) !important;}
.subsection-circles .border-top {border-color: var(--grey) !important;}

.col-circles {height: 700px;}

.c-l-1 {width: 100%; height: 500px;}
.c-l-2 {width: 900px; height: 900px; border-width: 15px !important;}
.c-l-3 {width: 660px; height: 660px;}
.c-l-4.border {width: 600px; height: 600px; border-color: var(--grey) !important;}
.c-l-5 {width: 500px; height: 500px; border-width: 25px !important;}
.c-l-6 {display: none; width: 320px; max-height: 320px;}
.c-l-6.active {display: block;}
.c-l-7 {width: 660px; height: 0;}
.c-l-7 div {height: 0;}
.c-l-7-c.border {position: relative; top: -30px; width: 60px; height: 60px; font-size: 14px; line-height: 16px; font-style: italic; color: var(--lightblue) !important; padding: 12px 0; border-color: var(--grey) !important; background-color: var(--bone) !important; transition-duration: .5s;}
.c-l-7-c.border:hover {color: var(--white) !important; border-color: var(--lightblue) !important; background-color: var(--lightblue) !important;}
.c-l-7-c.border.active {color: var(--white) !important; border-color: var(--lightblue) !important; background-color: var(--lightblue) !important;}

@media (max-width: 767.98px) {
    .c-l-7-c.border {transform: none !important;}
}

/* Posts ################################ */

.row-post-list {border-bottom: 1px dashed var(--midgrey);}
.row-post-list h3 a {text-decoration: none !important;}

.sidebar-roll li {padding: 5px 0; border-bottom: 1px dashed var(--midgrey);}
.sidebar-roll li a {text-decoration: none !important;}

.screen-reader-text {display: none;}
.nav-links .page-numbers {display: inline-block; width: 30px; height: 30px; text-align: center; font-size: 16px; line-height: 16px; font-weight: bold; color: var(--umblue) !important; padding: 7px 0; border-radius: 50%; border-color: var(--lightgrey) !important; background-color: var(--lightgrey) !important; transition-duration: .5s; text-decoration: none !important;}
.nav-links .page-numbers:hover {color: var(--white) !important; border-color: var(--lightblue) !important; background-color: var(--lightblue) !important;}
.nav-links .page-numbers.current {color: var(--white) !important; border-color: var(--lightblue) !important; background-color: var(--lightblue) !important;}

#custom-calendar {width: 100%; text-align: center; min-height: 360px; margin-bottom: 30px;}
#calendar-header {display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;}
#month-year {font-weight: bold; font-size: 15px; padding-top: 7px; margin-bottom: 5px;}
#calendar-grid {display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px;}
.calendar-day {border: 1px solid #ddd; padding: 10px 2px; font-size: 14px; text-align: center;}
.event-day {background-color: var(--sunyellow); font-weight: bold; cursor: pointer;}
.event-day:hover {background-color: var(--lightyellow);}

@media (max-width: 767.98px) {
    .row-post-list .ratio-1x1 {--bs-aspect-ratio: 75%;}
}

/* People ################################## */

.people-name {border-bottom: 1px dashed var(--midgrey);}
.people-alphabet {border-bottom: 1px dashed var(--midgrey);}
.people-social {font-size: 30px;}
.single-people #publications .media {display: none !important;}
.single-people #publications img {display: none !important;}
.single-people #research .media {display: none !important;}
.single-people #research .element-invisible {display: none !important;}
.single-people #research img {display: none !important;}
.research-topics li {font-size: 14px;}
.research-topics li p {margin-bottom: 5px;}

/* Labs ################################### */


/* Courses ################################ */

.row-course-list {border-bottom: 1px dashed var(--midgrey);}
.course-close {display: none}
.collapsed .course-close {display: inline}
.course-open {display: inline}
.collapsed .course-open {display: none}
.post-type-archive-course .section-hero .align-items-center {min-height: 300px;}

.program-any #program-any {display: block !important; }
.program-pharmd #program-pharmd {display: block !important; }
.program-pharmd-elective #program-pharmd-elective {display: block !important; }

@media (max-width: 575.98px) {
    .post-type-archive-course .section-hero .align-items-center {min-height: 640px;}
}

/* Drugs ###################################### */

.section-drugs .td-1 {width: 330px;}
.section-drugs .td-2 {width: 330px;}
.section-drugs .td-3 {width: 180px;}
.section-drugs .td-4 {width: auto;}
@media (max-width: 1399.98px) {
    .section-drugs .td-3 {width: 100px;}
}
@media (max-width: 1199.98px) {
    .section-drugs thead {display: none !important;;}
    .section-drugs .table tbody tr {display: block !important;}
    .section-drugs .table tbody td {display: block !important;}
    .section-drugs .td-1 {width: auto;}
    .section-drugs .td-2 {width: auto;}
    .section-drugs .td-3 {width: auto;}
    .section-drugs .td-4 {width: auto;}
}

/* Search ##################################### */

.row-search-list {border-bottom: 1px dashed var(--midgrey);}

/* OTHER ################################################################### */

@media (min-width: 768px) {
    .section-sidebar {position: relative; top: 0; left: auto; right: 12px; width: 90%; margin-left: auto; margin-right: 0;}
}

.element-invisible {display: none !important;} /*from drupal*/

ul.checkmark {
    list-style: none;
}
ul.checkmark li {
    position: relative;
    margin-bottom: 10px;
}
ul.checkmark li:before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    position: absolute;
    left: -1.5em;
    top: 0.125em;
    font-weight: 900;
    color: var(--ummaize);
}

.slick-dots {
    left: 0;
}
.slick-dots li {
    border-radius: 6px;
    width: 12px;
    height: 12px;
    background: var(--grey) !important;
    color: var(--grey) !important;
    transition: width 0.2s;
}

.slick-dots li:hover {
    width: 12px;
    height: 12px;
    background: var(--ummaize) !important;
    color: var(--ummaize) !important;
}

.slick-dots li button {
    border-radius: 6px;
    width: 12px;
    height: 12px;
    padding: 0;
    cursor: pointer;
    color: var(--grey) !important;
    background: var(--grey) !important;
    transition: width 0.2s;
}

.slick-dots li:hover button {
    width: 12px;
    height: 12px;
    padding: 0;
    color: var(--ummaize) !important;
    background: var(--ummaize) !important;
}

.slick-dots li.slick-active {
    border-radius: 6px;
    width: 30px;
    height: 12px;
    padding: 0;
    color: var(--ummaize) !important;
    background: var(--ummaize) !important;
}

.slick-dots li.slick-active button {
    border-radius: 6px;
    width: 30px;
    height: 12px;
    padding: 0;
    color: var(--ummaize) !important;
    background: var(--ummaize) !important;
}

.slick-dots li button::before {
    opacity: 0 !important;
}

.carousel-indicators {
    display: block !important;
}
.carousel-indicators [data-bs-target] {
    border-radius: 6px;
    flex: auto;
    width: 12px;
    height: 12px;
    padding: 0;
    margin-right: 5px;
    margin-left: 5px;
    background-color: #fff;
    border-top: 0;
    border-bottom: 0;
    opacity: 1;
    transition: width 0.2s;
}
.carousel-indicators [data-bs-target].active {
    width: 30px;
}

.carousel-indicators button {
    background-color: var(--grey) !important;
}

.carousel-indicators button:hover {
    background-color: var(--ummaize) !important;
}

.carousel-indicators button.active {
    background-color: var(--ummaize) !important;
}

#gmap {height: 300px; width: 100%;}

.body img {max-width: 100%;}
.body img.alignleft {
    float: left;
    margin: 10px 20px 20px 0;
    max-width: 50% !important;
}

.body img.alignright {
    float: right;
    margin: 10px 0 20px 20px;
    max-width: 50% !important;
}

.body img.aligncenter {
    display: block;
    margin: 0 auto;
    padding: 10px 0 20px 0;
}

.body::after {
    display: block;
    clear: both;
    content: "";
}

.wp-caption {
    text-align: center;
    margin: 15px auto;
    max-width: 100%;
}

.wp-caption img {
    margin: 0;
    max-width: 100%;
    height: auto;
}

.wp-caption-text {
    font-size: 14px;
    color: #555;
    margin-top: 5px;
    line-height: 1.4;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}