/* 
	Food Water Footprint CSS styling
	Minimal and responsive as fuck
	IE6 not welcome
	Chuck Aligbe
 */

/* Main CSS */

body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.25em;
}

a {
	color: rgb(50, 100, 255);
	text-decoration: none;
}

a:hover {
	color: #f09;
}

h1 {
	font-weight: 100;
	font-size: 5em;
	line-height: 1em;
	margin: 0;
}

h2 {
	line-height: 1.2em;
	font-style: italic;
}

small {
	font-size: 10px;
	line-height: 1em;
}

#main {
	margin: 0 6px;
}

header {
	margin-bottom: 2.5em;
}

header p {
	font-style: italic;
}

#intro {
	margin-bottom: 2.5em;
}

.nb {
	font-size: .75em;
}

#dropdown {
	text-align: center;
	margin-bottom: 1em;
}

#dropdown select {
	width: 200px;
	font-size: 20px;
}

#graphic {
	max-width: 700px;
	height: 600px;
	margin: 0 auto;
}

.caption {
	font-size: .875em;
}

#sources {
	font-size: .75em;
	line-height: initial;
	margin-bottom: 5em;
}

.subtitle {
	font-size: 1.1em;
	font-weight: 900;
}

#sources ul {
	list-style: none;
	padding: 0;
	padding-left: 2em;
}

footer {
	font-size: 10px;
	height: 30px;
	text-align: center;
}

footer img {
	vertical-align: middle;
}

#logo img {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
    -webkit-transition: filter 0.5s;
    transition: filter 0.5s;
}

#logo img:hover {
    -webkit-filter: grayscale(1);
    filter: grayscale(0);
}

a.ralign {
	float: right;
}

@media only screen and (max-width: 600px) {
	body {
		font-size: 14px;
	}
	
	h1 {
		font-size: 5em;
	}
	
	h2 {
		font-size: 1.5em;
	}
	
	#graphic {
		height: 90vw;
		margin-bottom: 30px;
	}
}