* {
    margin: 0;
    padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Anton', sans-serif;
}

body {
    background: #FFFFFA;
}

header {
    width: 100%;
}

    header nav {
        width: 90%;
        max-width: 1000px;
        margin: 20px auto;
        background: #223862;
    }

.menu_bar {
    display: none;
}



header nav ul {
    overflow: hidden;
    list-style: none;
}

    header nav ul li {
        float: left;
        border-bottom: 1px solid #152035 !important;
    }

        header nav ul li a {
            color: #fff;
            padding: 20px;
            display: block;
            text-decoration: none;
            font-family: 'Anton', sans-serif;
            font-size: 20px;
        }

        header nav ul li span {
            margin-right: 10px;
            font-size: 25px;
        }

        header nav ul li a:hover {
            background: #365898;
        }

section {
    padding: 20px;
}

@media screen and (max-width:800px ) {
    header nav {
        width: 80%;
        height: 100%;
        left: -100%;
        margin: 0;
        position: fixed;
    }

        header nav ul li {
            display: block;
            float: none;
            border-bottom: 1px solid rgba(255,255,255, .3);
        }

    #menu {
        z-index: -5;
        position: fixed;
    }

        #menu.active nav {
            left: 0;
            transition: 1s;
        }

        #menu.active {
            z-index: 5;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            position: fixed;
            transition: 1s;
        }

    .menu_bar {
        display: block;
        width: 100%;
        background: #ccc;
    }

        .menu_bar .bt-menu {
            display: block;
            padding: 20px;
            background: #223862;
            color: #fff;
            text-decoration: none;
            font-weight: bold;
            font-size: 25px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

    .menu_bar {
        display: flex;
        justify-content: space-between;
    }

    .menu_bar {
        background-color: #223862;
        color: white;
        border-bottom: 1px solid #152035;
    }

        .menu_bar span {
            font-size: 40px;
            padding: 10px;
        }

        .menu_bar h1 {
            font-size: 32px;
            padding: 8px;
        }
}