/** FONTS **/
/**************************************************************************************************/

/* montserrat-500 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    src: url('assets/fonts/montserrat-v26-latin/montserrat-v26-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-700 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    src: url('assets/fonts/montserrat-v26-latin/montserrat-v26-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-900 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 900;
    src: url('assets/fonts/montserrat-v26-latin/montserrat-v26-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* jost-700 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Jost';
    font-style: normal;
    font-weight: 700;
    src: url('assets/fonts/jost-v15-latin/jost-v15-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* jost-800 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Jost';
    font-style: normal;
    font-weight: 800;
    src: url('assets/fonts/jost-v15-latin/jost-v15-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* manrope-500 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 500;
    src: url('assets/fonts/manrope-v15-latin/manrope-v15-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/** BASIC **/
/**************************************************************************************************/

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

:root {
    --color-white: #fff;
    --color-brown-lt: #FBDABD;
    --color-brown-md: #965511;
    --color-brown-dk-rgb: 39 20 11;
    --color-brown-dk: rgb(var(--color-brown-dk-rgb));
    --color-orange-rgb: 243 111 49;
    --color-orange: rgb(var(--color-orange-rgb));
    --color-orange-on: var(--color-white);
    --color-error-rgb: 221 41 16;
    --color-error: rgb(var(--color-error-rgb));
    --color-error-on: var(--color-brown-lt);
    --color-green: #3ea510;
    --color-text-heading: var(--color-brown-lt);
    --color-background: var(--color-brown-dk);
    --border-radius: 16px;
    --border-radius-sm: 6px;
    --padding: 1.25rem;
    --box-shadow: 0 4px 24px -10px rgb(0 0 0 / 20%);
    --lh: 1.4;

    background: var(--color-background);
    color: var(--color-brown-lt);
    font-size: 14px;
    font-weight: 500;
    font-family: 'Manrope', 'Open Sans', system-ui;
    line-height: var(--lh);
    scroll-behavior: smooth;
}

@media (min-width: 850px) {
    :root {
        font-size: 16px;
    }
}

body {
	width: 100%;
    max-width: 100%;
	min-height: 100vh;
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

::selection {
    background: rgb(var(--color-orange-rgb) / 95%);
    color: var(--color-brown-dk);
}

img {
    width: 100%;
    height: auto;
    object-position: center;
    object-fit: cover;
}
.contain {
    object-fit: contain;
}
.cover {
    object-fit: cover;
}

hr {
    border: 0 solid currentColor;
    border-top-width: 1px;
}

ul {
    margin-bottom: 1em;
}
ul:last-child {
    margin-bottom: 1em;
}
ul.no-list {
    margin: 0;
}

li {
    list-style: none;
    display: flex;
}
li::before {
    content: '';
    border-radius: 999px;
    background: currentColor;
    display: inline-block;
    width: .25em;
    min-width: .25em;
    height: .25em;
    margin: calc(.5rem * var(--lh) - .125em) 1em 0;
}
li + li {
    margin-top: 0.25em;
}
.no-list li {
    margin: 0;
}
.no-list li::before {
    display: none;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
    font-family: 'Jost';
    margin: 0 0 0.5em;
}

h1, .h1 {
    font-size: 3rem; /* 48px */
    font-weight: 800;
    color: var(--color-text-heading);
}

h2, .h2 {
    font-size: 2.125rem; /* 34px */
    font-weight: 800;
    color: var(--color-text-heading);
}

h3, .h3 {
    font-size: 1.5rem; /* 24px */
    font-weight: 700;
}

h4, .h4 {
    font-size: 1.25rem; /* 20px */
    font-weight: 700;
}

h5, .h5 {
    font-size: 1rem; /* 16px */ 
    font-weight: 700;
}

h6, .h6 {
    font-size: 0.875rem; /* 14px */
    font-weight: 700;
}

p {
    margin-bottom: 1.5em;
}

a {
    color: currentColor;
    text-decoration: underline currentColor;
    cursor: pointer;
}
a:visited {
    opacity: .9;
}
a:hover {
    text-decoration: none;
    opacity: .65;
}

.no-link:visited {
    opacity: 1;
}
.no-link {
    text-decoration: none;
}

.container {
    width: 1556px;
    max-width: 100%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    margin-left: auto;
    margin-right: auto;
}

.text-center {
    text-align: center;
}


/** WIDGETS **/
/**************************************************************************************************/

.icon-hamburger {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 1em;
    height: 1em;
    position: relative;
}
.icon-hamburger > * {
    border-top: 2px solid currentColor;
    width: 100%;
    transition: .1s ease-out;
    transition-property: transform, opacity;
}

.icon-hamburger._cross > :nth-child(1) {
    transform: translateY(.45em) rotate(45deg);
    transform-origin: center;
}
.icon-hamburger._cross > :nth-child(2) {
    opacity: 0;
}
.icon-hamburger._cross > :nth-child(3) {
    transform: translateY(-.45em) rotate(-45deg);
    transform-origin: center;
}

.sold-out-warning {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}
.sold-out-warning__icon {
    font-size: 1.5rem;
}
.sold-out-warning__text {
    font-size: 1.25rem;
    font-family: 'Montserrat';
    font-weight: 700;
    text-transform: uppercase;
}

.wood-phone-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 0;
}
.wood-phone-cta__link {
    display: block;
    width: 284px;
    height: 200px;
    position: absolute;
    top: 148px;
    z-index: 1;
}
.wood-phone-cta__image {
    width: auto;
    height: auto;
    position: relative;
}
.wood-phone-cta__image-hover {
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
}
.wood-phone-cta__link:hover ~ .wood-phone-cta__image {
    visibility: hidden;
}
.wood-phone-cta__link:hover ~ .wood-phone-cta__image-hover {
    visibility: visible;
}
.wood-phone-cta::before {
    content: '';
    background: url('assets/images/wood-cta-hover.png') no-repeat;
    display: block;
}
.wood-phone-cta._has-warning .warning-box {
    max-width: 269px;
    margin-top: -215px;
    position: relative;
    z-index: 2;
}

.warning-box {
    background: var(--color-error);
    color: var(--color-error-on);
    border-radius: var(--border-radius);
    max-width: 100%;
    padding: var(--padding);
}
.warning-box__text {
    font-size: 1.25rem;
    margin: 1em 0 0;
}

.image-card {
    background: var(--color-white);
    border-radius: var(--border-radius);
    padding: var(--padding);
    box-shadow: var(--box-shadow);
}
.image-card__subtitle {
    color: var(--color-brown-md);
}

.icon-card {
    --icon-block-width: 5.625rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.icon-card__icon {
    font-size: 3rem;
    background: var(--color-orange);
    color: var(--color-orange-on);
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-block-width);
    min-width: var(--icon-block-width);
    height: var(--icon-block-width);
    min-height: var(--icon-block-width);
    position: absolute;
}
.icon-card__content {
    flex: 1;
    background: var(--color-white);
    border: 1px solid #dfdfdf;
    border-radius: var(--border-radius);
    padding: var(--padding);
    padding-top: calc(var(--icon-block-width) / 2 + var(--padding));
    margin: calc(var(--icon-block-width) / 2) 0 0;
    box-shadow: var(--box-shadow);
}
.icon-card__text {
    margin: 0;
}
@media (min-width: 500px) {
    .icon-card {
        flex-direction: row;
    }
    .icon-card__content {
        padding: var(--padding);
        padding-left: calc(var(--icon-block-width) / 2 + var(--padding));
        margin: 0 0 0 calc(var(--icon-block-width) / 2);
    }
}

.info-box {
    background: var(--color-white);
    border-radius: var(--border-radius);
    padding: var(--padding);
}
.info-box__title {
    display: flex;
    align-items: center;
}
.info-box__title::before {
    content: '\f30f';
    font-family: 'Font Awesome 6 Pro';
    font-size: 2rem;
    font-weight: 900;
    color: var(--color-brown-md);
    margin-right: 1rem;
}
.info-box__text {
    margin-bottom: 0;
}

.wood-table {
    display: block;
}
.wood-table tbody {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 100%;
    overflow-y: hidden; 
}
.wood-table tr {
    display: flex;
}
.wood-table tr:first-child {
    border-bottom: 1px solid var(--color-brown-dk);
    padding-bottom: 4px;
}
.wood-table .wood-table__marked {
    background: var(--color-orange);
    border-radius: var(--border-radius-sm);
}
.wood-table td,
.wood-table th {
    flex: 0 0 25%;
    text-align: left;
    display: block;
    padding: 2px 4px;
}
.wood-table td:first-child,
.wood-table th:first-child {
    flex: 0 0 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/** LAYOUT **/
/**************************************************************************************************/

/** Header **/

#header {
    background: rgb(var(--color-brown-dk-rgb) / 95%);
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 999;
    box-shadow: 0 4px 24px 0 rgb(0 0 0 / 20%);
}
.home #header {
    position: fixed;
}

.header__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 20px;
    padding-bottom: 20px;
}

.header-logo__image {
    height: 80px;
    width: auto;
}

.header-nav {
    order: 3;
}
.header-nav__opener {
    border: none;
    background: none;
    color: inherit;
    font-size: 2rem;
    box-shadow: none;
    cursor: pointer;
}
.header-nav__opener:hover {
    opacity: 0.65;
}
@media (min-width: 715px) {
    .header-nav {
        order: 2;
    }
    .header-nav__opener {
        display: none;
    }
}

.header-menu__list a {
    text-decoration: none;
    font-size: 1.25rem;
    white-space: nowrap;
}
@media (max-width: 715px) {
    .header-menu {
        background: rgb(var(--color-brown-dk-rgb) / 95%);
        display: grid;
        grid-template: 1fr / 0fr;
        position: absolute;
        top: 100%;
        right: 0;
        overflow: hidden;
        transition: grid-template-columns .2s ease;
    }
    ._open .header-menu {
        grid-template-columns: 1fr;
    }
    .header-menu__content {
        overflow: hidden;
    }
    .header-menu__list {
        display: flex;
        flex-direction: column;
        width: fit-content;
        height: 100vh;
        padding: 1rem 3rem 1rem 1rem;
    }
    .header-menu__list a {
        padding: 0.5rem 0;
    }
}
@media (min-width: 715px) {
    .header-menu__list {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 1.5rem;
    }
}

.header-phone-cta {
    border: 1px solid currentColor;
    border-radius: var(--border-radius);
    display: flex;
    gap: 20px;
    padding: 8px 16px;
    order: 2;
}
.header-phone-cta__icon {
    font-size: 3em;
}
.header-phone-cta__text {
    font-family: 'Jost';
    font-weight: 700;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.header-phone-cta__title {
    text-transform: uppercase;
    font-size: 1em;
}
.header-phone-cta__number {
    font-size: 1.25em;
}
@media (min-width: 715px) {
    .header-phone-cta {
        order: 3;
        display: none;
    }
}
@media (min-width: 1150px) {
    .header-phone-cta {
        display: flex;
    }
}

.info-bar {
    background: var(--color-error);
    color: var(--color-error-on);
    padding: 8px 0;
}
.info-bar.green {
    background: var(--color-green);
    color: var(--color-white);
}
.info-bar__content {
    display: flex;
    align-items: center;
    justify-content: center;
}
.info-bar__text {
    font: 1.25rem 'Montserrat';
    font-weight: 500;
    text-align: center;
}
.info-bar:not(.green) .info-bar__content > *:first-child,
.info-bar:not(.green) .info-bar__content > *:last-child {
    display: none;
}

@media (min-width: 1375px) {
    .info-bar__content {
        justify-content: space-between;
    }
    .info-bar__content > *:first-child,
    .info-bar__content > *:last-child {
        display: flex;
    }
}

/** Hero **/

#hero {
    height: 930px;
    position: relative;
}
#hero::before {
    content: '';
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgb(0 0 0 / 35%) 45%,
        rgb(0 0 0 / 80%) 100%
    );
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
@media (min-width: 1350px) {
    #hero::before {
        background: linear-gradient(
            to bottom,
            transparent 0%,
            rgb(0 0 0 / 20%) 45%,
            rgb(0 0 0 / 50%) 100%
        );
    }
}
.hero__image {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
}
.hero__content {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    position: relative;
}
.hero__text {
    max-width: 67ch;
    margin-bottom: 115px;
}

#hero .wood-phone-cta {
    display: none;
    width: auto;
    height: auto;
    position: absolute;
    right: -129px;
    bottom: -143px;
    z-index: 5;
}
@media (min-width: 1150px) {
    #hero .wood-phone-cta {
        display: flex;
    }
}
@media (min-width: 1908px) {
    #hero .wood-phone-cta {
        right: -302px;
        bottom: -119px;
    }
}

/** Main Sections **/

.main-section {
    --color-background: var(--color-brown-lt);
    --color-text-heading: var(--color-brown-dk);

    scroll-margin-top: 100px;
    background: var(--color-background);
    color: var(--color-brown-dk);
    padding-top: 120px;
    padding-bottom: 120px;
    position: relative;
}
.main-section::before {
    content: '';
    display: block;
    border: 0 solid transparent;
    /* 3.34vw for screen width independent slant angle: 64px / 1916px = 0.334 (see figma design) */
    border-bottom: 3.34vw solid var(--color-background);
    border-left-width: 100vw;
    max-width: 100%;
    position: absolute;
    left: 0;
    bottom: 100%;
    pointer-events: none;
}

.text-page-container {
    max-width: 100ch;
}

#lieferservice {
    --color-background: var(--color-brown-md);
    --color-text-heading: var(--color-brown-lt);
    color: var(--color-brown-lt);
}
.lieferservice__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 80px;
}
@media (min-width: 1000px) {
    .lieferservice__content {
        flex-direction: row;
        align-items: flex-start;
    }
}

.shipping-main-text {
    flex: 1 1 auto;
}

.shipping-details {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}
@media (min-width: 750px) {
    .shipping-details {
        grid-template-columns: 1fr 1fr;
    }
}
@media (min-width: 1350px) {
    .shipping-details {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.shipping-detail__image {
    border-radius: var(--border-radius);
    width: 100%;
    aspect-ratio: 1.52;
    margin-bottom: 1rem;
}

.shipping-areas {
    flex: 0 0 auto;
    border-radius: var(--border-radius);
    border: 1px solid currentColor;
    padding: var(--padding);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 317px;
    max-width: 100%;
    overflow: hidden;
}
.shipping-areas__map__image {
    width: auto;
}

#unser-holz {
    --color-background: var(--color-brown-lt);
    --color-text-heading: var(--color-brown-dk);
    color: var(--color-brown-dk);
}
.unser-holz__content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 50px;
}
.unser-holz__benefits {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 32px;
}
@media (min-width: 1100px) {
    .unser-holz__content {
        flex-direction: row;
        align-items: center;
    }
    .unser-holz__main-info {
        flex: 1;
        max-width: 756px;
    }
    .unser-holz__benefits {
        max-width: 625px;
    }
}

.certificates__images {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 50px;
}
.certificates__image {
    width: auto;
}
@media (min-width: 480px) {
    .certificates__images {
        flex-direction: row;
    }
}
@media (min-width: 900px) and (not (min-width: 1100px)), (min-width: 1450px) {
    .certificates {
        display: flex;
        gap: 24px;
    }
}

.wood-cards {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 40px;
}
@media (min-width: 580px) {
    .wood-cards {
        flex-direction: row;
    }
}

#bestellung {
    --color-background: var(--color-white);
    --color-text-heading: var(--color-orange);
    color: var(--color-brown-dk);
}
.bestellung__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}
.bestellung__main-text {
    max-width: 756px;
}
@media (min-width: 1050px) {
    .bestellung__content {
        flex-direction: row;
    }
}

#bestellung .info-box {
    background: var(--color-brown-lt);
    max-width: 625px;
}

#wissenswertes {
    --color-background: var(--color-brown-lt);
    --color-text-heading: var(--color-brown-dk);
    color: var(--color-brown-dk);
}
.wissenswertes__title {
    text-align: center;
    margin-bottom: 3.75rem;
}
.wissenswertes__main-content {
    display: flex;
    flex-flow: column wrap;
    gap: 80px;
}
.wissenswertes__main-content > * {
    flex: 1;
}
@media (min-width: 800px) {
    .wissenswertes__main-content {
        flex-direction: row;
    }
    .wissenswertes__main-content > :last-child {
        flex: 0 0 100%;
    }
}
@media (min-width: 1300px) {
    .wissenswertes__main-content > :last-child {
        flex: 1;
    }
}

#wissenswertes .info-box {
    margin-top: 40px;
}

.storage__image {
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
}

#kontakt {
    --color-background: var(--color-white);
    --color-text-heading: var(--color-orange);
    color: var(--color-brown-dk);
}
.kontakt__title {
    text-align: center;
    margin-bottom: 3.75rem;
}

/** Footer **/

#footer {
    padding: 40px 0;
}
.footer__divider {
    margin: 24px 0 20px;   
}

.footer-logo__image {
    height: 95px;
    width: auto;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}
.footer-contact__infos {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.footer-contact__infos__small {
    display: contents;
}
@media (min-width: 550px) {
    .footer-contact {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}
@media (min-width: 750px) {
    .footer-contact {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .footer-contact__infos {
        display: contents;
    }
    .footer-contact__infos__small {
        display: flex;
        flex-direction: column;
        gap: .75rem;
    }
}
@media (min-width: 1150px) {
    .footer-contact {
        justify-content: flex-start;
        gap: 2.25rem;
    }
    .footer-contact .footer-logo {
        flex: 1 0 auto;
        max-width: 250px;
    }
    .footer-contact__infos__small {
        display: contents;
    }
}

.contact-info {
    display: flex;
    align-items: center;
    gap: .75em;
}
.contact-info__icon {
    font-size: 1.5em;
}
.contact-info._location .contact-info__icon {
    font-size: 2.5em;
}

.footer-menu {
    display: flex;
    flex-direction: column;
    gap: .75em;
    list-style: none;
}
.footer-menu a {
    text-decoration: none;
}
@media (min-width: 450px) {
    .footer-menu {
        flex-direction: row;
        align-items: center;
        gap: 1.5em;
    }
}

.footer-menu-item {
    align-items: center;
}
.footer-menu-item::before {
    content: '\e09f';
    background: var(--color-orange);
    color: var(--color-orange-on);
    font-family: 'Font Awesome 6 Pro';
    font-weight: 900;
    border-radius: var(--border-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25em;
    height: 1.25em;
    margin: 0 0.625em 0 0;
}

/*Kontaktformular*/
.kontakt__formwrapper {
    max-width: 650px;
    margin: auto;

    .formmessage {
        display: none;
        padding: .5rem;
        margin-bottom: 1rem;

        &.success {
            display: block;
            border: 2px solid #189100;
            background: #f0ffed;
        }
        &.failed {
            display: block;
            border: 2px solid #cd0000;
            background: #ffeded;
        }
    }
}
form {
    fieldset {
        padding: .5rem 0;
        margin-bottom: 1rem;
        border-width: 1px;
        border-color: #b7b7b7;
    }
    .form-field {
        margin-bottom: 1rem;
        width: 49%;
        display: inline-block;
        padding: 0 .5rem;
        box-sizing: border-box;
    }
    label, input, select, textarea {
        display: block;
        width: 100%;
    }
    input, select, textarea {
        padding: .25rem;
        font-size: 1rem;
        box-sizing: border-box;
    }
    .checkbox-field, .textarea-field {
        width: 98.5%;

        label {
            display: inline;
            width: auto;
        }
        input {
            display: inline;
            width: auto;
            margin-right: .25rem;
        }
    }
    .button-field {
        width: 98.5%;
    }
    textarea {
        height: 6rem;
    }
    input[type=submit] {
        background: #f36f31;
        border: none;
        padding: .5rem;
        cursor: pointer;
        color: #fff;
        font-weight: bold;
        width: auto;
        min-width: 50%;
    }
    input[type=submit][disabled=true] {
        background: #ccc;
        color: #000;
    }
    .country-field{
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        height: 0;
        width: 0;
        z-index: -1;
    }
}