/*--------------------------------------------------------------
# Theme options
--------------------------------------------------------------*/

:root {

    /* Text colours */
    --text-orange: #5D2413;
    --text-brown-dark: #6D5E56;
    --text-blue: #729BB8;
    --text-red-error: #F16767;
    --text-green: #29401F;
    --border-main: rgba(229, 229, 229, 0.5);


    /* Alerts */

    --text-info: #729bb8;
    --text-warning: #8a6d3b;
    --text-success: #005b02;
    --text-danger: #9e0300;

    --alert-info: #d1e9fa;
    --alert-warning: #f9f0ca;
    --alert-success: #dff0d8;
    --alert-danger: #ffe2e4;


    /* Theme */

    --theme-baltic-sea-85: #1f1f24;
    --theme-baltic-sea-80: #1e1d22;
    --theme-baltic-sea-75: #1c1b1f;
    --theme-baltic-sea-65: #18171b;

    --theme-baltic-sea: #7586EA;
    --theme-gravel: #44494F;
    --theme-heathered-grey: #BBAA8E;
    --theme-dawn-pink: #F0E8DD;
    --theme-dune: #3F3733;
    --theme-pine-cone: #6D5E56;
    --theme-pale-oyster: #6D5E56;
    --theme-moon-mist: #E9D9D1;

    --theme-lite-orange: #F4AD97;
    --theme-lite-yellow: #F4D597;
    --theme-yellow-bright: #FFE4BE;
    --theme-yellow-bright-200: #FFE3BE;
    --theme-lite-cyan: #C8FCFF;
    --theme-lite-blue: #93C4F1;

    --theme-font-family: 'Hind', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

    --theme-white: #FFFFFF;
    --theme-black: #000000;
    --theme-darker: #25242A;
    --theme-dark: #313034;
    --theme-dark-25: #3e3d42;
    --theme-dark-30: #4b4950;
    --theme-dark-40: #64616b;
    --theme-dark-50: #7d7986;
    --theme-navy: #7586EA;
    --theme-orange: #7586EA;
    --theme-green: #A1D9A0;

    --theme-beige: var(--theme-pale-oyster);
    --theme-sand: var(--theme-dawn-pink);
    --theme-brown: var(--theme-pine-cone);


    /*  These need to exists because Boudewijn ...
        Avoid using these, use the '--theme-' variables instead.

     */

    --beige: var(--theme-pale-oyster);
    --beige-darker: var(--theme-moon-mist);
    --beige-sand: var(--theme-dawn-pink);
    --beige-light: rgba(158, 136, 125, 0.5);

    --black: #000000;
    --black-full: var(--theme-black);
    --white: var(--theme-white);
    --orange: var(--theme-orange);
    --green: var(--theme-green);
    --navy: var(--theme-navy);
    --blue: #D1E9FA; /* --theme-lite-cyan ?  */
    --blue-icons: var(--theme-lite-blue);
    --brown: var(--theme-pine-cone);

    --grey-bg: #F9F9F9;
    --grey-bg-2: #F2F1F1;
    --grey-light: #FAFAFA;
    --grey: #C7C7C7;
    --grey-2: #A5A5A5;

    --grey-border: #FFFFFF;
    --grey-icons: #A5A5A5;
    --grey-table: #F8F8F8;
    --grey-table-border: #EDEAEA;


}


:root {
    --container-size: 100%;
    --container-size-sm: 500px;
    --container-size-md: 680px;
    --container-size-lg: 920px;
    --container-size-xl: 1100px;
    --container-size-xxl: 1300px;
}

@media all and (min-width: 576px) and (max-width: 767px) {
    :root {
        --container-size: var(--container-size-sm);
    }
}

@media all and (min-width: 768px) and (max-width: 991px) {
    :root {
        --container-size: var(--container-size-md);
    }
}

@media all and (min-width: 992px) and (max-width: 1199px) {
    :root {
        --container-size: var(--container-size-lg);
    }
}

@media all and (min-width: 1200px) and (max-width: 1399px) {
    :root {
        --container-size: var(--container-size-xl);
    }
}

@media all and (min-width: 1490px) {
    :root {
        --container-size: var(--container-size-xxl);
    }
}


:root {


    --transition-duration: 200ms;
    --transition-timing-function: linear;
    --transition: var(--transition-duration) var(--transition-timing-function);


    --container-xs: 100%;
    --container-sm: 540px;
    --container-md: 720px;
    --container-lg: 960px;
    --container-xl: 1140px;
    --container-xxl: 1340px;
    --container-padding: 20px;


    --article-offset: 33px;

    --article-offset-sm: 50px;
    --article-offset-md: 75px;
    --article-offset-lg: 100px;


    --rounded: 8px;
    --rounded-md: 20px;
    --rounded-sm: 12px;
    --rounded-xs: 3px;


    --48px: 3rem;
    --40px: 2.5rem;
    --32px: 2rem;
    --24px: 1.5rem;
    --22px: 1.375rem;
    --20px: 1.25rem;
    --18px: 1.125rem;
    --17px: 1.0625rem;
    --16px: 1.0rem;
    --15px: 0.9375rem;
    --14px: 0.875rem;
    --13px: 0.8125rem;
    --12px: 0.75rem;


    --size-mini: 5px;
    --size-tiny: 10px;
    --size-small: 25px;
    --size-medium: 40px;
    --size-normal: 75px;
    --size-large: 100px;
    --size-huge: 125px;


    --title-banner: 38px;
    --title-margin: 1.25rem;

    --article-last-child-margin: 1.25rem;
    --article-last-type-margin: 1.25rem;

    --form-column-padding: 30px;

    --title-h3: 14px;
    --title-h4: 1.2rem;
    --title-h5: 1.1rem;
    --title-h6: 1rem;


    --title-h2: 26px;
    --font-size-main-h2: 26px;
    --font-size-title-h2: 24px;

    --font-size-main-h1: 20px;
    --title-h1: 20px;


    --font-size-main-h3: 2.5rem;
    --font-size-title-h1: 2.5rem;

    --font-size-title-h3: 14px;
    --font-size-title-h4: 1.25rem;

    --font-size-subtitle-faq: 1.25rem;
    --font-size-subtitle-h2: 1.5rem;
    --font-size-subtitle-md: 1.5rem;
    --font-size-subtitle: 1.2rem;
    --font-size-theme: 14px;

    --font-size-sm: 0.9rem;
    --font-size-xsl: 0.85rem;
    --font-size-xs: 0.8125rem;


    --font-size-bar: 13px;
    --font-size-nav: 15px;


    --letter-spacing-nav: 0.02em;
    --letter-spacing-xs: 0.015em;
    --letter-spacing-sm: 1.6px;
    --letter-spacing: 0.24px;
    --letter-spacing-md: 0.12em;
    --letter-spacing-lg: 0.15em;
    --letter-spacing-bar: 0.035em;
    --letter-spacing-title: 1px;
    --letter-spacing-btn: 0.65px;


}


@media all and (max-width: 1199px) {
    :root {


    }
}

@media all and (max-width: 991px) {
    :root {

        --form-column-padding: 20px;


    }
}

@media all and (max-width: 767px) {
    :root {

        --form-column-padding: 15px;

        --article-last-child-margin: 15px;
        --article-last-type-margin: 15px;

    }
}

@media all and (max-width: 575px) {
    :root {

        --container-padding: 15px;
        --form-column-padding: 15px;


    }
}

@media all and (max-width: 400px) {
    :root {


    }
}


body {
    line-height: 1.7;
    font-size: 14px;
    font-weight: 300;
    font-family: var(--theme-font-family);
}

body.antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

a, a:hover {
    text-decoration: none;
}

pre.debug {
    display: block;
    overflow: auto;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    max-height: 800px;
    max-width: 100%;
    width: 100%;
    margin: 0;
    background: #fff;
    color: #000;
}


/* Typography */


h1, h2, h3, h4 {
    font-weight: 400;
    margin: 0;
}

h1, .h1,
.h1-title .title {
    font-size: var(--title-h1);
}

h2, .h2,
.h2-title .title {
    font-size: var(--title-h2);
    font-weight: 400;
}

h3, .h3,
.h3-title .title {
    font-size: var(--title-h3);
}

h4, .h4,
.h4-title .title {
    font-size: var(--title-h4);
}

p {
    margin: 0.5em 0px;
}


/*--------------------------------------------------------------
# Theme - border radius
--------------------------------------------------------------*/

.rounded-xs {
    border-radius: var(--rounded-xs);
}

.rounded {
    border-radius: var(--rounded);
}

.rounded-sm {
    border-radius: var(--rounded-sm);
}

.rounded-md {
    border-radius: var(--rounded-md);
}

.bottom-rounded {
    border-bottom-left-radius: var(--rounded-md);
    border-bottom-right-radius: var(--rounded-md);
}


/*--------------------------------------------------------------
# Theme - text colours
--------------------------------------------------------------*/

.text-beige {
    color: var(--beige);
}

.text-brown-dark {
    color: var(--text-brown-dark);
}

.text-dune {
    color: var(--theme-dune);
}

.text-blue {
    color: var(--text-blue);
}

.text-green {
    color: var(--text-green);
}

.text-black {
    color: var(--black);
}

.text-white {
    color: var(--white);
}

.text-white {
    color: var(--white);
}

.text-darker {
    color: var(--theme-darker);
}


/*--------------------------------------------------------------
# Theme - font weights
--------------------------------------------------------------*/

.font-medium-light {
    font-weight: 400;
}

.font-medium {
    font-weight: 500;
}


/*--------------------------------------------------------------
# Theme - backgrounds
--------------------------------------------------------------*/

.bg-white-gradient {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.6));
}

.bg-white {
    background: var(--white);
}

.bg-light-linear {
    background: linear-gradient(180deg, #F9F7F1 0%, rgba(249, 247, 241, 0.00) 100%);
}

.bg-light {
    background-color: #F9F7F1;
}

.bg-blue-light {
    background: var(--blue);
}

.bg-black {
    background: var(--black);
}

/* Background beige */
.bg-beige-darker {
    background: var(--beige-darker);
}

.bg-beige-sand {
    background: var(--beige-sand);
}

/* Background grey */
.bg-grey {
    background: var(--grey-bg);
}

.bg-grey-2 {
    background: var(--grey-bg-2);
}

.bg-green {
    background: var(--green);
}


/*--------------------------------------------------------------
# Theme - utility classes
--------------------------------------------------------------*/

.no-gap {
    padding: 0;
}

.no-touch {
    pointer-events: none;
}


/*--------------------------------------------------------------
# Theme - media querys
--------------------------------------------------------------*/

@media all and (max-width: 575px) {

    .bg-white-gradient {
        background-image: none;
    }

}


/* Icons */

body.ready i.icon:not(.no-transition) {
    transition: var(--transition);
}

i.icon {
    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    font-style: normal;
    width: 32px;
    height: 32px;
}

i.icon.tiny {
    width: 16px;
    height: 16px;
}

i.icon.mini {
    width: 18px;
    height: 18px;
}

i.icon.small {
    width: 24px;
    height: 24px;
}

i.icon.medium {
    width: 48px;
    height: 48px;
}

i.icon.large {
    width: 64px;
    height: 64px;
}

i.icon.huge {
    width: 72px;
    height: 72px;
}

i.icon:not(.default) svg {
    flex: 1 1;
    width: 100%;
    height: 100%;
}

i.icon:not(.default) svg,
i.icon:not(.default) svg *,
i.icon:not(.default) svg path {
    fill: currentColor;
}

i.icon svg.fill,
i.icon svg.fill *,
i.icon svg.fill path {
    fill: currentColor;
}

i.icon svg.stroke,
i.icon svg.stroke *,
i.icon svg.stroke path {
    stroke: currentColor;
}

svg {
    flex: 1 1;
}

/** **/
.mb-40 {
    margin-bottom: 40px !important;
}

.text-center {
    text-align: center !important;
}

.mt-50 {
    margin-top: 50px !important;
}

strong {
    font-weight: bold;
}