:root{
    --main-color:#C7BEB5;
    --accent-color:#57727A;
    /* rgba(199, 190, 180, 1) */
  }
/* 
font-family: 'Cinzel Decorative', cursive;
font-family: 'Josefin Sans', sans-serif;
*/


body,
html {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-size:18px;
}

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

.maincontent_wrapper {
    padding-top: 0;
}

img {
    width: 100%;
}
hr.my-hr { 
    border: 0; 
    margin:2em auto;
    height: 1px; 
    background-image: -webkit-linear-gradient(left, transparent, #8c8b8b, transparent);

  }
  .modal-body p{
    font-family: 'Josefin Sans', sans-serif;
    margin:0;
    
}
.main-header p{
    font-family: 'Josefin Sans', sans-serif;
    font-weight:300;
    font-size:20px;
  }
  
.grid-image2Path{
    fill:#57727A;
}
#barrel-hero{
    background-image: url('/imageserver/Reusable/ludowici23/barrel-hero.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    min-height:27vw;
    display:flex;
    justify-content: center;
    align-items: center;
}
#slate-hero{
    background-image: url('/imageserver/Reusable/ludowici23/ludoslate-hero.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    min-height:27vw;
    display:flex;
    justify-content: center;
    align-items: center;
}
#interlocking-hero{
    background-image: url('/imageserver/Reusable/ludowici23/interlocking-hero.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    min-height:27vw;
    display:flex;
    justify-content: center;
    align-items: center;
}
.title{
    background-image: linear-gradient(rgba(199, 190, 180, .7) 0%, rgba(199, 190, 180, .7) 100% ), url('/imageserver/Reusable/ludowici23/marble-bg.jpg');
    background-size: cover;
    color:#57727A;
    padding:4% 13%;
    /* width:50%; */
    text-align: center;
    box-shadow: 3px 3px 25px -1px rgba(0,0,0,0.75);
    font-family: 'Josefin Sans', sans-serif;
    position: relative;
}
.title h2{
    font-weight:700;
    font-family: 'Josefin Sans', sans-serif;
    font-size:clamp(24px, 2.4vw, 60px);
}
.grid-image2Path{
    fill:#eff0f0;
    transform:translateY(250px);
    opacity:0;
}
.fancy-title{
    font-family: 'Cinzel Decorative', cursive;
    font-size:clamp(22px,2.5vw,60px);
    display:block;
}
.fancy-subtitle{
    font-family: 'Josefin Sans', sans-serif;
    font-size:clamp(20px,2vw,60px);
}

.my-header{
    text-align: center;
    margin-top: 2em;
}
.my-header img{
    max-width:1000px;
}
.main-header{
    display: block;
    margin:0 auto;
    max-width:1100px;
    font-family: 'Josefin Sans', sans-serif;
    font-size:1.4em;
}

.main-header h2{
    font-family: 'Cinzel Decorative', cursive;
    font-weight:700;
    display:inline-block;
    margin:20px 0 0;
    font-size:1.5rem;
}
.modal-body h2{
    font-weight:500;
}

.divider{
    text-align: center;
    margin-top:-125px;
}
.spanish{
    background-image: linear-gradient(rgba(199, 190, 180, .7) 0%, rgba(199, 190, 180, .7) 100% ), url('/imageserver/Reusable/ludowici23/marble-bg.jpg');
    background-size: cover;
    color:#57727A;
    padding:2% 3%;
    margin-top:2em;
}
#lud-spears{
    max-width: 500px;;
}
.product-group{
    display:flex;
    flex-direction: row;
    justify-content: space-evenly;
    flex-wrap:wrap;
}
.product-item{
    text-align: center;
    margin:.5%;
    width:250px;
    border:1px solid #000;
    position: relative;
    transition:.3s;
}
.product-item img{
    max-width:250px;
    padding:2%;
    display: block;
}
.product-item .modal-box{
    background-color:#fff;
    width:100%;
    height:100%;
    display:block;
    color: #57727A;
    font-size:clamp(16px, 1.5vw, 38px);
    font-family: 'Cinzel Decorative', cursive;
}
.product-item:hover{
    box-shadow: 3px 3px 5px -1px rgba(0,0,0,0.75);
    transform:scale(.99);
    transition:.3s;
}


.product-item:hover .overlay{
    opacity:1;
    transition:.3s;
}
.textures-group{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content: space-evenly;
}
.texture-item{
    text-align: center;
}
.texture-item img{
    max-width:230px;
}
.modal-dialog{
    max-width:50%;
    width:50%;
}

@media screen and (max-width:768px) {
    body, html{
        font-size:14px;
        text-align: center;
    }
    .modal-dialog {
        width: 600px;
         max-width:100%;
        /* text-align: center; */
        margin: 30px auto;
}
}