/* ///////////////////////////////////////////////

  Elements v1.7 - a lightweight css framework.
  by Robbert A. Schipper, robbert.schipper74@gmail.com.
  Copyright 2023. Free to use under MIT license.

/////////////////////////////////////////////// */


:root {

/* theme colors */

--bg-body: var(--white);
--dark: var(--gray-095);
--light: var(--gray-005);
--primary-color: hsl(330, 75%, 50%);
--primary-color-over: hsl(330, 75%, 40%);
--secondary-color: hsl(200, 100%, 70%);
--secondary-color-over: hsl(200, 100%, 60%);

/* graytones */

--white: hsl(0, 0%, 100%);
--gray-subtle: hsl(0, 0%, 96%);
--gray-005: hsl(0, 0%, 95%);
--gray-010: hsl(0, 0%, 90%);
--gray-015: hsl(0, 0%, 85%); 
--gray-020: hsl(0, 0%, 80%);
--gray-025: hsl(0, 0%, 75%);
--gray-030: hsl(0, 0%, 70%);
--gray-035: hsl(0, 0%, 65%);
--gray-040: hsl(0, 0%, 60%);
--gray-045: hsl(0, 0%, 55%); 
--gray-050: hsl(0, 0%, 50%);
--gray-055: hsl(0, 0%, 45%);
--gray-060: hsl(0, 0%, 40%);
--gray-065: hsl(0, 0%, 35%);
--gray-070: hsl(0, 0%, 30%);
--gray-075: hsl(0, 0%, 25%);
--gray-080: hsl(0, 0%, 20%); 
--gray-085: hsl(0, 0%, 15%);
--gray-090: hsl(0, 0%, 10%);
--gray-095: hsl(0, 0%, 5%);
--black: hsl(0, 0%, 0%);

/* shadow */

--shadow: rgba(0, 0, 0, .1) 0 0 1rem;

/* borders */

--border-style: solid;
--border-width-sm: 1px;
--border-width-md: .16rem;
--border-width-xl: .48rem;
--border-radius: 1rem;

/* text */

--sans-serif: "Source Sans Pro", Arial, helvetica, sans-serif;
--serif: "Source Serif", times, serif;
--handwritten: "Gloria Hallelujah";

--text-color: var(--gray-080);
--text-muted: var(--gray-050);

--line-height-xs: 1.00;
--line-height-sm: 1.25;
--line-height-md: 1.50;
--line-height-lg: 1.75;
--line-height-xl: 2.00;

/* font-weights */

--fw-thin: 200;
--fw-light: 300;
--fw-normal: 400;
--fw-bold: 600;
--fw-bolder: 700;
--fw-boldest: 900;

/* forms */

--form-text-color: var(--text-color);
--form-text-color-focus: var(--text-color);
--form-text-placeholder: var(--gray-050);
--form-text-placeholder-focus: var(--gray-020);
--form-input-border-radius: .48rem;
--form-input-border: var(--white) solid 1px;
--form-input-border-focus: var(--secondary-color) solid 1px;
--form-radio-border: var(--primary-color) solid 1px;
--form-shadow: none;
--form-input-background: var(--white);
--form-input-background-focus: var(--white);

}

/* setting rem sizes */

@media (min-width: 0px) { :root { font-size: 15px; } }
@media (min-width: 768px) { :root { font-size: 16px; } }
@media (min-width: 1280px) { :root { font-size: 18px; } }
@media (min-width: 1600px) { :root { font-size: 20px; } }
@media (min-width: 1920px) { :root { font-size: 24px; } }
@media (min-width: 2400px) { :root { font-size: 32px; } }

/* basics */

* { scroll-behavior: smooth; line-height: var(--line-height-md); transition: 0; }

html { float: left; width: 100%; height: 100%; margin: 0; padding: 0; overflow-x: hidden !important; }
body { float: left; width: 100%; height: auto; margin: 0; padding: 0; overflow-x: hidden !important; background: var(--bg-body); }

/* 'blocks' here? */

header { float: left; width: 100%; }

img { border: none !important; }


/* grid */ 

.container { max-width: 72rem; margin: 0 auto; }
.row { float: left; width: 100% !important; box-sizing: border-box; display: flex; flex-wrap: wrap; }
.col { float: left; height: auto !important; box-sizing: border-box; flex: 1 0 0%; overflow: hidden; }

@media (min-width: 0px) and (max-width: 600px) {
    .cs-0, .d-sm-none { display: none; }
    .cs-1, .col-1 { width: 8.333%; flex: 0 0 auto; }
    .cs-2, .col-2 { width: 16.667%; flex: 0 0 auto; }
    .cs-3, .col-3 { width: 25.000%; flex: 0 0 auto; }
    .cs-4, .col-4 { width: 33.333%; flex: 0 0 auto; }
    .cs-5, .col-5 { width: 41.667%; flex: 0 0 auto; }
    .cs-6, .col-6 { width: 50.000%; flex: 0 0 auto; }
    .cs-7, .col-7 { width: 58.333%; flex: 0 0 auto; }
    .cs-8, .col-8 { width: 66.667%; flex: 0 0 auto; }
    .cs-9, .col-9 { width: 75.000%; flex: 0 0 auto; }
    .cs-10, .col-10 { width: 83.333%; flex: 0 0 auto; }
    .cs-11, .col-11 { width: 91.667%; flex: 0 0 auto; }
    .cs-12, .col-12 { width: 100.000%; flex: 0 0 auto; }
    .os-1, .offset-1 { margin-left: 8.333%; }
    .os-2, .offset-2 { margin-left: 16.667%; }
    .os-3, .offset-3 { margin-left: 25.000%; }
    .os-4, .offset-4 { margin-left: 33.333%; }
    .os-5, .offset-5 { margin-left: 41.667%; }
    .os-6, .offset-6 { margin-left: 50.000%; }
    .os-7, .offset-7 { margin-left: 58.333%; }
    .os-8, .offset-8 { margin-left: 66.667%; }
    .os-9, .offset-9 { margin-left: 75.000%; }
    .os-10, .offset-10 { margin-left: 83.333%; }
    .os-11, .offset-11 { margin-left: 91.667%; }
    .order-1 { order: 1 !important; }
    .order-2 { order: 2 !important; }
    .order-3 { order: 3 !important; }
    .order-4 { order: 4 !important; }
    .order-5 { order: 5 !important; }
    .order-6 { order: 6 !important; }
}

@media (min-width: 601px) and (max-width: 1024px) {
    .cm-0, .d-md-none { display: none; }
    .cm-1, .col-md-1 { width: 8.333%; flex: 0 0 auto; }
    .cm-2, .col-md-2 { width: 16.667%; flex: 0 0 auto; }
    .cm-3, .col-md-3 { width: 25.000%; flex: 0 0 auto; }
    .cm-4, .col-md-4 { width: 33.333%; flex: 0 0 auto; }
    .cm-5, .col-md-5 { width: 41.667%; flex: 0 0 auto; }
    .cm-6, .col-md-6 { width: 50.000%; flex: 0 0 auto; }
    .cm-7, .col-md-7 { width: 58.333%; flex: 0 0 auto; }
    .cm-8, .col-md-8 { width: 66.667%; flex: 0 0 auto; }
    .cm-9, .col-md-9 { width: 75.000%; flex: 0 0 auto; }
    .cm-10, .col-md-10 { width: 83.333%; flex: 0 0 auto; }
    .cm-11, .col-md-11 { width: 91.667%; flex: 0 0 auto; }
    .cm-12, .col-md-12 { width: 100.000%; flex: 0 0 auto; }
    .om-1, .offset-md-1 { margin-left: 8.333%; }
    .om-2, .offset-md-2 { margin-left: 16.667%; }
    .om-3, .offset-md-3 { margin-left: 25.000%; }
    .om-4, .offset-md-4 { margin-left: 33.333%; }
    .om-5, .offset-md-5 { margin-left: 41.667%; }
    .om-6, .offset-md-6 { margin-left: 50.000%; }
    .om-7, .offset-md-7 { margin-left: 58.333%; }
    .om-8, .offset-md-8 { margin-left: 66.667%; }
    .om-9, .offset-md-9 { margin-left: 75.000%; }
    .om-10 .offset-md-10 { margin-left: 83.333%; }
    .om-11, .offset-md-11 { margin-left: 91.667%; }
    .order-md-1 { order: 1 !important; }
    .order-md-2 { order: 2 !important; }
    .order-md-3 { order: 3 !important; }
    .order-md-4 { order: 4 !important; }
    .order-md-5 { order: 5 !important; }
    .order-md-6 { order: 6 !important; }
 ; }

  @media (min-width: 1025px) {
    .cl-0, .d-lg-none { display: none; }
    .cl-1, .col-lg-12 { width: 8.333%; flex: 0 0 auto; }
    .cl-2, .col-lg-12 { width: 16.667%; flex: 0 0 auto; }
    .cl-3, .col-lg-3 { width: 25.000%; flex: 0 0 auto; }
    .cl-4, .col-lg-4 { width: 33.333%; flex: 0 0 auto; }
    .cl-5, .col-lg-5 { width: 41.667%; flex: 0 0 auto; }
    .cl-6, .col-lg-6 { width: 50.000%;flex: 0 0 auto; }
    .cl-7, .col-lg-7 { width: 58.333%; flex: 0 0 auto; }
    .cl-8, .col-lg-8 { width: 66.667%; flex: 0 0 auto; }
    .cl-9, .col-lg-9 { width: 75.000%; flex: 0 0 auto; }
    .cl-10, .col-lg-10 { width: 83.333%; flex: 0 0 auto; }
    .cl-11, .col-lg-11 { width: 91.667%; flex: 0 0 auto; }
    .cl-12, .col-lg-12 { width: 100.000%; flex: 0 0 auto; }
    .ol-1, .offset-lg-1 { margin-left: 8.333%; }
    .ol-2, .offset-lg-2 { margin-left: 16.667%; }
    .ol-3, .offset-lg-3 { margin-left: 25.000%; }
    .ol-4, .offset-lg-4 { margin-left: 33.333%; }
    .ol-5, .offset-lg-5 { margin-left: 41.667%; }
    .ol-6, .offset-lg-6 { margin-left: 50.000%; }
    .ol-7, .offset-lg-7 { margin-left: 58.333%; }
    .ol-8, .offset-lg-8 { margin-left: 66.667%; }
    .ol-9, .offset-lg-9 { margin-left: 75.000%; }
    .ol-10, .offset-lg-10 { margin-left: 83.333%; }
    .ol-11, .offset-lg-11 { margin-left: 91.667%; }
    .order-lg-1 { order: 1 !important; }
    .order-lg-2 { order: 2 !important; }
    .order-lg-3 { order: 3 !important; }
    .order-lg-4 { order: 4 !important; }
    .order-lg-5 { order: 5 !important; }
    .order-lg-6 { order: 6 !important; }
 ; }


/* text */

html, body { font-family: var(--sans-serif); font-size: 1rem; font-weight: var(--fw-normal); color: var(--text-color); line-height: var(--line-height-sm); }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: inherit; font-weight: var(--fw-boldest); line-height: var(--line-height-md); margin: 0 !important; overflow-wrap: break-word; }

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .h1 a, .h2 a, .h3 a, .h4 a, .h5 a, .h6 a { text-decoration: none !important; }

h1, .h1 { font-size: calc(1rem + 1.28vw) !important; }
h2, .h2 { font-size: calc(1rem + 0.32vw) !important; }
h3, .h3 { font-size: calc(1rem + 0.32vw) !important; }
h4, .h4 { font-size: calc(1rem + 0.32vw) !important; }
h5, .h5 { font-size: calc(1rem + 0.32vw) !important; }
h6, .h6 { font-size: calc(1rem + 0.32vw) !important; }

p { font-family: inherit; font-size: 1rem; font-weight: var(--fw-normal); margin: .24rem 0 2rem; line-height: var(--line-height-lg); }

a, a:visited { text-decoration: none; color: var(--primary-color) !important; }
a:hover { text-decoration: none; color: var(--primary-color-over) !important; }

a.text-secondary, a.text-secondary:visited { text-decoration: none; color: var(--secondary-color) !important; }
a.text-secondary:hover { text-decoration: none; color: var(--secondary-color-over) !important; }

a.text-muted, a.text-muted:visited { text-decoration: none; color: var(--text-muted) !important; }
a.text-muted:hover { text-decoration: none; color: var(--gray-015) !important; }

q { font-weight: normal; font-style: normal !important; color: var(--text-muted); }
u, .underline { text-decoration: underline; }
i, .italic, .oblique { font-style: italic; }
b { font-weight: var(--fw-bold) ; }

mark, .mark { line-height: 1.6; padding: .16rem .64rem; vertical-align: baseline; box-decoration-break: clone; -webkit-box-decoration-break: clone; border-radius: .32rem; }
sup { font-size: 48%; }
sub { font-size: 48%; }
blockquote { display: block; margin: 1rem 0 1rem; }
cite::before, cite::after { content: ""; color: var(--text-muted); }
cite { display: block; font-style: normal; color: var(--text-muted); margin: 1rem 0 0; }

hr { clear: both; width: 8%; height: .48rem; margin: 2rem 92% 2rem 0; border: none; border-radius: .24rem; background-color: currentColor; }
.divider { clear: both; width: 4rem; height: .48rem; border: none; border-radius: .24rem; background-color: currentColor; }
::selection { color: var(--white); background: var(--primary-color); }


/* lists */

ul, ol { clear: both; margin: .24rem 1rem 2rem !important; padding-left: auto !important; }

ul li { line-height: var(--line-height-lg); list-style: none; margin: 0; }
ol li { line-height: var(--line-height-lg); margin: 0;  }

ul li::before { content: "\25AA"; color: var(--primary-color); display: inline-block; width: 1rem; margin-left: -1rem; }
ul.list-unstyled li::before { content: ""; width: 0 ; margin-left: -1rem; padding-left: -1rem; }


/* font-family */

.sans-serif { font-family: var(--sans-serif); }
.serif { font-family: var(--serif); }
.handwritten { font-family: var(--handwritten); }


/* font-sizes */

.fs-1 { font-size: calc(1rem + 1.60vw) !important; }
.fs-2 { font-size: calc(1rem + 1.28vw) !important; }
.fs-3 { font-size: calc(1rem + 0.96vw) !important; }
.fs-4 { font-size: calc(1rem + 0.64vw) !important; }
.fs-5 { font-size: calc(1rem + 0.32vw) !important; }
.fs-6 { font-size: calc(1rem + 0.00vw) !important; }

.lead { font-size: calc(1rem + 0.16vw) !important; }
.small, small { font-size: .88rem !important; }

.display-1 { font-size: calc(1.28rem + 3.52vw) !important; line-height: 1.28 !important; }
.display-2 { font-size: calc(1.28rem + 3.20vw) !important; line-height: 1.28 !important; }
.display-3 { font-size: calc(1.28rem + 2.88vw) !important; line-height: 1.28 !important; }
.display-4 { font-size: calc(1.28rem + 2.56vw) !important; line-height: 1.28 !important; }
.display-5 { font-size: calc(1.28rem + 2.24vw) !important; line-height: 1.28 !important; }
.display-6 { font-size: calc(1.28rem + 1.92vw) !important; line-height: 1.28 !important; }


/* font-weight */

.fw-thin { font-weight: var(--fw-thin) !important; }
.fw-light { font-weight: var(--fw-light) !important; }
.fw-normal { font-weight: var(--fw-normal) !important; }
.fw-bold { font-weight: var(--fw-bold) !important; }
.fw-bolder { font-weight: var(--fw-bolder) !important; }
.fw-boldest { font-weight: var(--fw-boldest) !important; }


/* text-align */

.text-start { text-align: left !important; }
.text-center { text-align: center !important; }
.text-end { text-align: right !important; }

@media (min-width: 0px) {
  .text-sm-start { text-align: left !important; } 
  .text-sm-center { text-align: center !important; }
  .text-sm-end { text-align: right !important; }
}

@media (min-width: 769px) {
  .text-md-start { text-align: left !important; } 
  .text-md-center { text-align: center !important; }
  .text-md-end { text-align: right !important; }
}

@media (min-width: 1025px) {
  .text-lg-start { text-align: left !important; } 
  .text-lg-center { text-align: center !important; }
  .text-lg-end { text-align: right !important; }
}


/* text-transform */

.text-lowercase { text-transform: lowercase !important; }
.text-uppercase { text-transform: uppercase !important; }
.text-capitalize { text-transform: capitalize !important; }


/* text-colors */

.text-primary { color: var(--primary-color) !important; }
.text-secondary { color: var(--secondary-color) !important; }
.text-color{ color: var(--text-color) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-black { color: var(--black) !important; }
.text-white { color: var(--white) !important; }

/* icons */

.i-1, .i-2, .i-3, .i-4, .i-5, .i-6 { width: auto; margin: 0 0 1px; vertical-align: middle !important; text-decoration: none !important; line-height: inherit; }
.i-1 a:hover, .i-2 a:hover, .i-3 a:hover, .i-4 a:hover, .i-5 a:hover, .i-6 a:hover { text-decoration: none !important; }

a.i-1, a.i-2, a.i-3, a.i-4, a.i-5, a.i-6 { text-decoration: none !important; }

.i-1 { height: calc(1rem + 2vw) !important; }
.i-2 { height: calc(1rem + 1.6vw) !important; }
.i-3 { height: calc(1rem + 1.28vw) !important; }
.i-4 { height: calc(1rem + 0.64vw) !important; }
.i-5 { height: calc(1rem + 0.32vw) !important; }
.i-6 { height: calc(1rem + 0.00vw) !important; }


/* Align */

.align-baseline { vertical-align: baseline !important; }
.align-top { vertical-align: top !important; }
.align-middle { vertical-align: middle !important; }
.align-bottom { vertical-align: bottom !important; }
.align-text-bottom { vertical-align: text-bottom !important; }
.align-text-top { vertical-align: text-top !important; }

.align-center { margin: 0px auto; }

.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.align-items-center { align-items: center !important;}
.align-items-baseline { align-items: baseline !important; }
.align-items-stretch { align-items: stretch !important; }


/* badge */

.badge { display: inline-block; margin: 0; padding: .2em 1em; font-size: .8em !important; line-height: var(--h-line-height) !important; vertical-align: baseline; border-radius: 2rem; }
.badge:empty { display: none !important}

.pill { display: inline-block; }


/* background-colors */

.bg-primary { background-color: var(--primary-color); }
.bg-secondary { background-color: var(--secondary-color); }
.bg-dark { background-color: var(--dark); }
.bg-light { background-color: var(--light); }
.bg-black { background-color: var(--black); }
.bg-white { background-color: var(--white); }


/* overlay */

.white-80 { float: left; width: 100%; height: 100%; margin: 0; padding: 0; background: rgba(255, 255, 255, .50) }

.overlay-08 { float: left; width: 100%; height: 100%; margin: 0; padding: 0; background: rgba(0, 0, 0, .08) }
.overlay-16 { float: left; width: 100%; height: 100%; margin: 0; padding: 0; background: rgba(0, 0, 0, .16) }
.overlay-24 { float: left; width: 100%; height: 100%; margin: 0; padding: 0; background: rgba(0, 0, 0, .24) }
.overlay-32 { float: left; width: 100%; height: 100%; margin: 0; padding: 0; background: rgba(0, 0, 0, .32) }
.overlay-48 { float: left; width: 100%; height: 100%; margin: 0; padding: 0; background: rgba(0, 0, 0, .48) }
.overlay-64 { float: left; width: 100%; height: 100%; margin: 0; padding: 0; background: rgba(0, 0, 0, .64) }
.overlay-80 { float: left; width: 100%; height: 100%; margin: 0; padding: 0; background: rgba(0, 0, 0, .80) }

.gradient { float: left; width: 100%; height: 100%; margin: 0; padding: 0;
  background: linear-gradient(rgba(0, 0, 0, .16) 72%, rgba(0, 0, 0, .48) 100%); }

.bg-overlay-16 { background-color: rgba(0, 0, 0, .16); background-blend-mode: overlay ; }
.bg-overlay-24 { background-color: rgba(0, 0, 0, .24); background-blend-mode: overlay ; }
.bg-overlay-32 { background-color: rgba(0, 0, 0, .32); background-blend-mode: overlay ; }
.bg-overlay-48 { background-color: rgba(0, 0, 0, .48); background-blend-mode: overlay ; }
.bg-overlay-64 { background-color: rgba(0, 0, 0, .64); background-blend-mode: overlay ; }
.bg-overlay-80 { background-color: rgba(0, 0, 0, .80); background-blend-mode: overlay ; }
.bg-overlay-96 { background-color: rgba(0, 0, 0, .96); background-blend-mode: overlay ; }


/* tables */

table, thead, tbody, tr { display: block; width: 100% !important; }
thead { font-size: 1.12rem; font-weight: var(--fw-bolder); }
tbody { font-weight: var(--fw-normal); }
th, td { vertical-align: top; padding: .48rem 1rem; text-align: left ; }
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }

table ul, table ol { margin: 0 !important; } /* hack */


 /* forms */

fieldset { display: block; width: 100%; margin: 0; padding: 0; border: none !important; }
legend { display: block; width: 100%; font-weight: var(--fw-bold); font-size: 1.12rem; margin: 1rem 0; padding: 0; }
label { color: var(--text-color); line-height: 3rem; margin: 0; }

input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=url], select, textarea { width: 100% !important; height: auto; margin: 0; padding: 1rem; font-family: var(--sans-serif); font-weight: var(--fw-normal); font-size: 1rem; vertical-align: middle; line-height: var(--line-height-md); color: var(--form-text-color); box-sizing: border-box; border-radius: var(--form-input-border-radius); border: var(--form-input-border); background-color: var(--form-input-background); -webkit-appearance: none; -moz-appearance: none; appearance: none; transition: .32s; }

input[type="radio"] { -webkit-appearance: none;-moz-appearance: none; appearance: none; width: 1rem; height: 1rem; margin-top: 0; vertical-align: middle; border: var(--form-radio-border); border-radius: 50%; box-shadow: none; background-color: var(--form-input-background); display: inline-block; }
input[type="radio"]:checked { border: var(--form-radio) solid 1px; background-color: var(--primary-color); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}

input[type="checkbox"], input[type="checkbox"]:focus { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 1rem; height: 1rem; margin: 0 0 -3px; padding: 0 !important; vertical-align: baseline !important; border: var(--form-radio-border); border-radius: .24rem; box-shadow: none; background-color: var(--white); }
input[type="checkbox"]:checked { border: var(--primary-color) solid 1px; background-color: var(--primary-color); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

input[type="range"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; height: .48rem; border: none; background-color: var(--light); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 1rem; height: 1rem; border: none; border-radius: 50%; box-shadow: none; background: var(--primary-color); cursor: pointer; }

input::placeholder, textarea::placeholder { color: var(--form-text-placeholder); }
input:focus::placeholder, textarea:focus::placeholder { color: var(--form-text-placeholder-focus); }

textarea { min-height: 10rem !important; }

select { background-repeat: no-repeat; background-position: right 1rem center; background-size: 1rem; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
select:optional { color: var(--text-color); }
select::selection { color: var(--text-muted) !important; }

input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="url"]:focus, select:focus, textarea:focus { border: var(--form-input-border-focus); outline: 0; box-shadow: var(--form-shadow); background-color: var(--form-input-background-focus); }
input[type="checkbox"]:focus, input[type="radio"]:focus, input[type="range"]:focus { border: var(--form-input-border-focus); box-shadow: none !important; }

input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 1rem; height: 1rem; background-position: right center; background-repeat: no-repeat; background-size: 1rem; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='rgba(255, 255, 255, .48)' d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z'/%3e%3c/svg%3e"); }

input[type="submit"], button[type="submit"]  { width: 92%; margin: 0 4%; }

.form-check-label { display: inline !important; }
.honingpot { display: none !important; }

@media (max-width: 768px) { form button { width: 100%; } }


/* buttons */

.btn, button, input[type="submit"] { display: inline-block; height: 3rem; line-height: calc(3rem - (2 * var(--border-width-sm))); margin: 0; padding: 0 1.6rem; vertical-align: baseline; text-decoration: none; white-space: nowrap; border: solid 1px !important; border-radius: 3rem !important; transition: .5s; cursor: pointer; box-sizing: border-box !important; background-color: transparent; }
.btn:hover, button:hover { text-decoration: none; }

.btn-sm { height: 2rem !important; line-height: calc(2rem - (2 * var(--border-width-sm))); margin: .5rem 0; padding: 0; vertical-align: baseline !important; }
.btn-lg { height: 4rem !important; line-height: calc(4rem - (2 * var(--border-width-sm))); padding: 0; vertical-align: baseline !important; }

.btn-primary, .btn-primary:visited { color: var(--white) !important; border-color: var(--primary-color) !important; background-color: var(--primary-color); }
.btn-primary:hover { color: var(--white) !important; border-color: var(--primary-color-over) !important; background-color: var(--primary-color-over) !important; }

.btn-secondary, .btn-secondary:visited { color: var(--white) !important; border-color: var(--secondary-color) !important; background-color: var(--secondary-color); }
.btn-secondary:hover { color: var(--white) !important; border-color: var(--secondary-color-over) !important; background-color: var(--secondary-color-over) !important; }

.btn-white, .btn-white:visited { color: var(--black) !important; border-color: var(--gray-subtle) !important; background-color: var(--gray-subtle); }
.btn-white:hover { color: var(--primary-color) !important; border-color: var(--white) !important; background-color: var(--white) !important; }

.btn-outline-primary, .btn-outline-primary:visited { color: var(--text-color) !important; border: var(--primary-color) var(--border-style) var(--border-width-sm) !important; background: transparent !important; }
.btn-outline-primary:hover { color: var(--primary-color) !important; border: var(--primary-color) var(--border-style) var(--border-width-sm); background: transparent !important; }

.btn-outline-secondary, .btn-outline-secondary:visited { color: var(--text-color) !important; border: var(--secondary-color) var(--border-style) var(--border-width-sm) !important; background: transparent !important; }
.btn-outline-secondary:hover { color: var(--white) !important; border: var(--secondary-color) var(--border-style) var(--border-width-sm); background: var(--secondary-color) !important; }

.btn-outline-white, .btn-outline-white:visited { color: var(--white) !important; border: var(--white) var(--border-style) var(--border-width-sm) !important; background: transparent !important; }
.btn-outline-white:hover { color: var(--white) !important; border: var(--primary-color) var(--border-style) var(--border-width-sm); background: transparent !important; }


/* cards */

.card { position: relative; width: 100%; height: 100% !important; word-wrap: break-word; box-sizing: border-box; overflow: hidden; transition: .5s; margin: 0; padding: 0; cursor: pointer; border-radius: var(--border-radius); box-shadow: var(--shadow) !important; background: var(--white); }
.card:hover { box-shadow: var(--shadow) !important;  }
.card-img { display: block; width: 100%; height: auto; border: none !important; }
.card-header { display: flex; width: 100%; height: auto; padding: 0 1rem 2rem; border: none !important; box-sizing: border-box; align-items: flex-end !important; aspect-ratio: 3/2; }

.card:hover { transform: perspective(1px) scale3d(1, 1, 1); }
.card-header h3 .badge { font-size: .8em !important; }
.card-body { display: block; margin: 0; padding: 1.6rem 1rem 2rem !important;}
.card p { margin-bottom: .5rem !important; }
.card-link { display: block; font-weight: var(--fw-normal); color: var(--primary-color); text-decoration: none; }
.card-link:hover { text-decoration: none !important; border: none !important; }


/* jumbotron beta */

.jumbotron { position: relative; width: 100%; height: 100% !important; word-wrap: break-word; box-sizing: border-box; overflow: hidden; transition: .5s; margin: 0; cursor: pointer; border-radius: var(--border-radius); flex-wrap: wrap; align-items: flex-end; }
.jumbotron-img { display: block; width: 100%; height: 100%; padding: 8rem 0 0; border: none !important; border-radius: var(--border-radius); }
.jumbotron-body { display: block; margin: 0; padding: 1rem 2rem; background-color: rgba(0, 0, 0, .24); }
.jumbotron h1, .jumbotron h2, .jumbotron h3, .jumbotron h4, .jumbotron h5, .jumbotron h6 { margin-bottom: .5rem !important; }
.jumbotron p, .card a { margin-bottom: 0 !important; }
.jumbotron-link { display: block; font-weight: var(--fw-normal); color: var(--primary-color); text-decoration: none; }
.jumbotron-link:hover { text-decoration: none !important; border: none !important; }


/* header */

.header { display: block; width: 100%; padding: 2rem 0; transition: .64s; }
.header-dark { color: var(--white) !important; }
.header-light { color: var(--text-color) !important; }

.header-brand { float: left; width: auto; height: 3rem; margin: 0; border: none; }

.header-link, .header-link:visited { display: inline-flex; height: auto; align-items: center !important; font-family: var(--sans-serif); font-size: 1rem; font-weight: var(--fw-normal); font-style: normal; text-transform: none; text-decoration: none; margin: 0; padding: 0 .64rem; line-height: 3rem; border: transparent solid 1px; border-radius: none; box-sizing: border-box !important; overflow: hidden; transition: .32s; }
.header-link:hover { text-decoration: none; border: transparent solid 1px; }

.header-light .header-link, .header-light .header-link:visited { color: var(--text-color) !important; }
.header-light .header-link:hover { color: var(--primary-color) !important; }

.header-dark .header-link, .header-dark .header-link:visited { color: var(--white) !important; }
.header-dark .header-link:hover { color: var(--primary-color) !important;  }
 
.header-toggler, .header-toggler:hover  { float: right; width: 3rem; height: 100%; margin: 0; cursor: pointer; border: none; background-repeat: no-repeat; background-position: center center; background-size: 2.56rem; }

.header-light .header-toggler { color: var(--primary-color); background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='inherit' height='inherit' fill='hsl(330, 75%, 50%)' class='icon' viewBox='0 0 16 16'%3e%3ctitle%3eSitemap%3c/title%3e%3cpath fill-rule='evenodd' d='M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5'/%3e%3c/svg%3e"); }
.header-light .header-toggler:hover { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='inherit' height='inherit' fill='hsl(330, 75%, 50%)' class='icon' viewBox='0 0 16 16'%3e%3ctitle%3eSitemap%3c/title%3e%3cpath fill-rule='evenodd' d='M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5'/%3e%3c/svg%3e"); }

.header-dark .header-toggler { color: var(--white);  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='inherit' height='inherit' fill='hsl(0, 0%, 100%)' class='icon' viewBox='0 0 16 16'%3e%3ctitle%3eSitemap%3c/title%3e%3cpath fill-rule='evenodd' d='M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z'/%3e%3c/svg%3e"); }
.header-dark .header-toggler:hover { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='inherit' height='inherit' fill='hsl(0, 0%, 100%)' class='icon' viewBox='0 0 16 16'%3e%3ctitle%3eSitemap%3c/title%3e%3cpath fill-rule='evenodd' d='M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5'/%3e%3c/svg%3e"); }

.fixed-top { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; }
.static-top { position: absolute; top: 0; left: 0; right: 0; z-index: 1000 !important; }


/* navbar */

.navbar { position: fixed; top: 0; right: -100vw; z-index: 10000; width: 100vw; height: 100vh; margin: 0; padding: 0; overflow-x: scroll; transition: .5s; }
.navbar-dark { color: var(--white) !important; background-color: var(--dark); }
.navbar-light { color: var(--text-color) !important; background-color: var(--white); }

.navbar-brand { float: left; width: auto; height: 3rem; margin: 0; border: none; }

.nav-link, .nav-link:visited { display: inline-block; width: inherit; padding: .8rem 0; font-family: var(--sans-serif); font-size: 2rem; font-weight: var(--fw-boldest); text-align: center; text-transform: uppercase; text-decoration: none; transition: .32s; }
.nav-link:hover { text-decoration: none; text-indent: .64rem; }

.nav-link { height: 5vh !important; } 

.nav-animation { animation-name: navLinks; animation-duration: 1s; animation-fill-mode: both; }
@keyframes navLinks { from { opacity: 0; transform: translateX(1000px); } to { opacity: 1; transform: translateX(0); } }

.nav-light .nav-link, .nav-light .nav-link:visited { color: var(--white) !important; }
.navbar-light .nav-link:hover { color: var(--white) !important; }
.navbar-dark .nav-link, .navbar-dark .nav-link:visited { color: var(--white) !important; }
.navbar-dark .nav-link:hover { color: var(--white) !important; }

.navbar-toggler, .navbar-toggler:hover { float: right; width: 3rem; height: 3rem; margin: 0; border: none; background-repeat: no-repeat; background-position: center; background-size: 3rem; }

.navbar-light .navbar-toggler { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='inherit' height='inherit' fill='rgba(48, 48, 48, 1)' class='text' viewBox='0 0 16 16'%3e%3cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); }
.navbar-light .navbar-toggler:hover { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='inherit' height='inherit' fill='rgba(240, 16, 144, 1)' viewBox='0 0 16 16'%3e%3cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); }

.navbar-dark .navbar-toggler { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='inherit' height='inherit' fill='rgba(160, 160, 160, 1)' class='text' viewBox='0 0 16 16'%3e%3cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); }
.navbar-dark .navbar-toggler:hover { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='inherit' height='inherit' fill='rgba(255, 255, 255, 1)' viewBox='0 0 16 16'%3e%3cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); } 

.bg-nav { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; margin: 0; z-index: 9000; background-color: rgba(0, 0, 0, .48); }


/* borders */

.border-0, .no-border { border: 0 !important; }
.border { border-style: var(--border-style) !important; border-width: var(--border-width-sm) !important; }

.border-top { border-top: var(--border-style) var(--border-width-sm) !important; }
.border-bottom { border-bottom: var(--border-style) var(--border-width-sm) !important; }

.border-sm { border-width: var(--border-width-sm) !important; }
.border-md { border-width: var(--border-width-md) !important; }
.border-xl { border-width: var(--border-width-xl) !important; }

.border-primary { border-color: var(--primary-color) !important; }
.border-secondary { border-color: var(--secondary-color) !important; }
.border-gray { border-color: var(--gray-020) !important; }


/* svg borders */

.svg-border-bottom svg { position: absolute; bottom: -1px; left: 0; width: 100%; height: auto; }
.svg-border-top svg { position: absolute; top: -1px; left: 0; width: 100%; height: auto; }


/* rounded */

.rounded { border-radius: var(--border-radius); }
.rounded-circle { border-radius: 50% !important; }


/* shadow */

.shadow { box-shadow: var(--shadow); }
.shadow-over { box-shadow: none; transition: .32s; }
.shadow-over:hover { box-shadow: var(--shadow); }


/* Zoom */

.z-1, .z-2, .z-3  { transform: scale(1); transition: .32s; }
.z-1:hover { transform: scale(1.02); }
.z-2:hover { transform: scale(1.04); }
.z-3:hover { transform: scale(1.08); }


/* floating */

.float-start { float: left !important; }
.float-end { float: right !important; }


/* text-align */

.text-start { text-align: left !important; }
.text-center { text-align: center !important; }
.text-end { text-align: right !important; }


/* width & height */

.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }

.vw-10 { width: 10vw !important; }
.vw-20 { width: 20vw !important; }
.vw-25 { width: 25vw !important; }
.vw-30 { width: 30vw !important; }
.vw-40 { width: 40vw !important; }
.vw-50 { width: 50vw !important; }
.vw-60 { width: 60vw !important; }
.vw-70 { width: 70vw !important; }
.vw-75 { width: 75vw !important; }
.vw-80 { width: 80vw !important; }
.vw-90 { width: 90vw !important; }
.vw-100 { width: 100vw !important; }

.vh-10 { height: 10vh !important; }
.vh-20 { height: 20vh !important; }
.vh-25 { height: 25vh !important; }
.vh-30 { height: 30vh !important; }
.vh-40 { height: 40vh !important; }
.vh-50 { height: 50vh !important; }
.vh-60 { height: 60vh !important; }
.vh-70 { height: 70vh !important; }
.vh-75 { height: 75vh !important; }
.vh-80 { height: 80vh !important; }
.vh-90 { height: 90vh !important; }
.vh-100 { height: 100vh !important; }


/* margin */

.m-0 { margin: 0 !important; }
.m-1 { margin: 1rem !important; }
.m-2 { margin: 2rem !important; }
.m-3 { margin: 3rem !important; }
.m-4 { margin: 4rem !important; }
.m-5 { margin: 5rem !important; }
.m-6 { margin: 6rem !important; }
.m-7 { margin: 7rem !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 1rem !important; }
.mt-2 { margin-top: 2rem !important; }
.mt-3 { margin-top: 3rem !important; }
.mt-4 { margin-top: 4rem !important; }
.mt-5 { margin-top: 5rem !important; }
.mt-6 { margin-top: 6rem !important; }
.mt-7 { margin-top: 7rem !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 1rem !important; }
.mb-2 { margin-bottom: 2rem !important; }
.mb-3 { margin-bottom: 3rem !important; }
.mb-4 { margin-bottom: 4rem !important; }
.mb-5 { margin-bottom: 5rem !important; }
.mb-6 { margin-bottom: 6rem !important; }
.mb-7 { margin-bottom: 7rem !important; }

.ms-0 { margin-left: 0 !important; }
.ms-1 { margin-left: 1rem !important; }
.ms-2 { margin-left: 2rem !important; }
.ms-3 { margin-left: 3rem !important; }
.ms-4 { margin-left: 4rem !important; }
.ms-5 { margin-left: 5rem !important; }
.ms-6 { margin-left: 6rem !important; }
.ms-7 { margin-left: 7rem !important; }

.me-0 { margin-right: 0 !important; }
.me-1 { margin-right: 1rem !important; }
.me-2 { margin-right: 2rem !important; }
.me-3 { margin-right: 3rem !important; }
.me-4 { margin-right: 4rem !important; }
.me-5 { margin-right: 5rem !important; }
.me-6 { margin-right: 6rem !important; }
.me-7 { margin-right: 7rem !important; }

.m-auto { margin: auto !important; }
.mx-auto { margin-right: auto !important; margin-left: auto !important; }
.my-auto { margin-top: auto !important; margin-bottom: auto !important; }

.space { margin-left: .32rem; }

/* gutter */

.g-1 { padding: .25rem; }
.g-2 { padding: .50rem; }
.g-3 { padding: .75rem; }


/* padding */

.p-0 { padding: 0 !important; }
.p-1 { padding: 1rem !important; }
.p-2 { padding: 2rem !important; }
.p-3 { padding: 3rem !important; }
.p-4 { padding: 4rem !important; }
.p-5 { padding: 5rem !important; }
.p-6 { padding: 6rem !important; }

.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: 1rem !important; }
.pt-2 { padding-top: 2rem !important; }
.pt-3 { padding-top: 3rem !important; }
.pt-4 { padding-top: 4rem !important; }
.pt-5 { padding-top: 5rem !important; }
.pt-6 { padding-top: 6rem !important; }
.pt-7 { padding-top: 7rem !important; }

.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: 1rem !important; }
.pb-2 { padding-bottom: 2rem !important; }
.pb-3 { padding-bottom: 3rem !important; }
.pb-4 { padding-bottom: 4rem !important; }
.pb-5 { padding-bottom: 5rem !important; }
.pb-6 { padding-bottom: 6rem !important; }
.pb-7 { padding-bottom: 7rem !important; }

.px-1 { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-2 { padding-left: 2rem !important; padding-right: 2rem !important; }
.px-3 { padding-left: 3rem !important; padding-right: 3rem !important; }
.px-4 { padding-left: 4rem !important; padding-right: 4rem !important; }
.px-5 { padding-left: 5rem !important; padding-right: 5rem !important; }
.px-6 { padding-left: 6rem !important; padding-right: 6rem !important; }
.px-7 { padding-left: 7rem !important; padding-right: 7rem !important; }

.py-1 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-2 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
.py-3 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.py-4 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
.py-5 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
.py-6 { padding-top: 6rem !important; padding-bottom: 6rem !important; }
.py-7 { padding-top: 7rem !important; padding-bottom: 7rem !important; }


/* Position */

.position-top { position: absolute; top: 0; }
.position-bottom { position: absolute; bottom: 0; left: auto; }
.position-relative { position: relative; }


/* responsive image */

.img-fluid { width: 100% !important; height: auto; }
img { vertical-align: middle !important; }


/* display */

.d-block { display: block !important; }
.d-none { display: none !important; }

.d-flex { display: flex !important; flex-wrap: wrap; }
.d-inline-flex { display: inline-flex !important; }


/* stretched link */

.stretched-link::after { cursor: pointer; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; content: ""; }


/* clearfix */

.clearfix::after { display: block; clear: both; content: ""; }


/* Gray colors tones */

.bg-gray { background-color: var(--gray-050); }
.bg-gray-subtle { background-color: var(--gray-subtle); }
.bg-gray-005 { background-color: var(--gray-005); }
.bg-gray-010 { background-color: var(--gray-010); }
.bg-gray-015 { background-color: var(--gray-015); }
.bg-gray-020 { background-color: var(--gray-020); }
.bg-gray-025 { background-color: var(--gray-025); }
.bg-gray-030 { background-color: var(--gray-030); }
.bg-gray-035 { background-color: var(--gray-035); }
.bg-gray-040 { background-color: var(--gray-040); }
.bg-gray-045 { background-color: var(--gray-045); }
.bg-gray-050 { background-color: var(--gray-050); }
.bg-gray-055 { background-color: var(--gray-055); }
.bg-gray-060 { background-color: var(--gray-060); }
.bg-gray-065 { background-color: var(--gray-065); }
.bg-gray-070 { background-color: var(--gray-070); }
.bg-gray-075 { background-color: var(--gray-075); }
.bg-gray-080 { background-color: var(--gray-080); }
.bg-gray-085 { background-color: var(--gray-085); }
.bg-gray-090 { background-color: var(--gray-090); }
.bg-gray-095 { background-color: var(--gray-095); }

.text-gray { color: var(--gray-050); }
.text-gray-005 { color: var(--gray-005); }
.text-gray-010 { color: var(--gray-010); }
.text-gray-015 { color: var(--gray-015); }
.text-gray-020 { color: var(--gray-020); }
.text-gray-025 { color: var(--gray-025); }
.text-gray-030 { color: var(--gray-030); }
.text-gray-035 { color: var(--gray-035); }
.text-gray-040 { color: var(--gray-040); }
.text-gray-045 { color: var(--gray-045); }
.text-gray-050 { color: var(--gray-050); }
.text-gray-055 { color: var(--gray-055); }
.text-gray-060 { color: var(--gray-060); }
.text-gray-065 { color: var(--gray-065); }
.text-gray-070 { color: var(--gray-070); }
.text-gray-075 { color: var(--gray-075); }
.text-gray-080 { color: var(--gray-080); }
.text-gray-085 { color: var(--gray-085); }
.text-gray-090 { color: var(--gray-090); }
.text-gray-095 { color: var(--gray-095); }

.border-gray { border-color: var(--gray-050); }
.border-white { border-color: var(--white); }
.border-gray-005 { border-color: var(--gray-005); }
.border-gray-010 { border-color: var(--gray-010); }
.border-gray-015 { border-color: var(--gray-015); }
.border-gray-020 { border-color: var(--gray-020); }
.border-gray-025 { border-color: var(--gray-025); }
.border-gray-030 { border-color: var(--gray-030); }
.border-gray-035 { border-color: var(--gray-035); }
.border-gray-040 { border-color: var(--gray-040); }
.border-gray-045 { border-color: var(--gray-045); }
.border-gray-050 { border-color: var(--gray-050); }
.border-gray-055 { border-color: var(--gray-055); }
.border-gray-060 { border-color: var(--gray-060); }
.border-gray-065 { border-color: var(--gray-065); }
.border-gray-070 { border-color: var(--gray-070); }
.border-gray-075 { border-color: var(--gray-075); }
.border-gray-080 { border-color: var(--gray-080); }
.border-gray-085 { border-color: var(--gray-085); }
.border-gray-090 { border-color: var(--gray-090); }
.border-gray-095 { border-color: var(--gray-095); }
.border-black { border-color: var(--black); }


/* THE END */