/* PRELOAD */
#loader {
  overflow: hidden;
  background:#333;
  margin:0px auto;
  height:60%;
  width:90%;
  padding:15% 5%;
  position:absolute;
  z-index:4;
}

#dots {
  margin:0px auto;
  width:440px;
}
#dots2 {
  margin:50% auto;
  width:220px;
}
#dots2 .s {
  background: #333;
}
.s {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  float: left;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
  background: #ffdd33;
}
.s:nth-child(n+2) {
  margin-left: 72px;
}
#dots2 .s:nth-child(n+2) {
  margin-left: 36px;
}
#dots .s:nth-child(1) { -webkit-animation: r5 2s 0s ease-out infinite; -moz-animation: r5 2s 0s ease-out infinite; animation: r5 2s 0s ease-out infinite; }
#dots .s:nth-child(2) { -webkit-animation: r5 2s 0.25s ease-out infinite; -moz-animation: r5 2s 0.25s ease-out infinite; animation: r5 2s 0.25s ease-out infinite; }
#dots .s:nth-child(3) { -webkit-animation: r5 2s 0.5s ease-out infinite; -moz-animation: r5 2s 0.5s ease-out infinite; animation: r5 2s 0.5s ease-out infinite; }
#dots .s:nth-child(4) { -webkit-animation: r5 2s 0.75s ease-out infinite; -moz-animation: r5 2s 0.75s ease-out infinite; animation: r5 2s 0.75s ease-out infinite; }
#dots .s:nth-child(5) { -webkit-animation: r5 2s 1s ease-out infinite; -moz-animation: r5 2s 1s ease-out infinite; animation: r5 2s 1s ease-out infinite; }
#dots .s:nth-child(6) { -webkit-animation: r5 2s 1.25s ease-out infinite; -moz-animation: r5 2s 1.25s ease-out infinite; animation: r5 2s 1.25s ease-out infinite; }

#dots2 .s:nth-child(1) { -webkit-animation: c5 2s 0s ease-out infinite; -moz-animation: c5 2s 0s ease-out infinite; animation: c5 2s 0s ease-out infinite; }
#dots2 .s:nth-child(2) { -webkit-animation: c5 2s 0.25s ease-out infinite; -moz-animation: c5 2s 0.25s ease-out infinite; animation: c5 2s 0.25s ease-out infinite; }
#dots2 .s:nth-child(3) { -webkit-animation: c5 2s 0.5s ease-out infinite; -moz-animation: c5 2s 0.5s ease-out infinite; animation: c5 2s 0.5s ease-out infinite; }
#dots2 .s:nth-child(4) { -webkit-animation: c5 2s 0.75s ease-out infinite; -moz-animation: c5 2s 0.75s ease-out infinite; animation: c5 2s 0.75s ease-out infinite; }
#dots2 .s:nth-child(5) { -webkit-animation: c5 2s 1s ease-out infinite; -moz-animation: c5 2s 1s ease-out infinite; animation: c5 2s 1s ease-out infinite; }

@-webkit-keyframes r5 {
  0% { box-shadow: 0 0 8px 6px rgba(255, 217, 26, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(255, 217, 26, 0); }
  10% { box-shadow: 0 0 8px 6px #ffd91a, 0 0 12px 10px #333, 0 0 12px 14px #ffd91a; }
  100% { box-shadow: 0 0 8px 6px rgba(255, 217, 26, 0), 0 0 0px 40px #333, 0 0 0px 40px rgba(255, 217, 26, 0); }
}
@-moz-keyframes r5 {
  0% { box-shadow: 0 0 8px 6px rgba(255, 217, 26, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(255, 217, 26, 0); }
  10% { box-shadow: 0 0 8px 6px #ffd91a, 0 0 12px 10px #333, 0 0 12px 14px #ffd91a; }
  100% { box-shadow: 0 0 8px 6px rgba(255, 217, 26, 0), 0 0 0px 40px #333, 0 0 0px 40px rgba(255, 217, 26, 0); }
}
@keyframes r5 {
  0% { box-shadow: 0 0 8px 6px rgba(255, 217, 26, 0), 0 0 0px 0px #333, 0 0 0px 0px rgba(255, 217, 26, 0); }
  10% { box-shadow: 0 0 8px 6px #ffd91a, 0 0 12px 10px #333, 0 0 12px 14px #ffd91a; }
  100% { box-shadow: 0 0 8px 6px rgba(255, 217, 26, 0), 0 0 0px 40px #333, 0 0 0px 40px rgba(255, 217, 26, 0); }
}

@-webkit-keyframes c5 {
  0% { box-shadow: 0 0 4px 3px #333, 0 0 0px 0px #E5E5E5, 0 0 0px 0px #333; }
  10% { box-shadow: 0 0 4px 3px #333, 0 0 6px 5px #E5E5E5, 0 0 6px 5px #333; }
  100% { box-shadow: 0 0 4px 3px #333, 0 0 0px 20px #E5E5E5, 0 0 0px 20px #333; }
}
@-moz-keyframes c5 {
  0% { box-shadow: 0 0 4px 3px #333, 0 0 0px 0px #E5E5E5, 0 0 0px 0px #333; }
  10% { box-shadow: 0 0 4px 3px #333, 0 0 6px 5px #E5E5E5, 0 0 6px 5px #333; }
  100% { box-shadow: 0 0 4px 3px #333, 0 0 0px 20px #E5E5E5, 0 0 0px 20px #333; }
}
@keyframes c5 {
  0% { box-shadow: 0 0 4px 3px #333, 0 0 0px 0px #E5E5E5, 0 0 0px 0px #333; }
  10% { box-shadow: 0 0 4px 3px #333, 0 0 6px 5px #E5E5E5, 0 0 6px 5px #333; }
  100% { box-shadow: 0 0 4px 3px #333, 0 0 0px 20px #E5E5E5, 0 0 0px 20px #333; }
}

/* MAP */
#container-map {
	width:100%; 
	height:100%;
	overflow:hidden; 
	background:#272622; 
	position:relative;
}
#transform {
	position: relative; 
	width: 100%; 
	height: 100%;
	/*max-width:1950px;*/
	max-width:100%;
}
#map-image {
	position: absolute; 
	width:100%; 
	top: 0px; 
	left: 0px; 
	pointer-events: none; 
}
.marker, .button, #map-return {	
	-webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition:all 0.2s ease-in-out;
	transition:all 0.2s ease-in-out;
}
.outline {
	position:relative;
	z-index:5;
	display:none;
	opacity: 0;
}
.outline img {
	width:100%;
}
#colombia-outline {
	width:3.45%;
}
#nicaragua-outline {
	width:1.6%;
}
#mali-outline {
	width:4.5%;
}
#burkinafaso-outline {
	width:2.3%;
}
#ouagadougou { width:2%; text-align:right; }
#namibia-outline {
	width:3.8%;
}
#philippines-outline {
	width:2.83%;
}
.marker {
	cursor:pointer; 
	top:-80px; 
	width: 15%; 
	position: absolute; 
	z-index:11;
	color:#FFF;
	text-transform:uppercase;
	font-weight:600;
	letter-spacing:1px;
	font-family:'Titillium Web',Arial, Helvetica, sans-serif;
	font-size:20px;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
}
.marker:hover, .marker.active {
	color:#DEB406 !important;
}
.marker img {
	width:22px;
	position:relative;
	top:2px;
}

.marker.country {
	font-size:5px;
	line-height:5px;
	letter-spacing:0px;
	width: 4%; 
	text-shadow:0px 1px 1px #000
}
.marker.country span {
	font-size:3px;
}

.marker.country#calibre {
	width:6%;
}
.marker.country#el-limon, .marker.country#el-pavon {
	text-align:right;
	width:3%;
}
.marker.country#el-limon img {
	float:right;
	margin:-1px 0 4px 2px;
}
.marker.country#el-pavon img {
	float:right;
	margin:10%  0 0px 2px;
}
.marker.country img {
	width:5px;
	top:-0.25px;
	margin:0 2px 2px 0;
	float:left;
}
.capital {
	cursor:default;
	position: absolute; 
	z-index:10;
	color:#000;
	text-transform:uppercase;
	font-weight:600;
	font-family:'Titillium Web',Arial, Helvetica, sans-serif;
	font-size:3px;
	/*text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);*/
}
#map-return {
	opacity: 0;
	width:32px;
	color:#222;
	background:#D4D4D4;
	border:1px solid #222;
	position:absolute;
	top:5px;
	right:5px;
	z-index:22;
	text-align:center;
	font-family:'Titillium Web',Arial, Helvetica, sans-serif;
	font-size:30px;
	padding:0 0 5px 0;
	line-height:30px;
	cursor:pointer;
}
#map-return:hover {
	color:#DEB406;
	border:1px solid #DEB406;
	background:#222;
}
#content-loader {
	position:absolute;
	height:100%;
	width:100%;
	text-align:center
}
#map-content {
	color:#333;
	height:100%;
	border-right:3px solid #DEB406;
	left:-35%;
	width:33%;
	position:absolute;
	z-index:33;
	background:#E5E5E5; 
	overflow:auto;
	-webkit-transform: translateZ(0); 
	/*padding:1%;*/
	font-family:'Titillium Web',Arial, Helvetica, sans-serif;
	font-size:15px;
	line-height:190%;
}
#map-content ul li { line-height:125%; margin-bottom:20px; }
#show-content { padding:4% 5% !important }
#show-content h1, #show-content h1 a {
	font-family:'Titillium Web',Arial, Helvetica, sans-serif;
	color:#555;
	text-transform:uppercase;
}
#show-content h1#structure { display:none } 
#show-content h2 {
	font-family:'Titillium Web',Arial, Helvetica, sans-serif;
	color:#555;
	font-size:24px;
}
#show-content p, #show-content h1 {
	margin-bottom:3.5%;
}
#show-content p {
    line-height: 125%;
}
#show-content .map-image { width:100% }
#buttons-type {
	width:200px;
	position:absolute;
	top:22%;
	z-index:22;
	display:table;
}
@media screen and (max-height: 900px) {
#buttons-type {transform-origin: top left; transform: scale(0.7);}	
}
#buttons-type .button {
	background:#747474;
	color:#FFF;
	text-transform:uppercase;
	font-weight:600;
	letter-spacing:1px;
	min-height:37px;
	width:180px;
	margin-top:3px;
	font-family:'Titillium Web',Arial, Helvetica, sans-serif;
	font-size:18px;
	padding:15px 10px 5px 10px;
	cursor:pointer;
}
#buttons-type .button:hover, #buttons-type .button.active {
	background:#DEB406;
}
#buttons-type .button img {
	margin-top:-7px;	
	float:left;
}
#buttons-type .button#producing img, #buttons-type .button#head-office img {
	margin-top:-3px;	
}
#buttons-type .button span {
	float: right;
	width: 130px;
	text-align: center;
}
#buttons-type .button#country-profile {
	padding:10px 10px 5px 10px;
	line-height:20px;
	min-height:42px;
	display:none;
}
#buttons-type .button#country-profile img {
	margin-top:2px;	
}


#buttons-type .expand {
	display:none;
	border-top:1px solid #E2CA66;
	background:#C49D00;
	font-size:13px;
	color:#FFF;
	text-transform:uppercase;
	font-family:'Titillium Web',Arial, Helvetica, sans-serif;
}
#buttons-type .expand p {
	padding:10px;
	margin:0px;
}
#buttons-type .expand a {
	color:#FFF;
}
#buttons-type .expand a:hover {
	color:#CCC;
}
#buttons-type .expand hr {
	margin:0;
	border: 0 none;
	border-bottom: 1px solid #E2CA66;
}
.marker.inactive {
	color:#000;
	text-shadow:none;
}
.marker.nicaragua.inactive {
	color:#666;
}
.marker.nicaragua.inactive#el-pavon {
	color: #333;
}
.marker.inactive:hover {
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
}
#managua .line {
	width: 15px;
	border-top: 1px solid #FFF;
	-webkit-transform: translateY(2px) translateX(-1px) rotate(-45deg) scaleY(0.5); 
	transform: translateY(2px) translateX(-1px) rotate(-45deg) scaleY(0.5); 
	position: absolute;
	top:4px;
	left:-11px;
}
#managua .label {
	top:12px;
	left:-25px;
	color:#FFF;
	position:absolute;
}
#bamako .line {
	width: 10px;
	border-top: 1px solid #000;
	-webkit-transform: translateY(2px) translateX(-1px) rotate(-45deg) scaleY(0.5); 
	transform: translateY(2px) translateX(-1px) rotate(-45deg) scaleY(0.5); 
	position: absolute;
	top:-3px;
	left:12px;
}
#bamako .label {
	top:-6px;
	left:21px;
	position:absolute;
}
#windhoek { font-size:2.8px; }
#manila { color:#FFF }

.country-link { font-size:13px; }

.country-link-button, .country-link-button:hover { 
	background:#DAB52A;
	color:#FFF;
	font-size:18px;
	padding:14px 12px  14px 52px;
	text-transform:uppercase; 
	display:block;
	float:left;
	line-height:100%;
	font-weight:bold;
	margin:0 7px 30px 0;
	min-width: 115px;
}
h3.project-name {
	color:#333;
	margin-top:20px;
	text-transform:uppercase;
	padding-left:40px;
	background:url(icon_project.png) no-repeat 0 2px;
}
.country-link-button.producing, .country-link-button.development { 
	background:url(icon_develep_producing.jpg) no-repeat 13px 7px #DAB52A;
}
.country-link-button.exploration {
	background:url(icon_exploration.jpg) no-repeat 15px 8px #DAB52A;
	margin-right:0;
}
hr.white {
	clear:both;
	background: #FFF;
	border: none;
	height: 1px;
	margin-top:20px;
}


@media screen and (max-width:1224px) {
	.marker {
		width:20%;
		letter-spacing:0px;
		font-size:16px;
	}
	.marker img {
		width:25px;
		top:3px;
	}
	.marker.country {
		font-size:3px;
		line-height:3px;
		letter-spacing:0px;
		width: 6%; 
		text-shadow:0px 1px 1px #000
	}
	.marker.country span {
		font-size:2px;
	}
	.marker.country img {
		top:0px;
	}
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
	#philippines-outline {
		left:79.2% !important;
		width:2.68% !important;
	}
	#nicaragua-outline {
		left:22.39% !important;
	}
	#namibia-outline {
		left:50% !important;
	}
}
@media screen and (max-width:768px) {
	#buttons-type {
		width:100%;
		bottom:0 !important;
		top:auto;
		text-align:center;
	}
	#buttons-type .button {
		width:auto;
		display:inline-block;
		margin-top:0px;
		font-size:12px;
		padding:3px 5px;
		margin-right:2px;
		min-height:5px;
	}
	#buttons-type .button img {
		display:none;
	}
	#buttons-type .button#producing img, #buttons-type .button#head-office img {
		margin-top:-3px;	
	}
	#buttons-type .button span {
		float: none;
		width: auto;
		text-align: center;
	}
	#buttons-type .expand, #country-profile {
		display:none !important;
	}
}
@media screen and (max-width:690px) {
	.marker {
		width:25%;
		font-size:14px;
	}
	.marker img {
		width:15px;
		top:1px;
	}
}
@media screen and (max-width:600px) {
	.marker {
		width:20%;
		font-size:12px;
	}
	.marker img {
		width:15px;
		top:1px;
	}
}
@media screen and (max-width:480px) {
	.marker {
		width:20%;
		font-size:9px;
	}
	.marker img {
		width:12px;
		top:1px;
	}
}