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

    nav{
        right: 30px;
    }

    header{
        font-size:14px;
        height: auto;
        margin-bottom: 20px;
    }

    .screenContainer{
        width:100%;
        box-sizing: border-box;
    }

    .screenContainer,
    footer .footer-content{
        padding-left:30px;
        padding-right:30px;
    }

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

    .page-title-wrapper{
        margin-bottom: 20px;
    }   

    .section-search-wrapper{
        right: 30px;
    }

    .colored-band .content{
        width:100%;
    }

    #our-impact-chart{
        flex-direction: column;
    }

    .custom-dropdown-wrapper{
        width:200px;
    }

    .headshot-wrapper .headshot{
        width:200px;
        height: 200px;
    }

    .call-to-action-boxes > *{
        /*font-size:45px;*/
    }

    .slider-outer-wrapper .slider{
        height:auto;
    }

    .slider .slide img{
        width:100%;
    }

    .four-column-wrapper.staff-listing-wrapper{
        grid-template-columns: repeat(3,1fr);
    }

    .series-listing-pinned-wrapper .ceAvailable {
        bottom: 55px;
        left: 15px;
    }

    .page-title-wrapper .favorites-icon-wrapper{
        right: 10px;
    }
}

@media screen and (max-width:1100px){
    .page-title-wrapper h1,
    .page-title-wrapper .favorites-icon-wrapper + h1{
        font-size: 50px;
    }
}

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

    header #logo {
        max-width: 340px;
        top: 15px;
    }

    header nav{
        top: 105px;
        display: none;
    }

    .navActive header nav{
        display: block;
    }

    .navActive main, .navActive footer {
        display: none;
    }

    nav{
        background-color:white;
        z-index: 1000;
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
        right: 0;
    }

    header nav ul.flex-columns{
        flex-direction: column;
        text-align: left;
    }

    header nav li{
        margin-left: 15px;
        width: 100%;
        font-size: 20px;
        margin-bottom: 5px;
        order: 2;
    }

    #navToggle{
        display: block !important;
        right:30px;
    }

    nav ul.inline .dropdown{
        position: relative;
        opacity: 1;
        visibility: visible;
        box-shadow:none;
        padding-top: 0;
        padding-left: 20px;
    }

    nav ul.inline .dropdown ul{
        background-color:transparent;
        padding: 0;
    }

    nav ul.inline .dropdown li{
        font-size: 20px;
        margin-bottom: 2px;
    }

    nav li.site-search{
        order: 1;
        margin-bottom: 20px;
    }

    nav ul.inline .dropdown ul::before {
        border:none;
    }

    nav ul.inline .dropdown li a{
        color: var(--main-text-color);
    }

    nav .nav-icon{
        width:100%;
        text-align: left;
    }

    .nav-wrapper{
        height: 110px;
    }

    nav ul.inline > li{
        border-top: 1px solid black;
    }

    nav .parentTrigger::after{
        display: none;
    }

    .slider-outer-wrapper{
        margin-bottom: 30px;
    }

    .site-search {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 10px;
        align-content: center;
    }

    .site-search .site-search-field-wrapper{
        border:1px solid var(--dark-border-color);
        grid-template-columns: 1fr auto;
        display: grid;
    }

    .site-search-field-wrapper button{
        width: 30px;
    }

    .show-search-field li:not(.site-search),
    .site-search input{
        display: inline-block;
        font-size: 18px;
        color: #666;
        border: none;
    }

    #site-search-btn{
        align-self: center;
    }

    .tools-listing{
        flex-direction: column;
        align-items: top; 

    }
    
    .tools-listing article{
        margin-bottom:30px;
        max-width:500px;
    }

    .additional-tools .tools-listing article{
        text-align: center;
    }

    .article-listing.flex-columns.three-columns article{
        max-width: 45%;
    }

    .article-listing.grid-columns.three-columns{
        grid-template-columns: repeat(2,1fr);
    }


    .training-details{
        flex-direction: column;
    }

    .training-details aside{
        flex-basis: auto;
    }

    .call-to-action-boxes > *{
        padding:35px;
        /*font-size:35px;*/
    }

    .text-content .content h1.purple-head, 
    .text-content .content h1.orange-head{
        /*font-size:40px;*/
    }

    .call-to-action-boxes{
        padding-top:30px;
        padding-bottom:30px;
    }

    .footer-content{
        grid-template-columns: 1fr;
        grid-template-areas: 
        "footer-logo"
        "footer-nav";
    }

    .footer-logo{
        text-align: center;
    }

    .footer-nav{
        justify-self: center;
    }

    .copyright{
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .four-column-wrapper.staff-listing-wrapper{
        grid-template-columns: repeat(3,1fr);
    }

    .staff-listing-wrapper .headshot{
        width:150px;
    }

    .series-listing-pinned-wrapper.grid-columns.four-columns {
        grid-template-columns: repeat(2,1fr);
    }

    .series-listing-pinned-wrapper .ceAvailable {
        bottom: 10px;
        right: 15px;
        left: auto;
    }

    .event-date-wrapper .event-date{
        width: 130px;   
    }

    .event-date-wrapper .event-date .day{
        font-size: 60px;
    }

    .page-playlists .playlists-detail .page-title-wrapper h1{
        font-size: 45px;
    }

    .playlists-listing-wrapper.grid-columns.three-columns{
        grid-template-columns: repeat(2,1fr);
        gap: 20px;
    }
    
}

@media screen and (max-width:800px){
    .text-content {
        padding: 30px 0;
    }

    .text-content .has-image{
        flex-direction: column;
        gap:10px;
    }

    .text-content .overlap-image.right .image{
        margin:0;
    }

    .text-content.gray .has-image .content > div, 
    .text-content.purple .has-image .content > div, 
    .text-content.orange .has-image .content > div, 
    .text-content.light-gray .has-image .content > div{
        position: relative;
    }

    .text-content .has-image.overlap-image .image img{
        margin-bottom: 0;
    }

    .self-learning-laptop > div{
        transform: none !important;
    }

    .who-we-are-section div.image img{
        position: relative ;
        transform: none ;
        top: auto;
        left: auto;
    }

    .article-listing.flex-columns.three-columns{
        justify-content:center;
    }

    .article-listing.flex-columns.three-columns article{
        max-width: 65%;
    }

    .page-training-bundles .article-listing:not(.trainings-listing) .image{
        min-height:200px;
    }

    .page-training-bundles .article-listing:not(.trainings-listing) img{
        height:200px;
    }

    .article-listing.two-columns article,
    .article-listing.two-columns .article{
        flex-direction: column;
        gap: 20px;
    }

    .article-listing.two-columns .content{
        padding-left:0;
    }

    .article-listing.two-columns aside{
        flex: 0 0 auto;
        border-left:0;
        padding-right:0;
        padding-top:12px;
        border-right: none;
        border-bottom: 1px solid var(--light-border-color);
    }

    .article-listing.grid-columns.three-columns{
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .article-listing.grid-columns.three-columns article{
        max-width: 350px;
    }

    .article-listing .article{
        padding:20px;
    }

    .with-sidebar{
        flex-direction: column;
    }

    .with-sidebar > aside{
        flex-basis: auto;
    }

    .trainings-listing.article-listing aside dd {
        flex: 1 1 calc(100% - 150px);
    }

    .staff-listing-wrapper{
        justify-content: center;
    }

    .staff-listing-wrapper figure{
        margin: auto;
        margin-bottom: 30px;
    }

    .resources-tabs{
        flex-direction: column;
        gap:30px;
    }

    .page-resources .tabs-links{
        flex-basis: 50%;
    }

    .page-resources .tabs-links li{
        grid-template-columns: auto;
        margin-bottom: 15px;
    }

    .page-resources .tabs-links li.active:after{
        border:none;
    }

    .page-resources .icon{
        width:60px;
        height:60px;
    }

    .provider-spotlight-wrapper{
        flex-direction: column;
    }

    .provider-spotlight-wrapper img{
        max-height:200px;
    }

    footer .footer-content {
        flex-direction: column;
    }

    footer .email-signup p{
        margin-bottom: 20px;
    }

    footer .email-signup{
        flex-basis: auto;;
    }

    footer .footer-nav{
        text-align: center;
        margin-bottom: 30px;
    }

    .copyrightWrap .screenContainer{
        flex-direction: column;
        align-items: center;
        gap: 5px;
    }

    .training-filters{
        flex-direction: column;
    }

    .training-filters .custom-dropdown-wrapper{
        width: 100%;
        margin-bottom: 15px;
    }

    .training-icons.bottom{
        position: relative;
    }

    .call-to-action-boxes{
        flex-direction: column;
    }

    .call-to-action-boxes > *{
        /*font-size:45px;*/
    }

    #loginContainer section{
        width: 100% !important;
        box-sizing: border-box;
        padding: 20px !important;
    }

    .three-column-wrapper{
        grid-template-columns: repeat(2,1fr);
    }

    .copyright{
        text-align:center;
        margin-bottom: 10px;
    }

    .footer-content{
        grid-template-columns: 80%;
        grid-template-areas: 
        "footer-logo"
        "footer-nav" 
        "email-signup";
        text-align: center;
        justify-content: center;
    }

    .page-playlists .article-listing:not(.trainings-listing) .content-wrapper{
        padding: 20px 20px 95px;
    }

    .grid-columns.three-columns{
        gap: 20px;
    }
    
}


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

    header nav{
        top: 90px;
    }

    header #logo {
        max-width: 250px;
        top: 10px;
        left: 10px;
    }

    .nav-wrapper{
        height: 80px;
    }

    .page-title-wrapper h1,
    .page-title-wrapper .favorites-icon-wrapper + h1{
        font-size: 40px;
        margin-top: 0;
    }

    .staff-listing-wrapper a{
        max-width: 100%;
    }

    .four-column-wrapper.staff-listing-wrapper{
        grid-template-columns: repeat(2,1fr);
    }

    .headshot-wrapper .headshot{
        width:150px;
        height: 150px;
    }

    .training-details .tabs-links ul{
        display: grid;
    }

    .training-details .tabs-links .tab-link{
        margin-bottom: 10px;
    }

    .flex-columns.staff-detail-wrapper{
        flex-direction: column;
        gap:25px;
    }

    .staff-details-wrapper .headshot-wrapper.grid-columns.two-columns{
        margin-bottom: 10px;
    }

    .staff-details-wrapper .headshot-wrapper .image-wrapper{
        text-align: center;
        max-width: 200px;
        justify-self: center;
    }

    .section-search-wrapper{
        position: relative;
        top: auto;
        right: auto;
        margin-top: 0;
        margin-bottom: 30px;
    }

    .series-listing-pinned-wrapper.grid-columns.four-columns{
        grid-template-columns: 1fr;
    }

    .email-signup h1{
        font-size: 30px;
    }

    #pages-contact .text-content .content{
        columns: 1 !important;
    }

    .masonary-columns.three-columns{
        column-count: 2;
    }

    .three-column-wrapper{
        grid-template-columns: 1fr;
        gap:25px;
    }

    .section{
        margin-bottom: 40px;
    }

    .section + .favorites-floating-icon-wrapper{
        margin-top: -40px;
        margin-bottom: auto;
    }

    .event-list-wrapper .event-item{
        gap: 30px;
    }

    .event-date-wrapper .event-date .day{
        font-size: 45px;
    }

    #trainings-listing-wrapper{
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 20px;
    }

    .training-upcoming-past-toggle{
        font-size: 18px;
        width: 100%;
    }

    .trainings-listing.article-listing .article{
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .trainings-listing.article-listing .article time.date {
        border-right: none;
        border-bottom: 1px solid var(--dark-border-color);
        padding-right: 0;
        padding-bottom: 20px;
        margin-top: 30px;
    }

    .training-details .tabs-wrapper .two-column-wrapper.active{
        grid-template-columns: 1fr;
        gap: 10px;

    }

    .training-details .tabs-wrapper .two-column-wrapper .right{
        border-left: none;
        padding: 0;
    }

    .training-details .content .right dt{
        margin-top: 0px;
    }

    .training-details .tabs-wrapper{
        padding-bottom: 0;
    }

    section .grid-columns.two-columns{
        grid-template-columns: 1fr !important;
    }

    .page-playlists .playlists-detail .page-title-wrapper h1{
        font-size: 30px;
    }

    .footer-nav .flex-columns{
        flex-direction: column;
        gap: 10px;
    }

    .footer-nav li{
        margin-bottom: 0;
    }
}

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

    .page-title-with-background-wrapper{
        font-size: 18px;
    }

    .page-title-with-background-wrapper .two-column-wrapper{
        grid-template-columns: 120px auto;
        gap: 20px;
    }

    #trainings-listing-wrapper{
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 20px;
    }

    .training-upcoming-past-toggle{
        font-size: 18px;
    }

    .trainings-listing.article-listing .article
    ,.dashboard-listing .article{
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .trainings-listing.article-listing .article time.date
    ,.dashboard-listing .article time.date{
        border-right: none;
        border-bottom: 1px solid var(--dark-border-color);
        padding-right: 0;
        padding-bottom: 20px;
    }

    .training-details .two-column-wrapper{
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .with-widgets .right{
        padding:0 0 20px 0;
        border-left: none;
    }

    .page-title-wrapper .kicker{
        margin-top: 10px;
    }

    .page-title-with-background-wrapper{
        font-size: 18px;
    }

    .page-title-with-background-wrapper .two-column-wrapper{
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .page-title-with-background-wrapper .two-column-wrapper .left{
        text-align: center;
    }

    .page-title-with-background-wrapper .two-column-wrapper .left img{
        max-width: 50%;
    }

    .training-details .two-column-wrapper{
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .with-widgets .right{
        padding:0 0 20px 0;
        border-left: none;
    }

    .page-title-wrapper .kicker{
        margin-top: 10px;
    }

    .grid-columns.three-columns{
        grid-template-columns: 1fr;
        gap: 20px;
        padding-top: 20px;
    }

    .grid-columns.three-columns .image{
        min-height: auto;
        aspect-ratio: 16 / 9;
    }

    .playlists-listing-wrapper.grid-columns.three-columns{
        grid-template-columns: 1fr;
    }

    .page-playlists .playlists-detail .article-listing .article{
        padding: 20px 20px;
    }

    .resources-listing-container{
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .two-column-wrapper{
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .two-column-sidebar-content-wrapper.dashboard{
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .dashboard-content.use-grid{
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .dashboard-listing .article{
        margin-bottom: 0;
    }

    #resources-results .article{
        grid-template-columns: 1fr;
        padding: 0;
        padding-top:20px;
        margin-bottom: 20px;
    }

}

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

    header #logo {
        max-width: 250px;
        top: 10px;
        left: 10px;
    }

    .four-column-wrapper{
        grid-template-columns: 1fr;
    }

    footer .email-signup-form input{
        flex-basis: 100% !important;
        margin-bottom: 10px;
    }

    footer .footer-content{
        padding:0;
    }

    .trainings-listing.article-listing .content dt{
        flex-basis: 100%;
    }

    .trainings-listing.article-listing .content dd{
        padding-left:0;
    }

    .four-column-wrapper.staff-listing-wrapper{
        grid-template-columns: 1fr;
    }

    footer#footer{
        padding-top: 20px;
    }

    .page-title-wrapper h1, 
    .page-title-wrapper .favorites-icon-wrapper + h1{
        font-size: 40px;
    }

    .tools-listing{
        grid-template-columns: 1fr;
    }
    .masonary-columns.three-columns{
        column-count: 1;
    }

    .dashboard-subnav-wrapper ul{
        flex-direction: column;
    }

    .event-list-wrapper .event-item{
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .event-date-wrapper .event-date{
       width: 130px;
    }

    .event-date-wrapper .event-date .month{
        font-size: 14px;
        padding: 5px 0;
    }

    .event-date-wrapper .event-date .day{
        font-size: 35px;
    }

    .page-title-with-image-wrapper{
        grid-template-columns: 1fr 0;
    }

    .page-title-with-image-wrapper h1{
        font-size: 28px;;
    }

    article.content img{
        max-width: 100%;
        height: auto;
    }

    .view-more-link{
        width: 100%;
    }

    .main-content img {
        max-width: 100%;
        height: auto;
    }
}