/*******************************************************************************
 * _layout.scss
 *
 * Styling of the "simple" layout demonstrating the Compass grid extension Susy
 * and building mobile first layouts.
 ******************************************************************************/




/*Header*/

.l-branding .site-logo {
    position: relative;
    float: left;
}

.l-branding .site_slogan_wrapper {
    float: left;
}


.l-header,
.l-main {
    *zoom: 1;
    width: 1150px;
    width: 1150px;
    margin-left: auto;
    margin-right: auto;
}
.l-header:after,
.l-main:after {
    content: "";
    clear: both;
}

.l-region--highlighted,
.l-region--help,
.l-region--sidebar-first,
.l-region--sidebar-second {
    margin-bottom: 20px;
}

@media (min-width: 44em) {
    .l-header,
    .l-main {
        max-width: 1150px;
    }


    .l-region--header {
        float: right;
        margin-right: 0;
    }

    .l-region--navigation {
        clear: both;
    }

    .sidebar-first .l-content,
    .sidebar-second .l-content,
    .two-sidebars .l-content {
        float: left;
    }
    .sidebar-first .l-region--sidebar-first,
    .sidebar-first .l-region--sidebar-second,
    .sidebar-second .l-region--sidebar-first,
    .sidebar-second .l-region--sidebar-second,
    .two-sidebars .l-region--sidebar-first,
    .two-sidebars .l-region--sidebar-second {
        float: right;
        margin-right: 0;
    }
    .sidebar-first .l-region--sidebar-second,
    .sidebar-second .l-region--sidebar-second,
    .two-sidebars .l-region--sidebar-second {
        clear: right;
    }
}
@media (min-width: 70em) {
    .l-header,
    .l-main {
        width: 1150px;
    }


    .l-region--header {
        float: right;
        margin-right: 0;
    }

    .sidebar-first .l-content {
        float: left;
        margin: 0 20px;
    }
    .sidebar-first .l-region--sidebar-first {
        float: left;
    }

    .sidebar-second .l-content {
        float: left;
    }
    .sidebar-second .l-region--sidebar-second {
        float: right;
        margin-right: 0;
        clear: none;
    }

    .two-sidebars .l-content {
        float: left;
    }
    .two-sidebars .l-region--sidebar-first,
    .two-sidebars .l-region--sidebar-second {
        float: left;
    }
    .two-sidebars .l-region--sidebar-first {
    }
    .two-sidebars .l-region--sidebar-second {
        float: right;
        margin-right: 0;
        clear: none;
    }
}

.l-branding {
    width: 100%;
}


.l-region--sidebar-third {
    clear: none;
}