@import url(https://fonts.googleapis.com/css?family=Crimson+Text:400,700,600);

html { position: relative;  min-height: 100%; }

a { color: #096735; text-decoration: none; font-family: Helvetica, sans-serif; cursor: pointer; }
a:hover { color: #15B761; cursor: pointer; }

body { margin: 0 0 100px; /* bottom = footer height */ padding: 0; }
#container { padding: 15px; }

nav { background: #F5F5F5; height: 100px; width: 100%; padding: 0; margin: 0; }

nav img { position: relative; top: 20px; left: 30px; }

#callout { background: #469b45; color: #ffffff; padding: 0 22px 0 22px; float: right; position: relative; top: 20px; right: 30px; }

#gallery-container { margin: 0 auto; margin-top: 50px; text-align: center; } 
.gallery-img { width: 32.5%; height: 325px; display: inline-block; background-size: contain !important; background-repeat: no-repeat !important; }

#about { max-width: 75%; margin: 0 auto; text-align: center;; }
#services, #winter-services, #contact { text-align: center; }

h1 { font-family: 'Crimson Text', serif !important; color: #514f22; padding-top: 20px; } 
p { font-family: Helvetica, sans-serif; color: #096735; font-size: 20px; text-align: center; display: inline-block; }

#left-services, #right-services { text-align: left; display:inline-block; vertical-align: top; font-family: 'Crimson Text', serif; color: #514f22; font-size: 19px; line-height: 1.4; }

.gallery-img.first { background-image: url('images/garden-1.png'); background-position: center; }
.gallery-img.second { background: url('images/garden-2.png'); background-position: center; }
.gallery-img.third { background: url('images/garden-3.png'); background-position: center; }

#contact p, #contact a { font-size: 23px; }
.contact-line { display: inline-block; }

footer { background: #F5F5F5; position: absolute; left: 0;  bottom: 0; height: 100px; width: 100%; }
#footer-small { display: block; color: grey; text-align: center; line-height: 1.4; width: 100%; max-width: 75%; font-size: 15px; margin: 0 auto; position: relative; top: 42px; }



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

.gallery-img { display: block; width: 90%; padding-bottom: 30px; margin: 0 auto; max-height: 225px; }
nav { height: 180px; }
nav img { display: block; left: 0; margin: 0 auto; }
#callout { float: none; top: 40px; right: 0; max-width: 250px; margin: 0 auto; }
.gallery-img.second {  display: none; visibility: hidden; }
.gallery-img.third {  display: none; visibility: hidden; }
#about  {  position: relative; max-width: 95%; }
#left-services, #right-services { display: block; width: 70%; margin: 0 auto; }

}