BODY, TD, INPUT, TEXTAREA, SELECT
{
font-family: din-2014, sans-serif, "ms sans serif", arial, helvetica ;
}

#logo
{
font-family: din-2014-narrow ;
}


HTML, BODY
{

}

BODY
{
padding: 0px ;
margin: 0px ;
background-color: #ffffff ; 
color: #1b1f23 ;   /* grey */
color: rgba(27,31,35,0.8) ;   /* grey */
overflow-y: scroll ;
}


DIV, HEADER, FOOTER, SECTION, ARTICLE ,ASIDE, FIGURE, NAV
{
display: block ;
margin: 0px ;
padding: 0px ;
vertical-align: top ;
}


DIV, HEADER, FOOTER, SECTION, ARTICLE, ASIDE, FIGURE, NAV, TD
{
text-align: left ;
vertical-align: top ;
}

IMG
{
border: none ;
-ms-interpolation-mode: bicubic ;
margin: 0px ;
padding: 0px ;
}

HR
{
height: 1px ;
border: none ;
color: #ffffff ;
background-color: #ffffff ;
}

A, 
A:link, 
A:active, 
A:visited,
A:hover
{
color: #1b1f23 ;   /* grey */
color: rgba(27,31,35,0.8) ;   /* grey */
text-decoration: none ;
cursor: pointer ;
transition-property: color ;
transition-duration: 300ms ;
transition-timing-function: ease-in-out ;
}

A:hover
{
color: rgba(27,31,35,1) ;   /* grey */
}

SECTION P A, SECTION P A:link, SECTION P A:active, SECTION P A:visited, SECTION P A:hover 
{
text-decoration: none ;
color: rgba(27,31,35,0.8) ;   /* grey */
border-bottom-style: solid ;
border-bottom-width: 2px ;

transition-property: border-bottom-color ;
transition-duration: 300ms ;
}

SECTION P A:hover 
{
border-bottom-color: rgba(255,255,255,1);
}


UL, OL
{
padding-left: 30px ;
}

UL
{
list-style-type: disc ;
}

OL
{
list-style-type: decimal ;
}

LI
{
margin-bottom: 10px ;
line-height: 1.33em ;
}

LI:last-child
{
margin-bottom: 0px ;
}

NAV
{
margin-top: 0px ;
margin-bottom: 0px ;
}

H1, H2, H3, H4, H5, H6, H7, H8, H9, H10, H11, H12
{
display: block ;
margin-top: 0px ;
margin-bottom: 0px ;
line-height: initial ;
}

H1, H3, H5, H7, H9, H11
{
font-weight: 800 ;
text-transform: uppercase ;
}

H2, H4, H6, H8, H10, H12
{
font-weight: 300 ;
margin-top: 0px ;
}


H1
{
font-size: 50px ;
}

H2
{
font-size: 24px ;
margin-top: 5px ;
}

H3
{
font-size: 42px ;
}

H4
{
font-size: 24px ;
}

H5
{
font-size: 36px ;
}

H6
{
font-size: 24px ;
}

H7
{
font-size: 28px ;
opacity: 0.5 ;
}

H8
{
font-size: 18px ;
}

H9
{
font-size: 16px ;
}

H10
{
font-size: 17px ;
}

H11
{
font-size: 17px ;
}

H12
{
font-size: 16px ;
margin-top: 3px ;
}


BODY
{
font-size: 18px ;
font-weight: 400 ;
}

FOOTER
{
font-size: 16px ;
}









/* CALL TO ACTION */

A.cta, 
A.cta:link, 
A.cta:active, 
A.cta:visited, 
A.cta:hover 
{
display: inline-block;
position: relative;
overflow: hidden ;
background-color: #ffd520 ;   /* yellow */
color: #1b1f23 ;   /* grey */
color: rgba(27,31,35,0.8) ;   /* grey */
text-decoration: none;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 20px;
padding-right: 70px;
border-radius: 5px;
line-height: 22px ;
font-weight: 600 ;
text-align: left ;
cursor: pointer ;

transition-property: background-color, color ;
transition-duration: 360ms, 250ms ;
transition-timing-function: ease-in-out ;
}

A.cta:hover
{
}


A.cta::before
{
display: block ;
position: absolute ;
top: 22px ;
right: 25px ;
width: 0px ;
height: 0px ;
border-radius: 50% ;
background-color: #ffffff ;
z-index: 1 ;
content: " " ;
}

A.cta:hover::before
{
top: 0px ;
right: 0px ;
width: 50px ;
height: 100% ;
border-radius: 0px ;
}

A.cta::before,
A.cta:hover::before   /* hover on */
{
transition-property: top, right, width, height, border-radius ;
transition-duration: 300ms, 300ms, 300ms, 300ms, 300ms ;
transition-delay: 0ms, 0ms, 0ms, 0ms, 200ms ;
transition-timing-function: ease-in-out ;
}

A.cta::before   /* hover off */
{
transition-duration: 300ms, 300ms, 300ms, 300ms, 150ms ;
transition-delay: 0ms, 0ms, 0ms, 0ms, 0ms ;
}




A.cta::after
{
display: block ;
position: absolute ;
top: 0px ;
right: 0px ;
height: 100% ;
width: 50px ;
color: rgba(27,31,35,0.8) ;   /* grey */
text-align: center ;
vertical-align: middle ;
font-size: 20px ;
line-height: 47px ;
opacity: 1 ;
z-index: 2 ;
font-family: "FontAwesome";
font-weight: 900 ;
font-family: "Font Awesome 6 Pro" ;
font-weight: 900 ;
content: "\f8d9" ;

transition-property: width, color ;
transition-duration: 300ms ;
transition-timing-function: ease-in-out ;
}

A.cta:hover::after
{
color: rgba(0,0,0,1) ; 
}















/* CTA PRESSING */

A.pressing, 
A.pressing:link, 
A.pressing:active, 
A.pressing:visited, 
A.pressing:hover 
{
display: table ;
width: 100% ;
position: relative;
overflow: hidden ;
background-color: rgba(27,31,35,0.1) ;   /* grey */
color: #1b1f23 ;   /* grey */
color: rgba(27,31,35,0.8) ;   /* grey */
text-decoration: none;
padding-top: 0px ;
margin-top: 12px ;
border-radius: 5px;
font-size: 15px ;
font-weight: 400 ;
line-height: 20px ;
text-align: left ;
cursor: default  ;

transition-property: background-color, color ;
transition-duration: 360ms, 250ms ;
transition-timing-function: ease-in-out ;
}

A.pressing::before
{
display: block ;
position: absolute ;
top: 0px ;
left: 0px ;
height: 100% ;
width: 50px ;
color: rgba(27,31,35,0.8) ;   /* grey */
text-align: center ;
vertical-align: middle ;
font-size: 20px ;
line-height: 51px ;
opacity: 0.75 ;
z-index: 2 ;
font-family: "FontAwesome";
font-weight: 900 ;
font-family: "Font Awesome 6 Pro" ;
font-weight: 900 ;
content: "\f8d9" ;

transition-property: width, color ;
transition-duration: 300ms ;
transition-timing-function: ease-in-out ;
}

A.pressing DIV
{
display: table-cell ;
padding: 15px ;
}

A.pressing DIV:nth-of-type(1)
{
padding-left: 50px ;
}

A.pressing DIV:nth-of-type(2)
{
width: 100px ;
line-height: 0px ;
}

A.pressing SPAN
{
display: block ;
margin-top: 5px ;
}

A.pressing IMG
{
width: 100% ;
border-radius: 3px ;
outline: 1px solid rgba(0,0,0,0.25) ;
}




































/* CONTENT CARD */

A.cnt, 
A.cnt:link, 
A.cnt:active, 
A.cnt:visited, 
A.cnt:hover 
{
display: inline-block;
position: relative;
overflow: hidden ;
text-decoration: none;
margin-right: 12.5% ;
width: 43.75% ;
cursor: pointer ;
border-radius: 10px ;
color: #1b1f23 ;   /* grey */
opacity: 0.8 ;

transition-property: opacity ;
transition-duration: 300ms ;
transition-timing-function: ease-in-out ;
}

A.cnt:last-of-type
{
margin-right: 0px;
}

A.cnt:hover
{
opacity: 1 ;
}


A.cnt FIGURE
{
width: 100%;
padding-top: 50% ;

background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}


A.cnt DIV,
A.cnt U
{
display: block ;
padding: 40px ;
}

A.cnt U
{
position: relative;
font-size: 26px ;
line-height: 30px ;
font-weight: 700 ;
text-decoration: none ;
font-style: normal ;
}

A.cnt U::after
{
display: block ;
position: absolute ;
top: 40px ;
right: 40px ;
width: 50px ;
color: rgba(27,31,35,0.8) ;   /* grey */
text-align: center ;
vertical-align: middle ;
font-size: 30px ;
line-height: 30px ;
opacity: 1 ;
z-index: 2 ;

font-family: "FontAwesome";
font-weight: 900 ;
font-family: "Font Awesome 6 Pro" ;
font-weight: 900 ;

content: "\f8a0" ;
}

































/* FRAME + CONTAINER */

MAIN, HEADER > DIV, FOOTER
{
display: block ;
position: relative ;
width: 100% ;
max-width: 1920px ;
margin-left: auto ;
margin-right: auto ;
vertical-align: top ;
}

MAIN
{
min-height: 60vh ;
}

SECTION,
FOOTER
{
padding-top: 0px ;
padding-bottom: 0px ;
padding-left: 0px ;
padding-right: 0px ;
text-align: left ;
}

SECTION > DIV,
FOOTER > DIV,
HEADER > DIV > DIV
{
margin-left: 5% ;
margin-right: 5% ;
}

SECTION > DIV:nth-of-type(1),
FOOTER > DIV:nth-of-type(1),
HEADER > DIV > DIV:nth-of-type(1)
{
margin-left: 10% ;
}

SECTION > DIV,
HEADER > DIV > DIV
{
display: inline-block ; 
width: 35% ;
vertical-align: top ;
}

SECTION > DIV:nth-of-type(2),
SECTION > A:nth-of-type(2)
{
width: 22% ;
}

SECTION.c1
{
}

SECTION.c1 > DIV
{
display: inline-block ; 
}

SECTION.c1 > DIV,
FOOTER > DIV
{
width: 80% ;
}

SECTION.colour.c1 > DIV > DIV
{
column-count: 2 ;
column-gap: 12.5% ;
}


/*
SECTION.colour.c1 > DIV > DIV P
{
display: inline ;
margin-top: 0px ;
}
*/










/* vertical */

BODY
{
padding-top: 120px ;
}

SECTION, FOOTER
{
padding-top: 80px ;
padding-bottom: 80px ;
}

P, UL, OL, .mb, SECTION.colour.c1 > DIV > DIV, A.cta, SECTION NAV
{
margin-top: 40px ;
margin-bottom: 0px ;
}

SECTION.colour.c1 > DIV > DIV P:first-of-type
{
margin-top: 0px ;
}

.bmk 
{
position: absolute;
top: -120px;
left: 0px;
}





























/* HEADER */


HEADER 
{
display: block ;
position: fixed ;
width: 100% ;
top: 0px ;
left: 0px ;
background-color: #ffffff ;
z-index: 1000;
}

HEADER > DIV
{
height: 120px ;
background-color: #000000 ;
}

HEADER > DIV > DIV
{
position: relative ;
}

HEADER > DIV > DIV:nth-of-type(1) 
{
width: 20% ;
}

HEADER > DIV > DIV:nth-of-type(2) 
{
width: 50% ;
text-align: right ;
}





/* logo */

#logo
{
display: inline-block;
margin-top: 28px ;
color: #ffd520 ;   /* yellow */
font-size: 48px ;
font-weight: 700 ;
}

#logo I
{
font-style: normal ;
color: #8a9095 ;
}

#logo U
{
font-style: normal ;
text-decoration: none ;
font-size: 24px ;
}







/* H navigatie */

HEADER NAV
{
display: inline-block;
margin-top: 40px ;
text-align: right ;
overflow: hidden ;
}

HEADER NAV A, 
HEADER NAV A:link, 
HEADER NAV A:active, 
HEADER NAV A:visited, 
HEADER NAV A:hover
{
display: inline-block  ;
position: relative ;
background-color: rgba(0,0,0,0) ;
color: #ffffff ;
font-size: 14.5px ;
font-weight: 700 ;
font-style: italic ;
text-transform: uppercase ;
white-space: nowrap ;

text-align: center ;
text-decoration: none;
cursor: pointer ;
margin: 0px ;

line-height: 20px ;
padding-top: 10px ;
padding-bottom: 10px ;
padding-left: 0px ;
padding-right: 3px ;

margin-left: 0px ;
margin-right: 30px ;

overflow: hidden ;
z-index: 1 ;
border: 0px ;

transition-property: color ;
transition-duration: 300ms ;
transition-delay: 0ms ;
transition-timing-function: ease-in-out ;

}

HEADER NAV A:last-of-type
{
margin-right: 0px !important ;
}

HEADER NAV A:nth-of-type(3)
{
display: none ;
}


HEADER NAV A:hover 
{
color: #ffd520 ;   /* yellow */
}

HEADER NAV A:hover  /* hover on */
{
}

HEADER NAV A.sel   /* selected */
{
}

HEADER NAV A::before 
{
display: block;
position: absolute;
bottom: 0px;
left: -100%;
height: 4px;
width: 100%;
background-color: #ffffff ;
z-index: 1;
content: " ";
transition-property: left, background-color ;
transition-duration: 200ms ;
transition-timing-function: ease-in-out ;
}

HEADER NAV A:hover::before, HEADER NAV A.sel::before 
{
left: 0px;
}

HEADER NAV A:hover::before 
{
background-color: #ffd520 ;   /* yellow */
}







/* mob menu */

HEADER NAV:nth-of-type(2)
{
display: none ;
}






































/* SECTION GENERAL */


SECTION
{
background-color: #ffffff ;   /* white */
color: #1b1f23 ;   /* grey */
color: rgba(27,31,35,0.8) ;   /* grey */
position: relative ;
overflow: hidden ;
line-height: 1.5em ;
}











/* SECTION TYPES */




/* INTRO IMAGE */

SECTION.intro-img
{
background-color: #1b1f23 ;   /* grey */
background-color: rgba(27,31,35,1) ;   /* grey */

color: #ffffff ;   /* white */
color: rgba(255,255,255,1) ;   /* white */

padding-top: 0px ;
padding-bottom: 0px ;

background-position: 50% 50% ;
background-repeat: no-repeat;
background-size: cover ;
}

SECTION.intro-img > DIV
{
background-color: rgba(27,31,35,0.88) ;   /* grey */
margin-left: 5% ;
padding-left: 5% ;
padding-right: 5% ;
padding-top: 80px ;
padding-bottom: 80px ;
min-height: 50vh ;
width: 23% ;
}









/* INTRO TEXT */

SECTION.intro-txt
{
min-height: initial ;
}








/* INTRO RELEASE */

SECTION.intro-rel
{
}

SECTION.intro-rel NAV 
{
margin-top: 60px ;
}

SECTION.intro-rel FIGURE
{
display: inline-block ;
position: fixed;
left: 55% ;
top: 200px ;
width: 35%;
height: 0px ;
max-width: 672px ;
max-height: 672px ;
padding-top: 35%;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 3px ;
}












/* SEC COLOUR */

SECTION.colour 
{
}

SECTION.colour FIGURE
{
position: absolute;
top: 0px;
right: 0px;
width: 50%;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}

SECTION.colour > DIV > p:nth-child(1) 
{
margin-top: 0px ;
}



/*mirror */

SECTION.colour.mirror > DIV 
{
margin-left: 55% ;
}

SECTION.colour.mirror > FIGURE
{
left: 0px;
right: auto ;
}













/* SEC LINK */

SECTION.link 
{
}


SECTION.link NAV
{
display: block ;
margin-top: 6% ;
}

















/* SUB PAGES OVERVIEW */


.overview
{
min-height: 66vh ;
}

.overview NAV
{
display: block ;
margin-top: 3% ;
text-align: left ;
}

.overview A
{
background-color: rgba(27,31,35,0.1) ;   /* grey */
color: rgba(27,31,35,1) ;   /* grey */

display: inline-table ;
position: relative ;

width: 30% ;
min-width: 450px ;
min-height: 145px ;

padding: 0px ;

margin-left: 0px ; 
margin-right: 3% ; 
margin-bottom: 3% ; 

white-space: normal ;

transition-property: background-color ;
transition-duration: 300ms ;
transition-delay: 0ms ;
}

.overview A:hover
{
background-color: rgba(255,213,32,0.66) ;   /* yellow */
}

.overview A DIV
{
display: table-cell ;
}

.overview A,
.overview A DIV:nth-of-type(1)
{
border-radius: 5px ;
}


.overview A DIV:nth-of-type(1)
{
width: 30% ;

background-image: none ;
background-repeat: no-repeat ;
background-size: cover ;
background-position: 50% 50% ;
background-color: rgba(27,31,35,0.25) ;

border-color: rgba(255,255,255,0) ;
border-style: solid ;
border-width: 0px ;
border-top-right-radius: 0px ;
border-bottom-right-radius: 0px ;

position: relative ;
z-index: 2 ;
}

.overview A DIV:nth-of-type(2)
{
position: relative ;
text-align: left ;
vertical-align: top ;
padding-top: 20px ;
padding-bottom: 20px ;
padding-left: 40px ;
padding-right: 40px ;
font-size: 15px ;
font-weight: 800 ;
line-height: normal ;
z-index: 2 ;
}

.overview A SPAN
{
opacity: 0.5 ;

transition-property: opacity ;
transition-duration: 300ms ;
transition-delay: 0ms ;
}

.overview A:hover SPAN
{
opacity: 1 ;
}

.overview A B,
.overview A I 
{
display: block ; 
margin-top: 3px ;
}

.overview A B
{
font-weight: 800 ;
font-size: 20px ;
}

.overview A I 
{
font-size: 18px ;
font-weight: 300 ;
font-style: normal ;
}















































































/* FOOTER */


FOOTER
{
position: relative ;
background-color: #1b1f23 ;   /* grey */
color: #ffffff ; 
min-height: 20vh ;
line-height: 30px ;
}

FOOTER > DIV
{
display: block ;
}

FOOTER > DIV > DIV
{
display: inline-block ;
padding-right: 6% ;
padding-bottom: 32px ;
}

FOOTER > DIV > DIV:last-of-type
{
margin-right: 0px ;
}


FOOTER H9
{
color: #ffd520 ;   /* yellow */
margin-bottom: 5px ;
}

FOOTER  > DIV > DIV H9:nth-of-type(2)
{
margin-top: 31px ;
}

FOOTER P, FOOTER NAV
{
margin-top: 0px ;
margin-bottom: 0px ;
max-width: 400px ;
}

FOOTER I
{
margin-right: 5px;
}

FOOTER A, FOOTER A:link, FOOTER A:active, FOOTER A:visited
{
display: table ; 
color: rgba(255,255,255,1) ;
border-bottom: 0px solid rgba(255,255,255,0) ;
transition-property: border-bottom ;
transition-duration: 300ms ;
}

FOOTER A:hover
{
color: rgba(255,255,255,1);
border-bottom: 0px solid rgba(255,255,255,1) ;
}