*, *:before, *:after {
  box-sizing: border-box;
}

body {
    display: flex;
    flex-flow: column nowrap;
    margin: 0 auto;
    min-height: 100vh;
    color: #404248;
    text-align: left;
    font-family: "Helvetica Neue LT Pro", "Helvetica Neue", Arial, sans-serif;
    line-height: 1.5;
}

header, main, footer {
  padding: .5em max(calc((100% - 60em) / 2),0.5em);
}

header {
    background: #FFFFFF;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
}

nav {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  flex: none;
  }

nav ul, footer ul
{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}

nav li, footer li
{
    padding: 1em;
    text-decoration: none;
}

article {
    clear: left;
    margin-bottom: 4em;
}

address {
    font-style: normal;
}

header h1 {
    margin: 0px;
    padding: 0px;
}

main {
    background: #FFFFFF;
    flex: 1;
  }
  
main img {
  width: 100%;
  }  

main img.small {
  width: 15em;
  float: left;
  vertical-align:text-top;
  margin: 0 1em 1em 0;
  }  
  
footer {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    background: #CCCCCC;
    flex: none;
    justify-content: space-between;
  }

header h2 a:link {
  color: #404248;
  text-decoration: none;
}

header h1 a:visited {
  color: #404248;
}

/*Text formatting*/
select {
  font-family: monospace;
}

p {
/*  font-size: 16px;*/
  font-style: normal;
  text-align: left;
}

p.inline {
    display: inline;
}

h1,h1 a {
/*  font-size: 24px;*/
}

h2 {
/*  font-size: 18px;*/
  font-weight: bold;
  margin-top: .3em;
  margin-bottom: .3em;
}

h3 {
/*  font-size: 18px;*/
}


table, td {
  border: none;
}

td {
  padding:5px;
/*  font-size: 16px;*/
  text-align: left;
}

th {
text-align: center;
}

td > button {
  margin: 0px;
}

.bright {
  color: #ffffff;
}

a {
/*  font-size: 16px;*/
  font-style: normal;
/*  line-height: normal;*/
}

a:link {
  color: #404248;
/*  text-decoration: none;*/
}

a:visited {
  color: #404248;
}
   
a:hover {
  color: #ff0066;
}

a.active:link, a.active:visited {
  color: #404248;
}

li {
/*  font-size: 16px;*/
  font-style: normal;
/*  line-height: normal;*/
  text-align: left;
}

button {
  background-color: #CCCCCC;
  border-radius: 5px;
  padding: 5px;
  margin-top: 10px;
  margin-bottom: 10px;
  font-family: Helvetica, sans-serif;
  font-weight: bold;
}

button:hover {
  background-color: red;
  color: white;
}

button.main {
  background-color: red;
  color: white;
}

button.main:hover {
  background-color: crimson;
}

@media screen and (max-width: 700px) {

.mainsection {
    width: 100%;
  }

.container {
  width: 48%;
  margin: 0.96%;
}

.weglassen {
  display: none;
}

}

@media screen and (max-width: 500px) {

main img.small {
  width: 100%;
  margin: 0 0 1em 0;
  }

.container {
  width: 95%;
  margin: 2%;
}

.weglassen2 {
  display: none;
}

}