/* Font declarations */
@font-face {
    font-family: 'Buenos Aires';
    src: url('../../fonts/BuenosAires-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Buenos Aires';
    src: url('../../fonts/BuenosAires-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Buenos Aires';
    src: url('../../fonts/BuenosAires-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Buenos Aires';
    src: url('../../fonts/BuenosAires-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* Override vendor.css font variables */
:root {
    --font-family-sans-serif: "Buenos Aires", "Pulp", "OpenSans", "Open Sans", sans-serif !important;
    --font-family-monospace: "Buenos Aires", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}

/* Global font override */
/*html, body, button, input, select, textarea, .dx-widget, [class^="dx-"] {
            font-family: var(--base-font-family) !important;
        }*/
html, body, button, input, select, textarea, .dx-widget {
    font-family: var(--base-font-family) !important;
}

/*
            Using the CSS variable: font-family: var(--base-font-family);
            Directly specifying the font: font-family: 'Buenos Aires', sans-serif;
            You can use them like: font-weight: var(--base-bold-font-weight);
        */

/* Common Layout Styles for All Views */
:root {
    --breakpoint: 980px;
    --base-size: 8px;
    --base-size-x1: var(--base-size);
    --base-size-x2: calc(var(--base-size) * 2);
    --base-size-x3: calc(var(--base-size) * 3);
    --base-size-x4: calc(var(--base-size) * 4);
    --base-size-x5: calc(var(--base-size) * 5);
    --base-size-x6: calc(var(--base-size) * 6);
    --base-size-x7: calc(var(--base-size) * 7);
    --base-size-x8: calc(var(--base-size) * 8);
    --base-size-x9: calc(var(--base-size) * 9);
    --base-size-x10: calc(var(--base-size) * 10);
    --base-color-white: #FFFFFF;
    --base-color-black: #121212;
    --base-color-black-medium: #3F3F3F;
    --base-color-grey: #A6A6A6;
    --base-color-grey-medium: #D9D9D9;
    --base-color-grey-light: #F7F7F7;
    --base-color-blue: #157DFE;
    --base-color-blue-medium: #5BA4FE;
    --base-color-blue-light: #ADD2FF;
    --base-color-blue-extra-light: #E8F2FF;
    --base-color-yellow: #FFCB3F;
    --base-color-yellow-medium: #FFDB78;
    --base-color-yellow-light: #FFEDBC;
    --base-color-yellow-extra-light: #FFFBF0;
    --base-color-pink: #FF6363;
    --base-color-pink-medium: #FF9292;
    --base-color-pink-light: #FFC8C8;
    --base-color-pink-extra-light: #FFF1F1;
    --base-color-orange: #FFA25E;
    --base-color-purple: #5D5DEC;
    --base-color-purple-extra-light: #EEEEFF;
    --base-color-system-success: #5BCA8D;
    --base-color-system-success-light: #F2FBF6;
    --base-color-system-warning: #FF3636;
    --base-font-family: "Buenos Aires", "Pulp", "OpenSans", "Open Sans", sans-serif !important;
    --base-h1-font-size: 80px;
    --base-h2-font-size: 60px;
    --base-h3-font-size: 40px;
    --base-h4-font-size: 30px;
    --base-h5-font-size: 24px;
    --base-h6-font-size: 20px;
    --base-body-font-size: 16px;
    --base-caption-font-size: 14px;
    --base-small-font-size: 12px;
    --base-tiny-font-size: 10px;
    --base-button-xlarge-font-size: var(--base-body-font-size);
    --base-button-large-font-size: var(--base-body-font-size);
    --base-button-medium-font-size: var(--base-caption-font-size);
    --base-button-small-font-size: var(--base-small-font-size);
    --base-heaviest-font-weight: 900;
    --base-heavy-font-weight: 800;
    --base-bold-font-weight: bold;
    --base-medium-font-weight: 600;
    --base-regular-font-weight: normal;
    --base-thin-font-weight: 200;
    --base-transition: all .3s ease;
    --base-padding: var(--base-size) var(--base-size-x2);
    --base-color-gradient-premium: linear-gradient(130deg, #EAD1A8 0%, #FFEDC2 20%, #EEA7A7 40%, #A6ADEB 100%);
    --base-background-color: var(--base-color-white);
    --base-text-color: var(--base-color-black);
    --base-contrast-color: var(--base-color-pink);
    --base-ambassador-color: var(--base-color-purple);
    --base-ambassador-light-color: var(--base-color-purple-extra-light);
    --paypal-blue: #253B80;
    --icon-arrow-end: 'arrow-right'
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

body {
    color: #121212;
    background-color: #fff !important;
    font-family: var(--base-font-family) !important;
    font-weight: inherit;
    font-style: normal;
    font-variant: normal;
    font-kerning: auto;
    font-optical-sizing: auto;
    font-stretch: 100%;
    font-variation-settings: normal;
    font-feature-settings: normal;
    text-transform: none;
    text-decoration: none solid rgb(18, 18, 18);
    text-align: center;
    text-indent: 0px;
    font-size: 14px;
    line-height: inherit;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.container {
    padding: 0;
    margin-top: 0px;
    margin-bottom: 3rem;
    max-width: 1190px;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--base-font-family) !important;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}

img {
    max-width: 100%;
}