@charset "UTF-8";

/*! Skelet. v3.1.6 | MIT License | (c) 2020 Sēlekkt. | https://Selekkt.dk/skelet/ */
*, html, body { -webkit-box-sizing: border-box; box-sizing: border-box; }

/* normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html{line-height:1.15;-webkit-text-size-adjust:100%}
body{margin:0}
main{display:block}
h1{font-size:2em;margin:.67em 0}
hr{-webkit-box-sizing:content-box;box-sizing:content-box;overflow:visible} /* chrome has problems with <hr size=""> if height:0; (so it was removed) */
pre{font-family:monospace,monospace;font-size:1em}
a{background-color:transparent}
abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}
b,strong{font-weight:bolder}
code,kbd,samp{font-family:monospace,monospace;font-size:1em}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub{bottom:-.25em}
sup{top:-.5em}
img{border-style:none}
button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}
button,input{overflow:visible}
button,select{text-transform:none}
button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}
button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}
button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}
fieldset{padding:.35em .75em .625em}
legend{-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}
progress{vertical-align:baseline}
textarea{overflow:auto}
[type="checkbox"],[type="radio"]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}
[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}
[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}
[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
details{display:block}
summary{display:list-item}

/* ------------------
  css variables
------------------ */
/*** Defaults */
:root {
    /* Typography */
    --fontFamily: Inter, "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, -system-ui, system-ui, sans-serif;
    --fontFamilyVar: Inter var, "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, -system-ui, system-ui, sans-serif;
    
    --fontSize: 1.6rem;
    --fontLine: 1.6;
    --fontWeight: 400;

    --h1Size: 5.0rem;
    --h2Size: 4.2rem;
    --h3Size: 3.6rem;
    --h4Size: 3.0rem;
    --h5Size: 2.4rem;
    --h6Size: 1.8rem;

    --hWeight: 600;
    
    /* Line height of Headins */
    --hLine: 1.5;
    --h1Line: var(--hLine);
    --h2Line: var(--hLine);
    --h3Line: var(--hLine);
    --h4Line: var(--hLine);
    --h5Line: var(--hLine);
    --h6Line: var(--hLine);

    --padding: 1rem;
    --margin: 0.5rem;
    --radius: 0.5rem;
    --borderWidth: 1px;
    --borderStyle: solid;
    --hrMargin: calc(var(--margin) * 5);

    --boxPadding: var(--padding);
    --boxMargin: var(--margin);
    --boxRadius: var(--radius);
    --boxBorderWidth: var(--borderWidth);
    --boxBorderStyle: var(--borderStyle);
    --boxFontSize: var(--fontSize);

    --buttonPadding: var(--padding);
    --buttonMargin: var(--margin);
    --buttonRadius: var(--radius);
    --buttonBorderWidth: var(--borderWidth);
    --buttonBorderStyle: var(--borderStyle);
    --buttonFontSize: var(--fontSize);

    /* grids */
    --columnGap: 1rem;
    --rowGap: 2rem;

/** Colors */
    /* These colors DO NOT 
        change in Dark mode */
    --primary: #007FFF;
    --green: #34C84A;
    --yellow: #FDBC40;
    --red: #FC615D;
    --white: #FFFFFF;
    --black: #000000;
    --light: #efefef;
    --dark: #181818;
    --shadow: rgba(10, 10, 10, 0.1);

    --linkColor: var(--primary);
    --linkHover: #3298ff;

    /* @for input/textarea/tables etc. */
    --boxBorderActive: var(--primary);

    /** These colors
      DO change in dark mode */
    --bgColor: #FFFFFF;
    --color: #000000;
    --colorInverse: #FFFFFF;
    --colorHeadings: var(--color);

    /* @for input/textarea/tables etc. */
    --boxColor: var(--color);
    --boxBorderColor: #E1E1E1;
    --boxBorderHover: #BABABA;
    --boxBgColor: #fefefe;
    --boxPlaceholderColor: var(--color); /* placeholder color */

    /* @for buttons */
    --buttonColor: var(--color);
    --buttonBorderColor: var(--boxBorderColor);
    --buttonBorderHover: var(--boxBorderHover);

    --codeColor: #0000ff;
    --codeBgColor: #f8f8f8;

    --hrColor: rgba(255, 255, 255, 0);
}

/*** Dark Mode */
[dark-mode], [data-mode="dark"],
#dark-mode, .dark-mode {
    --bgColor: #000000;
    --color: #FFFFFF;
    --colorInverse: #000000;
    --colorHeadings: var(--color);
    --boxPlaceholderColor: var(--color);

    --boxColor: var(--color);
    --boxBorderColor: #232323;
    --boxBorderHover: #444444;
    --boxBgColor: #111111;
    --boxPlaceholderColor: var(--color);

    --buttonColor: var(--color);
    --buttonBorderColor: var(--boxBorderColor);
    --buttonBorderHover: var(--boxBorderHover);

    --codeColor: #00F900;
    --codeBgColor: #111111;

    --hrColor: rgba(0, 0, 0, 0);
}

/* ------------------
  more resets
------------------ */
*:focus { outline: none; }
:not(pre) > code, :not(pre) > kbd, :not(pre) > samp { font-size: 1.2rem; font-family: Consolas, monospace, serif; white-space: nowrap; }
canvas, img, svg, video { vertical-align: middle; max-width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; }
dt { font-weight: bold; }
dd { display: block; -webkit-margin-start: 4rem; margin-inline-start: 4rem; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
template {display:none!important}
[hidden] {display:none!important}
iframe { border: none!important; }

/* ------------------
  basics
------------------ */
html { height: 100%; font-size: 62.5%; scroll-behavior: smooth; }

body {
    background-color: var(--bgColor);
    color: var(--color);
    font-size: var(--fontSize);
    line-height: var(--fontLine);
    font-weight: var(--fontWeight);
    font-family: var(--fontFamily);
}

#app { display: flex; min-height: 100vh; flex-direction: column; }
main { flex: 1; }

/* ------------------
  typography
------------------ */
h1, h2, h3, h4, h5, h6 { color: var(--colorHeadings); margin-top: 0; margin-bottom: 0.7rem; font-size: var(--hSize); font-weight: var(--hWeight); line-height: var(--hLine); }

h1 { --hSize: var(--h1Size); --hLine: var(--h1Line); }
h2 { --hSize: var(--h2Size); --hLine: var(--h2Line); }
h3 { --hSize: var(--h3Size); --hLine: var(--h3Line); }
h4 { --hSize: var(--h4Size); --hLine: var(--h4Line); }
h5 { --hSize: var(--h5Size); --hLine: var(--h5Line); }
h6 { --hSize: var(--h6Size); --hLine: var(--h6Line); }

@media (max-width: 600px) {
    :root {
        --h1Size: 4.0rem;
        --h2Size: 3.6rem;
        --h3Size: 3.0rem;
        --h4Size: 2.4rem;
        --h5Size: 2.1rem;
        --h6Size: 1.8rem;

        --hLine: 1.2;
        --h1Line: var(--hLine);
        --h2Line: var(--hLine);
        --h3Line: var(--hLine);
        --h4Line: var(--hLine);
        --h5Line: var(--hLine);
        --h6Line: var(--hLine);
    }
}

p { margin-top: 0; margin-bottom: 0.5rem; }

blockquote {
    font-family: "Times New Roman", Times, serif;
    font-size: 2rem;
    line-height: 1.7;
    padding: 2rem;
    max-width: 90%;
    margin: 2rem auto;
}

a:not(.button) { color: var(--linkColor); cursor: pointer; text-decoration: none; }
a:not(.button):hover { color: var(--linkHover); }
a:not(.button):active, a:not(.button):hover { outline: 0; }

[flow-col], [flow-col-s], [flow-col-l] { -webkit-column-count: var(--column-count); -moz-column-count: var(--column-count); column-count: var(--column-count); -webkit-column-gap: var(--columnGap); -moz-column-gap: var(--columnGap); column-gap: var(--columnGap); -webkit-column-fill: balance; -moz-column-fill: balance; column-fill: balance }

[flow-col="1"] { --column-count: 1 }
[flow-col="2"] { --column-count: 2 }
[flow-col="3"] { --column-count: 3 }
[flow-col="4"] { --column-count: 4 }
[flow-col="5"] { --column-count: 5 }
[flow-col="6"] { --column-count: 6 }
[flow-col="7"] { --column-count: 7 }
[flow-col="8"] { --column-count: 8 }

@media (max-width: 600px) {
    [flow-col-s="1"] { --column-count: 1 }
    [flow-col-s="2"] { --column-count: 2 }
    [flow-col-s="3"] { --column-count: 3 }
    [flow-col-s="4"] { --column-count: 4 }
    [flow-col-s="5"] { --column-count: 5 }
    [flow-col-s="6"] { --column-count: 6 }
    [flow-col-s="7"] { --column-count: 7 }
    [flow-col-s="8"] { --column-count: 8 }
}

@media (min-width: 1599px) {
    [flow-col-l="1"] { --column-count: 1 }
    [flow-col-l="2"] { --column-count: 2 }
    [flow-col-l="3"] { --column-count: 3 }
    [flow-col-l="4"] { --column-count: 4 }
    [flow-col-l="5"] { --column-count: 5 }
    [flow-col-l="6"] { --column-count: 6 }
    [flow-col-l="7"] { --column-count: 7 }
    [flow-col-l="8"] { --column-count: 8 }
}

code {
    padding: calc(var(--padding) - 0.5rem);
    margin: var(--margin);
    font-size: 90%;
    white-space: nowrap;
    vertical-align: middle;
    background-color: var(--codeBgColor);
    border: 1px solid var(--boxBorderColor);
    color: var(--codeColor);
    border-radius: var(--radius);
    overflow: auto;
}

pre > code { display: block; padding: calc(var(--padding) * 1); white-space: pre; }

/* ------------------
  utilities
------------------ */
.clearfix:after, .container:after { content: ""; display: table; clear: both; }

.fullwidth { width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; }
.fullwidth-max { max-width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; }

.block { display: block; }
.inline { display: inline-block; margin: 0; }
.center { display: block; text-align: center; margin: 0 auto; }

.nowrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.text-start { text-align: start; }
.text-center { text-align: center; }
.text-end { text-align: end; }
.text-justify { text-align: justify; }

.float-right { float: right; }
.float-left { float: left; }
.float-none { float: none; }

.sticky { position: -webkit-sticky; position: sticky; top: 1rem; }
.sticky-bottom { position: -webkit-sticky; position: sticky; bottom: 1rem; }
.sticky-none { position: inherit; }

@media only screen and (max-width: 600px) { 
    .fullwidth-s { width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; }
    .fullwidth-max-s { max-width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; }

    .block-s { display: block; }
    .inline-s { display: inline-block; margin: 0; }
    .center-s { display: block; text-align: center; margin: 0 auto; }

    .nowrap-s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .text-start-s { text-align: start; }
    .text-center-s { text-align: center; }
    .text-end-s { text-align: end; }
    .text-justify-s { text-align: justify; }

    .float-right-s { float: right; }
    .float-left-s { float: left; }
    .float-none-s { float: none; }

    .sticky-s { position: -webkit-sticky; position: sticky; top: 0; }
    .sticky-bottom-s { position: -webkit-sticky; position: sticky; bottom: 0 }
    .sticky-none-s { position: inherit; }
}

@media only screen and (min-width: 1599px) { 
    .fullwidth-l { width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; }
    .fullwidth-max-l { max-width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; }

    .block-l { display: block; }
    .inline-l { display: inline-block; margin: 0; }
    .center-l { display: block; text-align: center; margin: 0 auto; }

    .nowrap-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .text-start-l { text-align: start; }
    .text-center-l { text-align: center; }
    .text-end-l { text-align: end; }
    .text-justify-l { text-align: justify; }

    .float-right-l { float: right; }
    .float-left-l { float: left; }
    .float-none-l { float: none; }

    .sticky-l { position: -webkit-sticky; position: sticky; top: 0; }
    .sticky-bottom-l { position: -webkit-sticky; position: sticky; bottom: 0 }
    .sticky-none-l { position: inherit; }
}

[class^="space"] { display: block; width: 100%; margin: var(--spacer, 3rem) auto; }
.space  { --spacer: 3rem; }
.space1 { --spacer: 5rem; }
.space2 { --spacer: 7rem; }
.space3 { --spacer: 9rem; }
.space4 { --spacer: 11rem; }
.space5 { --spacer: 13rem; }

/* Vertical and Horizontal align :: you need to create a parent container to which the object itself will be aligned. */
.center-axyz, .center-axys { display: flex; align-items: center; justify-content: center; }
.center-axyz.full, .center-axys.full { height: 100vh; width: 100%; }
@media only screen and (max-width: 600px) { .center-axyz-s, .center-axys-s { display: flex; align-items: center; justify-content: center; } .center-axyz-s.full-s, .center-axys-s.full-s  { height: 100vh; width: 100%; } }
@media only screen and (min-width: 1599px) { .center-axyz-l, .center-axys-l { display: flex; align-items: center; justify-content: center; } .center-axyz-l.full-l, .center-axys-l.full-l { height: 100vh; width: 100%; } }

.mob-scroller { display: flex; flex-wrap: nowrap; overflow-x: auto; width: 100%; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }
.mob-scroller::-webkit-scrollbar { display: none; }

@media only screen and (max-width: 600px) { .large-only, .only-large  { display: none!important; } }
@media only screen and (min-width: 601px) { .small-only, .only-small  { display: none!important; } }

/* ------------------
  tooltips
------------------ */
button[data-tooltip] { overflow: visible; }
[data-tooltip] { position: relative; cursor: pointer;  }

[data-tooltip]:after {
    content: attr(data-tooltip);
    opacity: 0;
    pointer-events: none;
    -webkit-transition: all 0.18s ease-in-out;
    transition: all 0.18s ease-in-out;
    font-size: 12px!important;
    text-transform: none;
    font-weight: 400;
    letter-spacing: 0.05rem;
    color: var(--white);
    white-space: nowrap;
    background-color: var(--dark);
    border-radius: var(--radius);
    padding: var(--padding);
    position: absolute;
    z-index: 10; 
}

[data-tooltip]:hover:after, [data-tooltip][data-tooltip-visible]:after { opacity: 1; pointer-events: auto; }

[data-tooltip][data-tooltip-break]:after { white-space: pre; }
[data-tooltip][data-tooltip-blunt]:after { -webkit-transition: none; transition: none; }

[data-tooltip][data-tooltip-pos="up"]:after { bottom: 100%; left: 50%; margin-bottom: 11px; -webkit-transform: translate(-50%, 10px); transform: translate(-50%, 10px); -webkit-transform-origin: top; transform-origin: top;  }
[data-tooltip][data-tooltip-pos="up"]:hover:after, [data-tooltip][data-tooltip-pos="up"][data-tooltip-visible]:after { -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0);  }
[data-tooltip][data-tooltip-pos='down']:after { left: 50%; margin-top: 11px; top: 100%; -webkit-transform: translate(-50%, -10px); transform: translate(-50%, -10px);    }
[data-tooltip][data-tooltip-pos='down']:hover:after, [data-tooltip][data-tooltip-pos='down'][data-tooltip-visible]:after { -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); }

[data-tooltip][data-tooltip-pos='left']:after { margin-right: 11px; right: 100%; top: 50%; -webkit-transform: translate(10px, -50%); transform: translate(10px, -50%);    }
[data-tooltip][data-tooltip-pos='left']:hover:after, [data-tooltip][data-tooltip-pos='left'][data-tooltip-visible]:after { -webkit-transform: translate(0, -50%); transform: translate(0, -50%); }
[data-tooltip][data-tooltip-pos='right']:after { left: 100%; margin-left: 11px; top: 50%; -webkit-transform: translate(-10px, -50%); transform: translate(-10px, -50%);    }
[data-tooltip][data-tooltip-pos='right']:hover:after, [data-tooltip][data-tooltip-pos='right'][data-tooltip-visible]:after { -webkit-transform: translate(0, -50%); transform: translate(0, -50%); }

/* ------------------
  elements
------------------ */
.is-green { border-color: var(--green)!important; }
.is-red { border-color: var(--red)!important; } 

/* ------------------
  buttons
------------------ */
.button, button, 
input[type="submit"], 
input[type="reset"], 
input[type="button"] {
    display: inline-block;
    padding: var(--buttonPadding);
    color: var(--buttonColor);
    font-size: var(--buttonFontSize);
    white-space: nowrap;
    letter-spacing: .1rem;
    font-weight: 600;
    font-style: inherit;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    background-color: transparent;
    border-radius: var(--buttonRadius);
    border: var(--buttonBorderWidth) var(--buttonBorderStyle) var(--buttonBorderColor);
    cursor: pointer;
    -webkit-box-sizing: border-box;
            box-sizing: border-box; 
    -webkit-transition: border 0.15s ease-in-out; 
    transition: border 0.15s ease-in-out;
}

.button:hover, button:hover,
input[type="submit"]:hover, 
input[type="reset"]:hover, 
input[type="button"]:hover,
.button:focus, button:focus,
input[type="submit"]:focus, 
input[type="reset"]:focus, 
input[type="button"]:focus {
    border-color: var(--buttonBorderHover);
    outline: 0; 
}

.button[disabled], button[disabled], input[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Spacing */
button, .button { vertical-align: baseline; }

/* Button Stylings */
.button[class*="is-"] { border-color: transparent; }
.button[class*="is-"]:hover { border-color: transparent; } 

button.is-white,.button.is-white  { background-color: var(--white); color: var(--black)!important; }
button.is-light,.button.is-light  { background-color: var(--light); color: var(--dark)!important; }
button.is-dark,.button.is-dark    { background-color: var(--dark); color: var(--light); }
button.is-black,.button.is-black  { background-color: var(--black); color: var(--white); }
button.is-blank,.button.is-blank  { background: none; border: none; color: var(--color); }

button.is-outline,.button.is-outline { -webkit-transition: border 0; transition: border 0; background: none; border: var(--buttonBorderWidth) var(--buttonBorderStyle) var(--buttonBorderColor); color: var(--buttonColor); }
button:hover.is-outline,.button:hover.is-outline { color: var(--buttonColor); border-color: var(--buttonBorderHover); }

button.is-primary,.button.is-primary  { background-color: var(--primary); color: var(--white); }
button.is-green,.button.is-green  { background-color: var(--green); color: var(--white); }
button.is-yellow,.button.is-yellow  { background-color: var(--yellow); color: var(--black); }
button.is-red,.button.is-red   { background-color: var(--red); color: var(--white); }

button.is-small,.button.is-small { padding: var(--padding); font-size: 0.9rem; }
button.is-large,.button.is-large { padding: calc(var(--padding) * 1); font-size: 2rem;  }

/** Radio & Checkbox */
input[type="checkbox"], 
input[type="radio"] {
    display: inline-block;
    position: relative;
    top: 6.8px; 
    right: 0; bottom: 0; left: 0;
    height: 15px;
    width: 15px;
    margin-right: var(--margin);
    background-color: var(--boxBgColor);
    border: 1px solid var(--boxBorderColor);
    cursor: pointer;
    outline: none;
    -webkit-transition: border 0.15s ease-in-out;
    transition: border 0.15s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
}

input[type="checkbox"]:hover, input[type="radio"]:hover { border-color: var(--boxBorderHover); }
input[type="checkbox"]:checked, input[type="radio"]:checked { background: var(--primary); border-color: transparent; }

input[type="checkbox"] { border-radius: 0.3rem; }
input[type="radio"] { border-radius: 100%; }

/* ------------------
  forms
------------------ */
::-webkit-input-placeholder { color: var(--boxPlaceholderColor); }
::-moz-placeholder { color: var(--boxPlaceholderColor); }
:-ms-input-placeholder { color: var(--boxPlaceholderColor); }
::-ms-input-placeholder { color: var(--boxPlaceholderColor); }
::placeholder { color: var(--boxPlaceholderColor); }

input[type="color"], 
input[type="date"],
input[type="datetime"],
input[type="datetime-local"], 
input[type="email"], 
input[type="month"], 
input[type="number"], 
input[type="password"], 
input[type="search"], 
input[type="tel"], 
input[type="text"], 
input[type="time"], 
input[type="url"], 
input[type="week"], 
select, 
textarea {
    padding: var(--padding);
    color: var(--boxColor);
    background-color: var(--boxBgColor);
    border: 1px solid var(--boxBorderColor);
    border-radius: var(--radius);
    -webkit-box-shadow: none;
            box-shadow: none;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-transition: border 0.15s ease-in-out;
    transition: border 0.15s ease-in-out;
    /* Removes awkward default styles on some inputs for iOS */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

input[type="color"]:hover,
input[type="date"]:hover,
input[type="datetime"]:hover,
input[type="datetime-local"]:hover,
input[type="email"]:hover,
input[type="month"]:hover,
input[type="number"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
input[type="tel"]:hover,
input[type="text"]:hover,
input[type="time"]:hover,
input[type="url"]:hover,
input[type="week"]:hover,
select:hover,
textarea:hover {
    border: 1px solid var(--boxBorderHover);
    outline: 0;
}

input[type="color"]:focus, 
input[type="date"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus, 
input[type="email"]:focus, 
input[type="month"]:focus, 
input[type="number"]:focus, 
input[type="password"]:focus, 
input[type="search"]:focus, 
input[type="tel"]:focus, 
input[type="text"]:focus, 
input[type="time"]:focus, 
input[type="url"]:focus, 
input[type="week"]:focus, 
select:focus, 
textarea:focus {
    border: 1px solid var(--boxBorderActive);
    outline: 0; 
}

input[type="range"] { height: 2.25rem; line-height: 2.25rem; vertical-align: middle; width: 100%; }
input[type="color"] { padding: 0; border: none; }

textarea { min-height: 6.5rem; padding: var(--padding); }
label, legend { display: block; margin-bottom: var(--margin); font-weight: 600; }
fieldset { border: 1px solid var(--boxBorderColor); border-radius: var(--radius); }
legend { padding: var(--padding); }
label span { display: inline-block; color: var(--color); margin-left: var(--margin); font-weight: normal;  }

input, textarea, select, fieldset { margin-bottom: var(--margin);  }
option { padding: 5px; }

select {
    background-image: linear-gradient(45deg, transparent 50%, var(--boxBorderColor) 50%), linear-gradient(135deg, var(--boxBorderColor) 50%, transparent 50%), linear-gradient(to right, var(--boxBorderColor), var(--boxBorderColor));
    background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
    background-size: 5px 5px, 5px 5px, 1px 1.5em;
    background-repeat: no-repeat;
    color: var(--color);
    padding-right: 45px;
}

select:hover { outline: 0; color: var(--color); background-image: linear-gradient(45deg, transparent 50%, var(--boxBorderHover) 50%), linear-gradient(135deg, var(--boxBorderHover) 50%, transparent 50%), linear-gradient(to right, var(--boxBorderHover), var(--boxBorderHover)); }
select:focus { outline: 0; color: var(--color); background-image: linear-gradient(45deg, transparent 50%, var(--boxBorderActive) 50%), linear-gradient(135deg, var(--boxBorderActive) 50%, transparent 50%), linear-gradient(to right, var(--boxBorderActive), var(--boxBorderActive)); }
select:-moz-focusring { outline: 0; color:transparent; text-shadow: 0 0 0 var(--color); }

/* ------------------
  lists
------------------ */
ul { list-style: circle inside; }
ol { list-style: decimal inside; }
ul, ol { padding-left: 0; margin-top: 0; }
ul ul, ul ol, ol ol, ol ul { margin: 1.5rem 0 1.5rem 3rem; font-size: 100%; }
li { margin-bottom: var(--margin); }

.inline li { display: inline-block; list-style: none; margin: 0; padding: 0; }
ul.no-style, ol.no-style { list-style: none; margin: 0; padding: 0; }
ul.no-style ul, ol.no-style ol { list-style: none; }

/* ---------------------
  hr - horizontal rules
--------------------- */
hr { margin: var(--hrMargin) auto; background-color: var(--boxBorderColor); border: 0 none; width: 95%; }
hr:not([size]) { height: 1px; }
hr.full { width: 100%; }
hr.gradient { background-image: -webkit-gradient(linear, left top, right top, from(var(--hrColor)), color-stop(50%, var(--boxBorderColor)), to(var(--hrColor))); background-image: linear-gradient(to right, var(--hrColor) 0%, var(--boxBorderColor) 50%, var(--hrColor) 100%); }

/* Line w/ text: --- text --- */
.text-hr { display: flex; align-items: center; text-align: center; margin: calc(var(--margin) * 5) auto; }
.text-hr::before, .text-hr::after { content: ''; flex: 1; border-bottom: 1px solid var(--boxBorderColor); }
.text-hr::before { margin-right: var(--padding); }
.text-hr::after { margin-left: var(--padding); }

/* ------------------
  tables
------------------ */
table { width: 100%; }
th, td { padding: var(--padding); text-align: left; border-bottom: 1px solid var(--boxBorderColor); }

table.is-bordered { border: 1px solid var(--boxBorderColor); border-radius: var(--radius); }
table.is-bordered th { background-color: var(--boxBorderColor); }
table.is-bordered th, table.is-bordered td { border-bottom: 1px solid var(--boxBorderColor); }
table.is-bordered > tbody > tr:last-child td { border-bottom: none; }
table.is-striped tbody tr:nth-child(2n) { background-color: var(--boxBorderColor); }
table.is-striped td { border:none; }

/* ------------------
  raster / css grid
------------------ */
/** Grid */
grid {
    display: -ms-grid;
    display: grid;
    grid-row-gap: var(--rowGap, 2rem);
    grid-column-gap: var(--columnGap, 1rem);
    -ms-grid-columns: var(--grid-tc);
    grid-template-columns: var(--grid-tc); /* default columns */ 
    --grid-tc: repeat(4, 1fr);
    --grid-cs: 1; /* column start */
    --grid-ce: -1 /* column end */
}

grid.compact { grid-row-gap: 0; }
grid > c > img, grid > c > p > img { -o-object-fit: contain; object-fit: contain; max-width: 100% }

/* c -- cell or column */
grid > c { display: block; -moz-appearance: none; appearance: none; -webkit-appearance: none; }

grid[columns="1"] { --grid-tc: repeat(1, 1fr) }
grid[columns="2"] { --grid-tc: repeat(2, 1fr) }
grid[columns="3"] { --grid-tc: repeat(3, 1fr) }
grid[columns="4"] { --grid-tc: repeat(4, 1fr) }
grid[columns="5"] { --grid-tc: repeat(5, 1fr) }
grid[columns="6"] { --grid-tc: repeat(6, 1fr) }
grid[columns="7"] { --grid-tc: repeat(7, 1fr) }
grid[columns="8"] { --grid-tc: repeat(8, 1fr) }
grid[columns="9"] { --grid-tc: repeat(9, 1fr) }
grid[columns="10"] { --grid-tc: repeat(10, 1fr) }
grid[columns="11"] { --grid-tc: repeat(11, 1fr) }
grid[columns="12"] { --grid-tc: repeat(12, 1fr) }
grid[columns="13"] { --grid-tc: repeat(13, 1fr) }
grid[columns="14"] { --grid-tc: repeat(14, 1fr) }
grid[columns="15"] { --grid-tc: repeat(15, 1fr) }
grid[columns="16"] { --grid-tc: repeat(16, 1fr) }

/* span=start... */
grid > c[span^="1"] { --grid-cs: 1 }
grid > c[span^="2"] { --grid-cs: 2 }
grid > c[span^="3"] { --grid-cs: 3 }
grid > c[span^="4"] { --grid-cs: 4 }
grid > c[span^="5"] { --grid-cs: 5 }
grid > c[span^="6"] { --grid-cs: 6 }
grid > c[span^="7"] { --grid-cs: 7 }
grid > c[span^="8"] { --grid-cs: 8 }
grid > c[span^="9"] { --grid-cs: 9 }
grid > c[span^="10"] { --grid-cs: 10 }
grid > c[span^="11"] { --grid-cs: 11 }
grid > c[span^="12"] { --grid-cs: 12 }
grid > c[span^="13"] { --grid-cs: 13 }
grid > c[span^="14"] { --grid-cs: 14 }
grid > c[span^="15"] { --grid-cs: 15 }
grid > c[span^="16"] { --grid-cs: 16 }

/* span=...+width, span=...-end */
grid > c[span$="+1"], grid > c[span="1"] { --grid-ce: 1 }
grid > c[span$="+2"], grid > c[span$="-1"], grid > c[span="2"] { --grid-ce: 2 }
grid > c[span$="+3"], grid > c[span$="-2"], grid > c[span="3"] { --grid-ce: 3 }
grid > c[span$="+4"], grid > c[span$="-3"], grid > c[span="4"] { --grid-ce: 4 }
grid > c[span$="+5"], grid > c[span$="-4"], grid > c[span="5"] { --grid-ce: 5 }
grid > c[span$="+6"], grid > c[span$="-5"], grid > c[span="6"] { --grid-ce: 6 }
grid > c[span$="+7"], grid > c[span$="-6"], grid > c[span="7"] { --grid-ce: 7 }
grid > c[span$="+8"], grid > c[span$="-7"], grid > c[span="8"] { --grid-ce: 8 }
grid > c[span$="+9"], grid > c[span$="-8"], grid > c[span="9"] { --grid-ce: 9 }
grid > c[span$="+10"], grid > c[span$="-9"], grid > c[span="10"] { --grid-ce: 10 }
grid > c[span$="+11"], grid > c[span$="-10"], grid > c[span="11"] { --grid-ce: 11 }
grid > c[span$="+12"], grid > c[span$="-11"], grid > c[span="12"] { --grid-ce: 12 }
grid > c[span$="+13"], grid > c[span$="-12"], grid > c[span="13"] { --grid-ce: 13 }
grid > c[span$="+14"], grid > c[span$="-13"], grid > c[span="14"] { --grid-ce: 14 }
grid > c[span$="+15"], grid > c[span$="-14"], grid > c[span="15"] { --grid-ce: 15 }
grid > c[span$="+16"], grid > c[span$="-15"], grid > c[span="16"] { --grid-ce: 16 }
grid > c[span$="-16"] { --grid-ce: 17 }

/* connect vars */
grid > c[span] { -ms-grid-column-span: var(--grid-ce); grid-column-end: span var(--grid-ce); }
grid > c[span*="+"], grid > c[span*="-"], grid > c[span*=".."] { -ms-grid-column: var(--grid-cs); grid-column-start: var(--grid-cs); }
grid > c[span*="-"], grid > c[span*=".."] { -ms-grid-column-span: var(--grid-ce); grid-column-end: var(--grid-ce); }
grid > c[span="row"] { grid-column: 1 / -1 }

/* Justify CONTENT - for <grid> */
grid[jc="start"] { justify-content: start; }
grid[jc="center"] { justify-content: center; }
grid[jc="end"] { justify-content: end; }
grid[jc="stretch"] { justify-content: stretch; }
grid[jc="around"] { justify-content: space-around; }
grid[jc="between"] { justify-content: space-between; }
grid[jc="evenly"] { justify-content: space-evenly; }

/* Justify ITEMS - for <grid> */
grid[ji="start"] { justify-items: start; }
grid[ji="center"] { justify-items: center; }
grid[ji="end"] { justify-items: end; }
grid[ji="stretch"] { justify-items: stretch; }

/* Align ITEMS - for <grid> */
grid[ai="start"] { align-items: start; }
grid[ai="center"] { align-items: center; }
grid[ai="end"] { align-items: end; }
grid[ai="stretch"] { align-items: stretch; }

/* Align CONTENT - for <grid> */
grid[ac="start"] { align-content: start; }
grid[ac="center"] { align-content: center; }
grid[ac="end"] { align-content: end; }
grid[ac="stretch"] { align-content: stretch; }
grid[ac="around"] { align-content: space-around; }
grid[ac="between"] { align-content: space-between; }
grid[ac="evenly"] { align-content: space-evenly; }

/* Align SELF - for <c> */
grid > c[as="start"] { -ms-grid-row-align: start; align-self: start; }
grid > c[as="center"] { -ms-grid-row-align: center; align-self: center; }
grid > c[as="end"] { -ms-grid-row-align: end; align-self: end; }
grid > c[as="stretch"] { -ms-grid-row-align: stretch; align-self: stretch; }

/* Justify SELF - for <c> */
grid > c[js="start"] { -ms-grid-column-align: start; justify-self: start; }
grid > c[js="center"] { -ms-grid-column-align: center; justify-self: center; }
grid > c[js="end"] { -ms-grid-column-align: end; justify-self: end; }
grid > c[js="stretch"] { -ms-grid-column-align: stretch; justify-self: stretch; }

/* VISUAL ORDER */
[order="first"] { order: -1; }
[order="1"] { order: 1; }
[order="2"] { order: 2; }
[order="3"] { order: 3; }
[order="4"] { order: 4; }
[order="5"] { order: 5; }
[order="6"] { order: 6; }
[order="7"] { order: 7; }
[order="8"] { order: 8; }
[order="9"] { order: 9; }
[order="10"] { order: 10; }
[order="11"] { order: 11; }
[order="12"] { order: 12; }
[order="13"] { order: 13; }
[order="14"] { order: 14; }
[order="15"] { order: 15; }
[order="16"] { order: 16; }
[order="last"] { order: 99; }

/* for window width <= 600 */
@media only screen and (max-width: 600px) {
  grid[columns-s="1"] { --grid-tc: repeat(1, 1fr) }
  grid[columns-s="2"] { --grid-tc: repeat(2, 1fr) }
  grid[columns-s="3"] { --grid-tc: repeat(3, 1fr) }
  grid[columns-s="4"] { --grid-tc: repeat(4, 1fr) }
  grid[columns-s="5"] { --grid-tc: repeat(5, 1fr) }
  grid[columns-s="6"] { --grid-tc: repeat(6, 1fr) }
  grid[columns-s="7"] { --grid-tc: repeat(7, 1fr) }
  grid[columns-s="8"] { --grid-tc: repeat(8, 1fr) }
  grid[columns-s="9"] { --grid-tc: repeat(9, 1fr) }
  grid[columns-s="10"] { --grid-tc: repeat(10, 1fr) }
  grid[columns-s="11"] { --grid-tc: repeat(11, 1fr) }
  grid[columns-s="12"] { --grid-tc: repeat(12, 1fr) }
  grid[columns-s="13"] { --grid-tc: repeat(13, 1fr) }
  grid[columns-s="14"] { --grid-tc: repeat(14, 1fr) }
  grid[columns-s="15"] { --grid-tc: repeat(15, 1fr) }
  grid[columns-s="16"] { --grid-tc: repeat(16, 1fr) }
  
  /* span-s=start... */
  grid > c[span-s^="1"] { --grid-cs: 1 }
  grid > c[span-s^="2"] { --grid-cs: 2 }
  grid > c[span-s^="3"] { --grid-cs: 3 }
  grid > c[span-s^="4"] { --grid-cs: 4 }
  grid > c[span-s^="5"] { --grid-cs: 5 }
  grid > c[span-s^="6"] { --grid-cs: 6 }
  grid > c[span-s^="7"] { --grid-cs: 7 }
  grid > c[span-s^="8"] { --grid-cs: 8 }
  grid > c[span-s^="9"] { --grid-cs: 9 }
  grid > c[span-s^="10"] { --grid-cs: 10 }
  grid > c[span-s^="11"] { --grid-cs: 11 }
  grid > c[span-s^="12"] { --grid-cs: 12 }
  grid > c[span-s^="13"] { --grid-cs: 13 }
  grid > c[span-s^="14"] { --grid-cs: 14 }
  grid > c[span-s^="15"] { --grid-cs: 15 }
  grid > c[span-s^="16"] { --grid-cs: 16 }
  
  /* span-s=...+width, span-s=...-end */
  grid > c[span-s$="+1"], grid > c[span-s="1"] { --grid-ce: 1 }
  grid > c[span-s$="+2"], grid > c[span-s$="-1"], grid > c[span-s="2"] { --grid-ce: 2 }
  grid > c[span-s$="+3"], grid > c[span-s$="-2"], grid > c[span-s="3"] { --grid-ce: 3 }
  grid > c[span-s$="+4"], grid > c[span-s$="-3"], grid > c[span-s="4"] { --grid-ce: 4 }
  grid > c[span-s$="+5"], grid > c[span-s$="-4"], grid > c[span-s="5"] { --grid-ce: 5 }
  grid > c[span-s$="+6"], grid > c[span-s$="-5"], grid > c[span-s="6"] { --grid-ce: 6 }
  grid > c[span-s$="+7"], grid > c[span-s$="-6"], grid > c[span-s="7"] { --grid-ce: 7 }
  grid > c[span-s$="+8"], grid > c[span-s$="-7"], grid > c[span-s="8"] { --grid-ce: 8 }
  grid > c[span-s$="+9"], grid > c[span-s$="-8"], grid > c[span-s="9"] { --grid-ce: 9 }
  grid > c[span-s$="+10"], grid > c[span-s$="-9"], grid > c[span-s="10"] { --grid-ce: 10 }
  grid > c[span-s$="+11"], grid > c[span-s$="-10"], grid > c[span-s="11"] { --grid-ce: 11 }
  grid > c[span-s$="+12"], grid > c[span-s$="-11"], grid > c[span-s="12"] { --grid-ce: 12 }
  grid > c[span-s$="+13"], grid > c[span-s$="-12"], grid > c[span-s="13"] { --grid-ce: 13 }
  grid > c[span-s$="+14"], grid > c[span-s$="-13"], grid > c[span-s="14"] { --grid-ce: 14 }
  grid > c[span-s$="+15"], grid > c[span-s$="-14"], grid > c[span-s="15"] { --grid-ce: 15 }
  grid > c[span-s$="+16"], grid > c[span-s$="-15"], grid > c[span-s="16"] { --grid-ce: 16 }
  grid > c[span-s$="-16"] { --grid-ce: 17 }
  
  /* connect vars */
  grid > c[span-s] { -ms-grid-column-span: var(--grid-ce); grid-column-end: span var(--grid-ce) }
  grid > c[span-s*="+"], grid > c[span-s*="-"], grid > c[span-s*=".."] { -ms-grid-column: var(--grid-cs); grid-column-start: var(--grid-cs) }
  grid > c[span-s*="-"], grid > c[span-s*=".."] { -ms-grid-column-span: var(--grid-ce); grid-column-end: var(--grid-ce) }
  grid > c[span-s="row"] { grid-column: 1 / -1 }

  /* Justify CONTENT - for <grid> */
  grid[jc-s="start"] { justify-content: start; }
  grid[jc-s="center"] { justify-content: center; }
  grid[jc-s="end"] { justify-content: end; }
  grid[jc-s="stretch"] { justify-content: stretch; }
  grid[jc-s="around"] { justify-content: space-around; }
  grid[jc-s="between"] { justify-content: space-between; }
  grid[jc-s="evenly"] { justify-content: space-evenly; }
  
  /* Justify ITEMS - for <grid> */
  grid[ji-s="start"] { justify-items: start; }
  grid[ji-s="center"] { justify-items: center; }
  grid[ji-s="end"] { justify-items: end; }
  grid[ji-s="stretch"] { justify-items: stretch; }
  
  /* Align ITEMS - for <grid> */
  grid[ai-s="start"] { align-items: start; }
  grid[ai-s="center"] { align-items: center; }
  grid[ai-s="end"] { align-items: end; }
  grid[ai-s="stretch"] { align-items: stretch; }
  
  /* Align CONTENT - for <grid> */
  grid[ac-s="start"] { align-content: start; }
  grid[ac-s="center"] { align-content: center; }
  grid[ac-s="end"] { align-content: end; }
  grid[ac-s="stretch"] { align-content: stretch; }
  grid[ac-s="around"] { align-content: space-around; }
  grid[ac-s="between"] { align-content: space-between; }
  grid[ac-s="evenly"] { align-content: space-evenly; }
  
  /* Align SELF - for <c> */
  grid > c[as-s="start"] { -ms-grid-row-align: start; align-self: start; }
  grid > c[as-s="center"] { -ms-grid-row-align: center; align-self: center; }
  grid > c[as-s="end"] { -ms-grid-row-align: end; align-self: end; }
  grid > c[as-s="stretch"] { -ms-grid-row-align: stretch; align-self: stretch; }
  
  /* Justify SELF - for <c> */
  grid > c[js-s="start"] { -ms-grid-column-align: start; justify-self: start; }
  grid > c[js-s="center"] { -ms-grid-column-align: center; justify-self: center; }
  grid > c[js-s="end"] { -ms-grid-column-align: end; justify-self: end; }
  grid > c[js-s="stretch"] { -ms-grid-column-align: stretch; justify-self: stretch; }

  /* VISUAL ORDER */
  [order-s="first"] { order: -1; }
  [order-s="1"] { order: 1; }
  [order-s="2"] { order: 2; }
  [order-s="3"] { order: 3; }
  [order-s="4"] { order: 4; }
  [order-s="5"] { order: 5; }
  [order-s="6"] { order: 6; }
  [order-s="7"] { order: 7; }
  [order-s="8"] { order: 8; }
  [order-s="9"] { order: 9; }
  [order-s="10"] { order: 10; }
  [order-s="11"] { order: 11; }
  [order-s="12"] { order: 12; }
  [order-s="13"] { order: 13; }
  [order-s="14"] { order: 14; }
  [order-s="15"] { order: 15; }
  [order-s="16"] { order: 16; }
  [order-s="last"] { order: 99; }
}

/* for window width >= 1600 */
@media only screen and (min-width: 1599px) {
  grid[columns-l="1"] { --grid-tc: repeat(1, 1fr) }
  grid[columns-l="2"] { --grid-tc: repeat(2, 1fr) }
  grid[columns-l="3"] { --grid-tc: repeat(3, 1fr) }
  grid[columns-l="4"] { --grid-tc: repeat(4, 1fr) }
  grid[columns-l="5"] { --grid-tc: repeat(5, 1fr) }
  grid[columns-l="6"] { --grid-tc: repeat(6, 1fr) }
  grid[columns-l="7"] { --grid-tc: repeat(7, 1fr) }
  grid[columns-l="8"] { --grid-tc: repeat(8, 1fr) }
  grid[columns-l="9"] { --grid-tc: repeat(9, 1fr) }
  grid[columns-l="10"] { --grid-tc: repeat(10, 1fr) }
  grid[columns-l="11"] { --grid-tc: repeat(11, 1fr) }
  grid[columns-l="12"] { --grid-tc: repeat(12, 1fr) }
  grid[columns-l="13"] { --grid-tc: repeat(13, 1fr) }
  grid[columns-l="14"] { --grid-tc: repeat(14, 1fr) }
  grid[columns-l="15"] { --grid-tc: repeat(15, 1fr) }
  grid[columns-l="16"] { --grid-tc: repeat(16, 1fr) }
  
  /* span-l=start... */
  grid > c[span-l^="1"] { --grid-cs: 1 }
  grid > c[span-l^="2"] { --grid-cs: 2 }
  grid > c[span-l^="3"] { --grid-cs: 3 }
  grid > c[span-l^="4"] { --grid-cs: 4 }
  grid > c[span-l^="5"] { --grid-cs: 5 }
  grid > c[span-l^="6"] { --grid-cs: 6 }
  grid > c[span-l^="7"] { --grid-cs: 7 }
  grid > c[span-l^="8"] { --grid-cs: 8 }
  grid > c[span-l^="9"] { --grid-cs: 9 }
  grid > c[span-l^="10"] { --grid-cs: 10 }
  grid > c[span-l^="11"] { --grid-cs: 11 }
  grid > c[span-l^="12"] { --grid-cs: 12 }
  grid > c[span-l^="13"] { --grid-cs: 13 }
  grid > c[span-l^="14"] { --grid-cs: 14 }
  grid > c[span-l^="15"] { --grid-cs: 15 }
  grid > c[span-l^="16"] { --grid-cs: 16 }
  
  /* span-l=...+width, span-l=...-end */
  grid > c[span-l$="+1"], grid > c[span-l="1"] { --grid-ce: 1 }
  grid > c[span-l$="+2"], grid > c[span-l$="-1"], grid > c[span-l="2"] { --grid-ce: 2 }
  grid > c[span-l$="+3"], grid > c[span-l$="-2"], grid > c[span-l="3"] { --grid-ce: 3 }
  grid > c[span-l$="+4"], grid > c[span-l$="-3"], grid > c[span-l="4"] { --grid-ce: 4 }
  grid > c[span-l$="+5"], grid > c[span-l$="-4"], grid > c[span-l="5"] { --grid-ce: 5 }
  grid > c[span-l$="+6"], grid > c[span-l$="-5"], grid > c[span-l="6"] { --grid-ce: 6 }
  grid > c[span-l$="+7"], grid > c[span-l$="-6"], grid > c[span-l="7"] { --grid-ce: 7 }
  grid > c[span-l$="+8"], grid > c[span-l$="-7"], grid > c[span-l="8"] { --grid-ce: 8 }
  grid > c[span-l$="+9"], grid > c[span-l$="-8"], grid > c[span-l="9"] { --grid-ce: 9 }
  grid > c[span-l$="+10"], grid > c[span-l$="-9"], grid > c[span-l="10"] { --grid-ce: 10 }
  grid > c[span-l$="+11"], grid > c[span-l$="-10"], grid > c[span-l="11"] { --grid-ce: 11 }
  grid > c[span-l$="+12"], grid > c[span-l$="-11"], grid > c[span-l="12"] { --grid-ce: 12 }
  grid > c[span-l$="+13"], grid > c[span-l$="-12"], grid > c[span-l="13"] { --grid-ce: 13 }
  grid > c[span-l$="+14"], grid > c[span-l$="-13"], grid > c[span-l="14"] { --grid-ce: 14 }
  grid > c[span-l$="+15"], grid > c[span-l$="-14"], grid > c[span-l="15"] { --grid-ce: 15 }
  grid > c[span-l$="+16"], grid > c[span-l$="-15"], grid > c[span-l="16"] { --grid-ce: 16 }
  grid > c[span-l$="-16"] { --grid-ce: 17 }
  
  /* connect vars */
  grid > c[span-l] { -ms-grid-column-span: var(--grid-ce); grid-column-end: span var(--grid-ce) }
  grid > c[span-l*="+"], grid > c[span-l*="-"], grid > c[span-l*=".."] { -ms-grid-column: var(--grid-cs); grid-column-start: var(--grid-cs) }
  grid > c[span-l*="-"], grid > c[span-l*=".."] { -ms-grid-column-span: var(--grid-ce); grid-column-end: var(--grid-ce) }
  grid > c[span-l="row"] { grid-column: 1 / -1 }

  /* Justify CONTENT - for <grid> */
  grid[jc-l="start"] { justify-content: start; }
  grid[jc-l="center"] { justify-content: center; }
  grid[jc-l="end"] { justify-content: end; }
  grid[jc-l="stretch"] { justify-content: stretch; }
  grid[jc-l="around"] { justify-content: space-around; }
  grid[jc-l="between"] { justify-content: space-between; }
  grid[jc-l="evenly"] { justify-content: space-evenly; }

  /* Justify ITEMS - for <grid> */
  grid[ji-l="start"] { justify-items: start; }
  grid[ji-l="center"] { justify-items: center; }
  grid[ji-l="end"] { justify-items: end; }
  grid[ji-l="stretch"] { justify-items: stretch; }

  /* Align ITEMS - for <grid> */
  grid[ai-l="start"] { align-items: start; }
  grid[ai-l="center"] { align-items: center; }
  grid[ai-l="end"] { align-items: end; }
  grid[ai-l="stretch"] { align-items: stretch; }

  /* Align CONTENT - for <grid> */
  grid[ac-l="start"] { align-content: start; }
  grid[ac-l="center"] { align-content: center; }
  grid[ac-l="end"] { align-content: end; }
  grid[ac-l="stretch"] { align-content: stretch; }
  grid[ac-l="around"] { align-content: space-around; }
  grid[ac-l="between"] { align-content: space-between; }
  grid[ac-l="evenly"] { align-content: space-evenly; }

  /* Align SELF - for <c> */
  grid > c[as-l="start"] { -ms-grid-row-align: start; align-self: start; }
  grid > c[as-l="center"] { -ms-grid-row-align: center; align-self: center; }
  grid > c[as-l="end"] { -ms-grid-row-align: end; align-self: end; }
  grid > c[as-l="stretch"] { -ms-grid-row-align: stretch; align-self: stretch; }

  /* Justify SELF - for <c> */
  grid > c[js-l="start"] { -ms-grid-column-align: start; justify-self: start; }
  grid > c[js-l="center"] { -ms-grid-column-align: center; justify-self: center; }
  grid > c[js-l="end"] { -ms-grid-column-align: end; justify-self: end; }
  grid > c[js-l="stretch"] { -ms-grid-column-align: stretch; justify-self: stretch; }

  /* VISUAL ORDER */
  [order-l="first"] { order: -1; }
  [order-l="1"] { order: 1; }
  [order-l="2"] { order: 2; }
  [order-l="3"] { order: 3; }
  [order-l="4"] { order: 4; }
  [order-l="5"] { order: 5; }
  [order-l="6"] { order: 6; }
  [order-l="7"] { order: 7; }
  [order-l="8"] { order: 8; }
  [order-l="9"] { order: 9; }
  [order-l="10"] { order: 10; }
  [order-l="11"] { order: 11; }
  [order-l="12"] { order: 12; }
  [order-l="13"] { order: 13; }
  [order-l="14"] { order: 14; }
  [order-l="15"] { order: 15; }
  [order-l="16"] { order: 16; }
  [order-l="last"] { order: 99; }
}

/* .debug can be added to a grid to visualize its effective cells */
grid.debug>*{ --color:rgba(248,110,91,0.3); background-image:-webkit-gradient(linear,left top, left bottom,color-stop(0, var(--color)),to(var(--color))); background-image:linear-gradient(180deg,var(--color) 0,var(--color)) }
grid.debug>:nth-child(6n+2){ --color:rgba(103,126,208,0.3) }
grid.debug>:nth-child(6n+3){ --color:rgba(224,174,72,0.3) }
grid.debug>:nth-child(6n+4){ --color:rgba(77,214,115,0.3) }
grid.debug>:nth-child(6n+5){ --color:rgba(217,103,219,0.3) }
grid.debug>:nth-child(6n+6){ --color:rgba(94,204,211,0.3) }
grid.debug>:nth-child(6n+7){ --color:rgba(248,110,91,0.3) }

/* ------------------
  flexbox
------------------ */
/*  FLEX CONTAINER */
flex { display: flex; }
flex > * { flex: 0 1 auto; -moz-appearance: none; appearance: none; -webkit-appearance: none; padding: 0 var(--rowGap); }
flex > * > img, flex > * > p > img { -o-object-fit: contain; object-fit: contain; max-width: 100% }

/*  FLEX DIRECTION */
flex[direction="column"] { flex-direction: column; }
flex[direction="column-reverse"] { flex-direction: column-reverse; }
flex[direction="row"] { flex-direction: row; }
flex[direction="row-reverse"] { flex-direction: row-reverse; }

/* WRAPPING */
flex[wrap="wrap"] { flex-wrap: wrap; }
flex[wrap="nowrap"] { flex-wrap: nowrap; }
flex[wrap="reverse"] { flex-wrap: wrap-reverse; }

/* JUSTIFICATION */
flex[content="start"] { justify-content: flex-start; }
flex[content="center"] { justify-content: center; }
flex[content="end"] { justify-content: flex-end; }
flex[content="between"] { justify-content: space-between; }
flex[content="around"] { justify-content: space-around; }

/* ALIGN CONTENT */
flex[align-content="start"] { align-content: flex-start; }
flex[align-content="end"] { align-content: flex-end; }
flex[align-content="center"] { align-content: center; }
flex[align-content="between"] { align-content: space-between; }
flex[align-content="around"] { align-content: space-around; }
flex[align-content="stretch"] { align-content: stretch; }

/* ALIGN ITEMS */
flex[align-items="start"] { align-items: start; }
flex[align-items="center"] { align-items: center; }
flex[align-items="end"] { align-items: end; }
flex[align-items="flex-start"] { align-items: flex-start; }
flex[align-items="flex-end"] { align-items: flex-end; }
flex[align-items="baseline"] { align-items: baseline; }
flex[align-items="stretch"] { align-items: stretch; }
/* Baseline alignment */
flex[align-items="first-baseline"] { align-items: first baseline; }
flex[align-items="last-baseline"] { align-items: last baseline; } /* Overflow alignment (for positional alignment only) */ 
flex[align-items="safe-center"] { align-items: safe center; }
flex[align-items="unsafe-center"] { align-items: unsafe center; }

/* ALIGN SELF */
flex > c[align-self="auto"] { -ms-grid-row-align: auto; align-self: auto; }
flex > c[align-self="start"] { align-self: flex-start; }
flex > c[align-self="end"] { align-self: flex-end; }
flex > c[align-self="center"] { -ms-grid-row-align: center; align-self: center; }
flex > c[align-self="baseline"] { align-self: baseline; }
flex > c[align-self="stretch"] { -ms-grid-row-align: stretch; align-self: stretch; }

/* for window width <= 600 */
@media only screen and (max-width: 600px) {
  /*  FLEX DIRECTION */
  flex[direction-s="column"] { flex-direction: column ; }
  flex[direction-s="column-reverse"] { flex-direction: column-reverse; }
  flex[direction-s="row"] { flex-direction: row; }
  flex[direction-s="row-reverse"] { flex-direction: row-reverse; }

  /* WRAPPING */
  flex[wrap-s="wrap"] { flex-wrap: wrap; }
  flex[wrap-s="nowrap"] { flex-wrap: nowrap; }
  flex[wrap-s="reverse"] { flex-wrap: wrap-reverse; }

  /* JUSTIFICATION */
  flex[content-s="start"] { justify-content: flex-start; }
  flex[content-s="center"] { justify-content: center; }
  flex[content-s="end"] { justify-content: flex-end; }
  flex[content-s="between"] { justify-content: space-between; }
  flex[content-s="around"] { justify-content: space-around; }

  /* ALIGN CONTENT */
  flex[align-content-s="start"] { align-content: flex-start; }
  flex[align-content-s="end"] { align-content: flex-end; }
  flex[align-content-s="center"] { align-content: center; }
  flex[align-content-s="between"] { align-content: space-between; }
  flex[align-content-s="around"] { align-content: space-around; }
  flex[align-content-s="stretch"] { align-content: stretch; }

  /* ALIGN ITEMS */
  flex[align-items-s="start"] { align-items: start; }
  flex[align-items-s="center"] { align-items: center; }
  flex[align-items-s="end"] { align-items: end; }
  flex[align-items-s="flex-start"] { align-items: flex-start; }
  flex[align-items-s="flex-end"] { align-items: flex-end; }
  flex[align-items-s="baseline"] { align-items: baseline; }
  flex[align-items-s="stretch"] { align-items: stretch; }
  /* Baseline alignment */
  flex[align-items-s="first-baseline"] { align-items: first baseline; }
  flex[align-items-s="last-baseline"] { align-items: last baseline; } /* Overflow alignment (for positional alignment only) */ 
  flex[align-items-s="safe-center"] { align-items: safe center; }
  flex[align-items-s="unsafe-center"] { align-items: unsafe center; }

  /* ALIGN SELF */
  flex > c[align-self-s="auto"] { -ms-grid-row-align: auto; align-self: auto; }
  flex > c[align-self-s="start"] { align-self: flex-start; }
  flex > c[align-self-s="end"] { align-self: flex-end; }
  flex > c[align-self-s="center"] { -ms-grid-row-align: center; align-self: center; }
  flex > c[align-self-s="baseline"] { align-self: baseline; }
  flex > c[align-self-s="stretch"] { -ms-grid-row-align: stretch; align-self: stretch; }
}

/* for window width >= 1600 */
@media only screen and (min-width: 1599px) {
  /*  FLEX DIRECTION */
  flex[direction-l="column"] { flex-direction: column ; }
  flex[direction-l="column-reverse"] { flex-direction: column-reverse; }
  flex[direction-l="row"] { flex-direction: row; }
  flex[direction-l="row-reverse"] { flex-direction: row-reverse; }

  /* WRAPPING */
  flex[wrap-l="wrap"] { flex-wrap: wrap; }
  flex[wrap-l="nowrap"] { flex-wrap: nowrap; }
  flex[wrap-l="reverse"] { flex-wrap: wrap-reverse; }

  /* JUSTIFICATION */
  flex[content-l="start"] { justify-content: flex-start; }
  flex[content-l="center"] { justify-content: center; }
  flex[content-l="end"] { justify-content: flex-end; }
  flex[content-l="between"] { justify-content: space-between; }
  flex[content-l="around"] { justify-content: space-around; }

  /* ALIGN CONTENT */
  flex[align-content-l="start"] { align-content: flex-start; }
  flex[align-content-l="end"] { align-content: flex-end; }
  flex[align-content-l="center"] { align-content: center; }
  flex[align-content-l="between"] { align-content: space-between; }
  flex[align-content-l="around"] { align-content: space-around; }
  flex[align-content-l="stretch"] { align-content: stretch; }

  /* ALIGN ITEMS */
  flex[align-items-l="start"] { align-items: start; }
  flex[align-items-l="center"] { align-items: center; }
  flex[align-items-l="end"] { align-items: end; }
  flex[align-items-l="flex-start"] { align-items: flex-start; }
  flex[align-items-l="flex-end"] { align-items: flex-end; }
  flex[align-items-l="baseline"] { align-items: baseline; }
  flex[align-items-l="stretch"] { align-items: stretch; }
  /* Baseline alignment */
  flex[align-items-l="first-baseline"] { align-items: first baseline; }
  flex[align-items-l="last-baseline"] { align-items: last baseline; } /* Overflow alignment (for positional alignment only) */ 
  flex[align-items-l="safe-center"] { align-items: safe center; }
  flex[align-items-l="unsafe-center"] { align-items: unsafe center; }

  /* ALIGN SELF */
  flex > c[align-self-l="auto"] { -ms-grid-row-align: auto; align-self: auto; }
  flex > c[align-self-l="start"] { align-self: flex-start; }
  flex > c[align-self-l="end"] { align-self: flex-end; }
  flex > c[align-self-l="center"] { -ms-grid-row-align: center; align-self: center; }
  flex > c[align-self-l="baseline"] { align-self: baseline; }
  flex > c[align-self-l="stretch"] { -ms-grid-row-align: stretch; align-self: stretch; }
}

/* ------------------
  Cubic Beziers
------------------ */
/*
 * Can be used both in transition:; & animation:;
 * Example: transition: all 1s var(--easeInOutQuad);
*/
:root {
    --easeInSine: cubic-bezier(0.12, 0, 0.39, 0);
    --easeOutSine: cubic-bezier(0.61, 1, 0.88, 1);
    --easeInOutSine: cubic-bezier(0.37, 0, 0.63, 1);

    --easeInQuad: cubic-bezier(0.11, 0, 0.5, 0);
    --easeOutQuad: cubic-bezier(0.5, 1, 0.89, 1);
    --easeInOutQuad: cubic-bezier(0.45, 0, 0.55, 1);

    --easeInCubic: cubic-bezier(0.32, 0, 0.67, 0);
    --easeOutCubic: cubic-bezier(0.33, 1, 0.68, 1);
    --easeInOutCubic: cubic-bezier(0.65, 0, 0.35, 1);

    --easeInQuart: cubic-bezier(0.5, 0, 0.75, 0);
    --easeOutQuart: cubic-bezier(0.25, 1, 0.5, 1);
    --easeInOutQuart: cubic-bezier(0.76, 0, 0.24, 1);

    --easeInQuint: cubic-bezier(0.64, 0, 0.78, 0);
    --easeOutQuint: cubic-bezier(0.22, 1, 0.36, 1);
    --easeInOutQuint: cubic-bezier(0.83, 0, 0.17, 1);

    --easeInExpo: cubic-bezier(0.7, 0, 0.84, 0);
    --easeOutExpo: cubic-bezier(0.16, 1, 0.3, 1);
    --easeInOutExpo: cubic-bezier(0.87, 0, 0.13, 1);

    --easeInCirc: cubic-bezier(0.55, 0, 1, 0.45);
    --easeOutCirc: cubic-bezier(0, 0.55, 0.45, 1);
    --easeInOutCirc: cubic-bezier(0.85, 0, 0.15, 1);

    --easeInBack: cubic-bezier(0.36, 0, 0.66, -0.56);
    --easeOutBack: cubic-bezier(0.34, 1.56, 0.64, 1);
    --easeInOutBack: cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

/* ------------------
  animations
------------------ */
/*
 * To make it work you need: START | ANIMATION TYPE | DURATION | DELAY (optional) | CUBIC BEZIER (optional)
 * Example: <h1 start animation="fadein" ease="easeInOutCubic" style="--duration: 1s">example</h1>
*/

/** ANIMATION */
[start],
.animate {
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both; 
    -webkit-animation-name: var(--animation-name, fadeIn); 
            animation-name: var(--animation-name, fadeIn); /* default animation: fadeIn */
    -webkit-animation-duration: var(--duration, 1s);
            animation-duration: var(--duration, 1s);  /* default duration: 1s */
    -webkit-animation-delay: var(--delay, 0s);
            animation-delay: var(--delay, 0s); /* default delay: 0s */
    -webkit-animation-timing-function: var(--ease, easeInOutCubic);
            animation-timing-function: var(--ease, easeInOutCubic); /* default ease: easeInOutCubic */
}

/*** Cubic Bezier for ANIMATIONS • examples at: https://easings.net/ */
[ease="easeInSine"]     { --ease: var(--easeInSine); }
[ease="easeOutSine"]    { --ease: var(--easeOutSine); }
[ease="easeInOutSine"]  { --ease: var(--easeInOutSine); }

[ease="easeInQuad"]     { --ease: var(--easeInQuad); }
[ease="easeOutQuad"]    { --ease: var(--easeOutQuad); }
[ease="easeInOutQuad"]  { --ease: var(--easeInOutQuad); }

[ease="easeInCubic"]    { --ease: var(--easeInCubic); }
[ease="easeOutCubic"]   { --ease: var(--easeOutCubic); }
[ease="easeInOutCubic"] { --ease: var(--easeInOutCubic); }

[ease="easeInQuart"]    { --ease: var(--easeInQuart); }
[ease="easeOutQuart"]   { --ease: var(--easeOutQuart); }
[ease="easeInOutQuart"] { --ease: var(--easeInOutQuart); }

[ease="easeInQuint"]    { --ease: var(--easeInQuint); }
[ease="easeOutQuint"]   { --ease: var(--easeOutQuint); }
[ease="easeInOutQuint"] { --ease: var(--easeInOutQuint); }

[ease="easeInExpo"]     { --ease: var(--easeInExpo); }
[ease="easeOutExpo"]    { --ease: var(--easeOutExpo); }
[ease="easeInOutExpo"]  { --ease: var(--easeInOutExpo); }

[ease="easeInCirc"]     { --ease: var(--easeInCirc); }
[ease="easeOutCirc"]    { --ease: var(--easeOutCirc); }
[ease="easeInOutCirc"]  { --ease: var(--easeInOutCirc); }

[ease="easeInBack"]     { --ease: var(--easeInBack); }
[ease="easeOutBack"]    { --ease: var(--easeOutBack); }
[ease="easeInOutBack"]  { --ease: var(--easeInOutBack); }

/* Invisible */
.invisible, .hide { opacity: 0; }

/* Infinite Loop animation */
.infinite, .loop { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; }

/* Reverse animation */
.reverse { animation-direction: reverse; }

/* Alternate animation */
.alternate { -webkit-animation-direction: alternate; animation-direction: alternate; }

/* Alternate animation */
.alternate-reverse { animation-direction: alternate-reverse; }


/* fade in */
[animation="fadein"] { --animation-name: fadeIn; }

/* fades in slide up */
[animation="fadein-up"] { --animation-name: fadeInUp; }

/* fades in slide down */
[animation="fadein-down"] { --animation-name: fadeInDown; }

/* fades in slide from the right */
[animation="fadein-right"] { --animation-name: fadeInRight; }

/* fades in slide from the left */
[animation="fadein-left"] { --animation-name: fadeInLeft; }

/* fade out */
[animation="fadeout"] { --animation-name: fadeOut; }

/* fade out down */
[animation="fadeout-down"] { --animation-name: fadeOutDown; }

/* flash */
[animation="flash"] { --animation-name: flash; }

/* pulse */
[animation="pulse"] { --animation-name: pulse; }

/* wobble */
[animation="wobble"] { --animation-name: wobble; }

/* shake */
[animation="shake"] { --animation-name: shake; }

/* roll in  */
[animation="rollin"] { --animation-name: rollIn; }

/* roll out  */
[animation="rollout"] { --animation-name: rollOut; }

/* zoom in  */
[animation="zoomin"] { --animation-name: zoomIn; }

/* zoom out */
[animation="zoomout"] { --animation-name: zoomIn; animation-direction: reverse; }

/* zoom down  */
[animation="zoomin-down"] { --animation-name: zoomInDown; }

/* bounce */
[animation="bounce"] { --animation-name: bounce; -webkit-transform-origin: center bottom; transform-origin: center bottom; }

/* bounce in (it's like a zoom thing) */
[animation="bouncein"] { --animation-name: bounceIn; }

/* scale in */
[animation="scalein"] { --animation-name: scaleIn; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ(0px); transform: translateZ(0px); }

/* flip */
[animation="flip"] { --animation-name: flip; -webkit-backface-visibility: visible; backface-visibility: visible;  }

/* flip in left */
[animation="flipin-x"] { --animation-name: flipInX; -webkit-backface-visibility: visible!important; backface-visibility: visible!important;  }

/* flip out left  */
[animation="flipout-x"] { --animation-name: flipOutX; -webkit-backface-visibility: visible!important; backface-visibility: visible!important; }

/* flip in down */
[animation="flipin-y"] { --animation-name: flipInY; -webkit-backface-visibility: visible!important; backface-visibility: visible!important;  }

/* flip out down */
[animation="flipout-y"] { --animation-name: flipOutY; -webkit-backface-visibility: visible!important; backface-visibility: visible!important;  }


/**** Keyframes x Animations */

/* fade in */
@-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }

/* fade in slide up */
@-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 20%, 0); transform: translate3d(0, 20%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } }
@keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 20%, 0); transform: translate3d(0, 20%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } }

/* fade in slide down */
@-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -20%, 0); transform: translate3d(0, -20%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } }
@keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -20%, 0); transform: translate3d(0, -20%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } }

/* fade in slide right */
@-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(20%, 0, 0); transform: translate3d(20%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } }
@keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(20%, 0, 0); transform: translate3d(20%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } }

/* fade in slide left */
@-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-20%, 0, 0); transform: translate3d(-20%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } }
@keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-20%, 0, 0); transform: translate3d(-20%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } }

/* fade out */
@-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } }

/* fade out down */
@-webkit-keyframes fadeOutDown { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, 110%, 0); transform: translate3d(0, 110%, 0); } }
@keyframes fadeOutDown { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, 110%, 0); transform: translate3d(0, 110%, 0); } }


/* flash */
@-webkit-keyframes flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } }
@keyframes flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } }

/* pulse */
@-webkit-keyframes pulse  { 
  0% { -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1); }
  50% { -webkit-transform: scale3d(1.05,1.05,1.05); transform: scale3d(1.05,1.05,1.05); }
  100% { -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1); }
}
@keyframes pulse  { 
  0% { -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1); }
  50% { -webkit-transform: scale3d(1.05,1.05,1.05); transform: scale3d(1.05,1.05,1.05); }
  100% { -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1); }
}

/* shake */
@-webkit-keyframes shake  { 
  from, to { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
  10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px,0,0); transform: translate3d(-10px,0,0); }
  20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px,0,0); transform: translate3d(10px,0,0); }
}
@keyframes shake  { 
  from, to { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
  10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px,0,0); transform: translate3d(-10px,0,0); }
  20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px,0,0); transform: translate3d(10px,0,0); }
}

/* roll in */
@-webkit-keyframes rollIn  { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } to { opacity: 1; -webkit-transform: none; transform: none; } }
@keyframes rollIn  { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } to { opacity: 1; -webkit-transform: none; transform: none; } }

/* roll out */
@-webkit-keyframes rollOut  { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } }
@keyframes rollOut  { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } }

/* zoom in */
@-webkit-keyframes zoomIn  { from { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } }
@keyframes zoomIn  { from { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } }

/* roll in down */
@-webkit-keyframes zoomInDown  { 
  0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); }
  60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); }
}
@keyframes zoomInDown  { 
  0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); }
  60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); }
}

/* bounce */
@-webkit-keyframes bounce  { 
  from, 20%, 53%, 80%, to { --ease: cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
  40%, 43% { --ease: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); }
  70% { --ease: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); }
  90% { -webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0); }
}
@keyframes bounce  { 
  from, 20%, 53%, 80%, to { --ease: cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
  40%, 43% { --ease: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); }
  70% { --ease: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); }
  90% { -webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0); }
}

/* scale in */
@-webkit-keyframes scaleIn { 
    from { opacity: 0; -webkit-transform: scale(3); transform: scale(3); } 
    to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 
}
@keyframes scaleIn { 
    from { opacity: 0; -webkit-transform: scale(3); transform: scale(3); } 
    to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 
}

/* flip */
@-webkit-keyframes flip  { 
  from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
  40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
  50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
  80% { -webkit-transform: perspective(400px) scale3d(.95, .95, .95); transform: perspective(400px) scale3d(.95, .95, .95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
  to { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
}
@keyframes flip  { 
  from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
  40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
  50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
  80% { -webkit-transform: perspective(400px) scale3d(.95, .95, .95); transform: perspective(400px) scale3d(.95, .95, .95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
  to { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
}

/* flip in x */
@-webkit-keyframes flipInX  { 
  from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; }
  40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
  60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; }
  80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); }
  to { -webkit-transform: perspective(400px); transform: perspective(400px); }
}
@keyframes flipInX  { 
  from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; }
  40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
  60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; }
  80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); }
  to { -webkit-transform: perspective(400px); transform: perspective(400px); }
}

/* flip out x */
@-webkit-keyframes flipOutX  { 
  from { -webkit-transform: perspective(400px); transform: perspective(400px); }
  30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; }
  to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; }
}
@keyframes flipOutX  { 
  from { -webkit-transform: perspective(400px); transform: perspective(400px); }
  30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; }
  to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; }
}

/* flip in y */
@-webkit-keyframes flipInY  { 
  from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; }
  40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
  60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; }
  80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
  to { -webkit-transform: perspective(400px); transform: perspective(400px); }
}
@keyframes flipInY  { 
  from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; }
  40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
  60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; }
  80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
  to { -webkit-transform: perspective(400px); transform: perspective(400px); }
}

/* flip out y */
@-webkit-keyframes flipOutY  { 
  from { -webkit-transform: perspective(400px); transform: perspective(400px); }
  30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; }
  to { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; }
}
@keyframes flipOutY  { 
  from { -webkit-transform: perspective(400px); transform: perspective(400px); }
  30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; }
  to { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; }
}

/* wobble */
@-webkit-keyframes wobble {
  from { -webkit-transform: none; transform: none; }
  15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);}
  30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);}
  45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); }
  60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); }
  75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); }
  to { -webkit-transform: none; transform: none; }
}
@keyframes wobble {
  from { -webkit-transform: none; transform: none; }
  15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);}
  30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);}
  45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); }
  60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); }
  75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); }
  to { -webkit-transform: none; transform: none; }
}

/* bounce in */
@-webkit-keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); }
  0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); }
  20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); }
  40% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); }
  60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); }
  80% { -webkit-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97); }
  to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}
@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); }
  0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); }
  20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); }
  40% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); }
  60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); }
  80% { -webkit-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97); }
  to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}