/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

body { line-height: 1; }

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; }

/* ONDERSTAANDE UITGANGSPUNTEN ZAGEN WE IN DE LES */
:root { font-size: 62.5%; }

html { -webkit-box-sizing: border-box; box-sizing: border-box; }

*, *:before, *:after { -webkit-box-sizing: inherit; box-sizing: inherit; }

/* Why not try a few variables :-) */
body { font-family: "arial"; }

.title img { margin-left: 75.5%; margin-top: 50px; }

.GR1 { height: 630px; width: 70%; margin-left: auto; margin-right: auto; margin-top: 50px; display: -ms-grid; display: grid; -ms-grid-columns: 1fr 0.15fr; grid-template-columns: 1fr 0.15fr; grid-gap: 50px; background-color: #999; font-size: 12pt; padding-top: 5px; }

.menu ul { list-style: none; margin: 0; padding: 0; }

.menu li a { display: block; color: white; padding: 8px 16px; text-decoration: none; }

.menu li a:hover { background-color: black; }

.main h2 { font-size: 25px; margin-left: 25px; margin-top: 15px; color: white; }

.Flex1 { margin-top: 100px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-left: 150px; height: 320px; overflow: auto; padding-left: 15px; }

.Flex1 .container { position: relative; width: 300px; padding: 10px; }

.Flex1 .image { display: block; width: 100%; height: auto; }

.Flex1 .overlay { position: absolute; bottom: 0; left: 10px; right: 0px; overflow: hidden; width: 93.2%; height: 0; -webkit-transition: .5s ease; -o-transition: .5s ease; transition: .5s ease; background-color: white; opacity: 0.9; }

.Flex1 .container:hover .overlay { height: 95%; }

.Flex1 .text { color: #999; font-size: 20px; position: absolute; top: 35%; margin-left: 70px; text-align: center; }

.Flex1 .text:hover { color: black; }

.Flex2 { margin-top: 100px; display: -webkit-box; display: -ms-flexbox; display: flex; margin-left: 150px; height: 320px; padding-left: 15px; background: none; }

.Flex2 .imagepart { margin-left: 30px; background-color: orange; height: 630px; margin-top: -145px; width: 430px; text-align: center; color: white; }

.Flex2 .imagepart h2 { color: white; }

.Flex2 .imagepart button { background-color: white; color: orange; border: none; padding: 6px; }

.Flex2 .imagepart button:hover { background-color: #FF4500; border: 3px; border-color: orange; }

.Flex2 .imagepart2 { margin-left: 30px; background-color: #FFAA00; height: 630px; margin-top: -145px; width: 430px; text-align: center; color: black; }

.Flex2 .imagepart2 h2 { color: black; }

.Flex2 .imagepart2 button { background-color: black; color: #FFAA00; border: none; padding: 6px; }

.Flex2 .imagepart2 button:hover { background-color: white; border: 3px; border-color: #FFAA00; }

.Flex2 .imagepart3 { margin-left: 30px; background-color: grey; height: 630px; margin-top: -145px; width: 430px; text-align: center; color: white; }

.Flex2 .imagepart3 h2 { color: white; }

.Flex2 .imagepart3 button { background-color: white; color: grey; border: none; padding: 6px; }

.Flex2 .imagepart3 button:hover { background-color: black; border: 3px; border-color: grey; }

.Flex2 .textpart { margin-top: -20px; padding: 15px; width: 500px; height: 390px; overflow: auto; line-height: 25px; text-align: center; }

.Flex2 .textpart h3 { font-weight: bold; }

header{
  background-color: black;
  height: 100px;
  color: white;
  font-family: arial;
  font-size: 30px;
  padding-left: 50px;
  padding-top: 30px;
}
header a{
  text-decoration: none;
  color : white;
}
/*# sourceMappingURL=style.css.map */