/* General styles for all menus */
.cbp-spmenu {
    background: #333333;
    position: fixed;
    font-family:'Avenir LT W01 65 Medium', Arial;
}

.cbp-spmenu h3 {
    color: #333;
    font-size: 1.9em;
    padding: 32px;
    margin: 0;
    font-weight: 300;
    background: #333333;
    text-transform:uppercase;
}

.cbp-spmenu a {
    display: block;
    color: #fff;
    font-size: .9em;
    font-weight: 300;
    -webkit-transition: .15s ease-in-out;
    -moz-transition: .15s ease-in-out;
    -o-transition: .15s ease-in-out;
    transition: .15s ease-in-out;
    text-transform:uppercase;
}

.cbp-spmenu a:hover {
    color: #cfcfcf;
    -webkit-transition: .15s ease-in-out;
    -moz-transition: .15s ease-in-out;
    -o-transition: .15s ease-in-out;
    transition: .15s ease-in-out;
}

.cbp-spmenu a:active {
    background: #222222;
    color: #8dd687;
}

/* Orientation-dependent styles for the content of the menu */

.cbp-spmenu-vertical {
    width: 350px;
    height: 100%;
    top: 0;
    z-index: 900;
}

.cbp-spmenu-vertical a {
    padding: 1em;
}

/* Vertical menu that slides from the left or right */

.cbp-spmenu-left {
    left: -350px;
}

.cbp-spmenu-left.cbp-spmenu-open {
    left: 0px;
}

/* Push classes applied to the body */

/* Transitions */

.cbp-spmenu, .cbp-spmenu-push {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

/* Example media queries */

@media screen and (max-height: 26.375em) {

    .cbp-spmenu-vertical {
        font-size: 90%;
        width: 250px;
    }

    .cbp-spmenu-left, .cbp-spmenu-push-toleft {
        left: -250px;
    }

    .cbp-spmenu-right {
        right: -250px;
    }

    .cbp-spmenu-push-toright {
        left: 250px;
    }
}