/* ===============================================
.less VERSION 2.1
vegesana-suresh
Written by: Vita Stillion
Sesame Communications - (c) 2022
All rights reserved.
Any reproduction or intentional misuse is strictly prohibited
=============================================== */
/* ===============================================
colors
=============================================== */
/* body */
/* light gray || hyperlinks */
/* brown */
/* light blue */
/* dark gray */
/* ===============================================
fonts
=============================================== */
.fontM {
font-family: 'Montserrat', sans-serif;
}
/* ===============================================
Mixins
=============================================== */
/*font-mixins*/
.th {
font-weight: 100;
}
.xlt {
font-weight: 200;
}
.lt {
font-weight: 300;
}
.roman {
font-weight: 400;
}
.mbold {
font-weight: 500;
}
.sbold {
font-weight: 600;
}
.bold {
font-weight: 700;
}
.xbold {
font-weight: 800;
}
.ubold,
.black {
font-weight: 900;
}
.italic {
font-style: italic;
}
.upp {
}
.loww {
text-transform: lowercase;
}
.noo {
text-transform: none;
}
.normal {
font-style: normal;
}
/*LETTER SPACING, LINE HEIGHT AND FONT SIZE */
.aligncenter {
text-align: center;
}
.alignright {
text-align: right;
}
.alignleft {
text-align: left;
}
.justify {
text-align: justify;
}
/*helper mixins*/
.clear {
clear: both;
}
.clearright {
clear: right;
}
.clearleft {
clear: left;
}
.wall {
width: 100%;
}
.hall {
height: 100%;
}
.auto {
width: auto;
}
.autoy {
height: auto;
}
.autox {
width: auto;
height: auto;
}
.zerox {
width: 0;
height: 0;
}
.line {
width: 100%;
height: 1px;
}
.show {
display: block;
}
.hide {
display: none;
}
.inline {
display: inline;
}
.inline-block,
.ib {
display: inline-block;
}
.left {
float: left;
}
.right {
float: right;
}
.nofloat {
float: none;
}
.behave {
display: block;
float: left;
}
.center {
margin-left: auto;
margin-right: auto;
}
.round {
border-radius: 50%;
}
/*functional mixins*/
.vertical-align {
position: absolute;
top: 50%;
transform: translate3d(0, -50%, 0);
}
.overlay {
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
}
.inlay {
width: auto;
height: auto;
display: block;
position: absolute;
}
/* use with .trbl */
.grey,
.gray {
-webkit-filter: grayscale(1);
filter: grayscale(100%);
}
/* ===============================================
Basic Stylings
These will affect every size of the site.
=============================================== */
/*resets*/
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/*GLOBAL OVERRIDES*/
.fab,
.fas,
.fal,
.far,
.fad {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
vertical-align: 0;
}
/* ==================================================================
main content-text font sizes
=================================================================== */
/* ===============================================
body
=============================================== */
body,
input,
select,
textarea {
font-family: 'Montserrat', sans-serif;
}
form button {
font-family: 'Montserrat', sans-serif;
}
body {
font-size: 15px;
color: #333;
background: #fff;
overflow: hidden;
}
@media only screen and (min-width: 81.25em) {
body {
font-size: 20px;
/* desk 1300w */
}
}
/* ===============================================
links
=============================================== */
a {
text-decoration: none;
}
#content a {
color: #c07f60;
transition: color 0.33s ease-in-out;
}
#content a:hover {
color: #95adb2;
}
/* ===============================================
h family || hfam
=============================================== */
h1,
h2:not(.topic),
h3:not(.topic),
h4,
h5,
h6 {
line-height: 1;
text-align: left;
color: #6f7a7f;
margin: 0 0 0.8em;
text-rendering: auto;
font-weight: 600;
}
h1 {
font-size: 8vw;
margin: 1em 0 0.2em;
color: #ffffff;
}
@media only screen and (min-width: 30em) {
h1 {
font-size: 2.25em;
/* mintab 480w */
}
}
.home h1 {
color: #c07f60;
font-size: 7vw;
margin-bottom: 1em;
}
@media only screen and (min-width: 48em) {
.home h1 {
font-size: 5vw;
white-space: nowrap;
/* mintab 480w */
}
}
@media only screen and (min-width: 64em) {
.home h1 {
font-size: 2.75em;
/* midTab 1024w */
}
}
.home h1 .trait {
display: block;
}
.home h1 .trait.top {
font-weight: 300;
letter-spacing: 0.44em;
line-height: 0.7;
font-size: 0.62666667em;
color: #899196;
}
h2:not(.topic) {
font-size: 1.2em;
color: #95adb2;
}
h3:not(.topic) {
font-size: 1.1em;
color: #ae6440;
}
h4 {
font-size: 1em;
}
h5 {
font-size: 0.95em;
}
h6 {
font-size: 0.9em;
}
/* ===============================================
containers
=============================================== */
.container {
max-width: 64.5em;
}
/* ===============================================
list styles - global overrides
=============================================== */
.what-sets-us-apart #content ol,
.meet-the-team #content ol,
.our-office #content ol,
.office-tour #content ol,
body[class*='-after'] #content ol {
margin: 0;
}
#content ul li {
list-style: disc outside;
/* list-style-image:none; */
}
/* ==================================================================
masthead
=================================================================== */
#masthead {
width: 100%;
padding: 0;
background-color: rgba(255, 255, 255, 0.9);
position: relative;
z-index: 3000;
}
@media only screen and (min-width: 41.625em) {
#masthead {
padding: 0;
/* custom 666w */
}
}
@media only screen and (min-width: 64em) {
#masthead {
font-size: 1em;
width: 100%;
/* maxTab 1024w */
}
}
@media only screen and (min-width: 81.25em) {
#masthead {
font-size: inherit;
position: fixed;
top: 0;
z-index: 3000;
/* desk 1300w */
}
}
#masthead .container {
width: 100%;
max-width: none;
}
@media only screen and (min-width: 64em) {
#masthead .container {
max-width: 64.5em;
/* maxTab 1024w */
}
}
/* ==================================================================
main-nav
=================================================================== */
#main-nav {
font-size: 1.2em;
text-align: center;
height: 43px;
width: 43px;
padding: 0;
margin: 0;
box-shadow: -1px 1px 0 rgba(111, 122, 127, 0.4);
position: absolute;
top: 0;
right: 0;
z-index: 600;
clear: both;
}
#main-nav .container {
height: 100%;
padding: 0;
}
#main-nav .trigger {
line-height: 43px;
color: #6f7a7f;
height: 100%;
width: 100%;
padding: 0;
margin: 0 auto;
position: relative;
z-index: 600;
transition: color 0.33s ease-in-out;
}
#main-nav .trigger .navicon {
width: 12px;
height: 8px;
position: relative;
display: inline-block;
top: -0.2em;
}
#main-nav .trigger .navicon span {
height: 2px;
width: 100%;
background: currentcolor;
display: block;
position: absolute;
left: 0;
opacity: 1;
transform: rotate(0deg);
transition: width 0.3s ease, top 0.3s ease, left 0.3s ease, transform 0.3s ease;
}
#main-nav .trigger .navicon span:nth-child(1) {
top: 0px;
}
#main-nav .trigger .navicon span:nth-child(2),
#main-nav .trigger .navicon span:nth-child(3) {
top: 50%;
}
#main-nav .trigger .navicon span:nth-child(4) {
top: 100%;
}
#main-nav .trigger:hover {
color: #6f7a7f;
}
#main-nav .trigger:hover .navicon span {
/* background:@color1; */
}
#main-nav .open .trigger {
color: #464d51;
}
#main-nav .open .trigger .navicon span:nth-child(1),
#main-nav .open .trigger .navicon span:nth-child(4) {
width: 0;
top: 50%;
left: 50%;
}
#main-nav .open .trigger .navicon span:nth-child(2) {
transform: rotate(45deg);
}
#main-nav .open .trigger .navicon span:nth-child(3) {
transform: rotate(-45deg);
}
#main-nav ul {
width: 100vw;
margin: -43px 0 0;
padding: 1em 0;
background-color: rgba(255, 255, 255, 0.9);
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.99) 100%);
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.99) 100%);
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.99) 100%);
position: relative;
float: right;
z-index: 550;
}
#main-nav ul li {
clear: both;
}
#main-nav ul li a[id] {
line-height: 2.85714286;
font-size: 0.7em;
color: #687177;
font-weight: 600;
width: auto;
height: 2.85714286em;
margin: 0;
padding: 0;
display: inline-block;
vertical-align: top;
position: relative;
transition: color 0.33s ease;
}
#main-nav ul li a[id]:before {
content: '';
width: 1.71428571em;
height: 1.64285714em;
background-repeat: no-repeat;
background-position: 0 0;
background-size: cover;
position: relative;
transition: transform 0.33s ease-in-out, -webkit-filter 0.33s ease-in-out, filter 0.33s ease-in-out;
-webkit-filter: brightness(0.4) invert(30%) hue-rotate(90deg);
filter: brightness(0.4) invert(30%) hue-rotate(90deg);
}
@media only screen and (max-width: 63.9375em) {
#main-nav ul li a[id]:before {
margin: 0.7em 0.33em 0 0;
display: inline-block;
vertical-align: top;
/* midTab 1024oo */
}
}
@media only screen and (min-width: 64em) {
#main-nav ul li a[id]:before {
margin: 0 auto;
display: block;
margin-left: auto;
margin-right: auto;
/* midTab 1024w */
}
}
#main-nav ul li a[id].home:before {
background-image: url("data:image/svg+xml;charset=UTF-8, ");
}
#main-nav ul li a[id].about:before {
background-image: url("data:image/svg+xml;charset=UTF-8, ");
}
#main-nav ul li a[id].patients:before {
background-image: url("data:image/svg+xml;charset=UTF-8, ");
}
#main-nav ul li a[id].dental:before {
background-image: url("data:image/svg+xml;charset=UTF-8, ");
}
#main-nav ul li a[id].cosmetic:before {
background-image: url("data:image/svg+xml;charset=UTF-8, ");
}
#main-nav ul li a[id].restorative:before {
background-image: url("data:image/svg+xml;charset=UTF-8, ");
}
#main-nav ul li a[id].technology:before {
background-image: url("data:image/svg+xml;charset=UTF-8, ");
}
#main-nav ul li a[id].contact:before {
background-image: url("data:image/svg+xml;charset=UTF-8, ");
}
#main-nav ul li.open > a[id],
#main-nav ul li.active > a[id],
#main-nav ul li:hover > a[id] {
color: #ae6440;
text-decoration: none;
transition-duration: 0.15s;
}
#main-nav ul li.open > a[id]:before,
#main-nav ul li.active > a[id]:before,
#main-nav ul li:hover > a[id]:before {
transition-duration: 0.15s;
-webkit-filter: brightness(0.76) invert(0%) hue-rotate(0deg);
filter: brightness(0.76) invert(0%) hue-rotate(0deg);
}
#main-nav ul ul {
width: 100%;
margin: 0;
padding: 0;
float: left;
background: #95adb2;
display: inline;
}
#main-nav ul ul li {
display: block;
width: 100%;
float: left;
background: none;
}
#main-nav ul ul li a {
font-weight: 600;
line-height: 3.07692308;
font-size: 0.65em;
color: #fff;
width: auto;
height: 3.07692308em;
margin: 0;
padding: 0 1em;
display: inline-block;
vertical-align: top;
position: relative;
}
#main-nav ul ul li a:before {
content: '';
width: 0.53846154em;
height: 0.53846154em;
margin: auto 0;
background: #ffffff;
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
transform: translate3d(0, 0, 0) scaleX(0);
transition: transform 0.33s ease-in-out, opacity 0.33s ease-in-out;
opacity: 0;
pointer-events: none;
}
#main-nav ul li.active ul li a:hover,
#main-nav ul ul li a:hover,
#main-nav ul ul li a.active {
text-decoration: none;
color: #fff;
margin-bottom: 0;
border: none;
}
#main-nav ul li.active ul li a:hover:before,
#main-nav ul ul li a:hover:before,
#main-nav ul ul li a.active:before {
opacity: 1;
transform: translate3d(0, 0, 0) scaleX(1);
transition-duration: 0.15s;
}
/* main-nav make li fly in all cool */
#main-nav .collapsible.open > ul {
animation: flyinmobilenav 0.4s 1;
}
#main-nav .collapsible.open ul ul {
animation: none;
}
/* make flyouts expand on mobile */
#main-nav ul ul li {
height: 0;
overflow: hidden;
transition-duration: 0.33s;
opacity: 0;
}
/* all about that open class */
#main-nav .open ul {
display: inline-block;
}
#main-nav .open ul .open ul {
padding: 1em 0;
}
#main-nav .open ul .open ul li {
height: 2em;
opacity: 1;
}
/* ==================================================================
header
=================================================================== */
#hd {
text-align: center;
color: #6f7a7f;
padding: 0;
position: relative;
}
@media only screen and (min-width: 41.625em) {
#hd {
text-align: right;
/* custom 666w */
}
}
@media only screen and (min-width: 64em) {
#hd {
background: #cccccc url(../images/bg-top.jpg) no-repeat center center;
z-index: 3000;
/* maxTab 1024w */
}
}
@media only screen and (min-width: 125em) {
#hd {
background-size: 100% auto;
/* custom 2000w */
}
}
@media only screen and (max-width: 63.9375em) {
#hd .mod {
background: #cccccc url(../images/bg-top.jpg) no-repeat center center;
/* midTab 1024oo */
}
}
/* ===============================================
logo
=============================================== */
#logo {
line-height: 0;
font-size: 0.7em;
width: 8.8em;
display: block;
position: relative;
}
@media only screen and (max-width: 63.9375em) {
#logo {
margin: 0.5em auto 1em;
/* midTab 1024oo */
}
}
@media only screen and (min-width: 64em) {
#logo {
font-size: inherit;
margin: 0;
position: absolute;
top: 2.15em;
left: 0.1em;
/* maxTab 1024w */
}
}
#logo a {
display: inline-block;
vertical-align: top;
}
#logo svg {
width: 8.8em;
height: 4.3em;
}
/* ===============================================
contact info
=============================================== */
#contactinfo {
text-align: center;
width: 100%;
margin: 0 0 0.5em;
display: inline-block;
vertical-align: top;
}
@media only screen and (min-width: 30em) {
#contactinfo {
width: auto;
margin: 0 0.5em 0 0;
/* mintab 480w */
}
}
#contactinfo .address {
letter-spacing: 0.12em;
line-height: 2.53846154;
font-size: 0.65em;
color: #ffffff;
width: auto;
margin: 0 1em;
display: inline-block;
vertical-align: top;
}
#contactinfo .phone {
letter-spacing: 0.12em;
line-height: 2.53846154;
font-size: 0.65em;
color: #ffffff;
display: inline-block;
vertical-align: top;
}
#contactinfo a {
transition: color 0.33s ease-in-out;
}
#contactinfo a:hover {
color: #d19c83;
}
/* ===============================================
utility-nav
=============================================== */
#utilitynav {
line-height: 0;
width: auto;
margin: 0;
padding: 0;
display: inline-block;
vertical-align: top;
position: relative;
z-index: 400;
}
#utilitynav ul {
line-height: 0;
width: auto;
margin: 0;
padding: 0;
display: inline-block;
vertical-align: top;
position: relative;
}
#utilitynav ul li {
line-height: 0;
width: auto;
margin: 0 0 0 0.5em;
padding: 0;
display: inline-block;
vertical-align: top;
position: relative;
}
#utilitynav a {
font-weight: 600;
letter-spacing: 0.12em;
line-height: 3;
font-size: 0.55em;
text-align: center;
color: #fff;
padding: 0;
display: inline-block;
vertical-align: top;
transition: color 0.33s ease-in-out, background-color 0.33s ease-in-out, color 0.33s ease-in-out;
position: relative;
z-index: 2;
}
#utilitynav a:before {
transition: transform 0.6s ease-in-out, background 0.6s ease-in-out, opacity 0.33s ease-in-out;
content: '';
background: #d1eff9;
background: -moz-linear-gradient(top, #d1eff9 0%, #95aeb2 99%);
background: -webkit-linear-gradient(top, #d1eff9 0%, #95aeb2 99%);
background: linear-gradient(to bottom, #d1eff9 0%, #95aeb2 99%);
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
z-index: -1;
opacity: 0;
}
#utilitynav a:hover {
color: #894f32;
}
#utilitynav a:hover:before {
transform: translate3d(0, 0, 0);
opacity: 1;
}
#utilitynav a.appointmentrequest {
width: 19.90909091em;
background: #ab6445;
background: -moz-linear-gradient(left, #ab6445 0%, #bf7e5e 100%);
background: -webkit-linear-gradient(left, #ab6445 0%, #bf7e5e 100%);
background: linear-gradient(to right, #ab6445 0%, #bf7e5e 100%);
}
#utilitynav a.patientforms {
width: 11.54545455em;
background: #666e74;
background: -moz-linear-gradient(left, #666e74 1%, #9ab2b5 100%);
background: -webkit-linear-gradient(left, #666e74 1%, #9ab2b5 100%);
background: linear-gradient(to right, #666e74 1%, #9ab2b5 100%);
}
/* ===============================================
hd side quick links
=============================================== */
@media only screen and (max-width: 47.9375em) {
.slinks {
position: relative;
background: rgba(149, 173, 178, 0.9);
/* midTab 768oo */
}
}
@media only screen and (min-width: 48em) {
.slinks {
width: 4em;
margin: 0;
display: block;
position: absolute;
right: 0;
top: 110%;
/* midTab 768w */
}
}
@media only screen and (min-width: 81.25em) {
.slinks {
top: 12.5em;
/* desk 1300w */
}
}
.slinks .btn {
display: inline-block;
font-weight: 600;
text-align: center;
font-size: 0.55em;
color: #ffffff;
transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out, color 0.33s ease-in-out;
padding: 2.54545455em 0 2.18181818em;
width: 7.27272727em;
position: relative;
z-index: 420;
}
@media only screen and (min-width: 64em) {
.slinks .btn {
width: 100%;
/* midTab 1024w */
}
}
.slinks .btn:before {
transition: transform 0.6s ease-in-out, background 0.6s ease-in-out, opacity 0.33s ease-in-out;
content: '';
background: #d1eff9;
background: -moz-linear-gradient(top, #d1eff9 0%, #95aeb2 99%);
background: -webkit-linear-gradient(top, #d1eff9 0%, #95aeb2 99%);
background: linear-gradient(to bottom, #d1eff9 0%, #95aeb2 99%);
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
z-index: -1;
opacity: 0;
}
.slinks .btn:hover {
color: #894f32;
}
.slinks .btn:hover:before {
transform: translate3d(0, 0, 0);
opacity: 1;
}
.slinks .btn01 {
background: #bf7e5f;
background: -moz-linear-gradient(top, #bf7e5f 0%, #ae6440 100%);
background: -webkit-linear-gradient(top, #bf7e5f 0%, #ae6440 100%);
background: linear-gradient(to bottom, #bf7e5f 0%, #ae6440 100%);
}
.slinks .btn02 {
background: #95aeb2;
background: -moz-linear-gradient(top, #95aeb2 1%, #666e74 100%);
background: -webkit-linear-gradient(top, #95aeb2 1%, #666e74 100%);
background: linear-gradient(to bottom, #95aeb2 1%, #666e74 100%);
}
/* ===============================================
socialmedia || aka social-icons
=============================================== */
.socialmedia {
line-height: 0;
text-align: center;
width: 100%;
height: auto;
margin: 0;
z-index: 300;
}
@media only screen and (max-width: 47.9375em) {
.socialmedia {
display: flex;
justify-content: flex-end;
padding: 1.25em 0.75em;
position: absolute;
top: 0;
right: 0;
/* midTab 768oo */
}
}
@media only screen and (min-width: 48em) {
.socialmedia {
padding: 0.75em 1.25em;
position: relative;
background: rgba(149, 173, 178, 0.9);
/* midTab 768w */
}
}
.socialmedia a {
line-height: 1.66666667;
font-size: 0.9em;
color: #fff;
height: 1.66666667em;
width: 1.66666667em;
margin: 0 2px 0 0;
display: inline-block;
vertical-align: top;
position: relative;
transition: transform 0.33s ease-in-out, color 0.33s ease-in-out;
}
@media only screen and (min-width: 64em) {
.socialmedia a {
margin: 0 0 3px 0;
display: block;
width: 100%;
padding: 0;
height: auto;
line-height: 1.5;
/* maxTab 1024w */
}
}
.socialmedia a:nth-last-of-type(1) {
margin: 0;
}
.socialmedia a:hover {
color: #464d51;
z-index: 400;
text-shadow: 2px 2px 0 #ffffff;
transform: scale(1.44);
}
.socialmedia a .icon {
position: relative;
}
/* ==================================================================
slideshow
=================================================================== */
#slideshow {
font-size: 2vw;
text-align: center;
color: #fff;
background: #000;
min-height: 38.0952381vw;
/* adjust to match slideshow height from proof */
position: relative;
z-index: 400;
}
@media only screen and (min-width: 64em) {
#slideshow {
font-size: inherit;
width: 100%;
margin-top: 0;
top: 0;
/* maxTab 1024w */
}
}
#slideshow #home-slideshow {
width: 100%;
margin: 0;
aspect-ratio: 5 / 2;
}
@media only screen and (min-width: 64em) {
#slideshow #home-slideshow {
position: relative;
/* maxTab 1024w */
}
#slideshow #home-slideshow .hpslide {
max-width: none;
width: 100%;
}
}
#slideshow .ssoverlay {
line-height: 0.875;
font-size: 2em;
color: currentcolor;
width: 100%;
display: block;
position: absolute;
left: 0;
top: 50%;
transform: translate3d(0, -50%, 0);
z-index: 420;
}
#slideshow .ssoverlay .trait {
line-height: 1;
font-size: 2em;
display: block;
}
/* ==================================================================
.spotlight
=================================================================== */
.spotlight {
text-align: center;
position: relative;
z-index: 400;
}
.spotlight > div {
position: relative;
}
/* ==================================================================
spot01 || COMMON SERVICES/CALLOUT-LIKE SECTION EXAMPLE
=================================================================== */
.spot01 {
text-align: center;
padding: 2em 0;
margin: 0;
background: #404040 url(../images/bg-spot01.jpg) no-repeat center top;
background-size: cover;
position: relative;
z-index: 410;
}
@media only screen and (max-width: 29.9375em) {
.spot01 {
font-size: 3.2vw;
/* mintab opt-out 480oo */
}
}
@media only screen and (min-width: 30em) {
.spot01 {
font-size: 1.7vw;
/* mintab 480w */
}
}
@media only screen and (min-width: 48em) {
.spot01 {
padding: 5em 0 9.5em;
/* midTab 768w */
}
}
@media only screen and (min-width: 61.25em) {
.spot01 {
font-size: inherit;
/* custom opt-out 979oo */
}
}
@media only screen and (min-width: 64em) {
.spot01 {
background-size: auto;
/* midTab 1024w */
}
}
@media only screen and (min-width: 125em) {
.spot01 {
background-size: 100% auto;
/* custom 2000w */
}
}
.spot01 a {
color: #ffffff;
width: 11.7em;
border-radius: 50%;
padding: 0;
position: relative;
display: inline-block;
vertical-align: top;
transition: transform 0.33s ease-in-out;
z-index: 2;
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.35);
}
@media only screen and (max-width: 47.9375em) {
.spot01 a {
margin: 2% 2% 5em;
/* midTab opt-out 768oo */
}
}
@media only screen and (min-width: 48em) {
.spot01 a {
margin: 0 1.95em;
/* midTab 768w */
}
}
.spot01 a:after {
content: '';
position: relative;
background: rgba(174, 100, 64, 0.9);
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
opacity: 0;
z-index: 1;
transition: transform 0.33s ease-in-out, opacity 0.33s ease-in-out;
}
.spot01 a:hover {
color: #fff;
z-index: 400;
}
.spot01 a:hover:after {
opacity: 1;
}
.spot01 a:hover h2.topic {
transform: translate3d(0, 0, 0);
}
.spot01 a .decoration {
width: 100%;
border-radius: 50%;
transition: transform 0.33s ease-in-out;
}
.spot01 a .info {
width: 100%;
display: block;
position: absolute;
top: 50%;
left: 0;
transform: translate3d(0, -50%, 0);
z-index: 400;
pointer-events: none;
}
.spot01 a h2.topic {
font-weight: 600;
line-height: 0.92857143;
font-size: 1.4em;
color: currentcolor;
width: 100%;
display: block;
transform: translate3d(0, 6.64285714em, 0);
transition: transform 0.33s ease-in-out, opacity 0.33s ease-in-out;
}
.spot01 a h2.topic .trait {
display: block;
font-weight: 600;
font-weight: 300;
letter-spacing: 0.22em;
font-size: 0.82142857em;
}
/* ===============================================
spot02 || COMMON GENERAL INFORMATION SPOTLIGHT SECTION
=============================================== */
.spot02 {
font-size: 3.5vw;
color: #fff;
background: #9eb4b8;
background: -moz-linear-gradient(left, #9eb4b8 0%, #666f75 100%);
background: -webkit-linear-gradient(left, #9eb4b8 0%, #666f75 100%);
background: linear-gradient(to right, #9eb4b8 0%, #666f75 100%);
border-top: solid 0.5em #ffffff;
border-bottom: solid 0.5em #ffffff;
padding: 3.4em 0;
}
@media only screen and (min-width: 41.625em) {
.spot02 {
font-size: min(1.4vw, 1em);
/* custom 666w */
}
}
@media only screen and (min-width: 81.25em) {
.spot02 {
font-size: inherit;
/* desk 1300w */
}
}
.spot02 .doctors {
width: 80%;
display: inline-block;
vertical-align: middle;
position: relative;
}
@media only screen and (min-width: 48em) {
.spot02 .doctors {
width: 100%;
max-width: 31em;
min-height: 21em;
margin: 2.6em 0 0 0;
/* midTab 768w */
}
}
@media only screen and (min-width: 81.25em) {
.spot02 .doctors {
margin: 2.6em 1em 0 -6.3em;
/* desk 1300w */
}
}
.spot02 .doctors a {
display: inline-block;
max-width: 16.5em;
padding: 0.75em 0.75em 0.9em 0.75em;
background: #ffffff;
box-shadow: 0 0.4em 0.4em rgba(0, 0, 0, 0.14);
}
.spot02 .doctors a:hover img {
-webkit-filter: brightness(50%) grayscale(100%);
filter: brightness(50%) grayscale(100%);
}
.spot02 .doctors a:hover .topic {
color: #ae6440;
transform: translate3d(0, 0, 0);
}
.spot02 .doctors a:nth-of-type(1) {
text-align: left;
margin-bottom: 2em;
}
@media only screen and (min-width: 48em) {
.spot02 .doctors a:nth-of-type(1) {
position: absolute;
top: 0;
left: 0;
margin: 0;
transform: translate3d(0, 0, 0) rotate(-5deg);
}
}
.spot02 .doctors a:nth-of-type(2) {
text-align: right;
}
@media only screen and (min-width: 48em) {
.spot02 .doctors a:nth-of-type(2) {
position: absolute;
top: -2em;
left: 0;
margin-left: 14em;
transform: translate3d(0, 0, 0) rotate(5deg);
}
}
.spot02 .doctors a img {
display: block;
margin-left: auto;
margin-right: auto;
max-width: 15em;
margin-bottom: 0.95em;
transition: transform 0.33s ease-in-out, -webkit-filter 0.33s ease-in-out, filter 0.33s ease-in-out;
}
.spot02 .doctors a .topic {
display: block;
font-weight: 600;
letter-spacing: 0.25em;
font-size: 0.7em;
color: #687177;
transition: transform 0.4s ease-in-out, color 0.4s ease-in-out;
}
.spot02 .doctors a .topic .trait {
display: block;
letter-spacing: 0;
}
.spot02 .mod {
width: 90%;
max-width: 24em;
padding: 2em 0 0;
display: inline-block;
vertical-align: middle;
}
@media only screen and (min-width: 48em) {
.spot02 .mod {
text-align: left;
padding: 0;
margin: 3.8em 0 0;
/* midTab 768w */
}
}
.spot02 h2.topic {
display: inline-block;
text-align: left;
font-weight: 600;
line-height: 1;
font-size: 3.5em;
color: #fff;
margin-bottom: 0.4em;
}
.spot02 h2.topic .trait {
text-align: center;
display: block;
letter-spacing: 0.47em;
line-height: 1.2;
font-size: 0.48571429em;
font-weight: 300;
position: relative;
}
.spot02 h2.topic .trait:before,
.spot02 h2.topic .trait:after {
display: inline-block;
vertical-align: middle;
content: '';
width: 1.38235294em;
height: 0.05882353em;
background: #ffffff;
position: absolute;
top: 0.55em;
}
.spot02 h2.topic .trait:before {
left: 0;
}
.spot02 h2.topic .trait:after {
right: 0.3em;
}
.spot02 .info {
line-height: 1.2;
font-weight: 500;
font-size: 0.7em;
margin: 0 0 3.86666667em;
display: none;
}
@media only screen and (min-width: 81.25em) {
.spot02 .info {
display: block;
/* desk 1300w */
}
}
/* ===============================================
spot03 || COMMON TESTIMONIAL SLIDESHOW SECTION EXAMPLE
=============================================== */
.spot03 {
font-size: 3.5vw;
padding: 5em 0;
background-image: url(../images/bg-spot03.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
text-align: center;
width: 100%;
position: relative;
/* links */
}
@media only screen and (min-width: 30em) {
.spot03 {
font-size: inherit;
/* mintab 480w */
}
}
@media only screen and (min-width: 48em) {
.spot03 {
/* midTab 768w */
}
}
@media only screen and (min-width: 64em) {
.spot03 {
background-size: auto;
padding: 9.2em 0 5.75em;
/* midTab 1024w */
}
}
@media only screen and (min-width: 81.25em) {
.spot03 {
background-position: center center;
background-attachment: fixed;
min-height: 30em;
/* desk 1300w */
}
}
@media only screen and (min-width: 125em) {
.spot03 {
background-size: 100% auto;
/* custom 2000w */
}
}
.spot03 .cycle-slideshow {
opacity: 0.7;
color: #ffffff;
width: 90%;
max-width: 48em;
margin: 0 auto;
display: block;
}
@media only screen and (min-width: 48em) {
.spot03 .cycle-slideshow {
width: 70%;
/* midTab 768w */
}
}
@media only screen and (min-width: 64em) {
.spot03 .cycle-slideshow {
width: 100%;
/* midTab 1024w */
}
}
.spot03 .cycle-slideshow:hover {
color: #95adb2;
}
.spot03 .cycle-slide {
width: 100%;
display: block;
transition: color 0.33s ease-in-out;
}
.spot03 .testimony {
line-height: 1.2;
font-size: 1.7em;
display: block;
}
.spot03 .testifier {
line-height: 1;
font-size: 1.3em;
font-weight: 700;
display: block;
margin: 0.7em auto 0;
}
.spot03 .controls {
line-height: 0;
width: 96%;
max-width: 64.5em;
margin: 1em auto;
display: block;
}
@media only screen and (min-width: 48em) {
.spot03 .controls {
text-align: right;
margin: 0 auto;
position: absolute;
top: 50%;
right: 0;
left: 0;
transform: translate3d(0, -50%, 0);
/* midTab 768w */
}
}
.spot03 .controls > a {
line-height: 2.5;
font-size: 1em;
text-align: center;
color: #fff;
width: 3.6em;
height: 3.6em;
display: inline-block;
vertical-align: top;
transition: transform 0.33s ease-in-out, opacity 0.33s ease-in-out;
}
.spot03 .controls > a:hover {
transform: scale(1.1);
opacity: 0.5;
}
.spot03 .controls > a.prev {
margin-right: 1em;
}
@media only screen and (min-width: 48em) {
.spot03 .controls > a.prev {
float: left;
/* midTab 768w */
}
}
.spot03 .links {
display: block;
margin-top: 2em;
}
.spot03 .links .btn {
display: inline-block;
letter-spacing: 0.18em;
vertical-align: middle;
background: rgba(255, 255, 255, 0.5);
font-size: 0.55em;
line-height: 3em;
color: #ffffff;
height: 3em;
padding: 0 1em;
margin: 0 4px;
transition: transform 0.33s ease-in-out, opacity 0.33s ease-in-out, background 0.33s ease-in-out;
}
.spot03 .links .btn a {
display: inline-block;
vertical-align: middle;
}
.spot03 .links .btn a .icon {
transition: transform 0.33s ease-in-out, opacity 0.33s ease-in-out, color 0.33s ease-in-out, text-shadow 0.33s ease-in-out;
font-size: 1.36363636em;
color: #ffffff;
}
.spot03 .links .btn .txt {
display: inline-block;
margin-right: 0.5em;
}
.spot03 .links .btn01:hover {
color: #ffffff;
background: #6f7a7f;
z-index: 1;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.spot03 .links .btn02 a:hover .icon {
color: #6f7a7f;
text-shadow: 1px 1px 0 #ffffff;
transform: translate3d(0, 0, 0) scale(1.3);
}
/* ==================================================================
subnav || aka subnav-outer || aka ipSub
TOP OF PAGE orientation - for sidebar orientation scroll or search down to 'side oriented' [=
=================================================================== */
/* TOP ORIENTED */
#subnav {
font-weight: 600;
text-align: left;
color: #fff;
padding: 1.15em 0;
position: relative;
overflow: hidden;
background: #95adb2;
padding: 0;
}
@media only screen and (min-width: 81.25em) {
#subnav {
margin-top: 7.1em;
padding-top: 0em;
/* desk 1300w */
}
}
#subnav .container {
padding: 0 0 1.2em;
width: 90%;
}
@media only screen and (min-width: 64em) {
#subnav .container {
display: block;
position: absolute;
bottom: 0;
width: 90%;
left: 0;
right: 0;
/* midTab 768w */
}
}
#subnav .hero {
position: relative;
}
#subnav .hero:before {
content: '';
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 49%, rgba(0, 0, 0, 0.3) 100%);
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 49%, rgba(0, 0, 0, 0.3) 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 49%, rgba(0, 0, 0, 0.3) 100%);
}
#subnav .hero img {
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: none;
}
#subnav p {
line-height: 1.5;
font-size: 0.6em;
margin: 0;
padding: 0;
}
#subnav a {
color: #fff;
margin: 0.2em 1.6em 0.2em 0;
display: inline-block;
vertical-align: top;
position: relative;
}
@media only screen and (min-width: 64em) {
#subnav a {
margin: 0;
/* maxTab 1024w */
}
}
#subnav a:after {
content: '';
width: 100%;
height: 1px;
background: currentcolor;
position: absolute;
bottom: 0;
left: 0;
display: block;
opacity: 0;
transition: transform 0.33s ease-in-out, opacity 0.33s ease-in-out;
transform: scaleX(0);
}
#subnav a:hover,
#subnav a.active {
color: #ffffff;
text-decoration: none;
}
#subnav a:hover:after,
#subnav a.active:after {
opacity: 1;
transform: scaleX(1);
}
#subnav .divider {
display: none;
}
@media only screen and (min-width: 64em) {
#subnav .divider {
margin: 0 0.3em;
display: inline-block;
vertical-align: top;
/* maxTab 1024w */
}
}
/* ==================================================================
content || aka .interior-content
=================================================================== */
#bd {
padding: 3em 0;
background: #fff;
position: relative;
z-index: 400;
}
@media only screen and (min-width: 48em) {
#bd {
padding: 4em 0;
/* midTab 780w */
}
}
#bd .container {
width: 90%;
max-width: 64.5em;
}
#content {
display: block;
}
@media only screen and (min-width: 48em) {
#content {
max-width: 39.75em;
width: 61.62790698%;
float: left;
/* midTab 780w */
}
#content p {
text-align: justify;
}
}
#content .content-text {
line-height: 1.8;
}
@media only screen and (min-width: 81.25em) {
#content .content-text {
font-size: 1em;
/* desk 1300w */
}
}
/* ==================================================================
.home content || aka #home-content
=================================================================== */
.hp-decor {
position: absolute;
top: 4.9em;
left: 50%;
margin-left: 0.8em;
display: none;
}
@media only screen and (min-width: 64em) {
.hp-decor {
display: block;
/* midTab 1024w */
}
}
.home #bd {
padding: 3em 0;
}
@media only screen and (min-width: 48em) {
.home #bd {
padding: 6.9em 0 4em;
/* midTab 780w */
}
}
.home #bd .container {
max-width: 64.5em;
}
@media only screen and (min-width: 48em) {
.home #bd .container {
width: 100%;
/* midTab 768w */
}
}
@media only screen and (min-width: 48em) {
.home #bd #content {
width: 100%;
max-width: 31.5em;
float: none;
margin-left: auto;
margin-right: auto;
/* midTab 768w */
}
}
@media only screen and (min-width: 64em) {
.home #bd #content {
margin-left: 0;
/* desk 1300w */
}
}
@media only screen and (min-width: 48em) {
.home #bd #content .content-text {
/* midTab 768w */
}
}
@media only screen and (min-width: 81.25em) {
.home #bd #content .content-text {
font-size: 1em;
/* desk 1300w */
}
}
@media only screen and (min-width: 48em) {
.home #bd #content p {
text-align: justify;
/* midTab 768w */
}
}
/* ==================================================================
custom content
=================================================================== */
.mediaslider {
text-align: center;
}
.mediaslider .cycle-slideshow {
width: 100%;
margin: 0.5em 0 1.5em;
position: relative;
}
.mediaslider .cycle-slideshow .cycle-slide {
padding: 0 5%;
}
.mediaslider .cycle-slideshow > div {
font-size: 2.8em;
color: #6f7a7f;
position: absolute;
top: 50%;
z-index: 900;
transform: translate3d(0, -50%, 0);
}
.mediaslider .cycle-slideshow > div span {
transition: transform 0.35s ease, opacity 0.35s ease;
}
.mediaslider .cycle-slideshow > div.cycle-prev {
text-align: left;
left: 0;
}
.mediaslider .cycle-slideshow > div.cycle-prev span {
transform-origin: left center;
}
.mediaslider .cycle-slideshow > div.cycle-next {
text-align: right;
direction: rtl;
right: 0;
}
.mediaslider .cycle-slideshow > div.cycle-next span {
transform-origin: right center;
}
.mediaslider .cycle-slideshow > div:hover {
cursor: pointer;
}
.mediaslider .cycle-slideshow > div:hover span {
transform: scale(1.44);
opacity: 0.68;
}
/* ===============================================
common treatments
=============================================== */
.before-after-image {
width: 44%;
display: inline-block;
vertical-align: top;
}
.before-after-image img,
.before-after-image span {
display: block;
}
@media only screen and (min-width: 48em) {
.before-after-image img,
.before-after-image span {
width: 100%;
}
}
@media only screen and (min-width: 48em) {
.before-after-box,
p.before-after-text {
width: 49%;
display: inline-block;
vertical-align: top;
}
}
/* comment line below if patient login is live and legit */
.financial-information #financial-online-services {
display: none;
}
/* preventive-care */
.preventive-care #content ul {
display: inline-block;
}
/* reduces dimensions of coronavirus tab */
#coronavirus-update {
font-size: 0.85em;
padding: 0.5em 1.25em !important;
left: 0.5em!important;
}
@media only screen and (min-width: 81.25em) {
#coronavirus-update {
font-size: 1em;
/* desk 1300w */
}
}
/* ==================================================================
meet the team page classes for individual and full team images
=================================================================== */
.staff {
width: 45%;
max-width: 10em;
margin: 0 0 1em 1em;
display: block;
float: right;
}
.team {
width: 100%;
max-width: 1000px;
margin: 2% auto;
display: block;
}
/* ==================================================================
sitemap
=================================================================== */
.sitemap #content .column > ul > li {
margin-bottom: 1.45em;
}
.sitemap #content ul {
margin-left: 0px;
list-style: none;
margin-bottom: 0;
}
.sitemap #content ul a {
line-height: 1.52173913;
font-size: 1.15em;
font-weight: 600;
text-decoration: none;
color: #95adb2;
transition-duration: 0s;
}
.sitemap #content ul ul li a {
line-height: 1.8;
font-size: 1em;
font-style: normal;
font-weight: 400;
text-transform: none;
color: #464d51;
margin-left: 0;
/*to increase space adjust [body.sitemap #bd ul ul li] below*/
}
.sitemap #content a:hover {
text-decoration: none;
color: #95adb2;
}
body.sitemap #bd ul li {
list-style: none;
}
body.sitemap #bd ul ul li {
list-style: none;
/*list-style-image:none;*/
margin-left: 0;
/*default=15px*/
}
body.sitemap #content .width1 {
width: 100%;
}
@media only screen and (min-width: 48em) {
body.sitemap #content .width1 {
width: 50%;
/*default 50%*/
/* midTab 768w */
}
body.sitemap #content .width1:not(.first) {
width: auto;
float: right;
}
}
/* global override */
/* ==================================================================
sidebar
=================================================================== */
#sidebar {
width: 100%;
max-width: 15em;
margin: 0 auto 6%;
padding: 0;
position: relative;
z-index: 420;
}
@media only screen and (min-width: 48em) {
#sidebar {
width: 100%;
margin: 0 0 1em;
float: right;
clear: right;
display: block;
/* midTab 768w */
}
}
@media only screen and (min-width: 81.25em) {
#sidebar {
margin: 0.4em 0 1em;
/* desk 1300w */
}
}
/* ===============================================
sidebar quick links
=============================================== */
.qlinks a {
font-size: 0.85em;
line-height: 2.58823529;
display: block;
text-align: center;
width: 17.64705882em;
height: 2.58823529em;
color: #ffffff;
margin: 0;
position: relative;
z-index: 2;
transition: transform 0.6s ease-in-out, color 0.6s ease-in-out;
}
@media only screen and (min-width: 81.25em) {
.qlinks a {
margin: 0 0 0.95em;
/* desk 1300w */
}
}
.qlinks a:nth-of-type(1) {
background: #ae6440;
}
.qlinks a:nth-of-type(2) {
background: #766056;
margin: 0.8em 0;
}
.qlinks a:nth-of-type(3) {
background: #6f7a7f;
}
.qlinks a .trait {
font-weight: 600;
}
.qlinks a:before {
transition: transform 0.6s ease-in-out, background 0.6s ease-in-out, opacity 0.33s ease-in-out;
content: '';
background: #d1eff9;
background: -moz-linear-gradient(top, #d1eff9 0%, #95aeb2 99%);
background: -webkit-linear-gradient(top, #d1eff9 0%, #95aeb2 99%);
background: linear-gradient(to bottom, #d1eff9 0%, #95aeb2 99%);
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
z-index: -1;
opacity: 0;
}
.qlinks a:hover {
color: #894f32;
}
.qlinks a:hover:before {
transform: translate3d(0, 0, 0);
opacity: 1;
}
/* ===============================================
show doctor image on all devices
=============================================== */
/*.home,*/
/*body[class^='meet-the-'], body[class^='meet-our-'],*/
.meet-the-doctor #sidebar,
body[class^='meet-dr-'] #sidebar,
body[class^='meet-doctor-'] #sidebar {
display: block;
}
body[class~='blog'] #sidebar {
display: block;
}
body[class~='blog'] #hide-stock {
display: none;
}
/* END SIDEBAR - */
/* ==================================================================
.spotlight
=================================================================== */
/* ===============================================
spot04 || COMMON SERVICES/CALLOUT-LIKE SECTION EXAMPLE
=============================================== */
.spot04 {
text-align: center;
padding: 2em 0;
margin: 0;
background: #95adb2;
position: relative;
z-index: 410;
}
@media only screen and (max-width: 47.9375em) {
.spot04 {
font-size: min(1.4vw, 1em);
/* midTab 768oo */
}
}
@media only screen and (min-width: 48em) {
.spot04 {
font-size: min(1vw, 1em);
padding: 4.25em 0;
/* midTab 768w */
}
}
@media only screen and (min-width: 81.25em) {
.spot04 {
font-size: 1.4vw;
font-size: min(1.4vw, 1em);
/* desk 1300w */
}
}
.spot04:after {
content: '';
width: 100%;
height: auto;
background-color: #ae6440;
border-top: 0.5em solid #fff;
display: block;
position: absolute;
top: 50%;
right: 0;
bottom: 0;
z-index: 1;
pointer-events: none;
}
.spot04 a {
color: #fff;
padding: 0;
margin: 0.75em;
background-color: #000000;
box-shadow: 0.5em 0.75em 0.5em rgba(0, 0, 0, 0.25);
position: relative;
display: inline-block;
vertical-align: top;
z-index: 420;
transition: color 0.33s ease-in-out;
}
.spot04 a:nth-of-type(1),
.spot04 a:nth-of-type(3) {
width: 35.36121673%;
max-width: 23.25em;
}
.spot04 a:nth-of-type(2),
.spot04 a:nth-of-type(4) {
width: 60.07604563%;
max-width: 39.5em;
}
.spot04 a:nth-of-type(4) {
margin-top: -15.65em;
}
.spot04 a:before {
content: '';
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 2;
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.99) 0%, rgba(0, 0, 0, 0) 100%);
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.99) 0%, rgba(0, 0, 0, 0) 100%);
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.99) 0%, rgba(0, 0, 0, 0) 100%);
background-repeat: no-repeat;
background-position: 0 0;
background-size: 100% 50%;
opacity: 0.3;
}
.spot04 a:hover {
color: #ae6440;
z-index: 400;
}
.spot04 a:hover .decoration {
opacity: 0.33;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.spot04 a .decoration {
width: 100%;
display: block;
position: relative;
z-index: 1;
transition: opacity 0.33s ease-in-out, -webkit-filter 0.33s ease-in-out, filter 0.33s ease-in-out;
}
.spot04 a .info {
width: auto;
display: block;
position: absolute;
top: 1.4em;
left: 1.4em;
z-index: 420;
transform-origin: 0 0;
}
@media only screen and (max-width: 81.1875em) {
.spot04 a .info {
transform: translate3d(0, 0, 0) scale(2);
/* desk 1300oo */
}
}
@media only screen and (min-width: 81.25em) {
.spot04 a .info {
/* desk 1300w */
}
}
.spot04 a .icon {
margin-right: 0.55em;
display: inline-block;
vertical-align: top;
}
.spot04 a .icon.cosmetic {
width: 1.8em;
height: 2.1em;
}
.spot04 a .icon.dentures {
width: 2.1em;
height: 1.05em;
}
.spot04 a .icon.aligners {
width: 2.55em;
height: 2.1em;
}
.spot04 a .icon.apnea {
width: 2.3em;
height: 2.1em;
}
.spot04 a .icon path {
fill: currentcolor;
}
.spot04 a h2.topic {
line-height: 0.875;
font-size: 1.2em;
text-align: left;
font-weight: 600;
color: currentcolor;
white-space: nowrap;
width: auto;
display: inline-block;
vertical-align: top;
}
/* ==================================================================
association logos
=================================================================== */
.associationlogos {
text-align: center;
padding: 2.85em 0 2.3em;
background: #fff;
position: relative;
}
@media only screen and (max-width: 47.94em) {
.associationlogos {
font-size: 2vw;
/* midTab opt-out 767oo */
}
}
@media only screen and (min-width: 48em) {
.associationlogos {
font-size: 1.25vw;
/* midTab 768w */
}
}
@media only screen and (min-width: 64em) {
.associationlogos {
font-size: inherit;
display: flex;
justify-content: space-evenly;
/* maxTab 1024w */
align-items: center;
}
}
.associationlogos a {
margin: 2%;
display: inline-block;
vertical-align: middle;
transition: opacity 0.33s ease-in-out, transform 0.33s ease-in-out;
}
@media only screen and (min-width: 48em) {
.associationlogos a {
margin: 0 2.2em;
/* midTab 768w */
}
}
@media only screen and (min-width: 64em) {
.associationlogos a {
margin: 0 ;
}
}
.associationlogos a:hover {
transform: scale(0.88);
opacity: 0.8;
}
.associationlogos a.clearcorrect {
width: 8.6em;
height: 1.4em;
}
.associationlogos a.trios {
width: 4.55em;
height: 1.05em;
}
.associationlogos a.somnodent {
width: 7em;
height: 0.85em;
}
.associationlogos a.zoom {
width: 6.45em;
height: 2.7em;
}
.associationlogos a.cc {
width: 4.05em;
height: 4.05em;
}
.associationlogos a img,
.associationlogos a svg {
/*width: 100%;*/
/*height: 100%;*/
/*display: block;*/
}
/* ==================================================================
#ft
=================================================================== */
#ft {
text-align: center;
color: #fff;
width: 100%;
padding: 0;
background: #cccccc url(../images/footer/warsaw-dental-office.png) no-repeat center center;
background-size: cover;
display: inline-block;
vertical-align: top;
position: relative;
}
@media only screen and (min-width: 81.25em) {
#ft {
background-size: auto 100% /* desk 1300w */;
}
}
#ft a {
color: #fff;
transition: color 0.33s ease-in-out;
}
#ft a:hover {
color: #464d51;
}
/* ===============================================
locations || aka ft-location
=============================================== */
#location {
width: 100%;
background-image: -moz-linear-gradient(left, rgba(103, 112, 118, 0.9) 0%, rgba(178, 194, 196, 0.9) 100%);
background-image: -webkit-linear-gradient(left, rgba(103, 112, 118, 0.9) 0%, rgba(178, 194, 196, 0.9) 100%);
background-image: linear-gradient(to right, rgba(103, 112, 118, 0.9) 0%, rgba(178, 194, 196, 0.9) 100%);
background-size: cover;
background-repeat: no-repeat;
display: block;
}
@media only screen and (max-width: 47.9375em) {
#location {
text-align: center;
padding: 3em 0;
/* midTab 768oo */
}
}
@media only screen and (min-width: 48em) {
#location {
text-align: left;
width: 50%;
height: 28.5em;
margin-left: 50%;
padding: 8.4em 0 0 9em;
/* midTab 768w */
}
}
#location .mod {
width: 100%;
max-width: 13em;
display: inline-block;
vertical-align: top;
}
@media only screen and (max-width: 47.9375em) {
#location .mod {
margin: 0 auto;
/* midTab opt-out 768oo */
}
}
@media only screen and (min-width: 48em) {
#location .mod {
margin: 0 auto 0 0;
/* midTab 768w */
}
}
#location .doctor {
line-height: 1.05;
font-size: 1em;
font-weight: 700;
display: block;
}
#location .address {
line-height: 1.4;
font-size: 0.75em;
margin: 1.13333333em auto 0;
display: block;
}
#location .address .marker {
line-height: 1;
font-size: 4.4em;
margin-right: 5.95em;
position: absolute;
right: 50%;
top: 3.42em;
z-index: 400;
transition: transform 0.33s ease-in-out;
transform-origin: center bottom;
display: none;
}
@media only screen and (min-width: 48em) {
#location .address .marker {
display: block;
/* midTab 768w */
}
}
#location .address .marker:before {
color: #b46c4a;
}
#location .address .marker:after {
content: '';
width: 1.10606061em;
height: 1.01515152em;
background: url(../images/footer/shadowalt.png) no-repeat center center;
background-size: cover;
position: absolute;
left: 0.2em;
bottom: -0.15em;
z-index: -1;
transition: transform 0.33s ease-in-out;
}
#location .address:hover .marker {
transform: scale(2);
}
#location .phone {
line-height: 1.4;
font-size: 0.75em;
display: block;
}
#location .email {
line-height: 1.4;
font-size: 0.75em;
text-decoration: underline;
display: block;
}
#location .officehours {
line-height: 1.61538462;
font-size: 0.65em;
width: 100%;
margin: 3em auto 0;
display: block;
}
#location .officehours .days {
text-align: right;
width: 41.92307692%;
padding-right: 1.53846154em;
display: inline-block;
vertical-align: top;
white-space: nowrap;
}
#location .officehours .hours {
width: 50.76923077%;
display: inline-block;
vertical-align: top;
white-space: nowrap;
}
/* ==================================================================
#links || aka ft-design-credit
=================================================================== */
#links {
text-align: center;
color: #fff;
padding: 2em 0;
margin: 0;
background-color: #ccc;
background-image: url(../images/bg-ft.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
}
@media only screen and (min-width: 48em) {
#links {
height: 4.8em;
padding: 1.65em 0 0;
/* midTab 768w */
}
}
@media only screen and (min-width: 64em) {
#links {
background-size: auto;
/* midTab 1024w */
}
}
@media only screen and (min-width: 125em) {
#links {
background-size: 100% auto;
/* custom 2000w */
}
}
#links .util {
line-height: 2.5;
font-size: 0.6em;
margin-bottom: 2em;
}
@media only screen and (min-width: 30em) {
#links .util {
line-height: 2.5;
width: auto;
margin: 0.5em 0 0;
float: left;
/* mintab 480w */
}
}
#links .util a {
color: #fff;
transition: color 0.33s ease-in-out;
}
#links .util a:hover {
color: #ca8e70;
}
#links .util a,
#links .util .divider {
display: inline-block;
}
#links .util .divider {
margin: 0 0.1em;
}
/* ===============================================
sesame link
=============================================== */
a#sesame-link .sesameicon {
width: 1.33333333em;
height: 1.16666667em;
margin-right: 0.41666667em;
display: inline-block;
vertical-align: middle;
}
a#sesame-link .sesameicon path {
fill: currentcolor;
transition: fill 0.33s ease-in-out;
}
/* ===============================================
backToTop
=============================================== */
#btt {
text-align: center;
display: block;
width: 100%;
margin: 0;
position: relative;
}
@media only screen and (min-width: 30em) {
#btt {
width: auto;
float: right;
/* mintab 480w */
}
}
a#backtotop {
font-weight: 700;
line-height: 2.30769231;
font-size: 0.65em;
color: #ffffff;
display: inline-block;
vertical-align: top;
transition: color 0.33s ease-in-out, background 0.33s ease-in-out;
background: #ae6440;
width: 10.38461538em;
height: 3.07692308em;
line-height: 3.07692308;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.35);
}
a#backtotop:hover {
color: #ffffff;
background: #95adb2;
}
/*superlative*/
/************************************************************************************************************************************************/
/* hide double hr aka div.hr */
hr,
.types-of-braces #content div.clear {
font-size: inherit;
height: 1px;
width: 100%;
margin: 1.58em 0;
background: #666666;
border: none;
display: block;
}
/* ===============================================
success message
=============================================== */
.success {
text-transform: none;
font-weight: 400;
color: #fff;
width: 100%;
padding: 1rem;
float: left;
background: #6f7a7f;
}
/* ===============================================
Form Buttons
=============================================== */
form button {
letter-spacing: normal;
font-weight: 400;
font-size: smaller;
color: #fff;
height: 38px;
padding: 0 1.5em;
background-color: #6f7a7f;
border: 1px solid #6f7a7f;
transition: color 0.33s ease-in-out, background-color 0.33s ease-in-out, border-color 0.33s ease-in-out;
}
form button:hover {
color: #fff;
border-color: #464d51;
background-color: #464d51;
}
form p {
height: auto;
}
/* ===============================================
chat widget resize for mobile use comfort
=============================================== */
#bc-chat-container {
font-size: 0.8em!important;
}
.bc-minimize-state {
width: 11.8em!important;
height: 7.7em!important;
}
/************************************************************************************************************************************************/
/* end superlatives */
/* ===============================================
Tablet
Supports 48em (768px) and up
=============================================== */
@media only screen and (min-width: 48em) {
/* ===============================================
custom content
=============================================== */
/*.success{ width:66%; }*/
/*table.office-hours{ max-width:50%; }*/
.speed-system img[alt='Speed Braces'] {
display: block;
}
/* ===============================================
PAGE SPECIFIC
=============================================== */
.which-is-right-for-me #content p {
display: inline-block;
float: left;
}
.which-is-right-for-me #content a[href^='/sesame_media/docs/'] {
text-align: center;
display: block;
width: 100%;
clear: both;
}
.which-is-right-for-me #content a[href^='/sesame_media/docs/'] img {
display: inline-block;
}
.in-ovation-testimonials .embed-container {
display: block;
margin-left: auto;
margin-right: auto;
}
[class^='inovation-chart-'] {
display: inline-block;
max-width: 50%;
}
.in-ovation-before-after #content p {
text-align: center;
margin-bottom: 0;
}
.in-ovation-before-after .content-text h3 {
text-align: center;
}
.in-ovation-before-after .content-text .img-left,
.in-ovation-before-after .content-text .border {
max-width: 44%;
float: none;
display: inline-block;
margin: 2%;
}
.in-ovation-videos .content-text h2 {
text-align: center;
}
.in-ovation-videos .content-text .embed-container {
display: block;
margin-left: auto;
margin-right: auto;
}
body[class*='in-ovation'] .img-right {
max-width: 40%;
}
/*END*/
}
/* ===============================================
Large Tablet Stylings
Supports 64em (1024px) and up
=============================================== */
@media only screen and (min-width: 64em) {
/* ==================================================================
main-nav
=================================================================== */
/* ==================================================================
main-nav
=================================================================== */
#main-nav {
font-size: inherit;
width: 100%;
height: 3.65em;
margin-top: 1.8em;
position: relative;
top: auto;
z-index: 2900;
box-shadow: none;
/*background:none;*/
}
#main-nav .container {
background: none;
max-width: right;
}
#main-nav div.collapsible {
margin: 0 auto;
}
#main-nav ul {
height: 3.65em;
width: auto;
padding: 0;
margin: 0;
border: none;
background: none;
position: static;
float: right;
}
#main-nav ul li {
height: 100%;
margin: 0 1.4em 0 0;
background: none;
position: relative;
vertical-align: top;
float: none;
clear: none;
}
#main-nav ul li.dental ul {
width: 25.4em;
}
#main-nav ul li.dental ul li {
width: 49%;
}
#main-nav ul li.contact,
#main-nav ul li.contact-us {
margin-right: 0;
padding-right: 0;
}
#main-nav ul li a[id] {
line-height: 2.28571429;
text-align: center;
text-decoration: none;
height: 100%;
z-index: 3000;
}
#main-nav ul ul {
width: auto;
height: auto;
padding: 1.2em 0.5em;
z-index: 2800;
position: absolute;
display: none;
}
#main-nav ul ul li {
width: 100%;
height: 0.9em;
margin: 0;
padding: 0;
opacity: 1;
float: left;
}
#main-nav ul ul li a {
line-height: 1.38461538;
text-align: left;
white-space: nowrap;
height: 1.38461538em;
width: 100%;
padding: 0 1.38461538em;
float: left;
transition-duration: 0s;
}
#main-nav ul li.contact-us ul li a,
#main-nav ul li.contact ul li a {
text-align: right;
float: right;
}
#main-nav ul li:hover ul {
left: -0.85em;
/*top:37px;*/
display: block;
}
#main-nav ul li.contact-us:hover ul,
#main-nav ul li.contact:hover ul {
left: auto;
right: -0.85em;
margin: 0;
}
/*END*/
}
/* ie nonsense */
/***********************************************
target ie11: html[data-useragent*='Trident/7.0']
***********************************************/
html[data-useragent*='Trident/7.0'] {
/* END */
}
/* custom animations */
@keyframes flyinmobilenav {
from {
left: 300px;
opacity: 0;
}
to {
left: 0;
opacity: 1;
}
}