/************************************************************************************
smaller than 980
*************************************************************************************/
@media screen and (max-width: 980px) {

	/* pagewrap */
	#pagewrap {
		width: 95%;
	}

	/* embedded videos */
	.video embed,
	.video object,
	.video iframe {
		width: 100%;
		height: auto;
		min-height: 300px;
	}

	/* Main Header */

	#banner .brand {
		width: 45%;
	}

	#banner .brand a {
		background: url(../images/logo@2x.png) center center no-repeat;
		background-size: 100% auto;
		width: 100%;
	}

	#banner nav {
		text-align: right;
		width: 55%;
	}

	#main-nav li.icon {
		margin: 0;
		padding: 0;
		width: 28%;
	}

	#main-nav li.icon a {
		background-size: 60px auto !important;
		background-position: center top !important;
		height: auto;
		padding: 72px 0 0 0 !important;
		text-align: center;
		line-height: 1em;
		width: 100%;
	}

}

/************************************************************************************
smaller than 650
*************************************************************************************/
@media screen and (max-width: 650px) {

	/* content */
	#content {
		width: auto;
		float: none;
		margin: 0;
	}

	figure.one-third {
		max-width: 300px;
	}


	/* embedded videos */
	.video embed,
	.video object,
	.video iframe {
		min-height: 250px;
	}

	/* Main Header */
	#banner {
		padding: 25px 0 !important;
		text-align: center;
	}

	#banner .brand {
		float: none;
		margin: 0;
		text-align: center;
		width: 100%;
	}

	#banner .brand a {
		background-size: 90% auto;
		display: block;
		margin: 0 auto 10px auto;
		max-width: 450px;
		height: 80px;
	}

	#banner .brand a:hover {
		border: 0;
	}

	#banner h1 {
		margin: 0 auto !important;
	}

	#banner nav {
		float: none;
		margin: 0;
		text-align: center;
		padding: 0;
		width: 100%;
	}

	#man-nav {
		margin: 0 auto;
	}

	#main-nav li.icon {
		margin: 0;
		padding: 0;
		width: 25%;
	}

	#main-nav li.icon a {
		background-size: 60px auto !important;
		background-position: center top !important;
		height: auto;
		padding: 72px 0 0 0 !important;
		text-align: center;
		line-height: 1em;
		width: 100%;
	}

	#main-nav li.icon-infograph a {
		background: url(../images/icon-infograph@2x.png) no-repeat;
	}

	#main-nav li.icon-map a {
		background: url(../images/icon-map@2x.png) no-repeat;
	}

	#main-nav li.icon-timeline a {
		background: url(../images/icon-timeline@2x.png) no-repeat;
	}

	#main-nav li.current a span {
		border-bottom: 3px solid #c6c6c6;
	}

	#main-nav li.current a:hover {
		color: #000;
	}

	#main-nav li a {
		color: #000;
		display: block;
		font-size: 1.1em;
		height: 93px;
		line-height: 93px;
		text-decoration: none;
	}

}

/************************************************************************************
smaller than 560
*************************************************************************************/
@media screen and (max-width: 480px) {

	/* disable webkit text size adjust (for iPhone) */
	html {
		-webkit-text-size-adjust: none;
	}

	#banner {
		padding: 20px 0 !important;
	}

	#banner .brand a {
		margin: 0 auto;
		max-width: 300px;
		height: auto;
	}

	#banner h1 {
		margin: 0 auto !important;
	}

	#main-nav li.icon {
		width: 28%;
	}

	#main-nav li.icon a {
		background-size: 50px auto !important;
		padding: 60px 0 0 0 !important;
	}

	figure.one-third {
		max-width: 100%;
	}

}