/**
 * Learn HTML & CSS from Scratch
 * 3.1: Box Model & Layout
 */

/********** Web Fonts **********/
@import url(http://fonts.googleapis.com/css?family=Elsie+Swash+Caps:400,900); /* font-family: 'Elsie Swash Caps', cursive; */
@import url(http://fonts.googleapis.com/css?family=Clicker+Script); /* font-family: 'Clicker Script', cursive; */
@import url(http://fonts.googleapis.com/css?family=Balthazar);
@import url(http://fonts.googleapis.com/css?family=Montserrat);
@import url(http://fonts.googleapis.com/css?family=Noto+Serif|Merriweather|Playfair+Display+SC);

/********** Fixes **********/
*{
 	margin: 0;
 	padding: 0;
 	border: 0;
 	box-sizing: border-box;
 	-webkit-boxsizing: border-box;
 	-moz-box-sizing: border-box;
}

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	height: 0;
	line-height: 0;
}


/********** Global **********/

body {
	font-family: "Proxima Nova", "proxima-nova", "Helvetica Neue", Helvetica, sans-serif;
}

h2 {
	font-size: 2em;
	text-align: center;
	font-weight: 500;
	color: #333;
	margin: 75px 0 10px;
	text-transform: uppercase;
	font-family: 'Playfair Display SC', serif;
}


h3 {
	margin-bottom: 5px;
}

ul, ol {
	margin-bottom: 10px;
}

li {
	margin-left: 20px;
}

p, address {
	margin: 0 0 25px;
	font-size: .9em;
}



input, textarea {
	display: block;
	width: 100%;
	padding: 5px;
	margin-bottom: 5px;
	box-shadow: 0 3px 5px #ccc;
	border: 1px solid #ccc;
}

input[type="submit"] {
	margin-top: 5px;
	width: 100px;
	background: black;
	color: white;
	border-radius: 25px;
	border: 0px;
}

input[type="submit"]:hover {
	background: #555;
}

iframe{
	border: 6px solid #fff !important;
	padding: 0;
	margin: 0;
	overflow: hidden;
	height: 353px;
}

.header_wrapper {
	width: 85%;
	margin: 0 auto;
}

.wrapper {
	width: 77%;
	margin: 0 auto;
}

.outer_wrapper {
	width: 100%;
	margin: 0;
}

.shadow {
	box-shadow: 0 3px 10px #333;
}

img {
	border-radius: 5px;
	border: 6px solid #fff;
}

/********** Logo **********/

#logo {
	/*padding: 85px 0 25px;*/
	display: inline-block;
	/*margin-left: 50px;*/
}

	#logo h1 {
		margin: 0;
		padding-top: 20px;
		display: inline-block;
		font-family: 'Playfair Display SC', serif;
		/*background: url(../images/tooth6.png) no-repeat left center;*/
	}

	#logo p {
		text-transform: uppercase;
	}

#logo_phone {
	margin-top: 10px;
	display: inline-block;
	text-align: right;
	font-size: 1em;
}

header {
	box-shadow: 0 3px 10px #333;
	/* gradient */
	background: white;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1;
}

/********** Navigation Bar **********/
#nav_bar {
	margin: 5px auto;
	text-align: center;
}

nav a {
	font-size: 0.8em;
	color: #333;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 0 1.5%;
	text-decoration:none;
}

nav a:hover {
	border-bottom: 1px solid #333;
	padding-bottom: 4px;
}

.navcol1_left {
	width: 32%;
	float: left;
}

.navcol2_right {
	width: 68%;
	float: right;
}

#image_slider {
	margin: 150px 50px 0 90px;
}

.carousel-inner img {
	margin: 0 auto;
}

#FDC-carousel{
	width: 100%;
	margin: 115px auto 0;
}

.img-responsive,.thumbnail>img,.thumbnail a>img,.carousel-inner>.item>img,.carousel-inner>.item>a>img{display:block;width:100% \9;max-width:100%;height:auto}
.carousel{position:relative}
.carousel-inner{position:relative;width:100%;overflow:hidden}
.carousel-inner>.item{position:relative;display:none;-webkit-transition:.6s ease-in-out left;-o-transition:.6s ease-in-out left;transition:.6s ease-in-out left}
.carousel-inner>.item>img,.carousel-inner>.item>a>img{line-height:1}
.carousel-inner>.active,.carousel-inner>.next,.carousel-inner>.prev{display:block}
.carousel-inner>.active{left:0}.carousel-inner>.next,.carousel-inner>.prev{position:absolute;top:0;width:100%}
.carousel-inner>.next{left:100%}.carousel-inner>.prev{left:-100%}
.carousel-inner>.next.left,.carousel-inner>.prev.right{left:0}
.carousel-inner>.active.left{left:-100%}
.carousel-inner>.active.right{left:100%}
.carousel-control{position:absolute;top:0;bottom:0;left:0;width:15%;font-size:20px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6);filter:alpha(opacity=50);opacity:.5}
.carousel-control.left{background-image:-webkit-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);background-image:-o-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,.0001)));background-image:linear-gradient(to right,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);background-repeat:repeat-x}
.carousel-control.right{right:0;left:auto;background-image:-webkit-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);background-image:-o-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.0001)),to(rgba(0,0,0,.5)));background-image:linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);background-repeat:repeat-x}
.carousel-control:hover,.carousel-control:focus{color:#fff;text-decoration:none;filter:alpha(opacity=90);outline:0;opacity:.9}
.carousel-control .icon-prev,.carousel-control .icon-next,.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right{position:absolute;top:50%;z-index:5;display:inline-block}
.carousel-control .icon-prev,.carousel-control .glyphicon-chevron-left{left:50%;margin-left:-10px}
.carousel-control .icon-next,.carousel-control .glyphicon-chevron-right{right:50%;margin-right:-10px}
.carousel-control .icon-prev,.carousel-control .icon-next{width:20px;height:20px;margin-top:-10px;font-family:serif}
.carousel-control .icon-prev:before{content:'\2039'}.carousel-control .icon-next:before{content:'\203a'}.carousel-indicators{position:absolute;bottom:10px;left:50%;z-index:15;width:60%;padding-left:0;margin-left:-30%;text-align:center;list-style:none}
.carousel-indicators li{display:inline-block;width:10px;height:10px;margin:1px;text-indent:-999px;cursor:pointer;background-color:#000 \9;background-color:rgba(0,0,0,0);border:1px solid #fff;border-radius:10px}
.carousel-indicators .active{width:12px;height:12px;margin:0;background-color:#fff}
.carousel-caption{position:absolute;right:15%;bottom:20px;left:15%;z-index:10;padding-top:20px;padding-bottom:20px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.carousel-caption .btn{text-shadow:none}@media screen and (min-width:768px){.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-prev,.carousel-control .icon-next{width:30px;height:30px;margin-top:-15px;font-size:30px}
.carousel-control .glyphicon-chevron-left,.carousel-control .icon-prev{margin-left:-15px}
.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next{margin-right:-15px}
.carousel-caption{right:20%;left:20%;padding-bottom:30px}
.carousel-indicators{bottom:20px}}


/********** Content Area **********/

.tile1 {
	background: url(../images/light-green_tile.jpg) repeat;
	padding: 30px 0;
	min-height: 60%;
	width: 100%;
}

.tile2 {
	background: white;
	padding: 30px 0;
	min-height: 60%;
	width: 100%;
}

.tile3 {
	background: url(../images/dark-stitched_tile.jpg) repeat;
	padding: 30px 0;
	min-height: 60%;
	width: 100%;
}

	/********** Sections **********/

	.intro_text {
		text-align: center;
		margin: 25px auto;
		font-size: 1.5em;
	}

	section {
		padding: 20px;
		background: white;
	}

	section a {
		color: #555;
		text-decoration: underline;
	}

	.section_text {
		margin: 3.5% 25% 3% 0;
		line-height: 1.5em;
		font-size: 1.1em;
	}

	.appoint1_text {
		margin: 3.5% 16.4% 0 0;
		line-height: 1.5em;
		font-size: 1.1em;
	}

	.appoint2_text {
		margin: 3.5% 16.4% 25px 0;
		line-height: 1.5em;
		font-size: 1.1em;
	}

	/* Posititoning Classes */
	.col_left {
		float: left;
		width: 30%;
		margin: 0 5% 2% 10%;
		/*border: 1px solid black;*/
	}
	
	.col_right {
		float: right;
		width: 49%;
		margin: 0 0 2% 0;
	/*border: 1px solid black;*/
	
	}

	.col1_right {
		float: left;
		width: 25%;
		margin: 3.5% 0 0.9% 0;
	}

	.col2_left {
		float: left;
		width: 50%;
		margin: 3.5% 4% 3.5% 14%;
	}


/********** Details **********/
#details {
	clear: both;
	padding: 20px 10px;
	/* gradient */
	background: #e5e5e5; /* Old browsers */
	background: -moz-linear-gradient(top,  #e5e5e5 0%, #c4c4c4 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5e5e5), color-stop(100%,#c4c4c4)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #e5e5e5 0%,#c4c4c4 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #e5e5e5 0%,#c4c4c4 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #e5e5e5 0%,#c4c4c4 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #e5e5e5 0%,#c4c4c4 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}

	#details a:link, #details a:visited {
		color: black;
		text-decoration: none;
	}

	#details a:hover, #details a:active {
		text-decoration: underline;
	}



#services-section li {
	line-height: 1.5em;
	font-size: 1.1em;
}

#services-section img {
	border: none;
}

.dentists-col_left{
	float: left;
	width: 49%;
	margin-left: 1%;
	margin-top: 15px;
	/*border: 1px solid black;*/
}

.dentists-col_right{
	width: 49%;
	float: right;
	margin-right: 1%;
	margin-top: 15px;
	/*border: 1px solid black;*/
}

.dentist_img {
	width: 100%;
	/*border: 1px solid black;*/
}

.dentist_img img{
	margin: 0 1% 0 7%;
}

.dentist_text {
	/*margin: 0 2.2em 35px 3.1em;*/
	margin: 0 6%;
	line-height: 1.5em;
	font-size: 1.1em;
	color: white;
	/*border: 1px solid black;*/
}

#payment-section h3, #dentists-section h3{
	text-align: center;
	margin: 10px auto;
	color: white;
}

#payment-section h2, #dentists-section h2{
	color: white;
}

#payment-section p.intro_text, #dentists-section p.intro_text {
	color: white;
}

#zocdoc_button {
	width: 46%;
	height: auto;
}


/********** Footer **********/

footer {
	text-align: center;
	font-size: 10px;
	color: #555;
}

	footer a {
		color: #555;
		text-decoration: underline;
	}

/* Responsive Design
-----------------------------------------------*/
@media only screen and (max-width: 1280px){
	.header_wrapper{
		width: 98%;
	}

	h1 {
		font-size: 1.5em;
	}	

	#logo p{
		font-size: 0.7em;
	}

	nav a{
		font-size: 0.7em;
		margin: 0 0.9%;
	}

	h2 {
		font-size: 1.4em;
	}

	.intro_text {
		font-size: 1.0em;
	}

	.appoint1_text, .appoint2_text, .section_text, #services-section li, .dentist_text {
		font-size: 0.9em;
	}

	h3 {
		font-size: 1.3em;
	}
}

@media only screen and (max-width: 853px){
	.header_wrapper{
		width: 98%;
	}

	h1 {
		font-size: 1.3em;
	}	

	#logo p{
		font-size: 0.4em;
	}

	nav a{
		font-size: 0.1em;
		margin: 0 0.5%;
		letter-spacing: 0;
	}

	h2 {
		font-size: 1.3em;
	}

	.intro_text {
		font-size: 0.9em;
	}

	.appoint1_text, .appoint2_text, .section_text, #services-section li, .dentist_text {
		font-size: 0.9em;
	}

	h3 {
		font-size: 1.2em;
	}
}

@media only screen and (max-width: 640px){
	.header_wrapper{
		width: 99%;
	}

	.wrapper {
		width: 100%;
		overflow-x: hidden;
	}

	h1 {
		font-size: 15px;
	}	

	#logo p{
		font-size: 7px;
	}

	nav a{
		font-size: 8px;
		margin: 0 0.5%;
		letter-spacing: 0;
	}

	h2 {
		font-size: 13px;
	}

	.intro_text {
		font-size: 12px;
	}

	.appoint1_text, .appoint2_text, .section_text, #services-section li, .dentist_text {
		font-size: 10px;
	}

	#zocdoc_attrib {
		margin-top: -15px;
	}

	h3 {
		font-size: 10px;
	}

	p, address {
		font-size: 10px;
	}
}

@media only screen and (max-width: 320px){
	.header_wrapper{
		width: 100%;
	}

	.wrapper {
		width: 100%;
		overflow-x: hidden;
	}

	h1 {
		font-size: 8px;
		padding:0;
	}	

	#logo h1 {
		padding-top: 0;
	}

	#logo p{
		font-size: 4px;
		margin: 0 0 15px;
	}

	#logo_phone {
		margin-top: 0;
	}

	#logo_phone p {
		margin:0;
	}

	nav a{
		font-size: 4px;
		margin: 0 0.5%;
		letter-spacing: 0;
	}

	#nav_bar {
		margin: 0;
	}

	ol {
		margin-bottom: 0;
	}

	.carousel-indicators li {
		width: 5px;
		height: 5px;
		border-radius: 5px;
	}

	.carousel-indicators .active {
		width: 7px;
		height: 7px;
	}

	#FDC-carousel {
		margin: 45px auto 0;
	}

	.tile1, .tile2, .tile3 {
		padding: 30px 0 20px 0;
	}

	h2 {
		font-size: 9px;
		margin: 5px 0 10px;
	}

	.intro_text {
		font-size: 9px;
		margin: 5px auto;
	}

	.appoint1_text, .appoint2_text, .section_text, #services-section li, .dentist_text {
		font-size: 6.5px;
	}

	.appoint1_text {
		line-height: normal;
	}

	#zocdoc {
		margin-top: -20px;
	}

	#zocdoc_attrib {
		margin-top: -20px;
	}

	h3 {
		font-size: 6.5px;
	}

	p, address {
		font-size: 6.5px;
	}

	.dentists-col_left, .dentists-col_right {
		margin-top: 0;
	}

	iframe {
		height: 225px;
	}

	.col1_right {
		width: 27%;
	}

	footer {
		font-size: 9px;
	}

}