body,
    html {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        font-size:18px;
        font-family: "Poppins", sans-serif;
        color:#5B4E4B;
    }
    .row{
        margin:0;
    }
    .maincontent {
        max-width: 100%;
        padding: 0;
        margin: 0;
    }
    .maincontent {padding:0 !important}
    .maincontent_wrapper {
        padding-top: 0;
    }
    
    #reusable{
        margin-bottom:50px;
        overflow:hidden;
    }
    
    #reusable img{
        width:100%;
    }
    
    #reusable .container{
        max-width:1400px;
        margin:0 auto;
        padding-inline:3%;
        padding-top:100px;
    }
    #reusable h1{
        font-size:clamp(22px, 4vw, 60px);
    }
    #reusable h2{
        font-size:clamp(20px, 3.2vw, 48px);
        font-weight:300;
        font-style: italic;
    }
    #reusable h3{
        font-size:clamp(22px, 2.2vw, 48px);
        font-weight:400;
    }
    .r-header h3{
        position: relative;
        display:inline-block;
    }
    .r-header h3::before{
        position: absolute;
        content:"";
        top:50%;
        left: -85px;
        height: 2px;
        width: 80px;
        background-color:#5B4E4B;
    }
    .r-header h3::after{
        position: absolute;
        content:"";
        top:50%;
        right: -85px;
        height: 2px;
        width: 80px;
        background-color:#5B4E4B;
    }
    .r-header{
        margin:50px auto;
        text-align: center;
        max-width:900px;
        padding-inline:3%;
    }
    .tall-image{
        max-width:500px;
        z-index:5;
        position:relative;
    }
    #reusable #hero{
        position: relative;
    }
    svg{
        position:absolute;
        top:0;
    }
    .r-shadow{
        filter:drop-shadow(3px 3px 3px rgba(0,0,0,0.3));
    }
    #reusable hr{
        max-width:300px;
        border-top:2px solid #5B4E4B;
        margin:20px 0;
     }
     .list-title{
        font-weight:600;
     }
     #hero-bg-wrapper{
        display:grid;
        grid-template-columns: 1/2;
        grid-template-rows: 1/2;
        position: relative;
     }
    .background{
        grid-column:1/2;
        grid-row:1/2;
    }
    .water{
        grid-column:1/2;
        grid-row:1/2;
        filter: url("#turbulence"); 
     }
     #hero_text{
        grid-column:1/2;
        grid-row:1/2;
        color:#fff;
        position: absolute;
        top:10%;
        left:5%;
     }
    
     #hero_text h2{
        font-weight:200;
        font-style: italic;
        padding-left:300px;
     }
     .section1{
        background-image:
        linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,.7) 50%,rgba(255,255,255,1) 100%),
         url(/imageserver/Reusable/decks-general/deck-bg-min.png);
        background-size: cover;
        padding-bottom:50px;
     }
     .sec1-grid{
        display:grid;
        grid-template-columns: 45% 15% 40%;
     }
     .text-content{
        grid-row: 1;
        grid-column:1/-1;
        align-self: center;
        justify-self: flex-end;
        position: relative;
        max-width: 700px;
        z-index: 100;
        background-color: #f5f5f5;
        color:#5B4E4B;
        padding:30px 50px;
     }
     .text-content p{
        line-height:1.8rem;
        font-size:1.1rem;
        font-weight:300;
     }
     .img-wrapper{
        grid-row:1;
        grid-column:1/2;
        position: relative;
        height:100%;
        width:100%;
     }
     .img-wrapper::after{
        position: absolute;
        z-index:2;
        content:"";
        top:-20px;
        left:-20px;
        height:100%;
        width:100%;
        border:2px solid #5B4E4B;
     }
     
     #reusable hr.center-hr{
        margin:0 auto 10px;
        border-top:2px solid #5B4E4B;
     }
     
     .material-image img{
        max-width:300px;
        cursor:pointer;
     }
    .flex-item{
        cursor:pointer;
        position: relative;
        max-width:300px;
        border:1px solid #000;
    }
    .flex-item::after{
        content:"";
        position: absolute;
        top:0;
        left:0;
        height:100%;
        width:0;
        background-color: rgba(255,255,255,0.7);
        transition:.3s;
        cursor:pointer;
    }
    .flex-item::before{
        content:"";
        position: absolute;
        top:0;
        right:0;
        height:100%;
        width:0;
        background-color: rgba(255,255,255,0.7);                                           
        z-index:5;
        transition:.3s;
        cursor:pointer;
    }
    .flex-item:hover.flex-item::after{
        width:50%;
        transition:.3s;
        cursor:pointer;
    }
    .flex-item:hover.flex-item::before{
        width:50%;
        transition:.3s;
        cursor:pointer;
    }
    .overlay{
        position: absolute;
        top:50%;
        left:50%;
        transform:translate(-50%, -50%);
        max-width:300px;
        width:100%;
        padding-block:4%;
        z-index:20;
        opacity:0;
        transition:.3s;
    }
    .overlay h3{
        margin:0;
    }
    .btn-wrapper{
        text-align: center;
    }
    .material-name{
        font-size:clamp(18px, 1.8vw, 36px);
        font-weight:100;
        cursor:pointer;
        text-align: center;
    }
    .flex-item:hover .overlay{
        opacity:1;
        transition:.3s;
    }
    
    .material-image{
        cursor:pointer;
    }
    .flex-group{
        display:flex;
        flex-direction: row;
        justify-content: space-between;
    }
    
    .material-link{
        cursor:pointer;
        text-align: center;
        margin:0 auto;
        color:#5B4E4B;
        transition:.3s;
    }
    .material-link:hover{
        text-decoration: none;
        color:#000;
        transition:.3s;
    }
    .material-link:hover .arrow{
        text-decoration: none;
        color:#000;
        transition:.3s;
        transform:scaleX(1.5) translateX(2px);
        display:inline-block;
    }
    
    .divider{
        position: relative;
    }
    .divider-bg {
        background-image:
        linear-gradient(to bottom, rgba(255,255,255,1 ) 0%, rgba(255,255,255,.5) 50%,rgba(255,255,255,1) 100%),
         url(/imageserver/Reusable/decks-general/deck-wide.jpg);
        background-size: cover;
        background-position: center;
        bottom: 0;
        min-height:50vh;
        width: 100vw;
        z-index: -1;
        padding-block:50px;
    }
    .maintenance-list{
        max-width:1400px;
        margin:0 auto;
        text-align: center;
    }
    .maint-list-item{
        max-width:600px;
        background-color: #fff;
        padding:3%;
        border:1px solid #000;
        border-radius:5px;
        margin:20px auto 0;
    }
    
    @media screen and (max-width:1200px) {
        .sec1-grid{
            display:block;
            text-align: center;
        }
        .sec1-grid .img-wrapper::after{
            display:none;
        }
        .text-content{
            max-width:100%;
            margin-top:20px;
        }
        #reusable hr{
            margin:20px auto;
        }
    }
    
    @media screen and (max-width:992px) {
        .flex-group{
            display:block;
        }
        .flex-item{
            margin:10px auto;
        }
        .img-wrapper{
            text-align: center;
        }
        .img-wrapper::after{
            display:none;
        }
        #reusable p{
            font-size:16px;
        }
        #hero_text{
            position: absolute;
            /* height:100%; */
            width:100%;
            text-align: center;
            top:0;
            left:0;
         }
         #hero_text h2{
            padding-left:0;
         }
         
    }
    
    @media screen and (max-width:600px) {
        .r-header h3::before{
            display: none;
        }
        .r-header h3::after{
            display: none;
        }
        #hero_text h2{
            display:none;
        }
    }
    @media screen and (max-width:500px) {
        #reusable .container{
            padding-top:20px;
        }
    }