/************ COLORS  *********
00529c - Dark Blue
Blue 1 - Dark: #00529c  rgba(0, 82, 156, 1)
Blue 2 - medium: #6098c9 (menu bar)  rgba(96, 152, 201, 1)
Blue 3 - light: #d4dbeb rgba(212, 219, 235, 1)
color strip: #CCDCEB  rgba(204, 220, 235, 1)


***/


/* DEFAULT FOR ALL */
body, p { color: #212020; font-size: 1.1rem; }
h1, h2, h3, h4, h5, h6 { margin: .75rem 0; line-height: 1.3; font-weight: normal;}



/* STYLING */
h1 {color: #00529c; font-family: 'Julius Sans One', sans-serif; font-size: 3rem;}
h2 {color: #00529c;border-bottom: 1px solid #666666; color: #00529c; font-family: 'Julius Sans One', sans-serif; font-size:2.75rem;}
h3 {background: #00529c; color: white; border-radius: .2rem; padding: .1rem .4rem;font-family: 'Julius Sans One', sans-serif; font-size:2rem;}
h4 {color: #00529c; border-radius: 0;font-family: 'Julius Sans One', sans-serif; font-size: 1.75rem;;}
h5 { text-transform: uppercase;font-family: 'Julius Sans One', sans-serif; font-size: 1.5rem}
h6 {font-size: 1.25rem;}
a {text-decoration: none;}

.page-header h2 {padding-bottom: 0;}
blockquote {
  color: #666666;     
  padding: 0 0 0 15px;
    margin: 0 0 20px;
    border-left: 5px solid #d5d5d5;
  font: italic 16px/22px Georgia, Serif;
}

h3.g-title {background: transparent; color: #00529c; margin: 0; padding: 0; border-bottom: 1px solid #00529c;}
.feeds-display h3  {background: transparent;}

/************ BUTTONS  ************/
.readon, .button { 
  color: white; 
  background: #00529c; 
  padding: .7rem 1.3rem; 
  border-radius: .5rem; 
  display: inline-block;
  font-weight: 500;
  line-height: 1.125rem;
  border: none;
  margin: 0.25rem;
}

a.bluebutton { 
  color: #00529c; 
  background: transparent; 
  padding: .7rem 1.3rem; 
  border-radius: .5rem; 
  margin: 0.25rem;
  display: inline-block;
  font-weight: 500;
  line-height: 1.125rem;
  border: 2px solid #00529c;
  transition: all .2s ease-in;
}

.readon:hover, .button:hover {background: #ddd; color: #333;}
.bluebutton:hover {background: #00529c; color: white;   border: 2px solid #00529c;}

#g-mainbar .moduletable {
    margin: 0;
}

/************ HEADER  ************/
#g-top, #g-navigation, #g-feature, #g-bottom, #g-showcase, #g-utility, #g-container-main {
    background: url(../../../../images/stories/solutio/background-stripes.png?5a957685) repeat-y center center;
    background-size: 25%; 
    background-position: right; 
    padding-bottom: 0;    
}
#g-extension {
    background: url(../../../../images/stories/solutio/background-stripes.png?5a957685) repeat-y center center;
    background-size: 25%; 
    background-position: right; 
    padding: 4vw 5% 0 5%;     
}

#g-container-main {margin-left: 0; margin-right: 0; padding: 0 6%;}

@media only screen and (max-width: 767px) {
	#g-container-main {margin-left: 0; margin-right: 0; padding: 0;}
}

#g-feature:before {border: none; }
.g-main-nav ul { float: none; display: table; margin: auto; }
.negativebottommargin  {
    margin-bottom: -90px;
    z-index: 5;
}
/*********** LOGO **********/
#g-navigation .g-logo img {max-width: 65%;}


/************ MENU  ************/
.g-main-nav .g-dropdown { z-index: 3; }
.g-main-nav .g-toplevel > li > .g-menu-item-container {line-height: 2; }
.g-main-nav .g-toplevel > li:last-child > .g-menu-item-container { padding: 0 0.75rem; }
.g-menu-item-title {color: white; text-transform: uppercase; letter-spacing: 1px;}
.g-main-nav .g-toplevel > li > .g-menu-item-container {font-size: .8rem; padding: 1rem .5rem;}
.g-main-nav .g-toplevel > li.g-parent .g-menu-parent-indicator:after {display: none;}
.g-main-nav .g-toplevel > li:hover > .g-menu-item-container, .g-main-nav .g-toplevel > li.active > .g-menu-item-container {background: #2A4C9C;}
.g-main-nav .g-toplevel > li:last-child:hover > .g-menu-item-container {background: none; }
.g-main-nav .g-dropdown {background: #2A4C9C;}
.g-main-nav .g-sublevel, .g-main-nav .g-standard .g-dropdown .g-block {padding:0; margin:0; width: 100%;}
.g-main-nav .g-standard .g-sublevel > li {background: #00529c;;}
.g-main-nav .g-standard .g-sublevel > li:hover,
.g-main-nav .g-standard .g-sublevel > li.active {background: #6C96C8;}
.g-main-nav .g-sublevel > li {margin:0;}

.g-main-nav ul.g-toplevel {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
	align-items: center;
}

@media only screen and (min-width: 1200px) {}

@media only screen and (min-width: 768px) and (max-width: 959px) {}

@media only screen and (max-width: 767px) {
	.negativebottommargin .g-content.g-particle {text-align: center;}
	.negativebottommargin  { margin-bottom: 0px; }
	.negativebottommargin img { width: 25%; }
	#g-navigation .g-logo img { max-width: 85%; padding-bottom: 10px;}
	#g-navigation {border-bottom: 5px #ccc solid;}
	#g-top, #g-navigation, #g-feature, #g-bottom, #g-showcase, #g-utility, #g-container-main, #g-extension {background-size: 0;}
	.g-go-back a:hover {background: white; }
}



/*********** MOBILE MENU ************/
.g-offcanvas-toggle {top: .5rem; left: .5rem;}
.g-offcanvas-toggle:hover {color: #00529c;}
#g-offcanvas li {font-size:.8rem;}
#g-offcanvas .g-social a {font-size:1.2rem;}
#g-offcanvas #g-mobilemenu-container ul > li.g-menu-item-link-parent > .g-menu-item-container > .g-menu-parent-indicator {
    border: none;
    background: transparent;
}
#g-offcanvas #g-mobilemenu-container .g-toplevel > li:hover > .g-menu-item-container,
#g-offcanvas #g-mobilemenu-container .g-toplevel > li.active > .g-menu-item-container {background: #4A71BB;}


/************* SECONDARY MENU ***********
.box2.moduletable, .box2.widget, .box2.g-outer-box, .box2 > .g-content {background: #00529c;}
.nav.menu li.active a {border-bottom: 1px solid white;}
.moduletable .nav.menu, .moduletable .mostread, .moduletable .latestnews, .moduletable .archive-module, .moduletable .relateditems, .moduletable .categories-module, .moduletable .category-module, .moduletable .latestusers, .moduletable .unstyled {padding: .938rem .5rem; display: block;}
.moduletable .nav.menu li, .moduletable .mostread li, .moduletable .latestnews li, .moduletable .archive-module li, .moduletable .relateditems li, .moduletable .categories-module li, .moduletable .category-module li, .moduletable .latestusers li, .moduletable .unstyled li { padding: 5px; }
.moduletable .nav.menu li { border-bottom: 0; }
.moduletable > .nav.menu {display: block; }
.box2 .nav.menu .active { background: rgba(255,255,255,.1);  border-radius: 5px; }*/

/************ SIDE MENU  ************/
#g-aside .moduletable[class*="box"] { padding: 0; }
#g-aside .g-content { padding-left: 0; padding-right: 0px;}
.moduletable .nav.menu li a { width: 100%; border-radius: 0; padding: 10px 20px; color: white; font-weight: normal;}
.moduletable .nav.menu li{ transition: all .2s ease-in; border-radius: 3px; width: 100%; padding: 0; margin: 0;}
.moduletable .nav.menu, .moduletable .unstyled { border: 1px solid #00529c; padding: 0; margin: 0; display: block;  background: #00529c;  border-radius: 0; }
.moduletable .nav.menu li:last-child {  padding-bottom: 0;  margin-bottom: 0px;}
.moduletable .nav.menu .nav-child li:last-child {  margin-bottom: 0px;}
.moduletable .nav .nav-child { margin-top: 0px;}
.moduletable .nav.menu .nav-child li { border: none; margin-left: 20px; padding-right: 20px;}

.moduletable .nav.menu li.current.active a, .moduletable .nav.menu li a:hover { 
	color: #00529c;
	background: white;
	font-weight: normal;
}


/************ ROTATOR  ************/
/*.homelayout #g-slideshow .platform-content:first-child, .homelayout #g-slideshow .platform-content:last-child {display: none;}*/
#g-slideshow .platform-content {padding: 0; margin: 0;}
.layout-slideshow .sprocket-features-content {top: auto; left: 0; bottom: 2rem; width: 70%;}
.layout-slideshow .sprocket-features-desc {
    width: 100%;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00529c+0,00529c+100&0.65+44,0+100 */
    background: -moz-linear-gradient(left, rgba(0,82,156,0.65) 0%, rgba(0,82,156,0.65) 44%, rgba(0,82,156,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(0,82,156,0.65) 0%,rgba(0,82,156,0.65) 44%,rgba(0,82,156,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(0,82,156,0.65) 0%,rgba(0,82,156,0.65) 44%,rgba(0,82,156,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a600529c', endColorstr='#0000529c',GradientType=1 ); /* IE6-9 */
    padding: 1rem 1rem 1rem 3rem;

}
#g-slideshow h2 {color: white; border-bottom: none; margin: .25rem 0; font-size: 2rem;}
.layout-slideshow .sprocket-features-pagination li, .layout-slideshow .sprocket-features-arrows .arrow {background: transparent; box-shadow: none; font-size: 4rem;}
.g-main-nav .g-standard > .g-dropdown.g-dropdown-right, .g-main-nav .g-fullwidth > .g-dropdown.g-dropdown-right {left: 0;}
.g-main-nav .g-standard > .g-dropdown, .g-main-nav .g-fullwidth > .g-dropdown {margin-top: 5px;}
ul.sublevel {width: 100%;}
#g-slideshow p {color: white;}

.homelayout #g-slideshow .sprocket-features-img-container {
    width: 100%;
    height: 31vw;
}


.subrotator #g-slideshow .sprocket-features-img-container {
    width: 100%;
    height: 41vw;
}


@media only screen and (max-width: 767px) {
    .layout-slideshow .sprocket-features-content {top: auto; left: 0; bottom: 0; width: 100%; display: none;}
    #g-slideshow h2 {color: white; border-bottom: none; margin: .25rem 0; font-size: 1rem;}
	.sprocket-features-arrows { display: none; }
	.layout-slideshow .sprocket-features-desc {padding: 1rem; }
	.homelayout #g-slideshow .sprocket-features-img-container {
		width: 100%;
		height: 30vw;
	
	}
}


@media only screen and (max-width: 480px) {
    #g-slideshow h2 {color: white; border-bottom: none; margin: .25rem 0; font-size: 1rem;}
    #g-slideshow p {color: white; font-size: .8rem; margin: 0; line-height: .9rem;}
}

/********** ALERT ***********/
.alert {border: none;}
.alert {background: pink;}
.alert p, .alert h1, .alert h2, .alert h3, .alert h4, .alert h5, .alert h6 {color: red; padding: .2rem 1rem;}


/************ QUICKLINKS ***********/
/*********** AL'S QL CODE ****************/ 
table.overlays {width: 100%; max-width: 100%;}
table.overlays td {width: 25%;}

table.overlays, table.overlays tbody, table.overlays tbody tr{
    display: flex;
    flex-flow: row wrap;
  flex: 1;
}

table.overlays td, table.overlays td div p, table.overlays td div h2 {
  padding:0;
  margin: 0;
  border: none;
}

table.overlays td { flex: 1;}

table.overlays td div { 
  opacity: 1; 
  visibility: visible; 
  font-family: 'Pinyon Script'; 
  font-size: 2rem; 
  line-height: 2.2rem; 
  position: relative;
}

table.overlays td div h2 a {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
  right: 0;
  color: white;  
    font-size: 1.5rem;
  background: rgba(3, 80, 162, .2) 0 100% no-repeat;
  display: block;
  margin: 0;  
}

table.overlays td div h2 a:hover {
    background: rgba(3, 80, 162, .7) 0 100% no-repeat;
}

table.overlays td div h2 a > span{
  position: absolute;
    top: 15px;
    bottom: 15px;
    left: 15px;
  right: 15px;
  color: white;  
    font-size: 1.5rem;
    border: 1px solid white;
  /*background: rgba(3, 80, 162, .5) 0 100% no-repeat;*/
  transition: all 0.3s ease;
  display: block;
  margin: 0;
}


table.overlays td div h2 a span span {
    position: absolute;
    top: 50%;
	margin-top: -1.5rem;
    left: 0%;
    right: 0%;
    display: block;
    text-align: center;
}

table.overlays td div h2 a > span:hover {
    top: 6px;
    bottom: 6px;
    left: 6px;
  right: 6px;     
}

@media only all and (max-width: 47.938rem) {
  table.overlays td { flex: 50%;}
  table.overlays td div  {
    font-size: 2rem; 
    line-height: 2.2rem;   }
}


@media only screen and (min-width: 768px) and (max-width: 959px) {
    table.overlays td div h2 a span span {font-size: 1.2rem;}
}
@media only screen and (min-width: 481px) and (max-width: 767px) {
    table.overlays td div h2 a > span {font-size: 1.1rem;}
}
/**************** END AL'S QL CODE ***************/
/********** QUICKLINKS ***********/

@media only screen and (max-width: 480px) {
    table.overlays td div h2 a span span {font-size: 1rem;}
}
/*******************SLIDESHOW CARDS ADD 2.21.23**********************/
/************ HOVER NEWS  ************/
.sprocket-strips-container { display: flex; justify-content: center; }
.sprocket-strips .readon span { font-size: 1.5rem;}
.sprocket-strips { position: relative; }
.sprocket-strips-item { background: url(../images/template/article-default.jpg) 0 0 no-repeat; }

.sprocket-strips-arrows .arrow { background: none; color: rgba(0,0,0,.5); font-size: 5rem; box-shadow: none;}
.layout-slideshow .sprocket-features-pagination li, .layout-slideshow .sprocket-features-arrows .arrow {box-shadow: none; }
.layout-slideshow .sprocket-features-arrows .arrow { top: 50%;}
.sprocket-strips .sprocket-strips-nav .arrow { position: absolute; top: 50% }
.sprocket-strips .sprocket-strips-nav .arrow.next { right: -10px; }
.sprocket-strips .sprocket-strips-nav .arrow.prev { left: -10px; }
.sprocket-strips-content > a.readon { position: absolute; top: 0; right:0; bottom: 0; left: 0; background: none; display: flex; justify-content: center;  align-items: center; }
.sprocket-strips-item { position: relative; }
.sprocket-strips-item .readon { padding: 0; margin: 0;}
.sprocket-strips-item .readon:hover { background:  rgba(0, 82, 156, 0.85);}
.sprocket-strips-item .readon span  { flex: 1; text-align: center; transition: all .2s ease-in; opacity: 0; }
.sprocket-strips-item .readon:hover span  { opacity: 1; }
.sprocket-strips-content h4 {
position: absolute; left: 0; right: 0; bottom: 0;
background: rgba(0, 82, 156, 0.85); font-size: 1.4rem; text-shadow: 1px 1px 3px rgba(0,0,0,.5);
margin-bottom: 0px; min-height: 72px; text-align: center; transition: all .2s ease-in; border-radius: 0 0 .5rem .5rem;
display: flex;   align-items: center;   justify-content: center;
}
.sprocket-strips-item { box-shadow: 0px 0px 10px rgba(0,0,0,0.35); }
.sprocket-strips-content h4 a { color: white; }
.sprocket-strips-item { border-radius: .5rem; }
.sprocket-strips .cols-4 > li { width:  19%;}
.sprocket-strips-container > li { margin: 10px 3%;}
.sprocket-strips-item:hover .sprocket-strips-content h4 { opacity: 0;}
.sprocket-strips-item { background-position: 50% 50%; background-size: cover; }
.sprocket-lists-title { padding: 15px 10px !important;}
.sprocket-lists-item .sprocket-padding { padding-top: 0px;}

.sprocket-strips-pagination li {
padding: 8px !important;
border-radius: 0;
}

.sprocket-strips .cols-3 > li { width: 15vw;}
.sprocket-strips-item { height: 22.5vw;  }

@media only screen and (max-width: 767px) {	
.sprocket-features-content img { display: none;}
.sprocket-strips .sprocket-strips-nav .arrow.next { right: -20px; }
.sprocket-strips .sprocket-strips-nav .arrow.prev { left: -20px; }
.sprocket-strips-item { height: 45vw;  }
.sprocket-strips-container { flex-wrap: wrap; }
.sprocket-strips .cols-3 > li { width: 32vw;}
.sprocket-strips .cols-4 > li { width:  40%;}
}




/************* HOME CONTENT **************/
h4.sprocket-lists-portrait-title {margin: .5rem 0; font-weight: bold; font-size: 1.75rem;}
#g-feature .g-content {padding: 1.5rem .5rem;}
.homelayout #g-container-main {display: none;}
.homelayout2 #g-container-main {display: none;}
h4.sprocket-lists-portrait-title:hover {color: #8F0002;}

.homelayout2 #g-feature .g-block:first-child .g-content {
    background: rgba(47,46,91,.1); margin: 2.625rem 0.625rem;
}

/************ CONTENT FLOCKNOTES *************/
.flocknote p {font-size: .8rem;}
.flocknote img {border-bottom: 1px solid #00529c;} 

/************* CONTENT QUICKLINKS *************/
#g-feature .bluebuttons .readon, #g-feature .bluebuttons .button {width: 100%; border-radius: 0; text-align: center; margin: .4rem 0;}
#g-utility .bluebuttons .readon, #g-utility .bluebuttons .button {width: 100%; border-radius: 0; text-align: center; margin: .4rem 0;}
#g-mainbar .bluebuttons .readon, #g-mainbar .bluebuttons .button {width: 100%; border-radius: 0; text-align: center; margin: .4rem 0;}

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

/************  CONTENT  ************/
.page-header h2 { margin-top: 0px; }

.g-block.size-25 .g-content { margin-left: 0px; margin-right: 0px; padding-left: 0px; padding-right: 0px; }
/************ HOMELAYOUT  ************/

/************HEADLINES IN EXPANDED********************/
.zoompics .active .portrait-image img, .zoompics.noncollapse .portrait-image img {  height: 10vw;  width: 10vw;}
.zoompics .active .portrait-image img, .zoompics.noncollapse .portrait-image img {
    margin: 0vw 1vw 2vw 1vw;
    /*box-shadow: 0 8px 16px 0 rgb(0 0 0 / 20%), 0 0px 7px 0 rgb(0 0 0 / 19%);*/
}
.zoompics .active .portrait-image img, .zoompics.noncollapse .portrait-image img {  object-fit: cover; object-position: center;}
.active .portrait-image {width: 25%;}


.homelayout #g-expanded p {color: white; font-size: 1.45rem; font-family: 'Julius Sans One', sans-serif;}

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


/*************** EXTENSION *************/


#g-extension .block-a, #g-extension .block-b, #g-extension .block-c  {box-shadow: 1px 1px 10px rgba(0,0,0,.3); border-radius: 15px; background: white;}
#g-extension .g-content {margin: 1vw;}
 #g-extension .block-c .platform-content:first-child {padding-bottom: 0;}

@media only screen and (max-width: 767px) {
    #g-extension .block-a, #g-extension .block-b, #g-extension .block-c {/*box-shadow: none; border-radius: 0;*/ margin-top: 1rem; margin-bottom: 1rem;}
}

/*************make news images smaller*****************/
.newslayout .pull-right.item-image img { max-width: 15vw; display: none;}
.newslayout .pull-left.item-image img { max-width: 15vw; display: none;}
@media only screen and (max-width: 767px) {
	.newslayout .pull-left.item-image img { width: 100%; display: none;}
	.newslayout .pull-right.item-image img { width: 100%; display: none;}
} 



/************ FOOTER ***********/
#g-bottom {padding: 0;}
#g-footer p, #g-footer a {color: white;}
#g-footer h3 { line-height: 1.1; }
hr {margin: .5rem 0; }
/*#g-footer p {font-family: 'Lato', sans-serif;}
h3.footertext {font-family: 'Lato', sans-serif;} */


/************ CONTACT US PAGE  ************/
.dl-horizontal dd {  margin-left: 0; }

/************ APP PAGES  ************/
.categories-listapppage h3 a { color: white; }


.fancytable th, .infotables th {
    padding: 5px;
}
.fancytable th, .infotables th {
    color: white;
    background: #00529C;
    border: 1px solid #00529C;
}
.fancytable td, .infotables td {
    padding: 5px 10px;
}
.fancytable td, .infotables td {
    border: 1px solid #00529C;
}

/**** JAmboree Other NEWS ****/

/*.jamboree #g-showcase { padding-top: 3%; }*/
.jamboree #g-showcase h4.sprocket-strips-p-title { background: none; color: #303882; }
.jamboree #g-showcase h4.sprocket-strips-p-title a { color: #303882; }
.jamboree #g-showcase h4.sprocket-strips-p-title a:hover { color: #303882; }
.jamboree #g-showcase .sprocket-strips-p-block { margin-bottom: 1%; padding: 0 2%; }
.jamboree #g-showcase .sprocket-strips-p-item {
	display: flex; flex-direction: column;
	background: #303882;
	border-radius: 0.5rem;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.25);
	height: 35vw;
}

.jamboree #g-showcase .sprocket-strips-p-item img::before { color: rgba(48,56,130,0.9); }
.jamboree #g-showcase .sprocket-strips-p-item img {
	order: 1;
	width: 100%;
	max-width: 100%;
	height: 250px;
	margin-right: 0;
	border-radius: 0.5rem 0.5rem 0 0;
	object-position: 0 10%; object-fit: cover;
	float: none;
	margin-bottom: 0px;
	opacity: 0.8;
}

.jamboree #g-showcase .sprocket-strips-p-content {
	order: 2;
	padding: 20px 30px; margin: 0;
	background: white;
	height: 250px;
	border-radius: 0 0 0.5rem 0.5rem; 
	overflow: hidden;
}

.jamboree #g-showcase .sprocket-strips-p-content > a.readon { position: absolute; top: 0; right:0; bottom: 0; left: 0; background: none; display: flex; justify-content: center; align-items: center; }
.jamboree #g-showcase .sprocket-strips-p-item { position: relative; }
.jamboree #g-showcase .sprocket-strips-p-item .readon { padding: 0; margin: 0; font-size: 2rem; font-family: 'Julius Sans One', sans-serif; }
.jamboree #g-showcase .sprocket-strips-p-item .readon:hover { background: rgba(204,220,235,0.9);}
.jamboree #g-showcase .sprocket-strips-p-item .readon span { flex: 1; text-align: center; transition: all .2s ease-in; opacity: 0; }
.jamboree #g-showcase .sprocket-strips-p-item .readon:hover span { opacity: 1; }
.jamboree #g-showcase .sprocket-strips-p-pagination li { padding: 6px !important; border-radius: 0; background: #303882; }
.jamboree #g-showcase .sprocket-strips-p-arrows .arrow { background: rgba(204,220,235,0.35); color: #303882; }

@media only screen and (max-width: 767px) {
	.jamboree #g-showcase .sprocket-strips-p-arrows .arrow { margin-left: 25px; }
	.jamboree #g-showcase .sprocket-strips-p-container .sprocket-strips-p-block { width: 100%; }
	.jamboree #g-showcase .sprocket-strips-p-block { margin-bottom: 40px; }
	.jamboree #g-showcase .sprocket-strips-p-item {height: 75vw;}
}

@media only screen and (min-width: 767px) {
  .jamboree .four-columns .sprocket-strips-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: 0;
    gap: 2vw 0;
  }
  .jamboree .four-columns .sprocket-strips-container > li {
    width: 19%;
  }
}

/*
00529c - Dark Blue
Blue 1 - Dark: #00529c  rgba(0, 82, 156, 1)
Blue 2 - medium: #6098c9 (menu bar)  rgba(96, 152, 201, 1)
Blue 3 - light: #d4dbeb rgba(212, 219, 235, 1)
color strip: #CCDCEB  rgba(204, 220, 235, 1)

#00529c
*/

body {
  --primary-color: #00529c;
  --secondary-color: #6098c9;
  --tertiary-color: #d4dbeb;

  --primary-rgb: 0, 82, 156;
  --secondary-rgb: 96, 152, 201;
  --tertiary-rgb: 212, 219, 235;

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

  --ql-num-boxes: 4;
  --ql-flex: calc(100% / var(--ql-num-boxes));
  --ql-flex-gap: 3vw;
  --ql-bg-opacity: .6;
  --ql-bg-hover-opacity: .8;
  --ql-g-title-color: var(--primary-color);
  --ql-g-title-font: var(--title-font-family);
  --ql-g-title-size: 3vw;
  --ql-g-title-weight: 400;
  --ql-background-color: rgba(var(--primary-rgb),var(--ql-bg-opacity));
  --ql-background-hover: rgba(var(--primary-rgb),var(--ql-bg-hover-opacity));
  --ql-background-size-desktop: calc(var(--ql-icon-size-desktop) + 2vw);
  --ql-background-size-mobile: calc(var(--ql-icon-size-mobile) + 3rem);
  --ql-font-family: var(--title-font-family);
  --ql-title-color: var(--default-white);
  --ql-title-hover: var(--default-white);
  --ql-title-weight: 400;
  --ql-mobile-bg-color: rgba(var(--primary-rgb),.5);
  --ql-mobile-bg-hover: rgba(var(--primary-rgb),.7);
  --ql-mobile-title-color: var(--default-white);
  --ql-box-shadow: var(--default-box-shadow);
  --ql-font-size-desktop: 1.7vw;
  --ql-font-size-mobile: 1.2rem;
  --ql-bottom-border-size: 2px;
  --ql-bottom-border-style: solid;
  --ql-bottom-border-color: var(--default-white);
  --ql-right-border-size: 1px;
  --ql-right-border-style: solid;
  --ql-right-border-color: var(--secondary-color);
  --ql-top-border-size: 5px;
  --ql-top-border-style: solid;
  --ql-top-border-color: var(--secondary-color);
  --ql-left-border-size: 1px;
  --ql-left-border-style: solid;
  --ql-left-border-color: var(--secondary-color);
  --ql-border-radius: 0;
  --ql-icon-size-desktop: 4vw;
  --ql-icon-size-mobile: 4rem;
  --ql-title-color-mobile: var(--default-white);
  --ql-letter-spacing: 0;
  --ql-text-transform: none;
  --ql-height: 14vw;
  --ql-width: 17vw;
  --ql-mobile-width: 44vw;
  --ql-subtitle-color: var(--secondary-color);
  --ql-empty-height: 2vw;
  --ql-ratio: 1;
  --ql-title-align: center;

  --ql-overlay-opacity: .6;
  --ql-overlay-hover-opacity: .8;
  --ql-overlay-bg: rgba(var(--secondary-rgb),var(--ql-overlay-opacity));
  --ql-overlay-bg-hover: rgba(var(--secondary-rgb),var(--ql-overlay-hover-opacity));
}

@media only screen and (min-width: 767px) {
  .ql-lower-title .g-title {
    color: var(--default-white);
    text-align: center;
    font-size: 3vw;
    border: none;
  }
  .ql-lower-title {
      margin: 0;
      padding: 0;
  }
  .ql-lower-title > .g-content {
      margin: 0;
      padding: 0;
  }
  .ql-lower-title > .g-content > div {
      margin: 0;
      padding: 0;
  }
  .ql-lower-title .g-blockcontent {
      margin: 0;
      padding: 0;
  }
  .ql-lower-title .g-blockcontent > .g-blockcontent-subcontent {
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: row;
      justify-content: space-evenly;
      gap: 1vw;
  }
  .ql-lower-title .g-blockcontent-subcontent-block {
      margin: 0;
      padding: 0;
      width: 11vw;
      flex: unset;
  }
  .ql-lower-title .g-blockcontent-subcontent-block-content {
      margin: 0;
      padding: 0;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 11vw;
      transition: .4s all ease-in-out;
  }
  .ql-lower-title .g-blockcontent-subcontent-img {
      margin: 0;
      padding: 0;
      width: 11vw;
      height: 11vw;
      border-radius: 0;
      box-shadow: var(--default-box-shadow);
      object-position: center;
      object-fit: cover;
  }
  .ql-lower-title .g-blockcontent-subcontent-title {
      margin: 0;
      padding: 0;
      text-align: center;
  }
  .ql-lower-title .g-blockcontent-subcontent-title-text {
      margin: 0;
      padding: 0;
      color: var(--default-white);
      text-align: center;
      font-weight: 400;
      font-size: 1.5vw;
  }
  .ql-lower-title .g-blockcontent-buttons {
      margin: 0;
      padding: 0;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      height: 100%;
      width: 100%;
      opacity: 0;
  }
  .ql-lower-title .g-blockcontent-buttons a {
      margin: 0;
      padding: 0;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      height: 100%;
      width: 100%;
      opacity: 0;
  }
  .ql-lower-title .g-blockcontent-subcontent-block-content:hover {
      transform: scale(1.10);
  }
}

@media only screen and (max-width: 767px) {
  .ql-lower-title .g-title {
    color: var(--default-white);
    text-align: center;
    font-size: 6vw;
    border: none;
  }
  .ql-dm {padding: 2%;}
  .ql-dm .g-blockcontent-subcontent {
      flex-wrap: wrap;
      row-gap: 2vw;
      column-gap: 2%;
  }
  .ql-dm .g-blockcontent-subcontent-block {
      flex: 49%;
  } 
  .ql-dm .g-blockcontent-subcontent-block:not(.ql-bc-1 .g-blockcontent-subcontent-block:first-child) {
      margin-left: 0;
  }
  .ql-dm .g-blockcontent-subcontent-block-content {
      border-radius: 1rem; 
      height: 30vw; 
      position: relative;
  }
  .ql-dm .g-content {
      padding: 0;
      margin: 0;
  }
  .ql-dm .g-blockcontent-subcontent-block-content img {
      border-radius: 1rem; 
      position: absolute; 
      top: 0; 
      bottom: 0; 
      left: 0; 
      right: 0; 
      height: 100%; 
      width: 100%;
      object-fit: cover;
      object-position: center;
  }
  .ql-dm.ql-subtitle .g-blockcontent-subcontent-subtitle {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 50%;
      width: 100%;
      border-bottom-left-radius: 1rem;
      border-bottom-right-radius: 1rem;
      margin: 0;
      padding: 0;
      background: var(--ql-background-color);
      color: var(--ql-subtitle-color);
      text-align: center;
  }
  .ql-dm.ql-subtitle .g-blockcontent-subcontent-title {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      height: 50%;
      width: 100%;
      border-top-left-radius: 1rem;
      border-top-right-radius: 1rem;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      margin: 0;
      padding: 0;
      background: var(--ql-background-color);
      color: var(--ql-title-color);
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: flex-end;
  }
  .ql-dm.ql-subtitle .g-blockcontent-subcontent-title > .g-blockcontent-subcontent-title-text {
      border-radius: 0;
      justify-content: center;
      align-items: flex-end;
  }
  .ql-dm .g-blockcontent-subcontent-title {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      height: 100%;
      width: 100%;
      border-radius: 1rem;
      margin: 0;
      padding: 0;
      background: var(--ql-background-color);
      color: var(--ql-title-color);
      text-align: center;
  }
  .ql-dm .g-blockcontent-subcontent-title-icon {
      display: none;
  }
  .ql-dm .g-blockcontent-subcontent-title > .g-blockcontent-subcontent-title-text {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      height: 100%;
      width: 100%;
      border-radius: 1rem;
      margin: 0;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: var(--ql-font-size-mobile);
  }
  .ql-dm .g-blockcontent-buttons {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      height: 100%;
      width: 100%;
      border-radius: 1rem;
      margin: 0;
      padding: 0;
  }
  .ql-dm .g-blockcontent-buttons a {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      height: 100%;
      width: 100%;
      border-radius: 1rem;
      margin: 0;
      padding: 0;
      background: transparent;
      color: transparent;
  }
  .ql-dm .g-blockcontent-subcontent-block {
      border-radius: 1rem;
  }
  .ql-dm .g-blockcontent-subcontent-block-content:hover .g-blockcontent-subcontent-title {
      background: var(--ql-background-hover);
  }
  .ql-dm h2.g-title {
      text-align: center;
  }
}