/* -- General -- */

:root {
    --r_light-green: #00CC88;
    --r_green: #00734C;
    --r_dark-green: #003322;
}

html,
body {
    font-size: 16px;
}
.maincontent {
    display: block !important;
    font-family: 'Montserrat', 'Poppins', sans-serif;
    letter-spacing: .025rem;
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
    background-color: #fff;
}
.maincontent main {
    background-color: #fff;
    margin: 0;
    padding: 0;
}

.r_content-wrapper,
.r_content-wrapper-md,
.r_content-wrapper-sm,
.r_content-wrapper-x-sm {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.r_content-wrapper {
    max-width: 1700px;
}
.r_content-wrapper-md {
    max-width: 1550px;
}
.r_content-wrapper-sm {
    max-width: 1400px;
}
.r_content-wrapper-x-sm {
    max-width: 1250px;
}

.r_h1-heading,
.r_h2-heading,
.r_h3-heading,
.r_h4-heading {
    font-family: 'Josefin Sans', 'Montserrat', 'Poppins', sans-serif;
    margin: 20px 0 10px;
    line-height: 1em;
    color: #111;
    font-weight: 700;
}
.r_h2-heading {
    font-size: 2.65rem;
}
.r_h3-heading {
    font-size: 2.65rem;
    color: var(--r_green);
}
.r_h4-heading {
    display: inline-block;
    font-size: 1.65rem;
    color: var(--r_dark-green);
    margin: 0 0 20px;
    border-bottom: 4px solid var(--r_green);
}
.r_h-sub {
    font-style: italic;
    max-width: 700px;
    width: 100%;
}
.maincontent p {
    font-size: 1.05rem;
    line-height: 1.4em;
    font-weight: 500;
}

.r_underline {
    width: 150px;
    height: 8px;
    margin: 25px auto;
    border-top: none;
    background-color: var(--r_green);
    -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}



/* -- Main -- */

.r_main-global {
    position: relative;
    padding: 120px 5%;
    z-index: 0;
}
.r_main-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.r_main-left {
    width: 45%;
    padding: 20px 30px;
}
.r_main-right {
    width: 55%;
    padding: 20px 30px;
}
.r_main-img {
    position: relative;
    max-width: 550px;
    width: 100%;
    margin: 20px auto;
}
.r_main-img::after {
    content: "";
    position: absolute;
    top: -15px;
    left: -15px;
    width: 100%;
    height: 100%;
    border: 3px solid var(--r_green);
}
.r_main-img img {
    width: 100%;
    height: auto;
}
.r_main-text-center {
    text-align: center;
}

.r_logo {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 175px;
    width: 100%;
    height: auto;
    background-color: #fff;
    border-radius: 0 0 20px 0;
    padding: 10px;
}



/* -- Senox - Hero -- */

#r_hero_global {
    position: relative;
    padding: 200px 10%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(/imageserver/Reusable/senox_gutter_guards/hero_bg.webp);
    background-size: cover;
    background-position: 25% center;
    background-blend-mode: overlay;
    background-color: #454545;
    text-align: center;
    z-index: 1;
}
#r_hero_global::after {
    content: "";
    position: absolute;
    height: 30px;
    width: 100%;
    left: 0;
    bottom: -15px;
    background: linear-gradient(180deg, var(--r_light-green), var(--r_green));
    -webkit-clip-path: polygon(0 0, 25% 0, 30% 80%, 70% 80%, 75% 0, 100% 0, 100% 20%, 75% 20%, 70% 100%, 30% 100%, 25% 20%, 0 20%);
    clip-path: polygon(0 0, 25% 0, 30% 80%, 70% 80%, 75% 0, 100% 0, 100% 20%, 75% 20%, 70% 100%, 30% 100%, 25% 20%, 0 20%);
}
.r_h1-heading {
    font-size: 3.65rem;
    color: #fff;
    text-transform: uppercase;
}
.r_h1-highlight {
    color: var(--r_light-green);
}
p.r_h1-sub {
    font-size: 1.4rem;
    letter-spacing: .35em;
    color: #fff;
    line-height: 1.2em;
}



/* -- Senox - About -- */

#r_about_global {
    background: linear-gradient(135deg, #f2f2f2 25%, transparent 25%, transparent 90%, #f2f2f2 90%);
}



/* -- Senox - Intro -- */

.r_intro-global {
    background-image: url(/imageserver/Reusable/senox_gutter_guards/green_abstract_bg.webp);
    background-size: cover;
    background-position: center;
    background-blend-mode: overlay;
    background-color: #656565;
    text-align: center;
    z-index: 1;
}
.r_intro-global::before,
.r_intro-global::after {
    content: "";
    position: absolute;
    height: 30px;
    width: 100%;
    left: 0;
    background: linear-gradient(180deg, var(--r_light-green), var(--r_green));
    -webkit-clip-path: polygon(0 0, 25% 0, 30% 80%, 70% 80%, 75% 0, 100% 0, 100% 20%, 75% 20%, 70% 100%, 30% 100%, 25% 20%, 0 20%);
    clip-path: polygon(0 0, 25% 0, 30% 80%, 70% 80%, 75% 0, 100% 0, 100% 20%, 75% 20%, 70% 100%, 30% 100%, 25% 20%, 0 20%);
}
.r_intro-global::before {
    top: -15px;
    transform: rotateZ(180deg);
}
.r_intro-global::after {
    bottom: -15px;
}
.r_intro-global h2 {
    color: #fff;
}
.r_intro-global .r_h2-sub {
    display: block;
    line-height: 1em;
    font-size: .75em;
    margin-top: 10px;
    font-weight: 400;
}



/* -- Senox - Colors -- */

.r_color-global::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 500px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 100%), url(/imageserver/Reusable/senox_gutter_guards/product_bg.webp);
    background-size: auto 150%;
    background-position: center top;
    z-index: -1;
}
.r_color-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 50px auto 0;
    padding: 0;
    list-style: none;
}
.r_color-item {
    width: 19%;
    margin: 10px .5%;
    text-align: center;
}
.r_color-preview {
    display: block;
    width: 100%;
    height: 125px;
    margin-bottom: 10px;
}
.r_color-item h4 {
    font-size: 1.2rem;
    border-bottom: none;
    margin: 0;
}

.r_color-white { background-color: #e9ebe8; }
.r_color-royal-brown { background-color: #523a35; }
.r_color-antique-ivory { background-color: #d9c5a7; }
.r_color-black { background-color: #121617; }
.r_color-raffia-beige { background-color: #d9ccb2; }
.r_color-beaver-brown { background-color: #5e4a3b; }
.r_color-classic-cream { background-color: #e6d4b6; }
.r_color-clay { background-color: #aca697; }
.r_color-colonial-blue { background-color: #647e8e; }
.r_color-sherwood-green { background-color: #3e6558; }
.r_color-musket-brown { background-color: #3f332b; }
.r_color-wicker { background-color: #d5c3a7; }
.r_color-dove-gray { background-color: #888c8e; }
.r_color-almond { background-color: #dfd8c9; }
.r_color-linen { background-color: #eeecda; }
.r_color-light-bronze { background-color: #7a6e68; }
.r_color-tuxedo-gray { background-color: #55544e; }
.r_color-heritage-cream { background-color: #f5e6c5; }
.r_color-colonial-gray { background-color: #bebcbe; }
.r_color-buckskin-brown { background-color: #947545; }
.r_color-80-white { background-color: #edeee7; }
.r_color-colonial-red { background-color: #793b33; }
.r_color-dark-bronze { background-color: #444543; }
.r_color-herringbone { background-color: #dcd4c7; }
.r_color-copper-metallic { background-color: #ca782f; }
.r_color-paint-grip-metallic { background-color: #7c7d7f; }

.r_color-satin-white { background-color: #eaeaea; }
.r_color-wood-beige { background-color: #958573; }
.r_color-cameo { background-color: #f0eadb; }

.r_color-rustic-copper { background-image: url(/imageserver/Reusable/senox_gutter_guards/rustic_copper_preview.webp); }

.r_color-solid-copper { background: linear-gradient(90deg, #f4ae7d, #c27237); }
.r_color-galvalume-plus-steel { background-image: url(/imageserver/Reusable/senox_gutter_guards/galvalume_plus_steel_preview.webp); }

.r_degree::after {
    content: "°";
}



/* -- Senox - Products -- */

.r_products-global {
    background: linear-gradient(0deg, var(--r_dark-green) 250px, transparent 250px);
}
.r_products-global::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 500px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 100%), url(/imageserver/Reusable/senox_gutter_guards/product_bg.webp);
    background-size: auto 150%;
    background-position: center top;
    z-index: -1;
}
.r_product-overview-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 50px auto 20px;
    padding: 0;
}
.r_product-overview-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    text-align: left;
    width: 49%;
    margin: 15px .5%;
    box-shadow: 0 4px 6px rgba(5, 5, 5, .25);
    background-color: #f2f2f2;
    overflow: hidden;
}
.r_product-overview-item-long {
    width: 99%;
}
.r_product-img {
    width: 45%;
    padding: 60px 10px;
    background-color: #fff;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0 0 60px 0;
}
.r_product-img img {
    display: block;
    margin: 20px auto;
    max-width: 400px;
    width: 100%;
    height: auto;
}
.r_product-info {
    width: 55%;
    padding: 60px 40px;
}
.r_product-info-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.r_product-info-item {
    margin-bottom: 10px;
}
.r_product-info-item p {
    position: relative;
    margin: 0;
    padding-left: 15px;
    font-weight: 600;
}
.r_product-info-item p::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 0;
    width: 6px;
    height: 6px;
    background-color: var(--r_green);
}

.r_avail-colors-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
}
.r_avail-colors {
    padding: 10px;
    width: 50%;
    text-align: center;
}
.r_avail-colors-light {
    color: #fff;
}
.r_avail-colors-long {
    width: 100%;
    font-style: italic;
}
.r_avail-colors p {
    margin: 0;
    padding: 0;
    font-size: .95rem;
}
.r_avail-colors p::before {
    display: none;
}



/* -- Senox - Back To Top -- */

.r_back-to-top {
    position: fixed;
    bottom: -100px;
    right: 20px;
    width: 55px;
    height: 55px;
    background-color: var(--r_green);
    z-index: 999;
    border-radius: 50%;
    border: 3px solid var(--r_light-green);
    transition: bottom .4s;
}
.r_back-to-top::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    border-top: 5px solid #fff;
    border-left: 5px solid #fff;
    width: 18px;
    height: 18px;
    margin-top: 3px;
}
.r_visible {
    bottom: 20px;
}



/* -- Responsiveness -- */

@media (max-width: 1400px) {
    .r_product-overview-item,
    .r_product-overview-item-long {
        max-width: 1000px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 1250px) {
    .r_color-item {
        width: 24%;
    }
}

@media (max-width: 1200px) {
    .r_main-wrapper {
        max-width: 900px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    .r_main-left,
    .r_main-right {
        width: 100%;
        padding: 0;
    }
    .r_main-img {
        margin: 40px auto;
    }
}

@media (max-width: 1000px) {
    .r_color-item {
        width: 32.3333333333%;
    }
}

@media (max-width: 900px) {
    .r_product-overview-item,
    .r_product-overview-item-long {
        max-width: 600px;
    }
    .r_product-img,
    .r_product-info {
        width: 100%;
        height: auto;
    }
}

@media (max-width: 750px) {
    .r_h1-heading {
        font-size: 3.25rem;
    }
    .r_h2-heading {
        font-size: 2.45rem;
    }
    .r_h3-heading {
        font-size: 2.45rem;
    }

    .r_main-global {
        padding: 100px 20px;
    }

    #r_hero_global {
        padding: 150px 20px;
    }

    .r_color-item {
        width: 49%;
    }
}

@media (max-width: 550px) {
    .r_h1-heading {
        font-size: 2.85rem;
    }
    .r_h2-heading {
        font-size: 2.25rem;
    }
    .r_h3-heading {
        font-size: 2.25rem;
    }

    .r_main-text-center {
        text-align: left;
    }
    .r_main-text-center .r_underline {
        margin-left: 0;
        -webkit-clip-path: polygon(0 0, 100% 0, 0 100%);
        clip-path: polygon(0 0, 100% 0, 0 100%);
    }

    #r_hero_global {
        padding: 100px 20px;
    }
}

@media (max-width: 450px) {
    .r_color-item {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .r_product-info {
        padding-left: 25px;
        padding-right: 25px;
    }
    .r_avail-colors {
        width: 100%;
    }
}