.about-due {
    background: url("../svg/symbol_dotten.svg");
    background-size: 200%;
    background-position: bottom 0 right -700px;
    background-repeat: space;
}

/* riquadro-dx Andrea ------------------------------------*/

.riquadro-dx {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-style: var(--holzhof-font-style-normal) !important;
    font-weight: var(--holzhof-font-weight-normal) !important;
    font-family: var(--holzhof-font-family-roboto) !important;
    letter-spacing: var(--holzhof-character-spacing-0) !important;
    text-align: left;
    color: var(--holzhof-color-grey) !important;
    opacity: 1;
    margin-bottom: 50px;
    margin-left: 10%;

    .div-border {
        height: 80%;
        width: 40px;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        background-color: var(--holzhof-color-green);
    }

    .div-text {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background-color: var(--holzhof-color-white);
        height: 80%;
        width: 100%;
        /*border-top: 4px dotted var(--holzhof-color-green);
        border-bottom: 4px dotted var(--holzhof-color-green);*/
        background-image: repeating-linear-gradient(90deg, var(--holzhof-color-green), var(--holzhof-color-green) 3px, transparent 3px, transparent 11px), repeating-linear-gradient(90deg, var(--holzhof-color-green), var(--holzhof-color-green) 3px, transparent 3px, transparent 11px);
        background-position: left top, left bottom;
        background-repeat: repeat-x, repeat-x;
        background-size: 100% 2px, 100% 2px;
        padding-top: 20px;
        padding-bottom: 20px;

        h1 {
            font-size: var(--holzhof-font-size-38);
            line-height: var(--holzhof-line-spacing-50);
            text-transform: uppercase;
            padding-left: 30px;
            padding-right: 30px;
            margin-top: 0;
            position: sticky;
            top: 0;
            background-color: var(--holzhof-color-white);
            z-index:9999;
        }

        h1::before {
            content: "";
            position: absolute;
            top: -38;
            height: 40px; /* uguale al padding-top */
            width: 100%;
            background-color: var(--holzhof-color-white); /* stesso bg del contenuto */
            display: block;
        }

        h2 {
            font-size: var(--holzhof-font-size-38);
            line-height: var(--holzhof-line-spacing-50);
            text-transform: uppercase;
            padding-left: 30px;
            padding-right: 30px;
            position: sticky;
            top: 0;
            background-color: var(--holzhof-color-white);
            z-index:9999;
        }

        h2::before {
            content: "";
            position: absolute;
            top: -38;
            height: 40px; /* uguale al padding-top */
            width: 100%;
            background-color: var(--holzhof-color-white); /* stesso bg del contenuto */
            display: block;
        }

        p {
            font-size: var(--holzhof-font-size-16);
            line-height: var(--holzhof-line-spacing-28);
            padding-left: 30px;
            padding-right: 30px;
        }

        a {
            font-size: var(--holzhof-font-size-16);
            line-height: var(--holzhof-line-spacing-28);
            padding-left: 30px;
            padding-right: 30px;
            color: var(--holzhof-color-green);
        }

        .button {
            background: url("../images/pulsante_green.png") no-repeat;
            background-size: 20%;
            background-position: 35px;
            transition: 0.3s;
            border-radius: 27px;
            border: 2px solid var(--holzhof-color-green);
            margin: 0px 0px 0px 30px;
            height: 50px;
            width: 90px;

            &:hover {
                background-image: url("../images/pulsante_white.png") no-repeat;
                background-size: 20%;
                background-position: 35px;
                transition: 0.3s;
                border-radius: 27px;
                background-color: var(--holzhof-color-green);
            }
        }
    }
    
    img {
        border-radius: 10px;
        width: 55%;
    }

    .div-dotted {
        background-color: var(--holzhof-color-white);
        /*
        border-top: 4px dotted var(--holzhof-color-green);
        border-right: 4px dotted var(--holzhof-color-green);
        border-bottom: 4px dotted var(--holzhof-color-green);*/
        background-image: repeating-linear-gradient(90deg, var(--holzhof-color-green), var(--holzhof-color-green) 3px, transparent 3px, transparent 11px), repeating-linear-gradient(180deg, var(--holzhof-color-green), var(--holzhof-color-green) 3px, transparent 3px, transparent 11px), repeating-linear-gradient(90deg, var(--holzhof-color-green), var(--holzhof-color-green) 3px, transparent 3px, transparent 11px);
        background-position: left top, right top, left bottom;
        background-repeat: repeat-x, repeat-y, repeat-x;
        background-size: 100% 2px, 2px 100%, 100% 2px;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        width: 80px;
        height: 80%;
    }
}

/* .riquadro-sx Andrea  ------------------------------------*/

.riquadro-sx {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-style: var(--holzhof-font-style-normal) !important;
    font-weight: var(--holzhof-font-weight-normal) !important;
    font-family: var(--holzhof-font-family-roboto) !important;
    letter-spacing: var(--holzhof-character-spacing-0) !important;
    text-align: left;
    color: var(--holzhof-color-grey) !important;
    opacity: 1;
    margin-bottom: 50px;
    margin-left: -10%;

    .div-border {
        height: 80%;
        width: 40px;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        background-color: var(--holzhof-color-green);
    }

    .div-text {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background-color: var(--holzhof-color-white);
        height: 80%;
        width: 100%;
        /*
        border-top: 4px dotted var(--holzhof-color-green);
        border-bottom: 4px dotted var(--holzhof-color-green);*/
        background-image: repeating-linear-gradient(90deg, var(--holzhof-color-green), var(--holzhof-color-green) 3px, transparent 3px, transparent 11px), repeating-linear-gradient(90deg, var(--holzhof-color-green), var(--holzhof-color-green) 3px, transparent 3px, transparent 11px);
        background-position: left top, left bottom;
        background-repeat: repeat-x, repeat-x;
        background-size: 100% 2px, 100% 2px;
        padding-top: 20px;
        padding-bottom: 20px;
        padding-right: 20px;

        h1 {
            font-size: var(--holzhof-font-size-38);
            line-height: var(--holzhof-line-spacing-50);
            text-transform: uppercase;
            padding-left: 30px;
            padding-right: 30px;
            margin-top: 0;
            position: sticky;
            top: 0;
            background-color: var(--holzhof-color-white);
            z-index:9999;
        }

        h2 {
            font-size: var(--holzhof-font-size-38);
            line-height: var(--holzhof-line-spacing-50);
            text-transform: uppercase;
            padding-left: 30px;
            padding-right: 30px;
            position: sticky;
            top: 0;
            background-color: var(--holzhof-color-white);
            z-index:9999;
        }

        p {
            font-size: var(--holzhof-font-size-16);
            line-height: var(--holzhof-line-spacing-28);
            padding-left: 30px;
            padding-right: 30px;
        }

        a {
            font-size: var(--holzhof-font-size-16);
            line-height: var(--holzhof-line-spacing-28);
            padding-left: 30px;
            padding-right: 30px;
            color: var(--holzhof-color-green);
        }

        .button {
            background: url("../images/pulsante_green.png") no-repeat;
            background-size: 20%;
            background-position: 35px;
            transition: 0.3s;
            border-radius: 27px;
            border: 2px solid var(--holzhof-color-green);
            margin: 0px 0px 0px 30px;
            height: 50px;
            width: 90px;

            &:hover {
                background-image: url("/asstst/images/pulsante_white.png") no-repeat;
                background-size: 20%;
                background-position: 35px;
                transition: 0.3s;
                border-radius: 27px;
                background-color: var(--holzhof-color-green);
            }
        }
    }

    img {
        border-radius: 10px;
        width: 55%;
    }

    .div-dotted {
        background-color: var(--holzhof-color-white);
        /*
        border-top: 4px dotted var(--holzhof-color-green);
        border-left: 4px dotted var(--holzhof-color-green);
        border-bottom: 4px dotted var(--holzhof-color-green);*/
        background-image: repeating-linear-gradient(90deg, var(--holzhof-color-green), var(--holzhof-color-green) 3px, transparent 3px, transparent 11px), repeating-linear-gradient(90deg, var(--holzhof-color-green), var(--holzhof-color-green) 3px, transparent 3px, transparent 11px), repeating-linear-gradient(180deg, var(--holzhof-color-green), var(--holzhof-color-green) 3px, transparent 3px, transparent 11px);
        background-position: left top, left bottom, left top;
        background-repeat: repeat-x, repeat-x, repeat-y;
        background-size: 100% 2px, 100% 2px, 2px 100%;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        width: 80px;
        height: 80%;
    }
}

.riquadro-dx-bootstrapless {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-style: var(--holzhof-font-style-normal) !important;
    font-weight: var(--holzhof-font-weight-normal) !important;
    font-family: var(--holzhof-font-family-roboto) !important;
    letter-spacing: var(--holzhof-character-spacing-0) !important;
    text-align: left;
    color: var(--holzhof-color-grey) !important;
    opacity: 1;
    margin-bottom: 50px;
    margin-right: -20%;
    height: 450px;

    .div-border {
        height: 80%;
        width: 40px;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        background-color: var(--holzhof-color-green);
    }

    .div-text {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background-color: var(--holzhof-color-white);
        height: 80%;
        width: 100%;
        /*border-top: 4px dotted var(--holzhof-color-green);
        border-bottom: 4px dotted var(--holzhof-color-green);*/
        background-image: repeating-linear-gradient(90deg, var(--holzhof-color-green), var(--holzhof-color-green) 3px, transparent 3px, transparent 11px), repeating-linear-gradient(90deg, var(--holzhof-color-green), var(--holzhof-color-green) 3px, transparent 3px, transparent 11px);
        background-position: left top, left bottom;
        background-repeat: repeat-x, repeat-x;
        background-size: 100% 2px, 100% 2px;
        padding-top: 40px;
        padding-bottom: 40px;
        padding-left: 30px;
        padding-right: 30px;
        overflow: auto;

        h1 {
            font-size: var(--holzhof-font-size-38);
            line-height: var(--holzhof-line-spacing-50);
            text-transform: uppercase;
            margin-top: 0;
            position: sticky;
            top: 0;
            background-color: var(--holzhof-color-white);
            z-index: 9999;
        }

        h1::before {
            content: "";
            position: absolute;
            top: -38;
            height: 40px; /* uguale al padding-top */
            width: 100%;
            background-color: var(--holzhof-color-white); /* stesso bg del contenuto */
            display: block;
            z-index: 999;
        }

        h2 {
            font-size: var(--holzhof-font-size-38);
            line-height: var(--holzhof-line-spacing-50);
            text-transform: uppercase;
            position: sticky;
            top: 0;
            background-color: var(--holzhof-color-white);
            z-index:9999;
        }

        h2::before {
            content: "";
            position: absolute;
            top: -38;
            height: 40px; /* uguale al padding-top */
            width: 100%;
            background-color: var(--holzhof-color-white); /* stesso bg del contenuto */
            display: block;
            z-index: 999;
        }

        h3 {
            font-size: var(--holzhof-font-size-24);
            line-height: var(--holzhof-line-spacing-28);
        }

        p {
            font-size: var(--holzhof-font-size-16);
            line-height: var(--holzhof-line-spacing-28);
        }

        a {
            font-size: var(--holzhof-font-size-16);
            line-height: var(--holzhof-line-spacing-28);
            color: var(--holzhof-color-green);
        }

        #button {
            position: sticky;
            bottom: 0px;
            background-color: var(--holzhof-color-white);
        }

        #button::after {
            content: "";
            position: absolute;
            bottom: -38;
            height: 38px; /* uguale al padding-top */
            width: 100%;
            background-color: var(--holzhof-color-white); /* stesso bg del contenuto */
            display: block;
            z-index: 999;
        }

        .button {
            background: url("../images/pulsante_green.png") no-repeat;
            background-size: 20%;
            background-position: 35px;
            transition: 0.3s;
            border-radius: 27px;
            border: 2px solid var(--holzhof-color-green);
            height: 50px;
            width: 90px;

            &:hover {
                background: url("../images/pulsante_white.png") no-repeat;
                background-size: 20%;
                background-position: 35px;
                transition: 0.3s;
                border-radius: 27px;
                background-color: var(--holzhof-color-green);
            }
        }
    }

    img {
        object-fit: cover;
        border-radius: 10px;
        min-width: 45%;
        width: 45%;
        min-height: 100%;
    }

    .div-dotted {
        background-color: var(--holzhof-color-white);
        /*
        border-top: 4px dotted var(--holzhof-color-green);
        border-right: 4px dotted var(--holzhof-color-green);
        border-bottom: 4px dotted var(--holzhof-color-green);*/
        background-image: repeating-linear-gradient(90deg, var(--holzhof-color-green), var(--holzhof-color-green) 3px, transparent 3px, transparent 11px), repeating-linear-gradient(180deg, var(--holzhof-color-green), var(--holzhof-color-green) 3px, transparent 3px, transparent 11px), repeating-linear-gradient(90deg, var(--holzhof-color-green), var(--holzhof-color-green) 3px, transparent 3px, transparent 11px);
        background-position: left top, right top, left bottom;
        background-repeat: repeat-x, repeat-y, repeat-x;
        background-size: 100% 2px, 2px 100%, 100% 2px;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        width: 80px;
        height: 80%;
    }
}

/* .riquadro-sx Andrea  ------------------------------------*/

.riquadro-sx-bootstrapless {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-style: var(--holzhof-font-style-normal) !important;
    font-weight: var(--holzhof-font-weight-normal) !important;
    font-family: var(--holzhof-font-family-roboto) !important;
    letter-spacing: var(--holzhof-character-spacing-0) !important;
    text-align: left;
    color: var(--holzhof-color-grey) !important;
    opacity: 1;
    margin-bottom: 50px;
    margin-left: -20%;
    height: 450px;

    .div-border {
        height: 80%;
        width: 40px;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        background-color: var(--holzhof-color-green);
    }

    .div-text {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background-color: var(--holzhof-color-white);
        height: 80%;
        width: 100%;
        /*
        border-top: 4px dotted var(--holzhof-color-green);
        border-bottom: 4px dotted var(--holzhof-color-green);*/
        background-image: repeating-linear-gradient(90deg, var(--holzhof-color-green), var(--holzhof-color-green) 3px, transparent 3px, transparent 11px),
                        repeating-linear-gradient(90deg, var(--holzhof-color-green), var(--holzhof-color-green) 3px, transparent 3px, transparent 11px);
        background-position: left top, left bottom;
        background-repeat: repeat-x, repeat-x;
        background-size: 100% 2px, 100% 2px;
        padding-top: 40px;
        padding-bottom: 40px;
        padding-right: 20px;
        padding-left: 30px;
        padding-right: 30px;
        overflow: auto;

        h1 {
            font-size: var(--holzhof-font-size-38);
            line-height: var(--holzhof-line-spacing-50);
            text-transform: uppercase;
            margin-top: 0;
            position: sticky;
            top: 0;
            background-color: var(--holzhof-color-white);
            z-index:9999;
        }

        h1::before {
            content: "";
            position: absolute;
            top: -38;
            height: 40px; /* uguale al padding-top */
            width: 100%;
            background-color: var(--holzhof-color-white); /* stesso bg del contenuto */
            display: block;
        }

        h2 {
            font-size: var(--holzhof-font-size-38);
            line-height: var(--holzhof-line-spacing-50);
            text-transform: uppercase;
            position: sticky;
            top: 0;
            background-color: var(--holzhof-color-white);
            z-index:9999;
        }

        h2::before {
            content: "";
            position: absolute;
            top: -38;
            height: 40px; /* uguale al padding-top */
            width: 100%;
            background-color: var(--holzhof-color-white); /* stesso bg del contenuto */
            display: block;
        }

        h3 {
            font-size: var(--holzhof-font-size-24);
            line-height: var(--holzhof-line-spacing-28);
        }

        p {
            font-size: var(--holzhof-font-size-16);
            line-height: var(--holzhof-line-spacing-28);
        }

        a {
            font-size: var(--holzhof-font-size-16);
            line-height: var(--holzhof-line-spacing-28);
            color: var(--holzhof-color-green);
        }

        #button {
            position: sticky;
            bottom: 0px;
            background-color: var(--holzhof-color-white);
        }

        #button::after {
            content: "";
            position: absolute;
            bottom: -38;
            height: 38px; /* uguale al padding-top */
            width: 100%;
            background-color: var(--holzhof-color-white); /* stesso bg del contenuto */
            display: block;
            z-index: 999;
        }

        .button {
            background: url("../images/pulsante_green.png") no-repeat;
            background-size: 20%;
            background-position: 35px;
            transition: 0.3s;
            border-radius: 27px;
            border: 2px solid var(--holzhof-color-green);
            height: 50px;
            width: 90px;

            &:hover {
                background: url("../images/pulsante_white.png") no-repeat;
                background-size: 20%;
                background-position: 35px;
                transition: 0.3s;
                border-radius: 27px;
                background-color: var(--holzhof-color-green);
            }
        }
    }

    img {
        object-fit: cover;
        border-radius: 10px;
        min-width: 45%;
        width: 45%;
        min-height: 100%;
    }

    .div-dotted {
        background-color: var(--holzhof-color-white);
        /*
        border-top: 4px dotted var(--holzhof-color-green);
        border-left: 4px dotted var(--holzhof-color-green);
        border-bottom: 4px dotted var(--holzhof-color-green);*/
        background-image: repeating-linear-gradient(90deg, var(--holzhof-color-green), var(--holzhof-color-green) 3px, transparent 3px, transparent 11px), repeating-linear-gradient(90deg, var(--holzhof-color-green), var(--holzhof-color-green) 3px, transparent 3px, transparent 11px), repeating-linear-gradient(180deg, var(--holzhof-color-green), var(--holzhof-color-green) 3px, transparent 3px, transparent 11px);
        background-position: left top, left bottom, left top;
        background-repeat: repeat-x, repeat-x, repeat-y;
        background-size: 100% 2px, 100% 2px, 2px 100%;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        width: 80px;
        height: 80%;
    }
}


/*-----------------------------------------------------------------
                            VISTA MOBILE
-----------------------------------------------------------------*/

@media (max-width: 1199px) {

    .about-due {

        .riquadro-dx {
            flex-direction: column;
            margin: auto;

            .div-text {
                border:none;
                margin: none;
                order: 1;

                h1 {
                    font-size: var(--holzhof-font-size-38);
                    line-height: var(--holzhof-line-spacing-50);
                    text-transform: uppercase;
                    margin: none;
                    text-align: center;
                    margin-top: 0;
                    position: sticky;
                    top: 0;
                    background-color: var(--holzhof-color-white);
                }

                h1::before {
                    content: "";
                    position: absolute;
                    top: -38;
                    height: 40px; /* uguale al padding-top */
                    width: 100%;
                    background-color: var(--holzhof-color-white); /* stesso bg del contenuto */
                    display: block;
                }
    
                h2 {
                    font-size: var(--holzhof-font-size-38);
                    line-height: var(--holzhof-line-spacing-50);
                    text-transform: uppercase;
                    margin: none;
                    text-align: center;
                    position: sticky;
                    top: 0;
                    background-color: var(--holzhof-color-white);
                }

                h2::before {
                    content: "";
                    position: absolute;
                    top: -38;
                    height: 40px; /* uguale al padding-top */
                    width: 100%;
                    background-color: var(--holzhof-color-white); /* stesso bg del contenuto */
                    display: block;
                }
    
                p {
                    font-size: var(--holzhof-font-size-16);
                    line-height: var(--holzhof-line-spacing-28);
                    text-align: center;
                }
    
                .button {
                    align-items: center;
                    flex-direction: column;
                    background: url("../images/pulsante_green.png") no-repeat;
                    background-size: 20%;
                    background-position: 35px;
                    transition: 0.3s;
                    border-radius: 27px;
                    margin: auto;
                    height: 50px;
                    width: 90px;
    
                    &:hover {
                        background: url("../images/pulsante_white.png") no-repeat;
                        background-size: 20%;
                        background-position: 35px;
                        transition: 0.3s;
                        border-radius: 27px;
                        background-color: var(--holzhof-color-green);
                    }
                }
            }

            img {
                border-radius: 10px;
                width: 100%;
                order: 2;
            }

            .div-border {
                display: none;
                }

            .div-dotted {
                border:none;
            }
        }
    

    
        .riquadro-sx {
            flex-direction: column;
            margin: auto;
            order: 1;
    
            .div-border {
                display: none;
            }
    
            .div-text {
                border:none;
                margin: none;
                h1 {
                    font-size: var(--holzhof-font-size-38);
                    line-height: var(--holzhof-line-spacing-50);
                    text-transform: uppercase;
                    margin: none;
                    text-align: center;
                    margin-top: 0;
                    position: sticky;
                    top: 0;
                    background-color: var(--holzhof-color-white);
                }

                h1::before {
                    content: "";
                    position: absolute;
                    top: -38;
                    height: 40px; /* uguale al padding-top */
                    width: 100%;
                    background-color: var(--holzhof-color-white); /* stesso bg del contenuto */
                    display: block;
                }

                h2 {
                    font-size: var(--holzhof-font-size-38);
                    line-height: var(--holzhof-line-spacing-50);
                    text-transform: uppercase;
                    margin: none;
                    text-align: center;
                    position: sticky;
                    top: 0;
                    background-color: var(--holzhof-color-white);
                }

                h2::before {
                    content: "";
                    position: absolute;
                    top: -38;
                    height: 40px; /* uguale al padding-top */
                    width: 100%;
                    background-color: var(--holzhof-color-white); /* stesso bg del contenuto */
                    display: block;
                }
    
                p {
                    font-size: var(--holzhof-font-size-16);
                    line-height: var(--holzhof-line-spacing-28);
                    text-align: center;
                }
    
                .button {
                    background: url("../images/pulsante_green.png") no-repeat;
                    background-size: 20%;
                    background-position: 35px;
                    transition: 0.3s;
                    border-radius: 27px;
                    border: 2px solid var(--holzhof-color-green);
                    margin: auto;
                    height: 50px;
                    width: 90px;
    
                    &:hover {
                        background: url("../images/pulsante_white.png") no-repeat;
                        background-size: 20%;
                        background-position: 35px;
                        transition: 0.3s;
                        border-radius: 27px;
                        background-color: var(--holzhof-color-green);
                    }
                }
            }
    
            img {
                border-radius: 10px;
                width: 100%;
                order: 2;
            }
    
            .div-dotted {
                display: none;
             }
        }
    }
    

    /* CLASSI CHE VENGONO EFFETTIVAMENTE UTILIZZATE */
    .riquadro-dx-bootstrapless {
        flex-direction: column; 
        height: auto;
        margin-right: 0;

        .div-text{
            height: auto;
            background-image: none;
            padding-left: 0;
            padding-right: 0;
	        width: 100%;
		h1{
       		    word-wrap: break-word;
    		}
        }
    }
    .riquadro-dx-bootstrapless img{   
            height: auto;
            width:100%;

    }
    .riquadro-sx-bootstrapless {
        flex-direction: column-reverse; 
        height: auto;
        margin-left: 0;

        .div-text{
            height: auto;
            background-image: none;
            padding-left: 0;
            padding-right: 0;
	        width: 100%;
		h1{
        	word-wrap: break-word;
    		}
        }
    }
    .riquadro-sx-bootstrapless img{   
            height: auto;
            width: 100%;
    }
    .container-content {
        display: flex;
        flex-direction: column;
        align-items: baseline;
      }
   
    .left-text {
        word-wrap: unset;
        word-break: unset;
    }
    

}