/************ 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-extension h3 { color: white; }
.greybutton.readon { background: #e6e7e8; color: #001940; }

.homelayout #g-feature {
	padding: 0;
}

.homelayout .scthird.scwide .layout-showcase .sprocket-features-img-container img {
	width: initial;
}

 
/************ 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 { position: relative; z-index: 1000; }
/*.homelayout .g-logo img { display: none;  }*/
.verticalcolumnoverlay div:last-child, .verticalcolumnoverlay > a:last-child {margin-bottom: 1px !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;
}

#g-utility {padding: 0 5%;}


/**CAMPAIGN - March 2022**/
.outline-9 #g-expanded {padding: 0 5%;}
.outline-9 #g-expanded .g-content {padding: 0.5rem;}
#g-expanded .cols-3 .sprocket-strips-c-block { width: 30%;}
#g-expanded .cols-4 .sprocket-strips-c-block { width: 22%;}
#g-expanded .sprocket-strips-c-block { margin: 10px; box-shadow: 0px 0px 10px rgb(0 0 0 / 30%);}
#g-expanded .sprocket-strips-c-extended-info {visibility: visible; position: relative;}
#g-expanded .sprocket-strips-c-readon {display: none;}
#g-expanded .sprocket-strips-c-title {font-size: 1.5rem;}

@media (max-width: 680px) {
#g-expanded .sprocket-strips-c-container .sprocket-strips-c-block {
    width: 43%;
    float: none;
}}

/***********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-extension .sprocket-strips-p-pagination li { background: white; }
#g-extension .squarepicstrip .readon { background: #333; }
#g-extension .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;}
.outline-10 #g-extension { background: linear-gradient(#ffffff, #afafaf); }
.outline-10 #g-expanded h3 { color: white; }

/************ 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);}



.separatedquicklinks.widthvw20 .sprocket-strips-s-item img {width: auto; height: 20vw; object-position: center; object-fit: cover;}
.separatedquicklinks .sprocket-strips-s-title a {position: initial; padding: 0;}
.separatedquicklinks a.readon {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
	display: flex;
	margin: 0;
	padding: 0;
	background: transparent;
}
.separatedquicklinks a.readon > span {display: none;}

.sprocket-strips-s-title a {color: #001940;}

@media only screen and (max-width: 767px) {
     .sprocket-strips-s-title a {color: #ffffff;}
     .sprocket-strips-s-item {background: rgba(27,57,86,.8);
}}

.homelayout #g-header > .g-grid {
	justify-content: space-evenly;
}

/* .social-menu .g-social > a:last-child {
	font-size: 1rem;
    border-radius: 5px;
    border: 2px solid white;
    padding: 5px;
} */

.social-menu .g-social {
	display: flex;
    justify-content: space-evenly;
    flex-wrap: nowrap;
    flex-direction: row;
}

/* update the rotator quicklinks to actually work */

@media (min-width: 767px) {
	.verticalcolumnoverlay div, .verticalcolumnoverlay > a {
		margin: 0;
	}
	
	.homelayout #g-showcase > div > div:nth-child(2) > div > div > div > div > div > div {
		height: 42vw;
		font-size: 1.2vw;
		gap: 0.75rem;
	}

	.homelayout .verticalcolumnoverlay div:first-child {
		flex: 3 !important;
	}

	.homelayout .verticalcolumnoverlay  img {
		height: 10.5vw;
		width: auto;
	}

	.homelayout #g-showcase > div > div:nth-child(2) > div > div > div > div > div > div > div > a {
		height: 100%;
		display: grid;
		justify-content: center;
		align-items: center;
	}

	.homelayout #g-header {
		padding: 0 2%;
	}

	.homelayout .size-75 {
		flex: 0 85%;
	}
}

.homelayout {
	--grid-tile-height: 13vw;
}

.homelayout.outline-9 #g-expanded .g-content {
padding: 0rem;
}

.pull-right.item-image {
	margin: 0;
	padding: 0;
	width: 100%;
}

.outline-9 #g-header img {
	width: 90%;
    margin: 0.5rem;
}

@media (max-width: 768px) {
	.smalllogo img {
		width: 33% !important;
	}
}


@media (min-width: 768px) {

	.g-main-nav .g-toplevel > li > .g-menu-item-container > .g-menu-item-content {
		font-size: 1.3vw;
	}

}