<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">.maps {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
}

.containermaps {
	width: 100%;
	padding-top: 100%;
	overflow: hidden;
	position: relative;
	
}
.submaps {
	color:white;
	padding:-50px;
	text-align: center;
}

@media screen and (min-width: 769px) {
	.containermaps {
		width: 50%;
		padding-top: 50%;
	}
}

@media screen and (min-width: 1140px) {
   .containermaps {
       width: 800px;
      padding-top: 700px;
   }
}

.image-stage {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	transition: all 0.1s ease;
	cursor: zoom-in;
}

.image-stage img {
	width: 100%;
	transform: scale(1);
	transition: all 0.3s ease;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-drag: none;
}

.image-stage.zoom-in {
	cursor: -webkit-grab;
}

.image-stage.zoom-in img {
	transform: scale(2);
}

.controls {
	position: absolute;
	right: 2em;
	bottom: 2em;
	z-index: 2;
}

.controls button {
	display: block;
	width: 20px;
	height: 20px;
	padding: 0;
	border: none;
	background-color: transparent;
	cursor: pointer;
	transition: all 0.2s ease;
}

.controls button:focus,
.controls button:active {
	outline: none;
}

.control-in {
   opacity: 1;
	margin-bottom: 2em;
}

.control-out {
   opacity: .4;
   margin-bottom: 5em;
}

.image-stage.zoom-in + .controls .control-in {
   opacity: .4;
}

.image-stage.zoom-in + .controls .control-out {
   opacity: 1;
}
</pre></body></html>