#mapcontainer {
	width: 100%;
	height: auto;
	margin-bottom: 1em;
	position: relative;
}

#iopmap {
	overflow: hidden;
}

.country {
	fill: #8fc457;
	stroke: #FFF;
	stroke-opacity: 1;
	stroke-width: 0.8px;
}

.iscommonwealth {
	fill: #37377d;
	stroke: #37377d;
	stroke-opacity: 1;
}

svg {
	cursor: move;
	cursor: -moz-grabbing;
	cursor: -webkit-grabbing;
}

.iscommonwealth.hover:hover {
	fill: #0069b4;
	stroke: #0069b4;
	cursor: pointer;
}

.zoom-label, .node-key-label {
	cursor: pointer;
}

.country-label, .zoom-label, .man-zoom-control, .node-key-label {
	font-family: "Effra-Regular", Helvetica, Arial, sans-serif;
	font-size: 14px;
	fill: #e4e4e4;
}

.man-zoom-control {
	font-size: 28px;
}

.zoom-header-label, .man-zoom-control {
	fill: #333;
}

.man-zoom-control {
	cursor:pointer;
}

.country-label {
	display: none;
}

#no_country_selected {
	display: block;
}

.country-label-container, .zoom-container, .node-key-container {
	fill: #333;
	stroke: none;
}

.zoom-container-header {
	fill: #e4e4e4;
	stroke: none;
}

.man-zoom-container {
 	fill: #fff;
 	cursor: pointer;
}

.map-node, .map-node-key {
	stroke: #222;
	cursor: pointer;
	fill: #e20019;
}

.map-node-key {
	fill: #ddd;
}

.map-node-project, .map-node-key-project {
	fill: #e6eb41;
}

.map-node-event, .map-node-key-event {
	fill: #fa914b;
}

#calloutcontainer {
	position: absolute;
	top: 0;
	right: 0;
}
.map-node-callout {
	display:none;
	background-color: #fff;
	border: 1px solid #e4e4e4;
	max-width: 350px;
	padding: 1em 1em 0 1em;
}
@media screen and (min-width:940px) {
	.popup-active	#iopmap {
		opacity: 0.1;
		z-index: 1;
		filter:alpha(opacity=10); /* For IE8 and earlier */
		-webkit-transition: all 0.5s ease;
	  -moz-transition: all 0.5s ease;
	  -ms-transition: all 0.5s ease;
	  -o-transition: all 0.5s ease;
	  transition: all 0.5s ease;
	}
	.popup-active	#calloutcontainer {
		z-index: 999999;
		opacity: 1;
		filter:alpha(opacity=100); /* For IE8 and earlier */
		-webkit-transition: all 0.5s ease;
	  -moz-transition: all 0.5s ease;
	  -ms-transition: all 0.5s ease;
	  -o-transition: all 0.5s ease;
	  transition: all 0.5s ease;
	}
	.popup-not-active	#iopmap {
		opacity: 1;
		z-index: 1;
		filter:alpha(opacity=100); /* For IE8 and earlier */
		-webkit-transition: all 0.5s ease;
	  -moz-transition: all 0.5s ease;
	  -ms-transition: all 0.5s ease;
	  -o-transition: all 0.5s ease;
	  transition: all 0.5s ease;
	}
	.popup-active	#calloutcontainer {
		z-index: 9;
		opacity: 1;
		filter:alpha(opacity=100); /* For IE8 and earlier */
		-webkit-transition: all 0.5s ease;
	  -moz-transition: all 0.5s ease;
	  -ms-transition: all 0.5s ease;
	  -o-transition: all 0.5s ease;
	  transition: all 0.5s ease;
	 	-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
	}
	.popup-active	#calloutcontainer h4 {
		position: relative;
		margin-top: 25px;
	}
	.popup-active	#calloutcontainer .map-node-callout-close {
		background: #e4e4e4;
		width: 100%;
		height: 30px;
		position: absolute;
		top: 0;
		left: 0;
	}
	.popup-active	#calloutcontainer .map-node-callout-close span {
		background: none, url(../../../../themes/iop/img/sprite_mobile.svg) no-repeat -18px -34px;
		height: 15px;
		overflow: hidden;
		text-indent: -99999px;
		width: 15px;
		display: block;
		background-color: #F1F1F1;
		height: 30px;
		width: 30px;
		right: 0px;
		cursor: pointer;
		position: absolute;
	}
	.popup-active	#calloutcontainer .read-more {
		text-align: right;
		position: relative;
		margin: 0 15px 15px 0;
	}
	.popup-active	#calloutcontainer .read-more a:after {
		content: '';
		position: absolute;
		background: none, url(../../../../themes/iop/img/sprite_mobile.svg) no-repeat 0px -42px;
		width: 15px;
		height: 15px;
		-webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    top: 2px;
    right: -20px;
	}
}