
#sliderprodotto {
    overflow: hidden;
    position:relative;
}
#sliderprodotto .slidesprodotto {
    width: 135%;
    transform: translateX(-25%);
}

#sliderprodotto .slideprodotto {
    position:relative;
}
#sliderprodotto .carousel-cell {
    width: 50%;
}
#sliderprodotto .slideprodotto img {
    width: 100%;
}
#sliderprodotto .testi-slideprodotto {
    position: absolute;
    top: 40px;
    left: 40px;
    transform: translateX(0);
    text-align:right;
    transition: .6s linear;
}
#sliderprodotto .titolo-slideprodotto {
    font-weight: 700;
    font-size: 7rem;
    opacity: .3;
    transition: .6s linear;
}
#sliderprodotto .specifica-slideprodotto {
    color: var(--color-grey-dark);
    font-size: 2rem;
    transition: .6s linear;
    opacity: 0;
}


#sliderprodotto .valorespecifica-slideprodotto {
    display:flex;
    align-items: center;
    justify-content: flex-end;
    transition: .6s linear;
    opacity: 0;
}
#sliderprodotto .is-selected .testi-slideprodotto {
    left: calc(100% - 40px);
    transform: translateX(-100%);
}
#sliderprodotto .is-selected .titolo-slideprodotto,
#sliderprodotto .is-selected .valorespecifica-slideprodotto,
#sliderprodotto .is-selected .specifica-slideprodotto {
    opacity: 1;
}

#sliderprodotto .valorespecifica-slideprodotto > div:first-child {
    font-size: 3rem;
    text-transform: uppercase;
    line-height: 2.5rem;
    padding-right: 8px;
    margin-right: 8px;
    border-right:solid 1px var(--color-main-blu);
}

#sliderprodotto .valorespecifica-slideprodotto > div:last-child {
    font-weight:700;
    font-size:6rem;
}

#sliderprodotto .navigazione-sliderprodotto {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    position: absolute;
    top: calc(100% - 30px);
    left: calc(67% - 30px);
    transform: translate(-100%, -100%);
}

#sliderprodotto .arrows, #sliderprodotto .numbers {
    display: flex;
    align-items: center;
    cursor:pointer;
}

#sliderprodotto .dividerarrows {
    margin: 0 20px;
    height: 27px;
    width: 2px;
    background-color: var(--color-main-blu)
}
#sliderprodotto .number {
    font-size: 1.2rem;
    padding: 5px;
    font-weight: 700;
    color: var(--color-grey-dark);
}

#sliderprodotto .number.selezionato {
    color:var(--color-main-blu);
    cursor: text;
}
