html {
    box-sizing: border-box;
    --font1: "interstate", sans-serif;
    --font2: "neuzeit-grotesk", sans-serif;
    --bodyColor: #a1a0a0;
    --titleColor: #111;
    --green1: #25b7bc;
    --green2: #8dccbc;
    --blue1: #439ad5;
    --blue2: #5db1e4;
    --blue3: #6eb1cc;
    --darkBlue: #3b5471;
    --orange1: #f28a2c;
    --orange2: #cc9f75;
    --gold: #caab63;

}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font1);
    color: var(--bodyColor);

    font-size: 1vw;
    /*21px;*/
    line-height: 1.333em;
}

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

.gContent {
    max-width: calc(100vw / 15 * 13);
    margin: 0 auto;
}

.gSmallContent {
    max-width: calc(100vw / 15 * 11);
    margin: 0 auto;
}

.vh100 {
    min-height: 100vh;

}

.ar169 {
    aspect-ratio: 18/9;
}

.section {
    padding-top: 3.8em;
    padding-bottom: 3.8em;
}

.sectionHeader {
    display: grid;
    grid-template-columns: 1fr max-content;
    gap: 1em;
}

.sectionTitle {
    color: var(--green1);
    font-family: var(--font2);
    font-size: 2.7em;
    line-height: normal;
    font-weight: 300;
}

.sectionLink {
    color: var(--green1);
}

/* HEADER */

.header {
    padding: 3em;
    display: grid;
    grid-template-columns: min-content 1fr min-content;
    gap: 1em;
    color: var(--green1);
}

.header.colored {
    background-color: var(--bodyColor);
    color: #fff;
}

.header.transparent {
    position: absolute;
    color: #fff;
    width: 100%;
}

.headerLogo {
    width: 10em;
    aspect-ratio: 360/117;
    background-image: url(../../images/topsmile-logo.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.header.transparent .headerLogo {
    background-image: url(../../images/logo-white.svg);
    aspect-ratio: 560/433;
}

.header.colored .headerLogo {
    background-image: url(../../images/topsmile-logo-white.svg);
    aspect-ratio: 360/117;
}

.header.open.white .headerLogo {
    color: #fff;
    background-image: url(../../images/topsmile-logo-white.svg);
    aspect-ratio: 360/117;
}

.headerNav {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end;
    gap: 1em;
}

.headerButtons {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1em;
    justify-content: end;
}

.headerButton {
    width: 2em;
    height: 2em;
    background-image: url(../../images/icons/burger-green.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

.header.transparent .headerButton {
    background-image: url(../../images/icons/burger-white.svg);
}

.header.colored .headerButton {
    background-image: url(../../images/icons/burger-white.svg);
}

.header {
    /* max-height: min-content;
    height: 0;
    transition: .5s background-color, .5s height; */
    transition: .5s background-color;
}

.header.open {
    background-color: var(--green1);
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    grid-template-columns: min-content 1fr;
    grid-template-rows: min-content 1fr;
    max-height: 100vh;
    height: 100%;
    z-index: 10;
    color: #fff;
}


.header.open .headerButton {
    background-image: url(../../images/icons/get.php?i=close&c=fff) !important;
}

.header.open .headerNav {
    display: flex;
    grid-row: 2;
    grid-column: 1 / 3;
    flex-direction: column;
    justify-content: center;
}

/* FOOTER */

.footer {
    padding: 2em;
}

.footerContent {
    padding: 2em;
    display: grid;
    grid-template-columns: 7fr 18fr 3fr;
}

.footerLogo {
    width: 10em;
    aspect-ratio: 560/433;
    background-image: url(../../images/logo.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.footerNav1 {
    font-family: var(--font2);
    color: var(--green1);
    font-size: 1.9em;
    line-height: normal;
}

.footerNav2 {
    margin-top: 2rem;
    font-family: var(--font2);
    font-size: 1.9em;
    line-height: normal;
    font-weight: 900;
    columns: 2;
}

.footerNav2 a {
    display: block;
}

.footerSocials {
    display: flex;
    align-items: center;
    gap: 1em;
}

.footerSocials a {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 1.5em;
    aspect-ratio: 1;
}

.footerSocials .fb {
    background-image: url(../../images/icons/facebook.svg);
}

.footerSocials .ig {
    background-image: url(../../images/icons/instagram.svg);
}

.footerSocials .yt {
    background-image: url(../../images/icons/youtube.svg);
}

.footerSocials .li {
    background-image: url(../../images/icons/linkedin.svg);
}

.footerLangs {
    margin-top: 2rem;
    font-family: var(--font2);
    display: grid;
    gap: 0.5em;
    font-size: 1.19em;
    line-height: normal;
    color: var(--green1);
}

.footerCredits {
    display: flex;
    justify-content: space-between;
    color: #7c7b7b;
    font-size: 0.8em;
    padding-top: 1.4rem;
    margin-top: 10em;
    border-top: 1px solid #bababa;
}

.footerCredits>div:first-child {
    display: flex;
    gap: 2em;
}

/* HOME */
.intro {}

.introImage {
    height: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: -1;
}
.introImageText {
    position: absolute;
    right: 0.87em;
    bottom: 2.35em;
    color: #fff;
    font-size: 5.5em;
    line-height: 1em;
    font-weight: 900;
    font-family: var(--font2);
    max-width: 6.5em;
}

.kristinaIntro {
    background: #DDF3F4;
    background: linear-gradient(180deg, rgba(221, 243, 244, 1) 0%, rgba(255, 255, 255, 1) 60%);
}

.kristinaIntro .grid_6_5 {
    align-items: center;
}

.kristinaIntroText {
    color: var(--green1);
    font-family: var(--font2);
    font-size: 1.66em;
    line-height: normal;
    font-weight: 300;
}

.kristinaIntroText b {
    font-weight: 400;
}

.kristinaSignature {
    margin-top: 1rem;
    height: 5rem;
    background-image: url(../../images/signature.svg);
    background-position: left;
    background-repeat: no-repeat;
    background-size: contain;

}

.kristinaIntroImage {
    border-radius: 50%;
    background-image: url(../../images/home/kristina-worseg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 80%;
    aspect-ratio: 1;
}

.kristinaIntroLink {
    display: grid;
    grid-template-columns: 1fr min-content;
    gap: 1em;
    color: var(--green1);
    font-family: var(--font2);
    font-size: 2.7em;
    line-height: normal;

    margin: 2em auto;
    align-items: center;
}

.inlineLogo {
    display: inline;
    height: 2em;
    position: relative;
    top: 0.85em;
}

.kristinaIntroLink a {
    font-family: var(--font2);
    font-size: 1.19rem;
    white-space: nowrap;
    background-image: url(../../images/icons/arrow-up-right.svg);
    background-position: right center;
    background-repeat: no-repeat;
    padding-right: 1.5em;
    background-size: contain;
}


.newsletter {
    background-color: var(--green1);
    color: #fff;
}

.newsletterText {
    font-family: var(--font2);
    font-size: 1.19rem;
    line-height: normal;
}

.newsletter img {
    max-width: 18em;
}


.grid_6_7 {
    display: grid;
    grid-template-columns: 6fr 7fr;
}

.grid_6_5 {
    display: grid;
    grid-template-columns: 6fr 5fr;
}

.grid_8_7 {
    display: grid;
    grid-template-columns: 8fr 7fr;
}

.grid_7_8 {
    display: grid;
    grid-template-columns: 7fr 8fr;
}

.greenRadialGradient {
    background: #51C5C9;
    background: radial-gradient(circle, rgba(81, 197, 201, 1) 0%, rgba(37, 183, 188, 1) 100%);
}

.blue1RadialGradient {
    background: #8BC0D6;
    background: radial-gradient(circle, rgba(139, 192, 214, 1) 0%, rgba(111, 177, 204, 1) 100%);
}

.blue2RadialGradient {
    background: #7CC0E9;
    background: radial-gradient(circle, rgba(124, 192, 233, 1) 0%, rgba(94, 178, 228, 1) 100%);
}

.imageTextBlockImage {
    aspect-ratio: 1020/670;
}

.imageTextBlockText {
    font-family: var(--font2);
    color: #fff;
    font-size: 2.57em;
    line-height: normal;
    font-weight: 300;
    text-align: center;
    /* min-height: 50vh; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-shadow: 0 0 3em #fffe;
}

.imageTextBlockText b {
    font-weight: 900;
    display: block;
}

.imageTextBlockImage,
.imageTextBlockText {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.availableAt {
    text-align: center;
}

.availableAtText {
    font-family: var(--font2);
    font-size: 1.19em;
    line-height: 1em;
    margin-bottom: 3em;
}

.availableAtLogos {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.availableAtLogo {
    max-height: 7em;
    max-width: 12.66em;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

}

.availableAtPopup {
    display: none;

}

.availableAtPopup.show {
    text-align: center;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #0008;
    display: grid;
    z-index: 10;
    padding: 1em;
}

.availableAtPopup.show .availableAt {
    background-color: #fff;
    max-width: 90%;
    margin: 0 auto;
    width: 100%;
    position: relative;
}

.availableAtPopup.show .availableAtPopupClose {
    position: absolute;
    right: 1em;
    top: 1em;
    width: 2em;
    aspect-ratio: 1;
    background-image: url(../../images/icons/get.php?i=close&c=111);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    cursor: pointer;
}

.availableAtPopup.show .availableAtLogos {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

#testimonials_splide {
    margin: 6em auto;
    margin-bottom: 0;
    max-width: calc(100vw / 15 * 11);
}

.testimonialsItem {
    display: grid;
    grid-template-columns: 12em 1fr;
    gap: 3em;
    align-items: center;
}

.testimonialsImage {
    aspect-ratio: 1;
    background-position: center;
    background-size: cover;
    border-radius: 50%;
}

.testimonialsText {
    color: var(--green1);
    font-family: var(--font2);
    font-weight: 300;
    font-size: 1.9em;
    line-height: normal;
    position: relative;
    max-width: 9em;
}

.testimonialsText::before {
    content: "“";
    font-weight: bold;
    position: absolute;
    left: -0.5em;
    top: -0.5em;
}

.testimonialsText::after {
    content: "”";
    font-weight: bold;
    position: absolute;
    right: -0.5em;
    bottom: -0.5em;
}

.testimonialsAuthor {
    font-family: var(--font2);
    font-weight: 700;
    font-size: 1.14em;
    line-height: 1em;
    margin-top: 1em;
}

#testimonials_splide .splide__arrow {
    background: transparent;
}

#testimonials_splide .splide__arrow svg {
    fill: #bdbdbd;
}

#testimonials_splide .splide__arrow--prev {
    left: calc(100vw / 15 * -1);
}

#testimonials_splide .splide__arrow--next {
    right: calc(100vw / 15 * -1);
}

.values {
    display: grid;
    align-items: center;
    background-image: url(../../images/home/tooth.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    aspect-ratio: 16/9;
}

.values .splide {
    overflow-x: hidden;
}

.valuesList {
    display: flex;
    gap: 4em;
}

.valuesItem {
    white-space: nowrap;
    color: var(--green1);
    font-size: 2.38em;
    line-height: 1em;
    font-family: var(--font2);
    font-weight: 900;
    background-image: url(../../images/icons/check.svg);
    background-size: 2.5em;
    background-position: left bottom;
    background-repeat: no-repeat;
    padding: 0.5em;
    padding-left: 2em;
}


.productSearch {
    text-align: center;
}

.productSearchTitle {
    font-size: 4.62em;
    line-height: normal;
    font-family: var(--font2);
    font-weight: 900;
    color: var(--green1);
}

.productSearchContainer {
    display: grid;
    grid-template-columns: 1fr min-content;
    align-items: center;
    border-radius: 6em;
    overflow: hidden;
    margin: 3em auto;
    max-width: calc(100vw/15*9);
}

.productSearchInput {
    background-color: #e9f8f8;
    border: 0;
    font-size: 1.19em;
    line-height: normal;
    font-family: var(--font2);
    font-weight: 400;
    color: var(--green1);
    padding: 1em 2em;
    border-radius: 6em 0 0 6em;
}

.productSearchInput::placeholder {
    color: var(--green1);
}

.productSearchSubmit {
    appearance: none;
    border: 0;
    font-size: 1.19em;
    line-height: normal;
    font-weight: bold;
    padding: 1em 2em;
    padding-left: 4em;
    background-color: var(--green1);
    color: #fff;
    height: 100%;
    background-image: url(../../images/icons/search.svg);
    background-repeat: no-repeat;
    background-position: 1.5em center;
    background-size: 2em;
    border-radius: 0 6em 6em 0;
    cursor: pointer;

}


.productsGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(100vw/15);
    margin: 3em auto;
}

.productItem {
    display: grid;
    grid-template-columns: calc(100vw/15*2) 1fr;
    gap: 1.5em;
    align-items: center;
    position: relative;
}

.productItemImage {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    height: 100%;
    min-height: 20em;
}

.productItemContent {
    padding: 4em 0;
}

.productItemIcon {
    width: 6em;
    aspect-ratio: 1;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 1em;
}

.productItemTitle {
    font-size: 2.57em;
    line-height: normal;
    font-family: var(--font2);
    font-weight: 700;
}

.productItemTitle i {
    font-style: normal;
    line-height: normal;
    font-family: var(--font2);
    font-weight: 300;
    display: inline-block;
}

.productItemSubtitle {
    font-size: 1.19em;
    line-height: normal;
    font-family: var(--font2);
    font-weight: 300;
    color: var(--bodyColor);
    text-transform: uppercase;
    margin-top: 1em;
}

.productItemButton {
    margin-top: 1em;
}

.productGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(100vw/15);
}

.productImageContainer {
    position: sticky;
    top: 2em;
}

.productThumbnails {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1em;
    margin-top: 4em;
}

.productThumbnail {
    aspect-ratio: 1;
    background-position: center;
    background-size: cover;
    border: 1px solid;
    cursor: pointer;
}

.productThumbnail.selected {
    border: 2px solid;
}

.productImage {
    aspect-ratio: 1;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.productTag {
    font-family: var(--font2);
    font-size: 1.19em;
    line-height: 1em;
    font-weight: 900;
}

.productTitle {
    margin-top: 0.5em;
    font-size: 2.95em;
    line-height: normal;
    font-family: var(--font2);
    font-weight: 700;
}

.productTitle i {
    font-style: normal;
    line-height: normal;
    font-family: var(--font2);
    font-weight: 300;
}

.productSubtitle {
    font-size: 1.38em;
    line-height: normal;
    font-family: var(--font2);
    font-weight: 300;
    color: var(--bodyColor);
    text-transform: uppercase;
    margin-top: 0.5em;
}

.productHighlights {
    margin-top: 2em;
}

.productHighlights>div {
    white-space: nowrap;
    font-size: 1em;
    line-height: 1em;
    font-family: var(--font2);
    font-weight: 900;
    background-image: url(../../images/icons/check.svg);
    background-size: 2.5em;
    background-position: left center;
    background-repeat: no-repeat;
    padding: 0.5em;
    padding-left: 2.5em;
}

.productButtons {
    margin: 3em auto;
}

.defaultButton.productBuyButton {
    border: 1px solid;
    cursor: pointer;
}

.productAccordionTitle {
    font-size: 1.9em;
    line-height: normal;
    font-family: var(--font2);
    font-weight: 700;
    padding: 1rem;
}

.productAccordionText {
    padding: 1rem;
    padding-top: 0;
}

.productAccordion {
    border-bottom: 1px solid;
}

.productAccordionTitle.open {}

.accordionTrigger {
    cursor: pointer;
    background-image: url(../../images/icons/get.php?i=plus&c=000);
    background-repeat: no-repeat;
    background-position: right 0.5em center;
    background-size: 1em;
}

.open .accordionTrigger {

    background-image: url(../../images/icons/get.php?i=minus&c=000);
}

.productMiniGalleryItem {
    aspect-ratio: 1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 50%;
}

/* FORMS */

.formRows {
    display: grid;
    gap: 1em;
}

.formCols {
    display: grid;
    grid-auto-flow: column;
    gap: 2em;
}

.formLineLabel {
    font-family: var(--font2);
    text-transform: uppercase;
    font-size: 1.19em;
    line-height: 1em;
    margin-bottom: 0.5em;
}

.formPrivacy {
    font-size: 0.9em;
    line-height: normal;
    font-weight: 300;
    margin: 2em 0;
}

.defaultInput {
    border: 0;
    font-family: inherit;
    display: block;
    width: 100%;
    font-size: 1.19rem;
    padding: 0.5em;
}

.defaultButton,
.outlineButton {
    appearance: none;
    border: 0;
    display: inline-block;
    font-family: var(--font2);
    font-size: 1.19em;
    line-height: 1em;
    font-weight: 900;
    color: var(--green1);
    background: #fff;
    padding: 0.75em 3em;
    border-radius: 20em;
    
    cursor: pointer;
}

.outlineButton {
    background: transparent;
    border: 1px solid;
    color: inherit;
}

.checkboxContainer {
    display: grid;
    grid-template-columns: min-content 1fr;
    gap: 0.5em;
    align-items: center;
    font-size: 1.19em;
    line-height: 1em;
}

.checkboxContainerText {
    font-size: 0.8em;
    line-height: normal;
}

input[type="checkbox"].defaultInput {
    display: inline;
    width: 1.25em;
    height: 1.25em;
    border: 0;
    outline: 0;
}