/*
Theme Name:     roofroof
Theme URI:      https://www.roofroofroofing.com/
Description:    Roof Roof Roofing WP-Theme
Version:        1.0
Author:         CHRS Interactive
Author URI:	    https://www.chrsinteractive.com/
*/

/* ---------------------------- */

/* -- @MASTERHEAD/NAVIGATION -- */
body.overflow-hidden {overflow: hidden;}

.site-header {width:100%;position:sticky;top:0;left:0;padding:10px 0;z-index:99;background:#fff;}
.site-header.sticky {box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);}

.logo {width:150px;float:left;}
.logo img {display:block;}

.header-contact {float:right;text-align:right;margin:20px 30px 0 0;}
.header-contact ul li {display:inline-block;margin-left:20px;}
.header-contact ul li a {display:block;width:35px;height:35px;background:var(--color-blue);border-radius:100%;}
.header-contact ul li a img {display:block;width:100%;height:100%;}

/* Main Menu */
.mainNav-wrap {float:left;width:calc(100% - 300px);text-align:center;margin-top:40px;}
.mainNav li {display:inline-block;margin:0 30px;font-weight:900;}
.mainNav li a {display:inline-block;color:var(--color-blue);position:relative;}
.mainNav li a:after {content:'';position:absolute;bottom:-3px;left:0;width:0;height:2px;background:var(--color-blue);transition:0.4s;}
.mainNav li a:hover:after,
.mainNav li.current-menu-item a:after {width:100%;}

/* Level 2 */
.mainNav li ul {display:none;}
.mainNav li:hover > ul {display: block;}
.mainNav li ul {position: absolute; top: 100%;padding:10px 0;width:100%;max-width:270px;text-align:left;z-index:99;background:#fff;}
.mainNav li ul li {display:block;position:relative;}
.mainNav li ul li a {color:#444;}
.mainNav li ul li a:hover {color:#000;}

/* Responsive Menu */
.mainNav-wrap {display:none;}

.mobile-nav-trigger-outter {float:right;width:30px;height:30px;margin-top:20px;z-index:99}
.mobile-nav-trigger {display:block;}
.mobile-nav-trigger .cd-menu-icon {margin-top:15px;margin-left:15px;display: block;-webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); width: 30px; height:2px;-webkit-transition: background-color 0.3s; -moz-transition: background-color 0.3s; transition: background-color 0.3s;}
.mobile-nav-trigger .cd-menu-icon::before,
.mobile-nav-trigger .cd-menu-icon:after { content: ''; width: 100%; height: 100%; position: absolute;top:0;left:0;z-index:9;-webkit-transition: -webkit-transform .3s, top .3s, background-color 0s; -moz-transition: -moz-transform .3s, top .3s, background-color 0s; transition: transform .3s, top .3s, background-color 0s; }
.mobile-nav-trigger .cd-menu-icon::before { top: -9px; }
.mobile-nav-trigger .cd-menu-icon::after { top: 9px; }
.mobile-nav-trigger .cd-menu-icon.is-clicked::before { top: 0; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg);}
.mobile-nav-trigger .cd-menu-icon.is-clicked::after { top: 0; -webkit-transform: rotate(225deg); -moz-transform: rotate(225deg); -ms-transform: rotate(225deg); -o-transform: rotate(225deg); transform: rotate(225deg); }
.mobile-nav-trigger .cd-menu-icon.is-clicked { background: none !important }
.mobile-nav-trigger .cd-menu-icon,
.mobile-nav-trigger .cd-menu-icon::before,
.mobile-nav-trigger .cd-menu-icon:after,
.mobile-nav-trigger .cd-menu-icon.is-clicked::before,
.mobile-nav-trigger .cd-menu-icon.is-clicked::after {background:var(--color-blue);}

.mobile-nav {position: fixed;visibility:hidden;opacity:0; left: 0; top: 0; height:100%;width:100%;background:var(--color-blue); z-index:98;transition:all 0.3s ease;overflow:scroll;}
.mobile-nav.is-visible {visibility:visible;opacity:1;}
.mobile-nav-inner {padding-top:160px;}

.mobileNav li {display:block;font-size:2.4rem;font-weight:900;margin-bottom:30px;text-align:center;}
.mobileNav li a,
.mobileNav li a:hover {color:#fff;}

.post-edit-link {display:block;position:fixed;top:50%;right:0;padding:10px;z-index:99999999;background:rgba(139,16,6,0.8);color:#fff;font:16px/1 Helvetica, Arial, serif;text-transform:uppercase;font-weight:600;}
.post-edit-link:hover {background:rgba(139,16,6,1);color:#fff;}

/* -- @CONTENT ---------------- */
.button {display:inline-block;height:40px;line-height:40px !important;padding:0 30px;border:none;background:var(--color-blue);color:#fff;text-transform:uppercase;text-align:center;box-sizing:border-box;font-size:2.4rem;font-weight:900;}
.button:hover {color:#fff;}
.button-clear {background:none;color:var(--color-blue);padding:0;}

.banner {width:100%;position:relative;}
.page-banner {height:400px;}
.page-banner-inner {position:absolute;top:50%;left:0;width:100%;transform:translateY(-50%);z-index:2;}
.page-banner-inner h1,
.page-banner-inner p {color:#fff;margin-bottom:5px;}
.page-banner-inner p {font-size:2.0rem;}
.banner-overlay {position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.4);}

.cta-bar {text-align:center;}
.cta-bar-logo {width:150px;margin:0 auto 20px;}
.cta-bar-content h2 {margin:0;font-weight:700;}

.content-banner-content {padding:40px 0;}
.content-banner-content .entry {max-width:400px;margin:0 auto;}
.content-banner-content h2 {font-size:2.0rem;}

.content-banner-pic {width:100%;height:250px;}

.service-grid-item {margin-top:40px;}
.service-grid-item-pic {width:80%;margin:0 auto;}
.service-grid-item-pic img {width: 100%;height: auto;aspect-ratio: 1/1;display: block;}
.service-grid-item-content {display:block;background: #fff;margin-top: calc(-40% + 30px);padding: calc(40%) 30px 30px;}
.service-grid-item-content h3,
.service-grid-item-content p {max-width:80%;margin:0 auto 10px;}
.service-grid-main .service-grid-item-pic img {aspect-ratio: 1.6/1;}

@media (max-width:1000px) {
  .service-grid-item.last {margin-top:0;}
  .service-grid-item.last ul {margin-top:-10px;}
}

.home-map-content {padding:40px 0;}
.home-map-content ul {column-count:2;margin-top:40px;}
.home-map-content ul li {display:block;margin-bottom:20px;height:20px;line-height:20px;background:url(images/icon-location.svg) no-repeat left center;padding-left:30px;}

.certificate-logos {max-width:1000px;margin:40px auto 0;}

/* About */
.why-grid {display: grid;grid-template-columns: repeat(auto-fill, 48%);justify-content: space-between;}
.why-grid-item {margin-top:40px;}
.why-grid-item-pic {width:100px;margin:0 auto 20px;}
.why-grid-item-content p {color:#fff;margin-bottom:5px;}
.why-grid-services .why-grid-item-content p {color:var(--color-body);}
.why-grid-services .why-grid-item-content p strong {color:var(--color-blue);}

.footer-contact-wrap {width:100%;overflow:hidden;}
.footer-contact-left,
.footer-contact-right {padding:40px 0;position:relative;}
.footer-contact-left:before {content:'';position:absolute;top:0;left:50%;width:200%;height:100%;transform:translateX(-50%);background:var(--color-blue)}
.footer-contact-left .entry {position:relative;z-index:2;}
.footer-contact-left .entry h3,
.footer-contact-left .entry p {color:#fff;margin:0;}
.footer-contact-right p:last-of-type {margin:0;}

/* Contact */
.form-wrap {padding:30px;margin-bottom:40px;background:#fff;}
.form-wrap input[type="text"],
.form-wrap input[type="email"],
.form-wrap input[type="tel"],
.form-wrap textarea,
.form-wrap select {background:var(--color-grey-light);border:none !important;}



/* -- @FOOTER ----------------- */
.site-footer {background:url(images/bg-footer.jpg) no-repeat center center;background-size:cover;text-align:center}
.site-footer,
.site-footer a {color:#fff;}

.footer-logo,
.footer-nav,
.footer-address {padding-bottom:30px;}

.footer-nav li {display:block;margin-bottom:10px;}

.footer-copy {font-size:1.4rem;line-height:1.4;display:block;margin-top:40px;}

/* #Clearer
================================================== */
.container:after,
.row:after,
.entry:after {content: ""; display: table; clear: both;}