@import url('//fonts.googleapis.com/css2?family=Alice&family=Lato:wght@400;700&display=swap');

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

/************ FONTS  ************
font-family: 'Alice', serif;
font-family: 'Lato', sans-serif;

/************ COLORS  ************
Green: #005826, rgba(0,88,38,1)
Light Green: #558766, rgba(85,135,102,1)

/************ NOTES ************
*subpages will need hero images for sake of the logo header - OR - a header like StLouis-Sound, hero images optional :) *

-Quicklinks: Light green at 80% opacity; rgba(85,135,102,.8)
-Rotator text has dropshadow; 100% 2,2,2
-Logo: can start with logo with no glow to use an outer-glow (100% 15px blur), or use the logo-glow file if preferred
-Heading underlines and links use Light Green  */

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

h1, h2, h3, h4, h5, h6 { margin: .75rem 0; line-height: 1.3; font-weight: normal;}
p { line-height: 1.3;}

h1 {color: #005826; font-size: 5vw; font-weight: normal; font-family: 'Alice', serif;}
h2, .page-header h2 { color: #005826; font-size: 2.5rem; border-bottom: 1px solid #005826; font-family: 'Alice', serif;  font-weight: normal;}
h3, h3.g-title { color: #005826; border-bottom: 1px solid #005826; font-size: 2.2rem; font-family: 'Alice', serif;  font-weight: normal;  /*padding-left: 25px;*/ }
h4 { color: #005826; font-size: 2rem;   line-height: 1.8; margin: 0 0 10px 0;  /*text-transform: uppercase;*/ color: #005826; font-family: 'Lato', sans-serif; }
h5 { color: #ffffff; background: #005826; font-family: 'Lato', sans-serif; border-radius: 3px; padding: 10px 20px; font-size: 1.6rem;}
h6 { color: #777; font-size: 1.4rem; text-transform: uppercase; font-weight: bold; font-family: 'Lato', sans-serif; }
a { color: #558766; }
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; }.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: #005826;
}

.outlinebutton { border-radius: 0; border: 1px #ffffff solid; padding: 15px 20px; text-transform: uppercase; background: none; font-size: 1.4vw; }
.outlinebutton:hover, #g-copywrite .outlinebutton:hover  { background: #005826; color: white; border: 1px #ffffff solid;  }
.sprocket-lists-portrait-container > li .sprocket-lists-portrait-item > a span { color: #558766; background: none; text-transform: uppercase; padding-left: 0px; }
.sprocket-lists-portrait-container > li .sprocket-lists-portrait-item > a:hover span { color: #333;  background: none;  padding-left: 0px; }

/************ HEADER  ************/
.homelayout .absoluteitem { position: absolute; /*top: 0;*/ left: 0; right: 0; z-index: 110;  }

.homelayout #g-navigation { background: rgba(85, 135, 102, 0); } 
#g-top, #g-navigation {padding: 0 2%;}}
.g-logo img { padding: 10px 20px 10px 0;}
.negativebottommargin {
    margin-bottom: -90px;
    z-index: 5;
}
.g-main-nav .g-toplevel > li:hover, .g-main-nav .g-toplevel > li.active {  background: rgba(0,0,0,.2); }
#g-showcase h1 { color: white; text-shadow: 2px 2px 5px rgba(0,0,0,.5);}
.g-main-nav .g-toplevel > li:hover > .g-menu-item-container, .g-main-nav .g-toplevel > li.active > .g-menu-item-container { color: white; }
.hero img {height: 30vh; opacity: 0.65;}

@media only screen and (min-width: 768px) {
	#g-navigation { background: rgba(0,88,38,1); } 	
}



@media only screen and (max-width: 767px) {
	#g-navigation .g-logo img { max-width: 230px; } 
	.fwrsuperwide .layout-slideshow .sprocket-features-img-container, .fwrwide .layout-slideshow .sprocket-features-img-container, .fwrultrawide .layout-slideshow .sprocket-features-img-container {
		padding-bottom: 0;
	}
	.overlayitem { background: none; position: relative; }
	#g-showcase h1 { text-shadow: none; font-size: 7vw;  }
	
	.g-offcanvas-toggle { display: block; }
	#g-showcase .outlinebutton { border-color: #005826; color: #005826; margin-top: 20px; }
	.outlinebutton { font-size: 1.2rem; }
	#g-showcase .outlinebutton:hover { background: #ddd;  }
	h1 { font-size: 10vw;}
}

/************ QUICKLINKS  ************/
.qloverlaybackpic .sprocket-strips-content {	background: rgba(0,88,38,.5); }
.qloverlaybackpic .sprocket-strips-content:hover {background: rgba(0,88,38,.8);}

@media only screen and (max-width: 767px) {
	/*.qloverlaybackpic .sprocket-strips-content, .qloverlaybackpic .sprocket-strips-content:hover { background: none; } */
	.qloverlaybackpic li { background: rgba(85,135,102,1); }
    .qloverlaybackpic li:hover {background: black;}
	.qlexpandingborder h4.sprocket-strips-title {font-size: 1.2rem;}
}

/************ MODULES  ************/
.sprocket-lists-portrait-container li { border-bottom: 1px solid #005826; }
.sprocket-lists-portrait-pagination li { background: #005826; }
.sprocket-lists-portrait-arrows .arrow { background: #558766; }

.zoompics .sprocket-lists-portrait-container > li h4.sprocket-lists-portrait-title { text-transform: uppercase; color: #005826; font-family: 'Lato', sans-serif;  }


.moduletable .nav.menu, .moduletable .unstyled { background: #005826; }
.moduletable .nav.menu li.current.active a, .moduletable .nav.menu li a:hover {
	color: #ffffff;
	background: #558766;
}

.overlayitem { background: rgba(0,0,0,.2); }
.logosize { height: 18vw;}
.overlayitem { display: flex; align-items: center; }
.overlayitem > div { flex: 1; }
.fwrbigarrows .layout-slideshow .sprocket-features-arrows .arrow, .layout-slideshow .sprocket-features-pagination { z-index: 100; }

.overlayitem  h1 { margin: 0;}
.sprocket-strips-nav { padding: 0;}


@media only screen and (max-width: 767px) {
	.overlayitem { background: white; }
	#g-showcase h1 { color: #005826; }
	.logosize { height: 40vw;}
	#g-utility .g-grid { padding-top: 30px;}
}



/************ SECTIONS  ************/
#g-extension {padding: 0 8% 5% 8%;}
#g-extension .g-content {padding: 1rem;}
/*.homelayout #g-extension .g-block:last-child .platform-content {padding: 0.5rem 0;}
.homelayout #g-extension .g-block:first-child .platform-content {padding: 0.5rem 0;}*/
.imgshadow a:hover img {box-shadow: 2px 2px 10px rgba(0,0,0,.5);}
#g-footer a, #g-copyright a { color: white; }
#g-copyright a:hover, #g-footer a:hover { color: #ddd; } 
#g-showcase { position: relative; }
#g-copyright { padding-top: 30px;}

#g-footer .g-grid { padding: 20px 0 40px 0;}

.linkspacing { line-height: 1.6; }

/************ move ads higher on mobile  ************/
@media only screen and (max-width: 767px) {
	#g-extension .g-block:last-child .platform-content:last-child { order: 1; padding-top: 0;}
	#g-extension .g-block:last-child .platform-content:nth-child(2) { order: 3; }
	#g-extension .g-block:last-child .platform-content:nth-child(3) { order: 4; padding-top: 0; }
	#g-extension .g-block:last-child .platform-content:first-child { order: 2; padding-top: 1.5rem; }
	#g-extension .g-content { display: flex; flex-wrap: wrap; flex-direction: column;}
}
@media only screen and (max-width: 767px) {
	/*#g-extension .g-content .platform-content:first-child  { order: 2; }
	#g-extension .g-content .platform-content:last-child { order: 1; }*/
	
}



/************ ROTATOR  ************/


/************ NEWS  ************

/************ MOBILE  ************/
#g-offcanvas .g-main-nav .g-toplevel {display: flex; flex-direction: column; float: left;}

.g-offcanvas-toggle { color: #005826; }


/**** SOCIAL MEDIA ICONS WHITE ****/
.g-social a { color: white; }
.g-social a:hover { color: #108093 !important; }

/**** CENTER SOCIAL MEDIA VERTICALLY ****/
.g-block.size-5 { display: flex; justify-content: center; align-items: center; }

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