:root { --wit: #F0F0F0;	}
.kleurcombi1:root { --klbg: #4F3F3B; --kltkst: #B8A99A; }
.kleurcombi2:root { --klbg: #72647A; --kltkst: #281C1E; }
.kleurcombi3:root { --klbg: #B5CC39; --kltkst: #E04951; }
.kleurcombi4:root { --klbg: #DBB7BB; --kltkst: #005F61; }
.kleurcombi5:root { --klbg: #A6192E; --kltkst: #E87722; }
.kleurcombi6:root { --klbg: #495E35; --kltkst: #ACC0D9; }
.kleurcombi7:root { --klbg: #B89D18; --kltkst: #583D3E; }
.kleurcombi8:root { --klbg: #00656B; --kltkst: #E2A829; }
	

/* NORMALIZES MARGIN & PADDING */
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td { 
	margin: 0; padding: 0; box-sizing: border-box; 
}
/* NORMALIZES FONT-SIZES HEADERS */
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: 500; }
/* REMOVES LIST-STYLES */
ol, ul { list-style: none; }
/* BOX MODEL 
*, *:before, *:after { box-sizing: inherit; } */


/* ALGEMENE REGELS */
.clear { clear: both; float: none; }
.dun { font-weight: 200; font-size: 0.6rem; text-transform: uppercase; color: #666; }



/* HTML, BODY & WRAPPER */
html, body {
	width: 100vw;
	min-height: 100vh; 
	color: #333; background: var(--wit);	
	font-family: "neue-haas-unica", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 14px;  /* 1rem = 14px; */
	-webkit-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
}

/* FONTS & KLEUREN */
h2 { font-family: "bimbo-pro-finetip", serif; font-size: 2rem; line-height: 1; font-weight: 300; padding-top: 2rem; }





/* BOVENBALK */
.bovenbalk { position: fixed; left: 0; width: 100vw; transition: left 300ms ease; z-index: 100; }
.opzij .bovenbalk { left: -24rem; }

/* KNOPPEN */
.menu { position: absolute; top: 2.3rem; right: 2.3rem; width: 6.5rem; color: var(--kltkst); text-decoration: none; }
.menu > div, .menu > a > div { position: absolute; width: 2.5rem; color: var(--kltkst); cursor: pointer;}
.menu div.navknop { visibility: hidden; opacity: 0; transition: 300ms linear; } 
.menu #navknop1 { left: 0rem; }
.menu #navknop2 { left: 0rem; }
.menu #navknop3 { left: 0rem; }
.menu #navknop4 { left: 0rem; }
.menu #menuknop { left: 0rem; }
.menu #kleurknop { left: 4rem; }
.menu.actief div.navknop { left: unset; visibility: visible; opacity: 1; }
.menu.actief #navknop1 { left: -16rem; }
.menu.actief #navknop2 { left: -12rem; }
.menu.actief #navknop3 { left: -8rem; }
.menu.actief #navknop4 { left: -4rem; }

.kruis { width: 2.5rem; height: 2.5rem; }
.kruis:before, .kruis:after { position: absolute; left: 1.25rem; content: ' '; height: 2.5rem; width: 1px; background: var(--kltkst); transition: transform 0.4s; }
.kruis:before { transform: rotate(0deg); }
.kruis:after { transform: rotate(-90deg); }
.menu.actief .kruis:before { transform: rotate(45deg); }
.menu.actief .kruis:after { transform: rotate(-45deg); }

.menu .bol { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--kltkst); }

.menu .cirkel { width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--kltkst); text-align: center; }
.menu .cirkel:hover { background: var(--kltkst); color: var(--klbg); }
.menu .cirkel span { font-family: "bimbo-pro-finetip", serif; font-size: 2rem; line-height: 1.8; font-weight: 300; }
.menu .alt { width: 4.5rem; margin-top: 0.5rem; margin-left: -1rem; text-align: center; font-weight: 200; font-size: 0.8rem; text-transform: uppercase; }

.meerinfouit { position: absolute; top: 2.3rem; right: 2.3rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--klbg); }
.meerinfouit .pijllijn { position: absolute; top: 1.25rem; left: 0; height: 1px; width: 2.2rem; background: #FFF; }
.meerinfouit .pijllijn:before { position: absolute; top: 0.85rem; left: 0.1rem; content: ' '; height: 1px; width: 2.5rem; background: #FFF; transform: rotate(-45deg); }
.meerinfouit .pijllijn:after { position: absolute; top: -0.9rem; left: 0.1rem; content: ' '; height: 1px; width: 2.5rem; background: #FFF; transform: rotate(45deg); }



/* INTRO */
.intro { position: fixed; width: 100vw; height: 100vh; background: var(--klbg); color: var(--kltkst); z-index: 5; }
.logo, .logovoet { position: absolute; padding: 1.5rem 2.5rem; max-width: 10rem; transition: margin 0.3s ease; }
.logo span, .logovoet span { display: block; height: 3rem; font-family: "flegrei", sans-serif; font-size: 3.4rem; }
.logo.opzij { margin-left: -50rem; }	

.payoff { position: absolute; width: 100vw; top: 50%; margin-top: -5rem; padding: 0 3rem; }
.payoff span { display: block; font-family: "bimbo-pro-finetip", serif; font-weight: 300; font-size: 9rem; line-height: 1; height: 6rem; }
.payoff span.float { float: left; }

/* CONTAINER MET ALLE PAGINA'S */
.container { position: relative; width: 100vw; min-height: 100vh; left: 0; text-align: left; z-index: 10; transition: left 300ms ease; }
.opzij .container { left: -24rem; }
.container > div { width: 100vw; min-height: 100vh; }
.pagina { position: relative; padding: 8.5rem 2.5rem 5rem; }
.paginatitel { position: absolute; right: 1rem; top: calc(50vh - 2.5rem); width: 5.5rem; height: 20rem; font-size: 3.4rem; text-align: center; color: var(--klbg); }
.paginatitel div { 
	position: absolute; top: calc(50% - 2.75em); left: calc(50% - 10.5rem); width: 20rem; height: 5.5rem; 
	-webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); 
	transform: rotate(90deg);
}
.paginatitel h1 { display: block; font-family: "flegrei", sans-serif; font-weight: 400; }

/* PAGINA WEBSITES & VOORRAAD */
#pagina-sites { background: #F9F9F9; }
#pagina-voorraad { background: #F0F0F0; }
#pagina-shops { background: #F0F0F0; }
.ul-sites { width: calc(100% - 5.5rem); }
.li-site { display: block; position: relative; width: 100%; border-top: 1px solid #666; padding: 0.8rem 0; cursor: pointer; }
.li-site.laatste { border-bottom: 1px solid #666; }
.li-jaar { position: absolute; }
.li-tags { position: absolute; left: 10rem; }
.li-titel { position: relative; height: 5.5rem; margin: 1rem 0 0.6rem; font-weight: 400; font-size: 3.4rem; }
.li-site:hover .li-titel { font-family: "bimbo-pro-finetip", serif; font-weight: 300; font-size: 3.7rem; }
.li-meerinfo { position: absolute; right: 0.2rem; top: 3.8rem; text-decoration: underline; z-index: 50; }
.li-thumb { display: none; position: absolute; top: 0; right: 6rem; width: 12rem; height: 100%; padding: 1rem 0; }
.li-site:hover .li-thumb { display: block; }
.li-thumb img { height: 100%; width: auto; }

/* MEER INFO WINDOW AAN DE ZIJKANT */
.meerinfo { position: fixed; top: 0; right: -24rem; width: 24rem; /*226px*/ height: 100vh; padding: 5rem 2rem 2rem; background: #FFF; transition: right 300ms ease; z-index: 120; }
.meerinfo.actief { right: 0; left: unset; }
.meerinfo h3 { text-transform: uppercase; }
.meerinfo p { padding-bottom: 0.8rem; }
.meerinfo a { color: #333; text-decoration: underline; }
.meerinfo a:hover { color: var(--kltkst); }

.credits { width: 100%; clear: both; float: none; }
.credits .creditkop { float: left; margin-top: 0.4rem; width: 2.8rem; font-size: 0.6rem; font-weight: 500; text-transform: uppercase; }
.credits .credittk { float: left; width: calc(100% - 2.8rem); }


/* VOETPAGINA */
.voet { position: relative; width: 100%; /*background: var(--klbg);*/ z-index: 1; }
.logovoet { color: var(--wit); }

.voettekst { position: absolute; margin: 11.5rem 2.5rem -11.5rem 2.5rem; color: var(--kltkst); background: var(--klbg); }
.voettekst a { color: var(--kltkt); }
.voettekst a:hover { color: #000; }







/* FONT EN HOOGTE TEKSTBLOKKEN KLEINER */
@media screen and (max-width: 940px) {
	.li-titel { height: 5.0rem; margin: 1rem 0 0.5rem; font-size: 3rem; }
	.li-site:hover .li-titel { font-size: 3.3rem; }
}


/* TITEL WEG VAN DE ZIJKANT */
@media screen and (max-width: 840px) {
	.paginatitel { position: relative; width: 100%; top: 0; left: 0; height: 3.4rem; margin-bottom: 1rem; }
	.paginatitel div { position: relative; width: 100%; height: 4rem; top: 0; left: 0; right: unset; text-align: right; 
		-webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); 
		transform: rotate(0);
	}
	.ul-sites { width: 100%; }
}

/* FONT EN HOOGTE TEKSTBLOKKEN WEER KLEINER & PAYOFF KLEINER & ZIJBALK SMALLER */
@media screen and (max-width: 700px) {
	.payoff { margin-top: -4.5rem; }
	.payoff span { font-size: 7rem; line-height: 1; height: 5rem; }
	
	.paginatitel { font-size: 3rem; height: 3rem; margin-bottom: 0.8rem; }
	
	.li-site { padding: 0.6rem 0; }
	.li-titel { height: 3.8rem; margin: 0.8rem 0 0.3rem; font-size: 2.4rem; }
	.li-site:hover .li-titel { font-size: 2.7rem; }
	.li-thumb { right: 5rem; width: 9rem; padding: 0.6rem 0; }
	.li-meerinfo { top: 2.8rem; }
	
	.meerinfo { right: -20rem; width: 20rem; /*280*/ } 
	.opzij .bovenbalk { left: -20rem; }
	.opzij .container { left: -20rem; }

	
}

/* MEER INFO WEG, LOGO WEGDUWEN */
@media screen and (max-width: 650px) {
	.logo.actief { margin-left: -50rem; }	
	/*.li-thumb { right: 0; width: 9.5rem; }*/
	.li-meerinfo { top: unset; }			
}

/* THUMB WEG */
@media screen and (max-width: 600px) {
	.li-site:hover .li-thumb { display: none; }
}

/* PAYOFF OVER 4 REGELS & ZIJBALK BREDER */
@media screen and (max-width: 540px) {
	.payoff { margin-top: -8.5rem; }
	.payoff span { display: block; height: 5rem; }
	.payoff span.float { float: none; }
	
	.paginatitel { font-size: 2.6rem; height: 2.6rem; margin-bottom: 0.7rem; }
	.li-tags { left: 5rem; }
	
	.meerinfo { right: calc(-100vw + 3.5rem); width: calc(100vw - 3.5rem); } 
	.opzij .bovenbalk { left: calc(-100vw + 3.5rem); }
	.opzij .container { left: calc(-100vw + 3.5rem); }
}

/* ZIJMARGE KLEINER */
@media screen and (max-width: 450px) {
	.menu { right: 1.8rem; }
	.logo, .logovoet { padding: 1.5rem 2rem; }	
	.payoff { padding: 0 2.5rem; }
	.pagina { padding: 7.5rem 2rem; }
	.voettekst { margin: 10.5rem 2rem -10.5rem 2rem; }
	
	.meerinfo { right: calc(-100vw + 3rem); width: calc(100vw - 3rem); } 
	.opzij .bovenbalk { left: calc(-100vw + 3rem); }
	.opzij .container { left: calc(-100vw + 3rem); }
}