.prod-block-b--brand, .prod-block-c--art {
    --brand-slot-opalescence-go-bg-size: 170%;
}

@media (min-width: 478px) {
    .prod-block-b--brand, .prod-block-c--art {
        --brand-slot-opalescence-go-bg-size: 100%;
    }
}

@media (min-width: 752px) {
    .prod-block-b--brand {
        --brand-slot-opalescence-go-bg-size: 300%;
    }
}

@media (min-width: 860px) {
    .prod-block-b--brand {
        --brand-slot-opalescence-go-bg-size: 220%;
    }
}


@media (min-width: 1024px) {
    .prod-block-b--brand {
        --brand-slot-opalescence-go-bg-size: 200%;
    }

    .prod-block-c--art {
        --brand-slot-opalescence-go-bg-size: 108%;
    }
}

@media (min-width: 1280px) {
    .prod-block-b--brand {
        --brand-slot-opalescence-go-bg-size: 165%;
    }
}

.brand-hero { position: relative; height: 100vh; padding: 3rem 0; }
.brand-hero:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(//images.ctfassets.net/951j4zzzl64c/3a3KzERs5kuClrreG9IE0E/ec8462842556588645599714eab2ece0/opalescence-brand-hero-section-mobile-bg.png?fm=webp) center top / cover no-repeat; }
.brand-hero-logo { width: 100%; text-align: right; }
.brand-hero-logo-image { width: 50%; margin-bottom: 2rem; }
.brand-hero-heading { max-width: 60rem; color: #000000; font-size: 3rem; font-weight: 400; }
.brand-product-showcase { padding: 2rem 0; background-repeat: no-repeat; }

.prod-block-a { margin-bottom: 1.5rem; overflow: hidden; color: #000000; border: 1px solid #000000; border-radius: 12px; }
.prod-block-a--go, .clinical-group--go { background-color: var(--color-opal-go-advanced-light); }
.prod-block-a--custom, .clinical-group--custom { background-color: var(--color-opal-brand-custom-light); }
.prod-block-a--pro, .clinical-group--pro { background-color: var(--color-opal-brand-pro-light); }
.prod-block-a--at-home { background-color: #e3eef6; }
.prod-block-a--neutral, .brand-surface { background-color: #ffffff; }
.prod-block-a .prod-block-figure { display: block; width: 100%; height: 300px; overflow: hidden; background-size: var(--bg-size-mobile, 133%); background-repeat: no-repeat; background-position: var(--bg-position-mobile, center); }
.prod-block-content { padding: 1rem; }
.product-card-title { margin-bottom: .5rem; }
.prod-block-badge { color: #ffffff; }
.prod-block-badge--go { background-color: var(--color-opal-go-advanced-500); }
.prod-block-badge--custom { background-color: var(--color-opal-brand-custom-500); }
.prod-block-badge--pro { background-color: var(--color-opal-brand-pro-500); }
.prod-block-badge--at-home { background-color: #3d77bd; }
.prod-block-actions { margin-top: 1rem; }
.prod-block-action--video { margin-top: .5rem; }
.prod-block-video-icon { display: block; margin-right: .5rem; }

.specialty-grid, .purchase-grid { display: grid; grid-template-columns: 1fr; grid-gap: 1.5rem; }
.prod-block-b, .prod-block-c { min-height: 420px; }
.prod-block-b { overflow: hidden; color: #000000; background-color: #ffffff; border: 1px solid #000000; border-radius: 12px; }
.specialty-card-media { display: flex; height: 12rem; }
.specialty-card-image { align-self: center; width: 100%; }
.specialty-card-content { padding: 1rem; }
.specialty-card-label { display: inline-block; padding: .25rem .75rem; margin-bottom: .5rem; border: 1px solid #000000; border-radius: 9999px; }
.specialty-card-copy { margin-bottom: 1rem; }
.prod-block-b--brand, .prod-block-c--art { position: relative; overflow: hidden; background-repeat: no-repeat; }
.prod-block-b--brand { padding: 1rem; }
.brand-badge { position: absolute; right: 0; bottom: 0; margin: 0 1rem 1rem 0; }

.clinicals-nav { color: #000000; background-color: #ffffff; border: solid #000000; border-width: 1px 0; }
.clinicals-nav-inner { width: 100%; padding-top: 2rem; padding-bottom: 2rem; background-color: #ffffff; }
.clinicals-tabs { display: inline-flex; flex: 1 1 auto; flex-grow: 1; flex-wrap: wrap; padding: 0; margin: 0; }
.clinicals-tab-control li[data-tab] { display: inline-block; padding: .25rem 1rem; margin: .25em .25em .25em 0; cursor: pointer; background-color: var(--color-near-white); border: 1px solid var(--color-black); border-radius: 9999px; transition: color, background-color .3s ease; }
.clinicals-tab-control li[data-tab]:hover, .clinicals-tab-control li[data-tab].active { color: var(--color-white); background-color: var(--color-black); }
.clinicals-tab-control li[data-tab].clinical-tab--go:hover, .clinicals-tab-control li[data-tab].clinical-tab--go.active { background-color: var(--color-opal-go-advanced-500); border-color: var(--color-opal-go-advanced-500); }
.clinicals-tab-control li[data-tab].clinical-tab--custom:hover, .clinicals-tab-control li[data-tab].clinical-tab--custom.active { background-color: var(--color-opal-brand-custom-500); border-color: var(--color-opal-brand-custom-500); }
.clinicals-tab-control li[data-tab].clinical-tab--pro:hover, .clinicals-tab-control li[data-tab].clinical-tab--pro.active { background-color: var(--color-opal-brand-pro-500); border-color: var(--color-opal-brand-pro-500); }
.clinicals-tab-control li[data-tab].clinical-tab--pf:hover, .clinicals-tab-control li[data-tab].clinical-tab--pf.active { background-color: var(--color-opal-brand-pf-500); border-color: var(--color-opal-brand-pf-500); }
.clinical-tab-label { display: none; }
.clinicals-disclaimer { max-width: 20rem; margin-top: 1rem; }
.clinical-group { color: #000000; }
.clinical-group--neutral { background-color: #f8f8f8; }
.brand-section { padding-top: 2rem; padding-bottom: 2rem; }
.brand-section--dark-text { color: #000000; }
.swiper-clinicals .swiper-wrapper { align-items: stretch; }
.swiper-clinicals figcaption { text-align: center; background: none; font-size: .625rem; }
.clinical-card { background-color: #ffffff; border: 1px solid #000000; border-radius: 12px; }
.clinical-card > div { padding: 2rem; text-align: center; }
.clinical-card figure, .clinical-card .text-body-sm, .prod-block-c .text-body-sm { margin-bottom: 1rem; }
.clinical-cta { max-width: 50rem; margin: 2rem auto; text-align: center; }
.clinical-cta-title { margin-bottom: 2rem; }
.clinical-cta-primary { margin-right: 1rem; margin-bottom: 1rem; }

.treatments-intro { width: 100%; margin-bottom: 2rem; }
.treatments-heading { margin-bottom: 1rem; font-weight: 400; }
.treatment-list { font-size: 1.25rem; }
.treatment-card { --treatment-tint: #f8f8f8; --treatment-badge-bg: #ffffff; --treatment-badge-color: #000000; --treatment-badge-border: #000000; display: flex; flex-direction: column; justify-content: space-between; height: 100%; overflow: hidden; line-height: 1.5; background-color: #ffffff; border: 1px solid #000000; border-radius: 12px; }
.treatment-card--go { --treatment-tint: var(--color-opal-go-advanced-light); --treatment-badge-bg: var(--color-opal-brand-home-500); --treatment-badge-color: #ffffff; --treatment-badge-border: transparent; }
.treatment-card--custom { --treatment-tint: var(--color-opal-brand-custom-light); --treatment-badge-bg: var(--color-opal-brand-custom-500); --treatment-badge-color: #ffffff; --treatment-badge-border: transparent; }
.treatment-card--pro { --treatment-tint: var(--color-opal-brand-pro-light); --treatment-badge-bg: var(--color-opal-brand-pro-500); --treatment-badge-color: #ffffff; --treatment-badge-border: transparent; }
.treatment-card--at-home { --treatment-tint: #e3eef6; --treatment-badge-bg: #3d77bd; --treatment-badge-color: #ffffff; --treatment-badge-border: transparent; }
.treatment-card--in-office { --treatment-badge-bg: #000000; --treatment-badge-color: #ffffff; --treatment-badge-border: transparent; }
.treatment-card:not(.treatment-card--specialty) { --treatment-badge-border-width: 0; }
.treatment-card > div:not(:first-child) { padding: 1rem 1.5rem; }
.treatment-card > div:nth-child(3), .treatment-card > div:nth-child(5), .treatment-card > div:nth-child(7) { background-color: var(--treatment-tint); }
.treatment-card > div:last-child > p { margin-bottom: 1rem; }
.treatment-card .pill { padding-top: .25rem; padding-bottom: .25rem; color: var(--treatment-badge-color); font-size: .875rem; background-color: var(--treatment-badge-bg); border: var(--treatment-badge-border-width, 1px) solid var(--treatment-badge-border); }
.treatment-card h3, .treatment-card > div:nth-child(5) p { line-height: 1.25; }
.treatment-card > div > span:not(.pill) { font-size: .75rem; text-transform: uppercase; }
.treatment-card > div:nth-child(5) p:not(.text-body) { font-size: .875rem; }
.treatment-card > div:nth-child(5) p:nth-of-type(3) { margin-top: .5rem; }
.treatment-card > .img-ratio > img { display: block; margin-right: auto; margin-left: auto; }
.treatment-card--at-home > .img-ratio > img, .treatment-card--in-office > .img-ratio > img { width: 100%; }
.treatment-card > .img-ratio > div, .prod-block-c > .img-ratio > div { width: 100%; height: 100%; }

.info-banner { color: #ffffff; background-color: #000000; }
.info-banner-inner { padding-top: 2rem; padding-bottom: 2rem; }
.info-banner-copy { flex: 1 1 0%; margin-bottom: 2rem; }
.info-banner-title { margin-bottom: 1rem; }
.prod-block-c { border-radius: 12px; }
.prod-block-c--go, .prod-block-c--custom, .prod-block-c--pro { color: #ffffff; }
.prod-block-c--go { overflow: hidden; background-color: var(--color-opal-brand-home-500); }
.prod-block-c--custom { background-color: var(--color-opal-brand-custom-500); }
.prod-block-c--pro { background-color: var(--color-opal-brand-pro-500); }
.prod-block-c--neutral { background-color: #f8f8f8; border: 1px solid #000000; }
.prod-block-c--art { border: 1px solid #000000; }
.purchase-card-content { padding: 2rem; }

.button, .opal-text .button { font-family: 'Open Sans', sans-serif !important; }

@media (min-width: 47em) {
    .brand-hero-logo { text-align: left; }

    .brand-hero-logo-image { max-width: 20rem; margin-top: 1rem; margin-bottom: 1rem; }

    .brand-hero-heading { color: #ffffff; font-size: 6rem; }

    .brand-product-showcase, .brand-section, .info-banner-inner { padding-top: 4rem; padding-bottom: 4rem; }

    .prod-block-a { display: flex; flex-direction: row-reverse; }

    .prod-block-a .prod-block-figure { flex: 1 1 0%; }

    .prod-block-content { width: 66.66667%; padding: 2rem; }

    .prod-block-actions { display: flex; }

    .prod-block-action { display: inline-block; }

    .prod-block-action--video { margin-top: 0; margin-left: .5rem; }

    .specialty-grid, .purchase-grid { grid-template-columns: repeat(2, 1fr); }

    .specialty-card-content { padding: 2rem; }

    .brand-badge { margin-right: 2rem; margin-bottom: 2rem; }

    .clinicals-nav-inner { display: flex; align-items: center; }

    .clinical-tab-label { display: inline; }

    .clinicals-disclaimer { margin-top: 0; margin-left: 2rem; }

    .clinical-cta { padding-right: 2rem; padding-left: 2rem; margin-top: 4rem; }

    .clinical-cta-actions { display: flex; justify-content: center; margin-right: auto; margin-left: auto; }

    .clinical-cta-primary { margin-bottom: 0; }

    .treatments-heading { margin-bottom: .5rem; text-align: left; }

    .treatment-list { font-size: 1rem; }

    .treatment-card > div:nth-child(2), .treatment-card > div:nth-child(5), .treatment-card > div:nth-child(7) { height: 10rem; }

    .treatment-card > div:nth-child(3), .treatment-card > div:nth-child(6) { height: 8rem; }

    .treatment-card > div:nth-child(4) { height: 6rem; }

    .info-banner-inner { display: flex; align-items: center; justify-content: space-between; }

    .info-banner-copy { margin-right: 2rem; margin-bottom: 0; }

    .info-banner-title { margin-bottom: .5rem; text-align: left; }
}
@media (min-width: 768px) {
    .brand-hero { height: 760px; max-height: 100vh; }

    .brand-hero:before { transform: scale(-1, 1); background-position: 70% top; background-image: url(//images.ctfassets.net/951j4zzzl64c/6JdflqKREwo2dXNZbqQkw1/a68cd500b4b9e06e88021b0cf43d0ac8/go-hero-section-desktop-bg.png?fm=webp&w=1400); }

    .prod-block-a .prod-block-figure { height: 1px; min-height: 320px; max-height: 560px; background-size: var(--bg-size-desktop, 125%); background-position: var(--bg-position-desktop, center); }
}
@media (min-width: 64.0625em) {
    .brand-hero { padding-top: 5rem; padding-bottom: 5rem; }

    .specialty-card-media { height: 20rem; }

    .purchase-grid { grid-template-columns: repeat(3, 1fr); }
}