@charset "UTF-8";
/* Responsive CSS written by Pam @ WDK */

@media (max-width: 1050px) {
    /*header*/
    .site-banner {flex-direction: column;}
    .logo-wrap p {text-align: center;}
}

@media (max-width: 992px) {
 
    /*content boxes*/
    .content-boxes-wrap {column-gap: 30px;}
    .content-box {width: calc(50% - 15px);}
    
    /*featured profile box*/
    
    .featured-profile > .featured-profile-image { width: 35%; padding-left:20px; padding-top: 12px;}

    .featured-profile > .featured-profile-image img { box-shadow: -20px -12px 0 0 var(--lt-blue);}

    .featured-profile > .featured-profile-content {flex-grow: 1; width: calc(65% - 30px);}
}

@media (max-width: 767px) {
    /*defaults*/
    h1 {font-size: 32px;}
    h2 {font-size: 28px; margin-bottom: 12px;}
    h3 {font-size: 24px;}
    h4 {font-size: 20px; margin-bottom: 8px;}
    h5{font-size: 20px; margin-bottom: 8px;}
    h6 {font-size: 18px; margin-bottom: 6px;}

    p, dl > dd, .styled-list li {font-size: 15px; line-height: 1.3;}
    main p:not(:last-child) {margin-bottom: 12px;}

    p.lg-text {font-size: 17px;}
    
    /*header*/
    .site-title, h1.site-title { font: 700 36px/1.1 var(--base-font); margin: 0 0 15px 0;}
    .logo-wrap {flex-direction: column;}
    .logo-wrap p { font-size: 18px;}
    nav.site-nav {display:block;}
    nav.site-nav h2 {margin-bottom: 5px;}
    
    /*footer*/
    
    footer ul { column-gap: 0; row-gap: 10px; flex-direction: column;}
    
    /*elements*/
    
    .banner-image.sm-banner {max-width: unset; width: 100%;}
    
    /*content boxes*/
    .content-boxes-wrap {column-gap: 0px;}
    .content-box {width: calc(100%);}
    
    /*featured profile*/
    .featured-profile { flex-direction: column; row-gap: 10px; column-gap: 0;}
    
    .featured-profile > .featured-profile-image, .featured-profile > .featured-profile-content { width: 100%; max-width: initial; oveflow: hidden;}
    
    .featured-profile > .featured-profile-image img { 
        width: 100%; 
        max-width: 450px; 
        display: block; 
        margin: 0 auto;
    }
    
    /*Article boxes*/
    
    div.img-text-articles-wrap > article > img {
        float: none;
        display: block;
        border-radius: var(--border-radius);
        width: 80%;
        max-width: 100%;
        margin: 25px 8% 15px 12%;
        box-shadow: -30px -12px 0 0 var(--lt-bg);
    }
}

@media (max-width: 480px) {
    /*header*/
    .site-title, h1.site-title { font: 700 28px/1.1 var(--base-font); margin: 0 0 10px 0;}
    .logo-wrap {gap: 5px;}
    .logo-wrap p { font-size: 14px;}
}