/*--------- Index Page ----------*/


/* Index Header */

.index-header {
    background-image: url('../img/index/header.webp');
    background-size:cover;
    margin-top:0rem;
}

@media (min-width: 776px) {.index-header {margin-top:-10rem;}}

    .index-header .textbox {margin-top:13rem;}

        .index-header .textbox h1 {color:var(--white); margin-bottom:.5rem;}

        .index-header .textbox p {width:90%; margin:0 auto 2rem auto; color:var(--white);}
        @media (min-width: 776px) {.index-header .textbox p {width:45%;}}

        .index-header .textbox .linkbox {
            border-top: var(--white) 2px solid;
            border-bottom: var(--white) 2px solid;
            width:90%;
            margin:2.75rem auto 9.5rem auto;
            padding:1.25rem 0;
        }

        @media (min-width: 776px) {.index-header .textbox .linkbox {width:35%; margin:2.75rem auto 13rem auto;}}

            .index-header .textbox .linkbox a {
                text-decoration:none;
                text-transform:uppercase;
                color:var(--white);
                font-size:1.5rem;
                padding:0 .75rem;
            }

            @media (min-width: 776px) {.index-header .textbox .linkbox a {padding:0 1.5rem;}}


/* Explore Products */

.explore-products img {cursor:pointer;}

.explore-products img:hover {
    border-bottom:var(--red) 5px solid;
    transition:.4s;
}

/* Value */

.value {position:relative;}

.value .bkgd-tile-2 {
    position:absolute;
    top:-8rem;
    left:-8rem;
    max-width:90%;
    height:40rem;
}

.value h2 {margin-bottom:5rem;}

.value .thumbnail {margin-bottom:8rem;}
@media (min-width: 776px) {.value .thumbnail {margin-bottom:0;}}


/* Partner */

.partner {margin:10rem auto;}

.partner .textbox {margin-left:0rem;}
@media (min-width: 776px) {.partner .textbox {margin-left:3rem;}}

.partner img {width:100%; height:auto; margin-bottom:3rem;}
@media (min-width: 776px) {.partner img {width:90%; margin-bottom:0;}}

.partner p {width:100%; margin:3rem 0;}
@media (min-width: 776px) {.partner p {width:90%; margin:2rem 0;}}




/*----------------- About Page ------------------*/

#pg--about .content {margin-top:10rem;}
@media (min-width: 776px) {#pg--about .content {margin-top:22rem;}}


/*-- Story --*/

.story {margin-top:3rem;}
@media (min-width: 776px) {.story {margin-top:10rem;}}

    .story p {width:100%; margin:auto; font-size:2rem}
    @media (min-width: 776px) {.story p {width:70%; margin:auto; font-size:2rem}}

/*-- Story --*/


/*-- Mission --*/

.mission {margin:0rem auto 10rem auto;}
@media (min-width: 776px) {.mission {margin:20rem auto 15rem auto;}}

    .mission h5 {color:var(--red); font-weight:700; margin-bottom:2rem; font-size:2rem;}

    .mission p {width:100%; margin:auto; font-size:1.8rem}
    @media (min-width: 776px) {.mission p {width:65%; margin:auto; font-size:2.5rem}}

/*-- Mission --*/


/*--------------- Care & Maintenance ---------------*/


/*-- Body Text --*/

.bt {margin:5rem auto 10rem auto;}
@media (min-width: 776px) {.bt {margin:10rem auto 10rem auto;}}

    .bt h5 {
        color:var(--red);
        font-weight:700;
        font-size:1.8rem;
        width:100%;
        margin:0 auto 2rem auto;
    }

    @media (min-width: 776px) {.bt h5 {width:75%;}}

    .bt p {width:100%; margin:auto; font-size:1.6rem}
    @media (min-width: 776px) {.bt p {width:75%; font-size:1.6rem}}

/*-- Body Text --*/


/*-------------- Request A Quote ------------------*/

.contact {margin:5rem auto 10rem auto;}
@media (min-width: 776px) {.contact {margin:10rem auto;}}

    .contact h3 {margin-bottom:2rem;}

    .contact p {margin-bottom:3rem;}

    .contact h5 {color:var(--red); font-weight:700; margin-bottom:2rem;}

    .contact ul {list-style: none;}
    
        .contact ul li, .contact ul li a {margin-bottom:1rem; font-size:1.9rem; font-weight:300; color:var(--black)}
        @media (min-width: 776px) {.contact ul li, .contact ul li a {font-size:1.5rem;}}

.contact .formbox {padding:0; border-right:var(--lightgold) 1px solid;}
@media (min-width: 776px) {.contact .formbox {padding-right:5rem;border-right:var(--lightgold) 1px solid;}}

.contact .textbox {padding-left:0rem; margin-bottom:5rem;}
@media (min-width: 776px) {.contact .textbox {padding-left:5rem;}}


/*--------------- Trade Partner Program -------------*/


/* Trade Header */

.trade-header {
    background-image: url('../img/partner/header.webp');
    background-size:cover;
    margin:8rem auto 10rem auto;
}

@media (min-width: 776px) {.trade-header {margin:10rem auto 0rem auto;}}

    .trade-header .textbox {margin:10rem auto;}

        .trade-header .textbox h1 {color:var(--white); margin-bottom:.5rem;}

        .trade-header .textbox p {width:90%; margin:0 auto 2rem auto; color:var(--white);}
        @media (min-width: 776px) {.trade-header .textbox p {width:38%;}}


/* Trade Benefits */

.trade-benefits {margin-top:10rem;}

.trade-benefits .thumbnail {padding:3rem;}
@media (min-width: 776px) {.trade-benefits .thumbnail {padding:0 .9rem;}}

    .trade-benefits .thumbnail img {width:20%; height:auto; margin-bottom:1.5rem;}

    .trade-benefits .thumbnail h4 {font-size:3rem; margin-bottom:1.5rem;}
    @media (min-width: 776px) { .trade-benefits .thumbnail h4 {font-size:2rem; margin-bottom:1rem;}}
    
    .trade-benefits .thumbnail p {font-size:1.9rem;}
    @media (min-width: 776px) {.trade-benefits .thumbnail p {font-size:1.5rem;}}


/* Overview */

.trade-overview {position:relative; margin:20rem auto 10rem auto;}
@media (min-width: 776px) {.trade-overview {margin:20rem auto 27rem auto;}}

.trade-overview .bkgd-tile-1 {
    position:absolute;
    top:-10rem;
    left:0;
    max-width:80%;
    height:auto;
}

.trade-overview .textbox h2 {margin-bottom:2rem;}
@media (min-width: 776px) {.trade-overview .textbox h2 {margin-bottom:1.5rem;}}

.trade-overview .textbox h5 {margin-bottom:1.5rem; color:var(--red); font-weight:700;}

.trade-overview img {width:100%; height:auto; margin-bottom:3rem;}
@media (min-width: 776px) {.trade-overview img {width:90%; height:auto; margin-bottom:0rem;}}


/* Committtment */

.committment {background-color:var(--pale); padding:10rem 0;}

    .committment h2 {margin-bottom:2rem;}

    .committment p {width:100%; margin:auto; font-size:1.8rem;}
    @media (min-width: 776px) {.committment p {width:65%;}}


/* Partner Process */

.partner-process {margin:10rem auto 0rem auto;}
@media (min-width: 776px) {.partner-process {margin:10rem auto;}}

    .partner-process .title {margin-bottom:3rem;}

    .partner-process .thumbnail {margin-bottom:7rem;}
    @media (min-width: 776px) {.partner-process .thumbnail {margin-bottom:0;}}

        .partner-process .thumbnail h5 {text-transform:uppercase; color:var(--red);}

        .partner-process .thumbnail img {width:100%; height:auto; margin:1.5rem auto;}

        .partner-process .thumbnail p {margin:1.5rem auto;}


/*------------------ Collections -----------------*/

/*-- Collections Header --*/

.ch {position:relative; margin-top:8rem;}
@media (min-width: 776px) {.ch {position:relative; margin-top:10rem;}}

    .ch .col-md {padding-bottom:5rem;}

    .ch img {position:static; max-width:100vw; height:auto;}
    @media (min-width: 776px) {.ch img {position:absolute; top:0; left:0;}}

    .ch h1 {padding:3rem 0 0 0; color:var(--black); font-family:"Lexend", sans-serif; font-weight:700;}
    @media (min-width: 776px) {.ch h1 {padding:8rem 0 0 0; color:var(--white);}}

    .ch p {color:var(--black); font-weight:300;}
    @media (min-width: 776px) {.ch p {color:var(--white); font-weight:500;}}

/*-- Collections Header --*/


/*-- Collections Descriptions --*/

.cd {position:relative; margin-top:10rem;}
@media (min-width: 776px) {.cd {margin-top:20rem;}}

    .cd .bkgd-tile-1 {
        position:absolute;
        top:-10rem;
        left:0;
        max-width:80%;
        height:auto;
    }

    .cd .title h2 {width:100%; margin-bottom:3rem;}
    @media (min-width: 776px) {.cd .title h2 {width:70%; margin-bottom:3rem;}}

    .cd .imgbox {margin-top:0rem;}
    @media (min-width: 776px) {.cd .imgbox {margin-top:-5rem;}}

        .cd .imgbox img {width:100%; height:auto; margin-bottom:3rem;}
        @media (min-width: 776px) {.cd .imgbox img {margin-bottom:0;}}
    
    .cd .textbox p {padding-right:0; margin-bottom:3rem;}
    @media (min-width: 776px) {.cd .textbox p {padding-right:3rem; margin-bottom:2rem;}}

    .cd .extra-btns {
        text-align:right;
        margin-top:-10rem;
    }
/*-- Collections Descriptions --*/

/*-- Popular Products & Process Sections --*/

.pp {margin:10rem auto; position:relative;}

    .pp .bkgd-tile-2 {
        position:absolute;
        top:-8rem;
        right:-8rem;
        max-width:90%;
        height:auto;
    }

    .pp .title {margin-bottom:5rem;}

    .pp .thumbnail {margin-bottom:8rem;}
    @media (min-width: 776px) {.pp .thumbnail {margin-bottom:0rem;}}

    .pp .thumbnail h5 {color:var(--red); text-transform:uppercase; margin-bottom:1.5rem;}

    .pp .thumbnail img {width:100%; height:auto; margin-bottom:2rem;}

    .pp .thumbnail p {margin:1.5rem auto;}


/*-- Featured Portfolio --*/

.featured-portfolio .title {margin-bottom:5rem;}

.featured-portfolio .fp {margin-bottom:3rem;}

.featured-portfolio .fp:hover, .featured-portfolio .fp:active {opacity:70%; transition:.4s;}

/* Cabinetry Portfolio */

.featured-portfolio .cfp-1 {
    height:40rem;
    background-image: url('../img/portfolio/haven/7.webp');
    background-size:cover;
}

.featured-portfolio .cfp-2 {
    height:30rem;
    background-image: url('../img/portfolio/hudson/3.webp');
    background-size:cover;
}

.featured-portfolio .cfp-3 {
    height:25rem;
    background-image: url('../img/portfolio/madison/8.webp');
    background-size:cover;
}

.featured-portfolio .cfp-4 {
    height:45rem;
    background-image: url('../img/portfolio/crestwood/2.webp');
    background-size:cover;
}


/* Millwork Portfolio */

.featured-portfolio .mfp-1 {
    height:40rem;
    background-image: url('../img/portfolio/st-anne/8.webp');
    background-size:cover;
}

.featured-portfolio .mfp-2 {
    height:30rem;
    background-image: url('../img/portfolio/robbins/2.webp');
    background-size:cover;
}

.featured-portfolio .mfp-3 {
    height:25rem;
    background-image: url('../img/portfolio/hudson/3.webp');
    background-size:cover;
}

.featured-portfolio .mfp-4 {
    height:45rem;
    background-image: url('../img/portfolio/haven/7.webp');
    background-size:cover;
}


/*------------- Product Pages -------------*/

/* Product Header */

.product-header {margin-top:15rem}

    .product-header .imgbox img {width:90%; height:auto; margin-bottom:5rem;}
    @media (min-width: 776px) {.product-header .imgbox img {margin-bottom:0; width:80%;}}

    .product-header .textbox h1 {font-size:5rem; margin-bottom:1rem;}

    .product-header .textbox h3 {font-family:'Lexend', sans-serif; font-size:2.2rem; font-weight:700; margin-bottom:1rem;}

    .product-header .textbox hr {background-color:var(--gold); height:.2rem; margin:3rem 0;}

    .product-header .textbox p {margin-bottom:5rem; width:95%;}
    @media (min-width: 776px) {.product-header .textbox p {margin-bottom:2rem;}}


/* Product Description */

.product-description {margin:10rem auto 15rem auto;}

    .product-description .textbox {border-right:none; margin-bottom:7rem;}
    @media (min-width: 776px) {.product-description .textbox {border-right:var(--gold) 1px solid; margin-bottom:0rem;}}

        .product-description .textbox p {width:100%;}
        @media (min-width: 776px) {.product-description .textbox p {width:92%;}}

    .product-description .tablebox {margin-left:0rem; padding:0 3rem;}
    @media (min-width: 776px) {.product-description .tablebox {margin-left:8rem; padding:0 8rem 0 0;}}

        .product-description .tablebox h5 {margin:0 0 2rem -1.5rem;}

        .product-description .tablebox .table-row {border-bottom:var(--black) 1px solid; padding:1rem 0;}

        .product-description .tablebox .c-1 {padding:0 !important;}

        .product-description .tablebox .c-2 {text-align:right; padding:0 !important;}


/* Product Review */

.product-review {margin-bottom:15rem;}

.product-review p {
    font-family:'Advent Pro', sans-serif;
    width:100%;
    font-size:2.5rem;
    margin:0 auto 2rem auto;
}

@media (min-width: 776px) {.product-review p{ width:72%;}}


/*-------------------- Portfolio Pages ---------------------*/


/*-- Portfolio Menu --*/

.portfolio-menu {padding:10rem 0; position:relative; background-color:var(--pale);}

    .portfolio-menu .thumbnail {margin-bottom:8rem;}
    @media (min-width: 776px) {.pp .thumbnail {margin-bottom:0rem;}}

    .portfolio-menu .thumbnail h5 {color:var(--red); text-transform:uppercase; margin-bottom:1.5rem;}

    .portfolio-menu .thumbnail img {width:100%; height:auto; margin-bottom:2rem;}

    .portfolio-menu .thumbnail p {
        font-size:1.5rem;
        margin:.75rem auto 1.5rem auto;
        font-weight:500;
        color:var(--red);
    }


/* Porfolio Header */

.portfolio-header {background-size:cover;}

    #pg--portfolio-crestwood .portfolio-header {background-image: url('../img/portfolio/madison/header.webp');}
    #pg--portfolio-haven .portfolio-header {background-image: url('../img/portfolio/haven/header.webp');}
    #pg--portfolio-hudson .portfolio-header {background-image: url('../img/portfolio/hudson/header.webp');}
    #pg--portfolio-madison .portfolio-header {background-image: url('../img/portfolio/madison/header.webp');}
    #pg--portfolio-miller-thater .portfolio-header {background-image: url('../img/portfolio/miller-theater/header.webp');}
    #pg--portfolio-oakridge .portfolio-header {background-image: url('../img/portfolio/oakridge/header.webp');}
    #pg--portfolio-robbins .portfolio-header {background-image: url('../img/portfolio/robbins/header.webp');}
    #pg--portfolio-st-anne .portfolio-header {background-image: url('../img/portfolio/st-anne/header.webp');}
    #pg--portfolio-farmhouse .portfolio-header {background-image: url('../img/portfolio/farmhouse/header.webp');}
    #pg--portfolio-pb .portfolio-header {background-image: url('../img/portfolio/palmetto-bluff/header.webp');}

@media (min-width: 776px) {.portfolio-header {margin-top:-10rem;}}

    .portfolio-header .textbox {margin-top:10rem;}

        .portfolio-header .textbox h1 {color:var(--white); margin-top:7rem; margin-bottom:10rem;}
        @media (min-width: 776px) {.portfolio-header .textbox h1 {margin-top:10rem; margin-bottom:25rem;}}

        .portfolio-header .textbox p {width:90%; margin:0 auto 2rem auto; color:var(--white);}
        @media (min-width: 776px) {.index-header .textbox p {width:45%;}}


/*-- Portfolio Images --*/

.portfolio-images {margin:10rem auto 15rem auto; width:90%;}

.portfolio-images img {width:100%; height:auto; margin-bottom:3rem;}