/* ======================================== */
/* CONTROL : HIDDEN SIDEBAR */
/* ======================================== */

/* dependencies:
    .anim-all for left and/or right sliding animation
        (../css/core-theme-utilities.css) */




/* Sidebar BASE */
/* =========================================== */

/* GLOBAL LAYOUT BLOCKS: (Positioning) */
/* ---------------------------------------------- */
.global-wrapper {
    width: 100%;
    height: 100%;
    margin: auto;
    position: relative;
    overflow: hidden;
}
.global-inner {
    width: 100%;
    height: 100%;
    margin: auto;
    position: relative;
    float: left;
    left: 0;
}

/* Control BASE (opens LEFT) */
/* ---------------------------------------------- */
#hidden-sidebar {
    float: left;
    position: absolute;
    left: -300px;
    width: 300px;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Menu Open BASE (LEFT) */
/* ---------------------------------------------- */
.hidden-sidebar-open #hidden-sidebar {
    left: 0;
}
.hidden-sidebar-open #hidden-sidebar + .global-inner {
    left: 300px;
}







/* Sidebar MODS */
/* =========================================== */

/* Control MOD (opens RIGHT) */
/* ---------------------------------------------- */
#hidden-sidebar.opens-right {
    left: auto;
    left: initial;
    float: right;
    right: -300px;
    /*z-index: 10;*/

    /*-webkit-transition: right .5s ease-out;*/
    /*-moz-transition: right .5s ease-out;*/
    /*transition: right .5s ease-out;*/
}
#hidden-sidebar.opens-right + .global-inner {
    float: right;
    left: auto;
    left: unset;
    /*left: initial; !* <-- mob menu animation *!*/
    right: 0;
}

/* Menu Open MOD (opens RIGHT) */
/* ---------------------------------------------- */
.hidden-sidebar-open #hidden-sidebar.opens-right {

    box-shadow: 0 0 80px rgba(0,0,0,0.2);
    left: auto;
    /*left: unset;*/
    left: initial;
    right: 0;
}
.hidden-sidebar-open #hidden-sidebar.opens-right + .global-inner {
    left: auto;
    /*left: unset;*/
    left: initial;
    right: 300px;
}

/* SHIMS (for builds using ".fixed-top" headers via twitter bootstrap ) */
/* ------------------------------------------------------------------------ */
#hidden-sidebar {
    z-index: 1001;
}
#hidden-sidebar + .global-inner .fixed-top {
    left: 0;
}
.hidden-sidebar-open #hidden-sidebar + .global-inner .fixed-top {
    left: 300px;
}
#hidden-sidebar.opens-right + .global-inner .fixed-top {
    left: auto;
    left: unset;
    /*left: initial; !* <-- mob menu animation *!*/
    right: 0;
}
.hidden-sidebar-open #hidden-sidebar.opens-right + .global-inner .fixed-top {
    right: 300px;
}







/* Sidebar THEME Styles (colours, fonts, etc...) */
/* =========================================== */

#hidden-sidebar {
    background-color: #fff;
}

/* - Theme Styles : Sidebar HEADER */
/* ---------------------------------------------- */
.hidden-sidebar-header {
    /*display: table;*/
    /*width: 100%;*/
    /*padding: 20px 0;*/
    /*background: rgba(0,0,0,0.1);*/
}
.hidden-sidebar-close-btn {
    max-width: 50px;
    /*padding: 0 10px;*/
    /*cursor: pointer;*/
}






/* Sidebar - content Tint
/* =========================================== */
.global-inner .tint {
    display: none;
    background: rgba(0,0,0,0.6);
    width: 0;
    height: 0;
    opacity: 0;
    /*position: absolute;*/
    position: fixed;
    /*z-index: 11;*/
    z-index: 1050; /* override fixed-top */
    pointer-events: none;
    -webkit-transition: opacity .2s ease-out;
    -moz-transition: opacity .2s ease-out;
    transition: opacity .2s ease-out;
}
.global-inner .tint.opacity {
    opacity: 0;
    display: block;
}
.hidden-sidebar-open .global-inner .tint {
    pointer-events: all;
    display: block;
    opacity: 1;
    width: 100%;
    height: 100%;
}



/* MQ-sm: Mobile (Landscape) */
/* ================================================== */
@media only screen and (min-width: 576px){

}






/* MQ-md: Tablet (Portrait) */
/* ================================================== */
@media only screen and (min-width: 768px) {

}





/* MQ-lg: Tablet (Landscape) */
/* ================================================== */
@media only screen and (min-width: 992px) {

}





/* MQ--dt: Desktop (Laptop) */
/* ================================================== */
@media only screen and (min-width:1025px) {

}





/* MQ-xl: Desktop (Wide) */
/* ================================================== */
@media only screen and (min-width:1160px) {

}