/*--------------------
TABLE OF CONTENTS
01. Base Styles
02. Typography/Link Styles
03. Header Styles
04. Navigation Styles
05. Content Styles
06. Footer Styles
/*======================
01. BASE STYLES
========================*/
body {
    font:100%/1.5 'Oxygen',sans-serif;
    color:#3b3b3b;
    background:#fff;
    font-weight:300;
}
img {max-width:97%;}
.container {
    width:95%;
    margin:0 auto;
    max-width:1000px;
}
.column {
    float:left;
    margin:0 1%;
}
.grid12 {width:98%;}
.grid11 {width:89.6667%;}
.grid10 {width:81.3333%;}
.grid9 {width:73%;}
.grid8 {width:65%;}
.grid7 {width:56.3333%;}
.grid6 {width:48%;}
.grid5 {width:39.6667%;}
.grid4 {width:31%;}
.grid3 {width:23%;}
.grid2 {width:14.6667%;}
.grid1 {width:6.3333%;}
.clear {clear:both;}
.alignleft,.alignright,.alignmid, .border {
    border:4px solid #73BE46;
}
.alignleft {
    float:left;
    margin-right:15px;
}
.alignright {
    float:right;
    margin-left:15px;
}
.alignmid {
    display:block;
    margin:0 auto;
}
.center {text-align:center;}
blockquote {
    text-align:center;
    color:#ef4137;
    font-size: 2em;
}
.box {
    color:#fff;
    font-size: 1em;
    background:#73BE46;
    padding:15px 20px;
    display:block;
    border:2px solid #03AF4D;
    margin-bottom:20px;
}
.box a{
    color: #293894;
}
hr {
    border:0;
    height:2px;
    background:#243595;
    padding:0;
    margin-top:10px;
    margin-bottom:25px;
}
p.spacer {height:30px;}
.embed-container { 
    position: relative; 
    padding-bottom: 56.25%; 
    height: 0; 
    overflow: hidden; 
    max-width: 100%; 
    margin-bottom:20px;
} 
.embed-container iframe, .embed-container object, .embed-container embed { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}
/*======================
02. TYPOGRAPHY/LINK STYLES
========================*/
h1,h2,h3,h4,h5,h6 {
    padding-bottom:0;
    font-weight:300;
    font-family:'Oswald', sans-serif;
    font-weight:400;
}
h1,h2 {margin-bottom:20px;display:inline-block;}
h1 {
    font-size:2em;
    color:#B53197;
    border:2px solid #B53197;
    padding:15px 20px;
}
h2 {
    font-size:1.8em;
    color:#f5852a;
    border:2px solid #f5852a;
    padding:10px 15px;
}
h3 {font-size:1.4em;color:#293894;}
h4 {font-size:1.2em;color:#293894;}
h5 {font-size:1.0em;color:#293894;}
h6 {font-size:0.8em;color:#293894;}
a {color:#F5852A;transition:0.5s all ease;}
a:hover {color:#DB5F28;}
a.button {
    background:#f5852a;
    color:#fff;
    text-align:center;
    display:inline-block;
    padding:8px 20px;
    text-decoration:none;
    font-weight:400;
    text-transform:uppercase;
    font-family:'Oswald', sans-serif;
    font-size: 1.1em;
}
a.button:hover {
    background:#de2944;
    color:#fff;
}
/*======================
03. HEADER STYLES
========================*/
header {
    font-family:'Oswald', sans-serif;
}
#logo {
    padding:2.2em 0 1.6em;
    text-align:center;
}
body#supt #logo {
    width:350px;
    margin:0 auto;
    padding:1.3em 0 0.4em;
}
#slider {
    margin-bottom:0.5em;
    padding-bottom:0.3em;
}
ul#contact {
    text-align:center;
}
ul#contact li {
    display:inline-block;
    margin-left:0;
    color:#273892;
    padding:0 1em;
    font-size:1.3em;
}
ul#contact img {vertical-align:middle;}
ul#contact img:hover {opacity:0.8;}
/*======================
04. NAVIGATION STYLES
========================*/
.mobile{
    display: none !important;
}
.desktop{
    display: block;
}
nav.mobile{
    display: none; /* Applying this hides element on everything except "mobile" */
}
nav.primary {
    position:relative;
    z-index:9999;
    width:100%;
    background:url('../img/nav-bg.jpg');
    background-size:cover;
}
nav.primary ul{
    list-style-type:none;
    padding-bottom:0;
    text-align:center;
}
nav.primary li {
    display:inline-block;
    margin:0;
    padding:0;
    position:relative;
}
nav.primary li a {
    display:block;
    text-decoration:none;
    color:#fff;
    font-size:1.4em;
    transition:0.5s all ease;
    padding:0 1.3em;
    margin:0 -2px;
    line-height:50px;
    text-transform:uppercase;
}
nav.primary li:after {
    content:"";
    position:absolute;
    right:-10px;
    top:15px;
    background:url('../img/tooth-divider.png') no-repeat;
    width:17px;
    height:22px;
}
nav.primary li:last-child:after {display:none;}
nav.primary li:hover a {
    color:#ffcafb;
}
/* DROPDOWN */
nav.primary li ul {
    display: none;
}
nav.primary li:hover ul {
    display: block;
    margin-left: 0;
    position: absolute;
    top: 50px;
    z-index: 9999;
}
nav.primary li:hover li {
    float: none;
    white-space: nowrap;
    width: 100%;
    background:none;
}
nav.primary li:hover li:after {display:none;}
nav.primary li:hover li a {
    background: #F38630;
    display: block;
    margin:0;
    height: auto;
    text-align: left;
    font-size:1.2em;
    line-height:45px;
    padding:0 30px 0 15px;
    border:0;
    color:#fff;
}
nav.primary li:hover li a:hover {
    background: #CA4323;
}
nav.footer ul{
    list-style-type:none;
}
nav.footer li {
    display:block;
    margin:0;
    padding:0;
    position:relative;
}
nav.footer li a {
    display:block;
    color:#fff;
    transition:0.5s all ease;
    padding-right:2em;
}
nav.footer li a:hover {color:#ffd9ba;}
#form .clear {clear:both;}
#form .center {text-align:center;}
#form h3 {margin:0 1%;}
#form small {font-style:italic;}
#form hr {width:98%;margin:10px 1% 15px 1%;}
/*GRID */
#form .column {
    float:left;
    margin:0 1%;
}
#form .full {width:98%;margin:0 1%;}
#form .half {width:48%;}
#form .twothird {width:65%;}
#form .onethird {width:31%;}
/*FORM STYLES*/
#form input:not([type=submit]):not([type=checkbox]):not([type=radio]) {
    width:96%;
    padding:10px 2%;
}
#form input[type=radio] {
    margin-bottom:5px;
}
#form textarea {
    width:96%;
    resize:none;
    padding:10px 2%;
    font:95%/1.4 'Tahoma',sans-serif;
}
#form select {
    width:101%;
    padding:10px 2%;
}
/*MEDIA QUERIES */
@media (max-width:767px) {
    #form .column {
        float:none;
        margin:0;
    }
    #form .full, #form .half, #form .twothird, #form .onethird {
        width:100%;margin:0;
    }
}
/* ====================================== 
Mobile Menu
====================================== */
#page-wrapper {
    -moz-transition: -moz-filter 0.25s ease;
    -webkit-transition: -webkit-filter 0.25s ease;
    -ms-transition: -ms-filter 0.25s ease;
    transition: filter 0.25s ease;
}
nav #menu-toggle{
    display: inline-block;
    padding: 10px 15px;
    color: #fff;
    background-color: #F38630;
    text-transform: uppercase;
    margin: 0px 0px 0px 0px;
    text-decoration: none;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    font-size:1.2em;
}
#menu {
    -moz-align-items: center;
    -webkit-align-items: center;
    -ms-align-items: center;
    align-items: center;
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    -moz-pointer-events: none;
    -webkit-pointer-events: none;
    -ms-pointer-events: none;
    pointer-events: none;
    -moz-transition: opacity 0.35s ease, visibility 0.35s;
    -webkit-transition: opacity 0.35s ease, visibility 0.35s;
    -ms-transition: opacity 0.35s ease, visibility 0.35s;
    transition: opacity 0.35s ease, visibility 0.35s;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    background: rgba(46, 49, 65, 0.8);
    cursor: default;
    height: 100%;
    left: 0;
    opacity: 0;
    position: fixed;
    text-align: center;
    top: 0;
    visibility: hidden;
    width: 100%;
    z-index: 1000;
}
#menu .inner {
    padding: 1.2em 1.5em 0.5em 1.5em ;
    -moz-transform: translateY(0.5em);
    -webkit-transform: translateY(0.5em);
    -ms-transform: translateY(0.5em);
    transform: translateY(0.5em);
    -moz-transition: opacity 0.35s ease, -moz-transform 0.35s ease;
    -webkit-transition: opacity 0.35s ease, -webkit-transform 0.35s ease;
    -ms-transition: opacity 0.35s ease, -ms-transform 0.35s ease;
    transition: opacity 0.35s ease, transform 0.35s ease;
    -webkit-overflow-scrolling: touch;
    background: #B62B90;
    border-radius: 5px;
    display: block;
    max-width: 100%;
    opacity: 0;
    position: relative;
    width: 18em;
    margin: 0 20px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
#menu h2 {
    border:0;
    border-bottom: solid 2px #fff;
    padding-bottom:0.5;
    color: #fff;
    text-transform: uppercase;
    font-size: 1.3em;
}
#menu .close {
    background-image: url("../img/close.svg");
    background-position: 75% 25%;
    background-repeat: no-repeat;
    background-size: 2em 2em;
    border: 0;
    content: '';
    display: block;
    height: 4em;
    overflow: hidden;
    position: absolute;
    right: 0;
    text-align: center;
    text-indent: 4em;
    top: 0;
    width: 4em;
}
#menu .links {
    list-style: none;
    margin-bottom: 1.5em;
    padding: 0;
}
#menu .links li {
    padding: 0;
    margin:0;
}
#menu .links li ul{
    display: none;
}
#menu .links li a {
    border-radius: 5px;
    border: 0;
    display: block;
    font-family: 'Oswald',sans-serif;
    font-size: 1.2em;
    font-weight: 300;
    line-height: 1.45em;
    padding: 0.4em 0;
    text-transform: uppercase;
    text-decoration: none;
    color:#fff;
}
#menu .links li a:hover {
    background: #7e2c68;
    color: #fff;
}
@media screen and (max-width: 736px) {
    #menu .inner {
        max-height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
    }
    #menu .inner .close {
        background-size: 1.5em 1.5em;
    }
}
body.is-menu-visible #page-wrapper {
    -moz-filter: blur(1.5px);
    -webkit-filter: blur(1.5px);
    -ms-filter: blur(1.5px);
    filter: blur(1.5px);
}
body.is-menu-visible #menu {
    -moz-pointer-events: auto;
    -webkit-pointer-events: auto;
    -ms-pointer-events: auto;
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
}
body.is-menu-visible #menu .inner {
    -moz-transform: translateY(0);
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
}
/*======================
05. CONTENT STYLES
========================*/
.padding {
    padding: 20px 30px 10px 30px;
}
#welcome {
    background: url('../img/balloon-girls.jpg') center top;
    width:100%;
    height:575px;
    background-size:cover;
}
.welcomebox {
    background:#b62b90;
    width:60%;
    margin-right:1%;
    float:right;
    height:575px;
    color:#fff;
}
.welcomebox h1 {
    color:#fff;
    border:2px solid #fff;
    font-weight:300;
    font-size:1.65em;
}
.welcomebox p {
    line-height:1.6em;
}
#aboutus {
    width:100%;
    padding:50px 0;
}
#content {
    width:100%;
    padding:20px 0 50px 0;
}
#aboutus .container, #content .container {position:relative;}
#aboutus .container:after, #content .container:after {
    content:"";
    position: absolute;
    left:-172px;
    bottom:-20px;
    width:163px;
    height:167px;
    background:url('../img/about-tooth.png');
}
#whoweare {
    width:100%;
}
.meetdoctor {
    width:48%;
    float:left;
    margin:0 1%;
    padding-bottom:15px;
    background:#73be46;
}
#whoweare h2, #whoweare p {color:#fff;}
#whoweare h2 {border:2px solid #fff;}
#whoweare a.button {
    background:#fff;color:#73BE46;
}
#whoweare a.button:hover {
    background:#DAF4CB;color:#73BE46;
}
.boardlist {
    width:100%;
    background:#daf4cb;
    text-align:center;
    padding-top:10px;
    margin-bottom:20px;
}
.boardlist h5 {margin-bottom:10px;}
.boardlist img {
    margin:0 10px;
}
.resp-sharing-button {
    display: inline-block;
    border-radius: 5px;
    border-width: 1px;
    border-style: solid;
    transition: background-color 25ms ease-out, border-color 25ms ease-out, opacity 250ms ease-out;
    margin: 0.5em;
    padding: 0.5em 0.75em;
    font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
}

.rewardlist img {
	max-width:100%;
	margin-bottom:10px;
}

img.badge {max-height:188px;}
.resp-sharing-button a {
    text-decoration: none;
    color: #FFF;
    display: block;
}
.resp-sharing-button__icon {
    display: inline-block;
}
.resp-sharing-button__icon svg {
    width: 1em;
    height: 1em;
    margin-bottom: -0.1em;
}
/* Non solid icons get a stroke */
.resp-sharing-button__icon {
    stroke: #FFF;
    fill: none;
}
/* Solid icons get a fill */
.resp-sharing-button__icon--solid,
.resp-sharing-button__icon--solidcircle {
    fill: #FFF;
    stroke: none;
}
.resp-sharing-button__link {
    text-decoration: none;
    color: #FFF;
}
.resp-sharing-button--large .resp-sharing-button__icon svg {
    padding-right: 0.4em;
}
.resp-sharing-button__wrapper {
    display: inline-block;
}
.resp-sharing-button--facebook {
    background-color: #3b5998;
    border-color: #3b5998;
}
.resp-sharing-button--facebook:hover,
.resp-sharing-button--facebook:active {
    background-color: #2d4373;
    border-color: #2d4373;
}
.resp-sharing-button--twitter {
    background-color: #55acee;
    border-color: #55acee;
}
.resp-sharing-button--twitter:hover,
.resp-sharing-button--twitter:active {
    background-color: #2795e9;
    border-color: #2795e9;
}
.resp-sharing-button--email {
    background-color: #444444;
    border-color: #444444;
}
.resp-sharing-button--email:hover
.resp-sharing-button--email:active {
    background-color: #2B2B2B;
    border-color: #2B2B2B;
}
/* FORM STYLES */
#form .clear {clear:both;}
#form .center {text-align:center;}
#form h3 {margin:0 1%;display:block;}
#form small {font-style:italic;}
#form hr {width:98%;margin:10px 1% 15px 1%;}
/*GRID */
#form .column {
    float:left;
    margin:0 1%;
}
#form .full {width:98%;margin:0 1%;}
#form .half {width:48%;}
#form .twothird {width:65%;}
#form .onethird {width:31%;}
#form input:not([type=submit]):not([type=checkbox]):not([type=radio]) {
    width:96%;
    padding:10px 2%;
}
#form input[type=image] {
    width:auto !important;
}
#form input[type=radio] {
    margin-bottom:5px;
}
#form textarea {
    width:96%;
    resize:none;
    padding:10px 2%;
    font:95%/1.4 'Tahoma',sans-serif;
}
#form select {
    width:101%;
    padding:10px 2%;
}

img.awards {
	vertical-align:middle;
	margin-bottom:10px;
}
/*======================
06. FOOTER STYLES
========================*/
footer {
    width:100%;
    background:#f5852a;
    padding:25px 0 80px 0;
    font-size: 0.8em;
    color:#fff;
}
footer .container {position:relative;}
footer .container:after {
    content:"";
    right:-120px;
    top:-50px;
    width:124px;
    height:139px;
    background:url('../img/footer-teeth.png') no-repeat;
    position:absolute;
}
footer a {color:#fff;}
footer a:hover {color:#ffd9ba;}
p.socialfooter img {
    margin-right:15px;
    vertical-align:middle;
    margin-top:5px;
}
/* QUICKLINKS */
.quicklinks {
    width:100%;
    background:#fff;
    padding:13px 0;
    position:fixed;
    bottom:0;
    text-align:center;
    -webkit-box-shadow: 0px -5px 16px -4px rgba(0,0,0,0.43);
    -moz-box-shadow: 0px -5px 16px -4px rgba(0,0,0,0.43);
    box-shadow: 0px -5px 16px -4px rgba(0,0,0,0.43);
}
a.quickbtn {
    text-transform:uppercase;
    font-size:1.6em;
    padding:0 2.5em;
    display:inline-block;
    text-decoration: none;
    font-family:'Oswald',sans-serif;
    font-weight:400;
}
a#formsbtn {color:#273892;position:relative;}
a#formsbtn:after {
    content:"";
    position:absolute;
    right:-20px;
    top:-7px;
    background:url('../img/quick-blue-tooth.png') no-repeat;
    width:42px;
    height:52px;
}
a#apptsbtn {color:#b62b90;position:relative;}
a#apptsbtn:after {
    content:"";
    position:absolute;
    right:-20px;
    top:-7px;
    background:url('../img/quick-tooth-red.png') no-repeat;
    width:42px;
    height:52px;
}
a#tourbtn {color:#f5852a;}
.windowtop {
    display: inline-block;
    height: 50px;
    width: 50px;
    position: fixed;
    bottom: 40px;
    right: 30px;
    overflow: hidden;
    text-indent: 100%;
    background: #B62B90 url('../img/top-arrow.png') no-repeat center 50%;
    visibility: hidden;
    opacity: 0;
    border-radius:25px;
    -webkit-border-radius:25px;
    -moz-border-radius:25px;
    z-index:9999;
    transition:0.5s all ease;
    cursor:pointer;
}
.windowtop.cd-is-visible {
    /* the button becomes visible */
    visibility: visible;
    opacity: 1;
}
.no-touch .windowtop:hover {
    background-color: #e86256;
    opacity: 1;
}
/*======================
MEDIA QUERIES
========================*/
@media (max-width: 1200px) {
    #aboutus .container:after, footer .container:after {
        display:none;
    }
}
@media (max-width: 1020px) {
    body {
        font:85%/1.5 'Oxygen',sans-serif;
    }
    nav.primary li a {
        font-size:1.0em;
    }
	.rewardlist img {
		max-width:95%;
		margin:0 auto 10px auto;
	} 
}
@media screen and (max-width:790px){
    .grid1,.grid2,.grid3,.grid4,.grid5,.grid6,.grid7,.grid8,.grid9,.grid10,.grid11,.grid12 {
        width:100%;
        margin-right:0;
    }
    footer .container img {
        display:inline;margin:0;
        margin:0 10px;
    }
    #form .column {
        float:none;
        margin:0;
    }
    #form .full, #form .half, #form .twothird, #form .onethird {
        width:98%;margin:0;
    }
    a.button {margin-bottom:20px;}
    ul#contact li {margin-bottom:15px;}
    .meetdoctor {width:98%;}
    .container .boardlist img {margin:0 auto;margin-bottom:20px;}
    footer {text-align:center;}
    nav.footer li a {padding-right:0;}
    a.quickbtn {padding:0 1em;}
    #aboutus .container:after, #content .container:after {
        display:none;
    }
    a#formsbtn:after {
        right:-12px;
        top:0px;
        width:25px;
        height:31px;
        background-size:contain;
    }
    a#apptsbtn:after {
        right:-12px;
        top:0px;
        background-size:contain;
        width:25px;
        height:31px;
    }
    .welcomebox {width:73%;}
    #welcome h1 {font-size:1.3em;}

}
@media screen and (max-width:680px) {
    .mobile{
        display: block !important;
    }
    .desktop{
        display: none !important;
    }
    .alignleft, .alignright, .alignmid {
        float:none;
        display:block;
        margin:0 auto 10px auto;
    }
    .grid1,.grid2,.grid3,.grid4,.grid5,.grid6,.grid7,.grid8,.grid9,.grid10,.grid11,.grid12 {
        width:98%;
        margin-right:0;
    }
    #welcome {
        background: none;
        height: auto;
        width: 100%;
    }
    .welcomebox {
        float: none;
        height: auto;
        margin-right: 0;
        width: 100%;
    }
    nav.primary {display:none;}
    nav.mobile {
        display:block;
        position:fixed;
        z-index:9999;
        width:100%;
        background:url('../img/nav-bg.jpg');
        background-size:cover;
    }
    .mobilenumber {
        float:right;
        color:#fff;
        font-size:1.5em;
        font-weight:300;
        margin:5px 15px 0 0 ;
    }
    .mobilenumber a {color:#fff;}
    #logo,body#supt #logo {
        width:90%;
        margin:0 auto;
        padding-top:80px;
    }
    ul#contact li:first-child {display:none;}
    .windowtop {  
        bottom: 20px;
        right: 10px;
    }
    #formsbtn,#tourbtn {display:none;}
    #apptsbtn:after {display:none;}
    #content {padding-top:0px;}
}