/*
 *
 * ==========
 * UNIVERSAL STYLES 
 * ==========
 * 
 */

* {
	margin: 0 auto;
	padding: 0;
	box-sizing: border-box;
	font-style: normal;
	font-weight: normal;
}

html, body {
	position: relative;
	width: 100%;
	font-family: 'Gudea', "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 20px;
	line-height: 150%;
	font-weight: 400;
	color: #3f1d12;
	-webkit-font-smoothing: antialiased;
	background-color: #fdf9eb;
	scroll-behavior: smooth;
}
h1, h2, h3, h4, h5, h6 {
	font-family: 'Kreon', Georgia, Times, serif;
	font-weight: 400;
	line-height: 100%;
	color: #1e5637;
	text-transform: uppercase;
	text-shadow: 2px 2px #f6eed2, 4px 4px #eae3ca;	
}
h3 {
	font-size: 36px;
	line-height: 116%;
	margin-bottom: 25px;
}
p {
	margin: 0 auto;
	max-width: 900px;
	text-align: left;
}
ul {
	max-width: 400px;
	list-style: none;
	padding: 0;
	margin: 0;
}
li {
	padding-bottom: 20px;
}
label {
	/* Uniform size & alignment */
	display: block;
	padding-bottom: 5px;
}
input, textarea, select {
	font-family: 'Gudea', "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 18px;
	width: 100%;
	height: 40px;
	max-width: 400px;
	padding: 0 10px;
	box-sizing: border-box;
	border: 1px solid #3F1D12;
	border-radius: 5px;
	background-color: white;
}
input:focus,
textarea:focus,
select:focus {
	border: 3px solid #B03228;
}
button {
	cursor: pointer;
	width: auto;
	margin: 0;
	padding: 13px 15px;
	border-radius: 4px;
	border-style: none;
	color: #fdf9eb;
	background-color: #E3655B;
	font-family: 'Gudea', "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 18px;
	font-weight: 700;
}
button:hover {
	cursor: pointer;
	color: #fdf9eb;
	border-style: none;
	background-color: #B03228;
}
a,
a:hover {
	color: #fdf9eb;
}
a {
	cursor: pointer;
	text-decoration: underline;
}
a:hover {
	text-decoration: none;
}
.relative {
	position: relative;
}
.absolute {
	position: absolute;
}
.button {
	display: inline-block;
	padding: 9px 18px;
	margin: 0 0 0 10px;
	border-radius: 4px;
	border-style: none;
	color: #fdf9eb;
	background-color: #E3655B;
	font-family: 'Gudea', "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 18px;
	font-weight: 700;
	text-decoration: none;
}
.button:hover {
	cursor: pointer;
	color: #fdf9eb;
	background-color: #B03228;
	text-decoration: none;
}

@media only screen and (max-width: 775px) {
	p, ul, li {
		font-size: 18px;
	}
}	
@media only screen and (max-width: 650px) {
	button {
		/*padding: 10px 10px;
		font-size: 18px;*/
	}
}	


/*
 *
 * OVERLAY
 *
 */

#overlay {
	display: none;
	/*position: absolute;*/
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
	background-color: rgba(63,29,18,0.85); /*dim the background*/
}
#overlay:target {
	display: block;
}
#overlay .form-container {
	/*position: relative;*/
	width: 90%;
	max-width: 750px;
	margin-top: 50px;
	margin-bottom: 50px;
	padding: 70px;
	background-color: #fdf9eb;
}
#overlay h2 {
	font-size: 60px;
}
#overlay h2, p {
	margin-bottom: 25px;
}
#overlay .close {
	position: absolute;
	top: 15px;
	right: 15px;
}

@media only screen and (min-width: 801px) and (max-width: 1220px) {
	#overlay h2 {
		font-size: 48px;
		line-height: 42px;
	}
	#overlay .form-container {
		padding: 70px 50px;
	}
}	
@media only screen and (max-width: 800px) {
	#overlay h2 {
		font-size: 48px;
		line-height: 42px;
	}
	#overlay .form-container {
		padding: 70px 30px;
	}
}


/*
 *
 * HEADER
 *
 */

header {
	display: block;
	width: 100%;
	height: 100px;
	padding: 0 100px;
}
header button {
	/*cursor: pointer;
	width: auto;*/
	margin: 10px 0 10px 10px;
	/*padding: 13px 15px;
	border-radius: 4px;
	border-style: none;
	color: #fdf9eb;
	background-color: #E3655B;
	font-family: 'Gudea', "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 18px;
	font-weight: 700;*/
}
/*header button:hover {
	cursor: pointer;
	color: #fdf9eb;
	border-style: none;
	background-color: #B03228;
}*/
header .button-group {
	/*position: relative;*/
	display: flex;
	align-items: center;
	justify-content: flex-end;
	height: 100%;
}

@media only screen and (min-width: 670px) and (max-width: 1000px) {
	header {
		height: 80px;
		padding: 0 50px;
	}
	header .button-group {
		justify-content: center;
	}
}	
@media only screen and (min-width: 450px) and (max-width: 669px) {
	header {
		height: 80px;
		padding: 0 10px;
	}
	header button {
		padding: 10px 10px;
		margin: 0 5px;
		font-size: 14px;
	}
	header .button {
		padding: 4px 10px 3px 10px;
		margin: 0 5px;
		font-size: 14px;
	}
	header .button-group {
		justify-content: center;
	}
}	
@media only screen and (max-width: 449px) {
	header {
		height: 80px;
		padding: 0 10px;
	}
	header button {
		padding: 10px 10px;
		margin: 4px 5px;
		font-size: 14px;
		line-height: 18px;
		text-align: center;
	}
	header .button {
		padding: 8px 10px 7px 10px;
		margin: 0 5px;
		font-size: 14px;
		line-height: 18px;
		text-align: center;
	}
	header .button-group {
		justify-content: center;
	}
}	


/*
 *
 * MARQUEE
 *
 */

#marquee {
	/*position: relative;*/
}
#marquee .container {
	width: 100%;
	margin: 0 auto;
	padding: 0 100px;
}
#marquee .marquee-frame {
	/*position: relative;*/
	width: 100%;
	margin: 0 auto;
	padding: 6%;
}
#marquee .inner-frame {
	/*position: absolute;*/
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	border: 2px solid #1e5637;
}
#marquee .marquee-bkgd {
	/*position: absolute;*/
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	top: 4.75%;
	width: 94%;
	height: 100%;
	text-align: center;	
	background: url("marquee-bkgd.jpg") top left repeat;
	background-color: #fdf9eb;
}
#marquee .hero-img {
	/*position: absolute;*/
	top: -10px;
	right: -35px;
	width: 65%;
	height: auto;
	z-index: 0;
}
#marquee .logo {
	/*position: relative;*/
	width: 19%;
	min-width: 150px;
	height: auto;
	margin-bottom: 20%;
}
#marquee h1 {
	/*position: relative;*/
	width: 55%;
	margin: 0;
	font-size: 4vw;
	line-height: 112%;
	text-align: left;
}

@media only screen and (min-width: 601px) and (max-width: 900px) {
	#marquee .container {
		padding: 0 50px;
	}
	#marquee .hero-img {
		top: -10px;
		right: -25px;
		width: 70%;
	}
		#marquee .logo {
		margin-bottom: 25%;
	}
		#marquee h1 {
		width: 65%;
		font-size: 5vw;
		line-height: 112%;
	}
}	
@media only screen and (min-width: 451px) and (max-width: 600px) {
	#marquee .container {
		padding: 0 37px;
	}
	#marquee .hero-img {
		top: 30px;
		right: -15px;
		width: 75%;
	}
	#marquee .logo {
		margin-bottom: 30%;
	}
	#marquee h1 {
		width: 75%;
		font-size: 6vw;
		line-height: 112%;
	}
}	
@media only screen and (max-width: 450px) {
	#marquee .container {
		padding: 0 25px;
	}
	#marquee .hero-img {
		top: 60px;
		right: -15px;
		width: 75%;
	}
	#marquee .logo {
		margin-bottom: 35%;
	}
	#marquee h1 {
		width: 75%;
		font-size: 6vw;
		line-height: 112%;
	}
}	


/*
 *
 * INTRODUCTION
 *
 */

#intro {
	/*position: relative;*/
	width: 75%;
	max-width: 1000px;
	padding: 75px 0;
	margin: 0 auto;
	font-family: 'Kreon', Georgia, Times, serif;
	font-size: 30px;
	line-height: 160%;
	text-align: center;
}

@media only screen and (min-width: 726px) and (max-width: 1220px) {
	#intro {
		font-size: 24px;
		line-height: 160%;
	}
}	
@media only screen and (max-width: 725px) {
	#intro {
		font-size: 20px;
		line-height: 160%;
	}
}	


/*
 *
 * SERVICES
 *
 */

#services {
	/*position: relative;*/
	width: 100%;
	max-width: 1480px;
	padding: 0 100px;
}
#services .services-content {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	width: 100%;
	margin: 0 auto;
	padding: 75px 0 50px 0;
}
#services .service {
	/*position: relative;*/
	flex-grow: 0.25;
	padding: 0 25px;
	width: 25%;
}
#services .icon {
	width: 40px;
	height: auto;
	padding-bottom: 25px;
	text-align: left;
}
#services p {
	margin-bottom: 0;
}
@media only screen and (min-width: 776px) and (max-width: 1220px) {
	#services {
		padding: 0 75px;
	}
	#services .service {
		flex-grow: 0.5;
		width: 50%;
		padding: 30px 25px;
	}
}	
@media only screen and (max-width: 775px) {
	#services {
		padding: 0 50px;
	}
	#services .service {
		flex-grow: unset;
		width: 100%;
		padding: 25px 0;
	}
	#services .icon {
		display: none;
	}
}	


/*
 *
 * CALLOUTS
 *
 */

#callouts {
	/*position: relative;*/
	width: 100%;
	max-width: 1480px;
	padding: 0 100px;
}
#callouts .callout-content {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	width: 100%;
	margin: 0 auto;
	padding-bottom: 75px;
}
#callouts .callout-card {
	/*position: relative;*/
	flex-grow: 0.5;
	width: calc(50%-40px);
	height: 150px;
	margin: 0 20px;
	border-radius: 4px;
	background-color: #E3655B;
}

@media only screen and (min-width: 951px) and (max-width: 1220px) {
	#callouts {
		padding: 0 75px;
	}
}	
@media only screen and (max-width: 950px) {
	#callouts {
		padding: 0 50px;
	}
	#callouts .callout-content {
		flex-grow: unset;
	}
	#callouts .callout-card {
		width: 100%;
		height: 150px;
		margin: 20px 0;
	}	
}	


/*
 *
 * INSURANCE BILLING
 *
 */

 #insurance {
	/*position: relative;*/
	width: 100%;
	max-width: 1480px;
	padding: 0 100px;
	margin-bottom: -75px;
}
#insurance h2 {
	font-size: 72px;
	line-height: 70px;
	text-align: right;
}
#insurance .insurance-content {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	width: 100%;
	margin: 0 auto;
	padding: 75px 0;
}
#insurance .col {
	/*position: relative;*/
	flex-grow: 0.5;
	padding: 0 25px;
	width: 50%;
}
#insurance .cost-description {
	margin: 75px 0 20px 0;
}
#insurance .cost-row {
	display: flex;
	justify-content: space-between;
	padding: 12px 0;
	border-bottom: 1px solid #3F1D12;
}
#insurance .cost-row p {
	margin: 0;
}
#insurance .cost-category {
	display: inline-block;
	flex: auto;
	text-align: left;
}
#insurance .cost {
	display: inline-block;
	flex: auto;
	text-align: right;
	font-weight: 700;
}

@media only screen and (min-width: 951px) and (max-width: 1220px) {
	#insurance {
		padding: 0 75px;
	}	
}	
@media only screen and (max-width: 950px) {
	#insurance {
		padding: 0 50px;
	}
	#insurance h2 {
		font-size: 48px;
		line-height: 42px;
		text-align: left;
	}
	#insurance .col {
		/*position: relative;*/
		flex-grow: unset;
		padding: 0;
		width: 100%;
	}
	#insurance .cost-description {
		margin: 30px 0 20px 0;
	}
}


/*
 *
 * PATIENTS
 *
 */

 #patients {
	 margin-top: -100px;
	 padding: 0 100px;
 }
.patient-image {
	display: block;
	margin:0 auto;
	margin-left: 10%;
	width: 80%;
	max-width: 900px;
}

@media only screen and (min-width: 951px) and (max-width: 1220px) {
	#patients {
		padding: 0 50px;
	}
}	
@media only screen and (max-width: 950px) {
	#patients {
		margin-top: -50px;
		padding: 0 25px;
	}
}	


/*
 *
 * FORMS
 *
 */

 #forms {
	/*position: relative;*/
	width: 100%;
	max-width: 1480px;
	padding: 0 100px;
}
#forms h2 {
	font-size: 72px;
	line-height: 70px;
	text-align: right;
}
#forms .forms-content {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	width: 100%;
	margin: 0 auto;
	padding: 75px 0;
}
#forms .col {
	/*position: relative;*/
	flex-grow: 0.5;
	padding: 0 25px;
	width: 50%;
}
#forms .description {
	margin-top: 75px;
}

@media only screen and (min-width: 951px) and (max-width: 1220px) {
	#forms {
		padding: 0 75px;
	}
	#forms h2 {
		font-size: 60px;
		line-height: 54px;
	}
}	
@media only screen and (max-width: 950px) {
	#forms {
		padding: 0 50px;
	}
	#forms h2 {
		font-size: 48px;
		line-height: 42px;
		text-align: left;
	}
	#forms .col {
		/*position: relative;*/
		flex-grow: unset;
		padding: 0;
		width: 100%;
	}	
	#forms .description {
		margin-top: 30px;
	}
}


/*
 *
 * TESTIMONIALS
 *
 */

 #testimonials {
	/*position: relative;*/
	width: 100%;
	padding: 145px 100px 125px 100px;
	text-align: center;
	color: #fdf9eb;
	background: url("testimonial-bkgd.jpg") top left repeat;
}
#testimonials .quote {
	/*position: relative;*/
	z-index: 1;
	max-width: 1000px;
	width: 85%;
	margin: 0 auto;
	margin-bottom: 25px;
	text-align: center;
	font-family: 'Kreon', Georgia, Times, serif;
	font-size: 30px;
	font-weight: 300;
	line-height: 160%;
}
#testimonials .author {
	margin: 0 auto;
	font-family: 'Gudea', "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 24px;
	font-weight: 700;
	font-style: italic;
	line-height: 140%;
	text-align: center;
}
#testimonials .quote::before {
	content: " \201C ";
	position: absolute;
	top: -27px;
	left: -1px;
	z-index: -1;
	width: 100%;
	margin: auto;
	font-family: Georgia, Times, serif;
	font-weight: bold;
	font-size: 150px;
	color: #55765e;
}
/*#testimonial1,
#testimonial2 {
	display: none;
}*/

@media only screen and (min-width: 951px) and (max-width: 1220px) {
	#testimonials {
		padding: 145px 65px 100px 65px;
	}
	#testimonials .quote {
		font-size: 24px;
		line-height: 160%;
	}
	#testimonials .author {
		font-size: 20px;
		line-height: 140%;
	}
}
@media only screen and (max-width: 950px) {
	#testimonials {
		padding: 145px 35px 100px 35px;
	}
	#testimonials .quote {
		font-size: 20px;
		line-height: 160%;
	}
	#testimonials .author {
		font-size: 18px;
		line-height: 140%;
	}
}	


/*
 *
 * FOOTER
 *
 */

#footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	width: 100%;
	padding: 75px 100px;
	margin: 0 auto;
	color: #fdf9eb;
	background: url("footer-bkgd.jpg") top left repeat;
	background-color: #3f1d12;
}
#footer h3 {
	margin-bottom: 5px;
	color: #fdf9eb;
	text-shadow: none;
}
#footer .col-small {
	flex-grow: 0.25;
	width: 25%;
	padding: 0 20px;
}
#footer .col-large {
	flex-grow: 0.5;
	width: 50%;
	padding: 0 20px;
}
#footer .col-large h3, #footer .col-large p {
	text-align: center;
}
#footer .phone {
	white-space: nowrap;
}

@media only screen and (min-width: 50px) and (max-width: 1230px) {
	#footer {
		padding: 50px;
	}
	#footer h3 {
		font-size: 30px;
	}
	#footer .col-small, #footer .col-large {
		/*position: relative;*/
		flex-grow: unset;
		padding: 20px 0;
		width: 100%;
		text-align: center;
	}
	#footer .col-small h3, #footer .col-small p {
		text-align: center;
	}
	#footer .bbb {
		width: 250px;
		margin: 0 auto;
		text-align: center;
	}
}