/* function to convert the calc function in to rem based
$first- should be in % */
/** Slick Carousel Starts **/
/** Slick Carousel Ends **/
/* override default breakpoints */
.plp-banner-container {
  overflow: hidden;
  margin-right: 0;
  color: #000; }
  @media (min-width: 576px) {
    .plp-banner-container {
      margin-right: -0.5rem; } }
  .plp-banner-container .title-row {
    background-color: #d8d8d8;
    padding-right: 0; }
  .plp-banner-container .title-image-container {
    max-height: 3.125rem;
    overflow: hidden; }
    @media (min-width: 768px) {
      .plp-banner-container .title-image-container {
        max-height: 3.75rem; } }
    @media (min-width: 1200px) {
      .plp-banner-container .title-image-container {
        max-height: 6.5625rem; } }
    .plp-banner-container .title-image-container img {
      -o-object-fit: cover;
         object-fit: cover;
      font-family: "object-fit: cover;";
      height: 100%; }
  .plp-banner-container .title-text-container h3 {
    margin-bottom: 0.125rem;
    font-size: 1rem; }
    @media (min-width: 768px) {
      .plp-banner-container .title-text-container h3 {
        font-size: 1.25rem;
        line-height: 1.5625rem; } }
    @media (min-width: 1200px) {
      .plp-banner-container .title-text-container h3 {
        font-size: 1.875rem;
        line-height: 2.375rem;
        margin-bottom: 0.25rem; } }
  .plp-banner-container .title-text-container .description {
    font-weight: 300;
    font-size: 0.5rem;
    line-height: 1.5;
    margin-bottom: 0.5rem; }
    @media (min-width: 768px) {
      .plp-banner-container .title-text-container .description {
        font-size: 0.75rem; } }
    @media (min-width: 1200px) {
      .plp-banner-container .title-text-container .description {
        font-size: 1rem;
        margin-bottom: 1.375rem; } }
  .plp-banner-container .plp-banner-item {
    height: 16.25rem;
    -webkit-box-flex: 1;
        -ms-flex: auto;
            flex: auto;
    overflow: hidden; }
    @media (min-width: 768px) {
      .plp-banner-container .plp-banner-item {
        height: 20.9375rem; } }
    @media (min-width: 1200px) {
      .plp-banner-container .plp-banner-item {
        height: 21.875rem; } }
    .plp-banner-container .plp-banner-item.light-theme {
      color: #000; }
      .plp-banner-container .plp-banner-item.light-theme .text-item-link {
        color: #000; }
      .plp-banner-container .plp-banner-item.light-theme svg {
        fill: #000; }
    .plp-banner-container .plp-banner-item.dark-theme {
      color: #fff; }
      .plp-banner-container .plp-banner-item.dark-theme .text-item-link {
        color: #fff; }
      .plp-banner-container .plp-banner-item.dark-theme svg {
        fill: #fff; }
    .plp-banner-container .plp-banner-item svg {
      margin-left: 0.25rem; }
    .plp-banner-container .plp-banner-item .overlay {
      z-index: auto; }
    .plp-banner-container .plp-banner-item .image-item-container img {
      -o-object-fit: cover;
         object-fit: cover;
      font-family: "object-fit: cover;";
      height: 100%; }
    .plp-banner-container .plp-banner-item .text-item-container {
      position: absolute;
      bottom: 1rem;
      padding-left: 1.25rem;
      padding-right: 0.3125rem;
      width: 100%;
      font-family: "Roboto-Regular", sans-serif; }
      @media (min-width: 768px) {
        .plp-banner-container .plp-banner-item .text-item-container {
          bottom: 1.625rem;
          padding-left: 2.375rem;
          padding-right: 2.375rem; } }
      @media (min-width: 1200px) {
        .plp-banner-container .plp-banner-item .text-item-container {
          bottom: 3.125rem;
          padding-left: 3.75rem;
          padding-right: 3.75rem; } }
      .plp-banner-container .plp-banner-item .text-item-container h4 {
        font-size: 1.125rem;
        line-height: 1.4375rem;
        margin-bottom: 0.25rem; }
        @media (min-width: 768px) {
          .plp-banner-container .plp-banner-item .text-item-container h4 {
            font-size: 1.25rem;
            line-height: 1.5625rem; } }
        @media (min-width: 1200px) {
          .plp-banner-container .plp-banner-item .text-item-container h4 {
            font-size: 1.5rem;
            line-height: 1.875rem; } }
      .plp-banner-container .plp-banner-item .text-item-container .description {
        font-size: 0.75rem;
        line-height: normal; }
        @media (min-width: 768px) {
          .plp-banner-container .plp-banner-item .text-item-container .description {
            line-height: 1.5; } }
        @media (min-width: 1200px) {
          .plp-banner-container .plp-banner-item .text-item-container .description {
            font-size: 0.875rem;
            line-height: 1.25rem; } }
      .plp-banner-container .plp-banner-item .text-item-container .expanded-description {
        border-top: 1px solid;
        font-size: 0.625rem;
        line-height: 0.9375rem;
        padding-top: 0.4375rem;
        margin-top: 0.25rem; }
        @media (min-width: 1200px) {
          .plp-banner-container .plp-banner-item .text-item-container .expanded-description {
            font-size: 0.75rem;
            line-height: 1.125rem;
            padding-top: 0.8125rem; } }
        .plp-banner-container .plp-banner-item .text-item-container .expanded-description p {
          margin-bottom: 0.25rem; }
          @media (min-width: 768px) {
            .plp-banner-container .plp-banner-item .text-item-container .expanded-description p {
              margin-bottom: 0.375rem; } }
      .plp-banner-container .plp-banner-item .text-item-container .text-item-link {
        cursor: pointer;
        margin-bottom: 0.25rem;
        margin-top: 0.5rem;
        background: transparent;
        border: none; }
        .plp-banner-container .plp-banner-item .text-item-container .text-item-link:focus {
          outline: none; }
        .plp-banner-container .plp-banner-item .text-item-container .text-item-link:hover, .plp-banner-container .plp-banner-item .text-item-container .text-item-link:focus {
          text-decoration: underline; }
      .plp-banner-container .plp-banner-item .text-item-container .text-item-btn {
        text-align: left;
        margin-top: 0.5rem; }
        @media (min-width: 1200px) {
          .plp-banner-container .plp-banner-item .text-item-container .text-item-btn {
            text-align: right; } }
  .plp-banner-container .plp-banner-carousel .plp-carousel-tile {
    max-width: 100%; }
    .plp-banner-container .plp-banner-carousel .plp-carousel-tile:focus {
      border: none; }
      @media (min-width: 576px) {
        .plp-banner-container .plp-banner-carousel .plp-carousel-tile:focus {
          border: 0.125rem solid #0e78ad; } }
  .plp-banner-container .plp-banner-carousel .slick-dots {
    position: unset;
    display: list-item;
    -webkit-transform: none;
            transform: none;
    padding: 0.6875rem 0;
    background-image: none; }
    .plp-banner-container .plp-banner-carousel .slick-dots li {
      width: 0.75rem;
      height: 0.75rem;
      margin-right: 1rem; }
      .plp-banner-container .plp-banner-carousel .slick-dots li button {
        width: 0.75rem;
        height: 0.75rem;
        -webkit-box-shadow: unset;
                box-shadow: unset;
        border: 0.125rem solid #000;
        background-color: #fff; }
        .plp-banner-container .plp-banner-carousel .slick-dots li button:focus {
          background-color: #000;
          outline: none;
          border: 0; }
          .plp-banner-container .plp-banner-carousel .slick-dots li button:focus::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            border-radius: 1.5rem;
            -webkit-box-shadow: 0 0 0.3125rem 0.0625rem #0a557a;
                    box-shadow: 0 0 0.3125rem 0.0625rem #0a557a; }
      .plp-banner-container .plp-banner-carousel .slick-dots li.slick-active button {
        background-color: #000; }