body,
html {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-size:18px;
    font-family: "Poppins", sans-serif;
}

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

.maincontent_wrapper {
    padding-top: 0;
}

img {
    width: 100%;
}

svg {
    overflow: visible;
}


.title {
    color: #434E6E;
}

.subtitle {
    font-weight: 200;
    color: #E3CCA1;
}

.text-highlight {
    color: #E3CCA1;
}

.thin {
    font-weight: 200;
    font-style: italic;
}

.thick {
    font-weight: 700;
}

img {
    width: 100%;
}

.cta {
    color: #fff;
    display: inline-block;
    border: 1px solid #fff;
    text-decoration: none;
    background-color: #024F9F;
    padding: 15px 36px;
}

.product-link {
    color: #000;
    display: inline-block;
    border: 1px solid #000;
    background-color:#fff;
    text-decoration: none;
    padding: 15px 36px;
}

.divider {
    height: 1px;
    background: #000;
    margin: 50px auto;
    position: relative;
    max-width: 50%;
    background: -webkit-linear-gradient(left, rgb(255, 255, 255) 0%, rgb(50, 50, 50) 50%, rgb(255, 255, 255) 100%);
}

.divider2 {
    height: 1px;
    background: #000;
    margin: 50px auto 75px;
    position: relative;
    max-width: 50%;
    background: -webkit-linear-gradient(left, rgb(255, 255, 255) 0%, rgb(50, 50, 50) 50%, rgb(255, 255, 255) 100%);
}

.divider.light:before {
    position: absolute;
    background: linear-gradient(to right, rgba(100, 100, 100, 0), rgba(100, 100, 100, 1) 50%);
    margin-top: 2px;
    left: 25%;
    width: 25%;
    height: .5px;
    content: "";
}

.divider.light:after {
    position: absolute;
    top: 0;
    right: 25%;
    background: linear-gradient(to left, rgba(100, 100, 100, 0), rgba(100, 100, 100, 1) 50%);
    margin-top: 2px;
    width: 25%;
    height: .5px;
    content: "";
}

.mydivider {
    overflow: visible;
    text-align: center;
    position: relative;
    text-transform: uppercase;
}

.mydivider h1 {
    color: #808080;
    letter-spacing: .1em;
}

.mydivider h2 {
    color: #808080;
    letter-spacing: .1em;
    font-size: 2.5rem;
}

.mydivider h3 {
    color: #E3CCA1;
    font-weight: 100;
    margin-top: 1.5%;
    font-size: 1.9rem;
}
.highlight{
    font-weight:700;
}

.hero-img .cta {
    z-index: 5;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 700;
}

.hero {
    /* padding: 0 3%; */
}

.hero-grid {
    display: grid;
    grid-template-columns: repeat(5, 20%);
    grid-template-rows: .25fr .35fr .25fr .35fr .30fr;
    /* max-width: 1800px; */
    /* margin: 3% auto 0; */
    /* min-height:100vh; */
}

.hero-img {
    grid-column: 1/-1;
    grid-row: 1/4;
    align-self: flex-start;
    position: relative;
}

.hero-img img {
    z-index: 3;
    position: relative;
}

.logo {
    grid-column: 1/-1;
    grid-row: 1/4;
    width: clamp(125px, 31vw, 600px);
    justify-self: center;
    align-self: center;
    z-index: 5;
}

.hero-text-box-container {
    grid-column: 1/3;
    grid-row: 2/5;
    width: clamp(300px, 30vw, 450px);
    /* height: clamp(200px, 30vw, 500px); */
    background: linear-gradient(rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.5) 100%), url('/imageserver/Reusable/drexel-metals/arch-drawing.png'), #fff;
    background-repeat: no-repeat;
    background-size: cover;
    filter: drop-shadow(-3px 3px 3px rgba(0, 0, 0, 0.4));
    justify-self: flex-start;
    align-self: center;
    text-align: center;
    /* display: flex; */
    flex-direction: column;
    align-items: center;
    padding: 5% 5% 50px;
    z-index: 4;
    position: relative;
    margin-bottom: -50px;
    margin-left:5%;
    color: #808080;
    /* padding-inline: 2%; */
}
#arch-drawing{
    margin-top:50px;
}

.hero-text-box {
    position: relative;
    height: 100%;
    width: 100%;
    z-index: -1;
    display: inline-block;
}
.house-bg{
    grid-row:4/6;
    grid-column:1/4;
    background-image:linear-gradient(rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.5) 100%), url('/imageserver/Reusable/drexel-metals/slate-gray-feathered.png');
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 80%;
    /* justify-self: center; */
    /* align-self:flex-end; */
    /* background-size: 100%; */

}


.hero-text-box h3 {
    color: #E3CCA1;
    margin-top: 5%;
    font-weight: 200;
    font-size: 1.7rem;
}

.hero-text-p {
    grid-column: 3/-1;
    grid-row: 4/6;
    align-self: flex-end;
    justify-self:center;
    max-width:800px;
    z-index: 5;
    color: #808080;
    padding:2%;
}

.product-group{
    margin:50px 0;
    padding-inline:3%;
}
.product-flex{
    display:flex;
    flex-direction: row;
    justify-content: space-evenly;
    text-align: center;
    flex-wrap:wrap;
}
.flex-item{
    margin-block:20px;
}
.flex-item p{
    font-size:1.3rem;
    margin-left:20px;
    color:#000;
    position: relative;
}
.product-img{
    max-width:300px;
    margin-top:-30px;
    margin-bottom:-40px
}
.product-group h2{
    text-align: center;
    margin-bottom:20px;
    font-weight:200;
}

.closing{
    padding-inline:3%;
    color:#808080
}
.my-header{
    text-align: center;
    margin-block:2%;
}
.color_chart{
    max-width:600px;
    margin:2% auto;
}
.color_chart_vert{
    display:none;
    max-width:300px;
    text-align: center;
    margin:0 auto;
}
.thumb{
    max-width:400px;
    margin:.5%;
}
.my-gallery{
    margin-top:2%;
    display:flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap:wrap;
}
.video-section {
    margin-top: 2%;
    position: relative;
}
.video-section a{
    color:#595959;
}
.video-bg-wrapper {
    position: absolute;
    /* width: 100vw; */
    /* height: 90vw; */
}

.video-bg-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(255, 255, 255, 1)0%, rgba(255, 255, 255, .7)50%, rgba(255, 255, 255, 1)100%);
}

.video-bg {
    width:100vw;
}

.video-section-wrapper {
    position: relative;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 5;
    padding: 0 5%;
    text-align: center;
}

.video-section-wrapper h2 {
    color: #808080;
}


/* ================= Media Queries ================ */

@media screen and (max-width:1300px) {
    .divider-p {
        padding: 2% 5%;
    }
    .house-bg{
        display:none;
    }
    .color_chart{
        display:none;
    }
    .color_chart_vert{
        display:block;
    }
}


@media screen and (max-width:1100px) {
    .hero-grid{
        grid-template-rows: auto;
    }
    .divider-p {
        padding: 2% 5%;
    }
    #arch-drawing{
        display:none;
    }
    .divider {
        height: 1px;
        background: #000;
        /* margin: 150px auto 100px; */
        position: relative;
        max-width: 50%;
        background: -webkit-linear-gradient(left, rgb(255, 255, 255) 0%, rgb(50, 50, 50) 50%, rgb(255, 255, 255) 100%);
    }
    .hero-img {
        grid-column: 1/-1;
    }
    .logo{
        max-width:400px;
    }
    
    .hero-text-box-container {
        width: 100%;
        height: auto;
        padding: 3%;
    }
    .hero-text-p {
        grid-column: 1/-1;
        /* grid-row: 5/6; */
        text-align: center;
        justify-self: center;
        max-width: 80%;
        margin:20px auto 0;  
        position: relative;
        margin-top:80px;                               
    }
}

@media screen and (max-width:992px) {
    .hero-text-box-container {
        display: none;
    }
    .hero-text-p {
        margin-top:0;                               
    }
    .closing{
        text-align: center;
    }
    .color_chart{
        display:block;
    }
    .color_chart_vert{
        display:none;
    }
}

@media screen and (max-width:768px) {
    .divider-p {
        padding: 2% 1%;
    }
    body, html {
        font-size: 16px;
    }
    h1 {
        font-size: 42px;
    }
}
@media screen and (max-width:700px) {
    .hero-grid{
        grid-template-columns: 100%;
        grid-template-rows: auto;
    }
    .hero-img{
        grid-row:1/2;
    }
    .hero-text-p{
        grid-row:2/3;
        margin-top:0;
    }
    .logo{
        grid-row:1/2;
    }
}


@media screen and (max-width:650px) {
    .divider-p {
        padding: 2% 1%;
    }
    .hero-text-p {
        grid-column: 1/-1;
        /* grid-row: 5/8; */
        text-align: center;
        align-self: center;
        justify-self: center;
        max-width: 80%;
    }
    .slider .slider__nav {
        width: 75%;
        height:0;
        bottom:0;
    }
}

@media screen and (max-width:500px) {
    .slider-tab-group {
        display: none;
    }
    .slider .slider__nav {
        width: 75%;
        height:1%;
        bottom:-25%;
    }
    .slider .slider__nav .slider__nav-prev {
        bottom:100px;
    }
    
    .slider .slider__nav .slider__nav-next {
        bottom: 100px;
    }
}