/* CSS Document */
@import url(normalize.css);
@import url(reset.css);
@font-face {font-family: 'cooper_hewittsemibold';
    src: url('../fonts/cooperhewitt-semibold-webfont.woff2') format('woff2'),
         url('../fonts/cooperhewitt-semibold-webfont.woff') format('woff');
    font-weight: normal;font-style: normal;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;}
body {line-height: 1;font-size: 90%;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {margin:0;padding:0;border:0;outline:0;font-size:100%; background:transparent;}
/* hieronder eigen css martinkruizenga  */
html{font-size: 100%;}
/* gen css */
body{font-family: "cooper_hewittsemibold", "sans-serif";}
#flexwrap{display: flex; flex-direction: column; align-items: center;}
footer, header, #termen {background-color: rgba(0,0,0,0.71); color: #eee; display: flex; justify-content: center; width: 100%;}
.intern{display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center;
    width: 100%; max-width: 900px; margin: 0 auto; padding: 0 1%;}
main, .intern {padding-left: 1%; padding-right: 1%;}
/* header css */
header{height: 13vw; max-height: 5rem; margin-bottom: 1rem;}
h2{font-size: 4vw; line-height: 8vw;}
.one, .three{font-size: 7vw; line-height: 6vw;}
.two{font-size: 4vw;}
.center{display: flex; flex-direction: row;justify-content: center;margin-bottom: 1rem;}
.logo{ }
/* main css */
main{max-width: 900px;}
article img{width: 100%;}
article h3{font-size: 1.1rem; margin-top: 1rem}
article p, footer p{font-size: .9rem; font-family: Arial, sans-serif;}
.top{margin: 10px 0;}
article, footer{margin-top: 3rem;}
/* footer css */
.column{display: flex; flex-direction: column; margin: 1.5rem 0; padding:0 1%;}
footer a{color: #eee;}
h4{font-size: 1.2rem;margin:.5rem 0;}
footer p{font-size: .9rem;}
.desktop, .desktopextra{display: none;}
.first p:last-child, .last p:last-child{margin-bottom: .75rem; width: 100%;}
.first p{line-height: 1.2rem;}
@media screen and (min-width: 500px) {
    .mobiel{display: none;}
    .desktop{display: block;}
    footer{flex-direction: row; flex-wrap: nowrap;}
    .first, .last{flex-basis: 1 1 auto;}
    .last{width: 100%;}}
@media screen and (min-width: 650px){
    main{display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
    article{max-width: 45%;}
    h2{font-size: 1.5rem; line-height: 3.2rem;}
    .one, .three{font-size: 2.3rem;}
    .two{font-size: 1.7rem;}
    .tablet{display: none;}
    .desktopextra{display: block;}
    .column{flex-direction: row;}
    .last{max-width: 45%; margin-left: auto;}}
@media screen and (min-width: 900px){}