paesaggistica/liferay-plugins-sdk-6.2/themes/portos-public-theme/docroot/css/component/carousel.scss

#myCarousel .carousel-caption {
  left: 0;
  right: 0;
  bottom: 0;
  text-align: left;
  padding: 10px;
  background: rgba(0, 0, 0, 0.6);
  text-shadow: none;

  .title-caption {
    font-size: em(18px);
    font-family: $second-font;
  }

  .description-caption, .date-category {
    font-family: $main-font;
  }
  .description-caption {
    font-size: em(16px);
  }

  .date-category {
    .category-caption {
      text-transform: uppercase;
      font-weight: bold;
      font-family: $second-font;
    }
  }
}

.load .list-group {
  opacity: 1!important;
}

#myCarousel .list-group {
  opacity: 0;
  position: absolute;
  top: 0;
  right: 0;
  padding-right: 0px;
  transition: opacity $speed;


  .list-group-item {
    background-color: $header-menu;
    transition: background-color $speed;
    position: relative;
    border-top: 1px solid #5F5F5F;
    border-bottom: 1px solid #5F5F5F;
    border-left: none;
    border-right: none;
    .info-item {
      position: relative;
      top: 50%;
      @include transform(translate3D(0, -50%, 0));

      h4, p {
        color: $w;
        transition: color $speed;
      }
      h4 {
        font-family: $second-font;
        text-transform: uppercase;
        font-size: em(16px);
        margin-top: 0px;
      }
      p {
        font-family: $main-font;
        font-size: em(14px);
        margin-bottom: 0px;
      }

    }

    .page_link {
      color: $w;
    }
    .btn-carousel {
      position: absolute;
      right: 0;
      top: 50%;
      @include transform(translate3D(0, -50%, 0));

      .btn-line {
        background-color: $w;

        .btn-arrow-up, .btn-arrow-down {
          background-color: $w;
        }
      }
    }
  }
  .list-group-item.active {
    h4, p {
      color: $w;
    }

    .page_link {
      color: $w;
    }
    .btn-line {
      background-color: $w;

      .btn-arrow-up, .btn-arrow-down {
        background-color: $w;
      }
    }
  }
}

#myCarousel .list-group-item {
  border-radius: 0px;
  cursor: pointer;
}

#myCarousel .list-group .active {
  background-color: rgba( 52, 52, 52, 0.7 );
}


.carousel-inner {
  opacity: 0;
  height: 60vh;
  min-height: 170px;
  transition: opacity $speed;

  .load & {
    opacity: 1;
  }

  @media (max-width: 991px) {
    height: 40vh;
  }

  @media (max-width: 991px) {
    height: 30vh;
  }

  .item {
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    background-position: 50%;
    height: 100%;

    img {
      opacity: 0;
      visibility: hidden;
      height: 100% !IMPORTANT;
      width: auto;
    }
  }
}

@media (min-width: 992px) {
  #myCarousel {
    padding-right: 33.3333%;
  }
  #myCarousel .carousel-controls {
    display: none;
  }
}

@media (max-width: 991px) {
  .carousel-caption p,
  #myCarousel .list-group {
    display: none;
  }
}

.carousel-controls {
  span {
    top: 50%;
    position: absolute;
    transform: translateY(-50%);
  }
}

#myCarousel {
  .loading {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    @include display-flex();
    @include align-items(center);
    @include justify-content(center);
    opacity: 1;
    transition: opacity $speed;

  }
}
.load .loading {
    opacity: 0!important;
    visibility: hidden;
}