/* Secondary Page Responsive */
.mobile { display: none; }


/*CSS kicks in when the device is 2560 and above*/
@media only screen and (min-width: 2560px) {
    .container.padding, section-head {
        margin: 0 auto;
        /*max-width: 75vw;*/
    }

    .button-red-1 {
        min-height: unset;
        width: auto;
    }

    .am-stickers.four {
        top: -1vh;
    }
}

/*CSS kicks in when the device is 1845 and below*/
@media only screen and (max-width: 1845px) {
    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) {
    h1.page-title {
        padding-left: 2vw;
        padding-top: 18vh;
    }

    .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) {
    .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) {
    h1.page-title {
        padding-left: 3vw;
        padding-top: 16vh;
    }
}

/*CSS kicks in when the device is 1439px and below*/
@media only screen and (max-width: 1439px) {
    h1.page-title {
        padding-left: 3vw;
        padding-top: 16vh;
    }
}

/*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(30% - 1rem);
        flex: 0 1 30%;
    }

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

    .columns .columns-2 { 
        flex: 0 0 46%;
        padding: 0.5rem;
    }

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

    .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 28%;
    }

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

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

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

    .text-image-container .image { 
        margin-top: 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-left: 3rem;
        margin-right: 3rem;
        margin-top: 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) {
    h1.page-title {
        padding-left: 3vw;
        padding-top: 15vh;
    }

    .container h2.red-uppercase {
        font-size: 4rem;
        margin: 0 auto;
        text-align: center;
        width: 100%;
    }

    .iconsCards > .column {
        flex: 1 1 calc(30% - 1rem);
    }

    .three-boxes.boxes .box {
        flex: 0 1 calc(30% - 1rem);
    }

    .two-boxes.boxes .box {
        flex: 0 1 calc(45% - 1rem);
    }
}

/*CSS kicks in when the device is 1175px and below*/
@media only screen and (max-width: 1175px) {
    h1.page-title {
        padding-left: 3vw;
        padding-top: 8vh;
    }
}


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

    h1.page-title {
        padding-left: 3vw;
        padding-top: 10vh;
    }

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

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

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

    .redBoarder {
        max-height: unset;
    }

    .three-boxes.boxes .box {
        flex: 0 1 calc(30% - 1rem);
    }

    .two-boxes.boxes .box {
        flex: 0 1 calc(45% - 1rem);
    }
}

/*CSS kicks in when the device is 1080px and below*/
@media only screen and (max-width: 1080px) and (orientation: landscape) {
    .three-boxes.boxes .box {
        flex: 0 1 calc(30% - 1rem);
    }

    .two-boxes.boxes .box {
        flex: 0 1 calc(45% - 1rem);
    }
}

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

    h1.page-title {
        padding-left: 3vw;
        padding-top: 24vh;
    }

    .secNavigation {
        padding: 0rem 3rem 1rem 3rem;
    }

        .secNavigation ul.secondNav-menu li {
            flex: 0 1 45%;
            width: 100%;
        }

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

    .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 {
        margin-bottom: 1rem;
    }

    .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%; }
  
    .event-card-container { width: 100%; }
    
    .threeButtons { flex-flow: column; }
  
    .button-red-pushable { margin-bottom: 2rem; width: 90%; }

    .two-boxes, .three-boxes {
        margin: auto 1rem 2rem 1rem;
    }

        .two-boxes.boxes .box {
            flex: 0 1 calc(48% - 1rem);
        }

        .three-boxes.boxes .box {
            flex: 0 1 calc(33% - 1rem);
        }

        .three-boxes.boxes > .box, .two-boxes.boxes .box {
            min-height: unset;
        }

    .container h1 {
        font-size: 1.5rem;
        line-height: 1;
        margin-bottom: 0.5rem;
    }

    .container h2.red-uppercase {
        font-size: 4rem;
        margin: 0 auto 2rem auto;
        text-align: center;
    }

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

    .content.left div, .content.right div {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    section.text-image-text > .text-image-container {
        margin: 0 auto 0 auto;
        padding: 1rem;
    }

    .jaguarHead {
        top: -2vh;
        width: 20%;
    }

    .iconsCards > .column p.heading {
        margin: 0 auto 1rem auto;
        line-height: normal;
    }
}

/*CSS kicks in when the device is 852px and below*/
@media only screen and (max-width: 852px) {
    h1.page-title {
        padding-left: 3vw;
        padding-top: 20vh;
    }

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

    .two-boxes, .three-boxes {
        flex-direction: column;
        gap: 2rem;
        margin: 0 auto;
    }

    .three-boxes {
        flex-direction: column;
        margin: 2rem auto;
    }

        .two-boxes.boxes .box, .three-boxes.boxes > .box {
            flex: 0 1 calc(100% - 1rem);
        }

    .boxes > .box {
        max-width: 100%;
    }

    .two-boxes.boxes .box, .three-boxes.boxes > .box {
        height: auto;
    }

    .red-number {
        justify-content: flex-start;
        width: 100%;
    }

    .am-stickers {
        display: none;
    }
}

/*CSS kicks in when the device is 850px and below*/
@media only screen and (max-width: 850px) {
    h1.page-title {
        padding-left: 3vw;
        padding-top: 8vh;
    }
}

/*CSS kicks in when the device is 812px and below*/
@media only screen and (max-width: 812px) {
    h1.page-title {
        padding-left: 3vw;
        padding-top: 8vh;
    }
}

/*CSS kicks in when the device is 768px and below*/
@media only screen and (max-width: 768px) {
    h1.page-title {
        padding-left: 3vw;
        padding-top: 10vh;
    }
}

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

    h1.page-title {
        padding-left: 3vw;
        padding-top: 20vh;
    }

    a.button-82-pushable { width: 100%;}

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

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

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

    .container h1 {
        line-height: 1;
        margin-bottom: 1rem;
    }

    .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; }

    .CTA-button-28 { max-width: unset; }

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

    .content { flex-direction: column; }

    .content .text { padding: 0; }

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

    .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; }

    section.text-image-text > .text-image-container .left.content, section.text-image-text > .text-image-container .right.content {
        background: none;
    }

    .container h2.red-uppercase {
        font-size: 3rem;
        margin: 0 auto;
        text-align: center;
    }

    .three-buttons {
        align-items: center;
        flex-direction: column;
        gap: 1rem;
    }

    .button-red-1 {
        font-size: 1rem;
        max-width: 80vw;
        min-height: 40px;
        min-width: 80vw;
    }

    .text {
        padding: 2rem;
    }

    .iconsCards > .column p.text {
        text-align: center;
    }

    /* Numbers */
    .grid2x2 > div {
        flex-basis: 80%;
        flex-direction: column;
    }

    .grid2x2 > .box {
        margin: 2rem 3rem 0 3rem;
    }

    .text-content {
        width: 100%;
    }

    /* Highlights */
    .iconsCards > .column p.heading {
        font-size: 1.25rem;
        margin: 0 auto 1rem auto;
        line-height: normal;
    }
}

/*CSS kicks in when the device is 480px and below*/
@media only screen and (max-width: 480px) {
    h1.page-title {
        padding-left: 3vw;
        padding-top: 12vh;
    }

    .notice {
      	display: inline-table !important;
        opacity: 1 !important;
        height: auto;
    }

    .secondNav-menu {
        margin-left: 0;
        flex-direction: column;
    }

    .width-50, .width-90 {
        width: 100%;
    }

    .thisSection {
        margin-bottom: 0;
        margin-left: 0;
        margin-top: 0;
    }

    .secNavigation {
        padding: 1rem;
    }

        .secNavigation ul.secondNav-menu li {
            flex: 0 0 auto;
            font-size: 1.15rem;
            margin: 0 0 1rem 0;
            padding: 0 0 0.5rem 0;
        }

            .secNavigation ul.secondNav-menu li a {
                margin: 0 0 0 0.5rem;
            }

    .content {
        margin: 0 auto 0 auto;
    }

    .am-stickers {
        top: -2vh;
        width: 22%;
    }

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

/*CSS kicks in when the device is 428px and below*/
@media only screen and (max-width: 428px) {
    .desktop { display: none!important; }
  
    .mobile { display: block; }
  
    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: 1.65rem; }
  
    .container p { margin: 0 0 1rem 0; }
  
    .container li { font-size: 1rem; margin: 0; }

    .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; }

    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 { min-width: unset; width: 100%; }
   
    .image-left .fancy { padding: 5px; }

    .event-container { margin-right: 0; margin-top: 2rem; margin-left: 0; }
  
    .event-card-container > a:link { flex-direction: column; }
  
    .event-date-container, .info-container { width: auto; }
  
    .info-container > .event-name, .info-container > .event-details { font-size: 1rem; }

    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; }

    /* Sticker Content Type */
    .grid2x2 > div {
        align-items: center;
        justify-content: center;
    }

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

/*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 { margin-bottom: 1.5rem; padding: 0rem 1rem; }

    .container h2.red-uppercase {
        font-size: 2.15rem;
    }
}

/*CSS kicks in when the device is 375px and below*/
@media only screen and (max-width: 844px) and (orientation: landscape) {
    h1.page-title {
        padding-left: 3vw;
        padding-top: 20vh;
    }
}

/*CSS kicks in when the device is 375px and below*/
@media only screen and (max-width: 812px) and (orientation: landscape) {
    h1.page-title {
        padding-left: 3vw;
        padding-top: 20vh;
    }
}