:root{
		
		--white: 				#eaeef7;
		--white-60: 			#FFFFFF60;
		
		--grey-bg: 				#27292c;
		--grey-shade: 			#111111;
		--grey-dark: 			#1b1f1f;
		--grey: 				#444444;
		--grey-20: 				#44444420;
		--grey-40: 				#44444440; 
		--grey-60: 				#44444460;
		--grey-80: 				#44444480;

		--base: 				#444444;
		--base-dark: 			#020101;
		--accent1: 				rgb(255, 234, 208);
		--accent2: 				rgb(255, 234, 208);
		--bisque: 				rgb(248, 236, 175);
		--alert: 				#e17878;

		--border-color: 		#42464b;

		--spacer1: 				8px;
		--spacer2: 				16px;
		--spacer3: 				24px;
		--spacer4: 				32px;
		--spacer5: 				64px;
		--spacer6: 				128px;
		--spacer7: 				188px;
	}


	.font-thin{					font-family: 'Rubik', sans-serif; font-weight: 200; }
	.font-light{				font-family: 'Rubik', sans-serif; font-weight: 300; }
	.font-regular{				font-family: 'Rubik', sans-serif; font-weight: 400; }
	.font-medium{				font-family: 'Rubik', sans-serif; font-weight: 500; }
	.font-bold{					font-family: 'Rubik', sans-serif; font-weight: 600; }
	.font-extrabold{			font-family: 'Rubik', sans-serif; font-weight: 700; }
	.font-black{				font-family: 'Rubik', sans-serif; font-weight: 800; }
	.font-extrablack{			font-family: 'Rubik', sans-serif; font-weight: 900; }

	.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); }

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

	.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); }

	.accent,
    .accent-light,
    .accent-thin{
        color: var(--accent1);
    }
    .accent-light{
        font-family: 'Rubik', sans-serif;
		font-weight: 200;
    }
    .accent-thin{
        font-family: 'Rubik', sans-serif;
		font-weight: 200;
    }

    .dim{
        opacity: 0.7;
    }
	
	.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-x-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;  }

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




/*	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);		
		text-decoration:			none; 
		text-decoration-skip-ink: 	all; 
	}

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

	
	a.underlined-on-hover:link,
	a.underlined-on-hover:active,
	a.underlined-on-hover:visited{ 					
		color: 					var(--base);		
		text-decoration:		none; 
		padding-bottom:  		3px; 
		border-bottom:			2px solid var(--base);
	}
	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(--base);		
		text-decoration:		none; 
		padding-bottom:  		3px; 
		border-bottom:			2px solid var(--base);
	}

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

	


/*	forms  						
*/
  
	.input{ 					
		color: 					var(--base);
        font-family: 			'Rubik', sans-serif;
		font-weight: 			400;
		font-size: 				var(--font-l);
		border: 				1px solid var(--border-color);
		background-color: 		var(--white);
		outline:   				none !important;
	}
	
	.number-input{ 					
		text-align: 			center;
		color: 					var(--base);
        font-family: 			'Rubik', sans-serif;
		font-weight: 			400;
		font-size: 				var(--font-xl);
		border: 				0px ;
		background-color: 		var(--white);
		outline:   				none !important;
		width: 					40px;
	}
	
	.search-input,
	.search-input-center,
	.search-input-color{ 				
        font-family: 			'Rubik', sans-serif;
		font-weight: 			400;
		background-color:     	var(--white);
		text-align: 			left;
		font-size: 				var(--font-l);
		color: 					var(--off-white);
		outline: 				none ! important;		
		border: 				0px;
		width:  				100%;
	}

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


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

	.reveal-y{
		position:                   relative;
		transform:                  translateY(86px);
		opacity:                    0;
		transition:                 820ms all ease;
	}

	.reveal-y.visible{
		transform:                  translateY(0);
		opacity:                    1;
	}