@charset "UTF-8";

/*	font	*/

@font-face 		{															/* custum font definition */
    font-family:		logoType;
    src:				url("../fnt/MetaOT-Norm.otf");
}

@font-face 		{															/* custum font BOLD definition */
    font-family:		logoTypeB;
    src:				url("../fnt/MetaOT-Bold.otf");
}


/*
cracklewax stylesheet

*/

/*
color guide:

value	sRGB grey	sRGB ochre	
96		#f5f5f5		#f5b027	lightest
93		#ededed		#edab26	
88		#e0e0e0		#e0a224	
80		#cccccc		#cc9321	middle grey
67		#ababab		#ab7b1b	
46		#757575		#755413	
12		#1f1f1f		#1f1605	darkest 

*/


/*
	root variables
	*/
	:root {
  --Color_Lgrey3:				#f5f5f5;
  --Color_Lgrey2:				#ededed;
  --Color_Lgrey1:				#e0e0e0;
  --Color_Mgrey0:				#cccccc;
  --Color_Dgrey1:				#ababab;
  --Color_Dgrey2:				#757575;
  --Color_Dgrey3:				#1f1f1f;
  --Color_Mochre0:				#cc9321;
  --Size_Margin:				28px;		/* calculated from image size .618^5 */
  --Size_MarginM:				17px;
  --Size_MarginS:				11px;
  --Width_Large:				1042px;		/* 3*310 + 4*28 = */
  --Width_LminM:				1014px;		/* minus margin */
  --Width_LminM2:				986px;
  --Width_ImagePortfolio:		310px;
  --Width_ImageProjectL:		986px;
  --Width_MenuMid:				366px;		/* 310 + 2*28		menuspacer_mid */
  --Width_MenuMidS:				176px;		/* 704-4*118-2*28 */
  --Width_MenuTween:			74px;		/* (1042-366-4*118-2*28)/2 */
  --Width_MenuButton:			118px;		/* .382*ImagePortfolio */
  --Width_MenuButtonS:			73px;		/* .618*MenuButton */
  --Height_MenuButtonMargin:	4px;
  --Width_LargeB:				1062px;		/* add 20 for hidescroll */
  --Width_Medium:				704px;		/* 2*310 + 3*28 */
  --Width_MminM:				676px;
  --Width_MminM2:				648px;
  --Width_MediumB:				724px;		/* add 20 for hidescroll */
  --Width_Small:				366px;		/* 310 + 2*28 */
  --Width_SminM:				338px;
  --Width_SminM2:				310px;
  --Width_SmallB:				386px;		/* add 20 for hidescroll */
  --Height_Hidescroll:			704px;		/* 2*310 + 3*28 */
  --Height_HSminM2:				648px;		/* hidescroll - 2*margin */
  --Height_Headerspace:			120px;
  --Height_Header:				140px;		/* find from image */
  --Height_Footer:				74px;		/* .618*headerspace */
  --Height_FooterMenu1:			46px;		/* .618 */
  --Height_FooterMenu2:			28px;		/* .382 */
  --Height_ButtonText:			16px;
  --Height_TextTitle:			14px;
  --Height_Text:				14px;
  --Height_TextCopy:			10px;
 
  --test:						1500px;
}

/*
limited reset

*/

html, body, div, section, article, aside, header, hgroup, footer, nav, h1, h2, h3, h4, h5, h6, p, blockquote, address, time, span, em, strong, img, ol, ul, li, figure, canvas, video, th, td, tr {
	margin: 0;
	padding: 0;
	border: 0;
}


/*
html5 display rule

*/

address,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
menu,
nav,
section,
summary,
div {
	display: 						block;
}

html {
	background: 					var(--Color_Lgrey2);
}

/*
	container
	z-index 0
	*/

	.container	{
		margin-left: 				auto;
		margin-right: 				auto;
		width: 						var(--Width_Large);
		height:						auto;
		background-color:			var(--Color_Mgrey0); /**/
		z-index:					0;
	}
	
	/* Responsive layout - */
@media (max-width: 1500px) {
  .container {
	  width: 						var(--Width_Medium);
	/*  background-color: 			red; */
  }
}

@media (max-width: 1100px) {
  .container {
	  width: 						var(--Width_Small);
	/*  background-color: 			red; */
  }
}

/*
	content
	z-index 1
	*/
	
	.header_space	{
		margin-left: 				auto;
		margin-right: 				auto;
		width: 						var(--Width_Large);
		height:						var(--Height_Headerspace);
		overflow:					visible;
		background-color:			var(--Color_Mgrey0); /**/
		z-index:					1;
	}

	/* Responsive layout - */
@media (max-width: 1500px) {
  .header_space {
	  width: 						var(--Width_Medium);
	/*  background-color: 			red; */
  }
}

@media (max-width: 1100px) {
  .header_space {
	  width: 						var(--Width_Small);
	/*  background-color: 			red; */
  }
}

	.hidescroll	{
		width: 						var(--Width_Large);			/**/
		height:						var(--Height_Hidescroll);	/**/
		padding: 					0px;
		margin: 					0px;
	/*	min-height: 				var(--Height_Hidescroll);				/**/
		overflow:					hidden;
		z-index:					2;
	/*	background-color:			aqua;						/**/
	}
	
	/* Responsive layout - */
@media (max-width: 1500px) {
  .hidescroll {
	  width: 						var(--Width_Medium);
	/*  background-color: 			red; */
  }
}

@media (max-width: 1100px) {
  .hidescroll {
	  width: 						var(--Width_Small);
	/*  height:						var(--Height_Hidescroll); /**/
	/*  background-color: 			red; */
  }
}

	.flex-portfolio {
		display:					flex;
		height: 					var(--Height_Hidescroll);
		width:						var(--Width_LargeB);							/* extra 20px for scrollbar */
		float:						left;											/* scrollbar will appear right, hidden in the hidescroll container */
		align-items:				flex-start;
		flex-wrap: 					wrap;
		justify-content:			flex-start;
	/*	margin-bottom:				var(--Size_Margin);								/* for the last bit of space at the bottom */
		background-color:			var(--Color_Mgrey0); 							/**/
		background-image: 			url("../img/flexport/HidescrollArrowL.png");
		background-size:			contain; 										/**/
		overflow:					auto;											/* causes a scrollbar */
		z-index:					1;
}

	/* Responsive layout - */
@media (max-width: 1500px) {
  .flex-portfolio {
	  width: 						var(--Width_MediumB);
	  background-image: 			url("../img/flexport/HidescrollArrowM.png");
	/*  background-color: 			red; */
  }
}

@media (max-width: 1100px) {
  .flex-portfolio {
	  width: 						var(--Width_SmallB);
	  background-image: 			url("../img/flexport/HidescrollArrowS.png");
	/*  background-color: 			red; */
  }
}

/*
	header / footer
	z-index 2
	*/

	.header_image	{
		position:					fixed;
		margin-left: 				auto;
		margin-right: 				auto;
		width: 						var(--Width_Large);
		height:						var(--Height_Header);
		background-image: 			url("../img/header/headerL.png"); /**/
		background-size:			contain;
		z-index:					2;
		overflow:					visible;
	}
	
/* Responsive layout - */
@media (max-width: 1500px) {
  .header_image {
	  width: 						var(--Width_Medium);
	  background-image: 			url("../img/header/headerM.png");
  }
}

@media (max-width: 1100px) {
  .header_image {
	  width: 						var(--Width_Small);
	  background-image: 			url("../img/header/headerS.png");
  }
}



.footer_image	{
		position:					fixed;
		margin-left: 				auto;
		margin-right: 				auto;
		width: 						var(--Width_Large);
		height:						600px;	/*	var(--Height_Footer); /**/
		background-image: 			url("../img/footer/footerL.png"); /**/
		background-size:			100% 100%;
		z-index:					2;
		overflow:					visible;
		background-color:			var(--Color_Mgrey0);  /**/
	}
	
/* Responsive layout - */
@media (max-width: 1500px) {
  .footer_image {
	  width: 						var(--Width_Medium);
	  background-image: 			url("../img/footer/footerM.png");	/**/
  }
}

@media (max-width: 1100px) {
  .footer_image {
	  width: 						var(--Width_Small);
	  background-image: 			url("../img/footer/footerS.png");	/**/
  }
}

/*
	menu classes
	z-index 3
	*/

	.header_menu	{
		display:					flex;
		height: 					20px;	/* var(--Height_Headerspace); */
		align-items:				flex-end;
		flex-wrap: 					wrap;
		justify-content:			space-between;
		/* background-color:			black;/* var(--Color_Lgrey1); */
		z-index:					3;
	}
	
	.header_top_spacer	{
		/*	display:					block;	*/
		height:						80px;
		width:						100px;
		/*	background-color: 			rgba(0, 0, 0, 0.5);	*/
		margin-left: 				auto;
		margin-right: 				auto;
		margin-top: 				20px;
		
	}
	
	.menu_buttonL	{
		width:						var(--Width_MenuButton);
		height:						20px;
		font-family:				logoType, verdana, tahoma, sans-serif;
		text-align:					left;													/**/
		font-size:					var(--Height_ButtonText);
		margin-bottom:				var(--Height_MenuButtonMargin);
		/* background-color:			red;/* var(--Color_Lgrey1); */
	}
	
	.menu_buttonL a	{
		text-decoration:			none;													/*	hide underlining	*/
		outline:					none;													/*	keep firefox dotted lines out of clicked links	*/
		color:						var(--Color_Lgrey3);
	}
	
	.menu_buttonL a:hover	{
		text-decoration:			none;													/*	hide underlining	*/
		outline:					none;													/*	keep firefox dotted lines out of clicked links	*/
		color:						var(--Color_Dgrey2);
	}
	
		/* Responsive layout - */
@media (max-width: 1100px) {
  .menu_buttonL {
	  width: 						var(--Width_MenuButtonS);
  }
}

	
	.menu_buttonR	{
		width:						var(--Width_MenuButton);
		height:						20px;
		font-family:				logoType, verdana, tahoma, sans-serif;
		text-align:					right;													/**/
		font-size:					var(--Height_ButtonText);
		margin-bottom:				var(--Height_MenuButtonMargin);
	/*	background-color:			var(--Color_Lgrey1); */
	display: 					block;
	}
	
	.menu_buttonR a	{
		text-decoration:			none;													/*	hide underlining	*/
		outline:					none;													/*	keep firefox dotted lines out of clicked links	*/
		color:						var(--Color_Lgrey3);
	}
	
	.menu_buttonR a:hover	{
		text-decoration:			none;													/*	hide underlining	*/
		outline:					none;													/*	keep firefox dotted lines out of clicked links	*/
		color:						var(--Color_Dgrey2);
	}
	
	.menu_clicked a	{																		/* declared after menubuttons to make sure it takes precedence */
		text-decoration:			none;													/*	hide underlining	*/
		outline:					none;													/*	keep firefox dotted lines out of clicked links	*/
		font-family:				logoType, verdana, tahoma, sans-serif;
		color:						var(--Color_Mochre0);							/**/
	}
	
			/* Responsive layout - */
@media (max-width: 1100px) {
  .menu_buttonR {
	  width: 						var(--Width_MenuButtonS);
  }
}

.footer_menu_lang	{
		display:					flex;
		height: 					var(--Height_FooterMenu1);
		padding-top:				var(--Height_MenuButtonMargin); /**/
		align-items:				flex-start;
	/*	flex-wrap: 					wrap; */
		justify-content:			center;
	/*	background-color:			var(--Color_Mgrey0); /**/
		z-index:					3;
	}
	
.footer_menu_social	{
		display:					flex;
		height: 					var(--Height_FooterMenu2);
	/*	padding-top:				16px; /**/
		align-items:				flex-start;
	/*	flex-wrap: 					wrap; */
		justify-content:			space-around;
		background-color:			var(--Color_Mgrey0); /**/
		z-index:					3;
	}
	
	.social	{
		width:						24px;
		height:						24px;
		padding: 					0px;
		margin:		 				0px;
	/*	text-decoration:			none;													/*	hide underlining	*/
	/*	outline:					none;													/*	keep firefox dotted lines out of clicked links	*/
	/*	font-size:					24px;													/**/
		overflow:					hidden;
		background-color:			var(--Color_Lgrey3);
		background-size:			100%;												/**/
	/*	display:					block;			/* make the whole thing clickable */
		z-index:					3;
	}
	
	.social:hover	{
		background-color:			var(--Color_Mochre0);									/*fill the whole div with new background color */
	}

	
	.social	a:hover	{
		background-color:			var(--Color_Mochre0);
	}
	
	.share	{
		width:						46px;
		height:						24px;
		padding-top:				11px; /**/
		font-size:					11px;
		font-family:				logoType, verdana, tahoma, sans-serif;
		color:						var(--Color_Dgrey2);
		text-align:					center;
		overflow:					hidden;
	/*	background-color:			var(--Color_Mgrey0); */
		z-index:					3;
	}
	

/*
	portfolio classes
	*/
	
	.item_portfolio	{
		width:						var(--Width_ImagePortfolio);
		height:						var(--Width_ImagePortfolio);
		margin-left:				var(--Size_Margin);
		margin-top:					var(--Size_Margin);
		background-color:			var(--Color_Lgrey3);	/*	var(--Color_Mochre0);	*/
		}
	
	.item_portfolio:hover	{															/*fill the whole div with new background color */
	/*	border: 					1px;	/**/
	/*	border-color: 				var(--Color_Mochre0);	*/
	}

	
	.item_portfolio	a:hover	{
	/*	border: 					1px;	/**/
	/*	border-color: 				var(--Color_Mochre0);	*/
	}	
	
	.item_portfolioF	{
		width:						984px;
		height:						308px;
		margin-left:				var(--Size_Margin);
		margin-top:					var(--Size_Margin);
		background-color:			var(--Color_Lgrey3);	/*	var(--Color_Mochre0);	*/
		border-style: 				solid;
		border-color: 				var(--Color_Lgrey3);
		border-width: 				1px;
		overflow: hidden;
		}
		
				/* Responsive layout - */
@media (max-width: 1500px) {
  .item_portfolioF {
	  width: 						646px;
	  height: 						308px;	/**/
  }
}

@media (max-width: 1100px) {
  .item_portfolioF {
	  width: 						308px;
	  height: 						308px;	/**/
  }
}
	
	.item_portfolioF:hover	{															/*fill the whole div with new background color */
	/*	border-style: 				solid;	*/
	/*	border-width: 				1px;	*/
		border-color: 				var(--Color_Dgrey2);
	}

	
	.item_portfolioF	a:hover	{
	/*	border-style: 				solid;	*/
	/*	border-width: 				1px;	*/
		border-color: 				var(--Color_Dgrey2);
	}
	
	.item_portfolioFimg	{
		width:						984px;
		height:						308px;
		margin-left: 				50%;
		transform:					translateX(-50%);
	}
	
	
	.img_transparancy	{
		opacity:					1.0;
	}
	
	.img_transparancy:hover	{
		opacity:					0.93;
	}

	.img_transparancy a:hover	{
		opacity:					0.93;
	}

/*
spacer classes

*/

	.textspacerM	{
		height: 					var(--Size_MarginM);
	}
	
	.textspacerS	{
		height: 					var(--Size_MarginS);
	}

	.portfoliospacer	{
		height:						var(--Size_Margin);
		width:						var(--Width_Large);
	/*	background-color:			red; /**/
	}
	
	
		/* Responsive layout - */
@media (max-width: 1500px) {
  .portfoliospacer {
	  width: 						var(--Width_Medium);
  }
}

@media (max-width: 1100px) {
  .portfoliospacer {
	  width: 						var(--Width_Small);
  }
}

.portfoliospacerM	{
		height:						var(--Size_MarginM);
		width:						var(--Width_Large);
	/*	background-color:			red; /**/
	}
	
			/* Responsive layout - */
@media (max-width: 1500px) {
  .portfoliospacerM {
	  width: 						var(--Width_Medium);
  }
}

@media (max-width: 1100px) {
  .portfoliospacerM {
	  width: 						var(--Width_Small);
  }
}

	.menuspacer_side	{
		width:						var(--Size_Margin);
	}
	
	.menuspacer_tween	{
		width:						var(--Width_MenuTween);
	}
	
	/* Responsive layout - */
@media (max-width: 1500px) {
  .menuspacer_tween {
	  width: 						0px;
  }
}

@media (max-width: 1100px) {
  .menuspacer_tween {
	  width: 						0px;
  }
}
	
	.menuspacer_mid		{
		width:						var(--Width_MenuMid);
		/* background-color: 			black; */
	}
	
		/* Responsive layout - */
@media (max-width: 1500px) {
  .menuspacer_mid {
	  width: 						var(--Width_MenuMidS);
  }
}

@media (max-width: 1100px) {
  .menuspacer_mid {
	  width: 						0px;
  }
}



/*
body

*/

body	{
	margin: 						0px;													/* use full page */
	/* overflow:			hidden;		/*keep body from scrolling*/
	/* position:			static; /*!!!!!!!!!!!!!!!!!!!!!!*/
}


/*
container

*/




h1 span {																		/* move span out of sight */
	/* position: absolute; */		/* causes position problem in firefox & IE */
	/* left: -2000em; */
	display:			none;
}

h2 span {																		/* move span out of sight */
	/* position: absolute; */		/* causes position problem in firefox & IE */
	/* left: -2000em; */
	display:			none;
}

h3 span {																		/* move span out of sight */
	/* position: absolute; */		/* causes position problem in firefox & IE */
	/* left: -2000em; */
	display:			none;
}

h4 span {																		/* move span out of sight */
	/* position: absolute; */		/* causes position problem in firefox & IE */
	/* left: -2000em; */
	display:			none;
}
 
/*
copied from project.css

*/

.TextTitle	{
		width:						var(--Width_SminM);								/**/
		height:						20px;											/* var(--Size_Margin); */
		font-family:				logoTypeB, verdana, tahoma, sans-serif;
		text-align:					left;											/**/
		padding-left:				var(--Size_Margin);								/*	var(--Size_Margin);	*/
		font-size:					var(--Height_TextTitle);
		color:						var(--Color_Dgrey2);
	/*	padding-top: 				2px;											/**/
	/*	background-color: 			grey;											/**/
	}
	
.TextTitleI	{
		width:						var(--Width_SminM);								/**/
		height:						20px;											/* var(--Size_Margin); */
		font-family:				logoTypeB, verdana, tahoma, sans-serif;
		text-align:					left;											/**/
		padding-left:				0px;								/*	var(--Size_Margin);	*/
		padding-top: 				60px;
		font-size:					16px;
		color:						var(--Color_Dgrey2);
	/*	padding-top: 				2px;											/**/
	/*	background-color: 			grey;											/**/
	}

@media (max-width: 1100px) {
  .TextTitleI {
		padding-top: 				0px;
  }
}
	
	
	.TextTitleMargin	{
		width:						var(--Width_SminM);								/**/
		height:						20px;											/* var(--Size_Margin); */
		float:						none;
		font-family:				logoTypeB, verdana, tahoma, sans-serif;
		text-align:					left;											/**/
		padding-left:				var(--Size_Margin);								/*	var(--Size_Margin);	*/
		font-size:					var(--Height_TextTitle);
		color:						var(--Color_Dgrey2);
		margin-top: 				10px;											/**/
	/*	background-color: 			grey;											/**/
	}

	.lineleft	{
		width:						1008px;
		height:						2px;
		margin-left: 				17px;	/**/
		background-image: 			url(../img/projects/large/lineleft.png);
	/*	background-repeat: 			no-repeat;										/**/
		background-size:			100%;
	/*	background-color: 			grey;											/**/
	}
	
							/* Responsive layout - */
@media (max-width: 1500px) {
  .lineleft {
		width:						670px;;
  }
}

@media (max-width: 1100px) {
  .lineleft {
		width:						332px;
  }
}

.lineleftS	{
		width:						332px;
		height:						2px;
		margin-left: 				17px;	/**/
		background-image: 			url(../img/projects/large/lineleft.png);
	/*	background-repeat: 			no-repeat;										/**/
		background-size:			100%;
	/*	background-color: 			grey;											/**/
	}


	.lineright	{
		width:						1008px;
		height:						2px;
		margin-left: 				17px;	/**/
		background-image: 			url(../img/projects/large/lineright.png);
	/*	background-repeat: 			no-repeat;										/**/
		background-size:			100%;
	/*	background-color: 			grey;											/**/
	}
	
							/* Responsive layout - */
@media (max-width: 1500px) {
  .lineright {
		width:						670px;
  }
}

@media (max-width: 1100px) {
  .lineright {
		width:						332px;
  }
}

.summary	{
		height:						var(--Width_ImagePortfolio);
		width:						var(--Width_LminM2);
		font-family:				logoType, verdana, tahoma, sans-serif;
		text-align:					left;											/**/
		font-size:					var(--Height_Text);
		color:						var(--Color_Dgrey2);
		word-break: 				normal;
		word-wrap: 					normal;
		margin-left: 				var(--Size_Margin);
		padding-top: 				7px;
		padding-bottom: 			4px;
		margin-bottom: 				4px;
	/*	padding-right:				100px;											/**/
	/*	background-color: 			aqua;											/**/
	}
	
								/* Responsive layout - */
@media (max-width: 1500px) {
  .summary {
		width:						var(--Width_MminM2);
  }
}

@media (max-width: 1100px) {
  .summary {
		width:						var(--Width_SminM2);
  }
}


/*
Article Styling

*/