/*common variables*/

:root {
    --mobile-spacing: 40px;
    --x-small-width: calc(100% - var(--mobile-spacing));
    --small-width: 95%;
    --medium-width: 92%;
    --large-width: 92%;
    --x-large-width: 92%;
    --xx-large-width: calc(1920px - 25%);
    /*--fontsize: 1.6rem;*/
    --fontsize: calc(0.3125rem + ((1vw - 3.6px) * 0.4965));
    --global-width: min(calc(320px + ((1vw - 3.6px) * 100)), 123.5rem);
    font-size: max(37.5%, min(var(--fontsize), 82.5%));
    --font-family-main: 'Poppins', sans-serif;
    --font-family-btn: 'ZalandoSans', Arial, sans-serif;
}

@media(min-width: 2048px) {
    :root {
        font-size: 70%;
    }
}
@media(min-width: 3840px) {
    :root {
        font-size: 120%;
    }
}

/* X-Small devices (portrait phones, less than 576px) */
:root {
    --global-width: var(--x-small-width);
}


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
     :root {
        --global-width: var(--small-width);
    }
}


/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
     :root {
        --global-width: var(--medium-width);
    }
}


/* Large devices (laptops, 992px and up) */
@media (min-width: 992px) {
     :root {
        --global-width: var(--large-width);
    }
}


/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
     :root {
        --global-width: var(--x-large-width);
    }
}


/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1366px) {
     :root {
        --global-width: var(--xx-large-width);
    }
}

@media (min-width: 1921px) {
     :root {
        --fontsize: 1.6rem;
        --global-width: min(calc(320px + ((1vw - 3.6px) * 100)), 133.5rem);
    }
}


/* Colors */
:root {
    --color-black: #000;
    --color-white: #fff;
    --color-dark: #013332;
    --color-green: #1CD371;
    --color-dark-green: #2B5756;
    --color-dark-gray: #769999;
    --color-gray: #E6EBEA;
    --color-light-gray: #EAEBEC;
    --color-red: #E80F0F;
}

/* Fonts Variables */
:root {
    /* Font Size */
    --font-size-10: max(10px, 1rem);
    --font-size-11: max(11px, 1.1rem);
    --font-size-12: max(12px, 1.2rem);
    --font-size-13: max(13px, 1.3rem);
    --font-size-14: max(14px, 1.4rem);
    --font-size-15: max(15px, 1.5rem);
    --font-size-16: max(16px, 1.6rem);
    --font-size-17: max(17px, 1.7rem);
    --font-size-18: max(18px, 1.8rem);
    --font-size-20: max(20px, 1.8rem);
    --font-size-22: max(22px, 2.2rem);
    --font-size-24: max(24px, 2.4rem);
    --font-size-25: max(25px, 2.4rem);
    --font-size-28: max(28px, 2.4rem);
    --font-size-30: max(30px, 3rem);
    --font-size-32: max(32px, 3.2rem);
    --font-size-35: max(35px, 3.2rem);
    --font-size-36: max(36px, 3.2rem);
    --font-size-40: max(40px, 3.8rem);
    --font-size-42: max(42px, 4.2rem);
    --font-size-44: max(44px, 4.4rem);
    --font-size-48: max(48px, 4.4rem);
    --font-size-54: max(54px, 5.4rem);

    /* Font Weight */
    --font-weight-extralight: 200;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;
}
.container {
    width: var(--global-width);
    max-width: 96%;
}
/* Colors */
.color-black {
    color: var(--color-black);
}

.color-white {
    color: var(--color-white);
}

.color-dark {
    color: var(--color-dark);
}

.color-green {
    color: var(--color-green);
}

.color-dark-green {
    color: var(--color-dark-green);
}

.color-dark-gray {
    color: var(--color-dark-gray);
}

.color-gray {
    color: var(--color-gray);
}

.color-light-gray {
    color: var(--color-light-gray);
}

.color-background-gray {
    color: var(--color-background-gray);
}

/* Backgrounds */
.bg-black {
    background-color: var(--color-black);
}

.bg-white {
    background-color: var(--color-white);
}

.bg-dark {
    background-color: var(--color-dark);
}

.bg-green {
    background-color: var(--color-green);
}

.bg-dark-green {
    background-color: var(--color-dark-green);
}

.bg-dark-gray {
    background-color: var(--color-dark-gray);
}

.bg-gray {
    background-color: var(--color-gray);
}

.bg-light-gray {
    background-color: var(--color-light-gray);
}

.bg-background-gray {
    background-color: var(--color-background-gray);
}

/* Font Size */
html body .font-size-10 {
    font-size: var(--font-size-10);
}

html body .font-size-11 {
    font-size: var(--font-size-11);
}

html body .font-size-12 {
    font-size: var(--font-size-12);
}

html body .font-size-13 {
    font-size: var(--font-size-13);
}

html body .font-size-14 {
    font-size: var(--font-size-14);
}

html body .font-size-15 {
    font-size: var(--font-size-15);
}

html body .font-size-16 {
    font-size: var(--font-size-16);
}

html body .font-size-17 {
    font-size: var(--font-size-17);
}

html body .font-size-18 {
    font-size: var(--font-size-18);
}
html body .font-size-20 {
    font-size: var(--font-size-20);
}

html body .font-size-22 {
    font-size: var(--font-size-22);
}
html body .font-size-24 {
    font-size: var(--font-size-24);
}
html body .font-size-25 {
    font-size: var(--font-size-25);
}

html body .font-size-28 {
    font-size: var(--font-size-28);
}

html body .font-size-32 {
    font-size: var(--font-size-32);
}

html body .font-size-36 {
    font-size: var(--font-size-36);
}

html body .font-size-42 {
    font-size: var(--font-size-42);
}

html body .font-size-44 {
    font-size: var(--font-size-44);
}

html body .font-size-48 {
    font-size: var(--font-size-48);
}

html body .font-size-54 {
    font-size: var(--font-size-54);
}

/* Font Weight */
html body .font-weight-extralight {
    font-weight: var(--font-weight-extralight);
}

html body .font-weight-light {
    font-weight: var(--font-weight-light);
}

html body .font-weight-regular {
    font-weight: var(--font-weight-regular);
}

html body .font-weight-medium {
    font-weight: var(--font-weight-medium);
}

html body .font-weight-semibold {
    font-weight: var(--font-weight-semibold);
}

html body .font-weight-bold {
    font-weight: var(--font-weight-bold);
}

html body .font-weight-extrabold {
    font-weight: var(--font-weight-extrabold);
}

html body .font-weight-black {
    font-weight: var(--font-weight-black);
}
#form_ets_onepagecheckout {
    font-family: var(--font-family-main)!important;
}