/*
Theme Name: iiWeb
Theme URI: https://www.iiweb.io
Author: Internet Imagineering, LLC
Author URI: https://www.iiweb.io
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.2
Version: 1.0
Text Domain: internetimagineering
*/

/* 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 */
		--ii-green: #00b4aa;
		--ii-teal: #00add7;
		--ii-blue: #1f4753;
		--ii-black: #333333;
		--ii-ltgray: #eeeeee;
	
		/* STANDARD COLORS */
		--beige: #FF9900;
		--red: #459939;
		--dkred: #990000;
		--black: #000000;
		--ltgray: #DDDDDD;
		--midgray: #CCCCCC;
		--gray: #999999;
		--dkgray: #666666;
		--white: #ffffff;
    }

    body {
		background-color: #fff;
		margin: 0px 0px; 
		padding: 0px;
		font-family: 'Source Sans 3', trebuchet ms, arial, verdana, sans-serif;
		color: var(--ii-blue);
		font-size: 14px;
	}

	#wpadminbar { top:auto !important; bottom:0 !important; }
	.clear { clear: both;}

	/* TOPNAV LINK ANIMATION - MAIN BUTTONS */

	a.linkTopBar {color: var(--white); text-decoration: none;}
	a.linkTopBar:visited {color: var(--white); text-decoration: none;}
	a.linkTopBar:hover {color: var(--white); text-decoration: none;}

	.iiTopBarAnimate {
	  color: inherit;
	  text-decoration: none;
	}

	.iiTopBarAnimate {
	  display: block;
	  position: relative;
	  padding: 5px 0;
	  color: var(--white);
	}

	.iiTopBarAnimate::after {
	  content: '';
	  position: absolute;
	  bottom: 0;
	  left: 0;
	  width: 100%;
	  height: 4px;
	  background-color: var(--ii-green);
	  opacity: 1;
	  transition: opacity 300ms, transform 300ms;
	}

	.iiTopBarAnimate2::after {
	  content: '';
	  position: absolute;
	  bottom: 0;
	  left: 0;
	  width: 100%;
	  height: 4px;
	  background-color: var(--ii-teal);
	  opacity: 1;
	  transition: opacity 300ms, transform 300ms;
	}

	.iiTopBarAnimate::after {opacity 1; transform: scale(0); transform-origin: center;}

	.iiTopBarAnimate:hover::after, .iiTopBarAnimate:focus::after {transform: scale(1);}

	/* TOPNAV LINK ANIMATION - SITEWIDE LINKS */

	a.linkAnimated {
	  color: inherit;
	  text-decoration: none;
	  position: relative;
	}

	a.linkAnimated {
	  /*display: block;*/
	  position: relative;
	  padding: 5px 0;
	  color: var(--white);
	}

	a.linkAnimated::after {
	  content: '';
	  position: absolute;
	  bottom: 0;
	  left: 0;
	  width: 100%;
	  height: 4px;
	  background-color: var(--ii-green);
	  opacity: 1;
	  transition: opacity 300ms, transform 300ms;
	}

	a.linkAnimated::after {opacity 1; transform: scale(0); transform-origin: center;}

	a.linkAnimated:hover::after, a.linkAnimated:focus::after {transform: scale(1);}
	
	.lightbox {display: none; padding: 30px;}
	
	img.imgEffect1 {opacity: 1; transition: .2s all;}
	img.imgEffect1:hover {opacity: .8;}
	
	.alignCenter {text-align: center; margin: 0 auto; width: 100%;}

	/* 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 25px 20px; height: 70px; margin: 0;}
	ul.iiMenu > li > a {font-size: 1rem; color: var(--white); text-decoration: none; text-transform: uppercase; font-weight: 500; } /* 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(--ec-red);}

	ul.iiMenu > li > ul {position: absolute; background-color: var(--white); margin: 0; padding: 10px 20px; min-width: 240px; top: 70px; border-bottom: 10px solid var(--ec-red); 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(--ec-red); padding: 5px 0; margin: 0; font-weight: 500; text-decoration: none; } /* subnav level 1 menu */
	ul.iiMenu > li > ul a:hover {color: var(--ec-black); 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;
	}

	.scrolled ul.iiMenu > li {position: relative; padding: 20px 20px 20px 20px; height: 60px;}
	.scrolled ul.iiMenu > li > ul {top: 60px; }

	/* 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(--ii-blue); color: var(--white);
		 font-size:1.2rem;
	 }
	 #sidenav.active { left: 0; } /* switch "right" to "left" */
	 #sidenav-header {margin: 20px 0 0 25px; width: 200px;}
	 .sidenav-CTAs {width: 90%; margin: 40px auto 30px auto; display: grid; grid-template-columns: 1fr 1fr; align-items: center; grid-column-gap: 20px;}
	 #sidenav-header img { display: block; width:100%; }
	 .sidenav-links {max-height: calc(100vh - 100px); width: 90%; margin: 30px auto 0 auto; padding-bottom: 150px; overflow: auto;}
	 #sidenav ul { 
	     padding: 0; 
         margin:0;
	 }
    
     #sidenav > ul { border-top: 1px solid #444;}
     #sidenav li { list-style-type: none; margin: 0; padding: 5px 0; }
	 #sidenav > ul > li { border-bottom: 1px solid #444; }
	 #sidenav a, #sidenav a:visited, #sidenav a.active { color: var(--white); text-decoration: none; }
	 #sidenav a:hover {color: var(--ii-green); text-decoration: none;}
	 
	 ul.sidenav-linksSecondary {margin: 30px 0 0 0 !important; padding: 0;}
	 ul.sidenav-linksSecondary li {font-size: 1.2rem; text-transform: uppercase; letter-spacing: 2px;}
	 ul.sidenav-linksSecondary li a {color: var(--ii-green) !important; text-decoration: none;}
	 ul.sidenav-linksSecondary li a:visited {color: var(--ii-green) !important; text-decoration: none;}
	 ul.sidenav-linksSecondary li a:hover {color: var(--ii-teal) !important; text-decoration: none;}
	 
	 #sidenav-close { 
		 /* reposition within the sidenav as needed */
		 position: absolute; 
		 right: 1rem; top:1rem; 
		 cursor: pointer; 
		 font-size:1.5em;
		 transition: all 0.2s; 
	 }
	 #sidenav-close:hover, #sidenav-close:active { color: white; 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(--ii-blue); text-align: center; font-size: .8rem; color: var(--white)}
 
	 .sidenav-request {margin: 40px;}
    
    /* GENERAL STYLES */
	.imgFull {width: 100%;}
	img.imgFull {width: 100%;}
	img.imgBorder {border: 1px solid var(--ii-ltgray);}

	i.iconSpace {margin: 0 8px 0 0;}
	i.breadcrumbArrow {font-size: 10px; color: var(--ii-blue); margin: 0 10px;}

	.lineTeal {height: 1px; background-color: var(--ii-teal); width: 100%; margin: 20px 0;}
	
	.iiSeparator {width: 80%; max-width: 300px; border-top: 1px solid var(--ii-blue); border-bottom: 1px solid var(--ii-blue); padding: 5px 0; margin: 60px auto;}

	/* HEADINGS */
	h1.landingH1 {font-size: 3rem; font-weight: 300; margin: 20px 0; padding: 0; line-height: 3rem;}
	h2.landingH2 {font-size: 2rem; font-weight: 200; margin: 0; padding: 0; line-height: 2rem;}
	h3.landingH3 {font-size: 2rem; font-weight: 200; text-transform: uppercase; letter-spacing: 5px; margin: 0; padding: 0; line-height: 2rem;}

	h1.heroTitleH1 {font-size: 3rem; font-weight: 300; line-height: 3.4rem; margin: 10px 0; padding: 0;}

	h1.titleH1 {font-size: 2rem; font-weight: 300; margin: 10px 0 0 0; padding: 0; line-height: 2.2rem;}
	h1.pagetitleH1 {font-size: 2rem; font-weight: 600; margin: 10px 0 0 0; padding: 0; line-height: 2.2rem;}


	h3.subtitleH3 {font-size: 1rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; margin: 0; padding: 0; line-height: 1.4rem;}
	h2.subtitleH2 {font-size: 2rem; font-weight: 300; margin: 10px 0 0 0; padding: 0; line-height: 2.2rem;}

	h3.landingFeature-title {font-size: 1.2rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; margin: 0; padding: 0; line-height: 1.4rem;}
	h3.projectFeature-title {font-size: 1.2rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; margin: 20px 0; padding: 0; line-height: 1.4rem;}
	
	h2.mastheadProject {font-size: 1.2rem; text-transform: uppercase; letter-spacing: 2px; color: var(--ii-teal); line-height: 1.6rem; font-weight: 300;}
	
	h1.newsTitle {font-size: 2rem; font-weight: 300; margin: 0 0 0 0; padding: 0; line-height: 2.2rem;}
	h3.newsTitle {font-size: 2rem; font-weight: 300; margin: 0 0 0 0; padding: 0; line-height: 2.2rem;}
	h3.expertiseTitle {font-size: 1.8rem; font-weight: 600; margin: 0 0 0 0; padding: 0; line-height: 2.2rem;}
	
	h1.case-subtitle {font-size: 1rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; margin: 0; padding: 0; line-height: 1.4rem;}
	h2.case-title {font-size: 2.4rem; font-weight: 300; margin: 10px 0 0 0; padding: 0; line-height: 2.6rem;}

	/* TEXT */
	.textHighlight {font-size: 2rem !important; line-height: 2.4rem !important; font-weight: 600;}

	.textWhite {color: var(--white);}
	.textBlue {color: var(--ii-blue);}
	.textGreen {color: var(--ii-green);}
	.textTeal {color: var(--ii-teal);}

	/* BACKGROUND */
	.bgTeal {background-color: var(--ii-teal);}
	.bgBlue {background-color: var(--ii-blue);}

	/* LINKS */
	a.linkWhite {color: var(--white); text-decoration: none;}
	a.linkWhite:visited {color: var(--white); text-decoration: none;}
	a.linkWhite:hover {color: var(--ii-teal); text-decoration: none;}
	
	a.linkGreen {color: var(--ii-green); text-decoration: none;}
	a.linkGreen:visited {color: var(--ii-green); text-decoration: none;}
	a.linkGreen:hover {color: var(--ii-teal); text-decoration: underline;}
	
	a.linkHeadline {color: var(--ii-blue); text-decoration: none;}
	a.linkHeadline:visited {color: var(--ii-blue); text-decoration: none;}
	a.linkHeadline:hover {color: var(--ii-teal); text-decoration: none;}

	/* BUTTONS */
	a.buttonBlue {display: block; font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; padding: 10px 0; text-align: center; width: 100%; background-color: var(--ii-blue); color: var(--white); text-decoration: none;}
	a.buttonBlue:visited {font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; padding: 10px 0; text-align: center; width: 100%; background-color: var(--ii-blue); color: var(--white); text-decoration: none;}
	a.buttonBlue:hover {font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; padding: 10px 0; text-align: center; width: 100%; background-color: var(--ii-black); color: var(--white); text-decoration: none;}
	
	a.buttonBlue2 {display: block; font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; padding: 6px 0; text-align: center; width: 100%; background-color: var(--ii-blue); color: var(--white); text-decoration: none;}
	a.buttonBlue2:visited {font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; padding: 6px 0; text-align: center; width: 100%; background-color: var(--ii-blue); color: var(--white); text-decoration: none;}
	a.buttonBlue2:hover {font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; padding: 6px 0; text-align: center; width: 100%; background-color: var(--ii-black); color: var(--white); text-decoration: none;}

	a.buttonTeal {display: block; font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; padding: 10px 0; text-align: center; width: 100%; background-color: var(--ii-teal); color: var(--white); text-decoration: none;}
	a.buttonTeal:visited {font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; padding: 10px 0; text-align: center; width: 100%; background-color: var(--ii-teal); color: var(--white); text-decoration: none;}
	a.buttonTeal:hover {font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; padding: 10px 0; text-align: center; width: 100%; background-color: var(--ii-black); color: var(--white); text-decoration: none;}

	a.buttonClear {display: block; font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; padding: 10px 0; text-align: center; width: 100%; background: none; color: var(--white); text-decoration: none; border: 2px solid var(--white);}
	a.buttonClear:visited {font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; padding: 10px 0; text-align: center; width: 100%; background: none; color: var(--white); text-decoration: none; border: 2px solid var(--white);}
	a.buttonClear:hover {font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; padding: 10px 0; text-align: center; width: 100%; background-color: var(--white); color: var(--ii-blue); text-decoration: none; border: 2px solid var(--white);}
	
	a.buttonWhite1 {font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; padding: 6px 20px; text-align: center; background-color: var(--white); color: var(--ii-blue); text-decoration: none; border: 2px solid var(--ii-blue);}
	a.buttonWhite1:visited {font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; padding: 6px 20px; text-align: center; width: 100%; background-color: var(--white); color: var(--ii-blue); text-decoration: none; border: 2px solid var(--ii-blue);}
	a.buttonWhite1:hover {font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; padding: 6px 20px; text-align: center; width: 100%; background-color: var(--ii-blue); color: var(--white); text-decoration: none; border: 2px solid var(--ii-blue); cursor: pointer;}
	
	a.buttonWhite2 {font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; padding: 6px 20px; text-align: center; background-color: var(--white); color: var(--ii-blue); text-decoration: none; border: 2px solid var(--ii-blue);}
	a.buttonWhite2:visited {font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; padding: 6px 20px; text-align: center; width: 100%; background-color: var(--white); color: var(--ii-blue); text-decoration: none; border: 2px solid var(--ii-blue);}
	a.buttonWhite2:hover {font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; padding: 6px 20px; text-align: center; width: 100%; background-color: var(--ii-blue); color: var(--white); text-decoration: none; border: 2px solid var(--ii-blue); cursor: pointer;}
	
	a.buttonMobileCTA {display: block; width: 100%; font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; padding: 6px 0px; text-align: center; background-color: transparent; color: var(--ii-green); text-decoration: none; border: 2px solid var(--ii-green);}
	a.buttonMobileCTA:visited {display: block; width: 100%; font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; padding: 6px 0px; text-align: center; width: 100%; background-color: transparent; color: var(--ii-green); text-decoration: none; border: 2px solid var(--ii-green);}
	a.buttonMobileCTA:hover {display: block; width: 100%; font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; padding: 6px 0px; text-align: center; width: 100%; background-color: var(--ii-green); color: var(--white) !important; text-decoration: none; border: 2px solid var(--ii-green); cursor: pointer;}

	/* GENERAL LAYOUT */
	.pageWrapper {width: 90%; margin: 100px auto;}
	.content {font-size: 1.2rem; line-height: 1.6rem; font-weight: 300;}
	.content p {margin: 10px 0 0 0;}
	
	.pageWrapper-Posts {width: 90%; margin: 100px auto; display: grid; grid-template-columns: 250px auto 250px; grid-column-gap: 40px;}
	.postMain {border-left: 1px solid var(--ltgray); border-right: 1px solid var(--ltgray); padding: 0 40px;}
	
	.servicesPageTitle {width: 100%; display: grid; grid-template-columns: auto 200px; align-items: center; margin: 20px 0 20px 0;}
	.pagetitleIcon {font-size: 4rem; text-align: center;}
	
	.linkAllProjects {margin: -70px 0 0 0;}
	.agencyRecord {font-size: 1rem; font-style: italic;}
	
	.grid-1-1 {width: 100%; display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 60px; margin: 50px 0;}
	.grid-1-1-1 {width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 60px; margin: 50px 0;}
	.gridCenter {align-items: center;}
	
	.buttonGrid-1-1 {width: 100%; display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 30px; grid-row-gap: 30px; margin: 30px 0;}

	.ctaContainer-1-1 {width: 100%; display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 0px; grid-row-gap: 50px; margin: 50px 0;}
	.ctaImage {width: 100%;}
	.ctaContent {width: 80%; margin: 0 auto;}
	.ctaDesc {font-size: 1.2rem; line-height: 1.6rem; font-weight: 300; margin: 30px 0 0 0;}
	.ctaLogo {width: 160px;} .ctaLogo img {width: 100%;}
	
	.sectionpicWrapper {width: 100%; background: var(--ii-black) url('images/sectionpic-project-main.jpg') no-repeat left top; height: 328px; border-top: 68px solid var(--ii-black); position: relative;}
	.sectionpicWrapper-Content {width: 100%; background: var(--ii-black) url('images/sectionpic-content-1.jpg') no-repeat left; height: 328px; border-top: 68px solid var(--ii-black); position: relative;}
	.sectionTitle-Container {width: 90%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: right;}
	
	/* ii TOPBAR */
	.iiTopBar {position: fixed; width: 100%; background-color: #1f4753EE; display: grid; grid-template-columns: 1fr 1fr; z-index: 99999;}

	.iiTopBar-Left {display: grid; grid-template-columns: 180px auto; align-items: center;}
	.iiLogo {width: 220px; padding: 16px 0; margin: 0 0 0 40px; transition: .2s all;} .iiLogo img {width: 100%; transition: .2s all;}
	img.logoFull {transition: .5s all;}
	img.logoIcon {display: none; transition: .5s all; width: 30px;}

	.iiTopBar-Right {display: grid; grid-template-columns: auto 180px; text-align: right; align-items: center;}

	.iiTopBar-Explore {background-color: var(--ii-green); display: flex; height: 100%; align-items: center; transition: .2s all;}
	.iiTopBar-Explore:hover {cursor: pointer; background-color: var(--ii-black);}
	.iiTopBar-ExploreLink {font-size: .9rem; color: var(--white); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; text-align: center; width: 100%;}

	.iiTopBar-Connect {background-color: var(--ii-teal); display: flex; height: 100%; align-items: center; transition: .2s all;}
	.iiTopBar-Connect:hover {cursor: pointer; background-color: var(--ii-black);}
	.iiTopBar-ConnectLink {font-size: .9rem; color: var(--white); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; text-align: center; width: 100%;}

	.iiTopBar-HeaderLink {color: var(--white); margin: 0 40px 0 0; font-size: .9rem;}

	/* ii TOPBAR SCROLLED */
	.scrolled .iiLogo {padding: 10px 0; width: 30px; margin: 0 0 0 20px;} 
	.scrolled iiLogo img {width: 100%;}
	.scrolled img.logoFull {display: none;} .scrolled img.logoIcon {display: block;}
	
	/* FRONT PAGE */
	.fpPerformance-Wrapper {background-image: url('images/background-ii-icon.jpg'); min-height: 300px; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; padding: 100px 0;}
	
	.fpPerformance-Container {width: 90%; margin: 0 auto;}
	.fpPerformance-Title {text-align: center; margin: 0 auto;}
	.fpPerformance-Grid {width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-column-gap: 60px; margin: 50px auto 20px auto; align-self: stretch;}
	.fpPerformance-Holder {width: 100%; text-align: center; border: 0px solid var(--ii-black); padding: 30px; background-color: #fff2;}
	.fpPerformance-titletext {font-size: 1rem; line-height: 1.2rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--white);}
	.fpPerformance-value {font-size: 2.4rem; font-weight: 400; border-top: 2px solid var(--ii-green); border-bottom: 2px solid var(--ii-green); margin: 10px 0; color: var(--ii-green);}
	.fpPerformance-icon {font-size: 2rem; color: var(--white);}
	
	.showcaseContainer {width: 100%; display: grid; grid-template-columns: 1fr 1fr; align-items: center; margin: 50px auto;}
	.showcaseText {width: 80%; margin: 0 auto;}
	
	.expertiseContainer {margin: 80px auto; width: 90%;}
	.expertiseGrid {width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-column-gap: 60px; grid-row-gap: 60px; margin: 60px 0;}
	.expertiseHolder {}
	.expertiseIcon {font-size: 2.5rem; margin: 0 0 10px 0;}
	.expertiseHolder-CaseStudy {border: 1px solid var(--ltgray); padding: 30px;}
	
	.casestudy-image {position: relative;}
	.casestudyLogo {width: 120px; position: absolute; top: 0; left: 0; background-color: #fff9;}
	.casestudyLogo img {width: 100px; margin: 0 auto; padding: 10px 0;}
	.casestudy-button {margin: 20px 0;}
	.casestudy-location {margin: 10px 0 0 0;}
	.casestudy-desc {margin: 20px 0 0 0;}
	
	.newsGrid-Wrapper {width: 100%; background-color: var(--ltgray); padding: 100px 0; margin: 150px 0 0 0;}
	.newsGrid-Container {width: 90%; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-column-gap: 60px;}
	.newsGrid-Holder {width: 100%;}
	.newsGrid-Thumb {width: 100%; position: relative;}
	.newsGrid-ThumbIcon {position: absolute; right: 0; top: 0; width: 50px;}
	.newsGrid-ThumbText {width: 100%; position: absolute; bottom: 0; padding: 8px 20px; font-size: .8rem; text-transform: uppercase; letter-spacing: 2px; font-weight: 600; color: var(--white); background-color: #1f4753AA; text-align: right;}
	.newsGrid-Date {font-size: 1rem; color: var(--ii-green); text-transform: uppercase; margin: 20px 0 5px 0;}
	.newsGrid-Desc {font-size: 1rem; margin: 10px 0 0 0;}
	.newsGrid-button {margin: 30px 0 0 0;}
	
	.newsTitle-Holder {width: 90%; margin: 0 auto 40px auto; display: grid; grid-template-columns: auto 300px; align-items: center;}
	.newsTitle-Button {text-align: right;}
	
	/* POSTS / NEWS */
	.newsDate {font-size: 1rem; color: var(--ii-green); text-transform: uppercase; margin: 0 0 10px 0;}
	
	/* PROJECTS */
	.projectAreaTitle {width: 100%; margin: 0 auto; text-align: center; border: 1px solid #e1e1e1; padding: 20px 0; margin: 20px 0 0 0;}
	
	.projectFeature-container {width: 100%; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-column-gap: 40px; grid-row-gap: 40px; padding: 60px 0 0px 0;}
	.projectFeature-holder {text-align: center; border: 1px solid #e1e1e1; padding: 30px 20px;}
	.projectFeature-title {color: var(--ii-teal); margin: 20px 0;}
	.projectFeature-icon {font-size: 4rem; color: var(--ii-teal);}
	.projectFeature-desc {color: var(--ii-black); font-size: 1rem; line-height: 1.4rem; margin: 20px 0 0 0;}

	/* LANDING PAGES */
	.landingHero-holder-frontpage {width: 100%; aspect-ratio: 16 / 9; background: var(--ii-blue) url('images/hero-bg-homeservices.jpg') no-repeat top; background-size: contain; position: relative; z-index: 55555;}
	
	.landingHero-holder-homeservices {width: 100%; aspect-ratio: 16 / 9; background: var(--ii-blue) url('images/hero-bg-homeservices.jpg') no-repeat top; background-size: contain; position: relative; z-index: 55555;}
	.landingHero-holder-education {width: 100%; aspect-ratio: 16 / 9; background: var(--ii-blue) url('images/hero-bg-education.jpg') no-repeat top; background-size: contain; position: relative; z-index: 55555;}
	.landingHero-cta {width: 80%; position: absolute; top: 40%; left: 50%; transform: translate(-50%, -40%); z-index: 8888; max-width: 1000px; background-color: #0005; padding: 40px; text-align: center;}
	.heroDesc {font-size: 1.2rem; color: var(--white); line-height: 1.6rem; }

	.landingHero-actions {width: 92%; position: absolute; bottom: 30px; left: 50%; transform: translate(-50%, 0%); display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 20%; z-index: 8888; align-items: end;}
	.landingHero-actions-right {text-align: right;}
	.landingHero-actions-right-button {width: 250px; right: 0; float: right;}
	.landingHero-clientimage {width: 70px; margin: 0 0 20px 0; background-color: #fff9;}
	.landingHero-clientimage img {width: 60px; margin: 0 auto; padding: 5px 0;}

	.landingHero-actions-text {font-size: 1rem; color: var(--white); line-height: 1.4rem; margin: 10px 0 20px 0;}
	.m-landingHero-actions {display: none;}

	.landingSect2-holder2 {width: 100%; display: grid; grid-template-columns: 1fr 3fr 1fr; grid-column-gap: 30px;}
	.landingSect2-text {text-align: center; align-item: center; padding: 20px 0;}

	.landingSect3-container {width: 100%; display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 50px; margin: 20px 0;}
	.landingSect3-holder {padding: 80px; background-color: var(--ii-ltgray); font-size: 1.4rem; line-height: 1.8rem; color: var(--ii-blue); font-weight: 300;}

	.landingSect4-container {width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-row-gap: 50px; grid-column-gap: 50px; margin: 50px 0;}
	.landingSect4-holder {width: 100%; position: relative;}
	.landingSect4-featuretitle {position: absolute; z-index: 888; bottom: 30px; padding: 0 30px;}

	.landingSect5-container {width: 100%; background: var(--ltgray) url('images/bg-circles.jpg') no-repeat top; background-size: cover; }
	.landingSect5-titles {width: 80%; margin: 0 auto; text-align: center; padding: 100px 0 50px 0;}
	.landingSect5-desc {font-size: 1.4rem; color: var(--white); line-height: 1.8rem; font-weight: 300; width: 80%; margin: 0 auto; text-align: center;}

	.landingFeature-container {width: 90%; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-column-gap: 80px; grid-row-gap: 80px; padding: 60px 0 100px 0;}
	.landingFeature-holder {text-align: center;}
	.landingFeature-icon {font-size: 4rem; color: var(--white);}
	.landingFeature-desc {color: var(--white); font-size: 1rem; line-height: 1.4rem; margin: 20px 0 0 0;}

	/* FOOTER LOGOS */
	.footerLogos-wrapper {width: 100%; margin: 100px auto;}
	.footerLogos-titles {width: 90%; margin: 0 auto 50px auto; text-align: center;}

	/* FOOTER TESTIMONIALS */
	.footerTestimonials-wrapper {width:100%; background-color: var(--ii-ltgray); padding: 100px 0; }

	.footerTestimonial-quoteicon {display: none; font-size: 20rem; color: #1f475322; position: absolute; top: -180px; left: -50px;}
	.footerTestimonial-quoteicon2 {display: none; font-size: 20rem; color: #1f475322; position: absolute; bottom: -140px; right: -50px;}

	.footerTestimonial-quote {width: 80%; max-width: 1440px; margin: 0 auto; font-size: 1.2rem; font-weight: 300; line-height: 1.6rem; color: var(--ii-blue); position: relative;}
	.testimonialGrid-1-1 {width: 100%; display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 80px;}

	.footerTestimonial-person {font-size: 1.2rem; text-transform: uppercase; letter-spacing: 2px; font-weight: 600; margin: 30px 0 0 0;}
	.footerTestimonial-persontitle {font-size: 1.2rem; text-transform: uppercase; letter-spacing: 2px; font-weight: 300; color: var(--ii-green);}

	/* FOOTER CONTACT */
	.footerContact-wrapper {width: 100%; background-color: var(--ii-green); padding: 100px 0;}
	.footerContact-container {width: 90%; margin: 0 auto; display: grid; grid-template-columns: 400px auto 500px;}
	.footerContact-info {font-size: 1.2rem; color: var(--white); margin: 6px 0 0 0; font-weight: 300; line-height: 1.8rem;}

	.footerAbout {width: 90%; margin: 50px auto 0 auto; font-size: 1rem; font-weight: 300; color: var(--white);}

	ul.footerNav {margin: 0; padding: 0;}
	ul.footerNav li {font-size: 1rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; margin: 0 0 10px 0; padding: 0; list-style-type: none;}
	ul.footerNav li a {color: var(--white); text-decoration: none; font-size: 1rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;}
	ul.footerNav li a:visited {color: var(--white); text-decoration: none; font-size: 1rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;}
	ul.footerNav li a:hover {color: var(--white); text-decoration: none;}

	/* FOOTER BOTTOM */
	.bottomWrapper {width: 100%; background-color: var(--ii-blue); padding: 50px 0;}
	.bottomContainer {width: 90%; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr;}
	.copyright {font-size: .8rem; text-transform: uppercase; color: var(--ltgray); letter-spacing: 1px;}
	.bottomLinks {text-align: right; font-size: .8rem; text-transform: uppercase; letter-spacing: 1px;}
	.bottomLinks a {color: var(--ii-ltgray); text-decoration: none;}
	.bottomLinks a:visited {color: var(--ii-ltgray); text-decoration: none;}
	.bottomLinks a:hover {color: var(--white); text-decoration: none;}
	
    
    
    @media only screen and (max-width: 1440px) {
	.textHighlight {font-size: 1.2em; line-height: 1.2em;}
	.buttonGrid-1-1 {width: 100%; display: grid; grid-template-columns: 1fr; grid-column-gap: 0px; grid-row-gap: 30px; margin: 30px 0;}
	.footerContact-container {grid-template-columns: 400px auto 250px;}

	h2.subtitleH2 {font-size: 1.6rem; font-weight: 300; margin: 10px 0 0 0; padding: 0; line-height: 1.8rem;}

	}

	@media only screen and (max-width: 1199px) {
	h3.landingH3 {font-size: 2rem; font-weight: 200; text-transform: uppercase; letter-spacing: 5px; margin: 0; padding: 0; line-height: 2.5rem;}
	h2.landingH2 {font-size: 2.4rem; font-weight: 300; margin: 20px 0; padding: 0; line-height: 2.4rem;}
	h1.landingH1 {font-size: 1.4rem; font-weight: 200; margin: 0; padding: 0; line-height: 2rem;}

	.heroDesc {font-size: 1rem; color: var(--white); line-height: 1.2rem; }
	h1.heroTitleH1 {font-size: 2.5rem; font-weight: 300; line-height: 2.7rem; margin: 10px 0; padding: 0;}


	.landingSect4-container {width: 100%; display: grid; grid-template-columns: 1fr 1fr; grid-row-gap: 50px; grid-column-gap: 50px; margin: 50px 0;}
	.landingFeature-container {width: 90%; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 80px; grid-row-gap: 80px; padding: 60px 0 100px 0;}

	.footerTestimonial-quoteicon {font-size: 15rem; color: #1f475322; position: absolute; top: -180px; left: -50px;}
	.footerTestimonial-quoteicon2 {font-size: 15rem; color: #1f475322; position: absolute; bottom: -140px; right: -50px;}

	}

	@media only screen and (max-width: 1023px) {
	.landingSect3-container {width: 100%; display: grid; grid-template-columns: 1fr; grid-column-gap: 0px; grid-row-gap: 50px; margin: 20px 0;}
	
	.testimonialGrid-1-1 {width: 100%; display: grid; grid-template-columns: 1fr; grid-column-gap: 0px; grid-row-gap: 30px;}
	.footerTestimonial-quoteicon {font-size: 10rem; color: #1f475322; position: absolute; top: -180px; left: -50px;}
	.footerTestimonial-quoteicon2 {font-size: 10rem; color: #1f475322; position: absolute; bottom: -140px; right: -50px;}

	.ctaContainer-1-1 {width: 100%; display: grid; grid-template-columns: 1fr; grid-column-gap: 0px; grid-row-gap: 50px; margin: 50px 0;}
	.ctaImage {order: 1;}
	.ctaContent {order: 2;}

	.landingSect2-holder2 {width: 100%; display: grid; grid-template-columns: .5fr 3fr .5fr; grid-column-gap: 20px;}

	.footerTestimonial-quote {font-size: 1rem; line-height: 1.4rem;}
	.footerTestimonial-person {font-size: 1rem; }
	.footerTestimonial-persontitle {font-size: 1rem;}

	.footerContact-container {grid-template-columns: 1fr 1fr;}
	.footerButtons {grid-column: 1 / 3;}

	.landingHero-actions {display: none;}
	.landingHero-cta {top: 50%; transform: translate(-50%, -50%); }

	.m-landingHero-actions {display: grid; grid-template-columns: 1fr 1fr; margin: 20px 0; grid-column-gap: 20px;}
	.m-landingHero-holder {padding: 30px;}
	.landingHero-actions-right-button {width: 100%;}

		@media only screen and (max-width: 1023px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
	
	
		}

	}

	@media only screen and (max-width: 767px) {
	h3.landingH3 {font-size: 1.4rem; font-weight: 200; text-transform: uppercase; letter-spacing: 5px; margin: 0; padding: 0; line-height: 1.6rem;}
	h2.landingH2 {font-size: 1.8rem; font-weight: 300; margin: 20px 0; padding: 0; line-height: 2rem;}
	h1.landingH1 {font-size: 1.4rem; font-weight: 200; margin: 0; padding: 0; line-height: 1.6rem;}

	.landingHero-cta {display: none;}
	.m-landingHero-actions {display: grid; grid-template-columns: 1fr; margin: 20px 0; grid-column-gap: 0px; grid-row-gap: 20px;}

	.landingSect4-container {grid-template-columns: 1fr; grid-row-gap: 50px; grid-column-gap: 0px; }
	.landingFeature-container { grid-template-columns: 1fr; grid-column-gap: 0px; grid-row-gap: 80px; }

	.footerContact-container {grid-template-columns: 1fr; grid-row-gap: 30px;}
	.footerButtons {grid-column: 1 / 1;}

	.bottomContainer {grid-template-columns: 1fr; grid-row-gap: 30px;}
	.bottomLinks {text-align: left;}
	}

	@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%;  }
    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; }
    strong {font-weight: 600;}
    #root, #__next { isolation: isolate; }
}