.fsModal {
  .modal {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      overflow: hidden;
    }

    .modal-dialog {
      position: relative;
      margin: 0;
      width: 100%;
      max-width: 100%;
      @include media-breakpoint-up(xl) {
        height: 1225px;
      }
      @include media-breakpoint-down(lg) {
        height: 1370px;
      }
      @include media-breakpoint-down(md) {
        height: 100%;
      }
      padding: 0;
    }

    .modal-content {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      border-radius: 0;
      box-shadow: none;
      background-color: #221f20;
    }

    .modal-header {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      height: 50px;
      padding: 10px;
      background: #6598d9;
      border: 0;
    }

    .modal-container {
      @include media-breakpoint-up(xl) {
        top: 60%;
      }
      @include media-breakpoint-down(lg) {
        top: 575px;
      }
      @include media-breakpoint-down(md) {
        top: 435px;
        width: 50%;
      }
      @include media-breakpoint-down(sm) {
        width: 92%;
        top: 360px;
      }
    }

    .before-and-after-modal-container {
      width: 50%;
      top: 10%;
    }

    .modal-title-wrapper {
      width: 100%;
    }

    .modal-title {
      font-weight: 300;
      color: #fff;
      line-height: 30px;
      font-size: 0.75em;
      @include media-breakpoint-up(md) {
        font-size: 1em;
      }
      @include media-breakpoint-down(sm) {
        font-size: 0.75em;
      }
    }

    .modal-divider {
      border-top: 1px solid $white;
    }

    .modal-button {
      border: 1px solid $darker-primary;
      padding: 0.25rem 0.75rem;
      color: $white;
      font-size: 0.75rem;
      letter-spacing: 1px;
      @include media-breakpoint-up(md) {
        padding: 0.25rem 0.75rem;
      }
      @include media-breakpoint-down(sm) {
        padding: 0.25rem 0.95rem;
      background-color: $darker-primary;
      }
          &:hover {
              background-color: $darker-primary;
              color: $white;
              text-decoration: none;
          }
      }

    #closemodal {
      cursor: pointer;
    }

    .modal-body {
      position: absolute;
      @include media-breakpoint-up(xl) {
        top: 50px;
      }
      @include media-breakpoint-up(md) {
        top: 30px;
      }
      @include media-breakpoint-down(sm) {
        top: 0;
      }
      bottom: 60px;
      width: 100%;
      font-weight: 300;
      overflow: auto;
      justify-content: center;
      text-align: center;
      display: flex;
      p {
          color: $white;
      }
      .carousel {
        border: 2px solid $white;
      }
    }

    .modal-gallery {
      @include media-breakpoint-up(xl) {
        top: 66.5%;
      }
      @include media-breakpoint-down(lg) {
        top: 51%;
      }
      @include media-breakpoint-down(md) {
        top: 56%;
      }
      @include media-breakpoint-down(sm) {
        top: 490px;
        padding: 0 2rem;
      }
    }

    .before-and-after-gallery {

      @include media-breakpoint-up(md) {
        top: 10%;
        .slick-track {
          width: 378000px !important;
        }
        .before-and-after-slide {
          width: 1080px !important;
          height: 745px !important;
        }
        img {
            min-width: 500px;
            min-height: 500px;
        }
      }

      @include media-breakpoint-down(sm) {
        top: 2%;
        .slick-prev {
          left: 10px;
          top: 54.5%;
        }
        .slick-next {
          right: 10px;
          top: 54.5%;
        }
        .slick-track {
          width: 109550px !important;
        }
        .before-and-after-slide {
          width: 313px !important;
        }
        img {
            min-width: 141.5px;
            min-height: 141.5px;
        }
      }
    }

    // Gallery
    .project-gallery-wrapper {

      .light-image-col {
        border: none;
      }

      .light-image-border {
        @include media-breakpoint-up(md) {
          border-top: 2px solid $white;
          border-bottom: 2px solid $white;
          // First three images per row
          &:not(:nth-child(4n)) {
            border-left: 2px solid $white;
          }
          // Fourth image
          &:nth-child(4n) {
            border-left: 2px solid $white;
          }
          &:last-child {
            border-right: 2px solid $white;
          }
        }

        @include media-breakpoint-down(sm) {
          border: 2px solid $white;

        }
      }

      // Expand Icon
      // .light-link {
      //   &:after {
      //     content: ' ';
      //     background-image: url(/images/icons/png/icon-expand.png);
      //     background-size: contain;
      //     background-repeat: no-repeat;
      //     height: 20px;
      //     width: 20px;
      //     top: 0.5rem;
      //     right: 0.5rem;
      //     z-index: 1 ;
      //     display: inline-block;
      //     position: absolute;
      //   }
      // }
    }

    .modal-footer {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      height: 60px;
      padding: 10px;
      background: #f1f3f5;
    }

    .btn {
      height: 40px;
      border-radius: 0;

      // focus
      &:focus,
      &:active,
      &:active:focus {
        box-shadow: none;
        outline: none;
      }
    }

    .btn-modal {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -20px;
      margin-left: -100px;
      width: 200px;
    }

    .btn-primary,
    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active {
      font-weight: 300;
      font-size: 1.6rem;
      color: #fff;
      color: lighten(#484b5b, 20%);
      color: #fff;
      text-align: center;
      background: #60cc69;
      border: 1px solid #36a940;
      border-bottom: 3px solid #36a940;
      box-shadow: 0 2px 4px rgba(0,0,0,0.15);

      // active
      &:active {
        border-bottom: 1px solid #36a940;
      }
    }

    .btn-default,
    .btn-default:hover,
    .btn-default:focus,
    .btn-default:active {
      font-weight: 300;
      font-size: 1.6rem;
      color: #fff;
      text-align: center;
      background: darken(#dcdfe4, 10%);
      border: 1px solid darken(#dcdfe4, 20%);
      border-bottom: 3px solid darken(#dcdfe4, 20%);

      // active
      &:active {
        border-bottom: 1px solid darken(#dcdfe4, 20%);
      }
    }

    .btn-secondary,
    .btn-secondary:hover,
    .btn-secondary:focus,
    .btn-secondary:active {
      color: #221f20;
      background: transparent;
      border: 0;
    }

    h1,
    h2,
    h3 {
      color: $white;
      line-height: 1.5;

      // first
      &:first-child {
        margin-top: 0;
      }
    }

    p {
      font-size: 1.4em;
      line-height: 1.5;
      color: lighten(#5f6377, 20%);

      // last
      &:last-child {
        margin-bottom: 0;
      }
    }

    ::-webkit-scrollbar {
      -webkit-appearance: none;
      width: 10px;
      background: $white;
      border-left: 1px solid darken($white, 10%);
    }

    ::-webkit-scrollbar-thumb {
      background: $darker-primary;
    }
  }