@import url('//fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap');
/************ TEMPLATE  ************
Rotator Size: 1600x669 (super wide, 2.39:1)

/************ FONTS  ************
Serif: Cinzel
Sans Serif: Lato

/************ COLORS  ************
Green: #28604F; rgba(40,96,79,1)
Blue: #477499; rgba(71,116,153,1)

/************ NOTES ************
*Quicklink overlay - green at 80% - rgba(40,96,79,.8)
*Google translate in menu like SMM-Wichita
*titles are squared, buttons are rounded
*Quicklinks - build without 'Forms' button for now, but upload image anyway just in case Father changes his mind
************/

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: #477499; font-size: 3.5rem; font-weight: bold; font-family: 'Roboto Slab';}
.page-header h1 {text-transform: none; font-size: 3rem;}
h2, .page-header h2 {font-variant-caps: small-caps; color: #28604F; font-size: 2.2rem; font-family: 'Cardo', serif;  font-weight: bold;}
h3 {color: #477499; font-size: 2rem; border-bottom: 1px solid #28604F;  line-height: 1.3; margin: 0 0 10px 0;}
h4 {color: #477499; font-size: 1.8rem;}
h5 {background: #28604F; font-size: 1.75rem;color: white; border-radius: .2rem; padding: .5rem;}
h6 {color: #477499; font-size: 1.4rem; text-transform: uppercase; font-weight: bold;}
a {color: #477499;}
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: #477499;
}

/*************** HOMELAYOUT ***************/
.homelayout h3.g-title {background: #28604F; border-bottom: none; color: #ffffff; font-family: 'Cinzel', serif; font-weight: normal; padding: 10px 1vw; letter-spacing: 1px;}

/*************** OFFCANVAS ****************/
/*************** TOP **********************/
/*************** NAVIGATION ***************/
#g-navigation .g-logo img {height: 5vw; width: auto; margin: 1vw 2vw 1vw 5vw;}
#g-navigation .g-main-nav ul.g-toplevel {justify-content: flex-end;}
#g-navigation .g-toplevel li {margin-right: 15px;}
#g-navigation .g-menu-item-title {text-transform: uppercase; letter-spacing: 1px; font-weight: normal; font-size: 1.1rem; font-family: 'Lato', sans-serif;}

#google_translate_element {display: flex; align-items: center;}

@media (max-width: 767px) {
    #g-navigation .g-logo img {height: 12vw; margin: 5vw 0;}
}

/*************** SLIDESHOW ****************/
/*************** HEADER *******************/
/*************** ABOVE ********************/
/*************** SHOWCASE *****************/
/*************** UTILITY ******************/
        /*Quicklinks*/
.qloverlaybackpic .sprocket-strips-content {background: rgba(40,96,79,.8);}
.qloverlaybackpic .sprocket-strips-content:hover {background: rgba(40,96,79,.9);}

@media only screen and (max-width: 767px) {
	.qloverlaybackpic .sprocket-strips-content, .qloverlaybackpic .sprocket-strips-content:hover {background: none;}
	.qloverlaybackpic li {background: rgba(40,96,79,1);}
    .qloverlaybackpic li:hover {background: black;}
    .qloverlaybackpic .sprocket-strips-item, .qloverlaybackpic .sprocket-strips-content {border-radius: 0;}

    .qloverlaybackpic .sprocket-strips .sprocket-strips-container > li {position: relative;}


    .qloverlaybackpic .sprocket-strips-content {left: calc(30vw + 20px); position: absolute;}
    .qloverlaybackpic .sprocket-strips-content a {position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin-left: calc(-30vw - 20px); padding-left: calc(30vw + 20px); padding-right: 60vw;}
    .qloverlaybackpic h4.sprocket-strips-title a {justify-content: left;}
    .qlexpandingborder h4.sprocket-strips-title {width: 120vw;}

    .qloverlaybackpic .sprocket-strips-item {width: 30vw; height: 22vw; position: initial;}
}

/*************** FEATURE ******************/
/*************** EXPANDED *****************/
#g-expanded {
	padding: 0 5%;
}

.sprocket-lists-portrait-container li {border-bottom: 1px solid #28604F;}
#g-expanded .search {width: 80%; margin-left: auto; margin-right: auto;}
#g-expanded input[type="search"] {background-color: transparent; padding: 0.5rem 0.5rem; }


/*************** EXTENSION ****************/
    /*Social Blocks*/

#g-extension {padding-bottom: 3vw; padding-top: 3vw;}
#g-extension .block-a, #g-extension .block-b {box-shadow: 1px 1px 10px rgba(0,0,0,.3); /*align-items: stretch;*/ border-radius: 0;} 
#g-extension .block-a {margin-right: -1.5vw;}
#g-extension .block-b {margin-left: -1.5vw;}
#g-extension .g-content {margin: 1vw 2vw;}

/*************** BOTTOM *******************/
/*************** FOOTER *******************/
.footer-ads {margin: 1vw 0;}
.footer-logo img {height: 4vw; width: auto; margin-bottom: 1vw;}
.footer-info {padding: 2vw 4vw;}
.social-footer a {margin-right: 10px;}
.social-footer i {font-size: 1.5rem;}

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

/*************** MODULES ******************/
.moduletable .nav.menu, .moduletable .unstyled {background: #28604F;}
.moduletable .nav.menu li.current.active a, .moduletable .nav.menu li a:hover {
    /*color: #450e09;*/
    background: #477499;
}

/*************** SECTIONS *****************/
#g-footer a {color: #ffffff;}
#g-footer a:hover {color: #477499}
#g-footer .g-title {color: #ffffff; font-size: 1.2rem; letter-spacing: 2px; font-family: 'Lato', sans-serif;}


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

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

.homelayout #g-showcase div.sprocket-features-content {
    display: none;
}