// Banner //
.banner-box .row .single-box .icon .responsive-img {
  height: 220px !important;
}

.banner-box {
  width: $large-width;
  max-width: calc(100% - 16px);
  margin: 0 auto;
  margin-top: 20px;
  color: $primary_text_color;
  position: relative;
  background-image: url($banner_background_image);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: $background_color;

  .button-container {
    margin-right: 5px;
    position: absolute;
    z-index: z("base") + 1;
    right: 0;
    top: 2px;

    .close,
    .toggle {
      float: right;
      padding: 5px;
      border: none;
      color: $tertiary;
      background: transparent;
      font-size: 1.5157em;
      cursor: pointer;

      svg {
        color: $tertiary;
      }
      .d-button-label {
        font-size: 1em;
        color: $header-background;
      }

      &:hover {
        svg {
          color: $primary;
        }
        .d-button-label {
          font-size: 1em;
          color: $header-background !important;
        }
      }

      .svg-icon.hidden {
        display: none;
      }
    }
  }

  h1,
  h2,
  h3 {
    text-align: center;
    color: $secondary_text_color;
  }

  a {
    color: $link_text_color;
  }

  .section-header {
    padding-bottom: 20px;

    .x-title {
      padding: 25px 65px;
      margin: 0;
    }

    .colored-line {
      margin: auto;
      width: 165px;
      height: 1px;
      background: $secondary_text_color;
    }

    .description p {
      margin: 0;
      padding: 15px;
      text-align: center;
    }
  }

  .row {
    display: flex;
    justify-content: center;

    .single-box {
      float: left;
      position: relative;
      min-height: 1px;
      padding: 0px 15px 30px;
      text-align: center;

      .icon {
        font-size: 70px;
        color: $secondary_text_color;

        .responsive-img {
          vertical-align: -0.125em;
          border-style: none;
          border-width: 1px;
          height: 220px;
        }
      }

      .banner-list {
        display: flex;
        justify-content: center;
        ul {
          text-align: left;
          margin: 0;
        }

        li {
          color: var(--primary);
        }
      }
    }
  }
}