@import url('https://www.reynolds.edu/_files/css/jsr-styles.css');
 :root {
     --reynolds-red: #9D2235;
     --reynolds-red-50: #9D223580;
     --red-light: #C12F41;
     --red-dark: #76232F;
     --green-light: #279989;
     --green-dark: #1D6960;
     --purple-light: #722257;
     --purple-dark: #4D173B;
     --orange-light: #D75A1B;
     --orange-dark: #B64B16;
     --blue-light: #256BA2;
     --blue-dark: #254A5D;
     --black: #2d2926;
     --silver-dark: #75787b;
     --silver: #b1b3b3;
     --silver-light: #ebebeb;
     --white: #fcfcfc;
    --transparent: rgba(0,0,0,0);

}
 .ft_card.card .btn, .ft_card.card .btn-rounded {
     display: inline-block;
     margin: 0 0 0.5em;
     padding: var(--sm) var(--lg);
     line-height: 1.2;
     text-decoration: none;
     border: none;
     cursor: pointer;
     border-radius: 0;
     -webkit-transition: all 0.5s ease-out;
     -moz-transition: all 0.5s ease-out;
     -o-transition: all 0.5s ease-out;
     transition: all 0.5s ease-out;
    align-self: center;
    margin-bottom: 0;
}

/*Hide the Logo*/
.row.ft_navigation.sticky-top>.col-auto {
    display: none;
}

.nav-tabs .nav-link.active {
    color: var(--reynolds-red);
    border-color: var(--reynolds-red);
}

.nav-tabs .nav-link.active:hover {
    background-color: var(--transparent);
    color: var(--black);
    border-color: var(--black);
}

.nav-link:hover, 
.nav-link:focus,
.nav-tabs .nav-link:hover{
    background-color: var(--transparent);
    color: var(--reynolds-red);
}

.form-outline {
    --mdb-form-outline-select-notch-border-color: var(--black);
}

.form-outline .form-control:focus~.form-label {
    color: var(--black);
}

.form-outline .form-control:focus~.form-notch .form-notch-leading {
    border-color: var(--black);
    box-shadow: -1px 0 0 0 var(--black), 0 1px 0 0 var(--black), 0 -1px 0 0 var(--black);
}

.form-outline .form-control:focus~.form-notch .form-notch-middle {
    border-color: var(--black);
    box-shadow: 0 1px 0 0 var(--black);
    border-top: 1px solid rgba(0, 0, 0, 0);
}

.form-outline .form-control:focus~.form-notch .form-notch-trailing {
    border-color: var(--black);
    box-shadow: 1px 0 0 0 var(--black),0 -1px 0 0 var(--black),0 1px 0 0 var(--black);
}

.header__main {
    background: var(--reynolds-red);
    display: flex;
    flex-wrap: wrap;
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%)
}

.header__main--left {
    width: 36%;
    text-align: right;
    padding: 0 4%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center
}

@media screen and (max-width: 875px) {
    .header__main--left {
        width:100%;
        padding: 2em;
        text-align: center
    }
}

.header__logo {
    width: 100%;
    height: auto;
    display: block;
    margin: clamp(10%, calc(10% + (20 - 10) * ((1920px - 100vw) / (1920 - 875))), 20%) 0;
}

.header__logo img {
    width: 100%;
    height: auto;
    display: block
}

@media screen and (max-width: 875px) {
    .header__logo {
        width:86%;
        max-width: 250px;
        height: auto;
        margin: 0 auto;
        display: inline-block
    }
}
.header__main--right {
    width: 64%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden
}

@media screen and (max-width: 875px) {
    .header__main--right {
        width:100%;
        padding: 0
    }
}

.header__main--figure {
    overflow: hidden;
    width: 100%;
    margin: 0;
    position: relative;
    height: 100%
}

.header__main--figure img {
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block
}

@media screen and (max-width: 875px) {
    .header__main--figure {
        height: clamp(130px, calc(130px + (275 - 130) * ((100vw - 320px) / (875 - 320))), 275px);
    }
}

.ft_footer {
    background-color: var(--reynolds-red);
    padding: 60px 30px;
    display: flex;
    justify-content: center;
    align-items: center;
        width: 100vw;
    position: relative;
    left: 50%;
    transform: translatex(-50%);
}

.footer-logo {
    width: 100%;
    max-width: clamp(250px, calc(200px + 20vw), 400px);
    height: auto;
    display: block;
}