/* CSS bij ECO RWD */

@import "reset.css";
@import "https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;700&display=swap";

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

@import url('https://fonts.googleapis.com/css2?family=MedievalSharp&family=Playwrite+AR+Guides&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto+Slab:wght@100..900&display=swap');

body{
font: 300 150%/1.4 "Roboto Slab", Arial, sans-serif;
}

main {
    display: flex;
    flex-direction: column;
}

.container {
    max-width: 1000px;
    margin: 0 auto;
    background-color: white; 
    min-height: 100vh;
}

.mainheader img { margin: 0 auto; }

nav a {
    display: block;
    background: black;
    padding: 20px;
    margin-bottom: 1px;
    text-align: center;
    text-decoration: none;
    transition: background 500ms;
    color: white; 
}

nav a:hover { background: green; }

h1 {
    color: gray;
    font-size: 50px;
    margin: 30px;
    font-size: 45px;
    text-decoration: none;
    font-weight: 500;
    
}

/*img { width: 90%; }*/

.bannering { 
    order: 2;
    width: 100%;
    padding: 30px;
    background-color: whitesmoke;
    display: flex;
    justify-content: center;
}

footer {
    background-color: black;
    min-width: 477px;
    max-width: 1000px;
    height: 100px;
}

.inleiding {
    color: forestgreen;
    text-decoration: none;
    font-weight: 400;
    margin: 20px;
}

.grass { margin: 25px; }

p { 
   column-count: 1;
   padding: 5px;
   margin: 20px; 
   margin-bottom: 10px;
   color: gray;
   font-weight: 400;
}

@media screen and (min-width: 768px) {
    body {    
     background-image: url(../images/bg.jpg);
     background-repeat: no-repeat;
     background-size: cover;
    }
    
  .container {
    max-width: 1000px;
    margin: 0 auto;
    background-color: white;
  }

  .mainnav ul {
    display: flex;
    text-align: flex-start;
  }

   .mainheader { 
    display: flex;  
    justify-content: flex-start;
    }
    
  .inleiding { 
    }
    
  .mainnav li {
    width: auto;
    margin-right: 1px;
  }
       
    
  .actiefitem {
    width: 480px;
    margin: 0px ;
    background-color: black;
    display: flex;
    align-items: flex-start;
    }

  main {
    display: flex;
    flex-direction: row-reverse;
    padding-bottom: 40px;
  }

  .bannering {
/*
    flex: 0 0 220px; 
    order: -1;
*/
    width: 20%;
    height: 100%;
  }
    
  .bannering img { 
    width: 100%;
    height: auto;
    }
    
  .mainsection {
    flex: 3; 
  }

   .mainfooter {  
     height: 300px;
     background: black; 
    }    
  
  .kolomhouder {
    column-count: 2;
    column-gap: 20px;
  }
}