@charset "utf-8";
/* CSS Document */
/*headline: font-family:'Poppins', sans-serif;
	paragraph: font-family:'Caudex', serif; 
*/

/*river habitat colors:
	dark teal: #025E73;
	medium teal: #248EA6;
	medium water: #44A1F2;
	light water: #5EBAF2;
	sky blue: #88DFF2;
	sand: #F2CEAE;
	green cream: #E0E1BB;
	bright green: #C0E05C;
	seaweed: #D6E057;
	black: #000000;
	white: #FFFFFF;
*/

/* body style */

*{box-sizing: border-box;
margin: 0;}

body{margin: 0 auto;
	width:100%;
	padding: 0px;
	background-color:#E0E1BB;
	height: 100px;
	}

/* font style */
h1, h2 {font-family:'Poppins', sans-serif;
		color:#FFFFFF;
		}
	
h3, h4, h5, h6 {font-family:'Poppins', sans-serif;
				color:#000000;
				}

p   {font-family:'Caudex', serif;
	font-size: 1em;
	color:#000000;
	}

/* logo image spacing */
img {
	padding:2px 5px;
	}

/* HEADER SECTION */

/* Main Navigation */
#mainNav{
	overflow:hidden;
	margin:0px;
	display:block;
	position:fixed;
	padding:0px;
	background-color:#248EA6;
	width:100%;
	font-family: 'Poppins', sans-serif;
	color:#000000;
	height:52px;
	}

/* Navigation bar - buttons and links */
#mainNav-right a{
	float:right;
	margin:0px;
	display:inline-block;
	color:#000000;
	text-align:center;
	padding: 14px 16px;
	background-color:#248EA6;
	text-decoration: none;
	}

/* navigation color change on hover */
#mainNav a:hover{
	background-color:#248EA6;
	color:#FFFFFF;
	font-weight: 1000;
	}

/* navigation color change on click */
#mainNav-right .active{
	background-color:#025E73;
	color:#FFFFFF;
	}

/* navigation placement on right of screen */
#mainNav-right {
	float:right;
	}

/* clear floats after navigation */
.row:after {
	content:"";
	display:table;
	clear:both;
	}



/* INDEX PAGE */
/* Index page header title style */
.fish {background:#E0E1BB url("../image/rastered/snake_river.jpg") no-repeat center center;
	height: 300px;
	}

.fish h1{
	text-align:center;
	font-size:4em;
	margin-top:30px;
	padding-top:100px;
	color:#FFFFFF;
 	}

.fish h2{
	text-align:center;
	font-size:2em;
	padding-top: 10px;
	color:#FFFFFF;
	}

/* section tagline style */
.positive_steps {background-color:#025E73; 
	text-align:center;
	margin:0px;
	width:100%;
	font-size:1em;
	line-height:40px;
	color:#FFFFFF; 
	}

/* flexbox container for index page */
.container {
	margin-top:auto;
	display:flex;
	height:700px;
	flex-direction:row;
	justify-content:center;
	align-items: baseline;
	}

/* flexbox item */
.element {
	margin:2em;
	padding:1em;
	flex-basis:30%;
	height:350px;
	}

.element h3{
	font-size:1.5em;
	text-align:center;
	font-weight:700;
	color:#000000;
	}

/*flexbox images for index page */

.trash {background:#025E73 url("../image/rastered/fish_trash.png")
	no-repeat center;
	background-size:cover;
	height:300px;
	}

.scuba {background: url("../image/rastered/scuba_fish.png")
	no-repeat center;
	background-size:cover;
	height:300px;
	}

.sunscreen {background:#88DFF2 url("../image/rastered/sunscreen_fish.png")
	no-repeat center;
	background-size:cover;
	height:300px;
	}
/* END Index page CSS */



/* ABOUT PAGE */
/* About page header title style */
.about_bg {background:#E0E1BB url("../image/rastered/river_woods.jpg") no-repeat center center;
	background-size:cover;
	height:300px;
	}

.about_bg h1{
	text-align:center;
	font-size:4em;
	line-height:300px;
	color:#FFFFFF;
 	}

/* flexbox container for about page */
.container_about {
	margin-top:auto;
	display:flex;
	height:600px;
	flex-direction:row;
	justify-content:center;
	align-items: baseline;
	}

/* flexbox element for about page */
.element {
	margin:2em;
	padding:1em;
	flex-basis:30%;
	height:350px;
	}

.element h3{
	font-size:1.5em;
	text-align:center;
	font-weight:700;
	color:#000000;
	}

/*3-column flexbox images for about page */

.mission {background:#025E73 url("../image/rastered/mission_flow.png")
	no-repeat center;
	background-size:cover;
	height:300px;
	}

.river {background:#88DFF2 url("../image/rastered/river_low_levels.png")
	no-repeat center;
	background-size:cover;
	height:300px;
	}

.about {background:#88DFF2 url("../image/rastered/about_us.png")
	no-repeat center;
	background-size:cover;
	height:300px;
	}
/* END About page CSS */



/* Small Changes PAGE */
/* Small Changes page header title style */
.small_bg {background:#E0E1BB url("../image/rastered/trash_can.jpg") no-repeat center center;
	background-size:cover;
	height:300px;
	}

.small_bg h1{
	text-align:center;
	font-size:4em;
	line-height:300px;
	color:#FFFFFF;
 	}

/* flexbox container for about page */
.container_small {
	margin-top:auto;
	display:flex;
	height:600px;
	flex-direction:row;
	justify-content:center;
	align-items: baseline;
	}

/* flexbox element for about page */
.element {
	margin:2em;
	padding:1em;
	flex-basis:30%;
	height:350px;
	}

.element h3{
	font-size:1.5em;
	text-align:center;
	font-weight:700;
	color:#000000;
	}

/*3-column flexbox images for about page */

.drain {background:#F2CEAE url("../image/rastered/drain.png")
	no-repeat center;
	background-size:cover;
	height:300px;
	}

.forest {background:#88DFF2 url("../image/rastered/amended-forest.png")
	no-repeat center;
	background-size:cover;
	height:300px;
	}

.planting {background:#88DFF2 url("../image/rastered/planting-tree.png")
	no-repeat center;
	background-size:cover;
	height:300px;
	}
/* END Small Changes page CSS */



/* Ask FISHY PAGE */
/* Ask Fishy page header title style */
.ask_bg {background:#E0E1BB url("../image/rastered/river_rocks.jpg") no-repeat center center;
	background-size:cover;
	height:300px;
	}

.ask_bg h1{
	text-align:center;
	font-size:4em;
	line-height:300px;
	color:#FFFFFF;
 	}

/* flexbox container for Ask fishy and items*/
.container_ask {
	display:flex;
	margin:0;
	padding:0;
	height:600px;
	flex-direction:row;
	justify-content:center;
	align-items: center;
	}

.ask_img{
	flex-basis:35%;
	margin:1em;
	padding:1em;
	background: url("../image/rastered/bike.jpg") no-repeat center center;
	background-size: cover;
	height:400px;
	}

.ask_info {
	flex-basis:35%;
	margin-top:1em;
	padding:1em;
	height:200px;
	}
/* END Ask Fishy page CSS */



/* CLIMATE HAZARDS PAGE */
/* Climate Hazards page header title style */
.climate_bg {background:#E0E1BB url("../image/rastered/shallow_river.jpg") no-repeat center center;
	background-size:cover;
	height:300px;
	}

.climate_bg h1{
	text-align:center;
	font-size:4em;
	line-height:300px;
	color:#FFFFFF;
 	}

/* flexbox container for Climate Hazards and items*/
.container_climate {
	display:flex;
	margin:0;
	padding:0;
	height:600px;
	flex-direction:row;
	justify-content:center;
	align-items: center;
	}

.climate_img{
	flex-basis:35%;
	margin:1em;
	padding:1em;
	background: url("../image/rastered/coffee.jpg") no-repeat center center;
	background-size: cover;
	height:400px;
	}

.climate_info {
	flex-basis:35%;
	margin-top:1em;
	padding:1em;
	height:200px;
	}
/* END Climate Hazards page CSS */



/* VOLUNTEER PAGE */
/* volunteer page header title style */
.volunteer_bg {background:#E0E1BB url("../image/rastered/river_bottle.jpg") no-repeat center center;
	background-size:cover;
	height:300px;
	}

.volunteer_bg h1{
	text-align:center;
	font-size:4em;
	line-height:300px;
	color:#FFFFFF;
 	}

/* flexbox container for Volunteer and items*/
.container_volunteer {
	display:flex;
	margin:0;
	padding:0;
	height:600px;
	flex-direction:row;
	justify-content:center;
	align-items: center;
	}

.volunteer_img{
	flex-basis:35%;
	margin:1em;
	padding:1em;
	background: url("../image/rastered/rosie.jpg") no-repeat center center;
	background-size: cover;
	height:400px;
	}

.volunteer_info {
	flex-basis:35%;
	margin-top:1em;
	padding:1em;
	height:200px;
	}
/* END Volunteer page CSS */



/* external hyperlinks style */
.external{
	text-align:center;
	}

/* footer flexbox*/
.container_footer {
	display:flex;
	height:100px;
	flex-direction: row;
	justify-content:center;
	align-items:center;
	background-color:#025E73;
	}

.location {
	margin:0;
	padding:0em;
	flex-basis:20%;
	line-height:12px;
	text-align:center;
	color:#FFFFFF;
	font-family:'Caudex', serif;
	font-size:12px;
	}

.legal {
	margin:0;
	padding:0em;
	flex-basis:20%;
	line-height:12px;
	text-align:center;
	color:#FFFFFF;
	font-family:'Caudex', serif;
	font-size:12px;
	}