/*
Theme Name: d7waterproofing
Theme URI: https://www.d7waterproofing.com
Author: Internet Imagineering, LLC
Author URI: https://www.iiweb.io
Description: Custom template for Division 7 Waterproofing
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.2
Version: 1.0
Text Domain: d7waterproofing
*/

/* CSS LAYERS: https://css-tricks.com/css-cascade-layers/ */

/* Establish CSS Layer priorities, lowest => highest */
@layer reset, theme;

/* Theme styles: colors, fonts, etc. */
@layer theme {
    :root {
    	/* CUSTOM SITE COLORS */
		--d7-dkblue: #0a4e74;
		--d7-teal: #2499da;
		--d7-black: #333333;
    	--d7-gray: #77777a;
    
		/* STANDARD COLORS */
		--beige: #FF9900;
		--red: #459939;
		--dkred: #990000;
		--black: #000000;
		--ltgray: #e1e1e1;
		--midgray: #CCCCCC;
		--gray: #999999;
		--dkgray: #666666;
		--white: #ffffff;
    
        --content-width: 1440px;
    }

    body {
		background-color: #fff;
		margin: 0px 0px; 
		padding: 0px;
		font-family: 'Open Sans', trebuchet ms, arial, verdana, sans-serif;
		color: #333;
		font-size: 14px;
	}

	.clear { clear: both;}
	ul {margin: 0; padding: 0;}
	ul li {margin: 0; padding: 0;}

	.imgFull {width: 100%;}
	img.imgFull {width: 100%;}
	
	.lightbox {display: none; padding: 30px;}

	/* iiMenu */
	i.iiMenuIcon {margin: 0 0 0 5px;}
	ul.iiMenu > li:hover i.iiMenuIcon { rotate: 180deg; }

	ul.iiMenu {display: flex; /*justify-content: none;*/ padding: 0 0 0 0px;}
	ul.iiMenu li {list-style-type: none; margin: 0; padding: 0;}

	ul.iiMenu > li {position: relative; padding: 25px 20px 35px 20px; height: 70px; margin: 0;}
	ul.iiMenu > li > a {font-size: 1rem; color: var(--d7-gray); text-decoration: none; text-transform: uppercase; font-weight: 700; } /* main menu */
	ul.iiMenu > li > a:hover {color: var(--white); text-decoration: none;} /* main menu hover */
	ul.iiMenu > li:hover {background-color: var(--white); color: var(--ec-red); }
	ul.iiMenu > li:hover > a { color: var(--d7-dkblue);}

	ul.iiMenu > li > ul {position: absolute; background-color: var(--white); margin: 0; padding: 10px 20px; min-width: 260px; top: 70px; border-bottom: 10px solid var(--d7-dkblue); left: 0px; justify-self: start;}
	ul.iiMenu > li > ul > li {justify-self: start; text-align: left;}
	ul.iiMenu ul {visibility: hidden; opacity: 0; transition: opacity 0.5s;}
	ul.iiMenu > li:hover > ul {visibility: visible; opacity: 1;}

	ul.iiMenu > li > ul a { display: block; color: var(--d7-dkblue); padding: 5px 0; margin: 0; font-weight: 700; text-decoration: none; text-transform: uppercase;} /* subnav level 1 menu */
	ul.iiMenu > li > ul a:hover {color: var(--d7-teal); text-decoration: none;}

	ul.iiMenu > li > ul:before {
		content: '';
		width: 0;
		height: 0;
		border-left: 0px solid transparent;
		border-right: 0px solid transparent;
		border-bottom: 0px solid var(--);
		top: -10px;
		left: 25px;
		position: absolute;
	}

	/* MOBILE SIDENAV */
	.mobileNav {display: none;}

	#sidenav {
		 position: fixed; 
		 /* switch "right" to "left" to switch sides: */
		 left: calc(-100vw - 10px); transition: left 0.5s;
		 top:0; bottom: 0;
		 width: 100vw; max-width: 500px; /* full screen on small screens */
		 z-index: 99999999999; box-shadow: 0 0 10px #0008;
		 background: var(--d7-dkblue); color: var(--white);
		 font-size:.8rem;
	 }
	 #sidenav.active { left: 0; } /* switch "right" to "left" */
	 #sidenav-header {width: 100%; background-color: var(--white); height: 50px;}
	 #sidenav-header img { display: block; width:100px; }
	 .mobileNav-logo {padding: 14px 0 0 20px;}
	 #sidenav ul { 
	    padding: 0; 
        margin:0;
	 }
    .sidenav-links {margin: 80px 0 0 0;}
     #sidenav > ul { max-height: calc(100vh - 100px); margin: 30px 0 0 10px; padding-bottom: 150px; overflow: auto; border-top: 1px solid var(--white);}
     #sidenav li { list-style-type: none; margin: 0; padding: 5px 2rem; text-transform: uppercase; font-weight: 800;}
	 #sidenav > ul > li { border-bottom: 1px solid var(--white); }
	 #sidenav ul li ul li { list-style-type: none; margin: 0; padding: 4px 20px; text-transform: uppercase; font-weight: 400;}
	 #sidenav a, #sidenav a:visited, #sidenav a.active { color: var(--white); text-decoration: none; }
	 #sidenav-close { 
		 /* reposition within the sidenav as needed */
		 position: absolute; 
		 right: 20px; top:10px; 
		 cursor: pointer; 
		 font-size:1.8em;
		 transition: all 0.2s;
		 color: var(--d7-teal);
	 }
	 #sidenav-close:hover, #sidenav-close:active { color: var(--d7-teal); text-shadow: 2px 2px 8px #0008; transform: translate(-2px, -2px); }
	 #sidenav-footer { position:absolute; bottom:0; left:0; right:0; height: 100px; display: flex; justify-content: center; align-items: center; background: var(--d7-dkblue); text-align: center; font-size: .8rem; color: var(--white);}
 
	 .sidenav-request {margin: 40px;}
    
    /* TEXT */
	.textWhite {color: var(--white);}
	.textBlack {color: var(--black);}
	.textDkBlue {color: var(--d7-dkblue);}
	
	.alignCenter {width: 100%; margin: 0 auto; text-align: center;}
	
	/* BACKGROUND COLORS */
	.bgGray {background-color: var(--ltgray);}

	/* BUTTONS */
	a.buttonRequest {display: block; background-color: var(--d7-dkblue); color: var(--white); text-align: center; height: 90px; padding: 25px 0 0 0; text-decoration: none; font-weight: 700; text-transform: uppercase; font-size: .8rem;}
	
	a.buttonWhite {font-size: 1rem; text-transform: uppercase; font-weight: 800; background-color: var(--white); border: 2px solid var(--d7-dkblue); padding: 6px 20px; text-decoration: none; color: var(--d7-dkblue);}
	a.buttonWhite:visited {font-size: 1rem; text-transform: uppercase; font-weight: 800; background-color: var(--white); border: 2px solid var(--d7-dkblue); padding: 6px 20px; text-decoration: none; color: var(--d7-dkblue);}
	a.buttonWhite:hover {font-size: 1rem; text-transform: uppercase; font-weight: 800; background-color: var(--d7-dkblue); border: 2px solid var(--d7-dkblue); padding: 6px 20px; text-decoration: none; color: var(--white);}
	
	button.buttonWhite {font-size: 1rem; text-transform: uppercase; font-weight: 800; background-color: var(--white); border: 2px solid var(--d7-dkblue); padding: 6px 20px; text-decoration: none; color: var(--d7-dkblue);}
	button.buttonWhite:visited {font-size: 1rem; text-transform: uppercase; font-weight: 800; background-color: var(--white); border: 2px solid var(--d7-dkblue); padding: 6px 20px; text-decoration: none; color: var(--d7-dkblue);}
	button.buttonWhite:hover {font-size: 1rem; text-transform: uppercase; font-weight: 800; background-color: var(--d7-dkblue); border: 2px solid var(--d7-dkblue); padding: 6px 20px; text-decoration: none; color: var(--white);}
	
	a.buttonView {font-size: 1rem; text-transform: uppercase; font-weight: 600; border: 2px solid var(--d7-dkblue); padding: 6px 20px; text-decoration: none; color: var(--d7-dkblue); display: block;}
	a.buttonView:visited {font-size: 1rem; text-transform: uppercase; font-weight: 600; border: 2px solid var(--d7-dkblue); padding: 6px 20px; text-decoration: none; color: var(--d7-dkblue); display: block;}
	a.buttonView:hover {font-size: 1rem; text-transform: uppercase; font-weight: 600; background-color: var(--d7-dkblue); border: 2px solid var(--d7-dkblue); padding: 6px 20px; text-decoration: none; color: var(--white); display: block;}
	
	/* LINKS */
	
	a.linkWhite {color: var(--white); text-decoration: none;}
	a:visited.linkWhite {color: var(--white); text-decoration: none;}
	a:hover.linkWhite {color: var(--d7-teal); text-decoration: none;}
	
	.headerLinks a {color: var(--d7-gray); text-decoration: none; margin: 0 0 0 10px;}
	.headerLinks a:visited {color: var(--d7-gray); text-decoration: none;}
	.headerLinks a:hover {color: var(--d7-dkblue); text-decoration: none;}
	
	a.linkBlue {color: var(--d7-dkblue); text-decoration: none;}
	a:visited.linkBlue {color: var(--d7-dkblue); text-decoration: none;}
	a:hover.linkBlue {color: var(--d7-teal); text-decoration: none;}

	/* HEADINGS */
	
	h2.sectionHead {font-size: 2.6rem; font-weight: 400; margin: 0 0 30px 0; padding: 0;}
	h2.sectionTitle {font-size: 2.2rem; font-weight: 400; margin: 40px 0 20px 0; padding: 0; line-height: 2.8rem;}
	
	.content h2 {font-size: 2.2rem; font-weight: 400; margin: 40px 0 20px 0; padding: 0; line-height: 2.8rem; color: var(--d7-dkblue);}
	
	h3.projectArcive-title {font-size: 1.4rem; font-weight: 400; margin: 0; padding: 0; color: var(--d7-dkblue); line-height: 1.8rem;}

	/* HEADER */
	.headerWrapper {position: fixed; width: 100%; background-color: var(--white); height: 100px; display: grid; grid-template-columns: 250px auto 220px 180px; grid-column-gap: 30px; z-index: 999999; border-top: 10px solid var(--d7-teal); transition: .2s all;}
	
	.headerLogo {width: 185px; margin: 15px 0 0 65px; transition: .2s all;}
	.headerTopnav {margin: 10px 0 0 0;}
	
	.scrolled .headerWrapper {grid-template-columns: 150px auto 220px 180px; transition: .2s all; border-bottom: 2px solid var(--d7-black);}
	.scrolled .headerLogo {width: 100px; transition: .2s all;}
	
	.headerInfo {text-align: right; padding: 22px 0 0 0;}
	.headerInfo-details {color: var(--d7-dkblue); font-weight: 600;}
	
	.sectionpicWrapper {position: relative; width: 100%; background: var(--d7-gray) url('images/sectionpic-1.jpg') no-repeat top; height: 490px; border-top: 100px solid var(--white);}
	.sectionpic-slash {width: 430px; right: 180px; position: absolute;}
	.sectionpic-title {position: absolute; left: 80px; bottom: 50px;}
	.sectionpic-title-head {font-size: 2.8rem; font-weight: 300;}
	.sectionpic-title-subhead {font-size: 1.8rem; font-weight: 300;}
	
	/* FRONT PAGE */
	.fp-sliderWrapper {width: 100%; height: 800px; border-top: 100px solid var(--white); position: relative; background-size: cover; background-position: center; background-repeat: no-repeat;}
	.fp-slider-slash {width: 550px; position: absolute; right: 180px;}
	
	.fp-ctaHolder {position: absolute; margin: 300px 0 0 80px; width: 45%;}
	.fp-ctaTitle {font-size: 2.8rem; font-weight: 300; border-bottom: 1px solid var(--white); padding: 0 0 20px 0; line-height: 3.2rem;}
	.fp-ctaDesc {font-size: 1.8rem; font-weight: 300; margin: 20px 0 0 0; line-height: 2.2rem;}
	
	.fp-sliderProject {position: absolute; bottom: 60px; margin: 0 0 0 80px;}
	.fp-sliderProject-title {font-size: 1rem; font-weight: 600; text-transform: uppercase;}
	
	.fp-sect2Wrapper {width: 100%; background-color: var(--ltgray); padding: 80px 0; margin: 30px 0 0 0;}
	.fp-sect2Container {width: 90%; margin: 0 auto;}
	
	.fp-sect3Wrapper {width: 100%; margin: 30px 0 0 0; background: var(--white) url('images/bg-greentexture.jpg') no-repeat top; padding: 0 0 20px 0;}
	.fp-sect3-services {width: 90%; margin: 50px auto; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-column-gap: 50px; grid-row-gap: 50px;}
	.serviceHolder {position: relative;}
	.serviceHolder-text {position: absolute; bottom: 60px; left: 20px; padding: 0 20px 0 0; z-index: 888;}
	.serviceHolder-title {font-size: 1.4rem; line-height: 1.8rem; font-weight: 400; color: var(--white);}
	.serviceHolder-category {font-size: .8rem; font-weight: 800; color: var(--white); text-transform: uppercase;}
	.serviceHolder-button {width: 100%; margin: 2px 0 0 0; display: grid; grid-template-columns: auto 40px; grid-column-gap: 2px;}
	.serviceHolder-button-title {font-size: .8rem; font-weight: 600; text-transform: uppercase; color: var(--white); background-color: var(--d7-black); padding: 8px 0 8px 20px; }
	.serviceHolder-button-block {background-color: var(--d7-teal);}
	
	.serviceHolder-image-overlay {width: 100%; position: absolute; height: 200px; background: linear-gradient(to top, black, transparent); bottom: 37px; z-index: 777;}
	
	.fp-sect4Wrapper {width: 90%; margin: 0 auto 80px auto;}
	.fp-sect4-gridHolder {width: 100%; display: grid; grid-template-columns: 1fr 2fr; align-items:center; grid-column-gap: 80px;}
	.fp-sect4-projectTitle {font-size: 1.8rem; font-weight: 400; color: var(--d7-teal);}
	.fp-sect4-projectLocation {font-style: italic; margin: 20px 0;}
	
	.fp-sect5Wrapper {width: 100%; display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 30px; margin: 0 0 30px 0;}
	.fp-sect5-Holder {padding: 60px 10%;}
	
	/* PROJECT */
	.navProjects-container {margin: 80px 0 0 5%;}
	.navProjects {display: grid; grid-template-columns: repeat(5, max-content); align-items: center; margin: 10px 0 0 0; grid-column-gap: 10px;}
	.navProject-label {font-size: 1rem; font-weight: 800; color: var(--d7-dkblue); text-transform: uppercase;}
	
	.projectGrid {width: 100%; display: grid; grid-template-columns: 800px auto; grid-column-gap: 80px; align-items: center;}
	.projectFeaturedImg {width: 100%;}
	
	.projectArchive-holder {background-color: var(--ltgray); position: relative;}
	.projectArchive-container {display: grid; grid-template-columns: repeat(4, 1fr); grid-column-gap: 60px; grid-row-gap: 60px;}
	.projectArchive-thumb {position: relative;}
	.projectArchive-ImageLabel {position: absolute; top: 0; left: 0; background-color: var(--d7-teal); color: var(--white); font-weight: 600; font-size: .8rem; text-transform: uppercase; padding: 4px 10px;}
	.projectArchive-ImageLabel a {color: var(--white); text-decoration: none;}
	.projectArchive-ImageLabel a:visited {color: var(--white); text-decoration: none;}
	.projectArchive-ImageLabel a:hover {color: var(--white); text-decoration: none;}
	.projectArchive-text {width: 90%; margin: 20px auto;}
	.projectArchive-location {margin: 10px 0 0 0; font-size: 1rem;}
	.projectArchive-button {position: absolute; bottom: 20px; right: 20px; font-size: 1.2rem; }
	
	/* LAYOUT */
	.pageWrapper {width: 90%; margin: 250px auto 100px auto;}
	.content {font-size: 1.2rem; line-height: 1.8rem;}
	.content p {margin: 0 0 40px 0;}
	.content ul {margin: 0 0 0 40px;}
	
	.grid-1-1 {display: grid; grid-template-columns: 1fr 1fr;}
	.gridGap80 {grid-column-gap: 80px;}
	
	.gridAlignRight {text-align: right;}
	
	.titleGrid {display: grid; grid-template-columns: auto 300px; align-items: center;}
	
	
	.separatorDkBlue {width: 60%; max-width: 600px; margin: 80px auto; border-top: 1px solid var(--d7-dkblue); border-bottom: 1px solid var(--d7-dkblue); height: 10px;}

	/* CONTENT PAGE CUSTOM STYLES */
	
	
	/* FOOTER */
	.footerTestimonials {width: 100%; background-color: var(--d7-teal);}
	.footerTestimonials-container {width: 90%; margin: 0 auto; display: grid; grid-template-columns: 240px auto; grid-column-gap: 100px; align-items: center;}
	.footerTestimonials-left {background-color: var(--white);}
	.footerTestimonials-title {text-align: center; font-size: 1rem; font-weight: 800; text-transform: uppercase; color: var(--white); background-color: var(--d7-teal); padding: 50px 0 20px 0;}
	.footerTestimonials-logo {width: 60%; margin: 0 auto; padding: 20px 0 60px 0;}
    .footerTestimonial-quote {color: var(--white); font-size: 1.4rem; line-height: 2rem; margin: 20px 0 0 0;}
    
    .footerWrapper {width: 100%; background-color: var(--d7-black); margin: 30px 0 0 0; padding: 60px 0;}
    .footerContainer {width: 90%; margin: 0 auto; display: grid; grid-template-columns: 300px auto 200px; grid-column-gap: 40px;}
    .footerHeading {font-size: 1rem; font-weight: 800; text-transform: uppercase; color: var(--white);}
    .footerDesc {font-size: 1rem; line-height: 1.6rem; color: var(--white); margin: 20px 0 0 0;}
    .footerLinks {}
    .footerLinks ul {margin: 0; padding: 0;}
    .footerLinks ul li {list-style-type: none; margin: 6px 0; font-size: 1rem;}
    .copyright {font-size: .8rem; margin: 20px 0 0 0; color: var(--white);}
    .footerInfo {text-align: right; font-size: 1rem; color: var(--white);}
    
    
    @media only screen and (max-width: 1440px) {
	.headerWrapper {grid-template-columns: 170px auto 220px 150px; grid-column-gap: 20px;}
	.headerLogo {width: 150px; margin: 15px 0 0 20px; transition: .2s all;}
	
	.scrolled .headerWrapper {grid-template-columns: 120px auto 220px 180px; transition: .2s all; border-bottom: 2px solid var(--d7-black);}
	.scrolled .headerLogo {width: 100px; transition: .2s all;}

	.sectionpic-slash {width: 350px; right: 150px; position: absolute;}
	.sectionpic-title {position: absolute; width: 50%;}
	.sectionpic-title-head {font-size: 2.4rem; font-weight: 300;}
	.sectionpic-title-subhead {font-size: 1.4rem; font-weight: 300;}
	
	.pageWrapper {width: 90%; margin: 140px auto 100px auto;}
	
	.content {font-size: 1rem; line-height: 1.6rem;}
	
	.fp-sect3-services {width: 90%; margin: 50px auto; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 50px; grid-row-gap: 50px;}
	
	.projectArchive-container {display: grid; grid-template-columns: repeat(3, 1fr); grid-column-gap: 60px; grid-row-gap: 60px;}
	
	.fp-sliderWrapper {width: 100%; height: 700px; border-top: 100px solid var(--white); position: relative; background-size: cover; background-position: center; background-repeat: no-repeat;}
		
	.fp-slider-slash {width: 480px; position: absolute; right: 0px;}
	.fp-ctaHolder {position: absolute; margin: 230px 0 0 80px; width: 45%;}
	.fp-ctaTitle {font-size: 2.4rem; font-weight: 300; border-bottom: 1px solid var(--white); padding: 0 0 20px 0; line-height: 3rem;}
	.fp-ctaDesc {font-size: 1.8rem; font-weight: 300; margin: 20px 0 0 0; line-height: 2.2rem;}
	
	.footerTestimonial-quote {color: var(--white); font-size: 1.2rem; line-height: 1.6rem; margin: 20px 0 0 0;}

	}

	@media only screen and (max-width: 1199px) {
	.headerWrapper {grid-template-columns: 160px auto auto 150px; grid-column-gap: 0px;}
	.headerLogo {width: 125px; margin: 15px 0 0 20px; transition: .2s all;}
	.headerLinks {margin: 0 20px 0 0;}
	.headerInfo-details {margin: 0 20px 0 0;}
	
	.scrolled .headerWrapper {grid-template-columns: 120px auto 220px 180px; transition: .2s all; border-bottom: 2px solid var(--d7-black);}
	.scrolled .headerLogo {width: 100px; transition: .2s all;}
	
	ul.iiMenu > li {padding: 25px 10px 35px 10px; height: 70px; margin: 0;}
	
	.sectionpicWrapper {position: relative; width: 100%; background: var(--d7-gray) url('images/sectionpic-1.jpg') no-repeat top; height: 350px; border-top: 100px solid var(--white);}
	.sectionpic-slash {width: 250px; right: 150px; position: absolute;}
	.sectionpic-title {bottom: 30px;}
	.sectionpic-title-head {font-size: 2rem; font-weight: 300;}
	.sectionpic-title-subhead {font-size: 1.2rem; font-weight: 300;}
		
	.fp-sect3-services {width: 90%; margin: 50px auto; display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 50px; grid-row-gap: 50px;}
	
	.footerContainer {width: 90%; margin: 0 auto; display: grid; grid-template-columns: 250px auto 160px; grid-column-gap: 20px;}
	
	.projectArchive-container {display: grid; grid-template-columns: repeat(2, 1fr); grid-column-gap: 60px; grid-row-gap: 60px;}
	
	.fp-sliderWrapper {width: 100%; height: 600px; border-top: 100px solid var(--white); position: relative; background-size: cover; background-position: center; background-repeat: no-repeat;}
	.fp-slider-slash {width: 400px; position: absolute; right: 0px;}
	.fp-ctaHolder {position: absolute; margin: 140px 0 0 80px; width: 45%;}
	.fp-ctaTitle {font-size: 2rem; font-weight: 300; border-bottom: 1px solid var(--white); padding: 0 0 20px 0; line-height: 2.6rem;}
	.fp-ctaDesc {font-size: 1.4rem; font-weight: 300; margin: 20px 0 0 0; line-height: 2rem;}
	
	.footerTestimonial-quote {color: var(--white); font-size: 1rem; line-height: 1.6rem; margin: 20px 0 0 0;}

	}

	@media only screen and (max-width: 1023px) {
	.topnavHolder {display: none;}
	.mobileNav {display: block; font-size: 2rem; color: var(--d7-dkblue); margin: 12px 0 0 20px;}
	
	.sectionpic-slash {width: 250px; right: 0px; position: absolute;}
	.sectionpic-title {position: absolute; left: 40px; bottom: 30px;}
	.sectionpic-title-head {font-size: 2rem; font-weight: 300;}
	.sectionpic-title-subhead {font-size: 1.2rem; font-weight: 300;}
	
	.grid-1-1 {display: grid; grid-template-columns: 1fr;}
	.gridGap80 {grid-column-gap: 0px;}
	
	.footerContainer {width: 90%; margin: 0 auto; display: grid; grid-template-columns: 1fr; grid-column-gap: 0px; grid-row-gap: 30px;}
	.footerLinks {display: none;}
	.footerDesc {order: 2;}
	.footerInfo {text-align: left; order: 1;}
	
	.fp-sliderWrapper {width: 100%; height: 500px; border-top: 100px solid var(--white); position: relative; background-size: cover; background-position: center; background-repeat: no-repeat;}
	.fp-slider-slash {width: 300px; position: absolute; right: 0px;}
	.fp-ctaHolder {position: absolute; margin: 0 0 0 80px; width: 45%; bottom: 80px;}
	.fp-ctaTitle {font-size: 1.6rem; font-weight: 300; border-bottom: 1px solid var(--white); padding: 0 0 20px 0; line-height: 2.2rem;}
	.fp-ctaDesc {font-size: 1.2rem; font-weight: 300; margin: 20px 0 0 0; line-height: 1.6rem;}
	.fp-sliderProject-title {display: none;}
	
	.fp-sect4-gridHolder {width: 100%; display: grid; grid-template-columns: 1fr; align-items:center; grid-column-gap: 0px; grid-row-gap: 30px;}
	
	.fp-sect5Wrapper {width: 100%; display: grid; grid-template-columns: 1fr; grid-column-gap: 0px; margin: 0 0 30px 0; grid-row-gap: 30px;}
	.fp-sect5-Holder {padding: 50px 5%;}
	
	.titleGrid {display: grid; grid-template-columns: 1fr; grid-row-gap: 0px; margin: 0 0 30px 0;}
	.gridAlignRight {text-align: left;}
	
		@media only screen and (max-width: 1023px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
	
	
		}

	}

	@media only screen and (max-width: 767px) {
		.headerWrapper {grid-template-columns: 130px auto 120px; grid-column-gap: 0px; height: 70px;}
		.headerLogo {width: 100px; margin: 15px 0 0 20px; transition: .2s all;}
		.headerInfo {margin: 0 20px 0 0; display: none;}
		
		.scrolled .headerWrapper {grid-template-columns: 130px auto 120px; grid-column-gap: 0px; height: 70px; border-bottom: 2px solid var(--black);}
		.scrolled .headerLogo {width: 100px; margin: 15px 0 0 20px; transition: .2s all;}
		
		.sectionpicWrapper {position: relative; width: 100%; background: var(--d7-gray) url('images/sectionpic-1.jpg') no-repeat top; height: 350px; border-top: 60px solid var(--white);}
		.sectionpic-slash {width: 260px; right: -80px; position: absolute;}
		.sectionpic-title-head {font-size: 1.6rem; font-weight: 300; line-height: 2rem;}
		.sectionpic-title-subhead {font-size: 1rem; font-weight: 300; line-height: 1.4rem;}
		
		.pageWrapper {width: 90%; margin: 100px auto 100px auto;}
		
		.mobileNav {display: block; font-size: 1.6rem; color: var(--d7-dkblue); margin: 4px 0 0 20px;}
		
		a.buttonRequest {display: block; background-color: var(--d7-dkblue); color: var(--white); text-align: center; height: 60px; padding: 15px 0 0 0; text-decoration: none; font-weight: 700; text-transform: uppercase; font-size: .6rem;}
		
		.projectArchive-container {display: grid; grid-template-columns: repeat(1, 1fr); grid-column-gap: 60px; grid-row-gap: 60px;}
		
		.fp-sect3-services {width: 90%; margin: 50px auto; display: grid; grid-template-columns: 1fr; grid-column-gap: 0px; grid-row-gap: 50px;}
		
		.footerTestimonials-container {width: 90%; margin: 0 auto; display: grid; grid-template-columns: 1fr; grid-column-gap: 0px; grid-row-gap: 30px; align-items: center;}
		.footerTestimonials-logo {width: 60%; max-width: 30%; margin: 0 auto; padding: 20px 0 20px 0;}
		
		.fp-sliderWrapper {width: 100%; height: 400px; border-top: 70px solid var(--white); position: relative; background-size: cover; background-position: center; background-repeat: no-repeat;}
		.fp-slider-slash {width: 250px; position: absolute; right: -100px;}
		.fp-ctaHolder {position: absolute; margin: 0 0 0 20px; width: 60%; bottom: 80px;}
		.fp-ctaTitle {font-size: 1.2rem; font-weight: 300; border-bottom: 1px solid var(--white); padding: 0 0 10px 0; line-height: 1.8rem;}
		.fp-ctaDesc {font-size: .8rem; font-weight: 300; margin: 10px 0 0 0; line-height: 1.6rem;}
		
		h2.sectionHead {font-size: 1.8rem; font-weight: 400; margin: 0 0 30px 0; padding: 0; line-height: 2rem;}
		
		a.buttonWhite {font-size: .8rem; text-transform: uppercase; font-weight: 800; background-color: var(--white); border: 2px solid var(--d7-dkblue); padding: 6px 10px; text-decoration: none; color: var(--d7-dkblue);}
		a.buttonWhite:visited {font-size: .8rem; text-transform: uppercase; font-weight: 800; background-color: var(--white); border: 2px solid var(--d7-dkblue); padding: 6px 10px; text-decoration: none; color: var(--d7-dkblue);}
		a.buttonWhite:hover {font-size: .8rem; text-transform: uppercase; font-weight: 800; background-color: var(--d7-dkblue); border: 2px solid var(--d7-dkblue); padding: 6px 10px; text-decoration: none; color: var(--white);}
		
		
	}

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

/* A CSS Reset */
@layer reset {
    *, *::before, *::after { box-sizing: border-box; }
    * {margin: 0; }
    @media (prefers-reduced-motion: no-preference) {
        html { interpolate-size: allow-keywords; }
    }
    body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
    img, picture, video, canvas, svg { display: block; max-width: 100%; object-fit: contain;}
    input, button, textarea, select { font: inherit; }
    p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
    p { text-wrap: pretty; }
    h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
    #root, #__next { isolation: isolate; }
}