
/* OJ Variables */
:host, html {
  --__oj2_color_annotation_50: #a5e5e5; /** Annotation color at 50% opacity */
  --__oj2_color_annotation_100: #008080;
  --__oj2_color_black: #0d0804; /** This is for status bar only */
  --__oj2_color_blush_50: #fabefe;
  --__oj2_color_blush_100: #f689fd;
  --__oj2_color_blush_150: #be08c9;
  --__oj2_color_blush_190: #310d40;
  --__oj2_color_green_10: #cdf4d8;
  --__oj2_color_green_50: #65ff39;
  --__oj2_color_green_100: #1e8700;
  --__oj2_color_green_150: #0f4400;
  --__oj2_color_green_190: #003311;
  --__oj2_color_grey_10: #f7f4f1;
  --__oj2_color_grey_20: #f1ede9;
  --__oj2_color_grey_30: #a69f98;
  --__oj2_color_grey_40: #6c6763;
  --__oj2_color_grey_50: #403b3b;
  --__oj2_color_grey_60: #302c2c;
  --__oj2_color_grey_70: #201e1e;
  --__oj2_color_grey_80: #111010;
  --__oj2_color_legacy_fuchsia_100: #f6e5ef;
  --__oj2_color_legacy_fuchsia_200: #eecce0;
  --__oj2_color_legacy_fuchsia_300: #e6b2d1;
  --__oj2_color_legacy_fuchsia_400: #dd99c2;
  --__oj2_color_legacy_fuchsia_500: #ab0066;
  --__oj2_color_legacy_fuchsia_600: #66003d;
  --__oj2_color_legacy_gray_100: #f0f0f0;
  --__oj2_color_legacy_gray_200: #d9d9d9;
  --__oj2_color_legacy_gray_300: #a8a8a8;
  --__oj2_color_legacy_gray_400: #696969;
  --__oj2_color_legacy_gray_500: #3d3d3d;
  --__oj2_color_legacy_gray_600: #333333;
  --__oj2_color_legacy_gray_700: #212121;
  --__oj2_color_legacy_gray_800: #050505;
  --__oj2_color_legacy_indigo_100: #ededf5;
  --__oj2_color_legacy_indigo_200: #dcdceb;
  --__oj2_color_legacy_indigo_300: #cbcae0;
  --__oj2_color_legacy_indigo_400: #bab9d6;
  --__oj2_color_legacy_indigo_500: #525199;
  --__oj2_color_legacy_indigo_600: #31305b;
  --__oj2_color_legacy_leaf_100: #eaf4ed;
  --__oj2_color_legacy_leaf_200: #d6eadc;
  --__oj2_color_legacy_leaf_300: #c2dfca;
  --__oj2_color_legacy_leaf_400: #aed5b9;
  --__oj2_color_legacy_leaf_500: #349651;
  --__oj2_color_legacy_leaf_600: #1f5a30;
  --__oj2_color_legacy_lime_100: #fafbeb;
  --__oj2_color_legacy_lime_200: #f6f7d8;
  --__oj2_color_legacy_lime_300: #f1f4c4;
  --__oj2_color_legacy_lime_400: #ecf0b1;
  --__oj2_color_legacy_lime_500: #d0d93c;
  --__oj2_color_legacy_lime_600: #7c8224;
  --__oj2_color_legacy_minus_400: #e14242;
  --__oj2_color_legacy_minus_500: #d70000;
  --__oj2_color_legacy_plus_400: #aed5b9;
  --__oj2_color_legacy_plus_500: #349651;
  --__oj2_color_legacy_sky_100: #eff6fb;
  --__oj2_color_legacy_sky_200: #dfedf8;
  --__oj2_color_legacy_sky_300: #cfe4f4;
  --__oj2_color_legacy_sky_400: #bfdbf0;
  --__oj2_color_legacy_sky_500: #559bd1;
  --__oj2_color_legacy_sky_600: #335d7d;
  --__oj2_color_maroon_50: #ff9fc7;
  --__oj2_color_maroon_100: #4d0020;
  --__oj2_color_maroon_150: #340016;
  --__oj2_color_maroon_190: #330016;
  --__oj2_color_opacity_black_0: rgba(0, 0, 0, 0.0000);
  --__oj2_color_opacity_black_100: rgba(0, 0, 0, 0.0800);
  --__oj2_color_opacity_black_150: rgba(0, 0, 0, 0.1600);
  --__oj2_color_opacity_black_300: rgba(0, 0, 0, 0.3000);
  --__oj2_color_opacity_black_400: rgba(0, 0, 0, 0.4000);
  --__oj2_color_opacity_black_800: rgba(0, 0, 0, 0.8000); /** New token for Scrim usage */
  --__oj2_color_opacity_white_0: rgba(255, 255, 255, 0.0000);
  --__oj2_color_opacity_white_100: rgba(255, 255, 255, 0.0800);
  --__oj2_color_opacity_white_150: rgba(255, 255, 255, 0.1600);
  --__oj2_color_opacity_white_300: rgba(255, 255, 255, 0.3000);
  --__oj2_color_opacity_white_400: rgba(255, 255, 255, 0.4000);
  --__oj2_color_orange: #ff6200;
  --__oj2_color_raspberry_10: #fbe6f5;
  --__oj2_color_raspberry_50: #ff68d5;
  --__oj2_color_raspberry_100: #d40199;
  --__oj2_color_raspberry_150: #8f096a;
  --__oj2_color_raspberry_190: #330f2b;
  --__oj2_color_red_10: #ffcfbf;
  --__oj2_color_red_50: #ff3d00;
  --__oj2_color_red_100: #ce2323;
  --__oj2_color_red_150: #671900;
  --__oj2_color_red_190: #4d000d;
  --__oj2_color_sky_10: #e4f5ff;
  --__oj2_color_sky_50: #bee8fe;
  --__oj2_color_sky_100: #89d6fd;
  --__oj2_color_sky_150: #185a7b;
  --__oj2_color_sky_190: #0a2033;
  --__oj2_color_sun_10: #fffce5;
  --__oj2_color_sun_50: #ffee73;
  --__oj2_color_sun_100: #ffe100;
  --__oj2_color_sun_150: #aa9600;
  --__oj2_color_sun_190: #664d00;
  --__oj2_color_violet_10: #f1e9ff;
  --__oj2_color_violet_50: #b487ff;
  --__oj2_color_violet_100: #7724ff;
  --__oj2_color_violet_150: #3c1280;
  --__oj2_color_violet_190: #210e47;
  --__oj2_color_white: #ffffff;
  --__oj2_dimension_10: 1px;
  --__oj2_dimension_15: 1.5px;
  --__oj2_dimension_25: 2px;
  --__oj2_dimension_35: 3px;
  --__oj2_dimension_50: 4px;
  --__oj2_dimension_75: 6px;
  --__oj2_dimension_100: 8px;
  --__oj2_dimension_125: 10px;
  --__oj2_dimension_150: 12px;
  --__oj2_dimension_200: 16px;
  --__oj2_dimension_250: 20px;
  --__oj2_dimension_300: 24px;
  --__oj2_dimension_400: 32px;
  --__oj2_dimension_500: 40px;
  --__oj2_dimension_600: 48px;
  --__oj2_dimension_700: 56px;
  --__oj2_dimension_800: 64px;
  --__oj2_dimension_900: 72px;
  --__oj2_dimension_1000: 80px;
  --__oj2_dimension_1200: 96px;
  --__oj2_dimension_desktop: 1280px;
  --__oj2_dimension_mobile: 375px;
  --__oj2_dimension_tablet: 768px;
  --__oj2_opacity_300: 0.3;
  --__oj2_opacity_400: 0.4;
  --__oj2_opacity_600: 0.6;
  --__oj2_opacity_700: 0.7;
  --__oj2_opacity_800: 0.8;
  --__oj2_typography_fontDecor_underline: Underline;
  --__oj2_typography_fontFamily_annotation: Courier New;
  --__oj2_typography_fontFamily_code: Courier;
  --__oj2_typography_fontFamily_default: INGMe, arial, helvetica, sans-serif;
  --__oj2_typography_fontFamily_fallback-web: Arial;
  --__oj2_typography_fontFamily_headline: ING Display, INGMe, arial, helvetica, sans-serif;
  --__oj2_typography_fontFamily_headline-medium: ING Display Medium, INGMe, arial, helvetica, sans-serif;
  --__oj2_typography_fontFamily_narrow: INGMeNarrow, INGMe, arial, helvetica, sans-serif;
  --__oj2_typography_fontLheight_50: 1.125rem;
  --__oj2_typography_fontLheight_100: 1.3125rem;
  --__oj2_typography_fontLheight_200: 1.5rem;
  --__oj2_typography_fontLheight_300: 1.78125rem;
  --__oj2_typography_fontLheight_400: 2.25rem;
  --__oj2_typography_fontLheight_500: 2.625rem;
  --__oj2_typography_fontLheight_600: 3rem;
  --__oj2_typography_fontLheight_700: 3.375rem;
  --__oj2_typography_fontLheight_800: 4.5rem;
  --__oj2_typography_fontSize_12: 0.75rem;
  --__oj2_typography_fontSize_14: 0.875rem;
  --__oj2_typography_fontSize_16: 1rem;
  --__oj2_typography_fontSize_19: 1.1875rem;
  --__oj2_typography_fontSize_24: 1.5rem;
  --__oj2_typography_fontSize_28: 1.75rem;
  --__oj2_typography_fontSize_32: 2rem;
  --__oj2_typography_fontSize_36: 2.25rem;
  --__oj2_typography_fontSize_48: 3rem;
  --__oj2_typography_fontSize_56: 3.5rem;
  --__oj2_typography_fontStyle_italic: Italic;
  --__oj2_typography_fontWeight_bold: Bold;
  --__oj2_typography_fontWeight_regular: normal;
}


@font-face {
  font-family: 'ING Me';
  src: url('../fonts/INGMe/INGMeWeb-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ING Me';
  src: url('../fonts/INGMe/INGMeWeb-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ING Display';
  src: url('../fonts/INGDisplay/INGdisplay-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: 'ING Me', arial, helvetica, sans-serif;
}

*,
:after,
:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	padding: 0
}


/* Typography */

h1, h2, h3, h4 {
    font-family: 'ING Display', sans-serif;
    margin: 0;
    line-height: 1;
}

h5, h6, p {
    font-family: 'ING Me', sans-serif;
    line-height: 1.5;
    margin: 0;
}

h1 {
    font-size: 48px;
}

h2 {
    font-size: 48px;
}

h3 {
    font-size: 36px;
}

h4 {
    font-size: 36px;
}

h5 {
    font-size: 24px;
}

h6 {
    font-size: 19px;
    font-weight: 500;
}

p {
    font-size: 16px;
    color: #0D0804;

    a {
        text-decoration: underline;
    }
}

small {
    font-size: 14px;
}

a {
    text-decoration: none;
    color: inherit;
}

ol,
ul {
	list-style: none
}

button {
    background-color: unset;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

@media (min-width: 768px) {
    h1 {font-size: 72px}
    h2 {font-size: 64px}
    h3 {font-size: 48px}
}

.container {
	margin-inline: auto;
	padding-inline: 16px;
    max-width: 1100px;

    &::after, &::before {
        display: none;
    }
}

@media (max-width: 980px) {
    
    .container {
		max-width: 712px;
	}
}

@media (max-width: 768px) {

    .container {
		max-width: unset;
	}
}

/* Breakpoint helper classes */
.desktop, .tablet, .mobile {display: none}
@media (width >= 980px) {.desktop {display: initial}}
@media (768px <= width <= 980px) {.tablet {display: initial}}
@media (width <= 768px) {.mobile {display: initial}}