.bep-modal {
position: fixed;
inset: 0;
z-index: 2147483000;
display: none;
align-items: center;
justify-content: center;
padding: 24px;
}

.bep-modal.is-open {
display: flex;
}

.bep-modal__overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.62);
cursor: pointer;
}

.bep-modal__dialog {
position: relative;
z-index: 1;
width: min(1100px, 100%);
max-height: calc(100vh - 48px);
overflow: auto;
padding: 28px;
background: #fff;
box-shadow: 0 12px 50px rgba(0, 0, 0, 0.28);
outline: none;
}

.bep-modal__close {
position: absolute;
top: 8px;
right: 8px;
z-index: 20;
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
border: 1px solid #777;
background: #fff;
color: #111;
font-family: Arial, sans-serif;
font-size: 27px;
font-weight: 400;
line-height: 1;
cursor: pointer;
}

.bep-modal__close:hover,
.bep-modal__close:focus-visible {
border-color: #111;
background: #111;
color: #fff;
}

/*

* Swiper
  */
  .bep-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #fff;

  --swiper-pagination-color: #111;
  --swiper-pagination-bullet-inactive-color: #fff;
  --swiper-pagination-bullet-inactive-opacity: 1;
  --swiper-pagination-bullet-size: 11px;
  --swiper-pagination-bullet-horizontal-gap: 5px;
  }

.bep-slider .swiper-wrapper {
align-items: center;
}

.bep-slider__slide {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: auto;
margin: 0;
background: #fff;
}

.bep-slider__image {
display: block;
width: 100%;
height: auto;
max-height: calc(100vh - 140px);
object-fit: contain;
background: #fff;
user-select: none;
-webkit-user-drag: none;
}

.bep-slider__pagination {
position: relative !important;
inset: auto !important;
bottom: auto !important;
display: flex;
align-items: center;
justify-content: center;
min-height: 18px;
margin-top: 16px;
}

.bep-slider .swiper-pagination-bullet {
width: 11px;
height: 11px;
margin: 0 5px !important;
border: 1px solid #111;
background: #fff;
opacity: 1;
}

.bep-slider .swiper-pagination-bullet-active {
background: #111;
}

body.bep-modal-open {
overflow: hidden;
}

@media (max-width: 767px) {
.bep-modal {
padding: 10px;
}


.bep-modal__dialog {
	width: 100%;
	max-height: calc(100vh - 20px);
	padding: 14px;
}

.bep-modal__close {
	top: 6px;
	right: 6px;
	width: 32px;
	height: 32px;
	font-size: 25px;
}

.bep-slider__image {
	max-height: calc(100vh - 90px);
}

.bep-slider__pagination {
	margin-top: 12px;
}


}