@charset "UTF-8";
/* CSS Document */
@import url(https://fonts.googleapis.com/css?family=Economica:400,400italic,700,700italic);
#container {margin:0 auto; max-width:1280px;}
h1, h2, h3, h4 {font-family: 'Economica', sans-serif; width: 90%; margin: 10px 5%;}
h1 {width: 50%; font-size: 2.5em;}
h2 {width: 75%; font-size: 1.7em;}
h3 {font-size: 1.75em;}
h4 {font-size: 1.25em; text-transform:uppercase;}
p {font-family: 'Open Sans', sans-serif; width: 90%; margin: 10px 5%; font-size:.9em; line-height: 1.5em;}

/* HEADER */
header {background:#ffffff;}
.logo {width: 15%; float:left; margin: 10px 5% 0px; min-width:190px;}
nav {float:right; margin: 0 5% 0 0;}
nav li {display:block; float:right; font-family: 'Economica', sans-serif; font-size: 1.5em; width: auto; height: 100%; margin: 56px 25px;}
nav a {text-decoration:none; transition: all .5s ease;}
nav a:hover {background-color:#85340e; padding: 57px 25px; color:#FFFFFF;}
nav a:active {background-color:#85340e; padding: 57px 25px; color:#FFFFFF;}
.nav-current {background-color:#85340e; padding: 57px 25px; color:#FFFFFF;}

/* Homepage */
.feat {
	background: #F0F1F1 url("../images/Piano-Strings-BG.jpg") no-repeat center top;
	background-size:cover;
	webkit-background-size:cover;
	color: white;
	padding: 40px 0;
}
.cta-home {
	background: #85340e;
	float: right;
	margin: 10px 2.5% 0;
	padding: 20px;
	color: white;
	text-decoration:none;
	transition: all 0.5s ease;
	font-family: 'Economica', sans-serif; 
	font-size: 1.5em;
}
.cta-home:hover {
	background: #5a2207;
	color: #f0f1f1;
}

.home-text {padding: 40px 0;}
.piano-icon {
	width: 10%;
	margin: 0 auto;
}

.stars {
	background: #4a412c;
	color: white;
	padding: 40px 0;
}
.stars a {color:#FFFFFF;}
.stars a:hover {color:#FFFFFF;}
.stars-img-wrap {width:90%;margin: 30px 5% 0;}
.stars-img {
	background-size:cover;
	webkit-background-size:cover;
	width: 25%;
	display:block;
	min-height: 300px;
	float:left;
}
.stars-groban1 {background: #F0F1F1 url("../images/groban-1.jpg") no-repeat center center;}
.stars-groban2 {background: #F0F1F1 url("../images/groban-2.jpg") no-repeat center center;}
.stars-kidrock1 {background: #F0F1F1 url("../images/kid-rock-1.jpg") no-repeat center center;}
.stars-kidrock2 {background: #F0F1F1 url("../images/kid-rock-2.jpg") no-repeat center center;}

/* Pages */
.h1-bg {	background: #F0F1F1 url("../images/Piano-strings-header-bg.jpg") no-repeat center top;}
.advice-pullquote {width:33%; float:right;}
.cta-pages {
	float:none;
	margin: 0 auto 40px;
	display:table;
}
.service-block {width:25%; float:left;}
.service-block img {width:50%; margin: 10px auto; text-align:center; display:block;}
.service-block h2 {text-align:center;}
/* FOOTER */
.footer-bg {background-color:#faf9eb;}
.footer {width:90%; margin: 0 5%; padding:40px 0; display:block;}
.footer-logo {width:18%; margin-right:7%; float:left;}
.footer-assoc {width: 25%; float:left;}
.footer-soc {width: 50%; float:left;}
.footer-site {width: 50%; float:left;}
footer p {margin-left:0px;}
footer h4 {margin-left:0px;}

@media screen and (max-width: 700px) {
.logo {width:25%; margin: 30px 37.5% 0; min-width:125px;}
.navclear {clear:both;}
nav {float: none; margin: 20px 5% 0; width: 90%; min-height:135px;}
nav li {float:left; width: 20%; margin: 50px 6%; text-align:center;}
nav a:hover {padding: 15px 25px;}
nav a:active {padding: 15px 25px;}
.nav-current {padding: 15px 25px;}
h1 {width: 90%; margin: 10px 5%; font-size: 2em;}
h2 {width: 90%; margin: 10px 5%; font-size: 1.5em;}
.cta-home {float:left; margin: 25px 5% 0; font-size: 1.5em;}
.stars-img {width:50%}
.footer-logo {width: 43%;}
.footer-assoc {width: 50%; text-align:center;}
.footer-soc {width: 100%;}
.footer-site {width: 100%;}
.service-block {width:5%0; float:left;}
.advice-pullquote { width: 90%; float: none;}
}
@media screen and (max-width: 375px) {
.logo {width:50%; margin: 30px 25%; min-width:none;}
nav {margin: 0;}
nav li {float:none; width: 100%; height: 50px; margin: 20px 0;}
nav a:hover {padding: 15px 25px;}
nav a:active {padding: 15px 25px;}
.nav-current {padding: 15px 25px;}
.piano-icon {width: 18%;}
.stars-img-wrap {display:none;}
.footer-logo {display: none;}
.footer-assoc {width: 100%; text-align:left;}
.footer-soc {width: 100%;}
.footer-site {width: 100%;}
}