/*title size fonts*/
@import url(https://fonts.googleapis.com/css?family=Raleway:400,800);
@import url(https://fonts.googleapis.com/css?family=EB+Garamond:400);

body {
	font-family: 'Raleway', sans-serif;
	background: #2E2D2D;
	font-weight:100;
	font-size: 95%;
	margin: auto;
	padding:0px;
	color: #000000;
}
figcaption { 
	margin-top:-45px;
	color:#ffffff;
	font-size:80%;
}

.cap { 
	margin-top:5px;
	color:#000000;
	font-size:90%;
}

p {line-height:150%;}

p.fontSize {font-size: 17px;}
.fontSize {font-size: 17px;}

h1, h2, h3, h4, h5, h6, h7 {
	padding: 0px 0px 0px 0px;
	margin: 0;
}

h1 {
	font-family: 'EB Garamond', serif;
}

h2 {
	font-family: 'EB Garamond', serif;
}

.center {
	text-align:center;
}

.black {
	color:#000000;
}
.navyblue {
	color:#031F63;
}

.pad {
	padding:10%;
}
.padblocks {
	padding:5%;
}
.padblocks2 {
	padding: 45px 145px; 
}
/*adjust padding for mobile*/ 
@media screen and (max-width: 800px) {
    .padblocksNew { padding: 40px 10px 40px 10px; /*t, r, b, l*/ }
}

@media not screen and (max-width: 800px) {
    .padblocksNew { padding: 40px 99px 40px 99px; /*t, r, b, l*/ }
}


.padgrids {
	padding:2%;
}
.padleft {
	padding: 0% 0% 0% 10%;
}
.paddingTop
{
	padding: 0px 0px 0px 0px; /*t, r, b, l*/ 
}
/*talk away the flexbox layout if on mobile*/
@media not screen and (max-width: 1200px)
{
	.flex-container {
	  display: flex;
	  flex-wrap: nowrap;
	  background-color: none;
	}
	.flex-container .box {
	  background-color: none;
	  width: 50%;
	  margin: 55px;
	  text-align: center;
	  line-height: 75px;
	  font-size: 15px;
	}
}



.shadwbox {
	-webkit-box-shadow:0 0 10px rgba(0, 0, 0, 0.8);	
	-moz-box-shadow:0 0 10px rgba(0, 0, 0, 0.8); 
	box-shadow:0 0 10px rgba(0, 0, 0, 0.8);
}

.shadwbox:hover { 
	background-color: rgba(21,77,134,0.90); 
	border-radius:2px;   
	/*background: linear-gradient(#282828 , #141414); /* old light to dark black colored nav bar */
    background: linear-gradient(#031F63 , #020f31);
} 

.bluelightbg {
	background-color: rgba(21,77,134,0.80);
}

.bluebg { 
background-color: rgba(21,77,134,0.95);
text-align:center; 
}

.bggray { 
background-color: rgba(21,77,134,0.08);
padding:10px;
}
.bggrayNew { 
background-color: rgba(216,216,216,1.0);
padding:10px;
}

.bggray2 { 
background-color: rgba(21,77,134,0.10);
}
.bggray2New { 
background-color: rgba(216,216,216,1.0);
}

.darkgraybg {
	background-color:#292929;
}
.white {
	color:#ffffff;
}

.tbox {
	color:#605E5E; 
	text-shadow: 1px 2px 3px #141414;
}
.tbox:hover {
	color:#605E5E; 
	text-shadow: 1px 2px 8px #000000;
}
.grayheadr {
	color:#605E5E; 
	text-shadow: 1px 2px 6px #141414;
}
.whiteheadr {
	color:#ffffff; 
	text-shadow: 1px 2px 6px #404040; 
}
.graylight {
	color:#AFAFAF; 
}
.graydark {
	color:#5a5a5a;
}
.blackcl {	
	color:#000000
}

.imgborder {
	width:80%; 
	height:auto; 
	border:8px solid #ddd; 
	box-shadow: -1px 4px 10px -3px rgba(0,0,0,0.75);
}

.imgborder2 { 
	border:1px solid #fefefe; 
	box-shadow: -1px 4px 10px -3px rgba(0,0,0,0.75);
	margin: 0% 3% 3% 5%;
}

.imgborder3 { 
	box-shadow: -1px 4px 10px -3px rgba(0,0,0,0.75);
	margin: 0% 5% 3% 5%;
}

.imgborder4 {
	border:8px solid #ddd; 
	box-shadow: -1px 4px 10px -3px rgba(0,0,0,0.75);
	width:60%;
	height:auto;
}

.imgborder4sm {
	border:8px solid #ddd; 
	box-shadow: -1px 4px 10px -3px rgba(0,0,0,0.75);
	width:180px;
	height:auto;
}

.arrowimg {
	list-style-image:url(../graphics/bullet.png);
	padding-left: 25px;
	font-size:90%; 
	line-height:25px;
}



hr.solid {
    border: 0;
    height: 0;
    border-top: 1px solid #474747;
    border-bottom: 1px solid #141414;
}

hr.solid2 {
    border: 0;
    height: 0;
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #141414;
	opacity: 0.2;
}

footer {
	margin:0 auto;
	padding: 15px;
	text-align:center;
	font-size:80%;
	color:#FFFFFF;
}

<!--FOR LINKS-->
a:link, a:visited, a:hover, a:active, a:focus {
		text-decoration: none;
}

a:link {
	color:#5894D1;
	text-decoration: none; 
}
a:visited {
	color: #5894D1;
	text-decoration: none;
}
a:hover, a:active, a:focus { 
	text-decoration: none;
	color: #357ac1;
}
.opaimg:hover {
	opacity:0.5;
	filter:alpha(opacity=50);
	-webkit-transition: opacity .3s linear;
}


/*float*/
.float {
  -webkit-transition:all .3s ease-out;
  -moz-transition:all .3s ease-out;
  -ms-transition:all .3s ease-out;
  -o-transition:all .3s ease-out;
  transition:all .3s ease-out;
}

.float:hover {
  -webkit-transform:translate(0px,-10px);
  -moz-transform:translate(0px,-10px);
  -ms-transform:translate(0px,-10px);
  -o-transform:translate(0px,-10px);
  transform:translate(0px,-10px);
}


.shadow {
	border-bottom: 0 none;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.46);
}

.shadow:hover {
	border-bottom: 0 none;
	box-shadow: 0 1px 15px rgba(0, 0, 0, 0.55);
}

<!--BUTTONS-->
.btnwide:div {
	text-align:center;
}

.btnwide:hover div {
	background-color: rgba(21,77,134,0.80);
	-webkit-box-shadow:0 0 15px rgba(0, 0, 0, 0.7);	
	-moz-box-shadow:0 0 15px rgba(0, 0, 0, 0.7);
	box-shadow:0 0 15px rgba(0, 0, 0, 0.7);
}

/*BUTTONS*/
.bbutton {
	background: linear-gradient(5deg, #000000 , #1A1A1A); 
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	border:1px solid rgba(0, 0, 0, 0.2);
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:19px;
	font-weight:100;
	padding:10px 25px;
	text-decoration:none;
	text-shadow:0px 2px 0px #000000;
	margin-top:20px;
}
.butNew {	
	border-radius:22px;
	border:1px solid rgba(0, 0, 0, 0.2);
	display:block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:18px;
	font-weight:100;
	padding:12px 12px;
    margin: 12px 12px;
}
.butNew2 {	
  margin: 15px; /* not working - get working*/  
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  max-width: 220px;
  xmax-height: 15px;
  border: 0px;
  padding: 15px 20px 15px 20px; /* t r b l */   
}


.bbutton:hover {
	background: linear-gradient(4deg, #163458 , #23609C); 
	border:1px solid #183E7A;
}
.bbutton:active {
	position:relative;
	top:1px;
}

/*scroll box*/ 
.scrollBox 
{
  background-color: white;
  max-width: 615px;
  height: 700px;
  overflow: scroll;
  padding: 15px;
  border:5px solid lightgray /**/
}
.scrollBox2 
{
  background-color: white;
  max-width: 815px;
  height: 700px;
  overflow: scroll;
  padding: 15px;
  border:5px solid lightgray; /**/
}

/*social media links*/
.social_media
{
	text-align: center;	
}
.social_media > a 
{
	text-decoration: none;
}
.social_media > a > img 
{
	width: 45px; 
	height: auto;
	padding: 0px 5px 0px 15px; 
}
@media all and (max-width: 615px)
{
	.mHide { display: none; }
} 

/*banner styling*/ 
.banner
{
	padding: 7px;
	background-color: #b30000;
	font-weight: bold;
	text-align: center;
	color: #202c62; 
}
.banner a { text-decoration: underline; color:#202c62; }
.banner a:hover { color:#5894d1; }

/*covid alert warning styling*/ 
.alert
{
	padding: 6px;
	background-color: #fcf003;
	font-weight: thin;
	text-align: center;
}
.alert a { text-decoration: none; }
.alert span { font-size:25px; vertical-align:sub;}


<!--FOR MAP---->
#dvMap {
        width: 500px;
        height: 550px;
		margin: 1%;
		position:fixed;
}

<!--QUOTES-->
blockquote {
    border-top: 1px solid #000;
    border-bottom: 1px solid #ccc;
    color: #a5a4a4;
    font-style: italic;
    margin: 30px;
    padding: 30px;    
    text-align: center; 
}

<!--Type Sizing--> 
@media screen and (max-width: 979px){
  #cssmenu {
    margin-bottom: 0px;
    position: fixed;
	z-index:1;
  }
}

@media only screen and (min-width: 320px) {
	h1 { font-size: 30px;}
	h2 { font-size: 21px;}
	h3 {font-size: 26px;}
	h4 {font-size: 18px;}
	h5 {font-size: 16px;}
	h7 { font-size: 20px;}
	p { font-size: 15px;}
	.footer { font-size: 13px;}
}


@media only screen and (min-width: 375px) {
	h1 { font-size: 30px;}
	h2 { font-size: 25px;}
	h3 {font-size: 26px;}
	h4 {font-size: 18px;}
	h5 {font-size: 16px;}
	h7 { font-size: 20px;}
	p { font-size: 15px;}
	.footer { font-size: 13px;}
}


@media only screen and (min-width: 480px) {
	h1 { font-size: 33px;}
	h2 { font-size: 25px;}
	h3 {font-size: 26px;}
	h4 {font-size: 18px;}
	h5 {font-size: 16px;}
	h7 { font-size: 35px;}
	p { font-size: 15px;}
	.footer { font-size: 13px;}
}
@media only screen and (min-width: 768px) {
	h1 { font-size: 35px;}
	h2 { font-size: 25px;}
	h3 {font-size: 26px;}
	h4 {font-size: 18px;}
	h5 {font-size: 16px;}
	h7 { font-size: 40px;}
	p { font-size: 18px;}
	.footer { font-size: 13px;}
}
@media only screen and (min-width: 1000px) {
	h1 { font-size: 35px;}
	h2 { font-size: 25px;}
	h3 {font-size: 26px;}
	h4 {font-size: 18px;}
	h5 {font-size: 16px;}
	h7 { font-size: 40px;}
	p { font-size: 20px;}
	.footer { font-size: 13px;}
}
@media only screen and (min-width: 1170px) {
	h1 { font-size: 40px;}
	h2 { font-size: 35px;}
	h3 {font-size: 26px;}
	h4 {font-size: 18px;}
	h5 {font-size: 16px;}
	h7 { font-size: 40px;}
	p { font-size: 20px;}
	.footer { font-size: 13px;}
}
@media only screen and (min-width: 1340px) {
	h1 { font-size: 55px;}
	h2 { font-size: 40px;}
	h3 {font-size: 35px;}
	h4 {font-size: 18px;}
	h5 {font-size: 16px;}
	h7 { font-size: 40px;}
	p { font-size: 20px;}
	.footer { font-size: 13px;}
}
@media only screen and (min-width: 1580px) {
	h1 { font-size: 55px; }
	h2 { font-size: 40px;}
	h3 {font-size: 26px;}
	h4 {font-size: 25px;}
	h5 {font-size: 16px;}
	h7 { font-size: 40px;}
	p { font-size: 20px;}
	.footer { font-size: 13px;}
}

<!--SHOW MOBILE OR DESKTOP ONLY-->
@media screen and (max-width: 500px){
.hide-mobile img {
   display: none;
   display: block; 
}
}
.mobileHide { display: inline;}
   /* Smartphone Portrait and Landscape */
@media only screen
   and (min-device-width : 320px)
   and (max-device-width : 480px){  .mobileHide { display: none;}}
   
/*hide picture if on mobile*/ 
.mobileHide2 { display: inline;}
   /* Smartphone Portrait and Landscape */
	@media screen and (max-width: 800px)
   {.mobileHide2 { display: none;}}
  
.mobileShow { display: none;}
   /* Smartphone Portrait and Landscape */
   @media only screen
   and (min-device-width : 320px)
   and (max-device-width : 480px){ .mobileShow { display: inline;}}

.tabHide  { display: inline;}
 /* Smartphone Portrait and Landscape */
 @media only screen
 and (min-device-width : 0px)
 and (max-device-width : 1057px){ .tabHide { display: none;}}
 
 .tabShow  { display: none;}
 /* Smartphone Portrait and Landscape */
 @media only screen
 and (min-device-width : 0px)
 and (max-device-width : 1057px){ .tabShow { display: inline;}}

<!--MOBILE CENTER-->
 .mobilecenter { display: inline;}
   /* Smartphone Portrait and Landscape */
@media only screen
   and (min-device-width : 0px)
   and (max-device-width : 480px){  .mobilecenter { display:block; text-align:center; vertical-align:central; margin: 0 auto;  max-width: 300px; width: auto; }}
   
<!--TABLES---->
.day {
	width:45%; 
}
.time {
	width:55%; 
}
<!--RESPONSIVE DIVS---->

/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}

.col2 {
	display: block;
	float:left;
	margin: 1% 0% 1% 0%;
}

.bullets /*test*/
{
	/*list-style-position: inside;*/
	font-size: 18px;
	line-height:1.6;
}

.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both; }
.group { zoom:1; /* For IE 6/7 */ }
/*  GRID OF FIVE  */
.span_1_of_5 {
	width: 24.25%;
}
/*  GRID OF THREE  */
.span_3_of_3 { width: 100%; 	box-shadow: -1px 4px 20px -6px rgba(0,0,0,0.65);}
.span_2_of_3 { width: 66.13%; 	box-shadow: -1px 4px 20px -6px rgba(0,0,0,0.65);}
.span_1_of_3 { width: 32.26%; 	}
.span_by3 { width: 33.33%; 	}

/*  GRID OF TWO  */
.span_2_of_2, .spanby2 { width: 100%; 	background-color: #2E2D2D; color:#ffffff; 
	-webkit-box-shadow: inset 0px -2px 14px 2px rgba(0,0,0,0.70);
	-moz-box-shadow: inset 0px -2px 14px 2px rgba(0,0,0,0.70);
	box-shadow: inset 0px -2px 14px 2px rgba(0,0,0,0.70);}
.span_1_of_2 { width: 50%; }
.span_0_1 { width: 50%; 	background-color: transparent; color:#000000; }
.span_0 { width: 49.2%; 	background-color: transparent;}
.span_01 { width: 33.33%; 	background-color: transparent; color:#000000; }


/*  GO FULL WIDTH ON MOBILE*/ 
@media only screen and (max-width: 800px) {
	.col {  margin: 1% 0% 1% 0%; }
	.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; padding:0;}
	.span_2_of_2, .span_1_of_2, .span_1_of_4 { width: 100%; }
	.span_by2 { width: 50%; }
}



/*ANIMATED TEXT EFFECT || THESE ELEMENTS AFFECT IMG MARGINS */
figure {
	padding:0;
	margin: 0 auto;
}

.fig1 {
	padding: 5%;
	margin: 0 auto;
}

.figcap {
	text-shadow: 1px 2px 6px #000000;
}

/*  TEXT ANIMATION */
.photo-grid {
	margin: 0 auto;
	max-width: auto;
	text-align: center;
	margin-top:-20px;
}

.photo-grid li {
	border: 01px solid white;
	display: inline-block;
	margin: .5em;
	width: 180px;
}

.photo-grid img {
	display: block;
	height: auto;
	max-width: 100%;
}

.photo-grid figure {
	height: 250px;
	overflow: hidden;
	position: relative;
	width: 289px;
}

.photo-grid figcaption {
	background: rgba(0,0,0,0.8);
	color: white;
	display: table;
	height: 100%;
	left: 0;
	opacity: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 100;
}

.photo-grid figcaption p {
	display: table-cell;
	font-size: 1.5em;
	position: relative;
	top: -40px;
	width: 180px;
	vertical-align: middle;
}
/*hover*/
.photo-grid li:hover figcaption {
	opacity: 1;
}
/*zoom image*/
.photo-grid img {
	display: block;
	height: auto;
	-webkit-transition: all 300ms;
	-moz-transition: all 300ms;
	transition: all 300ms;
	max-width: 100%;
}

.photo-grid li:hover img {
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);
	transform: scale(1.05);
}
/*drop text*/
.photo-grid figcaption p {
	display: table-cell;
	font-size: 1.5em;
	position: relative;
	top: -66px;
	width: 184px;
	-webkit-transition: all 300ms ease-out;
	-moz-transition: all 300ms ease-out;
	transition: all 300ms ease-out;
	vertical-align: bottom;
}

.photo-grid li:hover figcaption p {
	-moz-transform: translateY(40px);
	-webkit-transform: translateY(40px);
	transform: translateY(40px);
}
/*fade caption*/
.photo-grid figcaption {
	margin-top:163px;
	background: rgba(0,0,0,0.8);
	color: white;
	display: table;
	height: 45%;
	left: 0;
	opacity: 0;
	position: absolute;
	right: 0;
	top: 0;
	-webkit-transition: all 300ms;
	-moz-transition: all 300ms;
	transition: all 300ms;
	-webkit-transition-delay: 100ms;
	-moz-transition-delay: 100ms;
	transition-delay: 100ms;
	z-index: 100;
}

.doc-container 
{
	display: flex; 
	flex-wrap: wrap; 
	justify-content: center; 
}
.doc-box 
{
	width: 180px; /**/ 	
	font-size: 18px;  	
	background-color: rgba(0, 0, 0, 1); /**/
	margin:0px 20px 30px 20px;
	/*border:1px solid red; /**/
}
.doc-title
{
	color: white; 
	padding: 10px 10px 10px 10px;
	/*margin-top: 0; /**/
}
.doc-bio 
{
	line-height: 1.8;
	color: #57a0d1; 
}


<!--FORSLIDESHOW-->
/* jssor slider bullet navigator skin 05 css */
        /*
        .jssorb05 div           (normal)
        .jssorb05 div:hover     (normal mouseover)
        .jssorb05 .av           (active)
        .jssorb05 .av:hover     (active mouseover)
        .jssorb05 .dn           (mousedown)
        */
        .jssorb05 {
            position: absolute;
        }
        .jssorb05 div, .jssorb05 div:hover, .jssorb05 .av {
            position: absolute;
            /* size of bullet elment */
            width: 10px;
            height: 10px;
            background: url('imgslider/img/b05.png') no-repeat;
            overflow: hidden;
            cursor: pointer;
        }
        .jssorb05 div { background-position: -7px -7px; }
        .jssorb05 div:hover, .jssorb05 .av:hover { background-position: -37px -7px; }
        .jssorb05 .av { background-position: -67px -7px; }
        .jssorb05 .dn, .jssorb05 .dn:hover { background-position: -97px -7px; }

        /* jssor slider arrow navigator skin 12 css */
        /*
        .jssora12l                  (normal)
        .jssora12r                  (normal)
        .jssora12l:hover            (normal mouseover)
        .jssora12r:hover            (normal mouseover)
        .jssora12l.jssora12ldn      (mousedown)
        .jssora12r.jssora12rdn      (mousedown)
        */
        .jssora12l, .jssora12r {
            display: block;
            position: absolute;
            /* size of arrow element */
            width: 50%;
            height: auto;
            cursor: pointer;
            background: url('imgslider/img/a12.png') no-repeat;
            overflow: hidden;
        }
        .jssora12l { background-position: -16px -37px; }
        .jssora12r { background-position: -75px -37px; }
        .jssora12l:hover { background-position: -136px -37px; }
        .jssora12r:hover { background-position: -195px -37px; }
        .jssora12l.jssora12ldn { background-position: -256px -37px; }
        .jssora12r.jssora12rdn { background-position: -315px -37px; }