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

/* 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 */
		--r3-blue: #205781;
		--r3-dkblue: #203548;
		--r3-green: #50959d;
		--r3-orange: #ff8400;
		--r3-teal: #00cccc;
    
		/* STANDARD COLORS */
		--beige: #FF9900;
		--red: #459939;
		--dkred: #990000;
		--black: #000000;
		--ltgray: #DDDDDD;
		--midgray: #CCCCCC;
		--gray: #999999;
		--dkgray: #666666;
		--white: #ffffff;
    
        --content-width: 1440px;
    }

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

	.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: 10px 20px 10px 20px; height: 45px; margin: 0; transition: .4s all;}
	ul.iiMenu > li > a {font-size: 1rem; color: var(--white); text-decoration: none; text-transform: uppercase; font-weight: 600; } /* 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;
	}
	
	ul.iiMenu > li::after {
	  content: '';
	  position: absolute;
	  bottom: 0;
	  left: 0;
	  width: 100%;
	  height: 4px;
	  background-color: var(--r3-green);
	  opacity: 1;
	  transition: opacity 300ms, transform 300ms;
	}
	
	ul.iiMenu > li::after {opacity 1; transform: scale(0); transform-origin: center;}

	ul.iiMenu > li:hover::after, ul.iiMenu > li:focus::after {transform: scale(1);}

	.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(--r3-dkblue); color: var(--white);
		 font-size:1.2rem;
	 }
	 #sidenav.active { left: 0; } /* switch "right" to "left" */
	 #sidenav-header {margin: 20px 0 0 40px; width: 140px;}
	 #sidenav-header img { display: block; width: 60px; }
	 #sidenav ul { 
	     padding: 0; 
             margin:0;
	 }
	 
	 .sidenav-slogan {font-family: 'Merriweather', times, serif; font-size: 1rem; font-weight: 400; font-style: italic; color: var(--white); margin: 20px 0 0 40px;}
    
     #sidenav > ul { max-height: calc(100vh - 100px); margin: 30px 0 0 10px; padding-bottom: 150px; overflow: auto; border-top: 1px solid #444;}
     #sidenav li { list-style-type: none; margin: 0; padding: 5px 2rem; }
	 #sidenav > ul > li { border-bottom: 1px solid #444; }
	 #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: 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(--r3-dkblue); text-align: center; font-size: .8rem; color: var(--white)}
 
	 .sidenav-request {margin: 40px;}
    
    /* TEXT */
	.textWhite {color: var(--white);}
	.textBlack {color: var(--black);}
	.textMidGray {color: var(--midgray);}
	.textDkBlue {color: var(--r3-dkblue);}
	.textBlue {color: var(--r3-blue);}
	
	.textRight {text-align: right;}
	
	.contentText2 {font-size: 1.6rem; line-height: 2.2rem;}
	
	/* BACKGROUND COLORS */
	.bgBlue {background-color: var(--r3-blue);}
	.bgGreen {background-color: var(--r3-green);}
	.bgGray {background-color: var(--ltgray);}

	/* BUTTONS */
	a.buttonSignUp-Header {display: block; font-size: 1rem; text-transform: uppercase; font-weight: 600; background-color: var(--r3-orange); color: var(--white); text-decoration: none; text-align: center; padding: 8px 0; letter-spacing: .5px;}
	
	a.button1-Orange {display: block; font-size: 1.2rem; text-transform: uppercase; font-weight: 600; background-color: var(--r3-orange); color: var(--white); text-decoration: none; text-align: center; padding: 10px 0; letter-spacing: .5px; transition: 1s all;}
	a.button1-Orange:visited {display: block; font-size: 1.2rem; text-transform: uppercase; font-weight: 600; background-color: var(--r3-orange); color: var(--white); text-decoration: none; text-align: center; padding: 10px 0; letter-spacing: 1px; transition: .3s all;}
	a.button1-Orange:hover {display: block; font-size: 1.2rem; text-transform: uppercase; font-weight: 600; background-color: var(--r3-teal); color: var(--white); text-decoration: none; text-align: center; padding: 10px 0; letter-spacing: .5px; transition: 1s all;}
	
	/* LINKS */
	a.linkHeaderNav {color: var(--white); text-decoration: none; font-weight: 600; text-transform: uppercase; font-size: 1rem;}

	/* HEADINGS */
	
	h2 {font-family: 'Merriweather', times, serif; font-size: 2.2rem; line-height: 2.6rem; font-weight: 400; margin: 0 0 20px 0; padding: 0;}
	h3.sectionHeading {font-family: 'Merriweather', times, serif; font-size: 2.4rem; line-height: 2.8rem; font-weight: 400; margin: 0 0 20px 0; padding: 0;}
	h4.highlightHeading {font-family: 'Merriweather', times, serif; font-size: 1rem; line-height: 1.6rem; font-weight: 400; margin: 0 0 20px 0; padding: 0; text-transform: uppercase; letter-spacing: 2px;}

	/* HEADER */
	.header-wrapper {position: fixed; width: 100%; z-index: 99999; background-color: #205781;}
	.header-container {width: 100%; display: grid; grid-template-columns: 140px auto 500px;}
	.header-logo {background-color: var(--r3-dkblue); padding: 20px 0; position: absolute; width: 140px; border-bottom: 2px solid var(--r3-orange);}
	.header-logo img {width: 60%; margin: 0 auto;}
	
	.header-slogan {font-family: 'Merriweather', times, serif; font-size: 1rem; font-weight: 600; font-style: italic; color: var(--white); margin: 10px 0 0 20px;}
	.header-slogan-script {font-family: 'Merriweather', times, serif; font-weight: 400; color: var(--ltgray); text-transform: none; font-style: italic; margin: 0 0 0 20px;}
	
	.header-middle-Mobile {display: none;}
	
	.header-topnav {margin: 5px 0 0 0;}
	
	.header-right {display: grid; grid-template-columns: auto 160px; align-items: center; grid-column-gap: 20px;}
	.header-right-links a {margin: 0 10px;}
	
	/* FRONT PAGE */
	.fp-hero-wrapper {width: 100%; position: relative; padding: 88px 0 0 0;}
	.fp-videoholder {width: 100%; background: var(--r3-blue) url('images/fp-hero-1.jpg') top no-repeat;}
	
	.fp-videoholder::after {
	  content: "";
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  /* background-color: rgba(32, 53, 72, 0.5); */
	  background: #000000;
	  background: linear-gradient(90deg,rgba(0, 0, 0, 1) 0%, rgba(112, 183, 206, 0) 100%);
	  z-index: 1;
	}
	
	.fp-hero-cta {width: 60%; position: absolute; top: 55%; left: 35%; transform: translate(-50%, -50%); color: #fff; z-index: 888; border-left: 4px solid var(--r3-teal); padding: 20px 40px 20px 40px; /*background-color: #3338;*/ max-width: 700px;}
	.fp-hero-heading {font-family: 'Merriweather', times, serif; font-size: 3rem; line-height: 4rem; color: var(--white);}
	.fp-hero-subheading {color: var(--ltgray); font-size: 1.2rem; line-height: 1.6rem; margin: 30px 0;}
	.fp-hero-subheading2 {color: var(--white); font-family: 'Merriweather', times, serif; text-transform: uppercase; font-size: 1rem; letter-spacing: 2px;}

	.fp-sect2-wrapper {width: 100%; display: grid; grid-template-columns: 1fr 1fr; margin: 5px 0 0 0;}
	.fp-sect2-holder {width: 100%; padding: 60px 100px;}
	.fp-sect2-holder-left {background: #000000; background: linear-gradient(182deg,rgba(0, 0, 0, 1) 0%, rgba(32, 87, 129, 1) 100%); color: var(--white);}
	.fp-sect2-holder-right {background: #000000; background: linear-gradient(182deg, rgba(0, 0, 0, 1) 0%, rgba(32, 53, 72, 1) 100%); color: var(--white);}

	.fp-sect3-title-wrapper {width: 90%; margin: 100px auto 0px auto; text-align: center;}
	.fp-sect3-wrapper {width: 100%;max-height: 1000px; aspect-ratio: 16 / 9; background: #fff url('images/fp-sect3-bg1.jpg') no-repeat top; background-size: cover; position: relative;}
	.fp-sect3-cta {width: 82%; position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); z-index: 888; border-bottom: 4px solid var(--r3-dkblue); padding: 300px 50px 60px 50px; background-color: #fff8; display: grid; grid-template-columns: 1fr 1fr; align-items: center; grid-column-gap: 100px;}
	
	.fp-sect4-wrapper {width: 90%; margin: 100px auto; text-align: center; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 80px;}
	.fp-sect4-holder {text-align: center;}
	.fp-sect4-imageholder {margin: 0 auto 40px auto;}
	
	.fp-sect5-wrapper {width: 90%; margin: 0 auto; text-align: center;}
	
	/* LAYOUT */
	.iconSpace {margin: 0 5px 0 0;}
	.buttonHolder {margin: 30px 0;}
	
	.profilePic {width: 250px; height: 250px; border-radius: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center;}
	img.imgCircle {width: 100%; height: 100%; object-fit: cover;}
	
	.sectionpic-wrapper {width: 100%; height: 488px; min-height: 488px; padding: 88px 0 0 0; position: relative;}
	.sectiontitle-container {width: 80%; position: absolute; top: 55%; left: 50%; transform: translate(-50%, -50%);}
	
	.page-wrapper {width: 80%; margin: 60px auto;}
	
	.grid-1-1 {width: 100%; display: grid; grid-template-columns: 1fr 1fr;}
	.contentGrid-contentHolder {padding: 0 80px; min-height: 500px;}

	/* CONTENT PAGE CUSTOM STYLES */
	
	
	/* FOOTER */
	.footer-wrapper {width: 100%; margin: 80px 0 0 0; background-color: var(--r3-dkblue); padding: 40px 0;}
    .footer-container {width: 90%; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; align-items: center;}
    .copyright {color: var(--white);}
    .footer-social {text-align: right; font-size: 2rem;}
    .footer-social a {color: var(--white); text-decoration: none; margin: 0 10px;}
    .footer-social a:visited {color: var(--white); text-decoration: none;}
    .footer-social a:hover {color: var(--teal); text-decoration: none;}
    
    @media only screen and (max-width: 1440px) {
		.fp-hero-heading {font-family: 'Merriweather', times, serif; font-size: 2.4rem; line-height: 3rem; color: var(--white);}
		.fp-hero-subheading {color: var(--ltgray); font-size: 1rem; line-height: 1.2rem; margin: 30px 0;}
		h3.sectionHeading {font-size: 1.8rem; line-height: 2.2rem;}
		
		.profilePic {width: 200px; height: 200px; border-radius: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center;}

	}

	@media only screen and (max-width: 1199px) {
		.header-container {width: 100%; display: grid; grid-template-columns: 140px auto 300px;}

		.fp-hero-heading {font-family: 'Merriweather', times, serif; font-size: 2rem; line-height: 2.4rem; color: var(--white);}
		.fp-hero-subheading {color: var(--ltgray); font-size: 1rem; line-height: 1.2rem; margin: 30px 0;}
		h3.sectionHeading {font-size: 1.4rem; line-height: 2rem;}
		
		.fp-sect2-wrapper {width: 100%; display: grid; grid-template-columns: 1fr; margin: 5px 0 0 0;}
		.fp-sect4-wrapper {width: 90%; margin: 100px auto; text-align: center; display: grid; grid-template-columns: 1fr; grid-column-gap: 0px; grid-row-gap: 50px;}
		
		.grid-1-1 {width: 100%; display: grid; grid-template-columns: 1fr;}
		.contentGrid-contentHolder {padding: 0px; }
	}

	@media only screen and (max-width: 1023px) {
		.fp-hero-wrapper {width: 100%; position: relative; padding: 80px 0 0 0;}
		.fp-hero-cta {width: 90%; position: absolute; top: 55%; left: 50%; transform: translate(-50%, -50%); color: #fff; z-index: 888; border-left: 4px solid var(--r3-teal); padding: 20px 40px 20px 40px; /*background-color: #3338;*/ max-width: 700px;}
		.fp-hero-heading {font-family: 'Merriweather', times, serif; font-size: 1.8rem; line-height: 2.2rem; color: var(--white);}
		.fp-hero-subheading {color: var(--ltgray); font-size: 1.2rem; line-height: 1rem; margin: 30px 0;}
		.fp-hero-subheading2 {color: var(--white); font-family: 'Merriweather', times, serif; text-transform: uppercase; font-size: 1rem; letter-spacing: 1px;}
		
		.header-right {display: none;}
		.mobileNav {display: block; text-align: right; color: var(--white); font-size: 1.8rem; margin: 20px 20px 0 0;}
		
		.header-container {width: 100%; display: grid; grid-template-columns: 100px auto 80px;}
		.header-logo {background-color: var(--r3-dkblue); padding: 20px 0; position: absolute; width: 100px; border-bottom: 2px solid var(--r3-orange);}
		.header-middle {display: none;}
		.header-middle-Mobile {display: block; padding: 5px 0 15px 0;}
		.header-slogan-script2 {font-family: 'Merriweather', times, serif; font-weight: 400; color: var(--ltgray); text-transform: none; font-style: italic; margin: 0 0 0 20px; font-size: 1rem;}
		
		.fp-sect3-wrapper {width: 100%; background: none;}
		.fp-sect3-cta {width: 90%; position: relative; display: grid; grid-template-columns: 1fr; align-items: center; grid-column-gap: 60px; background: none;}
		
		.fp-sect4-wrapper {width: 90%; margin: 50px auto; text-align: center; display: grid; grid-template-columns: 1fr; grid-column-gap: 0px; grid-row-gap: 50px;}
	
		@media only screen and (max-width: 1023px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
	
	
		}

	}

	@media only screen and (max-width: 767px) {
		.header-container {width: 100%; display: grid; grid-template-columns: 75px auto 70px;}
		.header-logo {background-color: var(--r3-dkblue); padding: 20px 0; position: absolute; width: 75px; border-bottom: 2px solid var(--r3-orange);}
		.header-slogan-script2 {font-family: 'Merriweather', times, serif; font-weight: 400; color: var(--ltgray); text-transform: none; font-style: italic; margin: 0 0 0 20px; font-size: .6rem; }
		.mobileNav {display: block; text-align: right; color: var(--white); font-size: 1.4rem; margin: 20px 20px 0 0;}
		
		.fp-hero-wrapper {width: 100%; position: relative; padding: 70px 0 0 0;}
		.fp-hero-cta {width: 90%; position: absolute; top: 60%; left: 50%; transform: translate(-50%, -50%); color: #fff; z-index: 888; border-left: 4px solid var(--r3-teal); padding: 0px 40px 0px 40px; /*background-color: #3338;*/}
		.fp-hero-heading {font-family: 'Merriweather', times, serif; font-size: 1rem; line-height: 1.4rem; color: var(--white);}
		.fp-hero-subheading {color: var(--ltgray); font-size: .8rem; line-height: 1rem; margin: 10px 0 0 0;}
		.fp-hero-subheading2 {display: none; color: var(--white); font-family: 'Merriweather', times, serif; text-transform: uppercase; font-size: 1rem; letter-spacing: 1px;}
		
		.fp-sect2-holder {width: 100%; padding: 60px 40px;}
	
	}

	@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; margin: 20px 0 0px 0;}
    h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
    #root, #__next { isolation: isolate; }
}