/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+                    WARNING:    DO NOT UPDATE OR CHANGE THIS FILE                    +
+     IF YOU WANT MODIFY THESE STYLES PLEASE USE THE OVERRIDE FILE IN YOUR CSS_SITE   +
+     FOLDER, UPDATES TO THESE STYLES DELETED UPON NEXT TEMPLATE UPGRADE              +
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

/*-----------------------------------
    MIN WIDTH FOR TOP ITEMS
*/

.campus-portal-link{
    min-width:110px;
}


/*---------------------------------------
    QUICKLINKS, SEARCH, SOCIAL MEDIA CSS
---------------------------------------------------*/
#search-resources {
    display: grid;
    grid-template-columns: repeat(3, auto);
    height: 100%;
    gap: 10px;
    place-items: center;
}

    #search-resources i:before {
        padding-right: unset;
    }

    #search-resources a, #search-resources button {
        text-decoration: none;
        padding: 5px;
        border: 0px;
        border-bottom: solid 1px var(--off-white);
        color: var(--medium-blue);
        background-color: inherit;
        font-size: var(--font-size-reduced);
        /* font-size: var(--font-size-reduced);
        line-height:var(--line-height);*/
    }

    #search-resources article.lower-scroll-social-media {
        display: none;
    }

    #search-resources a:hover, #search-resources button:hover {
        text-decoration: none;
        border-bottom: solid 1px var(--orange);
        color: var(--black);
        cursor: pointer;
    }


/*---------------------------------------
    RESOURCES / SEARCH
---------------------------------------------------*/
#social-quicklinks-search {
    position: fixed;
    z-index: 10;
    top: 0px;
    width: 100vw;
    height: 0;
    margin: 0;
    /*padding: 1rem;*/
    background-color: var(--white-wash);
    color: var(--white-wash-text);
    overflow-y: scroll;
    backdrop-filter: blur(15px);
    pointer-events: none;
    transform: rotateX(90deg);
    transform-origin: top center;
    transition: all var(--transition-time) ease-out;
    border-top: solid 5px var(--medium-blue);
    opacity:0;
}

.dark-mode #social-quicklinks-search {
    background-color: var(--black-wash);
    color: var(--black-wash-text);
}

    #social-quicklinks-search.show {
        top: 100px;
        height: calc(100svh - 100px);
        pointer-events: unset;
        transform: rotateX(0);
        transform-origin: top center;
        opacity:1;
        transition: transform var(--transition-time) ease, opacity var(--transition-time-fast) ease;
        overflow: auto;
    }

.has-division #social-quicklinks-search.show {
    top:142px;
    height: calc(100svh - 142px);
}

    .desktop .lower-scroll #social-quicklinks-search.show, .tablet .lower-scroll #social-quicklinks-search.show, .mobile .lower-scroll #social-quicklinks-search.show {
    top: 50px;
    height: calc(100vh - 50px);
}

.tablet #social-quicklinks-search.show,
.mobile #social-quicklinks-search.show {
    top: 0px;
    padding: 0px;
    padding-top: 15px;
    z-index: 50;
    height: 100svh;
}

.mobile #social-quicklinks-search.show {
   /* height: calc(100vh - 150px);
    padding: 10px;*/
}


.mobile #social-quicklinks-search {
    top: 0px;
    height: 100svh;
    opacity:0;
    transform: translateX(800px);
    transform-origin: right;
    transition: transform var(--transition-time) ease;
}
    .mobile #social-quicklinks-search.show {
        top: 0px;
        bottom:0px;
        right:0px;
        height:100svh;
        z-index:490;
        transform: translateX(0);
        opacity: 1;
        transition: transform var(--transition-time) ease, opacity var(--transition-time-fast);
    }

.mobile .lower-scroll #social-quicklinks-search.show {
    top: 0px;
    height: calc(100vh - 60px);
}


.tablet #search-container {
    width: 100vw
}


/*----------------------------
    RESOURCES 
*/

.quicklinks-title {
    text-transform: uppercase;
    font-size: 18px;
    text-align: center;
    margin-bottom: 0px;
    padding: 5px;
    padding-left: 20px;
    text-align: left;
    color: var(--dialog-box-gray);
}

#campus-resources {
    transform: rotateX(90deg);
    pointer-events: none;
    transform-origin: top center;
    height: 0;
}

body.lower-scroll #campus-resources.active {
    pointer-events: unset;
    transform: rotateX(90deg);
    transition: all var(--transition-time) ease-in-out;
}

#campus-resources.show {
    z-index: 4;
    pointer-events: unset;
    transform: rotateX(0);
    transform-origin: top center;
    height: auto;
    transition: all var(--transition-time) ease-in;
    padding: 1rem;
}

    #campus-resources.show::-webkit-scrollbar {
        width: 10px;
    }

    #campus-resources.show::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    }

    #campus-resources.show::-webkit-scrollbar-thumb {
        background-color: var(--light-gray);
        outline: solid 1px var(--border-gray);
    }

#campus-resources {
    width: 100%;
}

    #campus-resources .resources-flex {
        display: grid;
        grid-template-columns: 3fr 1fr;
        gap: 10px;
    }
    
    .tablet #campus-resources .resources-flex {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 10px;
    }

.tablet-small #campus-resources .resources-flex {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.resources-items details {
    border: 0 !important;
    padding: 8px;
    background-color: inherit;
    color: inherit;
}

.mobile .resources-items details {
    margin-bottom: 0px;
}

.resources-items details summary {
    border-bottom: solid 2px var(--my-gray-hover);
    background-color: inherit;
    color: inherit;
    padding:8px;
}

.mobile .resources-items details summary {
    padding: 3px;
}

.resources-items details[open], .resources-items details[open] summary,
.dark-mode .resources-items details[open],
.dark-mode .resources-items details[open] summary {
    background-color: inherit;
}

.resources-items details summary i {
    transform: rotateZ(90deg);
    transform-origin: bottom center;
    transition: transform var(--transition-time) ease-in-out;
    color: var(--my-gray-border-alt);
}

.resources-items details[open] summary i {
    transform: rotateZ(0deg);
    transition: transform var(--transition-time) ease-in-out;
}

.resources-items details a {
    text-decoration: none;
    text-underline-offset: var(--text-underline-offset);
    font-size: clamp(13px, .85em, 1em);
    color: var(--site-link);
}

.resources-items details a:hover {
    text-decoration: underline;
}

.resources-items details a:focus {
    outline: solid 1px var(--medium-blue);
    outline-offset: var(--outline-offset-main);
}

.resources-items details a i {
    color:var(--my-gray-border-alt);
    padding-right:6px;
}

#resources-leftside {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
}

.resources-rightside {
    border-left: solid 1px var(--border-gray);
    padding-left: 40px;
}

.resources-rightside details a{
    position:relative;
    padding-left:20px;
}
    .resources-rightside details a i {
        position: absolute;
        top:2px;
        left:0px;
    }

.tablet .resources-rightside {
    padding-left: 20px;
}

#resources-leftside div {
    flex-basis: 24%;
    width: 100%;
}

.tablet #resources-leftside div {
    flex-basis: 48%;
    width: 100%;
}

.tablet-small #resources-leftside div,
.mobile #resources-leftside div {
    flex-basis: 100%;
    width: 100%;
}

.mobile #campus-resources .resources-flex {
    grid-template-columns: 1fr;
}

.mobile .resources-rightside {
    border: 0px;
    padding-left: unset;
}

.resources-items p {
    margin: 0px;
    padding: 8px;
    min-height: 40px;
    display: inline-grid;
    align-items: center;
    width: 100%;
}

.tablet header #campus-resources.show {
    overflow: auto;
    max-height: 87vh;
}

#campus-resources
{
    color: var(--my-gray-text);
    background-color:var(--my-gray);
}


#quicklinks-main {
    padding: 0px 25px 10px 25px;
    height: calc(100vh - 100px);
    overflow-y: scroll;
}

.mobile #quicklinks-main {
    height: unset;
    padding: 0px 15px;
}

#quicklinks-container .head-title-focus {
    grid-column: span 2;
}

.mobile #quicklinks-container .head-title-focus {
    grid-column: span 1;
}

#quicklinks-sidebar {
    border-left: solid 1px var(--light-gray);
    padding: 0px 15px;
    overflow: auto;
}


.mobile #quicklinks-sidebar {
    border-left: 0px;
}

#quicklinks-main .resources-grid, #quicklinks-sidebar .resources-grid {
    display: flex;
    /*grid-template-columns: repeat(5, 1fr);*/
    gap: 10px;
    margin-top: 15px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}

    #quicklinks-main .resources-grid li {
        max-width: 330px;
        font-size: var(--font-size-reduced);
    }

.mobile #quicklinks-main .resources-grid li,
.mobile #quicklinks-sidebar .resources-grid li {
    max-width: unset;
    font-size: var(--font-size-reduced);
}

.tablet header #quicklinks-main .resources-grid {
    display: flex;
    flex-flow: column wrap;
    align-content: space-between;
    margin: 20px;
    width: calc(100% - 40px);
    height: 1300px;
    gap: 10px;
}

.tablet #quicklinks-main .resources-grid::before, .tablet #quicklinks-main .resources-grid::after {
    content: " ";
    flex-basis: 100%;
    width: 0;
    order: 1;
}

.tablet #quicklinks-main .resources-grid li:nth-child(odd) {
    order: 1;
}

.tablet #quicklinks-main .resources-grid li:nth-child(even) {
    order: 2;
}

.tablet #quicklinks-container div ul li {
    display: grid;
    grid-template-columns: unset;
    position: relative;
    min-height: 52px;
    place-items: stretch;
    width: 49%;
    margin: 0px;
    padding: 0px;
}

.tablet #quicklinks-container div ul.ql-list li {
    width: 100%;
}

.mobile #quicklinks-main .resources-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

#quicklinks-main header {
    padding: 10px 0px;
}

#head-target-campus-resources p {
    font-size: var(--font-size-clamp-headeline);
    font-weight: 800;
}

.resources-grid details, .resources-grid details[open] {
    border: 0px;
    background-color: var(--white);
}

.resources-grid summary {
    display: grid;
    grid-template-columns: 40px 1fr;
    min-height: 44px;
    place-content: center;
}

.resources-grid details[open] summary i:before {
    content: "\f063" !important;
}

#quicklinks-extended .extended-back {
    padding-left: 15px;
    width: 100%;
    margin: 0;
    cursor: pointer;
}


#quicklinks-main.show-extended {
    right: 350px;
    transition: right var(--transition-time-slow) ease-in-out;
}

#quicklinks-extended.show-extended {
    right: 0px;
    transition: right var(--transition-time-slow) ease-in-out;
}

#quicklinks-container h3 {
    clear: both;
    padding: 5px;
    text-align: center;
    font-family: var(--font-family);
    font-size: var(--font-size-medium);
    border-top: solid 1px var(--border-gray);
    border-bottom: solid 1px var(--border-gray);
    width: 100%;
    margin-top: 0px;
    margin-bottom: 0px;
    height: 35px;
}

#quicklinks-container p {
    margin: 0px;
    padding: 5px;
}

#quicklinks-container ul {
    margin: 0px;
    padding: 0px;
    width: 100%;
    list-style-type: none;
}

#quicklinks-container div ul li,
#quicklinks-extended ul li {
    border-bottom: solid 1px var(--border-gray);
    clear: both;
    display: block;
    width: 100%;
    position: relative;
}

#quicklinks-container ul.resources-grid > li, #quicklinks-container li:last-child {
    border-bottom: 0px;
}

#quicklinks-container ul li a,
#quicklinks-extended ul li a {
    color: var(--coal);
    font-size: var(--font-size-reduced);
    font-family: var(--font-family);
    padding: 10px;
    width: 100%;
    font-weight: normal;
    text-align: left;
    min-height: 44px;
    text-decoration: none;
    display: block;
    text-underline-offset: 2px;
    display: grid;
    align-items: center;
}

#quicklinks-sidebar ul li a {
    grid-template-columns: 25px auto;
}

#quicklinks-container ul li a:hover {
    text-decoration: underline solid 2px var(--orange);
}

#quicklinks-container details summary {
    background-color: var(--white);
    color: var(--titan-blue);
    padding: 5px;
    min-height: 44px;
    align-content: center;
    border-bottom: solid 2px var(--medium-blue);
    cursor: pointer;
}

    #quicklinks-container details summary:hover,
    #quicklinks-container details summary:focus {
        background-color: var(--medium-blue);
        color: var(--medium-blue-text);
    }

#quicklinks-container summary:focus, #quicklinks-container ul li a:focus {
    outline: solid 2px var(--orange);
    outline-offset: var(--outline-offset);
    background-color: var(--titan-blue);
    color: var(--titan-blue-text);
}


#quicklinks-container details summary i {
    text-align: center;
}

#quicklinks-main ul li a i {
    margin-right: 10px;
}


#quicklinks-main ul li a.QuicklinkExpand i {
    margin-right: 0px;
}

#quicklinks-extended ul li a {
    padding-left: 45px;
    color: #444;
    font-size: 16px;
}

#quicklinks-extended ul li {
    border-bottom: solid 1px var(--border-dark-gray);
}


#quicklinks-container .QuicklinkExpand {
    position: absolute;
    right: 0px;
    top: 0px;
    height: 44px;
    width: 44px;
    text-align: center;
    border-left: solid 1px var(--border-gray);
    display: grid;
    align-content: center;
    justify-content: center;
    padding-left: 0px;
}


#quicklinks-container ul.ql-list.active {
    display: block;
}

/*-------------------------------------------------
    SEARCH
--------------------------------------------------------*/


.desktop header #lower-scroll-lnksearch {
    grid-template-columns: 1fr;
}

#website-search {
    transform-origin: top center;
    transform: rotateX(90deg);
    pointer-events: none;
    height: 0px;
}

    #website-search.show {
      /*  position:fixed;*/
        z-index: 20;
        top:10px;
        pointer-events: unset;
        transform: translateX(0);
        height: auto;
        transition: all var(--transition-time-slow) ease-in-out;
    }

    .mobile #website-search.show{
        position:fixed;
    }
.lower-scroll #website-search {
  /*  padding-top: 35px;*/
}

#search-container {
    width: 96vw;
    margin:auto;
}

#website-search fieldset {
    padding: 10px;
    padding-top: 20px;
    background-color: inherit;
    color: inherit;
    font-family: var(--font-family);
    position: relative;
    border: 0px;
}

    #website-search fieldset legend {
        font-size: var(--font-size-clamp-headeline);
        font-weight: 800;
        position: absolute;
        top: 10px;
        left: 10px;
    }

    #website-search fieldset label {
        font-family: var(--font-family);
        font-weight: bold;
        line-height: var(--line-height-label);
    }

    #website-search fieldset input:focus, #website-search fieldset input:hover {
        outline: solid 2px var(--orange) !important;
        outline-style: dashed !important;
        cursor: pointer !important;
    }

.search-radio-group {
    margin-left: 15px;
    margin-bottom: 5px;
    display: grid;
    grid-template-columns: 100px 100px;
    gap: 15px;
    padding-top: 15px;
}

    .search-radio-group p label {
        display: grid;
        grid-template-columns: auto auto;
        align-items: center;
    }

#website-search fieldset input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    font: inherit;
    color: currentColor;
    width: 1.15em;
    height: 1.15em;
    border: 0.15em solid currentColor;
    border-radius: 50%;
    transform: translateY(-0.075em);
    display: grid;
    place-content: center;
}

    #website-search fieldset input[type="radio"]::before {
        content: "";
        width: 0.65em;
        height: 0.65em;
        border-radius: 50%;
        transform: scale(0);
        transition: transform var(--transition-time-fast) ease-in-out;
        box-shadow: inset 1em 1em var(--orange);
    }

    #website-search fieldset input[type="radio"]:checked::before {
        transform: scale(1);
    }

    #website-search fieldset input[type="radio"]:focus {
        outline: solid 0.15em currentColor;
        outline-offset: .25em;
    }

#website-search fieldset label:focus-within {
    color: var(--medium-blue);
}

.gsc-wrapper {
    max-height: 55vh;
}

div.gsc-search-box {
    display: grid;
    grid-template-columns: 6fr 50px 50px;
    align-items: center;
    text-align: center;
    align-content: center;
}

    div.gsc-search-box input.gsc-input, div.gsc-search-box .gsc-input-box, div.gsc-search-box .gsc-input-box-hover, div.gsc-search-box .gsc-input-box-focus {
        /*  border: 0px !important;*/
    }

div.gsc-input-box input[type='text'] {
    height: 100% !important;
    padding: 7px !important;
}

div.gsc-input-box input[type='text'] {
    font-size: var(--font-size-large);
    background: var(--white) !important;
    color: var(--medium-blue);
}

div.gsc-input-box label {
    background-color: inherit;
    color: var(--white-text) !important;
    background: var(--white) !important;
}

div.gsc-input-box {
    background-color: inherit;
    color: inherit;
    border: solid 2px var(--dark-gray) !important;
    border-right: 0px !important;
    height: 50px;
}

div.gsst_b {
    background-color: inherit;
    color: inherit;
    border: solid 2px var(--dark-gray) !important;
    border-left: 0px !important;
    height: 50px;
    display: grid;
    align-content: center;
}

div.gsc-search-button {
    width: 50px;
    margin: 0px;
    padding: 0px;
}

    div.gsc-search-button button {
        width: 100%;
        height: 50px;
        padding: 0px;
    }

#gsc-result-time, #gsc-result-orderby {
}


div .gsc-above-wrapper-area div.gsc-result-info, div.gsc-above-wrapper-area div.gsc-orderby {
    width: 100%;
}

.gsc-results-wrapper-nooverlay {
    overflow: auto;
    max-height:calc(100vh - 390px);
}

.lower-scroll .gsc-results-wrapper-nooverlay {
    overflow: auto;
    max-height: calc(100vh - 360px);
}

.mobile .gsc-results-wrapper-nooverlay{
    max-height:78svh;
}


.gsc-results-wrapper-visible div, .gsc-results-wrapper-visible a {
    font-family: arial, sans-serif;
}

.gsc-refinementsArea {
    display: none;
}

.CampusSearch table {
    margin: 0px;
    margin-top: 1px;
    padding: 0px;
    width: 100%;
    background-color: #f6f3f2;
    color: var(--coal);
}

.gsc-result-info, .gsc-orderby-label {
    color: var(--coal) !important;
}

.gsc-adBlock, .gsc-tabsArea, .gs-per-result-labels {
    display: none !important;
}

.gsc-tabHeader, .gsc-option {
    color: var(--coal);
    background-color: inherit;
}
/*--- auto suggest*/
.gstl_51.gssb_c {
    top: 80vh !important;
    left: 20vw !important;
    width: 60vw !important;
}

    .gstl_51.gssb_c * {
        background-color: var(--off-white);
        color: var(--off-white-text);
    }

.gsq_a {
    padding: 5px;
    display: grid;
    align-content: center;
    height: 44px;
}


#website-search table td {
    border: 0px;
}

    #website-search table td input[text] {
        border: 0px !important;
    }

#campus-resources p.menu-close,
#search-container p.menu-close,
#main-nav p.menu-close {
    min-height: 44px;
    display: grid;
    grid-template-columns: auto 80px;
    align-content: center;
    width: auto;
    text-align: right;
    position: absolute;
    right: 70px;
    top: 0px;
    margin: 0px;
    z-index: 1;
}

.mobile #campus-resources p.menu-close,
.mobile #search-container p.menu-close {
    right: 20px;
    background-color: inherit;
    color: inherit;
}

.menu-close a {
    font-size: var(--font-size-small);
    /*background-color: var(--dialog);*/
    color: var(--dialog-text);
    color: inherit;
    padding: 8px;
    text-decoration: none;
    border-bottom: solid 1px transparent;
    font-family: var(--font-family);
    grid-column-start: 2;
    grid-column-end: 3;
    text-align: center;
    letter-spacing: 1.5px;
    border-radius: var(--border-radius);
}

    .menu-close a:hover, .menu-close a:focus {
        color: var(--titan-blue-text);
        background-color: var(--titan-blue);
        cursor: pointer;
        outline: solid 2px var(--orange);
        outline-offset: 2px;
    }

.mobile .menu-close a {
    background-color: inherit;
    color: inherit;
}
/*-----------------------------------------------------------
        LANDING PAGE OR PRESENTATION PAGE DISPLAY
    */

header.page-landing.lower-scroll legend,
header.page-landing.lower-scroll label {
    color: var(--white);
}


/*----------------------------------------------------
    SOCIAL MEDIA LINKS
---------------------------------------------------------*/


/*-- in header*/
.header-social{
    position:relative;
    z-index:10;
    border:0px;

}

    .header-social details {
        width: 100%;
        border: 0px;
        padding: 0px;
        margin: 0px;
        z-index: 5;
        position: relative;
        opacity: 0;
        animation: 300ms fade-in 100ms forwards;
        width:100% !important
    }
.header-social details summary {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    margin-bottom:0px;
    border:0px;
    padding:10px;
}
        .header-social details[open] summary {
            margin-bottom: 0px !important;
        }

    .header-social details[open] summary i:last-child {
        transform: rotateX(180deg);
        transform-origin: center;
        transition: transform var(--transition-time) ease-in-out;
    }


        .header-social details summary i:last-child,
        .active.header-social details summary i:last-child
        {
            transform: rotateX(0deg);
            transform-origin: center;
            transition: transform var(--transition-time) ease-in-out;
        }

#ul-social-menu.social-header {
    margin: 0;
    padding: 0;
    font-size: var(--font-size-reduced);
    list-style: none;
    position: relative;
    cursor: pointer;
    display: grid;
    height: 44px;
    align-items: center;
}

#ul-social-menu {
    text-align: center;
}

    #ul-social-menu .tab-link i {
        padding-right: 10px;
    }

    #ul-social-menu li.with-button {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
    }


        #ul-social-menu li.with-button button {
            background-color: inherit;
            color: inherit;
            border: 0px;
            z-index: 3;
            cursor: pointer;
        }

.header-social details .social-container {
    transform: rotateX(90deg);
    transform-origin: top center;
    transition: transform 220ms ease-out;
    height:0px;

}
.header-social details[open] .social-container {
    position: absolute;
    right: 0;
    top: 38px;
    background-color: var(--cloud);
    color: var(--cloud-text);
    border-top: solid 4px var(--orange);
    box-shadow: 0 2px 5px rgb(0 0 0 / 20%);
    /* max-height: 450px; */
    height: auto;
    width: auto;
    z-index: 15;
    transform: rotateX(0deg);
    transform-origin: top center;
    transition: transform 220ms ease-out;
}

.social-header .social-container {
    transform: rotateX(90deg);
    pointer-events: none;
    transform-origin: top center;
    height: 0;
}

.mobile #ul-social-menu.social-header {
    height: unset;
}

.mobile .social-header .social-container {
    pointer-events: unset;
    transform: none;
    height: unset;
    position: relative;
    display: block;
    top: unset;
    left: unset;
    border-top: 0px;
}

.mobile .social-header .main-tab,
.mobile .social-header #btn-show-hide-social {
    display: none;
}

#li-social-container.pinned .social-container,
#ul-social-menu:hover .social-container,
#ul-social-menu.active .social-container,
#ul-social-menu:focus-within .social-container,
.social-container:hover,
.social-container:focus-within {
    transform: rotateX(0deg);
    pointer-events: unset;
    transform-origin: top center;
    height: auto;
}

.social-container ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    display: flex;
    flex-direction: row;
    flex-wrap:wrap;
    width:220px;
}

.social-container li {
    margin: 0px;
    padding: 0px;
    text-align: center;
    align-content: center;
    justify-content: center;
    display: grid;
}

    .social-container li a {
        color: var(--titan-blue);
        background-color: inherit;
        text-shadow:none;
    }

        .social-container li a:focus {
            color: var(--titan-blue);
            background-color: inherit;
            outline: dotted;
            outline-offset: var(--outline-offset);
            outline-color: var(--orange);
        }

        .social-container li a:hover {
            transition: background-color 0.2s ease-in-out
        }

    .social-container li:last-child {
        border-bottom: 0px;
    }

.social-container a {
    align-content: center;
    justify-content: center;
    display: grid;
    width: 100%;
    height: 44px;
    width: 44px;
    text-decoration: none;
}

    .social-container a:focus {
        /*   border-bottom: solid 2px var(--orange)*/
    }

.social-container .fab:before,
.social-container .fas:before,
.social-container .far:before {
    padding-right: unset;
}

.social-container {
    background: var(--light-gray);
    color: var(--titan-blue);
}

/* SOCIALS - tablet */

.tablet #website-social,
.mobile #website-social {
    position: relative;
    width: auto;
    min-height: 44px;
    z-index: 10;
    top: unset;
    right: unset;
    background-color: var(--titan-blue);
    color: var(--titan-blue-text);
}

    .tablet #website-social #social-container,
    .mobile #website-social #social-container {
        background-color: unset;
        color: unset;
    }

    .tablet #website-social ul {
        display: flex;
        justify-content: flex-end;
        width: unset;
    }

.mobile #website-social {
    position: relative;
    opacity: 0;
    pointer-events: none;
    height: 0px;
    min-height: unset;
}

    .mobile #website-social ul {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
        gap: 5px;
        width: unset;
    }

    .tablet #website-social a,
    .mobile #website-social a {
        color: var(--titan-blue-text);
        background-color: var(--titan-blue);
    }

.tablet header.lower-scroll #website-social,
.mobile header #website-social {
    opacity: 0;
    width: 100%;
    pointer-events: none;
    top: 0px;
    transition: opacity 150ms ease-in-out, top 200ms ease-in-out;
}

    .tablet header.lower-scroll #website-social.open {
        width: 100%;
        top: 49px;
        opacity: 1;
        pointer-events: unset;
        z-index: 9;
        transition: top 200ms ease-in-out;
    }

    .mobile header #website-social.open {
        opacity: 1;
        pointer-events: unset;
        z-index: 9;
        transition: opacity 200ms ease-in-out;
        height: auto;
    }

/* SOCIAL ICONS */
li.facebook:hover, li.facebook a:hover, li.facebook a:focus {
    background-color: #2B4273;
    color: var(--white);
}

li.instagram:hover, li.instagram a:hover, li.instagram a:focus {
    background: #8E4F0B;
    background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
    background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
    color: var(--white);
}

li.threads:hover, li.threads:focus-within, li.threads a:hover, li.threads a:focus{
    background-color:#333;
    color:#DDD;
}

li.bluesky:hover, li.bluesky:focus-within, li.bluesky a:hover, li.bluesky a:focus {
    background-color: #FFF;
    color: #0069CC;
}

li.tiktok:hover, li.tiktok a:hover, li.tiktok a:focus {
    background: #000000;
    background: -moz-linear-gradient(-45deg, #E4012F 0%, #067A76 100%);
    background: -webkit-linear-gradient(-45deg, #E4012F 0%, #067A76 100%);
    background: linear-gradient(-45deg, #E4012F 0%, #067A76 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E4012F', endColorstr='#067A76',GradientType=1 );
    color: var(--white);
}

li.spotify:hover, li.spotify a:hover {
    background-color: #000;
    color: #1ED760;
}


li.twitter:hover, li.twitter a:hover {
    background-color: #000;
    color: var(--white);
}

li.twitter a i:before{
    content: "\e61b";
}

li.linkedin:hover, li.linkedin a:hover {
    background-color: #005D8F;
    color: var(--white);
}

li.pinterest:hover, li.pinterest a:hover {
    background-color: #c8232c;
    color: var(--white);
}

li.email:hover, li.email a:hover {
    background-color: var(--nav-search-blue);
    color: var(--white);
}

li.tumblr:hover, li.tumblr a:hover {
    background-color: #000D1F;
    color: var(--white);
}

li.instagram:hover, li.instagram a:hover {
    background: #8E4F0B;
    background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
    background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
    color: var(--white);
}

li.flickr:hover, li.flickr a:hover {
    background-color: #0057C2;
    color: var(--white);
}

li.rss:hover, li.rss a:hover {
    background-color: var(--nav-search-blue);
    color: var(--white);
}

li.foursquare:hover, li.foursquare a:hover {
    background-color: #0732A2;
    color: var(--white);
}

li.snapchat:hover, li.snapchat a:hover {
    background-color: #D6D300;
    color: var(--coal);
}

li.periscope:hover, li.periscope a:hover {
    background-color: #DB5248;
    color: #000;
}

li.giving:hover, li.giving a:hover {
    background-color: var(--nav-search-blue);
    color: var(--white);
}


li.linktree {
    background-image: url('https://api.blog.production.linktr.ee/wp-content/uploads/2022/06/Avatar-Symbol-Canopy.png');
    color: var(--black);
    background-size: cover;
    filter:saturate(10%);
}

    li.linktree:hover, li.linktree a:hover {
        background-image: url('https://api.blog.production.linktr.ee/wp-content/uploads/2022/06/Avatar-Symbol-Canopy.png');
        color: var(--black);
        background-size: cover;
        filter: saturate(100%);
    }

li.discord:hover, li.discord a:hover {
    background-color: #5562EA;
    color:#fff;
}

li.youtube:hover, li.youtube a:hover {
    background-color: #c4302b;
    color: var(--white);
}

li.vimeo:hover, li.vimeo a:hover {
    background-color: #c4302b;
    color: var(--white);
}

li.vimeo:hover, li.vimeo a:hover {
    background-color: #106FA7;
    color: var(--white);
}

li.wordpress:hover, li.wordpress a:hover {
    background-color: var(--white);
    color: #096484;
}

.empty-social {
    display: none !important;
}

/*---------------------------------------------------
   LOWER SCROLL SOCIAL MEDIA SETTINGS
---------------------------------------------------*/
.lower-scroll-social-media a {
    display: none;
}

.lower-scroll #social-quicklinks-search {
    top: 50px;
}

.lower-scroll #search-container p.menu-close {
    top: 15px;
}

.lower-scroll #search-resources article {
    width: 50px;
}

.lower-scroll .lower-scroll-social-media a {
    display: block;
    background: inherit;
    color: var(--white);
    width: 20px;
    margin: auto;
}

.lower-scroll #search-resources {
    width: 150px;
    position: absolute;
    right: 0px;
}

.lower-scroll #website-social {
    display: none;
    transition: height 1s ease-in-out;
    height: 0px;
}

    .lower-scroll #website-social.lower-scroll-show-social-media {
        display: block;
        background-color: transparent;
        transition: height 1s ease-in-out;
        height: 250px;
    }

        .lower-scroll #website-social.lower-scroll-show-social-media #social-container {
            position: absolute;
            top: 40px;
            right: 0px;
            background-color: rgba(0,0,0,.7);
            border-radius: 6px;
            padding: 6px;
        }

.lower-scroll-social-media #lnkLowerscrollShowSocial {
    background-color: inherit;
    color: var(--white);
}



/*---------------------------------------------------
   TABLE OF CONTENTS BUTTON AND MENU
---------------------------------------------------*/

#secTOC, #btnTOC {
    position: fixed;
    right: 0px;
    top: 140px;
    width: 44px;
    height: 44px;
    border: 0px;
    z-index: 5;
}

    #btnTOC:hover {
        background-color: var(--medium-blue);
        color: var(--medium-blue-text);
    }

#secTOC {
    min-height: 200px;
    height: auto;
    width: 250px;
    right: -300px;
    background-color: var(--medium-blue);
    color: var(--medium-blue-text);
    transition: right 300ms ease-in-out;
    z-index: 4;
    box-shadow: -2px 1px 5px rgba(0,0,0,.6);
}

    #secTOC p.headline {
        height: 44px;
        display: grid;
        align-content: center;
        background-color: var(--light-gray);
        color: var(--titan-blue);
        padding: 4px;
    }

    #secTOC ul {
        margin: 0px;
        list-style: none;
        padding: 10px;
        width: 100%;
    }

        #secTOC ul li {
            margin: 0px;
            padding: 0;
        }

    #secTOC a {
        border-left: solid 4px var(--medium-blue);
        display: grid;
        min-height: 44px;
        align-content: center;
        background-color: inherit;
        color: inherit;
        padding-left: 10px;
        font-size: var(--font-size-small);
    }

        #secTOC a:hover {
            border-left: solid 4px var(--orange);
            background-color: var(--medium-blue-text);
            color: var(--medium-blue);
        }

    #secTOC.open {
        right: 0px;
    }


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+       END OF CSS FILE                                                               +
+     IF YOU WANT TO OVER RIDE THESE STYLES PLEASE DO IT IN THE CSS OVERRIDE FILES    +
+     CHANGES TO THIS FILE WILL BE DELETED UPON NEXT TEMPLATE UPDATE                  +
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/