@font-face {
    font-family: 'Visby CF';
    src: url('../fonts/VisbyCF-BoldOblique.woff2') format('woff2'),
        url('../fonts/VisbyCF-BoldOblique.woff') format('woff');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Visby CF';
    src: url('../fonts/VisbyCF-Bold.woff2') format('woff2'),
        url('../fonts/VisbyCF-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Visby CF';
    src: url('../fonts/VisbyCF-HeavyOblique.woff2') format('woff2'),
        url('../fonts/VisbyCF-HeavyOblique.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Visby CF';
    src: url('../fonts/VisbyCF-Heavy.woff2') format('woff2'),
        url('../fonts/VisbyCF-Heavy.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Visby CF';
    src: url('../fonts/VisbyCF-Medium.woff2') format('woff2'),
        url('../fonts/VisbyCF-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Visby CF Demi';
    src: url('../fonts/VisbyCF-DemiBold.woff2') format('woff2'),
        url('../fonts/VisbyCF-DemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Visby CF';
    src: url('../fonts/VisbyCF-MediumOblique.woff2') format('woff2'),
        url('../fonts/VisbyCF-MediumOblique.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Visby CF Demi';
    src: url('../fonts/VisbyCF-DemiBoldOblique.woff2') format('woff2'),
        url('../fonts/VisbyCF-DemiBoldOblique.woff') format('woff');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}
:root{
    /* typography */
    --html-size: 16px;

    --body-font: 'Visby CF', sans-serif;
    --body-size: 1.125rem;
    --body-lineheight: calc( var(--body-size) + .75rem);
    --body-weight: 500;
    
    --title-font: 'Visby CF', sans-serif;
    --title-weight: 700;

    --h1-font-size: 3.75rem;
    --h1-line-height: calc(var(--h1-font-size) + .75rem);

    --h2-font-size: 2.1875rem;
    --h2-line-height: calc(var(--h2-font-size) + .4375rem);

    --h3-font-size: 1.5rem;
    --h3-line-height: 1.875rem;

    --h4-font-size: 1.25rem;
    --h4-line-height: 1.875rem;

    --h5-font-size: 1.125rem;
    --h5-line-height: 1.875rem;

    --h6-font-size: 1rem;
    --h6-line-height: 1.5rem;

    --giant-font-size: var(--h1-font-size);
    --giant-line-height: var(--h1-line-height);

    --semigiant-font-size: var(--h2-font-size);
    --semigiant-line-height: var(--h2-line-height);

    --huge-font-size: 2rem;
    --huge-line-height: calc(var(--huge-font-size) + .875rem);

    --large-font-size: var(--h3-font-size);
    --large-line-height: var(--h3-line-height);

    --larger-font-size: 1.5625rem;
    --larger-line-height: 2.125rem;

    --semilarge-font-size: var(--h4-font-size);
    --semilarge-line-height: var(--h4-line-height);

    --medium-font-size: var(--h5-font-size);
    --medium-line-height: var(--h5-line-height);

    --small-font-size: .875rem;
    --small-line-height: calc(var(--small-font-size) + .125rem);
    
    /* colors */
    --primary-color: #00669e;

    --secondary-color: #444;

    
    --light-gray-h: 164;
    --light-gray-s: 17%;
    --light-gray-l: 83%;
    --light-gray-color: hsl(var(--light-gray-h), var(--light-gray-s), var(--light-gray-l));

    --text-h: 0;
    --text-s: 0%;
    --text-l: 13%;
    --text-color: hsl(var(--text-h), var(--text-s), var(--text-l));
    --text-color-light: hsl(var(--text-h), var(--text-s), 50%);

    --input-color: var(--text-color);
    --placeholder-color: var(--text-color);
    --input-border: hsl(0, 0%, 75%);

    --body-h: 0;
    --body-s: 0%;
    --body-l: 100%;
    --body-color: hsl(var(--body-h), var(--body-s), var(--body-l));

    --wrapper-h: 0;
    --wrapper-s: 0%;
    --wrapper-l: 100%;
    --wrapper-color: hsl(var(--wrapper-h), var(--wrapper-s), var(--wrapper-l));

    --light-color-h: 164; 
    --light-color-s: 17%; 
    --light-color-l: 83%;
    --light-color: hsl(var(--light-color-h), var(--light-color-s), var(--light-color-l));

    --dark-color: hsl(0, 0%, 13%);
    --white-color: hsl(0, 0%, 100%);

    --shadow-o: .16;
    --shadow-color: hsla(var(--primary-h), var(--primary-s), var(--primary-l), var(--shadow-o));

    /* buttons */
    --btn-font-size: 1.125rem;
    --btn-lineheight: 1.375rem;
    --btn-font-weight: 500;
    --btn-radius: .3125rem;
    --btn-min-width: unset;
    --btn-border-width: 0;
    --btn-padding-t: .625rem;
    --btn-padding-r: 1.25rem;
    --btn-padding-b: var(--btn-padding-t);
    --btn-padding-l: var(--btn-padding-r);

    --btn-primary-bg: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
    --btn-primary-color: hsl(0, 0%, 100%);
    --btn-primary-outline-color: hsl(var(--primary-h), var(--primary-s), var(--primary-l));

    --btn-secondary-bg: hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l));
    --btn-secondary-color: #fff;
    --btn-secondary-outline-color: hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l));

    --btn-gray-bg: hsl(var(--light-color-h), var(--light-color-s), var(--light-color-l));
    --btn-gray-color: var(--btn-primary-bg);
    --btn-gray-outline-color: var(--btn-gray-bg);

    --primary-grad-old: rgb(0,76,74);
    --primary-grad: linear-gradient(#51b4e6, #00669e);
    --secondary-grad-old: #444;
    --secondary-grad: #444;

    /* margins */
    --mb-1: 1.25rem;
    --mb-2: 1.875rem;
    --mb-heading: 2.5rem;
    --mb-block: 5rem;

    /* heights */
    --header-height: 4.375rem;

    /* grid */
    --grid-margin: -.9375rem;
    --grid-padding: .9375rem;
    --grid-offset: calc( var(--grid-padding) * 2 );

    --grid-base-narrow-width: 60.625rem;
    --grid-narrow-width: calc( var(--grid-base-narrow-width) + var(--grid-offset) );

    --grid-base-width: 73.125rem;
    --grid-width: calc( var(--grid-base-width) + var(--grid-offset) );

    --grid-base-width-wide: 90rem;
    --grid-width-wide: calc( var(--grid-base-width-wide) + var(--grid-offset) );

    --grid-base-width-full: 107.5rem;
    --grid-width-full: calc( var(--grid-base-width-full) + var(--grid-offset) );

    --grid-width-max: 120rem;
}

.has-theme-primary-color{color: var(--primary-color)}
.has-theme-secondary-color{color: var(--secondary-color)}
.has-theme-primary-gradient{background: var(--primary-grad-old); background: var(--primary-grad); color: #fff}
.has-theme-secondary-gradient{background: var(--secondary-grad-old); background: var(--secondary-grad); color: #fff}

@media (min-width: 1200px){
    :root{
        --header-height: 6.25rem;
    }
}
#ps2id-dummy-offset{height: calc( var(--header-height) + var(--grid-padding) )}

@media (max-width: 1199px){
    :root{--html-size: .875rem}
}
@media (max-width: 767px){
	:root{
		--h1-font-size: 2.5rem;
		--h2-font-size: 1.95rem;

		--h3-font-size: 1.35rem;
		--h3-line-height: 1.675rem;
	}
}
@media (max-width: 568px){
	:root{
		--h1-font-size: 2.15rem;
		--h2-font-size: 1.5rem
	}
}