:root {
    --dark-blue: var(--midnight-blue);
    --dark-blue-hover: var(--river-blue);
    --dark-blue-hover-color: var(--white);
    --blue: var(--river-blue);
    --blue-hover: var(--midnight-blue);
    --blue-hover-color: var(--white);
    --light-blue: var(--alt-sky-blue);
    --light-blue-color: var(--black);
    --light-blue-hover: var(--ivory);
    --light-blue-hover-color: var(--black);
    --darkest-green: var(--dark-evergreen);
    --darkest-green-hover: var(--evergreen);
    --darkest-green-hover-color: var(--white);
    --dark-green: var(--evergreen);
    --dark-green-color: var(--white);
    --dark-green-hover: var(--dark-evergreen);
    --dark-green-hover-color: var(--white);
    --green: var(--pine-green);
    --green-color: var(var(--white));
    --green-hover: var(--evergreen);
    --green-hover-color: var(--white);
    --light-green: var(--alternate-green);
    --light-green-hover: var(--ivory);
    --light-green-color: var(--black);
    --ivory: var(--ivory);
    --ivory-hover: var(--white);
    --ivory-color: var(--dark-blue);
    --ivory-hover-color: var(--dark-blue);
    --orange: var(--rust);
    --orange-color: var(--white);
    --orange-hover: var(--golden);
    --orange-hover-color: #000;
    --yellow: var(--rays);
    --yellow-color: var(--dark-blue);
    --yellow-hover: var(--ivory);
    --purple: var(--purple-sage);
    --purple-color: var(--white);
    --purple-hover: var(--light-purple);
    --purple-hover-color: var(--dark-blue);
    --light-purple: var(--lavender);
    --off-black: var(--dusk);
    --dark-grey: var(--storm);
    --grey: var(--fog);
    --grey-color: var(--dark-blue);
    --grey-hover: var(--grey);
    --light-grey: var(--cloud);
    --light-grey-hover: var(--grey);
    --white: #fff;
    --black: #000;
    --white-bg-trans: rgba(255,255,255,.9);
    --transparent: transparent;
    --dark-blue-rgb: 5,40,85;
    --blue-rgb: 5,80,140;
    --light-blue-rgb: 30,170,225;
    --dark-green-rgb: 0,100,65;
    --dark-evergreen-rgb: 0,74,46;
    --green-rgb: 5,155,90;
    --light-green-rgb: 5,209,121;
    --orange-rgb: 156,54,5;
    --purple-rgb: 92,51,125;
    --light-purple-rgb: 173,138,214;
    --off-black-rgb: 33,36,41;
    --dark-grey-rgb: 64,71,79;
    --grey-rgb: 184,194,204;
    --light-grey-rgb: 217,229,242;
    --white-rgb: 255,255,255;
    --midnight-blue: #052855;
    --river-blue: #05508c;
    --alt-sky-blue: #63c9ff;
    --evergreen: #006441;
    --dark-evergreen: #004a2e;
    --pine-green: #059b5a;
    --alternate-green: #05D179;
    --ivory: #ebebe1;
    --rust: #9c3605;
    --golden: #cf8500;
    --rays: #f5d129;
    --purple-sage: #5c337d;
    --lavender: #ad8ad6;
    --dusk: #212429;
    --storm: #40474f;
    --fog: #b8c2cc;
    --cloud: #d9e5f2
}

a[role="button"] {
    border-radius: 10px
}

a,a:visited {
    color: var(--blue);
    font-weight: 400;
    text-decoration: underline
}

a:hover,a:focus {
    text-decoration: underline;
    color: var(--dark-blue)
}

body,p {
    color: var(--dark-blue);
    font-family: "Figtree",sans-serif
}

h1,h2,h3,h4,h5 {
    font-family: "Figtree",sans-serif;
    line-height: 1.1
}

h1 {
    color: var(--dark-blue);
    font-size: 3.2rem;
    font-weight: 700
}

h2 {
    font-size: 2.8rem;
    color: var(--dark-blue);
    font-weight: 700;
    margin-top: 20px;
    margin-bottom: 25px
}

h3 {
    font-size: 2.4rem;
    color: var(--dark-blue);
    margin-bottom: 5px
}

h4 {
    font-size: 2rem;
    color: var(--dark-blue)
}

h5 {
    font-size: 1.8rem;
    font-weight: 400;
    color: var(--dark-blue)
}

p {
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 2.8rem
}

.dark-blue-background,.dark-blue-bg {
    background: var(--dark-blue) !important;
    color: var(--white) !important
}

.blue-background,.blue-bg {
    background: var(--blue);
    color: var(--white)
}

.light-blue-background,.light-blue-bg,.brand-blue-bg {
    background: var(--light-blue) !important;
    color: var(--light-blue-color)
}

.dark-green-background,.dark-green-bg {
    background: var(--dark-green) !important;
    color: var(--dark-green-color) !important
}

.green-background,.green-bg {
    background: var(--green);
    color: var(--green-color)
}

.light-green-background,.light-green-bg {
    background: var(--light-green) !important;
    color: var(--light-green-color) !important
}

.yellow-background,.yellow-bg {
    background: var(--yellow) !important;
    color: var(--yellow)
}

.dark-grey-background,.dark-grey-bg {
    background: var(--dark-grey) !important;
    color: var(--white) !important
}

.grey-background,.grey-bg {
    background: var(--grey) !important;
    color: var(--dark-blue)!important
}

.light-grey-background,.light-grey-bg {
    background: var(--light-grey) !important;
    color: var(--dark-blue)
}

.ivory-background,.ivory-bg {
    background: var(--ivory)!important;
    color: var(--dark-blue)!important
}

.dark-purple-background,.dark-purple-bg {
    color: var(--white)!important;
    background: var(--purple)!important
}

.purple-background,.purple-bg {
    color: var(--white)!important;
    background: var(--purple)!important
}

.light-purple-background,.light-purple-bg {
    color: var(--dark-blue)!important;
    background: var(--light-purple)!important
}

.orange-background,.orange-bg {
    background: var(--orange)!important;
    color: var(--orange-color)
}

.light-grey-bg {
    background: var(--light-grey)!important
}

.dark-grey-bg {
    background: var(--dark-grey)!important
}

.primary-blue-bg h1,.blue-bg h1,.dark-blue-bg h1,.dark-green-bg h1,.maroon-bg h1,.dark-purple-bg h1,.purple-bg h1,.primary-blue-bg h2,.blue-bg h2,.dark-blue-bg h2,.dark-green-bg h2,.maroon-bg h2,.dark-purple-bg h2,.purple-bg h2,.primary-blue-bg h3,.blue-bg h3,.dark-blue-bg h3,.dark-green-bg h3,.maroon-bg h3,.dark-purple-bg h3,.purple-bg h3,.primary-blue-bg h4,.blue-bg h4,.dark-blue-bg h4,.dark-green-bg h4,.maroon-bg h4,.dark-purple-bg h4,.purple-bg h4,.primary-blue-bg p,.blue-bg p,.dark-blue-bg p,.dark-green-bg p,.maroon-bg p,.dark-purple-bg p,.purple-bg p,.primary-blue-bg a,.blue-bg a,.dark-blue-bg a,.dark-green-bg a,.maroon-bg a,.dark-purple-bg a,.purple-bg a {
    color: var(--white)
}

.primary-blue-bg a:hover,.blue-bg a:hover,.dark-blue-bg a:hover,.dark-green-bg a:hover,.maroon-bg a:hover,.dark-purple-bg a:hover,.purple-bg a:hover {
    color: var(--white)
}

.roboto {
    font-family: 'Roboto',sans-serif;
    position: relative
}

.roboto.orange {
    color: var(--orange)
}

.roboto.dark-green {
    color: var(--dark-green)
}

.roboto.green {
    color: var(--green)
}

.roboto-large-thin {
    font-size: 6.9rem;
    font-weight: 500;
    font-kerning: normal
}

.roboto-large {
    font-size: 14rem;
    font-weight: 900
}

.roboto-max {
    font-size: 16.2rem;
    font-weight: 700
}

.roboto-med {
    font-size: 10rem;
    letter-spacing: -5px;
    font-weight: 900
}

.btn {
    border-radius: 10px
}

div[class*="button"] a {
    border-radius: 10px
}

.btn-primary {
    background-color: var(--blue)
}

.btn-primary:hover {
    background-color: var(--dark-blue)
}

.button {
    margin: 15px 0;
    font-size: 1.4em;
    line-height: 1.3;
    font-family: "Figtree",sans-serif
}

.button a {
    background: var(--blue);
    border: none;
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    color: var(--white);
    font-family: "Figtree",sans-serif;
    font-size: 1.6rem;
    font-weight: 400;
    min-width: 135px;
    outline: 0;
    padding: 12px 15px;
    text-align: center;
    text-decoration: none
}

.button a:hover,.button a:focus,.button input:hover,.button input:focus,.button.multi-slider.selected>input {
    background: var(--blue-hover);
    color: var(--blue-hover-color);
    text-decoration: none
}

.button a.dark-blue-background {
    background: var(--dark-blue) !important
}

.button a.dark-blue-background:hover,.button.dark-blue-background:hover {
    background: var(--dark-blue-hover) !important
}

.button a.blue-background {
    background: var(--blue) !important
}

.button a.blue-background:hover,.button.blue-background:hover {
    background: var(--blue-hover) !important
}

.button a.light-blue-background,.button.light-blue-background {
    background: var(--light-blue) !important;
    color: var(--light-blue-color);
    font-weight: 700
}

.button a.light-blue-background:hover,.button.light-blue-background:hover {
    background: var(--light-blue-hover) !important
}

.button a.dark-green-background,.button.dark-green-background {
    background: var(--dark-green) !important;
    color: var(--dark-green-color)
}

.button a.dark-green-background:hover,.button.dark-green-background:hover {
    background: var(--dark-green-hover) !important
}

.button a.green-background,.button.green-background {
    background: var(--green) !important;
    color: var(--green-color)!important
}

.button a.green-background:hover,.button.green-background:hover {
    background: var(--green-hover) !important
}

.button a.light-green-background,.button.light-green-background {
    background: var(--light-green) !important;
    color: var(--light-green-color)!important
}

.button a.light-green-background:hover,.button.light-green-background:hover {
    background: var(--light-green-hover) !important
}

.button a.orange-background,.button.orange-background {
    background: var(--orange) !important;
    color: var(--orange-color)!important
}

.button a.orange-background:hover,.button.orange-background:hover {
    background: var(--orange-hover) !important;
    color: var(--orange-hover-color)!important
}

.button a.purple-background,.button.purple-background {
    background: var(--purple) !important;
    color: var(--purple-color)
}

.button a.purple-background:hover,.button.purple-background:hover {
    background: var(--purple-hover) !important
}

.button a.yellow-background,.button.yellow-background {
    background: var(--yellow) !important;
    color: var(--yellow-color)
}

.button a.yellow-background:hover,.button.yellow-background:hover {
    background: var(--yellow-hover) !important
}

.button.dark-grey-background:hover {
    background: var(--grey-hover) !important
}

.button.grey-background:hover {
    background: var(--grey-hover) !important
}

.button.light-grey-background:hover {
    background: var(--light-grey-hover) !important
}

.button.white a {
    background: var(--white);
    color: var(--dark-grey)
}

.button.white a:hover {
    background: var(--light-grey);
    color: var(--light-blue)
}

.button.yellow a {
    background: var(--yellow);
    color: var(--yellow-color)!important
}

.button.yellow a:hover,.button.yellow a:focus {
    background: var(--yellow-hover);
    color: var(--yellow-color)
}

.button.green a {
    background: var(--green);
    color: var(--white)
}

.button.green a:hover,.button.green a:focus {
    background: var(--green-hover);
    color: var(--white)
}

.button.light-green a {
    background: var(--light-green);
    color: var(--black)
}

.button.light-green a:hover,.button.light-green a:focus {
    background: var(--light-green-hover);
    color: var(--black)
}

.button.alert a {
    background: var(--orange);
    color: var(--white)
}

.button.alert a:hover,.button.alert a:focus {
    background: var(--orange-hover);
    color: var(--orange-hover-color)
}

@media(min-width: 600px) {
    h1 {
        color:var(--dark-blue);
        font-size: 4.2rem;
        font-weight: 700
    }

    h2 {
        font-size: 3.4rem;
        color: var(--dark-blue);
        font-weight: 700;
        margin-top: 20px;
        margin-bottom: 25px
    }

    h3 {
        font-size: 2.6rem;
        color: var(--dark-blue);
        margin-bottom: 5px
    }

    h4 {
        font-size: 2rem;
        color: var(--dark-blue)
    }
}

.top-container {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: auto
}

.header-area {
    background: var(--dark-blue);
    background-position: center;
    background-repeat: no-repeat;
    height: 125px;
    padding: 0
}

.brand-area {
    align-items: center;
    background: rgb(var(--dark-blue-rgb))url("https://ccs.spokane.edu/ccsglobal/media/Global/Patterns/Blue_Header_Pattern.svg");
    background-position: 55%!important;
    background-size: cover!important;
    display: flex;
    height: 150px;
    padding: 0 2rem
}

.brand-area .logo-container {
    width: 100%
}

.brand-area .logo {
    max-width: 245px;
    width: 100%
}

.brand-area .logo.scc {
    max-width: 245px;
    width: 100%
}

.brand-area .logo.sfcc {
    max-width: 330px;
    width: 100%
}

.brand-area .logo a {
    display: block;
    position: relative
}

.brand-area .logo img {
    width: 100%;
    margin: 0
}

.tools .button {
    margin: auto 0 auto 2rem;
    position: relative
}

.tools .button a {
    border-radius: 5px;
    margin-right: auto;
    min-width: 110px;
    padding: 5px
}

.tools .dropdown {
    float: none;
    margin: 0 10px 0 0
}

.brand-logo img {
    width: 300px
}

.header-area .brand-logo {
    margin-left: -1rem
}

.sc.brand-logo {
    width: 66%
}

.scc.brand-logo {
    width: 64%
}

nav ul>li {
    font-size: 1.8rem;
    line-height: 1.8;
    font-weight: 400
}

.colored-overlay h4 {
    font-size: 2rem;
    line-height: 1.5
}

div.accwe {
    margin-right: 0;
    margin-left: 5px
}

div.accwe>div {
    width: 100%
}

div.accwe .PaneHeader {
    background-color: white
}

.PaneHeader {
    border: solid 2px var(--dark-blue);
    color: var(--dark-blue);
    font-family: figtree,sans-serif;
    margin-bottom: 5px;
    padding-left: 25px
}

.PaneHeader a,.SelectedPaneHeader a {
    font-weight: 700;
    position: relative
}

.PaneHeader a:hover,.SelectedPaneHeader a:hover {
    color: var(--dark-blue)
}

.SelectedPaneHeader,.PaneContent {
    background-color: var(--white);
    font-family: figtree,sans-serif;
    font-weight: 700;
    padding-left: 25px;
    position: relative
}

.PaneHeader a:before,.PaneHeaderNoBorder a:before {
    font-size: 2.2rem;
    position: absolute;
    top: 4px;
    left: -20px
}

.SelectedPaneHeader a:before,.SelectedPaneHeaderNoBorder a:before {
    font-size: 2.2rem;
    position: absolute;
    top: 4px;
    left: -20px
}

.left-nav-flex {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column-reverse
}

.left-nav-main .container {
    max-width: 344px
}

.mega.green-border-box-two-column>div {
    border: 1pt solid var(--green);
    border-left-width: 4pt;
    margin: 40px 0;
    padding: 10px 10px 10px 20px
}

.two-column-news,.two-column-program,.two-column-sidebar {
    display: block
}

.two-column-news::before,.two-column-program::before,.two-column-sidebar::before {
    display: none
}

.two-column-news>div,.two-column-program>div,.two-column-sidebar>div {
    margin-top: 40px
}

.left-nav-flex nav.library-links,.left-nav-flex nav.flexbox-nav {
    min-width: 300px;
    width: 100%;
    flex-wrap: wrap
}

@media screen and (min-width: 565px) {
    .left-nav-main .container {
        max-width:982px
    }
}

@media screen and (min-width: 768px) {
    .col-1 {
        margin:initial;
        min-width: 250px;
        width: 30%
    }

    .mobile-sites ul {
        width: 50%
    }

    .left-nav-flex nav.library-links,.left-nav-flex nav.flexbox-nav {
        min-width: 300px;
        width: 100%;
        flex-wrap: nowrap
    }
}

@media screen and (min-width: 992px) {
    .left-nav-flex {
        flex-direction:inherit;
        flex-wrap: nowrap
    }

    .left-nav-flex .left-nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center
    }

    .left-nav-flex>nav {
        min-width: 300px;
        max-width: 400px;
        margin-right: 40px
    }

    .left-nav-flex .left-nav h2 {
        margin-right: 10px
    }

    .left-nav-main {
        min-width: 700px
    }

    .left-nav-main .container {
        max-width: 1065px
    }

    .mega.green-border-box-two-column {
        display: grid;
        gap: 1em;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        margin: 0
    }

    .two-column-news,.two-column-program,.two-column-sidebar,.two-column-small,.two-column-medium,.two-column-large {
        display: grid;
        gap: 1em;
        grid-auto-flow: column
    }

    .two-column-news.flex,.two-column-program.flex,.two-column-sidebar.flex,.two-column-small.flex,.two-column-medium.flex,.two-column-large.flex {
        display: flex;
        gap: 1em
    }

    .two-column-news.flex section:nth-child(1),.two-column-program.flex section:nth-child(1),.two-column-sidebar.flex section:nth-child(1),.two-column-small.flex section:nth-child(1),.two-column-medium.flex section:nth-child(1),.two-column-large.flex section:nth-child(1) {
        width: 100%
    }

    .two-column-small section.brown-border-left {
        max-width: 385px
    }

    .two-column-medium section.brown-border-left {
        max-width: 600px
    }

    .two-column-large section.brown-border-left {
        max-width: 100%
    }
}

footer {
    margin-top: 35px
}

.sc-footer {
    background-color: var(--dark-blue)
}

.scc-footer {
    background-color: var(--dark-evergreen)
}

.footer-container {
    background: url("https://ccs.spokane.edu/ccsglobal/media/Global/Patterns/Blue_Footer_Pattern.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: block;
    padding: 35px 0;
    height: 100%
}

.footer-container p,.footer-bottom p {
    color: var(--white);
    margin: 0
}

.footer-top {
    display: block
}

.footer-top div {
    text-align: center;
    position: relative
}

.footer-top img {
    width: 80%
}

.footer-bottom {
    align-items: center;
    display: flex;
    padding: 2rem;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: column-reverse
}

.footer-bottom div {
    min-width: 200px
}

.footer-bottom a,.footer-bottom a:visited,.footer-bottom p {
    color: var(--white);
    display: block;
    font-size: 1.6rem;
    line-height: 3.5rem;
    text-decoration: none
}

.footer-bottom a:hover {
    color: var(--white);
    text-decoration: underline
}

.footer-social {
    display: flex;
    justify-content: space-around;
    margin-top: 4px
}

.footer-social img {
    height: 25px;
    max-width: inherit;
    width: 25px
}

.footer-social img.X-footer-logo {
    width: 20px;
    height: 25px
}

@media(min-width: 768px) {
    .brand-area .logo-container {
        align-items:center;
        display: flex;
        justify-content: space-between;
        margin: auto;
        max-width: 1370px;
        width: 100%;
        padding: 0
    }

    .brand-area .logo {
        margin-left: 0;
        width: 100%
    }
}

@media(min-width: 992px) {
    h1 {
        color:var(--dark-blue);
        font-weight: 700;
        font-size: 8rem
    }

    h2 {
        font-size: 4rem;
        font-weight: 700;
        color: var(--dark-blue)
    }

    h3 {
        font-size: 3rem;
        font-weight: 700;
        color: var(--dark-blue)
    }

    h4 {
        font-size: 2.1rem;
        font-weight: 700;
        color: var(--dark-blue)
    }

    h5 {
        font-weight: 700;
        font-size: 1.8rem;
        color: var(--dark-blue)
    }

    h6 {
        font-size: 1.6rem;
        font-weight: 700;
        color: var(--dark-blue)
    }

    .left-nav-flex {
        display: flex;
        flex-direction: inherit;
        flex-wrap: nowrap
    }

    .left-nav-flex>nav {
        min-width: 300px;
        max-width: 400px;
        margin-right: 40px
    }

    .tools {
        align-items: center;
        display: flex;
        height: 50px;
        justify-content: end;
        width: 935px
    }

    .super-column-container>div {
        margin-bottom: initial
    }

    .large-width-container {
        max-width: 1370px;
        margin: auto;
        width: 100%
    }

    .max-width-container {
        max-width: 1600px;
        margin: auto;
        width: 100%
    }

    .sc.brand-logo {
        width: 264px
    }

    .scc.brand-logo {
        width: 273px
    }

    .sfcc.brand-logo {
        position: relative;
        top: 21%;
        width: 300px
    }

    .footer-top {
        display: flex;
        justify-content: space-around
    }

    .footer-top div {
        display: flex;
        text-align: center
    }

    .footer-top img {
        width: 100%
    }

    .footer-bottom {
        align-items: inherit;
        justify-content: space-around;
        flex-direction: row;
        max-width: 1525px
    }

    .footer-bottom a {
        line-height: 2.8rem
    }

    .footer-bottom div {
        min-width: inherit
    }

    .footer-social {
        justify-content: space-between;
        max-width: 70%
    }
}