@charset "UTF-8";

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v19/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfMZg.ttf) format('truetype')
}

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v19/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuFuYMZg.ttf) format('truetype')
}

@font-face {
    font-family: 'Libre Caslon Text';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/librecaslontext/v5/DdT678IGsGw1aF1JU10PUbTvNNaDMfq91-c.ttf) format('truetype')
}

@font-face {
    font-family: 'Libre Caslon Text';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/librecaslontext/v5/DdT878IGsGw1aF1JU10PUbTvNNaDMcq_.ttf) format('truetype')
}

@font-face {
    font-family: 'Libre Caslon Text';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/librecaslontext/v5/DdT578IGsGw1aF1JU10PUbTvNNaDMfID8sdj.ttf) format('truetype')
}

#bottom-form .styled-form input{
    font-family: 'Inter', sans-serif;
}

.items-center {
    align-items: center
}

.justify-around {
    justify-content: space-around
}

.h2 {
    display: block
}

/* Critical Mobile Styles - Above the Fold */
@media only screen and (max-width: 1024px) {
    /* Header Mobile Styles */
    header {
        background-color: #fff !important;
        box-shadow: 0 0 15px rgba(0,0,0,.3);
        left: 0;
        position: fixed;
        top: 0;
        z-index: 500;
    }
    
    body {
        position: relative;
        right: 0;
    }
    
    body, header {
        -webkit-transition: all .3s;
        transition: all .3s;
    }
    
    .mean-container .mean-bar, .mean-container .mean-nav {
        background-color: #2a4152;
    }
    
    body.mean-active header {
        left: -80%;
    }
    
    body.mean-active {
        overflow: hidden;
        right: 80%;
    }
    
    body.mean-active:before {
        background-color: #000;
        bottom: 0;
        content: "";
        left: 0;
        opacity: .7;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 98;
    }
    
    body.mean-active .mean-container .mean-nav {
        right: 0;
    }
    
    .mean-container {
        display: -webkit-box !important;
        display: -webkit-flex !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-flex-flow: row nowrap;
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
    
    .mean-container a.meanmenu-reveal {
        color: #fff;
        display: block;
        font-size: 20px;
        line-height: 45px;
        width: 45px;
    }
    
    .mean-container a.meanmenu-reveal.meanclose {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    
    .mean-container .mean-bar i {
        display: block;
    }
    
    .mean-container a.meanmenu-reveal i:before {
        margin: 0 !important;
    }
    
    .mean-container .mean-nav {
        bottom: 0;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-flow: column;
        -ms-flex-flow: column;
        flex-flow: column;
        font-size: 16px;
        margin: 0;
        overflow: auto;
        position: fixed;
        right: -80%;
        top: 0;
        width: 80%;
    }
    
    .mean-container .mean-nav ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: 100%;
    }
    
    .mean-container .mean-nav ul li {
        position: relative;
        width: 100%;
    }
    
    .mean-container .mean-nav ul li a {
        border-top: 1px solid hsla(0,0%,100%,.5);
        color: #fff;
        display: block;
        margin: 0;
        padding: 1em 5%;
        padding-right: 58px !important;
        text-align: left;
        text-decoration: none;
        text-transform: uppercase;
    }
    
    .mean-container .mean-nav ul li li a {
        border-top: 1px solid #f1f1f1;
        border-top: 1px solid hsla(0,0%,100%,.25);
        filter: alpha(opacity=75);
        opacity: .75;
        padding: 1em 10%;
        text-shadow: none !important;
        visibility: visible;
    }
    
    .mean-container .mean-nav ul li.mean-first a {
        border-top: none;
        margin-top: 0;
    }
    
    .mean-container .mean-nav ul li.mean-last a {
        border-bottom: none;
        margin-bottom: 0;
    }
    
    .mean-container .mean-nav ul li li li a {
        padding: 1em 15%;
    }
    
    .mean-container .mean-nav ul li li li li a {
        padding: 1em 20%;
    }
    
    .mean-container .mean-nav ul li li li li li a {
        padding: 1em 25%;
    }
    
    .mean-container .mean-nav ul li a:hover {
        background: #252525;
        background: hsla(0,0%,100%,.1);
    }
    
    .mean-container .mean-nav ul li a.mean-expand {
        background: hsla(0,0%,100%,.1);
        border: 1px solid hsla(0,0%,100%,.4) !important;
        border-right: none !important;
        border-top: none !important;
        font-size: 20px;
        line-height: 47px;
        padding: 0 !important;
        position: absolute;
        right: 0;
        text-align: center;
        top: 0;
        width: 48px;
        z-index: 2;
    }
    
    .mean-container .mean-nav ul li a.mean-expand:before {
        content: "\e825";
        font-family: fontello;
        font-style: normal;
        font-weight: 400;
        margin: 0;
    }
    
    .mean-container .mean-nav ul li a.mean-expand.mean-clicked:before {
        content: "\e83a";
    }
    
    .mean-remove {
        display: none !important;
    }
    
    body.scrolled header, header {
        position: fixed;
    }
    
    .mean-container {
        flex-flow: row nowrap !important;
    }
    
    #main-header > div > a {
        flex: 0 1 auto;
    }
    
    nav > ul {
        display: none;
    }
    
    nav.opened > ul > li, nav > ul {
        margin: 0;
        text-align: center;
    }
    
    nav.opened > ul > li ul {
        padding-left: 0;
        text-align: center;
    }
    
    nav {
        width: 100%;
    }
    
    nav li {
        margin: 0;
    }
    
    header .header-contact {
        order: 0;
    }
    
    header #main-header {
        align-items: center;
        padding: 0;
    }
    
    #main-header .header-contact {
        display: flex;
        flex: 0 1 auto;
        flex-wrap: wrap;
        justify-content: space-around;
        margin: 0 auto;
    }
    
    #main-header .header-contact > * {
        margin: 0 5px;
    }
    
    #main-header .header-contact em {
        display: none;
    }
    
    header .pho {
        font-size: 22px;
    }
    
    header .phy {
        font-size: 12px;
        line-height: 1.1;
        text-align: center;
    }
    
    header .logo {
        margin: 0 auto 0 0;
        padding: 5px;
    }
    
    header .logo img {
        margin: 0;
        max-width: 200px;
    }
    
    header .he-contact {
        flex-wrap: wrap;
        justify-content: space-around;
    }
    
    header .title {
        color: #fff;
        font-size: 20px;
    }
    
    header .hours {
        color: #fff;
        margin: 0 auto;
        max-width: 260px;
        text-align: left;
    }
    
    header .hours label {
        width: 100px;
    }
    
    header .mean-bar {
        flex: 0 0 auto !important;
    }
    
    header .he-contact {
        display: flex;
    }
    
    header #main-header > div, header #main-nav, header .he-nav {
        flex: 0 1 auto;
    }
}

@media only screen and (max-width: 768px) {
    #main-header .he-contact, header .top-bar {
        display: none;
    }
}

/* Fixed Tabs Mobile */
@media (max-width: 1024px) {
    #fixed-tabs {
        bottom: 0;
        box-shadow: 0 0 15px rgba(0,0,0,.3);
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        width: 100%;
    }
    
    header .ra {
        display: none;
    }
    
    #fixed-tabs a {
        padding: 10px 0;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
    }
    
    #fixed-tabs a span {
        display: inline-block;
        padding-left: 10px;
        vertical-align: middle;
    }
    
    #fixed-tabs a span:last-child {
        margin-left: 7px;
    }
    
    #fixed-tabs a strong {
        display: none;
    }
    
    footer {
        padding-bottom: 41px !important;
    }
    
    .mean-container .mean-nav {
        bottom: 41px;
    }
}

@media (max-width: 768px) {
    #fixed-tabs .call, #fixed-tabs .map {
        display: block;
    }
    
    #fixed-tabs a.fb, #fixed-tabs a.fm, #fixed-tabs a.gp, #fixed-tabs a.so {
        display: none;
    }
    
    #controls {
        padding-bottom: 16px;
    }
    
    .divider-body.no-img {
        padding-left: 14px;
        padding-right: 14px;
    }
    
    .more-to-explore > span {
        font-size: 70px;
    }
    
    .btn {
        align-items: center;
        display: flex;
        justify-content: center;
    }
    
    main > p:first-of-type {
        margin-top: 60px;
    }
    
    .more-to-explore {
        padding-left: 14px;
        padding-right: 14px;
    }
    
    .hours > div {
        line-height: 1.6;
    }
    
    main ul {
        list-style: none;
        padding-left: 16px;
    }
    
    .mean-nav .social {
        padding: 10px 0;
    }
}

/* Hero/Banner Mobile Styles */
@media only screen and (max-width: 900px) {
    .banner:after {
        content: none;
    }
    
    .banner {
        max-height: 100%;
    }
    
    .banner-caption {
        text-align: center;
    }
    
    .banner-caption > div {
        margin: 0 auto;
    }
    
    .banner .banner-caption {
        position: static;
        transform: none;
        text-align: center;
        padding-top: 50px;
        padding-bottom: 50px;
    }
    
    .banner .play, .banner .play i {
        display: block;
    }
    
    .banner .play i {
        margin: 0 auto 20px;
        border: 2px solid #fff;
        color: #bdb4a8;
    }
    
    .banner .play {
        width: 100%;
        text-align: center;
        margin: 15px 0;
        display: block;
    }
    
    #welcome.split article {
        margin-bottom: 30px;
    }
    
    .mobile-only {
        display: block !important;
        width: 100%;
    }
    
    .btns-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 15px;
        padding-top: 20px;
    }
    
    .btns-wrapper .mobile-only {
        order: 1;
    }
    
    .btns-wrapper .fill-light-blue {
        order: 2;
    }
    
    .btns-wrapper .play {
        order: 3;
    }
    
    #welcome {
        margin-top: 50px;
        margin-bottom: -50px;
    }
}

/* Mobile Typography */
@media screen and (max-width: 800px) {
    #page-title .title-wrapper {
        padding: 60px 10px 40px;
    }
    
    h1, #page-title h1, #page-title h1 + h2, h2, .h2, .banner h2 {
        font-size: 50px;
        line-height: 1.2;
    }
    
    h3 {
        font-size: 25px;
        line-height: 1.2;
    }
}

@media screen and (max-width: 600px) {
    main {
        text-align: center;
    }
    
    .wow {
        transform: none !important;
        animation: none !important;
        visibility: visible !important;
    }
    
    h1, #page-title h1, #page-title h1 + h2, h2, .h2, .banner h2 {
        font-size: 40px;
        line-height: 1.2;
    }
    
    .home-title {
        line-height: 55px !important;
    }
}

/* Mobile Layout Fixes */
@media screen and (max-width: 1024px) {
    .split > div {
        display: block;
        text-align: center;
    }
    
    #welcome article div {
        margin: 0 auto 24px;
    }
}

@media screen and (max-width: 800px) {
    #experience .flex, #apart .content {
        display: block;
        text-align: center;
    }
    
    #experience .testimonial {
        margin-top: 40px;
    }
    
    .contact-us .hours small, .ra-bar .h2 {
        text-align: center;
    }
    
    #apart .content figure p {
        margin: 1em auto;
    }
    
    #apart .content img, #apart .content > div + div, #apart ul {
        margin: 0 auto;
    }
    
    #apart ul {
        display: table;
    }
    
    #services .links a {
        flex: 1 1 50%;
    }
    
    #index-tour .arrow {
        position: static;
    }
    
    #index-tour .caption {
        margin: 0 auto;
    }
    
    #bottom-map, #meet, #services, .reviews {
        padding: 30px 10px;
    }
    
    #bottom-map:after, #meet:after, #services:after, .reviews:after {
        content: none;
    }
    
    #values figure h2 span {
        font-size: 200px;
    }
    
    body.no-main #page-title {
        padding: 70px 10px 40px;
    }
    
    body.no-main #page-title .title-wrapper {
        padding: 0;
    }
    
    #tour .arrow {
        position: static;
    }
}

@media screen and (max-width: 600px) {
    .contact-us h2, .contact-us h3, main {
        text-align: center;
    }
    
    .animated, .wow {
        animation: none !important;
        transform: none !important;
        transition-property: none !important;
        visibility: visible !important;
    }
    
    #map, footer .gmap {
        display: none;
    }
    
    #bottom-form .forms .inputs {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    
    #bottom-form .forms .inputs .input {
        flex: 1 !important;
    }
    
    .btn, .btn-alt {
        margin: 10px auto;
        min-width: auto !important;
        width: 100%;
    }
    
    #copyright {
        font-size: 16px;
        letter-spacing: 0;
        margin-top: 1rem;
    }
    
    #copyright img {
        max-width: 50px;
    }
    
    #values .links a {
        display: block;
    }
    
    #values .links a .img {
        margin: 0 auto;
    }
    
    .affil {
        display: none;
    }
    
    #welcome .sig {
        display: block;
    }
    
    #pay-form table, #pay-form tbody, #pay-form td, #pay-form tr {
        display: block;
        width: 100%;
    }
    
    #pay-form .btn {
        white-space: normal;
    }
    
    .social a + a {
        margin-left: 10px;
    }
}

/* Desktop Styles */
@media only screen and (min-width: 900px) {
    .top-bar, #main-header, #main-navbar {
        padding: 0 1.25rem;
    }
}

/* Base Styles */
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    line-height: 1.5;
}

body {
    margin: 0;
    position: relative;
    color: #281e1d;
    font-family: Inter;
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    letter-spacing: normal;
    line-height: 1.75;
    opacity: 1;
}

main {
    display: block;
    padding: 0 00px;
    margin: 0 auto;
}

body.page_index main {
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.container {
    max-width: 1320px;
    margin: 0 auto;
}

h1, h2, h3 {
    font-weight: 400;
    line-height: 1.2;
    font-size: inherit;
    font-weight: inherit;
    margin: 0;
}

h1 {
    font-size: 2em;
    margin: .67em 0;
}

h2 {
    color: #2a4152;
    font-family: "Libre Caslon Text", serif;
    font-size: 65px;
    font-weight: 400;
    font-style: normal;
    letter-spacing: normal;
    line-height: 1.08;
}

h3 {
    color: #281e1d;
    font-family: Inter;
    font-size: 16px;
    font-weight: 700;
    font-style: normal;
    letter-spacing: normal;
    line-height: 1.38;
}

.h2 {
    color: #2a4152;
    font-family: "Libre Caslon Text", serif;
    font-size: 85px;
    font-weight: 400;
    font-style: normal;
    letter-spacing: normal;
    line-height: .94;
    display: block;
}

.h1 {
    color: #3c63b5;
    font-family: Inter;
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    letter-spacing: normal;
    line-height: 1.88;
    display: block;
}

.text-white {
    color: #fff;
}

a {
    color: #3c63b5;
    background-color: transparent;
    color: inherit;
    text-decoration: inherit;
}

a:hover {
    color: #2a4152;
}

img {
    border-style: none;
    display: block;
    vertical-align: middle;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

*, ::after, ::before {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e2e8f0;
}

iframe, img {
    display: block;
    vertical-align: middle;
}

[data-embed], [data-player], [data-vimeo] {
    position: relative;
}

.flex {
    display: flex;
}

.items-start {
    align-items: flex-start;
}

.justify-between {
    justify-content: space-between;
}

#sedation-banner {
    display: none !important;
}

.main-container, body {
    overflow-x: hidden;
}

#page-title {
    background-image: url('https://losgatosdentalgroup.com/static/banner-bg-1.c851546020.jpg');
    background-size: cover;
}

#page-title .title-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    flex: 0 1 600px;
}

body.page_index #page-title {
    display: none;
}

@media (max-width: 480px) {
    #sedation-banner .float-image {
        left: 25px !important;
    }
}

.split > div {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    align-items: center;
    max-width: 1320px;
    margin: 0 auto;
}

.split .h2 {
    font-size: 50px;
    margin: 28px 0 30px;
    line-height: 60px;
}

.split article {
    margin: 0;
    flex: 0 1 750px;
    padding: 10px;
}

main h1 {
    position: relative;
}

@media (max-width: 1024px) {
    body {
        right: 0;
        position: relative;
    }
}

.banner {
    background-color: #2a4152;
    position: relative;
    min-height: 550px;
    overflow: hidden;
    color: #fff;
}

.banner h1, .banner h2 {
    color: #fff;
}

.banner h1 {
    font-size: 20px;
    margin-bottom: 20px;
}

.banner h2 {
    font-size: 80px;
    line-height: 100%;
}

.banner:after {
    content: "";
    background-image: linear-gradient(91deg, #281e1d 0, rgba(40, 30, 29, 0) 100%);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 575px;
}
@media (max-width:768px) {

    .banner:after {
            background-image:none;
            
        }
}
.banner .play {
    color: #fff;
    font-family: Inter;
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    letter-spacing: normal;
    line-height: 1;
    margin-right: 34px;
}

.banner .play i {
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    border-radius: 50%;
    font-size: 18px;
    padding: 15px 0 15px 3px;
    width: 47px;
    height: 47px;
    background-color: #2a4152;
    color: #fff;
}

.banner .banner-caption {
    z-index: 5;
    padding: 10px;
    max-width: 1200px;
    width: 100%;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
}
@media (max-width:768px) {
    .banner .banner-caption {
        
            top: 60%;
         
        }
}

.banner .banner-caption > div {
    max-width: 800px;
}

#welcome {
    margin: 100px auto;
}

#welcome.split article {
    flex: 0 1 620px;
}

#sedation-banner {
    background: #3c63b5;
    padding: 40px 36px;
}

#sedation-banner .float-image {
    position: absolute;
    top: -68px;
    bottom: -42px;
    left: -2.5%;
}

#sedation-banner .float-image img {
    width: 100%;
    height: 100%;
}

#sedation-banner .container .h2 {
    font-size: 48px;
    line-height: 60px;
}

#sedation-banner .container {
    padding: 40px;
    border: 2px solid #fff;
    border-radius: 8px;
    max-width: 1400px;
    position: relative;
}

#sedation-banner .container .text-column {
    max-width: 796px;
}

#sedation-banner .container .text-column .btn-custom {
    margin-top: 15px;
}

@media (max-width: 1023px) {
    #sedation-banner {
        padding: 40px 24px;
    }
    
    #sedation-banner .container {
        flex-direction: column-reverse;
        border: none;
        padding: 0;
    }
    
    #sedation-banner .container .h2 {
        font-size: 40px;
        line-height: 55px;
    }
    
    .image-column {
        width: 100%;
        display: flex;
    }
    
    #sedation-banner .float-image {
        position: relative;
        top: 0;
        bottom: 0;
        left: 40px;
        margin: 30px auto -40px;
    }
}

.btn-custom {
    display: inline-flex;
    padding: 16px 24px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    width: fit-content;
    text-align: center;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
}

.fill-light-blue {
    border: 1px solid #3c63b5;
    background: #3c63b5;
    color: #fff;
}

.fill-white {
    border: 1px solid #fff;
    background: #fff;
    color: #2a4152;
}

.home-title {
    padding-bottom: 10px;
    line-height: 87px !important;
}

@media screen and (max-width: 990px) {
    .btns-wrapper {
        display: inline-block !important;
    }
    
    .btns-wrapper a {
        display: inline-block !important;
        width: 240px;
        margin:0 15px;
    }
    
    img {
        max-width: 95%;
    }
        .banner {
            min-height:650px;
        }
}

#bottom-map .content > div {
    flex: 0 1 545px;
}

.affil {
    background-color: #fff;
    padding: 16px .5rem 20px;
}

@media (max-width: 768px) {
    .ra-bar .text-col br {
        display: none;
    }
    
    .btn-custom {
        margin: 0 auto;
    }
}

/* Animation Keyframes */
@-webkit-keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
}