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

/************ FONTS  ************
Serif: Libre Baskerville
Sans Serif: Lato

/************ COLORS  ************
Gold - #f3c350; rgba(243,195,80,1)
Bright Gold (button color) - #ffce00, rgba(255,206,0,1)
Black - #000000; rgba(0,0,0,1)
***if it isn't the body font, use this black
Blue (link color, see notes) - #2a55a5; rgba(42,85,165,1)

/************ NOTES ************
*any links on subpages will be blue, not gold. follow mockup colors for homepage link color for now
*menu bar is 90% gold: rgba(243,195,80,.9)
*Rotator overlay 20% black - rgba(0,0,0,.2)
*quicklinks - 40% black overlay - rgba(0,0,0,.4)
*dropshadow on Welcome - 75% (or try 100%) 3,3,3
*dropshadow on quicklink text - 100%, 0,0,2
*dropshadow on resource picture buttons - 20%, 0,0,10
*you can try a hover over affect on those resource buttons like on HolyHill's news items, but with more centered text. These are just buttons, so they'll probably be a place here/custom html, rather than news items
************/

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: #000000; font-size: 3.5rem; font-weight: bold; font-family: 'Lato', sans-serif;}
.page-header h1 {text-transform: none; font-size: 3rem; font-weight: bold; }
h2, .page-header h2 {font-variant-caps: small-caps; color: #000000; font-size: 2.2rem; font-family: 'Libre Baskerville', serif;  font-weight: bold;}
h3 {color: #000000; font-size: 1.8rem; border-bottom: 1px solid #000000; font-family: 'Libre Baskerville', serif; line-height: 1.3; margin: 0 0 10px 0;}
h4 {color: #2a55a5; font-size: 1.8rem;}
h4.baskerville { font-family: 'Libre Baskerville', serif;}
h5 {background: #f3c350; font-size: 1.75rem;color: white; border-radius: .2rem; padding: .25rem .5rem;}
h6 {color: #f3c350; font-size: 1.4rem; text-transform: uppercase; font-weight: bold;}
a {color: #2a55a5;}
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: #ffce00;
    color: #000000;
    font-size: 1.2rem;
}

.stafflayout .button, #g-aside .button, .teacherbox .button {
	background: transparent;
	font-family: 'Lato', sans-serif; 
	color: #000000; 
	font-size: 1rem;
	text-transform: none;
	font-weight: normal;
	padding: .3rem .7rem; 
	border-radius: .5rem; 
	display: inline-block;
	line-height: 1.1rem;
	border: 1px solid #ffce00;
	transition: all .2s ease-in;
}

.stafflayout .button:hover, #g-aside .button:hover, .teacherbox .button:hover {
	background: #ffce00;
}

@media only screen and (max-width: 767px) {
    .stafflayout .button, #g-aside .button, .teacherbox .button {
        width: 100%;
        text-align: center;
        border-radius: 0;
    }
}

/*************** HOMELAYOUT ***************/
p.buttonheading { margin: 0; padding: 0; }

/*************** SCHOOLLAYOUT *************/
.schoollayout h3.g-title {padding: 0 10%!important;}

/*************** OFFCANVAS ****************/
#g-offcanvas .g-social a {margin-right: 10px;}

/*************** TOP **********************/
#g-top .g-logo img {margin: 1vw 0;}
#g-top {background: url('/images/template/bg-school.jpg') 88% 0% no-repeat; background-size: contain; padding-bottom: 1vw!important;}

#g-top .g-container .g-grid:not(.g-grid:last-child) {padding: 0 10%!important;}
#g-top .g-container .g-grid:last-child {background: rgba(243,195,80,.9); padding: 0 5%!important;}
#g-top .g-main-nav ul.g-toplevel {justify-content: space-evenly;}

#g-top .g-menu-item-title {font-weight: bold;}
#g-top .g-dropdown-column .g-grid {background: transparent!important;}

#g-top .g-social a {margin-right: 10px; color: #333;}

@media only screen and (max-width: 767px) {
    #g-top:not(.schoollayout #g-top) {border-bottom: 2px solid #2a55a5;}
    #g-top {background: none;}
    #g-top .g-logo img {margin: 5vw 0; width: 90%;}
}


/*************** HEADER - was in SHOWCASE *****************/
#g-header .fwcontenttop .layout-slideshow .sprocket-features-content {
    align-items: center;
    width: 100%;
    margin: 0 auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.2);
}

#g-header .layout-slideshow .sprocket-features-desc {margin: auto 0; padding: 4vw; width: 100%;}
.sprocket-features-desc h1, .sprocket-features-desc h2, .sprocket-features-desc h3,
.sprocket-features-desc h4, .sprocket-features-desc h5, .sprocket-features-desc h6 {
    font-family: 'Lato', Sans-Serif; 
    font-size: 4vw; 
    font-weight: normal; 
    border-bottom: none; 
    color: #ffffff; 
    background: none; 
    text-transform: none; 
    font-variant-caps: inherit; 
    margin: 0;
    text-shadow: 3px 3px 3px rgba(0,0,0,.3);
}

#g-header .layout-slideshow h2.sprocket-features-title {
    margin: auto;
    font-family: 'Lato', Sans-Serif; 
    font-size: 4vw; 
    font-weight: normal; 
    border-bottom: none; 
    color: #ffffff; 
    background: none; 
    text-transform: none; 
    font-variant-caps: inherit; 
    text-shadow: 3px 3px 3px rgba(0,0,0,.3);
}

@media only screen and (max-width: 767px) {
    .sprocket-features-desc h1, .sprocket-features-desc h2, .sprocket-features-desc h3,
    .sprocket-features-desc h4, .sprocket-features-desc h5, .sprocket-features-desc h6 {font-size: 3rem;}
    #g-header .layout-slideshow .sprocket-features-desc {padding: 10vw;}
    #g-header .layout-slideshow h2.sprocket-features-title {font-size: 3rem;}

    .fwrsuperwide .layout-slideshow .sprocket-features-img-container {padding-bottom: 0!important;}
    .fwrsuperwide .layout-slideshow .sprocket-features-img-container img {height: 50vw!important;}
}

/*************** ABOVE was UTILITY ******************/
.schoollayout #g-above {margin: 2vw 0;}

        /*Quicklinks*/
.sprocket-strips-container > li {margin: 10px .5%;}
.sprocket-strips-nav {padding: 0;}
.qloverlaybackpic .sprocket-strips .sprocket-strips-container {margin: 0 2%;}
.qloverlaybackpic .sprocket-strips-content {background: rgba(0,0,0,.4);}
.qloverlaybackpic .sprocket-strips-content:hover {background:rgba(0,0,0,.6);}
.qloverlaybackpic .sprocket-strips-item, .qloverlaybackpic .sprocket-strips-content {border-radius: 15px;}
.qlexpandingborder h4.sprocket-strips-title {text-shadow: 1px 1px 3px rgba(0,0,0,1);}
        
@media only screen and (max-width: 767px) {
    .qloverlaybackpic .sprocket-strips-content, .qloverlaybackpic .sprocket-strips-content:hover {background: none;}
    .qloverlaybackpic li {background: #2a55a5;}
    .qloverlaybackpic li:hover {background: rgba(0,0,0,.8);}
    .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: 150vw; font-size: 5vw;}
        
    .qloverlaybackpic .sprocket-strips-item {width: 30vw; height: 22vw; position: initial;}
}
/*************** UTILITY ******************/
.schoollayout #g-utility {padding-top: 3vw;}
.schoollayout #g-utility h3 {border-bottom: none; font-size: 2rem; letter-spacing: 1px; }
.schoollayout #g-utility .button {
	border: 1px solid #333; 
	background: transparent;
	font-family: 'Lato', sans-serif; 
	color: #333; 
	font-size: 1.2rem;
	text-transform: none;
	font-weight: normal;
	padding: .7rem 1.2rem; 
	border-radius: .5rem; 
	display: inline-block;
	font-weight: 500;
	line-height: 1.1rem;
	transition: all .2s ease-in;
	}
.schoollayout #g-utility .button:hover {
	background: #333;
	color: #f3c350;
}

/*************** FEATURE ******************/

#g-feature .news-headlines h3.g-title {padding-left: 2vw!important; font-size: 2.2rem;}
.homelayout .sprocket-lists-modern-pagination li {border-radius: 0; padding: 8px!important;}
.homelayout.sprocket-lists-modern-nav {padding: 10px 0!important}
.homelayouth4.sprocket-lists-modern-title, .sprocket-lists-modern-item {margin-left: 1vw!important;}
.homelayouth4.sprocket-lists-modern-title {color: #000000;}
.homelayout.sprocket-lists-modern-title .indicator {display: none;}

/*************** EXPANDED *****************/
#g-expanded a::before {display: none;}
.schoollayout #g-expanded {padding: 3vw 5%;}
.resource-links {justify-content: space-around;}
.resource-link img {width: 14vw; height: auto; box-shadow: 1px 1px 10px rgba(0,0,10,.2); transition: all .3s ease-in-out; }
.resource-link img:hover { transform: scale(1.1);}
#g-expanded .overflowvisible {overflow: visible;}


@media only screen and (max-width: 767px) {
    .resoucre-links {text-align: center;}
    .resource-link {text-align: center;}
    .resource-link img {width: 65%;}
}

/*************** BOTTOM *******************/
.schoollayout #g-bottom {padding: 2vw 0;}
.schoollayout #g-bottom h1 {font-size: 2.7rem; font-family: 'Libre Baskerville', Serif; letter-spacing: 3px;}

/*************** FOOTER *******************/
#g-footer {padding: 0 5%;}
#g-footer h1, #g-footer h2,
#g-footer h3, #g-footer h4,
#g-footer h5, #g-footer h6,
#g-footer p {color: #ffffff; border-bottom: none; margin-top: 0; font-weight: normal;}
#g-footer h3 {font-family: 'Lato', sans-serif; text-transform: uppercase; font-size: 1.4rem; font-weight: bold!important}
#g-footer a::before {display: none;}
.footer-img {display: flex; flex-direction: column;}
.footer-img img {width: 6vw; height: auto; margin-bottom: 1vw;}

@media only screen and (max-width: 767px) {
    .footer-img {flex-direction: row; width: 100%; height: 80px;}
    .footer-img .footer-content {position: relative; width: 25%; margin-right: 15px;}
    .footer-img .footer-content a {position: absolute; top: 0; bottom: 0; left: 0; right: 0;}
    .footer-img img {width: 100%;}
}

/*************** MODULES ******************/

.moduletable .nav.menu li a {padding: .35rem .75rem; }
.moduletable .nav.menu, .moduletable .unstyled {background: #2a55a5;}
.moduletable .nav.menu li.current.active a, .moduletable .nav.menu li a:hover {
	color: #2a55a5;
	background: /*#f3c350*/#ffce00;
}
/*****Make a Gift lists module**********/
#g-aside h3.g-title {font-size: 1.25rem;}
#g-aside .sprocket-lists-portrait-title {margin: 2px 0; font-size: 1rem !important; font-style: italic;}
#g-aside .sprocket-lists-portrait-title:hover {color: rgba(243,195,80,1);}
#g-aside .sprocket-lists-portrait-title.active {color: black;}
#g-aside .sprocket-lists-portrait-container li { padding: 2px 0;  border-bottom: 0px solid rgba(243,195,80,0.5);}
#g-aside p.portrait-text {margin: 0 0 0.25rem 0;}
#g-aside p {margin: 0 0 0.25rem 0; font-size: 1rem;}
#g-aside .sprocket-lists-portrait-container li.active {background: rgba(255,206,0,0.5)}

/*************** TEACHERS TABS ************/
#g-aside .platform-content {padding: 0.5rem 0 0.5rem 0;}


        /*Place Here*/
.yellowbox, .yellow-box {background: rgba(255,206,0,0.5);}
.yellowbox h5, .yellow-box h5, .yellowbox h6, .yellow-box h6 {color: #333;}
.yellowbox h2, .yellow-box h2, .yellowbox h3, .yellow-box h3 {font-size: 1.5rem;}
/*#g-aside .moduletable[class*="box"] { padding: 0.5rem; margin: 0;}*/
#g-aside .yellowbox .mod_placehere_leading > * {padding: 0.5rem; margin: 0;}
/*#g-aside .yellowbox.moduletable { padding: 0.5rem; margin: 0;}
#g-aside .yello-wbox.moduletable { padding: 0.5rem; margin: 0;}
#g-aside .platform-content {padding-top: 0.5rem; padding-bottom: 1rem;}*/
   /*Articles Category*/
 #g-aside  .moduletable .category-module {
	display: block;
	background: #2a55a5;
	padding: 0;
	border-radius: 0;
	color: white;
    margin: 0 .625rem;
 }
  #g-aside  .moduletable .category-module a {color: white;}
  #g-aside  .moduletable .category-module a:hover {color: #2a55a5;}

.moduletable .category-module li a { width: 100%; border-radius: 0; padding: .35rem .75rem; color: white; font-weight: normal;}
.moduletable .category-module li { transition: all .2s ease-in; border-radius: 0; width: 100%; padding: 0; margin: 0;}
.moduletable .category-module li:hover { background: #ffce00; color: #2a55a5; }
.moduletable .category-module, .moduletable .unstyled { border: none; padding: 0; margin: 0; display: block;  background: #333;  border-radius: 0; }



/*************** SECTIONS *****************/
#g-footer a {color: #ffffff;}

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

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