@import url('//fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Overlock:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/************ TEMPLATE  ************
Rotator Size: 1600x669 (super wide, 2.39:1)

/************ FONTS  ************
Serif: Overlock  font-family: 'Overlock', cursive;
Sans Serif: Montserrat font-family: 'Montserrat', sans-serif;

/************ COLORS  ************
Dark Green: #004c45; rgba(0,76,69,1)
Lime Green: #9bbb71; rgba(155,187,113,1)
Light Lime Green: #d0dfbe; rgba(208,223,190,1)

/************ NOTES ************
***Change 'Visit Us at the Markets' to 'Garden Musings with God' ---they're not doing farmers markets now***
*Lime Green is used for Menu bar at 80% opacity - rgba(155,187,113,.8) - and the 'READ MORE' for 'Garden Musings with God'
*Light Lime Green is used for text box color under title 'Sustainable Agriculture' - solid
*Dark Green is used for: menu text, block background color behind 'Sustainable Agriculture' title/image/text box, title for 'Garden Musings with God' and its post titles (this will be a news rocksprocket as usual), footer background color
*Black overlay 20% for Rotator and High-tunnel paralax - rgba(0,0,0,.2)
*Rotator Text has a drop shadow - 100% black, 7px blur. the logo will already have a drop shadow in its image
*Drop shadow (20% black, 10px blur) is used on 'news/musings' images
***I think it would look super neat to have the rotator be paralax like you showed on the zoo's website. It also might look pretty snazzy with a sticky menu, too. 
***The high-tunnel picture - can you try making that a paralax where the image moves too, just not as fast as the rest of the page when scrolling? I think that would look pretty good, too. I don't have a taller picture for that paralax, so I figured this is a great time to try a 'slo-mo' paralax peice here
***there are sample Musings/News images for Gary to use, please place there where he can use them
************/

body {color: #333; font-family: 'Montserrat', sans-serif;}

h1, h2, h3, h4, h5, h6 {margin: .75rem 0; line-height: 1.3; font-weight: normal;}
p {line-height: 1.3;}
.page-header h1 {text-transform: none; font-size: 3rem;}
h1 {color: #004c45; font-size: 3.5rem; font-weight: bold; font-family: 'Overlock', cursive;}
h2, .page-header h2 {font-variant-caps: small-caps; color: #004c45; font-size: 2.5rem; font-family: 'Overlock', cursive;  font-weight: bold;}
h3 {color: #004c45; font-size: 2em; border-bottom: 1px solid #9bbb71; line-height: 1.3; margin: 0 0 10px 0; font-family: 'Overlock', serif;}
h4 {color: #9bbb71; font-size: 2rem;}
h5 {background: #004c45; font-size: 1.75rem; color: white; border-radius: .2rem; padding: .5rem;}
h6 {color: #9bbb71; font-size: 1.5rem; text-transform: uppercase; font-weight: bold;}
a {color: #9bbb71;}
a:hover {color: black;}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
    h1 {font-size: 2.2rem;}
    h2 {font-size: 1.75rem;}
    h3 {font-size: 1.75rem;}
    h4 {font-size: 1.75rem;}
    h5 {font-size: 1.2rem;}
    h6 {font-size: 1.2rem;}
    p {font-size: 1rem; margin-bottom: 4px;}
    h1, h2, h3 {line-height: 1.2;}
    h4, h5, h6, p {line-height: 1.1;}
}

@media only screen and (max-width: 767px) {
 h1 {font-size: 2.2rem;}
 h2 {font-size: 1.75rem;}
 h3 {font-size: 1.75rem;}
 h4 {font-size: 1.75rem;}
 h5 {font-size: 1.2rem;}
 h6 {font-size: 1.2rem;}
 p {font-size: 1rem; margin-bottom: 4px;}
 h1, h2, h3 {line-height: 1.2;}
 h4, h5, h6, p {line-height: 1.1;}
}

.readon, .button, .btn, p.readmore .btn, .sprocket-lists-portrait-container > li .sprocket-lists-portrait-item > a span, .listentobutton.moduletable a {
    background: #004c45;
}

/*************** HOMELAYOUT ***************/
/*************** OFFCANVAS ****************/
/*************** TOP **********************/

@media only screen and (max-width: 767px) {
	#g-top .g-content {padding: 0 1.5rem;}
}		
	
/*************** NAVIGATION ***************/
/*************** SLIDESHOW ****************/
/*************** HEADER *******************/
/*************** ABOVE ********************/
/*************** SHOWCASE *****************/
.homelayout #g-showcase h3 {border-bottom: none;}
.homelayout #g-showcase {position: relative; height: 42vw;}
.homelayout #g-showcase .g-grid:first-child {position: absolute; width: 100%; z-index: 10; background: rgba(155,187,113,.8); color: #ffffff; padding: 0 10%;}
.homelayout #g-showcase .g-grid:nth-child(2) {position: absolute; width: 100%;}

.homelayout .fullwidthrotator.sidegradient .layout-slideshow .sprocket-features-content {top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; padding: 0; margin: 0; background: rgba(0,0,0,.2);}
.homelayout .fullwidthrotator .layout-slideshow .sprocket-features-content .sprocket-features-desc {top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; padding: 0; margin: 0; background: none; display: flex; align-items: center; justify-content: center; flex-direction: column;}
.homelayout .sprocket-features-desc img {height: 20vw; width: auto;}

@media only screen and (max-width: 767px) {
    .fullwidthrotator.superwiderotator.sidegradient .layout-slideshow .sprocket-features-img-container, .fullwidthrotator.widerotator.sidegradient .layout-slideshow .sprocket-features-img-container {padding-bottom: 0;}
}

.hero img {height: 27vw; opacity: 0.85;}
@media only screen and (max-width: 767px){
	.hero img {  height: 30vw;}
}

/*************** UTILITY ******************/
/*************** FEATURE ******************/
.homelayout #g-feature {height: 35vw; margin-bottom: 10vw; position: relative;}
.homelayout #g-feature h3.g-title {border-bottom: none; color: #ffffff; margin-bottom: 2vw;}
.homelayout .intro-img {position: absolute; top: 3vw; left: 3vw; right: 60%; bottom: 5vw;}
.homelayout .intro-img img {width: 80%;}

.homelayout .intro-text {position: absolute; top: 4vw; left: 45%; right: 3vw; bottom: 7vw;}
.homelayout .intro-text .even {background: #d0dfbe; height: 30vw; padding: 2.5vw;}
.homelayout .intro-text .even p {font-size: 1.2vw;}

@media only screen and (max-width: 767px) {
    .homelayout #g-feature {height: initial; margin-bottom: 0;}
    .homelayout #g-feature h3.g-title {text-align: center;}
    .homelayout .intro-img {position: initial;}
    .homelayout .intro-text {position: initial;}
    .homelayout .intro-text .even {height: initial;}
    .homelayout .intro-text .even p {font-size: initial;}
}

/*************** EXPANDED *****************/
/*************** EXTENSION ****************/
.homelayout #g-extension {padding: 0 0;}
.homelayout #g-extension img {width: 100%;}
.homelayout #g-extension .g-content {margin: 0; padding: 0;}

/*************** BOTTOM *******************/
#g-bottom {background: url('/images/template/beet-row.jpg') 0% 100% no-repeat, url('/images/template/bg-logo-green.jpg') 50% 0% no-repeat; background-size: 100%, 30%; padding: 10vw 10%;}
.homelayout #g-bottom h3.g-title {border-bottom: none;}

.homelayout #g-bottom .sprocket-strips-s-item {display: flex; flex-direction: row;}
.homelayout #g-bottom .sprocket-strips-s-item img {height: 10vw; width: 10vw; margin-right: 1vw; box-shadow: 1px 1px 1px rgba(0,0,0,.4);}
.homelayout #g-bottom .sprocket-strips-s-item a.readon {background: none; color: #d0dfbe;}

@media only screen and (max-width: 767px) {
    .homelayout #g-bottom .sprocket-strips-s-item {flex-direction: column;}
    .homelayout #g-bottom .sprocket-strips-s-item img {width: 100%;}
}

/*************** FOOTER *******************/
#g-footer {padding-top: 2vw!important;}

/*************** COPYRIGHT ****************/

/*************** MODULES ******************/
.moduletable .nav.menu, .moduletable .unstyled {background: #004c45;}
.moduletable .nav.menu li.current.active a, .moduletable .nav.menu li a:hover {
    color: #004c45;
    background: #d0dfbe;
}

/*************** SECTIONS *****************/
#g-footer a {color: #ffffff;}

/*************** MOBILE *******************/
.g-offcanvas-toggle {color: #ffffff;}

/*************** ADS **********************/