@charset "UTF-8";
/** Varialbes used for mixins */
/*** Media Queries : http://breakpoint-sass.com/ ***/
/** breakpojtns values : http://breakpoint-sass.com/ ***/
/** deco image in _misc.scss name deco_XX **/
/**
 * The global styles override.
 */
html, body {
  scroll-behavior: smooth;
}

* {
  box-sizing: border-box;
  /* Workaround for flexboxes. */
  min-width: 0;
}

:root {
  /* fluid vars limits */
  /*//--fvs-design-min: 768;
  //--fvs-design-max: 1440;*/
  /* Text sizes. */
  --line-height: 1.5;
  --font-size-xxs: clamp(0.5rem, -0.08vw + 0.52rem, 0.46rem);
  --font-size-xs: clamp(0.63rem, -0.03vw + 0.64rem, 0.62rem);
  --font-size-sm: clamp(0.8rem, 0.06vw + 0.78rem, 0.83rem);
  --font-size-base: clamp(1rem, 0.2vw + 0.95rem, 1.13rem);
  --font-size-md: clamp(1.26rem, 0.42vw + 1.15rem, 1.52rem);
  --font-size-lg: clamp(1.58rem, 0.76vw + 1.39rem, 2.05rem);
  --font-size-xl: clamp(1.99rem, 1.26vw + 1.6rem, 2.5rem);
  --font-size-xxl: clamp(2.5rem, 2vw + 2rem, 3.75rem);
  --font-size-xxxl: clamp(3.14rem, 3.08vw + 2.37rem, 5.06rem);
  --font-size-huge: clamp(2.5rem, 0.5rem + 8vw, 7.5rem);
  --font-size-text: var(--fs-base);
  --font-size-h1: var(--font-size-xxl);
  --font-size-h2: var(--font-size-xl);
  --font-size-h3: var(--font-size-lg);
  --font-size-h4: var(--font-size-md);
  --font-size-h5: var(--font-size-base);
  --font-size-h6: var(--font-size-sm);
  --font-family: "Montserrat", sans-serif;
  --font-headings: "Montserrat", sans-serif;
  --font-button: "Roboto Condensed","Arial", sans-serif;
  --font-monospace: "JetBrains Mono", "Fira Code", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --font-hero: "Montserrat", "Bradley Hand", Chilanka, TSCu_Comic, casual, cursive;
  --text-color: var(--color-text);
  --mark-background: var(--color-mark-background);
  --code-background: var(--page-background);
  --p-margin--y: var(--spacing-md);
}

@supports (top: 1vi){

:root {
  --font-size-huge: clamp(2.5rem, 0.5rem + 8vi, 7.5rem);
}
}

@supports (top: 1vi){

:root {
  --font-size-xxxl: clamp(3.14rem, 3.08vi + 2.37rem, 5.06rem);
}
}

@supports (top: 1vi){

:root {
  --font-size-xxl: clamp(2.5rem, 2vi + 2rem, 3.75rem);
}
}

@supports (top: 1vi){

:root {
  --font-size-xl: clamp(1.99rem, 1.26vi + 1.6rem, 2.5rem);
}
}

@supports (top: 1vi){

:root {
  --font-size-lg: clamp(1.58rem, 0.76vi + 1.39rem, 2.05rem);
}
}

@supports (top: 1vi){

:root {
  --font-size-md: clamp(1.26rem, 0.42vi + 1.15rem, 1.52rem);
}
}

@supports (top: 1vi){

:root {
  --font-size-base: clamp(1rem, 0.2vi + 0.95rem, 1.13rem);
}
}

@supports (top: 1vi){

:root {
  --font-size-sm: clamp(0.8rem, 0.06vi + 0.78rem, 0.83rem);
}
}

@supports (top: 1vi){

:root {
  --font-size-xs: clamp(0.63rem, -0.03vi + 0.64rem, 0.62rem);
}
}

@supports (top: 1vi){

:root {
  --font-size-xxs: clamp(0.5rem, -0.08vi + 0.52rem, 0.46rem);
}
}

html {
  /* Initial for (R)EM. */
  font-size: 16px;
}

body {
  font-family: "Montserrat", sans-serif;
  font-family: var(--font-family, "sans-serif");
  font-size: clamp(1rem, 0.2vw + 0.95rem, 1.13rem);
  font-size: clamp(1rem, 0.2vi + 0.95rem, 1.13rem);
  font-size: var(--font-size-base);
  line-height: 1.5;
  line-height: var(--line-height);
}

main {
  color: var(--text-color);
  font-weight: 400;
  font-size: 1rem;
  font-size: var(--font-size-text, 1rem);
}

small {
  font-size: 80%;
  font-weight: normal;
}

big, .lead {
  font-size: 120%;
  font-weight: normal;
}

mark {
  padding: var(--spacing-xs);
  background-color: var(--mark-background);
}

code {
  font-family: "JetBrains Mono", "Fira Code", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-family: var(--font-monospace, monospace);
  font-size: 90%;
  padding: 0.2em 0.4em;
  word-break: break-all;
  border-radius: var(--radius-xs);
  background-color: var(--code-background);
}

pre code {
  /* Fixes unwanted padding for first and last line of code. */
  padding: 0;
  padding: initial;
}

.text-bold, .text-strong {
  font-weight: 600;
}

.text-align-center {
  text-align: center;
}

.text-align-right {
  text-align: right;
}

.text-align-left {
  text-align: left;
}

.text-align-justify {
  text-align: justify;
}

@media (min-width: 1024px) {
  .text-center-md {
    text-align: center;
  }
}
@media (min-width: 1200px) {
  .text-center-lg {
    text-align: center;
  }
}
.has-small-font-size {
  font-size: clamp(0.8rem, 0.06vw + 0.78rem, 0.83rem);
  font-size: clamp(0.8rem, 0.06vi + 0.78rem, 0.83rem);
  font-size: var(--font-size-sm);
}

.has-medium-font-size {
  font-size: clamp(1rem, 0.2vw + 0.95rem, 1.13rem);
  font-size: clamp(1rem, 0.2vi + 0.95rem, 1.13rem);
  font-size: var(--font-size-base);
}

.has-large-font-size {
  font-size: clamp(1.26rem, 0.42vw + 1.15rem, 1.52rem);
  font-size: clamp(1.26rem, 0.42vi + 1.15rem, 1.52rem);
  font-size: var(--font-size-md);
}

span.primary {
  color: var(--color-primary);
}

span.secondary {
  color: var(--color-secondary);
}

span.tertiary {
  color: var(--color-tertiary);
}

span.success {
  color: var(--color-success);
}

span.alert {
  color: var(--color-error);
}

span.warning {
  color: var(--color-warning);
}

@media (min-width: 768px) {
  .two-columns {
    -moz-column-count: 2;
         column-count: 2;
    -moz-column-gap: 2em;
         column-gap: 2em;
  }
  .two-columns p {
    page-break-inside: avoid;
       -moz-column-break-inside: avoid;
            break-inside: avoid;
  }
  .three-columns {
    -moz-column-count: 3;
         column-count: 3;
    -moz-column-gap: 2em;
         column-gap: 2em;
  }
  .three-columns p {
    page-break-inside: avoid;
       -moz-column-break-inside: avoid;
            break-inside: avoid;
  }
}
.modal :where(b, strong),
.field.text-formatted :where(b, strong) {
  font-weight: 700;
}
.modal :where(p, figure, blockquote, dl, ol, ul, table),
.field.text-formatted :where(p, figure, blockquote, dl, ol, ul, table) {
  margin-bottom: var(--p-margin--y);
}
.modal :where(td, th) :where(h1, h2, h3, h4, p, figure, blockquote, dl, dd, table),
.field.text-formatted :where(td, th) :where(h1, h2, h3, h4, p, figure, blockquote, dl, dd, table) {
  margin-bottom: 0;
}

:root {
  --link-color: var(--color-links);
  --link-color--hover: var(--color-links--hover);
  --link-color--active: var(--color-links--hover);
  --link-decoration: underline;
  --link-decoration--hover: underline;
}

:where(a) {
  color: var(--link-color);
  text-decoration: underline;
  -webkit-text-decoration: var(--link-decoration);
          text-decoration: var(--link-decoration);
}
:where(a):hover {
  --link-color: var(--link-color--hover);
  text-decoration: underline;
  -webkit-text-decoration: var(--link-decoration--hover);
          text-decoration: var(--link-decoration--hover);
}

/**
 * The styles for HTML lists.
//@custom-selector :--drupal-text-fields .field--type-text-with-summary,.field--type-text-long.field--type-text;
 */
:root {
  --list-margin: var(--p-margin--y) 0;
  --list-padding: 0 0 0 1rem;
  --list-ul-marker: "–  ";
  --list-ul-marker-image: none;
}

.text-formatted table ol, .text-formatted table ul {
  list-style-position: inside;
}
.text-formatted ol,
.text-formatted ul:not([role=tablist]):not(.menu) {
  padding: 0 0 0 1rem;
  padding: var(--list-padding);
}
@media (min-width: 1200px) {
  .text-formatted ol.list-cols,
  .text-formatted ul:not([role=tablist]):not(.menu).list-cols {
    -moz-column-gap: 2rem;
         column-gap: 2rem;
  }
  .text-formatted ol.list-cols > li,
  .text-formatted ul:not([role=tablist]):not(.menu).list-cols > li {
    page-break-inside: avoid;
       -moz-column-break-inside: avoid;
            break-inside: avoid;
  }
  .text-formatted ol.list-cols.list-cols-2,
  .text-formatted ul:not([role=tablist]):not(.menu).list-cols.list-cols-2 {
    -moz-column-count: 2;
         column-count: 2;
  }
  .text-formatted ol.list-cols.list-cols-3,
  .text-formatted ul:not([role=tablist]):not(.menu).list-cols.list-cols-3 {
    -moz-column-count: 3;
         column-count: 3;
  }
}
.text-formatted ul li::marker {
  content: "–  ";
  content: var(--list-ul-marker);
}
.text-formatted ul > li {
  position: relative;
  margin-bottom: 1rem;
}

ul.nice-list,
ul.list--nice {
  font-size: 1.125rem;
}
ul.nice-list > li::marker,
ul.list--nice > li::marker {
  color: var(--color-primary);
}

ul.list--lead {
  font-size: 1.125rem;
  font-weight: bold;
}

/**
 * The styles for selection on pages.
 */
:root {
  --selection-background: var(--color-primary);
  --selection-color: var(--color-white);
}

::-moz-selection {
  background: var(--selection-background);
  color: var(--selection-color);
}

::selection {
  background: var(--selection-background);
  color: var(--selection-color);
}

/**
 * The HTML blockquotes styles.
 */
:root {
  --blockquote-max-width: 50ch ;
  --blockquote-font-size: var(--font-size-base);
  --blockquote-border-color: var(--color-border);
  --blockquote-border-size: 0px;
  --blockquote-paddings: .5rem;
  --blockquote-margins: 0 -0.5rem;
  --blockquote-background: transparent;
  --blockquote-color: var(--text-color);
  --blockquote-quotes: "“" "”" "‘" "’";
  --blockquote-quotes-font-size: 1em;
  --blockquote-quotes-font-weight: 400;
  --blockquote-quotes-font-style: normal;
  --blockquote-quotes-color: currentColor;
  --blockquote-quotes-line-height: 1.5;
  --blockquote-info-font-size: 1.25rem;
  --blockquote-info-font-weight: 500;
  --blockquote-info-text-transform: none;
  --blockquote-cite-font-size: 1.25rem;
  --blockquote-cite-font-weight: 300;
  --blockquote-cite-text-transform: none;
}

blockquote {
  font-size: clamp(1rem, 0.2vw + 0.95rem, 1.13rem);
  font-size: clamp(1rem, 0.2vi + 0.95rem, 1.13rem);
  font-size: var(--blockquote-font-size);
  padding: .5rem;
  padding: var(--blockquote-paddings);
  margin: 0 -0.5rem;
  margin: var(--blockquote-margins);
  border-left: 0px solid var(--blockquote-border-color);
  border-left: var(--blockquote-border-size) solid var(--blockquote-border-color);
  background: transparent;
  background: var(--blockquote-background);
  font-style: italic;
  quotes: "“" "”" "‘" "’";
  quotes: var(--blockquote-quotes);
  position: relative;
  max-width: 50ch ;
  max-width: var(--blockquote-max-width);
  color: var(--blockquote-color);
}
blockquote + p {
  font-size: 1.25rem;
  font-size: var(--blockquote-info-font-size);
  font-weight: 500;
  font-weight: var(--blockquote-info-font-weight);
  text-transform: none;
  text-transform: var(--blockquote-info-text-transform);
}
blockquote + p cite {
  font-size: 1.25rem;
  font-size: var(--blockquote-cite-font-size);
  font-weight: 300;
  font-weight: var(--blockquote-cite-font-weight);
  text-transform: none;
  text-transform: var(--blockquote-cite-text-transform);
}

/**
 * The HTML fieldset styles.
 */
:root {
  --fieldset--padding: unset;
  --fieldset--margin: unset;
  --fieldset--border: unset;
  --fieldset--radius: none;
  --legend--padding: unset;
  --legend--width: 100%;
  --legend--font-size: var(--font-size-md);
  --legend--font-weight: 400;
  --legend--line-height: var(--line-height);
  --legend--color: var(--text-color);
  --legend--margin: 0 0 var(--spacing-xs) 0;
}

fieldset {
  min-width: 0;
  padding: 0;
  padding: initial;
  padding: var(--fieldset--padding);
  margin: 0;
  margin: initial;
  margin: var(--fieldset--margin);
  border: medium none currentcolor;
  border: initial;
  border: var(--fieldset--border);
  border-radius: none;
  border-radius: var(--fieldset--radius);
}

legend {
  display: block;
  font-size: clamp(1.26rem, 0.42vw + 1.15rem, 1.52rem);
  font-size: clamp(1.26rem, 0.42vi + 1.15rem, 1.52rem);
  font-size: var(--legend--font-size);
  font-weight: 400;
  font-weight: var(--legend--font-weight);
  line-height: 1.5;
  line-height: var(--legend--line-height);
  width: 100%;
  width: var(--legend--width);
  padding: 0;
  padding: initial;
  padding: var(--legend--padding);
  margin: var(--legend--margin);
  color: var(--legend--color);
}

/**
 * The focus styles.
 *
 * It's a good practice to leave focus on element. If you disable it make sure
 * you have other visual implementation for focused elements!
 *
 * @see http://www.outlinenone.com/
 */
:root {
  --focus-box-shadow: none;
  --focus-outline: 1px dotted red;
}

:focus {
  outline: 1px dotted red;
  outline: var(--focus-outline);
  outline-offset: 3px;
  box-shadow: none;
  box-shadow: var(--focus-box-shadow);
}

/**
//@import "typography.pcss";
 * The HTML headings.
 */
:root {
  --heading-line-height: 1.25;
  --headings-fw: 500;
  --headings-text-transform: normal;
  --heading-margin-block: .5em .75em;
  --headings-color: var(--color-headings);
  --headings-alt-color: var(--color-primary);
  --heading-link-decoration: none;
  --heading-link-decoration-hover: var(--link-decoration--hover);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .block-title, .paragraph-title {
  line-height: 1.25;
  line-height: var(--heading-line-height);
  margin-top: 0.5em;
  margin-bottom: 1em;
  text-transform: normal;
  text-transform: var(--headings-text-transform);
  font-weight: 500;
  font-weight: var(--headings-fw);
  font-family: "Montserrat", sans-serif;
  font-family: var(--font-headings, sans-serif);
  color: var(--headings-color);
  text-wrap: balance;
  font-feature-settings: "kern", "liga", "clig", "calt";
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .h1 a, .h2 a, .h3 a, .h4 a, .h5 a, .h6 a, .block-title a, .paragraph-title a {
  text-decoration: none;
  -webkit-text-decoration: var(--heading-link-decoration);
          text-decoration: var(--heading-link-decoration);
}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover, .h1 a:hover, .h2 a:hover, .h3 a:hover, .h4 a:hover, .h5 a:hover, .h6 a:hover, .block-title a:hover, .paragraph-title a:hover {
  text-decoration: underline;
  -webkit-text-decoration: var(--heading-link-decoration-hover);
          text-decoration: var(--heading-link-decoration-hover);
}

h1, .h1 {
  --headings-fw: 300;
  --leadings-line-height: 1.16;
  font-size: clamp(2.5rem, 2vw + 2rem, 3.75rem);
  font-size: clamp(2.5rem, 2vi + 2rem, 3.75rem);
  font-size: var(--font-size-h1);
  line-height: 1.16;
}

h1.page-title {
  margin-top: 1em;
  margin-bottom: 1em;
}

h2, .h2, .block__title, .block-title {
  font-size: clamp(1.99rem, 1.26vw + 1.6rem, 2.5rem);
  font-size: clamp(1.99rem, 1.26vi + 1.6rem, 2.5rem);
  font-size: var(--font-size-h2);
}

.viewsreference--view-title {
  text-align: center;
}

h3, .h3, .page--subtitle {
  font-size: clamp(1.58rem, 0.76vw + 1.39rem, 2.05rem);
  font-size: clamp(1.58rem, 0.76vi + 1.39rem, 2.05rem);
  font-size: var(--font-size-h3);
}

h4, .h4 {
  font-size: clamp(1.26rem, 0.42vw + 1.15rem, 1.52rem);
  font-size: clamp(1.26rem, 0.42vi + 1.15rem, 1.52rem);
  font-size: var(--font-size-h4);
}

h5, .h5 {
  /*font-size: var(--font-size-h5);*/
  font-size: clamp(1rem, 0.2vw + 0.95rem, 1.13rem);
  font-size: clamp(1rem, 0.2vi + 0.95rem, 1.13rem);
  font-size: var(--font-size-h5);
}

h6, .h6 {
  font-size: clamp(0.8rem, 0.06vw + 0.78rem, 0.83rem);
  font-size: clamp(0.8rem, 0.06vi + 0.78rem, 0.83rem);
  font-size: var(--font-size-h6);
}

/**
 * The HTML horizontal rules styles.
 */
hr {
  margin: var(--spacing-auto-md) 0;
  border: medium none currentcolor;
  border: initial;
  border-top: 1px solid var(--color-border);
}

:root {
  --media-radius: var(--radius-md,0);
}

/**
 * The HTML image styles.
 */
img {
  display: inline-block;
  max-width: 100%;
  width: 100%;
  /* Fixes aspect ratio. */
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  /* For ALT attribute. */
  font-style: italic;
  /* Fixes whitespace under images. */
  vertical-align: middle;
  line-height: 1;
}

.caption-img img {
  width: 100%;
}

:root {
  --table--width: 100%;
  --table--cell-color: var(--color-on-cold);
  --table--cell-fs: var(--font-size-base);
  --table--cell-bg: var(--color-cold);
  --table--cell-fw: 400;
  --table--cell-align: start;
  --table--cell-padding: var(--spacing-sm);
  --table--cell-border-width: 0;
  --table--cell-border-style: solid;
  --table--cell-border-color: transparent;
  --table--radius: var(--radius-lg);
  --table--heading-color: var(--color-on-light);
  --table--heading-fs: var(--table--cell-fs);
  --table--heading-bg: var(--color-primary-tr);
  --table--heading-fw: 600;
  --table--heading-align: var(--table--cell-align);
  --table--heading-padding: var(--table--cell-padding);
  --table--heading-border-width: var(--table--cell-border-width);
  --table--heading-border-style: var(--table--cell-border-style);
  --table--heading-border-color: var(--table--cell-border-color);
}

:where(table) {
  width: 100%;
  width: var(--table--width);
  border-collapse: collapse;
}

:where(td) {
  color: var(--table--cell-color);
  background-color: var(--table--cell-bg);
  padding: var(--table--cell-padding);
  font-size: clamp(1rem, 0.2vw + 0.95rem, 1.13rem);
  font-size: clamp(1rem, 0.2vi + 0.95rem, 1.13rem);
  font-size: var(--table--cell-fs);
  font-weight: 400;
  font-weight: var(--table--cell-fw);
  text-align: left;
  text-align: var(--table--cell-align);
  border-width: 0;
  border-width: var(--table--cell-border-width);
  border-style: solid;
  border-style: var(--table--cell-border-style);
  border-color: transparent;
  border-color: var(--table--cell-border-color);
}
:where(td) :where(p, ul, ol, dl):first-child {
  margin-top: 0;
}

:where(th) {
  color: var(--table--heading-color);
  background-color: var(--table--heading-bg);
  padding: var(--table--heading-padding);
  font-size: clamp(1rem, 0.2vw + 0.95rem, 1.13rem);
  font-size: clamp(1rem, 0.2vi + 0.95rem, 1.13rem);
  font-size: var(--table--heading-fs);
  font-weight: 600;
  font-weight: var(--table--heading-fw);
  text-align: left;
  text-align: var(--table--heading-align);
}

:where(thead th) {
  border-width: 0;
  border-width: var(--table--heading-border-width);
  border-style: solid;
  border-style: var(--table--heading-border-style);
  border-color: transparent;
  border-color: var(--table--heading-border-color);
}

.views-view-table {
  border-collapse: separate;
  border-spacing: 0;
  --table--heading-border-color: var(--color-primary-light);
  --table--cell-border-color: var(--color-primary-light);
  --table--heading-border-width: .5px;
  --table--cell-border-width: .5px;
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}
.views-view-table thead > tr > th {
  border-top-width: 1px;
}
.views-view-table thead > tr > th:first-child {
  border-left-width: 1px;
}
.views-view-table thead > tr > th:last-child {
  border-right-width: 1px;
}
.views-view-table thead > tr > th:first-child {
  border-top-left-radius: var(--table--radius);
}
.views-view-table thead > tr > th:last-child {
  border-top-right-radius: var(--table--radius);
}
.views-view-table tbody > tr > td:first-child {
  border-left-width: 1px;
}
.views-view-table tbody > tr > td:last-child {
  border-right-width: 1px;
}
.views-view-table tbody > tr:last-child > td {
  border-bottom-width: 1px;
}
.views-view-table tbody > tr:last-child > td:first-child {
  border-bottom-left-radius: var(--table--radius);
}
.views-view-table tbody > tr:last-child > td:last-child {
  border-bottom-right-radius: var(--table--radius);
}

:root {
  --deco-menu: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMSAyNSIgZmlsbD0ibm9uZSI+CiAgPHBhdGggZD0iTTEgMjRMMTAgMSIgc3Ryb2tlPSIjRTc0MTFCIi8+Cjwvc3ZnPg==");
  --deco-1: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyMjkgMzYwIj4KICA8cGF0aCBmaWxsPSIjRTc0MTFCIiBkPSJNMCAzNjAgMTQzLjYgMEgyMjlMODUuNCAzNjBIMFoiLz4KPC9zdmc+);
  --deco-1-ratio: 229/360;
  --deco-2: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNTAgMzkzIj4KICA8cGF0aCBmaWxsPSIjRTc0MTFCIiBkPSJNMjQ5LjYgMzkzIDkzLjEuNUgwTDE1Ni41IDM5M2g5My4xWiIvPgo8L3N2Zz4=);
  --deco-2-ratio: 229/360;
}

.shape_yellow_banner_bottom {
  z-index: 1;
  width: 100vw;
  display: block;
  position: absolute;
  bottom: -1px;
  left: 0;
}

:root {
  --arrows-color: var(--color-primary);
  --arrows-bg-color: var(--color-white);
}

.arrow-button-up,
.arrow-button-down {
  position: relative;
  padding: 5px;
  margin: 30px auto;
  background: var(--arrows-bg-color);
  height: 50px;
  width: 50px;
  border-radius: 50%;
  transition: all 0.2s linear;
}

.arrow-button-down:hover {
  transform: translate3d(0, 10px, 0);
}

.arrow-button-up:hover {
  transform: translate3d(0, -10px, 0);
}

.arrow-button-up::after,
.arrow-button-down::after {
  content: "";
  position: absolute;
  left: 17px;
  z-index: 11;
  display: block;
  width: 25px;
  height: 25px;
  border-top: 2px solid var(--arrows-color);
  border-left: 2px solid var(--arrows-color);
}

.arrow-button-up::after {
  top: 20px;
  transform: rotate(45deg);
}

.arrow-button-down::after {
  top: 10px;
  transform: rotate(225deg);
}

.arrow-right,
.arrow-left,
.long-arrow-right,
.long-arrow-left {
  display: block;
  margin: 30px auto;
  width: 25px;
  height: 25px;
  border-top: 2px solid var(--arrows-color);
  border-left: 2px solid var(--arrows-color);
}

.arrow-right,
.long-arrow-right {
  transform: rotate(135deg);
}

.arrow-left,
.long-arrow-left {
  transform: rotate(-45deg);
}

.long-arrow-right::after,
.long-arrow-left::after {
  content: "";
  display: block;
  width: 2px;
  height: 45px;
  background-color: black;
  transform: rotate(-45deg) translate(15px, 4px);
  left: 0;
  top: 0;
}

.triangle-left,
.triangle-right,
.triangle-top,
.triangle-bottom {
  width: 0;
  height: 0;
  margin: 30px auto;
}

.triangle-left,
.triangle-right {
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
}

.triangle-top,
.triangle-bottom {
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
}

.triangle-right {
  border-left: 30px solid var(--arrows-color);
}

.triangle-left {
  border-right: 30px solid var(--arrows-color);
}

.triangle-top {
  border-bottom: 30px solid var(--arrows-color);
}

.triangle-bottom {
  border-top: 30px solid var(--arrows-color);
}
/*# sourceMappingURL=elements.css.map */