@charset "utf-8";

img{
	max-width:100% !important;	
}

body {
	height: 100%;
	max-height: 100%;
	padding:0;
	margin:0 auto;
}

html {
	height:100%;
	background-size: cover;
}
	

#content {
	height: 90vh;
	clear:none;
}

main{
	width:100%;
	max-width:1600px !important;
	margin:0 auto;
	position:relative;
	float:left;
}

.container{
	max-width:1400px;
	width:100%;
	max-height:100%;
	margin:0 auto;
	position:relative;
	z-index:-1;
}

.imgContainer {
	max-width:100vw;
	width: 100%;
	max-height: 100vh;
	height:100%;
	margin: 0 auto;
	position:relative;
}

.header{
    width: 100%;
	padding-bottom:20px;
}

#toggleNav{
	display:none;
	width:100%;
	height:30px;
	padding-top:10px;
	font-size:18px;
	background-color:#000000;
	margin:15px 0px;
	color:#fff;
	cursor:pointer;
}

.special{
	display:block;
	background-color:#488832;
	color:#000;
	text-decoration:none;
	padding:5%;	
	margin-bottom: 1em;
}

.specialdonate{
	display:block;
	background-color:#09F;
	color:#000;	
	text-decoration:none;
	padding:5%;	
	margin-bottom: 1em;
}

#toggleNav a{
	color:#ffffff;
}


/*Use the following for top drop-down nav
Change the background-color in #nav to change the color of the navigation bar
Change the background-color in #nav ul li ul to change the background color of the dropdown menus
These values do also need to be changed further down, in the 600px, 400px, and 300px wide sections 
*/
/* -------------------- Start Navigation -------------------- */
#nav{
	width: 100%;
	z-index:10;
	position:relative;
	float:left;
	font-size:17px;
	font-family: oswald;
	border-top:5px solid #58585a;
	margin-bottom:15px;
}

#nav > a{
	display: none;
}

#nav li{
	position: relative;
	list-style-position:inside;
	list-style-type:none;
}
#nav li a{
	color: #000;
	display: block;
	text-decoration:none;
}

#nav li.donate a {
	color:#488832;	
}

nav a {
	text-decoration:none;
	color:#003c7a;
}

.handle {
	font-family:Roboto;
	box-sizing: border-box;
	display:block;
	height:30px;
	padding:5px 10px;
	text-align: center;
	color:white;
	background-color:#007098;
	border:1px solid black;
	display:none;	
}


nav ul{
	width:100%;
	overflow: hidden;
	display:block;
	color: white;
	padding:0;
	text-align: center;	
	margin:0;
	font-family:Roboto;
	-webkit-transition: max-height 0.8s;
	-ms-transition: max-height 0.8s;
	-moz-transition: max-height 0.8s;
	-o-transition: max-height 0.8s;
	transition: max-height 0.8s;
}

nav ul li{
	display:inline-block;
	padding: 20px;
	cursor:pointer;
	color:#003c7a;
}

/* first level */

#nav > ul{
	margin-top:15px;
	text-align:center;
	padding-left:0px !important;
	margin-left:0px !important;
}
#nav > ul > li{
	padding:4px 8px;
	height: 100%;
	display:inline-block;
}
#nav > ul > li > a{
	height: 100%;
	text-align: center;
}
#nav > ul > li:not( :last-child ) > a{
}

#nav > ul > li:hover > a,
#nav > ul:not( :hover ) > li.active > a{
}

	/* second level */

#nav li ul{
	background-color:#ccc;
	display: none;
	position: absolute;
	top: 100%;
	margin-left:0 !important;
	padding-left:0 !important;
	width:170px;
	text-align:left;
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
}
#nav li:hover ul{
	display: block;
	left: 0;
	right: 0;
}
#nav li:not( :first-child ):hover ul{
	left: -1px;
}
#nav li ul a{
	color:#000;
	padding: 0.75em; /* 15 (20) */
}
#nav li ul li a:hover,
#nav li ul:not( :hover ) li.active a
{
}
/* -------------------- End Navigation -------------------- */

#subnav{
	width:100%;
	height:100%;
	padding:185px 0% 10px 0%;
	display:none;
	text-align:center;
	background-color:#F00;
}

#subnav a{
	color:#ffffff;
	padding:6px 10px;
	font-size:16px;
	margin:2px 15px 0px 15px;
	display:block;
}

img.banner {
	box-shadow:10px 10px 5px #007098;
	margin-bottom:40px;	
}

.content{
	position:relative;
	width:70%;
	margin:0 auto;
	padding:2%;
	background-color:#ebebeb;
	min-height:200px;	
	border: solid black 1px;
	font-family:Oswald;
	margin-top:50px;
}

.content-left{
	position:relative;
	float:left;
	width:59%;
	padding:2%;
	margin-left:2%;
	background-color:#ebebeb;
	min-height:200px;	
	border: solid black 1px;
	font-family:Oswald;
	font-size:19px;
}

.Aboutcontent-left{
	position:relative;
	float:none;
	width:100%;
	margin-left:2%;
	min-height:200px;
}

.facebookHeader:hover, .emailHeader:hover {
	cursor:pointer;
	opacity:0.5;
}

.facebookHeaderTwo, .emailHeaderTwo {
	display:none;	
}
/*Home Page*/

.welcomeHeader {
	color:#58585a;
	letter-spacing:5px;
	padding-bottom:25px;
	border-bottom: solid #707072 4px;	
}

.missionStatement {
	color:#58585a;	
}

.supportedPrograms {
	color:#58585a;
	letter-spacing:5px;
	padding-bottom:25px;
	border-bottom: solid #707072 4px;	
}

p.suportedPrograms {
	font-size: 20px;	
}

.programsList {
	color:#58585a;
	letter-spacing:2px;	
}

.news h3 {
	margin-top:10%;
	color:#58585a;
	position:relative;
	letter-spacing:5px;	
}

.news h1 {
	margin-top:10%;
	color:#black;	
}

.news p {
	color:#58585a;	
}

.donors h3 {
	margin-top:18%;
	color:#58585a;
	position:relative;
	letter-spacing:5px;
}
.content-right{
	position:relative;
	float:left;
	width:28%;
	padding-bottom:2%;
	margin-left:4%;
	margin-right:2%;
	background-color:#FFF;
	min-height:200px;
}

.content-right aside img {
	position:relative;
}

.content-right img {
	margin-bottom:5%;
}

.content-right h2 {
	width:90%;
	height:5.8%;
	margin-top:-18%;
	padding-left: 10%;
	letter-spacing:3px;
	position: absolute;	
	color:#FFF;
	font-family:oswald;
	font-size:24px;
	background-color: rgba(0,0,0,0.35);
}

img.donateImg {
	box-shadow:10px 10px 5px #488832;
}

.content-right img:hover {
	opacity:0.5;
	cursor:pointer;
}

img.volunteerImg {
	box-shadow:10px 10px 5px #edaa1e;
}

img.memberImg {
	box-shadow:10px 10px 5px #007098;
}

/*About Page*/

.aboutTheFriends {
	text-align:center;
	font-family:'Oswald', cursive;
	text-shadow: 2px 2px 3px gray;
	color:#58585a;
	letter-spacing:5px;
	padding-bottom:25px;
	border-bottom: solid #707072 4px;
}

.list {
	list-style-position: inside;
}

.whyBeFriend {
	margin-top:100px;
	text-align:center;
}

.aboutUsDescriptionButton {
	font-family:oswald;
	letter-spacing:3px;
	color:white;
	position:absolute;
	left:45%;
	width:10%;
	background-color:red;	
}

/*Become A Member Page*/

.content img{
	border: 2px solid #000;	
	border-radius: 10px;
	margin:10px;
	box-shadow:  2px 2px 3px 2px gray;
}

.join {
	text-align:center;
	font-family:'Oswald', cursive;
	text-shadow: 2px 2px 3px gray;
	color:#58585a;
	letter-spacing:5px;
	padding-bottom:25px;
	border-bottom: solid #707072 4px;
}

.becomeMemberButton {
	background-color:#007098;
	cursor:pointer;
	font-family:oswald;
	letter-spacing:3px;
	color:white;
	font-size:15px;
	border-radius:.2vw;
	padding:.25vw .25vw;
	margin:0 auto;
	text-align:center;
	left:0;
	width:15vw;
}

/*Bookstore*/

.bookstoreHours {
	text-align:center;
	font-family:'Oswald', cursive;
	text-shadow: 2px 2px 3px gray;
	color:#58585a;
	letter-spacing:5px;
	padding-bottom:25px;
	border-bottom: solid #707072 4px;
}

#fairfountHours th, #fairfountHours td {
  width:1200px;
  border: 1px solid #000;
  border-collapse:collapse;
}

.fairfountAddress {
	float:none;
	clear:both;
	text-align:center;
}

.easternAvenue {
	text-align:center;
	margin-top:50px;
}

#easternAvenueHours th, #easternAvenueHours td {
  width:1200px;
  border: 1px solid #000;
  border-collapse:collapse;
}
/*Volunteer*/

.legosPic1 {
	float:left;
	border: 2px solid #000;	
	border-radius: 10px;
	margin:10px;
	margin-right:2%;
	box-shadow:  2px 2px 3px 2px gray;	
}

.legosPic2 {
	float:right;
	border: 2px solid #000;	
	border-radius: 10px;
	margin:10px;
	margin-right:2%;
	box-shadow:  2px 2px 3px 2px gray;	
}

.volunteerOpportunity {
	text-align:center;
	font-family:'Oswald', cursive;
	text-shadow: 2px 2px 3px gray;
	color:#58585a;
	letter-spacing:5px;
	padding-bottom:25px;
	border-bottom: solid #707072 4px;
}

.volunteerDesc {
	margin-top:50px;
}

.volunteerDesc3 {
	margin-top:50px;
}

/*Donate*/

.donatePic1 {
	float:right;
	border: 2px solid #000;	
	border-radius: 10px;
	margin:10px;
	margin-right:2%;
	box-shadow:  2px 2px 3px 2px gray;
}

.donatePic2 {
	float:left;
	border: 2px solid #000;	
	border-radius: 10px;
	margin:10px;
	margin-right:2%;
	box-shadow:  2px 2px 3px 2px gray;
}

.supportTitle {
	text-align:center;
	font-family:'Oswald', cursive;
	text-shadow: 2px 2px 3px gray;
	color:#58585a;
	letter-spacing:5px;
	padding-bottom:25px;
	border-bottom: solid #707072 4px;
}

.contributionList {
	list-style:inside;
}

.donateButton {
	background-color:#488832;
	cursor:pointer;
	font-family:oswald;
	letter-spacing:.25vw;
	color:white;
	text-align:center;
	border-radius:.2vw;
	padding:.25vw .25vw;
	width:40%;
	margin:0 auto;
}

/*Contact*/

.contactPic1 {
	float:left;
	border: 2px solid #000;	
	border-radius: 10px;
	margin:10px;
	margin-right:2%;
	box-shadow:  2px 2px 3px 2px gray;		
}


.contactText {
	text-align:center;
	font-family:'Oswald', cursive;
	text-shadow: 2px 2px 3px gray;
	color:#58585a;
	letter-spacing:5px;
	padding-bottom:25px;
	border-bottom: solid #707072 4px;
}

.emailBoard a {
	color:#09F;	
}

.contactFacebookButton {
	background-color:#114983;
	cursor:pointer;
	font-family:oswald;
	letter-spacing:.1vw;
	color:white;
	border-radius:.2vw;
	padding:1% 1%;
	width:30%;
	text-align:center;
	float:left;
}

.emailUs {
	text-align:center;
	clear:both;
	float:none;
}

.contactEmailUsButton {
	background-color:#eb7424;
	cursor:pointer;
	font-family:oswald;
	letter-spacing:.1vw;
	color:black;
	border-radius:.2vw;
	padding:1% 1%;
	width:30%;
	text-align:center;
	float:right;
}
	

.row, .two-box-row, .three-box-row, .four-box-row{
	width:100%;
	display:inline-block;
}

.two-box-row{
	width:48%;
	padding:0% 0;
	margin:0% 0;
	position:relative;
	float:left;
}

.donors {
	padding: 0% 5%;
	margin: 0% 1%;
	border-left: solid #707072 4px;	
}

.three-box-row .box{
	width:23.33%;
	padding:2%;
	position:relative;
	float:left;
	margin:0% 3%;
	background-color:#fff;
}

.four-box-row .box{
	width:17%;
	padding:2%;
	position:relative;
	float:left;
	margin:0% 2%;
	background-color:#fff;
}

.footer{
	width:100%;
	background-color:#FFF;
	color:#72262d;
	min-height:40px;
	position:relative;
	float:left;
	clear:both;
	font-family:oswald;
	top:25px;
}

.footer-left{
	float:left;
	padding:10px 0px 0px 25px;
}

.footer-right{
	float:right;
	padding:10px 25px 0px 0px;
}

.nomargin{
	margin:0px !important;
}

.nopadding{
	padding:0px !important;	
}

.nobold{
	font-weight:normal;	
}

.center{
	text-align:center;	
}

.block{
	display:block !important;	
}

.right{
	float:right;	
}

.left{
	float:left;	
}

@media only screen and (max-width:1195px){
.container{
	max-width:960px;
	}
	
.content {
	margin-top:50px;	
}
	
.footer{
	font-size:15px;	
}

/*Home Page*/

/*AboutPage */

.aboutTheFriends {
	font-size:32px;
}

.list {
	list-style-position:outside;	
}

/*Become A Member Page*/
.join {
	font-size:32px;	
}

.becomeMemberButton {
	background-color:#007098;
	cursor:pointer;
	font-family:oswald;
	letter-spacing:3px;
	color:white;
	font-size:14px;
	border-radius:.2vw;
	padding:.25vw .25vw;
	margin:0 auto;
	text-align:center;
	left:0;
	width:25vw;
}

.joinList {
	list-style-position:outside;	
}

/*Bookstore Page*/

.bookstoreHours {
	font-size:32px;	
}

/*Volunteer Page*/

.volunteerOpportunity {
font-size:32px;
}

/*Donate Page*/

.supportTitle {
	font-size:32px;
}

.joinTheFriends {
	float:none;
	clear:both;
}

.donateButton {
	font-size: 3vw;	
}
	/*Contact Us Page*/

.contactText {
	font-size:32px;	
}

.contactPic1 {
	float:none;
	clear:both;
	display:block;
	margin:auto;
	width:75%;
}

.contactDesc2 {
	text-align:center;
}

.contactDesc3 {
	text-align:center;
}

.emailBoard {
	text-align:center;
}

.boardMembers {
	text-align:center;
}

.contactFacebookButton {
	font-size:24px;
}

.contactEmailUsButton {
	font-size:24px;	
}

}

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

/*Contact Page*/

.contactPic1 {
	float:none;
	clear:both;
	display:block;
	margin:auto;
	width:75%;	
}

.contactDesc {
	float:none;
	clear:both;
	text-align:center;	
}

.contactDesc2 {
	float:none;
	clear:both;
	text-align:center;	
}

.contactDesc3 {
	float:none;
	clear:both;
	text-align:center;	
}
	
}

@media only screen and (max-width:967px){
	.container{
		max-width:800px;
	}
	/* -------------------- Start Navigation -------------------- */
nav ul {
	max-height:0;	
}

#nav li.donate a {
	color:white;	
}

.showing {
	max-height:30em;	
}

nav ul li{
	z-index:51;
	box-sizing: border-box;
	width:100%;
	padding:15px;
	border:1px solid black;
	}
	
nav ul li a {
	color:white;
	display:inline-block;
}

nav ul li:hover {
	background-color:#edaa1e;
	cursor:pointer;
}

.handle {
	display:block;
}

.handle:hover, .aboutHandle:hover {
	background-color:#edaa1e;
	cursor:pointer;	
}

nav ul{
	background-color:#007098;
	color: white;
	padding:0;
	text-align: center;	
	margin:0;
}

.container{
	max-width:600px;
	width:100%;
	background-color:#FFF;	
	}
	/*End Navigation*/
	
.four-box-row{
		width:42%;
		margin:2%;
	}
	/*Home Page*/
	
.welcomeHeader {
	color:#58585a;
	letter-spacing:5px;
	padding-bottom:25px;
	border-bottom: solid #707072 4px;	
}

.missionStatement {
	color:#58585a;	
}

/*Become A Member Page*/

.becomeMemberButton {
	background-color:#007098;
	cursor:pointer;
	font-family:oswald;
	letter-spacing:3px;
	color:white;
	font-size:14px;
	border-radius:.2vw;
	padding:.25vw .25vw;
	margin:0 auto;
	text-align:center;
	left:0;
	width:25vw;
}

/*Bookstore Page*/

/*Volunteer Page*/


.legosPic1 {
	float:none;
	clear:both;
	display:block;
	margin:auto;
	width:75%;	
}

.legosPic2 {
	float:none;
	clear:both;
	display:block;
	margin:auto;
	width:75%;
}

/*Donate Page*/

.donatePic2 {
	float:none;
	clear:both;
	display:block;
	margin:auto;		
}

.donateButton {
	font-size:3vw;		
}

	/*Contact Us Page*/

.contactPic1 {
	float:none;
	clear:both;
	display:block;
	margin:auto;
	width:75%;
}

.emailBoard {
	text-align:center;
	float:none;
	clear:both;
}

}

@media only screen and (max-width:780px) {
	
	.content {
		margin-top:1px;	
	}
	
/*Donate Page*/

.donatePic1 {
	float:none;
	clear:both;
	display:block;
	margin:auto;
	width:75%;
}

.supportDesc {
	float:none;
	clear:both;
	text-align:center;	
}

.altSupportDesc3 {
	float:none;
	clear:both;
	text-align:center;
}

.contributionList {
	list-style-position:outside;	
}
}

@media only screen and (max-width:720px){
	
	.emailHeader, .facebookHeader {
		display:none;	
	}
	
.emailHeaderTwo, .facebookHeaderTwo {
	text-align:center;
	display:block;	
}
	.container{
		max-width:600px;
		width:97%;	
	}
	
	#toggleNav{
		display:block;
	}
	
	/* -------------------- Start Navigation -------------------- */
	/*End Navigation*/
	#subnav{
		display:none;
	}
	
	#subnav a{
		margin-top:5px;
	}
	
	.content-left{
		width:92%;
	}
	
	.content-right{
		width:92%;
		margin-top:2%;
	}
	
	.three-box-row{
		width:76%;
		margin:2% 10%;
	}
	
	.four-box-row{
		width:76%;
		margin:2% 10%;
	}
	
	.footer{
		font-size:3vw;
		height:10px;
		text-align:center;
	}
	
	.footer-left{
		float:none;
		padding:10px 0px 0px 0px;
		display:block;
	}
	
	.footer-right{
		float:none;
		padding:0px 0px 0px 0px;
		display:block;
	}
	
	/*Home Page*/
	
.missionStatement {
	font-size:16px;	
}



.news p {
	color:#58585a;	
}

.two-box-row{
	width:90%;	
}

.donors{
	border-left:none !important;
	border-top:solid #707072 4px;	
}


/*About Page*/

.aboutTheFriends {
	font-size: 20px;
}

/*Become A Member Page*/

.join {
	font-size:20px;	
}

/*Bookstore Page*/

.bookstoreHours {
	font-size:20px;	
}

/*Volunteer Page*/

.volunteerOpportunity {
	font-size:20px;
}

/*Donate Page*/

.supportTitle {
	font-size:20px;	
}

.legosPic1 {
	float:none;
	clear:both;
	display:block;
	margin:auto;
	width:75%;	
}

.legosPic2 {
	float:none;
	clear:both;
	display:block;
	margin:auto;
	width:75%;
}

/*Contact Us Page*/

.contactText {
	font-size:20px;	
}

.contactPic1 {
	float:none;
	clear:both;
	display:block;
	margin:auto;
	width:75%;
}
.emailBoard {
	text-align:center;
	float:none;
	clear:both;
}

.contactFacebookButton {
	font-size:2vw;
}

.contactEmailUsButton {
	font-size:2vw;
}

}

@media only screen and (max-width:607px){
	
/*Home Page*/
	
.welcomeHeader {
	font-size:18px;
	color:#58585a;
	letter-spacing:5px;
	padding-bottom:25px;
	border-bottom: solid #707072 4px;	
}

.missionStatement {
	font-size:16px;
	color:#58585a;	
}

.supportedPrograms {
	font-size:18px;
	color:#58585a;
	letter-spacing:5px;
	padding-bottom:25px;
	border-bottom: solid #707072 4px;	
}

p.suportedPrograms {
	font-size: 20px;	
}

.donors {
	position: relative;
	float:left;	
}


img.donateImg {
	box-shadow:10px 10px 5px #488832;
	position:relative;	
}

img.donateImg:hover, img.volunteerImg:hover, img.memberImg:hover {
	opacity:0.5;
	cursor:pointer;
}

img.volunteerImg {
	box-shadow:10px 10px 5px #edaa1e;
	position:relative;	
}

img.memberImg {
	box-shadow:10px 10px 5px #007098;
	position:relative;
}
	
.footer{
	font-size:16px;
	height:65px;
	text-align:center;
}

/*Bookstore Page*/
.legosPic1 {
	float:none;
	clear:both;
	display:block;
	margin:auto;
	width:75%;	
}

.legosPic2 {
	float:none;
	clear:both;
	display:block;
	margin:auto;
	width:75%;
}
	
/*Donate Page*/

.donatePic1 {
	float:none;
	clear:both;
	display:block;
	margin:auto;
	width:75%;	
}

.donatePic2 {
	float:none;
	clear:both;
	display:block;
	margin:auto;
	width:75%;
}

.donateButton {
	font-size: 5vw;	
}
	
/*Contact Us Page*/

.contactPic1 {
	float:none;
	clear:both;
	display:block;
	margin:auto;
	width:75%;
}

.emailBoard {
	text-align:center;
	float:none;
	clear:both;
}

.contactFacebookButton {
	font-size:2vw;
}

.contactEmailUsButton {
	font-size:2vw;
}
}

@media only screen and (max-width:407px){
	
/*Home Page*/
	

/*About Page*/

.content {
	width:90%;
}
/*Become a Member Page*/
.becomeMemberButton {
background-color:#007098;
	cursor:pointer;
	font-family:oswald;
	letter-spacing:1%;
	color:white;
	font-size:15px;
	border-radius:.2vw;
	padding:.25vw .25vw;
	margin:0 auto;
	text-align:center;
	left:0;
	width:35vw;
}

/*Volunteer Page*/


.legosPic1 {
	float:none;
	clear:both;
	display:block;
	margin:auto;
	width:75%;	
}

.legosPic2 {
	float:none;
	clear:both;
	display:block;
	margin:auto;
	width:75%;
}

/*Donate Page*/

.donatePic1 {
	float:none;
	clear:both;
	display:block;
	margin:auto;
	width:75%;	
}

.donatePic2 {
	float:none;
	clear:both;
	display:block;
	margin:auto;
	width:75%;
}

/*Contact Page */

.contactText {
	font-size: 24px;
}

.contactPic1 {
	float:none;
	clear:both;
	display:block;
	margin:auto;
	width:75%;	
}

.contactFacebookButton {
	font-size:4vw;	
}

.contactEmailUsButton {
	font-size:4vw;		
}
}