/*wrapper that will contain map and graphs*/
.mainWrapper {
	/*make map occupy the height of device*/
	height: 100vh;
}

/*
wrapper that will contain story, graph, texts
this has to be responsive, so as to not take out the whole page
We use media to scale width of container based on device
*/

@media (max-width: 500px) {
	.infoWrapper {
		width: 95%;
		height: 60%;
		bottom: 20px;
	}

	#sidebar {
		width: 10%;
	}
}

@media (min-width: 500px) and (max-width: 992px) {
	.infoWrapper {
		width: 40%;
		bottom: 20px;
		top: 85px;
	}

	#sidebar {
		width: 10%;
	}
}

@media (min-width: 992px) and (max-width: 1200px) {
	.infoWrapper {
		width: 35%;
		bottom: 20px;
		top: 85px;
	}

	#sidebar {
		width: 10%;
	}
}

@media (min-width: 1200px) {
	.infoWrapper {
		width: 30%;
		bottom: 20px;
		top: 85px;
	}

	#sidebar {
		width: 7%;
	}
}

.panel-image {
	width: 100px;
	display: table-cell;
	float: left;
	vertical-align: middle;
}

.panel-content {
	display: table-cell;
	/*left: : 100px;*/
	/*width: 75%;*/
	/*float: right;*/
}

#overView {
	padding-top: 85px;
}

.welcome {
	position: absolute;
	top: 85px;
	bottom: 20px;
	right: 10px;
	left: 10px;
	border-radius: 10px;
	background-color: rgba(255, 255, 255, 0.85);
	color: rgba(33, 48, 58, 0.75);
	text-align: center;
}

.vizEnlarge {
	display: none;
	position: absolute;
	top: 85px;
	bottom: 20px;
	right: 10px;
	left: 10px;
	border-radius: 10px;
	background-color: rgba(255, 255, 255, 0.85);
	color: rgba(33, 48, 58, 0.75);
	text-align: center;
}

#vizLarge {
	position: relative;
	height: 95%;
	width: 100%;

}

.infoWrapper {
	display: none;
	position: absolute;
	right: 10px;
	border-radius: 10px;
	background-color: rgba(33, 48, 58, 0.75);
	/*width: 40%;*/
	padding: 15px 5px 15px 15px;
	color: #ffffff;
}

#map-info {
	display: none;
	position: absolute;
	background-color: transparent;
	padding: 10px;
	font-size: 18px;
	top: 85px;
	left: 15px;
	color: rgba(33, 48, 58, 0.75);
	background-color: rgba(255, 255, 255, 0.85);
}

#map-canvas {
	height: 100%;
	width: 100%;
}


/*syle for sidebar for story telling*/
#sidebar {
	padding-top: 7%;
	text-align: center;
	float: right;
	height: 100%;
	font-size: 18px;
}

#sidebar a {
	color: #D6D6BD;
}

#sidebar a:active,
#sidebar a:hover {
	color: #ffffff;
}

/*syle for main story container*/
#info-container {
	float: left;
	margin: 0;
	width: 90%;
	height: 100%;
	overflow: hidden;
	position: relative;
	/*background-color: rgba(255,0,0,0.5);*/
}

.info-slide {
	position: absolute;
	width: 100%;
	height: 100%;
}

.info-content {
	width: 100%;
	height: 100%;
}

/*style for graphs*/
.viz {
	padding: 0;
	width: 100%;
	height: 50%;
}

/*styling for sections*/
#About {
	padding-top: 50px;
	padding-bottom: 50px;

}

#Data {
	padding-top: 50px;
	background-color: rgba(33, 48, 58, 0.05);
	padding-bottom: 50px;
}

#Methodology {
	padding-top: 50px;
	padding-bottom: 50px;

}

#Team {
	padding-top: 50px;
	background-color: rgba(33, 48, 58, 0.1);
	padding-bottom: 50px;
}

/*styling for social media links*/
#social-links {
	height: 33px;
	align-content: center;
	text-align: center;
}

#social-links a {
	padding-left: 15px;
	padding-right: 15px;
	font-size: 18px;
	color: grey;
}

#social-links a:active,
#social-links a:hover {
	font-size: 20px;
	color: black;
}

#yAxis text {
	font: 10px sans-serif;
	fill: white;
}

#yAxis path,
.axis line {
	fill: none;
	stroke: #fff;
	stroke-width: 2px;
}

#xAxis text {
	font: 10px sans-serif;
	fill: white;
}

#xAxis path,
.axis line {
	fill: none;
	stroke: white;
	stroke-width: 2px;
}

.svg-content {
	display: inline-block;
	/*    position: absolute;*/
	top: 0;
	left: 0;
}

#image-london {
	width: 100%;
	height: 30%;
	background-image: url("https://placespace-api.azurewebsites.net/img/london.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;

}

​ #profiles {
	height: 50px;
	width: 10px;
	overflow: hidden;
	background-color: red;
}