/* =========================================================
   HÖMSKE MODAL GALLERY
   VERSION 1.8.2
========================================================= */


/* =========================================================
   TRIGGER
========================================================= */

.hmg-trigger {

	display: block;

	width: 100%;
	max-width: 100%;

	padding: 0;
	margin: 0;

	border: 0;

	border-radius:
		var(
			--hmg-trigger-radius,
			0px
		);

	overflow: hidden;

	background: transparent;

	cursor: pointer;

	appearance: none;
	-webkit-appearance: none;

}


.hmg-widget.has-custom-trigger-size .hmg-trigger {

	width:
		var(
			--hmg-trigger-width,
			100%
		);

	height:
		var(
			--hmg-trigger-height,
			300px
		);

}


/* =========================================================
   TRIGGER IMAGE
========================================================= */

.hmg-trigger-image {

	display: block;

	width: 100%;
	height: auto;

	border-radius: inherit;

	object-fit: cover;

	filter:
		brightness(
			var(
				--hmg-trigger-brightness,
				100%
			)
		)
		contrast(
			var(
				--hmg-trigger-contrast,
				100%
			)
		)
		saturate(
			var(
				--hmg-trigger-saturation,
				100%
			)
		)
		grayscale(
			var(
				--hmg-trigger-grayscale,
				0%
			)
		)
		blur(
			var(
				--hmg-trigger-blur,
				0px
			)
		);

	transform: scale(1);

	transition:
		filter var(--hmg-trigger-transition, 0.3s) ease,
		transform var(--hmg-trigger-transition, 0.3s) ease;

	will-change:
		filter,
		transform;

}


.hmg-widget.has-custom-trigger-size .hmg-trigger-image {

	width: 100%;
	height: 100%;

	object-fit:
		var(
			--hmg-trigger-object-fit,
			cover
		);

}


.hmg-trigger:hover .hmg-trigger-image {

	filter:
		brightness(
			var(
				--hmg-trigger-hover-brightness,
				var(--hmg-trigger-brightness, 100%)
			)
		)
		contrast(
			var(
				--hmg-trigger-hover-contrast,
				var(--hmg-trigger-contrast, 100%)
			)
		)
		saturate(
			var(
				--hmg-trigger-hover-saturation,
				var(--hmg-trigger-saturation, 100%)
			)
		)
		grayscale(
			var(
				--hmg-trigger-hover-grayscale,
				var(--hmg-trigger-grayscale, 0%)
			)
		)
		blur(
			var(
				--hmg-trigger-hover-blur,
				var(--hmg-trigger-blur, 0px)
			)
		);

	transform:
		scale(
			var(
				--hmg-trigger-hover-scale,
				1
			)
		);

}


.hmg-trigger:active .hmg-trigger-image {

	filter:
		brightness(
			var(
				--hmg-trigger-active-brightness,
				var(
					--hmg-trigger-hover-brightness,
					var(--hmg-trigger-brightness, 100%)
				)
			)
		)
		contrast(
			var(
				--hmg-trigger-active-contrast,
				var(
					--hmg-trigger-hover-contrast,
					var(--hmg-trigger-contrast, 100%)
				)
			)
		)
		saturate(
			var(
				--hmg-trigger-active-saturation,
				var(
					--hmg-trigger-hover-saturation,
					var(--hmg-trigger-saturation, 100%)
				)
			)
		)
		grayscale(
			var(
				--hmg-trigger-active-grayscale,
				var(
					--hmg-trigger-hover-grayscale,
					var(--hmg-trigger-grayscale, 0%)
				)
			)
		)
		blur(
			var(
				--hmg-trigger-active-blur,
				var(
					--hmg-trigger-hover-blur,
					var(--hmg-trigger-blur, 0px)
				)
			)
		);

	transform:
		scale(
			var(
				--hmg-trigger-active-scale,
				0.98
			)
		);

}


.hmg-trigger:focus-visible {

	outline: 2px solid #EF2737;

	outline-offset: 4px;

}


/* =========================================================
   BODY
========================================================= */

body.hmg-modal-open {

	overflow: hidden;

}


/* =========================================================
   MODAL
========================================================= */

.hmg-modal {

	position: fixed;

	inset: 0;

	z-index: 999999;

	display: none;

	align-items: center;
	justify-content: center;

	width: 100vw;
	height: 100vh;

	padding:
		var(
			--hmg-modal-padding,
			30px
		);

	margin: 0;

	box-sizing: border-box;

	background: transparent;

	isolation: isolate;

}


.hmg-modal:focus {

	outline: none;

}


.hmg-modal::before {

	content: "";

	position: absolute;

	inset: 0;

	z-index: 0;

	background-color:
		var(
			--hmg-overlay-color,
			#141516
		);

	opacity:
		var(
			--hmg-overlay-opacity,
			0.95
		);

	pointer-events: none;

}


.hmg-modal.is-open {

	display: flex;

}


/* =========================================================
   MODAL INNER
========================================================= */

.hmg-modal-inner {

	position: relative;

	z-index: 1;

	display: flex;

	flex-direction: column;

	align-items: center;
	justify-content: center;

	width:
		var(
			--hmg-modal-width,
			90%
		);

	max-width:
		var(
			--hmg-modal-max-width,
			1000px
		);

	height:
		var(
			--hmg-modal-height,
			85vh
		);

	margin: 0 auto;

	box-sizing: border-box;

}


/* =========================================================
   CLOSE BUTTON
========================================================= */

body .hmg-modal button.hmg-close {

	position: absolute;

	top: 0;
	right: 0;

	z-index: 30;

	display: flex;

	align-items: center;
	justify-content: center;

	width:
		var(
			--hmg-close-size,
			46px
		);

	height:
		var(
			--hmg-close-size,
			46px
		);

	padding: 0;
	margin: 0;

	box-sizing: border-box;

	border-style: solid !important;

	border-width:
		var(
			--hmg-close-border-width,
			0px
		) !important;

	border-color:
		var(
			--hmg-close-border-color,
			transparent
		) !important;

	border-radius:
		var(
			--hmg-close-radius,
			50%
		) !important;

	background-color:
		var(
			--hmg-close-background,
			transparent
		) !important;

	background-image: none !important;

	color:
		var(
			--hmg-close-color,
			#ffffff
		) !important;

	opacity:
		var(
			--hmg-close-opacity,
			1
		);

	box-shadow: none;

	text-shadow: none;

	cursor: pointer;

	appearance: none;
	-webkit-appearance: none;

	transition:
		color 0.2s ease,
		background-color 0.2s ease,
		border-color 0.2s ease,
		border-width 0.2s ease,
		border-radius 0.2s ease,
		opacity 0.2s ease,
		transform 0.2s ease;

}


body .hmg-modal button.hmg-close:hover {

	color:
		var(
			--hmg-close-hover-color,
			var(
				--hmg-close-color,
				#ffffff
			)
		) !important;

	background-color:
		var(
			--hmg-close-background-hover,
			var(
				--hmg-close-background,
				transparent
			)
		) !important;

	background-image: none !important;

	border-color:
		var(
			--hmg-close-hover-border-color,
			var(
				--hmg-close-border-color,
				transparent
			)
		) !important;

	border-width:
		var(
			--hmg-close-hover-border-width,
			var(
				--hmg-close-border-width,
				0px
			)
		) !important;

	border-radius:
		var(
			--hmg-close-hover-radius,
			var(
				--hmg-close-radius,
				50%
			)
		) !important;

	opacity:
		var(
			--hmg-close-hover-opacity,
			var(
				--hmg-close-opacity,
				1
			)
		);

	transform: scale(1.05);

}


body .hmg-modal button.hmg-close:focus {

	color:
		var(
			--hmg-close-color,
			#ffffff
		) !important;

	background-color:
		var(
			--hmg-close-background,
			transparent
		) !important;

	background-image: none !important;

	border-color:
		var(
			--hmg-close-border-color,
			transparent
		) !important;

	box-shadow: none !important;

}


body .hmg-modal button.hmg-close:focus-visible {

	outline: 2px solid currentColor;

	outline-offset: 3px;

}


body .hmg-modal button.hmg-close:hover:focus {

	color:
		var(
			--hmg-close-hover-color,
			var(
				--hmg-close-color,
				#ffffff
			)
		) !important;

	background-color:
		var(
			--hmg-close-background-hover,
			var(
				--hmg-close-background,
				transparent
			)
		) !important;

}


.hmg-close svg {

	display: block;

	width:
		var(
			--hmg-close-icon-size,
			28px
		);

	height:
		var(
			--hmg-close-icon-size,
			28px
		);

	fill: none !important;

	stroke: currentColor !important;

	stroke-width: 2;

	stroke-linecap: round;
	stroke-linejoin: round;

}


/* =========================================================
   STAGE
========================================================= */

.hmg-stage {

	position: relative;

	display: flex;

	align-items: center;
	justify-content: center;

	width: 100%;

	height: calc(100% - 50px);

	touch-action: pan-y;

}


/* =========================================================
   SLIDES
========================================================= */

.hmg-slides {

	position: relative;

	width: 100%;
	height: 100%;

	overflow: hidden;

}


.hmg-slide {

	position: absolute;

	inset: 0;

	display: none;

	align-items: center;
	justify-content: center;

	width: 100%;
	height: 100%;

}


.hmg-slide.is-active {

	display: flex;

}


/* =========================================================
   IMAGE
========================================================= */

.hmg-image {

	display: block;

	width: auto;
	height: auto;

	max-width:
		var(
			--hmg-image-max-width,
			100%
		);

	max-height:
		var(
			--hmg-image-max-height,
			100%
		);

	margin: auto;

	border-radius:
		var(
			--hmg-image-radius,
			0px
		);

	object-fit: contain;

	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;

}


/* =========================================================
   ARROWS
========================================================= */

body .hmg-modal button.hmg-arrow {

	position: absolute;

	top: 50%;

	z-index: 20;

	display: flex;

	align-items: center;
	justify-content: center;

	width:
		var(
			--hmg-arrow-size,
			48px
		);

	height:
		var(
			--hmg-arrow-size,
			48px
		);

	padding: 0;
	margin: 0;

	box-sizing: border-box;

	transform: translateY(-50%);

	border-style: solid !important;

	border-width:
		var(
			--hmg-arrow-border-width,
			0px
		) !important;

	border-color:
		var(
			--hmg-arrow-border-color,
			transparent
		) !important;

	border-radius:
		var(
			--hmg-arrow-radius,
			50%
		) !important;

	background-color:
		var(
			--hmg-arrow-background,
			rgba(0, 0, 0, 0.35)
		) !important;

	background-image: none !important;

	color:
		var(
			--hmg-arrow-color,
			#ffffff
		) !important;

	opacity:
		var(
			--hmg-arrow-opacity,
			1
		);

	box-shadow: none;

	text-shadow: none;

	cursor: pointer;

	appearance: none;
	-webkit-appearance: none;

	transition:
		color 0.2s ease,
		background-color 0.2s ease,
		border-color 0.2s ease,
		border-width 0.2s ease,
		border-radius 0.2s ease,
		opacity 0.2s ease;

}


body .hmg-modal button.hmg-arrow:hover {

	color:
		var(
			--hmg-arrow-hover-color,
			var(
				--hmg-arrow-color,
				#ffffff
			)
		) !important;

	background-color:
		var(
			--hmg-arrow-background-hover,
			var(
				--hmg-arrow-background,
				rgba(0, 0, 0, 0.35)
			)
		) !important;

	background-image: none !important;

	border-color:
		var(
			--hmg-arrow-hover-border-color,
			var(
				--hmg-arrow-border-color,
				transparent
			)
		) !important;

	border-width:
		var(
			--hmg-arrow-hover-border-width,
			var(
				--hmg-arrow-border-width,
				0px
			)
		) !important;

	border-radius:
		var(
			--hmg-arrow-hover-radius,
			var(
				--hmg-arrow-radius,
				50%
			)
		) !important;

	opacity:
		var(
			--hmg-arrow-hover-opacity,
			var(
				--hmg-arrow-opacity,
				1
			)
		);

}


body .hmg-modal button.hmg-arrow:focus {

	color:
		var(
			--hmg-arrow-color,
			#ffffff
		) !important;

	background-color:
		var(
			--hmg-arrow-background,
			rgba(0, 0, 0, 0.35)
		) !important;

	background-image: none !important;

	border-color:
		var(
			--hmg-arrow-border-color,
			transparent
		) !important;

	box-shadow: none !important;

}


body .hmg-modal button.hmg-arrow:hover:focus {

	color:
		var(
			--hmg-arrow-hover-color,
			var(
				--hmg-arrow-color,
				#ffffff
			)
		) !important;

	background-color:
		var(
			--hmg-arrow-background-hover,
			var(
				--hmg-arrow-background,
				rgba(0, 0, 0, 0.35)
			)
		) !important;

}


body .hmg-modal button.hmg-arrow:focus-visible {

	outline: 2px solid currentColor;

	outline-offset: 3px;

}


.hmg-arrow svg {

	display: block;

	width:
		var(
			--hmg-arrow-icon-size,
			28px
		);

	height:
		var(
			--hmg-arrow-icon-size,
			28px
		);

	fill: none !important;

	stroke: currentColor !important;

	stroke-width: 2;

	stroke-linecap: round;
	stroke-linejoin: round;

}


.hmg-prev {

	left:
		var(
			--hmg-arrow-offset,
			15px
		);

}


.hmg-next {

	right:
		var(
			--hmg-arrow-offset,
			15px
		);

}


body .hmg-modal button.hmg-arrow:disabled {

	opacity: 0.25;

	cursor: default;

	pointer-events: none;

}


/* =========================================================
   DOTS
========================================================= */

body .hmg-modal button.hmg-dot {

	display: block;

	flex: 0 0 auto;

	width:
		var(
			--hmg-dot-size,
			10px
		);

	height:
		var(
			--hmg-dot-size,
			10px
		);

	min-width:
		var(
			--hmg-dot-size,
			10px
		);

	min-height:
		var(
			--hmg-dot-size,
			10px
		);

	padding: 0;
	margin: 0;

	border: 0 !important;

	border-radius: 50% !important;

	background-color:
		var(
			--hmg-dot-color,
			#656A70
		) !important;

	background-image: none !important;

	opacity: 0.6;

	box-shadow: none !important;

	cursor: pointer;

	appearance: none;
	-webkit-appearance: none;

	transition:
		background-color 0.2s ease,
		opacity 0.2s ease,
		transform 0.2s ease;

}


.hmg-dots {

	display: flex;

	align-items: center;
	justify-content: center;

	gap:
		var(
			--hmg-dot-gap,
			10px
		);

	min-height: 40px;

	padding-top: 10px;

}


body .hmg-modal button.hmg-dot:hover {

	opacity: 1;

}


body .hmg-modal button.hmg-dot:focus {

	background-color:
		var(
			--hmg-dot-color,
			#656A70
		) !important;

	box-shadow: none !important;

}


body .hmg-modal button.hmg-dot.is-active,
body .hmg-modal button.hmg-dot.is-active:focus {

	background-color:
		var(
			--hmg-dot-active-color,
			#EF2737
		) !important;

	opacity: 1;

	transform: scale(1.2);

}


body .hmg-modal button.hmg-dot:focus-visible {

	outline: 2px solid #ffffff;

	outline-offset: 4px;

}


/* =========================================================
   COUNTER
========================================================= */

.hmg-counter {

	position: absolute;

	right: 0;
	bottom: 0;

	z-index: 20;

	display: flex;

	align-items: center;

	gap: 4px;

	min-height: 40px;

	color: #ffffff;

	font-size: 14px;

	font-weight: 500;

	line-height: 1;

	font-variant-numeric: tabular-nums;

	pointer-events: none;

}


.hmg-counter-current {

	font-weight: 700;

}


/* =========================================================
   SINGLE
========================================================= */

.hmg-modal.is-single .hmg-arrow,
.hmg-modal.is-single .hmg-dots {

	display: none;

}


/* =========================================================
   WORDPRESS ADMIN BAR
========================================================= */

body.admin-bar .hmg-modal {

	top: 32px;

	height: calc(100vh - 32px);

}


@media screen and (max-width: 782px) {

	body.admin-bar .hmg-modal {

		top: 46px;

		height: calc(100vh - 46px);

	}

}


@media screen and (max-width: 767px) {

	.hmg-counter {

		font-size: 13px;

	}

}