/*TABLE OF CONTENTS*/
/*
    0. CSS Reset
    1. Colors
    2. Document Setup
*/

/*--------------------------------------------------*/
/* 0. CSS Reset ------------------------------------*/
html, body {
    border: none;
    margin: 0;
    padding: 0;
}

* {
    margin: 0;
    box-sizing: border-box;
}

/* 1. Colors ------------------------------------*/
:root {
    --color1975: #f7f5f3;
    --black: #000000;
    --bone: #e3d8c9;
    --chamoisee: #91744b;
    --dim-grey: #626262;
    --eerie-black: #1a1a1a;
    --gunmetal: #182828;
    --lion: #ab8c5f;
    --platinum: #d9d9d9;
    --platinum-light: #f6f6f6;
    --timberwolf: #d2d2d2;
    --uni-red: #ae0000;
    --white: #ffffff;
    --white-smoke: #f7f5f3;
    --business: #3c7295;
    --education: #0e423f;
    --liberal: #57c4c0;
    --natural: #abd037;
    --max-content-width: 1900px;
}


/* 2. Document Setup -------------------------------*/
body {
    background-color: var(--white);
    color: var(--eerie-black);
    font-family: Montserrat, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    margin: 0;
}

.sr-only {
    height: 1px;
    left: -10000px;
    overflow: hidden;
    position: absolute;
    top: auto;
    width: 1px;
}

section > *, footer > *, .max-width-class {
    margin: 0 auto;
    max-width: var(--max-content-width);
}

.mobileShow {
    display: none;
}

p {
    margin: revert;
}

a {
    color: inherit;
    text-decoration: none;
}

    /*Link Buttons*/
    a.rounded-button-red:link, a.rounded-button-red:visited {
        background-color: var(--uni-red);
        border-radius: 12px;
        border-width: 0;
        color: var(--white);
        display: inline-block;
        font-size: 1.25em;
        font-weight: 400;
        max-width: 500px;
        padding: 16px 42px;
        text-align: center;
        text-decoration: none;
        width: auto;
        -moz-transition: all ease-in-out .4s;
        -o-transition: all ease-in-out .4s;
        -webkit-transition: all ease-in-out .4s;
        transition: all ease-in-out .4s;
    }

    a.rounded-button-red:hover {
        background-color: var(--uni-red);
        color: var(--white) !important;
        filter: brightness(110%);
        -webkit-filter: brightness(110%);
    }

.visitBtn {
    position: absolute;
    margin-top: 4rem;
    margin-left: 25%;
}

header {
    background-color: var(--white);
    max-height: 75vh;
    position: relative;
}

/* Hero Image */
.hero {
    align-items: center;
    color: var(--white);
    display: flex;
    height: 100vw;
    justify-content: center;
    margin: 14vh auto 0 auto;
    max-height: 68vh;
    max-width: var(--max-content-width);
    position: relative;
}

    .hero:after {
        content: "";
        height: 100%;
        position: absolute;
        width: 100%;
        z-index: 0;
    }

    .hero_image-wrapper {
        display: flex;
        height: 100%;
        position: absolute;
        width: 100%;
    }

    .hero_image {
        border-radius: 70px;
        height: auto;
        object-fit: cover;
        padding: 2rem 1rem;
        width: 100%;
    }
/* End Hero Image */

/*Hyperlink style*/
p > a:not([class]) {
    color: inherit;
    display: inline-block;
    line-height: normal;
    position: relative;
    text-decoration: underline;
    transition: all 0.5s ease;
}

    p > a:not([class]):after {
        background-color: var(--uni-red);
        bottom: 0;
        content: '';
        height: 2px;
        left: 0;
        position: absolute;
        transform: scaleX(0);
        transform-origin: bottom right;
        transition: transform 0.25s ease-out;
        width: 100%;
    }

p > a:hover {
    color: var(--uni-red);
    text-decoration: none;
}

    p > a:hover:after {
        transform: scaleX(1);
        transform-origin: bottom left;
    }

h1 {
    font-size: 40px;
    line-height: 44px;
}

h2 {
    display: block;
}

h4 {
    font-weight: normal;
}

.absolute {
    position: absolute;
}

.relative {
    position: relative;
}

.block {
    display: block;
}

.flex {
    display: flex;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

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

.inline-flex {
    display: inline-flex;
}

.items-center {
    align-items: center;
}

.items-stretch {
    align-items: stretch;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.whitespace-nowrap {
    white-space: nowrap;
}

.min-height-screen {
    min-height: 68vh;
}

.height-full {
    height: 100%;
}

.width-full {
    width: 100%;
}

.bottom-0 {
    bottom: 0;
}

.left-right-0 {
    left: 0;
    right: 0;
}

.inset-0 {
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
}

.homepage-request {
    bottom: 3rem;
    left: 0;
    position: fixed;
    right: 0;
    z-index: 20;
}

.homepage-hero-image {
    max-height: 680px;
    object-fit: cover;
}

/*Main Search Bar*/
.homepage-search-bar {
    margin: auto;
    position: relative;
    top: 20vh;
    z-index: 1;
}

#main-uhv-search {
    height: 50px;
    max-width: 70rem;
    position: relative;
    transition: all 0.6s ease;
    width: 50rem;
}

    #main-uhv-search input {
        border: none;
        border-radius: 5px;
        box-sizing: border-box;
        font-size: 1rem;
        height: 100%;
        padding: 0 50px 0 20px;
        width: 100%;
    }

    #main-uhv-search button.icon {
        background: transparent;
        border: none;
        cursor: pointer;
        display: inline-block;
        font-size: 1.25rem;
        height: 45px;
        position: absolute;
        right: 1%;
        width: 45px;
    }

    #main-uhv-search .search-button {
        background-color: var(--white);
        border-radius: 25px;
        display: block;
        height: 50px;
        overflow: hidden;
        position: absolute;
        right: 0;
        text-decoration: none;
        top: 0;
        width: 50px;
    }

    #main-uhv-search a.search-button .icon {
        background-color: var(--white-smoke);
        border: 2px solid #607d8b;
        border-radius: 8px;
        height: 12px;
        left: 14px;
        position: absolute;
        transition: all 0.6s ease;
        top: 14px;
        width: 12px;
    }

        #main-uhv-search a.search-button .icon:after {
            background-color: #607d8b;
            bottom: -5px;
            content: "";
            display: block;
            height: 2px;
            position: absolute;
            right: -8px;
            transform: rotate(45deg);
            transition: all 0.6s ease;
            width: 12px;
        }

        #main-uhv-search a.search-button .icon .clear {
            color: #607d8b;
            display: block;
            font-size: 30px;
            height: 100%;
            line-height: 12px;
            text-align: center;
            transition: all 0.6s ease;
            width: 100%;
        }

    #main-uhv-search a.search-button.typed .icon {
        border-radius: 50px;
        border-width: 6px;
        height: 60px;
        left: -11px;
        top: -11px;
        width: 60px;
    }

        #main-uhv-search a.search-button.typed .icon:after {
            bottom: -20px;
            height: 8px;
            right: -30px;
            width: 52px;
        }

        #main-uhv-search a.search-button.typed .icon .clear {
            font-size: 22px;
            line-height: 58px;
        }

    #main-uhv-search.expand {
        transition: all 0.6s ease;
        width: 70rem;
    }

.majors-buttons {
    display: flex;
    justify-content: center;
    margin-top: 3vh;
    width: 100%;
}

.button-1 {
    align-items: center;
    appearance: none;
    background-color: var(--white);
    border: 2px solid var(--chamoisee);
    border-radius: 5px;
    box-sizing: border-box;
    color: var(--uni-red);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font-size: 1.2rem;
    font-weight: 700;
    justify-content: center;
    line-height: normal;
    margin: 0;
    max-width: 20vw;
    min-height: 40px;
    min-width: 15vw;
    outline: none;
    padding: 16px 24px;
    text-align: center;
    text-decoration: none;
    transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    width: 100%;
    will-change: transform;
}

    .button-1:hover, .button-1:focus {
        color: var(--white);
        background-color: var(--uni-red);
        box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
        transform: translateY(-2px);
    }

.button-red-1 {
    align-items: center;
    appearance: none;
    background-color: var(--uni-red);
    border: 1px solid var(--white);
    border-radius: 5px;
    box-sizing: border-box;
    color: var(--white);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font-size: 1rem;
    font-weight: 600;
    justify-content: center;
    line-height: normal;
    margin: 0;
    max-width: 30vw;
    min-height: 4vh;
    min-width: 14vw;
    outline: none;
    padding: 16px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    width: 100%;
    will-change: transform;
}

    .button-red-1:hover, .button-red-1:focus {
        color: var(--uni-red);
        background-color: var(--white);
        border: 1px var(--uni-red) solid;
        /*box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;*/
        transform: translateY(-2px);
    }

.z-10 {
    z-index: 10;
}

.z-20 {
    z-index: 20;
}

.border-gradient {
    border: 1px solid;
    border-image-slice: 1;
    border-width: 1px;
}

.border-gradient-gold {
    border-image-source: linear-gradient(to right, transparent, transparent, var(--white), transparent);
}

.only-top-bottom {
    border-left: 0;
    border-right: 0;
}

.red-text {
    color: var(--uni-red);
}

.semibold {
    font-weight: 600;
}

.text-white {
    color: var(--white);
}

.space-x-2 {
    margin-left: 0.5rem; /* 8px */
}

.space-x-8 {
    margin-left: 2rem; /* 32px */
}

.space-x-16 {
    margin-left: 4rem; /* 64px */
}

    .space-x-16 > :not([hidden]) ~ :not([hidden]) {
        margin-left: calc(4rem * calc(1 - 0));
        margin-right: calc(4rem * 0);
    }

.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transform-gpu {
    transform: translate3d(0, 0, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);
}

.rounded-btn {
    border-radius: 9999px;
    margin-top: 0.125rem;
    padding: 0.35rem 1rem 0.35rem 1rem;
}

.btn-icon {
    margin-right: 0.5rem;
}

.btn-white {
    background-color: rgb(243 240 237 / 1);
    border: 2px rgb(243 240 237 / 1) solid;
}

    .btn-white:hover {
        background-color: transparent;
        color: rgb(243 240 237 / 1);
    }

.fa {
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.fa-magnifying-glass:before {
    content: "\f002";
}

.container {
    margin-left: auto;
    margin-right: auto;
    /*max-width: 1450px;*/
    padding-left: 4.5rem;
    padding-right: 4.5rem;
    width: 100%;
}

#contentWrapper {
    align-items: center;
    display: flex;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
}

    #contentWrapper h2 {
        color: var(--white);
        font-family: sans-serif;
        font-weight: 400;
    }

.content {
    display: none;
    opacity: 0;
}

/* Numbers */
.numbers {
    background-color: var(--color1975);
    display: flex;
    position: relative;
}

.columns-logo {
    display: flex;
    justify-content: space-between;
}
/* 2 by 2 Flex Grid */
.grid2x2 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 auto;
    padding: 2rem 0 1rem 0;
    position: relative;
    width: 83%;
}

    .grid2x2.left {
        justify-content: flex-end;
    }

    .grid2x2.right {
        justify-content: flex-start;
    }

    .grid2x2 > div {
        align-items: flex-start;
        display: flex;
        flex-basis: calc(40% - 1px);
        flex-direction: row;
        justify-content: center;
    }

    .grid2x2 > .box {
        margin: 1rem;
    }

.red-number {
    color: var(--uni-red);
    display: flex;
    font-size: 2.5rem;
    font-weight: 900;
    justify-content: flex-end;
    line-height: normal;
    margin-right: 2vw;
    width: 15%;
}

.text-content {
    display: block;
    width: 85%;
}

    .text-content h3 {
        font-weight: 700;
        font-size: 1.5rem;
        margin: 0 auto 0.5rem auto;
    }

    .text-content > h3 > a {
        color: var(--eerie-black);
    }

        .text-content > h3 > a:hover {
            color: var(--uni-red);
        }

    .text-content p {
        margin-top: 0;
    }

.jaguarHead {
    margin: 0;
    position: absolute;
    right: 0;
    top: -3vh;
    width: 16%;
    z-index: 1;
}

.am-stickers {
    margin: 0;
    position: absolute;
    top: -2vh;
    width: 14%;
    z-index: 1;
}

    .am-stickers.left {
        left: 0;
    }

    .am-stickers.right {
        right: 0;
    }

img.am-stickers.left.right {
    display: none;
}

/* End Flex Grid */
/* End Numbers */

/*Grey section*/
.lightGreySection {
    background-color: var(--white-smoke);
    overflow: hidden;
    padding: 4rem 4.5rem 8rem 4.5rem;
}

.content-left {
    flex-shrink: 0;
    max-width: 50%;
    padding: 0 4rem 0 4rem;
    width: 100%;
}

.content-right {
    flex: 1 1 0%;
    position: relative;
}

.text-layer {
    height: auto;
    left: 25%;
    position: absolute;
    top: 50%;
    width: 100%;
    z-index: 10;
}

.imageAnimation {
    left: 0%;
    position: absolute;
    top: 0%;
    width: 100%;
}


/* Four Colleges */
#four-colleges {
    background-color: var(--white);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 1rem 2rem 1rem 2rem;
}

.colleges {
    align-items: unset;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    overflow: hidden;
    row-gap: 0;
    width: 85%;
}

.service-wrapper {
    border-radius: 25px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    display: flex;
    height: 50vh;
    max-height: 50vh;
    overflow: hidden;
    position: relative;
    width: calc(25% - 12px);
}

.service-wrapper > a > div {
    height: 100%;
}

.service-wrapper > a > div > img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

    .service-wrapper > a > div > img.img-responsive {
        position: absolute;
    }

    .service-wrapper > a > div > img.college-logo {
        height: auto;
        margin: 8vh auto;
        width: 80%;
    }

.service-wrapper-inner {
    background: rgba(32,32,32,0.9);
    color: var(--white);
    height: auto; /*100%*/
    padding: 15px;
    position: absolute;
    top: 70%;
    -moz-transition: all ease-in-out .4s;
    -o-transition: all ease-in-out .4s;
    -webkit-transition: all ease-in-out .4s;
    transition: all ease-in-out .4s;
    width: 100%;
    z-index: 1;
}

    .service-wrapper-inner.business {
        background: rgba(60,114,149,0.9);
    }

    .service-wrapper-inner.education {
        background: rgba(14,66,63,0.9);
    }

    .service-wrapper-inner.liberal {
        background: rgba(87,196,192,0.9);
    }

    .service-wrapper-inner.natural {
        background: rgba(171,208,55,0.9);
    }

    .service-wrapper-inner h2 {
        font-family: Montserrat, sans-serif;
        font-size: 2rem;
        line-height: normal;
        margin: 0;
        padding: 0;
        text-align: center;
        text-shadow: 4px 3px 3px rgba(0, 0, 0, 0.4);
        text-transform: uppercase;
        transition: .5s ease;
    }

/*Fade in overlay*/
.overlay {
    background-color: rgba(240, 89, 7, 0.82);
    bottom: 0;
    height: 100%;
    left: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    transition: .5s ease;
    width: 100%;
}

    .overlay.business {
        background-color: rgba(60,114,149,0.9);
    }

    .overlay.education {
        background-color: rgba(14,66,63,0.9);
    }

    .overlay.liberal {
        background-color: rgba(87,196,192,0.9);
    }

    .overlay.natural {
        background-color: rgba(171,208,55,0.9);
    }

.text {
    color: var(--white);
    font-family: Montserrat, sans-serif;
    font-size: 2rem;
    line-height: normal;
    position: absolute;
    text-shadow: 4px 3px 3px rgba(0, 0, 0, 0.4);
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    text-transform: uppercase;
    width: 100%;
}

.fade-overlay {
    height: 100%;
    opacity: 0;
}

.item:hover .fade-overlay {
    opacity: 1;
}

.service-wrapper-inner.business, .service-wrapper-inner h2 {
    opacity: 1;
    transition: .5s ease;
}

.item:hover .service-wrapper-inner.business, .item:hover .service-wrapper-inner h2 {
    opacity: 0;
    transition: .5s ease;
}

.service-wrapper-inner.education, .service-wrapper-inner h2 {
    opacity: 1;
    transition: .5s ease;
}

.item:hover .service-wrapper-inner.education, .item:hover .service-wrapper-inner h2 {
    opacity: 0;
    transition: .5s ease;
}

.service-wrapper-inner.liberal, .service-wrapper-inner h2 {
    opacity: 1;
    transition: .5s ease;
}

.item:hover .service-wrapper-inner.liberal, .item:hover .service-wrapper-inner h2 {
    opacity: 0;
    transition: .5s ease;
}

.service-wrapper-inner.natural, .service-wrapper-inner h2 {
    opacity: 1;
    transition: .5s ease;
}

.item:hover .service-wrapper-inner.natural, .item:hover .service-wrapper-inner h2 {
    opacity: 0;
    transition: .5s ease;
}
/* End Four Colleges */

/*Form*/
.recruiter-form {
    background: var(--white);
    border-radius: 25px;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
    margin: 0 auto;
    max-width: 360px;
    padding: 45px;
    text-align: center;
    transition: all 1s ease;
    width: 20%;
    z-index: 5;
}

    .recruiter-form > span {
        font-size: 1.65rem;
    }

.request-form {
    display: none;
    transition: all 0.5s ease;
}

.reveal {
    transform: translateY(150px);
    opacity: 0;
    transition: 1s all ease;
}

    .reveal.active {
        transform: translateY(0);
        opacity: 1;
    }

.toggleBtn {
    background: transparent;
    border: 0;
    box-sizing: border-box;
    cursor: pointer;
    margin: 0;
    outline: 0;
    padding: 0;
}

.request-form.open {
    display: block;
}

.request-form input {
    background: #f2f2f2;
    border: 0;
    box-sizing: border-box;
    margin: 0 0 15px;
    outline: 0;
    padding: 15px;
    width: 100%;
}

.request-form a.submit {
    background: var(--uni-red);
    border-radius: 25px;
    border: 0;
    color: var(--white);
    cursor: pointer;
    outline: 0;
    padding: 15px;
    text-transform: uppercase;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    width: 100%;
}

.request-form button.submit:hover, .request-form button.submit:active, .request-form button.submit:focus {
    background: #000;
}

/*Our Leaders*/
#leaders, .profiles {
    align-items: center;
    color: var(--white);
    display: flex;
    flex-direction: column;
    background: var(--dim-grey);
    padding: 4rem;
}

    #leaders h2, .profiles h2 {
        font-size: 4rem;
        margin: 0 auto;
        text-align: center;
    }

.centered {
    margin: 0 auto;
    padding: 0 1rem;
}

    .centered.profile {
        max-width: 80%;
    }

.profileCards {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1rem;
    justify-content: center;
    margin: -1rem auto;
}

    .profileCards > .column {
        display: flex;
        flex-direction: column;
        flex: 0 0 calc(33% - 1rem);
        justify-content: center;
    }

.column img {
    border-radius: 25px;
    display: block;
    max-width: 200px;
    width: 100%;
}

.names.staff {
    line-height: normal;
    margin: 0;
}

.firstName {
    font-size: 1.5rem;
    font-weight: 600;
    text-transform: uppercase;
}

.lastName {
    font-size: 1.35rem;
}

.position.staff, .phone.staff {
    font-size: 1rem;
    font-weight: 600;
    line-height: normal;
    margin: 6px 0 0 0;
}

.title.staff {
    font-size: 1rem;
    font-weight: 400;
    line-height: normal;
    margin: 1% 15% 0 0;
}

.rounded-img {
    border-radius: 25px;
}

button.icon {
    background: transparent;
    border: none;
    cursor: pointer;
    display: block;
    height: 45px;
    position: absolute;
    width: 45px;
}

/* Student Types */
#student-images {
    background-color: var(--white);
    padding: 1rem 2rem 1rem 2rem;
}

/*Image cards/rows*/
.row {
    align-items: unset;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    overflow: hidden;
    row-gap: 0;
    width: 85%;
    justify-content: space-between;
}

    .row .column {
        flex: inherit;
        flex-grow: 0;
        height: 50vh;
        margin: 0;
        max-height: 50vh;
        width: calc(25% - 12px);
    }

        .row .column img {
            display: block;
            height: 100%;
            max-width: unset;
            object-fit: cover;
            width: 100%;
        }

/*Effect4v2*/
a:focus-visible .effect4v2 {
    border: 3px red solid;
}

.effect4v2 {
    border-radius: 25px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    height: 100%;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 100%;
}

    .effect4v2 .overlay {
        background-color: rgba(75, 75, 75, 0);
        height: 100%;
        left: 0;
        overflow: hidden;
        position: absolute;
        top: 3px;
        transition: all 0.4s cubic-bezier(0.88, -0.99, 0, 1.81);
        -webkit-transition: all 0.4s cubic-bezier(0.88, -0.99, 0, 1.81);
        width: 100%;
    }

    .effect4v2:hover .overlay, .effect4v2:focus .overlay, .effect4v2:focus-visible .overlay {
        background-color: rgba(75, 75, 75, 0.4);
        cursor: pointer;
        transition: all 0.4s cubic-bezier(0.88, -0.99, 0, 1.81);
        -webkit-transition: all 0.4s cubic-bezier(0.88, -0.99, 0, 1.81);
    }

    .effect4v2 img {
        filter: grayscale(0) blur(0);
        transition: 0.5s ease-in-out;
        -webkit-filter: grayscale(0) blur(0);
        -webkit-transition: all 0.5s ease-in-out;
    }

    .effect4v2:hover img, .effect4v2:focus img, .effect4v2:focus-visible img {
        filter: grayscale(1) blur(3px);
        transform: scale(1.2);
        -ms-transform: scale(1.2);
        -webkit-filter: grayscale(1) blur(1px);
    }

    .effect4v2 .overlay > h2 {
        background-color: rgba(145,116,75, 1);
        bottom: 0;
        color: var(--white);
        font-family: Montserrat, sans-serif;
        font-size: 2rem;
        height: auto; /*8vh*/
        line-height: normal;
        padding: 1rem 0 1rem 0;
        position: absolute;
        text-shadow: 4px 3px 3px rgba(0, 0, 0, 0.4);
        text-transform: uppercase;
        transform: translateY(0px);
        -ms-transform: translateY(0px);
        -webkit-transform: translateY(0px);
        transition: all 0.4s cubic-bezier(0.88, -0.99, 0, 1.81);
        -webkit-transition: all 0.4s cubic-bezier(0.88, -0.99, 0, 1.81);
        width: -webkit-fill-available;
        width: 100%;
    }

        .effect4v2 .overlay > h2 > span {
            width: 80%;
            display: block;
            margin: 0 auto;
        }

    .effect4v2:hover h2, .effect4v2:focus h2, .effect4v2:focus-visible h2 {
        background-color: var(--uni-red); /*rgba(225,37,27, 1)*/
        transform: translateY(-75px);
        -ms-transform: translateY(-75px);
        -webkit-transform: translateY(-75px);
    }

.border-left-right {
    border-left: 1px var(--black) solid;
    border-right: 1px var(--black) solid;
}

/*Greyscale, zoom and blur*/
.greyZoomBlur img {
    filter: grayscale(0) blur(0);
    transition: 0.5s ease-in-out;
    -webkit-filter: grayscale(0) blur(0);
    -webkit-transition: all 0.5s ease-in-out;
}

.greyZoomBlur:hover img {
    cursor: pointer;
    filter: grayscale(1) blur(3px);
    transform: scale(1.2);
    -ms-transform: scale(1.2);
    -webkit-filter: grayscale(1) blur(3px);
}

/*Greyscale*/
.greyscale img, .greyscale {
    filter: grayscale(0%);
    transition: 0.4s ease-in-out;
    -webkit-filter: grayscale(0%);
    -webkit-transition: 0.4s ease-in-out;
}

    .greyscale:hover img, .greyscale:hover {
        cursor: pointer;
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
    }

/*Sepia*/
.sepia img, .sepia {
    filter: sepia(0);
    transition: 0.4s ease-in-out;
    -webkit-filter: sepia(0);
    -webkit-transition: 0.4s ease-in-out;
    transform: scale(1.05);
}

    .sepia:hover img, .sepia:hover {
        cursor: pointer;
        filter: sepia(1);
        -webkit-filter: sepia(1);
        transform: scale(1);
    }

/*Greyscale-reverse*/
.greyscale-rv img, .greyscale-rv {
    filter: grayscale(100%);
    transition: 0.4s ease-in-out;
    -webkit-filter: grayscale(100%);
    -webkit-transition: 0.4s ease-in-out;
}

    .greyscale-rv:hover img, .greyscale-rv:hover {
        cursor: pointer;
        filter: grayscale(0%);
        -webkit-filter: grayscale(0%);
    }

/*Sepia-reverse*/
.sepia-rv img, .sepia-rv {
    filter: sepia(1);
    transition: 0.4s ease-in-out;
    -webkit-filter: sepia(1);
    -webkit-transition: 0.4s ease-in-out;
}

    .sepia-rv:hover img, .sepia-rv:hover {
        cursor: pointer;
        filter: sepia(0);
        -webkit-filter: sepia(0);
    }

/* Image Grow */
.imageGrow {
    border-radius: 30px;
    margin: 10px;
    overflow: hidden;
    transition: 0.5s ease-in-out;
    -webkit-transition: 0.5s ease-in-out;
    width: auto;
}

.profileCards > .column > a {
    display: flex;
}

    a > .imageGrow:hover {
        margin: 10px;
        transform: scale(1.1);
    }
/* End Image Grow */

/* Three CTA Buttons */
.columns {
    display: flex;
    column-gap: 25px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
    row-gap: 10px;
    width: 100%;
}

.CTA-heading > h1 {
    color: var(--uni-red);
    font-size: 4rem;
    font-weight: 800;
    line-height: 1.5;
    margin: 0;
    text-align: center;
}

.container p {
    letter-spacing: 0.1rem;
    margin: 0 0 1rem 1.25rem;
    font-kerning: none;
}

.columns-btn {
    padding: 1rem;
}


/* Background Colors */
.bone {
    background-color: var(--bone);
}

.chamoisee {
    background-color: var(--chamoisee);
}

.dim-grey {
    background-color: var(--dim-grey);
    color: var(--white);
}

.gunmetal {
    background-color: var(--gunmetal);
}

.lion {
    background-color: var(--lion);
}

.platinum {
    background-color: var(--platinum);
}

.platinum-light {
    background-color: var(--platinum-light);
}

.timberwolf {
    background-color: var(--timberwolf);
}

.white-smoke {
    background-color: var(--white-smoke);
}

@-webkit-keyframes pulse {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(225,37,27, 0.4);
    }

    75% {
        -webkit-box-shadow: 0 0 0 20px rgba(225,37,27, 0);
    }

    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(225,37,27, 0);
    }
}

@keyframes pulse {
    0% {
        -moz-box-shadow: 0 0 0 0 rgba(225,37,27, 0.4);
        box-shadow: 0 0 0 0 rgba(225,37,27, 0.4);
    }

    75% {
        -moz-box-shadow: 0 0 0 20px rgba(225,37,27, 0);
        box-shadow: 0 0 0 20px rgba(225,37,27, 0);
    }

    100% {
        -moz-box-shadow: 0 0 0 0 rgba(225,37,27, 0);
        box-shadow: 0 0 0 0 rgba(225,37,27, 0);
    }
}

/*Fade animation*/
@keyframes fadeIn {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.fade-in-out-1 {
    animation: 6s linear 1s infinite alternate fadeIn;
}

.fade-in-out-2 {
    animation: 20s linear infinite alternate fadeIn;
}

.fade-in-out-3 {
    animation: 10s linear infinite alternate fadeIn;
    animation-delay: 3s;
}

/*Emergency Notice CSS*/
.emergencynotice {
    display: flex;
    flex-direction: column;
}

    .emergencynotice.sticky {
        position: fixed;
        top: 4rem;
        width: 100%;
        z-index: 1;
    }

.notice {
    background: #3c7295;
    color: var(--white);
    max-height: 5.5rem;
}

    .notice.emergency {
        background: var(--uni-red);
    }

    .notice.warning {
        background: #f7941d;
    }

    .notice a {
        background: url('<t4 type="media" formatter="path/*" id="62461" />') no-repeat scroll 32px 50%;
        color: var(--white);
        display: block;
        font-size: 1.5rem;
        font-weight: bold;
        padding: 40px 50px 40px 120px;
        text-decoration: none;
    }

    .notice .fa {
        float: right;
        margin: 2.85rem;
        font-weight: bold;
        color: #0e4966;
        border: 2px solid #0e4966;
        padding: 1rem;
        border-radius: 5px;
        cursor: pointer;
    }

    .notice a,
    .notice.emergency a,
    .notice.warning a,
    .notice.emergency .fa,
    .notice.warning .fa {
        color: var(--white);
        border-color: var(--white);
    }

@media (max-width: 550px) {
    .notice .row span {
        margin: -70px 16px 0 0;
    }
}

@media (max-width: 330px) {
    .notice .row span {
        margin: -90px 16px 0 0;
    }
}

.notice {
    align-items: center;
    display: flex !important;
    opacity: 1 !important;
}

    .notice.closed {
        display: block !important;
        transition: opacity 500ms ease-out, max-height 500ms ease-out !important;
        max-height: 0 !important;
        opacity: 0 !important;
    }

        .notice.closed .fa {
            display: none !important;
        }

        .notice.closed a {
            padding-top: 0 !important;
            padding-bottom: 0 !important;
            transition: padding 500ms ease-out !important;
            max-height: 0 !important;
        }

@media (max-width: 1080px) {
    .notice {
        margin-top: 4rem;
    }
}
/*End Emergency Notice CSS*/