@font-face { src: url('?attribute=asset&location=fonts/fontLight'); font-family: fontLight; } @font-face { src: url('?attribute=asset&location=fonts/fontRegular'); font-family: fontRegular; } @font-face { src: url('?attribute=asset&location=fonts/fontBold'); font-family: fontBold; } @font-face { src: url('?attribute=asset&location=fonts/fontLogo'); font-family: fontLogo; } body { margin: 0; width: 100vw; height: 100vh; overflow: hidden; } #main { width: 100vw; height: 100vh; overflow-x: hidden; overflow-y: scroll; } div.language { position: absolute; right: 2vh; top: 1vh; height: 3vh; width: calc(15vh + 10px); overflow: hidden; } @media (orientation: portrait) { div.language { width: 4vh; height: 12vh; } } div.menu { width: 100vw; background-color: white; height: 20vh; margin-left: 0; overflow: hidden; padding-top: 8.5vh; box-sizing: border-box; } @media (min-width: 120vh) { div.menu { padding-left: 20vh; } } @media (orientation: portrait) { div.menu { width: 100vw; margin: 0; height: 30vh; } } div.secondMenu { box-sizing: border-box; padding-top: 3vh; background-color: #1226aa; width: 100vw; overflow-y: hidden; overflow-x: hidden; height: 10vh; margin-bottom: 2vh; } @media (min-width: 120vh) { div.secondMenu { padding-left: 20vh; } } @media (orientation: portrait) { div.secondMenu { overflow-x: scroll; } } div.content { width: 100vh; min-height: 70vh; padding-left: 2vh; padding-top: 1px; box-sizing: border-box; } @media (min-width: 120vh) { div.content { margin-left: 20vh; } } @media (orientation: portrait) { div.content { width: 100vw; margin-left: 0; padding-right: 2vh; } } #main > div.footer { width: 100vw; height: 20vh; background-color: #333333; } @media (orientation: portrait) { #main > div.footer { height: 60vh; } } div.footer > div.footer { overflow: hidden; height: 20vh; float: left; width: calc(100vw / 3); } @media (orientation: portrait) { div.footer > div.footer { width: 100vw; } } img.language { width: 4vh; height: 3vh; margin-left: 1vh; content: url('?attribute=asset&location=empty&type=svg'); background-size: cover; cursor: pointer; } @media (orientation: portrait) { img.language { margin-left: 0; margin-bottom: 1vh; } } div.language > a:nth-of-type(1) > img { background-image: url('?attribute=asset&location=flags/nl&type=svg'); } div.language > a:nth-of-type(2) > img { background-image: url('?attribute=asset&location=flags/en&type=svg'); } div.language > a:nth-of-type(3) > img { background-image: url('?attribute=asset&location=flags/de&type=svg'); } img.menu { content: url('?attribute=asset&location=empty&type=svg'); background-size: cover; background-image: url('?attribute=asset&location=logo/logo&type=svg'); width: 30vh; margin-top: -13.5vh; margin-left: 2vh; margin-right: 3vh; float: left; } @media (orientation: portrait) { img.menu { float: none; margin-right: none; display: block; margin-left: calc((100vw - 30vh) / 2) } } img.footer { content: url('?attribute=asset&location=empty&type=svg'); background-image: url('?attribute=asset&location=logo/logo&type=svg'); filter: brightness(0) invert(1); background-size: cover; height: 20vh; margin-left: 50%; transform: translateX(-50%); } div.menu > a.menu { float: left; font-family: fontBold; text-decoration: none; margin-left: 1vh; margin-right: 2vh; border-bottom-style: solid; border-bottom-color: white; border-bottom-width: 0.2vh; color: #1226aa; font-size: 2vh; } @media (orientation: portrait) { div.menu > a.menu { box-sizing: border-box; margin: 0; transform: translateY(-5vh); background-color: #d9d9d9; padding: 0; width: calc(100vw / 3); height: 5vh; text-align: center; padding-top: 1vh; } } @media (orientation: portrait) { div.menu > a.menu { border-bottom-style: none; } } div.menu > a.menu:hover { color: #8a8682; } @media (orientation: portrait) { a.menu:hover { color: #1226aa; } } div.menu > a:nth-of-type(2) { } @media (orientation: portrait) { div.menu > a:nth-of-type(2) { padding-left: 3.5vh; } } div.menu > a:last-of-type { } @media (orientation: portrait) { div.menu > a:last-of-type { padding-right: calc(100vw / 3); width: calc((100vw / 3) * 2); } } a.secondMenu { display: inline; font-family: fontBold; color: white; text-decoration: none; box-sizing: border-box; font-size: 2.5vh; margin-left: 1.5vh; padding: 0.5vh; border-radius: 0.5vh; } a.secondMenu:hover { background-color: #0f1f8a; } div.secondMenu > a:nth-of-type(2) { border-right-color: white; border-right-width: 0.27vh; border-right-style: solid; padding-top: 1vh; padding-bottom: 1vh; cursor: default; border-radius: 0; } div.secondMenu > a:nth-of-type(2):hover { border-bottom-style: none; background-color: #1226aa; } div.content > h1 { margin-top: 2vh; font-family: fontLight; font-weight: normal; margin-bottom: 2vh; font-size: 3.7vh; } div.content > p, td > p, th > p, td, th { font-family: fontRegular; font-size: 1.7vh; margin: 0; } p.footer { color: white; font-family: fontRegular; font-size: 1.7vh; margin-top: 4vh; } div.content > h2 { font-family: fontBold; font-weight: normal; font-size: 2vh; margin-top: 1vh; margin-bottom: 0; } div.content > a, div.content > * > a { color: #1226aa; cursor: pointer; text-decoration: none; } div.content > a:visited, div.content > * > a { color: #1226aa; cursor: pointer; text-decoration: none; } table, td, th { vertical-align: top; } ul, li, ol { font-family: fontRegular; font-size: 2vh; }