@import url('//fonts.googleapis.com/css2?family=Kanit:wght@400;600;700&family=Lato:wght@400;700&display=swap');

/*
  From Father: "Also, we would probably need another tile or button for forms on the main page. We are still working on those forms but I think we will have them soon."

/************ FONTS  ************ 
Sans Serif Heading: Kanit
Sans Serif: Lato

/************ COLORS  ************
dark blue: #0e1458 - rgba(14,20,88,1)
blue: #293e92 - rgba(41,62,146,1)
light blue: #4a86c4 - rgba(74,134,196,1)

/************ NOTES ************
Quicklinks: dark blue at 75% opacity; rgba(14,20,88,0.75)

***********************/

.site-1 {
	--primary-color: #0e1458;
    --secondary-color: #293e92;

    --primary-rgb: 14,20,88;
    --secondary-rgb: 41,62,146;

    --default-white: #ffffff;
    --default-black: #000000;

    --title-font-family: 'Kanit', san-serif;
    --body-font-family: 'Lato', sans-serif;

    --heading-color: var(--primary-color);
    --heading-font-family: var(--title-font-family);

    --title-border-bottom: 1px solid var(--secondary-color);

    --home-title-font: var(--title-font-family);

    --transparent: rgba(255,255,255,0);

    --default-box-shadow: 0px 0px 10px rgba(0,0,0,.5);

    --swiper-box-shadow: var(--default-box-shadow);

    --ql-title-color: var(--default-white);
}


.body {font-family: 'Lato', sans-serif; }

h1 {color: #0e1458; font-size: 3.2rem; font-family: 'Kanit', san-serif; font-weight: normal; text-transform: uppercase; letter-spacing:2px; }
h2, .page-header h2 { font-size: 1.8rem; font-family: 'Kanit', san-serif; font-weight: normal;
background: #293e92; font-size: 1.75rem;color: white; border-radius: .2rem; padding: .8rem; }
h3 { color: #293e92; font-size: 1.8rem; border-bottom: 1px solid #4a86c4;  line-height: 1.3; margin: 0 0 10px 0; }
h4 { color: #293e92; font-size: 1.8rem; font-weight: bold;}
h5 { font-size: 1.75rem; color: #0e1458; }
h6 {color: #0e1458; font-size: 1.2rem; font-weight:bold;}
a, .buttontoplainlink { color: #4a86c4;  }
a:hover, .buttontoplainlink:hover { color: black; }

p { line-height: 1.4; font-size: 1rem;}


@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 {
	background: #4a86c4;
	font-family: 'Lato', sans-serif; 
}


/************ HEADER  ************/
#g-top .g-content { padding-top: 0px; padding-bottom: 0px;}
#g-navigation { padding: 0 5%;}
.g-main-nav .g-toplevel > li > .g-menu-item-container { padding: .8rem 0.4rem; }
@media only screen and (max-width: 767px) {
	.g-logo img {	width: 54%; padding-top: 10px; padding-bottom: 10px;	}
}

.g-main-nav .g-toplevel > li:last-child {border: 1px solid; border-radius: 0.2rem;} 

/************ QUICKLINKS  ************/
.overlaybackpic .sprocket-strips-content {	background: rgba(38,37,94,0.75);}
.overlaybackpic .sprocket-strips-content:hover {	background: rgba(38,37,94,0.5);} 

/************ MODULES  ************/
.g-title { padding: 0; margin: 0;}
/* SIDE MENU */
.moduletable .nav.menu, .moduletable .unstyled { background: #26255e; }
.moduletable .nav.menu li:last-child { padding-bottom: 0; margin-bottom: 10px;}
.moduletable .nav.menu li.current.active a, .moduletable .nav.menu li a:hover {
background: #293e92;
}
/**** SIDE DOCUMENT MODULES ****/

#g-aside .g-title {padding: 0;}
#g-aside h3.g-title {font-size: 1.75rem;}
#g-aside .platform-content {padding: 0.5rem 0;}



#g-above {	
	background-image: url(/images/template/spire-fade-top-small.jpg);
	background-position: 0% 0%;
    background-repeat: no-repeat;
    background-size: contain; 
}

.twovideo iframe { width: 20vw !important; height: 13vw !important;}
.twovideo p { margin: 0; }
.twovideo .sprocket-strips-p-nav { display: none; }

@media only screen and (max-width: 767px) {
	.twovideo iframe {
		width: 37vw !important;
		height: 23vw !important;
	}
}



.sprocket-strips-item { box-shadow: none;}

.verticalcolumnoverlay div {  background: rgb(14 20 88 / 75%); }
.verticalcolumnoverlay div:hover {  background: rgb(14 20 88 / 90%); }
.verticalcolumnoverlay div a { color: white; font-size: 1.5rem; }

@media only screen and (max-width: 767px) {
	.verticalcolumnoverlay div {  background: rgb(14 20 88); }
}



/************ SECTIONS  ************/
#g-showcase h3 { color: white; border: none;}
#g-showcase .platform-content { margin: 0; padding: 0;}
#g-showcase a:hover { color: white; } 

#g-expanded .size-30 .g-content { padding-left: 0px; padding-right: 0px;}

#g-bottom .platform-content { margin: 0; padding: 0;}


/************ NEWS  ************/
.zoompics h4.sprocket-lists-portrait-title { font-family: 'Lato', sans-serif; color: #26255e; }
.sprocket-lists-portrait-pagination li { background: #293e92;  }
.sprocket-lists-portrait-arrows .arrow { background: #293e92;}
.sprocket-lists-portrait-container li { border-color: #4a86c4;}

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

/************ CALENDAR  ************/

.rme-badge, .rme-timeline-point:hover, .rme-timeline-point.active, .rme-timeline-point span { background: #0e1458;  } 
.rme-arrow { color: #0e1458; } 

/************ FOOTER  ************/
#g-footer:not(.site-1 #g-footer) { border: none; padding-top: 30px; padding-bottom: 20px;}
#g-footer:not(.site-1 #g-footer) .g-grid { padding-bottom: 50px;}

/************ COPYRIGHT  ************/
#g-copyright { padding-top: 30px; padding-bottom: 20px;}

/*****************************************/
/**************** SCHOOL *****************/
/*****************************************/
.site-1 :is(.readon, .button, .btn, p.readmore .btn, .sprocket-lists-portrait-container > li .sprocket-lists-portrait-item > a span, .listentobutton.moduletable a):not(.ph-sidepics-3 .button) {
    background: var(--primary-color);
    font-family: 'Lato', sans-serif;
} 

/*************** HOMELAYOUT ***************/ 
/*************** OFFCANVAS ****************/
.site-1 .g-offcanvas-toggle {color: var(--default-white);} 
.site-1 .g-offcanvas-toggle .fa-fw {text-shadow: none;}

/*************** TOP **********************/ 
/*************** NAVIGATION ***************/
@media only screen and (min-width: 50.99rem) {
    .site-1-home #g-navigation > .g-grid:nth-child(2) > .g-block > .g-content {
        margin: 0;
        padding: 0;
    }
}

/*************** SLIDESHOW ****************/ 
@media only screen and (min-width: 50.99rem) {
    .ql-swiper-links {
        margin: 0;
        padding: 0;
        height: 36vw;
        max-height: 36vw;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-left: 2vw;
    }
    .ql-swiper-links > .g-content {
        margin: 0;
        padding: 0;
        width: 100%;
    }
    .ql-swiper-links > .g-content > div {
        margin: 0;
        padding: 0;
    }
    .ql-swiper-links .g-blockcontent {
        margin: 0;
        padding: 0;
    }
    .ql-swiper-links .g-blockcontent-subcontent {
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 1vw;
    }
    .ql-swiper-links .g-blockcontent-subcontent-block {
        margin: 0;
        padding: 0;
        width: 100%;
    }
    .ql-swiper-links .g-blockcontent-subcontent-block-content {
        margin: 0;
        padding: 0;
        position: relative;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 6vw;
        background: var(--primary-color);
        box-shadow: var(--default-box-shadow);
        transition: .2s all ease-in-out
    }
    .ql-swiper-links .g-blockcontent-subcontent-block-content:hover {
        background: #777;
    }
    .ql-swiper-links .g-blockcontent-subcontent-title {
        margin: 0;
        padding: 0;
    }
    .ql-swiper-links .g-blockcontent-subcontent-title-text {
        margin: 0;
        padding: 0;
        color: var(--default-white);
    }
    .ql-swiper-links .g-blockcontent-buttons {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        opacity: 0;
    }
    .ql-swiper-links .g-blockcontent-buttons a {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        border: none;
    }
}

@media only screen and (max-width: 50.99rem) {
    .ql-swiper-links {
        margin: 0;
        padding: 0;
        height: fit-content;
        max-height: fit-content;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .ql-swiper-links > .g-content {
        margin: 0;
        padding: 0;
        width: 100%;
    }
    .ql-swiper-links > .g-content > div {
        margin: 0;
        padding: 0;
    }
    .ql-swiper-links .g-blockcontent {
        margin: 0;
        padding: 0;
    }
    .ql-swiper-links .g-blockcontent-subcontent {
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    .ql-swiper-links .g-blockcontent-subcontent-block {
        margin: 0;
        padding: 0;
        width: 100%;
    }
    .ql-swiper-links .g-blockcontent-subcontent-block-content {
        margin: 0;
        padding: 0;
        position: relative;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: var(--primary-color);
        box-shadow: var(--default-box-shadow);
        transition: .2s all ease-in-out
    }
    .ql-swiper-links .g-blockcontent-subcontent-block-content:hover {
        background: #777;
    }
    .ql-swiper-links .g-blockcontent-subcontent-title {
        margin: 0;
        padding: 1rem 0;
    }
    .ql-swiper-links .g-blockcontent-subcontent-title-text {
        margin: 0;
        color: var(--default-white);
    }
    .ql-swiper-links .g-blockcontent-buttons {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        opacity: 0;
    }
    .ql-swiper-links .g-blockcontent-buttons a {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        border: none;
    }
}


/*************** HEADER *******************/
/*************** ABOVE ********************/
/*************** SHOWCASE *****************/
/*************** UTILITY ******************/
/*************** FEATURE ******************/
/*************** MAIN *********************/
/*************** EXPANDED *****************/ 
/*************** EXTENSION ****************/
/*************** BOTTOM *******************/
/*************** FOOTER *******************/
.site-1 #g-footer .g-content-array {margin: 0;}
.site-1 #g-footer a {color: var(--default-white);} 

/*************** COPYRIGHT ****************/ 
/*************** MODULES ******************/
.site-1 :is(.moduletable .nav.menu, .moduletable .unstyled) {background: var(--primary-color);} 
.site-1 :is(.moduletable .nav.menu li.current.active a, .moduletable .nav.menu li a:hover) {    
    color: var(--primary-color); 
    background: var(--secondary-color);
} 
/*************** SECTIONS *****************/
/*************** MOBILE *******************/ 
/*************** ADS **********************/


/* new capitol campiagn page - 5/23/23 */


.ph-lower-title {
    --ph-g-title-color: white;
    --ph-title-color: white;
}

.ph-lower-title {
    padding: 0 3%;
}

.ph-lower-title .g-content-array {
    margin: initial;
    padding: initial;
}

.ph-lower-title .g-title {
    margin-bottom: 1rem;
    padding-left: 1rem;
}

.video-wrapper {
    display: flex;
    flex-wrap: wrap;
    padding-left: 3%;
}

.video-wrapper h2 {
    flex-basis: 100%;
    font-size: clamp(1.5rem, 3vw, 4rem);
}

.campaign-video {
    flex-basis: 50%;
    padding: 1%;
}

.campaign-logo {
    background-color: white;
}

.campaign-quicklinks {
    display: flex;
    gap: 1.1rem;
    flex-direction: column;
    flex-wrap: wrap;
    margin-top: 12px;
}

.campaign-button a {
    padding: 1rem 2rem;
    display: block;
    font-size: clamp(1.2rem, 1.5vw, 3rem);
    background-color: #293e92;
    color: white;
}

.campaign-button a:hover {
    transform: scale(0.98);
    transition: all 50 ease-in;
}

@media only screen and (max-width: 50.99rem) {
    
    .ph-lower-title {
        /* --ph-g-title-color: black; */
        --ph-title-color: black;
    }

    .campaign-video {
        flex-basis: 100%;
    }

}