/* css slick */
.slick-arrow:hover::before{
    color:#0066cc;
}
.slick-prev::before{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' width='16' height='16' fill='rgb(0, 102, 204)' %3E%3Cpath d='m15.5 0.932-4.3 4.38 14.5 14.6-14.5 14.5 4.3 4.4 14.6-14.6 4.4-4.3-4.4-4.4-14.6-14.6z'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-size: 20px 20px !important;
    position: absolute;
    content: '';
    height: 30px;
    width: 30px;
    top: -4px;
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
    transform: rotate(180deg);
    left: -4px;
}
.slick-next::before{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' width='16' height='16' fill='rgb(0, 102, 204)' %3E%3Cpath d='m15.5 0.932-4.3 4.38 14.5 14.6-14.5 14.5 4.3 4.4 14.6-14.6 4.4-4.3-4.4-4.4-14.6-14.6z'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-size: 20px 20px !important;
    position: absolute;
    content: '';
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
    height: 30px;
    width: 30px;
    top: 6px;
    left: 6px;
}
button.slick-prev.slick-arrow,
button.slick-next.slick-arrow {
    background-color: var(--primary-blue);
    border-radius: 5px;
}
/* FIX: removed to keep 100% length if there is a single card in the slide in hp
.unslick .slick__slide {
    width: 440px;
}*/
@media(min-width: 1366px) {
    .slick-prev {
        left: -30px !important;
    }
    #slick-views-blocchi-della-homepage-block-multimedia-3 .slick-prev {
        left: -37px !important
    }
    .slick-next {
        right: -30px !important;
    }
}
.slick-arrow {
    height: 33px;
    width: 33px;
}
.slick-dots li {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    padding: 0;
    margin:unset;
    cursor: pointer;
}
.slick-dots li.slick-active button:before {
    opacity: 1;
    color: var(--primary-blue);
}
.slick-dots li button::before {
    font-size: 12px;
    font-size: 0.6rem;
}
.slick-dots li button:before:hover{
    color: var(--primary-blue) !important;
}
.slick-dots li button:before {
    color: var(--primary-blue) !important;
}
.slick-prev:focus{
    border-color: #f90;
    box-shadow: 0 0 0 2px #f90;
    outline: none;
}
.slick-next:focus{
    border-color: #f90;
    box-shadow: 0 0 0 2px #f90;
    outline: none;
}
.slick-dots {
    position: absolute;
    bottom: -29px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}
[dir='rtl'] .slick-prev{
    right: unset;
}
[dir='rtl'] .slick-arrow::before{
    color: transparent!important;
}
[dir='rtl'] body{
    overflow-x: hidden;
}

.slick--skin--boxed > .slick__slider > .slick-list{
    margin: 0 !important;
}


.media-toggle {
  width: 38px;
  height: 38px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: none;
  background-color: transparent;
  cursor: pointer;
  position: absolute;
  z-index: 1;
  right: 14px;
  top: 24px;
}
.media-toggle.is-play {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M10 6 L38 24 L10 42 Z' fill='%23003466' stroke='%23003466' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.media-toggle.is-pause {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect x='8' y='6' width='10' height='36' rx='4' fill='%23003466'/%3E%3Crect x='30' y='6' width='10' height='36' rx='4' fill='%23003466'/%3E%3C/svg%3E");
}

@media(min-width: 1366px) {
  .slick__arrow {
    left: 42px;
    width: calc(100% - 84px);
  }
}
@media(max-width: 1366px) {
  .slick__arrow {
    left: 24px;
    width: calc(100% - 48px);
  }
}
@media(min-width: 992px) {
  .slick-arrow {
    background-color: transparent !important;
  }
  .slick__arrow .slick-prev::before,
  .slick__arrow .slick-next::before {
    filter: brightness(0) !important;
  }
}