/* CSS bij ECO fixed width */

@import "print.css" print; /* om printformaat aan te passen*/
@import "reset.css";
@import "https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;700&display=swap";

/* Algemeen ----------------------------------------- */

body {
    font: 300 100%/1.4 'Roboto Slab', Arial, sans-serif;
    background: white url(../images/bg.jpg) center/cover;
    color: #666;
}

.container {
    width: 1000px;
    margin: 0 auto;
}

.mainheader {
    background: white;
    height: 150px;
    padding: 1em;
}

.mainnav {
    background: black;
    height: 50px;
}

main {
    background: white;
    min-height: 400px;
    display: flex;
    flex-direction: row-reverse;
}

.mainfooter {
    background: #666;
    min-height: 200px;
}

.mainheader img { height: 100%; }

/* Navigatie ----------------------------------------- */

a {
    color: green;
    text-decoration: none;
}

a:hover { text-decoration: underline; }

.mainnav ul { display: flex; }

.mainnav ul li { flex-grow: 1; }

.mainnav a {
    display: block;
    padding: 0 40px;
    border-right: 1px solid white;
    line-height: 50px;
    color: #F1F1F1;
    text-align: center;
    text-transform: uppercase;
    transition: background 500ms;
}

.mainnav a:hover {
    background: darkseagreen;
    text-decoration: none;
}

.mainnav a.actiefitem { background-color: green; }

.mainnav ul li:last-child a { border: 0; }

/* Content ----------------------------------- */

.bannering {
    /* width: 120px; */
    flex-basis: 120px;
    padding: 20px;
    background: #EEE;
}

.mainsection { 
    padding: 40px;
    background: white;
}

.mainsection article {
    column-count: 2;
    column-gap: 40px;
}

h1 { 
    font: 400 2rem/1.4 'Roboto Slab', Arial, sans-serif; 
    margin-bottom: 1em;
}

p { margin-top: 0; }

.inleiding { color: green; }

.mainsection img { 
    width: 100%;
    margin-bottom: 20px; 
}