@charset "UTF-8";
/* 
 ______  ______  ______     ______  ______  __  __  __      ______       ______  ______  ______                  
/\  ___\/\  __ \/\__  _\   /\  ___\/\__  _\/\ \_\ \/\ \    /\  ___\     /\  ___\/\  __ \/\  == \                 
\ \ \__ \ \ \/\ \/_/\ \/   \ \___  \/_/\ \/\ \____ \ \ \___\ \  __\     \ \  __\\ \ \/\ \ \  __<                 
 \ \_____\ \_____\ \ \_\    \/\_____\ \ \_\ \/\_____\ \_____\ \_____\    \ \_\   \ \_____\ \_\ \_\               
 _\/_____/\/_____/  \/_/_____\/_____/  \/_/ _\/_____/\/_____/\/_____/    _\/_/ __ \/_____/\/_/ /_/___  ______    
/\ "-./  \/\ \/\ \    /\  ___\/\  ___\     /\  __ \/\ "-.\ \/\  __-.    /\ "-./  \/\ \/\ \    /\  ___\/\  ___\   
\ \ \-./\ \ \ \ \ \___\ \  __\\ \___  \    \ \  __ \ \ \-.  \ \ \/\ \   \ \ \-./\ \ \ \ \ \___\ \  __\\ \___  \  
 \ \_\ \ \_\ \_\ \_____\ \_____\/\_____\    \ \_\ \_\ \_\\"\_\ \____-    \ \_\ \ \_\ \_\ \_____\ \_____\/\_____\ 
  \/_/  \/_/\/_/\/_____/\/_____/\/_____/     \/_/\/_/\/_/ \/_/\/____/     \/_/  \/_/\/_/\/_____/\/_____/\/_____/ */


/* html { overflow-x: hidden; } */

	body { color: lightgray; font-family: 'soehne-leicht'; font-size: 20px; font-weight: 400; 
		  line-height: 1.35em; background-color: #191919; margin: 0; transition: background-color 0.5s ease; 
		  float: left; height: 100%; }
		
		#site-content { width: 100vw; }
		


/*
VIEW TRANSITIONS
Makes the experience of using the website smoother by fundamentally changing the behavior of what happens when people navigate from one page to another. Setting navigation: auto; ensures that any element that’s the same from one page to the next stays exactly in place. The difference with view transitions enabled is that the background and any repeating elements stay constant. And then anything that’s different, will be transitioned using a crossfade. To further improve the example (especially if you’re building more complex transitions) you could wrap these styles inside prefers-reduced-motion media query.
*/

@view-transition {
  navigation: auto;
}

@media screen and (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

		
	/* This is the primary wrapper */
		#site-content, #site-content-constrained { padding: 30px 0 0 0; margin: 0 auto; float: left; }
		#site-content-constrained { max-width: 1000px;}

	/* This is width-constrained wrapper */
		.container_primary { margin-left:auto; margin-right:auto; max-width:1520px; width:90%; }
		@media (min-width:50em){.container_primary{padding:0 104px 0 30px;width:100%}}
		@media (min-width:105em){.container_primary{margin-left:auto;margin-right:auto;padding:0 74px 0 0}}


			.masthead { width: 100%; }
				.masthead .logo { width: 200px; position: fixed; top: 30px; left: 20px; }
				.masthead .logo svg { fill: indianred; transition: 0.3s; mix-blend-mode: difference; }
				.masthead .logo svg:hover { fill: blue; transition: 0.3s; }
			
				
			/*-------  CLOCK  -----------*/	
				#clock { position: fixed; top: 25px; right: 120px; text-align: right; color: #888; }	



 		/*______  ______  __      ______  ______  ______    
		 /\  ___\/\  __ \/\ \    /\  __ \/\  == \/\  ___\   
		 \ \ \___\ \ \/\ \ \ \___\ \ \/\ \ \  __<\ \___  \  
 		  \ \_____\ \_____\ \_____\ \_____\ \_\ \_\/\_____\ 
  		   \/_____/\/_____/\/_____/\/_____/\/_/ /_/\/_____/ 

		The colors will largely stick to the following:
		Background: 	#191919
		IndianRed, or 	#cd5c5c
		Lightgray, or 	#d3d3d3
		Blue, or 		#0000FF
		Lightblue, or 	#ADD8E6
		*/

		/*_   _                  ___                     _               
 		| \ | |  __ _ __   __  / _ \ __   __ ___  _ __ | |  __ _  _   _ 
 		|  \| | / _` |\ \ / / | | | |\ \ / // _ \| '__|| | / _` || | | |
 		| |\  || (_| | \ V /  | |_| | \ V /|  __/| |   | || (_| || |_| |
 		|_| \_| \__,_|  \_/    \___/   \_/  \___||_|   |_| \__,_| \__, |
			Not a lot to this one, but important all the same      |___/ */

		.site-header__logo:hover { display: none; }
		span.upward { font-family: 'soehne-leicht',sans-serif; font-weight: 500; padding-left: 20px; }

		/*___         _   _             
		 / __| ___ __| |_(_)___ _ _  ___
		 \__ \/ -_) _|  _| / _ \ ' \(_-<
		 |___/\___\__|\__|_\___/_||_/__/*/

		section { width: 100%; margin: 30px 0; display: inline-block; float: left; }	

		section.introduction { margin: 150px 0 0;}
			.page-intro { width: 100%; display: block; }
			.page-intro h1, .hearmeout h2 { max-width: 800px; text-align: left; margin-bottom: 10px; }
			
			
		section.exposition { margin: 15px 0; }
			.p-window { float: left; width: 100%; }  /* A container for multiple paragraphs */
			p { line-height: 1.45em; max-width: 850px; float: left; margin-bottom: .5em; margin-top: .5em; }

		section.lists { }
			/* columns on profile */
			.columns { margin-bottom: 0; max-width: 850px; }
			.profile-list { line-height: 1.35em; margin-bottom: 20px; column-count: 2; }
				.profile-list ul { list-style: none; padding: 0; margin: 0; width: 100%; float: left; }
				.profile-list li { margin-bottom: 3px; }
				.profile-list li::before {
				  content: "~ "; } /* A fancy little tilde before each list item */
			/* work overview paragraphs */
			p.work-overview { margin: 5px 0 15px;}


		section.hearmeout { float: right; margin: 0 0 30px; }
		/* Right-aligned p on homepage */


 	     /*ooooo..o oooo   o8o        .o8                     
		d8P'    `Y8 `888   `"'       "888                     
		Y88bo.       888  oooo   .oooo888   .ooooo.   .oooo.o 
		 `"Y8888o.   888  `888  d88' `888  d88' `88b d88(  "8 
			 `"Y88b  888   888  888   888  888ooo888 `"Y88b.  
		oo     .d8P  888   888  888   888  888    .o o.  )88b 
		8""88888P'  o888o o888o `Y8bod88P" `Y8bod8P' 8""888*/ 


		#swipe-contain img { width: 800px; height: auto; }
			.swiper { width: 100%; height: 100%; }
			.swiper-slide { text-align: center; font-size: 18px; background: #fff; display: flex;
  		  		justify-content: center; align-items: center; }
		
		/* .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } */




	  /*▗▄▄▖  ▗▄▖ ▗▄▄▖ ▗▄▄▄▖▗▄▄▄▖ ▗▄▖ ▗▖   ▗▄▄▄▖ ▗▄▖ 
  		▐▌ ▐▌▐▌ ▐▌▐▌ ▐▌  █  ▐▌   ▐▌ ▐▌▐▌     █  ▐▌ ▐▌
  		▐▛▀▘ ▐▌ ▐▌▐▛▀▚▖  █  ▐▛▀▀▘▐▌ ▐▌▐▌     █  ▐▌ ▐▌
  		▐▌   ▝▚▄▞▘▐▌ ▐▌  █  ▐▌   ▝▚▄▞▘▐▙▄▄▖▗▄█▄▖▝▚▄▞ */	

		section.project { max-width: none; margin-bottom: 50px; }
			/* Portfolio window */
			
				section.project img { border-radius: 10px; }
			
				/*-------  Row types  -----------*/	
				.fullrow { float: left; width: 100%; margin: 0; }


					.image-row { clear: left; width: calc(100% + 40px); margin: 0 0 0 -20px; }
						.img-half, .img-third, .img-full { float: left; display: block; background-color: transparent; border: none;text-decoration: none; padding: 0 20px; margin-bottom: 20px; }
						.img-half { width: 50%; }
						.img-twothird { width: 66%; }
						.img-third { width: 33%; }
						.img-full { width: 100%; }



				.row-multi, .row-of-two, .row-of-three { float: left; width: calc(100% + 20px); margin: 0 0 0 -10px; }

				/* Within the row types, these will decide row widths */
					.eighty-five-row { width: 85%; }
					.one-row, .two-row, .imagefull, .eighty-five-row { float: left; padding: 0; margin: 10px 0; }
					.one-row { width: 100%; } .one-row img { width: 100%; }
					.two-row { width: 50%; }
					.three-row { width: 33.333333333%; float: left; } 
					
					.fullrow a, .row-multi a, .row-of-two a, .row-of-three a,
					.img-pad { float: left; display: block; background-color: transparent; border: none;text-decoration: none; padding: 0 20px; margin-bottom: 20px; }
						/* This ensures padding enough to maintain spacing */

			/*-------  Project details  -----------*/	
						ol.breadcrumbs { list-style: none; text-transform: uppercase;font-size: 15px; letter-spacing: .02em; float: left; width: 100%; }
							ol.breadcrumbs li { display: inline; float: left; }
							ol.breadcrumbs li.slash { padding: 0 8px; }			
							ol.breadcrumbs li.currentpage { color: #555555; }
							ol.breadcrumbs a:hover { color: #0000FF; }			


			/*-------  Individual project details  -----------*/	
		
						.project-key { display: block; float: left; width: 50%; margin-bottom: 50px; }
						
						p.key_description { width: 100%; padding-right: 15%; }
						
						.project-details { display: block; float: right; width: 46%; font-size: 85%; color: #888888; margin-top: 48px; }
							.details-row { border-bottom: 1px #888888 solid; padding: 4px 0; float: left; width: 100%; }
								.detail-type { text-align: left; display: inline; float: left; }
								.detail-detail { text-align: right; display: inline; float: right; }



					/* A COUNTER FOR NUMBER OF YEARS OF EXPERIENCE */
					@property --num {  syntax: "<integer>";  initial-value: 0;  inherits: false; }
					.counter {  transition: --num 3s;  counter-set: num var(--num);  color: #fff; display: inline; background: var(--neutral-alpha-weak); 
						border: 1px solid #888; border-radius: 4px; font-family: JetBrainsMono; font-size: 80%; margin: 0 var(--static-space-2); padding: 2px 4px; vertical-align: top; }
					.counter::after { content: counter(num); }
					.counter:hover { --num: 20; }
					.superscript { }






                /*  .....     .                                                            .x+=:.   
				  .d88888Neu. 'L                                                          z`    ^%  
				  F""""*8888888F    ..    .     :                                            .   <k 
				 *      `"*88*"   .888: x888  x888.        u          uL          .u       .@8Ned8" 
				  -....    ue=:. ~`8888~'888X`?888f`    us888u.   .ue888Nc..   ud8888.   .@^%8888"  
						 :88N  `   X888  888X '888>  .@88 "8888" d88E`"888E` :888'8888. x88:  `)8b. 
						 9888L     X888  888X '888>  9888  9888  888E  888E  d888 '88%" 8888N=*8888 
				  uzu.   `8888L    X888  888X '888>  9888  9888  888E  888E  8888.+"     %8"    R88 
				,""888i   ?8888    X888  888X '888>  9888  9888  888E  888E  8888L        @8Wou 9%  
				4  9888L   %888>  "*88%""*88" '888!` 9888  9888  888& .888E  '8888c. .+ .888888P`   
				'  '8888   '88%     `~    "    `"`   "888*""888" *888" 888&   "88888%   `   ^"F     
					 "*8Nu.z*"                        ^Y"   ^Y'   `"   "888E    "YP'                
																 .dWi   `88E                        
																 4888~  J8%                         
																  ^"===*"`  */                         

					/*-------  Border radius on images  -----------*/	
					img.radiustl { border-radius: 160px 15px 15px; }
					img.radius { border-radius: 15px; }
				
					/*-------  Turns images greyscale  -----------*/	
					img.grey { -webkit-filter: grayscale(100%); /* Ch 23+, Saf 6.0+, BB 10.0+ */ filter: grayscale(100%); /* FF 35+ */ }
						img.grey:hover {
						  transition: filter .5s ease-in-out; -webkit-filter: grayscale(0%); /* Ch 23+, Saf 6.0+, BB 10.0+ */ filter: grayscale(0%); /* FF 35+ */ }



				/*░▒▓█▓▒░░▒▓█▓▒░ ░▒▓█▓▒░ ░▒▓███████▓▒░  ░▒▓████████▓▒░  ░▒▓██████▓▒░  
				  ░▒▓█▓▒░░▒▓█▓▒░ ░▒▓█▓▒░ ░▒▓█▓▒░░▒▓█▓▒░ ░▒▓█▓▒░        ░▒▓█▓▒░░▒▓█▓▒░ 
				   ░▒▓█▓▒▒▓█▓▒░  ░▒▓█▓▒░ ░▒▓█▓▒░░▒▓█▓▒░ ░▒▓█▓▒░        ░▒▓█▓▒░░▒▓█▓▒░ 
				   ░▒▓█▓▒▒▓█▓▒░  ░▒▓█▓▒░ ░▒▓█▓▒░░▒▓█▓▒░ ░▒▓██████▓▒░   ░▒▓█▓▒░░▒▓█▓▒░ 
				    ░▒▓█▓▓█▓▒░   ░▒▓█▓▒░ ░▒▓█▓▒░░▒▓█▓▒░ ░▒▓█▓▒░        ░▒▓█▓▒░░▒▓█▓▒░ 
				    ░▒▓█▓▓█▓▒░   ░▒▓█▓▒░ ░▒▓█▓▒░░▒▓█▓▒░ ░▒▓█▓▒░        ░▒▓█▓▒░░▒▓█▓▒░ 
				     ░▒▓██▓▒░    ░▒▓█▓▒░ ░▒▓███████▓▒░  ░▒▓████████▓▒░  ░▒▓██████▓▒░  */

					.video-row { float: left; display: block; width: 100%; 
						min-width: 400px; max-width: 85%; margin: 15px 0; }
						.video-place { position: relative; width: 100%; overflow: hidden; padding-top: 56.25%; }
						.video-row iframe { position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%; border: none; border-radius: 15px; }
			
				  /*d8888ba,                                     88                                       
				 d8"'    `"8b                             ,d     ""                                       
				d8'                                       88                                              
				88             ,adPPYYba,  8b,dPPYba,   MM88MMM  88   ,adPPYba,   8b,dPPYba,   ,adPPYba,  
				88             ""     `Y8  88P'    "8a    88     88  a8"     "8a  88P'   `"8a  I8[    ""  
				Y8,            ,adPPPPP88  88       d8    88     88  8b       d8  88       88   `"Y8ba,   
				 Y8a.    .a8P  88,    ,88  88b,   ,a8"    88,    88  "8a,   ,a8"  88       88  aa    ]8I  
				  `"Y8888Y"'   `"8bbdP"Y8  88`YbbdP"'     "Y888  88   `"YbbdP"'   88       88  `"YbbdP"'  
										   88                                                             
										   */
				/* row for all project details */
				.explanation { display: block; width: 100%; float: left; }
				.explanation p { max-width: 850px; margin: 0; padding-bottom: 20px; }
				
				.caption { text-align: left; font-size: 18px; letter-spacing: .03em; line-height: 1.25em; padding: 8px 8px 12px 0; margin: 0; font-family: 'soehne-leicht'; float: left; color: gray; }
				
				.caption-container { float: left; margin-top: 15px; }
				.project-name { font-size: 1.6em; font-weight: 400; display: block; float: left; width: 100%; float: left; line-height: 1em; margin: 0 0 10px; font-family: 'soehne-buch'; color: indianred;  }
				.project-descrip { font-size: 1.05em; line-height: 1.25; margin: 0 0 .5rem; display: block; width: 100%; float: left; font-family: 'soehne-leicht'; }
				ul.project-tags { list-style: none; margin: 5px 0 20px; color: gray; float: left; line-height: .95em; letter-spacing: .03em;}
				ul.project-tags li.tag { font-size: .7em; font-weight: 400; line-height: 1em; text-transform: uppercase; display: inline; padding-right: 1.5em; }


				/* Inner case study captioning */
					.inner-captions { display: block; float: left; width: 100%; margin-top: 18px; }
						.inner-captions h2 { font-size: 1.6em; font-weight: 400; display: block; float: left; width: 100%; float: left; line-height: 1em; margin: 0 0 0; font-family: 'soehne-buch'; color: indianred; margin-bottom: 10px; }
						.inner-captions .description { font-size: 20px; margin: 0 0 20px; }


					section.nextsteps { }

 
		/*        88                                   88                                     
		88        88                                   88                                     
		88        88                                   88                                     
		88aaaaaaaa88   ,adPPYba,  ,adPPYYba,   ,adPPYb,88   ,adPPYba,  8b,dPPYba,  ,adPPYba,  
		88""""""""88  a8P_____88  ""     `Y8  a8"    `Y88  a8P_____88  88P'   "Y8  I8[    ""  
		88        88  8PP"""""""  ,adPPPPP88  8b       88  8PP"""""""  88           `"Y8ba,   
		88        88  "8b,   ,aa  88,    ,88  "8a,   ,d88  "8b,   ,aa  88          aa    ]8I  
		88        88   `"Ybbd8"'  `"8bbdP"Y8   `"8bbdP"Y8   `"Ybbd8"'  88          `"YbbdP*/

		/* large serif headers */
			h1, h2 { font-family: 'AppleGaramondLight', Garamond, serif; line-height: 1em; letter-spacing: -.005em; margin: 0; max-width: 90%; color: lightgray; font-weight: normal; }
			
			h1 { font-size: 52px; line-height: 1.04em; }
				h1.red { color: indianred; }

			h2 { font-size: 48px; }
				h2.big-idea { color: lightblue; }
				h2.selectwork { margin-bottom: 20px; font-size: 40px; }
				
			.casename { font-weight: 600; font-family: 'soehne-halbfett'; font-size: 65px; }
			
			h3,h4,h5,h6 {font-weight:400; font-family: 'soehne-halbfett'; }
			h3 { font-weight: 600; font-size: inherit; margin: 20px 0 5px 0; color: indianred; font-size: 22px; }
		
		/* secondary serif, homepage, right-aligned */
			p.andalso { font-family: 'AppleGaramondLight', Garamond, serif; line-height: 1em; letter-spacing: -.005em; margin: 0 0 25px; 
				max-width: 700px; float: left; font-size: 44px; }


		/*																									 
		88           88               88                                          88                         
		88           ""               88                      ,d                  88                         
		88                            88                      88                  88                         
		88           88  8b,dPPYba,   88   ,d8   ,adPPYba,  MM88MMM  8b       d8  88   ,adPPYba,  ,adPPYba,  
		88           88  88P'   `"8a  88 ,a8"    I8[    ""    88     `8b     d8'  88  a8P_____88  I8[    ""  
		88           88  88       88  8888[       `"Y8ba,     88      `8b   d8'   88  8PP"""""""   `"Y8ba,   
		88           88  88       88  88`"Yba,   aa    ]8I    88,      `8b,d8'    88  "8b,   ,aa  aa    ]8I  
		88888888888  88  88       88  88   `Y8a  `"YbbdP"'    "Y888      Y88'     88   `"Ybbd8"'  `"YbbdP"'  
																 		d8'                                 
																		*/	
		a.box { color: #ffffff; text-decoration: none; border: 1px solid hsla(32, 24%, 70%, 1); 
			padding: 0 8px; border-radius: 8px; background-color: #524bfa; }

		a.box2 { color: #ffffff; text-decoration: none; border: 1px solid hsla(32, 24%, 70%, 1); 
			padding: 0 8px; border-radius: 8px; background-color: #FF4500; }

		a.box2:hover, a.box:hover { background-color: #c5b4a0; color: #1a1a1a; }


		a.simplelink { color: indianred; font-family: 'soehne-buch'; letter-spacing: -.02em; }
		a.simplelink:hover { color: blue; transition: filter 1.5s ease-in-out; }
		
		a.reverselink { color: blue; font-family: 'soehne-buch'; letter-spacing: -.02em; }
		a.reverselink:hover { color: indianred; transition: filter 1.5s ease-in-out; }		

		strong { color: indianred;}	

	  .code_mono {
		display: inline;
		background: var(--neutral-alpha-weak);
		border: 1px solid #888;
		border-radius: 4px;
		font-family: JetBrainsMono;
		font-size: 80%;
		margin: 0 var(--static-space-2);
		padding: 2px 4px;
		vertical-align: top;
	  }	
	
	a.code_mono:hover { background-color: #ffffff; color: #000000; }
	
/*_____              _              
 |  ___|___    ___  | |_  ___  _ __ 
 | |_  / _ \  / _ \ | __|/ _ \| '__|
 |  _|| (_) || (_) || |_|  __/| |   
 |_|   \___/  \___/  \__|\___||_|   
									*/
	footer { position: relative; z-index: 1; margin: 120px auto 0; padding: 15px 0; border-top: 1px solid #3e3e3e; clear: both; font-size: 14px; text-align: left; float: left; width: 100%; color: lightgray;letter-spacing: .03em; }
		footer ul { list-style: none; padding: 0; margin: 0; float: left; }
		footer li { display: inline; float: left; }
		footer span.divider { padding: 0 10px; float: left; }
		footer li.email, footer li.social { padding: 4px 15px 0 0; }
		footer li svg { height: 20px; width: auto; margin-top: -2px; fill: indianred; }
		footer svg:hover { transition: transform .7s ease-in-out; transform: rotate(360deg); 
			fill: blue;}


/*Bring it back to ... 
  ____                                      _  ____                     _   
 |  _ \  ___  ___  _ __    ___   _ __    __| ||  _ \  ___   __ _   ___ | |_ 
 | |_) |/ _ \/ __|| '_ \  / _ \ | '_ \  / _` || |_) |/ _ \ / _` | / __|| __|
 |  _ <|  __/\__ \| |_) || (_) || | | || (_| ||  _ <|  __/| (_| || (__ | |_ 
 |_| \_\\___||___/| .__/  \___/ |_| |_| \__,_||_| \_\\___| \__,_| \___| \__|
				  |*/

		@media only screen and (min-width: 100px) and (max-width: 1000px) {
					  .project-key, .project-details { width: 100%; margin-top: 0; margin-bottom: 30px; }
				  }


		@media only screen and (min-width: 800px) and (max-width: 5000px) {
			.site-header_nameplate { display: none; }
		}


		@media only screen and (min-width: 901px) and (max-width: 1100px) {
			.site-intro { font-size: 58px; }
			section { margin: 20px 0; }
		}

		@media only screen and (min-width: 800px) and (max-width: 900px) {
			.site-intro { font-size: 52px; line-break: 1em; }
			section.introduction { width: 100%; }
			section { margin: 20px 0; }
			.right-sans { font-size: 25px; }
		}

		@media only screen and (min-width: 201px) and (max-width: 799px) {
			.site-intro { font-size: 52px; line-break: 1em; }
			section.introduction { width: 100%; }
			section { margin: 20px 0; }
			.right-sans { font-size: 25px; }
			.img-half, .img-third { width: 100%; float: none; }
			.image-row { float: none; }
			h1, h2 { font-size: 40px; }
			.project-key { margin-bottom: 10px; }
			p { width: 90%;}
			
			#site-content, #site-content-constrained { padding: 0; }
			section { padding: 0 15px; }
			
			.site-header_nameplate { height: 32px; color: #000000; display: inline; position: fixed; left: 55px; }
				.site-header_nameplate img { height: 100%; width: auto; }
				.masthead { display: none; }
		}

		@media only screen and (min-width: 200px) and (max-width: 700px) {
			.two-row, .eighty-five-row, .video-row { width: 100%; max-width: 100%; }
			body { margin: 0; }
		}

		@media only screen and (min-width: 200px) and (max-width: 575px) {
			.site-intro { font-size: 38px; }
			section { margin: 10px 0; }
			#site-content, #site-content-constrained { padding-bottom: 0; }
			.columns, .profile-list { column-count: 1; } .profile-list { width: 100%; }
			h1, h2 { font-size: 36px; width: 85%; }
			section.exposition { margin: 0; }
		}

		@media only screen and (min-width: 100px) and (max-width: 400px) {
			.site-header_nameplate { height: 30px; color: #000000; display: inline; position: fixed; left: 45px; }
			.columns { column-count: 1; } .profile-list { width: 100%; }
		}

		@media only screen and (min-width: 100px) and (max-width: 1050px) {
			.profile-intro { width: 85%; display: block;}
			.portrait { width: 100%;}
			footer { margin-bottom: 8px; }
			footer ul { padding: 0 0 0 15px;}
			section.hearmeout, .hearmeout h2.andalso { float: left; }
			body { font-size: 19px; }
			.radiustl, .images img { border-radius: 10px; }
		}

/*_____                                                _            
 |_   _|_   _  _ __    ___    __ _  _ __  __ _  _ __  | |__   _   _ 
   | | | | | || '_ \  / _ \  / _` || '__|/ _` || '_ \ | '_ \ | | | |
   | | | |_| || |_) || (_) || (_| || |  | (_| || |_) || | | || |_| |
   |_|  \__, || .__/  \___/  \__, ||_|   \__,_|| .__/ |_| |_| \__, |
		|___/ |_|            |___/             |_|            |___/ */	

/* LIGHT */
	.soehne-l { font-family: 'soehne-leicht', sans-serif; }
	@font-face {font-family: 'soehne-leicht';
	 src: url('font/soehne-leicht.eot');
	 src: url('font/soehne-leicht.eot?#iefix') format('embedded-opentype'),
	 url('font/soehne-leicht.woff2') format('woff2'),
	 url('font/soehne-leicht.woff') format('woff2');}
/* BOOK */
	.soehne-h { font-family: 'soehne-buch', sans-serif; }
	 @font-face {font-family: 'soehne-buch';
	  src: url('font/soehne-buch.eot');
	  src: url('font/soehne-buch.eot?#iefix') format('embedded-opentype'),
	  url('font/soehne-buch.woff2') format('woff2'),
	  url('font/soehne-buch.woff') format('woff2');}
/* BOLD */
	.soehne-h, strong { font-family: 'soehne-halbfett', sans-serif; color: lightblue; }
	   @font-face {font-family: 'soehne-halbfett';
		src: url('font/soehne-halbfett.eot');
		src: url('font/soehne-halbfett.eot?#iefix') format('embedded-opentype'),
		url('font/soehne-halbfett.woff2') format('woff2'),
		url('font/soehne-halbfett.woff') format('woff2');}

/* SERIFS DON'T LIE */
	.agl { font-family: 'AppleGaramondLight', serif; }
		@font-face {font-family: 'AppleGaramondLight';
			 src: url('font/AppleGaramondLight.eot');
			 src: url('font/AppleGaramondLight.eot?#iefix') format('embedded-opentype'),
			 url('font/AppleGaramondLight.woff2') format('woff2'),
			 url('font/AppleGaramondLight.woff') format('woff2');}
			 		 
/* MONO */
			 .mono { font-family: 'JetBrainsMono', serif; color: lightblue; }
				@font-face {font-family: 'JetBrainsMono';
				 src: url('font/JetBrainsMono-Regular.eot');
				 src: url('font/JetBrainsMono-Regular.eot?#iefix') format('embedded-opentype'),
				 url('font/JetBrainsMono-Regular.woff2') format('woff2'),
				 url('font/JetBrainsMono-Regular.woff') format('woff2');}