/* CSS Document */

html, body { width: 100%; font-size: 16px; font-family: 'Open Sans', sans-serif; font-weight: 300; -moz-font-smoothing: antialiased; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; font-smoothing: antialiased; text-rendering: optimizeLegibility; }

* { margin: 0; padding: 0; border: 0; }
a { outline: 0; text-decoration: none; }

.desktophide { display: none; }
.mobilehide { display: block; }

/* ------------------------------------------------------------------------------------ */
/* TYPE */
/* ------------------------------------------------------------------------------------ */

h1, h3 { font-size: 1.4em; color: #333; margin: 0 0 10px 0; font-weight: 400; }
h2 { font-size: 1.2em; color: #0066B3; margin: 0 0 10px 0; font-weight: normal; }

h3.inside { font-size: 1.1em; color: #0066B3; margin: 0 0 10px 0; font-weight: normal; }

p { font-size: 1em; color: #333; line-height: 1.5em; margin: 0 0 1.5em 0; }
p.quote { font-size: 1em; color: #333; line-height: 1.5em; margin: 0 0 10px 0; text-align: justify; font-style: italic; }

.large { font-size: 1.2em; }

ul.bullets { list-style: disc; list-style-position: outside; margin-left: 1em; }
ul { list-style: none; padding: 0; margin: 0 0 30px 0; }
ol { padding: 0; margin: 0 0 20px 1.2em; line-height: 1.4em; }
li { font-size: 1em; color: #333; line-height: 1.8em; }

a { outline: 0; }
a:link { color: #0066B3; text-decoration: none; }
a:visited { color: #0066B3; text-decoration: none; }
a:hover { color: #333; text-decoration: none; }

a.blue:link { color: #0066B3; text-decoration: none; }
a.blue:visited { color: #0066B3; text-decoration: none; }
a.blue:hover { color: #333; text-decoration: none; }

.btn a { display: inline-block; min-width: 200px; padding: 15px; background: #0066B3; color: #FFF; margin: 0 0 30px 0; text-transform: uppercase; }
.btn a:hover { background: #888; color: #FFF; }

.blue { color: #0066B3; }
.lightblue { color: #7FB2D9; }

.CookieDeclarationDialogText { display: none; }

/* ------------------------------------------------------------------------------------ */
/* CONTENT */
/* ------------------------------------------------------------------------------------ */
	
.mobilehide { display: block; }
.desktophide { display: none; }	
	
#wrapper { float: left; width: 100%; }

.content { position: relative; max-width: 1000px; margin: auto; padding: 0; }
.clearfix:after { content: ' '; display: block; clear: both; }

header { position: absolute; top: 32px; left: 0; width: 1000px; min-height: 165px; z-index: 3; }
header .logo { float: left; width: 212px; height: 173px; margin: 4px 0 0 15px; }
header .contact { float: right; width: 255px; height: 40px; font-size: 1.6em; color: #333; margin: -10px 10px 0 0; text-align: right; }

.image-area { position: absolute; top: 14px; left: 0; width: 100%; height: 485px; text-align: center; }	
.image-home { position: relative; top: 57px; left: -3px; width: 100%; min-height: 420px; z-index: 0; margin: auto; } 

.filler { position: relative; top: 57px; left: 0; height: 409px; }

.container { position: relative; left: 0; max-width: 1000px; z-index: 4; }

/*.nav { float: left; width: 136px; height: 305px; margin-top: 37px; padding: 25px 0 0 15px; background: url(../images/nav-bg.png) no-repeat; }*/

.nav { float: left; width: 128px; height: 305px; margin-top: 37px; padding: 25px 0 0 15px; }
.nav ul { float: left; padding: 0; margin: 0; }
.nav li { list-style: none; font-size: 1em; line-height: 2em; }
.nav a:link { color: #7FB2D9; text-decoration: none; padding-left: 15px; }
.nav a:visited { color: #7FB2D9; text-decoration: none; padding-left: 15px; }
.nav a:hover { color: #0066B2; text-decoration: none; background: url(../images/bullet.png) left no-repeat; }
.nav a.selected { color: #0066B2; text-decoration: none; background: url(../images/bullet.png) left no-repeat; }

.slicknav_menu { display: none; }

.subnav { float: right; width: 165px; margin-top: 38px; padding: 25px 0 15px 0; }
.subnav ul { float: right; padding: 0; margin: 0; }
.subnav li { list-style: none; font-size: 1em; line-height: 2em; text-align: right; }
.subnav a:link { color: #7FB2D9; text-decoration: none; padding-right: 15px; }
.subnav a:visited { color: #7FB2D9; text-decoration: none; padding-right: 15px; }
.subnav a:hover { color: #0066B2; text-decoration: none; background: url(../images/bullet.png) right no-repeat; }
.subnav a.selected { color: #0066B2; text-decoration: none; background: url(../images/bullet.png) right no-repeat; }

aside { float: right; width: 240px; }

.team IMG { float: left; width: 150px; height: auto; margin: 0 10px 0 0; }
.image IMG { float: left; width: 100%; height: auto; margin: 20px 0; }

.textarea { float: left; width: 55%; min-height: 300px; margin: 65px 0 0 35px; padding-bottom: 20px; }
.textareasubnav { float: left; width: 64%; min-height: 300px; margin: 65px 0 0 25px; padding-bottom: 20px; }
.textareanosubnav { float: left; width: 80%; min-height: 300px; margin: 65px 0 0 35px; padding-bottom: 20px; }

.textleft { float: left; width: 48%; margin: 0 0 20px 0; }
.textright { float: right; width: 48%; margin: 0 0 20px 0; }

.rightcol { float: right; width: 180px; min-height: 200px; text-align: right; }

#reputation-reviews { float: left; width: 100%; min-height: 300px; }

.opaque { opacity: .7; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter: alpha(opacity=70); }

/* Placeholder Colour */
::-moz-placeholder { opacity: 1; }

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #FFF;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #FFF;
 }
:-ms-input-placeholder { /* IE 10+ */
  color: #FFF;
}
:-moz-placeholder { /* Firefox 18- */
 color: #FFF;
}


.video-container { position: relative; padding-bottom: 52%; padding-top: 35px; height: 0; overflow: hidden; margin: 20px 0; }
.video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* ------------------------------------------------------------------------------------ */
/* FEATURE BOXES */
/* ------------------------------------------------------------------------------------ */

.featurebox { float: right; width: 240px; height: 120px; margin-bottom: 10px; }
.featurebox .text { float: right; display: block; width: 230px; margin-top: 80px; font-size: 1em; text-align: right; background: url(../images/blue-opaque.png) repeat; color: #FFF; padding: 3px 10px 3px 0; }
.featurebox .text.offer { float: right; display: block; width: 230px; margin-top: 80px; font-size: 1em; text-align: right; background: url(../images/purple-opaque.png) repeat; color: #FFF; padding: 3px 10px 3px 0; }

.ourpractice a { float: right; display: block; width: 240px; height: 120px; background: url(../images/practice-bw.png) no-repeat; margin-bottom: 20px; }
.ourpractice a:visited { float: right; background: url(../images/practice-bw.png) no-repeat; }
.ourpractice a:hover { float: right; background: url(../images/practice-over.png) no-repeat; }
.ourpractice a.selected { float: right; background: url(../images/practice-over.png) no-repeat; }

.test a { float: right; display: block; width: 240px; height: 120px; background: url(../images/testimonial-bw.png) no-repeat; margin-bottom: 20px; }
.test a:visited { float: right; background: url(../images/testimonial-bw.png) no-repeat; }
.test a:hover { float: right; background: url(../images/testimonial-over.png) no-repeat; }
.test a.selected { float: right; background: url(../images/testimonial-over.png) no-repeat; }

.medicalhist a { float: right; display: block; width: 240px; height: 120px; background: url(../images/medical-history-bw.png) no-repeat; margin-bottom: 20px; }
.medicalhist a:visited { float: right; background: url(../images/medical-history-bw.png) no-repeat; }
.medicalhist a:hover { float: right; background: url(../images/medical-history-over.png) no-repeat; }
.medicalhist a.selected { float: right; background: url(../images/medical-history-over.png) no-repeat; }

.first-step a { float: right; display: block; width: 240px; height: 120px; background: url(../images/first-step-bw.png) no-repeat;  margin-bottom: 20px; }
.first-step a:visited { float: right; background: url(../images/first-step-bw.png) no-repeat; }
.first-step a:hover { float: right; background: url(../images/first-step-over.png) no-repeat; }
.first-step a.selected { float: right; background: url(../images/first-step-over.png) no-repeat; }

.invisalign a { float: right; display: block; width: 240px; height: 120px; background: url(../images/invisalign-bw.png) no-repeat;  margin-bottom: 20px; }
.invisalign a:visited { float: right; background: url(../images/invisalign-bw.png) no-repeat; }
.invisalign a:hover { float: right; background: url(../images/invisalign-over.png) no-repeat; }
.invisalign a.selected { float: right; background: url(../images/invisalign-over.png) no-repeat; }

.hygienist a { float: right; display: block; width: 240px; height: 120px; background: url(../images/hygiene-bw.png) no-repeat;  margin-bottom: 20px; }
.hygienist a:visited { float: right; background: url(../images/hygiene-bw.png) no-repeat; }
.hygienist a:hover { float: right; background: url(../images/hygiene-over.png) no-repeat; }
.hygienist a.selected { float: right; background: url(../images/hygiene-over.png) no-repeat; }

.gentle-touch a { float: right; display: block; width: 240px; height: 120px; background: url(../images/gentle-touch-bw.png) no-repeat;  margin-bottom: 20px; }
.gentle-touch a:visited { float: right; background: url(../images/gentle-touch-bw.png) no-repeat; }
.gentle-touch a:hover { float: right; background: url(../images/gentle-touch-over.png) no-repeat; }
.gentle-touch a.selected { float: right; background: url(../images/gentle-touch-over.png) no-repeat; }

.appointments a { float: right; display: block; width: 240px; height: 120px; background: url(../images/survey-bw.png) no-repeat;  margin-bottom: 20px;}
.appointments a:visited { float: right; background: url(../images/survey-bw.png) no-repeat; }
.appointments a:hover { float: right; background: url(../images/survey-over.png) no-repeat; }
.appointments a.selected { float: right; background: url(../images/survey-over.png) no-repeat; }

.feedback a { float: right; display: block; width: 240px; height: 120px; background: url(../images/feedback-bw.png) no-repeat;  margin-bottom: 20px;}
.feedback a:visited { float: right; background: url(../images/feedback-bw.png) no-repeat; }
.feedback a:hover { float: right; background: url(../images/feedback-over.png) no-repeat; }
.feedback a.selected { float: right; background: url(../images/feedback-over.png) no-repeat; }

.survey a { float: right; display: block; width: 240px; height: 120px; background: url(../images/appointment-bw.png) no-repeat;  margin-bottom: 20px;}
.survey a:visited { float: right; background: url(../images/appointment-bw.png) no-repeat; }
.survey a:hover { float: right; background: url(../images/appointment-over.png) no-repeat; }
.survey a.selected { float: right; background: url(../images/appointment-over.png) no-repeat; }

.experience a { float: right; display: block; width: 240px; height: 120px; background: url(../images/experience-bw.png) no-repeat;  margin-bottom: 20px;}
.experience a:visited { float: right; background: url(../images/experience-bw.png) no-repeat; }
.experience a:hover { float: right; background: url(../images/experience-over.png) no-repeat; }
.experience a.selected { float: right; background: url(../images/experience-over.png) no-repeat; }

/* ------------------------------------------------------------------------------------ */
/* BACKGROUND IMAGES */
/* ------------------------------------------------------------------------------------ */

.home { background: url(../images/main-images/main-image-home-bg.jpg) no-repeat; background-position: center; }
.team { background: url(../images/main-images/main-image-team.jpg) no-repeat; background-position: center; }
.practice { background: url(../images/main-images/main-image-practice.jpg) no-repeat; background-position: center; }
.hygiene { background: url(../images/main-images/main-image-hygiene.jpg) no-repeat; background-position: center; }
.ortho { background: url(../images/main-images/main-image-straightening.jpg) no-repeat; background-position: center; }
.treatments { background: url(../images/main-images/main-image-treatments.jpg) no-repeat; background-position: center; }
.whitening { background: url(../images/main-images/main-image-whitening.jpg) no-repeat; background-position: center; }
.implants { background: url(../images/main-images/main-image-implants.jpg) no-repeat; background-position: center; }
.fillings { background: url(../images/main-images/main-image-fillings.jpg) no-repeat; background-position: center; }
.crowns { background: url(../images/main-images/main-image-crowns.jpg) no-repeat; background-position: center; }
.bridges { background: url(../images/main-images/main-image-bridges.jpg) no-repeat; background-position: center; }
.veneers { background: url(../images/main-images/main-image-veneers.jpg) no-repeat; background-position: center; }
.contacts { background: url(../images/main-images/main-image-contact.jpg) no-repeat; background-position: center; }
.emergency { background: url(../images/main-images/main-image-emergency.jpg) no-repeat; background-position: center; }
.testimonials { background: url(../images/main-images/main-image-testimonials.jpg) no-repeat; background-position: center; }

.jon { background: url(../images/main-images/main-image-jon.jpg) no-repeat; background-position: center; }
.rob { background: url(../images/main-images/main-image-rob.jpg) no-repeat; background-position: center; }

/* ------------------------------------------------------------------------------------ */
/* SHARE BUTTONS
/* ------------------------------------------------------------------------------------ */

ul.share-buttons {
  list-style: none;
  padding: 0;
}

ul.share-buttons li{
  display: inline;
}

ul.share-buttons .sr-only{
  position: absolute;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0;
  border: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
}


/* ------------------------------------------------------------------------------------ */
/* FORMS */
/* ------------------------------------------------------------------------------------ */

.enquiry { position: absolute; top: 220px; right: -4px; width: 212px; height: 135px; padding: 15px; background: url(../images/form-bg.png) no-repeat; z-index: 20; }
.enquiry h1 { font-size: 18px; color: #0066B3; font-weight: normal; margin: 0; }
.enquiry p { font-size: 12px; color: #7FB2D9; margin: 0 0 5px 0; text-align: left; }
.enquiry label { float: left; width: 50px; padding: 2px 2px 2px 0; margin: 0; font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 15px; color: #0066B3; } 
.enquiry input { float: left; width: 155px; padding: 2px; background: #0066B3; border: 0; margin: 0 0 1px 0; font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 15px; color: #FFF; } 
.enquiry .send { float: right; margin: 10px 1px 0 0; display: block; width: 70px; height: 26px; padding: 5px; cursor: pointer; border: none; background: url(../images/send-bg.png) no-repeat; font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 15px; color: #FFF; -webkit-appearance: none; }

.offers { float: left; width: 475px; height: 135px; }
.offers fieldset { border: 1px solid #0066B3; padding: 10px; }
.offers legend { font-size: 18px; color: #0066B3; font-weight: normal; margin: 0; }
.offers p { font-size: 12px; color: #7FB2D9; margin: 0 0 15px 0; text-align: left; }
.offers label { float: left; width: 45px; padding: 0; margin: 0; font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 15px; color: #0066B3; } 
.offers input { float: left; width: 300px; padding: 2px; background: #0066B3; border: 0; margin: 0 0 2px 0; font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 15px; color: #FFF; } 
.offers .send { float: right; margin: -5px 0 0 0; display: block; width: 70px; height: 26px; padding: 4px; cursor: pointer; border: none; background: url(../images/send-bg.png) no-repeat; font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 15px; color: #FFF;  -webkit-appearance: none; }

.form { float: left; width: 100%; margin-bottom: 30px; }
.form .row { float: left; width: 96%; padding: 2%; background: #0066B3; margin-bottom: 2px; }
.form input { float: left; width: 100%; background: transparent; border: 0; font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 15px; color: #FFF; } 
.form textarea { float: left; width: 100%; width: 100%; height: 100px; background: transparent; font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 15px; color: #FFF; }
.form [type=checkbox] { display: block; margin: 5px 8px 0 0; width: 17px; float: left; }
.form .send { float: left; display: block; width: 100%; height: 40px; background: #7FB2D9; padding: 1%; cursor: pointer; border: none; font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 15px; color: #FFF;  -webkit-appearance: none; }
.form .send:hover { background: #0066B3; }
.form button.send { float: left; display: block; width: 100%; height: 40px; background: #7FB2D9; padding: 1%; cursor: pointer; border: none; font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 15px; color: #FFF;  -webkit-appearance: none; }
.form button:hover { background: #0066B3; }


.apps { float: left; width: 100%; min-height: 135px; background: #FFF; }
.apps fieldset { border: 1px solid #0066B3; padding: 10px; }
.apps legend { font-size: 18px; color: #0066B3; font-weight: normal; margin: 0; }
.apps p { font-size: 12px; color: #0066B3; margin: 0 0 15px 0; text-align: left; }
.apps label { float: left; width: 100%; padding: 0; margin: 0; font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 15px; color: #0066B3; } 
.apps input { float: left; width: 100%; padding: 4px; background: #0066B3; border: 0; margin: 0 0 2px 0; font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 15px; color: #FFF; } 
.apps select { float: left; width: 100%; padding: 4px; background: #0066B3; border: 0; margin: 0 0 2px 0; font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 15px; color: #FFF; -webkit-appearance: none; }
.apps textarea { float: left; width: 94%; height: 70px; overflow: auto; padding: 4%; background: #0066B3; border: 0; font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 15px; color: #FFF; } 
.apps .send { display: block; margin: 5px 0 0 0; width: 100px; height: 35px; padding: 0; cursor: pointer; border: none; background: #0066B3; font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 15px; color: #FFF; -webkit-appearance: none; }
.apps .col { float: left; width: 46%; margin: 0 2%; }

.medhist { float: left; width: 100%; padding: 0%; margin: 20px 0; border-radius: 0; }
.medhist a { color: #0066B3; }
.medhist input { width: 96%; padding: 10px; background: #CCC; border: 0; margin: 0; font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 15px; color: #000; } 
.medhist textarea { width: 96%; padding: 10px; height: 80px; background: #CCC; border: 0; margin: 0; font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 15px; color: #000;  } 
.medhist label { display: inline-block; margin: 10px 0 5px; float: left; text-align: left; font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 15px; color: #0066B3; }
.medhist [type=checkbox] { display: block; margin: 5px 8px 0 0; width: 17px; float: left; }
.medhist [type=radio] { display: block; margin: 15px 8px 0 5px; width: 17px; float: left; }
.medhist .send { float: left; display: block; width: 100%; height: 40px; margin-top: 20px; background: #333; padding: 1%; cursor: pointer; border: none; font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 15px; color: #FFF;  -webkit-appearance: none; }
.medhist .send:hover { background: #0066B3; }
.medhist .error { display: block; float: left; width: 100%; margin: 0 0 15px; color: #F70004; }



/* ------------------------------------------------------------------------------------ */
/* ACCORDION */
/* ------------------------------------------------------------------------------------ */

.accordiontitle { display: block; width: 100%; padding: 14px 0; background-color: #0066B3; margin-top: 40px; }

ul#accordion { padding: 2px 0; margin-bottom: 40px; }
ul#accordion li { list-style-type: none; }
ul#accordion p { color: #333; }
ul#accordion a { text-decoration: none; color: #0066B3; }
ul#accordion a:hover { text-decoration: none; }
ul#accordion a:focus { text-decoration: underline; }

button { cursor: pointer; margin: 0; font-family: 'Open Sans', sans-serif; font-weight: 300; }

/* Helpers */
.is-hidden { display: none; }
.accordion__item { width: 100%; border-top: 1px solid #fff;  }
.accordion__item:first-child { border: none; }
.accordion__trigger { display: block; width: 100%; padding: 10px 20px; color: #FFF; background-color: #0066B3; border: none; font-size: 1.1em; text-align: left; }
.accordion__item.is-open .accordion__trigger { color: #fff; background-color: #0066B3; }
.accordion__content { background-color: #EEE; padding: 20px;  }
.accordion__content p { margin: 0; margin-bottom: 1.5em; line-height: 1.4em; }


/* ------------------------------------------------------------------------------------ */
/* SLIDESHOW */
/* ------------------------------------------------------------------------------------ */

#slideshow { position: relative; height: 350px; text-align: center; margin: 0 0 0 29px; }
#slideshow IMG { position: absolute; top: 0; left: 0; z-index: 8; opacity: 0.0; }
#slideshow IMG.active { z-index: 10; opacity: 1.0; }
#slideshow IMG.last-active { z-index: 9; }

/* ------------------------------------------------------------------------------------ */
/* FOOTER */
/* ------------------------------------------------------------------------------------ */

.footer { float: left; width: 100%; background: #B3B3B3; }
.footer .content { position: relative; max-width: 1000px; min-height: 40px; padding: 15px 0; margin: auto; }
.footer .address { float: left; width: 100%; text-align: center; font-size: 13px; color: #FFF; line-height: 1.5em; }
.footer .credits { font-size: 13px; color: #FFF; }
.footer .social { float: left; width: 190px; text-align: left; font-size: 13px; color: #FFF; line-height: 1.5em; }
.footer a:link { color: #FFF; text-decoration: none; }
.footer a:visited { color: #FFF; text-decoration: none; }
.footer a:hover { color: #0066B3; text-decoration: none; }

.quicklinks { float: left; width: 100%; background: #0066B3; }
.quicklinks .title { position: relative; max-width: 1000px; font-size: 14px; color: #FFF; margin: 30px auto 0; }
.quicklinks .content { position: relative; max-width: 1000px; margin: 0 auto 30px; }
.quicklinks .col-wrap { float: left; width: 215px; min-height: 180px; border-left: 1px solid #FFF; padding: 0 0 0 25px; margin: 0 0 20px 0; } 
.quicklinks .col-wrap:first-child { border: 0; padding: 0; }
.quicklinks ul { list-style: none; padding: 0; margin: 0; }
.quicklinks li { line-height: 1.6em; color: #FFF; font-size: 13px; }
.quicklinks h2 { font-size: 14px; color: #7FB2D9; font-weight: normal; margin: 0; }

.quicklinks a:link { color: #FFF; text-decoration: none; }
.quicklinks a:visited { color: #FFF; text-decoration: none; }
.quicklinks a:hover { color: #7FB2D9; text-decoration: none; }


/* ------------------------------------------------------------------------------------ */
/* GRID */
/* ------------------------------------------------------------------------------------ */

.one-half, .one-third, .one-fourth, .two-thirds, .three-fourths, .full-width { display: inline-block; float: left; margin-right: 2%; }

.one-half { width: 48%; }
.one-third { width: 32%; }
.one-fourth { width: 23.5%; }
.two-thirds { width: 64%; }
.three-fourths { width: 74%;}
.full-width { width: 100%; }
.column-last { margin-right: 0 !important; }


@media only screen 
and (min-width : 768px) 
and (max-width : 1023px)
and (orientation : portrait) {

.image-home { top: -40px; left: 0; width: 100%; min-height: 260px; margin-bottom: 50px; } 
.image-area { top: 50px; left: 0; width: 100%; height: 485px; text-align: center; }	
.filler { top: 57px; left: 0; height: 260px; }

}

@media only screen 
and (min-width : 531px) 
and (max-width : 767px)
and (orientation : portrait) {

.image-home { top: -20px; left: 0; width: 100%; min-height: 220px; margin-bottom: 40px; } 
.image-area { top: 30px; left: 0; width: 100%; height: 485px; text-align: center; }	
.filler { top: 57px; left: 0; height: 240px; }

}

@media only screen 
and (min-width : 320px) 
and (max-width : 530px)
and (orientation : portrait) {

.image-home { top: 0; left: 0; width: 100%; min-height: 140px; } 
.image-area { top: 0; left: 0; width: 100%; height: 485px; text-align: center; }	
.filler { top: 57px; left: 0; height: 150px; }

}

@media only screen 
and (min-width : 320px) 
and (max-width : 669px)
and (orientation : landscape) {

.image-home { top: -20px; left: 0; width: 100%; min-height: 240px; } 
.image-area { top: 30px; left: 0; width: 100%; height: 485px; text-align: center; }	
.filler { top: 57px; left: 0; height: 240px; }

}


@media only screen 
and (min-width : 320px) 
and (max-width : 1023px) {
	
body { font-size: 15px; }
	
.mobilehide { display: none; }
.desktophide { display: block; }
	
/* ------------------------------------------------------------------------------------ */
/* CONTENT */
/* ------------------------------------------------------------------------------------ */

.nav { display: none; }
.slicknav_menu { display: block; }
ul.slicknav_nav { position: absolute; width: 100%; background-color: #0066B3; margin-top: 50px; padding: 15px 0; z-index: 9999; }

header { position: relative; width: 90%; padding: 0 5%; min-height: 170px; }
header .logo { width: 200px; height: 85px; margin: 20px 0 0 0; }
header .logo IMG { width: 100px; height: auto; }
header .contact { float: left; width: 100%; text-align: left; margin: 0; font-size: 1.3em; }

.subnav { float: left; width: 100%; }
.subnav { float: left; width: 100%; margin-top: 0;  }
.subnav ul { float: left; padding: 0; margin: 0; width: 100%; }
.subnav li { list-style: none; float: left; width: 100%; background: #0066B2; text-align: center; margin-bottom: 1px; font-size: 1em; }

.subnav a:link { display: block; color: #FFF; padding: 10px; }
.subnav a:visited { color: #FFF; padding-right: 0; }
.subnav a:hover { color: #FFF; background: #7FB2D9; }
.subnav a.selected { color: #FFF; background: #7FB2D9; }

aside { float: left; width: 100%; }

.content { position: none; float: left; width: 100%; padding: 0; }
.container { position: none; float: left; width: 100%; }

.textarea { float: left; width: 90%; margin: 30px 0 0; padding: 5%; }
.textareasubnav { float: left; width: 90%; margin: 30px 0 0; padding: 5%; }
.textareanosubnav { float: left; width: 90%; margin: 30px 0 0; padding: 5%; }

.textleft { width: 100%; }
.textright { float: left; width: 100%; }

.address { text-align: center; }

.rightcol { float: left; width: 90%; margin: 0 5%; }
#reputation-reviews { width: 100%; }

/* ------------------------------------------------------------------------------------ */
/* FEATURE BOXES */
/* ------------------------------------------------------------------------------------ */

.featurebox { float: none; display: block; position: relative; margin: auto; }

.ourpractice { float: none; display: block; position: relative; margin: auto; }
.ourpractice a { float: left; display: block; width: 240px; height: 120px; background: url(../images/practice-bw.png) no-repeat; margin-bottom: 20px; }
.ourpractice a:visited { float: left; background: url(../images/practice-bw.png) no-repeat; }
.ourpractice a:hover { float: left; background: url(../images/practice-over.png) no-repeat; }
.ourpractice a.selected { float: left; background: url(../images/practice-over.png) no-repeat; }

.first-step { float: none; display: block; position: relative; margin: auto;  }
.first-step a { float: left; display: block; width: 240px; height: 120px; background: url(../images/first-step-bw.png) no-repeat;  margin-bottom: 20px; }
.first-step a:visited { float: left; background: url(../images/first-step-bw.png) no-repeat; }
.first-step a:hover { float: left; background: url(../images/first-step-over.png) no-repeat; }
.first-step a.selected { float: left; background: url(../images/first-step-over.png) no-repeat; }

.gentle-touch { float: none; display: block; position: relative; margin: auto; }
.gentle-touch a { float: left; display: block; width: 240px; height: 120px; background: url(../images/gentle-touch-bw.png) no-repeat;  margin-bottom: 20px; }
.gentle-touch a:visited { float: left; background: url(../images/gentle-touch-bw.png) no-repeat; }
.gentle-touch a:hover { float: left; background: url(../images/gentle-touch-over.png) no-repeat; }
.gentle-touch a.selected { float: left; background: url(../images/gentle-touch-over.png) no-repeat; }

.appointments { float: none; display: block; position: relative; margin: auto;  }
.appointments a { float: left; display: block; width: 240px; height: 120px; background: url(../images/survey-bw.png) no-repeat;  margin-bottom: 20px;}
.appointments a:visited { float: left; background: url(../images/survey-bw.png) no-repeat; }
.appointments a:hover { float: left; background: url(../images/survey-over.png) no-repeat; }
.appointments a.selected { float: left; background: url(../images/survey-over.png) no-repeat; }

/* ------------------------------------------------------------------------------------ */
/* SLIDESHOW */
/* ------------------------------------------------------------------------------------ */

#slideshowmobile { position: relative; width: 100%; text-align: center; margin: 0; }
#slideshowmobile IMG { position: absolute; top: 0; left: 0; z-index: 8; opacity: 0.0; width: 100%; height: auto; }
#slideshowmobile IMG.active { z-index: 10; opacity: 1.0; }
#slideshowmobile IMG.last-active { z-index: 9; }

/* ------------------------------------------------------------------------------------ */
/* BACKGROUND IMAGES */
/* ------------------------------------------------------------------------------------ */

.home { background: none; }
.team { background-size: 230%; }
.practice { background-size: 230%; }
.hygiene { background-size: 230%; }
.ortho { background-size: 230%; }
.treatments { background-size: 230%; }
.whitening { background-size: 230%; }
.implants { background-size: 230%; }
.fillings { background-size: 230%; }
.crowns { background-size: 230%; }
.bridges { background-size: 230%; }
.veneers { background-size: 230%; }
.contacts { background-size: 230%; }
.emergency { background-size: 230%; }
.testimonials { background-size: 230%; }

.jon { background-size: 230%; }
.rob { background-size: 230%; }

/* ------------------------------------------------------------------------------------ */
/* FORM */
/* ------------------------------------------------------------------------------------ */

.apps textarea { width: 98%; padding: 2%; margin-left: 0;  } 
.apps .col { float: left; width: 96%; margin: 0 1%; }

/* ------------------------------------------------------------------------------------ */
/* FOOTER */
/* ------------------------------------------------------------------------------------ */

.footer .content { width: 100%; }
.footer .address { float: left; width: 90%; text-align: left; padding: 5%; }
.footer .social { text-align: left; padding: 5%; }

.quicklinks .title { width: 90%; }
.quicklinks .content { width: 100%; }
.quicklinks .col-wrap { width: 90%; border-left: none; border-top: 1px solid #FFF; padding: 5%; min-height: 100px; } 
.quicklinks .col-wrap:first-child { border: 0; padding: 5%; }


/* ------------------------------------------------------------------------------------ */
/* GRID */
/* ------------------------------------------------------------------------------------ */

.one-half, .one-third, .one-fourth, .two-thirds, .three-fourths, .full-width { margin-right: 0; }

.one-half { width: 100%; }
.one-third { width: 100%; }
.one-fourth { width: 100%; }
.two-thirds { width: 100%; }
.three-fourths { width: 100%; padding-right: 0; }


}