@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400&family=Roboto+Condensed:wght@400;700&family=Roboto:wght@400;700&display=swap');

:root {
   --main: #30415b;
   --text-on-main-bg: #fcfcfc; 
   --background-base: #fbfcfd;
   --background-body: #f0f0f0;
   --header-text-base: #3d4551;
   --link-base: #345d96;
   --link-base-sull-bull: #f0f0f0;
   /* --research-card-header: #074d58;
   --library-card-header: #b66128;
   --csu-card-header: #fbd272; */
   --bs-dark: #343a40;
}

body {
	font-family: 'Open Sans', sans-serif;
	font-display: swap;
    background-color: var(--background-base);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'Roboto Condensed', sans-serif;
	font-display: swap;
	color: var(--header-text-base);
}

#rightSide .badge-primary a {
    color: var(--link-base-sull-bull) !important;
    font-weight: bold;
}


#rightSide a {
    color: var(--link-base);
    font-weight: bold;
}

#rightSide a.animated {
    position: relative;
    text-decoration: none;
}

#rightSide a.animated:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: -1px;
    left: 0;
    background-color: var(--link-base);
    visibility: hidden;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

#rightSide a.animated:focus:before,
#rightSide a.animated:hover:before {
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

.row-flex {
    display: flex;
    flex-wrap: wrap;
}

div#mobileHeaderNav {
    margin-top: -2rem;
}

.card-text {
    font-family: 'Open Sans', sans-serif;
}

.expand.collapsed>.fa-caret-down {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    transition: all 300ms ease-in-out;
}

.expand>.fa-caret-down {
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
    transition: all 300ms ease-in-out;
}
.expand.collapsed>.fa-chevron-down {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    transition: all 300ms ease-in-out;
}

.expand>.fa-chevron-down {
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
    transition: all 300ms ease-in-out;
}


/******************
LEFT NAVIGATION
*******************/

#sidebar {
    background: white !important;
    color: var(--bs-dark) !important;
    border-right: 1px solid rgba(0, 0, 0, .1);
}

#sidebar>.bootstrap-vertical-nav>#sidebar-header {
    padding: 20px;
    background: white !important;
}
#researchMenu  a.nav-link{
    font-family: 'Roboto', sans-serif;
}
.second-level {
    padding-left: 1.25rem;
}

.third-level {
    padding-left: 1.8rem;
}

.fourth-level {
    padding-left: 2rem;
}

a.nav-link {
    color: var(--bs-dark);
}

a.nav-link:hover,
a.nav-link:focus {
    background-color: var(--bs-dark);
    color: white !important;
}

.header .menu-toggle {
    font-size: 24px;
    padding: 12px 24px;
    vertical-align: middle;
    color: var(--header-text-base);
    margin: 0;
    float: none;
    display: none;
}

.menu-toggle:hover,
.menu-toggle:active {
    color: var(--bs-dark);
}

.submenu>.nav-link {
    font-size: 0.85rem;
}


/***********************************************
BRANDING CARDS FOR WHO WE ARE AND WHAT WE DO
************************************************/

.branding-cards h2 {
    font-size: 1.5rem;
}

.card.subject-card {
    background-color: var(--background-base);
    box-shadow: none;
}

.card-footer.subject-card-footer{
    background-color: var(--background-base);
}

.card-custom-avatar img {
    background-color: white;
    width: 85px;
    height: 85px;
}

.card-custom .card-body {
    overflow-y: auto;
    padding-top: 1.25rem;
    padding-right: 1rem;
    padding-left: 1rem;
    padding-bottom: 0.3rem;
}

.card-custom .card-footer {
    background: inherit;
    border-color: inherit;
    padding-top: 0.25rem;
    padding-bottom: 0.5rem;
}

.card-custom .card-footer a {
    color: var(--link-base) !important;
    font-weight: 700;
    text-decoration: none;
}


/********************************
CONTENT/PROGRAMS SUBJECT CARDS
********************************/

section {
    padding-top: 1.5rem;
}


.content-programs .card-body>.row.m-0 {
    min-height: 240px;
}

.content-programs .subject-icon {
    font-size: 4.2rem;
    color: var(--header-text-base);
    padding-left: 0.6rem;
}

.content-programs .subject-icon-mobile {
    font-size: 4.2rem;
    color: var(--header-text-base);
    background-color: var(--background-base);
}

.card-footer {
    border: none;
    background-color: transparent;
}

.card-footer:last-child {
    border-radius: 0;
}


/***************************
     MEDIA QUERIES
*****************************/

@media screen and (max-width: 767px) {
    h4.card-title.text-center.text-sm-left {
        padding-top: 1rem;
    }
    .card-body.p-1 {
        border-left: 1px solid lightgray;
        border-bottom: 1px solid lightgray;
        border-right: 1px solid lightgray;
    }
}

@media screen and (max-width: 768px) {
    .card-custom {
        min-height: 300px;
    }
    .content-programs .subject-icon {
        padding-left: 0.4rem;
    }
    .card-body>.row.m-0 {
        min-height: 230px;
    }
}

@media screen and (max-width: 991px) {
    .header .logo-img {
        max-width: 50%;
    }
    .header .menu-toggle {
        display: block;
        float: right;
    }
    .navbar {
        height: auto;
        min-height: inherit;
    }
    .header .menu-toggle.collapsed {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        transition: all 300ms ease-in-out;
    }
    .header .menu-toggle {
        -webkit-transform: rotate(-180deg);
        -moz-transform: rotate(-180deg);
        -o-transform: rotate(-180deg);
        transform: rotate(-180deg);
        transition: all 300ms ease-in-out;
    }
}

@media (min-width:768px) {
    .row.feature-row [class*='col-']:not(:last-child):after {
        background: #e0e0e0;
        width: 1px;
        content: "";
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        min-height: 70px;
    }
}


/* Creates a vertical nav starting at 768px (sm)  .collapse*/

@media (min-width: 992px) {
    .bootstrap-vertical-nav #researchMenu {
        display: block;
    }
}