/* Font Face Declarations */
@font-face {
    font-family: 'YS Text';
    font-style: normal;
    font-weight: 300;
    src: url('//yastatic.net/s3/home/fonts/ys/4/text-light.woff2') format('woff2'),
         url('//yastatic.net/s3/home/fonts/ys/4/text-light.woff') format('woff');
}
@font-face {
    font-family: 'YS Text';
    font-style: normal;
    font-weight: 400;
    src: url('//yastatic.net/s3/home/fonts/ys/4/text-regular.woff2') format('woff2'),
         url('//yastatic.net/s3/home/fonts/ys/4/text-regular.woff') format('woff');
}
@font-face {
    font-family: 'YS Text';
    font-style: normal;
    font-weight: 500;
    src: url('//yastatic.net/s3/home/fonts/ys/4/text-medium.woff2') format('woff2'),
         url('//yastatic.net/s3/home/fonts/ys/4/text-medium.woff') format('woff');
}
@font-face {
    font-family: 'YS Text';
    font-style: normal;
    font-weight: 600;
    src: url('//yastatic.net/s3/home/fonts/ys/4/text-bold.woff2') format('woff2'),
         url('//yastatic.net/s3/home/fonts/ys/4/text-bold.woff') format('woff');
}
@font-face {
    font-family: 'YS Text';
    font-style: normal;
    font-weight: 700;
    src: url('//yastatic.net/s3/home/fonts/ys/4/text-bold.woff2') format('woff2'),
         url('//yastatic.net/s3/home/fonts/ys/4/text-bold.woff') format('woff');
}
@font-face {
    font-family: 'YS Text';
    font-style: italic;
    font-weight: 300;
    src: url('//yastatic.net/s3/home/fonts/ys/4/text-light-italic.woff2') format('woff2'),
         url('//yastatic.net/s3/home/fonts/ys/4/text-light-italic.woff') format('woff');
}
@font-face {
    font-family: 'YS Text';
    font-style: italic;
    font-weight: 400;
    src: url('//yastatic.net/s3/home/fonts/ys/4/text-regular-italic.woff2') format('woff2'),
         url('//yastatic.net/s3/home/fonts/ys/4/text-regular-italic.woff') format('woff');
}
@font-face {
    font-family: 'YS Text';
    font-style: italic;
    font-weight: 500;
    src: url('//yastatic.net/s3/home/fonts/ys/4/text-medium-italic.woff2') format('woff2'),
         url('//yastatic.net/s3/home/fonts/ys/4/text-medium-italic.woff') format('woff');
}
@font-face {
    font-family: 'YS Text';
    font-style: italic;
    font-weight: 600;
    src: url('//yastatic.net/s3/home/fonts/ys/4/text-bold-italic.woff2') format('woff2'),
         url('//yastatic.net/s3/home/fonts/ys/4/text-bold-italic.woff') format('woff');
}
@font-face {
    font-family: 'YS Text Cond';
    font-style: normal;
    font-weight: 900;
    src: url('//yastatic.net/s3/home/fonts/ys/4/text-cond-black.woff2') format('woff2'),
         url('//yastatic.net/s3/home/fonts/ys/4/text-cond-black.woff') format('woff');
}
@font-face {
    font-family: 'YS Display Cond';
    font-style: normal;
    font-weight: 900;
    src: url('//yastatic.net/s3/home/fonts/ys/4/display-cond-black.woff2') format('woff2'),
         url('//yastatic.net/s3/home/fonts/ys/4/display-cond-black.woff') format('woff');
}



/* CSS Custom Properties */


:root {
    --font-display-large: 900 38px/38px 'YS Display Cond', sans-serif;
    --font-display-medium: 900 42px/38px 'YS Display Cond', sans-serif;
    --font-headline-large: 900 28px/24px 'YS Display Cond', sans-serif;
    --font-headline-medium: 900 26px/24px 'YS Display Cond', sans-serif;
    --font-title-large: 700 18px/22px 'YS Text', sans-serif;
    --font-title-medium: 700 18px/22px 'YS Text', sans-serif;
    --font-title-small: 700 14px/18px 'YS Text', sans-serif;
    --font-body-large: 400 16px/20px 'YS Text', sans-serif;
    --font-body-medium: 400 14px/18px 'YS Text', sans-serif;
    --font-body-small: 400 11px/14px 'YS Text', sans-serif;
    --font-label-large: 500 14px/20px 'YS Text', sans-serif;
    --font-label-medium: 500 13px/15px 'YS Text', sans-serif;
}



@media (min-width: 360px) {
    :root {
        --font-display-large: 900 46px/42px 'YS Display Cond', sans-serif;
        --font-display-medium: 900 46px/42px 'YS Display Cond', sans-serif;
        --font-headline-large: 900 32px/30px 'YS Display Cond', sans-serif;
        --font-headline-medium: 900 28px/26px 'YS Display Cond', sans-serif;
        --font-title-large: 700 18px/22px 'YS Text', sans-serif;
        --font-title-medium: 700 18px/22px 'YS Text', sans-serif;
        --font-title-small: 700 14px/18px 'YS Text', sans-serif;
        --font-body-large: 400 16px/20px 'YS Text', sans-serif;
        --font-body-medium: 400 14px/18px 'YS Text', sans-serif;
        --font-body-small: 400 11px/14px 'YS Text', sans-serif;
        --font-label-large: 500 14px/20px 'YS Text', sans-serif;
        --font-label-medium: 500 13px/15px 'YS Text', sans-serif;
    }
}


@media (min-width: 768px) {
    :root {
        --font-display-large: 900 88px/84px 'YS Display Cond', sans-serif;
        --font-display-medium: 900 76px/72px 'YS Display Cond', sans-serif;
        --font-headline-large: 900 48px/44px 'YS Display Cond', sans-serif;
        --font-headline-medium: 900 42px/38px 'YS Display Cond', sans-serif;
        --font-title-large: 700 26px/32px 'YS Text', sans-serif;
        --font-title-medium: 700 22px/26px 'YS Text', sans-serif;
        --font-title-small: 700 18px/22px 'YS Text', sans-serif;
        --font-body-large: 400 24px/30px 'YS Text', sans-serif;
        --font-body-medium: 400 16px/20px 'YS Text', sans-serif;
        --font-body-small: 400 12px/16px 'YS Text', sans-serif;
        --font-label-large: 500 16px/22px 'YS Text', sans-serif;
        --font-label-medium: 500 13px/16px 'YS Text', sans-serif;
    }
}


@media (min-width: 1024px) {
    :root {
        --font-display-large: 900 88px/84px 'YS Display Cond', sans-serif;
        --font-display-medium: 900 76px/72px 'YS Display Cond', sans-serif;
        --font-headline-large: 900 48px/44px 'YS Display Cond', sans-serif;
        --font-headline-medium: 900 42px/38px 'YS Display Cond', sans-serif;
        --font-title-large: 700 26px/32px 'YS Text', sans-serif;
        --font-title-medium: 700 22px/26px 'YS Text', sans-serif;
        --font-title-small: 700 18px/22px 'YS Text', sans-serif;
        --font-body-large: 400 24px/30px 'YS Text', sans-serif;
        --font-body-medium: 400 16px/20px 'YS Text', sans-serif;
        --font-body-small: 400 12px/16px 'YS Text', sans-serif;
        --font-label-large: 500 16px/22px 'YS Text', sans-serif;
        --font-label-medium: 500 13px/16px 'YS Text', sans-serif;
    }
}


@media (min-width: 1440px) {
    :root {
        --font-display-large: 900 112px/104px 'YS Display Cond', sans-serif;
        --font-display-medium: 900 64px/60px 'YS Display Cond', sans-serif;
        --font-headline-large: 900 56px/50px 'YS Display Cond', sans-serif;
        --font-headline-medium: 900 48px/44px 'YS Display Cond', sans-serif;
        --font-title-large: 700 26px/32px 'YS Text', sans-serif;
        --font-title-medium: 700 22px/26px 'YS Text', sans-serif;
        --font-title-small: 700 18px/22px 'YS Text', sans-serif;
        --font-body-large: 400 24px/30px 'YS Text', sans-serif;
        --font-body-medium: 400 16px/20px 'YS Text', sans-serif;
        --font-body-small: 400 12px/16px 'YS Text', sans-serif;
        --font-label-large: 500 16px/22px 'YS Text', sans-serif;
        --font-label-medium: 500 13px/16px 'YS Text', sans-serif;
    }
}


@media (min-width: 1920px) {
    :root {
        --font-display-large: 900 152px/144px 'YS Display Cond', sans-serif;
        --font-display-medium: 900 80px/72px 'YS Display Cond', sans-serif;
        --font-headline-large: 900 72px/66px 'YS Display Cond', sans-serif;
        --font-headline-medium: 900 62px/58px 'YS Display Cond', sans-serif;
        --font-title-large: 700 28px/32px 'YS Text', sans-serif;
        --font-title-medium: 700 24px/28px 'YS Text', sans-serif;
        --font-title-small: 700 20px/24px 'YS Text', sans-serif;
        --font-body-large: 400 32px/38px 'YS Text', sans-serif;
        --font-body-medium: 400 18px/22px 'YS Text', sans-serif;
        --font-body-small: 400 14px/18px 'YS Text', sans-serif;
        --font-label-large: 500 18px/24px 'YS Text', sans-serif;
        --font-label-medium: 500 14px/18px 'YS Text', sans-serif;
    }
}