:root {
/* ------- colors, background-colors -------- */
    --bg-dark: #162533;
    --bg-dark-dimmed: #101D28E0;
    --bg-dark-transparent: #101D2866;
    --bg-light: #0299fb;
    --dmf-text-dark: #0F3759;
    --dmf-blue: #0299FB;
    --dmf-blue-hover: #51BAFF;
    --dmf-outlined-btn-border: #00B3F0;
    --dmf-text-dark-grey: #485D6A;
    --dmf-light-grey: #EFF3F5;
    --dmf-bg-grey-secondary: #E5EDF1;
    --dmf-grey-color-secondary: #BACAD3;
    --dmf-placeholder-input: #7B8A94;
    --dmf-orange: #FBB049;
    --dmf-orange-hover: #e08300;
    --dmf-orange-focus: #c77d15;
    --box-link-border-color: rgba(0,0,0,0.1);
    --border-color-light-grey: #E1E8EC;

/* -------- transitions ---------- */
    --cubic-bezier: cubic-bezier(.45,.13,.33,.97);
    --slow-transition: 500ms;

/* -------- distance units ------- */
    --2button-gap: calc(2 * var(--unit-viewport-scaling) * var(--dmf-distance-unit) );
    --hero-default-padding-top: calc(22 * var(--unit-viewport-scaling) * var(--dmf-distance-unit) );
    --hero-default-padding-bottom: calc(23 * var(--unit-viewport-scaling) * var(--dmf-distance-unit) );
    --hero-padding-top-with-info-highlights: calc(32 * var(--unit-viewport-scaling) * var(--dmf-distance-unit) );
    --hero-padding-bottom-with-info-highlights: calc(16 * var(--unit-viewport-scaling) * var(--dmf-distance-unit) );
    --hero-infohighlights-gap:  calc(6 * var(--unit-viewport-scaling) * var(--dmf-distance-unit) );
    --hero-infohighlights-margin-top:  calc(18 * var(--unit-viewport-scaling) * var(--dmf-distance-unit) );
    --dmf-distance-unit: 8px;
    --unit-viewport-scaling: 0.5;
    --default-header-margin: calc(4 * var(--unit-viewport-scaling) * var(--dmf-distance-unit) );
    --paragraph-margin: calc(3 * var(--unit-viewport-scaling) * var(--dmf-distance-unit) );
    --standard-button-margin: calc(4 * var(--unit-viewport-scaling) * var(--dmf-distance-unit) );
    --text-container-img-spacing: calc(8 * var(--unit-viewport-scaling) * var(--dmf-distance-unit) );
    --text-container-inset-spacing: calc(3 * var(--dmf-distance-unit) );
    --section-margin: calc(9 * var(--dmf-distance-unit));
    --section-padding-with-bg: calc(12 * var(--unit-viewport-scaling) * var(--dmf-distance-unit) );
    --section-horizontal-padding: 14px;
    --accordion-item-padding: calc(2 * var(--unit-viewport-scaling) * var(--dmf-distance-unit) );
    --calculator-form-padding: calc(6 * var(--unit-viewport-scaling) * var(--dmf-distance-unit) );
    --calculator-margin-top: calc(6 * var(--unit-viewport-scaling) * var(--dmf-distance-unit) );
    --calculator-gap: calc(10 * var(--unit-viewport-scaling) * var(--dmf-distance-unit) );
    --calculator-output-margin: calc(1.5 * var(--dmf-distance-unit) );
    --transparent-image-block-padding: calc(9 * var(--unit-viewport-scaling) * var(--dmf-distance-unit)) calc(14 * var(--unit-viewport-scaling) * var(--dmf-distance-unit));
    --divider-sm: calc(1 * var(--dmf-distance-unit) );
    --divider-md: calc(2 * var(--dmf-distance-unit) );
    --divider-lg: calc(3 * var(--dmf-distance-unit) );
    --divider-xl: calc(4 * var(--dmf-distance-unit) );
    
    /* --- box grid --- */
    --box-grid-gap: calc( 3 * var(--dmf-distance-unit));
    --2box-grid-gap: calc( 5 * var(--unit-viewport-scaling) * var(--dmf-distance-unit));
    --ctabox-padding-default-horizontal: calc(7 * var(--unit-viewport-scaling) * var(--dmf-distance-unit) );
    --ctabox-padding-default-vertical: calc(6 * var(--unit-viewport-scaling) * var(--dmf-distance-unit) );
    --ctabox-padding-2boxes: calc(7 * var(--unit-viewport-scaling) * var(--dmf-distance-unit) );
    --infobox-padding-horizontal: calc(4 * var(--unit-viewport-scaling) * var(--dmf-distance-unit) );
    --infobox-padding-vertical: calc(6 * var(--unit-viewport-scaling) * var(--dmf-distance-unit) );
    --box-icon-bottom-margin: calc(3 * var(--unit-viewport-scaling) * var(--dmf-distance-unit) );
    --box-title-padding: calc(2 * var(--dmf-distance-unit));
    --2box-title-padding: calc( 3 * var(--unit-viewport-scaling) * var(--dmf-distance-unit));
    --box-link-top-padding: calc(2 * var(--unit-viewport-scaling) * var(--dmf-distance-unit) );
    --box-link-top-margin: calc(4 * var(--unit-viewport-scaling) * var(--dmf-distance-unit) );
    --2box-link-top-padding:calc(3 * var(--unit-viewport-scaling) * var(--dmf-distance-unit) );

    /* ------- border-radius variables ---------- */
    --border-radius-section: 8px;
    --border-radius-row: 8px;
    --border-radius-image: 8px;
    --border-radius-button: 6px;
    --border-radius-box: 8px;
    --border-radius-input: 6px;

/* ------- bg-patter variables -------- */
    /* --bg-patter-size: 1478px 1431px; */
    --bg-patter-size: 1300px 1280px;

/*  --------- old, gonna be replaces in time. Is in use in the footer and header -------- */
    --color-light: #F7F9FA;
    --color-dark: #0f3759;
    /* ---------- Font families ------------- */
    --font-fam-body: "Plus Jakarta Sans",-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --font-fam-zilla-slab: 'Zilla Slab',Georgia,"Times New Roman",serif;
}
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
body {
    font-size: 13px;
    font-family: var(--font-fam-body);
}


::-moz-selection { /* Code for Firefox */
    background: var(--dmf-blue);
    color: var(--dmf-text-dark);
}

::selection {
    background: var(--dmf-blue);
    color: var(--dmf-text-dark);
}

@media (min-width: 768px) {
    :root {
        --unit-viewport-scaling: 0.75;
        --section-margin: calc(12 * var(--dmf-distance-unit));
        --text-container-inset-spacing: calc(4 * var(--dmf-distance-unit) );
        --calculator-output-margin: calc(2 * var(--dmf-distance-unit) );
        --section-horizontal-padding: 64px;
    }

    body {
        font-size: 14px;
    }
    h2, .h2 {
        font-size: 3em;
    }
    h3, .h3 {
        font-size: 2.5em;
    }
    h4, .h4 {
        font-size: 2em;
    }
    h5, .h5 {
        font-size: 1.5em;
    }
    h6, .h6 {
        font-size: 0.8em;
    }
}

@media (min-width: 981px) {
    :root {
        --unit-viewport-scaling: 1;
        --section-margin: calc(15 * var(--dmf-distance-unit));
        --text-container-inset-spacing: calc(6 * var(--dmf-distance-unit) );
    }
}

h1, .h1 {
    font-family: var(--font-fam-zilla-slab);
    font-weight: 400;
    color: var(--dmf-text-dark);
    font-size: 48px;
    line-height: 1.16em;
}
h2,h3,h4,h5,h6,.h2,.h3,.h4,.h5,.h6 {
    font-weight: 400;
    line-height: 1.1em;
    font-family: var(--font-fam-zilla-slab);
    color: var(--dmf-text-dark);
}

h2, .h2 {
    font-size: 2rem;
}
h3, .h3 {
    font-size: 1.75rem;
}
h4, .h4 {
    font-size: 1.5rem;
}
h5, .h5 {
    font-size: 1.2rem;
}
h6, .h6 {
    font-size: 0.8rem;
}

@media (max-width: 767px) {
    h1, .h1 {
        font-size: 40px;
    }   
}

.title-quote {
    font-family: var(--font-fam-zilla-slab);
    font-style: italic;
    font-size: 2.25em;
    font-weight: 500;
    line-height: 1.2;
}

.ph.icon {
    transition: background-color 0.23s ease-in-out, transform 0.23s ease-in-out;
    background-color: var(--dmf-blue);
    width: inherit;
    height: inherit;
}

.body-quote {
    font-style: italic;
}

button {
    font: inherit;
    color: inherit;
    line-height: inherit;
    border: initial;
    outline: initial;
    background-color: inherit;
}

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

a:focus {
    outline: none;
}

p {
    color: var(--dmf-text-dark-grey);
    line-height: 24px;
}

div {
    color: var(--dmf-text-dark-grey);
    line-height: 24px;
}

strong {
    font: inherit;
    font-weight: 600;
}

em {
    font: inherit;
    font-style: italic;
}

blockquote {
    font-style: italic;
}

q {
    font-style: italic;
}

    
q::before,
q::after {
    content: '';
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}
input[type="radio"],
input[type="radio"]:checked,
input[type="radio"]:focus,
input[type="radio"]:hover,
input[type="radio"]:active {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.bg-dark * {
    color: var(--color-light);
}