body, html {
    margin: 0;
    padding: 0;
}

.maincontent {
    max-width: 100%;
    padding: 0;
    margin: 0;
}

.maincontent_wrapper {
    padding-top: 0;
}
h2{
    font-weight:100;
    padding:0;
    margin-bottom:0;
    margin-top:0;
}
h1,h2,h3,h4,span{
    font-family: 'Poppins', sans-serif;
}

p{
    margin-bottom:0;
}
.thin{
    font-weight:100;
}
.thick{
    font-weight:700;
}
.ital{
    font-style:italic;
}
.title{
    font-weight:500;
}
.highlight{
    font-style:italic;
    font-weight:600;
    color:#79A030;
    text-transform: uppercase;
}
img{
    width:100%;
}

.cta-wrapper{
    display:grid;
    align-items: center;
    max-width:240px;
    text-align:left;
    margin-top:20px;
}
.cta-anim{
    height:40px;
    width:40px;
    background-color:#459CAD;
    grid-column:1/3;
    grid-row:1/2;
    z-index:1;
    -webkit-clip-path: polygon(0 0, 0% 100%, 100% 50%);
    clip-path: polygon(0 0, 0% 100%, 100% 50%);
    transition: all .1s;
}
.cta{
    padding:12px 35px;
    grid-column:1/3;
    grid-row:1/2;
    justify-self:center;
    color:#000;
    font-size:24px;
    z-index:2;
}
.cta-wrapper:hover .cta-anim{
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    width:100%;
    height:100%;
    border-radius:0;
    transition: all .3s;
}
.cta-wrapper:hover .cta{
    text-decoration: none;
    color:#fff;
    justify-self:center;
}

.hero{
    background-image: linear-gradient(to bottom, rgba(255,255,255,.9)70%, rgba(255,255,255,1)100%), url('/imageserver/Reusable/provia-stone21/house-blueprint-min.jpg');
    background-size:cover;
    background-repeat: no-repeat;
    position: relative;
}
#hero-wrapper{
    display:grid;
    grid-template-columns: 1.25fr 1fr;
    padding:2%;
}
#hero-right{
    align-self:center;
    text-align:right;
}
#reflect{
    max-width:500px;
    margin-right:20%;
}
#hero-left{
    align-self:center;
    /* text-align:center; */
}
#logo{
    max-width:300px;
    text-align:left;
}
#hero-left h2{
    font-size:2.5rem;
    margin-left:10%;
    font-weight:100;
    text-align:left;
    text-transform: uppercase;
}
#hero-stone{
    max-width:600px;
    margin-left:15%;
}
#hero-divider{
    text-align:center;
    padding:3.5% 0;
    color:#fafafa;
    font-weight:700;
    background-image: linear-gradient(to top, rgba(0,0,0,.2)0%, rgba(0,0,0,.2)100%), url('/imageserver/Reusable/provia-stone21/fieldstone-pennsylvania-brown-min.jpg');
    background-attachment: fixed;
    background-repeat: repeat-y;
    background-size:cover;
    position: relative;
    margin:25px 0 0;
}
#hero-divider::before{
    content:"";
    position: absolute;
    top:-1px;
    left:0;
    width:100%;
    height:10px;
    background-image:linear-gradient(to top, rgba(121,160,48,1)0%, rgba(255,255,255,0.7)100%);
}
#hero-divider::after{
    content:"";
    position: absolute;
    bottom:-1px;
    left:0;
    width:100%;
    height:10px;
    background-image:linear-gradient(to bottom, rgba(121,160,48,1)0%, rgba(255,255,255,0.7)100%);
}
#hero-divider h2{
    font-weight:700;
}

#header{
    position: absolute;
    bottom:5%;
    left:20%;
    font-style:italic;
    font-weight:700;
}
#section1{
    padding:3%;
    overflow:hidden;
}
#sec1-wrapper{
    display:grid;
    grid-template-columns: 1fr 1fr;
}
#sec1-left{
    text-align:center;
    grid-row:1/3;
}
#main-img{
    max-width:500px;
}
#sec1-right-top{
    grid-column:2/3;
    grid-row:1/2;
    padding:5% 0 0;
}
#sec1-right-btm{
    grid-column:2/3;
    grid-row:2/3;
}
.sec1-list{
    margin:30px 0;
    display: grid;
    grid-template-columns: .20fr .80fr;
    align-items: center;
    transform:translateX(100%);
}
.sec1-list-left img{
    max-width:125px;
}




/* ================== section2 ==================== */

.section2{
    background-image: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0)100%), url('/imageserver/Reusable/provia-stone21/main-bg-min.png');
    background-size:cover;
}
.section2-inner{
    padding:5% 0 15%;
}
.sec2-header{
    max-width:1200px;
    margin:50px auto;
    text-align:center;
}
.sec2-grid{
    display:grid;
    grid-template-columns: 2fr 1fr 3fr;
    gap:25px;
    max-width:1500px;
    padding:80px 4% 0;
    margin:0 auto 0;
}
.sec2-grid-left{
    grid-column: 1/3;
    grid-row:1/3;
    max-height:600px;
    /* overflow:hidden; */
}
.sec2-grid-right-text{
    grid-column: 3/4;
    grid-row:1/2;
    align-self:flex-start;
    justify-self: flex-end;
    max-width:700px;
    margin-top:35px;
    min-height:350px;
}
.sec2-grid-right-icons{
    grid-column: 2/4;
    grid-row:2/3;
    align-self:flex-end;
    justify-self: flex-end;
    background:#fafafa;
    filter:drop-shadow(5px 5px 8px rgba(0,0,0,0.3));
    padding:1%;
    z-index:2;
    margin:0 0 -100px 0;
}
.sec2-grid-right-icons .menu{
    display:flex!important;
    flex-direction:row;
    justify-content: center;
    align-items: center;
    flex-wrap:wrap;
    max-width:1000px;
    min-width:900px;
    z-index:2;
}
.showSingle{
    min-width:150px;
    min-height:150px;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
    text-align:center;
    padding:20px 0;
    cursor:pointer;
    position: relative;
    color:#434E6E;
    z-index:2;
}
.product-image{
    position: relative;
    z-index:2;
}
.product-image::before{
    content:"";
    position: absolute;
    top:-5px;
    left:15px;
    height:90%;
    width:60%;
    /* z-index:1; */
    border:2px solid #83B5D7;
    transform:rotate(-45deg);
}
.product-image::after{
    content:"";
    z-index:-1;
    position: absolute;
    bottom:-5px;
    left:15px;
    height:90%;
    width:60%;
    border:2px solid #79A030;
    transform:rotate(45deg);
}
#myImage{
    max-width:600px;
    filter:drop-shadow(3px 3px 3px rgba(0,0,0,0.5));
}
.showSingle::after{
    content:"";
    position: absolute;
    bottom:0;
    left:0;
    height:1px;
    width:100%;
    background:#83B5D7;
}
.showSingle::before{
    content:"";
    position: absolute;
    bottom:0;
    right:0;
    height:100%;
    width:1px;
    background:#83B5D7;
}
.showSingle img{
    max-width:100px;
}
#section3{
    padding:0 3% 2%;
}
.sec3-header{
    text-align:center;
    max-width:1400px;
    margin:0 auto 50px;
}
.flex-group{
    margin:30px 0;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:space-evenly;
}
.grout-tech{
    display:grid;
    margin:20px 0;
    max-width:400px;
    align-items:center;
    justify-content:center;
    text-align:center;
    overflow:hidden;
    position: relative;
    filter:drop-shadow(3px 3px 3px rgba(0,0,0,0.5));
}

.tech-header{
    grid-column: 1/2;
    grid-row: 1/2;
    align-self:flex-end;
    z-index:2;
    margin-bottom:20px;
    font-weight:900;
    color:#fff;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
}

.grout-tech:hover.grout-tech::after{
    content:"";
    position: absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    transition:.5s;
    background-color:rgba(199,187,169,.7);
}
.grout-tech:hover .grout-overlay{
    opacity:1;
    transform:translateY(0);
    z-index:2;
    transition:.5s;
}
.grout-overlay{
    grid-column: 1/2;
    grid-row: 1/2;
    padding:0 20px;
    transform:translateY(50%) scale(0);
    opacity:0;
    transition:.5s;
    /* color:#6e6e6e; */
}
.tech-img{
    grid-column: 1/2;
    grid-row: 1/2;
    max-width:400px;
}
.colors-text{
    max-width:90%;
    margin:30px auto 0;
}
#sec3-grid{
    display:grid;
    grid-template-columns: 1fr 1.25fr;
    margin-top:100px;
    gap:20px;
}
#grout-colors{
    align-self:center;
    justify-self:center;
    text-align:center;
}
.slide-left{
    transform:translateX(0);
    transition:1s;
}
/* =================== Media Queries ================ */

@media screen and (max-width:1200px) {
   
    #sec1-left{
        order:2;
        grid-row:2/3;
        grid-column:1/-1;
    }
    #sec1-right-top{
        order:1;
        grid-row:1/2;
        grid-column:1/-1;
        text-align:center;
        padding:0 20px;
    }
    #sec1-right-top h2{
        margin:0 auto 20px!important;
    }
    #sec1-right-btm{
        order:3;
        grid-row:3/4;
        grid-column:1/-1;
        padding:0 5%;
        margin:100px auto 0;
    }
    .sec2-grid-right-icons{
        grid-column: 1/4;
        padding:1% 0;
        justify-self: center;
        margin:0 0 -200px 0;
    }
    #section3{
        padding:5% 3% 2%;
    }
    #sec3-grid{
        display:block;
    }
    #grout-colors{
        float:right;
        margin:0 20px;
    }
}

@media screen and (max-width:992px) {
    .section2{
        background-size:0;
    }
    .section2-inner{
        padding:0 0 5%;
    }
    .sec2-grid-left{
        grid-column: 1/-1;
        grid-row:1/2;
        text-align:center;
        opacity:0.2;
    }
    #myImage{
        max-width:500px;
    }
    .product-image::before{
        top:5%;
        left:10%;
    }
    .product-image::after{
        bottom:-5%;
        left:30%;
    }
    .sec2-grid-right-text{
        grid-column: 1/-1;
        grid-row:1/2;
        align-self:center;
        justify-self: center;
        max-width:700px;
        margin-top:35px;
        min-height:200px;
    }
    .sec2-grid-right-icons{
        grid-column: 1/4;
        grid-row:2/3;
        padding:1% 0;
        justify-self: center;
        margin:0;
    }
    .sec2-grid-right-icons .menu{
        min-width:0;
    }
    .showSingle{
        flex-wrap:wrap;
    }
    #section3{
        padding:0 3% 2%;
    }
}
@media screen and (max-width:900px) {
    #sec3-grid{
        text-align:center;
    }
    #grout-colors{
        float:none;
        margin:0;
    }
}
@media screen and (max-width:800px) {
    #hero-right{
        order:1;
        grid-column:1/3;
        grid-row:1/2;
        align-self:center;
        text-align:right;
        opacity:0.2;
    }
    #logo{
        margin-bottom:20px;
    }
    #hero-left{
        order:2;
        grid-column:1/3;
        grid-row:1/2;
        align-self:flex-start;
        text-align:center;
    }
    #hero-left h2{
        margin:0;
        text-align:center!important;
        min-width:200px!important;
    }
    #hero-stone{
        margin-left:0;
    }
    
}
@media screen and (max-width:700px) {
    .sec1-list{
        margin:30px 0 0;
        display: block;
    }
    .sec1-list-left img{
       display:none;
    }
}