@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);

/* === BASIC === */
body, p, h1, ul, li, a {
    margin: 0;
    padding: 0;
}

header, nav, main, footer {
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 24px;

    font-size: 22px;
    box-sizing: border-box;
}

html {
    width: 100%;
    box-sizing: border-box;
}

body {
    display: block;
    padding: 0;
    font-family: 'Montserrat', 'Avenir', 'Arial', 'Verdana', sans-serif;
}

.clearfix:after {
    content: '';
    clear: both;
}

.header {
    background: #282828;
}

header, nav {
    color: #fff;
    text-decoration: none;
}

header a, nav a {
    color: #fff;
    text-decoration: none;
}

/* === HEADER === */
header {
    box-sizing: border-box;
    font-size: 3em;
    padding: 20px 24px;
}

header h1 {
    display: inline-block;
    font-size: 1em;
}

header form {
    display: inline;
    height: 1em;
}

.searchbutton {
    float: right;
    color: white;
    background: transparent;
    border: none;
    line-height: 1.5em;
    height: 1.2em;
}

.searchinput {
    width: 100%;
    display: none;
}

.searchinput:focus {
    display: inline-block;
}

form input {
    font-size: 1em;
}

/* === NAVIGATION === */
.navigation {
    background: #424242;
}

nav {
    font-size: 22px;
}

nav ul {
    list-style: none;
}

nav ul li {
    display: inline-block;
}

nav ul li a {
    display: block;
    padding: 10px 5px;
}

nav ul li:first-child a {
    padding-left: 0;
}

main {
    line-height: 166%;
}

@media only screen
and (max-width : 960px) {
    header, nav, main, footer {
        padding-left: 2.5vw;
        padding-right: 2.5vw;

        width: auto;
    }

    header {
        font-size: calc(3.9vw + 10px);
        padding-top: 2vw;
        padding-bottom: 2vw;
    }

    nav {
        font-size: calc(1vw + 10px);
    }

}

.searchform input[type="submit"] {
    font-family: "manuelmeister";
}