/* ===== Primary Styles ========================================================
   Author: Dan Mitchell / Creative Edge Design Ltd
   ========================================================================== */

@import url('../fonts/opensans/stylesheet.css');
@import url('../fonts/digital/stylesheet.css');


section:before, section:after { content: " "; display: table; }
section:after { clear: both; }

nav:before, nav:after { content: " "; display: table; }
nav:after { clear: both; }

article:before, article:after { content: " "; display: table; }
article:after { clear: both; }

.clear:before, .clear:after { content: " "; display: table; }
.clear:after { clear: both; }

.container:before, .container:after { content: " "; display: table; }
.container:after { clear: both; }

.wrapper:before, .wrapper:after { content: " "; display: table; }
.wrapper:after { clear: both; }

.panel:before, .panel:after { content: " "; display: table; }
.panel:after { clear: both; }

ul.challenge a:before, ul.challenge a:after { content: " "; display: table; }
ul.challenge a:after { clear: both; }


html {
	background: #fff;
	color: #787878;
	font-size: 87.5%; /* 14px */
}

body {
	background: #fff;
	font-family: 'open_sansregular', Arial, Helvetica, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'open_sansregular', Arial, Helvetica, sans-serif;
	font-weight: normal;
	line-height: 1.2em;
}

h1 {
	font-size: 60px; font-size: 4.286rem;
	margin: 0 0 0.3em 0;
}

strong {
	font-weight: normal;
	color: #ef652d;
}

a,
a strong {
	-webkit-transition: all 150ms ease;
	-moz-transition: all 150ms ease;
	-ms-transition: all 150ms ease;
	-o-transition: all 150ms ease;
	transition: all 150ms ease;
}

a,
a:visited {
	color: #ef652d;
	text-decoration:none;
}
a:hover {
	color: #ef652d;
	text-decoration:underline;
}

hr {
	border: none;
	height: 1px;
	background: #e1e1e1;
	margin: 1em 0;
}

img {
	max-width: 100%;
	height: auto;
}

.col,
.cols{
	clear: none;
	display: inline;
	float: left;
	margin: 0;
	margin-right: 3.06749%;
	padding: 0;
}
	.one    { width: 5.52147%; }
	.two    { width: 14.11042%; }
	.three  { width: 22.69938%; }
	.four   { width: 31.28834%; }
	.five   { width: 39.8773%; }
	.six    { width: 48.46625%; }
	.seven  { width: 57.05521%; }
	.eight  { width: 65.64417%; }
	.nine   { width: 74.23312%; }
	.ten    { width: 82.82208%; }
	.eleven { width: 91.41104%; }
	.twelve { width: 100%; margin-right: 0; }
.col.last,
.cols.last {
	margin-right:0;
}

.wrapper {
	position:relative;
	width: 1078px; width: 77rem;
	margin: 0 auto;
	background: #fff;
}

header {
	position:relative;
	margin-bottom: 14px; margin-bottom: 1rem;
}
	header .left {
		float: left;
	}
	header h6 {
		margin:0 0 0.15em 0;
		padding:0;
		line-height: 1.2em;
		font-size: 65px;
		font-weight: normal;
	}
		header h6 a,
		header h6 a:visited {
			display:block;
			text-decoration:none;
			color: #959595;
		}
			header h6 a .m { color: #555; }
			header h6 a .d { color: #ef652d; }
			header h6 a .y { color: #d7d7d7; }
		header h6 a:hover {
			text-decoration:none;
		}
	header p {
		margin:0 0 0 0.8em;
	}
		header p .m { color: #555; }
		header p .d { color: #ef652d; }
	header .wateraidlogo {
		display:block;
		position: absolute;
		right:0;
		top: 10%;
	}
		header .wateraidlogo span {
			display:block;
			text-align:center;
			margin: 0 0 5px 0; margin: 0 0 0.357rem 0;
		}
		header .wateraidlogo:hover {
			text-decoration:none;
		}
	header nav {
		font-size: 13px; font-size: 0.929rem;
		border-bottom: 1px solid #f18624;
		background: #000;
		margin: 1em 0 0 0;
	}
		header nav ul {
			list-style:none;
			margin:0;
			padding:0;
		}
			header nav li {
				float: left;
				padding:0;
				margin:0;
				position:relative;
			}
				header nav a,
				header nav a:visited {
					display:block;
					text-decoration:none;
					text-transform: uppercase;
					line-height: 1.2em;
					color: #fff;
					border-bottom:2px solid #000;
					padding: 10px 10px; padding: 0.714rem 0.714rem;
				}
				header nav a:hover,
				header nav a.selected {
					color: #fff;
					text-decoration:none;
					background: #464646;
					border-bottom:2px solid #f18624;
				}
		header nav ul ul {
			position:absolute;
			z-index: 5;
			border-bottom: 1px solid #f18624;
			display:none;
		}
			header nav ul ul ul {
				left:100%;
				top:0;
			}
		header nav li:hover > ul {
			display:block;
			columns: 2;
			column-gap: 0;
		}
			header nav ul ul li {
				float:none;
			}
				header nav ul ul a {
					background: #000;
					padding-right: 2em;
					padding-top:0.5em;
					padding-bottom:0.5em;
					min-width: 13em;
				}
				header nav ul ul a:hover,
				header nav ul ul a.selected {
					border-bottom:2px solid #000;
				}

.right {
	text-align:right;
	line-height: 2;
	padding-top: 10px;
}
	.right div {
		text-align:center;
	}
	
footer {
	font-size: 20px; font-size: 1.429rem;
	margin-top: 14px; margin-top: 1rem;
}
	footer section {
		position:relative;
	}
	footer .top {
		background: #464646;
		color: #fff;
		padding: 1em;
		text-align:right;
	}
		footer .top p {
			float: left;
			width: 60%;
			margin: 0;
		}
		footer .top a {
			color: #fff;
			text-decoration:none;
			margin-left: 1em;
		}
		footer .top a:hover {
			text-decoration:none;
			color: #ef652d;
		}
	footer .middle {
		background: #a2a2a2;
		color: #fff;
		padding: 0.5em 1em;
	}
		footer .middle img {
			vertical-align:middle;
			margin-left: 1em;
		}
	footer .bottom {
		color: #959595;
		padding: 0.5em 1em;
	}
		footer .bottom p {
			font-size: 12px; font-size: 0.857rem;
			margin: 0;
		}
	
#main {
}

.content-home {
	width: 80%;
}
	.content-home p {
		font-size: 20px; font-size: 1.429rem;
	}

.headers {
	position:relative;
	width: 100%;
	min-height: 45px; min-height: 3.214rem;
}
	.headers h6 {
		display:block;
		position: absolute;
		z-index:2;
		left:0;
		top:0;
		padding: 10px 20px; padding: 0.714rem 1.429rem;
		width: 120px; width: 8.571rem;
		line-height: 1.2em;
		font-weight: normal;
		font-size: 14px; font-size: 1rem;
		margin:0;
		color: #fff;
		background: #464646;
		text-transform:uppercase;
		border-bottom: 3px solid #f18624;
	}
	
.panel {
	position:relative;
	margin: 0 0 1em 0;
}
.panel.panel-bordered {
	border-bottom: 4px solid #898989;
}
	.panel.panel-bordered:hover {
		border-color: #f18624;
	}
.panel:last-child {
	margin-bottom: 0;
}
	.panel-images a {
		position:relative;
		display:block;
		height: 100%;
		min-height: 50px; min-height: 3.571rem;
		background: #cdcdcd;
		line-height: 0em;
	}
		.panel-images strong {
			display:block;
			position: absolute;
			left:0;
			top:0;
			padding: 10px 20px; padding: 0.714rem 1.429rem;
			width: 120px; width: 8.571rem;
			line-height: 1.2em;
			font-weight: normal;
			color: #fff;
			background: #464646;
			text-transform:uppercase;
			border-bottom: 3px solid #f18624;
		}
		.panel-images img {
			width: 100%;
			height: auto;
			margin:0;
			padding:0;
			line-height: 0;
		}
		.panel-images p {
			margin: 0;
			line-height: 0;
		}
	.panel-images a:hover {
		background: #bcbcbc;
	}
		.panel-images a:hover strong {
			background: #000;
			width: 70%;
		}
.panel-text {
	min-height: 50px; min-height: 3.571rem;
	background: #ababab;
	padding-top: 4em;
}
	.panel-text h6 {
		display:block;
		position: absolute;
		left:0;
		top:0;
		margin:0;
		padding: 10px 20px; padding: 0.714rem 1.429rem;
		width: 120px; width: 8.571rem;
		line-height: 1.2em;
		font-weight: normal;
		font-size: 14px; font-size: 1rem;
		color: #fff;
		background: #464646;
		text-transform:uppercase;
		border-bottom: 3px solid #f18624;
	}
	.panel-text table {
		width: 100%;
		color: #fff;
		margin: 0 0 1em 0;
	}
		.panel-text table td {
			padding: 0 1em;
			vertical-align:middle;
		}
		.panel-text table td.datacell {
			font-size: 27px; font-size: 1.929rem;
			font-family: 'ds-digitalnormal';
		}

.panel-text.panel-bg-white {
	background: #e2e2e2; /* Old browsers */
	background: -moz-linear-gradient(top,  #e2e2e2 0%, #ffffff 20%, #ffffff 80%, #e2e2e2 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(20%,#ffffff), color-stop(80%,#ffffff), color-stop(100%,#e2e2e2)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #e2e2e2 0%,#ffffff 20%,#ffffff 80%,#e2e2e2 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #e2e2e2 0%,#ffffff 20%,#ffffff 80%,#e2e2e2 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #e2e2e2 0%,#ffffff 20%,#ffffff 80%,#e2e2e2 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #e2e2e2 0%,#ffffff 20%,#ffffff 80%,#e2e2e2 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#e2e2e2',GradientType=0 ); /* IE6-9 */
}

.panel-content-twitter {
	background: url('../images/twitter.png') left center no-repeat;
	width: 90%;
	margin: 0 auto 2em auto;
}
	.panel-content-twitter p {
		margin:0.5em 0 0.5em 8em;
		font-family: 'open_sansbold';
	}
		.panel-content-twitter a,
		.panel-content-twitter a:visited {
			color: #fff;
			text-decoration: underline;
			font-weight: normal;
			font-family: 'open_sansregular';
		}
		.panel-content-twitter a:hover {
			text-decoration:none;
			color: #ef652d;
		}

.panel-content-money {
	color: #fff;
	margin: 0 auto 1em auto;
	width: 95%;
}
	.panel-content-money strong {
		display:block;
		color: #fff;
		font-size: 84px; font-size: 6rem;
		letter-spacing:-1px;
		line-height:1em;
	}
	
ul.challenge {
	list-style:none;
	margin:0 0 2em 0;
	padding:0;
	color: #fff;
	border-bottom: 1px solid #e0e0e0;
}
	ul.challenge li {
		float: none;
		padding:0;
		margin:0;
	}
		ul.challenge a {
			display:block;
			color:  #959595;
			text-decoration:none;
			border-top: 1px solid #e0e0e0;
			padding: 0.3em 0.5em 0 0.5em;
			vertical-align:middle;
		}
			ul.challenge a em {
				font-style: normal;
				font-size: 25px; font-size: 1.5rem;
			}
			ul.challenge a strong {
				font-size: 25px; font-size: 1.5rem;
				font-weight: normal;
				color: #ef652d;
			}
			ul.challenge a span {
				float: left;
				line-height:30px; line-height: 2rem;
			}
			ul.challenge a span.m {
				margin-left: 0.5em;
			}
		ul.challenge a:hover {
			background: #898989;
			color: #fff;
		}
			ul.challenge a:hover em {
				color: #c2c2c2;
			}
			ul.challenge a:hover strong {
				color: #fff;
			}
	
ul.daily-moods {
	list-style:none;
	margin:0 1em;
	padding:0;
	color: #fff;
}
	ul.daily-moods li {
		float: left;
		width: 25%;
		margin: 0 0 1em 0;
		padding: 0;
		text-align:center;
	}

.article-heading-container {
	margin-bottom:1em;
	padding-bottom: 1em;
	border-bottom: 1px solid #e1e1e1;
	position:relative;
}
	.article-heading-container .cols {
		position:relative;
	}
	.article-heading-container h1 {
		margin:0;
		padding:0;
		line-height: 1em;
		font-size: 60px; font-size: 4.286rem;
		font-weight: normal;
	}
		.article-heading-container h1 a,
		.article-heading-container h1 a:visited {
			display:block;
			text-decoration:none;
			color: #959595;
		}
			.article-heading-container h1 a .m { color: #555; }
			.article-heading-container h1 a .d { color: #ef652d; }
			.article-heading-container h1 a .y { color: #d7d7d7; }
		.article-heading-container h1 a:hover {
			text-decoration:none;
		}
	.article-heading-container h2 {
		font-size: 20px; font-size: 1.429rem;
		color: #959595;
		margin: 1em 0 0 0;
	}
	
.article-container {
	border-bottom: 1px solid #e1e1e1;
	margin: 0 0 1em 0;
	padding: 0 0 1em 0;
}
	.article-container h1 {
		font-size: 14px; font-size: 1rem;
		margin: 1.25em 0 1em 0;
		font-family: 'open_sansbold';
	}
	.article-container p:last-child {
		margin-bottom: 0;
	}












.mobileheader,
.mobilefooter {
	display:none;
	font-family: Arial, Helvetica, sans-serif;
}

.mobileheader {
	position:fixed;
	z-index:9999;
	top:0;
	left:0;
	width:100%;
	height:auto;
	margin:0;
	padding:0;
	background: #464646;
	background: rgba(70,70,70,0.9);

	color: #fff;
	border-bottom: 3px solid #f18624;
	
	-webkit-box-shadow: 0 0 0.5em 0 #333;
	box-shadow: 0 0 0.5em 0 #333;
}
	.mobileheader .mobiletitle {
		text-align:center;
		font-size: 2em;
		padding: 0.75em 0;
	}
		.mobileheader .mobiletitle a,
		.mobileheader .mobiletitle a:visited {
			color: #f18624;
			text-decoration:none;
		}
			.mobileheader .mobiletitle a .m { color: #d7d7d7; }
			.mobileheader .mobiletitle a .d { color: #ef652d; }
			.mobileheader .mobiletitle a .y { color: #d7d7d7; }
		.mobileheader .mobiletitle img {
			width: 30%;
			height: auto;
			vertical-align:middle;
		}


.mobilefooter {
	position:fixed;
	z-index:9999;
	bottom:0;
	left:0;
	width:100%;
	border-top:3px solid #f18624;
	padding:0;
	background: #464646;
	background: rgba(70,70,70,0.9);
	color: #fff;
	font-size: 1em;
	text-align:center;
	-webkit-box-shadow: 0px 0px 10px 0px #333;
	box-shadow: 0px 0px 10px 0px #333;
}
	.mobilefooter .inner {
		padding:1em 0;
	}
	.mobilefooter a,
	.mobilefooter a:visited {
		color: #fff;
		text-decoration:none;
	}
	.mobilefooter a:hover {
		color: #fff;
		text-decoration:none;
	}