html{ 						
		height: 						100%; 
		margin:							0px; 
		padding: 						0px; 
		scroll-behavior: 				smooth; 
		-webkit-font-smoothing:  		antialiased;
		text-rendering: 				optimizeLegibility; 
	}
		
	*{ 								
		box-sizing: 					border-box; 
		margin: 						0px;
		padding: 						0px; 
		-webkit-tap-highlight-color: 	#FFF; }

	.overflow-auto{ 					overflow: auto; }
	.overflow-visible{ 					overflow: visible; }
	.overflow-hidden{ 					overflow: hidden; }
	.overflow-x{ 						overflow-x: auto; white-space: nowrap; }
	.overflow-y{ 						overflow-y: auto; white-space: nowrap; }
	.center{  							margin: 0 auto; }
	.float-left{ 						float: left; }
	.float-right{ 						float: right; }
	.fixed{ 							position: fixed; }
	.fixed-top-left{ 			
		position: 						fixed; 	
		top: 							0px; 
		left: 							0px;
	}
	.inline-block{ 						display: inline-block; }
	.relative{ 							position: relative; }
	.absolute{ 							position: absolute; }
	.absolute-top-left{ 			
		position: 						absolute; 	
		top: 							0px; 
		left: 							0px;
	}
	.absolute-top-right { 			
		position: 						absolute; 	
		top: 							0px; 
		right: 							0px;
	}
	.absolute-bottom-left { 			
		position: 						absolute; 	
		bottom: 						0px; 
		left: 							0px;
	}
	.absolute-bottom-right { 			
		position: 						absolute; 	
		bottom: 						0px; 
		right: 							0px;
	}
	.position-bottom-left{ 			
		bottom: 						0px; 
		left: 							0px; 
	}
	.position-bottom-right{ 		
		bottom: 						0px; 
		right: 							0px; 
	}
	.position-top-left{ 			
		top: 							0px; 
		left: 							0px; 
	}
	.position-top-right{ 			
		top: 							0px; 
		right: 							0px; 
	}
	.bottom-hidden{ 				
		position: 						fixed; 
		left: 							0px; 
		bottom: 						-1000px; 
		transition: 					bottom 340ms; 
	}
	.bottom-visible{ 				
		position: 						fixed; 
		left: 0px; 						bottom: 0px; 
		transition: 					bottom 740ms; 
	}
	.bottom-floating-visible{ 		
		position: 						fixed; 
		left: 							0px; 
		bottom: 						1vh; 
		transition: 					bottom 740ms; 
	}

	.center-content{ 				
		display: 						flex; 
		justify-content: 				center; 
		align-items: 					center; 
	}

	.hidden{ 							display: none; }
	.oos{								display: none; }
	.visible{ 							display: block; }
	.nowrap{ 							white-space: nowrap; }
	.flex{ 								display: flex;  }
	.flex-1{ 							flex: 1;  }
	.flex-grow{ 						display: flex; 
										flex: 1;  }
	.flex-wrap{							flex-wrap: wrap }
	.distribute{						display: flex;                 
										flex-direction: row;         
										flex-wrap: nowrap;              
										justify-content: space-between; }
	.distribute-wrap{					display: flex;                 
										flex-direction: row;         
										flex-wrap: wrap;              
										justify-content: space-between; }
	.distribute-left{					display: flex;                 
										flex-direction: row;                
										align-items: flex-start; }
		
	.width-5pct{ 						width: 5%; }
	.width-10pct{ 						width: 10%; }
	.width-15pct{ 						width: 15%; }
	.width-20pct{ 						width: 20%; }
	.width-17pct{ 						width: 17%; }
	.width-25pct{ 						width: 25%; }
	.width-30pct{ 						width: 30%; }
	.width-35pct{ 						width: 35%; }
	.width-40pct{ 						width: 40%; }
	.width-45pct{ 						width: 45%; }
	.width-50pct{ 						width: 50%; }
	.width-55pct{ 						width: 55%; }
	.width-60pct{ 						width: 60%; }
	.width-65pct{ 						width: 65%; }
	.width-70pct{ 						width: 70%; }
	.width-75pct{ 						width: 75%; }
	.width-80pct{ 						width: 80%; }
	.width-83pct{						width: 83%; }
	.width-85pct{						width: 85%; }
	.width-90pct{ 						width: 90%; }
	.width-95pct{ 						width: 95%; }
	.width-100p, 
	.width-100, 
	.width-100pct{ 						width: 100%; }

	.height-100vh{ 						height: 100vh; }
	.height-100p{ 						height: 100%; }
	
	.height-0{ 							max-height: 0px; 
										overflow: hidden; 
										transition: max-height 0.620ms ease-out; }
	.height-auto{ 						max-height: auto; 
										transition: max-height 0.620ms ease-out; }

	.position-top-hidden{ 				top:-200px;
										transition: all 520ms ease-out; }
	.position-top-visible{ 				top: 0;
										transition: all 520ms ease-out; }

	.opacity-O-tr{
		opacity: 						0;
		-ms-filter: 					"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
		filter: 						alpha(opacity=0);
		-moz-opacity: 					0;
		-khtml-opacity: 				0;
		opacity: 						0;
		transition:						all 610ms;  
	}
	.opacity-100-tr{
		opacity: 						100;
		-ms-filter: 					"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
		filter: 						alpha(opacity=100);
		-moz-opacity: 					100;
		-khtml-opacity: 				100;
		opacity: 						100;
		transition:						all 610ms;  
	}

	.opacity-darken{
		-ms-filter: 				"progid:DXImageTransform.Microsoft.Alpha(Opacity=48)";
		filter: 					alpha(opacity=48);
		-moz-opacity: 				0.48;
		-khtml-opacity: 			0.48;
		opacity: 					0.48;
		transition: 				opacity 620ms ease-out;
	}
	
	.opacity-lightdark{
		-ms-filter: 				"progid:DXImageTransform.Microsoft.Alpha(Opacity=44)";
		filter: 					alpha(opacity=34);
		-moz-opacity: 				0.34;
		-khtml-opacity: 			0.34;
		opacity: 					0.34;
		transition: 				opacity 620ms ease-out;
	}
	
	.bg-covered-top{ 				
		background-size: 				cover; 
		background-repeat: 				no-repeat; 
		background-position: 			top; 
	}
	.bg-covered-bottom{ 			
		background-size: 				cover; 
		background-repeat: 				no-repeat; 
		background-position: 			bottom; 
	}
	.bg-covered-center{ 			
		background-size: 				cover; 
		background-repeat: 				no-repeat; 
		background-position: 			center; 
	}

	.square{ 							aspect-ratio: 1/1; }
	.rectangle-flat{ 					aspect-ratio: 16/11; }
	.rectangle-up{ 						aspect-ratio: 11/16; }
	
	.rectangle{ 						width: 100%; }
	.rectangle:after{ 				
		content: 						''; 
		display: 						block; 
		padding-bottom: 				22%; 
	}

	.text-left, 
	.text-left-to-center{ 				text-align: left; }
	.text-right,
	.text-right-to-center{ 				text-align: right; }
	.text-center{ 						text-align: center; }
	.text-vertical-bl{ 	
		transform-origin:				bottom left; 
		right:							0; 
		bottom:							0; 
		transform: 						rotate(-90deg) translateX(100%); 
		-moz-transform:					rotate(-90deg); 
		-webkit-transform:				rotate(-90deg); 
		-o-transform:					rotate(-90deg); 
		-ms-transform:					rotate(-90deg); 
	}
	.text-vertical-tl{ 		
	transform-origin:					top left; 
		right:							0; 
		top:							0; 
		transform: 						rotate(-90deg) translateX(100%); 
		-moz-transform:					rotate(-90deg); 
		-webkit-transform:				rotate(-90deg); 
		-o-transform:					rotate(-90deg); 
		-ms-transform:					rotate(-90deg); 
	}
	.text-lowercase{ 					text-transform: lowercase; }
	.text-uppercase{ 					text-transform: uppercase; }
	.text-caps{ 					
		text-transform: 				uppercase; 
		letter-spacing: 				0.017em; 
	}

	

	.parallax{ 						
		height: 						100vh; 
		overflow-x: 					hidden;  
		overflow-y: 					auto; 
		-webkit-perspective: 			1px; 
		perspective: 					1px; 
	}
	.parallax__layer{ 				
		position: 						absolute; 
		top: 							0; 
		left: 							0; 
	right: 								0; 
		bottom: 						0; 
	}
	.parallax__layer--base{ 		
		-webkit-transform: 				translateZ(0); 
		transform: 						translateZ(0); 
	}
	.parallax__layer--back{ 		
		-webkit-transform: 				translateZ(-1px) scale(2); 
		transform: 						translateZ(-1px) scale(2); 
	}
	


	.bw-image{ 		
		-webkit-filter: 				grayscale(100%); 
		filter: 						grayscale(100%); 
	}

	.dev-bg{
		background-color: 				aquamarine;
	}

	.spinner {
		width: 							50px;
		height: 						50px;
		margin: 						32px;
		border-radius: 					50%;
		border: 						10px solid var(--spinner-color);
		border-top: 					10px solid var(--spinner-color-highlight);
		-webkit-animation: 				spin 2s linear infinite;
		animation: 						spin 2s linear infinite;
	  }
	  @-webkit-keyframes spin {
		0% { -webkit-transform: rotate(0deg); }
		100% { -webkit-transform: rotate(360deg); }
	  }
	  @keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	  }

	  /* Some positioning and ratios */
	.sticky-container {
		width:		100%;
		position: relative;
	}
	
	.sticky-outer {
		display: flex;
		position: relative;
		width: 100%;
	}
  
	.sticky {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		aspect-ratio: 1/1;
		width: 100%;
	}
  
  .sticky:before {
	box-shadow: -2px 2px 15px 0 rgba(0, 0, 0, 0.5);
	background-color: rgba(0, 0, 0, 0.25);
	content: '';
	width: 90%;
	left: 5px;
	height: 83%;
	position: absolute;
	top: 5%;
  }
  
  .sticky-content {
	background: linear-gradient(
	  180deg,
	  rgb(250, 255, 149) 100%,
	  rgb(250, 250, 149) 12%,
	  rgb(255, 255, 170) 75%,
	  rgb(255, 255, 255) 100%
	);
	width: 100%;
	height: 100%;
	font-size: 31px;
	line-height: 120%;
	display: flex;
	justify-content: center;
	align-items: center;
	clip-path: url(#stickyClip);
  }