@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
}

@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
    }

    .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
    }
}

#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
    }
}

@media screen and (max-width:600px) {
    main {
        text-align: center
    }

    .wow {
        transform: none !important;
        animation: none !important;
        visibility: visible !important
    }

    #map {
        display: none
    }

    .affil {
        display: none
    }

    .banner h2,
    .h2,
    h1,
    h2 {
        font-size: 40px;
        line-height: 1.2
    }
}

html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

main {
    display: block
}

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

a {
    background-color: transparent
}

img {
    border-style: none
}

figure,
h1,
h2,
h3 {
    margin: 0
}

html {
    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
}

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

img {
    border-style: solid
}

h1,
h2,
h3 {
    font-size: inherit;
    font-weight: inherit
}

a {
    color: inherit;
    text-decoration: inherit
}

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

img {
    max-width: 100%;
    height: auto
}

img {
    display: block;
    margin: 0 auto;
    max-width: 100%
}

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

@-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
}

.flex {
    display: flex
}

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

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

body {
    opacity: 1
}

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

#sedation-banner {
    display: none !important
}

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

main {
    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
}

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
}

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

.h1,
.h2 {
    display: block
}

.text-white {
    color: #fff
}

a {
    color: #3c63b5
}

#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
}

.split article {
    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
}

.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%;
    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%)
}

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

#welcome {
    margin: 100px auto
}

@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
    }
}

#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
    }
}

@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) {
    #page-title .title-wrapper {
        padding: 60px 10px 40px
    }

    .banner h2,
    .h2,
    h1,
    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
    }

    .banner h2,
    .h2,
    h1,
    h2 {
        font-size: 40px;
        line-height: 1.2
    }
}

.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: 30px;
    line-height: 87px !important
}

@media screen and (max-width:600px) {
    .home-title {
        line-height: 55px !important
    }
}

@media screen and (max-width:990px) {
    .btns-wrapper {
        display: inline-block !important
    }

    .btns-wrapper a {
        display: inline-block !important;
        width: 240px;
        margin: 15px
    }

    img {
        max-width: 95%
    }
}