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

/************ FONTS  ************
Serif: Cinzel
Sans Serif: Lato
font-family: 'Mrs Saint Delafield', cursive;

/************ COLORS  ************
Blue: #171777; rgba(23,23,119,1)
Red: #AC0000; rgba(172,0,0,1)

/************ NOTES ************
Menu bar - red % 70% opacity
-rgba(172,0,0,.7)

News title backgroud - red @ 80% opacity
-rgba(172,0,0,.8)

Constitutional quote/mission above footer: 
paralax image with straight up white overlay @ 75% opacity
-rgba(255,255,255,.75)

*Sticky Menu - sticks to the top when scrolling down the page (TOR)*
*hero image subpages with quotes from constitution or rule*
************/

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, .page-header h1 {color: #171777; font-size: 3rem; font-weight: bold; font-family: 'Lato', sans-serif; text-transform: none;}
h2, .page-header h2 { font-variant-caps: small-caps; color: #AC0000; font-size: 2.75rem; font-family: 'Cinzel', serif;  font-weight: bold; margin-top: 1rem;}
h3 { color: #171777; font-size: 2.25rem; border-bottom: 2px solid #AC0000;  line-height: 1.0; margin: 0 0 10px 0; font-family: 'Cinzel', serif;}
h4 { color: #AC0000; font-size: 2rem; font-family: 'Cinzel', serif;}
h5 {background: #171777; font-size: 2rem; color: white; border-radius: .2rem; padding: .3rem; font-family: 'Lato', sans-serif;}
h5.sub {background: none; font-size: 1.75rem; color: #171777; border-radius: .1rem; padding: .1rem;}
h6 {color: #AC0000; font-size: 1.5rem;  font-weight: bold; }
h6.upper { text-transform: uppercase;  }
a { color: #171777; }
a:hover { color: black; }
.homelayout h3 {font-size: 3rem;}

@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: #AC0000;
}
blockquote {
    color: #171777;
    padding: 0 0 0 15px;
    margin: 0 0 20px;
    border-left: 5px solid #d5d5d5;
    font-family: 'Lora', serif;
    line-height: 1.2;
    font-size: 1.25rem;
	letter-spacing: 1.5px;
	font-style: italic;
	
}
blockquote p {font-size: 1.25rem;}

/************ TOP ***************/
/*#g-top {text-align: center;}  -- JKR added this in the particle*/
.g-logo img {padding: 1vw 0;}

@media only screen and (max-width: 767px) {
    .g-logo img {padding: 4vw; margin: 0; }
}

/************ NAVIGATION **************/
#g-navigation .g-content .g-main-nav {padding: 0vw 0vw 0vw 4vw;}
#g-navigation .g-menu-item-title {font-size: 1.2rem; font-weight: normal;}
#g-navigation .g-social {padding: 0vw 0vw 0vw 0vw;}
#g-navigation .g-social a {margin-right: 5px;}
        /*STICKY MENU*/
#g-navigation { position: relative; z-index: 10;}

#g-navigation .g-grid {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
	z-index: 10;
	background: rgba(172,0,0,.7);
}

#g-navigation.sticky { position: fixed; left: 0; right:0; top: 0; z-index: 10; }

/************ SHOWCASE **************/
.hero img {height: 28vw;}


        /****ALERT****/
.alert {margin-left: 5vw; margin-right: 5vw;}
        /*ROTATOR*/
.fwcontentcenter .layout-slideshow .sprocket-features-content {margin-top: 30vw; height: 5vw; }

.fwrsolidback .layout-slideshow .sprocket-features-title, .fwrsolidback .layout-slideshow .sprocket-features-desc {
  background: rgba(23,23,119,.85);
  margin-left: 40vw;
  width: 50vw;
  text-align: center;
}

.fwrsolidback .layout-slideshow .sprocket-features-desc {
    height: fit-content;
}

/.fwrsolidback .layout-slideshow .sprocket-features-title {
    /*font-size: 4.0vw;*/
    font-weight: 400;
}
.layout-slideshow .sprocket-features-title {font-weight: 400; text-shadow: 1px 1px #5e5e5e;}

.fwrsolidback .layout-slideshow .sprocket-features-desc p {
    /*font-size: 2.0vw;*/
    font-family: 'Cinzel', serif;
	text-shadow: 1px 1px #5e5e5e;
}

@media only screen and (max-width: 767px) {
        /*ALERT*/
    .alert {margin-left: 10vw; margin-right: 5vw;}
        /*ROTATOR*/
    /*.fwcontentcenter .layout-slideshow .sprocket-features-content {margin-top: 0; height: fit-content;}*/

    /*.fwrsolidback .layout-slideshow .sprocket-features-title, .fwrsolidback .layout-slideshow .sprocket-features-desc {
        background: rgba(23,23,119,.85);
        margin-left: 0;
        width: 100%;
        height: 30vw;
        text-align: center;
    }*/
	.fwrotator .layout-slideshow .sprocket-features-content {
		height: 30vw;
		background: rgba(23,23,119,.85);
	}
	.fwrsolidback .layout-slideshow .sprocket-features-desc, .fwrsolidback .layout-slideshow .sprocket-features-title {
		margin-left: 0;
		text-align: center;
		width: 100%;
	}
	
    .fwrsuperwide .layout-slideshow .sprocket-features-img-container, .fwrwide .layout-slideshow .sprocket-features-img-container, .fwrultrawide .layout-slideshow .sprocket-features-img-container {
        padding-bottom: 30vw;
    }
}

/************ UTILITY ***************/
        /*NEWS & EVENTS*/
#g-utility {margin-top: 2vw; margin-bottom: 2vw; padding: 0 2.5%;}
#g-utility .g-content {padding: 0;}
#g-utility h4.sprocket-strips-s-title {font-size: 1.6rem;}
.overlaytitleonpic .sprocket-strips-s-block .sprocket-strips-s-item { position: relative; }
.overlaytitleonpic .sprocket-strips-s-block img { position: absolute; object-fit: cover; object-position: center;  left:0; right: 0; width: 100%; height: 20vw; }
.overlaytitleonpic .sprocket-strips-s-content { z-index: 10; opacity: .99;  }
.overlaytitleonpic .sprocket-strips-s-title { display:flex; width: 100%; height: 20vw; align-items: flex-end; }
.platform-content .overlaytitleonpic  h4 { padding: 0; background: none; }
.overlaytitleonpic  h4 a { background: rgba(172,0,0,.8); color: white; padding: 10px; width: 100%;}
.centertitle h4 a { text-align: center; } 

@media only screen and (max-width: 767px) {
    .overlaytitleonpic .sprocket-strips-s-block img {position: relative; width: 100%; height: auto; display: block;}
	.overlaytitleonpic .sprocket-strips-s-title { height:  auto;}
    .sprocket-strips-s-container .sprocket-strips-s-block {text-align: center; align-items: center; width:  100%;}
    .overlaytitleonpic .sprocket-strips-s-item {display: flex; flex-flow: column wrap; order: 1;}
    .overlaytitleonpic .sprocket-strips-s-content {order: 2; margin-left: 0; margin-top: 0; text-align: center; align-items: center;}
	.overlaytitleonpic h4 a {display: block;}
}

/************ FEATURE ***************/
.homelayout #g-feature h3.g-title {font-size: 3rem;}
.homelayout #g-feature .moduletable[class*="title"] .g-title, .widget[class*="title"] .g-title {margin-bottom: 2vw; margin-right: 7vw; margin-left: 7vw;}
.homelayout #g-feature .platform-content {background: #ffffff; color: #333; padding: 3vw 5vw;}
.homelayout #g-feature img {margin: 1vw; box-shadow: 0px 2px 14px -5px rgba(0,0,0,0.8);}

@media only screen and (max-width: 767px) {
    .homelayout #g-feature h3.g-title {font-size: 1.75rem;;}
}

/************ EXPANDED **************/
.homelayout #g-expanded {background: url(/images/stories/template/background-logo.jpg) 50% 75% no-repeat; background-size: 30%;}

@media only screen and (max-width: 767px) {
	.homelayout #g-expanded {background: none;}
}

        /*CONNECT WITH US*/
.quicktitle {padding-bottom: 1vw!important;}
.quicktitle h3 {border-bottom: none; margin-top: 1vw;}
#g-expanded  { background: none; }

#g-expanded { position: relative; }
/* .homelayout #g-bottom .g-grid:first-child {	
    padding: 0;
    margin: 0;
    position: absolute;
    top: 20px;
    right: 20px;
} */

.flextablesmall {margin-top: 2vw; display: flex;}
.bigcell { flex: 1; padding-left: 20px; }

.flextablesmall h3 { font-size: 1.5rem; color: #58667C; border-bottom: 1px #58667C solid;  margin-top: 0px; margin-bottom: 15px;}
.flextablesmall h3, .flextablesmall h6, .flextablesmall p { padding: 0; }
.flextablesmall h6 { margin: 0;}

@media only screen and (min-width: 1200px) { .squarepic img { width:  200px;}}

@media only screen and (min-width: 960px) and (max-width:1199px) { .squarepic img { width:  12vw;} }

@media only screen and (max-width: 959px) {
	.flextablesmall { display: block; }
	.flextablesmall img { width: 100%; padding-bottom: 10px;}
	.bigcell { padding-left: 0px;}
}

/************ EXTENSION *************/

/************ BOTTOM ****************/
.homelayout #g-bottom { background: url(/images/stories/template/paralax2.jpg); background-size: cover; background-position: 50% 0%;}
        /*SIMPLE PARALAX*/
#g-bottom .g-content {padding: 1vw 0; background: rgba(255,255,255,.7);}
#g-bottom p {font-size: 1.25rem; font-family: 'Cinzel', serif; font-weight: 500;}
.homelayout #g-bottom .platform-content {margin: 4vw 9vw;}

@media only screen and (max-width: 767px) {
    #g-bottom p {font-size: 1rem; font-weight: bold;}
}

/************ FOOTER ****************/
#g-footer h2 {border-bottom: 1px solid #ffffff; font-weight: normal; text-transform: uppercase; margin-bottom: 2vw!important;}
#g-footer .fa {font-size: xx-large;}
#g-footer .fa {margin-right: 20px;}

/************ SECTIONS  ************/
#g-footer {border-top: none;}
#g-footer a { color: white; }

/************ MOBILE  ************/
.g-offcanvas-toggle { color:white }

/************ MODULES  ************/
.moduletable .nav.menu, .moduletable .unstyled { background: #171777; }
.moduletable .nav.menu li.current.active a, .moduletable .nav.menu li a:hover {
	color: #ffffff;
	background: #AC0000;
}
/********** SPROCKET LISTS DEFAULT FAQ *************/
.sprocket-lists-title {background: none; border-radius: 0px; border-top: none;}
.sprocket-lists-title .indicator {background: #ffffff;}



/************ HOMEPAGE MODULE HEADER ************/
.homelayout #g-utility h3 {border-bottom: none; margin-top: 1vw;}
h3.no-span {
    display: table;
    white-space: nowrap;
}
    h3.no-span:before, h3.no-span:after {
	  border-top: 2px solid #AC0000;
      content: '';
      display: table-cell;
      position: relative;
      top: 0.5em;
      width: 45%;
    }
    h3.no-span:before { right: 1.5%; }
    h3.no-span:after { left: 1.5%; }

@media only screen and (max-width: 767px) {
    h3.no-span {display: block!important; white-space: inherit!important;}
}

/************* CONTENT ***************/
#g-container-main {margin-top: 3vw;}

/************ MEMBERS ONLY **************/
.member p.readmore .btn, .content_vote .btn, .contact .form-actions .btn, .login .btn, .logout .btn, .registration .btn, .profile-edit .btn, .remind .btn, .reset .btn, .profile .btn, .search #searchForm .btn, .finder #finder-search .btn, .edit.item-page .btn-toolbar .btn, .pager.pagenav a, .moduletable #login-form .control-group .btn, #searchForm .btn, #finder-search .btn, .btn {background: #171777;}
.member .btn:hover, .btn-primary:hover, .login-button:hover {background: #171777;}
.member .unstyled a {color: #ffffff;}
.member .unstyled a:hover {color: #f8f8f8;}

/***LOGIN FORM***/
#g-aside form div.userdata ul.unstyled {display: none;}