@import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&subset=latin,cyrillic-ext,cyrillic);
@import url(https://fonts.googleapis.com/css?family=Forum&subset=latin,cyrillic);
@import url(https://fonts.googleapis.com/css?family=Jura:400,300,500,600);

#header a {
	position: absolute;
	right: 10px;
	top: 10px;
}

#infographics {
	background-color: #e5e5e5;
	bottom: 0;
	display: none;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 100;
}

#infographics .infoDetails {
	background-color: #303235;
	background-color: rgba(48, 50, 53, 0.7);
	bottom: 30%;
	color: #f1f1f1;
	display: none;
	font-family: 'MagistralC', 'Jura';
	padding: 1.3%;
	position: absolute;
	right: 3%;
	width: 19%;
	z-index: 50;
}
	#infographics .infoDetails .title {
		color: #f1f1f1;
		display: block;
		font-size: 24px;
		margin-bottom: 10px;
		text-transform: uppercase;
	}
	#infographics .infoDetails .dates {
		border-bottom: 1px solid #f1f1f1;
		color: #f1f1f1;
		display: block;
		font-size: 12px;
		padding-bottom: 7%;
	}
	#infographics .infoDetails .total {
		color: #f1f1f1; 
		display: block;
		font-size: 14px;
		padding-top: 7%;
	}
	#infographics .infoDetails .num {
		color: #f1f1f1;
		display: block;
		font-size: 40px;
	}
	
#infographics .line1 {
	background-color: #b2083d;
	bottom: 5%;
	display: none;
	left: 50%;
	position: absolute;
	top: 50%;
	width: 1px;
	z-index: 2;
}
#infographics .line2 {
	background-color: #b2083d;
	bottom: 5%;
	display: none;
	height: 1px;
	left: 50%;
	position: absolute;
	right: 13%;
	z-index: 2;
}
#infographics .line3 {
	background-color: #b2083d;
	bottom: 5%;
	display: none;
	position: absolute;
	right: 13%;
	top: 70%;
	width: 1px;
	z-index: 2;
}
#infographics .infoYears {
	bottom: 6%;
	font-family: 'Forum';
	left: 0;
	position: absolute;
	right: 0;
	text-align: center;
	z-index: 10;
}
	#infographics .infoYears nav {
		display: block;
		margin: 0 auto;
	}
		#infographics .infoYears nav a {
			border-bottom: 6px solid #303235;
			display: inline-block;
			font-size: 20px;
			height: 45px;
			margin: 0 0 0 1%;
			padding: 9px 0 0 0;
			text-align: center;
			width: 13%;
		}
			#infographics .infoYears nav a:hover {
				cursor: default;
			}
			#infographics .infoYears nav a.active {
				background-color: #b2083d;
				border-bottom: 6px solid #b2083d;
				color: #eeeeee;
			}

.infoList .item {
	position: absolute;
	z-index: 5;
}
	.infoList .item {
		cursor: pointer;
		display: block;
		position: absolute;
	}
		.infoList .item .battleCircle {
			background-color: #66afd3;
			border-radius: 100%;
			display: block;
			position: relative;
		}
		.infoList .item .battleTitle {
			display: block;
			font-family: 'MagistralC', 'Jura';
			font-size: 14px;
			left: 110%;
			position: absolute;
			top: 20%;
			width: 200px;
		}
			.infoList .item .battleTitle .title {
				display: block;
				font-size: 14px;
				text-transform: uppercase;
				white-space: nowrap;
				width: 200px;
			}
			.infoList .item .battleTitle .dates {
				display: block;
				font-size: 12px;
				white-space: nowrap;
				width: 200px;
			}
			.infoList .item .battleTitle .battleDescription {
				display: none;
			}
			.infoList .item.right .battleTitle {
				left: auto;
				right: 110%;
				text-align: right;
			}
		.infoList .item:hover .battleCircle,
		.infoList .item.active .battleCircle {
			background-color: #b2083d;
		}

.infoList .item.battle-3 {
	left: 40%;
	top: 20%;
}
.infoList .item.battle-3 .battleCircle {
	height: 4em;
	width: 4em;
}

.infoList .item.battle-4 {
	left: 60%;
	top: 27%;
}
.infoList .item.battle-4 .battleCircle {
	height: 3em;
	width: 3em;
}
#pageTitle1 {
  display: none;
}