/*SLIDINGMENU.CSS*/
/*-------------------------------------------------------------------------------------------------------------------------------*/
/*This CSS file contains style rules for Sliding Menu*/
/*-------------------------------------------------------------------------------------------------------------------------------*/
/* Author: Unbranded.*/
/* Website: http://www.unbranded.co */
/* Copyright: (C) 2014 */
/*-------------------------------------------------------------------------------------------------------------------------------*/
.sm-wrap {
    position: fixed;
    top: 70px;
    right: -250px;
    background: rgba(0,0,0,0.9);
    width: 250px;
    height: auto;
    z-index: 999;
    -webkit-transition: all .4s ease-in-out;
       -moz-transition: all .4s ease-in-out;
        -ms-transition: all .4s ease-in-out;
         -o-transition: all .4s ease-in-out;
            transition: all .4s ease-in-out;
}

.sm-wrap.menu-open {
    right: 0px;
}
ul.sm-wrap, .sm-wrap > ul{
    margin-left: 0px;
    padding-left: 0px;
}
.sm-wrap li{
    list-style: none;
}
.sm-wrap li ul{
    display: none;
}
.sm-wrap li ul ul{
    display: none !important;
}

.slide-menu a {
    margin:0px;
    text-align: right;
    display: block;    
    font-weight:400;
    font-size: 12px;
    line-height: 19px;
    text-transform: uppercase;
    /*background:rgba(0,0,0,0.3);*/
    padding: 15px 20px;
    margin-bottom: 1px;
    -webkit-transition: all .4s ease-in-out;
       -moz-transition: all .4s ease-in-out;
        -ms-transition: all .4s ease-in-out;
         -o-transition: all .4s ease-in-out;
            transition: all .4s ease-in-out;
}

/*Toggle Menu*/

#toggle-menu {
    display: block;
    width: 33px;
    height: 33px;
    cursor: pointer;
    position: absolute;
    top: 25px;
    right: -40px;
    z-index: 11;
     -webkit-transition: all 1s ease-in-out;
       -moz-transition: all 1s ease-in-out;
        -ms-transition: all 1s ease-in-out;
         -o-transition: all 1s ease-in-out;
            transition: all 1s ease-in-out;
}
.toggle-menu-default-state{
    display: none;
}
.toggle-menu-hidden{
    display: none;
}
.toggle-menu-visible{
    display: block;
}
#toggle-menu div {
    width: 30px;
    height: 15px;
    position: relative;
}
#toggle-menu span {
    display: block;
    width: 30px;
    height: 3px;
    position: absolute;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
#toggle-menu span.top {
    top: 0px;
}
#toggle-menu span.middle {
    top: 7px;
}
#toggle-menu span.bottom {
    top: 14px;
}
#toggle-menu.toggle-menu-visible span.top {
    -webkit-animation: inTop 0.8s forwards;
    -moz-animation: inTop 0.8s forwards;
    animation: inTop 0.8s forwards;
}
#toggle-menu.toggle-menu-visible span.middle {
    -webkit-animation: inMiddle 0.8s forwards;
    -moz-animation: inMiddle 0.8s forwards;
    animation: inMiddle 0.8s forwards;
}
#toggle-menu.toggle-menu-visible span.bottom {
    -webkit-animation: inBottom 0.8s forwards;
    -moz-animation: inBottom 0.8s forwards;
    animation: inBottom 0.8s forwards;
}   
#toggle-menu.toggle-menu-hidden span.top {
    -webkit-animation: outTop 0.8s backwards;
    -webkit-animation-direction: reverse;
    -moz-animation: outTop 0.8s backwards;
    -moz-animation-direction: reverse;
    animation: outTop 0.8s backwards;
    animation-direction: reverse;
}
#toggle-menu.toggle-menu-hidden span.middle {
    -webkit-animation: outMiddle 0.8s backwards;
    -webkit-animation-direction: reverse;
    -moz-animation: outMiddle 0.8s backwards;
    -moz-animation-direction: reverse;
    animation: outMiddle 0.8s backwards;
    animation-direction: reverse;
}
#toggle-menu.toggle-menu-hidden span.bottom {
    -webkit-animation: outBottom 0.8s backwards;
    -webkit-animation-direction: reverse;
    -moz-animation: outBottom 0.8s backwards;
    -moz-animation-direction: reverse;
    animation: outBottom 0.8s backwards;
    animation-direction: reverse;
}   

@-webkit-keyframes inMiddle {
    50% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(45deg);
    }
}

@-moz-keyframes inMiddle {
    50% {
        -moz-transform: rotate(0deg);
    }
    100% {
        -moz-transform: rotate(45deg);
    }
}

@keyframes inMiddle {
    50% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(45deg);
    }
}

@-webkit-keyframes outMiddle {
    50% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(45deg);
    }
}

@-moz-keyframes outMiddle {
    50% {
        -moz-transform: rotate(0deg);
    }
    100% {
        -moz-transform: rotate(45deg);
    }
}

@keyframes outMiddle {
    50% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(45deg);
    }
}

@-webkit-keyframes inTop {
    0% {
        top: 0;
    }
    50% {
        top: 7px;
        -webkit-transform: rotate(0deg);
    }
    100% {
        top: 7px;
        -webkit-transform: rotate(135deg);
    }
}

@-moz-keyframes inTop {
    0% {
        top: 0;
    }
    50% {
        top: 7px;
        -moz-transform: rotate(0deg);
    }
    100% {
        top: 7px;
        -moz-transform: rotate(135deg);
    }
}

@keyframes inTop {
    0% {
        top: 0;
    }
    50% {
        top: 7px;
        transform: rotate(0deg);
    }
    100% {
        top: 7px;
        transform: rotate(135deg);
    }
}

@-webkit-keyframes outTop {
    0% {
        top: 0;
    }
    50% {
        top: 7px;
        -webkit-transform: rotate(0deg);
    }
    100% {
        top: 7px;
        -webkit-transform: rotate(135deg);
    }
}

@-moz-keyframes outTop {
    0% {
        top: 0;
    }
    50% {
        top: 7px;
        -moz-transform: rotate(0deg);
    }
    100% {
        top: 7px;
        -moz-transform: rotate(135deg);
    }
}

@keyframes outTop {
    0% {
        top: 0;
    }
    50% {
        top: 7px;
        transform: rotate(0deg);
    }
    100% {
        top: 7px;
        transform: rotate(135deg);
    }
}

@-webkit-keyframes inBottom {
    0% {
        top: 14px;
    }
    50% {
        top: 7px;
        -webkit-transform: rotate(0deg);
    }
    100% {
        top: 7px;
        -webkit-transform: rotate(135deg);
    }
}

@-moz-keyframes inBottom {
    0% {
        top: 14px;
    }
    50% {
        top: 7px;
        -moz-transform: rotate(0deg);
    }
    100% {
        top: 7px;
        -moz-transform: rotate(135deg);
    }
}

@keyframes inBottom {
    0% {
        top: 14px;
    }
    50% {
        top: 7px;
        transform: rotate(0deg);
    }
    100% {
        top: 7px;
        transform: rotate(135deg);
    }
}

@-webkit-keyframes outBottom {
    0% {
        top: 14px;
    }
    50% {
        top: 7px;
        -webkit-transform: rotate(0deg);
    }
    100% {
        top: 7px;
        -webkit-transform: rotate(135deg);
    }
}

@-moz-keyframes outBottom {
    0% {
        top: 14px;
    }
    50% {
        top: 7px;
        -moz-transform: rotate(0deg);
    }
    100% {
        top: 7px;
        -moz-transform: rotate(135deg);
    }
}

@keyframes outBottom {
    0% {
        top: 14px;
    }
    50% {
        top: 7px;
        transform: rotate(0deg);
    }
    100% {
        top: 7px;
        transform: rotate(135deg);
    }
}