Hueman Toggle S1 Sidebar Same As S2

/* ------------------------------------------------------------------------- *
 *  Toggle Sidebar s1 at same time as s2
/* ------------------------------------------------------------------------- */
@media only screen and (min-width: 480px) and (max-width: 1200px) {

    /* s1 general */
    .s1 { width: 50px; }
    .s1 .sidebar-content { display: none; float: left; width: 100%; }
    .s1 .sidebar-toggle { display: block; }

    /* s1 expand/collapse */
    .s1-expand .s1 { background: #f0f0f0; position: absolute; top: 0; bottom: 0; width: 340px; margin: 0!important; z-index: 9; overflow: auto;
    -moz-transition: width .2s ease; -webkit-transition: width .2s ease; transition: width .2s ease; }
    .s1-expand .s1 .sidebar-content,
    .s1-expand .s1 .post-nav { display: block; min-width: 340px; }
    .s1-collapse .s1 .sidebar-content,
    .s1-collapse .s1 .sidebar .post-nav { display: none; }

    /* s1 toggle icon */
    .col-2cl.s1-expand .s1 .icon-sidebar-toggle:before,
    .col-3cl.s1-expand .s1 .icon-sidebar-toggle:before { content: "\f101"; }
    .col-2cr.s1-expand .s1 .icon-sidebar-toggle:before,
    .col-3cm.s1-expand .s1 .icon-sidebar-toggle:before,
    .col-3cr.s1-expand .s1 .icon-sidebar-toggle:before { content: "\f100"; }

    /* 2 column, content right */
    .col-2cr .main-inner { background-position: -290px 0!important; padding-left: 50px; }
    .col-2cr .s1 { margin-left: -50px; }
    .col-2cr.s1-expand .s1 { left: 0; }

    /* 2 column, content left */
    .col-2cl .main-inner { background-image: url(img/sidebar/s-right-collapse.png); padding-right: 50px; }
    .col-2cl .s1 { margin-right: -50px; }
    .col-2cl.s1-expand .s1 { right: 0; }
    .col-2cl.s1-expand .sidebar-toggle { float: right; }

    /* 3 column, content middle */
    .col-3cm .main-inner { background-position: -290px 0!important; padding-left: 50px; }
    .col-3cm .s1 { margin-left: -50px; }
    .col-3cm .s2 { margin-right: -50px; }
    .col-3cm.s1-expand .s1 { left: 0; }
    .col-3cm.s2-expand .s2 { right: 0; }

    /* 3 column, content left */
    .col-3cl .main { background-image: none; }
    .col-3cl .main-inner { background: url(img/sidebar/s-right-dual-full-collapse.png) repeat-y right; padding-right: 100px; }
    .col-3cl .s1 { margin-right: -100px; }
    .col-3cl .s2 { margin-right: -50px; }
    .col-3cl.s1-expand .s1 { right: 0; }
    .col-3cl.s2-expand .s2 { right: 50px; }

    /* 3 column, content right */
    .col-3cr .main { background-image: none; }
    .col-3cr .main-inner { background: url(img/sidebar/s-left-dual-full-collapse.png) repeat-y left; padding-left: 100px; }
    .col-3cr .s1 { margin-left: -100px; }
    .col-3cr .s2 { margin-left: -50px; }
    .col-3cr.s1-expand .s1 { left: 0; }
    .col-3cr.s2-expand .s2 { left: 50px; }

    /* ipad, iphone fix */
    .safari .s1 { min-width: 50px; max-width: 50px; width: auto; }
    .safari.s1-expand .s1 { min-width: 340px; max-width: 340px; width: auto; }
}