chamilo-lms2/assets/css/scss/_announcement.scss

.announcement-edit{
  position: absolute;
  z-index: 3;
}
.carousel{
  .carousel-control-prev,
  .carousel-control-next{
    width: 3%;
  }
  .carousel-indicators{
    margin-bottom: 0;
    bottom: -35px;
    li{
      height: 8px;
    }
  }
  .carousel-item{
    img{
      padding-bottom: 1rem;
      padding-right: 1rem;
    }
    .announcement-text{
      color: #ffffff;
      text-align: left;
      padding-top: 12%;
      padding-left: 15%;
      @include portrait($breakpoint-sm, $breakpoint-md){
        padding-top: 0;
        padding-left: 0;
      }
      @include landscape($breakpoint-sm) {
        padding-top: 0;
        padding-left: 0;
        padding-bottom: 2rem;
      }
      h1{
        font-size: 40px;
        color: #ffffff;
        line-height: 45px;
        text-align: left;
        @include portrait($breakpoint-sm, $breakpoint-md){
          font-size: 28px;
          line-height: 32px;
        }
        @include landscape($breakpoint-sm) {
          font-size: 28px;
          line-height: 32px;
        }
      }
      h5{
        font-size: 20px;
        color: #ffda29;
        line-height: 30px;
        text-align: left;
      }
    }
  }
}
.announcement-image{

  .dotted-bg-block{
    height: 200px;
    top: auto;
    left: 130px;
    bottom: -30px;
    right: -30px;
    width: auto;
    position: absolute;
    z-index: 0;
    overflow: hidden;
    @include portrait($breakpoint-sm, $breakpoint-md){
      height: 80px;
    }
    @include landscape($breakpoint-sm) {
      height: 80px;
    }
    div{
      background: repeating-linear-gradient(90deg,#ffffff00,#ffffff00 7px,#00000000 7px,#e4e4e4 9px);
      transform: rotate(45deg);
      position: absolute;
      top: -2000px;
      left: -2000px;
      right: -2000px;
      bottom: -2000px;
    }
  }
}