/************ FONTS  ***********
Serif: Roboto Slab
Sans Serif: Lato

/************ COLORS  ***********
Navy: #001940, rgba(0,25,64,1)
Light Grey: #e6e7e8, rgba(230,231,232,1)

/************ NOTES ************
** Will need a hero on each page so the logo has somewhere to live; similar to ABBGI, StMartin-Beth
** School Mockup #2 - Honored students, set up in Roksprocket Strips articles - parallel theme
** School Mockup #2 - Testimonials set up in Roksprocket headlines module, see Gear Connexion testimonials for example
************/

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: #001940; font-size: 3rem; font-weight: bold; font-family: 'Roboto Slab';}
h2, .page-header h2 { color: white; background: #001940; margin-top: 10px; padding: 5px 20px; font-size: 2rem; font-weight: normal; font-family: 'Roboto Slab';}
h3 { color: #001940; font-size: 1.5rem; font-weight: bold; font-family: 'Roboto Slab'; }
h4 {color: #001940; font-size: 2rem; font-weight: normal; font-family: 'Roboto Slab';}
h5 { font-family: 'Lato', sans-serif; font-size: 1.3rem;text-transform: uppercase; font-weight: bold;}
h6 {color: #A1A1A1; font-size: 3rem; text-transform: uppercase; font-weight: bold; }
a { color: #b18115; }
a:hover { color: black; }

.alert h2 { padding: 0;}
.alert h1, .alert h2, .alert h3, .alert h4, .alert h5, .alert h6, .alert p {
    margin-left: 10%;
}

.biggertext { font-size: 1.3rem; color: #001940;}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
	h1 { font-size: 2rem; }  
	h2 { font-size: 1.3rem; }
	h3 { font-size: 1.3rem; }
	h4 { font-size: 1.3rem; }
	h5 { font-size: 1rem; }
	h6 { font-size: 1rem; }
	p { font-size: .9rem; margin-bottom: 4px;}
	h1, h2, h3, 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: #001940;
}
.button.outlinebutton { border: 1px #001940 solid; color: #001940; background: transparent; }
.button.outlinebutton:hover  { border: 1px #001940 solid; color: white; background: #001940; }


blockquote {
    color: #001940;
    padding: 0 0 0 15px;
    margin: 0 0 20px;
    border-left: 0px solid #d5d5d5;
    font: italic 16px/22px Georgia, Serif;
    line-height: 1.2;
    font-size: 2rem;
}


/************ HOMELAYOUT  ************/
#g-expanded h3 { color: white; }
.greybutton.readon { background: #e6e7e8; color: #001940; }

 
/************ HEADER  ************/
#g-header  { padding: 0 2%;}
#g-header .g-content { padding: 0; margin: 0;}
#g-header .g-grid { align-items: center; }
.g-main-nav .g-toplevel > li:hover, .g-main-nav .g-toplevel > li.active, .g-main-nav .g-sublevel > li:hover, .g-main-nav .g-sublevel > li.active { background: rgba(255,255,255,.2); }
.g-main-nav .g-toplevel > li:hover > .g-menu-item-container, .g-main-nav .g-toplevel > li.active > .g-menu-item-container { color: white; }
.g-social { text-align: right; }
.g-logo img {margin-bottom: -4vw; position: relative; z-index: 1000; }
/*.homelayout .g-logo img { display: none;  }*/
.verticalcolumnoverlay div:last-child, .verticalcolumnoverlay > a:last-child {margin-bottom: 7px !important;}
.desktoplogo img {height: 5vw; width: auto; margin-bottom: -2vw!important;}

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

/***********Feature rotator added 1.6.21****************/
.scseperateback .sprocket-features-content {background: rgba(0,25,64,1);}
#g-feature .sprocket-features-desc h1,
#g-feature .sprocket-features-desc h2,
#g-feature .sprocket-features-desc h3,
#g-feature .sprocket-features-desc h4,
#g-feature .sprocket-features-desc h5,
#g-feature .sprocket-features-desc h6,
#g-feature .sprocket-features-desc p {color: white;}
#g-feature .sprocket-features-desc .readon {background: transparent; border: 1px solid white; }
#g-feature .sprocket-features-desc .readon:hover {background: white; color: #001940; }

#g-expanded .sprocket-strips-p-pagination li { background: white; }
#g-expanded .squarepicstrip .readon { background: #333; }
#g-expanded .sprocket-strips-p-title a { color: white; font-family: Lato, san-serif; font-size: 1.5rem; font-weight: bold;}

@media only screen and (max-width: 767px) {
.photoblocknews .sprocket-strips-content h4 {font-size: 1.1rem;}
}

/************ SECTIONS  ************/
#g-footer a { color: white; }
#g-footer h3 { color: white; }
/*#g-bottom { background: url(/images/template/beloit-flat.jpg) 50% 0 no-repeat; background-size: cover; }*/
#g-extension .g-grid { /*background: url(/images/template/school-background.jpg) 0% 5% no-repeat; background-size: 10vw*/; }
/*#g-extension .g-grid .g-block { background: url(/images/template/quote2.png) 100% 95% no-repeat; background-size: 10vw; }*/
#g-extension .g-content { padding: 4rem; }


@media only screen and (max-width: 767px) {
	#g-extension .g-content { padding: 2rem;}
}



/************ ROTATOR  ************/
.verticalcolumnoverlay div, .verticalcolumnoverlay > a {
	background: rgba(0,25,64,.8);
	color: white; 
}
.verticalcolumnoverlay > a:hover {background: rgba(0,25,64,.9); color: white;}
.verticalcolumnoverlay  { text-transform: uppercase; font-size: 1.3rem;}

.leftsidevertical .verticalcolumnoverlay {
    left: 7%;
    right: auto;
}

@media only screen and (max-width: 767px) {
	.verticalcolumnoverlay { padding-top: 20px;}
	.verticalcolumnoverlay div, .verticalcolumnoverlay > a { background: rgba(0,25,64,1); }
	.leftsidevertical .verticalcolumnoverlay { left: auto; }	
}

/************ TESTIMONIALS  ************/
.sprocket-headlines-item.active a { color: #001940; }
.sprocket-headlines { background: none; border: none;}
.sprocket-headlines-navigation .arrow { background: none; box-shadow: none; color: #001940; opacity: 1; font-size: 5rem; height: auto;}
#g-extension { background: linear-gradient(#ffffff, #afafaf); }

/************ NEWS  ************/
.photoblocknews .sprocket-strips-item .readon:hover { background: rgba(255,255,255,.75); color: #001940; }
.photoblocknews .sprocket-strips-content h4 { font-family: 'Lato', sans-serif; background: rgba(255,255,255,.75); }
.photoblocknews .sprocket-strips-content h4 a { color: #001940; text-shadow: none;}
.photoblocknews .sprocket-strips-item { background-image: url(/images/template/article-default.jpg); }
.photoblocknews .sprocket-strips-arrows .arrow { color: rgba(255,255,255,.9); }


/************ MOBILE  ************/
.g-offcanvas-toggle { color: white; }
.smalllogo img { width: 35%; padding-top: 20px; padding-bottom: 20px;}
.smalllogo { text-align: center; }

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

.ministrypage .item .pull-left.item-image img {border-radius:  4px 4px 0 0;}
.ministrypage .page-header { padding-top: 0; margin-top: 0px; margin-bottom: 10px; }

.ministrypage .page-header h2 {
    border-bottom: 2px solid #505050;
    margin: 0;
    padding: 8px 7px;
	border-radius: 0 0 4px 4px;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}

@media only screen and (max-width: 767px) {
	.ministrypage .item .pull-left.item-image img {
		width: 100%;
	}
}

.sprocket-tabs-nav {
    border-bottom: 1px solid #ddd;
    background: #e8e8e8;
}
.layout-top .sprocket-tabs-nav {
    margin-bottom: 10px;
}
.sprocket-tabs-nav > li.active > .sprocket-tabs-inner { transition: all .5s ease-in-out; }
.sprocket-tabs-nav > li.active > .sprocket-tabs-inner,  .sprocket-tabs-nav > li:hover > .sprocket-tabs-inner{     background-color: #001940;  color: white;}
.sprocket-tabs-nav li .sprocket-tabs-inner { 
	padding: 15px;
	border: 2px #777 solid;
	border-bottom: none;
    margin: 0 10px;
	border-radius: 8px 8px 0 0 ; 
}

.overlayrotatorarea .g-container .g-grid, .overlayrotatorarea > .g-grid {
    left: 75%;
    right: 2%;
}

@media only screen and (max-width: 767px) {
	.overlayrotatorarea .g-container .g-grid, .overlayrotatorarea > .g-grid { right: 0; left: 0; }
}


.verticalcolumnoverlay  img { width: 11vw;}
#g-above img { height: 27vw; object-fit: cover; width: 100%; opacity: 1; }
#g-above { position: relative; background: url(/images/stories/template/hero/default.jpg) 0 0 no-repeat; background-size: cover; }
#g-above p { padding: 0; margin: 0;}

/* #g-above .ontoptopleft img { height:  auto; width: 12vw; z-index: 10; position: absolute; top: 5%; left: 10%; opacity: 1; }  */

/***************** SCHOOL QUICKLINKS ********************/
.schoollayout .qlsolidback .sprocket-strips-item {background: #001940; color: white;}
.schoollayout .qlsolidback .sprocket-strips-item a, .qlsolidback .sprocket-strips-item .sprocket-strips-title {color: white; font-size: 1.2rem;}
.schoollayout .qlsolidback .sprocket-strips-item:hover {background: rgba(0,25,64,.9);}