* {
    margin: 0;
    padding: 0;
    outline: 0;
}

html, body {
    height: 100%;
    background: #D0D1D4;
}

body {
    font: normal 16px Helvetica, Verdana, Geneva, sans-serif;
    height: 100%;
}

a {
    text-decoration: none;
}

img {
    border: 0;
}

#container {
    min-height: 100%;
    position: relative;
}


#body {
    min-height: 500px;
    display: block;
    background: #FFFFFF;
}


.eol-content {
    margin: 50px;
    padding: 20px 0;
    /*width: 960px;*/
    position: relative;
}


.eol-content ul {
    list-style: none !important;
	margin:0 !important;
}

#header > .content {
    padding: 0;
}

.nav {
    display: block;
    float: right;
}

.eol-content .menu > li {
    list-style: none;
    float: left;
}

    .eol-content .menu > li > a {
        color: #333333;
        display: block;
        padding: 22px 20px;
        text-decoration: none;
        font-weight: normal;
        font-size: 16px;
        line-height: 1;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-transition: all 0.25s linear;
        -moz-transition: all 0.25s linear;
        -o-transition: all 0.25s linear;
        transition: all 0.25s linear;
    }

       .eol-content  .menu > li > a:hover, .menu > li > a:focus {
            background: white;
            box-shadow: inset 0px 5px #3399CC;
            color: #3399CC;
            padding: 27px 20px 19px;
        }


#toggle, .toggle {
    display: none;
}

.toggle {
    z-index: 2;
    font-size: 16px;
}



@media only screen and (max-width: 768px) {
    .eol-content {
        width: auto;
        padding: 20px;
    }

    .eol-content .menu {
        margin: 20px;
        display: none;
        position: absolute;
        top: 40px;
        right: 0;
        border: 1px solid #3399CC;
        background: #EEEEEF;
    }

        .eol-content .menu > li {
            display: block;
            width: 100%;
            margin: 0;
            height: auto;
            background: #EEEEEF;
        }

            .eol-content .menu > li > a {
                display: block;
                width: 100%;
                text-decoration: none;
                padding: 15px 20px;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
            }

                .eol-content .menu > li > a:hover, .menu > li > a:focus {
                    box-shadow: inset 5px 0px #3399CC;
                    padding: 15px 15px 15px 25px;
                    background: #EEEEEF;
                }

    .toggle {
        position: absolute;
        right: 20px;
        top: 20px;
        display: block;
        cursor: pointer;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
        color: #9A9DA2;
    }

    #toggle:checked ~ .menu {
        display: block;
    }

    #toggle:checked ~ .toggle {
        color: #3399CC;
    }

}

@media only screen and (max-width: 479px) {
    .toggle:after {
        width: 100%;
    }
}