/*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;    
}
body 
{ 
	margin:0; /*removes white border around the whole website*/
	padding:0; /*removes white border around the whole website*/
	
	background-color: #505050; /*so you don't see any white when scrolling on phones*/
	background-image: url('../images/sunset2.png'); 	
	background-repeat: no-repeat;
	background-attachment: fixed; /*spans the background image across all grid blocks*/ 
	background-size: cover; /*covers the window*/
	
	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*/	
}  
a[href^=tel] /*this will prevent phone numbers from looking blue on safari*/ 
{
   text-decoration:inherit;
   color: inherit;
}

/*layout framework styles ====================================================*/
#pgHeader 
{
	background-image: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)); /*opacity bar*/	
}
#pgMain {}
#pgSection {} 
#pgFooter 
{
	background-color: #505050;	
	margin-top: auto; /*locks footer to bottom 4-of-4*/
}

/*multi-purpose classes ====================================================== */
.bold { font-weight: bold; }
.italic { font-style: italic; } 
.underline { text-decoration: underline; }
.noUnderline { text-decoration: none; }
.align_right { text-align: right; }
.center { text-align: center; }
.black { color:#000000; }
.white { color:#ffffff; }
.logo-orange { color: #EF5822; }
.text-orange { color: #d54510; }
.font-10 { font-size: 10px; }
.font-12 { font-size: 12px; }
.font-14 { font-size: 14px; }
.font-16 { font-size: 16px; }
.font-18 { font-size: 18px; }
.font-20 { font-size: 20px; }
.font-23 { font-size: 23px; }
.font-25 { font-size: 25px; }
.font-31 { font-size: 31px; }
.hr_gray_75 { border-top: 2px solid #e8e8e8; border-bottom: 2px solid #f8f8f8; width:75%; }
.hr_gray_85 { border-top: 2px solid #e8e8e8; border-bottom: 2px solid #f8f8f8; width:85%; }
.hr_gray_95 { border-top: 2px solid #e8e8e8; border-bottom: 2px solid #f8f8f8; width:95%; }
.hr_gray_100 { border-top: 2px solid #e8e8e8; border-bottom: 2px solid #f8f8f8; width:100%; }
.link_decor { text-decoration: underline; text-decoration-color: #d54510; }
.hide { display: none; }
.LH6 { line-height: 1.6; }

/*header + navbar styles ==================================================== */
.header-flex-container 
{
	display: flex; /*flexbox for logo*/
	flex-wrap: wrap; /*flex - wrap or nowrap*/ 
	justify-content: space-between; /*flex - how items are positions in flexbox*/
	 
	max-width: 100%; 
	margin: auto; /*centers the container*/ 
	padding-top: 15px; /*create space buffer*/  		
	height: 72px; /**/ 
	/*border:1px solid red; /*hide - for layout only*/
} 
.logo-container
{
	/*border:1px solid red; /*hide - for layout only*/
}
.number-container 
{ 
	text-align: right; 
	padding: 0px 20px; /*create space buffer*/
	/*border:1px solid red; /*hide - for layout only*/
}
#nav-logo
{
	max-width: 138px; /*30% emulates 138px*/
	/*max-width: 100%; /*30% emulates 138px*/
	/*height: auto; /*makes the image responsive*/		
	margin: 0px 15px; /*create space buffer*/
	/*image-rendering: -webkit-optimize-contrast; /* chrome is pathetic at scaling images */ 
}
#number
{
	font-size: 25px; 
	color: #c9c9c9;
	text-shadow: 2px 2px 3px #303030; /**/
}
#billPay
{
	text-decoration: none; /*remove underline*/ 
	font-size: 18px; 
	color: #ff8834; 
	text-shadow: 2px 2px 2px #000000; /**/ 
	font-weight: bold;
	margin-top: 55px;
	line-height: 2.4;
} 
.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: 87%; /*60%=960px, 63%=1200px, 72%=1366px*/ 
	/*margin: auto; /*centers the nav container*/ 
	margin-left: auto; /*locks div to the right pt-1*/ 
	margin-right: 0px; /*locks div to the right pt-2*/ 
	padding-bottom: 12px; 
	list-style: none; /*remove bullet points*/ 
	align-items: center; /*centers each individual box vertically*/
	/*border:1px solid red; /*hide - for layout only*/
}
.nav-flex-container > a 
{
	width: 150px; 
	padding: 15px 0px; 
	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*/ 
	/*background-color: gray; /*hide - for layout only*/
	/*border:1px solid blue; /*hide - for layout only*/
}


/*homepage styles =========================================================== */ 
.home-spacer
{
	padding-top: 24%; /*22 or 25%, create space buffer*/ 
	text-align: center; /*center text horizontally*/
	/*border:1px solid red; /*hide - for layout only*/
}
.home-flex-container 
{
	display: flex; /*flexbox for homepage*/
	flex-wrap: wrap; /*flex - wrap or nowrap*/ 
	justify-content: space-evenly; /*flex - how items are positions in flexbox*/
	align-items: center; /*flex - centers each individual box vertically*/
	
	max-width: 1366px; 
	margin: auto; /*centers the container*/ 
	padding: 25px 0px 25px 0px; /*t,r,b,l*/
	/*border:1px solid red; /*hide - for layout only*/
}
.home-text  
{
	text-align: center; /*center text horizontally*/
	color: white;
	font-size: 25px; 
	line-height: 1.4;
	font-weight: bold;	
	text-shadow: 2px 2px #303030;
	/*border:1px solid red; /*hide - for layout only*/	
}
.home-button  
{
	text-align: center; /*center text horizontally*/ 
	font-size: 23px; 
	color: white;
	font-weight: bold;
	cursor: pointer;
	border-radius: 30px; /*round edges of buttom*/
	border: 2px outset white;
	background-image: linear-gradient(to bottom, #ff4e00, #fc9435); /*gradient background*/ 
	margin: 20px 33px; 
	padding: 10px 20px; 
	width: 265px; 
}
.home-but2  
{
	text-align: center; /*center text horizontally*/ 
	color: white;
	font-weight: bold;
	cursor: pointer;
	border: 2px outset white;
	background-image: linear-gradient(to bottom, #ff4e00, #fc9435); /*gradient background*/ 
	padding: 10px 20px; 
		
	font-size:21px; 
	width:290px; /**/
	margin: 35px 33px 20px 33px;
	border-radius:40px; /*round edges of buttom*/
}

/*footer styles ============================================================= */
#copyright
{
	font-size:10px; 
	color:lightgray; 
	line-height:20px;
}

/*services page styles ============================================================= */
.service-top-container
{
	max-width: 1100px;
	margin: auto; /*centers the container*/		 
	margin-top: 25px; 
	margin-bottom: 25px;
	padding: 25px 25px 25px 25px;  /*t,r,b,l*/
	background: rgba(255, 255, 255, 0.90); /**/ 
	color: #d54510; 
	
}
.services-white-container  
{
	max-width: 1100px; 
	margin: auto; /*centers the nav container*/ 
	background: rgba(255, 255, 255, 1); /**/
	margin: 25px 25px 25px 25px;  /*t,r,b,l*/
	padding: 25px 0px 25px 0px;  /*t,r,b,l*/	
	/*box-sizing: border-box; /**/ 
}
.service-margin
{
	margin: 0px 25px 0px 25px;  /*t,r,b,l*/
	/*border:1px solid red; /*hide - for layout only*/
}
.service-flex-container 
{
	display: flex; /*flexbox for homepage*/
	flex-wrap: wrap; /*flex - wrap or nowrap*/ 
	justify-content: space-evenly; /*flex - how items are positions in flexbox*/
	
	max-width: 900px; 
	margin: auto; /*centers the container*/ 
	/*border:1px solid red; /*hide - for layout only*/
}
.service-flex-item   
{
	padding: 0px 15px 0px 15px;  /*t,r,b,l*/	
	width: 300px; /* so that top text column and bottom line up on small screens*/ 
	/*border:1px solid green; /*hide - for layout only*/
}

/*Care Team page styles ============================================================= */
.team-top-container
{
	max-width: 1200px;
	margin: auto; /*centers the container*/		 
	margin-top: 25px; 
	margin-bottom: 25px;
	padding: 25px 25px 25px 25px;  /*t,r,b,l*/
	background: rgba(255, 255, 255, 0.90); /**/ 
	color: #d54510; 	
}
.provider-flexbox 
{
	display: flex; /*flexbox for contact*/
	flex-wrap: wrap; /*flex - wrap or nowrap*/ 
	justify-content: space-evenly; /*flex - how items are positions in flexbox*/
	/*align-items: center; /*flex - centers each individual box vertically*/
	
	max-width: 1100px; 
	margin: auto; /*centers the nav container*/ 
	background: rgba(255, 255, 255, 1); /**/
	/*margin-bottom: 25px;  /**/
	padding: 25px 0px 25px 0px;  /*t,r,b,l*/	
}
.provider-flex-item
{
	text-align: center; 
	padding: 0px 25px 30px 25px; /*t,r,b,l*/
	/*border:1px solid green; /*hide - for layout only*/
}
.bio
{
	max-width: 580px;
	line-height: 1.6;
	text-align: left; 
}
.picBorder
{
	border: 3px outset lightgray; /* border, pop-out, transparency */ 
	box-shadow: 5px 5px 5px gray;
}
.break /*force flex item to next line*/ 
{
  flex-basis: 100%;
  height: 0;
}
.hr-provider 
{
	width:75%; 
	color: #d6d6d6; 
}
.iframe_container 
{
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}
.responsive-iframe 
{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.team_box 
{
	max-width: 1100px; 
	margin: auto; /*centers the nav container*/ 
	background: rgba(255, 255, 255, 1); /**/
	margin-bottom: 25px;  /*t,r,b,l*/
	padding: 25px 0px 25px 0px;  /*t,r,b,l*/	
}
.care_team 
{	
	margin: 0px 25px 0px 25px;  /*t,r,b,l*/
	/*border:1px solid red; /*hide - for layout only*/	
}
.roles-container 
{
	max-width: 900px; 
	margin: auto; /*centers the container*/ 
	padding: 0px 25px 0px 25px;  /*t,r,b,l*/
	/*border:1px solid red; /*hide - for layout only*/	
}
.center-seal
{
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 167px;
}
/*contact styles =========================================================== */ 
.contact-top-container
{
	max-width: 1100px;
	margin: auto; /*centers the container*/		 
	margin-top: 25px; 
	margin-bottom: 25px;
	padding: 25px 25px 25px 25px;  /*t,r,b,l*/
	background: rgba(255, 255, 255, 0.90); /**/ 
	color: #d54510; 	
}
.contact-flex-container 
{
	display: flex; /*flexbox for contact*/
	flex-wrap: wrap; /*flex - wrap or nowrap*/ 
	justify-content: space-evenly; /*flex - how items are positions in flexbox*/
	/*align-items: center; /*flex - centers each individual box vertically*/
	
	max-width: 960px; 
	margin: auto; /*centers the nav container*/ 
	background: rgba(255, 255, 255, 1); /**/
	margin-bottom: 25px;  /**/
	padding: 35px 0px 35px 0px;  /*t,r,b,l*/	
}
#vertically-center 
{
	align-items: center; /*flex - centers each individual box vertically*/	
}
.contact-flex-item    
{
	font-size: 15px; /**/
	margin: 0px 15px 0px 15px;  /*t,r,b,l*/
	/*border:1px solid red; /*hide - for layout only*/
}
.contact-flex-item > a
{
	text-decoration: none;
	color: #d54510;
}
.contact-pic   
{
	width:100%;
	height: auto; 	
    box-shadow: 7px 7px 5px gray, -4px -4px 5px gray; /* offset-x | offset-y | blur-radius | color */
}
.contact-button  
{
	height: 50px; /*box height*/
	text-align: center; /*center text horizontally*/ 
	font-size: 18px; 
	color: white;
	font-weight: bold;
	cursor: pointer;
	border-radius: 30px; /*round edges of buttom*/
	border: 2px outset white;
	background-image: linear-gradient(to bottom, #ff4e00, #fc9435); /*gradient background*/ 
	padding: 0px 30px 0px 30px;  /*t,r,b,l*/
}
.contact-park  
{
	text-align: center; /*center text horizontally*/
	font-size: 16px; 
	line-height: 1.6;
	font-weight: bold; /**/	
}
#contact-top-spacing
{
	margin: 30px 0px 0px 0px;  /*t,r,b,l*/
}
#locations_spacing    
{
	margin: 0px 0px 25px 25px;  /*t,r,b,l*/
}
#number_spacing    
{
	text-align: right;
	margin: 10px 25px 0px 0px;  /*t,r,b,l*/
}
#contactUs_spacing    
{
	margin: 100px 0px 25px 25px;  /*t,r,b,l*/
}
.hr_spacing_locations     
{
	margin: 35px 0px 35px 0px;  /*t,r,b,l*/
}
#hr_spacing_contact    
{
	margin: 70px 0px 40px 0px;  /*t,r,b,l*/
}
#iq_health    
{
	width: 475px; 
	margin-top: 25px;  /**/
	/*background: rgba(242, 242, 242, 1); /**/
	padding:15px;
}
.iq_health_dec   
{
	text-decoration: underline;
	text-decoration-color: #d54510;
}
#contact_links    
{
	width: 325px; 
	margin-top: 25px;  /**/
	/*background: rgba(242, 242, 242, 1); /**/
	padding:15px;
}
/*contact form styles ====================================================== */
form
{	 
	width:780px;
	/*border:1px solid red; /**/ 
}
input[type=text], select, textarea 
{
  width: 100%;
  padding: 12px 12px 12px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
  box-shadow: 5px 5px 5px #bfbfbf inset;
  box-sizing: border-box; 
}
input[type=submit], [type=reset] 
{
  background-color: #c24b23;
  color: white;
  padding: 8px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
  margin: 0px 5px; 
  font-size: 15px;  
  font-weight: bold; 
}
#required
{
	float: right; 
	font-size:14px;
}
#notice
{
	font-size:13px;
	padding: 0px 15px 0px 15px; /*t,r,b,l*/
}
/*patient styles =========================================================== */ 
.patient-top-container
{
	max-width: 1100px;
	margin: auto; /*centers the container*/		 
	margin-top: 25px; 
	margin-bottom: 25px;
	padding: 25px 25px 25px 25px;  /*t,r,b,l*/
	background: rgba(255, 255, 255, 0.90); /**/ 
	color: #d54510; 	
}
.patient-flex-container 
{
	display: flex; /*flexbox for contact*/
	flex-wrap: wrap; /*flex - wrap or nowrap*/ 
	justify-content: space-evenly; /*flex - how items are positions in flexbox*/
	/*align-items: center; /*flex - centers each individual box vertically*/
	
	max-width: 960px; 
	margin: auto; /*centers the nav container*/ 
	background: rgba(255, 255, 255, 1); /**/
	/*margin-bottom: 25px;  /**/
	padding: 25px 0px 10px 0px;  /*t,r,b,l*/	
	/*border:1px solid green; /*hide - for layout only*/
}
.patient-flex-container2 
{
	display: flex; /*flexbox for contact*/
	flex-wrap: wrap; /*flex - wrap or nowrap*/ 
	justify-content: space-evenly; /*flex - how items are positions in flexbox*/
	align-items: center; /*flex - centers each individual box vertically*/
	
	max-width: 960px; 
	margin: auto; /*centers the nav container*/ 
	background: rgba(255, 255, 255, 1); /**/
	margin-bottom: 25px;  /**/
	padding: 25px 0px 25px 0px;  /*t,r,b,l*/	
}
.patient-flex-item1    
{
	width: 400px;
	font-size: 15px; /**/
	/*border:1px solid red; /*hide - for layout only*/	
}
.patient-flex-item2    
{
	width: 370px; 
	font-size: 15px; /**/
	padding: 0px 15px 0px 15px;  /*t,r,b,l*/
	/*border:1px solid green; /*hide - for layout only*/
}
.patient-flex-item3    
{
	font-size: 15px; /**/
	margin: 0px 15px 0px 15px;  /*t,r,b,l*/
	/*border:1px solid red; /*hide - for layout only*/
}
.p-packet-button  
{
	/*height: 50px; /*box height*/
	text-align: center; /*center text horizontally*/ 
	font-size: 16px; 
	color: white;
	font-weight: bold;
	cursor: pointer;
	border-radius: 30px; /*round edges of buttom*/
	border: 2px outset white;
	background-image: linear-gradient(to bottom, #ff4e00, #fc9435); /*gradient background*/ 
	padding: 7px 15px;  /*t,r,b,l*/	
	margin-top: 10px; 
}
.p-portal-button  
{
	height: 50px; /*box height*/
	text-align: center; /*center text horizontally*/ 
	font-size: 18px; 
	color: white;
	font-weight: bold;
	cursor: pointer;
	border-radius: 30px; /*round edges of buttom*/
	border: 2px outset white;
	background-image: linear-gradient(to bottom, #ff4e00, #fc9435); /*gradient background*/ 
	padding: 0px 30px 0px 30px;  /*t,r,b,l*/
}
.p-schedule-button  
{
	height: 50px; /*box height*/
	text-align: center; /*center text horizontally*/ 
	font-size: 18px; 
	color: white;
	font-weight: bold;
	cursor: pointer;
	border-radius: 30px; /*round edges of buttom*/
	border: 2px outset white;
	background-image: linear-gradient(to bottom, #ff4e00, #fc9435); /*gradient background*/ 
	padding: 0px 15px 0px 15px;  /*t,r,b,l*/
}
.app-button
{
	width: 130px; 
	margin-top: 15px;  
}
.patient-flex-item2 > ul > li > a 
{
	text-decoration: none;
	color: #d54510; 	
}
.patient-pic   
{
	width:100%;
	height: auto; 	
    box-shadow: 7px 7px 5px gray, -4px -4px 5px gray; /* offset-x | offset-y | blur-radius | color */
}
#p-forms-spacing    
{
	margin: 15px 0px 35px 25px;  /*t,r,b,l*/
}
#p-resources-spacing    
{
	margin: 70px 0px 30px 25px;  /*t,r,b,l*/
}
#packet-padding    
{
	padding: 0px 15px 20px 15px;  /*t,r,b,l*/
}
#p-pic-padding    
{
	padding: 0px 15px 0px 15px;  /*t,r,b,l*/
}
#iq_health_p    
{
	width: 375px; 
	margin-top: 25px;  /**/
	/*background: rgba(242, 242, 242, 1); /**/
	padding:15px;
}
#wellness-pic    
{
	width: 425px; 
	margin-top: 25px;  /**/
	/*background: rgba(242, 242, 242, 1); /**/
	
	position: relative; /*text over pic*/
	text-align: center; /*text over pic*/
	color: white; /*text over pic*/
}
.top-left 
{
	position: absolute; /*text over pic*/
	top: 20px; /*text over pic*/
	left: 30px; /*text over pic*/
	font-size: 21px;
}
.patient-well-button  
{
	position: absolute; /*text over pic*/
	bottom: 48px; /*text over pic*/
	left: 66px; /*text over pic*/
	
	height: 35px; /*box height*/
	text-align: center; /*center text horizontally*/ 
	font-size: 15px; 
	color: #d54510;
	font-weight: bold;
	cursor: pointer;
	border-radius: 10px; /*round edges of buttom*/
	border: 0px;
	background: rgba(255, 255, 255, 1);
	padding: 0px 35px 0px 35px;  /*t,r,b,l*/	
}
.pat_relative_box
{
	position: relative;
	/*border: 1px solid red; /**/
}
.thumbnail 
{
	width: 45px; /**/
	position: absolute;
	right: 45px;
}
.thumbnail_text
{
	color: #d54510;
	display: inline; /**/
	font-size: 11px; 
	position: absolute;
	right: 0px; 
	margin: 7px 0px 0px 0px; /*t,r,b,l*/	
	width: 45px; 
	/*border: 1px solid green; /**/
}
.zoom /* not currently being used on page */
{
	transition: transform .2s; /* Animation */
}
.zoom:hover 
{
	transform: scale(10); /* zoom size */
}
.go_box
{	
	padding: 5px 5px;  /*t,r,b,l*/	
	margin: 0px 0px 10px 0px;  /*t,r,b,l*/
	background: linear-gradient(to bottom right, #fb953c, #ef5822); /*gradient background*/ 	
	border: 2px outset white;
}
.go_text
{
	font-size: 16px; /**/
	color: white; 
	font-weight: bold;
	text-decoration: none; 		
}

/*Established patients styles =========================================================== */ 
.ePatient-flexbox 
{
	display: flex; /*flexbox for contact*/
	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: 960px; 
	margin: auto; /*centers the nav container*/ 
	
	margin-bottom: 25px;  /**/
	padding: 25px 0px 0px 0px;  /*t,r,b,l*/	
	/*border:1px solid red; /*hide - for layout only*/
}
.ePatient-item1    
{
	display: flex;
    justify-content: center;
    align-items: center;
	
	width: 200px; /**/ 
	height: 100px; 
	font-size: 18px; /**/
	color: white; 
	font-weight: bold;
	text-decoration: none; 	
	text-align: center;
	padding: 0px 25px;  
	margin: 0px 15px 45px 15px; /*t,r,b,l*/
	background: linear-gradient(to bottom right, #fb953c, #ef5822); /*gradient background*/ 	
	box-shadow: 0px 0px 4px 6px rgba(0, 0, 0, 0.2); /* offset-x | offset-y | blur-radius | spread-radius | color */
	/*border:1px solid green; /*hide - for layout only*/
}
.appt-top-box
{
	max-width: 1100px;
	margin: auto; /*centers the container*/		 
	margin-top: 25px; 
	margin-bottom: 25px;
	padding: 25px 25px 65px 25px;  /*t,r,b,l*/
	background: rgba(255, 255, 255, 0.90); /**/ 
	color: #d54510; 	
}
.appt-flexbox 
{
	display: flex; /*flexbox for contact*/
	flex-wrap: wrap; /*flex - wrap or nowrap*/ 
	justify-content: space-evenly; /*flex - how items are positions in flexbox*/
	/*align-items: center; /*flex - centers each individual box vertically*/
	
	max-width: 960px; 
	margin: auto; /*centers the nav container*/ 
	background: rgba(255, 255, 255, 1); /**/
	/*margin-bottom: 25px;  /**/
	padding: 25px 0px 25px 0px;  /*t,r,b,l*/	
}
.appt-flex-item1    
{
	width: 90%;
	font-size: 16px; /**/
	/*border:1px solid red; /*hide - for layout only*/	
}
#appt-padding    
{
	padding: 0px 15px 20px 15px;  /*t,r,b,l*/
}
#appt-spacing    
{
	margin: 70px 0px 30px 25px;  /*t,r,b,l*/
	/*margin: 15px 0px 35px 25px;  /*t,r,b,l*/
}
#office-spacing    
{
	margin: 70px 0px 30px 25px;  /*t,r,b,l*/
}
.line-height6
{
	line-height: 1.6; 
}

/*wellness styles =========================================================== */ 
.wellness-top-container
{
	max-width: 1100px;
	margin: auto; /*centers the container*/		 
	margin-top: 25px; 
	margin-bottom: 25px;
	padding: 25px 25px 25px 25px;  /*t,r,b,l*/
	background: rgba(255, 255, 255, 0.90); /**/ 
	color: #d54510; 	
}
.wellness-flex-container 
{
	display: flex; /*flexbox for contact*/
	flex-wrap: wrap; /*flex - wrap or nowrap*/ 
	justify-content: space-evenly; /*flex - how items are positions in flexbox*/
	/*align-items: center; /*flex - centers each individual box vertically*/
	
	max-width: 960px; 
	margin: auto; /*centers the nav container*/ 
	background: rgba(255, 255, 255, 1); /**/
	/*margin-bottom: 25px;  /**/
	padding: 25px 0px 25px 0px;  /*t,r,b,l*/	
	/*border:1px solid red; /*hide - for layout only*/	
}
.wellness-flex-item    
{
	width: 400px;
	font-size: 15px; /**/
	padding: 0px 10px 0px 10px;  /*t,r,b,l*/
	/*border:1px solid green; /*hide - for layout only*/	
}
.wellness-flex-item2    
{
	width: 80%;
	font-size: 15px; /**/
	/*border:1px solid green; /*hide - for layout only*/	
}
.wellness-flex-item3    
{
	width: 400px;
	font-size: 15px; /**/
	padding: 0px 10px 0px 10px;  /*t,r,b,l*/
	margin: 30px 0px 0px 0px;  /*t,r,b,l*/
	/*border:1px solid green; /*hide - for layout only*/	
}
.wellness-pic   
{
	max-width: 100%; 
	height: auto; 	
    box-shadow: 7px 7px 5px gray, -4px -4px 5px gray; /* offset-x | offset-y | blur-radius | color */
}
.layered-container /*text over pic*/
{
  max-width: 960px; 
  margin: auto; /*centers the container*/
  position: relative;  
  color: white;
  /*border:1px solid red; /*hide - for layout only*/	
}
.layer-text /*text over pic*/
{
  position: absolute;
  top: 30px;
  left: 70px;
  line-height: 1.6;
}
.layered-box /*text over pic*/
{
  position: absolute;
  top: 25px;
  right: 25px;
  background: rgba(38, 38, 38, 0.75); /**/
  width: 250px; 
  height: 300px; 
  color: white;
}
.bullets > li  
{
  padding-bottom: 20px;   
}
.bullets > li > a 
{
  color: white;
  text-decoration: none; /**/
}
.bullets > li > a:hover 
{
  color: white;
  text-decoration: underline; /**/  
}
.sources-outer-container 
{
	max-width: 960px; 
	margin: auto; /*centers the nav container*/ 
	padding: 50px 0px 25px 0px;  /*t,r,b,l*/	
	/*border:1px solid blue; /*hide - for layout only*/	
}
.sources-flex-container 
{
	display: flex; /*flexbox for contact*/
	flex-wrap: wrap; /*flex - wrap or nowrap*/ 
	justify-content: space-evenly; /*flex - how items are positions in flexbox*/
	/*align-items: center; /*flex - centers each individual box vertically*/
	
	max-width: 960px; 
	margin: auto; /*centers the nav container*/ 
	/*background: rgba(255, 255, 255, 1); /**/
	/*margin-bottom: 25px;  /**/
	padding: 25px 0px 25px 0px;  /*t,r,b,l*/	
	/*border:1px solid red; /*hide - for layout only*/	
}
.sources-flex-item    
{
	width: 400px;
	font-size: 10px; /**/
	/*border:1px solid green; /*hide - for layout only*/
}
.paragraph-padding
{
	padding: 25px 25px 45px 25px;  /*t,r,b,l*/
	/*border:1px solid green; /*hide - for layout only*/
}
.float-pic2  
{
  float: right;
  width:35%;
  height:auto;
  box-shadow: 7px 7px 5px gray, -4px -4px 5px gray; /* offset-x | offset-y | blur-radius | color */
  margin: 15px 0px 15px 15px;  /*t,r,b,l*/
}
.full-pic  
{
  width:100%;
  height:auto;
  box-shadow: 7px 7px 5px gray, -4px -4px 5px gray; /* offset-x | offset-y | blur-radius | color */
  margin: 35px 0px 35px 0px;  /*t,r,b,l*/  
}
#float-pic  
{
  float: right;
  width:35%;
  height:auto;
  margin: 0px 0px 15px 15px;  /*t,r,b,l*/
  box-shadow: 7px 7px 5px gray, -4px -4px 5px gray; /* offset-x | offset-y | blur-radius | color */
}
#exercise-pic  
{
  float: right;
  width:45%;
  height:auto;
  margin: 0px 0px 15px 15px;  /*t,r,b,l*/
  box-shadow: 7px 7px 5px gray, -4px -4px 5px gray; /* offset-x | offset-y | blur-radius | color */
}
#list-spacing-w > li  
{
  padding-bottom: 20px;   
}
#hr_spacing_wellness     
{
	margin: 35px 0px 35px 0px;  /*t,r,b,l*/
}
#hr_spacing_stretching     
{
	margin: 85px 0px 85px 0px;  /*t,r,b,l*/
}
#counseling-top-box
{
	width: 960px; 
	padding: 25px 25px 25px 25px;  /*t,r,b,l*/
	/*border:1px solid green; /*hide - for layout only*/
}

/*bio styles =========================================================== */
.bio_topBox
{
	max-width: 1100px;
	margin: auto; /*centers the container*/		 
	margin-top: 25px; 
	margin-bottom: 25px;
	padding: 45px;  /*t,r,b,l*/
	background: rgba(255, 255, 255, 0.90); /**/ 
	color: #d54510; 	
}
.bio_flexBox 
{
	display: flex; /*flexbox for contact*/
	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: 960px; 
	margin: auto; /*centers the nav container*/ 
	background: rgba(255, 255, 255, 1); /**/
	margin-bottom: 25px;  /**/
	padding: 35px 35px;  /*t,r,b,l*/	
}
.bio_box
{
	max-width: 620px;	
	padding: 0px 15px; /**/ 
	/*border:1px solid red; /*hide - for layout only*/
}
.bio_title
{
	margin-top: 0px; 
	padding: 0px 15px;
	/*border:1px solid green; /*hide - for layout only*/
}
.bio_text
{
	line-height: 1.6;
	text-align: left; 
	padding: 0px 15px;
	/*border:1px solid green; /*hide - for layout only*/
}
.bio_img
{
	border: 1px outset lightgray; /* border, pop-out, transparency */ 
	box-shadow: 5px 5px 5px 0px gray; /*x, y, blur, spread*/
	margin-bottom: 15px; 
}

/*vaccine styles =========================================================== */
.vaccine-top-container
{
	max-width: 1100px;
	margin: auto; /*centers the container*/		 
	margin-top: 25px; 
	margin-bottom: 25px;
	padding: 25px 25px 65px 25px;  /*t,r,b,l*/
	background: rgba(255, 255, 255, 0.90); /**/ 
	color: #d54510; 	
}
.vaccine-flex-container 
{
	display: flex; /*flexbox for contact*/
	flex-wrap: wrap; /*flex - wrap or nowrap*/ 
	justify-content: space-evenly; /*flex - how items are positions in flexbox*/
	/*align-items: center; /*flex - centers each individual box vertically*/
	
	max-width: 960px; 
	margin: auto; /*centers the nav container*/ 
	background: rgba(255, 255, 255, 1); /**/
	/*margin-bottom: 25px;  /**/
	padding: 25px 0px 25px 0px;  /*t,r,b,l*/	
}
.vaccine-flex-item1    
{
	width: 90%;
	font-size: 15px; /**/
	/*border:1px solid red; /*hide - for layout only*/	
}
#vaccine-padding    
{
	padding: 0px 15px 20px 15px;  /*t,r,b,l*/
}
#v-forms-spacing    
{
	margin: 15px 0px 35px 25px;  /*t,r,b,l*/
}

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




/* media queries - to change layout on small devices/viewports ============== */
/* put media queries at the end of your "cascading" stylesheet ============== */
@media all and (max-width: 1225px) 
{
	.header-flex-container /* header */
	{
		height: 144px; /*so navbar and logo don't collide*/
		/*height: 100%; /*so navbar and logo don't collide - THIS BROKE NAV BAR ON NEWEST FIREFOX!!!*/		
	} 
	.nav-flex-container /* header */
	{
		justify-content: space-around; 
		max-width: 100%; /*60% emulates 960px || 73% emulates 1366px*/ 		
	} 
}
@media all and (max-width: 958px) 
{
	.home-text /*home page*/ 
	{
		width:100%; 
	}
}
@media all and (max-width: 950px) 
{
	.layered-box /*wellness page*/
	{
	  height: 250px; 
	}	
}
@media all and (max-width: 850px) 
{
	.wellness-pic /*wellness page*/
	{
	  display: none; /**/
	}
	.layer-text /*wellness page*/
	{
	  display: none; 
	}
	.layered-box /*wellness page*/
	{
	  position: relative; /**/
	  top: 0px; /**/
	  right: 0px; /**/
	  width: 100%;  /**/
	  height: auto;  /**/
	  color: white; /**/	  
	  background: #595959; /* For browsers that do not support gradients */
	  background-image: linear-gradient(#595959, #333333); /**/
	}	
}
@media all and (max-width: 760px) 
{
	body /* body */
	{ 
		background-image: url('../images/sunset4.png'); /*adjust background image for small screens*/  
	} 
}
@media all and (max-width: 590px) 
{
	.banner
	{			
		height:65px; 		
	}
}
@media all and (max-width: 500px) 
{
	#number_spacing /*contact page*/   
	{
		text-align: center;
		margin: 10px 0px 45px 0px;  /*t,r,b,l*/
	}
	.thumbnail 
	{
		float: none; /**/
	}	
}
@media all and (max-width: 460px) 
{
	.thumbnail 
	{
		position: static;
		right: 0px;
		margin-top: 5px; 
	}
	.thumbnail_text
	{
		position: relative;
		bottom: 15px; 
	}
	.hide { display: initial; } /* adds break line */
}
@media all and (max-width: 405px) 
{
	.header-flex-container /* header */
	{
		justify-content: center; 
		height: 216px; /*so navbar and logo don't collide*/
	}
	.number-container /* header */
	{ 
		text-align: center; 
	}
}
@media all and (max-width: 960px) 
{
	#mobile_gap
	{
		padding-top: 25px; 
	}
	.bio_flexBox 
	{		
		flex-wrap: wrap; 
	}
}