.bodyKrm * {
    --responsive: calc((var(--min-font) * 1px) + (var(--max-font) - var(--min-font)) * ((100vw - var(--min-width) * 1px) / (var(--max-width) - var(--min-width)))); /* Ranges from var(--min-width) to var(--max-width)px */
}
.text-dark {
    color: #263377 !important
}
.tigla_metalica {
    padding-top: 30px;
    padding-bottom: 50px;
    width: 100%;
    min-width: 320px;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 10px;
    box-sizing: border-box;
    height: auto;
}
.imagine_fundal{width:100%;height:200px}
.tigla_metalica h1 {
    margin-bottom: 25px;
    --max-width: 768;
    --max-font: 34;
    --min-font: 30;
    font-size: clamp(30px,var(--responsive),34px)!important;
    font-weight: 400;
    text-align: center;
    color: #263377;
    padding: 30px 10px 0px 10px;
    font-weight: bold;
}
.tigla_metalica_img_contenth2{
    padding-top:20px
}
.tigla_metalica_image img {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    overflow: hidden;
    height: 300px
}
.li__tigla_metalica_img img {
    height: 340px;
    width: 100%;
    max-width: 370px;
    margin: 0 auto;
    overflow: hidden;

}
.li__tigla_metalica_img2 img {
    height: 400px;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    overflow: hidden;
    height: 276px;
}
.li__tigla_metalica_img3 img {
    height: 400px;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    overflow: hidden;
    height: 276px;
}
.div_compozitie_material {
    max-width: 1286px;
    text-align: center;
    margin: 20px auto;
    padding: 32px 0;
}
.div_compozitie_material img {
        height: 405px;
        width: 100%;
        max-width: 326px;
        margin: 0 auto;
        overflow: hidden;
    }
.tigla_metalica_img_content h3 {
    padding: 7px 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    --max-width: 768;
    --max-font: 12;
    --min-font: 11;
    font-size: clamp(11px,var(--responsive),12px);
    text-align: center;
    color: #263377;
}

.li_tigla_metalica {
    padding: 20px 0
}
ul__caracteristici_tigla li{
    list-style:disc;
}
#img_1, #img_2 {
    text-align: center
}
.ul__caracteristici_tigla{padding-top:10px}
.ul__caracteristici_tigla li {
    padding: 10px 0;
}

.finisaj_lucios {
    padding: 0 5px;margin:0 auto
}
.gamaCulori {
    text-align: justify;
    font-weight: 700;
    color: #263377
}
.dropbtn1, .dropbtn2, .dropbtn3, .dropbtn4, .dropbtn5, .dropbtn6, .dropbtn7, .dropbtn8, .dropbtn9, .dropbtn10, .dropbtn11, .dropbtn12, .dropbtn13, .dropbtn14, .dropbtn15 {
    color: black;
    padding: 16px;
    border: none;font-size:12px;font-weight:700
}
.dropdown1, .dropdown2, .dropdown3, .dropdown4, .dropdown5, .dropdown6, .dropdown7, .dropdown8, .dropdown9, .dropdown10, .dropdown11, .dropdown12, .dropdown13, .dropdown14, .dropdown15 {
    position: relative;
    text-align: center;
    padding: 10px;
    margin: 0 10px;
    max-width: 65px;
}
.dropbtn1 img, .dropbtn2 img, .dropbtn3 img, .dropbtn4 img, .dropbtn5 img, .dropbtn6 img, .dropbtn7 img, .dropbtn8 img, .dropbtn9 img, .dropbtn10 img, .dropbtn11 img, .dropbtn12 img, .dropbtn13 img, .dropbtn14 img, .dropbtn15 img {
    width: 65px;
}
.dropdown-content1 div img, .dropdown-content2 div img, .dropdown-content3 div img, .dropdown-content4 div img, .dropdown-content5 div img, .dropdown-content6 div img, .dropdown-content7 div img, .dropdown-content8 div img, .dropdown-content9 div img, .dropdown-content10 div img, .dropdown-content11 div img, .dropdown-content12 div img, .dropdown-content13 div img, .dropdown-content14 div img,.dropdown-content15 div img {
    height: 100px;
    width: 100%;
    max-width: 100px;
    margin: 0 auto;
    overflow: hidden;display:none
}
.dropdown-content1 p, .dropdown-content2 p, .dropdown-content3 p, .dropdown-content4 p, .dropdown-content5 p, .dropdown-content6 p, .dropdown-content7 p, .dropdown-content8 p, .dropdown-content9 p, .dropdown-content10 p, .dropdown-content11 p, .dropdown-content12 p, .dropdown-content13 p, .dropdown-content14 p, .dropdown-content15 p {
    display: none
}
.house_image{padding-bottom:40px}
.house_image_divImg img {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    overflow: hidden;
}
.house_image a{text-decoration-line:none}
.house_image a h4 {
    margin-bottom: 25px;
    --max-width: 768;
    --max-font: 34;
    --min-font: 30;
    font-size: clamp(30px,var(--responsive),34px);
    font-weight: 400;
    text-align: center;
    color: #263377;
    padding: 30px 10px 0px 10px;
    font-weight: bold;
}
.tigla_metalica_image_prezentare a img {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    width: 100%;
    max-width: 250px;
    margin: 0 auto;
    overflow: hidden;
    height: 250px;
}
.tigla_metalica_image_prezentare a{text-decoration-line:none}
h5 {
    color: #263377;
    text-decoration: none;
    padding-top: 10px;
}
.t10_img {
    display: none
}
.caracteristi_img {
    width: 100%;
    margin: 0 auto;
    margin-right: auto;
    margin-left: auto;
    max-width: 1200px;
    text-align: center;
}
.tigla_metalica_image_2 {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    overflow: hidden;
    height: 700px;
}
.style__description{
    text-align: justify;
    color: #263377;
    padding: 0 5px;
}
.style_h2{
    text-align: center;
    color: #263377;
    padding: 30px 10px 0px 10px;
}
.style__ul {
    padding: 0 5px;
    margin: 0 auto;
    max-width: 1200px;
    text-align: left;
    color: #263377;
}
.unicode {
    color: #FBA919;
    width: 8px;
    height: 8px;
    padding-right: 10px;
    bottom: 2px;
    position: relative;
}
@media screen and (max-width: 769px) {
    #img_3 img {
        max-width: 100%;
        display: none
    }
}
@media screen and (min-width: 769px) {
        .tigla_metalica {
            padding: 0 30px
        }
  
    #img_3 img {
        max-width: 100%;
    }

        .tigla_metalica h1 {
            margin-bottom: 33px;
            --min-width: 768;
            --max-width: 1110;
            --max-font: 38;
            --min-font: 36;
            font-size: clamp(36px,var(--responsive),38px);
        }

        .tigla_metalica_image img {
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            width: 100%;
            max-width: 500px;
            margin: 0 auto;
            overflow: hidden;
            height: 500px
        }

        .li_tigla_metalica {
            padding: 40px 0
        }

        .tigla_metalica_img_content h3 {
            padding: 40px 5px;
            --min-width: 768;
            --max-width: 1110;
            --max-font: 28;
            --min-font: 20;
            font-size: clamp(20px,var(--responsive),28px);
        }

        .li__tigla_metalica_img img {
            width: 100%;
            max-width: 630px;
            margin: 0 auto;
            overflow: hidden;
            height: 460px
        }

        .li__tigla_metalica_img2 img {
            width: 100%;
            max-width: 630px;
            margin: 0 auto;
            overflow: hidden;
            height: 530px
        }

        .li__tigla_metalica_img3 img {
            width: 100%;
            max-width: 630px;
            margin: 0 auto;
            overflow: hidden;
            height: 400px;
            padding: 20px
        }

        .ul__caracteristici_tigla {
            width: 94%;
            padding-top: 30px
        }

        #img_1 {
            text-align: right
        }

        #img_2 {
            text-align: left
        }

        .ul__caracteristici_tigla li {
            padding: 20px 0;
        }

        .finisaj_lucios {
            padding: 0 130px;
        }

        h3 {
            text-align: justify;
            font-weight: 700;
            padding: 0 40px;
        }

        .div_compozitie_material img {
            height: 460px;
            width: 100%;
            max-width: 1280px;
            margin: 0 auto;
            overflow: hidden;
            padding: 20px 0px;
        }

        .sistem_pluvial_elemente {
            width: 80%
        }

        .dropdown1, .dropdown2, .dropdown3, .dropdown4, .dropdown5, .dropdown6, .dropdown7, .dropdown8, .dropdown9, .dropdown10, .dropdown11, .dropdown12, .dropdown13, .dropdown14, .dropdown15 {
            position: relative;
            text-align: center;
            padding: 10px;
            margin: 20px 10px;
            max-width: 131px
        }

        .dropbtn1, .dropbtn2, .dropbtn3, .dropbtn4, .dropbtn5, .dropbtn6, .dropbtn7, .dropbtn8, .dropbtn9, .dropbtn10, .dropbtn11, .dropbtn12, .dropbtn13, .dropbtn14, .dropbtn15 {
            width: 120px;
        }

            .dropbtn1 img, .dropbtn2 img, .dropbtn3 img, .dropbtn4 img, .dropbtn5 img, .dropbtn6 img, .dropbtn7 img, .dropbtn8 img, .dropbtn9 img, .dropbtn10 img, .dropbtn11 img, .dropbtn12 img, .dropbtn13 img, .dropbtn14 img, .dropbtn15 img {
                width: 85px;
                margin: 0 auto;
                text-align: center;
            }

        .dropbtnP {
            max-width: 120px
        }

        .dropdown-content1, .dropdown-content2, .dropdown-content3, .dropdown-content4, .dropdown-content5, .dropdown-content6, .dropdown-content7, .dropdown-content8, .dropdown-content9, .dropdown-content10, .dropdown-content11, .dropdown-content12, .dropdown-content13, .dropdown-content14, .dropdown-content15 {
            display: none;
            position: absolute;
            width: 300px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
            background-color: white
        }

            .dropdown-content1 div, .dropdown-content2 div, .dropdown-content3 div, .dropdown-content4 div, .dropdown-content5 div, .dropdown-content6 div, .dropdown-content7 div, .dropdown-content8 div, .dropdown-content9 div, .dropdown-content10 div, .dropdown-content11 div, .dropdown-content12 div, .dropdown-content13 div, .dropdown-content14 div, .dropdown-content15 div {
                color: black;
                padding: 12px 16px;
                text-decoration: none;
                display: block;
                font-weight: 700
            }

            .dropdown-content1 p, .dropdown-content2 p, .dropdown-content3 p, .dropdown-content4 p, .dropdown-content5 p, .dropdown-content6 p, .dropdown-content7 p, .dropdown-content8 p, .dropdown-content9 p, .dropdown-content10 p, .dropdown-content11 p, .dropdown-content12 p, .dropdown-content13 p, .dropdown-content14 p, .dropdown-content15 p {
                display: block;
            }

            .dropdown-content1 div img, .dropdown-content2 div img, .dropdown-content3 div img, .dropdown-content4 div img, .dropdown-content5 div img, .dropdown-content6 div img, .dropdown-content7 div img, .dropdown-content8 div img, .dropdown-content9 div img, .dropdown-content10 div img, .dropdown-content11 div img, .dropdown-content12 div img, .dropdown-content13 div img, .dropdown-content14 div img, .dropdown-content15 div img {
                height: 250px;
                width: 100%;
                max-width: 250px;
                margin: 0 auto;
                overflow: hidden;
                display: flex;
                background-color: white
            }

        .dropdown1:hover .dropdown-content1, .dropdown2:hover .dropdown-content2, .dropdown3:hover .dropdown-content3, .dropdown4:hover .dropdown-content4, .dropdown5:hover .dropdown-content5, .dropdown6:hover .dropdown-content6, .dropdown7:hover .dropdown-content7, .dropdown8:hover .dropdown-content8, .dropdown9:hover .dropdown-content9, .dropdown10:hover .dropdown-content10, .dropdown11:hover .dropdown-content11, .dropdown12:hover .dropdown-content12, .dropdown13:hover .dropdown-content13, .dropdown14:hover .dropdown-content14, .dropdown15:hover .dropdown-content15 {
            display: block;
        }

        .house_image {
            padding-bottom: 60px
        }

            .house_image a {
                text-decoration: none
            }

                .house_image a h4 {
                    margin-bottom: 33px;
                    --min-width: 768;
                    --max-width: 1110;
                    --max-font: 38;
                    --min-font: 36;
                    font-size: clamp(36px,var(--responsive),38px);
                }

        .tigla_metalica_image_prezentare a img {
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            width: 100%;
            max-width: 300px;
            margin: 0 auto;
            overflow: hidden;
            height: 300px;
        }

        .prezentare_generala {
            padding: 30px 0 70px;
        }

        .t10_img {
            display: contents
        }
    }