@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700,900);

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

h1, h2, h3, h4, h5, h6 {
    font-family: 'Lato', sans-serif;
	font-weight: 300;
}

#ul-body-text {
    font-family: 'Lato', sans-serif;
	font-weight: 300;
    font-size: 16px; 
	line-height: 24px;
    color: #666;
}

p { 
	padding: 0; 
	margin-bottom: 12px; 
    font-family: 'Lato', sans-serif;
	font-weight: 300;
	font-size: 18px; 
	line-height: 28px;
	color: #666; 
	margin-top: 10px; 
}

.navbar {
    margin: 0px;
}

.centered {text-align: center}

a:link { color: #fcb100; font-weight: 500 }
a:visited { color: #fcb100; font-weight: 500 }
a:hover { color: #000; font-weight: 500 }
a:active { color: #666; font-weight: 500 }

/* RESPONSIVE HEADER RESIZING */
h1 { font-size: 48pt; }
h2 { font-size: 32pt; }
h3 { font-size: 20pt; }

@media(max-width: 1200px) {
  h1 { font-size: 40pt; }
  h2 { font-size: 28pt; }
}

@media(max-width: 800px) {
  h1 { font-size: 32pt; }
  h2 { font-size: 24pt; }
}

@media(max-width: 480px) {
  h1 { font-size: 28pt; }
  h2 { font-size: 22pt; }
  #highlights h3 { font-size: 18pt; }
}

/* HEADER SECTION */
#h-home {
    background: #121212 url(../img/header-landscape.jpg) no-repeat center;
    -webkit-background-size: 100%; -moz-background-size: 100%; -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;
    background-size: cover;
    color: #E66363;
}

.header-common {
    padding: 70px 0px;
    color: #f4f4f6;
}

#h-about {
    background: #121212 url(../img/header-piano.jpg) no-repeat center;
    -webkit-background-size: 100%; -moz-background-size: 100%; -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;
    background-size: cover;
    color: #0B4BD6;
}

#h-whyat {
    background: #121212 url(../img/header-jumper.jpg) no-repeat center;
    -webkit-background-size: 100%; -moz-background-size: 100%; -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;
    background-size: cover;
    color: #FFFFFF;
}

#h-lessons {
    background: #121212 url(../img/header-mannequin.jpg) no-repeat center;
    -webkit-background-size: 100%; -moz-background-size: 100%; -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;
    background-size: cover;
    color: #B53F10;
}

#h-contact {
    background: #121212 url(../img/header-child-swimming.jpg) no-repeat center;
    -webkit-background-size: 100%; -moz-background-size: 100%; -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;
    background-size: cover;
    color: #27750B; 
}

#non-home-headers h1 {
    padding-top: 270px;
}

/* HOME INTRO */

#intro-div {
    background: #121212;
}

#intro-left {
    background: #121212 url(../img/headshot-joe-schaefer.jpg) no-repeat center;
    -webkit-background-size: 100%; -moz-background-size: 100%; -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;
    background-size: cover;
    height: 300px;
    margin: 0px;
}

#intro-copy {
    color: #f4f4f6;
    padding: 60px 20px;
}

#contact-div {
    background: #121212;
    color: #f4f4f6;
}

#contact-div p {
    color: #f4f4f6;
}

/* SOCIAL ICONS SECTION */

#social-icons h1 {
    line-height: 40%;
    padding-top: 270px;
}

#social-icons { 
    padding: 5px 0px;
}

#social-icons i {
    font-size: 36px;
    padding: 0px 10px;
}

#social-icons a:link { color: #f4f4f6; }
#social-icons a:visited { color: #f4f4f6; }
#social-icons a:hover { color: #fcb100; }
#social-icons a:active { color: #fcc400; }

/* HIGHLIGHTS SECTION */
#highlights i {
    font-size: 50px;
}

.highlights-div {
    padding-top: 10px;
    padding-bottom: 20px;
}

#highlights a:link { color: #2c2c2c; text-decoration: none; }
#highlights a:visited { color: #2c2c2c; text-decoration: none; }
#highlights a:hover { color: #fcb100; text-decoration: none; }
#highlights a:active { color: #fcc400; text-decoration: none; }