/* =Responsive
----------------------------------------------- */

@media only screen and (max-width: 1219px) {
    #writr__page {
        width: 940px;
    }
    #writr__page:before {
        width: 540px;
    }
    .content-area {
        width: 540px;
    }
}

/* 960px > x */
@media only screen and (max-width: 959px) {

    /* Grid */
    body.sidebar-closed:after {
        width: 40px;
    }
    body.sidebar-closed:before {
        left: 40px;
    }
    .sidebar-closed #writr__page {
        width: 680px;
    }
    .sidebar-closed #writr__page:before {
        left: 140px;
        width: ~"calc(100vw - 40px - 100px)";
    }
    #writr__sidebar-toggle {
        display: block;
    }
    body:not(.sidebar-closed) .sidebar-area:after {
        content: '';
        display: block;
        position: fixed;
        z-index: 9997;
        top: 0;
        left: 300px;
        width: 100%;
        height: 200%;
        background: rgba(0, 0, 0, 0.5);
    }
    .sidebar-area {
        float: none;
        width: 100%;
        padding: 0;

        .widget-area {
            position: fixed;
            top: 0px;
            height: 100vh;
            padding-top: 120px;
        }

        .search-form,
        .widget-area {
            padding-left: 40px;
            padding-right: 40px;
        }

        .search-form {
            border-bottom-width: 0;
            padding-bottom: 0;
        }
    }
    .widget-area {
        background-color: @ini_theme_color;
        position: relative;
        float: left;
        width: 300px;
        padding: 0 40px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing:    border-box;
        box-sizing:         border-box;
    }
    .no-js .widget-area {
        float: right;
        width: 540px;
    }
    .site-header {
        padding-top: 40px;
        margin-top: -40px;
        margin-left: ~"calc(40px + 100px)";
        width: ~"calc(100vw - 40px - 100px)";
    }
    .js .sidebar-closed .widget-area {
        display: none;
        position: static;
    }
    .no-js .widget-area {
        clear: both;
        padding-top: 20px;
    }

    /* Header */
    .site-branding {
        border-bottom: none;
    }

    /* Menu */
    .js .menu-toggle,
    .js .main-navigation.toggled > ul {
        display: block;
    }
    .menu-toggle {
        margin: 0 auto;
        width: 100%;
        height: 60px;
        border-bottom: 5px solid @ini_text_alt;
        color: @ini_background;
        font-family: Genericons !important;
        font-size: 20px !important;
        line-height: 60px !important;
        text-align: center;
    }
    .main-navigation {
        padding: 0;
        margin: 0;
        width: 100%;
    }
    .main-navigation:after {
        display: none;
    }
    .main-navigation.toggled {
        border-bottom: 5px solid @ini_text_alt;
    }
    .no-js .main-navigation .skip-link {
        position: static !important;
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        height: auto !important;
    }
    .js .main-navigation ul {
        display: none;
    }
    .js .main-navigation.toggled > div.plugin_include_content > ul,
    .js .main-navigation.toggled > div > div > ul {
        display: block;
    }
    .main-navigation a:hover,
    .main-navigation li .curid > a {
        background: none !important;
    }
    .js .main-navigation ul li:hover ul {
        display: none;
    }
    .main-navigation ul ul {
        display: block;
        opacity: 1;
        z-index: 1;
        float: none;
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
    }
    .js .main-navigation ul ul {
        display: none;
    }
    .main-navigation ul ul a {
        padding-left: 60px;
    }
    .main-navigation ul ul ul a {
        padding-left: 80px;
    }
    .main-navigation .node > div > a {
        position: relative;
        padding-right: 84px;
    }
    .main-navigation .node > div > a:after {
        display: none;
    }
    .main-navigation ul li:hover > ul {
        -webkit-animation: none;
        -moz-animation:    none;
        -ms-animation:     none;
        -o-animation:      none;
        animation:         none;
    }
    .main-navigation .node > ul {
        padding: 2.5px 0;
        margin: 2.5px 0;
        border-top: 5px solid @ini_text_alt;
        border-bottom: 5px solid @ini_text_alt;
    }
    .main-navigation li.node:last-child > ul {
        padding-bottom: 0;
        margin-bottom: 0;
        border-bottom: 0;
    }
    .dropdown-icon {
        display: block;
        position: absolute;
        top: 2.5px;
        right: 5px;
        height: 39px;
        width: 39px;
        z-index: 2;
    }
    .dropdown-icon:after {
        content: '';
        display: block;
        position: absolute;
        top: 50%;
        right: 15px;
        margin-top: -2.5px;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid @ini_background;
    }
    .dropdown-icon.open:after {
        border-top: none;
        border-bottom: 5px solid @ini_background;
    }

    .site-content {
        width: 100vw;
    }

    .content-area {
        padding-top: 20px;
        width: ~"calc(100vw - 40px - 100px)";
    }

    .makeFullWidth #writr__main {
        width: ~"calc(100vw - 80px)" !important;

        > h1:first-of-type,
        > #dw__toc + h1,
        > .section_highlight_wrapper:first-child > h1:first-of-type,
        > #dw__toc + .section_highlight_wrapper > h1:first-of-type {
            width: ~"calc(100vw)" !important;
        }
    }

    #writr__main,
    .makeFullWidth #writr__main {
        > h1:first-of-type {
            width: ~"calc(100vw - 40px - 100px)";
        }
    }

    .makeFullWidth #writr__main {
        width: ~"calc(100vw - 40px - 100px - 80px)";
    }

    .makeFullWidth #writr__page:before {
        width: ~"calc(100vw - 40px - 100px)";
    }
    .makeFullWidth .page-footer,
    .makeFullWidth div.breadcrumbs {
        width: ~"calc(100vw - 40px - 100px)";
    }

    #dw__toc {
        float: none;
        // width: 100vw;
        width: ~"calc(100vw - 40px - 100px)";
        margin: -20px -40px 20px;
        padding: 0 40px;

        h3,
        & > div {
            padding-left: 0;
            padding-right: 0;
        }
    }
}

/* 768px > x */
@media only screen and (max-width: 767px) {

    /* Theme */
    body {
        background: @ini_background !important;
    }
    body:before {
        display: none;
    }
    .sidebar-closed .site-header {
        margin-right: 0;
        width: 100%;
    }
    .site-header {
        width: 100vw;
        margin-left: 0;
    }
    body.sidebar-closed:after,
    body.sidebar-closed:before {
        display: none;
    }
    .sidebar-closed #writr__page {
        width: 100%;
    }

    .sidebar-area {
        background-color: @ini_theme_color;
    }
    .no-js .widget-area,
    .no-js .site-footer {
        width: auto;
    }

    .sidebar-closed .content-area {
        width: 100%;
        height: auto;
        padding-left: 40px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing:    border-box;
        box-sizing:         border-box;
    }

    .site-content {
        width: 100vw;
    }

    .content-area {
        padding-left: 0;
        width: 100vw;
    }

    /* Menu */
    .sidebar-closed .main-navigation ul ul {
        width: 100%;
    }
    .main-navigation,
    .main-navigation ul ul {
        width: 100%;
    }

    #writr__main,
    .makeFullWidth #writr__main {
        > h1:first-of-type {
            width: 100vw;
        }
    }

    .makeFullWidth #writr__main,
    .makeFullWidth #writr__page:before {
        width: ~"calc(100vw - 80px)";
    }
    .makeFullWidth .page-footer,
    .makeFullWidth div.breadcrumbs {
        width: 100vw;
    }
}