@import url('//fonts.googleapis.com/css2?family=Quattrocento+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Quattrocento:wght@400;700&display=swap');
/************ TEMPLATE  ************
5/8/23 - https://stjoe-ost-mockup.forge.solutiosoftware.com/mockup-v5 (fonts are different than this link)

fonts:
    --title-font-family: 'Quattrocento', serif;
    --body-font-family: 'Quattrocento Sans', sans-serif;;

Colors:
    --primary-color: #182F58;
    --secondary-color: #FBB040;

    --primary-rgb: 24, 47, 88;
    --secondary-rgb: 251, 176, 64;

footer gradient background:
background-image: linear-gradient(to bottom, #182F58 21%, rgba(0,0,0,0.5)97%, black);
************/

.site-1 {
    --primary-color: #182F58;
    --secondary-color: #FBB040;

    --primary-rgb: 24,47,88;
    --secondary-rgb: 251,176,64;

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

    --title-font-family: 'Quattrocento', serif;
    --body-font-family: 'Quattrocento Sans', 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);

    --rok-mini-badge: var(--primary-color);

    --grid-vertical-gap: 2vw;
}

.site-2 {
    --primary-color: #182F58;
    --secondary-color: #FBB040;

    --primary-rgb: 24,47,88;
    --secondary-rgb: 251,176,64;

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

    --title-font-family: 'Quattrocento', serif;
    --body-font-family: 'Quattrocento Sans', 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);

    --rok-mini-badge: var(--primary-color);

    --ql-flex: calc(100% / 5);

    --grid-vertical-gap: 2vw;
}

.site-2 .ql-square-1 {
    --ql-background-color: var(--secondary-color);
    --ql-background-hover: rgba(var(--primary-rgb), .5);
    --ql-title-color: var(--primary-color);
}

.readon, .button, .btn, p.readmore .btn, .sprocket-lists-portrait-container > li .sprocket-lists-portrait-item > a span, .listentobutton.moduletable a {
    background: var(--secondary-color);
    border-radius: 0;
    font-family: var(--body-font-family);
    box-shadow: 0px 0px 15px rgba(0,0,0,.25);
    text-transform: uppercase;
    font-weight: 400;
    padding: 1vw;
    font-size: 1.25vw;
} 

a.bluebutton { 
  color: #ffffff; 
  font-size: 1rem;
  text-transform: none;
  font-weight: normal;
  background: var(--primary-color); 
  padding: .7rem 1.3rem; 
  border-radius: 0; 
  box-shadow: 0px 0px 15px rgba(0,0,0,.25);
  display: inline-block;
  font-weight: 500;
  line-height: 1.25rem;
  border: 2px solid var(--primary-color);
  transition: all .2s ease-in;
}

.bluebutton:hover {background: transparent; color: var(--primary-color);   border: 2px solid var(--primary-color);}


@media only screen and (max-width: 50.99rem) {
    .readon, .button, .btn, p.readmore .btn, .sprocket-lists-portrait-container > li .sprocket-lists-portrait-item > a span, .listentobutton.moduletable a {
        background: var(--secondary-color);
        border-radius: 0;
        font-family: var(--body-font-family);
        box-shadow: 0px 0px 15px rgba(0,0,0,.25);
        text-transform: uppercase;
        font-weight: 700;
        padding: 1vw;
        font-size: 3.25vw;
    } 
}

/*************** HOMELAYOUT ***************/ 
.site-landing #g-container-main {
    display: none!important;
}

.item-image {
    display: none!important
}

.site-1-home .g-content-array {
    margin: 0;
    padding: 0;
}

.site-2-home .g-content-array {
    margin: 0;
    padding: 0;
}

@media only screen and (min-width: 50.99rem) {
    .ql-height-50vw .g-blockcontent-subcontent-block-content {height: 40vw;}
}
@media only screen and (max-width: 50.99rem) {
    .ql-height-50vw .g-blockcontent-subcontent-block-content {height: 40vw;}
}

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

/*************** TOP **********************/ 
/*************** NAVIGATION ***************/
@media only screen and (min-width: 50.99rem) {
    .site-1 #g-navigation {
        position: relative;
        z-index: 99;
        box-shadow: var(--default-box-shadow);
        padding-top: 1vw!important;
    }
    .site-1 .g-main-nav .g-toplevel>li>.g-menu-item-container>.g-menu-item-content {
        font-size: 1.1vw;
        font-family: var(--body-font-family);
        font-weight: 700;
        border-bottom: 2px solid var(--secondary-color);
    }
    .site-1 .g-main-nav .g-sublevel>li>.g-menu-item-container>.g-menu-item-content>.g-menu-item-title {
        font-size: 1.1vw;
        font-family: var(--body-font-family);
    }
    .site-1 #g-navigation > div > div:nth-child(2) {
        border-top: 3px solid var(--secondary-color);
    }
    .site-1 #g-navigation .g-social-items a {
        color: var(--primary-color);
    }
    .site-1 #g-navigation .logo-text img {
        width: 90%;
    }
    .site-1 .g-main-nav .g-toplevel {
        padding-left: 13vw;
    }
    .site-1 .ql-fa-toplinks .g-blockcontent-subcontent-block:not(.ql-fa-toplinks .g-blockcontent-subcontent-block:last-child) {
        border-right: 1px solid var(--default-white);
    }
    .site-1 .logo-icon {
        margin-bottom: -2vw;
    }
    .site-1 .logo-icon a {
        border-radius: 50%;
    }
    .site-1 .logo-icon img {
        width: 80%!important;
        height: auto;
        border-radius: 50%;
        box-shadow: var(--default-box-shadow);
    }

    .site-2 #g-navigation {
        position: relative;
        z-index: 99;
        box-shadow: var(--default-box-shadow);
        padding-top: 1vw!important;
    }
    .site-2 .g-main-nav .g-toplevel>li>.g-menu-item-container>.g-menu-item-content {
        font-size: 1.1vw;
        font-family: var(--body-font-family);
        font-weight: 700;
        border-bottom: 2px solid var(--secondary-color);
		letter-spacing: 0;
    }
    .site-2 .g-main-nav .g-sublevel>li>.g-menu-item-container>.g-menu-item-content>.g-menu-item-title {
        font-size: 1.1vw;
        font-family: var(--body-font-family);
    }
    .site-2 #g-navigation > div > div:nth-child(2) {
        border-top: 3px solid var(--secondary-color);
    }
    .site-2 #g-navigation .g-social-items a {
        color: var(--primary-color);
    }
    .site-2 #g-navigation .logo-text img {
        width: 90%;
    }
    .site-2 .g-main-nav .g-toplevel {
        padding-left: 13vw;
    }
    .site-2 .ql-fa-toplinks .g-blockcontent-subcontent-block:not(.ql-fa-toplinks .g-blockcontent-subcontent-block:last-child) {
        border-right: 1px solid var(--default-white);
    }
    .site-2 .logo-icon {
        margin-bottom: -2vw;
    }
    .site-2 .logo-icon a {
        border-radius: 50%;
    }
    .site-2 .logo-icon img {
        width: 80%!important;
        height: auto;
        border-radius: 50%;
        box-shadow: var(--default-box-shadow);
    }
}

@media only screen and (max-width: 50.99rem) {
    #g-navigation {
        padding: 1rem 0!important;
    }
    #g-navigation .g-logo {
        max-width: 70%;
    }
    #g-navigation .logo-icon img {
        max-width: 50%;
    }
    .ql-fa-toplinks .g-blockcontent-subcontent-block {
        align-items: flex-start;
    }
    .ql-fa-toplinks .g-blockcontent-buttons > a {
        box-shadow: none;
    }
    .ql-fa-toplinks .g-blockcontent-subcontent-title-text {
        color: var(--default-white);
    }
    .ql-fa-toplinks .g-blockcontent-subcontent-block-content > .g-blockcontent-subcontent-title {
        display: flex;
    }
}

/*************** SLIDESHOW ****************/ 
@media only screen and (min-width: 50.99rem) {
    .site-1-home #g-slideshow > .g-container {
        position: relative;
        height: 56vw;
        width: 100%;
    }
    /*.site-1-home #g-slideshow > .g-container > .g-grid:nth-child(2) {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 10%;
        right: 10%;
        height: 100%;
        width: 80%;
        z-index: 12;
        display: flex;
        justify-content: center;
        align-items: center;
        pointer-events: none;
    }*/
    .site-1-home #g-slideshow > .g-container > .g-grid:nth-child(2) {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 12;
    }
    .site-1-home #g-slideshow > .g-container > .g-grid:nth-child(3) img {
        width: 100%;
    }
    .site-1-home #g-slideshow > .g-container > .g-grid:nth-child(2) .g-array-item-text h1 {
        font-size: 5vw;
        color: var(--default-white);
        margin-bottom: 1.7vw;
        text-shadow: 0px 1px 6px rgba(0,0,0,1);
    }
    .site-1-home #g-slideshow > .g-container > .g-grid:nth-child(2) .button {
        pointer-events: all;
    }

    .site-2-home #g-slideshow > .g-container {
        position: relative;
        height: 56vw;
        width: 100%;
    }
    .site-2-home #g-slideshow > .g-container > .g-grid:nth-child(2) {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 10%;
        right: 10%;
        height: 100%;
        width: 80%;
        z-index: 12;
        display: flex;
        justify-content: center;
        align-items: center;
        pointer-events: none;
    }
    .site-2-home #g-slideshow > .g-container > .g-grid:nth-child(3) {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 12;
    }
    .site-2-home #g-slideshow > .g-container > .g-grid:nth-child(3) img {
        width: 100%;
    }
    .site-2-home #g-slideshow > .g-container > .g-grid:nth-child(2) .g-array-item-text h1 {
        font-size: 5vw;
        color: var(--default-white);
        margin-bottom: 1.7vw;
        text-shadow: 0px 1px 6px rgba(0,0,0,1);
    }
    .site-2-home #g-slideshow > .g-container > .g-grid:nth-child(2) .button {
        pointer-events: all;
    }
}

.site-1-home .g-swiper .g-swiper-slider .swiper-slide .slide .slide-content-wrapper .slide-content .g-swiper-text h1, 
	.site-1-home .g-swiper .g-swiper-slider .swiper-slide .slide .slide-content-wrapper .slide-content .g-swiper-text h2, 
	.site-1-home .g-swiper .g-swiper-slider .swiper-slide .slide .slide-content-wrapper .slide-content .g-swiper-text h3, 
	.site-1-home .g-swiper .g-swiper-slider .swiper-slide .slide .slide-content-wrapper .slide-content .g-swiper-text h4, 
	.site-1-home .g-swiper .g-swiper-slider .swiper-slide .slide .slide-content-wrapper .slide-content .g-swiper-text h5, 
	.site-1-home .g-swiper .g-swiper-slider .swiper-slide .slide .slide-content-wrapper .slide-content .g-swiper-text h6, 
	.site-1-home .g-swiper .g-swiper-slider .swiper-slide .slide .slide-content-wrapper .slide-content .g-swiper-text p {
		color: white;
	}

@media only screen and (max-width: 50.99rem) {
    .site-1-home #g-slideshow > .g-container {
        position: relative;
        height: 56vw;
        width: 100%;
    }
    /*.site-1-home #g-slideshow > .g-container > .g-grid:nth-child(2) {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 10%;
        right: 10%;
        height: 100%;
        width: 80%;
        z-index: 12;
        display: flex;
        justify-content: center;
        align-items: center;
        pointer-events: none;
    }*/
	
	
    .site-1-home #g-slideshow > .g-container > .g-grid:nth-child(2) {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 12;
        display: none;
    }
    .site-1-home #g-slideshow > .g-container > .g-grid:nth-child(3) img {
        width: 100%;
    }
    .site-1-home #g-slideshow > .g-container > .g-grid:nth-child(2) .g-array-item-text h1 {
        font-size: 5vw;
        color: var(--default-white);
        margin-bottom: 1.7vw;
        text-shadow: 0px 1px 6px rgba(0,0,0,1);
    }
    .site-1-home #g-slideshow > .g-container > .g-grid:nth-child(2) .button {
        pointer-events: all;
    }

    .site-2-home #g-slideshow > .g-container {
        position: relative;
        height: 56vw;
        width: 100%;
    }
    .site-2-home #g-slideshow > .g-container > .g-grid:nth-child(2) {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 10%;
        right: 10%;
        height: 100%;
        width: 80%;
        z-index: 12;
        display: flex;
        justify-content: center;
        align-items: center;
        pointer-events: none;
    }
    .site-2-home #g-slideshow > .g-container > .g-grid:nth-child(3) {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 12;
        display: none;
    }
    .site-2-home #g-slideshow > .g-container > .g-grid:nth-child(3) img {
        width: 100%;
    }
    .site-2-home #g-slideshow > .g-container > .g-grid:nth-child(2) .g-array-item-text h1 {
        font-size: 5vw;
        color: var(--default-white);
        margin-bottom: 1.7vw;
        text-shadow: 0px 1px 6px rgba(0,0,0,1);
    }
    .site-2-home #g-slideshow > .g-container > .g-grid:nth-child(2) .button {
        pointer-events: all;
        font-size: 3vw;
    }
}

/*************** HEADER *******************/
.ql-square-1 .g-blockcontent-subcontent-block-content > .g-blockcontent-buttons > a {
    text-shadow: none!important;
}
@media only screen and (min-width: 50.99rem) {
    .site-1-home #g-header {
        box-shadow: var(--default-box-shadow);
        position: relative;
    }
    .site-1-home #g-header .g-array-item {
        background: linear-gradient(to bottom, #182F58 1%, rgba(24, 47, 88, 0.5) 3%, rgba(24, 47, 88, 0) 5%);
        padding: 3vw 2rem;
    }
    .site-1-home #g-header .g-item-title {
        font-size: 2vw;
    }
    .site-1-home #g-header .g-item-title > a {
        color: var(--primary-color);
        pointer-events: none;
    }
    .site-1-home #g-header .g-array-item-text p {
        font-size: 1.2vw;
    }

    .site-2-home #g-header {
        box-shadow: var(--default-box-shadow);
        position: relative;
    }
    .site-2-home #g-header .g-array-item {
        background: linear-gradient(to bottom, #182F58 1%, rgba(24, 47, 88, 0.5) 3%, rgba(24, 47, 88, 0) 5%);
        padding: 3vw 2rem;
    }
    .site-2-home #g-header .g-item-title {
        font-size: 2vw;
    }
    .site-2-home #g-header .g-item-title > a {
        color: var(--primary-color);
        pointer-events: none;
    }
    .site-2-home #g-header .g-array-item-text p {
        font-size: 1.2vw;
    }
}

@media only screen and (max-width: 50.99rem) {
    .site-1-home #g-header {
        box-shadow: var(--default-box-shadow);
        position: relative;
    }
    .site-1-home #g-header .g-array-item {
        background: linear-gradient(to bottom, #182F58 1%, rgba(24, 47, 88, 0.5) 3%, rgba(24, 47, 88, 0) 5%);
        padding: 2rem;
    }
    .site-1-home #g-header .g-item-title {
        font-size: 5vw;
    }
    .site-1-home #g-header .g-item-title > a {
        color: var(--primary-color);
        pointer-events: none;
    }
    .site-1-home #g-header .g-array-item-text p {
        font-size: 3.2vw;
    }

    .site-2-home #g-header {
        box-shadow: var(--default-box-shadow);
        position: relative;
    }
    .site-2-home #g-header .g-array-item {
        background: linear-gradient(to bottom, #182F58 1%, rgba(24, 47, 88, 0.5) 3%, rgba(24, 47, 88, 0) 5%);
        padding: 2rem;
    }
    .site-2-home #g-header .g-item-title {
        font-size: 5vw;
    }
    .site-2-home #g-header .g-item-title > a {
        color: var(--primary-color);
        pointer-events: none;
    }
    .site-2-home #g-header .g-array-item-text p {
        font-size: 3.2vw;
    }
}

/*************** ABOVE ********************/
@media only screen and (min-width: 50.99rem) {
    .site-1-home #g-above {
        padding: 2vw 0!important;
    }
    .site-2-home #g-above {
        padding: 2vw 0!important;
    }
}

/*************** SHOWCASE *****************/
/*************** UTILITY ******************/
/*************** FEATURE ******************/
@media only screen and (min-width: 50.99rem) {
    .site-1-home #g-feature {
        padding: 3vw 0!important;
    }

    .site-2-home #g-feature {
        padding: 3vw 0!important;
    }
}

@media only screen and (max-width: 50.99rem) {
    .site-1-home #g-feature {
        padding: 2rem 0!important;
    }

    .site-2-home #g-feature {
        padding: 2rem 0!important;
    }
}

/*************** MAIN *********************/
.site-1-home #g-sidebar {
    background: transparent;
}
.site-1-home #g-aside {
    background: transparent;
}
.site-1-home #g-container-main {
    padding-bottom: 6vw;
    background: url('/images/template/stjoe-footer-overlay.png') 0% 100% no-repeat, var(--default-white);
    background-size: 100% auto;
}

.site-1-home #g-container-main .g-title {
    font-size: 2vw;
    font-weight: 500;
    color: var(--primary-color);
    text-transform: none;
    border-bottom: 1px solid var(--secondary-color);
    font-variant-caps: normal;
    font-family: var(--title-font-family);
}
.site-1-home #g-container-main .g-array-item-text {
    margin: 0;
}
.site-1-home #g-mainbar .moduletable {
    margin: 0;
}

.site-1-home #g-container-main .g-content {
	padding: 0;
}

.site-2-home #g-sidebar {
    background: transparent;
}
.site-2-home #g-aside {
    background: transparent;
}
.site-2-home #g-container-main {
    padding-bottom: 6vw;
    background: url('/images/template/stjoe-footer-overlay.png') 0% 100% no-repeat, var(--default-white);
    background-size: 100% auto;
}

.site-2-home #g-container-main .g-title {
    font-size: 2vw;
    font-weight: 500;
    color: var(--primary-color);
    text-transform: none;
    border-bottom: 1px solid var(--secondary-color);
    font-variant-caps: normal;
    font-family: var(--title-font-family);
}
.site-2-home #g-container-main .g-array-item-text {
    margin: 0;
}
.site-2-home #g-mainbar .moduletable {
    margin: 0;
}

:is(.site-1-sub,.site-2-sub) #g-container-main {
    padding-top: 2vw;
}   

@media only screen and (max-width: 50.99rem) {
    .site-1-home #g-container-main .g-title {
        font-size: 6vw;
        font-weight: 500;
        color: var(--primary-color);
        text-transform: none;
        border-bottom: 1px solid var(--secondary-color);
        font-variant-caps: normal;
        font-family: var(--title-font-family);
    }
    .site-2-home #g-container-main .g-title {
        font-size: 6vw;
        font-weight: 500;
        color: var(--primary-color);
        text-transform: none;
        border-bottom: 1px solid var(--secondary-color);
        font-variant-caps: normal;
        font-family: var(--title-font-family);
    }
}

/*************** EXPANDED *****************/ 
/*************** EXTENSION ****************/
/*************** BOTTOM *******************/
/*************** FOOTER *******************/
#g-footer .g-content-array {margin: 0;}
#g-footer a {color: var(--default-white);} 

/*.site-1 #g-footer {
    background: linear-gradient(to bottom, #182F58 21%, rgba(0,0,0,0.5)97%, black);
}*/
.site-1 #g-footer :is(h1,h2,h3,h4,h5,h6) {
    color: var(--default-white);
}

/*.site-2 #g-footer {
    background: linear-gradient(to bottom, #182F58 21%, rgba(0,0,0,0.5)97%, black);
}*/
.site-2 #g-footer :is(h1,h2,h3,h4,h5,h6) {
    color: var(--default-white);
}

@media only screen and (min-width: 50.99rem) {
    .site-1 .footer-logo-icon img {
        width: 8vw;
        padding: 2vw 0;
    }
    .site-1 .footer-text-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .site-2 .footer-logo-icon img {
        width: 8vw;
        padding: 2vw 0;
    }
    .site-2 .footer-text-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

@media only screen and (max-width: 50.99rem) {
    .footer-logo-icon img {
        max-width: 25%;
        padding: 2vw 0;
    }
}

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

.cols-5 .sprocket-tables-block {
    width: 19%;
}
.sprocket-tabs-panels {
    padding: 0;
    border: 0px solid rgba(0, 0, 0, 0.1);
}

.c2g-badge-container.make-responsive {
	min-height: 1500px;
}
iframe.c2g-frame.make-responsive {
	height: 1450px;
}

@media only screen and (max-width: 50.99rem) {
    .site-landing #g-navigation > .g-container > .g-grid {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .site-landing #g-navigation > .g-container > .g-grid > .g-block:nth-child(1) {
        order: 1;
        flex: 50%;
    }
    .site-landing #g-navigation > .g-container > .g-grid > .g-block:nth-child(2) {
        order: 3;
        padding-top: 2rem;
    }
    .site-landing #g-navigation > .g-container > .g-grid > .g-block:nth-child(3) {
        order: 2;
        flex: 50%;
    }
    .site-landing #g-navigation .logo-icon img {
        max-width: 90%;
    }
}