
@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Bold.eot');
    src: url('../fonts/OpenSans-Bold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/OpenSans-Bold.woff2') format('woff2'),
    url('../fonts/OpenSans-Bold.woff') format('woff'),
    url('../fonts/OpenSans-Bold.ttf') format('truetype'),
    url('../fonts/OpenSans-Bold.svg#OpenSans-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-BoldItalic.eot');
    src: url('../fonts/OpenSans-BoldItalic.eot?#iefix') format('embedded-opentype'),
    url('../fonts/OpenSans-BoldItalic.woff2') format('woff2'),
    url('../fonts/OpenSans-BoldItalic.woff') format('woff'),
    url('../fonts/OpenSans-BoldItalic.ttf') format('truetype'),
    url('../fonts/OpenSans-BoldItalic.svg#OpenSans-BoldItalic') format('svg');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-ExtraBold.eot');
    src: url('../fonts/OpenSans-ExtraBold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/OpenSans-ExtraBold.woff2') format('woff2'),
    url('../fonts/OpenSans-ExtraBold.woff') format('woff'),
    url('../fonts/OpenSans-ExtraBold.ttf') format('truetype'),
    url('../fonts/OpenSans-ExtraBold.svg#OpenSans-ExtraBold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Italic.eot');
    src: url('../fonts/OpenSans-Italic.eot?#iefix') format('embedded-opentype'),
    url('../fonts/OpenSans-Italic.woff2') format('woff2'),
    url('../fonts/OpenSans-Italic.woff') format('woff'),
    url('../fonts/OpenSans-Italic.ttf') format('truetype'),
    url('../fonts/OpenSans-Italic.svg#OpenSans-Italic') format('svg');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-ExtraBoldItalic.eot');
    src: url('../fonts/OpenSans-ExtraBoldItalic.eot?#iefix') format('embedded-opentype'),
    url('../fonts/OpenSans-ExtraBoldItalic.woff2') format('woff2'),
    url('../fonts/OpenSans-ExtraBoldItalic.woff') format('woff'),
    url('../fonts/OpenSans-ExtraBoldItalic.ttf') format('truetype'),
    url('../fonts/OpenSans-ExtraBoldItalic.svg#OpenSans-ExtraBoldItalic') format('svg');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Light.eot');
    src: url('../fonts/OpenSans-Light.eot?#iefix') format('embedded-opentype'),
    url('../fonts/OpenSans-Light.woff2') format('woff2'),
    url('../fonts/OpenSans-Light.woff') format('woff'),
    url('../fonts/OpenSans-Light.ttf') format('truetype'),
    url('../fonts/OpenSans-Light.svg#OpenSans-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Medium.eot');
    src: url('../fonts/OpenSans-Medium.eot?#iefix') format('embedded-opentype'),
    url('../fonts/OpenSans-Medium.woff2') format('woff2'),
    url('../fonts/OpenSans-Medium.woff') format('woff'),
    url('../fonts/OpenSans-Medium.ttf') format('truetype'),
    url('../fonts/OpenSans-Medium.svg#OpenSans-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-LightItalic.eot');
    src: url('../fonts/OpenSans-LightItalic.eot?#iefix') format('embedded-opentype'),
    url('../fonts/OpenSans-LightItalic.woff2') format('woff2'),
    url('../fonts/OpenSans-LightItalic.woff') format('woff'),
    url('../fonts/OpenSans-LightItalic.ttf') format('truetype'),
    url('../fonts/OpenSans-LightItalic.svg#OpenSans-LightItalic') format('svg');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-SemiBoldItalic.eot');
    src: url('../fonts/OpenSans-SemiBoldItalic.eot?#iefix') format('embedded-opentype'),
    url('../fonts/OpenSans-SemiBoldItalic.woff2') format('woff2'),
    url('../fonts/OpenSans-SemiBoldItalic.woff') format('woff'),
    url('../fonts/OpenSans-SemiBoldItalic.ttf') format('truetype'),
    url('../fonts/OpenSans-SemiBoldItalic.svg#OpenSans-SemiBoldItalic') format('svg');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-MediumItalic.eot');
    src: url('../fonts/OpenSans-MediumItalic.eot?#iefix') format('embedded-opentype'),
    url('../fonts/OpenSans-MediumItalic.woff2') format('woff2'),
    url('../fonts/OpenSans-MediumItalic.woff') format('woff'),
    url('../fonts/OpenSans-MediumItalic.ttf') format('truetype'),
    url('../fonts/OpenSans-MediumItalic.svg#OpenSans-MediumItalic') format('svg');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-SemiBold.eot');
    src: url('../fonts/OpenSans-SemiBold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/OpenSans-SemiBold.woff2') format('woff2'),
    url('../fonts/OpenSans-SemiBold.woff') format('woff'),
    url('../fonts/OpenSans-SemiBold.ttf') format('truetype'),
    url('../fonts/OpenSans-SemiBold.svg#OpenSans-SemiBold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Regular.eot');
    src: url('../fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
    url('../fonts/OpenSans-Regular.woff2') format('woff2'),
    url('../fonts/OpenSans-Regular.woff') format('woff'),
    url('../fonts/OpenSans-Regular.ttf') format('truetype'),
    url('../fonts/OpenSans-Regular.svg#OpenSans-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}




:root {
    --heading-font-family : FrutigerLight,sans-serif;
    --heading-font-weight : 300;
    --heading-font-style  : normal;

    --text-font-family : FrutigerLight,sans-serif;
    --text-font-weight : 300;
    --text-font-style  : normal;
    --text-letter-spacing: 0.3em;

    --base-text-font-size   : 14px;
    --default-text-font-size: 14px;--background          : #ffffff;
    --background-rgb      : 255, 255, 255;
    --light-background    : #ffffff;
    --light-background-rgb: 255, 255, 255;
    --heading-color       : #15281f;
    --text-color          : #15281f;
    --text-color-rgb      : 21, 40, 31;
    --text-color-light    : #595959;
    --text-color-light-rgb: 89, 89, 89;
    --link-color          : #000000;
    --link-color-rgb      : 0, 0, 0;
    --border-color        : #dcdfdd;
    --border-color-rgb    : 220, 223, 221;

    --button-background    : #004824;
    --button-background-rgb: 0, 72, 36;
    --button-text-color    : #ffffff;

    --header-background       : #ffffff;
    --header-heading-color    : #15281f;
    --header-light-text-color : #15281f;
    --header-border-color     : #dcdfdd;

    --footer-background    : #ffffff;
    --footer-text-color    : #595959;
    --footer-heading-color : #303030;
    --footer-border-color  : #e6e6e6;

    --navigation-background      : #ffffff;
    --navigation-background-rgb  : 255, 255, 255;
    --navigation-text-color      : #303030;
    --navigation-text-color-light: rgba(48, 48, 48, 0.5);
    --navigation-border-color    : rgba(48, 48, 48, 0.25);

    --newsletter-popup-background     : #004824;
    --newsletter-popup-text-color     : #ffffff;
    --newsletter-popup-text-color-rgb : 255, 255, 255;

    --secondary-elements-background       : #004824;
    --secondary-elements-background-rgb   : 0, 72, 36;
    --secondary-elements-text-color       : #ffffff;
    --secondary-elements-text-color-light : rgba(255, 255, 255, 0.5);
    --secondary-elements-border-color     : rgba(255, 255, 255, 0.25);

    --product-sale-price-color    : #dd0524;
    --product-sale-price-color-rgb: 221, 5, 36;

    /* Shopify related variables */
    --payment-terms-background-color: #ffffff;

    /* Products */

    --horizontal-spacing-four-products-per-row: 60px;
    --horizontal-spacing-two-products-per-row : 60px;

    --vertical-spacing-four-products-per-row: 60px;
    --vertical-spacing-two-products-per-row : 75px;

    /* Animation */
    --drawer-transition-timing: cubic-bezier(0.645, 0.045, 0.355, 1);
    --header-base-height: 80px; /* We set a default for browsers that do not support CSS variables */

    /* Cursors */
    --cursor-zoom-in-svg    : url('../images/cursor-zoom-in.svg');
    --cursor-zoom-in-2x-svg : url('../images/cursor-zoom-in-2x.svg');
}