/* ==========================================================================
   Base styles
   ========================================================================== */



/* ==========================================================================
   Layout styles
   ========================================================================== */

.grid-1-1,
.grid-1-2,
.grid-1-3,
.grid-2-3,
.grid-1-4,
.grid-3-4 {
   display: inline-block;
   *display: inline;
   zoom: 1;
   vertical-align: top;
   margin: 0 2%;
}

.grid-1-1 {
   width: 96%;
}

.grid-1-2 {
   width: 46%;
}

.grid-1-3 {
   width: 29.333333%;
}

.grid-2-3 {
   width: 62.666667%;
}

.grid-1-4 {
   width: 21%;
}

.grid-3-4 {
    width: 71%;
}

/* ==========================================================================
   Module styles
   ========================================================================== */

/* Logo
   ========================================================================== */ 

.logo,
.logo img {
    display: block;
    float: left;
    width: 100%;
    max-width: 28.75em;
    margin: .125em 0 0 0;
}

.logo.logo-small,
.logo.logo-small img {
    float: none;
    width: 100%;
    max-width: 12.75em;
    margin: 0;
}

/* Main page styles
   ========================================================================== */  

.page-header {
    margin: 2.5em 0 2em;
}    

/* Header phone numbers
   ========================================================================== */ 

.header-number {
    /*float: left;
    width: 50%;*/
    border-bottom: 4px solid #a6ddf7;
    font-size: 1.125em;
    line-height: 1;
    margin-top: 0;
    text-align: right;
}   

.header-number span {
    font-size: 36px;
    font-size: 2.25rem;
}

/* Header navigation
   ========================================================================== */ 

.header-nav ul {
    text-align: right;
}

.header-nav li {
    display: inline;
    margin: 0 0 0 1em;
}

.header-nav a {    
    font-size: 1.125em;
    color: #005371;
    text-decoration: none;
    text-transform: uppercase;
}

/* Banner
   ========================================================================== */

.banner {
    margin-bottom: 1em;
}

.banner-caption {
    position: absolute;
    bottom: 0;
    z-index: 99;
    width: 100%;
    margin: -3.5em 0 0 0;
    background-color: rgb(0,83,113);
    background-color: rgba(0,83,113,0.9);
    text-align: left;
}

.grid-1-1 .banner-caption {
    /*padding-top: 3.5em;*/
    font-size: 1.5em;
}

.next-slide,
.prev-slide {
    top: 40%;
    width: 3em;
    height: 3em;
    margin-top: -1.5em;
    border-radius: 1.5em;
}

.next-slide span,
.prev-slide span {
    font-size: 2em;
    line-height: .7;
}

.next-slide {
    right: 1em;  
}

.prev-slide {
    left: 1em;  
}

/* Features
   ========================================================================== */
.features-box {
    padding-top: 4.6875em;
    background-position: 50% 0;
    background-repeat: no-repeat;
}

.features-box.feature-treatments {
    background-image: url(../img/dental-treatment.png);
}

.features-box.feature-completed {
    background-image: url(../img/woman-smiling.png);
}

.features-box.feature-appointment {
    background-image: url(../img/appointment-card.png);
}

.features-caption {
    margin-bottom: 0;
    background-color: rgb(0,83,113);
    background-color: rgba(0,83,113,0.9);
    text-align: left;
}

.grid-1-3 .features-caption:first-child { 
    margin-top: 0;
    margin-bottom: 1.5em;
}

.grid-1-3 > .features-caption:first-child {
    margin-top: 1em;
    margin-bottom: 0;
}

/* List of team members
   ========================================================================== */

.team-list .half {
    float: left;
    width: 50%;
}

/* Contact Form
   ========================================================================== */

.contact-form label,
.contact-form input[type="text"], 
.contact-form textarea {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: top;
}

.contact-form label {
    width: 30%;
    margin-top: .5em;
}

.contact-form input[type="text"], 
.contact-form select, 
.contact-form textarea {
    width: 70%;
}

/* Mini module styles
   ========================================================================== */   

/* Images with descriptions that appear alongside main content */

.content-figure {
    float: right;
    width: 40%;
    margin: 0 0 0 1.25em;
}

.content-figure figcaption {

}



/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 62.5em) {
    .container {
        width: 62.5em;
        margin: 0 auto;
    }

    .logo,
    .logo img {
      margin: .25em 0 0 0;
    }

    .header-number span {
        font-size: 42px;
        font-size: 2.625rem;
    }
}

/* ==========================================================================
   Helper classes
   ========================================================================== */