/**********************************************************
// Block >> Map >> Simple
**********************************************************/
.Block-Map-Simple {
	text-align: center;
	position: relative;
	}

.Block-Map-Simple-Inner {
	margin: auto;
	padding: var(--20px);
	width: 100%;
	max-width: 75rem;
	min-height: 33.75rem;
	position: relative;
	}

.Block-Map-Simple-Inner h2 {
	padding: 0 !important;
	line-height: 1.2em;
	text-transform: uppercase;
	letter-spacing: 0.125rem;
	font-weight: 400;
	font-size: var(--14px);
	color: var(--Color-Slate-Blue);
	position: relative;
	z-index: 100;
	}

.Block-Map-Simple-Inner h3 {
	padding: 0 !important;
	line-height: 1.3em;
	font-family: var(--Font-Serif);
	font-weight: 700;
	font-size: var(--50px);
	position: relative;
	z-index: 100;
	}

.Block-Map-Simple-BG {
	user-select: none;
	overflow: hidden;
	max-height: 33.75rem;
	position: absolute;
	z-index: 10;
	bottom: 0;
	right: 0;
	left: 0;
	top: 0;
	}

.Block-Map-Simple-BG:after {
    padding-bottom: 150%;
    content: '';
    display: block;
	}

.Block-Map-Simple-BG img {
	width: 100%;
	height: 100%;
	object-fit: contain;
    object-position: center center;
	}

/**********************************************************
// Block >> Map >> Simple >> Bubbles
**********************************************************/
.Block-Map-Simple-Bubbles {
	font-size: 0;
	position: absolute;
	z-index: 20;
	bottom: 0;
	right: 0;
	left: 0;
	top: 0;
	}

.Block-Map-Simple-Bubble {
	margin: auto;
	width: 15.625rem;
	height: 15.625rem;
	border-radius: 100%;
	background: var(--Color-White);
	box-shadow: 0 0 var(--20px) rgba(0, 0, 0, 0.2);
	position: absolute;
	}

.Block-Map-Simple-Bubble > div {
	padding: var(--20px);
	width: 15.625rem;
	height: 15.625rem;
	display: flex;
	align-items: center;
	justify-content: center;
	}

.Block-Map-Simple-Bubble:nth-child(1) {
	/*animation: Float-1 4s ease-out infinite;*/
	/*animation: Bubble_Pop 1s ease-out 1;
	animation-delay: 1s;*/
	z-index: 20;
	top: var(--50px);
	left: 0;
	}

.Block-Map-Simple-Bubble:nth-child(2) {
	/*animation: Float-2 4s ease-out infinite;*/
	/*animation: Bubble_Pop 1s ease-out 1;
	animation-delay: 1.5s;*/
	z-index: 25;
	top: var(--200px);
	left: 11.25rem;
	}

.Block-Map-Simple-Bubble:nth-child(3) {
	/*animation: Float-3 4s ease-out infinite;*/
	/*animation: Bubble_Pop 1s ease-out 1;
	animation-delay: 2s;*/
	z-index: 30;
	top: var(--50px);
	right: 0;
	}

.Block-Map-Simple-Bubble:nth-child(4) {
	/*animation: Float-4 4s ease-out infinite;*/
	/*animation: Bubble_Pop 1s ease-out 1;
	animation-delay: 2.5s;*/
	z-index: 35;
	top: var(--200px);
	right: 11.25rem;
	}

.Block-Map-Simple-Bubble h4 {
	padding: 0 !important;
	line-height: 1.3em;
	font-family: var(--Font-Serif);
	font-weight: 700;
	font-size: var(--70px);
	}

.Block-Map-Simple-Bubble h4 small { font-size: var(--40px); }

.Block-Map-Simple-Bubble h5 {
	padding: 0 !important;
	line-height: 1.3em;
	text-transform: uppercase;
	letter-spacing: 0.0625rem;
	font-weight: 700;
	font-size: var(--14px);
	}

@keyframes Float-1 {
	from, to { transform: translate(0,1%); }
	25% { transform: translate(-1%,0); }
	50% { transform: translate(0,-1%); }
	75% { transform: translate(1%,0); }
}

@keyframes Float-2 {
	from, to { transform: translate(0,-1%); }
	25% { transform: translate(1%,0); }
	50% { transform: translate(0,1%); }
	75% { transform: translate(-1%,0); }
}

@keyframes Float-3 {
	from, to { transform: translate(1%,0); }
	25% { transform: translate(0,-1%); }
	50% { transform: translate(-1%,0); }
	75% { transform: translate(0,1%); }
}

@keyframes Float-4 {
	from, to { transform: translate(-1%,0); }
	25% { transform: translate(0,1%); }
	50% { transform: translate(1%,0); }
	75% { transform: translate(0,-1%); }
}

@keyframes Bubble_Pop {
	from, to { transform: scale(1); }
	30% { transform: scale(0.9); }
	60% { transform: scale(1.1); }
	90% { transform: scale(0.9); }
}

/**********************************************************
// Media Queries
**********************************************************/
@media
all and (max-width: 56.25rem),
all and (max-device-width: 56.25rem)
{
	.Block-Map-Simple-BG { top: -3.125rem; }

	.Block-Map-Simple-Bubbles {
		margin: var(--300px) auto 0 auto;
		width: 100%;
		max-width: 37.5rem;
		position: relative;
		}

	.Block-Map-Simple-Bubble {
		margin: 0;
		width: var(--200px);
		height: var(--200px);
		position: relative;
		display: inline-block;
		vertical-align: top;
		}

	.Block-Map-Simple-Bubble > div {
		width: var(--200px);
		height: var(--200px);
		}

	.Block-Map-Simple-Bubble:nth-child(1) {
		animation: unset;
		top: 0;
		left: 0;
		}

	.Block-Map-Simple-Bubble:nth-child(2) {
		animation: unset;
		top: 0;
		left: -0.625rem;
		}

	.Block-Map-Simple-Bubble:nth-child(3) {
		animation: unset;
		top: -0.625rem;
		right: 0;
		}

	.Block-Map-Simple-Bubble:nth-child(4) {
		animation: unset;
		top: -0.625rem;
		right: 0;
		left: -0.625rem;
		}

	.Block-Map-Simple-Bubble h4 { font-size: var(--50px); }
	.Block-Map-Simple-Bubble h4 small { font-size: var(--30px); }
	.Block-Map-Simple-Bubble h5 { font-size: var(--12px); }
}

@media
all and (max-width: 25rem),
all and (max-device-width: 25rem)
{
	.Block-Map-Simple-Bubbles { margin: var(--200px) auto 0 auto; }

	.Block-Map-Simple-Bubble,
	.Block-Map-Simple-Bubble > div {
		width: 9.375rem;
		height: 9.375rem;
		}

	.Block-Map-Simple-Bubble h4 { font-size: var(--30px); }
	.Block-Map-Simple-Bubble h4 small { font-size: var(--20px); }
	.Block-Map-Simple-Bubble h5 { font-size: var(--10px); }
}