_carousel.scss 5.01 KB
.swiper-pagination-bullet {
  background: #fff !important;
  border: 0.125rem solid #2c2c2c !important;
  height: 0.625rem !important;
  width: 0.625rem !important;
  border-radius: 0% !important;
  background-color: #666666 !important;
  border: 0.0625rem solid  #666666 !important;
  opacity: 0.25 !important;
}
.swiper-pagination-bullet-active {
  opacity: 1 !important;
}

.swiper-pagination{
  bottom: -2.5rem !important;
}
//  carousel css
.carousel:not(.is-admin) {
  background-color: transparent !important;
  left: -5%;
  width: 110%;
  margin-top:24px;
  padding: 0rem 3.125rem;

  @media only screen and (max-width:67.063rem) {
    left: 0%;
    width: 100vw;
    padding: 0rem 0rem;
    overflow: scroll;
  }

  

}

.carousel-items {
  text-align: center;
  font-size: 1.125rem;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  //max-width: 75rem;
  margin: 0 auto;
  overflow: hidden;
  @media only screen and (max-width:67.063rem) {
    overflow: scroll;
  }

}
.carousel-content{
//padding: 0rem 3.125rem;
height: 260px;

}
.promo-image{
  width: 340px;
  height: 186px;
  overflow: hidden;
  padding: 0px 4px;

  @media only screen and (max-width:67.063rem) {
    min-height: 186px!important;
    max-height: 186px!important;
    max-width: 340px;
    min-width: 340px;

  }

 img{
  width: 100%;
 }
}
.promo-carousel{
  h2{
    font-size: 1.5rem;
    line-height: 1.875rem;
    text-align: left;
  }
  p{
    font-size: 1rem;
    line-height: 1.5rem;
    text-align: left;
  }
  .promo-text{
    margin-left: 0px;
    margin-top: 24px;
    text-align: left;
    font-size: 1rem;
    line-height: 1.5rem;
    text-align: left;
   
  }
  .understrap-read-more-link{
    font-weight: bold;
    text-transform: capitalize;
    text-decoration: none;
    
  }
  .understrap-read-more-link:hover{
    text-decoration:underline;
  }
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
  pointer-events: all !important;
}

.carousel-items.slick-initialized.slick-slider {
  margin-right: 0.9375rem; //for the scroll bar
}



.swiper-button-prev{
  background-color: #EE0000;
  width:2.1875rem !important;
  height:2.1875rem  !important;
  border: 0rem solid  #EE0000;
  border-radius: 1.25rem;
  display: none;
  left: -15px !important; 
  top:calc(50% - 1rem)  !important;
  @media only screen and (max-width:67.063rem) {
    display: none !important;
  }
  &:after{
    content:"" !important;
      width: 0.6875rem;
      height: 1.125rem;
      background-repeat: no-repeat;
      background-size: contain;
      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="9.095" height="15" viewBox="0 0 9.095 15"><path id="Path_1291" data-name="Path 1291" d="M7.515,5.543c.52-.526,1.03-1.048,1.546-1.564Q10.918,2.123,12.779.272a.834.834,0,0,1,1.232,0c.236.242.477.479.716.718a.817.817,0,0,1,0,1.222L11.379,5.557Q9.758,7.18,8.138,8.8a.9.9,0,0,1-.606.289.864.864,0,0,1-.667-.288Q5.614,7.551,4.363,6.3L.956,2.889c-.232-.232-.465-.463-.7-.7A.812.812,0,0,1,.269.993l.71-.71a.833.833,0,0,1,1.25,0l3.016,3L7.429,5.462Z" transform="translate(9.095 0) rotate(90)" fill="%23fff"/></svg>');
      display: inline-block;
      position: absolute;
      top: 0.5rem;
      left: 11px;
      @media only screen and (max-width:67.063rem) {
        display: none;
      }
  }

}

.swiper-button-next{
  background-color: #EE0000;

  right: 0rem  !important;
  top:calc(50% - 1rem)  !important;

  width:2.1875rem !important;
  height:2.1875rem  !important;
  border: 0rem solid  #EE0000;
  border-radius: 1.25rem;
  display: none;
  @media only screen and (max-width:67.063rem) {
    display: none !important;
  }
  &:after{
      content:"" !important;
      width: 0.6875rem;
      height: 1.125rem;
      background-repeat: no-repeat;
      background-size: contain;
      transform: rotate(180deg);
      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="9.095" height="15" viewBox="0 0 9.095 15"><path id="Path_1291" data-name="Path 1291" d="M7.515,5.543c.52-.526,1.03-1.048,1.546-1.564Q10.918,2.123,12.779.272a.834.834,0,0,1,1.232,0c.236.242.477.479.716.718a.817.817,0,0,1,0,1.222L11.379,5.557Q9.758,7.18,8.138,8.8a.9.9,0,0,1-.606.289.864.864,0,0,1-.667-.288Q5.614,7.551,4.363,6.3L.956,2.889c-.232-.232-.465-.463-.7-.7A.812.812,0,0,1,.269.993l.71-.71a.833.833,0,0,1,1.25,0l3.016,3L7.429,5.462Z" transform="translate(9.095 0) rotate(90)" fill="%23fff"/></svg>');
      display: inline-block;
      position: absolute;
      top: 0.5rem;
      left: 0.8125rem;
      @media only screen and (max-width:67.063rem) {
        display: none;
      }
  }

}

.swiper-button-next:hover,
.swiper-button-prev:hover{
 background-color:  #669999;
}


.swiper-slide{
  width: auto !important;
  flex-shrink: 0;
  display: block;
  height: 100%;
  max-height: 100%;
  @media only screen and (max-width:67.063rem) {
    margin-right: 24px;
  }

}

.swiper-wrapper{
  max-height: 100%;
  height: 100%;
  display: flex;

  @media only screen and (max-width:67.063rem) {
    width: auto;
  }

  }