@import url(https://fonts.googleapis.com/css?family=Lato:400,700,900);
@import url('https://fonts.googleapis.com/css?family=Oswald:300,400,700');

body {
    min-height: 100%;
    width: 100%;
    margin: 0 auto;
}

p, i, li, h1, h2, h3   {
    font-family: Lato;
    font-weight: 600;
}

.fa:hover    {
    color: #c41a1c;
}

.fa {
    font-size: 8rem;
    margin-bottom: 1rem;
    margin-left: 3rem;
}

.side-bar[data-position="left"] {
    position: fixed;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    min-height: 100%;
    width: 100px;
    background-color: #e6e6e6;
    padding: 0 1rem !important;
    z-index: 100;
}

div.menuItem {
    color: #929292;
    height: 64px;
    width: 64px;
    background-color: #e6e6e6;
    line-height: 0px;
    text-align: center;
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: bolder;
    font-family: Lato;
}

div.menuItem p {
    font-size: 1rem !important;
    font-weight: bolder;
    margin-top: .3rem;
    position: absolute;
}

div.menuItem.bottom {
    position: absolute;
    bottom: 0;
}

div.heading {
    font-size: .7rem;
    font-family: 'Lato', sans-serif;
    color: white;
    height: 44px;
    line-height: 0px;
    font-weight: 700;
    padding: 10px;
    background-color: #333;
}

div.menuItem:hover {
    cursor: pointer;
    color: #c41a1c !important;
}

div.side-panel {
    z-index: 999;
    left: -400px;
    position: absolute;
    min-width: 400px;
    min-height: 100%;
    background-color: #222;
    display: inline-block;
}

div.side-panel.open{
    animation-name: sidebar-open;
    animation-duration: .25s;
    left: 0;
}

div.side-panel.close{
    animation-name: sidebar-close;
    animation-duration: .25s;
    left: -400px;
}

/* Keyframes */
@keyframes sidebar-open {
    0% {
        left: -400px;
    }

    100% {
        left: 0;
    }
}

@keyframes sidebar-close {
    0% {
        left: 0;
    }

    100% {
        left: -400px;
    }
}