@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url(https://fonts.googleapis.com/css?family=Lora);

html {
	background-color: #fff;
}

body {
	background-color: #fff;
	font-family: 'Lora', Serif;
	font-weight: 400;
	font-style: normal;
	padding: 0;
	margin: 0;
}

h1 {
	margin-bottom: 0.2em;
	padding-bottom: 0;
}

h2 {
	margin-top: 0;
	padding-top 0;
	font-size: large;	
}

#contracts {
	max-width: 450px;
}

.header_font {
	font-family: Avenir Next, 'Open Sans', Sans-Serif;
}

/* -- Nav menu -- */

#nav_header {
	width: 100%;
	height: 10em;
	position: fixed;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	background-color: #fff;
	overflow: hidden;
	box-shadow: 0 0 1em 0.2em rgba(0, 0, 0, 0.15);
	border-bottom: 1px solid #ddd;
}

#nav_content {
	width: 1000px;
	height: 100%;
	margin: 0;
	padding: 0;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1em;
	padding-right: 1em;
	text-align: left;

	background-image: url(plants3.png);
	background-repeat: no-repeat;
	background-position: right center;
	background-size: contain;
}

/* For now we'll hide the letterhead */
/*
#nav_letterhead {
	display: none;
}*/

#nav_letterhead {
	font-family: Avenir Next, Avenir, Sans-Serif;
	text-align: left;
	padding-top: 1.5em;	
}

#nav_letterhead h1 {
	font-weight: 700;
	font-size: 2em;
	line-height: 1em;
	text-transform: uppercase;
	margin: 0;
	margin-top: 0.0em;
	padding: 0;
}

#nav_letterhead h2, #nav_letterhead h3 {
	font-weight: 400;
	font-size: 0.9em;
	line-height: 1em;
	margin: 0;
	margin-top: 0.2em;
	padding: 0;
	color: #666;
}

#nav_menu {
	width: 100%;	
	padding-top: 2em;
	text-align: left;
	font-weight: 700;
	font-size: 1.1em;	
	color: #ddd;
}

#nav_menu a:link {
	color: #4d6289;
}

#nav_menu a:hover {
	color: #7491bd;
}

#nav_menu ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

#nav_menu li {
	text-transform: uppercase;
	display: inline;
}

#nav_menu li a {
	text-decoration: none;
	color: #444;
}

#couch_banner_text {
	display: none;
}

/* --- Main section --- */

#main {
	margin-top: 10em;
	width: 100%;
	padding: 0;
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 2em;
}

#couch_banner img {
	width: 100%;
}

#couch_banner p {
	text-align: center;
	padding-left: 1em;
	padding-right: 1em;
}

.main_section {
	padding-left: 0.5em;
	padding-right: 0.5em;

	max-width: 1000px;
	margin-left:auto;
	margin-right:auto;

	text-align: center;

	background-image: url("tooth.png");
	background-repeat: no-repeat;
	background-position: right bottom;
	min-height: 600px;	
}

.main_section, #main ul {
	text-align: left;
}

.main_section p, li {
	line-height: 1.4em;
	font-family: Avenir Next, Avenir, Sans-Serif;
}

.therapy_section {
	padding-top: 1em;
}

.therapy_section img {
	float: left;
	width: 256px;
	height: 256px;
	margin-left: 1em;
	margin-right: 1.5em;
	margin-top: 4em;
}

.therapy_section .therapy_section_text {
	overflow: hidden;
	margin-right: 1em;
}

.therapy_section .therapy_section_header {
	margin-top: 0.5em;
	padding-top: 0;
	text-transform: uppercase;
	font-weight: 700;	
}

#section_aboutme h2, #section_contactme h2 {
	text-transform: uppercase;
}

#portrait_img2 {
	float: left;
	width: 256px;
	height: 256px;
	margin-left: 1em;
	margin-right: 1.5em;
	margin-top: 1em;
}

#portrait_img {
	margin-top: 1em;
}

.specialty_title {
	margin-left: 20px;
	text-transform: uppercase;
	margin-bottom: 0;
}

.specialty_hr {
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 2em;
}

#map {
	display: none; /* This is the proper map for non-mobile -- remove this display: none when the map goes back */
	width: 400;
	float: left;	
	margin-right: 1em;
	margin-left: 1em;
}

#map_mobile {
	display: none;
}

#info_info {
	margin-left: 1.2em; /* This only goes in when the map is hidden */
	margin-right: 1em;
}

/* --- Mobile Layout --- */

@media
only screen and (max-width: 768px) {
	body {
		font-family: Serif;
	}

	.header_font, h1, h2 {
		font-family: 'Avenir Next', 'New York', Serif, Helvetica;
		font-weight: 700;
	}

	/* -- toggles for mobile -- */

	.hide_mobile {
		display: none;
	}

	/* -- Therapy sections -- */

	.main_section {
		width: 90%;
		padding: 0;
		background-image: url("tooth_hide.png");
	}

	.therapy_section {
		width: 100%;
		text-align: center;
	}

	.therapy_section img {
		width: 50%;
		min-width: 256px;
		height: auto;
		float: none;		
		margin-right: 0;
		margin-top: 0;
		margin-left: auto;
		margin-right: auto;		
	}

	#portrait_img {
		margin-top: 0em;
	}

	.main_section p {
		line-height: 1.3em;
	}

	.main_section .therapy_section .therapy_section_text {
		text-align: left;
		padding-left: 1em;
		padding-right: 1em;
	}

	.main_section .therapy_section .therapy_section_text h2 {
		text-align: center;
	}

	#map {
		display: none;
	}

	#map_mobile {
		display: none; /* This is the proper map for mobile -- remove this display: none when the map goes back */
		width: 90%;
		display: block;
		margin-right: 1em;
		margin-left: 1em;
	}

	#info_info {
		margin-right: 1em;
		margin-left: 1em;
	}


		/* NAV */

		#main {
			margin-top: 4em;
		}

		#nav_header {
			height: 8em;
		}

		#nav_letterhead h1 {
			font-weight: 700;
			font-size: 2em;
			line-height: 1em;
			text-transform: uppercase;
			margin: 0;
			margin-top: 0.0em;
			padding: 0;
		}

		#nav_letterhead h2, #nav_letterhead h3 {
			font-weight: 400;
			font-size: 0.6em;
			line-height: 1em;
			margin: 0;
			margin-top: 0.2em;
			padding: 0;
			color: #333;
		}

		#nav_menu {
			width: 100%;	
			padding-top: 1em;
			text-align: left;
			font-weight: 700;
			font-size: 0.9em;	
			color: #ddd;
		}

		#nav_menu a:link {
			color: #4d6289;
		}

		#nav_menu a:hover {
			color: #7491bd;
		}

		#nav_menu ul {
			padding: 0;
			margin: 0;
			list-style: none;
		}

		#nav_menu li {
			text-transform: uppercase;
			display: inline;
		}

		#nav_menu li a {
			text-decoration: none;
			color: #444;
		}

}

/* Guides
   Device ratios: https://bjango.com/articles/min-device-pixel-ratio/
   Example queries: https://css-tricks.com/snippets/css/retina-display-media-query/
   */
/*
@media
only screen and (max-width: 200px),

only screen and (-webkit-min-device-pixel-ratio: 1)      and (max-width: 400px),
only screen and (   min--moz-device-pixel-ratio: 1)      and (max-width: 400px),
only screen and (     -o-min-device-pixel-ratio: 1/1)    and (max-width: 400px),
only screen and (        min-device-pixel-ratio: 1)      and (max-width: 400px),
only screen and (                min-resolution: 1dppx)  and (max-width: 400px), 

only screen and (-webkit-min-device-pixel-ratio: 1.25)      and (max-width: 500px),
only screen and (   min--moz-device-pixel-ratio: 1.25)      and (max-width: 500px),
only screen and (     -o-min-device-pixel-ratio: 5/4)       and (max-width: 500px),
only screen and (        min-device-pixel-ratio: 1.25)      and (max-width: 500px),
only screen and (                min-resolution: 1.25dppx)  and (max-width: 500px),

only screen and (-webkit-min-device-pixel-ratio: 1.5)      and (max-width: 600px),
only screen and (   min--moz-device-pixel-ratio: 1.5)      and (max-width: 600px),
only screen and (     -o-min-device-pixel-ratio: 3/2)      and (max-width: 600px),
only screen and (        min-device-pixel-ratio: 1.5)      and (max-width: 600px),
only screen and (                min-resolution: 1.5dppx)  and (max-width: 600px),

only screen and (-webkit-min-device-pixel-ratio: 2)      and (max-width: 800px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (max-width: 800px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (max-width: 800px),
only screen and (        min-device-pixel-ratio: 2)      and (max-width: 800px),
only screen and (                min-resolution: 2dppx)  and (max-width: 800px),

only screen and (-webkit-min-device-pixel-ratio: 3)      and (max-width: 1200px),
only screen and (   min--moz-device-pixel-ratio: 3)      and (max-width: 1200px),
only screen and (     -o-min-device-pixel-ratio: 3/1)    and (max-width: 1200px),
only screen and (        min-device-pixel-ratio: 3)      and (max-width: 1200px),
only screen and (                min-resolution: 3dppx)  and (max-width: 1200px),

only screen and (-webkit-min-device-pixel-ratio: 4)      and (max-width: 1600px),
only screen and (   min--moz-device-pixel-ratio: 4)      and (max-width: 1600px),
only screen and (     -o-min-device-pixel-ratio: 4/1)    and (max-width: 1600px),
only screen and (        min-device-pixel-ratio: 4)      and (max-width: 1600px),
only screen and (                min-resolution: 4dppx)  and (max-width: 1600px) { 
	
}*/