/* =================== */
/*   Pin positioning   */
/* =================== */

/* Desktop */

.infographic__pin--e-euro {
	/*top: 26%;
    left: 58%;*/
	top: 44%;
	left: 28%;
}
.infographic__pin--w-euro {
	top: 38%;
    left: 14%;
}
.infographic__pin--asia {
	top: 63%;
    left: 63%;
}
.infographic__pin--exlid {
	top: 73%;
    left: 28%;
}

/* Mobile */

@media (max-width: 767px) {
	.infographic__pin--e-euro {
		/*top: 30%;
		left: 54%;*/
		top: 46%;
		left: 29%;
	}
	.infographic__pin--w-euro {
		top: 40%;
		left: 8%;
	}
	.infographic__pin--asia {
		top: 65%;
		left: 76%;
	}
	.infographic__pin--exlid {
		top: 87%;
    	left: 31%;
	}
}

/* ====================== */
/*   Infographic set-up   */
/* ====================== */

/* general positioning and set-up */

.infographic {
	position: relative;
}
.infographic-background {
	background-color: #4c8272;
	overflow: hidden;
}

.infographic__map-background .country {
	width: 100%;
	height: 100%;
	position: absolute;

	margin: 0px -15px;
	padding: 0px 15px;
}

.country {
	color: #396155;
  	fill: currentColor;
  	
  	-webkit-transition: color 150ms ease;
    -moz-transition: 	color 150ms ease;
    -o-transition: 		color 150ms ease;
    transition: 		color 150ms ease;
}

.country.selected { 
	/*color: #89bd1d;*/
  	fill: currentColor;
}

.infographic__container { 
	position: absolute;
    right: 0;
    left: 0;
    padding-bottom: 57%;
    width: 100%;	
}
.infographic-main-text__container {
	padding-top: 10%;
	width: 50%;
}

/* Pins */

.infographic__pin {
	z-index: 2;
	position: absolute;
	margin-left: -20px;
	margin-top: -35px;
}

.infographic__pin.selected {
	pointer-events: none;
}

.infographic__pin.selected .round-icon-border, .infographic__pin.selected .round-icon {
	background-color: #284a41 !important;
	-webkit-transition: background-color 150ms ease, opacity 150ms ease;
    -moz-transition: 	background-color 150ms ease, opacity 150ms ease;
    -o-transition: 		background-color 150ms ease, opacity 150ms ease;
    transition: 		background-color 150ms ease, opacity 150ms ease;
}

.infographic__pin.selected .round-icon-border {
	-webkit-box-shadow: 0px 0px 0px 14px rgb(40,74,65);
    -moz-box-shadow: 0px 0px 0px 14px rgb(40,74,65);
    box-shadow: 0px 0px 0px 14px rgb(40,74,65);
}

/* main text */

.infographic-main-text__heading {
    /*margin-top: 10%;*/
    font-family: 'ThemeFont-Tertiary', sans-serif;
    font-size: 42px;
    line-height: 1.0;
    color: #fff;
}
.infographic-main-text__text {
    font-family: 'ThemeFont-Primary', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #fff;
    padding-top: 40px;
}
.infographic__result__heading {
    font-family: 'ThemeFont-Tertiary', sans-serif;
    font-size: 19px;
    text-transform: uppercase;
    padding-top: 80px;
    color: #89bd1d;
}


/* Data strip */
.data-holder_area-container {
	opacity: 0;
	-webkit-transition: opacity 250ms ease;
    -moz-transition: 	opacity 250ms ease;
    -o-transition: 		opacity 250ms ease;
    transition: 		opacity 250ms ease;
}
.data-holder_area-container.selected {
	display: block;
	opacity: 1;
}
.infographic-meta dd {
    font-family: 'ThemeFont-Tertiary', sans-serif;
    font-size: 110px;
    color: #89bd1d;
}
.infographic-meta dt {
    font-family: 'ThemeFont-Tertiary', sans-serif;
    font-size: 14px;
    color: #89bd1d;
}
.infographic-meta-list {
	margin-top: 10px;
	
}
.infographic-meta-list li {
	display: inline-block;
	position: relative;
	min-width: 200px;
	padding-bottom: 30px;
	margin-right: 13px;
}
.infographic-meta-list li:after {
	content: url('../png/data-sperator.png');
	position: absolute;
	right: 0px;
	top: 25px;
	display: inline-block;
}
.infographic-meta-list li:nth-last-child(1) {
	min-width: 0px;
}
.infographic-meta-list li:nth-last-child(1):after {
	content:'';
}
.infographic-meta-list li:nth-last-child(1) .infographic-meta dd {
	padding-right:0px;
}

.infographic-meta dd {
	padding-right: 70px;
}
.infographic-meta dt {
	position: absolute;
    padding-top: 120px;
}
.infographic-meta__link {
    font-family: 'ThemeFont-Primary', sans-serif;
    font-size: 14px;
    padding-top: 30px;
    padding-bottom: 20px;
    color: #fff;
    text-decoration: underline;
    display: block;
}

.infographic__map-container {
	margin-top: 10%;
	position: relative;
	width: 100%;
	padding-top: 82%;
}
.infographic__map {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
}
.country {
	position: absolute;
    width: 100%;
    height: 100%;
}
.module--infographic .tiny-title {
	margin: 70px 0 30px 0;
}
.infographic__result__heading {
	padding-top: 30px;
}


/* ================= */
/*     Resposive     */
/* ================= */

/* General page elements */
@media (max-width: 991px) {
	.infographic__map-container {
		margin-top: 10% !important;
	}
	.infographic-main-text__container {
    	padding-top: 8%;
	}
	.infographic__result__heading {
		padding-top: 0;
	}
	.infographic-meta-list {
		margin-top: -10px;
	}
}


@media (max-width: 767px) {
	.infographic__map-background {
		margin-left: -100%;
	}
	.infographic__map-background .country {
		width: 200%;
	}
	.infographic__container { 
		padding-bottom: 100%;
	}
	.infographic-main-text__container {
    	padding-top: 115%;
    	width: 100%;
	}
	.infographic-main-text__heading {
		margin-top: 5%;
		font-size: 32px;
	}
	.infographic__result__heading {
		font-size: 32px;
	}
	.infographic-meta-list li:after {
		display: none;
	}
}

/* Data Strip */

@media (max-width: 1180px) { /* determined by espimated max width of data */
	.infographic__map-container {
		margin-top: 30%;
	}
	.infographic-meta-list li {
		min-width: 140px;
		margin-right: 10px;
	}
	.infographic-meta dd {
		font-size: 90px;
	}
	.infographic-meta dd {
		padding-right: 50px;
	}
	.infographic-meta-list li:after {
		height: 60px;
    	overflow: hidden;
	}
	.infographic-meta dt {
    	padding-top: 100px;
	}
}
@media (max-width: 900px) { 
	.infographic-meta-list li {
		min-width: 0;
	}	
}

@media (max-width: 767px) { 
	.infographic-meta-list li {
		min-width: 0;
		width: calc(50% - 10px);
		margin: 0 10px 0 0;
		float: left;
	}
	.infographic__result__heading {
		font-size: 22px;
	}
	.infographic-meta-list {
		margin-top: 10px;
	}
	.infographic-meta-list li:nth-child(2):after { 
		content:""; 
	}
	.infographic-meta-list li:nth-child(3) { 
		clear: both; 
	}
	.infographic-meta dd {
		padding-right: 0;
		font-size: 70px;
	}
	.infographic-meta dt {
		position: relative;
		padding-top: 0;
		font-size: 11px;
	}
	.infographic-meta__link {
		padding-top: 0;
	}
}

/* RTL */
[dir="rtl"] .infographic-meta-list li:after {
	right: auto;
	left: 0;
}
[dir="rtl"] .infographic-meta dd {
	padding-right: 0;
	padding-left: 70px;
}