/*CSS Responsive*/

/*CSS kicks in when the device is 1845 and below*/
@media only screen and (max-width: 1845px) {
    /*Columns*/
    .columns { column-gap: unset; }

    div.expBoxes a div.dept, div.expBoxes div.dept { font-size: 1.5rem; line-height: 1.5; }
}

/*CSS kicks in when the device is 1745 and below*/
@media only screen and (max-width: 1745px) {
    /*Columns*/
    .container.padding { padding: 2rem 4rem 1rem 4rem; }

    div.expBoxes a div.dept, div.expBoxes div.dept { font-size: 1.35rem; }
}

/*CSS kicks in when the device is 1660px and below*/
@media only screen and (max-width: 1660px) {
    .searchbar input[type="search"].active, .searchbar:hover input[type="search"] { width: 200px; padding: 0 10px; transition: all 0.5s 0.2s ease; }

    .container.padding { padding: 2rem 2.25rem 1rem 2.25rem; }
}

/*CSS kicks in when the device is 1550px and below*/
@media only screen and (max-width: 1550px) {
    .searchbar input[type="search"].active, .searchbar:hover input[type="search"] { width: 160px; padding: 0 10px; transition: all 0.5s 0.2s ease; }

    .top-navbar ul.nav.right { margin-right: 0.25rem; }

    .columns .columns-3 { flex: 0 0 30%; padding: 0.5rem; }

    .columns .columns-3 .faded > img { width: 100%; }
}

/*CSS kicks in when the device is 1440px and below*/
@media only screen and (max-width: 1440px) {
    .top-navbar ul.nav.right {
        background-color: #bb9c59;
        box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
        display: flex;
        height: 40px;
        justify-content: flex-end;
        margin-right: 0rem;
        margin-top: 0rem;
        min-height: 40px;
        padding: 0.5rem 0 0.2rem 0;
        width: 100%;
    }

    .jagHead {
        top: 1rem;
    }

    h1.page-title {
        padding-top: 8rem;
    }
}

/*CSS kicks in when the device is 1366px and below*/
@media only screen and (max-width: 1366px) {

    .secNavigation ul.secondNav-menu li { line-height: normal; width: calc(42% - 1rem); }

    .top-navbar { min-height: 65px; }

    .searchbar { align-items: center; display: inline-flex; float: left; margin-top: 1rem; width: auto; }

    .searchbar input[type="search"] { border: 0; padding: 0; width: 0px; height: 35px; border-radius: 3px; transition: all 0.3s ease; }

    .searchbar input[type="search"].active, .searchbar:hover input[type="search"] { width: 250px; padding: 0 10px; transition: all 0.5s 0.2s ease; }

    .secNavigation ul.secondNav-menu li { width: calc(48% - 1rem); }

    .container:first-of-type > p:first-of-type { padding-right: 2%; }

    .container .textImage { flex-direction: column; }

    .columns { /*flex-direction: column;*/ }

    .columns-5 { justify-content: center; margin: 0 auto 2rem auto; }

    .faded.faded-left.faded-right::after, .faded.faded-left::after, .faded.faded-right::after { box-shadow: unset; }

    .faded.faded-left.faded-right > img, .faded.faded-left > img, .faded.faded-right > img { border-radius: 25px; }

    .columns-4-news { column-gap: 1rem; width: 100%; }

    .columns-4-news .column { flex: 0 0 40%; }

    .columns-5 > .column { flex: 0 0 25%; }

    .columns .columns-3 { flex: 0 0 100%; }

    .flex-container { justify-content: center; width: 100%; }

    section.text-image-text > .text-image-container { align-items: center; flex-direction: column; width: 90%; }

    section.text-image-text > .text-image-container .left.content, section.text-image-text > .text-image-container .right.content { margin-left: unset; margin-right: unset; width: 90%; }

    .text-image-container .image { margin-bottom: 2rem; }

    section.text-image > .text-image-container .left.content, section.text-image > .text-image-container .right.image { width: 60%; }

    .first-story { padding-left: 40px; padding-right: 40px; }

    .events-list { display: flex; margin: 0 3rem; }

    .event-image { display: none; }

    .event-container { margin-right: 3rem; margin-top: 3rem; margin-left: 3rem; }

    .spotlight { width: 100%; }

    .spot-quote p.quote-name, .spot-quote p.quote-major { line-height: normal; }

    .width-65, .width-80 { width: 100%; }

    div.expBoxes a div.dept, div.expBoxes div.dept { font-size: 1.4rem; }
}

/*CSS kicks in when the device is 1280px and below*/
@media only screen and (max-width: 1280px) {
    .top-navbar ul.nav { font-size: 1rem; }
    .top-navbar ul.nav.right { font-size: 1rem; }
    .searchbar input[type="search"].active, .searchbar:hover input[type="search"] { width: 200px; }
}


/*CSS kicks in when the device is 1194px and below*/
@media only screen and (max-width: 1194px) {
    h1.page-title { padding-top: 7.5rem; }
}

/*CSS kicks in when the device is 1170px and below*/
@media only screen and (max-width: 1170px) {
    .searchbar input[type="search"].active, .searchbar:hover input[type="search"] { width: 125px; }
}

/*CSS kicks in when the device is 1080px and below*/
@media only screen and (max-width: 1080px) {
    #body.body.show { overflow: hidden; }

    .top-navbar { min-height: 65px; }

    .top-navbar .logo, .top-navbar ul.nav.right, .searchbar { float: none; }

    .navbar-toggle { background-color: transparent; background-image: none; border: 1px solid transparent; border-radius: 4px; color: #fff; display: block; float: right; margin-bottom: 1rem; margin-top: 1rem; margin-right: 1.5rem; padding: 9px 10px; position: relative; }

    .navbar-collapse { background-color: #fff; border-top: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,.1); display: flex; flex-direction: column; height: auto; overflow-x: visible; padding-bottom: 1rem; padding-left: 1rem; padding-right: 1rem; transition: all 0.2s ease; -webkit-overflow-scrolling: touch; -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }

    .collapse { display: none; height: 0; }

    .navbar-collapse.in { overflow-y: auto; }

    .top-navbar.show { height: 100%; overflow-x: hidden; z-index: 10; }

    .top-navbar ul.nav, .top-navbar ul.nav.right { font-size: 1.18rem; margin-right: unset; }

        .top-navbar ul.nav.right {
            background-color: unset;
            box-shadow: unset;
            display: block;
            height: auto;
            left: unset;
            position: unset;
            top: unset;
        }

    .top-navbar ul.nav > li { border-bottom: 1px #e1251b solid; display: block; float: none; padding-bottom: 0.5rem; padding-top: 0.5rem; position: relative; }

    .top-navbar ul.nav > li:last-child { border-bottom: none; }

    .top-navbar ul.nav > li a, .top-navbar ul.nav.right > li a { color: #e1251b; display: block; text-decoration: none; transform: translateX(0rem); transition-duration: 0.3s; transition-property: transform; text-shadow: none; }

    .top-navbar ul.nav > li:hover { letter-spacing: unset; transition: unset; }

    .searchbar input[type="search"] { border: 1px #000 solid; height: 45px; padding: 0 10px; transition: all 0.5s 0.2s ease; width: 98%; }

    .searchbar input[type="search"].active, .searchbar:hover input[type="search"] { width: 98%; }

    .searchbar .icon { background: #062333; height: 45px; transition: all 0.3s ease; width: 45px; }

    .jagHead { top: 8%; width: 10%; z-index: 1; }

    .jagHead.js-scrolling { width: 10%; }

    .container.padding:first-of-type { padding-right: 2.25rem; }

    .text-w-image { flex-direction: column; }

    div.expBoxes a div.dept, div.expBoxes div.dept { font-size: 1.25rem; height: 50vh; }

    footer .redFooter ul { flex-wrap: wrap; }

    footer .redFooter ul li { flex-grow: 0.05; margin-left: 0.2rem; margin-right: 0.2rem; }

    .panel-collapse.collapse {
        display: block;
        height: auto;
    }
}

/*CSS kicks in when the device is 926px and below*/
@media only screen and (max-width: 926px) {
    .jagHead { display: none; }

    .flex-container { margin-bottom: 4rem; width: 98%; }

    .programs-text { margin-left: 0; margin-right: 0; }

    .columns-4-news .column, .columns-4-icons .column { flex: 1 0 40%; }
}

/*CSS kicks in when the device is 667px and below*/
@media only screen and (max-width: 667px) {
    a.button-82-pushable { width: 100%;}

    h1.page-title { font-size: 2.85rem; margin: 0 0 3rem 2rem; }

    .secNavigation ul.secondNav-menu li { width: 100%; }

    .container .textImage .text-right { padding: 2rem; }

    .container .text-align-right { text-align: unset; width: 100%; }

    .container h2 { font-size: 2.25rem; }

    .container h3 { font-size: 1.65rem; line-height: normal; }

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

    .columns-5 { flex-direction: column; }

    p.names.staff > .firstName { font-size: 3.25rem; }

    p.names.staff > .lastName { font-size: 3rem; }

    p.position.staff, p.phone.staff { font-size: 1rem; }

    p.title.staff { font-size: 1.125rem; }

    .row { flex-direction: column; }

    .columns-4-news { flex-direction: column; }

    .content { flex-direction: column; }

    .content .text { padding: 0rem 4rem 2rem 4rem; }

    .flex-container { margin-bottom: 4rem; width: 98%; }

    .spotlight { flex-direction: column; width: 100%; }

    .spot-quote p.quote-major { margin-left: 0; }

    .spot-image-left, .spot-image-right { margin: 2rem auto; }

    .arrow.relative-top { display: none; }

    .top-news-banner-description { background: unset; border-radius: unset; color: inherit; padding: 20px 0; position: unset; }

    p.top-headline { font-size: 1rem; margin: 0; }

    .container p.top-desc { margin: 0 0 0 1rem; }

    div.expBoxes { flex-direction: column; }

    div.expBoxes a div.dept, div.expBoxes div.dept { font-size: 1.85rem; height: 40vh; width: 100vw; }

    footer .columns-2 { flex-direction: column; padding: 2rem 0 0 0; }

    footer .columns-2 > .columnLeft { border-right: unset; }

    footer .logo { margin: 0 auto; width: fit-content; }

    footer .address { font-size: 1.25rem; margin-bottom: 2rem; margin-left: unset; margin-top: 1rem; }

    footer .social-links a { font-size: 2.15rem; height: 65px; width: 65px; }

    footer .university-links-footer { column-count: 1; font-size: 1.25rem; line-height: normal; padding: 0 0 0 1rem; width: 90%; }

    footer .university-links-footer li { margin-bottom: 1rem; }

    footer .university-links-footer li a { line-height: normal; }

    footer .redFooter ul { align-items: unset; flex-direction: column; font-size: 1.25rem; }

    footer .redFooter ul li { border-right: unset; flex-grow: unset; text-align: unset; }
}

/*CSS kicks in when the device is 428px and below*/
@media only screen and (max-width: 428px) {
    h1.page-title { font-size: 2.85rem; margin: 0 auto; text-align: center; }

    .container .textImage .text-right { padding: 1rem; }

    .content .text { padding: 0rem 2rem; }

    .container h2 { font-size: 2rem; }

    .grey.container.padding { background-size: unset !important; }

    .largest.blackText { padding-left: 0 !important; }

    .align-item-start, .align-item-end { align-items: center; }

    .columns .columns-2, .columns .columns-3 { flex: unset; }

    .text h2.red-white { font-size: 3rem; }

    .text-w-image { flex-direction: column; }

    .text-w-image .txt { width: 100%; }

    p.names.staff > .firstName { font-size: 2rem; }

    p.names.staff > .lastName { font-size: 1.4rem; }

    .content div.image.align-item-start { margin-top: 1rem; }

    .content.left div { padding-right: unset; }

    p.top-headline { line-height: normal; }

    .top-news-banner-description p:nth-child(2) { display: none; }

    .columns-4-news .column, .columns-4-icons .column { align-items: center; flex: 0 0 100%; padding: 0.5rem; }

    .button-red-pushable { width: 100%; }

    .event-container { margin-right: 0; margin-top: 2rem; margin-left: 0; }

    div.expBoxes a div.dept, div.expBoxes div.dept { font-size: 1.55rem; height: auto; }

        div.expBoxes a:hover div.dept, div.expBoxes div.dept:hover {
            flex-grow: 2;
            opacity: 1;
            width: 110vw;
        }

    section.text-image > .text-image-container { flex-direction: column; width: 100%; }

    section.text-image > .text-image-container .left.content, section.text-image > .text-image-container .right.image { width: auto; }

    section.text-image > .text-image-container .left.content { background: rgb(217, 217, 217); margin-right: 0; }

    footer .social-links { display: flex; flex-wrap: wrap; flex: 0 0 50%; justify-content: center; margin-bottom: 1.5rem; row-gap: 1rem; }

    footer .social-links a { font-size: 2rem; margin: 0 15px; height: 50px; width: 50px; }

    #footer-uhv-search { margin-left: 0; }
}

/*CSS kicks in when the device is 375px and below*/
@media only screen and (max-width: 375px) {
    h1.page-title { font-size: 2.15rem; margin: 0 auto; text-align: center; }

    .container.padding { padding: 1.5rem; }

    .text h2.red-white { font-size: 2.7rem; }

    .content .text { padding: 0rem 1rem; }

    footer .address { font-size: 1.25rem; margin: 2rem; }

    footer .social-links { display: flex; flex-wrap: wrap; flex: 0 0 50%; justify-content: center; margin-bottom: 1.5rem; row-gap: 1rem; }
}