html {
	scroll-padding-top : 1rem;
	scroll-behavior    : smooth;
}
:root {
    --light-gray  : #E6E6E6;
    --medium-gray : #CACACA;
    --dark-gray   : #8A8A8A;
    --black       : #0A0A0A;
    --black-color : var(--black);
    --white       : #FEFEFE;
    --white-color : var(--white);

    --primary   : #008CBA;
    --secondary : #E7E7E7;
    --success   : #43AC6A;
    --warning   : #F08A24;
    --alert     : #F04124;

    --primary-contrast   : #FFFFFF;
    --secondary-contrast : #333333;
    --success-contrast   : #FEFEFE;
    --warning-contrast   : #FEFEFE;
    --alert-contrast     : #FEFEFE;

    --primary-dark   : #006E9C;
    --secondary-dark : #C9C9C9;
    --success-dark   : #258E4C;
    --warning-dark   : #D26C06;
    --alert-dark     : #D22306;

    --header-color     : #222222;
    --subheader-color  : #8A8A8A;
    --small-color      : #CACACA;
    --text-color       : #222222;
    --link-color       : #008CBA;
    --link-color-hover : #006688;

    --selection-background : var(--primary);
    --selection-text       : var(--primary-contrast);

    --link-decoration       : False;
    --link-decoration-hover : False;

    --overlay-color : #000000;

    --radius : 3px;

    --small-gutter  : 1.25rem;
    --medium-gutter : 2rem;
    --large-gutter  : 2rem;

    /*  */
	--site-width : calc(600rem/16);
    /*  */
}
::selection {
    background : var(--selection-background);
    color      : var(--selection-text);
}
.alt {
    --header-color          : #FFFFFF;
    --subheader-color       : #E6E6E6;
    --small-color           : #CACACA;
    --text-color            : #FFFFFF;
    --link-color            : #008CBA;
    --link-color-hover      : #006688;
    --link-decoration       : False;
    --link-decoration-hover : False;
}
.grid-container {
	max-width : var(--site-width);
}
.radius {
	border-radius : var(--radius);
}

body { font-size: calc(16rem/16); }
h1,.h1 { font-size: calc(24rem/16); }
h2,.h2 { font-size: calc(20rem/16); }
h3,.h3 { font-size: calc(19rem/16); }
h4,.h4 { font-size: calc(18rem/16); }
h5,.h5 { font-size: calc(17rem/16); }
h6,.h6 { font-size: calc(16rem/16); }
small { font-size: 40;}

.button {font-size: calc(16rem/16)}
.button.tiny {font-size: calc(10rem/16)}
.button.small {font-size: calc(12rem/16)}
.button.large {font-size: calc(20rem/16)}

@media only screen and (min-width: 40em) {
	body { font-size: calc(16rem/16); }
	h1,.h1 { font-size: calc(48rem/16); }
	h2,.h2 { font-size: calc(40rem/16); }
	h3,.h3 { font-size: calc(31rem/16); }
	h4,.h4 { font-size: calc(25rem/16); }
	h5,.h5 { font-size: calc(20rem/16); }
	h6,.h6 { font-size: calc(16rem/16); }
	small { font-size: 30; }
}
@media only screen and (min-width: 64em) {
	body { font-size: calc(16rem/16); }
	h1,.h1 { font-size: calc(48rem/16); }
	h2,.h2 { font-size: calc(40rem/16); }
	h3,.h3 { font-size: calc(31rem/16); }
	h4,.h4 { font-size: calc(25rem/16); }
	h5,.h5 { font-size: calc(20rem/16); }
	h6,.h6 { font-size: calc(16rem/16); }
	small { font-size: 30;}
}
a {
    color           : var(--link-color);
    text-decoration : var(--link-decoration);
}
a:hover, a:focus {
    color           : var(--link-color-hover);
    text-decoration : var(--link-decoration-hover);
}

.menu a {
    color      : var(--menu-link-color);
    background : var(--menu-bg-color);
}
.menu a:hover {
    color      : var(--menu-link-color-hover);
    /* background : var(--menu-bg-color-hover); */
}

h1,h2,h3,h4,h5,h6 {
    color : var(--header-color);
}
small {
    color : var(--small-color);
}
.subheader {
    color : var(--subheader-color);
}
.text ul,.text ol {
    list-style-position : outside;
}
.text>ul,
.text>ol,
.text .mez>div>ul,
.text .mez>div>ol {
    margin-left : True;
}
.text ul {
    list-style-type : disc;
}
.text ul ul,
.text ol ul {
    list-style-type : circle;
}
.text ol {
    list-style-type : decimal;
}
.text ol ol,
.text ul ol {
    list-style-type : lower-alpha;
}
.radius,
.radius:before,
.radius:after {
    border-radius : calc(3rem/16);
}

body {
    /*  */

    /*  */

    /*  */

     /*  */

    /*  */
}
/*  */

/*  */