@import url('fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,700;1,400&family=Playfair+Display&display=swap');


/************* 

TEMPLATE NOTES

FONTS: 
Merriweather Sans
playfair display

COLORS
Dark Blue: #01356e
Light Blue: #ACC0D8
Almost black: #404040

************/




/************ IMAGES ************/
.item img {margin-left: 10px; margin-right: 10px; margin-bottom: 10px;}
p.buttonheading { margin: 0; padding: 0; }

body { color: #333; font-size: 1.2rem; font-family: 'Open Sans', sans-serif; }

h1, h2, h3, h4, h5, h6 { margin: .75rem 0; line-height: 1.3; font-weight: normal;}
p,.blog p, .item-page p  { line-height: 1.3; font-size: 1.2rem;  font-family: 'Open Sans', sans-serif; }

h1 {font-size: 3.5rem; text-transform: uppercase; font-weight: 300;}
h2, .page-header h2 { color: #0a4374; font-size: 2.75rem; border-bottom: 1px solid #808080;  padding: 0; font-weight: 300;}
h3 {color: #5c5c5c; font-size: 2.5rem; font-family: 'Playfair Display', serif;}
h4 {background: #0a4374; font-size: 2.25rem;color: white; border-radius: .2rem; padding: .3rem .5rem;}
h5 {color: #5c5c5c; font-size: 2rem; text-transform: uppercase;}
h6 {color: #0a4374; font-size: 2rem; font-style: italic;}
a { color: #0a4374; }
a:hover { color: #808080; }

blockquote {
	color: #333;     
	padding: 0 0 0 15px;
	margin: 0 0 20px;
	border-left: 5px solid #d5d5d5;
	font-family: 'Playfair Display', serif;;
	line-height: 1.2;
	font-size: 1.3rem;
	font-style: italic;
}

address {
	font-style: italic;
	font-weight: bold;
	font-size: 1.2rem;
	line-height: 1.2;
}

/************ BUTTONS  ************/
.readon, .button, .btn, p.readmore .btn   { 
  color: white; 
  font-family: 'Open Sans', sans-serif;
  font-size: 1rem;
  font-style: normal;
  text-transform: none;
  font-weight: bold;
  background: #0a4374; 
  padding: .7rem 1.3rem; 
  border-radius: .25rem; 
  margin: 0;
  display: inline-block;
  line-height: 1.125rem;
  border: none;
  transition: all .2s ease-in;
}

.readon:hover, .button:hover, .btn:hover,  p.readmore .btn:hover {background: #ACC0D8; color: white;}
.readon a, .button a, .btn a, p.readmore a, .btn a {color: white;}
.btn .icon-chevron-right { display: none;}



/************ TABLES  ************/
.fancytable th {color: white; background: #0a4374; border: 1px solid #0a4374; font-size: 1.95rem;}
.fancytable td { border: 1px solid #0a4374;}


/************ ALERT ************/
.alert .g-content {padding: 0; margin: 0;}
.alert {border: none; padding: 0; margin: 0; /*background-color: #f8f4ec; color: #c09853;*/}
.alert h1, .alert h2, .alert h3, .alert h4, .alert h5, .alert h6, .alert p { margin-left: 20px;}
/*@media only screen and (max-width: 767px) {
	.alert .platform-content {padding: 1rem; margin-top: 1rem;}
}*/



/************ HEADER AND MENU  ************/
#g-showcasemain .g-content {margin: 0; padding: 0px;}
.background-video video { width: 100%;}

#g-navigationmain .g-content { padding: 0; margin: 0;}
#g-container-navigation {  position: absolute;  left:0; right: 0;	padding-top: 0;}
#g-container-navigation .g-main-nav .g-toplevel {flex-wrap: wrap; justify-content: space-around;}
#g-container-navigation .g-main-nav .g-toplevel > li > .g-menu-item-container > .g-menu-item-content { color: white; }
#g-container-navigation .g-main-nav .g-toplevel > li:hover > .g-menu-item-container, #g-container-navigation .g-main-nav .g-toplevel > li.active > .g-menu-item-container  { background: rgba(255,255,255,.2); color: white; }
#g-container-navigation .g-main-nav .g-dropdown { background: rgba(1, 53, 110, 0.5);}
#g-container-navigation .g-main-nav .g-sublevel > li > .g-menu-item-container:hover {color: white;} 
#g-container-navigation .g-main-nav .g-toplevel > li > .g-menu-item-container { font-size: 1.1rem; line-height: 1.2rem !important; text-transform: uppercase;	padding: .625rem .625rem;}
/*.g-main-nav .g-toplevel > li {	display: list-item; list-style-type: none;	margin: 0px;	padding: 10px 0 0 0;}*/

/************ VIDEO AND LOGO HOMEPAGE  ************/
#g-container-header .g-container { width: 100%;}

.home-logo {position: absolute; right: 0;  left: 0; text-align: center; top: 0; bottom: 0;  background: rgba(0,0,0,.4);}
.home-logo .g-content, .home-logo .g-content .platform-content, .moduletable.frontpagelogo, .customfrontpagelogo{
	position: absolute; top: 0; bottom: 0; 	left: 0; right: 0;}
.home-logo .logo {  position: relative;  top: 50%;  transform: translateY(-50%);  width: 75%;  margin: 0 auto;  max-width:  1000px;}
.home-logo .logo img { width: 80%;} 
.logo h2 { color: white; font-size: 2rem; line-height:  2.5rem; border: none; margin: 0px;}

@media only screen and (min-width: 1200px) {
	.logo h2 { font-size: 2.5rem; line-height:  3rem;	}
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
	.logo h2 { font-size: 1.5rem; line-height:  2rem;	}
}

@media only screen and (max-width: 767px) {
	.background-video { height: 60vh;}
	.home-logo .logo img {padding-bottom: 30px;}
	.microscopebackground {background: url(../images/stories/about/homeback.jpg) 50% 50% no-repeat; background-size: cover;}
	.logo h2 {font-size: 1rem; line-height: 1.2rem;}
	.home-logo .logo {
	   position: absolute;
	   top: 70%;
	   left: 50%;
	   width: 90%;
	   height: 300px;
	   margin-top: -150px; /* Half the height */
	   margin-left: -45%; /* Half the width */
	}
}
.homelayout .page-header h2 {margin-top: 0px; font-weight: 600; padding-bottom: 10px;}
.homelayout .equaltable > tbody > tr > td {
    display: table-cell;
    margin: 10px;
    width: 2%;
    border: 10px solid rgba(0,0,0,0);
    vertical-align: top;
}

/************SUBPAGES LOGO******************/
#g-container-header .g-logo, .outline-_error #g-container-header .g-logo {
    position: absolute;
    z-index: 1;
    padding: 3rem;
width: 50%;}

@media only screen and (min-width: 500px) and (max-width: 767px){
	#g-container-header .g-logo, .outline-_error #g-container-header .g-logo {
    padding: 4vw 0 0 13vw;
    width: 90%;}
}
@media only screen and (max-width: 499px) {
	#g-container-header .g-logo, .outline-_error #g-container-header .g-logo {
    width: 90%;
    padding: 1rem 0 0 4rem;}
}

/**********error page menu*************/
#g-headermain .g-content {padding: 0;}


/************ HERO IMAGE ************/
#g-abovemain .platform-content {padding: 0; margin: 0;}
#g-abovemain .g-content {padding: 0; margin: 0;}
.hero p { margin: 0; }
.hero img { height: 32vw; object-fit: cover; width: 100%; opacity: 0.35; }

@media only screen and (max-width: 767px) { 
	.hero img { height: 24vh; }
}


/**********gray buttons on home**************/
a.home-button {
    background: #707070;
    width: 100%;
    height: 40px;
    padding: 5px 20px;
    display: block;
    margin: 5px;
    color: white;
    font-size: 1.5rem;
    line-height: 2rem;
}
a.home-button:hover {background: }



/************ Remove Triangle BACKGROUND  ************/
#g-page-surround:before { background: none; }


/************ QUICKLINKS ***********/
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';  position: relative;}
table.overlays td div h2 { font-size: 1.8rem;  line-height: 2rem; text-transform: uppercase;}
table.overlays td div h2 a{
	position: absolute;
  top: 0;
  bottom: 0px;
  left: 0px;
  right: 0px;
  color: white;  
  padding: 20px;
  transition: all 0.3s ease;
  display: block;
  margin: 0;
}
table.overlays td div img { opacity: .7;}
table.overlays td div h2 a:hover {background: rgba(1, 53, 110, .7) 0 100% no-repeat;}
table.overlays td div h2 a span {position: relative; bottom: 0%; top: 70%; display: block; text-align: center;}
table.overlays td div h2 a:hover {top: 0px; bottom: 0px; left: 0px; right: 0px; }

@media only screen and (min-width: 1200px) {
	table.overlays td div h2 { font-size: 2rem; line-height: 2.2rem;	}
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
	table.overlays td div h2 { font-size: 1.75rem; line-height: 1.75rem;	}
}

@media only screen and (min-width: 767px) and (max-width: 500px) {
  table.overlays td { flex: 50%;}
  table.overlays td div h2 { font-size: 1.25rem; line-height: 1.25rem;	}
}
@media only screen and (max-width: 499px) {
	table.overlays td { flex: 50%;}
	table.overlays td div h2 { font-size: 1.25rem; line-height: 1.25rem;}
	table.overlays td div h2 a span {position: relative; bottom: 0%; top: 50%; display: block; text-align: center;}
}


/************ SOCIAL MEDIA ICONS WHITE ************/
.g-social a { color: white; }
.g-social a:hover { color: #108093 !important; }

/************ CENTER SOCIAL MEDIA VERTICALLY  ************/
.g-block.size-5 { display: flex; justify-content: center; align-items: center; }

/************ OFFCANVAS MENU  ************/
.g-offcanvas-toggle {color: white; }
#g-offcanvas #g-mobilemenu-container .g-toplevel > li > .g-menu-item-container > .g-menu-item-content, #g-offcanvas #g-mobilemenu-container .g-sublevel > li > .g-menu-item-container > .g-menu-item-content {font-weight: normal; }
#g-offcanvas .g-menu-item-title {color: white; }
#g-offcanvas #g-mobilemenu-container ul > li > a.g-menu-item-container:hover {background: rgba(0,0,0,0.15); }
#g-offcanvas #g-mobilemenu-container ul > li.g-menu-item-link-parent > .g-menu-item-container > .g-menu-parent-indicator {border: none; background: none; }
#g-offcanvas #g-mobilemenu-container ul > li.g-menu-item-link-parent > .g-menu-item-container > .g-menu-parent-indicator:hover {border: none; background: none; }



/************ SEARCH ************/
.searchsearchtop-right label { display: none;}
.searchsearchtop-right {position:fixed; top: 5px; right: 5px;}
.searchsearchtop-right input, .searchsearchtop-right input[type="text"] { height: 22px; border-radius: 5px}
.searchsearchtop-right input { width: 130px;}
.searchhidden-desktop input { margin: auto; width: 100%;}


/********** LIVE CHAT **********/
.livechat-button {
	background-color: #01356E;
	font-size: 2rem;
	font-weight: bold;
	border: 1px #FFF solid;
	font-family: 'Merriweather Sans', sans-serif;
	padding: 5px 5px;
}
a.livechat-button {color: white;}
.livechat-button:hover {background: #6f98bb;}

/************ FOOTER  ************/

#g-container-footer, #g-container-footer a { color: white; }
#g-container-footer a:hover { color: rgba(255,255,255, .7); }
#g-container-footer .g-content { padding: 1rem; }



/************ ADMIN FOOTER  ************/
#g-container-copyright .g-block { display: flex; align-items: center; justify-content: flex-end; }
#g-container-copyright .g-content { margin: 0; padding: 0;}
#g-container-copyright { margin:  -25px 0 0 0; padding: 0; height:  40px; }
#g-container-copyright a .fa.fa-lock { color: #e5e5e5; }
#g-container-copyright a:hover .fa.fa-lock { color: #c71833; }

@media only screen and (max-width: 767px) {
	#g-container-copyright { display: none !important; }
}
