@charset "UTF-8"; /* ==================================================
 * Lopwon Hub for Popup Main Stylesheet by Lopwon.
 * www.Lopwon.com
 * 2024-12-02
 * @license GPLv3
 * ----------------------------------------------------------------- */

.lopwon_hub_popup {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--hub-overlay-light);
	z-index: 2147483646;
}

.lopwon_hub_popup-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	height: 100%;
	text-align: center;
	color: var(--hub-color-black);
	overflow-x: hidden;
	overflow-y: auto;
}

.lopwon_hub_popup-content p {
	margin: 0.5em 0;
	padding: 0 1em;
	font-size: 1.2em;
}

.lopwon_hub_popup-content img {
	width: auto;
	height: auto;
	max-width: 480px;
	max-height: calc(90vh - 5em);
	border: none;
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.lopwon_hub_popup-content img:hover {
	-webkit-transform: scale(1.02);
	transform: scale(1.02);
}

.lopwon_hub_popup-content a {
	color: var(--hub-color-orange);
	text-decoration: none;
}

.lopwon_hub_popup-content a:hover {
	color: var(--hub-color-white);
	outline-width: 0;
}

.lopwon_hub_popup-btn {
	position: absolute;
	top: calc(50% - 90vh / 2 + 2.5em);
	left: calc(50% + 480px / 2 + 2.5em + 0.5em);
	width: 5em;
	height: 5em;
	padding: 0.25em;
	border: 0.25em solid var(--hub-color-black);
	border-radius: 50%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 3em;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABIAgMAAAAog1vUAAAADFBMVEVHcEwAAAAAAAAAAAALttw0AAAAA3RSTlMAqlW1nzXGAAAAr0lEQVQ4y+2TwRWDIAyG1YuvU3QEV2CUbqKbdQWH6aEXpY8QMITvdQJzIQnke5D8DMNt/+1RnFdNLSGv47em3nte57NkpvjJzjNumhrjkZ01hnJM3bolBQKbC+DydcfCDEoDi9ISi9LIorSmQUnYoqSoRQmsRQnMoRLMoRLMoRLMoRLMoygFhYDvLwFXhQfBs/vmQAuh0TCOfmgwWhAAyKQXE0gOhAnyJZHDV7iN7QdsCYpJsPBiHAAAAABJRU5ErkJggg==);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	cursor: pointer;
	opacity: .15;
}

.lopwon_hub_popup-btn:hover {
	opacity: .3;
}

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

	.lopwon_hub_popup-content {
		top: calc(50% - 50px);
		width: calc(100% - 1em);
		max-height: calc(50vh + 5em);
	}

	.lopwon_hub_popup-content img {
		max-width: calc(100vw - 2em);
		max-height: 50vh;
	}

	.lopwon_hub_popup-btn {
		top: calc(50% + (50vh + 5em) / 2);
		left: 50%;
	}

}