@media screen and (max-width:1199px){
    .screenContainer,
    .screenContainer.has-image:not(.full-width){
        width:100%;
        padding-left:30px;
        padding-right:30px;
    }

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

    nav{
        right:30px;
    }

    .column-slider-wrapper .slider-wrapper{
        height:550px;
    }

    .slider-wrapper .content{
        font-size: 35px;
    }

    .image-callouts img{
        width: 100%;
        height: 200px;
        aspect-ratio: 4 / 3;
    }

    .four-circle-diagram .circle{
        transform: none !important;
    }
}

@media screen and (max-width:999px){

    nav a {
        font-size: 16px;
    }

    .image-callouts img{
        width: 100%;
        height: 150px;
        aspect-ratio: 4 / 3;
    }

    #logo{
        max-width:285px;
    }

    .column-slider-wrapper .slider-wrapper{
        height:420px;
    }

    .slider-wrapper .content{
        font-size: 25px;
    }

    section.shadow {
        padding-bottom: 40px;
        margin-bottom: 80px;
    }
}

@media screen and (max-width:799px){
    
    header{
        height:70px;
    }

    #logo{
        height: 40px;
    }

    #navToggle{
        opacity: 1;
    }  

    .navActive #navToggle{
        color:#ffffff;
        position: fixed;
        z-index: 1000;
    }

    nav {
        opacity: 0;
        right: 85px;
        transform: translateX(-1000px);
        pointer-events: none;
    }    

    .navActive .pageContainer:after{
        content: " ";
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.6);
        position: fixed;
        left: 0;
        top: 0;
    }

    .navActive header nav{
        opacity: 1;
        position: fixed;
        background-color: var(--main-color-purple);
        left: 0;   
        top: 0;
        height:100%;
        z-index: 1000;
        padding: 30px;
        box-shadow: 5px 0 10px rgba(0,0,0,0.8);
        transition: all 200ms ease-in-out;
        transform: translateX(0);
        pointer-events:inherit;
    }

    .navActive .pageContainer{
        position: fixed;
    }

    .navActive .pageContainer{
        position: fixed;
        left: calc(100% - 85px);
        transition: all 150ms ease-in-out;
    }

    .navActive header nav a{
        color:#ffffff;
        font-size: 20px;
        padding-bottom: 5px;
        display: block;
    }

    .navActive ul.linear li{
        display: block;
        border-left: none;
    }

    .navActive nav li{
        margin-left: 0;
        padding-left: 0;
    }
}

@media screen and (max-width:599px){
    .column-slider-wrapper,
    .image-callouts,
    .spotlight-wrap,
    .article-listing article,
    .main-content dl.two-column,
    .grid-listing.three-column{
        grid-template-columns: 1fr;
    }

    .column-slider-wrapper {
        gap:25px;
    }

    .column-slider-wrapper .elephant{
        height: 200px;
        justify-content: center;
    }

    .column-slider-wrapper .elephant img{
        height: 200px;
    }

    .text-content .has-image.left .content{
        order:2;
    }

    .text-content .has-image.left .image{
        order:1;
    }

    footer{
        grid-template-columns: 1fr;
    }

    .social-media{
        justify-content: left;
        text-align: left;
    }

    .video-listing {
        display: grid;
        grid-template-columns: repeat(1,1fr);
        gap: 20px;
    }

    .case-study-logo{
        float: none;
        max-width: 100%;
    }
}