/***** FONTS *****/

@font-face {
    font-family: 'portFontRegular';
    src: url("fonts/portFont-Regular.otf"); 
	font-style: normal;
}
@font-face {
    font-family: 'portFontMedium';
    src: url("fonts/portFont-Medium.otf"); 
	font-style: normal;
}
@font-face {
    font-family: 'portFontBold';
    src: url("fonts/portFont-Bold.otf"); 
	font-style: normal;
}
@font-face {
    font-family: 'portFontSemibold';
    src: url("fonts/portFont-Semibold.otf"); 
	font-style: normal;
}

html, body, div, ul, li{margin:0 auto;padding:0;font-size:100%;color: #5F5F5F;font-family:"portFontRegular", times, serif;}

.flex-container {
	display:flex;
	}




/*BASE*/

body {
	width:100%;
	background-color: white;
}

a{color:#6B95D0;text-decoration:none;}
	a:hover{text-decoration:underline;color:#C83B96;}
	a img{height:.65rem;fill:#6B95D0;}
	a:hover img{fill:#C83B96;}
h1{font-family:"portFontMedium";font-size:16pt;}

dl > a{font-family:sans-serif;font-size:12pt;color:#FF7719;font-weight:500;}


	/*BG*/

	#bgOne {
		background-color: #FCFCF7;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
	}
	#bgTwo {
		background-color: #FBF8F3;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
	}
	#bgThree {
		background-color: #F7F3EE;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
	}

	.mainBody {
		width: 100%;
		height: 100%;
		background-color:#F4F0EB;
		padding: 0px 0px 75px 0px;
	}


/***** CONTENT *****/

* {
box-sizing: border-box;
}

.headBlock { 
display: grid;
grid-template-columns: 0.25fr 1fr;
gap: 5px;
align-items: center;
width: 95%;
padding-left:15%;
max-width:900px;
background-color:white;
padding:0px; 
height:50px;

}


	.homeLink {
		grid-column: 1;
		grid-row: 1;
		min-width:180px;
	}
		.homeLink > a {
			font-family:"portFontMedium";font-size:16pt;
		}
	.contactLink {
		grid-column: 4;
		grid-row: 1;
	}

/*	.projectBlock {
		width: 98%;
		max-width: 900px;
		margin: 0 auto;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
		grid-auto-rows: minmax(100px, auto);

	}
*/
/*TEMP
.headBlock > div {
	border: 2px solid rgb(233 171 88);
}

.csProjectBlock > div {
	border: 2px solid rgb(233 171 88);
}
.projectTopWrapper > div {
	border: 2px solid rgb(233 171 88);
}
*/

/* CASE STUDY */

.csProjectBlock {
	width: 100%;
	max-width: 900px;
	margin:0px auto;
	margin-top: 20px;
}

.projectTopWrapper {
	display: grid;
	grid-template-columns: 1fr 180px;
	gap: 5px;
	width:100%;
	line-height: 13pt;
	flex-direction: row;
	align-items: stretch;
	padding:10px 0px;
	max-width:900px;
}
	.csProjectText {
		margin:0px;
		grid-row: 1;
		display:flex;
		flex-direction: column;
		flex-alignnment:left;
	}
	.csProjectText dl{display:flex;flex-direction: row;border-top: 1px solid;padding:0;margin:0;width:100%;min-width: 180px;}
		dt{width:15%;min-width:80px;max-width:90px;}
		dt, dd{vertical-align:middle;padding:3px 0px;}

	
		.csTextLine {
			
		}

		.csTextLine > dt {
			width:50%;
		}
		.csTextLine > dd {
			width:50%;
		}

	
	.projectIcons.csIcon {
		grid-row: 1;
		max-width: 160px;
		margin:0px;
	}


.projectCSWrapper {
	width:98%;
}

	.csTextContent {
		margin:0px 0px 20px 0px;
	}
	
	.csImageContent {
		width:100%;
		margin-bottom:20px;
	}
		.csImageContent > img {
			width:100%;
		}
	
/*	.projectScreens {
		grid-column: 1 / 3;
		grid-row: 1 / 3;
	}
8?

	/* CASE STUDY TITLE */

		dl.csTextLine {
			border-top: 1px solid;
			font-size: 12pt;
			padding: 0.5em 0em 0em 0em;
			margin: 0px 0px 8px 0px;
		}

		dl.csTextLine.csProject {
			font-family: "portFontSemibold";
			border: none;
			margin:0px 0px 10px 0px;
		}
		dl.csTextLine.csCo {
	
		}
		dl.csTextLine.csRole {

		}
		dl.csTextLine.csType {
	
		}

		ul {
			list-style-type: none;
	        color:#999999;
			text-indent:20px;
			margin-left:13px;
		}
			ul li:before {
		        content: "- ";
		        margin-left: -30px;
			}
			
			.ulTitle {
				font-family: "portFontMedium";
			}
			
		#prebidList {
			border:none;
			overflow:hidden;
			width:98%;
			max-width:325px;
			margin-top:-10px;
		}
			#prebidList > dt {
				width:100%;
				max-width:100%;
				line-height:13pt;
				margin-top:10px;
				padding-left:2px;
			}
				dt.greenLn {
					border-bottom: 1px solid #76B667;
				}
				dt.redLn {
					border-bottom: 1px solid #F5917A;
				}
	
					.lvlOne {
						
					}
					.lvlTwo {
						margin-left:10px;
						padding-right:10px;
					}
					.lvlThree {
						margin-left:20px;
						padding-right:20px;
					}

/*******************************************/
/*************** BREAKPOINTS ***************/	
/*******************************************/


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 599px)
	{
	
		/*BASE*/
			#bgOne {
				width:100%;
			}
			#bgTwo {
				width:100%;
			}
			#bgThree {
				width:100%;
			}

			.mainBody{
				width:100%;
				max-width:320px;
				overflow:hidden;
			}
			
		/*CASE STUDY*/
		
		.projectTopWrapper {
			width:320px;
/*			overflow:hidden;*/
		}

		dl.csTextLine {
			line-height: 1.0rem;
			padding: 0.5em 0em 0em 0em;
			margin: 0px 0px 8px 0px;
		}
		
		.csProjectText {
			grid-column: 1;
			width:190px;
			margin:0px 0px 0px 10px;
		}

		dl.csTextLine.csProject {
			font-size: 16pt;
		}

		.projectIcons.csIcon {
			grid-column: 2;
			margin-top:5px;
		}
		.projectIcons.csIcon > img {
			max-width:135px;
			margin-left:-10px;
		}
		
			
			
	.projectCSWrapper {
		width:95%;
	}
	
		.csTextContent {
			max-width:850px;
		}	
		.csTextLine > dd {
			margin-left: 5px;
		}
		.csImageContent {
			width:100%;
			min-width:420px;
			overflow: hidden;
		}	
		.csImageContent > img {
			width: 550px;
			overflow: hidden;
		}
		
		
	}	

/* mid-width breakpoint, for most modern phones */ 
@media (min-width: 375px) and (max-width: 599px)
	{
	
		/*BASE*/
			#bgOne {
				width:100%;
			}
			#bgTwo {
				width:100%;
			}
			#bgThree {
				width:100%;
			}

			.mainBody{
				width:100%;
				max-width:426px;
				overflow:hidden;
			}
			
		/*CASE STUDY*/
		
		.projectTopWrapper {
			width:426px;
/*			overflow:hidden;*/
		}

		dl.csTextLine {
			line-height: 1.0rem;
			padding: 0.5em 0em 0em 0em;
			margin: 0px 0px 8px 0px;
		}
		
		.csProjectText {
			grid-column: 1;
			width:85%;
			max-width:270px;
			margin:0px 0px 0px 10px;
		}

		dl.csTextLine.csProject {
			font-size: 16pt;
		}

		.projectIcons.csIcon {
			grid-column: 2;
			margin-top:5px;
		}
		.projectIcons.csIcon > img {
			max-width:175px;
			margin-left:-35px;
			margin-top:-20px;
		}
		
	.projectCSWrapper {
		width:95%;
	}
	
		.csTextContent {
			max-width:850px;
		}	
		.csTextLine > dd {
			margin-left: 5px;
		}
		.csImageContent {
			width:100%;
			min-width:420px;
			overflow: hidden;
		}	
		.csImageContent > img {
			width: 550px;
			overflow: hidden;
		}
		
		
	}	
			
/* All the rest, for now */
@media only screen and (min-width: 600px)

{	
	/*BASE*/
		#bgOne {
			width:94%;
		}
		#bgTwo {
			width:94%;
		}
		#bgThree {
			width:94%;
		}

		.mainBody {
			width:94%;
			max-width:1080px;
		}
		
			.projectTopWrapper {
				width:99%;
				max-width:825px;
				margin-left:0px;
			}
			dl.csTextLine {
				line-height: 1.2rem;
			}
			
				.csProjectText {
					grid-column: 1;
					min-width:250px;
					width:95%;
					margin-left:10px;
				}

				dl.csTextLine.csProject {
					font-size: 18pt;
				}
		
				.projectIcons.csIcon {
					grid-column: 2;
				}
				.projectIcons.csIcon > img {
					max-width:225px;
					margin:-35px 0px 0px -10px;
				}		

				#targIcon {
					margin-top:10px;
				}
					#targIcon > img {
					
					}

				
		.projectCSWrapper {
			max-width:900px;
			margin:0px auto;
		}
				
			.csTextContent {
				max-width:800px;
			}	
			.csTextLine > dd {
				margin-left: 25px;
			}
			.csImageContent {
				max-width:800px;
				margin:0px;
			}
			.csImageContent > img {
				width:100%;
			}
				
				
}