.split-content {
    /* height: 100%; */
    width: 100%;
    display: flex;
    flex-direction: row;
    padding-left: 15%;
    padding-right: 15%;
    text-align: left;
    font-family: var(--holzhof-font-family-roboto);
    font-weight: var(--holzhof-font-weight-normal);
    font-style: var(--holzhof-font-style-normal);
    letter-spacing: var(--holzhof-character-spacing-0);
    opacity: 1;
    align-items: stretch;
   /* margin-bottom: 10vh;*/
    margin: 7vh 0 10vh 0;

    .left {
        width: 50%;
        padding-right: 4vw;
        display: grid;
        align-items: end;
    }

    .right {
        width: 50%;
        display: grid;
        align-items: end;
        grid-row-gap: 2rem;
        align-content: space-between;
    }

    p {
        margin: 0px 0rem 0px 1rem;
        font-weight: var(--holzhof-font-weight-normal);
        font-size: var(--holzhof-font-size-16);
        line-height: var(--holzhof-line-spacing-28);
        color: var(--holzhof-color-grey);
    }

    .icona {
        height: 2.5rem;
        width: 2.5rem;
    }

    h4 {
        font-size: var(--holzhof-font-size-24);
        line-height: var(--holzhof-line-spacing-28);
        font-weight: var(--holzhof-font-weight-bold);
        color: var(--holzhof-color-grey);
        position: relative;
        margin-bottom: 1rem;
    }
}

.caratteristiche {
    display: flex;
    flex-direction: column;
    align-content: left;
    margin-bottom: 6vh;

    .caratteristica {
        display: flex;
        flex-direction: row;
        align-items: center;
        text-align: left;
        opacity: 1;
        margin-bottom: 1vh;
    }
}

.composizione {
    display: flex;
    flex-direction: column;
    align-content: left;
    margin-bottom: 6vh;

    .materiali {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-auto-rows: 2.2rem;
        align-items: center;
        grid-column-gap: 0px;

        .materiale {
            display: flex;
            flex-direction: row;
            align-items: center;
        }
    }
}

.tabs {
    width: 100%;

    .buttons {
        height: 4rem;
        width: fit-content;
        display: flex;
        flex-direction: row;
        align-content: flex-start;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        border-top: 3px solid var(--holzhof-color-light-grey);
        border-left: 3px solid var(--holzhof-color-light-grey);
        border-right: 3px solid var(--holzhof-color-light-grey);
        overflow: hidden;

        .button-tab {
            font-weight: var(--holzhof-font-weight-normal);
            font-size: var(--holzhof-font-size-16);
            line-height: var(--holzhof-line-spacing-19);
            color: var(--holzhof-color-grey);
            background-color: var(--holzhof-color-light-grey);
            padding: 0rem 3rem 0rem 3rem;
            height: 100%;
            border: 0px;

            &:hover {
                background-color: var(--holzhof-color-white);
                color: var(--holzhof-color-green);
            }
        }

        .active {
            background-color: var(--holzhof-color-white);
            color: var(--holzhof-color-green);
        }
    }

    .tab-content {
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        border-top-right-radius: 10px;
        border: 3px solid var(--holzhof-color-light-grey);
        height: max-content;
        min-height: 10vh;

        .info {
            height: 100%;
            width: 100%;
            display: flex;
            flex-direction: column;
            padding: 1rem 1rem 1rem 1rem;
        }

        .table-row {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            height: 2.5rem;
            background-image: repeating-linear-gradient(90deg, var(--holzhof-color-light-grey), var(--holzhof-color-light-grey) 3px, transparent 3px, transparent 11px);
            background-position: left bottom;
            background-repeat: repeat-x;
            background-size: 100% 2px;
            margin-bottom: 0.5rem;
            align-items: center;
        }

        .download {
            height: 100%;
            width: 100%;
            display: flex;
            flex-direction: column;
            padding: 1rem 1rem 1rem 1rem;
        }

        p {
            margin-left: 0px;
            margin-right: 0px;
        }

        .download-logo {
            height: 2.5rem;
            width: 2.5rem;
        }

        .spacer {
            flex-grow: 1;
        }

        .tipo-file {
            height: 2rem;
            width: 2rem;
        }
    }
}

/*.altri-prodotti {
    display: grid;
    grid-template-columns: 0.1fr 1fr 1fr 1fr 0.1fr;
    grid-template-rows: 10rem 40vh;
    background-image: repeating-linear-gradient(90deg, var(--holzhof-color-green), var(--holzhof-color-green) 3px, transparent 3px, transparent 14px), repeating-linear-gradient(180deg, var(--holzhof-color-green), var(--holzhof-color-green) 3px, transparent 3px, transparent 14px), repeating-linear-gradient(90deg, var(--holzhof-color-green), var(--holzhof-color-green) 3px, transparent 3px, transparent 14px), repeating-linear-gradient(180deg, var(--holzhof-color-green), var(--holzhof-color-green) 3px, transparent 3px, transparent 14px);
    background-position: left top, right top, left bottom, left top;
    background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
    background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
    border-radius: 15px;
    overflow: hidden;
    width: 100%;
    margin: 0vh 0vh 7vh 0vh;
    padding-bottom: 5rem;
    align-items: center;
    justify-items: center;

    .bottone-sx {
        grid-column-start: 1;
        grid-row-start: 2;
        margin-left: 4vw;
        margin-right: 2vw;
        padding-right: 3rem;
        background-image: url("../svg/freccia-holzhof-grigio-chiaro.svg");
        background-repeat: no-repeat;
        background-size: 4rem;
        background-position: right;
        background-color: var(--holzhof-color-white);
        border: 0px;
        height: 6vh;
    }

    .bottone-dx {
        grid-column-start: 5;
        margin-right: 4vw;
        margin-left: 2vw;
        padding-left: 3rem;
        background-image: url("../svg/freccia-holzhof-grigio-chiaro.svg");
        background-repeat: no-repeat;
        background-size: 4rem;
        background-position: right;
        transform: rotate(180deg);
        background-color: var(--holzhof-color-white);
        border: 0px;
        height: 6vh;
    }
    
    h3 {
        grid-row: 1;
        grid-column: 2 / span 4;
        font-size: var(--holzhof-font-size-32);
        line-height: var(--holzhof-line-spacing-38);
        color: var(--holzhof-color-grey);
        opacity: 1;
        padding-top: 4rem;
        justify-self: left;
    }

    .prodotto {
        grid-row-start: 2;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        height: 100%;
        width: 90%;
        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), repeating-linear-gradient(180deg, var(--holzhof-color-green), var(--holzhof-color-green) 3px, transparent 3px, transparent 11px);
        background-position: left top, right top, left bottom, left top;
        background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
        background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
        border-radius: 10px;
        padding: 3vh;

        img {
            height: 80%;
            max-width: 100%;
            align-self: center;
        }

        .testi {
            h3 {
                font-style: var(--holzhof-font-style-normal);
                font-weight: var(--holzhof-font-weight-bold);
                font-family: var(--holzhof-font-family-roboto);
                letter-spacing: var(--holzhof-character-spacing-0);
                font-size: var(--holzhof-font-size-24);
                line-height: var(--holzhof-line-spacing-38);
                color: var(--holzhof-color-grey);
                text-align: left;
                opacity: 1;
            }

            .product-code {
                padding: 3px 20px 3px 20px;
                border-radius: 27px;
                border: 2px solid var(--holzhof-color-grey);
                height: 3vh;
                background-color: var(--holzhof-color-grey);
                color: var(--holzhof-color-white);
            }
        }
    }
}*/

.altri-prodotti {
    display: flex;
    flex-direction: column;
    background-image: repeating-linear-gradient(90deg, var(--holzhof-color-green), var(--holzhof-color-green) 3px, transparent 3px, transparent 14px), repeating-linear-gradient(180deg, var(--holzhof-color-green), var(--holzhof-color-green) 3px, transparent 3px, transparent 14px), repeating-linear-gradient(90deg, var(--holzhof-color-green), var(--holzhof-color-green) 3px, transparent 3px, transparent 14px), repeating-linear-gradient(180deg, var(--holzhof-color-green), var(--holzhof-color-green) 3px, transparent 3px, transparent 14px);
    background-position: left top, right top, left bottom, left top;
    background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
    background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
    border-radius: 15px;
    overflow: hidden;
    width: 100%;
    margin: 0vh 0vh 7vh 0vh;

    .titolo-paragrafo {
        font-size: var(--holzhof-font-size-32);
        line-height: var(--holzhof-line-spacing-38);
        color: var(--holzhof-color-grey);
        opacity: 1;
        padding-top: 4rem;
        margin-bottom: 1.5rem;
        margin-left: 12vw;
    }

    .prodotti {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;

        .bottone-sx{
            margin-left: 4vw;
            margin-right: 1vw;
            padding-right: 3rem;
            background-repeat: no-repeat;
            background-position: right;
            background-color: var(--holzhof-color-dddddd);
            border: 0px;
            height: 5rem;
            width: 5rem;
            margin-bottom: 7vh;
            background-image: var(--freccia-holzhof);

            /*faccio in modo che in hover la freccia cambi colore*/
            -webkit-mask: var(--freccia-holzhof); /*per tutti i browser*/
            -webkit-mask-size: contain;
            -webkit-mask-repeat: no-repeat;
            mask: var(--freccia-holzhof); /*per firefox*/
            mask-size: contain;
            mask-repeat: no-repeat;
            display: inline-block;

            &:hover {
                background-color: var(--holzhof-color-green);
            }
        }

        .bottone-dx{
            margin-right: 4vw;
            margin-left: 1vw;
            padding-left: 3rem;
            background-repeat: no-repeat;
            background-position: right;
            transform: rotate(180deg);
            background-color: var(--holzhof-color-dddddd);
            border: 0px;
            height: 5rem;
            width: 5rem;
            margin-bottom: 7vh;
            background-image: var(--freccia-holzhof);

            /*faccio in modo che in hover la freccia cambi colore*/
            -webkit-mask: var(--freccia-holzhof); /*per tutti i browser*/
            -webkit-mask-size: contain;
            -webkit-mask-repeat: no-repeat;
            mask: var(--freccia-holzhof); /*per firefox*/
            mask-size: contain;
            mask-repeat: no-repeat;
            display: inline-block;

            &:hover {
                background-color: var(--holzhof-color-green);
            }
        }
    }
}

.items-prod-aggiuntivi {
    display: flex;
    grid-column-gap: 3vw;
    height: 45vh;
    margin-bottom: 7vh;
    justify-content: center;
    
    .item {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        height: 100%;
        width: 100%;
        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), repeating-linear-gradient(180deg, var(--holzhof-color-green), var(--holzhof-color-green) 3px, transparent 3px, transparent 11px);
        background-position: left top, right top, left bottom, left top;
        background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
        background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
        border-radius: 10px;
        padding: 3vh;

        img {
            /*height: 70%;
            max-width: 100%;
            align-self: center;
            border-radius: 10px;
            object-fit: cover;*/
            flex-grow: 1;
            width: 100%;
            max-width: 100%;
            align-self: center;
            border-radius: 10px;
            object-fit: contain !important;
            overflow: hidden;
        }

        .testi{
            font-style: var(--holzhof-font-style-normal);
            font-weight: var(--holzhof-font-weight-bold);
            font-family: var(--holzhof-font-family-roboto);
            letter-spacing: var(--holzhof-character-spacing-0);
            
            h3 {
                font-size: var(--holzhof-font-size-24);
                line-height: var(--holzhof-line-spacing-38);
                color: var(--holzhof-color-grey);
                text-align: left;
                opacity: 1;
            }

            .product-code {
                padding: 3px 20px 3px 20px;
                border-radius: 27px;
                border: 2px solid var(--holzhof-color-grey);
                height: 3vh;
                background-color: var(--holzhof-color-grey);
                color: var(--holzhof-color-white);
            }
        }
    }
}

.render-image {
    width: 100%;
    height: 65vh;
    border-radius: 10px;
    object-fit: contain !important;
}

.prod-images {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    justify-self: center;

    img {
        object-fit: contain;
        height: 15vh;
        width: 9vw;
        border-radius: 10px;
    }

    iframe {
        object-fit: cover;
        height: 15vh;
        width: 9vw;
        border-radius: 10px;
    }

    .bottone-sx {
        /*background-image: url("../svg/freccia-holzhof-grigio-chiaro.svg");*/
        background-repeat: no-repeat;
        background-position: right;
        background-color: var(--holzhof-color-dddddd);
        border: 0px;
        height: 2.2rem;
        width: 2.2rem;
        background-image: var(--freccia-holzhof);

        /*faccio in modo che in hover la freccia cambi colore*/
        -webkit-mask: var(--freccia-holzhof); /*per tutti i browser*/
        -webkit-mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask: var(--freccia-holzhof); /*per firefox*/
        mask-size: contain;
        mask-repeat: no-repeat;

        &:hover {
            background-color: var(--holzhof-color-green);
        }
    }

    .bottone-dx {
        background-repeat: no-repeat;
        background-position: right;
        transform: rotate(180deg);
        background-color: var(--holzhof-color-dddddd); /*colore che prenderà la freccia*/
        border: 0px;
        height: 2rem;
        width: 2rem;
        background-image: var(--freccia-holzhof);

        /*faccio in modo che in hover la freccia cambi colore*/
        -webkit-mask: var(--freccia-holzhof); /*per tutti i browser*/
        -webkit-mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask: var(--freccia-holzhof); /*per firefox*/
        mask-size: contain;
        mask-repeat: no-repeat;

        &:hover {
            background-color: var(--holzhof-color-green);
        }
    }
}

.due-bottoni {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    justify-self: flex-end;

    a {
        font-style: var(--holzhof-font-style-normal);
        font-weight: var(--holzhof-font-weight-bold);
        font-family: var(--holzhof-font-family-roboto);
        letter-spacing: var(--holzhof-character-spacing-0);
        font-size: var(--holzhof-font-size-16);
        line-height: var(--holzhof-line-spacing-19);
        color: var(--holzhof-color-white);
        background-color: var(--holzhof-color-grey);
        text-align: left;
        opacity: 1;
        transition: 0.3s;
        border-radius: 27px;
        padding: 5px 0vw 5px 0vw;
        width: 45%;
        height: 3rem;
        overflow: hidden;

        div {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;

            p {
                color: var(--holzhof-color-white);
                text-align: left !important;
            }

            img {
                width: 2.2rem;
                height: 2.2rem;
                align-self: center;
            }
        }
    }

    .bg-grey {
        background-color: var(--holzhof-color-grey);
        border: 1px solid var(--holzhof-color-grey);
    }

    .bg-green {
        background-color: var(--holzhof-color-green);
        border: 1px solid var(--holzhof-color-green);
    }
}


/*----------------------------------------------------------
                        VISTA MOBILE
----------------------------------------------------------*/
@media (max-width: 1500px){
    .split-content{
        flex-direction: column;
        margin-top: 1vh;
    
        .left{
            width: 100%;
            order: 1;
            margin-top: 7vh;
        }
    
        .right{
            width: 100%;
            order: 0;
        }
    }

    .prod-images{
        width: 65%;

        img{
            width: 37%;
        }
    }
}

@media (max-width: 999px){
    .prod-images{
        width: 80%;
    }
}

@media (max-width: 750px){
    .tabs{
        .buttons{
            width: 100%;

            .button-tab{
                width: 50%;
                padding: 0;
            }
        }

        .tab-content{
            border-top-right-radius: 0;
        }
    }

    .bottone-dx{
        height: 2rem !important;
        width: 2rem !important;
        padding-left: 0 !important;
    }

    .bottone-sx{
        height: 2rem !important;
        width: 2rem !important;
        padding-right: 0 !important;
    }

    .prod-images{
        width: 100%;
    }

    .due-bottoni{
        flex-direction: column;
        grid-row-gap: 1rem;

        a{
            width: 70%;
        }
    }
}