#bootstrap-modal-image {
  .modal-dialog {
    width: 80%;
    max-width: 900px;

    .modal-content {
      -webkit-border-radius: 0px;
      -moz-border-radius: 0px;
      border-radius: 0px;

      .modal-header {
        border-bottom: none;
      }
      .modal-body {
        margin-left: 45px;
        margin-right: 45px;
      }
    }
  }

  @media (max-width: $screen-md) {
    .modal-dialog {
      width: 100%;
      margin: 0px;
      padding: 10px;
    }
  }
}

#owl-modal-image {
  padding-top: 40px;
  margin-top: -30px;

  .item {
    img {
      display: block;
      width: 100%;
      height: auto;
    }
  }

  .owl-controls {
    .owl-nav {
      div {
        position: absolute;
      }

      .owl-prev, .owl-next {
        background: none;

        .icon-angle-left, .icon-angle-right {
          color: $color-primary;
          font-size: 24px;
        }
      }

      .owl-prev {
        left: -45px;
        top: 45%;
      }

      .owl-next {
        right: -45px;
        top: 45%;
      }
    }

    .owl-dots {
      position: absolute;
      top: 0px;
      left: 10%;
      right: 10%;

      .owl-dot {
        span {
          background-color: $color-gray;
          width: 16px;
          height: 16px;
          -webkit-border-radius: 0px;
          -moz-border-radius: 0px;
          border-radius: 0px;
          margin-left: 3px;
          margin-right: 3px;
        }

        &.active {
          span {
            background-color: $color-gray-darker;
          }
        }
      }
    }
  }
}
