@import url('//fonts.googleapis.com/css2?family=Charm:wght@400;700&family=Cinzel:wght@400;500;700&family=Lato:ital,wght@0,400;0,700;1,400;1,700&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/************ TEMPLATE  ***********
Rotator Size: 1200x675 (wide, 16:9)

/************ FONTS  ***********
Serif:  Cinzel
Serif - Mass Times: Charm
Sans Serif:  Lato

font-family: 'Charm', cursive;
font-family: 'Cinzel', serif;
font-family: 'Lato', sans-serif;

/************ COLORS  ***********
Blue: #26255e; rgba(38,37,94,1)
Gold: #cdbe79; rgba(205,190,121,1)
NEW GOLD 08.31.20 #C9B146; rgba (201,177,70,1) 
or 
Metallic Gold 9.15.20 #d4af37; rgba (212,175,55,1)

SCHOOL COLORS
Blue: #22345e; rgba(34,52,94,1)
Yellow/Gold: #F8BE14; rgba (248,190,20,1)
****/

body.homelayout {
	--secondary-color: #c9b146;
	--ql-font-size-mobile: 1rem;
	--ql-icon-color: var(--secondary-color);
}


body {	font-family: 'Lato', sans-serif; font-size: 1.1rem;}
.homelayout #g-showcase p {margin: 0 0 .8rem 0;}

h1 {color: #22345e; font-size: 2.75rem; font-family: 'Charm', cursive; font-weight: bold;}
h2, .page-header h2 {color: #333; font-size: 2.25rem; font-family: 'Charm', cursive; font-weight: bold;}
.outline-10 h2, .outline-10 .page-header h2,.outline-11 h2, .outline-11 .page-header h2 {color: #333; font-size: 2.25rem; font-family: 'Lato', sans-serif; font-weight: bold;}
h3 { font-family: 'Cinzel', serif; color: #22345e; font-size: 1.8rem; border-bottom: 1px solid #C9B146;  line-height: 1.3; margin: 0; padding: 0 0 0 1rem;}
.outline-10 h3, .outline-11 h3 {font-family: 'Lato', sans-serif; padding: 0;}
h4 { font-family: 'Cinzel', serif; color: #C9B146; font-size: 1.8rem;}
.outline-10 h4, .outline-11 h4 {font-family: 'Lato', sans-serif; letter-spacing: 2px;;}
h5 {background: #22345e; font-size: 1.75rem;color: white; border-radius: .2rem; padding: .1rem .4rem;}
h6 {color: #203B71; font-size: 1.6rem; font-style: italic;}
a { color: #2e2af7; }
a:hover { color: black; }

#g-footer a {color: white;}
#g-footer a:hover {color: #C9B146;}

@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: #22345e;
	font-family: 'Lato', sans-serif; 
	border: 1px white solid;
	border-radius: 4px; 
}
.readon:hover, .button:hover, .btn:hover, p.readmore .btn:hover, .sprocket-lists-portrait-container > li .sprocket-lists-portrait-item > a span:hover {
	background: white;
	color: #22345e;
	font-family: 'Lato', sans-serif; 
	border: 1px #22345e solid;
	border-radius: 4px; 
}

.tanbutton {
	background: #C9B146;
}

.outline-11 blockquote {
    background: #22345e;
    color: white;
    padding: 20px 40px;
    font-family: 'Lato', sans-serif;
    font-style: normal;
    border: none;
    line-height: 1.5;
    position: relative;
    margin: 20px;
}

.outline-11 blockquote:before {
    content: "\201C";
    top: 21px;
    left: -20px;
}
.outline-11 blockquote:after {
    content: "\201D";
    bottom: -14px;
    right: -22px;
}

.outline-11 blockquote:before, .outline-11 blockquote:after {
    font-size: 8rem;
    position: absolute;
    color: #d6d6d6;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 900;
    line-height: 0;
}


.outline-11 h3.g-title {color: white; font-family: 'Lato', sans-serif; border-bottom: 1px solid #ffffff; font-weight: 600;}

/************ HEADER  ************/
#g-top .g-content { padding: 0; margin: 0; }
#g-navigation {padding: 0 5%}

.outline-9 #g-top { background-image: url(/images/template/header.png); background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; }
.outline-11 #g-top {padding: 1% 2.5rem 1% 2.5rem;}

@media only screen and (max-width: 767px) { 
	#g-top { background-image: none; }
	#g-top .g-content { padding: 10px; margin: 0; }
	.outline-11 .g-logo img {width: 100%;}
}

.sprocket-features-content h4 {margin-bottom: 0;}
.sprocket-features-content h1 {margin-bottom: 0.25rem;}
.sprocket-features-content body p {margin-bottom: 0.8rem;}


@media only screen and (max-width: 767px){
	.widetwothirds .sprocket-features-content {    min-height: 65vw; }
}

/**************MENU / NAVIGATION *******************/
.outline-11 .g-main-nav .g-toplevel > li > .g-menu-item-container {font-weight: 600;}
.outline-11 .g-social a {color: #22345e; }

.outline-11 #g-showcase .videocontainer {z-index: 10;}



/************ QUICKLINKS  ************/
#g-utility {padding: 0 1%;}
#g-utility .g-content {padding: 0; margin: 0;}
.overlaybackpic .sprocket-strips-content {	background: rgba(34,52,94,0.75);}
.overlaybackpic .sprocket-strips-content:hover {	background: rgba(34,52,94,0.5);}
/*.expandingborder h4.sprocket-strips-title {border: 1px #C9B146 solid;}
.overlaybackpic h4.sprocket-strips-title a {color: #C9B146;}*/

.outline-11  #g-utility {
	background: url('/images/template/school/sjbparallax.png') 0% 0% no-repeat;
	padding: 0;
} 

/************ Feature  ************/

#g-feature > div > div.g-block.size-33 > div > div:nth-child(5){
	padding-top: 0;
}

#g-feature > div > div.g-block.size-33 > div > div:nth-child(4){
	padding-bottom: 0;
}

#g-feature > div > div.g-block.size-47 > div > div:nth-child(2){
	padding-top: 0;
}

#g-feature > div > div.g-block.size-33 > div > div:nth-child(4){
	padding-top: 0;
}

/************ MODULES  ************/
/* SIDE MENU */
.moduletable .nav.menu, .moduletable .unstyled { background: #22345e; }

.homelayout #g-feature .g-block:nth-child(2) .platform-content:nth-child(1) { padding-bottom: 0.5rem;}
.homelayout #g-feature .g-block:nth-child(2) .platform-content:nth-child(2) { padding-top: 0;}
/*.homelayout #g-feature .g-block:last-child .platform-content { padding: 0.5rem 0;}*/

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

/************ SECTIONS  ************/
#g-copyright a:hover .fa.fa-wpforms { color: #c71833; }

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


#g-extension, .outline-11 #g-bottom { background-image: url(/images/template/evangelus.png); background-size: cover;  }

.outline-11 #g-container-main {margin-left: 5%; margin-right: 5%;}


/************ NEWS  ************/
.zoompics h4.sprocket-lists-portrait-title { font-family: 'Lato', sans-serif; color: #22345e; }
.zoompics.smalltitle h4.sprocket-lists-portrait-title { height: auto; }
.sprocket-lists-portrait-pagination li { background: #C9B146;  }
.sprocket-lists-portrait-arrows .arrow { background: #C9B146;}
.sprocket-lists-portrait-container li { border-color: #C9B146;}

.outline-11 #g-feature h4 {color: white; font-family: 'Lato', sans-serif;}
.outline-11 .sprocket-lists-portrait-container li { border-color: #ffffff;}

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


/**subpages**/
.subpagelist h4.sprocket-lists-portrait-title { color: #22345e; }
/*PORTRAIT THEME LIST*/
.sprocket-lists-portrait ul .sprocket-lists-portrait-item ul {
list-style: disc !important;
margin: 0 0 10px 25px;
}

/*MODERN THEME LIST*/
.sprocket-lists-modern ul .sprocket-lists-modern-item ul {
list-style: disc !important;
margin: 0 0 10px 25px;
}
.sprocket-lists-modern-container li .sprocket-lists-modern-item li {border-bottom: none;}

/*DEAFULT THEME LIST */
.sprocket-lists ul .sprocket-lists-item ul {
list-style: disc !important;
margin: 0 0 10px 25px;
}
.sprocket-lists-container li .sprocket-lists-item li {border-bottom: none;}

.outline-11 #g-showcase .videocontainer { line-height:  0; }

.outline-11 #g-utility .sprocket-strips-s-title a {color: #22345e; text-align: center;  display: block; font-family: 'Lato', sans-serif; text-transform: uppercase; font-weight: 700; }
.outline-11 #g-utility .sprocket-strips-s-title a:hover {color: #04609c;}
.outline-11 #g-utility .sprocket-strips-s-text {color: #04609c;}

.outline-11 #g-utility .sprocket-strips-s-item  img {height: 5vw; display: block; margin: 0 auto 30px auto;}
.outline-11 #g-utility .sprocket-strips-s-block:hover img {transform: scale(1.1); transition-duration: 0.2s;}
.outline-11 #g-utility .sprocket-strips-s-block img {
	transition: all 0.2s ease-in-out;
}

/*********************** EXPANDED **********************/
.outline-11.homelayout #g-expanded {background: url('/images/template/school/sjbparallax2.png') 0% 0% no-repeat;}
.outline-11.homelayout #g-expanded .g-grid {background: url('/images/template/school/border-top.png') 0% 0% no-repeat; background-size: 100%; }
.outline-11.homelayout #g-expanded .g-grid .g-block {background: url('/images/template/school/border-bottom.png') 0% 100% no-repeat; background-size: 100%; }
.outline-11.homelayout #g-expanded { padding: 0;}
.outline-11.homelayout #g-expanded .g-grid .g-block{ padding: 5vw 5vw;}


.simpleparalax, .simpleparallax {background-color: transparent !important;}
.outline-11 #g-expanded h3.g-title {color: #22345e; font-family: 'Lato', sans-serif; border-bottom: 0px solid #ffffff; font-weight: 600;}

.outline-11 #g-extension, .outline-11 #g-bottom  {padding: 0 5%;}
.outline-11 #g-bottom h3 {color: #22345e; font-family: 'Lato', sans-serif; border-bottom: 0px solid #ffffff; font-weight: 600;}

.outline-11 #g-footer {padding: 0 3%;}

.outline-11 .sprocket-strips-s-nav { display: none; }
.outline-11 .sprocket-strips-s-content { margin: 10px 0 0 0;}
.outline-11 .sprocket-strips-s-content h4 { margin: 0;}

.outline-11 #g-utility .g-grid { background: url('/images/template/school/corner1.png') 0% 0% no-repeat; background-size: 5%; }
.outline-11 #g-utility .g-grid .g-block { background: url('/images/template/school/corner2.png') 100% 0% no-repeat; background-size: 5%; }
.outline-11 #g-utility .g-grid .g-block .g-content { background: url('/images/template/school/corner4.png') 100% 100% no-repeat; background-size: 5%; }
.outline-11 #g-utility .g-grid .g-block .g-content .platform-content { background: url('/images/template/school/corner3.png') 0% 100% no-repeat; background-size: 5%; padding: 6vw 10vw; }

.outline-11 #g-utility .sprocket-strips-s-block { position: relative; }
.outline-11 #g-utility .sprocket-strips-s-content .readon {display: block; opacity: 0; position: absolute; top:0; left:0; right:0; bottom: 0; }
.outline-11 .sprocket-lists-portrait-title { font-size: 1.5rem !important; }
.outline-11 .sprocket-lists-portrait-item { font-size: 1rem; color: #a7a7a7; }

.outline-11 .sprocket-lists-portrait-title { margin-top: 0px;}

.outline-11 #g-utility a { color: #6fbf4e; }

@media only screen and (max-width: 767px) { 
	.outline-11 .sprocket-strips-s-item img { flex: none; object-fit: contain; object-position: left center; }
	.outline-11 .sprocket-strips-s-item h4 { margin: 0; padding: 0; }
	.outline-11 .sprocket-strips-s-item { display: flex;  align-items: center; position: relative; }
	.outline-11 .sprocket-strips-s-item img { flex: 1; }
	.outline-11 #g-utility .sprocket-strips-s-item img { margin: 0;}
	.outline-11 .sprocket-strips-s-item .sprocket-strips-s-content { flex: 3; }
	.outline-11 #g-utility .sprocket-strips-s-title a { text-align: left; }
	.sprocket-strips-s-container li {  padding-bottom: 10px; }
	.outline-11 #g-utility .g-grid,
	.outline-11 #g-utility .g-grid .g-block,
	.outline-11 #g-utility .g-grid .g-block .g-content,
	.outline-11 #g-utility .g-grid .g-block .g-content .platform-content  { background-size: 10%; }
	.outline-11 #g-extension .arrows-active .sprocket-features-list {margin-left: 10px;  margin-right: 10px;}

}


/*  */

.fullwidth-swiper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*  */

 /***** QUICKLINKS *****/    
    /*QUICKLINKS TOPLINKS*/ /*Example on Carmelite-teresa*/

	.ql-fa-toplinks .g-blockcontent-subcontent {
		margin: 0 !important;
	}

	.ql-fa-toplinks {
		display: grid;
		justify-content: center;
		align-items: center;
	}

	.ql-fa-toplinks .g-blockcontent-subcontent-block:hover {
		transition: all 0.2s ease-in-out;
		transform: scale(1.05);
	}

	.ql-fa-toplinks .g-blockcontent-subcontent-block {
		transition: all 0.2s ease-in-out;
	}
	

@media only screen and (min-width: 50.99rem) {
.ql-fa-toplinks .g-blockcontent-subcontent {
    display: flex;
    flex-direction: row;
	gap: 1rem;
    flex-wrap: wrap;
    align-items: stretch!important;
    justify-content: flex-end;
}
.ql-fa-toplinks .g-blockcontent-subcontent-block {
    flex: 1;
    display: flex;
    justify-content: center;
    padding: 0;
	gap: 1rem;
    position: relative;
	margin: 0;
}

.ql-fa-toplinks .g-blockcontent-subcontent-block-content {
    position: unset;;
    width: fit-content;
    display: flex;
    flex-direction: column;
	min-width: 100px;
    justify-content: flex-start;
    align-items: center;
}
.ql-fa-toplinks .g-blockcontent-subcontent-block:hover {
    background: var(--ql-background-hover);
}
.ql-fa-toplinks .g-blockcontent-subcontent-block:hover .g-blockcontent-subcontent-title-text {
    color: var(--ql-title-hover);
}
.ql-fa-toplinks .g-blockcontent-subcontent-block:hover .g-blockcontent-subcontent-title-icon {
    color: var(--ql-icon-hover);
}
.ql-fa-toplinks .g-blockcontent-buttons {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
.ql-fa-toplinks .g-blockcontent-buttons > a {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    color: transparent;
    opacity: 0;
}
.ql-fa-toplinks .g-blockcontent-subcontent-title {
    order: 3;
    text-align: center;
	display: flex;
	gap: 1rem;
	flex-direction: column;
    margin: 0;
    padding: 0;
}
.ql-fa-toplinks .g-blockcontent-subcontent-title-text {
    font-size: 1.1vw;
    text-align: center;
    font-weight: 400;
    color: var(--ql-title-color);
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.ql-fa-toplinks .g-blockcontent-subcontent-desc {
    order: 1;
    text-align: center;
    margin: 0;
    padding: 0;
}
.ql-fa-toplinks .g-blockcontent-subcontent-title-icon {
    font-size: 1.9vw;
    color: var(--ql-icon-color);
    /* margin-bottom: 1vw; */
}
}
@media only screen and (max-width: 50.99rem) {
    .ql-fa-toplinks .g-blockcontent-subcontent {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch!important;
    }
    .ql-fa-toplinks .g-blockcontent-subcontent-block {
        padding: 1vw;
        display: flex;
        align-items: flex-end;
        justify-content: center;
		margin: 0 !important;
    }
    .ql-fa-toplinks .g-blockcontent-subcontent-block-content {
        position: relative;
        text-align: center;
        display: flex;
        flex-direction: column;
    }
    .ql-fa-toplinks .g-blockcontent-buttons {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        background: transparent;
        margin: 0;
        padding: 0;
        border-radius: 0;
    }
    .ql-fa-toplinks .g-blockcontent-buttons > a {
        position: absolute;
		border: none;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        background: transparent;
        margin: 0;
        padding: 0;
        border-radius: 0;
        color: transparent;
    }
    .ql-fa-toplinks .g-blockcontent-subcontent-block-content > .g-blockcontent-subcontent-title {
        order: 2;
        margin: 0;
        padding: 0;
		display: flex;
		flex-direction: column;
		gap: 1rem;
        font-size: var(--ql-font-size-mobile);
        /* display: none; */
    }
    .ql-fa-toplinks .g-blockcontent-subcontent-block-content > .g--blockcontent-subcontent-desc {
        order: 1;
    }
    .ql-fa-toplinks .g-blockcontent-subcontent-title-text {
        font-size: var(--ql-font-size-mobile);
        margin: 0;
        padding: 0;
        font-weight: 400;
        overflow: hidden;
        overflow-wrap: break-word;
    }
    .ql-fa-toplinks .g-blockcontent-subcontent-title-icon {
        color: var(--secondary-color);
        font-size: 2rem;
		margin: 0;
    }
}
.ql-fa-toplinks-2 .g-blockcontent-subcontent > .g-block:not(.ql-fa-toplinks-2 .g-blockcontent-subcontent > .g-block:last-child) {
    border-right: var(--ql-right-border-size) var(--ql-right-border-style) var(--ql-right-border-color);
}
.ql-fa-toplinks-2 .g-blockcontent-subcontent-block-content {
    position: relative;
    display: flex; 
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: .5vw;
}
.ql-fa-toplinks-2 .g-blockcontent-subcontent-title-icon {
    margin: 0;
    padding: 0;
    color: var(--ql-icon-color);
    font-size: var(--ql-icon-size-desktop);
    display: flex;
    justify-content: center;
    align-items: center;
}
.ql-fa-toplinks-2 .g-blockcontent-subcontent-title {
    margin: 0;
    padding: 0;
    color: var(--ql-title-color);
    display: flex;
    justify-content: center;
    align-items: center;
}
.ql-fa-toplinks-2 .g-blockcontent-subcontent-title-text {
    margin: 0;
    padding: 0;
    font-size: var(--ql-font-size-desktop);
}
.ql-fa-toplinks-2 .g-blockcontent-buttons {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
.ql-fa-toplinks-2 .g-blockcontent-buttons > a {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    color: transparent;
}
.ql-fa-toplinks-2 .g-blockcontent-subcontent-block-content:hover .g-blockcontent-subcontent-title {color: var(--ql-title-hover);}
.ql-fa-toplinks-2 .g-blockcontent-subcontent-block-content:hover .g-blockcontent-subcontent-title-icon {color: var(--ql-icon-hover);}

@media only screen and (max-width: 50.99rem) {
    .ql-fa-toplinks-2 {padding: 0; margin-top: 0!important;}
    .ql-fa-toplinks-2 .g-blockcontent-subcontent {display: flex; flex-direction: row; flex-wrap: nowrap; padding: 1rem; /*border-radius: 1rem;*/ box-shadow: var(--ql-box-shadow); overflow: hidden; background: var(--ql-background-color);}
    .ql-fa-toplinks-2 .g-blockcontent-subcontent-title-icon {color: var(--ql-icon-color); font-size: var(--ql-icon-size-mobile);}
    .ql-fa-toplinks-2 .g-blockcontent-subcontent-title-text {color: var(--ql-title-color-mobile); font-size: var(--ql-font-size-mobile);}
    .ql-fa-toplinks-2 .g-blockcontent-subcontent-block-content {flex-direction: column; text-align: center; justify-content: flex-start;}
}