/* ROOT */
:root {
    --main: #044860;
    --secondary: #374F5B;
    --tertiary: #C8D3D9;
    --contrast: #044860;
    --bg: #FAFAFA;
}

/* GENERAL */
* { margin: 0px; padding: 0px; box-sizing: border-box; text-decoration: none; outline: none; -webkit-text-size-adjust: none; }
HTML { min-height: 100vh; }
BODY { position: relative; padding-bottom: 314px; min-height: 100vh; font-family: 'Open Sans'; font-size: 14px; color: var(--main); line-height: 1.6; }
H1 { margin-bottom: 20px; font-size: 35px; font-weight: 600; line-height: 60px; }
BODY:not(.home) { padding-top: 50px; }
H2 { font-size: 35px; font-weight: 600; line-height: 60px; }
H3 { margin-bottom: 20px; padding-left: 70px; font-size: 20px; font-weight: 600; line-height: 40px; background-size: 40px 40px; background-position: center left; background-repeat: no-repeat; }
H4 { font-size: 25px; font-weight: 600; line-height: 60px; }
P { font-size: 16px; }
A { cursor: pointer; }
HR { display: block; margin: 25px 100px; height: 1px; background-color: var(--tertiary); border: 0px; }
INPUT, 
TEXTAREA { font-size: 12.5px; color: var(--main); }
LABEL { display: block; padding: 5px 0px; font-size: 12.5px; font-weight: 600; }
DIV.wrapper { position: relative; margin: auto; width: 1011px; }
DIV.grid { display: grid; grid-column-gap: 70px; column-gap: 70px; grid-row-gap: 20px; row-gap: 20px; grid-template-columns: repeat(2, 1fr); }
DIV.grid.small { grid-column-gap: 20px; column-gap: 20px; }
DIV.grid.no-gap { grid-column-gap: 0px; column-gap: 0px; }
DIV.grid.col4 { grid-template-columns: repeat(4, 1fr); }
DIV.grid.item { grid-column-gap: 20px; column-gap: 20px; grid-template-columns: repeat(3, 1fr); }
DIV.grid.item > DIV:first-child { grid-column: 1 / span 2; }
DIV.table { display: table; font-size: 12.5px; }
DIV.table > DIV { display: table-cell; }
DIV.table > DIV A.submit { position: relative; margin-left: 30px; top: 12px; }
DIV.content A { color: var(--main); text-decoration: underline; }
.button { display: inline-block; padding: 0px 15px; font-size: 15px; color: #FFF; line-height: 33px; background-color: var(--main); border: 1px solid var(--main); border-radius: 5px; transition: background-color .25s ease; cursor: pointer }
.button:hover { background-color: var(--secondary); }
.align-left { text-align: left; }
.submit-button { position: absolute; top: 0; left: 0; width: 0px; height: 0px; z-index: 0; opacity: 0; }
.form-field { padding-bottom: 5px; }
.small-font { font-size: 11px !important; }
::placeholder { color: var(--tertiary); }
::-ms-input-placeholder { color: var(--tertiary); }

/* HEADER */
HEADER { position: fixed; top: 0; left: 0; width: 100%; height: 60px; background-color: #FFF; z-index: 1; }

@media only screen and (min-width: 768px) {
    BODY:not(.home) HEADER { border-bottom: 1px solid var(--tertiary); }
}

HEADER DIV.wrapper { height: 100%; }
DIV.menu { display: grid; place-items: center center; width: 100%; height: 100%; }
HEADER UL { position: absolute; display: block; top: 50%; left: 50%; margin: auto; list-style-type: none; transform: translate(-50%, -50%); }
HEADER UL LI { display: inline; padding: 0px 35px; }
HEADER UL LI A { font-size: 16px; color: var(--main); }
HEADER UL LI A:hover { color: var(--secondary); }
A.logo { position: absolute; display: grid; place-items: center center; height: 100%; }
A.logo IMG { height: 35px; }
DIV.login { position: absolute; display: grid; place-items: center center; top: 0; right: 0; height: 100%; }
A.flag { position: relative; display: inline-block; top: 4px; right: 10px; width: 24px; height: 18px; background-size: cover; }
A.flag.us { background-image: url('../img/us.svg'); }
A.flag.nl { background-image: url('../img/nl.svg'); }

/* FOOTER */
FOOTER { position: absolute; bottom: 0; left: 0; padding: 50px 0px; width: 100%; color: #FFF; background-color: var(--main); border-bottom: 60px solid #FFF; }
FOOTER DIV.footer-header { padding-bottom: 10px; font-size: 16px; font-weight: bold; }
FOOTER DIV.wrapper { overflow: hidden; line-height: 2; }
FOOTER DIV.wrapper A { color: #FFF; }
FOOTER DIV.wrapper > DIV { float: left; padding-right: 50px; }
FOOTER DIV.wrapper > DIV:last-child { float: right; }
FOOTER DIV.wrapper > DIV:nth-child(2) A { display: block; }
FOOTER DIV.wrapper A:hover { text-decoration: underline; }
FOOTER DIV.wrapper.absolute-footer { display: block; position: absolute; left: 50%; bottom: -60px; height: 60px; color: var(--main); text-align: left; line-height: 60px; transform: translateX(-50%); }
FOOTER DIV.logo { position: absolute; right: 0; width: 100%; }
FOOTER DIV.wrapper > DIV.right { left: auto; right: 0; }
FOOTER DIV.right A.button { display: block; padding-left: 40px; color: var(--main); background-color: #FFF; background-image: url('../img/mail.svg'); background-size: 20px 20px; background-position: center left; background-repeat: no-repeat; border-color: #FFF; }
FOOTER DIV.right A.button:last-child { background-image: url('../img/telefon.svg'); }
FOOTER DIV.logo { display: grid; place-items: center right; width: auto; height: 100%; }
FOOTER DIV.logo IMG { width: 250px; }
FOOTER TABLE TD:first-child { padding-right: 40px; font-weight: bold; }

/* CONTENT */
DIV.main { padding: 50px 0px; text-align: center; }

    /* HOME */
    DIV.homepage-header { position: relative; padding-top: 150px; height: 700px; color: #FFF; background-color: var(--main); background-image: url(../img/welcome-illustration-home.svg); background-size: 500px; background-position: top 40px center; background-repeat: no-repeat; }
    DIV.homepage-header::after { content: ' '; position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; background-image: url(../img/angle.svg); background-position: bottom left; background-size: 105%; background-repeat: no-repeat; }
    DIV.homepage-content { position: relative; background-color: #FFF; }
    BODY.home DIV.main { position: relative; padding: 60px 0px 100px; }
    BODY.home DIV.main::after { content: ' '; position: absolute; bottom: 0px; left: 0px; width: 100%; height: 217px; background-color: #F5F5F5; z-index: -1; }

    DIV.grid.newsletter { grid-column-gap: 0px; column-gap: 0px; }
    DIV.newsletter { margin: auto; width: 800px; color: var(--main); background-color: #FFF; border-radius: 10px; }
    DIV.newsletter #container { height: 88px; }
    DIV.newsletter H4 { padding-bottom: 10px; line-height: 1; }
    DIV.newsletter P { font-size: 12.5px; }
    DIV.newsletter > DIV { position: relative; height: 231px; }
    DIV.newsletter > DIV:first-child { display: grid; place-items: center center; background-image: url('../img/newsletter.svg'); background-position: bottom right; border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
    DIV.newsletter > DIV:last-child { padding: 35px; }
    DIV.newsletter IMG { position: absolute; width: 75%; bottom: 0; }
    DIV.newsletter FORM { margin-top: 10px; }
    DIV.newsletter FORM > DIV { display: table; width: 100%; }
    DIV.newsletter FORM > DIV > DIV { display: table-cell; width: 100%; }
    DIV.newsletter FORM > DIV INPUT { position: relative; top: -1px; padding: 0px 10px; width: 100%; border: 0px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
    DIV.newsletter FORM > DIV > DIV:first-child { border: 1px solid var(--tertiary); border-right: 0px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
    DIV.newsletter FORM > DIV A.button { border-top-left-radius: 0px; border-bottom-left-radius: 0px; }
    DIV.newsletter-callback { margin-top: 10px; }

    /* PLATFORM */
    DIV.content-holder { margin: auto; width: 800px; }
    DIV.content-holder > IMG { margin: 50px 0px 25px; width: 100%; }
    DIV.grid.col4 > DIV { font-size: 15px; }
    DIV.grid.col4 > DIV IMG { display: block; width: 40px; margin: auto; }
    DIV.grid.col4 HR { margin: 10px auto; width: 35px; height: 3px; border-radius: 2px; }
    DIV.grid.col4 > DIV:nth-child(1) HR { background-color: #812334; }
    DIV.grid.col4 > DIV:nth-child(2) HR { background-color: #E1A616; }
    DIV.grid.col4 > DIV:nth-child(3) HR { background-color: #0C574F; }
    DIV.grid.col4 > DIV:nth-child(4) HR { background-color: #591F57; }
    IMG.platform-svg { margin: 0px 35px; width: calc(100% - 250px) !important; }

    /* DEMO REQUEST */
    BODY.demo-request #container { margin-top: 24px; padding: 25px; width: 100%; height: 465px; color: var(--main); background-color: var(--bg); border: 1px solid var(--tertiary); border-radius: 10px; }
    DIV.demo-request > DIV:first-child { position: relative; }
    DIV.demo-request > DIV:first-child P { padding-right: 100px; }
    DIV.demo-request > DIV:first-child IMG { margin: 50px 0px 0px 20px; width: 75%; }
    BODY.demo-request #container H2 { margin-bottom: 15px; font-size: 25px; color: var(--main); line-height: 1; }
    .normal-form INPUT, 
    .normal-form TEXTAREA { padding: 0px 10px; width: 100%; height: 35px; border: 1px solid var(--tertiary); border-radius: 2.5px; }
    .normal-form TEXTAREA { padding: 8px 10px; font-family: 'Open Sans', sans-serif; height: 68px; resize: none; }
    .demo-request-callback { display: grid; place-items: center center; width: 100%; height: 100%; font-size: 15px; }
    .demo-request-callback > DIV { text-align: center; }
    .demo-request-callback > DIV > IMG { margin-bottom: 20px; width: 40%; }

@media only screen and (max-width: 1366px) {
    DIV.wrapper { position: relative; margin: 0px 40px; width: calc(100% - 80px); }
    DIV.homepage-header { height: 500px; }
    DIV.grid.newsletter { margin-top: 100px; }
}

@media only screen and (max-width: 1023px) {    
    DIV.item IMG { width: 100%; }
    DIV.newsletter { width: 100%; font-size: 12.5px; }
    DIV.demo-request > DIV:first-child IMG { right: 0px; }
    DIV.table > DIV { font-size: 11px; line-height: 1.2; }
    DIV.table > DIV A.submit { margin-left: 0px; }
    DIV.content-holder { margin: auto; width: 525px; }
    IMG.platform-svg { width: calc(100% - 70px) !important; }
}

@media only screen and (max-width: 1023px) and (min-width: 768px) {
    HEADER UL LI { display: inline; padding: 0px 10px; }
    HEADER UL { margin-left: 50px; }
}

@media only screen and (max-width: 767px) {
    BODY { padding-bottom: 585px; }
    H1 { font-size: 30px; }
    H2 { font-size: 24px; }
    HR { margin: 25px 0px; }
    DIV.wrapper { position: relative; margin: 0px 20px; width: calc(100% - 40px); }
    DIV.grid { grid-template-columns: repeat(1, 1fr); }
    DIV.grid.item { grid-template-columns: repeat(1, 1fr); }
    DIV.grid.item > DIV:first-child { grid-column: 1 / span 1; }
    DIV.grid.small { grid-row-gap: 0px; row-gap: 0px; }

    HEADER { height: 100px; border-bottom: 40px solid #FFF; }
    HEADER::after { content: ' '; display: block; width: 100%; height: 1px; background-color: var(--tertiary); }
    HEADER::before { content: ' '; position: absolute; display: block; bottom: -40px; left: 0; width: 100%; height: 1px; background-color: var(--tertiary); }
    DIV.menu { position: absolute; top: 60px; height: 40px; }
    DIV.menu EM { position: absolute; display: block; top: 0; left: -10px; width: 40px; height: 40px; background-image: url(../img/hamburger.svg); background-size: 35px 19px; background-position: center center; background-repeat: no-repeat; cursor: pointer; }
    DIV.menu EM.open { background-image: url(../img/close.svg); }
    HEADER UL { display: none; top: 40px; left: -20px; width: calc(100% + 40px); background-color: #FFF; transform: none; }
    /* BODY.home HEADER UL { border-top: 1px solid var(--tertiary); } */
    HEADER UL LI { display: block; padding: 0px 20px; line-height: 35px; border-bottom: 1px solid var(--tertiary); }
    HEADER UL LI A { display: block; }
    HEADER .menu-opener.open + UL { display: block; }

    DIV.homepage-header { background-size: 350px; background-position: top 80px center; }
    DIV.homepage-header H1 { line-height: 1.4; }
    DIV.main { padding: 100px 0px 50px; text-align: center; }
    IMG.sporter { margin: 50px 0px 100px; width: 100%; }
    DIV.item IMG { margin-top: 25px; height: 100px; }
    DIV.newsletter > DIV:first-child { height: 100px; background-color: var(--contrast); border-bottom-left-radius: 0px; border-top-right-radius: 10px; }
    DIV.newsletter IMG { width: 50%; }
    DIV.newsletter > DIV:last-child { height: auto; }
    DIV.content-holder { margin: auto; width: 100%; }
    IMG.platform-svg { margin: 0px 35px; }
    DIV.grid.col4 { grid-column-gap: 20px; column-gap: 20px; }
    DIV.demo-request > DIV:first-child P { padding-right: 0px; }
    /* DIV.demo-request > DIV:first-child IMG { position: relative; width: 100%; right: auto; bottom: auto; } */
    DIV.demo-request > DIV:first-child IMG { display: none; }
    DIV.demo-request > DIV:last-child { margin-top: 20px; }
    BODY.demo-request #container { margin-top: 0px; height: auto; }
    DIV.table > DIV A.submit { margin-left: 20px; }
    IMG.platform-svg { margin-top: 0px !important; }

    FOOTER DIV.wrapper > DIV { float: none; }
    FOOTER DIV.wrapper > DIV:not(:first-child) { margin-top: 50px; }
    FOOTER DIV.logo { position: relative; right: auto; width: 100%; }
}