/* Landing page styles (index.html). Loaded after bootstrap.min.css. */

body {
	font-family: 'Roboto', sans-serif;
}
h1 {
	color: #444445;
}
p {
	color: #222223;
	font-size: 18px;
	line-height: 1.5;
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
}
.section {
	position: relative;
	padding: 80px 0;
}
.section.short {
	padding: 40px 0;
}
#header_wrapper {
	background: #323232;
}
#logo, .footer-logo {
	display: inline-block;
	max-width: 100%;
	height: auto;
	margin: 10px 15px;
}
/* The header logo is the page's main heading (for screen readers); it looks the same as before. */
.site-title {
	margin: 0;
	font: inherit;
	line-height: inherit;
}
#intro_wrapper {
	position: relative;
	background: #000;
	overflow: hidden;
}
/* "JS map by amCharts" credit (required by the free amCharts licence): amCharts draws it in black,
   which is invisible on the black map background, so make it light with a shadow that keeps it
   readable over the grey land too. */
#chartdiv a[href*="amcharts.com"] {
	color: #d0d0d0 !important;
	text-shadow: 0 0 3px #000, 0 0 2px #000;
}

/* Map markers on larger screens: the whole world is shown, so Syria, oPt and Iraq are only
   13-27px apart, and the 10px dots with 50px pulse rings (inline <style> in index.html) ran into
   each other. Here: an 8px dot centred exactly on the country, with a 24px pulse ring.
   (Sizes include the border: Bootstrap sets box-sizing: border-box.)
   Phones keep the bigger, easier-to-tap markers; they are further apart there. */
@media (min-width: 768px) {
	#chartdiv .map-marker {
		margin-left: -4px;
		margin-top: -4px;
	}
	#chartdiv .map-marker .pulse {
		width: 8px;
		height: 8px;
		border-width: 4px;
	}
	#chartdiv .map-marker .dot {
		width: 24px;
		height: 24px;
		border-width: 5px;
		top: -8px;
		left: -8px;
	}
}

/* Regional atlas marker (West and Central Africa, assets/js/landing.js): a dashed amber ring with
   a small diamond in the middle, so it reads as an area rather than one country, and it doesn't
   pulse. The holder is centred on the coordinate, so cancel the country markers' offsets. */
#chartdiv .map-marker.map-marker-region {
	margin: 0;
}
.map-marker-region .region-ring {
	position: absolute;
	width: 44px;
	height: 44px;
	top: -22px;
	left: -22px;
	border: 2px dashed #ffb300;
	border-radius: 50%;
	background: rgba(255, 179, 0, 0.18);
}
.map-marker-region .region-core {
	position: absolute;
	width: 10px;
	height: 10px;
	top: -5px;
	left: -5px;
	background: #ffb300;
	transform: rotate(45deg);
}
@media (min-width: 768px) {
	.map-marker-region .region-ring {
		width: 26px;
		height: 26px;
		top: -13px;
		left: -13px;
	}
	.map-marker-region .region-core {
		width: 7px;
		height: 7px;
		top: -3.5px;
		left: -3.5px;
	}
}

/* The globe picture is pinned to the bottom of the map area at a fixed size, so the top of the
   globe is always 240px above the bottom (160 of its 600px, scaled 1.5x). The line and the
   "Select country/region" list below are sized to sit inside that curve at every screen width. */
img#intro_bg {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: auto;
	height: 900px;
	height: max(900px, 42.86vw); /* wider than 2100px: grow so it still fills the width */
	transform: translateX(-50%);
}
#intro_wrapper hr {
	margin-top: 70px;
	margin-bottom: 0;
	border-top-color: #fffffe;
}
#intro_wrapper #date_wrapper {
	padding: 22px 0 0;
}
#intro_wrapper.section.short {
	padding-bottom: 72px;
}
/* "Select country/region": an h2 (the level under the h1 logo) styled as a small spaced-out title. */
.atlas-list-title {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 2px;
	word-spacing: 5px;
	color: #fffffe;
}
.atlas-links {
	max-width: 760px; /* two lines, so the ends stay inside the curve of the globe */
	margin: 0 auto;
	line-height: 1.8;
	text-wrap: balance;
}
.atlas-list-title, .atlas-links a { /* readable over the bright land of the globe */
	text-shadow: 0 1px 2px rgba(0,0,0,0.9), 0 0 8px rgba(0,0,0,0.8);
}
#footer_wrapper {
	padding: 20px 0;
	background: #323232;
}
#legal_text, ul.social-icons li, #footer_links a, .atlas-links a {
	color: #fefdfe;
}
#legal_text {
	font-size: 14px;
}
ul.social-icons {
	margin: 0 0 10px;
	padding: 0;
	list-style-type: none;
	display: inline-block;
}
ul.social-icons li {
	position: relative;
	display: inline-block;
	font-size: 25px;
	margin: 0 10px;
	color: #fefdfe;
}
ul.social-icons li a {
	position: absolute;
	width: 100%;
	height: 40px;
	top: 0;
	left: 0;
	text-indent: -9999px;
}
#footer_links a, .atlas-links a {
	display: inline-block;
	padding-left: 5px;
	margin-right: 5px;
	border-left: 1px solid #fefdfe;
	cursor: pointer;
}
#footer_links a:first-child, .atlas-links a:first-child,
#footer_links a.line-start, .atlas-links a.line-start { /* line-start: set by assets/js/landing.js on links that wrap to a new line */
	border-left: none;
}
ul.social-icons li, #footer_links a, .atlas-links a {
	-webkit-transition: color 300ms ease;
	-moz-transition: color 300ms ease;
	-ms-transition: color 300ms ease;
	-o-transition: color 300ms ease;
	transition: color 300ms ease;
}
ul.social-icons li:hover, #footer_links a:hover, .atlas-links a:hover {
	color: #a0a0a0;
	text-decoration: none;
}
/* Over the bright globe the grey above is hard to read, so the country links stay white and get
   an underline instead. */
.atlas-links a:hover, .atlas-links a:focus {
	color: #fefdfe;
	text-decoration: underline;
}


@media (max-width: 767px) {
	.atlas-list-title {
		margin-bottom: 10px;
	}
	p {
		font-size: 16px;
	}
	.section.short {
		padding: 10px 0;
	}
	.section {
		position: relative;
		padding: 40px 0;
	}
	#intro_wrapper hr {
		margin-top: 50px;
		margin-bottom: 0;
	}
	#intro_wrapper.section.short {
		padding-bottom: 40px;
	}
	.atlas-links {
		line-height: 1.6;
	}
	/* Phones: assets/js/landing.js zooms the map in on the atlas countries, so a shorter box fits it.
	   Full screen width, with the bottom faded out so the land doesn't stop in a hard line above the globe. */
	#intro_wrapper #chartdiv {
		height: 380px;
		width: calc(100% + 30px);
		margin: 0 -15px;
		-webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent);
		mask-image: linear-gradient(to bottom, #000 80%, transparent);
	}
}