	@font-face {
		font-family: 'NeueHaasGroteskText Regular';
		src: 	url('/Public/Assets/fonts/NHaasGroteskTXPro-55Rg.woff2') format('woff2'),
				url('/Public/Assets/fonts/NHaasGroteskTXPro-55Rg.woff') format('woff');
		font-weight: normal;
		font-style: normal;
		font-display: swap;
	}

	@font-face {
		font-family: 'NeueHaasGroteskText Medium';
		src: 	url('/Public/Assets/fonts/HaasGroteskTXPro-65Md.woff2') format('woff2'),
				url('/Public/Assets/fonts/NHaasGroteskTXPro-65Md.woff') format('woff');
		font-weight: 500;
		font-style: normal;
		font-display: swap;
	}

	@font-face {
		font-family: 'NeueHaasGroteskText Bold';
		src: 	url('/Public/Assets/fonts/NHaasGroteskTXPro-75Bd.woff2') format('woff2'),
				url('/Public/Assets/fonts/NHaasGroteskTXPro-75Bd.woff') format('woff');
		font-weight: bold;
		font-style: normal;
		font-display: swap;
	}

	@font-face {
		font-family: 'DunbarTall Light';
		src: 	url('/Public/Assets/fonts/DunbarTall-Light.woff2') format('woff2'),
				url('/Public/Assets/fonts/DunbarTall-Light.woff') format('woff');
		font-weight: normal;
		font-style: normal;
		font-display: swap;
	}

	@font-face {
		font-family: 'DunbarTall Medium';
		src: 	url('/Public/Assets/fonts/DunbarTall-Medium.woff2') format('woff2'),
				url('/Public/Assets/fonts/DunbarTall-Medium.woff') format('woff');
		font-weight: normal;
		font-style: normal;
		font-display: swap;
	}

	@font-face {
		font-family: 'DunbarTall Bold';
		src: 	url('/Public/Assets/fonts/DunbarTall-Bold.woff2') format('woff2'),
				url('/Public/Assets/fonts/DunbarTall-Bold.woff') format('woff');
		font-weight: normal;
		font-style: normal;
		font-display: swap;
	}



	:root{

		--font-neue-regular: 			'NeueHaasGroteskText Regular', sans-serif; 
		--font-neue-medium: 			'NeueHaasGroteskText Medium', sans-serif; 
		--font-neue-bold: 				'NeueHaasGroteskText Bold', sans-serif; 
		--font-dunbar-light: 			'DunbarTall Light', sans-serif; 
		--font-dunbar-medium: 			'DunbarTall Medium', sans-serif; 
		--font-dunbar-bold: 			'DunbarTall Bold', sans-serif; 
		
		--white: 				#FFF;
		--off-white: 			#FFFCF8;
		--grey-soft: 			#e4e4e4;
		--grey-regular: 		#494949;
		--base: 				#1d1d1b;
		--orange: 				#eb8f47;
		
		--border-color:			#eaeaea;
		
		--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;	
		
		--z-overlay: 			100;
		--z-menu: 				99;
		--z-contrast: 			98;

		--contrast-opacity: 	0.21;
		--darken-opacity: 		0.79;
	}



	body{ 
		padding:				0px;
		margin:					0px;
		color: 					var(--base-color); 
		font-family: 			var(--font-neue-regular);
		font-size: 				var(--font-n);
		font-weight: 			var(--font-medium);	
		background-color: 		var(--white);
	}

	
	.font-neue-regular{ 		font-family: var(--font-neue-regular);  }
	.font-neue-medium{ 			font-family: var(--font-neue-medium);  }
	.font-neue-bold{ 			font-family: var(--font-neue-bold);  }
	
	.font-dunbar-light{ 		font-family: var(--font-dunbar-light);  }
	.font-dunbar-medium{ 		font-family: var(--font-dunbar-medium);  }
	.font-dunbar-bold{ 			font-family: var(--font-dunbar-bold);  }

	.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-shadow{ 				text-shadow: 2px 2px 6px rgba(0,0,0,0.31); }
	.underlined-wavy{   		text-decoration-line: underline;
								text-decoration-style: wavy;
								text-decoration-skip-ink: all;  }


	.color-white{ 				color: var(--white); }
	.color-base { 				color: var(--base-color); }
	.color-orange{ 				color: var(--orange); }

	.bg-white{ 					background-color: var(--white); }
	.bg-base { 					background-color: var(--base-color); }

	.bg-dev1,.bg-dev{ 			background-color: aqua; }
	.bg-dev2{ 					background-color: lime; }
	.bg-dev3{ 					background-color: indianred; }
	
	.border-grey-soft{ 			border: 1px solid var(--grey-soft); }


	
	.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; }
	.dot-separator{				height: 26px; }
	.profile-img,
	.profile-img-small,
	.profile-img-large{ 		background-color: var(--light-grey);
								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: 148px; width: 148px;  }

	.border{ 					border: 1px solid var(--border-color); }
	.border-top{ 				border-top: 1px solid var(--border-color); }
	.border-right{ 				border-right: 1px solid var(--border-color); }
	.border-left{ 				border-left: 1px solid var(--border-color); }
	.border-bottom{ 			border-bottom: 1px solid var(--border-color); }

	

	.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(--base-color);
		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(--base-color); }
	
	.darken-layer-hidden{  					
		opacity: 					0;
    	transition:                	opacity 420ms;  
        background-color:      		var(--base-color); }

	.bg-hover-white{
		background-color: 			transparant;
	}
	.bg-hover-white:hover{
		background-color: 			#FFF; 
	}
	.bg-hover-soft-pink{
		background-color:			transparant;
	}
	.bg-hover-soft-pink:hover{
		background-color: 			var(--soft-pink);
	}
	.border-hover{
		background-color:			transparant;
		border:						1px solid #FFF;
	}
	.border-hover:hover{
		border:						1px solid var(--border-color);
	}
	.border-hover-orange{
		background-color:			transparant;
		border:						1px solid var(--soft-pink);
	}
	.border-hover-orange:hover{
		background-color:			transparant;
		border:						1px solid var(--orange);
	}




/*	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-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);
	}
	



/*	hyperlinks  		
*/
	a:link,
	a:active,
	a:visited,
	a:hover{ 					
		color: 						var(--base-color);		
		text-decoration:			none; 
		text-decoration-skip-ink: 	all; 
	}

	a.orange-underlined:link,
	a.orange-underlined:active,
	a.orange-underlined:visited,
	a.orange-underlined:hover{
		color: 						var(--orange);		
		text-decoration:			underline; 
		text-decoration-skip-ink: 	all; 
	}
	
	a.orange:link,
	a.orange:active,
	a.orange:visited,
	a.orange:hover{ 					
		color: 						var(--orange);		
		text-decoration:			none; 
		text-decoration-skip-ink: 	all; 
	}
	
	a.pink:link,
	a.pink:active,
	a.pink:visited,
	a.pink:hover{ 					
		color: 						var(--pink);		
		text-decoration:			none; 
		text-decoration-skip-ink: 	all; 
	}

	a.underlined:link,
	a.underlined:active,
	a.underlined:visited,
	a.underlined:hover{ 
		color: 					var(--orange);		
		text-decoration:		none; 
		padding-bottom:  		0px; 
		border-bottom:			2px solid var(--orange);
	}
	
	a.underlined-white:link,
	a.underlined-white:active,
	a.underlined-white:visited,
	a.underlined-white:hover{ 
		color: 					var(--white);		
		text-decoration:		none; 
		padding-bottom:  		0px; 
		border-bottom:			3px solid var(--white);
	}

	a.underlined-light:link,
	a.underlined-light:active,
	a.underlined-light:visited,
	a.underlined-light:hover{ 					
		color: 					var(--orange);		
		text-decoration:		underline; 
		padding-bottom:  		0px; 
		border-bottom:			0px solid var(--orange);
	}
	
	a.orange-bold-pink-underlined:link,
	a.orange-bold-pink-underlined:active,
	a.orange-bold-pink-underlined:visited,
	a.orange-bold-pink-underlined:hover,
	a.orange-bold-pink-underlined-active:link,
	a.orange-bold-pink-underlined-active:active,
	a.orange-bold-pink-underlined-active:visited,
	a.orange-bold-pink-underlined-active:hover{ 					
		color: 					var(--orange);		
		text-decoration:		none; 
		padding-bottom:  		18px; 
		border-bottom:			4px solid transparent;
	}
	a.orange-bold-pink-underlined:hover,
	a.orange-bold-pink-underlined-active:link,
	a.orange-bold-pink-underlined-active:active,
	a.orange-bold-pink-underlined-active:visited,
	a.orange-bold-pink-underlined-active:hover{ 					
		color: 					var(--orange);		
		text-decoration:		none; 
		padding-bottom:  		18px; 
		border-bottom:			4px solid var(--orange);
	}
	

	a.underlined-on-hover:link,
	a.underlined-on-hover:active,
	a.underlined-on-hover:visited{ 					
		color: 					var(--orange);		
		text-decoration:		none; 
		padding-bottom:  		3px; 
		border-bottom:			2px solid var(--soft-pink);
	}
	a.underlined-on-hover:hover,
	a.underlined-on-hover-active:link,
	a.underlined-on-hover-active:active,
	a.underlined-on-hover-active:visited,
	a.underlined-on-hover-active:hover{ 					
		color: 					var(--orange);		
		text-decoration:		none; 
		padding-bottom:  		3px; 
		border-bottom:			2px solid var(--orange);
	}

	
	a.white:link,
	a.white:active,
	a.white:visited,
	a.white:hover{ 					
		color: 					var(--white);		
		text-decoration:		none; 
	}
	a.white:hover{ 					
		text-decoration:		underline; 
	}

	.bg-pink-on-hover:link,
	.bg-pink-on-hover:active,
	.bg-pink-on-hover:visited{ 					
		background-color:    	var(--soft-pink);	
		color:					var(--orange);
		transition:           	background-color 810ms;  
	}
	.bg-pink-on-hover:hover{ 				
		background-color:    	var(--pink);	
		transition:           	background-color 810ms;  
	}
	
	
	.bg-soft-pink-on-hover:link,
	.bg-soft-pink-on-hover:active,
	.bg-soft-pink-on-hover:visited{ 					
		background-color:    	transparent;	
		transition:           	background-color 210ms;  
	}
	.bg-soft-pink-on-hover:hover{ 				
		background-color:    	var(--soft-pink);	
		transition:           	background-color 210ms;  
	}

	.bg-dim-orange-on-hover:link,
	.bg-dim-orange-on-hover:active,
	.bg-dim-orange-on-hover:visited{ 					
		background-color:    	transparent;	
		transition:           	background-color 210ms;  
	}
	.bg-dim-orange-on-hover:hover{ 				
		background-color:    	var(--dim-orange);	
		transition:           	background-color 210ms;  
	}

	a.button-orange:link,
	a.button-orange:active,
	a.button-orange:visited,
	a.button-orange:hover{ 					
		background-color: 		var(--orange);		
		color: 					var(--white);
		text-decoration:		none; 
		padding:  				var(--spacer2) var(--spacer5) var(--spacer3) var(--spacer5);
		-webkit-border-radius: 	var(--border-radus-2); 
		-moz-border-radius: 	var(--border-radus-2); 
		border-radius: 			var(--border-radus-2);
	}




/*	forms  						
*/
  
	.input{ 					
		color: 					var(--base-color);
		font-family: 			var(--font-neue-medium);
		font-size: 				var(--font-l);
		font-weight:    		var(--font-bold);
		border: 				1px solid var(--border-color);
		background-color: 		var(--white);
		outline:   				none !important;
	}
	
	.number-input{ 					
		text-align: 			center;
		color: 					var(--orange);
		font-family: 			var(--font-neue-medium);
		font-size: 				var(--font-xl);
		font-weight:    		var(--font-bold);
		border: 				0px ;
		background-color: 		var(--soft-pink);
		outline:   				none !important;
		width: 					40px;
	}
	
	.search-input,
	.search-input-center,
	.search-input-color{ 				
		font-family: 			var(--font-neue-medium);
		font-weight: 			var(--font-semibold);
		background-color:     	var(--orange);
		text-align: 			left;
		font-size: 				var(--font-l);
		color: 					var(--off-white);
		outline: 				none ! important;		
		border: 				0px;
		width:  				100%;
	}
	input.search-input::placeholder{  
		color: 				var(--off-white);
	}

	.search-input-center{ 				
		text-align: 			center;
	}

	.search-input-color{ 			
		background-color:  		var(--soft-pink);
		font-weight: 			var(--font-bold);	
		color: 					var(--orange);
		text-align: 			left;
		padding: 				var(--spacer3);
		border-bottom:      	2px solid var(--orange);
		font-size: 				var(--font-xxxl);
		width: 					100%;
	}
	input.search-input-color::placeholder{  
		  color: 				var(--dim-orange);
	}

	input[type="text"][disabled]{
		color: 					var(--base-color);
	}

	.inputframe-incomplete{
		color:  				var(--dark-grey);
		border-radius: 			var(--border-radus-2);
		padding: 				var(--spacer4);
		background-color:  		var(--white);
		border:   				1px solid var(--border-inactive);
		-webkit-box-shadow: 	0px 0px 6px 0px rgba(0,0,0,0.02); 
		-moz-box-shadow: 		0px 0px 6px 0px rgba(0,0,0,0.02); 
		box-shadow: 			0px 0px 6px 0px rgba(0,0,0,0.02);  }	
	
	.inputframe-complete{
		border-radius: 			var(--border-radus-2);
		padding: 				var(--spacer4);
		background-color: 		var(--white);
		border:   				1px solid var(--border-active);
		-webkit-box-shadow: 	0px 0px 4px 0px rgba(0,0,0,0.12); 
		-moz-box-shadow: 		0px 0px 4px 0px rgba(0,0,0,0.12); 
		box-shadow: 			0px 0px 4px 0px rgba(0,0,0,0.12);  }	


	.sticky{						position: -webkit-sticky; 
		position: sticky;
		top: 0px; }
	
	
