﻿
/* ============================================================
	CONTINENT LIST
=============================================================== */
nav.continents h3 {
	margin-bottom: 1em;
}

ul.continents__list,
ul.continents__list li {
	margin: 0; padding: 0;
	text-indent: 0;
	list-style: none;
}
ul.continents__list:after {
	content: '';
	display: table;
	clear: both;
}
.continents__list li {
	display: inline-block;
	width: 33%;
}
.continents__list a {
	display: block;
	text-decoration: none;
	text-align: center;
	padding: 0.5em 1em;
}
.continents__list a:hover {
	color: #f5972d!important;
}
@media (max-width: 50em) {
	.continents__list li {
		width: 50%;
	}
}

/* ============================================================
	MAP IMAGE
=============================================================== */
.global-map {
	background: #f5972d;
}
.global-map .map-img {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
}

.map-img--main__continent {
	cursor: pointer;
}
.map-img--main.has-active .map-img--main__continent {
	cursor: default;
}
.map-img--main__continent:hover .dots {
	fill: #fff;
}
.map-img--main.has-active .dots {
	fill: #000!important;
}
.map-img--main.has-active .map-img--main__continent.is-active .dots {
	fill: #fff!important;
}
.map-img--main__continent .dots {
	-webkit-transition: fill 0.4s;
	-moz-transition: fill 0.4s;
	-ms-transition: fill 0.4s;
	-o-transition: fill 0.4s;
	transition: fill 0.4s;
}

.regions section {
	width: 100%;
	overflow: hidden;
}

.global-map__wrap {
	position: relative;
	width: 100vmin;
	height: 56.25vmin;
	margin: 0 auto;
}


.global-map__layer {
	display: none;
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	z-index: 1;
}
.global-map__back-link {
	position: absolute;
	z-index: 1;
	top: 1em; left: 50px;
	color: white;
	font-size: 1.5em;
	text-decoration: underline;
}
@media (min-width: 785px){
	.global-map__back-link {
		left: 50%;
		margin-left: -392px;/* 785px/2 */
	}
}

@media (min-width: 1024px) and (min-height: 768px) {
	.global-map__layer {
		font-size: 11px;
	}
}

/* ============================================================
	DIALOGS
=============================================================== */
.global-map__dialog,
.dialog__pin {
	z-index: 1;
}
.dialog__box {
	z-index: 2;
}

.dialog__box {
	position: absolute;

	width: 18em;
	margin: 0 -18em;
	background: white;
	box-shadow: 0 0 2em rgba(0,0,0,0.2);
	display: none;
}
.global-map__dialog.js-show .dialog__box {
	display: block;
}
@media (max-width: 640px), (max-height: 640px){
	.dialog__box {
		top: 50%!important;
		left: 50%!important;
		right: auto !important;
		bottom: auto!important;
		margin: 0;
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		-o-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}
	.dialog__box img {
		display: none;
	}
}

.dialog__box h2 {
	font-size: 1em;
	margin: 0 0 0.2em;
	font-weight: 700;
}
.dialog__box h2 span {
	color: #f5972d;
	display: block;
}
.dialog__box figure {
	display: block;
	margin: 0; padding: 0;
}
.dialog__box figcaption,
.dialog__box .figcaption {
	display: block;
	margin: 0; padding: 1em;
}
.dialog__box img {
	width: 100%; height: auto;
}

.dialog__box__more {
	text-decoration: underline;
}

.dialog__box__close {
	float: right;
	width: 1em; height: 1em;
	font-size: 1.5em;
	position: relative;

	text-indent: 110%;
	white-space: nowrap;
	overflow: hidden;
}
.dialog__box__close:before,
.dialog__box__close:after {
	content: '';
	height: 100%; width: 0.1em;
	position: absolute;
	left: 0.45em; top: 0;
	background: black;
}
.dialog__box__close:before {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}
.dialog__box__close:after {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

/* ============================================================
	PINS
=============================================================== */
.dialog__pin {
	position: absolute;
	width: 4em; height: 4em;
	margin: -2em;

	border-radius: 50%;
	background: #0e5498;
	cursor: pointer;
}
.dialog__pin:before,
.dialog__pin:after {
	content: '';
	position: absolute;
	top: 50%; left: 50%;
	border-radius: 50%;
	width: 0; height: 0;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.dialog__pin:before {
	border: 0.5em solid white;
	z-index: 2;
}
.dialog__pin:after {
	border: 2em solid #209bd6;
	z-index: 1;

	-webkit-transform: translate(-50%, -50%) scale(0);
	-moz-transform: translate(-50%, -50%) scale(0);
	-ms-transform: translate(-50%, -50%) scale(0);
	-o-transform: translate(-50%, -50%) scale(0);
	transform: translate(-50%, -50%) scale(0);

	-webkit-transition: 0.4s;
	-moz-transition: 0.4s;
	-ms-transition: 0.4s;
	-o-transition: 0.4s;
	transition: 0.4s;
}
.dialog__pin:hover:after {
	-webkit-animation: pulse 0.5s infinite alternate;
	-o-animation: pulse 0.5s infinite alternate;
	animation: pulse 0.5s infinite alternate;
}
@keyframes pulse {
	from {
		-webkit-transform: translate(-50%, -50%) scale(0);
		-moz-transform: translate(-50%, -50%) scale(0);
		-ms-transform: translate(-50%, -50%) scale(0);
		-o-transform: translate(-50%, -50%) scale(0);
		transform: translate(-50%, -50%) scale(0);
	}
	to {
		-webkit-transform: translate(-50%, -50%) scale(1.1);
		-moz-transform: translate(-50%, -50%) scale(1.1);
		-ms-transform: translate(-50%, -50%) scale(1.1);
		-o-transform: translate(-50%, -50%) scale(1.1);
		transform: translate(-50%, -50%) scale(1.1);
	}
}
@-webkit-keyframes pulse {
	from {
		-webkit-transform: translate(-50%, -50%) scale(0);
		-moz-transform: translate(-50%, -50%) scale(0);
		-ms-transform: translate(-50%, -50%) scale(0);
		-o-transform: translate(-50%, -50%) scale(0);
		transform: translate(-50%, -50%) scale(0);
	}
	to {
		-webkit-transform: translate(-50%, -50%) scale(1.1);
		-moz-transform: translate(-50%, -50%) scale(1.1);
		-ms-transform: translate(-50%, -50%) scale(1.1);
		-o-transform: translate(-50%, -50%) scale(1.1);
		transform: translate(-50%, -50%) scale(1.1);
	}
}
.global-map__dialog.js-show .dialog__pin:after {
	-webkit-animation: none!important;
	-o-animation: none!important;
	animation: none!important;

	-webkit-transform: translate(-50%, -50%) scale(1.1);
	-moz-transform: translate(-50%, -50%) scale(1.1);
	-ms-transform: translate(-50%, -50%) scale(1.1);
	-o-transform: translate(-50%, -50%) scale(1.1);
	transform: translate(-50%, -50%) scale(1.1);
}

/*
	TEXT CONTENT
*/
.global-map__text-content__item {
	display: none;
}