* {
  touch-action: manipulation;
}

.image-carousel-container {
  --fnt-bld: ITC Avant Garde Gothic W05 Bol, helvetica, arial, sans-serif;
  --grey-f1: #F1F1F1;
  --grey-9c: #9C9C9C;


  .image-gallery-inline {
    position: static;
    max-width: 727px;

    .owl-nav {
      display: block;
      position: absolute;
      bottom: 10px;
      right: 7.5px;
      button {
        &.owl-prev,
        &.owl-next {
          width: 50px;
          height: 50px;
          margin: 0 7.5px;
          border-radius: 4px;
          position: static;
          border: solid 2px black;
          background-color: black;
          background-image: none;
          top: auto;
          transform: none;
          transition: all 0.35s ease;
          svg {
            path {
              stroke: white;
            }
          }
          &:hover {
            background-color: white;
            svg {
              path {
                stroke: black;
              }
            }
          }
        }
      }
    }
  }

  .image-gallery-modal {
    .modal-dialog {
      margin: 0 auto !important;
      @media (min-width:768px) {
        margin: 1.75rem auto !important;
      }
      @media (min-width:992px) {
        margin: 1.75rem auto !important;
        max-width: 960px;
      }
      @media (min-width:1200px) {
        margin: 1.75rem auto !important;
        max-width: 1200px;
      }
      &.modal-lg {
        width: 90vw;
        max-width: 1200px;
        overflow: visible;
      }

      .modal-content {
        background-color: transparent;
        border-radius: 0;
        border: 0;
        .modal-header {
          position: absolute;
          right: 0;
          top: 0;
          width: 0;
          height: 0;
          overflow: visible;
          padding: 0;
          border: 0;
          margin: 0;
          .close {
            top: -25px;
            right: 0;
            @media (min-width:768px) {
              right: -16px;
            }
            width: 30px;
            height: 30px;
            cursor: pointer;
            padding: 0;
            border: 0;
            span {
              display: none;
              visibility: hidden;
            }
            &:before,
            &:after {
              background-color: white;
              transition: all 0.3s ease 0s;
              right: -16px;
              width: 100%;
              height: 2px;
              position: absolute;
              top: 50%;
              content: "";
            }
            &:before {
              transform: translate(-50%, -50%) rotate(45deg);
            }
            &:after {
              transform: translate(-50%, -50%) rotate(-45deg);
            }
            &:hover {
              opacity: 1;
              &:before {
                transform: translate(-50%, -50%) rotate(-45deg);
                transition: all 0.3s ease 0s;
              }
              &:after {
                transform: translate(-50%, -50%) rotate(45deg);
                transition: all 0.3s ease 0s;
              }
            }
          }
        }
        .modal-body {
          padding: 0;
          .a-single-image {
            max-height: 80vh;
            width: auto;
            margin: 0 auto;
          }
          .m-image {
            position: relative;
            width: 100%;
            height: 100vh;
            @media (min-width:768px) {
              height: 90vh;
            }
            @media (min-width:992px) {
              height: auto;
            }
            background-size: cover;
            background-position: center;
          }
          .owl-carousel {
            .owl-item {
              height: 100vh;
              @media (min-width:768px) {
                height: 90vh;
              }
              @media (min-width:992px) {
                height: 675px;
              }
              .m-image {
                position: relative;
                width: 100%;
                height: 100%;
                background-size: cover;
                background-position: center;
              }
            }
            .owl-nav {
              display: block;
              position: absolute;
              bottom: 10px;
              right: 7.5px;
              button {
                &.owl-prev,
                &.owl-next {
                  width: 50px;
                  height: 50px;
                  margin: 0 7.5px;
                  border-radius: 4px;
                  position: static;
                  border: solid 2px black;
                  background-color: black;
                  background-image: none;
                  top: auto;
                  transform: none;
                  transition: all 0.35s ease;
                  svg {
                    path {
                      stroke: white;
                    }
                  }
                  &:hover {
                    background-color: white;
                    svg {
                      path {
                        stroke: black;
                      }
                    }
                  }
                }
              }
            }
          }
          .m-buttons {
            position: absolute;
            bottom: 10px;
            left: 7.5px;
            button {
              min-width: 50px;
              height: 50px;
              margin: 0 7.5px;
              border-radius: 4px;
              border: solid 2px black;
              background-color: black;
              color: white;
              background-image: none;
              transition: all 0.35s ease;
              &:hover {
                background-color: white;
                color: black;
              }
              &[disabled] {
                cursor: not-allowed;
                background-color: var(--grey-f1);
                border-color: var(--grey-9c);
                color: var(--grey-9c);
              }
              &:not(.reset) {
                font-family: var(--fnt-bld), sans-serif;
              }
            }
          }
          .iframe-wrap {
            position: relative;
            overflow: hidden;
            padding-top: 56.25%;
            .a-iframe {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              border: 0;
            }
          }
        }
      }
    }
    &._carousel {
      .modal-dialog {
        &.modal-dialog-centered {
          min-height: 100%;
          align-items: stretch;
          max-width: inherit;
          @media (orientation: portrait) and (max-width: 768px) {
            margin: 0 10px !important;
            width: 100%;
            align-items: center;
          }
          &:before {
            display: none;
          }
          .modal-content {
            @media (orientation: portrait) and (max-width: 768px) {
              min-height: inherit;
              display: inline-block;
              vertical-align: middle;
              margin: 0 !important;
              max-width: calc(100% - 20px);
            }
            .a-close {
              @media (orientation: portrait) and (max-width: 768px) {
                top: -60px;
                right: 0;
              }
            }
            .modal-body {
              @media (orientation: portrait) and (max-width: 768px) {
                display: block;
              }
              .owl-carousel {
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                @media (orientation: portrait) and (max-width: 768px) {
                  position: static;
                }
                .owl-stage-outer {
                  height: 100%;
                }
                .owl-item {
                  height: auto;
                  .m-image {
                    img {
                      position: absolute;
                      top: 0;
                      left: 0;
                      object-fit: cover;
                      @media (orientation: portrait) and (max-width: 768px) {
                        position: static;
                      }
                    }
                  }
                }
                .owl-nav {
                  @media (orientation: portrait) and (max-width: 768px) {
                    right: -7.5px;
                    bottom: -60px;
                  }
                }
              }
            }
          }
        }
        .modal-content {
          .a-close {
            position: absolute;
            z-index: 2;
            top: 15px;
            right: 15px;
            height: 50px;
            width: 50px;
            padding: 0;
            border: solid 2px black;
            background-color: black;
            transition: all 0.35s ease;
            svg {
              path {
                fill: white;
              }
            }
            &:hover {
              background-color: white;
              svg {
                path {
                  fill: black;
                }
              }
            }
          }
        }
      }
    }
  }

  @media (min-width:768px) {
    .o-modal {
      .m-modal-panel {
        font-size: 18px;
      }
    }

    .o-modal-new {
      .m-modal-dialog {
        max-width: 60% !important;
        width: 60%;
        .modal-content {
          padding: 0 30px;
        }
      }
    }

    .image-gallery-inline {
      position: static;
      max-width: 455px;

      .owl-nav {
        bottom: -30px;
        right: -7.5px;
      }
    }
  }

  @media (orientation: portrait) and (min-width:768px) {
    .image-gallery-modal {
      &._carousel {
        .modal-dialog {
          &.modal-dialog-centered {
            max-width: 650px;
            align-items: center;
            margin: 0 auto !important;
            .modal-content {
              .modal-body {
                .owl-carousel {
                  position: static;
                  .owl-item {
                    .m-image {
                      img {
                        position: static;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  @media (orientation: landscape) and (max-width:991px) {
    .image-gallery-modal {
      &._carousel {
        .modal-dialog {
          &.modal-dialog-centered {
            margin-top: 0 !important;
            margin-bottom: 0 !important;
          }
        }
      }
    }
  }

  @media (min-width:992px) {
    .image-gallery-modal {
      &._carousel {
        .modal-dialog {
          &.modal-dialog-centered {
            max-width: 960px;
            margin: 0 auto !important;
            align-items: center;
            .modal-content {
              .modal-body {
                .owl-carousel {
                  position: static;
                  .owl-item {
                    .m-image {
                      img {
                        position: static;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

    .image-gallery-inline {
      max-width: 727px;
      .owl-nav {
        right: -6px;
        bottom: -10px;
      }
    }
  }

  @media (min-width:1200px) {
    .image-gallery-modal {
      &._carousel {
        .modal-dialog {
          &.modal-dialog-centered {
            max-width: 1200px;
          }
        }
      }
    }
  }

  @media (min-width:1400px) {
    .image-gallery-modal {
      &._carousel {
        .modal-dialog {
          &.modal-dialog-centered {
            max-width: 1400px;
          }
        }
      }
    }
  }

  @media (max-width:575px) {
    .image-gallery-inline {
      .owl-nav {
        bottom: 0;
        right: -3px;

        button {
          &.owl-prev,
          &.owl-next {
            width: 40px;
            height: 40px;
            margin: 0;
            position: relative;
            svg {
              padding: 0;
              position: absolute;
              top: 8px;
              left: 12px;
            }
          }

          &.owl-prev {
            margin: 0 10px;
          }

          &.owl-next {
            svg {
              left: 13px;
            }
          }

        }
      }
    }
  }
}