/*
Pallettes
#103b4c - darkest blue, text color
#00364a - dark blue background color (header and footer)
#335e6e or #005c7e - mid blue (use white text, also default link color and nav bg)
#E1EEF2 or #E1EEF2 - light blue (use dark text)
#9ed2e5 - link colour for white text
#909ca3 - pale grey text
#eff4f7 - very light grey
#405E69 - accents on dark blue (lines etc)
*/


* {
    margin: 0;
}

html, body {
    /*height: 100%;*/
    font-family: 'open_sansregular', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #103b4c;
}
table {
    width: 100%;
}
td {
    padding: 0 12px;
    vertical-align: middle;
    width: 50%;
}
tr {
    border-bottom: 1px #E1EEF2 solid;
}

/* ----------------------------------------------- Type */

h1, h2, h3, h4, h5, h6, p, body {
    margin: 0px;
    padding: 0px;
}

p, ol, ul, blockquote {
    margin-top: 12px;
    margin-bottom: 12px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'open_sansitalic';
    margin-top: 24px;
    margin-bottom: 24px;
}

h1, .h1 { font-size: 24px; line-height: 1.5; }
h2 { font-size: 20px; line-height: 1.2; font-family: 'open_sansitalic';}
h3 { font-size: 16px; line-height: 1.5; font-family: 'open_sansitalic';}
h4 { font-size: 16px; line-height: 1.5; text-transform: uppercase; font-family: 'open_sansregular'; }
h5 { font-size: 16px; line-height: 1.5; text-transform: uppercase; font-family: 'open_sansregular'; }
h6 { font-size: 16px; line-height: 1.5; text-transform: uppercase; font-family: 'open_sansregular'; }

h1.entry-title a,
h2.entry-title a {
    text-decoration: none;
}
h1.entry-title a:hover,
h2.entry-title a:hover {
    text-decoration: underline;
}

strong, b, .bold {
    /* bold */
    font-family: 'open_sansbold', sans-serif;
}

em, i, .italic {
    /* italic */
    font-family: 'open_sansitalic', sans-serif;
}

h1 em, h2 em, h3 em, h4 em, h5 em, h6 em, strong em, b em, h1 i, h2 i, h3 i, h4 i, h5 i, h6 i, strong i, b i, em h1, em h2, em h3, em h4, em h5, em h6, em strong, em b, i h1, i h2, i h3, i h4, i h6, i strong, i b, .bolditalic {
    /* bold italic */
    font-family: 'open_sansbold_italic', sans-serif;
}

.bigger {
    font-size: 120%;
    line-height: 1.5;
}
.smaller {
    font-size: 80%;
    line-height: 1.875;
}
.uppercase {
    text-transform: uppercase;
}
.lowercase {
    text-transform: lowercase;
}

a {
    text-decoration: underline;
    color: #335e6e;
}
a:visited {

}
a:hover {
    text-decoration: none;
}

/* ----------------------------------------------- Elements */

ul, 
ol, 
blockquote {
    padding-left: 24px;
}
ul {
    list-style-type: disc;
}
ol {
    list-style-type: decimal;
}
blockquote {
    color: #666;
    font-style: italic;
}
a.button {
    text-decoration: none;
    padding: 6px 12px;
    /*text-transform: uppercase;*/
    display: inline-block;
    box-sizing: border-box;
    background-color: #9ed2e5;
    color: #103b4c !important;
    font-weight: bold;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    font-family: 'open_sansregular';
    /*font-size: 16px;*/
}
.outer-wrap {

}
.inner-wrap {
    margin-left: auto;
    margin-right: auto;
    width: 90%;
}
section#content {
    /*margin-bottom: 48px;*/
}
section.entry-content {
    margin-bottom: 24px;
}

@media only screen and (min-width: 768px) {
    ul, 
    ol, 
    blockquote {
        padding-left: 36px;
    }
}

.fwd-arrow-blue::after {
    content: url('../img/fwd-arrow-blue.png');
    margin-left: 6px;
}
.fwd-arrow-white::after {
    content: " >";
}
a.fwd-arrow-blue,
a.fwd-arrow-white {
    text-decoration: none;
}

/* ----------------------------------------------- Images */

img {
    max-width: 100%;
    display: block;
}
img.alignleft,
img.alignright {
    float: none;
    display: block;
    margin: 12px auto;
}

img.aligncenter {
    display: block;
    margin: 12px auto;
}

@media only screen and (min-width: 768px) {
    img.alignleft {
        float: left;
        margin: 6px 12px 12px 0;
    }
    img.alignright {
        float: right;
        margin: 6px 0 12px 12px;
    }
}

/* ----------------------------------------------- Alignment */

.textcenter {
    text-align: center;
}
.textleft {
    text-align: left !important;
}
.pull-right {
    float: right;
}
.aligntop {
    vertical-align: top;
}
.alignmiddle {
    vertical-align: middle;
}
.aligncenter {
    margin-left: auto;
    margin-right: auto;
}

/* ----------------------------------------------- Margins and Padding */

.marginb12 {
    margin-bottom: 12px;
}
.marginb24 {
    margin-bottom: 24px;
}
.marginb36 {
    margin-bottom: 36px;
}
.marginb48 {
    margin-bottom: 48px;
}
.margint24 {
    margin-top: 24px;
}
.margint36 {
    margin-top: 36px;
}
.nomargin {
    margin: 0;
}

.padded {
    padding: 6px 12px;
    box-sizing: border-box;
}

.padding12 {
    padding: 12px;
}
.paddingv12 {
    padding-top: 12px;
    padding-bottom: 12px;
}
.paddingv24 {
    padding-top: 24px;
    padding-bottom: 24px;
}

.width100pc {
    width: 100% !important;
}
.width50pc {
    width: 50%;
}
.width33pc {
    width: 33.33%;
}

/* ----------------------------------------------- Columns */

.column-holder {
    font-size: 0;
}
.column {
    display: inline-block;
    font-size: 16px;
    vertical-align: top;
    width: 100%;
}

@media only screen and (min-width: 960px) {
    .column-half {
        width: 48%;
        margin-right: 2%;
    }
    .column-half-last {
        width: 48%;
    }
    .column-third {
        width: 31%;
        margin-right: 1%;
    }
    .column-last {
        margin-right: 0;
    }
}

/* ----------------------------------------------- Colours */

.lightbluebg {
    background-color: #E1EEF2;
}
.midbluebg {
    background-color: #335e6e;
}

/* ----------------------------------------------- Other Reusable */

.hidden {
    display: none;
}

.mobile-only,
.tablet-and-mobile {
    display: block;
}
.tablet-only,
.desktop-only {
    display: none; 
}

@media only screen and (min-width: 768px) {
    .mobile-only {
        display: none;
    }
    .tablet-only,
    .tablet-and-mobile {
        display: block;
    }
}
@media only screen and (min-width: 960px) {
    .tablet-only,
    .tablet-and-mobile {
        display: none;
    }
    .desktop-only {
        display: block;
    }
}

img.desaturate {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

/* ----------------------------------------------- Media Queries */

@media only screen and (min-width: 768px) {
    .inner-wrap {
        width: 600px;
    }
}
@media only screen and (min-width: 960px) {
    .inner-wrap {
        width: 768px;
    }
}
@media only screen and (min-width: 1200px) {
    .inner-wrap {
        width: 960px;
    }
}

/* ----------------------------------------------- Elements */

.testimonial {
    background-color: #E1EEF2;
    padding: 3px 15px;
    margin: 12px 0;
}
p.testimonial-quote::before {
    content: "\"";
}
p.testimonial-quote::after {
    content: "\"";
}
.testimonial .more-link {
    float: right;
}

/* ----------------------------------------------- CTA */

section#cta {
    text-align: center;
}
section#cta .bigger {
    font-size: 16px;
}
section#cta a.button {
    padding: 12px 24px;
    margin-left: 12px;
    margin-top: 12px;
}
@media only screen and (min-width: 960px) {
    section#cta {
        text-align: right;
    }
    section#cta .bigger {
        font-size: 120%;
    }
}

/* ----------------------------------------------- Full width treatment menu */

section#treatments-menu-large {
    margin-top: 48px;
    font-size: 0;
}

section#treatments-menu-large .treatment {
    border-top: #E1EEF2 1px solid;
    width: 100%;
    font-size: 16px;
}

section#treatments-menu-large .treatment:hover {
    color: #103b4c;
}

section#treatments-menu-large img {
    margin: 0 auto;
}
section#treatments-menu-large h3 {
    text-align: center;
}
section#treatments-menu-large a {
    text-decoration: none;
}
@media only screen and (min-width: 600px) {
    section#treatments-menu-large .treatment {
        width: 50%;
        display: inline-block;
        vertical-align: top;
        padding: 0 12px;
        box-sizing: border-box;
        text-align: left;
    }
    section#treatments-menu-large h3 {
        text-align: left;
    }
}
@media only screen and (min-width: 960px) {
    section#treatments-menu-large .treatment {
        width: 33.33%;
    }
}
@media only screen and (min-width: 1200px) {
    section#treatments-menu-large .treatment {
        width: 25%;
    }
}

/* ----------------------------------------------- Forms */

textarea {
    font-size: 16px;
    line-height: 1.5;
    width: 100%;
}
input, 
textarea {
    border: 0;
    padding: 3px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.5;
}
input[type="submit"] {
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    cursor: pointer;
}

/* --------------- page forms */

#appt-form,
#consult-form,
#wpcf7-f67-p86-o1,
#feedback-form {
    background-color: #E1EEF2;
    padding: 6px 12px;
}

#question-form-name,
#question-form-email,
#question-form-captchar,
#appt-form-captchar,
#consult-form-captchar,
#feedback-form-captchar {
    width: 80%;
}
#question-form-captchac,
#appt-form-captchac,
#consult-form-captchac,
#feedback-form-captchac {
    display: inline-block;
    width: 20%;
    padding-right: 12px;
    box-sizing: border-box;
}

#question-form-captchac,
#question-form-captchar,
#appt-form-captchar,
#appt-form-captchac,
#consult-form-captchar,
#consult-form-captchac,
#feedback-form-captchar,
#feedback-form-captchac {
    vertical-align: middle;
}
#question-form-submit,
#appt-form-name input,
#appt-form-email input,
#appt-form-phone input,
#appt-form-new-patient,
#consult-form-name input,
#consult-form-email input,
#consult-form-phone input,
#consult-form-submit,
#appt-form-submit,
#feedback-form-name input,
#feedback-form-email input,
#feedback-form-date input,
#feedback-form select,
#feedback-form-submit,
#appt-form select
 {
    width: 100%;
}

#feedback-form select,
#appt-form select {
    font-size: 16px;
}

/* --------------- Appointment form */


.wpcf7-list-item {
    display: block;
}

@media only screen and (min-width: 768px) {
    #appt-form-name input,
    #appt-form-email input,
    #appt-form-phone input,
    #appt-form-new-patient,
    #consult-form-name input,
    #consult-form-email input,
    #consult-form-phone input,
    #feedback-form-name input,
    #feedback-form-email input,
    #feedback-form-date input {
        width: 80%;
    }
    #appt-form-name .label,
    #appt-form-email .label,
    #appt-form-phone .label,
    #consult-form-name .label,
    #consult-form-email .label,
    #consult-form-phone .label,
    #feedback-form-name .label,
    #feedback-form-email .label,
    #feedback-form-date .label {
        width: 20%;
        padding-right: 12px;
        box-sizing: border-box;
        display: inline-block;
        text-align: right;
        vertical-align: top;
    }
    #feedback-form select,
    #appt-form select {
        width: 50%;
        display: block;
    }
}

#appt-form-submit,
#consult-form-submit,
.page-template-contact #question-form-submit,
#feedback-form-submit {
    background-color: #005c7e;
    color: #fff;
}

/* --------------- contact page question form */

#wpcf7-f67-p86-o1 .label {
    width: 30%;
    text-align: right;
    display: inline-block;
    padding-right: 12px;
    box-sizing: border-box;
}
#question-form-name,
#question-form-email {
    width: 70%;
}

@media only screen and (min-width: 960px) {
    #question-form-captchac,
    #question-form-captchar {
        width: 50%;
    }
}

/* --------------- sidebar question form */

aside#sidebar #question-form .label {
    width: 20%;
    display: inline-block;
    text-align: right;
    padding-right: 12px;
    box-sizing: border-box;
}
aside#sidebar #question-form-name,
aside#sidebar #question-form-email {
    width: 80%;
} 

aside#sidebar #question-form {
    font-size: 14px;
    background-color: #eee;
    color: #333;
    padding: 12px;
    box-sizing: border-box;
    margin-bottom: 24px;
}
aside#sidebar input, 
aside#sidebar textarea {
    font-size: 14px;
}

@media only screen and (min-width: 960px) {
    aside#sidebar #question-form-name,
    aside#sidebar #question-form-email {
        width: 100%;
    }
}

/* ----------------------------------------------- Sidebar */

aside#sidebar {
    margin-bottom: 48px;
    font-size: 0;
}
aside#sidebar a:hover {
    color: #103b4c;
}

/* --------------- treatments */

#sidebar-treatments {
    margin-bottom: 24px;
}

aside#sidebar .treatment {
    border-top: 1px #E1EEF2 solid;
}
aside#sidebar .treatment:first-child {
    border-top: 0;
}
aside#sidebar .treatment-img,
aside#sidebar .treatment-meta {
    display: inline-block;
    vertical-align: middle;
}
aside#sidebar .treatment-img {
    width: 48px;
}
aside#sidebar .treatment-meta {
    font-size: 16px;
    width: 80%;
    padding-left: 12px;
    box-sizing: border-box;
}
aside#sidebar .treatment:hover img.desaturate,
section#treatments-menu-large .treatment:hover img.desaturate {
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
}
@media only screen and (min-width: 960px) {
    aside#sidebar .treatment-meta {
        width: 144px;
        padding-left: 6px;
    }
    .has-sidebar {
        width: 75%;
        float: right;
        padding-left: 24px;
        box-sizing: border-box;
    }
    aside#sidebar {
        width: 25%;
        float: left;
        margin-top: 24px;
    }
    aside#sidebar .treatment-meta {
        font-size: 14px;
    }
}
@media only screen and (min-width: 1200px) { 
    aside#sidebar .treatment-meta {
        width: 192px;
        padding-left: 12px;
    }
}

/* --------------- Treatment images */

#sidebar-treatment-images img {
    margin-top: 24px;
}

/* ----------------------------------------------- Header */

header#header {
    background-color: #00364a;
    color: #fff;
    padding-top: 12px;
    font-size: 0;
}
header#header a {
    color: #9ed2e5;
}
header#header section#branding,
header#header section#details {
    font-size: 16px;
    text-align: center;
}
header#header section#branding img {
    margin: 0 auto;
}

#social-links {
    font-size: 0;
}
#social-links img {
    display: inline;
    height: 44px;
    margin-left: 12px;
}

@media only screen and (min-width: 960px) {
    header#header section#branding,
    header#header section#details {
        display: inline-block;
        vertical-align: middle;
    }
    header#header section#branding {
        width: 32.81%;
        margin-right: 12px;
    }
    header#header section#details {
        width: 65.62%;
        text-align: right;
    }
    #social-links img {
        height: 32px;
    }
}

#img-banner {
    max-height: 150px;
    overflow: hidden;
}
@media only screen and (min-width: 768px) {
    #img-banner {
        max-height: 180px;
    }
}
@media only screen and (min-width: 960px) {
    #img-banner {
        max-height: 228px;
    }
}


/* ----------------------------------------------- Top Nav */

nav#menu {
    font-size: 16px;
}
nav#menu a {
    color: #fff;
    text-decoration: none;
}
nav#menu a:hover {
    color: #9ed2e5;
}
nav#menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
nav#menu ul li {
    padding-bottom: 6px;
}
nav#menu ul li ul {
    padding-top: 6px;
    padding-left: 24px;
}

div#menu-toggle {
    font-size: 16px;
    cursor: pointer;
    padding: 12px 0;
}

@media only screen and (min-width: 768px) {
    nav#menu {
        font-size: 14px;
    }
}
@media only screen and (min-width: 960px) {
    nav#menu {
        padding: 6px 0 0 0;
    }
    nav#menu ul li {
        margin-right: 12px;
    }
    nav#menu ul {
        padding: 0;
        margin: 0;
        display: block !important;
    }
    nav#menu ul li {
        display: inline-block;
        position: relative;
    }

    /* ----------------- dropdowns */

    nav#menu ul.sub-menu {
        display: none !important;
        position: absolute;
        background-color: #335e6e;
        width: 250px;
        padding-top: 6px;
        z-index: 20;
        padding-left: 0;
    }
    nav#menu ul.sub-menu li {
        padding: 6px 12px;
        display: block;
    }
    nav#menu li:hover>ul {
        display: block !important;
    }
}
@media only screen and (min-width: 1200px) {
    nav#menu {
        font-size: 16px;
    }
    nav#menu ul li {
        margin-right: 12px;
    }
}

/* ----------------------------------------------- Footer */

footer#footer {
    background-color: #00364a;
    color: #fff;
    padding: 24px 0;
    margin-top: 48px;
    font-size: 0;
}
footer#footer a {
    color: #9ed2e5;
}
#footer-team,
#footer-find-us {
    width: 100%;
}
#footer h4 {
    text-transform: none;
    font-family: 'open_sansbold', sans-serif;
    font-size: 14px;
}
#footer-team,
#footer-find-us {
    display: inline-block;
    font-size: 14px;
    vertical-align: top;
}
#footer-team img {
    width: 75px;
    margin-top: 6px;
}
nav#footer-menu,
#copyright {
    font-size: 14px;
    text-align: center;
}
nav#footer-menu ul {
    list-style-type: none;
}
nav#footer-menu li {
    display: inline-block;
    margin-right: 6px;
    margin-bottom: 6px;
}
nav#footer-menu a {
    text-decoration: none;
}
nav#footer-menu a:hover {
    text-decoration: underline;
}
@media only screen and (min-width: 768px) {
    #footer-team {
        width: 33%;
        padding-right: 2%;
        box-sizing: border-box;
    }
    #footer-find-us {
        width: 65%;
        padding-left: 2%;
        box-sizing: border-box;
        border-left: 1px #405E69 solid;
    }
}

/* ----------------------------------------------- Homepage */

section#hero { 
    position: relative;
}
#hero-img img {
    width: 60%;
}
.hero-title {
    position: absolute;
    z-index: 1;
    top: 24px;
    width: 50%;
    right: 0;
}

@media only screen and (min-width: 500px) {
    .hero-title {
        top: 48px;
    }
}
@media only screen and (min-width: 600px) {
    .hero-title {
        top: 60px;
    }
}
@media only screen and (min-width: 768px) {  /* tablet-only */
    .hero-title {
        position: relative;
        top: 0;
        width: 100%;
    }
    .hero-content {
        position: absolute;
        width: 50%;
        top: 24px;
        right: 0;
        z-index: 1;
    }
}

@media only screen and (min-width: 960px) {
    .hero-title {
        position: relative;
        top: 0;
        width: auto;
        right: 0;
    }
    #hero-content {
        position: absolute;
        left: 50%;
        top: 0;
        z-index: 1;
    }
}
@media only screen and (min-width: 1200px) {
    #hero-content {
        top: 36px;
    }
}

/* ----------------------------------------------- Treatments Page */

#treatments-page-wrapper .treatment {
    border-top: #E1EEF2 1px solid;
}
#treatments-page-wrapper .treatment-img {
    width: 20%;
    margin-right: 24px;
    display: inline-block;
    vertical-align: middle;
}
#treatments-page-wrapper .treatment-meta {
    display: inline-block;
    vertical-align: middle;
    width: 70%
}

/* ----------------------------------------------- Blog Entries */

.entry-meta {
    margin-top: -24px;
    border-bottom: 1px #E1EEF2 solid;
    padding-bottom: 24px;
    margin-bottom: 24px;
}
.tag-links {

}
.entry-meta,
.tag-links,
.comments-link {
    text-transform: uppercase;
    font-size: 14px;
    color: #909ca3;
}
.comments-link {
    width: 100%;
    display: block;
    border-bottom: 1px #E1EEF2 solid;
    padding-bottom: 24px;
    margin-bottom: 24px;
}
#comments {
    background-color: #eee;
    padding: 3px 12px;
    box-sizing: border-box;
    margin-bottom: 24px;
}
#comments input[type="submit"] {
    padding: 3px 24px;
}
#comments ul {
    list-style-type: none;
    padding-left: 24px;
}
#comments li {
    border-bottom: 1px white solid;
    padding: 12px 0;
}
.comment-author img {
    float: left;
    margin-right: 12px;
}
.comment-meta {
    text-transform: uppercase;
    font-size: 14px;
    color: #909ca3;
}
.comment-meta a {
    text-decoration: none;
}

.comment-meta a:hover {
    text-decoration: underline;
}