@charset "UTF-8";

/* Earthwatch Map Styles */

* {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-shadow:none;
	text-rendering: optimizeLegibility;
}

@font-face {
	font-family: 'Futura Std';
	src: url('../fonts/FuturaStd-Book.eot');
	src: url('../fonts/FuturaStd-Book.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/FuturaStd-Book.woff2') format('woff2'),
		 url('../fonts/FuturaStd-Book.woff') format('woff'),
		 url('../fonts/FuturaStd-Book.ttf') format('truetype'),
	 	 url('../fonts/FuturaStd-Book.svg#FuturaStd-Book') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Futura Std';
	src: url('../fonts/FuturaStd-Bold.eot');
	src: url('../fonts/FuturaStd-Bold.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/FuturaStd-Bold.woff2') format('woff2'),
		 url('../fonts/FuturaStd-Bold.woff') format('woff'),
		 url('../fonts/FuturaStd-Bold.ttf') format('truetype'),
		 url('../fonts/FuturaStd-Bold.svg#FuturaStd-Bold') format('svg');
	font-weight: bold;
	font-style: normal;
}

body {
	margin:0;
	padding:0;	
}

#container {
	width:100%;
	max-width:1500px;
	height:720px;
	margin:0 auto;
	background:url(../img/grid.png) #f2f2f2 no-repeat top left;
	background-size:1500px;	
	overflow:hidden;
	position:relative;
	border:1px solid #d9d9d9;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

	#mobile_container {
		display:none;
	}

#overlays {
	width:100%;
	height:100%;
	display:none;
	position:absolute;
	z-index:998;
	background:rgba(0,0,0,0.5);
}


#overlays.active {
	display:block;	
}

.popup {
	width:690px;
	background:#fff;
	display:none;
	padding:30px;
    top:50%;
    left:50%;
    -webkit-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
	position:absolute;
	z-index:999;
}

.popup.active {
	display:block;	
}

.popup .close {
	width:24px;
	height:24px;
	display:block;
	top:15px;
	right:15px;	
	position:absolute;
	cursor:pointer;
}

.popup.red {
	border-bottom:10px solid #d1221d;	
}

.popup.red .close {
	background:url(../img/close-red.png) no-repeat 0 0;
	background-size:24px;	
}

.popup.red h3 {
	color:#d1221d;		
}

.popup.red a {
	background:url(../img/cta-arrow.png) no-repeat 100% 0;
	background-size:15px;	
}

.popup.green {
	border-bottom:10px solid #0b8544;	
}

.popup.green .close {
	background:url(../img/close-green.png) no-repeat 0 0;
	background-size:24px;	
	padding-bottom:3px;
}

.popup.green h3 {
	color:#0b8544;		
}

.popup.green a {
	color:#0b8544;
	background:url(../img/cta-arrow-green.png) no-repeat 100% 0;
	background-size:15px;	
}

.popup.blue {
	border-bottom:10px solid #189fb5;	
}

.popup.blue .close {
	background:url(../img/close-blue.png) no-repeat 0 0;
	background-size:24px;	
}

.popup.blue h3 {
	color:#189fb5;		
}

.popup.blue a {
	color:#189fb5;
	background:url(../img/cta-arrow-blue.png) no-repeat 100% 0;
	background-size:15px;	
}

.popup.purple {
	border-bottom:10px solid #641964;	
}

.popup.purple .close {
	background:url(../img/close-purple.png) no-repeat 0 0;
	background-size:24px;	
}

.popup.purple h3 {
	color:#641964;		
}

.popup.purple a {
	color:#641964;
	background:url(../img/cta-arrow-purple.png) no-repeat 100% 0;
	background-size:15px;
}

.popup_img {
	width:180px;
	height:180px;	
	display:block;
	overflow:hidden;
	margin:0 30px 0 0;
	float:left;
}

.popup_img img {
	width:100%;	
}

.popup_content {
	width:480px;
	padding:0;
	overflow:hidden;
	float:left;
}

.popup_content h2 {	font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size:16px;
	line-height:26px;
	font-weight:bold;
	text-transform:uppercase;
	color:#404040;
	padding:0;
	margin:-5px 0 5px 0;
}

.popup_content h3 {	font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size:14px;
	line-height:22px;
	font-weight:bold;
	text-transform:uppercase;
	padding:0;
	margin:0 0 10px 0;
}

.popup_content p {	font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size:13px;
	line-height:20px;
	color:#404040;
	padding:0;
	margin:0 0 15px 0;
}

.popup_content a {	font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size:14px;
	color:#d1221d;
	text-decoration:none;
	padding-right:20px;
	font-weight:bold;	
}

#world-map {
	width:1434px;
	height:705px;
	margin:10px auto;
	background:url(../img/world-map.png) no-repeat top left;	
	background-size:1434px;
}

#info-box {
	width:239px;
	height:229px;
	display:block;
	background:#fff;
	border:1px solid #a6a6a6;
	padding:20px 30px;
	position:absolute;
	bottom:28px;
	left:29px;
}

#info-box h1 {	font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size:14px;
	line-height:22px;
	font-weight:bold;
	text-transform:uppercase;
	color:#df1f26;
	padding:0;
	margin:-4px 0 0 0;
}

#info-box p {	font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size:13px;
	line-height:18px;
	font-weight:bold;
	color:#404040;
	padding:0;
	margin:8px 0 0 0;
}

#info-box ul {	font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size:13px;
	color:#404040;
	margin-top:20px;
}

#info-box li {
	margin:20px 0 0 0;	
}

#info-box li span {
	width:15px;
	height:15px;
	display:block;
	float:left;
	background:#000;
	margin-top:-2px;
	margin-right:10px;
}

#info-box li span.EWE {
	background:#008443;
}

#info-box li span.ESN {
	background:#641964;
}

#info-box li span.FWW {
	background:#189fb5;
}

#info-box li span.ELP {
	background:#df1f26;
}


@media (max-width:1024px) {
	#world-map {
		background:url(../img/world-map.png) no-repeat -100px top;	
		background-size:1434px;
	}
	
	#info-box {
		width: 239px;
		height: 229px;
		display:block;
		background:#fff;
		border:1px solid #a6a6a6;
		padding:20px 30px;
		position:absolute;
		bottom:28px;
		left:29px;
	}
	
	#info-box ul {
		margin-top:0;
	}
	
	#info-box li {
		width:210px;
		margin:20px 0 0 0;	
		float:left;
	}
}

.hotspot {
	width:30px;
	height:30px;	
	background:url(../img/hotspot.png) no-repeat 0 0;
	background-size:60px;
	display:block;
	position:absolute;
	cursor:pointer;
}

.hotspot.active {
	background:url(../img/hotspot.png) no-repeat -30px 0;
	background-size:60px;
}

.hotspot.green {
	background:url(../img/hotspot_green.png) no-repeat 0 0;
	background-size:60px;
}

.hotspot.green.active {
	background:url(../img/hotspot_green.png) no-repeat -30px 0;
	background-size:60px;
}

.hotspot.blue {
	background:url(../img/hotspot_blue.png) no-repeat 0 0;
	background-size:60px;
}

.hotspot.blue.active {
	background:url(../img/hotspot_blue.png) no-repeat -30px 0;
	background-size:60px;
}

.hotspot.purple {
	background:url(../img/hotspot_purple.png) no-repeat 0 0;
	background-size:60px;
}

.hotspot.purple.active {
	background:url(../img/hotspot_purple.png) no-repeat -30px 0;
	background-size:60px;
}

#hotspots {
	width:100%;
	height:100%;
	position:relative;	
}

#hotspot_canada1 {
    top: 141px;
    left: 116px;
}

#hotspot_canada2 {
	top: 169px;
    left: 267px;
}

#hotspot_usa {
    top: 244px;
    left: 388px;
}

#hotspot_brazil {
	top: 541px;
    left: 460px;
}

#hotspot_uk1 {
	top: 199px;
    left: 621px;
}

#hotspot_uk2 {
    top: 199px;
    left: 657px;
}

#hotspot_nl {
	top: 214px;
    left: 690px;
}

#hotspot_andorra {
	top: 259px;
    left: 658px;
}

#hotspot_safrica {
    top: 559px;
    left: 778px;
}

#hotspot_india1 {
    top: 380px;
    left: 958px;
}

#hotspot_india2 {
    top: 310px;
    left: 960px;
}

@media (max-width:1024px) {
	#hotspot_canada1 {
		top: 141px;
		left: 16px;
	}
	
	#hotspot_canada2 {
		top: 169px;
		left: 167px;
	}
	
	#hotspot_usa {
		top: 244px;
		left: 288px;
	}
	
	#hotspot_brazil {
		top: 541px;
		left: 360px;
	}
	
	#hotspot_uk1 {
		top: 199px;
		left: 521px;
	}
	
	#hotspot_uk2 {
		top: 199px;
		left: 557px;
	}
	
	#hotspot_nl {
		top: 214px;
		left: 590px;
	}
	
	#hotspot_andorra {
		top: 259px;
		left: 558px;
	}
	
	#hotspot_safrica {
		top: 559px;
		left: 678px;
	}
	
	#hotspot_india1 {
		top: 380px;
		left: 860px;
	}
	
	#hotspot_india2 {
		top: 310px;
		left: 859px;
	}
}

/* Mobile */

@media (max-width:920px) {
	
	#container {
		display:none;
	}

	#mobile_container {
		width:100%;	
		display:block;
	}
	
	#mobile_container #intro {
		width:96%;
		padding:20px 2%;	
	}
	
	#mobile_container #intro h1 {	font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size:18px;
		line-height:22px;
		font-weight:bold;
		text-transform:uppercase;
		color:#df1f26;
		padding:0;
		margin:0 0 15px;
	}
	
	#mobile_container #intro p {	font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size:16px;
		line-height:18px;
		font-weight:bold;
		color:#404040;
		padding:0;
	}
	
	#mobile_container ul {	font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size:14px;
		color:#404040;
		margin-top:20px;
	}
	
	#mobile_container li {
		margin:20px 0 0 0;	
	}
	
	#mobile_container li span {
		width:15px;
		height:15px;
		display:block;
		float:left;
		background:#000;
		margin-top:-2px;
		margin-right:10px;
	}
	
	#mobile_container li span.EWE {
		background:#008443;
	}
	
	#mobile_container li span.ESN {
		background:#641964;
	}
	
	#mobile_container li span.FWW {
		background:#189fb5;
	}
	
	#mobile_container li span.ELP {
		background:#df1f26;
	}
	
	
	div.accordion {
		background-color: #eee;
		color: #444;
		cursor: pointer;
		padding: 18px 2%;
		width: 96%;
		text-align: left;
		border-bottom:1px solid #fff;
		outline: none;
		transition: 0.4s;
		position:relative;
	}
	
	div.accordion span {
		width:30px;
		height:30px;
		background:url(../img/icon-mob-plus.png) no-repeat 0 0;
		background-size:30px;
		position:absolute;	
		top:15px;
		right:15px;
	}
	
	div.accordion.active, div.accordion:hover {
		background-color: #fbce07;
	}
	
	div.accordion.active h2, div.accordion:hover h2 {
		color: #404040;
	}
	
	div.accordion.active span {
		background:url(../img/icon-mob-cross.png) no-repeat 0 0;
		background-size:30px;
	}
	
	div.accordion.sub {
		background:#f2f2f2;
		border-bottom:1px solid #dfdfdf;	
	}
	
	div.accordion.sub.red {
		border-bottom:10px solid #dd1221;
	}
	
	div.accordion.sub.green {
		border-bottom:10px solid #008443;
	}
	
	div.accordion.sub.blue {
		border-bottom:10px solid #189fb5;
	}
	
	div.accordion.sub.purple {
		border-bottom:10px solid #641964;
	}
	
	div.accordion.sub.red span {
		background:url(../img/icon-mob-plus-red.png) no-repeat 0 0;
		background-size:30px;
	}
	
	div.accordion.sub.green span {
		background:url(../img/icon-mob-plus-green.png) no-repeat 0 0;
		background-size:30px;
	}
	
	div.accordion.sub.blue span {
		background:url(../img/icon-mob-plus-blue.png) no-repeat 0 0;
		background-size:30px;
	}
	
	div.accordion.sub.purple span {
		background:url(../img/icon-mob-plus-purple.png) no-repeat 0 0;
		background-size:30px;
	}
	
	div.accordion.sub.active.red span {
		background:url(../img/icon-mob-cross-red.png) no-repeat 0 0;
		background-size:30px;
	}
	
	div.accordion.sub.active.green span {
		background:url(../img/icon-mob-cross-green.png) no-repeat 0 0;
		background-size:30px;
	}
	
	div.accordion.sub.active.blue span {
		background:url(../img/icon-mob-cross-blue.png) no-repeat 0 0;
		background-size:30px;
	}
	
	div.accordion.sub.active.sub.purple span {
		background:url(../img/icon-mob-cross-purple.png) no-repeat 0 0;
		background-size:30px;
	}
	
	div.accordion h2 {	font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size:18px;
		line-height:22px;
		font-weight:bold;
		text-transform:uppercase;
		color:#404040;	
	}
	
	div.accordion h3 {
		width: 89%;	font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size:15px;
		line-height:22px;
		font-weight:bold;
		text-transform:uppercase;
		color:#404040;	
	}
	
	div.panel {
		background-color: #fff;
		border-bottom:1px solid #dfdfdf;	
		display: none;
	}
	
	div.panel.show {
		display: block !important;
	}
	
	div.panel .map {
		width:100%;
	}
	
	div.panel .map img {
		width:100%;	
	}
	
	div.panel h4 {	font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size:14px;
		line-height:22px;
		font-weight:bold;
		text-transform:uppercase;
		color:#404040;	
		padding:18px 2%;
	}
	
	div.panel p {	font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size:14px;
		font-weight:normal;
		line-height:22px;
		color:#404040;	
		padding:0 2% 18px;
	}
	
	div.panel a {	font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size:14px;
		color:#d1221d;
		text-decoration:none;
		margin-bottom:18px;
		padding-right:20px;
		font-weight:bold;	
	}
	
	div.panel.red h4 {
		color:#dd1221;
	}
	
	div.panel.red a {
		background:url(../img/cta-arrow.png) no-repeat 100% -1px;
		background-size:15px;	
	}
	
	div.panel.green a {
		color:#0b8544;
		background:url(../img/cta-arrow-green.png) no-repeat 100% -1px;
		background-size:15px;	
	}
	
	div.panel.green h4 {
		color:#0b8544;
	}
	
	div.panel.blue a {
		color:#189fb5;
		background:url(../img/cta-arrow-blue.png) no-repeat 100% -1px;
		background-size:15px;	
	}
	
	div.panel.blue h4 {
		color:#189fb5;
	}
	
	div.panel.purple a {
		color:#641964;
		background:url(../img/cta-arrow-purple.png) no-repeat 100% -1px;
		background-size:15px;	
	}
	
	div.panel.purple h4 {
		color:#641964;
	}

}