@import url('https://fonts.googleapis.com/css?family=Lato|Merriweather&display=swap');

html {  
	box-sizing: border-box; 
}

*, *:before, *:after {  
	box-sizing: inherit;
}

/*Body text is Lato or sans-serif*/
body{
	font-family: lato, sans-serif;
	margin: 10px 0px 0px 0px;
}

/*Centers everyting on the page and sets a max width to 1080px. Note: Top image, Call to action banner in middle of page, and footer color extend all the way to the sides of the screen*/
header, main, .center, .centerfoot{
	max-width: 1080px;
	margin: auto;
}

/*Top Navigation and Inpage link styling*/
nav ul{
	text-align: right;
}

.pagelink ul{
	text-align: center;
}

nav li, .inpage li{
	display: inline-block;
	font-size: 1.25rem;
	margin: 5px 10px;
}

nav a:link, nav a:visited, .inpage a:link, nav a:visited{
	color: #314AC1;
	font-weight: bold;
	text-decoration: none;
	transition: .7s;
}

nav a:hover, .inpage a:hover{
	background-color: #2BCACC;
	color: #FFFFFF; 
	padding: 7px 5px;
}

nav a:active, .inpage a:active{
	border: 3px solid #314AC1;
	transition: .2s;
}

header img{
	float: left;
}

header{
	padding: 5px 2%;
}

/*Top image and text styling*/
#hero-image{
	background: url(images/top-concert.jpg);
	background-size: cover;
	background-position: center center;
}

#hero-image .center{
	padding: 125px 2%;
}

#hero-image .center h1{
	color: #FFFFFF;
	text-shadow: 3px 3px 2px #000000;
	margin: 0px;
	max-width: 500px;
}

#hero-image .center p{
	color: #FFFFFF;
	font-size: 1.3rem;
	font-weight: bold;
	text-shadow: 2px 2px 2px #000000;
	margin: 0px;
	max-width: 500px;
}

/*Body images. All allow a text banner if wanted and is responsive to screen changes. Moved them into here becasue it gave me more uniform controll and wanted option to add banner text on each image.*/
/*"About The Saguaro Music Project" image and text-banner (if used) styling.*/
.smp-jazz div{
	background: url(images/smp-jazz.jpg);
	background-size: cover;
	background-position: center center;
	padding: 205px 0px 0px 0px;
}

/*"The Benefits of Learning an Instrument" image and text-banner (if used) styling.*/
.learn-child div{
	background: url(images/learn-child.jpg);
	background-size: cover;
	background-position: center center;
	padding: 245px 0px 0px 0px;
}

/*"What Your Donations Do" do-instrument image and text-banner (if used) styling.*/
.do-instrument div{
	background: url(images/do-instrument.jpg);
	background-size: cover;
	background-position: center center;
	padding: 295px 0px 0px 0px;
}

/*"What Your Donations Do" do-f image and text-banner (if used) styling.*/
.do-fix div{
	background: url(images/do-fix.jpg);
	background-size: cover;
	background-position: center center;
	padding: 295px 0px 0px 0px;
}

/*"How To Donate" image and text-banner (if used) styling.*/
.donage-money div{
	background: url(images/donage-money.jpg);
	background-size: cover;
	background-position: center center;
	padding: 240px 0px 0px 0px;
}

.donage-money .text-banner p{
	text-shadow: 2px 2px 2px #000000;
	background-color: rgba(49, 74, 193, 0.5);
	color: #FFFFFF;
	padding: 15px;
	text-align: center;
}

/*"Donate Now and Newsletter" image and text-banner (if used) styling.*/
.involved div{
	background: url(images/involved.jpg);
	background-size: cover;
	background-position: center center;
	padding: 300px 0px 0px 0px;
}

.involved .text-banner p{
	text-shadow: 2px 2px 2px #000000;
	background-color: rgba(49, 74, 193, 0.5);
	color: #FFFFFF;
	padding: 15px;
	text-align: center;
}

.row{
	font-size: 0px;
}
 
 .row > *{
	 font-size: 1rem;
 }

/*h1, h2, and basic paragraph styles*/
h1{
	font-family: 'Merriweather', serif;
	font-size: 2rem;
	font-weight: bold;
}

h2{
	font-family: 'Merriweather', serif;
	font-size: 1.375rem;
	color: #FFFFFF;
	text-align: center;
	background-color: #314AC1;
	padding: 20px;
	border: 4px solid #39B54A;
	margin: 2%;
}

p{
	line-height: 1.4em;
	margin-top: 0px;
}

/*Fixes spacing issues in paragraphs and ul lists*/
.nspace{
	margin: 5px 0px;
}

/*Responsive column styling*/
.onethird, .twothird{
	display: inline-block;
	margin: 2%;
	vertical-align: top;
}

.onethird{
	width: 29.3%;
}

.twothird{
	width: 62%;
}

/*Call to action banner full width styling*/
.callout{
	text-align: center;
	background-color: #314AC1;
	border: 5px solid #39B54A;
	margin: 1rem -9999rem 3rem -9999rem;
	padding: 1rem 9999rem;
}

.callout h2{
	color:  #FFFFFF;
	text-align: center;
	border: none;
	padding: 0px;
}

.call h2{
	margin-top: 0px;
}

/*Blue color background with white text styling*/
.ctext.bcolor{
	background: #314AC1;
	color: white;
	padding: 30px 20px 30px 20px;
}
.bcolor p{
	padding: 0px 5px 26px 5px;
	margin-bottom: 0px;
}

/*Button styling*/
.button:link, .button:visited{
	background: #39B54A;
	display: inline-block;
	border: 3px solid #2BCACC;
	padding: 6px 20px;
	font-size: 1.25rem;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration:none;
	transition: .6s;
}

.button:hover{
	background: #2BCACC;
	color: #FFFFFF;
	border: 3px solid #FFFFFF;
	padding: 8px 22px;
}

.button:active{
	border: 5px solid #FFFFFF;
	transition: .2s;
}

/*Button in header styling*/
.headbutton:link, .headbutton:visited{
	background: #39B54A;
	display: inline-block;
	border: 3px solid #2BCACC;
	padding: 5px 10px;
	font-size: 1.25rem;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration:none;
	transition: .6s;
}
.headbutton:hover{
	background: #2BCACC;
	color: #FFFFFF;
	border: 3px solid #314AC1;
	padding: 7px 12px;
}

.headbutton:active{
	border: 5px solid #314AC1;
	transition: .2s;
}

/*Footer styling*/
footer{
	background-color: #2BCACC;
	color: #FFFFFF;
	border-top: 5px solid #39B54A;
	margin-top: 10px;
}	
.social ul{
	padding-left: 25px;
}

.social li{
	display: inline-block;
	text-decoration: none;
	padding: 8px;
}

.social img{
	padding: 3px;
}

/*Scales up socal image links on hover*/
.social img:hover { 
	transform: scale(1.4);
	transition: .5s;
}

.fcopy{
	text-align: right;
	margin-left: 1px;
}

.fcopy a:link, .fcopy a:visited{
	color: #FFFFFF;
	text-decoration: none;
	transition: .7s;
}

.fcopy a:hover{
	font-size: 1.1rem;
}

.fcopy p{
	font-size: .85rem;
}

/*Removes checkbox in NAV*/
nav label, #toggle{
	display: none;
}

nav label, #toggle{
	display: none;
	font-size: 1.25rem;
}

/*media screen styling for smaller screens*/
@media screen and (max-width: 980px){
	.onethird, .twothird{
		width: 100%;
		margin: auto;
	}
	
	h2{
		display: block;
		margin: 1.25rem;
		padding: 20px 0px;
	}
	
	#about, #how{
		margin-bottom: 0px;
	}
	
	header{
		padding: 5px 5%;
	}
	
	.row{
		padding: 0px 5%;
	}
	
	/*Sets margins for text for small screens*/
	.ctext{
		margin: 1.5rem 0rem 1rem 0rem;
	}
	
	/*Top image styling for small screens*/
	#hero-image .center p, #hero-image .center h1{
		padding: 0px 5%;
	}
	
	#hero-image{
		margin-top: 15px;
	}
	
	/*Logo styling for screens*/
	header img{
		float: none;
		margin-bottom: 15px;
	}
	
	/*Sets toggle display for small screens*/
	#toggle{
		display: none;
	}

	#toggle:checked ~ #menu{
		display: block;
	}

	#toggle:not(:checked) ~ #menu{
		display: none;
	}

	/*Navigation styling for small screens*/
	header, nav ul, .pagelink ul{
		text-align: center;
	}

	nav ul{
		padding: 0px;
	}
	
	.pagelink ul{
		padding: 0px 20px;
	}
	
	nav li, .pagelink li{
		display: block;
		background: #FFFFFF;
		padding: 10px 0px;
		margin: 0px;
	}

	nav label, .pagelink label{
		background: #314AC1;
		color: #FFFFFF;
		display: block;
		padding: 15px 0px;
		font-weight: bold;
	}

	nav a:hover, .pagelink a:hover{
		padding: 0px;
	}
	
	nav a:link, nav a:visited, .pagelink  a:link, .pagelink  a:visited {
		color: #314AC1;
		border-top: 5px solid transparent;
		transition: .5s;
	}

	nav li:hover, .pagelink li:hover{
		background: #2BCACC;
	}

	nav li:hover a, .pagelink li:hover a{
		color: #FFFFFF;
	}

	nav li:active a, .pagelink  li:active a{
			border: none;
	}

	/*Header call for action button styling for small screens*/
	.headbutton:link, .headbutton:visited{
		display:block;
		padding: 10px;
	}

	.smallaction{
		padding-top: 0px;
		padding-bottom: 0px;
	}
		
	.bcolor{
		margin-top: 5px;
		margin-bottom: 20px;
	}	
		
	/*Image adjustmnets to better fit for smaller screens. This keeps the girl in the center. Without this, the girl's face would be at the bottom */
	.involved div{
		background-position: top center;
	}
	
	/*Reduces top and bottom margin in Call to Acton banner.*/
	.callout{
		margin: 0rem -9999rem 1rem -9999rem;
	}
	
	/*Footer style for small screens*/
	footer{
		padding-top: 21px;
	}	
	
	.faddress{
		text-align: center;
		margin: auto;
	}
	
	.social{
		text-align: center;
		margin: auto;
	}
	
	.social ul{
		padding-left: 0px;
	}
	
	.fcopy{
		text-align: center;
		margin: auto;
	}
}