/*TOP LEVEL STYLES ========================================================== */
/*the "html *" below is appied to all of the CSS code*/
/*the !important code overrides all other CSS code*/ 
html *
{
	font-family: "Microsoft JhengHei UI", "arial", Sans-serif !important; 
}
html
{
	scroll-behavior: smooth; /*for jump to top: scroll vs snap*/
}
body 
{ 
	margin:0; /*removes white border around the whole website*/
	padding:0; /*removes white border around the whole website*/
	
	/*min-width: 320px; /*restricts webpage from getting any smaller than defined amount*/ 
	
	min-height: 100vh; /*locks footer to bottom 1-of-4*/
	display: flex; /*locks footer to bottom 2-of-4*/
	flex-direction: column; /*locks footer to bottom 3-of-4*/	
	
	color: #4f4f4f; /*font color*/ 
}  
a[href^=tel] /*this will prevent phone numbers from looking blue on safari*/ 
{
   text-decoration:inherit;
   color: inherit;
}

/*layout framework styles ====================================================*/
#pgHeader {}
#pgMain {}
#pgSection {} 
#pgFooter 
{
	background-color: #071292;	
	margin-top: auto; /*locks footer to bottom 4-of-4*/
}

/*multi-purpose classes ====================================================== */
.center { text-align: center; }
.font-12 { font-size: 12px; }
.font-14 { font-size: 14px; }
.font-16 { font-size: 16px; }
.font-22 { font-size: 22px; }  
.font-24 { font-size: 24px; }  
.lh-6 { line-height: 1.6; } 
.text-color { color: #616161; }
.center_flex
{
	display:flex; /**/
	justify-content:center; /**/
	align-items:center; /**/
}

.bold { font-weight: bold; }
.italic { font-style: italic; } 
.underline { text-decoration: underline; }
.noUnderline { text-decoration: none; }
.hr_gray_75 { border-top: 2px solid #e8e8e8; border-bottom: 2px solid #f8f8f8; width:75%; }


/*header + navbar styles ==================================================== */
.header-flex-container 
{
	display: flex; /*flexbox for logo*/
	flex-wrap: wrap; /*flex - wrap or nowrap*/ 
	justify-content: center; /*flex - how items are positions in flexbox*/
	/*align-items:center; /**/
	
	max-width: 100%; 
	margin: auto; /*centers the container*/ 
	padding: 5px; /*create space buffer*/  		
	/*height: 115px; /**/ 
	/*border:1px solid red; /*hide - for layout only*/
} 
.logo-container
{	
	/*border:1px solid red; /*hide - for layout only*/
}
#nav-logo
{
	width: 100%; /**/	
	height: auto; /*makes the image responsive*/	
}
.nav-flex-container 
{
	display: flex; /*flexbox for navigation bar*/
	flex-wrap: wrap; /*flex - wrap or nowrap*/ 
	justify-content: space-evenly; /*flex - how items are positions in flexbox*/
	
	max-width: 100%; /*60%=960px, 63%=1200px, 72%=1366px*/ 
	margin: auto; /*centers the nav container*/ 
	padding: 5px; 
	list-style: none; /*remove bullet points*/ 
	align-items: center; /*centers each individual box vertically*/
	background-color: #071292; /*#0f00b8; /*#47afff;*/
	/*border:1px solid red; /*hide - for layout only*/	
}
.nav-flex-container > a 
{
	width: 120px; /*box width*/ 
	height: 50px; /*box height*/
	text-align: center; /*center text horizontally*/ 
	font-size: 21px; 
	color: white;
	font-weight: bold;
	text-decoration: none; /*remove underline*/ 
	line-height: 50px; /*text height - work on this*/ 
	border:1px solid #071292; /* #071292 */
	margin: 0px 0px 0px 0px; /* this is for responsive design - see @media queries below */ 
}
.nav-flex-container > a:hover 
{
	border: 1px solid white;
}


/*homepage styles =========================================================== */ 
.home-flex-container 
{
	display: flex; /*flexbox for homepage*/
	flex-wrap: wrap; /*flex - wrap or nowrap*/ 
	justify-content: center; /*flex - how items are positions in flexbox*/
	align-items: center; /*flex - centers each individual box vertically*/
	
	max-width: 100%; 
	margin: auto; /*centers the nav container*/ 
	padding-bottom: 355px; /*30%, create space buffer*/
	/*border:1px solid red; /*hide - for layout only*/
	
	background-image: url('../images/surgery2.jpg'); /**/	
	background-position:center center; /**/
	background-repeat: no-repeat; /**/
	/*background-attachment: fixed; /*spans the background image accross all grid blocks*/ 
	background-size: cover; /*covers the window*/
}
#welcome-box
{
	position: relative;
	top: 133px;
	width: 700px; 
	background-color: rgba(0, 0, 0, 0.3);
}
#welcome 
{
	position: relative;
	top: 0px;
	font-size: 53px; 
	color: white; 
	text-shadow: 2px 2px black;	
	text-align: center;
	padding: 0px 15px 0px 15px; /*t,r,b,l*/
}

/*footer styles ============================================================= */
#copyright
{
	font-size:10px; 
	color:lightgray; 
	line-height:20px;
}
#scrollBtn 
{
  /*position: fixed; /* fixed position approach */
  /*bottom: 10px; /*fixed*/
  /*right: 45px; /*fixed*/
  position: sticky; /* sticky position approach */
  position: -webkit-sticky;  /*sticky*/
  bottom: 0; /*sticky*/
  float: right;  /*sticky*/
  margin-right: 55px; /*sticky*/
  
  display: none;
  z-index: 99;
  font-size: 33px;
  border: none;
  outline: none;
  background-color: lightgray; 
  color: #000000; /* #454545; */ 
  cursor: pointer;
  padding: 8px 18px 8px 18px; /*t,r,b,l*/
  border-radius: 5px;
}

/*About styles ============================================================= */
.about-flex-container 
{
	display: flex; /*flexbox for homepage*/
	flex-wrap: wrap; /*flex - wrap or nowrap*/ 
	justify-content: center; /*flex - how items are positions in flexbox*/
	align-items: center; /*flex - centers each individual box vertically*/
	
	/*margin: auto; /*centers the container*/ 		
	width: 100%; /**/
	padding: 85px 0px 85px 0px; /*t,r,b,l*/ 
	background-color: rgba(255, 255, 255, 1);
}
.about-flex-item 
{
	max-width: 655px; /**/
	padding: 0px 25px 0px 25px; /*t,r,b,l*/ 
	/*border:1px solid red; /*hide - for layout only*/
}

/*Officer styles ============================================================= */
.officer-box 
{
	width: 100%; /**/
	background-color: #f5f5f5; /*background-color: rgba(250, 250, 250, 1);*/ 
	padding: 45px 0px 85px 0px; /*t,r,b,l*/ 
}
.officer-flex-container 
{
	display: flex; /*flexbox for homepage*/
	flex-wrap: wrap; /*flex - wrap or nowrap*/ 
	justify-content: center; /*flex - how items are positions in flexbox*/
	align-items: center; /*flex - centers each individual box vertically*/
	width: 85%; /**/
	margin: auto; /*centers the container*/ 
	/*border:1px solid red; /*hide - for layout only*/
}
.officer-flex-item
{
	text-align: center;
	padding: 0px 45px 30px 45px; /*t,r,b,l*/
	/*border:1px solid green; /*hide - for layout only*/
}
.break /*force flex item to next line*/ 
{
  flex-basis: 100%;
  height: 0;
}
.picBorder
{
	border: 3px outset lightgray; /* border, pop-out, transparency */ 
	box-shadow: 5px 5px 5px gray;
}
#officers
{	
	text-align: center;
	padding-bottom: 25px; 
}
.officer-flex-item > a > hr { width: 200px; opacity: 0.25;} 
.officer-flex-item > a 
{ 
	font-size: 14px; 
	line-height: 1.6; 
	text-decoration: none; 
	color: #4f4f4f; 
}

/*Contact styles ============================================================= */
.contact-flex-container 
{
	display: flex; /*flexbox for homepage*/
	flex-wrap: wrap; /*flex - wrap or nowrap*/ 
	justify-content: center; /*flex - how items are positions in flexbox*/
	align-items: center; /*flex - centers each individual box vertically*/
	
	/*margin: auto; /*centers the container*/ 	
	width: 100%; /**/
	padding: 85px 0px 85px 0px; /*t,r,b,l*/ 
	background-color: rgba(255, 255, 255, 1);
}
.contact-flex-item
{
	width: 333px; /**/
	text-align: center;
	padding: 0px 25px 0px 25px; /*t,r,b,l*/
	/*border:1px solid red; /*hide - for layout only*/
}




/* media queries - to change layout on small devices/viewports ============== */
/* put media queries at the end of your "cascading" stylesheet ============== */

@media all and (max-width: 499px) /* to avoid odd looking nav bar */
{
	.nav-flex-container > a 
	{
		margin: 0px 25px 0px 25px; /*t,r,b,l*/ 
	}
}
@media all and (max-width: 372px) /* to avoid odd looking nav bar */
{
	.nav-flex-container > a 
	{
		margin: 0px 0px 0px 0px; /*t,r,b,l*/ 
	}
}
@media all and (max-width: 529px) /* to avoid button overlapping content */
{
	#scrollBtn 
	{
	  margin-right: 10px; /*sticky*/ 
	}
}