/*-----------------------------------------------
/* Responsive
/*---------------------------------------------*/

#mobile-header{
display: none;
}

.mobile-contact{
display: none;
}

@media screen and (max-width:1200px){
html, body{
display: block;
margin: 0;
padding: 0;
}

header{
width: 960px;
}

nav{
width: 475px;
}

.AJXCSSMenuZQdLGJC li{
float: none;
display: inline-block;
}
}


@media screen and (max-width:960px){
header{
width: 768px;
}

article{
width: 768px;
overflow: hidden;
}

.home-text{
    width: 100%;
    background-size: cover;
}

#wrapper-index{
margin-top: 0;
}

#boxes{
background: none;
height: auto;
}

section#left1{
     width: 254px;
    float: left;
    padding: 15px 0 0 15px;
    background: url('images/index/content-bg.png') no-repeat top left;
    height: 290px;
    margin-right: 25px;
}

section#left2{
width: 345px;
    float: left;
    margin: 15px 0 0 0;
    color: #333;
    background: url('images/index/content-bg.png') no-repeat -275px 0;
    height: 290px;
}

section#left2 p{
margin: 20px;
text-align: center;
}

section#left2 .promo{
margin: -17px 0 0 16px;
}

section#left3{
float: none;
clear: both;
margin: 30px 0 0 0;
    color: #333;
    background: url('images/index/content-bg.png') no-repeat -275px 0;
    width: 278px;
    height: 223px;
    padding: 34px;
}

footer{
width: 768px;
height: 100%;
padding-bottom: 10px;
}

#bg_containers .bg1, #bg_containers .bg2, #bg_containers .bg3{
min-width: 100%;
}

.mobile-contact{
display: block;
padding: 25px;
}

.desktop-contact{
display: none;
}

.contactpage .appt, .appointment .appt{
float: none;
margin: 0;
}

.appointment .appt{
padding: 0 30px;
}


.contactpage .contact{
width: auto;
float: none;
}

.contactpage .contact .extra-space{
display: none;
}

.contactpage form.cont{
padding: 0 30px;
}


.contactpage .hours{
margin-top: 20px;
float: none;
padding: 0 30px 20px 30px;
}

.contactpage .hours p{
padding-left: 0 !important;
padding-right: 0 !important;
}

nav {
    width: 335px;
}

}


@media screen and (max-width:768px){
header{
width: 600px;
}

article{
width: 600px;
}

footer{
width: 600px;
}

section#left1{
    float: none;
    margin-left: auto;
    margin-right: auto;
}

section#left2{
margin-left: auto;
    margin-right: auto;
    float: none;
}

section#left3{
    margin-left: auto;
    margin-right: auto;
}

footer #___plusone_0{
display: none !important;
}

section#left2 p{
padding-top: 20px;
}

header{
display: none;
}

#mobile-header{
display: block;
text-align: center;
position: relative;
}

.call{
font-size: 15px;
    background: rgba(255, 255, 255, .7);
    padding: 20px;
    width: 40%;
    margin: 0 auto;
    margin-bottom: 0;
}

.appt-index{
margin-bottom: 20px;
}

.mobile-nav-access img{
    position: absolute;
    right: 40px;
    top: 20px;
    width: 40px;
}

.mobile-nav{
background: #171717;
    color: #fff;
    width: 235px;
    position: absolute;
    right: 40px;
    top: 75px;
    display: none;
}

.mobile-nav ul{
list-style: none;
margin: 0;
padding: 0;
}

.mobile-nav ul li{
display: block;
margin: 0;
border-bottom: 1px solid #fff;
}

.mobile-nav ul li a{
color: #fff;
    text-decoration: none;
    display: block;
    text-align: left;
    padding: 12px;
    font-size: 16px;
}

.mobile-nav ul li a:hover{
background: #000;
}

.staff .team-img{
width: 100% !important;
height: auto !important;
margin: 0 !important;
}

.video-wrap, .video-wrap video{
width: 100% !important;
}

.gallery .slider{
width: 100% !important;
overflow: auto;
}

.reviews #D3cpWidget{
width: 100% !important;
overflow: auto;
}

.reviews .review-widget{
width: 100% !important;
overflow: auto !important;
}

.educational-videos article iframe{
width: 100% !important;
height: 520px;
}

.staff .dentist-list{
width: 100% !important;
margin-left: 0 !important;
}

.staff .dentist-list ul{
margin-left: 0 !important;
}

.logo{
    float: none;
    margin-top: 0;
    padding: 20px 0;
}
}

@media screen and (max-width:600px){
header{
width: 550px;
}

article{
width: 550px;
}

footer{
width: 550px;
}

.media article iframe{
width: 100% !important;
}

.media article .video-wrap{
padding: 0;
}



}


@media screen and (max-width:550px){
header{
width: 460px;
}

article{
width: 460px;
}

footer{
width: 460px;
}

.mobile-nav-access img{
right: 20px;
}

.mobile-nav{
right: 20px;
}

.book-online{
width: 100%;
}

.financial-district .main-img{
margin: 0 !important;
width: 100% !important;
height: auto;
float: none !important;
padding: 0 !important;
}

}


@media screen and (max-width:460px){
header{
width: 400px;
}

article{
width: 400px;
}

footer{
width: 400px;
}

.call{
width: 80%;
}

.book-online{
width: auto;
}

#mobile-header .logo-wrap{
    padding-top: 65px;
}

.page #mobile-header .logo-wrap{
    padding-top: 0;
}


#mobile-header .logo-wrap img{
    width: 110px !important;
    height: auto !important;
}

.page #mobile-header .logo-wrap img{
    width: 140px !important;
    height: auto !important;
}

.mobile-nav-access img{
width: 35px;
}

.contactpage .image_border{
width: 100%;
height: auto;
}

.contactpage article input, .contactpage article textarea{
width: 92%;
}

.appointment article input, .appointment article textarea{
width: 92% !important;
}

#mobile-header .logo{
padding-top: 75px;
}

}


@media screen and (max-width:400px){
header{
width: 320px;
}

article{
width: 320px;
}

footer{
width: 320px;
}

section#left2{
    width: auto;
    height: auto;
    background: none;
}

section#left2 p {
    margin-bottom: 0;
    margin-top: 0;
    padding-top: 5px;
}

section#left2 .promo{
margin: 0;
}

section#left3{
height: auto;
    padding: 0;
    width: auto;
    background: none;
    text-align: center;
}

.image-text, .appointment-img{
width: 90%;
height: auto;
}

.office .slider{
float: none !important;
margin: 20px 0 !important;
overflow: auto;
}

.service .service-img{
float: none;
margin: 0;
}

.service .service-img img{
width: 100%;
height: auto;
}

}


@media screen and (max-width:320px){
  
header{
width: 240px;
}

article{
width: 240px;
}

footer{
width: 240px;
}

#mobile-header .logo-wrap img{
    width: 90px !important;
}

section#left2 .promo {
    width: 100%;
}
}