/*!
 * drawer v2.0.0
 * 
 * Licensed under MIT
 * Author : blivesta
 * 
 */

.drawer-main {
    position: fixed;
    top: 0;
    width: 70%;
    height: 100%;
    overflow: hidden;
}

.drawer-left .drawer-main {
    left: -70%;
    -webkit-transition: left .4s cubic-bezier(0.19,1,.22,1);
    -o-transition: left .4s cubic-bezier(0.19,1,.22,1);
    transition: left .4s cubic-bezier(0.19,1,.22,1);
}

.drawer-left.drawer-open .drawer-main {
    left: 0;
}

.drawer-right .drawer-main {
    right: -70%;
    -webkit-transition: right .4s cubic-bezier(0.19,1,.22,1);
    -o-transition: right .4s cubic-bezier(0.19,1,.22,1);
    transition: right .4s cubic-bezier(0.19,1,.22,1);
}

.drawer-right.drawer-open .drawer-main {
    right: 0;
}

.drawer-overlay {
    position: relative;
}

.drawer-left .drawer-overlay, .drawer-left .drawer-hamberger {
    left: 0;
    -webkit-transition: left .4s cubic-bezier(0.19,1,.22,1);
    -o-transition: left .4s cubic-bezier(0.19,1,.22,1);
    transition: left .4s cubic-bezier(0.19,1,.22,1);
}

.drawer-left.drawer-open .drawer-overlay, .drawer-left.drawer-open .drawer-hamberger {
    left: 70%;
}

.drawer-right .drawer-overlay, .drawer-right .drawer-hamberger {
    right: 0;
    -webkit-transition: right .4s cubic-bezier(0.19,1,.22,1);
    -o-transition: right .4s cubic-bezier(0.19,1,.22,1);
    transition: right .4s cubic-bezier(0.19,1,.22,1);
}

.drawer-right.drawer-open .drawer-overlay, .drawer-right.drawer-open .drawer-hamberger {
    right: 70%;
}

/*.drawer-overlay-upper {
    position: fixed;
    top: 0;
    z-index: 1100;
    display: none;
    height: 100%;
    background-color: #000;
    background-color: rgba(0,0,0,.5);
}*/

.drawer-left.drawer-open .drawer-overlay-upper {
    right: 0;
}

.drawer-right.drawer-open .drawer-overlay-upper {
    left: 0;
}

.drawer-default {
    background-color: #222;
    -webkit-box-shadow: inset 0 0 0 rgba(0,0,0,.5);
    box-shadow: inset 0 0 0 rgba(0,0,0,.5);
}

    .drawer-default + .drawer-overlay {
        background-color: #fff;
    }

    .drawer-default .drawer-brand a {
        display: block;
        width: 100%;
        padding: 20px 15px;
        font-size: 22px;
        color: #fff;
    }

        .drawer-default .drawer-brand a:hover {
            color: #444;
            text-decoration: none;
        }

    .drawer-default .drawer-nav-title {
        display: block;
        padding: 15px 15px 0 15px;
        font-size: 18px;
    }

    .drawer-default .drawer-nav-list {
        padding: 0;
        margin: 0 0 20px 0;
        list-style: none;
    }

        .drawer-default .drawer-nav-list li {
            display: block;
        }

            .drawer-default .drawer-nav-list li a {
                display: block;
                padding: 15px;
                color: #888;
            }

            .drawer-default .drawer-nav-list li ul a {
                padding: 8px 20px;
            }

.drawer-hamberger {
    position:relative;
    float:right;
    z-index: 1000;
    display: block;
    width: 2rem;
    height: 2rem;
    padding-top: 1rem;
    background-color: transparent;
    border: 0;
}

    .drawer-hamberger span {
        margin-top: 10px;
    }

        .drawer-hamberger span, .drawer-hamberger span:before, .drawer-hamberger span:after {
            position: absolute;
            display: block;
            width: 2rem;
            height: 0.2rem;
            cursor: pointer;
            content: '';
            background-color: #ccc;
            border-radius: 0.1px;
            -webkit-transition: all .4s cubic-bezier(0.19,1,.22,1);
            -o-transition: all .4s cubic-bezier(0.19,1,.22,1);
            transition: all .4s cubic-bezier(0.19,1,.22,1);
        }

            .drawer-hamberger span:before {
                top: -0.6rem;
            }

            .drawer-hamberger span:after {
                bottom: -0.6rem;
            }

.drawer-open .drawer-hamberger span {
    background-color: transparent;
}

    .drawer-open .drawer-hamberger span:before, .drawer-open .drawer-hamberger span:after {
        top: 0;
    }

    .drawer-open .drawer-hamberger span:before {
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .drawer-open .drawer-hamberger span:after {
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

.drawer-hamberger:hover {
    cursor: pointer;
}

@media (min-width:767px) {
    .drawer-responsive.drawer-left .drawer-toggle, .drawer-responsive.drawer-right .drawer-toggle {
        display: none;
        visibility: hidden;
    }

    .drawer-responsive.drawer-left .drawer-main {
        left: 0;
    }

    .drawer-responsive.drawer-right .drawer-main {
        right: 0;
    }
}

@media (min-width:768px) {
    .drawer-responsive {
        background-color: #222;
    }

        .drawer-responsive.drawer-left .drawer-main, .drawer-responsive.drawer-right .drawer-main {
            position: absolute;
            width: 150px !important;
            height: auto !important;
            overflow: visible !important;
        }

        .drawer-responsive.drawer-left .drawer-main {
            float: left;
        }

        .drawer-responsive.drawer-left .drawer-overlay {
            margin-left: 150px;
        }

        .drawer-responsive.drawer-right .drawer-main {
            float: right;
        }

        .drawer-responsive.drawer-right .drawer-overlay {
            margin-right: 150px;
        }
}

@media (min-width:1200px) {
    .drawer-responsive.drawer-left .drawer-main, .drawer-responsive.drawer-right .drawer-main {
        width: 70% !important;
    }

    .drawer-responsive.drawer-left .drawer-overlay {
        margin-left: 70%;
    }

    .drawer-responsive.drawer-right .drawer-overlay {
        margin-right: 70%;
    }
}