/* #region General */

* {
    font-family: "Albert Sans", sans-serif;
    /* border: black 1px solid; */
    /* background-color: transparent; */
}

.albert-sans-font {
  font-family: "Albert Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

html {
    font-size: clamp(15px, 1rem + 0.25vw, 17px);
}

:root {
    /* Main Palette */

    --hover-color: black;
    --active-color: black;
    --primary-color: #7aaace;
    --secondary-color: #0079d0;


    /* Font Sizes */

    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1rem;
    --text-xl: 1.5rem;
    --text-xxl: 2rem;
}

p {
    text-align: justify;
}

div {
    text-align: justify;
}

.text.small {
    font-size: var(--text-sm);
}

.text.base {
    font-size: var(--text-base);
}

.text.large {
    font-size: var(--text-lg);
}

.text.xlarge {
    font-size: var(--text-xl);
}

.text.xxlarge {
    font-size: var(--text-xxl);
}

body {
    display: flex;
    flex-direction: column;
    padding: 0px;
    margin: 0px;
    align-items: stretch;
    background-color: lightgray;
}

h2 {
    text-align: center;
}

.black-at-rest {
    color: black;
}

a:visited .black-at-rest {
    color: black;
}



.hidden {
    visibility: hidden;
}

.body-region {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* padding: 1vw; */
    padding-bottom: 80px;
    flex-grow: 1;
    width: 70vw;
    align-self: center;
    background-color: white;
    padding-top: 10px;
}

@media (max-width: 1300px) {
    .body-region {
        width: 90vw;
    }
}

@media (max-width: 768px) {
    .body-region {
        width: 95vw;
        padding-top: 0px;
    }
}

a {
    display: inline;
    font-weight: 400;
}

a:hover {
    text-shadow: 0.04em 0 0 currentColor;
    color: #0000ff;
}
/* 
a:visited {
    color: #0000ff;
} */

ul {
    justify-self: start;
}

.image.contained {
    max-width: 30vw;
    max-height: 30vh;
}

/* .main-content-wrapper {
    max-width: 70vw;
    justify-self: center;
    align-self: center;
} */

@media (max-width: 768px) {
    .main-content-wrapper {
        max-width: 95vw;
    }
}

/* #endregion */

/* #region Text */

.text.box {
    max-width: 75%;
    margin-bottom: 5vh;
}

@media (max-width: 768px) {
    .text.box {
        max-width: 85vw;
    }
}

.align-text-left {
    text-align: start;
    min-width: 10vw;
    margin: 0px;
}

.align-text-right {
    text-align: end;
    min-width: 10vw;
    margin: 0px;
}

/* #endregion */

/* #region Image */

.small-image {
    max-height: 150px;
    max-width: 200px;
}

.medium-image {
    max-height: 200px;
    max-width: 100%;
}

.large-image {
    max-width: 35vw;
    height: auto;
}
/* #endregion */

/* #region Header */

.item-list {
    list-style-type: none;
    padding: 0px;
}

.header-region {
    height: 20px;
    background-color: var(--secondary-color);
}

.logo-contact-container {
    display: flex;
    flex-direction: row;
    padding: .5vw 5vw 0vw 4vw;
    flex-wrap: wrap;
    background-color: white;
}

.logo-slogan-container, .top-contact-container {
    display: flex;
    align-items: center;
}


.logo-slogan-container {
    flex-direction: column;
    display: flex;
    flex-grow: 0;
    justify-content: center;
}

.logo {
    text-align: center;
    /* margin: 10px; */
}

.logo img {
    max-width: 500px;
    margin-top: 10px;
}

.address.text {
    display: flex;
    text-align: left;
    align-self: stretch;
    margin-left: 10px;
    margin-bottom: 10px;
}

.header-bottom-spacer {
    height: 2px;
    background-color: var(--secondary-color);
}






@media (max-width: 900px) {
    .logo img {
        max-width: 65vw;
    }
}

@media (max-width: 768px) {
    .logo img {
        max-width: 80vw;
    }

    .address.text {
        font-size: 3.25vw;
        max-width: 80vw;
        /* white-space: nowrap; */
    }

    .top-contact, .top-contact.item.base.text {
        font-size: small;
    }

    
}

.slogan {
    text-align: center;
    flex-grow: 0;
    font-family: cursive;
    color: rgb(159, 140, 118);
}

.top-contact-container {
    justify-content: flex-end;
    flex-grow: 1;
    margin-bottom: 10px;
}

.top-contact.item-list {
    text-align: start;
}

.numbers {
    display: flex;
    flex-direction: row;
}

.no-style-list {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

.hamburger-container {
    background-color: white;
    display: flex;
    justify-content: center;
}

.number {
    text-align: start;
    padding-left: 10px;
}

.toggle-button {
    border: 1px solid grey;
    color: black;
    border-radius: 10px;
}

.toggle-button.nav {
    font-size: large;
    width: 50vw;
    align-self: center;
    /* margin: 20px; */
}

/* Stacks logo and contact vertically with narrow screen */

@media (max-width: 768px) {
    .logo-contact-container {
        flex-direction: column;
    }

    .top-contact-container {
        justify-content: center;
        /* margin-bottom: 20px; */
    }

    .address.text {
        text-align: center;
        margin-left: 0px;
        align-self: center;
    }
}

/* #endregion */

/* #region Footer */

#site-footer {
    /* margin-top: 10vh; */
}

.footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.map-container, .map.image, .map-region {
    height: fit-content;
}

.map-container {
    padding: 0px;
    margin: 0px;
    flex-shrink: 1;
}

.google-maps-embed {
    width: 100%;
    height: 40vh;
    display: block;
}

.map-region {
    display: flex;
    flex-direction: column;
    padding: 0px;
    margin: 0px;
    flex-shrink: 1;
}

.bottom-info-container {
    margin-top: 0vh;
    margin-bottom: 0vh;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background-color: var(--primary-color);
    min-height: 15vh;
    color: white;
    padding: 2vh;
}

.schedule-container, .email-phone-container, .social-media-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.schedule-title {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    justify-content: flex-end;
}

.schedule.item-list {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex-grow: 1;
    color: white;
}   

.social-media-icons {
    display: flex;
    flex-direction: row;
}

.fa {
    padding: 20px;
    width: 1vw;
    height: 1vw;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    margin: 5px 2px;
    color: white;
}

.fa-facebook {
    background-color: #3b5998;
}

.fa-google {
    background-color: #dd4b39;
}

.fa-instagram {
    background-color: #125688;
}

.fa-yelp {
    background-color: red;
}


.copywright {
    text-align: center;
    padding: 1vh;
    background-color: #0079d0;
    color: white;
    display: flex;
    justify-content: center;
}

@media (max-width: 768px) {
    .bottom-info-container {
        flex-direction: column;
        flex-wrap: nowrap;
    }
}

/* #endregion */

/* #region Nav Bar */

#toggle-nav {
    font-size: 50px;
    width: 50px;
    height: 50px;
    /* border-radius: 50%; */
    border: none;
    /* align-self: flex-end; */
    padding: 0px;
    text-align: center;
    justify-content: center;
    align-items: center;
    margin: 5px;
    margin-top: 20px;
    background-color: white;
}

.nav-region {
    display: block;
    /* border-top: rgb(120, 120, 120) 1px solid; */
    border-bottom: rgb(120, 120, 120) 1px solid;
}

.nav-bar {
    display: flex;
    flex-grow: 1;
    align-items: stretch;
    list-style-type: none;
    justify-content: space-evenly;
    gap: 3vw;
    height: 5vh;
    padding: 1%;
    background-color: white;
}

.nav-item-container {
    display: flex;
    flex-direction: row;
    flex: 1;
    border: 0;
    justify-content: center;
    align-items: center;
}

.nav.item {
    border: 0;
    text-decoration: none;
    color: black;
    text-align: center;
    align-items: center;
    background-color: transparent;
    justify-content: center;
    display: flex;
    min-height: 40px;
}


.nav.item:hover {
    border-bottom: var(--hover-color) 1px solid;
    text-shadow: none;
}

.nav.item.active {
    border-bottom: var(--active-color) 2px solid;
    background-color: white;
    text-shadow: none;
}

.toggle-button {
    display: none;
}

@media (max-width: 768px) {
    .expandable {
        overflow: hidden;
        max-height: 0;
        transition: max-height 0.35s ease, opacity 0.3s ease;
        opacity: 0;
        border-bottom: none;
    }

    .expandable.open {
        max-height: 50000px;
        opacity: 1;
        border-bottom: rgb(120, 120, 120) 1px solid;

    }

    .nav-bar {
        flex-direction: column;
        height: auto;
        /* margin: 5%; */
    }

    .toggle-button {
        display: flex;
    }

}

/* #endregion */

/* #region Slideshow */

.slideshow-wrapper {
    width: 60vw;
    margin: 20px;
}

@media (max-width: 768px) {
    .slideshow-wrapper {
        width: 90vw;
    }
}

.slideshow-container {
    border: 1px black solid;
    display: grid;
    margin: 2vw;
    grid-template-columns: 4% 92% 4%;
    grid-template-rows: 43% 14% 43%;
    grid-template-areas: "overlap-area";
    height: auto;
    aspect-ratio: 16 / 9;
}

.slideshow-arrow {
    grid-row: 2 / 3;
    padding: 0px;
    border: 0px;
    position: relative;
    z-index: 3;
}

.slideshow-arrow.left {
    grid-column: 1 / 2;
}

.slideshow-arrow.right {
    grid-column: 3;
}

.arrow-image {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.slideshow-image {
    height: 100%;
    width: 100%;
    grid-row: 1 / span 3;
    grid-column: 1 / span 3;
    object-fit: cover;
    display: none;
    z-index: 2;
}

.slideshow-image.active {
    display: block;
}

.slideshow-dots-container {
    display: flex;
    flex-direction: row;
    gap: 1vw;
    justify-content: center;
    align-items: center;
}

.bigger-dot-container {
    height: 1.25vh;
    width: 1.25vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slideshow-dot {
    border: 0px;
    background-color: #757575;
    height: .75vh;
    width: 1vh;
}

.slideshow-dot.active {
    height: 1.25vh;
    width: 1.25vh;
    background-color: #303030;
}

/* #endregion */

/* #region Quote */

.quote-container {
    display: flex;
    flex-direction: column;
    margin: 5vh 5vw;
    background-color: transparent;
}

.quote {
    text-align: justify;
    background-color: transparent;
    width: 55vw;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .quote {
        width: 90vw;
    }
}

/* #endregion */

/* #region Home */

.home.heading {
    text-align: center;
    font-weight: normal;
    margin: 10px;
}

@media (min-width: 769px) {
    .home.heading {
        margin-top: 80px;
    }
}


.horizontal-stack.container.home-link {
    gap: 5vw;
    width: 60vw;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.horizontal-stack.item.home-link {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.home-link {
    max-width: 10vw;
}

.large.home.text.box {
    /* max-width: 25vw; */
    text-align: justify;
    margin: 30px;
}

/* #endregion */

/* #region Services */

.services-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.services-content-item {
    display: flex;
    gap: 40px;
}


.large.text.box.services.top {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

div.services-content-item:nth-of-type(odd) {
    flex-direction: row-reverse;
}

div.services-content-item:nth-of-type(even) {
    flex-direction: row;
}

@media (max-width: 1024px) {
    div.services-content-item:nth-of-type(odd) {
    flex-direction: column;
    }

    div.services-content-item:nth-of-type(even) {
        flex-direction: column;
    }
}

@media (max-width: 720px) {
    .services.content-half {
        width: 350px;
    }
}

.services.content-half img {
    width: 300px;
    height: auto;
}

.services.content-half p {
    box-shadow: 0 0 .55rem grey;
    padding: 40px;

}

.services.content-half {
    /* flex-grow: 1; */
    max-width: 450px;
    object-fit: fill;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: justify;
}


.horizontal-stack.services.bottom {
    /* border: black 1px solid; */
    flex-grow: 1;
    max-width: 1000px;
}


.services.bottom.text {
    min-width: 200px;
    flex-grow: 1;
    /* max-width: 300px; */
    padding: 15px;
}

.services.bottom.text h3 {
    border-bottom: 1px black solid;
}

.medium-image.services {
    max-width: 300px;
    max-height: none;
}



/* #endregion */

/* #region Patient Resources */

.patient-resources.horizontal-stack {
    gap: 50px;
}

@media (max-width: 768px) {
    .bordered-box {
        width: 100%;
        padding: 0vw;
    }
    
    .bordered-box.padded {
        padding-left: 10px;
        padding-right: 10px;
    }

    .patient-resources.horizontal-stack.padded {
        gap: px;
    }


}

@media (max-width: 900px) {
    .patient-resources.horizontal-stack {
        gap: 30px;
    }
}

.horizontal-stack.post-op {
    align-items: center;
    gap: 1vw;
}

.list-container.post-op {
    margin-bottom: 25px;
}

.educational.list {
    margin-bottom: 1.5em;
}

@media (min-width: 769px) {
    .vertical-stack.bordered-box.section-parent.resources.padded {
        padding: 0px;
    }
}



/* #endregion */

/* #region Our Doctors */

.face-image {
    float: left;
    width: 200px;
    margin: 2vw;
}

@media (max-width: 768px) {
    .large.text.box.doctors {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

.doctors.large.text.box {
    text-align: left;
}

/* #endregion */

/* #region Insurances */

.text {
    text-align: justify;
}

.large.text.box.insurance {
    margin-top: 17px;
    margin-bottom: 40px;
}

.medium-image.sunbit {
    max-height: 400px;
    width: 200px;
}

.medium-image.cherry {
    width: 200px;
}



.credit-card-logo {
    max-height: 3vh;
}

.insurance-list-container {
    display: flex;
    max-width: 70vw;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3vw;
    padding: 20px;
    margin-top: 0vh;
    margin-bottom: 20px;
}

.insurance.horizontal-stack img {
    max-height: 30vh;
    width: auto;
}

.insurance.expandable.bordered-box {
    /* margin-top: 50px;
    margin-bottom: 50px; */
    margin: 20px;
    max-width: 85vw;
}

.insurance.list {
    margin-top: 0px;
}

.insurance-item-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.two-by-two-grid.insurance.container {
    max-width: 78vw;
}

.insurance-item-container img {
    height: auto;
    max-width: 150px;
    flex-shrink: 1;
}



.horizontal-stack.container.insurance.card-image {
    gap: 0vw;
    max-width: fit-content;
    margin: 0px;
}

.horizontal-stack.item.card-image {
    max-height: 10vh;
    width: auto;
    max-width: 10vw;
}

.insurance.image.grid {
    width: 150px;
}

.grid.item.insurance {
    justify-content: center;
}

.pair.medium-image.card {
    height: auto;
    margin: 0vw;
}

#toggle-insurance-box {
    border: 1px solid black;
    padding: 15px;
    font-size: 20px;
    margin: 15px;
}

@media (max-width: 768px) {
    .two-by-two-grid.insurance.container {
        width: 90vw;
    }
    
    .insurance-list-container {
        width: 100%;
        max-width: 85vw;
        margin: 20px;
        flex-direction: column;
    }

    .insurance-item-container {
        margin: 20px;
    }

    .insurance-item-container img {
        width: 60%;
    }

    .insurance.image {
        max-width: 70vw;
    }
    
    .grid.image.insurance.item img {
        max-width: 40%;
    }
}
/* #endregion */

/* #region Specials */

.specials img {
    max-height: 350px;
    max-width: 70vw;
}

.specials.bordered-box {
    display: flex;
    flex-direction: column;
    border: 1px solid grey;
    box-shadow: none;
    width: 100%;
    text-align: center;
    flex-grow: 0;
    align-items: center;
    justify-content: center;
}

.specials.bordered-box p {
    padding: 10px;
}

.specials.horizontal-stack {
    column-gap: 0px;
    width: 100%;
}

.specials.vertical-stack {
    flex-grow: 0;
    margin-top: 17px;
}

#veneers img {
    width: 15vw;
}


@media (max-width: 768px) {
    .grid img {
        max-width: 50vw;
    }
}

.offset-title {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.specials img {
    border: 1px solid rgb(124, 124, 124);
}

.horizontal-stack.specials {
    padding: 80px 50px;
    box-shadow: 0 0 .55rem grey;
    max-width: 60vw;
}

@media (max-width: 1100px) {
    .horizontal-stack.specials {
        max-width: 75vw;
    }
}

@media (max-width: 768px) {
    .horizontal-stack.specials {
        padding: 20px;
        max-width: 85vw;
    }

}

.specials.text.box {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0px;
}

.specials p {
    margin: 20px;
}


.vertical-stack.resources {
    max-width: 85vw;
}

/* #endregion */

/* #region Stacks */

.section-parent {
    width: 85%;
}

/* .vertical-stack.section-parent {
    width: 89.5%;
    margin: 1vw;
} */

.horizontal-stack {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    gap: 20px;
    flex-grow: 1;
}


@media (max-width: 768px) {
    .horizontal-stack {
        flex-direction: column;
        align-items: center;
    }

    .insurance.image {
        max-width: 65vw;
    }

    .grid img {
        max-width: 30vw;
    }

}

.vertical-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
}

.padded {
    padding: 50px;
}

.margin {
    margin: 50px;
}

@media (max-width: 768px) {
    .padded {
        padding: 20px;
    }

    .margin {
        margin: 20px;
    }
}



.center-children {
    justify-content: center;
    align-items: center;
    flex-grow: 1;
}

/* #endregion */

/* #region Grids */

.two-by-two-grid {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 50% 50%;
    /* margin: 0vh 10vw; */
    grid-auto-flow: row;
}

@media (max-width: 768px) {
    .two-by-two-grid {
        /* grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(4, 1fr); */
        display: flex;
        flex-direction: column;
    }
}

.grid.item {
    display: flex;
    flex-direction: column;
    margin: 1vw;
    padding: 2vw;
    justify-content: flex-start;
    align-items: center;
    flex-shrink: 1;
}


.grid.item img {
    margin: 10px;
}

.two-by-three-grid {
    display: grid;
    height: auto;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    row-gap: 8%;
    column-gap: 4%;
    width: 50vw;
}

.bordered-box {
    /* border: 1px grey solid; */
    box-shadow: 0 0 .75rem grey;
}

@media (max-width: 900px) {
    .two-by-three-grid {
        width: 80vw;
    }
}

@media (max-width: 768px) {
    .two-by-three-grid {
        width: 90vw;
        grid-template-rows: repeat(4, 1fr);
        grid-template-columns: repeat(1, 1fr);
        row-gap: 4%;
    }
    .grid.item {
        max-width: 70vw;
    }
}

/* #endregion */

/* #region Clouds */

.image-cloud-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}


/* #endregion */