﻿@font-face {
    font-family: 'Source Sans Pro';
    src: url('/Content/fonts/SourceSansPro/SourceSansPro-Regular.ttf');
    font-display: fallback;
}

@font-face {
    font-family: 'Publico Headline';
    src: url('/Content/fonts/Publico/PublicoHeadline-Light-Web.woff2');
    font-display: fallback;
}

@font-face {
    font-family: 'DBHelvethaicaX';
    src: url('/Content/fonts/DBHelvethaicaX/DBHelvethaicaX-55Regular.eot');
    src: url('/Content/fonts/DBHelvethaicaX/DBHelvethaicaX-55Regular.eot?#iefix') format('embedded-opentype'), url('/Content/fonts/DBHelvethaicaX/DBHelvethaicaX-55Regular.woff') format('woff'), url('/Content/fonts/DBHelvethaicaX/DBHelvethaicaX-55Regular.ttf') format('truetype'), url('/Content/fonts/DBHelvethaicaX/DBHelvethaicaX-55Regular.svg#DBHelvethaicaX-55Regular') format('svg');
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0020-F882;
    font-display: fallback;
}


/*EN*/
.heading-sm:lang(en) {
    font-size: 40px !important;
    font-weight: 300 !important;
    font-family: 'Publico Headline' !important;
}

.surtitle-md:lang(en) {
    font-family: 'Source Sans Pro' !important;
    font-size: 16px;
    font-weight: bold;
    line-height: 24px;
    letter-spacing: 1.50px;
    word-wrap: break-word;
}

.surtitle-sm:lang(en) {
    font-family: 'Source Sans Pro' !important;
    font-size: 14px;
    font-weight: bold;
    line-height: 20px;
    letter-spacing: 1.50px;
    word-wrap: break-word;
}

.body-lg:lang(en) {
    font-size: 20px !important;
    font-family: 'Source Sans Pro' !important;
    font-weight: 400 !important;
    line-height: 28px !important;
    word-wrap: break-word
}

.body-md:lang(en) {
    font-size: 16px !important;
    font-family: 'Source Sans Pro' !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    word-wrap: break-word
}

.body-sm:lang(en) {
    font-size: 14px !important;
    font-family: 'Source Sans Pro' !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    word-wrap: break-word
}

.body-xs:lang(en) {
    font-size: 12px !important;
    font-family: 'Source Sans Pro' !important;
    font-weight: 400 !important;
    line-height: 18px !important;
    word-wrap: break-word
}

.link-md:lang(en) {
    font-size: 16px !important;
    font-family: 'Source Sans Pro' !important;
    font-weight: 400;
    line-height: 24px !important;
    word-wrap: break-word !important;
    text-decoration: underline !important;
}

.link-sm:lang(en) {
    font-size: 14px !important;
    font-family: 'Source Sans Pro' !important;
    font-weight: 400;
    line-height: 20px !important;
    word-wrap: break-word !important;
    text-decoration: underline !important;
}

/*TH*/
.heading-sm:lang(th) {
    font-size: 48px !important;
    font-family: 'DBHelvethaicaX' !important;
    font-weight: 400 !important;
    line-height: 48px !important;
    word-wrap: break-word
}

.surtitle-md:lang(th) {
    font-family: 'DBHelvethaicaX' !important;
    font-size: 22px;
    font-weight: bold;
    line-height: 24px;
    word-wrap: break-word;
    letter-spacing: 1.5px;
}

.surtitle-sm:lang(th) {
    font-family: 'DBHelvethaicaX' !important;
    font-size: 18px;
    font-weight: bold;
    line-height: 20px;
    word-wrap: break-word;
    letter-spacing: 1.5px;
}

.body-lg:lang(th) {
    font-size: 26px !important;
    font-family: 'DBHelvethaicaX' !important;
    font-weight: 400 !important;
    line-height: 28px !important;
    word-wrap: break-word
}

.body-md:lang(th) {
    font-size: 24px !important;
    font-family: 'DBHelvethaicaX' !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    word-wrap: break-word
}

.body-sm:lang(th) {
    font-size: 18px !important;
    font-family: 'DBHelvethaicaX' !important;
    font-weight: 400 !important;
    line-height: 18px !important;
    word-wrap: break-word
}

.body-xs:lang(th) {
    font-size: 18px !important;
    font-family: 'DBHelvethaicaX' !important;
    font-weight: 400 !important;
    line-height: 18px !important;
}

.link-md:lang(th) {
    font-size: 24px !important;
    font-family: 'DBHelvethaicaX' !important;
    font-weight: 400;
    line-height: 24px !important;
    word-wrap: break-word !important;
    text-decoration: underline !important;
}

.link-sm:lang(th) {
    font-size: 20px !important;
    font-family: 'DBHelvethaicaX' !important;
    font-weight: 400;
    line-height: 20px !important;
    word-wrap: break-word !important;
    text-decoration: underline !important;
}

@media screen and (min-width: 996px) {
    /*EN*/
    .heading-sm:lang(en) {
        font-size: 40px !important;
        font-weight: 300 !important;
    }

    .body-lg:lang(en) {
        font-size: 20px !important;
        line-height: 28px !important;
    }

    .body-md:lang(en) {
        font-size: 16px !important;
        line-height: 24px !important;
    }

    .body-sm:lang(en) {
        font-size: 14px !important;
        line-height: 20px !important;
    }

    .body-xs:lang(en) {
        font-size: 12px !important;
        line-height: 28px !important;
    }

    .link-md:lang(en) {
        font-size: 16px !important;
        line-height: 24px !important;
        text-decoration: underline !important;
    }

    .link-sm:lang(en) {
        font-size: 14px !important;
        line-height: 20px !important;
        text-decoration: underline !important;
    }

    /*TH*/
    .heading-sm:lang(th) {
        font-size: 48px !important;
        line-height: 48px !important;
    }

    .body-lg:lang(th) {
        font-size: 26px !important;
        line-height: 28px !important;
    }

    .body-md:lang(th) {
        font-size: 24px !important;
        line-height: 24px !important;
    }

    .body-sm:lang(th) {
        font-size: 18px !important;
        line-height: 18px !important;
    }

    .body-xs:lang(th) {
        font-size: 18px !important;
        line-height: 18px !important;
    }

    .link-md:lang(th) {
        font-size: 24px !important;
        line-height: 24px !important;
        text-decoration: underline !important;
    }

    .link-sm:lang(th) {
        font-size: 20px !important;
        line-height: 20px !important;
        text-decoration: underline !important;
    }
}

@media screen and (max-width: 996px) {
    /*EN*/
    .heading-sm:lang(en) {
        font-size: 28px !important;
        line-height: 36px !important;
    }

    .body-lg:lang(en) {
        font-size: 20px !important;
        line-height: 28px !important;
    }

    .body-md:lang(en) {
        font-size: 16px !important;
        line-height: 24px !important;
    }

    .body-sm:lang(en) {
        font-size: 14px !important;
        line-height: 20px !important;
    }

    .body-xs:lang(en) {
        font-size: 12px !important;
        line-height: 18px !important;
    }

    .link-md:lang(en) {
        font-size: 16px !important;
        line-height: 24px !important;
        text-decoration: underline !important;
    }

    .link-sm:lang(en) {
        font-size: 14px !important;
        line-height: 20px !important;
        text-decoration: underline !important;
    }

    /*TH*/
    .heading-sm:lang(th) {
        font-size: 48px !important;
        line-height: 48px !important;
    }

    .body-lg:lang(th) {
        font-size: 26px !important;
        line-height: 28px !important;
    }

    .body-md:lang(th) {
        font-size: 24px !important;
        line-height: 24px !important;
    }

    .body-sm:lang(th) {
        font-size: 18px !important;
        line-height: 18px !important;
    }

    .body-xs:lang(th) {
        font-size: 18px !important;
        line-height: 18px !important;
    }

    .link-md:lang(th) {
        font-size: 24px !important;
        line-height: 24px !important;
        text-decoration: underline !important;
    }

    .link-sm:lang(th) {
        font-size: 20px !important;
        line-height: 20px !important;
        text-decoration: underline !important;
    }
    /*EN*/
    .heading-sm:lang(en) {
        font-size: 40px !important;
        font-weight: 300 !important;
    }

    .body-lg:lang(en) {
        font-size: 20px !important;
        line-height: 28px !important;
    }

    .body-md:lang(en) {
        font-size: 16px !important;
        line-height: 24px !important;
    }

    .body-sm:lang(en) {
        font-size: 14px !important;
        line-height: 20px !important;
    }

    .body-xs:lang(en) {
        font-size: 12px !important;
        line-height: 28px !important;
    }

    .link-md:lang(en) {
        font-size: 16px !important;
        line-height: 24px !important;
        text-decoration: underline !important;
    }

    .link-sm:lang(en) {
        font-size: 14px !important;
        line-height: 20px !important;
        text-decoration: underline !important;
    }

    /*TH*/
    .heading-sm:lang(th) {
        font-size: 36px !important;
        line-height: 36px !important;
    }

    .body-lg:lang(th) {
        font-size: 26px !important;
        line-height: 28px !important;
    }

    .body-md:lang(th) {
        font-size: 24px !important;
        line-height: 24px !important;
    }

    .body-sm:lang(th) {
        font-size: 18px !important;
        line-height: 18px !important;
    }

    .body-xs:lang(th) {
        font-size: 18px !important;
        line-height: 18px !important;
    }

    .link-md:lang(th) {
        font-size: 24px !important;
        line-height: 24px !important;
        text-decoration: underline !important;
    }

    .link-sm:lang(th) {
        font-size: 20px !important;
        line-height: 20px !important;
        text-decoration: underline !important;
    }
}


.bold {
    font-weight: 700 !important;
}

.uppercase {
    text-transform: uppercase !important;
}

label {
    color: #343C3D !important;
}

    label span.required {
        color: #FD302D !important;
    }