:root {
	--White1			: #F7F7F7;
	--White2			: #DDDDDD;
	--White-Grey1		: #CCCCCC;
	--Light-Grey1		: #BBBBBB;
	--Light-Grey2		: #AAAAAA;
	--Grey				: #808080;
	--Medium-Grey		: #808080;
	--Dark-Grey			: #444444;
	--Darker-Grey		: #3c3c3c;
	--Black				: #18191a;
}
@font-face {
    font-family: 'Arsenal-Bold';
    src:url('fonts/Arsenal-Bold.ttf.woff') format('woff'),
        url('fonts/Arsenal-Bold.ttf.svg#Arsenal-Bold') format('svg'),
        url('fonts/Arsenal-Bold.ttf.eot'),
        url('fonts/Arsenal-Bold.ttf.eot?#iefix') format('embedded-opentype'); 
    font-weight: normal;
    font-style: normal;
}
@font-face {
  font-family: "OpenSans";
  src: url('fonts/OpenSans-Regular.ttf');
  src: url('fonts/OpenSans-Regular.ttf') format('truetype');
}
HTML, BODY {
	padding					: 0;
	margin					: 0;
	border					: 0;
	word-wrap				: break-word;
}
HTML {
	height					: 100vh;
	overflow-y				: auto;
}
BODY {
	box-sizing				: border-box;
	display					: flex;
	flex-wrap				: wrap;
	flex-direction			: row;
	font-size				: 1em;
	font-family				: 'Arsenal-Bold', "Britannic Bold", 'sans-serif';
    font-weight				: normal;
	text-rendering			: optimizeLegibility;
	-webkit-font-smoothing	: subpixel-antialiased;
	-moz-osx-font-smoothing	: grayscale;	
	position				: Relative;
	width					: 100%;
	min-height				: 100%;
	background-color		: var(--White1);
    color					: var(--Black);
}
DIV.language {
	position			: Absolute;
	top					: 0;
	right				: 0;
	padding				: 3px;
	margin				: 0;
	color				: Black;
	background-color	: #5e42a6;
	border-left			: 1px solid Black;
	border-bottom		: 1px solid Black;
	border-radius		: 0 0 0 25px;
	z-index				: 2;
	display				: none;
	
}

DIV.language A, DIV.language IMG  {
	display				: Block;
	float				: Right;
	padding				: 0;
	margin				: 0;
	text-decoration		: None;
	color				: Black;
}

DIV.language SPAN.seperator {
	display				: None;
}

DIV.language IMG {
	padding				: 3px;
	box-sizing			: Border-Box;
	border				: 1px Solid #5e42a6;
	border-radius		: Calc(35px - 3px);
}

DIV.language IMG.current {
	border-color		: White;
}

DIV.language:hover IMG.current {
	border-color		: #5e42a6;
}

DIV.language:hover  IMG:hover {
	border-color		: White;
}
DIV.logo {
	order					: 1;
	flex-basis				: 20%;
	min-height				: 85px;
	margin					: 1em auto;
}
DIV.logo a {
	display					: flex;
	justify-content			: right;
}
DIV.logo IMG.logo {
	height					: 5vw;
	padding					: 0;
	border					: 0;
	top						: 0;
	position				: Relative;
	z-index					: 2;
	background				: Transparent;
}
DIV.logo IMG.logo:hover {
	opacity					: 0.5;
	transition				: all 500ms ease;
	background				: Transparent;
}
DIV.logo H1, DIV.logo H2 {
	display					: none;
}
DIV.body {
	order					: 3;
	flex-basis				: 100%;
	flex-shrink				: 0;
	flex-grow				: 1;
	padding					: 0;
	z-index					: 2;
}
DIV.breadcrumbs {
	display					: none;
	align-content			: center;
	margin					: auto;
	padding					: 2em 0 1em 0;
	text-align				: left;
}
DIV.breadcrumbs P {
	margin					: auto;
	padding					: 0;
}
H1 {
	text-transform			: uppercase;
	font-size				: 35px;
	text-decoration			: None;
	font-weight				: normal;
}
H2 {
	text-transform			: uppercase;
	font-size				: 24px;
	text-decoration			: None;
	font-weight				: normal;
	color					: var(--Black);
}
H2 A {
	text-transform			: uppercase;
	text-decoration			: None;
	color					: var(--Dark-Grey);	
	text-shadow				: none;
	transition				: all 600ms ease;
}
H2 A:hover {
	text-transform			: uppercase;
	text-decoration			: None;
	transition				: all 600ms ease;
}
H3 {
	text-transform			: uppercase;
	font-size				: 17px;
	text-decoration			: None;
	font-weight				: normal;
	margin-bottom			: 3em;
}
H4 {
	text-transform			: uppercase;
	font-size				: 24px;
	text-decoration			: None;
	font-weight				: normal;
	line-height				: 28px;
	color					: var(--Dark-Grey);
}
H5 {
	text-transform			: uppercase;
	font-family				: 'OpenSans';
	font-size				: 18px;
	text-decoration			: None;
	font-weight				: normal;
	line-height				: 24px;
	color					: var(--Dark-Grey);
	margin					: 0 0 10px 0;
}
LI {
	font-size				: 18px;
	line-height				: 28px;
	color					: var(--Black);
}
blockquote {
	color					: var(--Dark-Grey);
	text-align				: center;
}
blockquote#middle {
	font-size				: 40px;
	max-width				: 17em;
	margin-left				: auto;
	margin-right			: auto;
	line-height				: 1em;
}
blockquote#review {
	font-family				: 'Arsenal-Bold', "Britannic Bold", 'sans-serif';
	font-size				: 3.5em;
	text-align				: center;
	color					: var(--Black);
	background-color		: var(--White1);
}
.anchor {
	display					: block;
	position				: relative;
	top						: -4em;
	visibility				: hidden;
}
.center {
	text-align				: center;
}
/* ============================================ *
 * Navigation
 * ============================================ */
DIV.navigation {
	font-family				: 'Arsenal-Bold', "Britannic Bold", 'sans-serif';
	display					: flex;
	order					: 2;
	flex-basis				: content;
	flex-shrink				: 1;
	flex-grow				: 1;
	justify-content			: left;
	background-color		: var(--White1);
	z-index					: 0;
	transition				: all 300ms ease;
	text-transform			: uppercase;

}
DIV.navigation UL {
	display					: flex;
	list-style-type			: None;
	flex-wrap				: wrap;
	flex-direction			: column;
	font-family				: 'Arsenal-Bold', "Britannic Bold", 'sans-serif';
	margin					: 2em 0 0 0;
	max-height				: 2em;
	box-sizing				: content-box;
}
DIV.navigation LI {
	flex-basis				: 25%;
	flex-grow				: 0;
	flex-shrink				: 0;
	box-sizing				: border-box;
	text-align				: center;
	margin-right			: 1em;
	font-size				: 1rem;
	color					: var(--Black);
	min-width				: 7em;
}
DIV.navigation LI A, DIV.navigation LI span{
	color					: var(--Black);
	text-shadow				: none;
}
DIV.navigation LI A:hover, DIV.navigation LI span:hover{
	color					: var(--Black);
	text-shadow				: 0 0 5px var(--Black);
}
DIV.navigation > UL > LI.filled > A {
	height					: 100%;
	transition				: all 500ms ease;
}
DIV.navigation LI.currentpage A {
	font-weight				: Normal;
	border-bottom			: None;
	color					: var(--Black);
	text-shadow				: 0 0 15px var(--Black);
}
DIV.navigation SPAN.separator {
	display					: None;
}
/* ============================================ *
 * Content styling
 * ============================================ */
blockquote.slogan {
	font-family				: 'Arsenal-Bold', "Britannic Bold", 'sans-serif';
	font-size				: 3.5em;
	text-align				: center;
	color					: var(--Black);
	text-shadow				: 0 0 10px var(--White2);
	padding-left			: 8em;
	padding-top				: 2.5em;
	transform				: translateY(0) scale(1);
	margin					: 0;
	min-height				: 6vw;
	background-repeat		: no-repeat;
	background-position		: 0 70%;
	background-color		: transparent;
	background-size			: cover;
	box-shadow				: 0 0 5px rgb(0 0 0 / 50%);

}
blockquote#home  {
	background-image		: url("/images/bg.jpg");
	background-position		: 40% 50% !important;
}
blockquote#trouwjurken  {
	background-image		: url("/images/2.jpg");
	background-position		: 40% 75% !important;
}
blockquote#avondjurken  {
	background-image		: url("/images/3.jpg");
	background-position		: 45% 60% !important;
}
blockquote#accessoires  {
	background-image		: url("/images/4.jpg");
	background-position		: 40% 80% !important;
}
blockquote#reviews  {
	background-image		: url("/images/5.jpg");
	background-position		: 40% 35% !important;
}
blockquote#contact  {
	background-image		: url("/images/6.jpg");
	background-position		: 40% 65% !important;
}
DIV.container {
	padding					: 70px 0;
	box-sizing				: border-box;
}
DIV.index-container {
	padding					: 1em 0 0 0;
	box-sizing				: border-box;
	display					: flex;
	flex-direction			: column;
}
DIV.container P.center {
	padding					: 0;
	text-align				: center;
}
P.intro {
	clear					: both;
	display					: block;
	padding					: 2em 162px 4em 162px;
	background-color		: var(--White1);
	font-family				: 'OpenSans';
	font-size				: 24px;
	color					: var(--Black);
	line-height				: initial;
	font-weight				: initial;
	margin					: 0;
}
H1.subject {
	display					: flex;
	font-family				: 'OpenSans';
	font-size				: 28px;
	color					: var(--Black);
	margin					: 1em auto 0 auto;
}
H1.more {
	background				: transparent url("/images/more.png" ) no-repeat;
	padding-left			: 50px;
	background-position		: 0% 50% !important;
	background-size			: 27px;
}
H1.more:hover {
	background				: transparent url("/images/more-rotate.png" ) no-repeat;
	padding-left			: 50px;
	background-position		: 0% 50% !important;
	background-size			: 27px;
}
P.quote, A.quote {
	text-align				: center;
	background-image		: url(images/stars.svg);
	background-color		: var(--Black);
	overflow				: visible;
	box-shadow				: 0 0 10px rgb(0, 0, 0);
	clear					: both;
	padding					: 1em 162px;
	font-family				: 'OpenSans';
	font-size				: 22px;
	color					: var(--White1);
	line-height				: initial;
	font-weight				: initial;
	margin					: auto;
}
DIV.inleiding {
	clear					: both;
	display					: block;
	padding					: 2em 162px 4em 162px;
	background-color		: var(--White1);
}
DIV.inleiding P {
	font-family				: 'OpenSans';
	font-size				: 24px;
	color					: var(--Black);
	line-height				: initial;
	font-weight				: initial;
	max-width				: 37em;
	margin					: auto;
}
DIV.content {
	clear					: both;
	padding					: 1em 0 1em 1em;
}
DIV.main {
	clear					: both;
	padding					: 2em 15% 1em 15%;
	margin					: auto;
	background-color		: var(--White1);
}
a {
	font-size				: 100%;
	color					: var(--Light-Grey1);
	transition				: all 500ms ease;
	text-decoration			: none;
}
a:hover {
	text-decoration			: none;
	color					: var(--Light-Grey1);
	transition				: all 750ms ease;
}	
iframe {
	width					: 100%;
	max-height				: 20em;
	border-width			: 1px;
	border-style			: solid;
	border-color			: rgba(0,0,0,0.13);
	padding					: 3px;
}
.maps-iframe {
	width					: 100%;
	height					: 12em;
	max-height				: 12em;
	border-width			: 1px;
	border-style			: solid;
	border-color			: rgba(0,0,0,0.13);
	padding					: 3px;
}
DIV.content {
	display					: flex;
	flex-flow				: column;
	justify-content			: space-around;
	clear					: both;
	padding					: 0 15%;
}
DIV.columns {
	display					: flex;
	flex-flow				: wrap;
	justify-content			: space-around;
	padding					: 10px 5em 1em 5em;
	background-color		: var(--White1);
	clear					: both;
}
DIV.columns > .column {
	flex-basis				: 45%;
	width					: 45%;
	min-width				: 15em;
	margin-bottom			: 1em;
}
DIV.column {
	flex-basis				: 50%;
	min-width				: 15em;
}
DIV.column H3 {
	font-family				: 'OpenSans';
	font-size				: 1.5em;
	color					: var(--Dark-Grey);
	margin					: 0;
}
DIV.column A {
	color					: var(--Dark-Grey);
	transition				: all 500ms ease;
	text-decoration			: none;
}
DIV.column A:hover {
	text-decoration			: None;
	text-shadow				: 0 0 5px var(--Dark-Grey);
	transition				: all 600ms ease;
}
DIV.praktisch > .column {
	flex-basis				: 44.5%;
	min-width				: 10em;
}
DIV.praktisch > .column:first-child {
	margin-right			: 2em
}

DIV.column IMG.partners{
	float					: right;
	padding					: 0;
	margin					: 1em 2em 0 0;
	width					: 250px;
}
DIV.logos {
	padding					: 1em;
	display					: flex;
	justify-content			: space-around;
	flex-flow				: Row Wrap;
}
DIV.logos > .logo {
	width					: 32%;
	min-width				: 15em;
}
P {
	font-family				: 'OpenSans';
	padding					: 0;
	font-size				: 18px;
	line-height				: 28px;
	color					: var(--Darker-Grey);
}
P.black {
	font-family				: 'OpenSans';
	padding					: 0;
	font-size				: 18px;
	line-height				: 28px;
	color					: var(--Black);
	margin					: 0;
}
EM	{
	font-family				: 'OpenSans';
	padding					: 0;
	font-size				: 18px;
	line-height				: 28px;
	color					: var(--Light-Grey1);
}
DIV.columns > .column  IMG {
	width					: 98%;
	display					: block;
	border-radius			: 5px;
	box-shadow				: 0 0 10px rgb(25, 25, 25);
	margin-top				: 24px;
}
DIV.columns > .column  IMG.right1 {
	width					: 48%;
	float					: left;
	margin-right			: 1em;
}
DIV.columns > .column  IMG.right2 {
	width					: 48%;
	float					: left;
	
}
DIV.buttons {
	font-family				: 'OpenSans';
	display					: Flex;
	justify-content			: flex-start;
	clear					: Both;
	margin					: 0 0 0.5em 0 !important;
	padding					: 0;
}
DIV.buttons > .space{
	font-family				: 'OpenSans';
	display					: Flex;
	justify-content			: flex-start;
	clear					: Both;
	margin					: 0 3em 0.5em 0 !important;
	padding					: 0;
}
DIV.buttons-left {
	clear					: Both;
	display					: Flex;
	margin					: 0 0 0.5em 0 !important;
	padding					: 0;
	justify-content			: start;
	flex-flow				: row wrap;
}
.grey-button {
	display					: flex;
	flex-grow				: 0;
	flex-basis				: auto;
	margin					: 0;
	padding					: 0;
	color					: var(--Black);
	text-decoration			: None;
	background				: none;
	text-align				: center;
	margin-right			: 2em;
}
.social-button {
	padding					: 0;
}
.social-button IMG {
	opacity					: 0.75;
	transition				: all 500ms ease;
}
.social-button IMG:hover {
	opacity					: 1.0;
	transition				: all 500ms ease;
	box-shadow				: 0 0 15px var(--White1);
}
.grey-button-inner {
	display					: flex;
	flex-grow				: 0;
	flex-basis				: auto;
	margin					: 0;
	text-decoration			: None;
	background				: none;
	height					: auto;
	padding					: 8px 16px !important;
	background				: var(--Black);
	color					: white;
	border					: 2px solid var(--Black);
	letter-spacing			: 0.05em;
	transition				: all 500ms ease;
}
.grey-button:hover .grey-button-inner {
	background				: none;
	color					: var(--Black);
	border					: 2px solid var(--Black);
	box-shadow				: 0 0 10px var(--Black);
	text-shadow				: 0 0 10px var(--Black);
}
HR {
	display					: block;
	box-sizing				: content-box;
	border					: 0;
	height					: 1px;
	background-color		: var(--Black);
	clear					: both;
}
blockquote P {
	margin-block-start		: 1em;
	margin					: 0 0 0 2em;
}
UL, OL {
	font-family				: 'OpenSans';
	padding-inline-start	: 20px;
}
/* ============================================ *
 * Blog styling
 * ============================================ */
DIV.blog-container {
	padding					: 5em 0 0 0;
	box-sizing				: border-box;
}
DIV.blog_toc {
	padding					: 70px 0;
	box-sizing				: border-box;
}
DIV.blog_toc H1 {
	color					: #e97676;
	text-align				: center;
}
DIV.blog_toc A {
	color					: #e97676;
	text-align				: center;
}
DIV.blog_post {
	
}
DIV.blog_post H3 {
	margin					: 2em 0 0 0;
}
.home-left {
	max-width				: 47%;
	margin					: 1em;
	float					: left;
}

.home-left:nth-child(2), .home-left:nth-child(3){
	max-width				: 23%;
	margin-right			: 1em;
	margin-left				: 0;
	float					: right;
}

DIV.slideshow {
	position				: Relative;
	box-sizing				: Border-Box;
	width					: 500px;
	max-width				: 100%;
	margin 					: auto;
	padding					: 0;
	text-align				: Center;
}

DIV.slideshow  * {
	margin 					: 0;
	padding					: 0;
	box-sizing				: Border-Box;
	display					: Block;
	transition				: all 500ms ease;
}

DIV.slideshow IMG {
	border 					: none;
	width					: 500px;
	max-width				: 100%;
	float					: None;
	clear					: None;
	transition				: all 500ms ease;
}

DIV.slideshow P {
	position				: Absolute;
	top						: 0;
	bottom					: 0;
	width					: 48px;
	max-width				: 10%;
	background				: Transparent;
	background-repeat		: No-repeat;
	display					: None;
	transition				: all 500ms ease;
}

DIV.slideshow P#button-previous {
	left					: 0;
	background-image		: url('images/Slideshow_arrow_left.png');
	background-position		: Center Center;
	border-radius			: 0.5em;
}

DIV.slideshow P#button-next {
	right					: 0;
	background-image		: url('images/Slideshow_arrow_right.png');
	background-position		: Center Center;
	border-radius			: 0.5em;
}

DIV.slideshow:hover P {
	display					: Block;
	transition				: all 500ms ease;
}

/* ============================================ *
 * Footer styling
 * ============================================ */
DIV.footer {
	order					: 4;
	display					: flex;
	flex-flow				: wrap;
	flex-basis				: 100%;
	flex-shrink				: 0;
	flex-grow				: 1;
	clear					: both;
	background-image		: url(images/stars.svg);
	background-color		: var(--Black);
	padding					: 0 0 1.5em 0;
	overflow				: visible;
	min-height				: 10em;
	box-shadow				: 0 0 10px rgb(0, 0, 0);
}
DIV.footer * {
	font-family				: 'OpenSans';
	font-size				: Medium;
	font-weight				: Normal;
	padding					: 0;
	text-align				: left;
}
DIV.footer SPAN {
	color					: White;
}
DIV.widget_tpw_rating_wrap {

}
DIV.footer IMG {
	max-width				: 60px;
	border-radius			: 30px;
}

DIV.footer IMG.lazyloaded {
	height					: auto;
	max-width				: 100%;
	border					: none;
	border-radius			: 0;
	box-shadow				: none;
}
DIV.footer P {
	color					: var(--White2);
	font-weight				: normal;
	line-height				: 24px;
	margin					: 0.5em 0;
}
DIV.footer P.copyright {
	position				: absolute;
	bottom					: 0;
	font-size				: 80%;
	left					: 45%;
	margin					: auto;
	/* width					: 100%; */
}
DIV.footer DIV.category {
	float					: Left;
	flex-direction			: column;
	box-sizing				: Border-Box;
	padding					: 0.25em 0 0 5em;
	margin					: 0;
	display					: flex;
	min-width				: 30%;
	max-width				: 31%;
}
DIV.footer DIV.category H2 {
	font-size				: x-large;
	font-style				: oblique;
	font-weight				: bold;
	text-shadow				: 0 0 27px var(--White2);
	color					: var(--White2);
}
DIV.footer DIV.category H4 {
	font-size				: x-large;
	color					: var(--White2);
	margin-bottom			: 0;
	text-shadow				: 0 0 10px var(--White-Grey1);
	line-height				: 28px;
	margin-block-start		: 0;
	margin-block-end		: 0;
}
DIV.footer DIV.category UL {
	padding					: 0;
	margin					: 0;
	list-style-type			: None;
}
DIV.footer DIV.category LI {
	display					: Block;
	list-style-type			: None;
}
DIV.footer DIV.category LI.separator {
	height					: 1em;
}
DIV.footer DIV.category LI.separator  HR{
	display					: None;
}
DIV.footer DIV.category LI A, DIV.footer DIV.category P A {
	text-decoration			: None;
	color					: var(--White2);
	transition				: all 600ms ease;
	margin					: 0;
}
DIV.footer DIV.category LI A{
	text-transform			: uppercase;
}
DIV.footer DIV.category LI A:hover, DIV.footer DIV.category P A:hover{
	text-decoration			: None;
	color					: var(--White2);
	text-shadow				: 0 0 10px var(--White-Grey1);
	transition				: all 600ms ease;
}
DIV.footer DIV.category P.newsection {
	margin-top				: 0.5em;
}
DIV.footer DIV.referers {
	position				: absolute;
	border					: 0;
	bottom					: 0;
	right					: 1em;
}
DIV.footer DIV.referers SPAN.separator {
	display					: None;
}
DIV.footer DIV.referers A {
	position				: relative;
	display					: Block;
	float					: left;
	padding					: 3px;
	z-index					: 100;
}
DIV.footer DIV.referers A:nth-child(3) {
	margin-left				: 8px;
}
DIV.footer DIV.referers A:nth-child(5) {
	margin-left				: 24px;
}
DIV.footer DIV.referers IMG {
	display					: Block;
	width					: 48px;
	height					: 48px;
	clear					: Both;
	border-radius			: inherit;
}
DIV.footer-content {
	display					: flex;
	flex-direction			: column;
}
DIV.footer  .bubble {
	color					: var(--Dark-Grey);
}
DIV.footer  A .bubble:hover{
	color					: var(--Dark-Grey);
	text-shadow				: 0 0 4px var(--Dark-Grey);
}
DIV.footer-buttons {
	clear					: Both;
	float					: right;
	padding					: 0;
}
PRE {
	color					: Black;
	font-family				: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;
	font-size				: 1.5em;
	font-weight				: bold;
	width					: auto;
	overflow-x				: auto;
	white-space				: nowrap;
	background				: #444444;
	border-radius			: 0.5em;
	white-space				: pre-wrap;
	padding					: 0.5em 0.75em;
	margin					: 1em 0;
	overflow				: visible;
	overflow-x				: visible;
	clear					: both;
}

/* ============================================ *
 * Uitklaphack
 * ============================================ */


.training-control, .soorten-control, .helpen-control, .werkt-control {
	max-height			: 0em !important;
	overflow			: hidden;
	transition			: all 1000ms ease;
}
#training:checked ~ .training-control {
	max-height			: 40em !important;
	overflow			: hidden;
	transition			: all 1000ms ease;
}
#soorten:checked ~ .soorten-control {
	max-height			: 55em !important;
	overflow			: hidden;
	transition			: all 1000ms ease;
}
#helpen:checked ~ .helpen-control {
	height				: 33em;
	max-height			: 55em !important;
	overflow			: hidden;
	transition			: all 1000ms ease;
}
#werkt:checked ~ .werkt-control {
	max-height			: 40em !important;
	overflow			: hidden;
	transition			: all 1000ms ease;
}
label {
	align-content		: space-around;
	display				: flex;
}
input[type=checkbox]{
	opacity				: 0;
	height				: 0;
}

/* ============================================ *
 * Forms
 * ============================================ */
FORM {
	color				: var(--Black);
	margin				: 1em 0 1em 0;
	width				: 100%;
	box-sizing			: Border-box;
}
FORM P {
	margin				: 0em;
	padding				: 0em;
	clear				: Right;
}
FORM P+P {
	padding-top			: 1em;
}
FORM P.field {
}
FORM P.controls {
	text-align			: Right;
}
FORM P.controls  A{
	margin-right		: 1em;
}
FORM INPUT, BUTTON, TEXTAREA {
	font-family			: 'OpenSans';
	font-size			: Medium;
	background			: White;
	color				: var(--Black);
	border				: 1px solid var(--Medium-Grey);
	border-radius		: 0.25em;
	box-sizing			: Border-box;
	margin				: 0;
	padding				: 0.125em;
}
FORM INPUT , TEXTAREA {
	float				: Right;
	width				: 66%;
}
FORM TEXTAREA {
}
INPUT[readonly] {
	border-color		: red;
	background			: #d8e4e9;	
}
FORM BUTTON {
	display					: flex;
	flex-grow				: 0;
	flex-basis				: auto;
	margin					: 0.5em !important;
	  margin-left			: 0.5em !important;
	padding					: 0;
	color					: var(--Black);
	text-decoration			: None;
	background				: none;
	text-align				: center;
	min-width				: 8em;
}
FORM BUTTON.mail, FORM BUTTON.reset {
	display					: initial;
	flex-grow				: 0;
	flex-basis				: auto;
	margin					: auto !important;
	text-decoration			: None;
	background				: none;
	height					: auto;
	padding					: 8px 16px !important;
	background				: var(--Black);
	color					: white;
	border					: 2px solid var(--Black);
	border-radius			: 0;
	letter-spacing			: 0.05em;
	transition				: all 500ms ease;
}
FORM BUTTON:hover, FORM BUTTON.mail:hover, FORM BUTTON.reset:hover {
	background				: none;
	color					: var(--Dark-gold);
	border					: 2px solid var(--Black);
	box-shadow				: 0 0 10px var(--Black);
	text-shadow				: 0 0 10px var(--Black);
}
FORM.compactForm {
	background			: White;
	color				: var(--Black);
	border				: None;
	margin				: 0;
	padding				: 1em 0 0 1em;
}
FORM.compactForm P+P {
	padding-top			: 0.1em;
}
FORM.compactForm P.controls {
	text-align			: left;
}
FORM.compactForm P.controls  A{
	margin-right		: 1em;
}
FORM.compactForm INPUT, FORM.compactForm TEXTAREA {
	border-color		: orange;
	border-radius		: 0;
}
FORM.compactForm INPUT, FORM.compactForm TEXTAREA {
	width				: 80%;
}

PRE {
	color					: White;
	font-family				: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;
	font-size				: 16px;
	font-weight				: bold;
	width					: auto;
	overflow-x				: auto;
	white-space				: nowrap;
	background				: #415161;
	border-radius			: 0.5em;
	white-space				: pre-wrap;
	padding					: 0.5em 0.75em;
	margin					: 1em 0;
	overflow				: visible;
	overflow-x				: visible;
	display					: block;
	//display					: none;
	clear					: both;
}



/* ============================================ *
 * Screen MAX 975 wide
 * ============================================ */
@media only screen and (max-width: 975px) {
	FORM INPUT , TEXTAREA {
		float				: none;
		width				: 100%;
	}
}


/* ============================================ *
 * Screen MIN 1930 wide
 * ============================================ */
@media only screen and (min-width: 1930px) {
	DIV.navigation UL {
		flex-basis				: 33%;
		margin-top				: 3em;
	}
}

/* ============================================ *
 * Screen MIN 500 wide
 * ============================================ */
@media only screen and (min-width: 500px) {
	blockquote.slogan {
		margin					: 0;
		font-size				: 2.5em;
		padding-left			: 1em;
		padding-top				: 3em;
	}
}
/* ============================================ *
 * Screen MIN 1024 wide
 * ============================================ */
@media only screen and (min-width: 1024px) {
	blockquote.slogan {
		padding					: 0.7em 0 0.4em 0;
		font-size				: 3em;
	}
	P.intro {
		padding					: 1em 3em 4em 3em;
		text-align				: center;
	}
}
/* ============================================ *
 * Screen MIN 1440 wide
 * ============================================ */
@media only screen and (min-width: 1440px) {
	DIV.columns, DIV.content {
		padding					: 0 5%;
	}
	P.intro, P.quote, A.quote{
		padding					: 0 25%;
	}
	DIV.footer {
		min-height				: 10em;
	}
}
/* ============================================ *
 * Screen MAX 1250 wide
 * ============================================ */
@media only screen and (max-width: 1250px) {
	DIV.footer DIV.category {
		padding: 0.25em 0 0 2em;
	}
	DIV.footer DIV.category H2 {
		font-size: large;
	}
}

/* ============================================ *
 * Screen MAX 975 wide
 * ============================================ */
@media only screen and (max-width: 975px) {
	BODY {
		padding					: 0;
		margin					: 0;
		display					: Flex;
		flex-flow				: Column NoWrap;
	}
	BODY > * {
		flex-grow				: 0;
		flex-shrink				: 0;
		flex-basis				: Auto;
	}
	DIV.logo {
		margin					: 0;
	}
	DIV.logo a {
		justify-content			: center;
	}
	DIV.logo IMG.logo {
		padding					: 0;
		height					: 8vw;
	}
	DIV.navigation {
		position				: absolute;
		left					: 0;
		bottom					: Initial;
		color					: white;
		z-index					: 10;
		margin					: 0;
		width					: -webkit-fill-available;
	}
	DIV.navigation:before {
		content					: "☰";
		font-size				: 200%;
		font-weight				: Bold;
		font-style				: Normal;
		line-height				: 1.75em;
		color					: var(--Black);
		z-index					: 5;
		position				: absolute;
		left					: 0;
		top						: 0;
		min-width				: 5em;
	}
	DIV.navigation UL {
		display					: None;
		flex-direction			: row;
		z-index					: 10;
		background-color		: var(--White1);
		transition				: all 500ms ease;
		max-height				: max-content;
		box-shadow				: 0 0 15px var(--Black);
	}
	DIV.navigation:hover UL {
		display					: Flex;
		transition				: all 500ms ease;
	}
	DIV.navigation LI {
		flex-basis				: 95%;
		padding					: 0 0 1em 1em;
		background-color		: var(--White1);
	}
	DIV.navigation LI.currentpage A {
		font-weight				: Normal;
		border-bottom			: None;
		color					: var(--Black);
		text-shadow				: 0 0 4px var(--Black);
	}
	DIV.navigation LI.currentpage A:before {
		content					: "";
	}
	DIV.navigation LI.currentpage UL A:before, DIV.navigation LI:hover UL A:before {
		content					: "";
	}
	DIV.navigation UL UL {
		position				: Initial;
		border-right			: None;
	}
	P.intro , DIV.inleiding, DIV.main {
		padding					: 1em 0.5em 4em 0.5em;
		text-align				: center;
		width					: auto;
	}
	DIV.buttons {
		margin					: 0 0 2.5em 1em !important;
		justify-content			: center;
	}
	.grey-button {
		margin-right			: 0.5em;
	}
	DIV.color-box {
		padding					: 1em 0.5em 4em 0.5em;
	}
	DIV.color-box UL {
		padding-left			: 30px;
	}
	blockquote.slogan {
		font-size				: 2em;
		padding					: 0.5em 0.25em 0.25em 0.25em;
	}
	blockquote#review {
		max-width				: 100%;
		font-size				: 2.5em;
	}
	H2 {
		clear					: both;
	}
	DIV.left {
		float					: none;
		box-sizing				: border-box;
		padding					: 0;
		margin					: auto;
		width					: 250px;
	}
	DIV.right {
		max-width				: 50%;
		padding					: 10px;
	}
	DIV.column, DIV.content {
		margin					: 0 auto 0 auto;
	}
	DIV.column IMG{
		float					: initial;
		padding					: 0;
		margin					: 0;
		width					: 90%;
	}
	DIV.footer {
		min-height: 20em;
	}
	DIV.footer * {
		margin					: auto;
		text-align				: center;
	}
	DIV.footer-content {
		padding					: 0;
		width					: 96%;
		flex-direction			: column;
	}
	DIV.footer-buttons {
		margin					: auto;
		padding					: 0;
	}
	DIV.footer DIV.referers {
		bottom					: 0;
	}
	DIV.footer P {
		margin					: 0 0 2em 0;
		text-align				: center;
	}
	DIV.footer DIV.category {
		padding					: 0;
		margin					: auto;
		flex-flow				: column;
		min-width				: 96%;
	}
}
/* ============================================ *
 * Screen MAX 700 wide
 * ============================================ */
@media only screen and (max-width: 700px) {
	DIV.navigation:before {
		top						: 0.25em;
		line-height				: 2.5em;
	}
	blockquote.slogan {
		font-size				: 2em;
		padding					: 0.1em;
	}
	P.intro, DIV.inleiding, DIV.main{
		padding: 1em 0 0.5em 0;
	}
	DIV.logo IMG.logo {
		min-height				: 19vw;
	}
	DIV.columns {
		padding					: 0;
	}
	DIV.columns > .column, DIV.content {
		flex-basis				: initial;
		min-width				: 90%;
		padding					: 0 5%;
	}
	DIV.column {
		flex-basis				: initial;
		min-width				: 100%;
	}
	DIV.column IMG.partners {
		display					: block;
		float					: none;
		margin					: auto;
		width					: 225px;
	}
	blockquote#review {
		font-size				: 1.5em;
		margin					: 0 0 1em 0;
	}
	H1.subject {
		font-size: 20px;
	}
	DIV.footer {
		min-height				: 30em;
	}
	DIV.footer-content {
		flex-direction			: column;
	}
	DIV.footer DIV.category P {
		text-align				: center;
	}
	DIV.footer DIV.category P A {
		float					: inherit;
	}
	DIV.footer P.copyright {
		position				: relative;
		bottom					: 0;
		font-size				: 12px;
		margin					: auto;
		left					: inherit;
	}
}

P.info, P.ok, P.warning, P.error {
	border				: 1px solid var(--Medium-Grey);
	border-radius		: 0.25em;
	padding				: 1em;
	background-repeat	: No-repeat;
	background-position	: Left Center;
	box-sizing			: Border-box;
	min-height			: 16px;
	overflow			: Hidden;
	margin-bottom		: 0.5em;
}
P.error{
	background			: #ff898f;
}
DIV.dark:hover {
	box-shadow			: 0 0 15px var(--Black);
}