:root {
  /* Perusvakiot */
  --gallery-color: #f6f6f6;
  --gallery-bs: 0px 2px 10px 0px #C5C5C5;
  --gallery-color1: #08425A;
  --gallery-color-dept: #08425A;
  
  /* Lisävärit */
  --gallery-dark-bg: #212a2e;
  --gallery-fullscreen-bg: #fff;
  --gallery-fullscreen-image-info-bg: #f3f3f3a1;
  --gallery-swiper-button-hover-bg: #f4f4f475;
  --gallery-fullscreen-button-hover-bg: #00000070;
  --gallery-timebar-container-bg: rgba(0, 0, 0, 0.5);
  --gallery-timebar-bg: rgba(255, 255, 255, 0.75);
  --gallery-white: #fff;
  --gallery-fc-icon-fill: #eeeeeea6;
  --gallery-close-fc-icon-fill: #222323;
  --gallery-fullscreen-image-info-alt-bg: #ffffff94;
  
  /* Koot */  
  --gallery-small: 8px;
  --gallery-medium: 10px;  
  --gallery-large: 16px;
  --gallery-xlarge: 20px;
  --gallery-xxlarge: 60px;
  --gallery-border-radius: 25px;
  --gallery-svg-icon-height: 40px;
  --gallery-svg-icon-width: 20px;
  
  
}

html {
    height: 100vh;
}

.fullscreen .image-info.none {
    display: none;
}

.image-container .Video {
	aspect-ratio: 16/9;
	min-height: 300px;
	position: relative;
	width: 100%;
}

.timebar-overlay {
	position: absolute;
	top: -9px;
	border: 0;
	right: 0;
	left: 0;
	height: 20px;
	pointer-events: all;
	z-index: 999;
}

.dark .ag-gallery,
.dark .ag-gallery .image-info {
	background: var(--gallery-dark-bg);
}

.ag-gallery {
	overflow: hidden;
	position: relative;
	margin-bottom: var(--gallery-large);
	background: var(--gallery-color);
	box-shadow: var(--gallery-bs);
}

.swiper-wrapper {
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

.ag-gallery:not(.fullscreen) .swiper-slide.fullscreen-only {
	display: none;
}

.ag-gallery .image-container.ag-html > * {
	padding: var(--gallery-xlarge) var(--gallery-xxlarge);
}

.ag-gallery.fullscreen .swiper-slide.fullscreen-only {
	display: block;
}

.ag-gallery.fullscreen.hide-navigation .swiper-pagination,
.ag-gallery.fullscreen.hide-navigation .swiper-button-next,
.ag-gallery.fullscreen.hide-navigation .swiper-button-prev,
.ag-gallery.fullscreen.hide-navigation .image-info {
	opacity: 0;
}

.ag-gallery.fullscreen .swiper-pagination,
.ag-gallery.fullscreen .swiper-button-next,
.ag-gallery.fullscreen .swiper-button-prev,
.ag-gallery.fullscreen .image-info {
	opacity: 1;
	transition: all 0.2s;
}

.ag-gallery .swiper-slide {
	overflow: hidden;
	width: 100% !important;
}

.ag-gallery .swiper-slide img {
	max-width: 100% !important;
}

.ag-gallery.fullscreen .swiper-slide {
	position: relative;
	height: 100dvh !important;
}

.ag-gallery.fullscreen .image-info {
	position: absolute;
	bottom: 0;
	background: var(--gallery-fullscreen-image-info-bg);
	z-index: 1;
	width: 100%;
}

.ag-gallery .ag-fullscreen-button:hover,
.ag-gallery .ag-close-fullscreen-button:hover {
	background: var(--gallery-fullscreen-button-hover-bg);
}

.ag-gallery.fullscreen {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border: 0;
	margin: 0;
	z-index: 9999999;
	background: var(--gallery-fullscreen-bg);
}

.ag-gallery.fullscreen .image-container img {
	max-width: 100% !important;
}

.ag-gallery .image-container {
	display: flex;
	flex-direction: row;
	justify-content: center;
	width: 100%;
}

.ag-gallery .image-container img {
	object-fit: cover;
	width: 100%;
}

.ag-gallery .image-info {
	padding: 0 0 var(--gallery-medium) 0;
	z-index: 9999;
	display: block;
	position: inherit;
	background: var(--gallery-color);
	word-break: break-word;
}

.ag-gallery .swiper-button-next,
.ag-gallery .swiper-button-prev {
	color: var(--gallery-color1);
	top: 0;
	height: 290px;
	background: transparent;
	padding: 0 var(--gallery-xlarge);
	margin-top: 0;
	transition: all 0.3s;
}

.ag-gallery .swiper-button-next.play {
	right: -60px;
}

.ag-gallery .swiper-button-prev.play {
	left: -60px;
}

.ag-gallery .swiper-button-next {
	right: 0;
}

.ag-gallery .swiper-button-prev {
	left: 0;
}

.ag-gallery .swiper-button-next:after,
.ag-gallery .swiper-button-prev:after {
	font-size: 28px;
	background: var(--gallery-swiper-button-hover-bg);
	padding: 4px 4px;
	transition: all 0.2s;
	border-radius: 4px;
}

.ag-gallery.fullscreen .swiper-button-next,
.ag-gallery.fullscreen .swiper-button-prev {
	height: 100vh !important;
	background: transparent;
}

.ag-gallery .ag-fullscreen-button svg {
	height: 22px;
}

.ag-gallery .ag-close-fullscreen-button svg {
	height: 30px;
}

.ag-gallery .ag-close-fullscreen-button svg {
	fill: var(--gallery-color1);
}

.ag-gallery .ag-fullscreen-button,
.ag-gallery .ag-close-fullscreen-button {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 999;
	cursor: pointer;
	padding: var(--gallery-medium);
	fill: var(--gallery-color-dept);
	transition: all 0.15s ease-in;
}

.timebar-container {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--gallery-timebar-container-bg);
	border-radius: 2px;
	z-index: 999;
}

.timebar-container .timebar {
	height: 7px;
	background: var(--gallery-timebar-bg);
	border-radius: 2px;
}

.controls-wrapper {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.controls-wrapper svg {
	height: var(--gallery-svg-icon-height);
	width: var(--gallery-svg-icon-width);
}

.hide {
	display: none;
}

.mute-wrapper {
	position: absolute;
	right: 45px;
	bottom: 20px;
	cursor: pointer;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	background: var(--gallery-color1);
	border-radius: var(--gallery-border-radius);
	display: flex;
	transition: all 0.3s;
	z-index: 999;
}

.mute-wrapper.play {
	right: 10px;
}

.controls-wrapper svg {
	fill: var(--gallery-white);
}

.mute-wrapper svg {
	fill: var(--gallery-white);
}

.blur-img {
	position: absolute;
	inset: 0;
	filter: brightness(0.4) blur(20px);
	transform: scale(1.1);
}

.ag-gallery .image-container video {
	width: 100%;
	height: 100%;
}

.ag-gallery .image-container .controls-wrapper {
	z-index: 10;
}

.image-info .info-wrap {
	display: flex;
	padding: var(--gallery-medium) var(--gallery-medium) 0;
	gap: var(--gallery-medium);
	flex-direction: column;
}

div.image-info div.info-wrap p.Caption,
div.image-info div.info-wrap p.Source {
	padding: 0 !important;
}

.ag-gallery .image-container iframe {
	min-height: 400px;
}

.ag-gallery.fullscreen .image-container {
	height: inherit;
}

.ag-gallery.fullscreen .image-container img {
	object-fit: contain;
}

.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
	top: 0 !important;
	bottom: unset !important;
}

.Image.fullscreen {
	position: fixed;
	top: 0;
	bottom: 0;
	z-index: 10000;
	margin: 0 !important;
	left: 0;
	right: 0;
	background: var(--gallery-fullscreen-bg) !important;
	width: 100% !important;
}

.Image.fullscreen img {
	width: 100% !important;
	object-fit: contain;
	position: relative !important;
	height: inherit !important;
}

.Image.fullscreen .crop_container {
	height: 100% !important;
	padding: 0 !important;
}

.Image.fullscreen .image-info {
	position: absolute;
	bottom: 0;
	background: var(--gallery-fullscreen-image-info-alt-bg);
	width: 100%;
}

div.Image:has(.ag-fc-icon):not(.fullscreen) {
	position: relative;
}

.ag-fc-icon svg {
	width: 22px;
	height: auto;
	fill: var(--gallery-fc-icon-fill);
}

.ag-fc-icon {
	display: flex;
	width: max-content;
	position: absolute;
	top: 0;
	right: 0;
	padding: var(--gallery-medium);
	cursor: pointer;
	transition: all 0.15s ease-in;
}

.ag-fc-icon:hover {
	background: var(--gallery-fullscreen-button-hover-bg);
}

div.Image:has(.ag-fc-icon) {
	cursor: pointer;
}

.ag-fc-icon.none {
	display: none;
}

.ag-close-fc-icon {
	position: absolute;
	display: flex;
	top: var(--gallery-large);
	right: var(--gallery-large);
}

.ag-close-fc-icon svg {
	width: 25px;
	height: 25px;
	fill: var(--gallery-close-fc-icon-fill);
}

.ag-close-fc-icon.none {
	display: none;
}

@media (min-width:700px) {
	.ag-gallery .swiper-button-next:hover,
	.ag-gallery .swiper-button-prev:hover {
		background: var(--gallery-swiper-button-hover-bg);
	}
	.ag-gallery .swiper-button-next:hover:after,
	.ag-gallery .swiper-button-prev:hover:after {
		background: none;
	}
}