/*@import url(https://fonts.googleapis.com/css?family=Quicksand);*/

/*html,
body {
    height: 100%;
    background-color: #333;
    font-family: 'Quicksand', sans-serif;
    color: white;
}*/

.b-a {
    transition: all .25s;
    content: "";
    position: absolute;
    left: 0;
    height: 6px;
    width: 30px;
    border-radius: 15px;
    background-color: rgba(255, 255, 255, 0.95);
}

.menu-collapsed {
    transition: all .25s;
    position: fixed;
    top: 14px;
    left: 32px;
    height: 36px;
    width: 36px;
    z-index: 10;
    cursor: pointer;
}

    .menu-collapsed ul {
        transition: all 0s;
        position: fixed;
        left: -9000px;
    }

.bar {
    transition: all .25s;
    content: "";
    position: absolute;
    left: 0;
    height: 4px;
    width: 30px;
    border-radius: 15px;
    /*background-color: rgba(0, 0, 255, 0.95);*/
    background-color: black;
    position: fixed;
    left: 35px;
    top: 30px;
}

    .bar:before {
        transition: all .25s;
        content: "";
        position: absolute;
        left: 0;
        height: 4px;
        width: 30px;
        border-radius: 15px;
        /*background-color: rgba(0, 0, 255, 0.95);*/
        background-color: black;
        top: -8px;
    }

    .bar:after {
        transition: all .25s;
        content: "";
        position: absolute;
        left: 0;
        height: 4px;
        width: 30px;
        border-radius: 15px;
        /*background-color: rgba(0, 0, 255, 0.95);*/
        background-color: black;
        top: 8px;
    }

.b-a-expanded {
    transition: all .25s;
    top: -0px;
}


.menu-expanded {
    transition: all .25s;
    text-align: center;
    height: 100%;
    width: 102px;
    border-radius: 0px;
    top: 0;
    left: 0;
    line-height: 60px;
    background-color: rgba(255, 255, 255, 0.65);
    border-right: 1px solid #0125A8;
}

.menu-collapsed, .menu-expanded {
    z-index: 10;
}

    .menu-expanded ul {
        transition: all 0s;
        position: relative;
        left: 0;
        z-index: 2;
        top: 60px;
    }

    .menu-expanded a {
        transition: all .15s;
        text-decoration: none;
        font-size: 1rem;
        padding: 5px;
        color: #0125A8;
        display: block;
    }

        .menu-expanded a:hover {
            background-color: rgba(1,37,168,0.4);
            transition: all .15s;
            color: #fff;
            font-weight: bold;
        }

    .menu-expanded .bar {
        background-color: transparent;
        transition: all .25s;
    }

        .menu-expanded .bar:before {
            transition: all .25s;
            top: -0px;
            transform: rotate(45deg);
        }

        .menu-expanded .bar:after {
            transition: all .25s;
            top: -0px;
            transform: rotate(-45deg);
        }