@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&family=Poppins:ital,wght@0,100;0,200;0,400;0,500;1,400&display=swap');




body { 
	margin: 0; 
	padding: 0 10px; 
	padding-top: 20px;
	background-color: #fff; 
	font-family: "Poppins", sans-serif; 
	font-size: 16px; 
	font-weight:  400;
	color: #555; 
	line-height: 1.3em; 
}
h1 {

}
h2 { 
	font-family: "Open Sans", sans-serif; 
	font-size: 18px; 
	color: #BD5910; 
	font-weight: bold; 
	margin-top: 0px; 
	margin-bottom: 8px;}
h3 { 
	font-family: "Open Sans", sans-serif; 
	font-size: 16px; 
	color: #666; 
	font-weight: bold; 
	margin-top: 0px; 
	margin-bottom: 6px;  
	padding-top: 6px; /* border-top: 1px solid .ddd; */
}
p { 
	margin-top: 0px; 
	line-height: 1.3em; 
}
a, a:visited  { 
	color: #336699; 
}
a:hover { 
	color: #bd5910; 
}
img { 
	border: 0; 
}
strong {
	font-weight: 500;
	color: #000;
}

.container { 
	display: block; 
	max-width: 1200px; 
	padding: 0 5px; 
	margin: auto; 
	margin-top: 20px; /* background: #efefef; */
	position:relative;
	/*Z-index: 1;*/
}

#cpdesign_hype_container {
	/*display: block;
	position: relative;*/
	/*z-index: 1;*/
}

/* ******* TOP BAR ******* */
.topBar {
	height: 40px; 
	width: 100%;
	padding-bottom:  0px;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	}
div.logo { 
	font-family: 'Open Sans', sans-serif;
}
.logo a {font-family: "Open Sans", sans-serif; 
	font-size: 36px; 
	color: #bd5910; 
	font-weight: 600; 
	margin-top: 0px; 
	margin-bottom: 0px;
	text-decoration:  none;
}
.tagline {
	font-size: 19px;
	text-transform: lowercase;
}
div.contactNav {
	}
.contactNav a { 
	display: block; 
	/* width: 54px; 
	height: 40px;  */
	color:  #369;
	text-decoration: none;
	font-size: 18px;
	font-weight: bold;
}
div.contactNav a:hover, .contactNav.on a {  
	color:  #bd5910;
}

/* ***** NAV ***** */

.toggle-button {
	position: absolute;
	top: .75rem;
	right: 1rem;
	display: none;
	flex-direction: column;
	justify-content: space-between;
	width: 30px;
	height: 21px;
}

.toggle-button .bar {
	height: 3px;
	width: 100%;
	background-color: white;
	border-radius: 10px;
}





.nav { 
	max-width: 1200px;
	height: 30px;
	background: #369; 
	height:  60px;
	display: flex;
	justify-content: center;
	align-items:  center;
	}
.nav ul {	
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	height: 30px;
	display: flex;
	justify-content:  space-between; 
	align-items:  center;
	}
.nav ul li {
	margin: 0px;
	padding: 0px;
	display: block;
	/*float: right;*/
}
.nav ul li a {
	display: block;
	/*height: 40px;*/
	font-size: 16px;
	color:  #9cf;
	text-decoration:  none;
	margin-right:  2rem;
	text-transform: uppercase;
}
.nav ul li a:hover, .nav ul li a.on {
	color: #fff;
}
.nav ul li.clientsNav {
	display: none;
}
.nav ul li.contactNav2 {
	display: none;
}

/* ***** HEADER BAR ***** */

.headerBar { 
	display: block; 
	clear: both;  
	border: 0; 
	padding: 0; 
	margin: 0; 
	max-width: 1200px;
	/* height: 60px;*/
	height: auto;
	margin-top: 0; 
	background: #4483b1; 
	text-align: right;	
	color: #fff;
	/* font-family: "Open Sans", sans-serif;*/
}
.headerBar h1 {
	font-size: 26px;

	line-height: 1.3em;
	color: #dfe9ef;
	margin: 0;
	font-weight: 300;
	padding-right: 2rem; 
	padding-top: .5em;
	padding-bottom: .5em;
	text-transform: lowercase;
}
.headerBar h1 span.nobreak {
	white-space: nowrap;
}	


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

.content { 
	max-width: 1200px;
	margin-top: 2px;  
	display:  grid;
	/*grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));*/
	grid-template-columns: 1fr 1fr 1fr;
	column-gap:  5%;
}


.leftCol { 
	/*width: 280px;*/ 
	/*padding-left: 370px; */
	padding-top: 30px; 
	padding-bottom: 20px;
	grid-column: 1/2;
	grid-row: 1/4;
}
.midCol { 
	/*width: 280px; */
	/*padding-left: 50px;*/ 
	padding-top: 30px; 
	padding-bottom: 20px; 
	grid-column: 2/3;
	grid-row: 1/4;
}
.rightCol { 	 
	/*width: 280px; */
	/*padding-left: 50px;*/ 
	padding-top: 30px; 
	padding-bottom: 20px; 
	padding-right: 1em;
	grid-column: 3/4;
	grid-row: 1/4;
}

.thumbCol {
	padding-top: 30px;
	padding-bottom: 20px;
	
}

.introductionPage .leftCol { 
	background: url(../images/backgrounds/manzo_tilt.jpg) no-repeat; 
}
.servicesPage .leftCol { 
	background: url(../images/backgrounds/springshed_tilt.jpg) no-repeat; 
}
.designPage .leftCol { 
	background: url(../images/backgrounds/conlon_tilt.jpg) no-repeat; 
}
.clientsPage .leftCol { 
	background: url(../images/backgrounds/parks_tilt.jpg) no-repeat; 
}
.aboutPage .leftCol { 
	background: url(../images/backgrounds/az_tilt.jpg) no-repeat; 
}
.contactPage .leftCol { 
	background: url(../images/backgrounds/app_tilt.jpg) no-repeat; 
}



/* ***** BOTTOM BAR ***** */

.bottomBar {
	max-width: 1200px;
	height: 30px;
	margin-top: 0; 
	background: #4483b1; 
}

/* ***** FOOTER ***** */

.footer { 
	
	width: 100%;
	max-width: 1200px; 
	background-color: #369; 
	height: 60px; color: #B0C8DE; 
	font-size: 16px; 
	margin-bottom: 20px;
	display: flex; 
	justify-content:  space-between; 
	align-items:  center;
}
.footer a { 
	text-decoration: none; 
	color: #B0C8DE; 
}
.footer a:hover { 
	color: #fff; 
}

.contactLeft { 
	width: 300px; 
	margin-left: 30px; 
	margin-top: 6px; 
}
.contactRight { 
	width: 300px; 
	margin-right: 30px; 
	text-align: right; 
	margin-top: 6px; 
}

/* ***** END FOOTER ***** */



/* ***** CLIENT LIST ***** */

ul.clientList { 
	list-style-type: none;  
	padding: 0;
}


/* ***** CONTACT SPECIFIC ***** */

ul.contactList { 
	list-style-type: none;  
	padding: 0; 
	padding-left: 10px;
}
ul.contactList  li { 
	margin-bottom: 4px; 
	font-style: italic;
}




/* ***** PORTFOLIO ***** */

.portfolioContent { 
	max-width: 1200px;
	margin-top: 2px;  
	display:  grid;
	grid-template-columns: 1fr 1fr;
	column-gap:  5%;
}

.portfolio h2 {
	font-size: 1.5em;
	margin-bottom: 15px;
}
.portfolioPage  h2 {
	font-size: 1.1em;
	margin-bottom: 3px;
}
.site a {
	text-decoration: none;
}


.leftCol.portfolio { 
	/* float: left;  */
	/* width: 500px;  */
	padding-left: 0px; 
	padding-top: 30px; 
	padding-bottom: 20px;
}
.rightCol.portfolio { 
	/* float: right;  */
	/* width: 430px;  */
	padding-right: 30px; 
	padding-left: 0; 
	padding-top: 30px; 
	padding-bottom: 20px;
}

ul.projectList { 
	list-style-type: none; 
	margin: 0; 
	padding: 0; 
	margin-bottom: 12px; 
}
ul.projectList li { 
	margin-bottom: 4px; 
}

ul.linkList { 
	list-style-type: none; 
	margin: 0; 
	padding: 0;  
}
ul.linkList li { 
	margin-bottom: 1px; 
}
ul.linkList li a { 
	text-decoration: none; 
	font-size: 16px; 
}
.site ul.linkList li a { 
	text-decoration: none; 
	font-size: 16px; 
}
span.arrow { 
	font-size: 20px; 
}
.site {
	display: grid;
	grid-template-columns: 140px 1fr;
}

.portfolio a {
	font-size: 16px;
}
.portfolioDetail h1 span {
	text-transform: capitalize;
	color: #fff;
}
ul.projectList {
	margin-bottom: 25px;
}

.portfolioDetail .detailContent {
	padding: 20px 0;
	display: grid;
	grid-gap: 0 30px;
	grid-template-columns: 500px 1fr;
	grid-template-areas:
	"imageDiv lede"
	"imageDiv text1" 
	"imageDiv text2";
}
.imageDiv {
	grid-area: imageDiv;
}
.lede {
	grid-area: lede;
}
.text1 {
	grid-area: text1;
}
.text2 {
	grid-area: text2;
}



/* HOME */
.contentHome { 
	margin-top: 20px; 	
	min-height: 430px;
	padding-bottom: 20px;
	display: grid;
	grid-template-columns: minmax(700px, 1fr)
}
.homeLeft {
	max-width: 720px;	
	min-height: 420px;
}
#cpdesign_hype_container {
	min-height: 420px;
}
.homeRight {
	padding-left: 30px;
	padding-right: 20px;
}
.home h2 {
	color: #bd5910;
	font-size: 24px;
	line-height: 30px;
	margin-bottom: 20px;
}
.home .headerBar h1 {
	font-size: 26px;
	line-height: 1.3em;
	color: #dfe9ef;
	margin: 0;
	font-weight: 300;
	padding-right: 2rem; 
	text-transform: none;
	text-align: center;
}
span.inPage {
	display: inline-block;
	padding-left: 15px;
}


/* Menu stuff */

/*.navbar {
display: flex;
position: relative;
}
*/

.toggle-button {
	position: absolute;
	top: .75rem;
	right: 1rem;
	display: none;
	flex-direction: column;
	justify-content: space-between;
	width: 30px;
	height: 21px;
}

.toggle-button .bar {
	height: 3px;
	width: 100%;
	background-color: #666;
	border-radius: 10px;
}



/* MEDIA QUERIES */

@media only screen and (max-width: 913px) {
	div.contactNav {
		display: none;
	}
	.nav ul li.contactNav2 {
		display: list-item;
	}
	
	.topBar {
		flex-direction: column;
		justify-content: center;
		margin-bottom: .8em;		
	}
	.tagline {
		padding-top: 6px;
	}
	
	.content { 		
		margin-top: 2px;  
		display:  grid;	
		grid-template-columns:  .5fr .5fr 1fr 1fr 1fr 1fr;
		column-gap:  4%;
	}
	
	.leftCol { 
		padding-top: 30px; 
		padding-bottom: 20px;
		grid-column: 1 / 4;
		grid-row: 1;
	}
	.midCol { 
		
		padding-top: 30px; 
		padding-bottom: 20px; 
		grid-column: 3 / 5;
		grid-row: 1;
	}
	.rightCol { 	
		padding-top: 30px; 
		padding-bottom: 20px; 
		padding-right: 1em;
		grid-column: 5 / 7;
		grid-row: 1;
	}
	.portfolioContent { 
		max-width: 1200px;
		margin-top: 2px;  
		display:  grid;
		grid-template-columns: 1fr;
		column-gap:  5%;
	}
	.thumbCol {
		margin: 0;
		margin-bottom: 0;
		padding-bottom: 0;
	}

	.site {
		display: grid;
		grid-template-columns: 140px 1fr;
	}
	.portfolioDetail .detailContent {
		padding: 20px 0;
		display: grid;
		grid-gap: 0 20px;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
		grid-template-areas:
		"imageDiv imageDiv imageDiv imageDiv lede lede"
		"text1 text1 text1 text2 text2 text2" 
	}
	.text1, .text2 {
		margin-top: 20px;
	}
	ul.projectList { 
		margin-bottom: 0; 
	}

}

/*NAV */

@media (max-width: 913px) {
	
.navbar {
	flex-direction: column;
	align-items: flex-start;
}

.toggle-button {
	display: flex;
}

.nav {
	width: 100%;
	height: auto;
	background: #369;
	position: relative;
	z-index: 200;
	
	display: none;
}

.nav ul {
	background: #369;
	height: auto;
	padding-top: 30px;
	/*margin-top: 30px;*/
	padding-bottom: 30px;
	/*margin-bottom: 30px;*/
	position: absolute;
	top: 0px;
	width: 100%;
	flex-direction: column;
}
.nav ul li {
	text-align: right;
	background: #369;	
}
.nav ul li a {
	padding: .5rem 1rem;
	font-size: 1.4em;
}
.contactNav {
	display: none;
}
.contactnav2 {
	display: list-item;
}
.nav.active {
	display: flex;
}

}


/* PHONE */

@media (max-width: 415px) {
	
	div.logo a {
		font-size: 27px;
	}
	.tagline {
		font-size: 14px;
	}
	.home .headerBar h1 {
		font-size: 20px !important;
		padding-right: 0;
	}
	
	.content { 
		margin-top: 2px;  
		display:  grid;
		grid-template-columns:  1fr;
		column-gap:  5%;
	}
	
	.leftCol { 
		padding-top: 20px; 
		padding-bottom: 20px;
		grid-column: 1;
		grid-row: 1;
	}
	.midCol { 
		
		padding-top: 30px; 
		padding-bottom: 10px; 
		grid-column: 1;
		grid-row: 2;
	}
	.rightCol { 	
		
		padding-top: 10px; 
		padding-bottom: 20px; 
		padding-right: 1em;
		grid-column: 1;
		grid-row: 3;
	}
	
	.bottomBar {
		height: 12px;
	}
	.footer {
		display: block;
		height: 80px;
		padding-top: 24px; 

	}
	.contactLeft { 
		width: auto; 
		margin: auto; 
		text-align: center; 
		
	}
	.contactRight { 
		width: auto; 
		margin: auto; 
		text-align: center; 
		padding-top: 6px; 
		
	}
	
	
	.portfolioDetail .detailContent {
		padding: 20px 0;
		display: grid;
		grid-gap: 0;
		grid-template-columns: 360px 1fr;
		grid-template-areas:
		"imageDiv"
		"lede"
		"text1"
		"text2" 
	}
	.text1, .text2 {
		margin-top: 0px;
	}
	.lede {
		margin-top: 20px;
	}
	.portfolioDetail .detailContent .imageDiv img {
		width: 100%;
		height: auto;
		
	}
	
	
	
	.contentHome { 
		margin-top: 20px; 	
		min-height: 207px;
		padding-bottom: 20px;
		display: grid;
		grid-template-columns: minmax(345px, 1fr)
	}
	.homeLeft {
		max-width: 100%;	
		min-height: 207px;
	}
	#cpdesign_hype_container {
		min-height: 207px;
	}
	.homeRight {
		padding-left: 0;
		padding-right: 0;
		padding-top: 15px;  
		margin-bottom: 0;
	}
	.homeRight h2 {
		font-size: 18px;
		line-height: 1.4em;
	}
	
	.contactPage div.spacer {
		display: none !important;
	}
	
}