/**
 * wrapper width break point
 */
@media screen and (max-width: 1200px) {

}

/**
 * medium break point
 */
@media screen and (max-width: 56.250em) { /** 900px **/
    header.wp-admin-bar-showing { 
        top: 46px;
    }
    
    header .user-greeting {
        display: none;
    }
    
    header .controls .full-title {
        display: none;
    }
    
    /* footer */
    footer .sp-column-container {
        display: block;
    }

    footer .service-flags {
        float: left;
        padding-bottom: 20px !important;
    }
    
    footer .service-flags .flags-holder {
        text-align: center;
    }
}

/**
 * horizontal medium break point
 */
@media screen and (max-width: 56.250em) and (orientation:landscape) {
    
}

/**
 * medium-small break point
 */
@media screen and (max-width: 42em) {
    header .identity {
        padding-left: 20px;
    }
    
    header .full-title {
        display: none;
    }

    header .controls {
        max-width: initial;
        padding-right: 20px;
    }
    
    /* main nav */
    header .main-nav {
        width: 100%;
        right: -100%;
    }
    
    /* page block column */
    .page-block-column {
        display: flex;
        flex-wrap: wrap;
    }
    
    .page-block-column > div {
        width: 50%;
    }
    
    .page-block-column .page-block {
        height: 100%;
    }
    
    .page-block-column .page-block .image-container {
        background-size: cover !important;
        background-position: center center !important;
    }
    
    .page-block-column .page-block .image-container img {
        display: none;
    }
}

/**
 * small break point
 */
@media screen and (max-width: 31.250em) { /** 500px **/
    header .controls .main-nav-button .text {
        display: none !important;
    }
    
    header .login-holder {
        width: 100%;
    }
    
    header .identity img {
        display: none;
    }
    
    /* page block column */
    /* page block column */
    .page-block-column {
        display: block;
    }
    
    .page-block-column > div {
        width: 100%;
    }

    .page-block-column .page-block .image-container {
        background: none !important;
    }
    
    .page-block-column .page-block .image-container img {
        display: block;
    }
}