@font-face {
    font-family: 'Lato';
    src: url('/fonts/Lato-Regular.woff2') format('woff2'), url('/fonts/Lato-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Merriweather Sans';
    src: url('/fonts/MerriweatherSans-Regular.woff2') format('woff2'), url('/fonts/MerriweatherSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root{
    --primary: #ffffff;
    --secondary: #1f1e1b;
    --accent: #ffd119;
    --text: #2b2a27;
    --background-gradient: linear-gradient(180deg, var(--primary-color) 0%, var(--secondary-color) 100%);
}


*{margin:0;padding:0;box-sizing: border-box;}
html{margin:0;padding:0;}
body {font-family: 'Lato'; font-size:14px;color: #040404;margin:0;padding:0;background-color:#222222;}
.clear{clear:both;}
sub{font-size:x-small;}

h1{font-family: 'Lato';color:#ffffff;font-size:48px;text-shadow: #000000 2px 2px 15px;text-align:center;margin-bottom:8px;}
h1.region{font-family: 'Lato';color:#ffffff;font-size:28px;text-shadow: #000000 2px 2px 15px;margin-bottom:8px;text-align:left;}
h2{font-family: 'Lato';margin-bottom:4px;}
h2.header{font-family: 'Lato';margin-bottom:4px;color:#ffffff;font-size:24px;text-shadow: #000000 1px 0 10px;text-align:center;}
h2.feature{font-weight:bold;font-family: 'Merriweather Sans';margin:0px;margin-top:3px;color:#ffffff;font-size:24px;font-weight:bold;}
h3{font-weight:bold;font-family: 'Merriweather Sans';margin:0px;}
h4{font-weight:bold;font-family: 'Merriweather Sans';margin:0px;font-size:14px;color:#000000;}

small {font-size: 10px; font-weight: normal; font-family: 'Merriweather Sans'; margin: 0px;}

header{}
footer{background-color:#eeeeee;;margin:0 10px;padding:10px;border-radius:7px;margin-top:10px;}
#fade {background-color: #7c7c7c;width: 100%;text-align: center;border-radius: 7px;}

.dropdown {visibility:hidden; opacity:0; position:absolute; top:100%; left:0; display:none; width: 100%; z-index:50; list-style:none; }

.newnav{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr;background-color:#cccccc;text-align:center;gap:10px;right:0;border-radius:7px;}
.newnav a, .newnav a:visited{color:#ffffff;  font-family: 'Merriweather Sans', sans-serif;text-decoration:none;transition: all .7s ease;}
.newnav a:hover {transition: all .7s ease;color: #ffcd04;}

.stars{color: gold;font-size:smaller;}
.icon_certaineed{position:relative;margin-top:22px;margin-left:22px;}

.container {margin: 0;padding:0;max-width:1000px;margin:0 auto;}
.content-area {}
.container-offering{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.offering {margin-top:10px;margin-right:20px;float: left;width: 540px;
           font:normal 14px 'Merriweather Sans';color:#000000;background:rgba(255,255,255,0.8);border-radius: 15px;}

.main-content {display: flex;flex-direction: column;padding:0 10px;}
.intro-content{padding:0 10px;}
.sidebar {margin-top: 20px;border-radius:7px;background-color:#f7f6ea;}

.card {background: rgba(255,255,255,1);padding:21px;border-radius:7px;}
.card > h2{padding-top:10px;margin-left:10px;width:150px;float:left;}
.card2 {background: rgba(235,235,235,0.8);padding:7px;border-radius:7px;margin:10px;}
.card p.flex{margin-top:7px;display:flex;}
.card p{margin-top:7px;}
.card img{margin-right:10px;}
.card a, .card a:visited{color:#222222;  font-family: 'Merriweather Sans', sans-serif;text-decoration:none;transition: all .7s ease;}
.card a:hover {transition: all .7s ease;color: #ffd119; text-shadow: 3px 3px 3px black;}

#divLogos {margin-bottom:10px;height:85px;border-bottom:1px solid #999999;display:flex;justify-content:center;}
#divLogos img {float:left;margin:0 20px 10px 20px;}

/* Contact Form Styles */
        .contact-form {padding: 20px;border-radius:7px;}
        .contact-form-confirmation{padding: 20px;border-radius:7px;text-align:center;display:none;}
        .form-group {margin-bottom: 15px;}
        label {display: block;margin-bottom: 5px;}
        input, textarea {width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;}        
        textarea {min-height: 100px;}
        .grid {display: grid;grid-template-columns: 1fr;gap: 10px;}

        .divthankyou{margin:10px;padding:10px}

/* ==================== ALL SIZES */
.txtError{color:#dd0000;font-size:10px;}

        
   /* ==================== MOBILE */
   @media (max-width: 550px) {
            body{background-color:#000000;}
            h1{font-family: 'Lato';color:#ffffff;font-size:32px;text-shadow: #000000 2px 2px 15px;text-align:center;margin-bottom:8px;}
            h2{font-family: 'Lato';margin-bottom:4px;}
            h2.header{font-family: 'Lato';margin-bottom:4px;color:#ffffff;font-size:18px;text-shadow: #000000 1px 0 10px;text-align:center;}
            h3{font-weight:bold;font-family: 'Merriweather Sans';margin:0px;}
            h4{font-weight:bold;font-family: 'Merriweather Sans';margin:0px;}
            
            .video_container{box-sizing:border-box;height:300px;overflow:hidden;border-radius:11px;margin:0 10px 20px 10px;}
            #h1video{width:320px;text-align:left;position:absolute;}
            #h1video>p{width:100%;font-family: 'Lato' !important;font-weight:bold;color:#ffffff;font-size:36px !important;text-shadow: #000000 2px 2px 15px;margin:30px 0 20px 20px;}
            #h1video>p>span{font-size:20px !important;}
            #h2video{width:320px;text-align:left;position:absolute;}
            #h2video>p{width:100%;font-family: 'Lato' !important;font-weight:bold;color:var(--accent);font-size:18px;text-shadow: #000000 2px 2px 10px;margin:180px 0 10px 20px;}
            .icon_certaineed_video{display:none;}

            .container-header {max-width: 480px;margin: 0 auto;padding: 1rem;}
            #divLogos img {float:left;margin:0 2px 2px 2px;width:70px;}
            #divFooter {text-align: center;color: #222222;font-size: 10px;font-family: 'Merriweather Sans', sans-serif;margin-bottom:7px;width:100%;vertical-align:middle;}
            .div-logo{text-align:center;}
            .navDesktop{display:none;}
            .navDesktop-region{display:none;}
            #fade{display:none;}
            .newnav{display:none;}
            .container-roofing{display:grid;grid-template-columns:1fr;gap:10px;margin:0 10px;}
            .icon_certaineed{position:absolute;right:10px;top:22px;}
            
            .googlemap{width:100%;margin:11px;border:0;}
            .googleReviews{width:100%;border-radius:7px;}
            .googleGuarantee{width:125px;margin:10px 10px 0 10px;}

            .sidebar-region {width: 100%;margin-top: 0;background: rgba(247,246,234, 0.8);border-radius:7px;}
            .content-area-region {display:flex;flex: 1;margin-right: 10px; align-items: center;padding:10px;margin-bottom:40px;}
       }
   


   /* ==================== TABLET */
   @media (min-width: 551px) {
       /* body{background:url('/images/back_jtaylor_2025.jpg') no-repeat #222222;background-position-y:250px;} */
       
       .grid {grid-template-columns: repeat(1, 1fr);}
       .navDesktop{display:none;}
       .navDesktop-region{display:none;}
       .newnav{display:none;}

       .video_container{box-sizing:border-box;height:300px;overflow:hidden;border-radius:11px;margin:0 10px 20px 10px;}
        #h1video{width:500px;text-align:left;position:absolute;margin:90px 0 20px 50px;}
        #h1video>p{font-family: 'Lato' !important;font-weight:bold;color:#ffffff;font-size:36px;text-shadow: #000000 2px 2px 15px;}
        #h2video{width:500px;text-align:left;position:absolute;margin:230px 0 20px 50px;}
        #h2video>p{font-family: 'Lato' !important;font-weight:bold;color:var(--accent);width:500px;font-size:20px;text-shadow: #000000 2px 2px 10px;}

       #fade{display:none;}
       .container-roofing{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding: 0 10px;}
       .icon_certaineed{position:absolute;right:10px;top:9px;}
       .icon_certaineed_video{position:absolute;}
       #divLogos img {float:left;margin:0 2px 2px 2px;width:100px;}
       #divFooter {text-align: center;color: #222222;font-size: 10px;font-family: 'Merriweather Sans', sans-serif;margin-bottom:7px;width:100%;vertical-align:middle;}

       .sidebar-region {width: 100%;margin-top: 0;background: rgba(247,246,234, 0.8);border-radius:7px;}
        .content-area-region {display:flex;flex: 1;margin-right: 10px; align-items: center;padding:10px;margin-bottom:40px;}
       }



   /* ==================== DESKTOP */
   @media (min-width: 875px) {
            /* body{background:url('/images/back_desktop_1.jpg') no-repeat center #222222;background-position-y:250px;} */
            .call-button{display:block;}
            .grid {grid-template-columns: repeat(2, 1fr);}
            .main-content {flex-direction: row;}
            .content-area {display:flex;flex: 1;margin-right: 10px;}
            .content-area-region {display:flex;flex: 1;margin-right: 10px; align-items: center;padding:10px;}
            .content-area-region {font-size:16px;}
            .sidebar {width: 300px;margin-top: 0;background: #f7f6ea;border-radius:7px;}
            .sidebar-region {width: 400px;margin-top: 0;background: #f7f6ea;border-radius:7px;}
            .grid {display:grid;grid-template-columns: 1fr 1fr;}
            .burger{display:none;}
            .navClassic{display:block;}
            .newnav{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr;background-color:#999999;text-align:center;gap:5px;right:0;}
            #fade{display:block;margin-bottom:4px;}
            .googlemap{width:490px;height:350px;margin:11px;border:0;}
            .googleReviews{width:290px;max-width:350px;border-radius:7px;}
            .googleGuarantee{width:125px;margin:20px 10px 0 10px;float:left;}
            /* main{background:url('/images/back_jtaylor_2025.jpg') no-repeat top;} */

            .div-logo{width:230px;float:left;margin-left:10px;}
            .icon_certaineed_video{position:absolute;top:96px;right:0;}

            .navDesktop{z-index:99;margin:0 10px 4px 10px;padding: 4px 0;display:flex;text-align:center;background:rgba(225,225,225,0.23);border-radius:7px;}
            .navDesktop a, .navDesktop a:visited{color:#ffffff;  font-family: 'Merriweather Sans', sans-serif;text-decoration:none;transition: all .7s ease;}
            .navDesktop a:hover {transition: all .7s ease;color: #ffcd04;}
            .navDesktop li:hover {cursor: pointer;background: rgba(0,0,0,0.7);border-radius: 8px;}

            .navDesktop-region{z-index:99;margin:0 10px;padding: 4px 0;display:flex;text-align:center;}
            .navDesktop-region a, .navDesktop-region a:visited{color:#ffffff;  font-family: 'Merriweather Sans', sans-serif;text-decoration:none;transition: all .7s ease;}
            .navDesktop-region a:hover {transition: all .7s ease;color: #ffcd04;}
            .navDesktop-region li:hover {cursor: pointer;background: rgba(0,0,0,0.7);border-radius: 8px;}

            .video_container{width:980px;height:500px;overflow:hidden;border-radius:11px;margin-left:10px;margin-bottom:10px;}
            #h1video{width:500px;text-align:left;position:absolute;margin:200px 0 20px 50px;}
            #h1video>p{font-family: 'Lato' !important;font-weight:bold;color:#ffffff;font-size:48px;text-shadow: #000000 2px 2px 15px;}
            #h2video{width:500px;text-align:left;position:absolute;margin:380px 0 20px 50px;}
            #h2video>p{font-family: 'Lato' !important;font-weight:bold;color:var(--accent);width:500px;font-size:24px;text-shadow: #000000 2px 2px 10px;}

            .topnav{display:flex;flex-direction: row; margin: auto;}
            .topnav li {list-style: none;width: 125px;text-align: center;padding: 2px;text-shadow: #000000 1px 0 10px;position:relative;}            
            .topnav li:hover > ul, .topnav li ul:hover {
            visibility: visible;opacity: 1;padding:4px;display: block;text-align: left;
            box-shadow: 0px 3px 5px -1px #000000;background: rgba(55,55,55,0.8);border-radius: 8px;
            animation: slide-in 250ms;animation-timing-function: linear;width: 185px;top:100%;}

            .dropdown li {clear: both;width: 175px;text-align: left;border-style: none;padding:2px;}
            .call-button{display:none;}

            .container-roofing{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin:0 10px;}

            footer{background:rgba(235, 235, 235, 0.8);}
            #divFooter {text-align: center;color: #444444;font-size: 12px;font-family: 'Merriweather Sans', sans-serif;margin-bottom:7px;width:100%;vertical-align:middle;}
            #divFooter a, a:visited{color:#222222;}
            #divFooter a:hover{color:#000000;}
            .cardwide{display:block;margin-top: 20px;border-radius:7px;height:fit-content;vertical-align:middle;}
        }   /* ==================== DESKTOP */


        .phone-container {width: 300px;height: 30px;overflow: hidden;position: relative;}
        .phone-slider {position: absolute;width: 100%;transition: transform 1s ease;}
        .phone-number {height: 30px;line-height: 30px;text-align: left;font-size: 20px;color:#ffffff;font-family: Arial, sans-serif;display: flex; align-items: center; text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.7);}        
        .phone-number span {margin-right: 10px;}
        .phone-number img {vertical-align: middle;}

.certainteed_shingle {color:#000000;background-color:#eeeeee;display:block;margin-bottom:5px;font-size:10px;border-radius:8px;overflow:hidden;position:relative;}
.certainteed_shingle img {width:100%;border-radius:8px;}
.certainteed_shingle span {font-size: 18px;font-weight: bold;font-family: 'Merriweather Sans';margin: 0px;margin-bottom:-7px;display:flex;}

.certainteed_shingle_text{color:#000000;position:absolute;height:87px;margin-top:-90px;margin-left:10px;margin-right:10px;background:rgba(255,255,255,0.7);padding:7px;font-size:11px;border-radius:7px;line-height:14px;}

.one_column{width:100%;border-radius:8px;text-align:center;}
.one_column img{border-radius:8px;}

   
/* Call Button Styles */
.call-button {
    position: fixed;bottom: 100px;right: 20px;
    background-color: var(--accent); color: black;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    border: none; border-radius: 50px; padding: 15px 25px;
    text-decoration: none;
    align-items: center;gap: 8px; z-index: 1000;
    cursor: pointer; transition: all 0.3s ease;
}
.call-button:hover {transform: translateY(-2px);box-shadow: 0 6px 12px rgba(0,0,0,0.3);}
.call-button svg {width: 20px;height: 20px;}


.call-button-region {
    position:fixed; 
    background-color: var(--accent); color: black;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    border: none; border-radius: 22px; padding: 5px 15px;
    text-decoration: none;
    align-items: center;gap: 8px; z-index: 1000;
    cursor: pointer; transition: all 0.3s ease;
}
.call-button-region:hover {transform: translateY(-2px);box-shadow: 0 6px 12px rgba(0,0,0,0.3);}
.call-button-region svg {width: 20px;height: 20px;}

.call-button-region2 {
    position:relative; 
    display:inline-block;
    background-color: var(--accent); color: black;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    border: none; border-radius: 22px; padding: 5px 15px;
    text-decoration: none;
    align-items: center;gap: 8px; z-index: 1000;
    cursor: pointer; transition: all 0.3s ease;
}
.call-button-region2:hover {transform: translateY(-2px);box-shadow: 0 6px 12px rgba(0,0,0,0.3);}
.call-button-region2 svg {width: 20px;height: 20px;}



.logo{border-radius:8px;}
#divAreasWeServe{width:100%;text-align:center;}
.section1{width:500px;margin:auto;}
.city_list{flex-flow: column wrap;float:left;}
.city_list li{list-style: none;width:150px;text-align:center;}


#divFooterCities {}

.button-3 {
    appearance: none;
    background-color: #f9cd0a;
    border: 1px solid rgba(27, 31, 35, .15);
    border-radius: 6px;
    box-sizing: border-box;
    color: #222222;
    cursor: pointer;
    display: inline-block;
    font-family: -apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
    font-size: 14px; font-weight: 600;
    line-height: 20px;
    position: relative;
    text-align: center;
    text-decoration: none;user-select: none;-webkit-user-select: none;
    touch-action: manipulation;
    vertical-align: middle;
    white-space: nowrap;
}

.button-3:focus:not(:focus-visible):not(.focus-visible) {box-shadow: none;outline: none;}
.button-3:hover {background-color: #ffdc41;color:#000000;}
.button-3:focus {box-shadow: rgba(46, 164, 79, .4) 0 0 0 3px;outline: none;}
.button-3:disabled {background-color: #f9cd0a;border-color: rgba(27, 31, 35, .1);color: rgba(255, 255, 255, .8);cursor: default;}
.button-3:active {background-color: #298e46;box-shadow: rgba(20, 70, 32, .2) 0 1px 0 inset;}


.testimonials{border-radius:7px;padding:7px;text-align: left;overflow: hidden;height: fit-content;margin:0px 10px;background:rgba(255, 209, 25, .8);
font-family: -apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";font-size: 12px;}



.navMobile{position:fixed;top:0;left:0;width:300px;height:100%;margin:0 0 0 -354px;
    -moz-transition:all 200ms ease-in;
    -webkit-transition:all 200ms ease-in;
    -o-transition:all 200ms ease-in;
    transition:all 200ms ease-in;
    z-index:99;
}

.navMobile ul{width:260px;height:100%;padding:0;margin:0;list-style:none;background:#222222;overflow:hidden;}
.navMobile li{margin:0;}
.navMobile ul li ul{width:230px;height:100%;padding:0;margin:0;margin-left:30px;list-style:none;background:#222222;overflow:hidden;}

.navMobile a, .navMobile a:visited {
    color:#ffffff;
    text-decoration:none;
    display:block;
    padding:12px 15px;
    letter-spacing:2px;
    border-bottom:1px solid #333;
}
.navMobile a:hover{ background:#111111;color:#ffd119;}

.burger{overflow:hidden;}
.burger > label{display:block;width:42px;height:42px;line-height:42px;position:fixed;top:1px;left:1px;
    color:#fff;text-align:center;z-index:500;
    -moz-transition:all 200ms ease-in;
    -webkit-transition:all 200ms ease-in;
    -o-transition:all 200ms ease-in;
    transition:all 200ms ease-in;
}
.burger > input[type="checkbox"]{display:none;}
.burger > input[type="checkbox"]:checked ~ .navMobile{margin:0;}
.burger > input[type="checkbox"]:checked ~ label{left:260px;}
.burger > input[type="checkbox"]:checked ~ section{
    -webkit-transform:translate3d(260px, 0, 0);
    -moz-transform:translate3d(260px, 0, 0);
    -o-transform:translate3d(260px, 0, 0);
    transform:translate3d(260px, 0, 0);
}




#slideshow {text-align: center;overflow: hidden;height: 38px;width: 700px;margin: 0 auto;}
.slide-wrapper {width: 3500px;-webkit-animation: slide 41s ease infinite;}
.slide {float: left;height: 38px;width: 700px;}
.slide:nth-child(1) {}
.slide:nth-child(2) {}
.slide:nth-child(3) {}
.slide:nth-child(4) {}
.slide:nth-child(5) {}
.slide-number {color: #7c7c7c;text-align: center;font-size: 10em;}

@-webkit-keyframes slide {
    10% {margin-left: 0px;}
    20% {margin-left: -700px;}
    30% {margin-left: -700px;}
    40% {margin-left: -1400px;}
    50% {margin-left: -1400px;}
    60% {margin-left: -2100px;}
    70% {margin-left: -2100px;}
    80% {margin-left: -2800px;}
    90% {margin-left: -2800px;}
    100% {margin-left: 0px;}
}
#slideshow2 {text-align: left;overflow: hidden;height: 58px;width: 700px;margin: 0 auto;}
.slide-wrapper2 {width: 700px;-webkit-animation: fadein 4s;animation: fadein 4s;transition-delay: 2s;}
.slide2 {width:700px;height:58px;}
.slide2:nth-child(1) {}
.slide2:nth-child(2) {}

@-webkit-keyframes fadein {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fadein {
  0% { opacity: 0; }
  100% { opacity: 1; }
}


@keyframes slide-in {
    0% { opacity: 0; }
  100% { opacity: 1; }
}







  .scrolling-text-container {
    width: 100%;
    height: 30px;
    overflow: hidden;
    position: relative;
  }
  
  .scrolling-text {
    position: absolute;
    top: 0;
    animation: scroll 20s infinite;
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: center;
  }
  
  .scrolling-text span {
    height: 30px;
    line-height: 30px;
    font-size: 14px;
  }
  
  @keyframes scroll {
    0%, 20% { transform: translateY(0); }
    25%, 45% { transform: translateY(-30px); }
    50%, 70% { transform: translateY(-60px); }
    75%, 95% { transform: translateY(-120px); }
    100% { transform: translateY(-180px); }
  }