@import url('//fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;1,100;1,300;1,400;1,500;1,700&display=swap');

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

font-family: 'EB Garamond', serif;
font-family: 'Roboto', sans-serif;

Purple #512888  rgba(81, 40, 136, 1)
15% Purple #E5DFED
Blue-hover #3071A9
Dark Gray #A7A7A7  rgba(167, 167, 167, 1)
Light Gray #D1D1D1   rgba(209, 209, 209, 1)


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

body {color: #333; font-family: 'Roboto', sans-serif;}

h1, h2, h3, h4, h5, h6 {margin: .75rem 0; line-height: 1.3; font-weight: normal;}
p {line-height: 1.3;}

.page-header h1 {text-transform: none; font-size: 3rem;}
h1 {color: #512888; font-size: 3.5rem; font-weight: 400;}
h2 {font-variant-caps: small-caps; color: #512888; font-size: 2.5rem;  font-weight: bold;  letter-spacing: 2px;}
.page-header h2 { padding-bottom: 0.25rem; line-height: 2.5rem;}
h2.normal {font-weight: 400;}
h3 {background: #512888; color: #ffffff; font-size: 2rem; line-height: 1.3; border-radius: 0rem; padding: .5rem;}
h3.ltgbkg {background: rgba(81, 40, 136, 0.5);}
h3.upper {text-transform: uppercase;}
h3.roboto {font-family: 'Roboto', sans-serif;}
h4 {color: #A7A7A7; font-size: 2rem;}
h4.roboto {font-family: 'Roboto', sans-serif;}
h5 {color: #512888; font-size: 1.75rem; font-weight: bold; }
h5.ltprl {color: rgba(81, 40, 136, 0.5) }
h5.spaced { letter-spacing: 5px; }
h5.black { color: #000000 }
h6 {color: #512888; font-size: 1.5rem; text-transform: uppercase; font-weight: bold; font-family: 'Roboto', sans-serif;}
h6.mixed { text-transform: none; }
a {color: #512888;}
a:hover {color: black;}


h3.g-title {font-variant-caps: small-caps; color: #512888; border: 1px solid #512888; font-size: 2.5rem;  font-weight: 400;  letter-spacing: 2px; background: none;}

td, table {border: none;}

.g-simplecontent .g-simplecontent-layout-header .g-simplecontent-item-content-title {color: #030303; }

@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;}
}

.sprocket-lists-portrait-container > li .sprocket-lists-portrait-item > a span, .listentobutton.moduletable a {
    background: #512888; font-family: 'Asap', sans-serif;
}
/************ BUTTONS  ************/
.readon, .button, .btn, p.readmore .btn   { 
  font-family: 'Asap', sans-serif;
  color: #512888;
  font-weight: 500;
  background: white;
  border: 2px #512888 solid;
  padding: 0.9rem 1.1rem; 
  border-radius: 0rem;
  font-size: 1.5rem; 
  line-height: 2rem;
  text-align: center;
}

.readon:hover, .button:hover, .btn:hover, p.readmore .btn:hover {background: rgba(81, 40, 136, 0.5);}
.readon a, .button a, .btn a, p.readmore a, .btn a {
    color: #512888;
}



blockquote {
	background: rgba(81, 40, 136, 0.5);
	color: white;
	padding: 40px 60px;
	font-family: 'Asap', sans-serif;
	font-style: normal;
	border: none;
	line-height: 1.5;
	position: relative;
	margin: 40px;
}

blockquote:before, blockquote:after {
	font-size: 8rem;
	position: absolute; 
	color: #512888;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 900;
	line-height: 0;
}
blockquote:before { content: "\201C"; top: 21px; left: -20px;}
blockquote:after { content: "\201D"; bottom: -14px; right: -22px; }

blockquote img[align="right"], blockquote img[style*="float:right"], blockquote img[style*="float: right"], blockquote .pull-right { padding-left: 30px;}

blockquote img[align="left"], blockquote img[style*="float:left"], blockquote img[style*="float: left"], blockquote .pull-left { padding-right: 30px;}


@media only screen and (max-width: 767px) {
	blockquote img[align="right"], blockquote img[style*="float:right"], blockquote img[style*="float: right"], blockquote .pull-right,
	blockquote img[align="left"], blockquote img[style*="float:left"], blockquote img[style*="float: left"], blockquote .pull-left { padding-left: 0px; padding-right: 0px;}
	blockquote { padding-left: 30px; padding-right: 30px;}
	.sprocket-strips-s-item blockquote img { width: 100%;}
	h2, .page-header h2 { font-size: 2.5rem; }
	.solidlinearound h2.centerinline { margin-left: -55px; margin-right: -55px; font-size: 2.2rem; padding: 10px 20px; }
}



/*************** HOMELAYOUT ***************/
/*************** OFFCANVAS ****************/


/*************** TOP **********************/
/*************** NAVIGATION ***************/
#g-navigation.menu-absolute {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
	background: transparent;
}
#g-navigation .g-content {padding: 1rem; margin-bottom: -12rem;}

@media only screen and (max-width: 50.99rem){
	/*#g-navigation .g-content { margin-bottom: 0;}*/
	#g-navigation .g-logo {max-width: 200px;}
}


/**Clarity dropdown- remove border-radius on menu dropdowns:***/
.g-main-nav .g-standard .g-dropdown {border-radius: 0px;}
.g-main-nav .g-dropdown .g-dropdown-column>.g-grid>.g-block.size-100 {border-radius: 0px;}
.g-main-nav .g-dropdown .size-100>.g-sublevel>li.g-go-back+li>.g-menu-item-container {
 border-top-left-radius: 0px;
 border-top-right-radius: 0px;
}
.g-main-nav .g-dropdown .size-100>.g-sublevel>li:last-child>.g-menu-item-container {
 border-bottom-left-radius: 0px;
 border-bottom-right-radius: 0px;
}

/*Clarity- remove top level dropdown indicatator***
.g-main-nav .g-toplevel > li.g-parent .g-menu-parent-indicator {display: none;}
/*clarity increase menu font size, remove capitalization***/
.g-main-nav .g-toplevel>li>.g-menu-item-container>.g-menu-item-content {font-size: 1rem; letter-spacing: 0.1rem; font-weight: 500;}
.g-main-nav .g-toplevel {text-transform: none;}
.g-main-nav {font-family: 'Roboto', sans-serif;}



/*************** SLIDESHOW ****************/
.slideshowopacity img {opacity: 0.75; height: 40vw; width: 100vw;}
.hero img { height: 33vw; opacity: 0.65;
}

/*************** HEADER *******************
#g-header .g-logo::after {
    background: #512888;
    content: '';
    top: 0;
    left: 0;
    width: 85%;
    height: 100%;
    z-index: 1;
    position: absolute;
}
#g-header .g-logo img {
    padding: 0;
    z-index: 2;
    position: relative;
    width: 100%;
    object-fit: cover;
}
#g-header .g-logo {
    padding-top: 4.5rem;
    padding-left: 4.5rem;
    text-align: left;
    height: 100%;
}
#g-header [id^="logo-"][id$="-particle"] {
    height: 100%;
} ***/

/*************** ABOVE ********************/
/*************** FEATURE ******************/
/*************** SHOWCASE *****************/
/*************** UTILITY ******************/
#g-utility { background: url(/images/stories/template/parallax-welcome50.jpg) 50% 0 no-repeat; background-size: cover; }

/*************** EXPANDED *****************/
.homelayout #g-expanded {padding: 3% 5%;}
/*************** EXTENSION ****************/
/*************** BOTTOM *******************/
#g-bottom {padding: 0 2%;}
#g-bottom .g-content {padding: 0.5rem;}

/*************** FOOTER *******************/
#g-footer .g-content {padding-left: 0.5rem; padding-right: 0.5rem; }
#g-footer p {font-family: 'Roboto', sans-serif;}
#g-footer a {color: #ffffff;}

/*************** COPYRIGHT ****************/

/*************** MODULES ******************/
.moduletable .nav.menu, .moduletable .unstyled {background: #450e09;}
.moduletable .nav.menu li.current.active a, .moduletable .nav.menu li a:hover {
    color: #450e09;
    background: #dbb45a;
}

/*************** SECTIONS *****************/


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

/**** Create a responsive table*****/
.responsive  {width: 100%; }
.responsive td, .responsive tr, table {border: 0px solid white;}
@media only screen and (max-width: 767px){ 
   .responsive, .responsive div, .responsive tr, .responsive td, .responsive tbody { display: block; table-layout:auto; width: 100%; border: none; margin: 0;}
   .responsive img { display: block; margin: 0 auto; width: 100%;}  
   .responsive { display:block; }
 }

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

.slideshowopacity p {
    margin: 0;
    padding: 0;
}