/* Style.css */

body	{
	font-family: 'Lato',sans-serif;
}

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

header#main_header	{
	border-bottom: 4px solid #2a70b8;

}

div.inside	{
	padding: 5px 10px 2px 10px;
}

iframe	{
	border: none;
	width: 100%;
	height: 950px;
	position: relative;
}

iframe.credits	{
	height: 3500px;
}


h3	{
	color: #2a70b8;
	font-weight: 300;
	font-family: 'Lato',sans-serif;
	margin-top: 0;
}

h3.nopad	{
	margin-bottom: 0;
}

.fifty	{
	float: left;
	display: inline-block;
	width: 50%;
}


.forty	{
	float: left;
	display: inline-block;
	width: 40%;
	margin-right: 2%;
}

.sixty	{
	width: 58%;
	float: left;
	display: inline-block;
}



article p:first-child	{
	margin-top: 0;
}

article p:last-child	{
	margin-bottom: 0;
}

#copyright	{
	display: inline-block;
	color: #727272;
	padding-left: 10px;
}



span.big	{
	font-size: 1.6em;
	color: #2a70b8;
	text-transform: uppercase;
	font-family: 'Lato', sans-serif;
	font-weight: 300;
	display: inline-block;
	margin-right: -2px;

}

span.big_letter	{
	font-size: 5.0em;
	display: inline-block;
	float: left;
	color: #2a70b8;
	text-transform: uppercase;
	font-family: 'Lato', sans-serif;
	font-weight: 100;
	padding-top: 20px;
	padding-bottom: 10px;
	margin-right: 10px;
	line-height: .3em;
}

span.medium_letter	{
	font-size: 3.6em;
	line-height: 1.0em;
	display: inline-block;
	float: left;
	color: #2a70b8;
	text-transform: uppercase;
	padding-top: 0;
	padding-bottom: 10px;
	margin-right: 10px;

}



@font-face {
    font-family: 'socicon';
    src: url('../fonts/socicon-webfont.eot');
    src: url('../fonts/socicon-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/socicon-webfont.woff') format('woff'),
         url('../fonts/socicon-webfont.ttf') format('truetype'),
         url('../fonts/socicon-webfont.svg#sociconregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

nav#social	{
    text-align: right;
    margin-right: 10px;
    margin-top: 14px;
}

nav#social a	{
padding-left: 10px;
}

.npr	{
	display: inline-block;
	width: 50px;
	position: relative;
	top: -2px;
}

.npr img	{
	margin-top: -1px;
}

.woub	{
	font-family: 'Lato',sans-serif;
	display: inline-block;
	color: #727272;
	font-size: .9em;
	position: relative;
	top: -2px;
	right: 6px;
}

.social_icons	{
	    font-family: 'socicon';
	    display: inline-block;
	    

}

nav#social a:link {outline: none; text-decoration: none; color: #727272;}
nav#social a:visited { outline: none; color: #727272;}
nav#social a:hover {outline: none; color: #2a70b8;}
nav#social a:active {outline: none; color: #2a70b8;}


nav#mobile a:link {outline: none; text-decoration: none; color: #727272;}
nav#mobile a:visited { outline: none; color: #727272;}
nav#mobile a:hover {outline: none; color: #2a70b8;}
nav#mobile a:active {outline: none; color: #2a70b8;}


nav#desktop a:link {outline: none; text-decoration: none; color: #727272;}
nav#desktop a:visited { outline: none; color: #727272;}
nav#desktop a:hover {outline: none; color: #2a70b8;}
nav#desktop a:active {outline: none; color: #2a70b8;}


.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive video{
    left:0;
    top:-1px;
    height:100%;
    width:100%;
    position:absolute;
    border: none !important;
}

div#logo	{
	float: left;
	display: inline-block;
	margin-top: -5px;
}

div#slogan	{
	float: left;
	display: inline-block;
	margin-top: 12px;
	color: #727272;
}

div#slogan h1	{
	font-size: .9em;
	margin: 0;
	font-weight: 400;
	text-transform: uppercase;
	margin-left: 15px;
}

div#slogan h2	{
	margin: 0;
	font-size: .85em;
	font-weight: 400;
	margin-left: 15px;
	color: #5cb9e8;
}

div#slogan h2 span	{
	display: block;
}


/* ===========================================
	Mobile Nav 
   =========================================== */

nav#mobile	{
	float: right;
	margin-top: 10px;
	margin-right: 10px;
}

nav#mobile .toggle_container	{
	position: absolute;
	z-index: 99999;
	width: 150px;
	right: 10px;
	text-align: right;
	background: rgba(255, 255, 255, .7);
	top: 83px;
	border-bottom: 4px solid #2a70b8;
	padding:0;
}

nav#mobile .toggle_container ul		{
	margin: 0;
	padding:5px;
	list-style-type: none;
}

nav#mobile .toggle_container ul li	{
	padding-top:5px;
	
}



/* ===========================================
	Desktop Nav 
   =========================================== */


nav#desktop	{
	display: block;
	float: right;
	margin-top: 10px;
}

nav#desktop ul	{
	padding: 0;
	margin: 0;
}


nav#desktop li	{
	display:inline-block;	
}

nav#desktop li a.trigger	{
	background: url(../images/grey_ham.png) no-repeat right 6px;
	padding-right: 20px;
}

nav#desktop li a:hover.trigger	{
	background: url(../images/grey_ham_hover.png) no-repeat right 6px;
}

nav#desktop li a.trigger1	{
	background: url(../images/grey_ham.png) no-repeat right 6px;
	padding-right: 20px;
}

nav#desktop li a:hover.trigger1	{
	background: url(../images/grey_ham_hover.png) no-repeat right 6px;
}



nav#desktop li a {
	color: #727272;
	text-decoration: none;
	display: inline-block;
	padding: 0 5px;
}

nav#desktop li a:hover	{
	color: #0071CE;
}

nav#desktop .toggle_container1	{
	position: absolute;
	z-index: 99999;
	background: rgba(255, 255, 255, .7);
	top: 83px;
	border-bottom: 4px solid #2a70b8;
	width: 200px;
	text-align: right;
}

nav#desktop .toggle_container1 ul	{
	padding: 5px;
}

nav#desktop .toggle_container1 li	{
	display: block;
	padding:5px;
	color:#727272;
	line-height: 1.0em;
}

nav#desktop .toggle_container1 li:hover	{
	color:#2a70b8;
	cursor: pointer;
}
nav#desktop .toggle_container1 li a	{
	display: block;
}


nav#desktop .toggle_container1.partners	{
	margin-left: -114px;
}

nav#desktop .toggle_container1.community	{
	margin-left: -90px;

}

nav#desktop .toggle_container1.issues	{
	margin-left: -128px;

}



/* ===========================================
	Video 
   =========================================== */




section#video div.inside	{
	padding: 0;
}

section#bottom_links div.inside	{
	padding: 0;
}




/* ===========================================
	Call to action 
   =========================================== */


div#calltoaction	{
	background: rgba(42, 112, 184, .6);
	height: 200px;
	margin-top: -281px;
	position: relative;
	z-index: 1000;
	padding: 40px 100px;
}

div#calltoaction h1	{
	color: #fff;
	font-weight: 400;
	font-size: 1.8em;
}

div#calltoaction h1 span	{
	font-size: 2.0em;
}

div#calltoaction h2	{
	color: #fff;
	font-weight: 300;
}

.right	{
	text-align: right;
}



/* ===========================================
	Bottom Links Section 
   =========================================== */

section#bottom_links	{
}

section#bottom_links ul	{
	list-style-type: none;
	padding: 0;
	margin: 0;
}

section#bottom_links ul li a	{
	text-align: center;
	display: block;
	padding: 82px 0;
	text-align: center;
	text-transform: uppercase;

}

section#bottom_links ul li a span	{
	width: 40%;
	display: inline-block;
}



section#bottom_links ul li.map	{
	background: url(../images/landing/map.png) no-repeat center center;
	height: 200px;
}

section#bottom_links ul li.partners	{
	background: url(../images/landing/partners.png) no-repeat center center;
	height: 200px;
}

section#bottom_links ul li ul li.watershed	{
	background: url(../images/landing/01_watershed.jpg) no-repeat center center;
	background-size: cover;
}

section#bottom_links ul li ul li.industry	{
	background: url(../images/landing/02_industry.jpg) no-repeat center center;
	background-size: cover;
}

section#bottom_links ul li ul li.impact	{
	background: url(../images/landing/03_impact.jpg) no-repeat center center;
	background-size: cover;
}

section#bottom_links ul li ul li.connection	{
	background: url(../images/landing/04_connection.jpg) no-repeat center center;
	background-size: cover;
}

section#bottom_links ul li ul li.biodiversity	{
	background: url(../images/landing/05_biodiversity.jpg) no-repeat center center;
	background-size: cover;
}

section#bottom_links ul li ul li.waterway	{
	background: url(../images/landing/06_waterway.jpg) no-repeat center center;
	background-size: cover;
}

section#bottom_links ul li ul li.consumption	{
	background: url(../images/landing/07_consumption.jpg) no-repeat center center;
	background-size: cover;
}

section#bottom_links ul li ul li.legacy	{
	background: url(../images/landing/08_legacy.jpg) no-repeat center center;
	background-size: cover;
}

section#bottom_links ul li ul li a	{
	background: rgba(255, 255, 255, .15);
	padding: 10px; 
		
}

section#bottom_links ul li ul li a span	{
	width: 40%;
	/* background: rgba(255, 255, 255, .7); */
	display: inline-block;
}



a:link {outline: none; text-decoration: none; color: #2a70b8;}
a:visited { outline: none; color: #2a70b8;}
a:hover {outline: none; color: #2a70b8;}
a:active {outline: none; color: #2a70b8;}



/* ===========================================
	Footer 
   =========================================== */


footer div.inside	{
	padding: 20px 0;
	font-size: .9em;
}

nav#footer_nav	{
	display: inline-block;
	float: right;
}

nav#footer_nav ul	{
	padding: 0;
	margin: 0;
}

nav#footer_nav ul li	{
	display: inline-block;
	float: left;
}

nav#footer_nav ul li a	{
	padding: 0 10px;
	border-right: 1px solid #727272;
	display: block;
	line-height: .8em;
	color: #727272;
}

nav#footer_nav ul li:last-child a	{
	border: none;
}




.center_container {
	width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  max-width: 400px;
 }


div#big_logo {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.6);
    padding: 20px;
    
}

section#video div.inside	{
	position: relative;
}

div.inside	{
	min-width: 768px;
}


	section#bottom_links ul li	{
		width: 50%;
		float: left;
	}
	
	section#bottom_links ul li ul li	{
		width: 50%;
		float: left;
		font-size: .8em;
	}
	
	section#bottom_links ul li a span	{
		width: 70%;
	
	}
	
	section#bottom_links ul li ul li a	{
		padding: 16px 0
	}
	
	section#bottom_links ul li ul li a span	{
		width: 80%;
		
	}
	
	section#bottom_links ul li.map	{
		width: 25%;
		
	}
	
	section#bottom_links ul li.partners	{
		width: 25%;
		
	}
	
	nav#mobile	{
		display: none;
	}
	
	
div.buffer	{
	border-bottom: 1px solid #ccc;
	width: 100%;
	height: 1px;
	
}

.bottom_caption	{
	font-family: 'Lato', sans-serif;
	font-size: .8em;
	color: #929292;
}


.small	{
	width: 80%;
	margin-left: 10%;
	margin-right: 10%;
}



@media only screen and (max-width: 520px) {

	
	
	div#slogan	{display: none;}
	
	

}


@media only screen and (max-width: 767px) {

	
	
	nav#social	{
		margin-right: 10px;
	}
	
	.center_container {
	}


	nav#desktop	{
		font-size: .9em;
		margin-top: 13px;
	}
	
	div#slogan	{
		font-size: .9em;
		margin-top: 17px;
	}

}




@media only screen and (min-width: 768px) {

	
	
	

	
	nav#social	{
		margin-top: 14px;

	}
	
	
	
	

	

		
}


@media only screen and (min-width: 768px) 
				   and (max-width: 1023px)
{

	
	
	div#slogan	{
		font-size: .9em;
		margin-top: 17px;
	}
	
		


}


nav#desktop	{
		font-size: .9em;
		margin-top: 13px;
	}


nav#desktop li a.trigger	{
		background: url(../images/grey_ham.png) no-repeat right 4px;
	}
	
	nav#desktop li a:hover.trigger	{
		background: url(../images/grey_ham_hover.png) no-repeat right 4px;
	}
	
	nav#desktop li a.trigger1	{
		background: url(../images/grey_ham.png) no-repeat right 4px;
	}
	
	nav#desktop li a:hover.trigger1	{
		background: url(../images/grey_ham_hover.png) no-repeat right 4px;
	}


@media only screen and (min-width: 900px)	{
	section#bottom_links ul li a span	{
		width: 60%;
		background: rgba(255, 255, 255, .4);
	}
}


@media only screen and (min-width: 1024px) {

	
	
	section#bottom_links ul li ul li	{
		width: 25%;
		float: left;
		font-size: 1em;
	}
	
	section#bottom_links ul li 	{
		
		font-size: .8em;
	}
	
	section#bottom_links ul li ul li a	{
		padding: 82px 0 0;
	}
	
	section#bottom_links ul li ul li a span	{
		width: 90%;
		
	}
	
		
}



@media only screen and (min-width: 1420px) {

	div.inside	{
		width: 1400px;
		margin-left: auto;
		margin-right: auto;
	}
		
}


section#bottom_links ul li ul li a span	{
		width: 100%;
		
	}






/* About page  */	
	
#about article	{
	font-family:Georgia,Serif;
	padding: 0;
	color: #727272;
	font-size: 1.2em;
	margin-bottom: 60px;
}

#about article h1	{
	font-family: 'Lato', sans-serif;
	font-weight: 300;
	margin-bottom: 0;
	color: #2a70b8;
}

#about article h2	{
	font-family: 'Lato', sans-serif;
	font-weight: 300;
	margin-top: 0;
	font-size: 1.4em;
	color: #2a70b8;
}

.credits p	{
	font-size: .8em;
	font-family: 'Lato',sans-serif;

}

@media only screen and (min-width: 768px) {
	#about article	{
		margin-left: 50px;		
		margin-right: 50px;
	}
	
}


@media only screen and (min-width: 1024px) {
	#about article	{
		margin-left: 200px;		
		margin-right: 200px;
	}
}





aside.caption	{
	padding: 0;
}

aside.caption blockquote	{
	color: #727272;
	margin: 0;
	padding: 10px 10%;
	line-height: 1.5em;
	font-size: 2.3em;
	text-indent: 20px;
	position: relative;
	z-index: 2;
	font-weight: 300;
	font-family: 'Lato', sans-serif;
	text-align: center;
}

aside.caption blockquote.noquote	{
	color: #2a70b8;
	text-indent: 0;
	position: relative;
	z-index: 2;
	
}



aside.caption blockquote span.big	{
	color: #2a70b8;
	text-transform: uppercase;
	font-family: Georgia, Serif;
	position: absolute;
	text-indent: 0;
	margin-top: 10px;
	font-size: 3.4em;
	color: rgba(44, 113, 185, .5);
	z-index: 1;
}

aside.caption blockquote span.first	{
	text-indent: 0;
	margin-left: -60px;
}