:root{
    --main-yellow:#F5CE00;
    --main-blue:#113C71;
    --yellow:rgba(245,206,0,0.7);
}:root{
    --main-yellow:#F5CE00;
    --main-blue:#113C71;
    --yellow:rgba(245,206,0,0.7);
}

body{
    box-sizing: border-box;
    margin:0;
    padding:0;
}
body,html,.my-main-wrapper{
    font-size:18px;
    font-family: 'Poppins', sans-serif;
}
.my-main-wrapper h1{
    font-size:2.5rem;
    margin:0;
    padding:0;
}
.my-main-wrapper h2{
    font-size:1.8rem;
    margin:0;
    padding:0;
}
.my-main-wrapper h3{
    font-size:1.5rem;
    margin:0;
    padding:0;
}
.highlight{
    font-weight:700;
    color:var(--main-blue);
}
.maincontent{
    max-width:100%;
    padding:0;
    margin:0;
}
.maincontent_wrapper{
    padding-top:0;
}
.my-main-wrapper img{
    width:100%
}
.mt{
    margin-top:10px;
}
.my-container{
    max-width:90%;
    padding:0 2%;
    margin:0 auto;
}

img{
    width:100%;
}
.main-heading{
    text-transform:uppercase;
}

hr{
  max-width:70%;
  margin:50px auto;
  border: 0; 
  height: 1px; 
  background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); 
}

#product-hero{
    background-image: 
    linear-gradient(rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.4) 100%),
     url('/imageserver/Reusable/duradek23/plazadek-hero.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding:2%;
    min-height:50vh;
    text-align: center;
    color:#fff;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#product-sec1{
    margin:0 auto;
    padding:2%;
    background-image:  
    url('/imageserver/Reusable/duradek23/plazadek-main-min.png');
    background-repeat: no-repeat;
    background-position: 90% 50%;
    background-size:contain;
}
#product-sec1 ul{
    max-width:60%;
}
.section2{
    display:grid;
}
.sec2-text{
    grid-column:2/3;
    grid-row:1/2;
    position: relative;
    background:rgba(255,255,255,0.8);
    padding:4%;
}
.my-floating{
    grid-column:1/3;
    grid-row:1/2;
}
.glass-profiles{
    display:flex;
    flex-direction:row;
    justify-content: space-evenly;
    flex-wrap:wrap;
}
.railing-profiles{
    text-align: center;
}
.profile{
    text-align:center;
}
.profile img{
    max-width:150px;
}

.highlight{
    font-weight:700;
}
.color {
    height:150px;
    width:150px;
    border-radius:50%;
    text-align: center;
    display:grid;
    align-items:center;
    justify-content: center;
}
.color-name{
    font-size:1rem;
    text-transform: uppercase;
}
.colors-group{
    display:flex;
    flex-direction:row;
    justify-content: space-evenly;
    flex-wrap:wrap;
}
.wood-grain{
    text-align: center;
    max-width:70%;
    margin:30px auto 0;
}

.products{
    position: relative;
    margin-top:400px;
}
.product-list{
    margin-top:50px;
    display:flex;
    flex-direction:row;
    justify-content: space-evenly;
    flex-wrap:wrap;
}
.product-card{
    max-width:300px;
    overflow:hidden;
     margin-top:20px;   
}
.product-card-overlay{
    transform:translateX(-100%);
    background-color:rgba(0,0,0,0.6);
    height:100%;
    width:100%;
    opacity:0;
    grid-column:1/2;
    grid-row:1/2;
    display:grid;
    transition:.3s;
}
.product-card-overlay{
    color:var(--main-yellow);
    /* background:var(--main-yellow); */
    padding:12px 15px;
    place-self:center;
    border-radius:5px;
    text-transform: uppercase;
    text-decoration: none;
}
.product-card-overlay a:hover{
    transform:scale(.99);
    box-shadow: 5px 5px 8px 0px rgba(255,255,255,0.2);
}
.product-card-box{
    text-align: center;
    display:grid;
}
.product-image{
    grid-column:1/2;
    grid-row:1/2;
}
.product-name{
    grid-column:1/2;
    grid-row:1/2;
    color:#fff;
    font-weight:700;
    align-self:flex-end;
    z-index:10;
}
.product-card:hover .product-card-overlay{
    transform:translateX(0);
    background-color:rgba(0,0,0,0.6);
    height:100%;
    width:100%;
    opacity:1;
    transition:.3s;
}
.gallery{
    margin-bottom:50px;
}
@media screen and (max-width:1200px) {
    .color-picker{
        display:block;
    }
}
@media screen and (max-width:992px) {
    .my-container{
        text-align: center;
    }
    #product-sec1 ul {
        max-width: 100%;
        list-style-type: none;
    }
    #product-sec1{
        margin:0 auto;
        padding:2%;
        background-image:  
        url('/imageserver/Reusable/duradek23/durarail-main.png');
        background-repeat: no-repeat;
        background-position: 90% 50%;
        background-size:0%;
    }
}

body{
    box-sizing: border-box;
    margin:0;
    padding:0;
}
body,html,.my-main-wrapper{
    font-size:18px;
    font-family: 'Poppins', sans-serif;
}
.my-main-wrapper h1{
    font-size:2.5rem;
    margin:0;
    padding:0;
}
.my-main-wrapper h2{
    font-size:1.8rem;
    margin:0;
    padding:0;
}
.my-main-wrapper h3{
    font-size:1.5rem;
    margin:0;
    padding:0;
}
.highlight{
    font-weight:700;
    color:var(--main-blue);
}
.maincontent{
    max-width:100%;
    padding:0;
    margin:0;
}
.maincontent_wrapper{
    padding-top:0;
}
.my-main-wrapper img{
    width:100%
}
.mt{
    margin-top:10px;
}
.my-container{
    max-width:90%;
    padding:0 2%;
    margin:0 auto;
}

img{
    width:100%;
}
.main-heading{
    text-transform:uppercase;
}

hr{
  max-width:70%;
  margin:50px auto;
  border: 0; 
  height: 1px; 
  background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); 
}

#product-hero{
    background-image: 
    linear-gradient(rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.4) 100%),
     url('/imageserver/Reusable/duradek23/plazadek-hero.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding:2%;
    min-height:50vh;
    text-align: center;
    color:#fff;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#product-sec1{
    margin:0 auto;
    padding:2%;
    background-image:  
    url('/imageserver/Reusable/duradek23/plazadek-main-min.png');
    background-repeat: no-repeat;
    background-position: 90% 50%;
    background-size:contain;
}
#product-sec1 ul{
    max-width:60%;
}
.section2{
    display:grid;
}
.sec2-text{
    grid-column:2/3;
    grid-row:1/2;
    position: relative;
    background:rgba(255,255,255,0.8);
    padding:4%;
}
.floating{
    grid-column:1/3;
    grid-row:1/2;
}
.glass-profiles{
    display:flex;
    flex-direction:row;
    justify-content: space-evenly;
    flex-wrap:wrap;
}
.railing-profiles{
    text-align: center;
}
.profile{
    text-align:center;
}
.profile img{
    max-width:150px;
}

.highlight{
    font-weight:700;
}
.color {
    height:150px;
    width:150px;
    border-radius:50%;
    text-align: center;
    display:grid;
    align-items:center;
    justify-content: center;
}
.color-name{
    font-size:1rem;
    text-transform: uppercase;
}
.colors-group{
    display:flex;
    flex-direction:row;
    justify-content: space-evenly;
    flex-wrap:wrap;
}
.wood-grain{
    text-align: center;
    max-width:70%;
    margin:30px auto 0;
}

.products{
    position: relative;
    margin-top:400px;
}
.product-list{
    margin-top:50px;
    display:flex;
    flex-direction:row;
    justify-content: space-evenly;
}
.product-card{
    max-width:300px;
    overflow:hidden;
}
.product-card-overlay{
    transform:translateX(-100%);
    background-color:rgba(0,0,0,0.6);
    height:100%;
    width:100%;
    opacity:0;
    grid-column:1/2;
    grid-row:1/2;
    display:grid;
    transition:.3s;
}
.product-card-overlay{
    color:var(--main-yellow);
    /* background:var(--main-yellow); */
    padding:12px 15px;
    place-self:center;
    border-radius:5px;
    text-transform: uppercase;
    text-decoration: none;
}
.product-card-overlay a:hover{
    transform:scale(.99);
    box-shadow: 5px 5px 8px 0px rgba(255,255,255,0.2);
}
.product-card-box{
    text-align: center;
    display:grid;
}
.product-image{
    grid-column:1/2;
    grid-row:1/2;
}
.product-name{
    grid-column:1/2;
    grid-row:1/2;
    color:#fff;
    font-weight:700;
    align-self:flex-end;
    z-index:10;
}
.product-card:hover .product-card-overlay{
    transform:translateX(0);
    background-color:rgba(0,0,0,0.6);
    height:100%;
    width:100%;
    opacity:1;
    transition:.3s;
}
.gallery{
    margin-bottom:50px;
}
@media screen and (max-width:1200px) {
    .color-picker{
        display:block;
    }
}
@media screen and (max-width:992px) {
    .my-container{
        text-align: center;
    }
    #product-sec1 ul {
        max-width: 100%;
        list-style-type: none;
    }
    #product-sec1{
        margin:0 auto;
        padding:2%;
        background-image:  
        url('/imageserver/Reusable/duradek23/durarail-main.png');
        background-repeat: no-repeat;
        background-position: 90% 50%;
        background-size:0%;
    }
}