/* Header */
header {

    font-family: 'Karla', sans-serif;
    background: #FFF;
    -webkit-box-shadow:  0 2px 4px -1px rgba(0,0,0,0.06), 0 4px 5px 0 rgba(0,0,0,0.06), 0 1px 10px 0 rgba(0,0,0,0.08);
    box-shadow: 0 2px 4px -1px rgba(0,0,0,0.06), 0 4px 5px 0 rgba(0,0,0,0.06), 0 1px 10px 0 rgba(0,0,0,0.08);
    width: 100%;
    text-align: center;

}



header a img {

    padding: 25px 15px 0;

}

header p {

    margin: 0;
    padding: 10px 0 20px;
    color: white;


}

header p a {

    color: #fefefe;
    text-decoration: none;

}

.menu-container a.drawer {

    position: absolute;
    top: 30px;
    right: 10px;
    font-size: 2em;
    color: white;
    z-index: 100;

}

.menu {

    position: absolute;
    top: 126px;
    right: 0;
    z-index: 101;
    overflow: hidden;
    width: 100%;
    display: none;
    -webkit-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);

}

.menu a {

    display: block;
    text-align: left;
    font-size: 1.2em;
    text-decoration: none;
    padding: 15px 10px;
    font-weight: lighter;
    color: #FFF;
    border-bottom: 1px solid #07141f;
    background: #0D2E42;
    font-family: 'Karla', sans-serif;
    
}

.menu a:hover {

    background: #69acdd;
    color: white;

}

@media (min-width: 800px) {

    header {

        box-shadow: none;
        border-bottom: 1px dotted #CCCCCC;
        background: white;

    }
    .menu {

        width: 400px;

    }
}