/*   Design and code by
    www.paulskittone.com  */
html {
	height: 100%;
	margin:  0;
	padding: 0;
	overflow-y: scroll;}
	
body {
	color: rgb(64,64,64);
	background-color: rgb(255,255,255);
	font-family: 'Raleway', sans-serif;
    font-size: 15px;
	margin: 0 auto;
	padding: 0;
	height: 100%;
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;}
	
a { 
	color: rgb(64,64,64);
	text-decoration: none;
	transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;}
	
h1 {
	margin: 0;
	height: 100%;}

h2 {
	font-family: 'Oswald', sans-serif;
	color: rgb(31,151,212);
	font-weight: normal;
	font-size: 50px;
	text-align: center;
	text-transform: uppercase;
	margin: 0 auto 25px;}
	
h3 {
	color: rgb(64,64,64);
	font-weight: bold;
	font-size: 20px;
	text-align: center;
	margin: 0 auto 15px;}
	
h4 {
	color: rgb(64,64,64);
	font-size: 24px;
	text-align: left;
	margin: 0 auto 15px;}
	
	@media only screen and (max-width : 768px) {
		h4 {
			text-align: center;
			margin: 0 auto 25px;}
	}
	
img {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;}

.pos {
	margin: 0 auto;
	padding: 100px 5%;
	width: 90%;
	max-width: 1000px;
	overflow: hidden;}
	
	@media only screen and (max-width : 768px) {
		.pos {
			padding: 50px 5%;}
	}
	
.col-two {
	float: left;
	width: 47.5%;
	padding-right: 5%;}
	
	@media only screen and (max-width : 768px) {
		.col-two {
			width: 100%;
			padding: 0;}
	}
	
.col-two:nth-of-type(2n+1) {
	padding-right: 0}

.col-three {
	float: left;
	width: 30%;
	padding-right: 5%;}
	
	@media only screen and (max-width : 768px) {
		.col-three {
			width: 100%;
			padding: 0;}
	}
	
.col-three:nth-of-type(3n+1) {
	padding-right: 0;}
	
.red {
	color: rgb(255,69,69);}
	
.break {
	background: rgb(31,151,212);
	height: 3px;
	width: 75px;
	margin: 0 auto 75px;}
	
.break-blue {
	background: rgb(128,128,128);
	height: 2px;
	width: 50px;
	margin: 0 auto 15px;
	transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;}

	@media only screen and (max-width : 768px) {
		.break-blue {
			display: none;}			
	}
	
a:hover .break-blue {
	background: rgb(31,151,212);}
	
	

/* Header */
#heading-fill {
	height: 200px;
	width: 100%;}

	@media only screen and (max-width : 768px) {
		#heading-fill {
			display: none;}			
	}

header {
	position: fixed;
	width: 100%;
	z-index: 100;
	box-shadow: 1px 1px 4px rgba(0,0,0,.15);
	-webkit-box-shadow: 1px 1px 4px rgba(0,0,0,.15);
	-moz-box-shadow: 1px 1px 4px rgba(0,0,0,.15);}

#heading {
	background: rgb(255,255,255);
	width: 100%;}
	
#heading .pos {
	padding: 25px 5%;}

#heading .logo {
	width: 210px;
	height: 100px;
	margin: 0 auto;}

	@media only screen and (max-width : 768px) {
		header {
			position: static;}
		
		#heading .logo {
			height: 80px;
			width: 168px;}
		
		#heading .logo img{
			height: 80px;
			width: auto;}			
	}

/* Menu */
#menu {
	background: rgb(31,151,212);
	width: 100%;
	font-size: 17px;
	letter-spacing: 1px;
	text-transform: uppercase;}
	
#menu .pos {
	margin: 0 auto;
	padding: 0;
	overflow: hidden;
	width: 100%;}
	
/* Banner */
#banner {
	margin: 0 auto;
	width: 100%;
	min-height: 800px;
	min-height: -webkit-calc(100% - 200px);
	min-height: -moz-calc(100% - 200px);
	min-height: calc(100% - 200px);
	position: relative;}

	@media only screen and (max-width : 768px) {
		#banner {
			padding-top: 0;
			min-height: 800px;
			min-height: -webkit-calc(100% - 180px);
			min-height: -moz-calc(100% - 180px);
			min-height: calc(100% - 180px);
			min-height: inherit;}
	}

.banner-text {
	font-family: 'Raleway', sans-serif;
	text-align: center;
	width: 90%;
	padding: 50px 5%;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);}
	
.no-csstransforms .banner-text {
	position: static;
	-webkit-transform: none;
	-ms-transform: none;
	transform: none;}

	@media only screen and (max-width : 768px) {
		.banner-text {
			position: static;
			-webkit-transform: none;
			-ms-transform: none;
			transform: none;}
	}
	
.banner-text p {
	display: inline-block;}

.banner-quote {
	font-weight: 400;
	margin: 20px auto 100px;
	font-size: 50px;
	color: rgb(255,255,255);}

	@media only screen and (max-width : 768px) {
		.banner-quote {
			font-size: 40px;}
	}
	@media only screen and (max-width : 480px) {
		.banner-quote {
			font-size: 30px;
			margin-bottom: 50px;}
	}
	
.highlight {
	font-weight: 500;
	color: rgb(252,201,99);}

.banner-address {
	font-size: 20px;
	color: rgb(252,201,99);}

	@media only screen and (max-width : 768px) {
		.banner-address {
			font-size: 17px;}
	}

.banner-call {
	display: inline-block;
	color: rgb(255,255,255);
	border: solid 2px rgb(252,201,99);
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	font-size: 25px;
	font-weight: normal;
	letter-spacing: 1px;
	padding: 10px 25px;}

	@media only screen and (max-width : 768px) {
		.banner-call {
			font-size: 20px;}
	}
	
.banner-call:hover {
	background: rgba(252,201,99,.2);}
	
	
	
/* Practice */
#a-practice, #a-procedure, #a-testimonial, #a-contact {
	position: relative;
	bottom: 86px;}
	
	@media only screen and (max-width : 768px) {
		#a-practice, #a-procedure, #a-testimonial, #a-contact {
			bottom: 230px;}
	}

#practice {
	background: rgb(225,218,206);
	width: 100%;}
	
#practice .pos {
	padding-bottom: 0;}
	
#practice p {
	line-height: 22px;}
	
#practice .info {
	font-size: 30px;
	line-height: 50px;
	text-align: center;
	font-family: 'Quattrocento', serif;
	margin-bottom: 0;}

	@media only screen and (max-width : 768px) {
		#practice .info {
			font-size: 18px;
			line-height: 32px;}
	}

.practice-box {
	text-align: right;
	margin-top: 30px;}

.practice-box a {
	color: rgb(31,151,212);
	font-size: 24px;
	font-weight: 500;}

.practice-box a:after {
	content: "";
	border-radius: 50%;
	width: 24px;
	height: 24px;
	background: url("images/layout/arrow-more.svg") no-repeat -24px 0;
	position: relative;
	top: 4px;
	right: 0;
	display: inline-block;
	transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;}
	
	.no-svg .practice-box a:after {
	background: url("images/layout/arrow-more.png") no-repeat -24px 0;}
	
.practice-box a:hover {
	color: rgb(145,195,230);}

.practice-box a:hover:after {
	background: url("images/layout/arrow-more.svg") no-repeat 0 0;}
	
	.no-svg .practice-box a:hover:after {
	background: url("images/layout/arrow-more.png") no-repeat 0 0;}
	
#practice .bg {
	max-width: 1200px;
	margin: 0 auto;}
	
#practice .bg img {
	display: block;
	height: auto;
	width: 100%;}


	
/* Procedure */	
#procedure {
	background: url("images/layout/pattern.png") fixed;
	width: 100%;}
	
#procedure .ico {
	background-position: center;
	width: 165px;
	height: 165px;
	margin: 0 auto;
	filter: alpha(opacity=.7);
	opacity: .7;
	transform:scale(.8);
	-ms-transform:scale(.8);
	-moz-transform:scale(.8);
	-webkit-transform:scale(.8);
	-o-transform:scale(.8);
	transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;}
	
	.no-csstransforms #procedure .ico {
	transform: none;
	-ms-transform: none;
	-moz-transform: none;
	-webkit-transform: none;
	-o-transform: none;}
	
#procedure .ico-a {
	background: url("images/layout/procedure-a.svg");}
	
	.no-svg #procedure .ico-a {
	background: url("images/layout/procedure-a.png");}
	
#procedure .ico-b {
	background: url("images/layout/procedure-b.svg");}
	
	.no-svg #procedure .ico-b {
	background: url("images/layout/procedure-b.png");}
	
#procedure .ico-c {
	background: url("images/layout/procedure-c.svg");}
	
	.no-svg #procedure .ico-c {
	background: url("images/layout/procedure-c.png");}
	
#procedure .ico-d {
	background: url("images/layout/procedure-d.svg");}
	
	.no-svg #procedure .ico-d {
	background: url("images/layout/procedure-d.png");}
	
#procedure .ico-e {
	background: url("images/layout/procedure-e.svg");}
	
	.no-svg .ico-e {
	background: url("images/layout/procedure-e.png");}
	
#procedure .ico-f {
	background: url("images/layout/procedure-f.svg");}
	
	.no-svg #procedure .ico-f {
	background: url("images/layout/procedure-f.png");}
	
#procedure .ico-g {
	background: url("images/layout/procedure-g.svg");}
	
	.no-svg #procedure .ico-g {
	background: url("images/layout/procedure-g.png");}
	
#procedure a:hover .ico {
	filter: alpha(opacity=1);
	opacity: 1;
	transform:scale(1);
	-ms-transform:scale(1);
	-moz-transform:scale(1);
	-webkit-transform:scale(1);
	-o-transform:scale(1);}
	
.no-csstransforms a:hover .ico {
	filter: alpha(opacity=1);
	opacity: 1;}
	
	@media only screen and (max-width : 768px) {
		#procedure .ico {
			filter: alpha(opacity=1);
			opacity: 1;
			transform:scale(1);
			-ms-transform:scale(1);
			-moz-transform:scale(1);
			-webkit-transform:scale(1);
			-o-transform:scale(1);}
			
		.no-csstransforms #procedure .ico {
			filter: alpha(opacity=1);
			opacity: 1;}
	}

#procedure h3 {
	transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;}
	
	@media only screen and (max-width : 768px) {
		#procedure h3 {
			margin: 0 auto;}
	}

#procedure a:hover h3 {
	color: rgb(31,151,212);}
	
#procedure p {
	color: rgb(128,128,128);
	text-align: center;
	line-height: 22px;
	margin-bottom: 40px;
	max-width: 400px;
	transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;}
	
	@media only screen and (max-width : 768px) {
		#procedure p {
			margin: 0 auto 20px;}
	}
	
#procedure a:hover p {
	color: rgb(64,64,64);}
	
	@media only screen and (max-width : 768px) {
		#procedure .spacer {
			display: none;}
	}
	
/* Testimonial */	
#testimonial {
	background: rgb(200,229,247);
	width: 100%;}
	
#testimonial p {
	text-align: center;}
	
#testimonial .quote-ico {
	background: url("images/layout/quote.svg");
	width: 50px;
	height: 40px;
	margin: 0 auto;}
	
	.no-svg #testimonial .quote-ico {
	background: url("images/layout/quote.png");}
	
#testimonial .client-img {
	width: 125px;
	height: 125px;
	margin: 25px auto;}
	
#testimonial .client-katrina{
	background: url("images/layout/client-katrina.png");}
	
#testimonial .client-robyn {
	background: url("images/layout/client-robyn.png");}
	
#testimonial .client-chris {
	background: url("images/layout/client-chris.png");}
	
	
#testimonial .quote {
	font-family: 'Quattrocento', serif;
	color: rgb(31,151,212);
	font-size: 26px;
	line-height: 40px;}
	
	@media only screen and (max-width : 768px) {
		#testimonial .quote {
			font-size: 20px;
			line-height: 35px;}
	}
	
#testimonial .client {
	color: rgb(110,110,110);
	font-weight: 500;
	font-size: 15px;
	text-transform: uppercase;}
	
#testimonial .yelp {
	text-align: center;}
	
	@media only screen and (max-width : 480px) {
		#testimonial .yelp {
			display: none;}
	}
	
#testimonial .yelp-text {
	display: inline-block;
	vertical-align: middle;
	color: rgb(110,110,110);
	font-size: 15px;
	line-height: 30px;
	margin: 5px 0 0;}

#testimonial .yelp-ico {
	display: inline-block;
	vertical-align: middle;
	background: url("images/layout/yelp.svg");
	margin-left: 5px;
	height: 30px;
	width: 60px;}
	
	.no-svg #testimonial .yelp-ico {
	background: url("images/layout/yelp.png");}

#testimonial .yelp-ico a {
	display: block;
	height: 100%;
	width: 100%;}
	
/* Contact */	
#contact {
	background: url("images/layout/pattern.png") fixed;
	width: 100%;}
	
#contact p, #contact table {
	font-size: 20px;}
	
	@media only screen and (max-width : 768px) {
		#contact table {
			margin: 0 auto 20px;}
	}
	
#contact td {
	padding-right: 15px;}
	
#contact p {
	padding-left: 35px;
	border-left: solid 5px rgb(145,195,230);
	margin: 0;}
	
	@media only screen and (max-width : 768px) {
		#contact p {
			text-align: center;
			padding-left: 0;
			border: none;}
	}
	
#contact .margin {
	margin-bottom: 35px;}
	
#contact .book {
	margin-top: 20px;}
	@media only screen and (max-width : 768px) {
		#contact .book {
			text-align: center;
			margin-top: 0px;
			margin-bottom: 35px;}
	}
	
/* Form */	
#contact label {
	display: none;}
	
input, email, textarea {
	font-family: 'Raleway', sans-serif;
	overflow: auto;
	background-color: rgba(255,255,255,.6);
	margin-bottom: 15px;
	height: 30px;
	transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-webkit-appearance: none;
	border-radius: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;}
	
input:focus, email:focus, textarea:focus {
	border: 1px solid rgb(31,151,212) !important;
	background: rgba(200,229,247,.3);
	outline-color: transparent;
	outline-style: none;}
	
input[type="text"], input[type="email"], textarea {
	color: rgb(0, 0, 0);
	border: 1px solid rgb(128,128,128);
	padding: 0 10px;
	width: 100%;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;}
	
textarea {
	padding: 10px;
	height: 270px;
	resize: none;}
	
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
	color: rgba(128,128,128,.5);}
	
input:-moz-placeholder, textarea:-moz-placeholder {
	color: rgba(128,128,128,.5);}
	
input:-moz-placeholder, textarea:-ms-input-placeholder {
	color: rgba(128,128,128,.5);}
	
input[type="submit"] {
	color: rgba(255,255,255,1);
	background: none repeat scroll 0 0 rgba(31,151,212,1);
	border: 1px solid rgba(31,151,212,1);
	font-size: 24px;
	letter-spacing: 1px;
	text-transform: uppercase;
	width: 100%;
	height: 50px;
	cursor: pointer;}
	
input[type="submit"]:hover {
	color: rgba(255,255,255,1);
	background: none repeat scroll 0 0 rgba(145,195,230,1);}
	
.hide {
	display: none;
	}
	
/* Map */
iframe {
	display: block;}

.overlay {
   background: transparent; 
   position: relative; 
   width: 100%;
   height: 400px;
   top: 400px;
   margin-top: -400px;}

/* Footer */
footer {
	color: rgb(255,255,255);
	background: rgb(64,64,64);
	width: 100%;}

footer .pos {
	padding: 50px 5%;}

footer .contacts {
	text-align: center;
	margin-bottom: 50px;}
	
footer .logo-bot {
	background: url("images/layout/nglogo-bot.svg");
	height: 90px;
	width: 50px;
	display: inline-block;
	vertical-align: middle;
	margin-right: 10px;}
	
	.no-svg footer .logo-bot {
	background: url("images/layout/nglogo-bot.png");}
	
footer .logo-text {
	font-family: 'Quattrocento', serif;
	color: rgb(170,170,170);
	font-size: 20px;
	display: inline-block;
	vertical-align: middle;}
	
footer .logo-text span {
	color: rgb(255,255,255);
	font-size: 36px;
	font-weight: bold;}
	
footer .copyright {
	color: rgb(170,170,170);}
	
	@media only screen and (max-width : 768px) {
		footer .copyright {
			text-align: center;
			margin-bottom: 20px;}
	}
	
footer .social {
	text-align: right;}
	
	@media only screen and (max-width : 768px) {
		footer .social {
			text-align: center;}
	}
	
footer .foot-ico {
	height: 25px;
	width: 25px;
	margin-left: 5px;
	display: inline-block;}
	
footer .ico-fb {
	background: url("images/layout/ico-fb.svg") no-repeat;}
	
	.no-svg footer .ico-fb {
	background: url("images/layout/ico-fb.png") no-repeat;}
	
footer .ico-fb:hover {
	background: url("images/layout/ico-fb-h.svg") no-repeat;}
	
	.no-svg footer .ico-fb:hover {
	background: url("images/layout/ico-fb-h.png") no-repeat;}
	
footer .ico-google {
	background: url("images/layout/ico-google.svg") no-repeat;}
	
	.no-svg footer .ico-google {
	background: url("images/layout/ico-google.png") no-repeat;}
	
footer .ico-google:hover {
	background: url("images/layout/ico-google-h.svg") no-repeat;}
	
	.no-svg footer .ico-google:hover {
	background: url("images/layout/ico-google-h.png") no-repeat;}
	
footer .ico-yelp {
	background: url("images/layout/ico-yelp.svg") no-repeat;}
	
	.no-svg footer .ico-yelp {
	background: url("images/layout/ico-yelp.png") no-repeat;}
	
footer .ico-yelp:hover {
	background: url("images/layout/ico-yelp-h.svg") no-repeat;}
	
	.no-svg footer .ico-yelp:hover {
	background: url("images/layout/ico-yelp-h.png") no-repeat;}
	
footer .counter {
	float:left;
	width: 100%;}
	
	@media only screen and (max-width : 768px) {
		footer .counter {
			margin: 0 auto;
			text-align: center;}
	}
	
	
	
/* PROCEDURES */
#procedures {
	background: url("images/layout/pattern.png") fixed;}
	
#crownbridge {
	position: relative;
	bottom: 200px;}
	
#compsitefilling, #periodontaltreatment, #rootcanal, #teethwhitening, #invisalign, #dentalimplant {
	position: relative;
	bottom: 180px;}
	
	@media only screen and (max-width : 768px) {
		#crownbridge {
			position: relative;
			bottom: 0;}
			
		#compsitefilling, #periodontaltreatment, #rootcanal, #teethwhitening, #invisalign, #dentalimplant {
			position: relative;
			bottom: -25px;}
	}
	
#procedures h3 {
	color: rgb(31,151,212);
	text-align: center;
	margin: 50px auto 0;
	background: rgb(200,229,247);
	padding: 10px 20px;}
	
#procedures .first {
	margin-top: 50px;}
	
#procedures .info {
	background: rgb(255,255,255);
	padding: 25px 3%;}
	
#procedures .center {
	text-align: center;
	margin-top: 50px;
	height: 200px;}
	
	@media only screen and (max-width : 1080px) {			
		#procedures .center {
			height: 150px;}
	}
	@media only screen and (max-width : 800px) {			
		#procedures .center {
			height: 100px;}
	}
	@media only screen and (max-width : 600px) {			
		#procedures .center {
			height: 75px;}
	}
	@media only screen and (max-width : 400px) {			
		#procedures .center {
			height: 50px;}
	}
	
#procedures .center .images {
	display: inline-block;
	height: 100%;}
	
#procedures .images img {
	height: 100%;
	width: auto;}
	
.back-box {
	text-align: center;
	margin: 100px auto 0;
	transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;}
	
.back-box a {
	background: rgb(31,151,212);
	border: 1px solid rgba(31,151,212,1);
	border-radius: 5px;
	font-weight: 500;
	font-size: 17px;
	color: rgb(255,255,255);
	letter-spacing: 1px;
	padding: 10px 3%;
	text-transform: uppercase;}
	
.back-box a:hover {
	background: rgb(145,195,230);}
	
/* DENTIST */
#dentist {
	background: url("images/layout/pattern.png") fixed;}

	@media only screen and (max-width : 480px) {
		#dentist h2 {
			font-size: 45px;}
	}

#dentist p {
	font-size: 30px;
	line-height: 50px;
	text-align: center;
	font-family: 'Quattrocento', serif;
	margin-bottom: 0;}

	@media only screen and (max-width : 768px) {
		#dentist p {
			font-size: 20px;
			line-height: 35px;
			text-align: left;}
	}

	@media only screen and (max-width : 480px) {
		#dentist p {
			font-size: 18px;
			line-height: 32px;
			text-align: left;}
	}
	
#dentist .photo {
	width: 90%;
	max-width: 350px;
	padding: 0 5%;
	margin: 0 auto;}
	
#dentist .photo img {
	margin: 0 auto;
	width: 100%;}
	
#promotions img {
	margin: 0 auto 75px;}