/*--------------------------------------------------------------
# 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: #25242A;
    --theme-gravel: #44494F;
    --theme-heathered-grey: #BBAA8E;
    --theme-dawn-pink: #F0E8DD;
    --theme-dune: #3F3733;
    --theme-pine-cone: #6D5E56;
    --theme-pale-oyster: #9E887D;
    --theme-moon-mist: #E9D9D1;

    --theme-lite-orange: #F4AD97;
    --theme-lite-yellow: #F4D597;
    --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: #0E3C5E;
    --theme-orange: #EA9175;
    --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: var(--theme-baltic-sea);
    --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: #B9B9B9;
    --grey-icons: #A5A5A5;
    --grey-table: #F8F8F8;
    --grey-table-border: #EDEAEA;


}




/*:root {*/
/*    --container-size: 100%;*/
/*    --container-size-sm: 540px;*/
/*    --container-size-md: 720px;*/
/*    --container-size-lg: 960px;*/
/*    --container-size-xl: 1140px;*/
/*    --container-size-xxl: 1340px;*/
/*}*/
/*@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: 1400px) { :root { --container-size: var(--container-size-xxl); } }*/


: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: 1400px) { :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: 25px;
    --article-offset-sm: 50px;
    --article-offset-md: 75px;
    --article-offset-lg: 100px;




    --rounded: 10px;
    --rounded-md: 15px;
    --rounded-sm: 5px;
    --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: 2.5rem;
    --title-margin: 1.25rem;

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

    --form-column-padding: 30px;


    /*--article-last-type-margin: 2.25rem;*/




    /*--title-h1: 3rem;*/
    /*--title-h2: 2.5rem;*/
    /*--title-h3: 2rem;*/
    /*--title-h4: 1.75rem;*/
    /*--title-h5: 1.5rem;*/
    /*--title-h6: 1.25rem;*/




    /*--font-size-title-h1: 2.5rem;*/
    /*--font-size-title-h2: 1.7rem;*/
    /*--font-size-title-h3: 2rem;*/
    /*--font-size-title-h4: 1.25rem;*/


    /*--title-h1: 2em;*/
    /*--title-h2: 1.5em;*/
    /*--title-h3: 1.17em;*/
    /*--title-h4: 1em;*/
    /*--title-h5: 0.83em;*/
    /*--title-h6: 0.67em;*/



    --title-h1: 2rem;
    --title-h2: 1.5rem;
    --title-h3: 1.35rem;
    --title-h4: 1.2rem;
    --title-h5: 1.1rem;
    --title-h6: 1rem;



    --font-size-main-h1: 3rem;
    --font-size-main-h2: 2.5rem;
    --font-size-main-h3: 2.5rem;

    --font-size-title-h1: 2.5rem;
    --font-size-title-h2: 2rem;
    /*--font-size-title-h3: 1.75rem;*/
    --font-size-title-h3: 1.55rem;
    --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: 0.95rem;
    --font-size-nav: 1rem;
    --font-size-sm: 0.9rem;
    --font-size-xsl: 0.85rem;
    --font-size-xs: 0.8125rem;
    --font-size-bar: 0.875rem;


    --letter-spacing-nav: 0.02em;
    --letter-spacing-xs: 0.015em;
    --letter-spacing-sm: 0.02em;
    --letter-spacing: 0.03em;
    --letter-spacing-md: 0.12em;
    --letter-spacing-lg: 0.15em;
    --letter-spacing-bar: 0.035em;
    --letter-spacing-title: 0.01em;
    --letter-spacing-btn: 0.035em;






    /*--letter-spacing: 1px;*/
    /*--letter-spacing-md: 3px;*/
    /*--letter-spacing-bar: 0.035em;*/


    /*--letter-spacing: 0.05rem;*/
    /*--letter-spacing-md: 0.1rem;*/
    /*--letter-spacing-lg: 0.15rem;*/
    /*--letter-spacing-bar: 0.035rem;*/


}











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

        /*--title-h1: 2.25rem;*/
        /*--title-h5: 1.25rem;*/
        /*--title-h6: 1.2rem;*/

    }
}

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

        --form-column-padding: 20px;

        --title-banner: 2.25rem;

        /*--title-h1: 2.15rem;*/
        /*--title-h2: 1.85rem;*/

    }
}

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

        --form-column-padding: 15px;

        --article-offset: 25px;
        --article-offset-sm: 30px;
        --article-offset-md: 50px;
        --article-offset-lg: 65px;

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


        --title-margin: 15px;
        --title-banner: 2rem;


        --font-size-subtitle-faq: 1.125rem;
        --font-size-subtitle-md: 1.25rem;
        --font-size-subtitle: 1.1rem;




        /*--font-size-main-h1: 2.25rem;*/
        /*--font-size-main-h2: 2rem;*/

        /*--font-size-title-h1: 2rem;*/
        /*--font-size-title-h2: 1.85rem;*/



        /*--font-size-main-h1: 2.25rem;*/
        /*--font-size-main-h2: 1.85rem;*/

        /*--font-size-title-h1: 2rem;*/
        /*--font-size-title-h2: 1.65rem;*/




        --font-size-main-h1: 2rem;
        --font-size-main-h2: 1.85rem;

        --font-size-title-h1: 2rem;
        --font-size-title-h2: 1.65rem;





    }
}

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

        --container-padding: 15px;
        --form-column-padding: 15px;
        --title-banner: 1.85rem;

        --font-size-theme: 0.9375rem;


        --font-size-subtitle-faq: 1rem;
        --font-size-subtitle-md: 1.15rem;
        --font-size-subtitle: 1rem;


        /*--font-size-subtitle: 0.9375rem;*/

        /*--font-size-main-h1: 2rem;*/
        /*--font-size-main-h2: 1.75rem;*/

        /*--font-size-title-h1: 2rem;*/
        /*--font-size-title-h2: 1.75rem;*/





        --font-size-main-h1: 1.75rem;
        --font-size-main-h2: 1.65rem;

        --font-size-title-h1: 1.75rem;
        --font-size-title-h2: 1.375rem;







        /*--title-h1: 2.25rem;*/
        /*--title-h2: 2rem;*/
        /*--title-h3: 1.75em;*/
        /*--title-h4: 1.5rem;*/
        /*--title-h5: 1.25rem;*/



        /*--title-h1: 1.85rem;*/
        /*--title-h2: 1.65rem;*/
        /*--title-h3: 1.35rem;*/
        /*--title-h4: 1.3rem;*/
        /*--title-h5: 1.2rem;*/
        /*--title-h6: 1.1rem;*/

    }
}

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

        /*--title-h1: 1.65rem;*/
        /*--title-h2: 1.55rem;*/
        /*--title-h3: 1.35rem;*/

    }
}








body {
    font-size: 1rem;
    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: 600;
    line-height: 1.1em;
    margin: 0;
}

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

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

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

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






/*--------------------------------------------------------------
# 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-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);
}





/*--------------------------------------------------------------
# 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-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;
}