/*//// PAGE - page.php ////*/


/*//// PROJECT SECTION ////*/
section.page-project-section {
	padding-bottom: 4rem;
	padding-bottom: 8rem;
}
section.page-project-section div.page-project-container {
	padding-left: 13rem;
	text-align: right;
}



/*// PROJECT CONTENT FLEX //*/
div.project-flex-container {
    width: 100%;
    max-width: 119.3rem;
    min-height: 75rem;
    margin: 0 0 0 auto;
    justify-content: space-between;
}
/*/ LEFT /*/
div.project-flex-container div.left-project-flex-item {
	box-sizing: border-box;
	position: relative;
	width: 100%;
	max-width: 58.3rem;
	padding-top: 17rem;
	/*border: 1px solid red;*/
}
div.slider#home-page-hero-slider { }

div.hero-slide img.hero-image {
	width: 100%;
	height: auto;
}

/*/ RIGHT /*/
div.project-flex-container div.right-project-flex-item {
	box-sizing: border-box;
	position: relative;
	width: 100%;
	max-width: 60.8rem;
	padding-top: 17rem;
	padding-left: 5.5rem;
	padding-right: 8rem;
	padding-bottom: 3rem;
	text-align: left;
	/*border: 1px solid red;*/
}
div.right-project-flex-item h1 {
	position: absolute;
	z-index: 100;
	top: -1.7rem;
	left: -9.5rem;
	right: 0;
	padding: 2rem 3rem 2rem 6rem;
	font-style: normal;
	font-weight: 300;
	font-size: 3.6rem;
	line-height: 4.5rem;
	color: #ffffff;
	text-align: left;
	background-color: #73819B;
}
div.right-project-flex-item h1:after {
	display: none;
	position: absolute;
	z-index: 101;
	top: .8rem;
	right: 1.3rem;
	width: 5rem;
	height: 2.5rem;
	content: '';
	background-size: auto;
	background-repeat: no-repeat;
	background-image: url('../img/blakelock-double-yellow-arrow.png');
}
/*/ DETAILS /*/
div.project-details-flex-container { }
div.project-details-flex-container:first-of-type {
	margin-bottom: 1.6rem;
}
div.project-details-flex-item {
	box-sizing: border-box;
	position: relative;
}
div.project-details-flex-item p {
	font-style: normal;
	font-weight: normal;
	font-size: 1.4rem;
	line-height: 3.2rem;
	color: #000000;
}
div.horizontal-rule {
	width: 100%;
	max-width: 42rem;
	height: 0px;
	margin: 1rem 0 2rem 0;
	padding: 0;
	border-bottom: 1px solid #73819B;
}
div.right-project-flex-item p {
	font-style: normal;
	font-weight: 300;
	font-size: 1.6rem;
	line-height: 2rem;
	color: #000000;
}
div.right-project-flex-item p span {
	font-weight: 600;
}
div.right-project-flex-item div.project-content {
	padding-left: 3.8rem;
}
div.right-project-flex-item div.project-content p {
	width: 90%;
	font-style: normal;
	font-weight: 300;
	font-size: 1.6rem;
	line-height: 2.25;
	letter-spacing: 0.05em;
	color: #000000;
}
div.right-project-flex-item a.read-more-link {
	position: relative;
	float: right;
	width: 100%;
	max-width: 35.5rem;
	margin-top: 3.4rem;
	padding-bottom: 0.4rem;
	padding-left: 2.2rem;
	font-style: normal;
	font-weight: bold;
	font-size: 1.4rem;
	line-height: 1.8rem;
	color: #000000;
	border-bottom: 1px solid #73819B;
	transition: all .3s ease;
}
div.right-project-flex-item a.read-more-link:hover {
	color: #2C67D3;
}

div.right-project-flex-item a.read-more-link:after {
	position: absolute;
	z-index: 101;
	top: 47%;
	left: .4rem;
	transform: translateY(-50%);
	width: 1.9rem;
	height: 1.3rem;
	content: '';
	background-size: auto;
	background-repeat: no-repeat;
	background-image: url('../img/blakelock-single-blue-arrow.png');
	transition: all .3s ease;
}
div.right-project-flex-item a.read-more-link:hover:after {
	left: .6rem;
}



/*//// PROJECT NAVIGATION SECTION ////*/
section.project-navigation-section {
	padding-bottom: 8rem;
}
section.project-navigation-section div.project-navigation-container {
	padding-left: 13rem;
	text-align: right;
}
/*// NAVIGATION CONTENT FLEX //*/
div.navigation-flex-container {
    width: 100%;
    max-width: 119.3rem;
    margin: 0 0 0 auto;
    justify-content: space-between;
}
/*/ LEFT /*/
div.navigation-flex-container div.left-navigation-flex-item {
	box-sizing: border-box;
	position: relative;
	width: 100%;
	max-width: 58.3rem;
	padding-top: 1rem;
	/*border: 1px solid red;*/
}
div.left-navigation-flex-item p {
	font-style: normal;
	font-weight: normal;
	font-size: 1.4rem;
	line-height: 1.8rem;
	color: #000000;
}
div.left-navigation-flex-item p span {
	font-weight: 600;
}
/* PAGINATION */
div.navigation-arrow,
div.paging-info {
	display: inline-block;
	width: auto;
	vertical-align: middle;
	font-style: normal;
	font-weight: normal;
	font-size: 1.4rem;
	line-height: 1.8rem;
	color: #000000;
}
div.navigation-arrow#left-previous-arrow,
div.navigation-arrow#right-next-arrow {
	width: 1.9rem;
	height: 1.3rem;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url('../img/blakelock-single-blue-arrow.png');
	/*border:  1px solid red;*/
	cursor: pointer;
}
div.navigation-arrow#left-previous-arrow { 
	transform: rotate(180deg);
}




/*/ RIGHT /*/
div.navigation-flex-container div.right-navigation-flex-item {
	box-sizing: border-box;
	position: relative;
	width: 100%;
	max-width: 60.8rem;
	padding-top: 1rem;
	padding-left: 5.5rem;
	padding-right: 8rem;
	padding-bottom: 0;
	text-align: left;
	/*border: 1px solid red;*/
}
div.right-navigation-flex-item a.read-more-link {
	position: relative;
	float: right;
	width: 100%;
	max-width: 30rem;
	margin-top: 0;
	padding-bottom: 0.4rem;
	padding-left: 2.2rem;
	font-style: normal;
	font-weight: bold;
	font-size: 1.4rem;
	line-height: 1.8rem;
	color: #000000;
	border-bottom: 1px solid #73819B;
	transition: all .3s ease;
}
div.right-navigation-flex-item a.read-more-link:hover {
	color: #2C67D3;
}
div.right-navigation-flex-item a.read-more-link:after {
	position: absolute;
	z-index: 101;
	top: 47%;
	left: .4rem;
	transform: translateY(-50%);
	width: 1.9rem;
	height: 1.3rem;
	content: '';
	background-size: auto;
	background-repeat: no-repeat;
	background-image: url('../img/blakelock-single-blue-arrow.png');
	transition: all .3s ease;
}
div.right-work-flex-item a.read-more-link:hover:after {
	left: .6rem;
}






/*//// GRANULAR RESPONSIVE CSS HERE ////*/
/*// VERY LARGE SCREEN //*/
@media only screen and (max-width: 1920px) { }
/*// LARGE SCREEN //*/
@media only screen and (max-width: 1800px) { }
/*// MEDIUM & LAPTOP //*/
@media only screen and (max-width: 1600px) { }
@media only screen and (max-width: 1440px) { }
/*// SMALL & TABLET //*/
@media only screen and (max-width: 1200px) { }
@media only screen and (max-width: 1100px) { }
/*// MOBILE SCREEN //*/
@media only screen and (max-width: 1024px) {

		/*//// HERO SECTION ////*/


		/*//// CONTENT SECTION ////*/
		section.page-project-section div.page-project-container { padding-left: 2rem; }
		div.project-flex-container div.left-project-flex-item { padding-top: 8rem; }
		div.right-project-flex-item h1 { left: 4rem; }

		div.navigation-flex-container div.left-navigation-flex-item,
		div.navigation-flex-container div.right-navigation-flex-item { width: 48%; }

		/*//// FOOTER ////*/
		div.footer-flex div.footer-left-item { padding-left: 5%; }
		div.footer-flex div.footer-right-item { padding-left: 5%; }
		div.footer-right-item p { font-size: 1.8rem; line-height: 1.129; }
}
/*// SMALL MOBILE //*/
@media only screen and (max-width: 850px) { 


		/*//// HERO SECTION ////*/


		/*//// CONTENT SECTION ////*/

		
		/*//// FOOTER ////*/
		main { padding-bottom: 0; }
        footer { position: relative; width: 100%; height: auto; padding: 3% 0 7% 0; }
        footer div.footer-container { position: relative; }
        div.footer-container div.footer-flex { position: relative; top: initial; left: initial; transform: initial; }

		div.footer-flex div.footer-left-item { padding: 4% 0; text-align: center; }
		div.footer-left-item p { padding: 0; text-align: center; }

		div.footer-flex div.footer-right-item { padding: 0; text-align: center;  }
		div.footer-right-item p { font-size: 1.8rem; line-height: 1.129; }
		div.footer-right-item p br { display: none; }

} 
@media only screen and (max-width: 480px) {

		/*//// PROJECT SECTION ////*/
		section.page-project-section div.page-project-container { padding: 0; text-align: left; }
		div.project-flex-container div.left-project-flex-item { padding: 4rem 0 0 0; }
		div.right-project-flex-item h1 { position: relative; top: 0; left: -2rem; right: 0; margin-bottom: 4rem; }
		div.project-flex-container div.right-project-flex-item { padding: 0 2rem; }
		/*// NAVIGATION //*/
		section.project-navigation-section div.project-navigation-container { padding-left: 2rem; }
		div.navigation-flex-container div.left-navigation-flex-item { display: none; }
		div.navigation-flex-container div.right-navigation-flex-item { width: 99%; }


		/*//// FOOTER ////*/
		footer { padding: 5% 0 9% 0; }
		div.footer-left-item img { width: 90%; margin-bottom: 4%; }
		div.footer-flex div.footer-left-item { padding: 5%; text-align: center; }
		div.footer-left-item p { padding: 0; font-size: 1.2rem; text-align: center; }

		div.footer-flex div.footer-right-item { padding: 5%; text-align: center;  }
		div.footer-right-item p { font-size: 1.8rem; line-height: 1.129; }

		/*//// MODAL ////*/
		#pageModal .modal-header h2 { width: 82%; font-size: 2rem; }
		#pageModal .modal-box .modal-body { padding: 5%; }
		div.pdb-thanks h3 { padding: 0 5%; }
		#pageModal .modal-body p { padding: 0 5%; font-size: 1.6rem; }
}
@media only screen and (max-width: 420px) { }
@media only screen and (max-width: 375px) { }
@media only screen and (max-width: 360px) {

		/*//// HERO SECTION ////*/
		
		/*//// CONTENT SECTION ////*/
		
}

/*// LANDSCAPE ORIENTATION - TABLET & SMALLER //*/
@media screen and (max-width: 1024px) and (orientation: landscape) { }
@media screen and (max-width: 850px) and (orientation: landscape) {

		/*//// HERO SECTION ////*/


		/*//// CONTENT SECTION ////*/


		/*//// FOOTER ////*/
		footer { padding: 5% 0 9% 0; }
		div.footer-left-item img { width: 90%; margin-bottom: 4%; }
		div.footer-flex div.footer-left-item { padding: 5%; text-align: center; }
		div.footer-left-item p { padding: 0; font-size: 1.2rem; text-align: center; }

		div.footer-flex div.footer-right-item { padding: 5%; text-align: center;  }
		div.footer-right-item p { font-size: 1.8rem; line-height: 1.129; }

		/*//// MODAL ////*/
		#pageModal .modal-header h2 { width: 82%; font-size: 2rem; }
		#pageModal .modal-box .modal-body { padding: 5%; }
		#pageModal .modal-body p { padding: 0 5%; font-size: 1.6rem; }

}
@media screen and (max-width: 850px) and (orientation: landscape) {  }