.sistem_drenaj {
    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;
}
    .sistem_drenaj h1 {
        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;
    }
.sistem_pluvial_image img {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    overflow: hidden;
    height: 500px
}

.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
}
ul__caracteristici_sistem_pluvial li {
    list-style: disc;
    padding: 10px 0;
}

#img_1, #img_2 {
    text-align: center
}

.ul__caracteristici_sistem_pluvial {
    padding-top: 10px
}
.sistem_pluvial_image {
    padding-left: 10px;
}
.sistem_pluvial_elemente {
    width: 100%;
    margin: 0 auto
}
.element_sistem_pluvial img{width:100%;max-width:200px;margin:0 auto;
                        height:220px;
}
.dropbtnSP1, .dropbtnSP2, .dropbtnSP3, .dropbtnSP4, .dropbtnSP5, .dropbtnSP6, .dropbtnSP7, .dropbtnSP8, .dropbtnSP9, .dropbtnSP10, .dropbtnSP11, .dropbtnSP12, .dropbtnSP13, .dropbtnSP14, .dropbtnSP15, .dropbtnSP16, .dropbtnSP17, .dropbtnSP18, .dropbtnSP19, .dropbtnSP20, .dropbtnSP21 {
    color: black;
    padding: 16px;
    border: none;
    font-size: 12px;
    font-weight: 700
}

.dropdownSP1, .dropdownSP2, .dropdownSP3, .dropdownSP4, .dropdownSP5, .dropdownSP6, .dropdownSP7, .dropdownSP8, .dropdownSP9, .dropdownSP10, .dropdownSP11, .dropdownSP12, .dropdownSP13, .dropdownSP14, .dropdownSP15, .dropdownSP16, .dropdownSP17, .dropdownSP18, .dropdownSP19, .dropdownSP20, .dropdownSP21 {
    position: relative;
    text-align: center;
    padding: 10px;
    margin: 0 10px;
    max-width: 100px;
}

.dropbtnSP1 img, .dropbtnSP2 img, .dropbtnSP3 img, .dropbtnSP4 img, .dropbtnSP5 img, .dropbtnSP6 img, .dropbtnSP7 img, .dropbtnSP8 img, .dropbtnSP9 img, .dropbtnSP10 img, .dropbtnSP11 img, .dropbtnSP12 img, .dropbtnSP13 img, .dropbtnSP14 img, .dropbtnSP15 img, .dropbtnSP16 img, .dropbtnSP17 img, .dropbtnSP18 img, .dropbtnSP19 img, .dropbtnSP20 img, .dropbtnSP21 img {
    width: 100px;
}

.dropdownSP-content1 div img, .dropdownSP-content2 div img, .dropdownSP-content3 div img, .dropdownSP-content4 div img, .dropdownSP-content5 div img, .dropdownSP-content6 div img, .dropdownSP-content7 div img, .dropdownSP-content8 div img, .dropdownSP-content9 div img, .dropdownSP-content10 div img, .dropdownSP-content11 div img, .dropdownSP-content12 div img, .dropdownSP-content13 div img, .dropdownSP-content14 div img, .dropdownSP-content15 div img, .dropdownSP-content16 div img, .dropdownSP-content17 div img, .dropdownSP-content18 div img, .dropdownSP-content19 div img, .dropdownSP-content20 div img, .dropdownSP-content21 div img {
    height: 100px;
    width: 100%;
    max-width: 100px;
    margin: 0 auto;
    overflow: hidden;
    display: none
}

.dropdownSP-content1 p, .dropdownSP-content2 p, .dropdownSP-content3 p, .dropdownSP-content4 p, .dropdownSP-content5 p, .dropdownSP-content6 p, .dropdownSP-content7 p, .dropdownSP-content8 p, .dropdownSP-content9 p, .dropdownSP-content10 p, .dropdownSP-content11 p, .dropdownSP-content12 p, .dropdownSP-content13 p, .dropdownSP-content14 p, .dropdownSP-content15 p, .dropdownSP-content16 p, .dropdownSP-content17 p, .dropdownSP-content18 p, .dropdownSP-content19 p, .dropdownSP-content20 p, .dropdownSP-content21 p {
    display: none
}
@media screen and (min-width: 769px) {
    .sistem_drenaj {
        padding: 0 30px;padding-bottom:100px
    }

        .sistem_drenaj h1 {
            margin-bottom: 33px;
            --min-width: 768;
            --max-width: 1110;
            --max-font: 38;
            --min-font: 36;
            font-size: clamp(36px,var(--responsive),38px);
        }
    .sistem_pluvial_image img {
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
        overflow: hidden;
        height: 600px
    }
    .element_sistem_pluvial img {
        width: 100%;
        max-width: 200px;
        margin: 0 auto;
        height: 220px;
    }
    .finisaj_lucios {
        padding: 0 130px;
    }
    .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: 130px;
    }

        .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: 120px;
            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;
    }
    .ul__caracteristici_sistem_pluvial {
        width: 94%;
        padding-top: 30px
    }

    #img_1 {
        text-align: right
    }

    #img_2 {
        text-align: left
    }

    .ul__caracteristici_sistem_pluvial li {
        padding: 20px 0;
    }
    .sistem_pluvial_elemente {
        width: 89%;
        margin: 0 auto
    }
    .sistem_pluvial_image {padding-left:140px;
    }
    .dropdownSP1, .dropdownSP2, .dropdownSP3, .dropdownSP4, .dropdownSP5, .dropdownSP6, .dropdownSP7, .dropdownSP8, .dropdownSP9, .dropdownSP10, .dropdownSP11, .dropdownSP12, .dropdownSP13, .dropdownSP14, .dropdownSP15, .dropdownSP16, .dropdownSP17, .dropdownSP18, .dropdownSP19, .dropdownSP20, .dropdownSP21 {
        position: relative;
        text-align: center;
        margin: 20px 20px;
        max-width: 131px
    }

    .dropbtnSP1, .dropbtnSP2, .dropbtnSP3, .dropbtnSP4, .dropbtnSP5, .dropbtnSP6, .dropbtnSP7, .dropbtnSP8, .dropbtnSP9, .dropbtnSP10, .dropbtnSP11, .dropbtnSP12, .dropbtnSP13, .dropbtnSP14, .dropbtnSP15, .dropbtnSP16, .dropbtnSP17, .dropbtnSP18, .dropbtnSP19, .dropbtnSP20, .dropbtnSP21 {
        width: 130px;
    }

        .dropbtnSP1 img, .dropbtnSP2 img, .dropbtnSP3 img, .dropbtnSP4 img, .dropbtnSP5 img, .dropbtnSP6 img, .dropbtnSP7 img, .dropbtnSP8 img, .dropbtnSP9 img, .dropbtnSP10 img, .dropbtnSP11 img, .dropbtnSP12 img, .dropbtnSP13 img, .dropbtnSP14 img, .dropbtnSP15 img, .dropbtnSP16 img, .dropbtnSP17 img, .dropbtnSP18 img, .dropbtnSP19 img, .dropbtnSP20 img, .dropbtnSP21 img {
            width: 140px;
            margin: 0 auto;
            text-align: center;
        }

    .dropbtnSPP {
        max-width: 120px
    }

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

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

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

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

    .dropdownSP1:hover .dropdownSP-content1, .dropdownSP2:hover .dropdownSP-content2, .dropdownSP3:hover .dropdownSP-content3, .dropdownSP4:hover .dropdownSP-content4, .dropdownSP5:hover .dropdownSP-content5, .dropdownSP6:hover .dropdownSP-content6, .dropdownSP7:hover .dropdownSP-content7, .dropdownSP8:hover .dropdownSP-content8, .dropdownSP9:hover .dropdownSP-content9, .dropdownSP10:hover .dropdownSP-content10, .dropdownSP11:hover .dropdownSP-content11, .dropdownSP12:hover .dropdownSP-content12, .dropdownSP13:hover .dropdownSP-content13, .dropdownSP14:hover .dropdownSP-content14, .dropdownSP15:hover .dropdownSP-content15, .dropdownSP16:hover .dropdownSP-content16, .dropdownSP17:hover .dropdownSP-content17, .dropdownSP18:hover .dropdownSP-content18, .dropdownSP19:hover .dropdownSP-content19, .dropdownSP20:hover .dropdownSP-content20, .dropdownSP21:hover .dropdownSP-content21 {
        display: block;
    }
}