:root{

		--font-proxima-nova: 		'proxima-nova', sans-serif;
		--font-handwriting: 		'adobe-handwriting-ernie', sans-serif;  
		--font-frank: 				'adobe-handwriting-frank', sans-serif;  
		--font-chalky: 				'chalky', sans-serif;
		
		--color-white: 				#FFF;
		--color-base: 				#2c2a2b;
		--color-dim: 				#7e7e7e;

		--color-cognac: 			#a75d30;
		--color-cognac-dim: 		#cda28e;
		--color-grass: 				#6b824d;
		--color-gray:				#6c6a6b;
		--color-taupe:  			#cda38d;

		--bg-white: 				#FFF;
		--bg-base: 					#181818;
		--bg-cognac: 				#a75d30;
		--bg-cognac-dim: 			#cda28e;
		--bg-grass: 				#6b824d;
		--bg-gray: 					#6c6a6b;
		--bg-taupe: 				#cda38d;

		--bg-dev1: 					aqua;
		--bg-dev2: 					lime;
		--bg-dev3: 					indigo;
		
		--border-color:				#181818;
		
		--font-light: 				300;
		--font-regular: 			400;
		--font-medium: 				500;
		--font-semibold: 			600;
		--font-bold: 				700;

		--border-radus-1: 			4px;	
		--border-radus-2: 			8px;	
		--border-radus-3: 			16px;	
		--border-radus-4: 			24px;	
		
		--zi-overlay: 				100;
		--zi-contrast: 				98;
		--zi-menu: 					99;

		--opacity-light: 			0.20;
		--opacity-heavy: 			0.70;

		--spinner-color: 			#111;
		--spinner-color-highlight: 	aqua;
	}


	body{ 
		padding:				0px;
		margin:					0px;
		color: 					var(--color-base); 
		font-family: 			var(--font-proxima-nova);
		font-size: 				var(--font-n);
		font-weight: 			var(--font-regular);	
		background-color: 		var(--bg-white);
		overflow-x: 			hidden; 
	}

	.menu-height{ 				height: var(--menu-height); }
	.padding-menu-height{ 		padding-top: var(--menu-height); }

	.font-proxima-nova{ 		font-family: var(--font-proxima-nova);  }
	.font-handwriting{ 			font-family: var(--font-handwriting);  }
	.font-frank{ 				font-family: var(--font-frank);  }
	.font-chalky{ 				font-family: var(--font-chalky);  }

	.font-light{ 				font-weight: var(--font-light); }
	.font-regular{ 				font-weight: var(--font-regular); }
	.font-medium{ 				font-weight: var(--font-medium); }
	.font-semibold{ 			font-weight: var(--font-semibold); }
	.font-bold{ 				font-weight: var(--font-bold); }

	.font-xxs{ 					font-size: var(--font-xxs); 	line-height: var(--lineheight-xxs); 	letter-spacing: -0.012em; }	
	.font-xs{ 					font-size: var(--font-xs); 		line-height: var(--lineheight-xs); 		letter-spacing: -0.012em; }	
	.font-s{ 					font-size: var(--font-s); 		line-height: var(--lineheight-s); 		letter-spacing: -0.010em; }	
	.font-n{ 					font-size: var(--font-n); 		line-height: var(--lineheight-n); 		letter-spacing: -0.012em; }	
	.font-l{ 					font-size: var(--font-l); 		line-height: var(--lineheight-l); 		letter-spacing: -0.003em; }	
	.font-xl{ 					font-size: var(--font-xl); 		line-height: var(--lineheight-xl); 		letter-spacing: -0.010em; }	
	.font-xxl{ 					font-size: var(--font-xxl); 	line-height: var(--lineheight-xxl); 	letter-spacing: -0.012em; }	
	.font-xxxl{ 				font-size: var(--font-xxxl); 	line-height: var(--lineheight-xxxl); 	letter-spacing: -0.012em; }	
	.font-xxxxl{ 				font-size: var(--font-xxxxl); 	line-height: var(--lineheight-xxxxl); 	letter-spacing: -0.013em; }	
	.font-size-chalk{  			font-size: var(--font-size-chalk); 	line-height: var(--lineheight-chalk); 	letter-spacing: -0.012em;}

	.text-shadow{ 				text-shadow: 2px 2px 6px rgba(0,0,0,0.08); }

	.color-white{ 				color: var(--color-white); }
	.color-base { 				color: var(--color-base); }
	.color-cognac { 			color: var(--color-cognac); }
	.color-grass { 				color: var(--color-grass); }
	.color-gray { 				color: var(--color-gray); } 
	.color-taupe { 				color: var(--color-taupe); }

	.bg-white{ 					background-color: var(--bg-white); 
								transition: background-color 620ms; }

	.bg-white-opaque{ 			background-color: rgb(255 255 255 / 0.84); 
								transition: background-color 620ms; }
	.bg-dark-opaque{ 			background-color: rgba(39, 39, 39, 0.62); 
								transition: background-color 620ms; }
								
	.bg-base{					background-color: var(--bg-base); }
	.bg-base-gradient{
		background: 			rgb(35,35,38); 
		background: 			linear-gradient(0deg, rgba(35,35,38,0.7) 0%,  rgba(35,35,38,0.7) 60%, rgba(255,255,255,0) 100%);  }
	.bg-cognac{					background-color: var(--bg-cognac); }
	.bg-cognac-dim{				background-color: var(--bg-cognac-dim); }
	.bg-grass{					background-color: var(--bg-grass); }
	.bg-gray{					background-color: var(--bg-gray); }
	.bg-taupe{					background-color: var(--bg-taupe); }
	
	.bg-dev1{					background-color: var(--bg-dev1); }
	.bg-dev2{					background-color: var(--bg-dev2); }
	.bg-dev3{					background-color: var(--bg-dev3); }
	
	.border{ 					border: 1px solid var(--border-color); }
	.border-top{ 				border-top: 1px solid var(--border-color); }
	.border-left{ 				border-left: 1px solid var(--border-color); }
	.border-right{ 				border-right: 1px solid var(--border-color); }
	.border-bottom{ 			border-bottom: 1px solid var(--border-color); }

	.border-bottom-grass{  		border-bottom: 4px solid var(--bg-grass); }
	.border-bottom-cognac{  	border-bottom: 4px solid var(--bg-cognac); }

	.padding-1{					padding: var(--spacer1); }
	.padding-left-1{			padding-left: var(--spacer1); }
	.padding-right-1{			padding-right: var(--spacer1); }
	.padding-top-1{				padding-top: var(--spacer1); }
	.padding-bottom-1{			padding-bottom: var(--spacer1); }
	
	.padding-2{					padding: var(--spacer2); }
	.padding-left-2{			padding-left: var(--spacer2); }
	.padding-right-2{			padding-right: var(--spacer2); }
	.padding-top-2{				padding-top: var(--spacer2); }
	.padding-bottom-2{			padding-bottom: var(--spacer2); }
	
	.padding-3{					padding: var(--spacer3); }
	.padding-left-3{			padding-left: var(--spacer3); }
	.padding-right-3{			padding-right: var(--spacer3); }
	.padding-top-3{				padding-top: var(--spacer3); }
	.padding-bottom-3{			padding-bottom: var(--spacer3); }
	
	.padding-4{					padding: var(--spacer4); }
	.padding-left-4{			padding-left: var(--spacer4); }
	.padding-right-4{			padding-right: var(--spacer4); }
	.padding-top-4{				padding-top: var(--spacer4); }
	.padding-bottom-4{			padding-bottom: var(--spacer4); }
	
	.padding-5{					padding: var(--spacer5); }
	.padding-left-5{			padding-left: var(--spacer5); }
	.padding-right-5{			padding-right: var(--spacer5); }
	.padding-top-5{				padding-top: var(--spacer5); }
	.padding-bottom-5{			padding-bottom: var(--spacer5); }
	
	.padding-6{					padding: var(--spacer6); }
	.padding-left-6{			padding-left: var(--spacer6); }
	.padding-right-6{			padding-right: var(--spacer6); }
	.padding-top-6{				padding-top: var(--spacer6); }
	.padding-bottom-6{			padding-bottom: var(--spacer6); }

	.padding-7{					padding: var(--spacer7); }
	.padding-left-7{			padding-left: var(--spacer7); }
	.padding-right-7{			padding-right: var(--spacer7); }
	.padding-top-7{				padding-top: var(--spacer7); }
	.padding-bottom-7{			padding-bottom: var(--spacer7); }

	.social-media-icon{ 		height: 18px; }
	.paymentmethod-icon{ 		height: 22px; }
	.separator{					height: 26px; }

	.profile-img,
	.profile-img-small,
	.profile-img-large{ 		background-color: var(--color-white);
								border-radius: 50%; 
								background-size: cover; 
								background-repeat: no-repeat; 
								background-position: center; 
								display: inline-block; }
	.profile-img{ 				height: 44px; width: 44px;  }
	.profile-img-small{ 		height: 32px; width: 32px;  }
	.profile-img-large{ 		height: 92px; width: 92px;  }

	ul{
		margin-left:  			var(--spacer5);
		margin-top: 			var(--spacer2);
	}
	li{
		padding-left: 			var(--spacer2)
	}



	/*	interaction  		
	*/
	.x-to-close{ 					
		position: 				absolute; 
		top: 					var(--spacer3); 
		right: 					var(--spacer4);  }

	.contrast-layer, 
	.contrast-layer-visible, 
	.darken-layer{
		transform:					opacity 300ms;
		position: 					fixed;
		width:						100vw;
		height:						100vh;
		opacity: 					var(--contrast-opacity);
		background-color: 			var(--color-base);
		z-index: 					var(--z-contrast);
		display: 					hidden;  }

	.contrast-layer-visible{
		transform:					opacity 300ms;
		display: 					block;  }

	.darken-layer, 
	.darken-layer-hidden{  			
		opacity:              		var(--darken-opacity); 
		transition:              	opacity 420ms;  
		background-color: 			var(--color-base); }
	
	.darken-layer-hidden{  					
		opacity: 					0;
    	transition:                	opacity 420ms;  
        background-color:      		var(--color-base); }

	.bg-hover-white{
		background-color: 			transparant;
	}
	.bg-hover-white:hover{
		background-color: 			#FFF; 
	}



	/*	containers  					
	*/
	.box-rounded-1{ 					
		-webkit-border-radius: 					var(--border-radus-1); 
		-moz-border-radius: 					var(--border-radus-1); 
		border-radius: 							var(--border-radus-1);  }

	.box-rounded-2{ 					
		-webkit-border-radius: 					var(--border-radus-2); 
		-moz-border-radius: 					var(--border-radus-2); 
		border-radius: 							var(--border-radus-2);  }

	.box-rounded-3{ 					
		-webkit-border-radius: 					var(--border-radus-3); 
		-moz-border-radius: 					var(--border-radus-3); 
		border-radius: 							var(--border-radus-3);  }
	
	.box-rounded-4{ 					
		-webkit-border-radius: 					var(--border-radus-4); 
		-moz-border-radius: 					var(--border-radus-4); 
		border-radius: 							var(--border-radus-4);  }

	.box-rounded-tl{ 			
		-webkit-border-top-left-radius: 		var(--border-radus-2); 
		-moz-border-radius-topleft: 			var(--border-radus-2);
		border-top-left-radius: 				var(--border-radus-2);  }

	.box-rounded-tr{ 			
		-webkit-border-top-right-radius: 		var(--border-radus-2);
		-moz-border-radius-topright: 			var(--border-radus-2);
		border-top-right-radius: 				var(--border-radus-2);  }

	.box-rounded-bl{ 				
		-webkit-border-bottom-left-radius: 		var(--border-radus-2);
		-moz-border-radius-bottomleft: 			var(--border-radus-2);
		border-bottom-left-radius: 				var(--border-radus-2);  }

	.box-rounded-br{ 				
		-webkit-border-bottom-right-radius: 	var(--border-radus-2);
		-moz-border-radius-bottomright: 		var(--border-radus-2);
		border-bottom-right-radius: 			var(--border-radus-2);  }

	.shadow-box-bottom{ 			
		-webkit-box-shadow: 					0px 0px 3px 0px rgba(0,0,0,0.04); 
		-moz-box-shadow: 						0px 0px 3px 0px rgba(0,0,0,0.04); 
		box-shadow: 							0px 0px 3px 0px rgba(0,0,0,0.04);  }
	
	.shadow-box-menu{ 			
		-webkit-box-shadow: 					0px 0px 4px 0px rgba(0,0,0,0.15); 
		-moz-box-shadow: 						0px 0px 4px 0px rgba(0,0,0,0.15); 
		box-shadow: 							0px 0px 4px 0px rgba(0,0,0,0.15);  }

	.shadow-box-top{ 							
		-webkit-box-shadow: 					0px 0px 6px 0px rgba(56, 48, 43, 0.14); 
		-moz-box-shadow: 						0px 0px 6px 0px rgba(56, 48, 43, 0.14); 
		box-shadow: 							0px 0px 6px 0px rgba(56, 48, 43, 0.14);  }
	
	.shadow-box-light{ 							
		-webkit-box-shadow: 					0px 0px 26px 0px rgba(56, 48, 43, 0.06); 
		-moz-box-shadow: 						0px 0px 26px 0px rgba(56, 48, 43, 0.06); 
		box-shadow: 							0px 0px 26px 0px rgba(56, 48, 43, 0.06);  }
	
	.shadow-box{ 							
		-webkit-box-shadow: 					0px 0px 15px 0px rgba(56, 48, 43, 0.16); 
		-moz-box-shadow: 						0px 0px 15px 0px rgba(56, 48, 43, 0.16); 
		box-shadow: 							0px 0px 15px 0px rgba(56, 48, 43, 0.16);  }
	
	.shadow-box-wide{ 							
		-webkit-box-shadow: 0px 0px 50px 17px rgba(255,255,255,0.37); 
		box-shadow: 0px 0px 50px 17px rgba(255,255,255,0.37); }

	.shadow-box-soft{ 							
		-webkit-box-shadow: 					0px 0px 24px 0px rgba(0,0,0,0.23); 
		-moz-box-shadow: 						0px 0px 24px 0px rgba(0,0,0,0.23); 
		box-shadow: 							0px 0px 24px 0px rgba(0,0,0,0.23);  }	
	
	.shadow-box-soft-bottom{ 							
		box-shadow: 							0px 15px -31px rgba(0, 0, 0, 0.7)  ; 
		-webkit-box-shadow: 					0px 15px -31px rgba(0, 0, 0, 0.7)  ; 
		-moz-box-shadow: 						0px 15px -31px rgba(0, 0, 0, 0.7)  ;  }	

	.z-menu{									z-index: var(--z-menu);  }
	.z-overlay{									z-index: var(--z-overlay);  }
	.z-contrast{								z-index: var(--z-contrast);  }

	.vertical-scrolling-pane{
		overflow:                               auto;
		height:                                 calc(100vh - 60px);
	}



	/*	links  		
	*/
	a:link,
	a:active,
	a:visited,
	a:hover{ 					
		color: 						var(--color-base);		
		text-decoration:			none; 
		text-decoration-skip:	 	objects;
	}
	
	a.underlined:link,
	a.underlined:active,
	a.underlined:visited,
	a.underlined:hover{ 
		text-decoration:			underline; 
		color: 						var(--color-gray);		
		text-decoration-skip:	 	objects;
	}
	
	a.white:link,
	a.white:active,
	a.white:visited,
	a.white:hover{ 
		text-decoration:			none; 
		color: 						var(--color-white);		
	}
	
	a.round:link,
	a.round:active,
	a.round:visited,
	a.round:hover,
	a.round-actief:link,
	a.round-actief:active,
	a.round-actief:visited,
	a.round-actief:hover{ 
		display: 					flex; 
		justify-content: 			center; 
		align-items: 				center; 
		width: 						34px;
		height: 					34px;
		border-radius:				50%;
		background-color: 			var(--color-cognac);
		color: 						var(--color-white);
		font-weight: 				var(--font-regular);
		font-size: 					var(--font-xl);
		text-align: 				center;
		text-decoration:			none; 
		transition: 				all 220ms ease-out;
	}
	a.round:hover,
	a.round-actief:link,
	a.round-actief:active,
	a.round-actief:visited,
	a.round-actief:hover{ 
		font-weight: 				var(--font-bold);
		background-color: 			var(--color-cognac-dim);
		transition: 				all 220ms ease-out;
	}

	a.rounded:link,
	a.rounded:active,
	a.rounded:visited,
	a.rounded:hover{ 
		display: 					flex; 
		justify-content: 			center; 
		align-items: 				center; 
		border-radius:				1px;
		background-color: 			var(--color-base);
		color: 						var(--color-white);
		font-weight: 				var(--font-semibold);
		font-size: 					var(--font-xl);
		padding: 					var(--spacer1) var(--spacer3);
		text-align: 				center;
		text-decoration:			none; 
	}

	a.ghost:link,
	a.ghost:active,
	a.ghost:visited,
	a.ghost:hover,
	a.ghost-inline-grass:link,
	a.ghost-inline-grass:active,
	a.ghost-inline-grass:visited,
	a.ghost-inline-grass:hover,
	a.ghost-inline-cognac:link,
	a.ghost-inline-cognac:active,
	a.ghost-inline-cognac:visited,
	a.ghost-inline-cognac:hover,
	a.ghost-inline:link,
	a.ghost-inline:active,
	a.ghost-inline:visited,
	a.ghost-inline:hover{ 		
		padding: 					var(--spacer4) var(--spacer5);			
		color: 						var(--color-base);		
		border:    					3px solid var(--color-base);
		font-size: 					var(--font-xxl);
		font-weight: 				var(--font-bold);
		line-height: 				123%;
		display: 					block;
		width:  					100%;
		text-decoration:			none; 
		-webkit-box-shadow: 		0px 0px 15px 0px rgba(56, 48, 43, 0.08); 
		-moz-box-shadow: 			0px 0px 15px 0px rgba(56, 48, 43, 0.08); 
		box-shadow: 				0px 0px 15px 0px rgba(56, 48, 43, 0.08);
	}
	a.ghost:hover,	
	a.ghost-inline-grass:hover,	
	a.ghost-inline-cognac:hover,	
	a.ghost-inline:hover{ 		
		-webkit-box-shadow: 		0px 0px 15px 0px rgba(56, 48, 43, 0.24); 
		-moz-box-shadow: 			0px 0px 15px 0px rgba(56, 48, 43, 0.24); 
		box-shadow: 				0px 0px 15px 0px rgba(56, 48, 43, 0.24);
	}
	a.ghost-inline:link,
	a.ghost-inline:active,
	a.ghost-inline:visited,
	a.ghost-inline:hover,
	a.ghost-inline-grass:link,
	a.ghost-inline-grass:active,
	a.ghost-inline-grass:visited,
	a.ghost-inline-grass:hover,
	a.ghost-inline-cognac:link,
	a.ghost-inline-cognac:active,
	a.ghost-inline-cognac:visited,
	a.ghost-inline-cognac:hover{
		display: 					inline-block;
		width: 						auto;
	}

	a.ghost-inline-grass:link,
	a.ghost-inline-grass:active,
	a.ghost-inline-grass:visited,
	a.ghost-inline-grass:hover{
		border:    					3px solid var(--color-grass);
		color: 						var(--color-grass); }
	
	a.ghost-inline-cognac:link,
	a.ghost-inline-cognac:active,
	a.ghost-inline-cognac:visited,
	a.ghost-inline-cognac:hover{
		border:    					3px solid var(--color-cognac);
		color: 						var(--color-cognac); }

	a.underline-on-hover-cognac,
	a.underline-on-hover{
		display: inline-block;
		position: relative;
		padding: var(--spacer1) var(--spacer2) var(--spacer1) 0;
		overflow: hidden;
	}

	a.underline-on-hover-cognac::after,	
	a.underline-on-hover::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 2px;
		background-color: var(--color-base);
		opacity: 0;
		transition: opacity 240ms, transform 240ms;
	}
	
	a.underline-on-hover-cognac::after, 
	a.underline-on-hover::after{
		opacity: 1;
		transform: translate3d(-100%, 0, 0);
	}
	
	a.underline-on-hover-cognac:hover::after,
	a.underline-on-hover-cognac:focus::after,
	a.underline-on-hover:hover::after,
	a.underline-on-hover:focus::after{
		transform: translate3d(0, 0, 0);
	}

	a.underline-on-hover-cognac{
		color: var(--color-cognac);	
	}



	/*	forms  						
	*/
	.input{ 					
		color: 					var(--color-white);
		background-color: 		var(--bg-cognac-dim);
		font-family: 			var(--font-proxima-nova);
		font-size: 				var(--font-xl);
		font-weight:    		var(--font-semibold);
		padding: 				var(--spacer4);
		border: 				0px;
		outline:   				none !important;
	}
	
	input::placeholder,
	textarea::placeholder{  
		font-size: 				var(--font-l);
		color: 					var(--color-white);
	}

	.submit{ 					
		color: 					var(--color-cognac);
		font-family: 			var(--font-proxima-nova);
		font-size: 				var(--font-xl);
		font-weight:    		var(--font-semibold);
		padding: 				var(--spacer3) var(--spacer6);
		background-color: 		var(--color-white);
		border:  				3px solid var(--color-cognac);
		outline:   				none !important;
		text-transform: 		uppercase;
		letter-spacing: 		0.035ems;
		transition: 			background-color 240ms;
	}
	.submit:hover{ 					
		background-color: 		var(--color-cognac-dim);
		border:  				3px solid var(--color-cognac-dim);
		transition: 			background-color 240ms, border 840ms;
	}