/*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: 'Zen Antique', serif !important; /**/
	font-family: serif !important; /**/
}
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;
}
a 
{
  color: #4f4f4f;
}

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

/*multi-purpose classes ====================================================== */
.center { text-align: center; }
.flex-center { display:flex; justify-content:center; align-items:center; }
.font-14 { font-size: 14px; }
.font-16 { font-size: 16px; }
.font-18 { font-size: 18px; }
.font-20 { font-size: 20px; } 
.font-21 { font-size: 21px; }
.font-22 { font-size: 22px; }  
.font-24 { font-size: 24px; } 
.font-32 { font-size: 32px; } 
.lh_6 { line-height: 1.6; }
.text-color { color: #4f4f4f; }
.black-color { color: #000000; }
.white-color { color: #ffffff; }
.color-theme { color: #a30000; }

.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 ==================================================== */
.logo_box
{
	max-width: 270px;		
	padding: 7px 10px 0px 10px;
	background-color: white; /**/
	float: left; /**/
	position: absolute; /*so it doesn't take up space*/	
	box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.4);/*x,y,blur,spread,color*/
}
.logo
{
	width: 100%;
	height: auto; 
}
.call_box
{
	text-align: right;
	background-image: linear-gradient(to right, #a30000, #a30000, #850000, #850000);
	padding-right: 15px; 
}
.call
{	
	font-size: 21px;
	color: #bccee9; /* #601218 #2947b3 #bccee9 */
	font-weight: bold; 	
	margin: 0px 10px; /**/
	/*border:1px solid green; /*hide - for layout only*/	
}
.header-button  
{
	text-align: center; /*center text horizontally*/ 
	font-size: 15px; 
	color: #2947b3;
	font-weight: bold; /**/
	cursor: pointer;
	border-radius: 30px; /*round edges of buttom*/
	border: 2px outset #2947b3;
	background-image: linear-gradient(to bottom, #ffffff, #d6d6d6); /*gradient background*/ 
	padding: 3px 10px;  /*t,r,b,l*/
	margin: 7px 5px; /**/
}
.nav-flex-container 
{
	display: flex; /*flexbox for navigation bar*/
	flex-wrap: wrap; /*flex - wrap or nowrap*/ 
	justify-content: flex-end; /*flex - how items are positions in flexbox*/
	
	max-width: 100%; /*60%=960px, 63%=1200px, 72%=1366px*/ 
	margin: auto; /*centers the nav container*/ 
	padding: 5px 0px 5px 0px; 
	list-style: none; /*remove bullet points*/ 
	align-items: center; /*centers each individual box vertically*/
	background-color: #a30000; /*#0f00b8; /*#47afff;*/
	/*border:1px solid yellow; /*hide - for layout only*/	
}
.nav-flex-container > a 
{
	width: 160px; /*box width*/ 	
	text-align: center; /*center text horizontally*/ 	
	font-size: 24px; 
	color: white;
	font-weight: bold;
	text-decoration: none; /*remove underline*/ 
	padding: 5px 0px 5px 0px; /*t,r,b,l*/
	margin: 5px 30px 5px 30px; /* this is for responsive design - see @media queries below */ 
	/*border:1px solid yellow; /**/
}


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


/*Home page styles =========================================================== */ 
.home-flex-container 
{
	display: flex; /*flexbox for homepage*/
	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*/ 
	/*border:1px solid red; /*hide - for layout only*/
	/*border-bottom: 3px outset gray; /* border, pop-out, transparency */ 
	
	/*background: rgb(255,255,255); /**/
	/*background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(150,150,150,1) 25%, rgba(161,161,161,1) 75%, rgba(255,255,255,1) 100%); /**/ 

}
.main-pic
{
	width: 100%; /*100%;*/
	height: auto;	
	/*border-bottom: 3px outset gray; /* border, pop-out, transparency */ 	
}


/*welcome styles */
.welcome-flex-container 
{
	display: flex; /*flexbox*/
	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: 100%; /**/
	/*border:1px solid red; /*hide - for layout only*/
}
.welcome-flex-item
{
	width: 733px; /**/
	text-align: center;/**/ 
	padding: 35px 25px 35px 25px; /*t,r,b,l*/
	/*border:1px solid green; /*hide - for layout only*/
}

/*middle section styles */
.middle-flex-container 
{
	display: flex; /*flexbox*/
	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: 100%; /**/
	/*border:1px solid red; /*hide - for layout only*/
}
.middle-flex-item
{
	max-width: 400px; /**/
	min-height: 200px; 
	text-align: center; /**/
	padding: 35px 55px 35px 55px; /**/
	/*border:1px solid green; /*hide - for layout only*/
}
.middle-flex-item2
{
	max-width: 600px; /**/
	min-height: 200px; 
	text-align: center; /**/
	padding: 35px 55px 35px 55px; /**/
	/*border:1px solid green; /*hide - for layout only*/
}
.button  
{
	height: 38px; /*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, #2947b3, #0d173a); /*gradient background*/ 
	padding: 0px 20px 0px 20px;  /*t,r,b,l*/
}

/*Contact styles */
.color-box
{
	background-color: #e8e8e8; 
	padding-top: 15px;  
}
.contact-flex-container 
{
	display: flex; /*flexbox*/
	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: 100%; /**/
	/*border:1px solid red; /*hide - for layout only*/
}
.contact-flex-item
{
	text-align: center;
	padding: 0px 55px 35px 55px; /*t,r,b,l*/
	width: 200px;
	/*border:1px solid green; /*hide - for layout only*/	
}
.contact-flex-item2
{
	text-align: center;
	padding: 15px 55px 35px 55px; /*t,r,b,l*/
	max-width: 600px;	
	/*border:1px solid green; /*hide - for layout only*/	
}
.contact_button
{
	font-size: 16px; 
	font-weight: bold;
	line-height: 2.4;
	color: white;
	padding: 0px 20px; 
	background-color: #3b3b3b; /**/
	border-radius: 15px;
	margin: 0px auto;
	/*border: 2px solid white; /**/
}
#map-shadow
{
	box-shadow: 7px 7px 5px gray, -4px -4px 5px gray; /* offset-x | offset-y | blur-radius | color */
}

/* Physicians page styles ============================================================= */
.provider-flex-container 
{
	display: flex; /*flexbox*/
	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: 0px 0px 75px 0px; /*t,r,b,l*/ 
	background-color: rgba(255, 255, 255, 1); 
	/*border:1px solid red; /*hide - for layout only*/
}
.provider-flex-item
{
	/*width: 150px; /**/
	text-align: center;
	padding: 35px; /**/
	background-color: rgba(245, 245, 245, 1); 
	/*border:1px solid red; /*hide - for layout only*/
}
.provider-pad
{
	padding: 25px 55px; /**/
	/*border:1px solid lime; /*hide - for layout only*/
}
.picBorder
{
	width: 200px; 
	height: auto; 
	border: 3px outset lightgray; /* border, pop-out, transparency */ 
	vertical-align: bottom; /*removes gap/space on bottom of image*/
}
#provider
{
	display:flex;
	justify-content:center;
	align-items:center;	
	padding: 35px 10px 15px 10px; /*t,r,b,l*/ 
}


/*Dr Bio page styles ============================================================= */
.dr-container
{
	margin: auto; /*centers the container*/ 	
	max-width: 1200px; /**/
	margin-top: 50px; 
	background-image: linear-gradient(90deg, rgba(219, 219, 219, 0), rgba(219, 219, 219, 1));
	overflow: auto; /*clearfix = makes border go around floating images*/
	/*border:1px solid red; /*hide - for layout only*/ 
}
.dr-pic
{
	float: left; 
	margin: 25px; 
}
.dr-text
{
	padding: 0px 25px 25px 25px; /*t,r,b,l*/ 
	line-height: 1.4; 
}
.pic-shadow 
{
	box-shadow: 10px 10px 5px gray;
} 


/*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; /**/
	/*border:1px solid blue; /*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*/	
	margin: 0px 15px 0px 15px;  /*t,r,b,l*/	
	line-height: 1.6; /**/
	/*width: 300px; /* so that top text column and bottom line up on small screens*/ 
	/*border:1px solid green; /*hide - for layout only*/
}
#service-LH
{
	line-height: 2.0; 
}


/*Patient page styles ============================================================= */
.patient-outer-box
{
	max-width: 1200px;
	margin: auto; /*centers the container*/		 
	margin-top: 25px; 
	margin-bottom: 25px;
	padding: 25px 25px 25px 25px;  /*t,r,b,l*/
	/*border:1px solid red; /*hide - for layout only*/
}
.new_p_box
{
	padding: 0px 85px; 
}
.patient_box
{
	/*max-width: 1025px; /**/
	margin: auto; 
	padding: 0px 0px 0px 15px; 
	/*border:1px solid red; /*hide - for layout only*/
}
.p_title
{
	text-shadow: 5px 5px 8px #cfcfcf;
}
.patient-flex
{
	display: flex; /*flexbox for logo*/
	flex-wrap: wrap; /*flex - wrap or nowrap*/ 
	justify-content: space-evenly; /*flex - how items are positions in flexbox*/
	 
	max-width: 100%; 
	margin: auto; /*centers the container*/ 
	/*border:1px solid red; /*hide - for layout only*/
} 
.p_flex_item1
{
	width: 575px; /*60%*/ 
	box-sizing: border-box;
	padding: 0px 15px 0px 15px; 
	/*border:1px solid green; /*hide - for layout only*/	
}
.p_flex_item2
{
	width: 350px; /*40*/
	padding: 45px 25px 10px 30px;
	box-sizing: border-box;
	/*border:1px solid green; /*hide - for layout only*/	
}
.p_flex_item3
{
	width: 400px; /*40*/
	padding: 20px;
	box-sizing: border-box;
	/*border:1px solid green; /*hide - for layout only*/		 
}
.p_flex_item4
{
	width: 525px; /*60%*/ 
	box-sizing: border-box;
	padding: 0px 15px 0px 15px; 
	/*border:1px solid green; /*hide - for layout only*/	
}
.patient-outer-box, .patient_box, .patient-flex, .p_flex_item1, .p_flex_item2, .p_flex_item3, .p_flex_item4 
{
	/*border:1px solid red; /*hide - for layout only*/
}

.app-button
{
	width: 130px; 
}
.hr_gray 
{ 
	border-top: 2px solid #e8e8e8; 
	border-bottom: 2px solid #f8f8f8; 
	width:90%; 
	margin: 50px 0px 50px 0px; 
}
#download_pp 
{ 
	padding: 15px 15px 5px 0px; 
}
.p_image_box1
{
	max-width:400px;
	margin: 0px 25px 25px 65px;
	float: right;
}
.patient_image1
{
	width:100%; 
	height:auto;	
}
.patient_image2
{
	width:100%; 
	height:auto;	
	background-color: #e5f3ff;
	padding: 30px; /**/
	box-sizing: border-box;
}
#bill-pay 
{ 	
	text-align: right; /**/
	padding: 0px 0px 0px 0px; 
}
.color
{	
	color: #2744ab; 
	text-decoration: none;
	font-weight: bold; 
	padding: 7px; 
	border:3px solid #2744ab;
	background-color: #eef1fb; 
}
.color:hover 
{	
	background-color: #dee3f7; 
}
.shadow_border
{
	box-shadow: 7px 7px 5px gray, -4px -4px 5px gray; /* offset-x | offset-y | blur-radius | color */
}


/* media queries - to change layout on small devices/viewports ============== */
/* put media queries at the end of your "cascading" stylesheet ============== */
@media all and (max-width: 1345px) 
{
	.logo_box
	{
		float: none; /**/	
		position: static; /*so it it takes up space again*/	
		margin: auto; /*center*/
		box-shadow: none;
	}
	.call_box
	{
		text-align: center;
		background-color: white;
		background-image: none;
		padding-right: 0px; 
	}
	.nav-flex-container 
	{
		justify-content: center; 
	}	
	.call
	{
		color: #520000; 
		display: block; /*so it jumps to the next line*/		
	}
}
@media all and (max-width: 1106px) 
{
	.nav-flex-container > a 
	{
		width: 120px; /*box width*/ 	
	}
}
@media all and (min-width: 710px) and (max-width: 900px) /*header*/ 
{
	.mobile_break 
	{
	  flex-basis: 100%;
	  height: 0;
	}
}
@media all and (max-width: 462px) 
{
	.call
	{
		white-space: nowrap;
	}
}
@media all and (max-width: 564px) 
{
	.dr-pic
	{
		float: none; 
	}
}
@media all and (max-width: 1248px) /**/
{
	.new_p_box
	{
		padding: 0px 0px; 
	}
}
@media all and (max-width: 654px) 
{
	.p_image_box1
	{
		float: none;
		margin: auto;
	}	
}
@media all and (max-width: 974px) /**/
{
	.p_flex_item2
	{
		padding: 0px; /**/
	}
}