@font-face {
    font-family: AvenirBlack;
    src: url(/Fonts/AvenirLTStd-Black.otf),url("/Fonts/AvenirLTStd-Black.woff") format("woff");
}

@font-face {
    font-family: AvenirRoman;
    src: url(/Fonts/AvenirLTStd-Roman.otf),url("/Fonts/AvenirLTStd-Roman.woff") format("woff");
}

@font-face {
    font-family: AvenirHeavy;
    src: url(/Fonts/AvenirLTStd-Heavy.otf),url("/Fonts/AvenirLTStd-Heavy.woff") format("woff");
}

@font-face {
    font-family: AvenirLight;
    src: url(/Fonts/AvenirLTStd-Light.otf),url("/Fonts/AvenirLTStd-Light.woff") format("woff");
}

@font-face {
    font-family: AvenirMedium;
    src: url(/Fonts/AvenirLTStd-Medium.otf),url("/Fonts/AvenirLTStd-Medium.woff") format('woff');
}

:root {
    --font-mob-body: calc((32 - 16) * ((100vw - 320px) / (640 - 320)));
    --font-mob-text-0: calc((14 - 7) * ((100vw - 320px) / (640 - 320)));
    --font-mob-text-1: calc((24 - 12) * ((100vw - 320px) / (640 - 320)));
    --font-mob-text-2: calc((24 - 12) * ((100vw - 320px) / (640 - 320)));
    --font-mob-text-3: calc((24 - 12) * ((100vw - 320px) / (640 - 320)));
    --font-mob-text-4: calc((24 - 12) * ((100vw - 320px) / (640 - 320)));
    --font-mob-text-5: calc((26 - 13) * ((100vw - 320px) / (640 - 320)));
    --font-mob-text-6: calc((26 - 13) * ((100vw - 320px) / (640 - 320)));
    --font-mob-text-7: calc((32 - 16) * ((100vw - 320px) / (640 - 320)));
    --font-mob-text-8: calc((32 - 16) * ((100vw - 320px) / (640 - 320)));
    --font-mob-text-9: calc((32 - 16) * ((100vw - 320px) / (640 - 320)));
    --font-mob-text-10: calc((32 - 16) * ((100vw - 320px) / (640 - 320)));
    --font-mob-text-11: calc((36 - 18) * ((100vw - 320px) / (640 - 320)));
    --font-mob-text-12: calc((36 - 18) * ((100vw - 320px) / (640 - 320)));
    --font-mob-text-13: calc((52 - 26) * ((100vw - 320px) / (640 - 320)));
    --font-mob-text-14: calc((56 - 28) * ((100vw - 320px) / (640 - 320)));
    /* line-height*/

    --line-height-mob-body: calc((46 - 23) * ((100vw - 320px) / (640 - 320)));
    --line-height-mob-text-0: calc((20 - 10) * ((100vw - 320px) / (640 - 320)));
    --line-height-mob-text-1: calc((40 - 20) * ((100vw - 320px) / (640 - 320)));
    --line-height-mob-text-2: calc((40 - 20) * ((100vw - 320px) / (640 - 320)));
    --line-height-mob-text-3: calc((36 - 18) * ((100vw - 320px) / (640 - 320)));
    --line-height-mob-text-4: calc((32 - 16) * ((100vw - 320px) / (640 - 320)));
    --line-height-mob-text-5: calc((36 - 18) * ((100vw - 320px) / (640 - 320)));
    --line-height-mob-text-6: calc((46 - 23) * ((100vw - 320px) / (640 - 320)));
    --line-height-mob-text-7: calc((46 - 23) * ((100vw - 320px) / (640 - 320)));
    --line-height-mob-text-8: calc((46 - 23) * ((100vw - 320px) / (640 - 320)));
    --line-height-mob-text-9: calc((46 - 23) * ((100vw - 320px) / (640 - 320)));
    --line-height-mob-text-10: calc((52 - 26) * ((100vw - 320px) / (640 - 320)));
    --line-height-mob-text-11: calc((50 - 25) * ((100vw - 320px) / (640 - 320)));
    --line-height-mob-text-12: calc((56 - 28) * ((100vw - 320px) / (640 - 320)));
    --line-height-mob-text-13: calc((64 - 32) * ((100vw - 320px) / (640 - 320)));
    --line-height-mob-text-14: calc((64 - 32) * ((100vw - 320px) / (640 - 320)));
    /* controls */
    --height-mob-gototop: calc((60 - 30) * ((100vw - 320px) / (640 - 320)));
    --width-mob-footer-logo: calc((330 - 200) * ((100vw - 320px) / (640 - 320)));
    --height-mob-input: calc((80 - 40) * ((100vw - 320px) / (640 - 320)));
    --height-mob-input: calc((80 - 40) * ((100vw - 320px) / (640 - 320)));
    --height-mob-dropdown: calc((22 - 10) * ((100vw - 320px) / (640 - 320)));
    --top-mob-dropdown: calc((30 - 15) * ((100vw - 320px) / (640 - 320)));
    --top-mob-checkbox: calc((52 - 26) * ((100vw - 320px) / (640 - 320)));
    --top-mob-checkbox-content: calc((26 - 13) * ((100vw - 320px) / (640 - 320)));
}

@media screen and (min-width: 320px) {

    body {
        font-size: 16px;
        font-size: calc(16px + var(--font-mob-body));
        line-height: calc(23px + var(--line-height-mob-body));
        font-family: AvenirRoman, AvenirLight, "Source Sans Pro", Arial, sans-serif;
    }

    .text-0 {
        font-size: calc(7px + var(--font-mob-text-0));
        line-height: calc(10px + var(--line-height-mob-text-0));
    }

    .text-1 {
        font-size: 12px;
        font-size: calc(12px + var(--font-mob-text-1));
        line-height: calc(20px + var(--line-height-mob-text-1));
    }

    .text-2 {
        font-size: 12px;
        font-size: calc(12px + var(--font-mob-text-2));
        line-height: calc(20px + var(--line-height-mob-text-2));
    }

    .text-3 {
        font-size: 12px;
        font-size: calc(12px + var(--font-mob-text-3));
        line-height: calc(18px + var(--line-height-mob-text-3));
    }

    .text-4 {
        font-size: 12px;
        font-size: calc(12px + var(--font-mob-text-4));
        line-height: calc(16px + var(--line-height-mob-text-4));
    }

    .text-5 {
        font-size: calc(13px + var(--font-mob-text-5));
        line-height: calc(18px + var(--line-height-mob-text-5));
    }

    .text-6 {
        font-size: 13px;
        font-size: calc(13px + var(--font-mob-text-6));
        line-height: calc(23px + var(--line-height-mob-text-6));
    }

    .text-7 {
        font-size: 16px;
        font-size: calc(16px + var(--font-mob-text-7));
        line-height: calc(23px + var(--line-height-mob-text-7));
    }

    .text-8 {
        font-size: 16px;
        font-size: calc(16px + var(--font-mob-text-8));
        line-height: calc(23px + var(--line-height-mob-text-8));
    }

    .text-9 {
        font-size: calc(16px + var(--font-mob-text-9));
        line-height: calc(23px + var(--line-height-mob-text-9));
    }

    .text-10 {
        font-size: 16px;
        font-size: calc(16px + var(--font-mob-text-10));
        line-height: calc(26px + var(--line-height-mob-text-10));
    }

    .text-11 {
        font-size: 18px;
        font-size: calc(18px + var(--font-mob-text-11));
        line-height: calc(25px + var(--line-height-mob-text-11));
    }

    .text-12 {
        font-size: 18px;
        font-size: calc(18px + var(--font-mob-text-12));
        line-height: calc(28px + var(--line-height-mob-text-12));
    }

    .text-13 {
        font-size: 26px;
        font-size: calc(26px + var(--font-mob-text-13));
        line-height: calc(32px + var(--line-height-mob-text-13));
    }

    .text-14 {
        font-size: 28px;
        font-size: calc(28px + var(--font-mob-text-14));
        line-height: calc(32px + var(--line-height-mob-text-14));
    }
}

@media screen and (min-width: 641px) {

    body {
        font-size: 32px;
        line-height: 46px;
        font-family: AvenirRoman, AvenirLight, "Source Sans Pro", Arial, sans-serif;
    }

    .text-0 {
        font-size: 14px;
        line-height: 20px;
    }

    .text-1 {
        font-size: 24px;
        line-height: 40px;
    }

    .text-2 {
        font-size: 24px;
        line-height: 40px;
    }

    .text-3 {
        font-size: 24px;
        line-height: 36px;
    }

    .text-4 {
        font-size: 24px;
        line-height: 32px;
    }

    .text-5 {
        font-size: 26px;
        line-height: 36px;
    }

    .text-6 {
        font-size: 26px;
        line-height: 46px;
    }

    .text-7 {
        font-size: 32px;
        line-height: 46px;
    }

    .text-8 {
        font-size: 32px;
        line-height: 46px;
    }

    .text-9 {
        font-size: 32px;
        line-height: 46px;
    }

    .text-10 {
        font-size: 32px;
        line-height: 52px;
    }

    .text-11 {
        font-size: 36px;
        line-height: 50px;
    }

    .text-12 {
        font-size: 36px;
        line-height: 56px;
    }

    .text-13 {
        font-size: 52px;
        line-height: 64px;
    }

    .text-14 {
        font-size: 56px;
        line-height: 64px;
    }
}

@media screen and (min-width: 1200px) {

    body {
        font-size: 20px;
        line-height: 30px;
        font-family: AvenirRoman, AvenirLight, "Source Sans Pro", Arial, sans-serif;
    }

    .text-0 {
        font-size: 11px;
        line-height: 13px;
    }

    .text-1 {
        font-size: 12px;
        line-height: 20px;
    }

    .text-2 {
        font-size: 13px;
        line-height: 20px;
    }

    .text-3 {
        font-size: 14px;
        line-height: 22px;
    }

    .text-4 {
        font-size: 20px;
        line-height: 26px;
    }

    .text-5 {
        font-size: 18px;
        line-height: 30px;
    }

    .text-6 {
        font-size: 20px;
        line-height: 30px;
    }

    .text-7 {
        font-size: 18px;
        line-height: 28px;
    }

    .text-8 {
        font-size: 20px;
        line-height: 30px;
    }

    .text-9 {
        font-size: 20px;
        line-height: 28px;
    }

    .text-10 {
        font-size: 20px;
        line-height: 24px;
    }

    .text-11 {
        font-size: 24px;
        line-height: 30px;
    }

    .text-12 {
        font-size: 23px;
        line-height: 33px;
    }

    .text-13 {
        font-size: 40px;
        line-height: 48px;
    }

    .text-14 {
        font-size: 35px;
        line-height: 45px;
    }
}



#contentHeader {
    min-height: 25vh;
    min-width: 100vw;
    overflow: auto;
}

#contentMain {
    min-height: 60vh;
    min-width: 100vw;
    overflow: auto;
}

#contentFooter {
    min-height: 15vh;
    min-width: 100vw;
    background-color: #400099;
    overflow: auto;
}

.header-1 {
    width: 100%;
    background-color: #400099 !important;
}

.header-2 {
    width: 100%;
}