*,
*::before,
*::after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
  padding: 0;
  margin: 0;
}

html {
  line-height: 1.15;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-family: sans-serif;
}

main {
  display: block;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

a {
  background-color: transparent;
}

abbr[title] {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

code,
kbd,
samp,
pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

button,
input,
optgroup,
select,
textarea {
  line-height: inherit;
  border: 1px solid currentColor;
}

button {
  overflow: visible;
  text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  padding: 1px 6px;
}

input {
  overflow: visible;
}

input,
textarea {
  padding: 1px;
}

fieldset {
  border: 1px solid currentColor;
  margin: 0 2px;
}

legend {
  color: inherit;
  display: table;
  max-width: 100%;
  white-space: normal;
}

progress {
  display: inline-block;
  vertical-align: baseline;
}

select {
  text-transform: none;
}

textarea {
  overflow: auto;
  vertical-align: top;
}

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type="color"] {
  background: inherit;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.5;
}

::-webkit-search-decoration,
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

::-moz-focus-inner {
  border: 0;
}

:-moz-focusring {
  outline: 1px dotted ButtonText;
}

:-moz-ui-invalid {
  box-shadow: none;
}

hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  height: 0;
  color: inherit;
  overflow: visible;
}

dl,
ol,
ul {
  margin: 1em 0;
}

ol ol,
ol ul,
ol dl,
ul ol,
ul ul,
ul dl,
dl ol,
dl ul,
dl dl {
  margin: 0;
}

b,
strong {
  font-weight: bolder;
}

audio,
video {
  display: inline-block;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

img {
  border: 0;
}

svg:not(:root) {
  overflow: hidden;
}

table {
  text-indent: 0;
  border-color: inherit;
}

details {
  display: block;
}

dialog {
  background-color: inherit;
  border: solid;
  color: inherit;
  display: block;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  left: 0;
  margin: auto;
  padding: 1em;
  position: absolute;
  right: 0;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

dialog:not([open]) {
  display: none;
}

summary {
  display: list-item;
}

canvas {
  display: inline-block;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

@font-face {
  font-family: 'Open Sans';
  font-weight: 300;
  font-style: normal;
  src: url("../fonts/open-sans/Light/OpenSans-Light.eot");
  src: url("../fonts/open-sans/Light/OpenSans-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/open-sans/Light/OpenSans-Light.woff2") format("woff2"), url("../fonts/open-sans/Light/OpenSans-Light.woff") format("woff"), url("../fonts/open-sans/Light/OpenSans-Light.ttf") format("truetype"), url("../fonts/open-sans/Light/OpenSans-Light.svg#OpenSansLight") format("svg");
}

@font-face {
  font-family: 'Open Sans';
  font-weight: 300;
  font-style: italic;
  src: url("../fonts/open-sans/LightItalic/OpenSans-LightItalic.eot");
  src: url("../fonts/open-sans/LightItalic/OpenSans-LightItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/open-sans/LightItalic/OpenSans-LightItalic.woff2") format("woff2"), url("../fonts/open-sans/LightItalic/OpenSans-LightItalic.woff") format("woff"), url("../fonts/open-sans/LightItalic/OpenSans-LightItalic.ttf") format("truetype"), url("../fonts/open-sans/LightItalic/OpenSans-LightItalic.svg#OpenSansLightItalic") format("svg");
}

@font-face {
  font-family: 'Open Sans';
  font-weight: normal;
  font-style: normal;
  src: url("../fonts/open-sans/Regular/OpenSans-Regular.eot");
  src: url("../fonts/open-sans/Regular/OpenSans-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/open-sans/Regular/OpenSans-Regular.woff2") format("woff2"), url("../fonts/open-sans/Regular/OpenSans-Regular.woff") format("woff"), url("../fonts/open-sans/Regular/OpenSans-Regular.ttf") format("truetype"), url("../fonts/open-sans/Regular/OpenSans-Regular.svg#OpenSansRegular") format("svg");
}

@font-face {
  font-family: 'Open Sans';
  font-weight: normal;
  font-style: italic;
  src: url("../fonts/open-sans/Italic/OpenSans-Italic.eot");
  src: url("../fonts/open-sans/Italic/OpenSans-Italic.eot?#iefix") format("embedded-opentype"), url("../fonts/open-sans/Italic/OpenSans-Italic.woff2") format("woff2"), url("../fonts/open-sans/Italic/OpenSans-Italic.woff") format("woff"), url("../fonts/open-sans/Italic/OpenSans-Italic.ttf") format("truetype"), url("../fonts/open-sans/Italic/OpenSans-Italic.svg#OpenSansItalic") format("svg");
}

@font-face {
  font-family: 'Open Sans';
  font-weight: 600;
  font-style: normal;
  src: url("../fonts/open-sans/Semibold/OpenSans-Semibold.eot");
  src: url("../fonts/open-sans/Semibold/OpenSans-Semibold.eot?#iefix") format("embedded-opentype"), url("../fonts/open-sans/Semibold/OpenSans-Semibold.woff2") format("woff2"), url("../fonts/open-sans/Semibold/OpenSans-Semibold.woff") format("woff"), url("../fonts/open-sans/Semibold/OpenSans-Semibold.ttf") format("truetype"), url("../fonts/open-sans/Semibold/OpenSans-Semibold.svg#OpenSansSemibold") format("svg");
}

@font-face {
  font-family: 'Open Sans';
  font-weight: 600;
  font-style: italic;
  src: url("../fonts/open-sans/SemiboldItalic/OpenSans-SemiboldItalic.eot");
  src: url("../fonts/open-sans/SemiboldItalic/OpenSans-SemiboldItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/open-sans/SemiboldItalic/OpenSans-SemiboldItalic.woff2") format("woff2"), url("../fonts/open-sans/SemiboldItalic/OpenSans-SemiboldItalic.woff") format("woff"), url("../fonts/open-sans/SemiboldItalic/OpenSans-SemiboldItalic.ttf") format("truetype"), url("../fonts/open-sans/SemiboldItalic/OpenSans-SemiboldItalic.svg#OpenSansSemiboldItalic") format("svg");
}

@font-face {
  font-family: 'Open Sans';
  font-weight: bold;
  font-style: normal;
  src: url("../fonts/open-sans/Bold/OpenSans-Bold.eot");
  src: url("../fonts/open-sans/Bold/OpenSans-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/open-sans/Bold/OpenSans-Bold.woff2") format("woff2"), url("../fonts/open-sans/Bold/OpenSans-Bold.woff") format("woff"), url("../fonts/open-sans/Bold/OpenSans-Bold.ttf") format("truetype"), url("../fonts/open-sans/Bold/OpenSans-Bold.svg#OpenSansBold") format("svg");
}

@font-face {
  font-family: 'Open Sans';
  font-weight: bold;
  font-style: italic;
  src: url("../fonts/open-sans/BoldItalic/OpenSans-BoldItalic.eot");
  src: url("../fonts/open-sans/BoldItalic/OpenSans-BoldItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/open-sans/BoldItalic/OpenSans-BoldItalic.woff2") format("woff2"), url("../fonts/open-sans/BoldItalic/OpenSans-BoldItalic.woff") format("woff"), url("../fonts/open-sans/BoldItalic/OpenSans-BoldItalic.ttf") format("truetype"), url("../fonts/open-sans/BoldItalic/OpenSans-BoldItalic.svg#OpenSansBoldItalic") format("svg");
}

/* nunito-cyrillic-400-normal*/
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("../fonts/nunito/files/nunito-cyrillic-400-normal.woff2") format("woff2"), url("../fonts/nunito/files/nunito-all-400-normal.woff") format("woff");
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* nunito-latin-400-normal*/
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("../fonts/nunito/files/nunito-latin-400-normal.woff2") format("woff2"), url("../fonts/nunito/files/nunito-all-400-normal.woff") format("woff");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url("../fonts/nunito/files/nunito-latin-700-normal.woff2") format("woff2"), url("../fonts/nunito/files/nunito-all-700-normal.woff") format("woff");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* bebas-neue-latin-400-normal*/
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("../fonts/bebas-neue/files/bebas-neue-latin-400-normal.woff2") format("woff2"), url("../fonts/bebas-neue/files/bebas-neue-all-400-normal.woff") format("woff");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* raleway-latin-300-normal*/
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url("../fonts/raleway/files/raleway-latin-300-normal.woff2") format("woff2"), url("../fonts/raleway/files/raleway-latin-300-normal.woff") format("woff");
}

/* raleway-latin-400-normal*/
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("../fonts/raleway/files/raleway-latin-400-normal.woff2") format("woff2"), url("../fonts/raleway/files/raleway-latin-400-normal.woff") format("woff");
}

/* raleway-latin-600-normal*/
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url("../fonts/raleway/files/raleway-latin-600-normal.woff2") format("woff2"), url("../fonts/raleway/files/raleway-latin-600-normal.woff") format("woff");
}

/* raleway-latin-700-normal*/
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url("../fonts/raleway/files/raleway-latin-700-normal.woff2") format("woff2"), url("../fonts/raleway/files/raleway-latin-700-normal.woff") format("woff");
}

html,
body {
  overflow-x: hidden;
  width: 100%;
}

body {
  background-color: var(--main-background-color);
  overflow-x: hidden;
  color: var(--main-color);
  font-family: 'Raleway';
}

a {
  color: var(--main-color);
  text-decoration: underline;
}

a:hover {
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
}

button {
  padding: 0;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

.promo-main {
  margin-top: -7em;
  padding-top: 9em;
}

@media (prefers-color-scheme: dark) {
  .promo-main::before {
    background: rgba(50, 69, 95, 0.5);
  }
}

@media (min-width: 768px) {
  .promo-main {
    margin-top: -10vw;
    padding-top: 10vw;
  }
  .promo-main.back-image_wavy {
    min-height: calc((53vw));
    padding-top: calc(10vw);
  }
}

@media (min-width: 768px) and (prefers-color-scheme: dark) {
  .promo-main::before {
    background-color: transparent;
  }
}

.info-tile {
  padding: 2em 0;
}

@media (min-width: 768px) {
  .info-tile {
    padding: 5em 0;
  }
}

.tint {
  color: var(--tint-color-text);
}

.green {
  color: var(--green-color);
}

.line {
  border-bottom: 1px solid #5f6551;
}

.container {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  position: relative;
  padding: 0 1.5em;
}

@media (min-width: 768px) {
  .container {
    padding: 0 2em;
  }
}

.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
}

.row_center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.row_wrap {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.col {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

/*
Header

Markup:
<header class="header">
    <div class="container">
      <div class="row">
        <div class="col">
          <a class="logo" href="#" alt="Hiking Life Logo">Hiking <span>Life</span></a>
        </div>
        <div class="col">
          <nav class="main-nav">
            <input class="main-nav__toogle" type="checkbox" aria-label="Main navigation switcher" />
            <span></span>
            <span></span>
            <span></span>
            <ul class="main-nav__list" aria-label="Main Navigation">
              <li><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Info</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
          </nav>
          <div class="search-form header__search-form">
            <form role="search">
              <div class="text-field">
                <input aria-label="Search" mini-cardholder="Search" class="text-field__text text-field__text_has-icon"
                  type="text" />
                <button class="text-field__icon text-field__icon_search" type="submit">Search</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </header>

Styleguide Header
*/
.header {
  padding: 2em 0;
  z-index: 100;
  position: relative;
}

.header .row {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1em;
}

.header .row .col {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.header .row .col:last-child {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}

.header__search-form {
  max-width: 10em;
}

@media (min-width: 768px) {
  .header {
    padding: 3em 0;
  }
  .header .row .col:first-child {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 120px;
            flex: 0 0 120px;
  }
  .header .row .col:last-child {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

@media (min-width: 980px) {
  .header__search-form {
    max-width: 20em;
  }
}

/*
Logo

Markup:
<div class="logo">Hiking <span>Life</span></div>

Styleguide Logo
*/
.logo {
  display: block;
  font-family: 'Open Sans';
  padding-left: calc(35px + 0.5em);
  color: var(--main-color);
  position: relative;
  white-space: nowrap;
}

.logo span {
  font-weight: bold;
}

.logo a {
  text-decoration: none;
}

.logo::before {
  content: '';
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20data-name%3D%22Layer%201%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2023.617%2013.401%22%3E%3Cpath%20d%3D%22M9.12.2c.288.357%201.752%202.501%202.62%203.756.469.676.914%201.367%201.385%202.04a5.088%205.088%200%2000.537.55c.597-.866%201.149-1.661%201.694-2.46.176-.258.315-.545.509-.788a.797.797%200%20011.41.055c.736%201.017%201.44%202.056%202.157%203.087.268.387.54.771.79%201.17.072.113.181.29.105.41a.39.39%200%2001-.432.082c-.703-.64-1.838-.459-2.445-1.312-.106-.15-.515-.093-.786-.116-.58-.051-1.183.17-1.74-.215a.449.449%200%2000-.615.212c-.125.199-.229.41-.337.609.275.38.537.775.81%201.157.366.51.056%201.032-.17.802-.13-.134-1.165-1.691-1.687-2.449a.782.782%200%2000-1.028-.387%201.78%201.78%200%2001-1.747-.492%209.29%209.29%200%2000-.766-.543A1.461%201.461%200%20007.75%205.27a2.796%202.796%200%2001-1.375.194%201.188%201.188%200%2000-1.336.728c-.121.257-.403.522-.58.435-.375-.184-.092-.548.09-.816.791-1.166%201.57-2.34%202.366-3.504C7.399%201.596%208.245.389%208.4.2a.424.424%200%2001.72%200zM5.979%204.774a2.465%202.465%200%2000.764.198%203.893%203.893%200%2000.88-.29%202.223%202.223%200%20012.335.311c.246.194.515.359.772.539a1.202%201.202%200%20001.362.028L8.871.939a.125.125%200%2000-.205%200zM19.033%206.97a30.272%2030.272%200%2000-2.326-3.286.227.227%200%2000-.366.055%2011.179%2011.179%200%2000-1.235%202.087c.458.237.795.495%201.347.215a1.482%201.482%200%20011.628.385%205.473%205.473%200%2000.952.544z%22%20style%3D%22fill%3A%2332455f%22%2F%3E%3Cpath%20d%3D%22M.159%2012.292a98.676%2098.676%200%20012.886-4.299c.109-.14.17-.287.244-.369.097-.107.315-.222.45-.157.164.081.12.356.064.495a4.31%204.31%200%2001-.496.798c-.628.916-1.258%201.83-1.913%202.78a.697.697%200%2000.57%201.093h14.457a.248.248%200%2000.206-.387%209.287%209.287%200%2001-1.405-2.43c.175-.477.528-.049.73.25.542.806%201.064%201.626%201.615%202.476a.253.253%200%2000.21.116h4.74a.189.189%200%2000.151-.296c-.651-.971-1.247-1.88-1.875-2.765-.082-.115-.285-.417-.132-.538.612-.485%202.104%202.37%202.833%203.469.425.642-.358.872-.747.872H.578a.568.568%200%2001-.577-.577%201.067%201.067%200%2001.158-.531z%22%20style%3D%22fill%3A%2332455f%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  position: absolute;
  width: 35px;
  height: 60px;
  left: 0;
  margin-top: -0.25em;
}

@media (prefers-color-scheme: dark) {
  .logo::before {
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20data-name%3D%22Layer%201%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2023.617%2013.401%22%3E%3Cpath%20d%3D%22M9.12.2c.288.357%201.752%202.501%202.62%203.756.469.676.914%201.367%201.385%202.04a5.088%205.088%200%2000.537.55c.597-.866%201.149-1.661%201.694-2.46.176-.258.315-.545.509-.788a.797.797%200%20011.41.055c.736%201.017%201.44%202.056%202.157%203.087.268.387.54.771.79%201.17.072.113.181.29.105.41a.39.39%200%2001-.432.082c-.703-.64-1.838-.459-2.445-1.312-.106-.15-.515-.093-.786-.116-.58-.051-1.183.17-1.74-.215a.449.449%200%2000-.615.212c-.125.199-.229.41-.337.609.275.38.537.775.81%201.157.366.51.056%201.032-.17.802-.13-.134-1.165-1.691-1.687-2.449a.782.782%200%2000-1.028-.387%201.78%201.78%200%2001-1.747-.492%209.29%209.29%200%2000-.766-.543A1.461%201.461%200%20007.75%205.27a2.796%202.796%200%2001-1.375.194%201.188%201.188%200%2000-1.336.728c-.121.257-.403.522-.58.435-.375-.184-.092-.548.09-.816.791-1.166%201.57-2.34%202.366-3.504C7.399%201.596%208.245.389%208.4.2a.424.424%200%2001.72%200zM5.979%204.774a2.465%202.465%200%2000.764.198%203.893%203.893%200%2000.88-.29%202.223%202.223%200%20012.335.311c.246.194.515.359.772.539a1.202%201.202%200%20001.362.028L8.871.939a.125.125%200%2000-.205%200zM19.033%206.97a30.272%2030.272%200%2000-2.326-3.286.227.227%200%2000-.366.055%2011.179%2011.179%200%2000-1.235%202.087c.458.237.795.495%201.347.215a1.482%201.482%200%20011.628.385%205.473%205.473%200%2000.952.544z%22%20style%3D%22fill%3A%23fbfbf5%22%2F%3E%3Cpath%20d%3D%22M.159%2012.292a98.676%2098.676%200%20012.886-4.299c.109-.14.17-.287.244-.369.097-.107.315-.222.45-.157.164.081.12.356.064.495a4.31%204.31%200%2001-.496.798c-.628.916-1.258%201.83-1.913%202.78a.697.697%200%2000.57%201.093h14.457a.248.248%200%2000.206-.387%209.287%209.287%200%2001-1.405-2.43c.175-.477.528-.049.73.25.542.806%201.064%201.626%201.615%202.476a.253.253%200%2000.21.116h4.74a.189.189%200%2000.151-.296c-.651-.971-1.247-1.88-1.875-2.765-.082-.115-.285-.417-.132-.538.612-.485%202.104%202.37%202.833%203.469.425.642-.358.872-.747.872H.578a.568.568%200%2001-.577-.577%201.067%201.067%200%2001.158-.531z%22%20style%3D%22fill%3A%23fbfbf5%22%2F%3E%3C%2Fsvg%3E");
  }
}

a.logo {
  text-decoration: none;
}

a.logo:hover {
  color: var(--main-color);
}

@media (min-width: 380px) {
  .logo {
    font-size: 1.2em;
    padding-left: calc(42px + 0.5em);
  }
  .logo::before {
    width: 42px;
    height: 72px;
  }
}

@media (min-width: 768px) {
  .logo {
    font-size: 2em;
    padding-left: calc(70px + 0.5em);
  }
  .logo::before {
    width: 70px;
    height: 120px;
  }
}

/*
Text Input

Markup:
<form>
    <div class="text-field form-field">
        <input placeholder="Text" class="text-field__text" type="text"/>              
    </div>
    <div class="text-field form-field">
        <input placeholder="Search" class="text-field__text text-field__text_has-icon" type="text"/>
        <button class="text-field__icon text-field__icon_search">Search</button>
    </div>
</form>

Styleguide Form.Elements
*/
.text-field {
  position: relative;
}

.text-field__text {
  height: 3em;
  line-height: 3em;
  border-radius: 3em;
  -webkit-box-shadow: inset 0 0.5em 0.5em 0 #ddd;
          box-shadow: inset 0 0.5em 0.5em 0 #ddd;
  width: 100%;
  border: none;
  padding: 0 1em;
}

.text-field__text_has-icon {
  padding-right: 3.5em;
}

.text-field__icon {
  position: absolute;
  z-index: 1;
  right: 1em;
  height: 100%;
}

.text-field__icon_search {
  text-indent: -9999px;
  width: 2em;
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20style%3D%22fill%3A%2332455f%22%20d%3D%22M503.847%20432.949l-89.897-89.897-.006-.006-.006-.006-32.135-32.135c-10.855-10.856-28.522-10.86-39.381%200l-3.939%203.939-13.571-13.571c26.587-31.878%2042.607-72.861%2042.607-117.519C367.517%2082.432%20285.085%200%20183.762%200S.009%2082.432.009%20183.754s82.43%20183.754%20183.753%20183.754c44.658%200%2085.641-16.02%20117.519-42.606l13.571%2013.57-3.94%203.94c-10.854%2010.857-10.854%2028.523.002%2039.381l122.043%20122.043c10.881%2010.883%2028.499%2010.886%2039.383.001l31.506-31.506c10.859-10.857%2010.859-28.523.001-39.382zm-320.085-98.858c-82.896%200-150.337-67.441-150.337-150.337S100.866%2033.417%20183.762%2033.417%20334.1%20100.858%20334.1%20183.754s-67.442%20150.337-150.338%20150.337zm154.72%2028.012l23.629-23.629%2016.388%2016.388-23.629%2023.629-16.388-16.388zm114.167%20114.166l-74.15-74.15%2023.629-23.629%2074.15%2074.15-23.629%2023.629z%22%2F%3E%3Cpath%20style%3D%22fill%3A%2332455f%22%20d%3D%22M183.76%2066.835c-9.228%200-16.709%207.481-16.709%2016.709s7.481%2016.709%2016.709%2016.709c46.045%200%2083.505%2037.457%2083.505%2083.5%200%209.228%207.481%2016.709%2016.709%2016.709s16.709-7.481%2016.709-16.709c0-64.469-52.452-116.918-116.923-116.918z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: center center;
}

.text-field__icon_search:active {
  background-size: 93%;
}

.text-field button:active {
  -webkit-transform: scale(0.96);
          transform: scale(0.96);
}

.form-field + .form-field {
  margin-top: 2em;
}

/*
Button

Markup:
<a href="#" class="button {{modifier_class}}">see more</a>

.button_rounded - rounded
.button_color-tint - tint
.button_color-green - green

Styleguide Button
*/
.button {
  display: inline-block;
  text-decoration: none;
  text-transform: uppercase;
  font-family: 'Nunito';
  font-weight: 700;
  padding: 0.25em 2em;
  text-align: center;
  letter-spacing: 3px;
  -webkit-transition: all .1s linear;
  transition: all .1s linear;
  background-color: #fbfbf5;
  color: #32455f;
}

.button:hover {
  background-color: #ececd1;
}

.align-right .button {
  margin-right: -1em;
}

.button:active {
  -webkit-transform: scale(0.96);
          transform: scale(0.96);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.button_rounded {
  border-radius: 1em;
}

.button_color-tint {
  background-color: var(--tint-color-text);
  color: #fbfbf5;
}

.button_color-tint:hover {
  background-color: var(--tint-color-text-hover);
}

.button_color-green {
  background-color: #5f6551;
  color: #fbfbf5;
}

.button_color-green:hover {
  background-color: #44493a;
}

/*
Navigation

Markup:
<nav class="main-nav">
    <input class="main-nav__toogle" type="checkbox" />   
    <span></span>
    <span></span>
    <span></span>        
    <ul class="main-nav__list">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Info</a></li>
      <li><a href="#">Contact</a></li> 
    </ul>    
</nav>

Styleguide Navigation.Main Menu
*/
.main-nav {
  margin-left: 1em;
  display: block;
  position: relative;
  z-index: 2;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  font-family: 'Nunito';
  margin-top: 7px;
}

.main-nav span {
  display: block;
  width: 42px;
  height: 4px;
  margin-bottom: 8px;
  position: relative;
  background: var(--main-color);
  border-radius: 3px;
  z-index: 1;
  -webkit-transform-origin: 4px 0px;
          transform-origin: 4px 0px;
  -webkit-transition: background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease, -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
  transition: background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease, -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease, -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
}

.main-nav span:first-child {
  -webkit-transform-origin: 0% 0%;
          transform-origin: 0% 0%;
}

.main-nav span:nth-last-child(2) {
  -webkit-transform-origin: 0% 100%;
          transform-origin: 0% 100%;
}

.main-nav__toogle {
  display: block;
  width: 52px;
  height: 42px;
  position: absolute;
  top: -7px;
  left: -5px;
  cursor: pointer;
  opacity: 0;
  /* hide this */
  z-index: 2;
  /* and place it over the hamburger */
  -webkit-touch-callout: none;
}

.main-nav__toogle:checked ~ span {
  opacity: 1;
  -webkit-transform: rotate(45deg) translate(-2px, -1px);
          transform: rotate(45deg) translate(-2px, -1px);
}

.main-nav__toogle:checked ~ span:nth-last-child(3) {
  opacity: 0;
  -webkit-transform: rotate(0deg) scale(0.2, 0.2);
          transform: rotate(0deg) scale(0.2, 0.2);
}

.main-nav__toogle:checked ~ span:nth-last-child(2) {
  -webkit-transform: rotate(-45deg) translate(0, -1px);
          transform: rotate(-45deg) translate(0, -1px);
}

.main-nav__toogle:checked ~ ul {
  -webkit-transform: none;
          transform: none;
}

.main-nav__list {
  position: absolute;
  width: 300px;
  margin: -50px 0 0 calc(-300px + 60px);
  padding: 2em;
  padding-top: 4em;
  background-color: var(--main-background-color);
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  -webkit-transform-origin: 0% 0%;
          transform-origin: 0% 0%;
  -webkit-transform: translate(calc(100% + 40px), 0);
          transform: translate(calc(100% + 40px), 0);
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
  transition: -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
}

.main-nav__list li {
  padding: 10px 0;
  font-size: 1.5em;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.main-nav__list li a {
  text-decoration: none;
  font-weight: 300;
}

.main-nav__list li a:hover {
  font-weight: bold;
  text-decoration: underline;
}

@media (min-width: 768px) {
  .main-nav {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    margin: 0 1em;
  }
  .main-nav span {
    display: none;
  }
  .main-nav__toogle {
    display: none;
  }
  .main-nav__list {
    background: none;
    position: relative;
    width: auto;
    margin: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 0;
    -webkit-transform: none;
            transform: none;
  }
  .main-nav__list li {
    padding: 0;
    line-height: 1.75;
    margin: 0 0.25em;
    text-align: center;
  }
}

@media (min-width: 1280px) {
  .main-nav {
    margin: 0 4em;
  }
}

/*
Back Image Wavy

Markup:
<div class="back-image_wavy back-image {{modifier_class}}" style="background-image:url('../i/main.jpg');min-height:800px">
    Text...
</div>

.back-image_wavy-gray - gray wavy
.back-image_wavy-gray-diagonal - gray diagonal wavy

Styleguide Media.Back Image Wavy
*/
/*
Back Image Green

Markup:
<div class="info-tile promo-event back-image back-image_dual-green"
      style="background-image:url('../i/view.jpg');">
      <div class="container">
        <div class="row">
          <div class="promo-event__main">
            <h2 class="title title_underlined h3 info-tile__h2">
              HOW TO RECOVER FROM
              A HIKE
            </h2>
            <div class="h3 title">
              <time datetime="2020-05-21">21.05.20</time>
            </div>           
          </div>
          <div class="promo-event__more">
            <div class="decrease">
              50<span>%<span>off</span></span>
            </div>
            <p class="h4 title">
              Lorem Ipsum Consectetur
            </p>  
            <time class="promo-event__time" datetime="15:30">15.30 hs.</time>                          
          </div>
        </div>
      </div>
    </div>
     <div class="promo-event promo-event_inversed green back-image back-image_wavy back-image_wavy-gray-diagonal back-image_wavy-gray-diagonal_inversed back-image_wavy-gray-diagonal_bicolor"
      style="background-image:url('../i/climbing.jpg');background-position: 50% -10%;">
      <div class="container">
        <div class="row">
          <div class="promo-event__main">
            <h2 class="title title_color-green h2 back-image__title promo-event__title">
                <div class="title__main"><span
                    class="corner corner_type-tr">mountaineering </span><br /><span class="corner corner_type-bl">ice Climbing</span>
                </div>
              </h2>
            <div class="text">
              <h3 class="h4 title">2. activities</h3>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
              </p>
              <div class="box-underlined-above">
                <p>
                  <strong>10 modules <br />
                    divided into 7 weekends</strong>
                </p>
              </div>
            </div>
          </div>
          <div class="promo-event__more">
            <div class="row">
              <div class="">
                <h4 class="h4 title">
                  <time datetime="2020-09-28">28.09.20</time>
                </h4>
                <time class="promo-event__time" datetime="15:30">15.30 hs.</time>
              </div>
              <div class="promo-event__price">
                Price<br />
                $900
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

Styleguide Media.Back Image Green
*/
/*
Back Image Tinted

Markup:
<div class="back-image {{modifier_class}}" style="background-image:url('../i/main.jpg');min-height:300px">
    Text...
</div>

.back-image_tinted-purple - purple tinted
.back-image_tinted-blue - blue tinted

Styleguide Media.Back Image Tinted
*/
.back-image {
  background-position: center bottom;
  background-repeat: no-repeat;
  position: relative;
  background-size: cover;
  z-index: 0;
}

.back-image::before, .back-image::after {
  z-index: -1;
}

.back-image::before, .back-image::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
}

.back-image__title {
  position: relative;
  margin: 0 0 1em;
}

.back-image_centered {
  background-position: 40% bottom;
}

.back-image_wavy {
  min-height: calc(100vw + 2em);
}

.back-image_wavy::before, .back-image_wavy::after {
  background-repeat: no-repeat;
}

.back-image_wavy .back-image__title::before {
  background-color: rgba(251, 251, 245, 0.9);
  z-index: -1;
}

.back-image_wavy .back-image__title::before {
  content: '';
  position: absolute;
  left: -0.5em;
  right: -0.5em;
  top: -0.5em;
  width: calc(100% + 1em);
  height: calc(100% + 1em);
}

.back-image_wavy-gray-diagonal {
  background-size: cover;
  padding: 3em 0;
}

.back-image_wavy-gray-diagonal::before {
  z-index: -1;
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.5);
}

.back-image_wavy-gray-diagonal .back-image__title::before {
  display: none;
}

.back-image_wavy-gray-diagonal_inversed::before, .back-image_wavy-gray-diagonal_inversed::after {
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}

.back-image_dual-green {
  color: #fbfbf5;
  background: #4a4e3f;
  background-image: none !important;
  border-top: #4a4e3f 5px solid;
  border-bottom: #4a4e3f 5px solid;
  -webkit-box-shadow: 0px 20px 20px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 20px 20px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.back-image_tinted-purple::before {
  background: #564b67;
  opacity: 74%;
}

.back-image_tinted-blue::before {
  background: #32455f;
  opacity: 74%;
}

.back-image_tinted-purple, .back-image_tinted-blue {
  color: #fbfbf5;
  padding: 2em 0;
}

@media (prefers-color-scheme: dark) {
  .back-image_wavy .back-image__title::before {
    background-color: rgba(50, 69, 95, 0.9);
  }
  .back-image_wavy-gray-diagonal::before {
    background-color: rgba(0, 0, 0, 0.5);
  }
}

@media (min-width: 768px) {
  .back-image_wavy {
    min-height: 100vh;
    background-size: 100% auto;
  }
  .back-image_wavy::before, .back-image_wavy::after {
    background-size: 130%;
  }
  .back-image_wavy::before, .back-image_wavy::after {
    -webkit-filter: drop-shadow(0 20px 10px rgba(0, 0, 0, 0.1));
            filter: drop-shadow(0 20px 10px rgba(0, 0, 0, 0.1));
  }
  .back-image_wavy::before {
    background-position: center 40px;
  }
  .back-image_wavy::after {
    background-position: center top;
  }
  .back-image_wavy .back-image__title::before {
    display: none;
  }
  .back-image_wavy-gray::before, .back-image_wavy-gray::after {
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%202023.172%20535.44%22%3E%3Cpath%20d%3D%22M.087%20311.101Q.087%20157.63%200%204.158C-.003.86.488.001%204.029.001Q1011.592.157%202019.155%200c3.56%200%204.02.892%204.017%204.168q-.152%20177.467-.085%20354.933c-1.436%204.932-5.711%207.564-8.936%2011.054a31.755%2031.755%200%200%201-5.872%203.76c-11.686%205.627-23.091%2011.8-34.56%2017.846-8.708%204.591-17.777%207.39-27.731%206.677-5.35-.153-10.551-1.43-15.813-2.205-8.344-1.229-16.676-1.444-24.82.584-14.58%203.63-29.019%202.02-43.613.201-14.65-1.826-28.855-4.953-42.414-10.882a57.875%2057.875%200%200%200-23.906-4.552c-26.604.29-51.841-6.269-76.48-15.171-13.1-4.733-26.228-8.804-40.016-10.396-14.644-1.692-27.93-7.418-41.344-12.895a53.106%2053.106%200%200%200-20.52-3.692c-4.998.02-10.005-.177-14.994.045a48.484%2048.484%200%200%201-23.358-4.427c-15.697-7.532-32.587-11.726-48.668-18.118-15.227-6.054-31.239-9.458-46.752-14.522a152.285%20152.285%200%200%201-19.862-8.14c-29.167-14.312-57.904-29.471-86.916-44.087-29.795-15.01-57.715-33.22-86.097-50.636-14.644-8.986-29.921-16.804-45.318-24.36-11.334-5.561-23.82-7.359-36.117-9.566-7.545-1.355-15.05-2.888-22.54-4.514-20.502-4.45-41.046-3.515-61.529.024-6.475%201.12-12.159%204.71-17.674%208.026-10.808%206.499-22.584%208.54-34.832%209.297-8.59.53-17.083%202.1-23.997%207.493-13.869%2010.816-29.178%2019.19-44.522%2027.584-16.259%208.894-30.587%2020.76-46.297%2030.514a67.097%2067.097%200%200%201-9.28%204.886%2077.357%2077.357%200%200%200-29.05%2021.551c-8.286%209.74-18.79%2016.896-28.078%2025.45-9.98%209.191-21.67%2015.848-33.07%2023.076-19.254%2012.21-37.575%2025.855-54.148%2041.656-7.29%208.014-16.385%2013.623-25.765%2018.688a124.368%20124.368%200%200%200-29.281%2021.53c-12.851%2012.906-27.16%2024.053-40.994%2035.791-15.623%2013.256-31.134%2026.671-47.792%2038.594-13.408%209.595-26.008%2020.428-40.054%2028.966-19.985%2012.147-42.229%2018.548-65.339%2022.158-23.03%203.598-46.127%206.38-69.37%208.143-10.315.782-20.554%201.86-30.764-.692a40.987%2040.987%200%200%201-7.554-2.588%20121.642%20121.642%200%200%200-40.842-10.699c-20.302-1.92-39.113-9.337-57.956-16.487-12.058-4.575-22.506-12.255-33.957-17.999-27.418-13.753-53.802-29.333-80.218-44.87-4.288-2.522-9.018-4.291-13.554-6.375a117.9%20117.9%200%200%201-30.656-20.336c-12.992-11.884-28.498-20.256-43.547-29.09-24.985-14.665-50.637-28.162-76.147-41.905-20.866-11.241-42.198-21.328-64.624-29.043a11.365%2011.365%200%200%201-5.462-3.347Z%22%20style%3D%22fill%3A%23fbfbf5%22%20data-name%3D%22Layer%202%22%2F%3E%3C%2Fsvg%3E");
  }
}

@media (min-width: 768px) and (prefers-color-scheme: dark) {
  .back-image_wavy-gray::before, .back-image_wavy-gray::after {
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%202023.172%20535.44%22%3E%3Cpath%20d%3D%22M.087%20311.101Q.087%20157.63%200%204.158C-.003.86.488.001%204.029.001Q1011.592.157%202019.155%200c3.56%200%204.02.892%204.017%204.168q-.152%20177.467-.085%20354.933c-1.436%204.932-5.711%207.564-8.936%2011.054a31.755%2031.755%200%200%201-5.872%203.76c-11.686%205.627-23.091%2011.8-34.56%2017.846-8.708%204.591-17.777%207.39-27.731%206.677-5.35-.153-10.551-1.43-15.813-2.205-8.344-1.229-16.676-1.444-24.82.584-14.58%203.63-29.019%202.02-43.613.201-14.65-1.826-28.855-4.953-42.414-10.882a57.875%2057.875%200%200%200-23.906-4.552c-26.604.29-51.841-6.269-76.48-15.171-13.1-4.733-26.228-8.804-40.016-10.396-14.644-1.692-27.93-7.418-41.344-12.895a53.106%2053.106%200%200%200-20.52-3.692c-4.998.02-10.005-.177-14.994.045a48.484%2048.484%200%200%201-23.358-4.427c-15.697-7.532-32.587-11.726-48.668-18.118-15.227-6.054-31.239-9.458-46.752-14.522a152.285%20152.285%200%200%201-19.862-8.14c-29.167-14.312-57.904-29.471-86.916-44.087-29.795-15.01-57.715-33.22-86.097-50.636-14.644-8.986-29.921-16.804-45.318-24.36-11.334-5.561-23.82-7.359-36.117-9.566-7.545-1.355-15.05-2.888-22.54-4.514-20.502-4.45-41.046-3.515-61.529.024-6.475%201.12-12.159%204.71-17.674%208.026-10.808%206.499-22.584%208.54-34.832%209.297-8.59.53-17.083%202.1-23.997%207.493-13.869%2010.816-29.178%2019.19-44.522%2027.584-16.259%208.894-30.587%2020.76-46.297%2030.514a67.097%2067.097%200%200%201-9.28%204.886%2077.357%2077.357%200%200%200-29.05%2021.551c-8.286%209.74-18.79%2016.896-28.078%2025.45-9.98%209.191-21.67%2015.848-33.07%2023.076-19.254%2012.21-37.575%2025.855-54.148%2041.656-7.29%208.014-16.385%2013.623-25.765%2018.688a124.368%20124.368%200%200%200-29.281%2021.53c-12.851%2012.906-27.16%2024.053-40.994%2035.791-15.623%2013.256-31.134%2026.671-47.792%2038.594-13.408%209.595-26.008%2020.428-40.054%2028.966-19.985%2012.147-42.229%2018.548-65.339%2022.158-23.03%203.598-46.127%206.38-69.37%208.143-10.315.782-20.554%201.86-30.764-.692a40.987%2040.987%200%200%201-7.554-2.588%20121.642%20121.642%200%200%200-40.842-10.699c-20.302-1.92-39.113-9.337-57.956-16.487-12.058-4.575-22.506-12.255-33.957-17.999-27.418-13.753-53.802-29.333-80.218-44.87-4.288-2.522-9.018-4.291-13.554-6.375a117.9%20117.9%200%200%201-30.656-20.336c-12.992-11.884-28.498-20.256-43.547-29.09-24.985-14.665-50.637-28.162-76.147-41.905-20.866-11.241-42.198-21.328-64.624-29.043a11.365%2011.365%200%200%201-5.462-3.347Z%22%20style%3D%22fill%3A%2332455f%22%20data-name%3D%22Layer%202%22%2F%3E%3C%2Fsvg%3E");
  }
}

@media (min-width: 768px) {
  .back-image_wavy-gray-diagonal {
    background-size: cover;
    min-height: calc(42vw + 6em);
  }
  .back-image_wavy-gray-diagonal .promo-event__main {
    width: 60%;
  }
  .back-image_dual-green::before, .back-image_dual-green::after {
    background-repeat: no-repeat;
    background-size: auto 80%;
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20879%20420.1%22%20style%3D%22enable-background%3Anew%200%200%20879%20420.1%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20d%3D%22M879%20420.1H0v-381c1.3-.3%202.6-.4%203.8-.9C51.7%2019.2%20101.1%206.3%20152.6%202c38.3-3.3%2076.6-2.4%20114.7%202.6%2059.7%207.9%20114.1%2029.5%20163.9%2063.1%2035.6%2024%2067.9%2052.1%20100.1%2080.4%2035.9%2031.6%2071.7%2063.3%20110.6%2091.3%2028.7%2020.6%2058.1%2040.2%2086.1%2061.7%2050.1%2038.4%2099.4%2077.9%20149%20117%20.8.4%201.3%201.3%202%202z%22%20style%3D%22fill%3A%235f6551%22%2F%3E%3C%2Fsvg%3E");
    background-position: left bottom;
  }
  .back-image_dual-green::before, .back-image_dual-green::after {
    -webkit-filter: drop-shadow(20px 0 10px rgba(0, 0, 0, 0.1));
            filter: drop-shadow(20px 0 10px rgba(0, 0, 0, 0.1));
  }
  .back-image_dual-green::after {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  .back-image_dual-green .row {
    -ms-flex-pack: distribute;
        justify-content: space-around;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin: 0 -2em;
  }
  .back-image_dual-green .row > div {
    width: 50%;
    padding: 0 2em;
  }
  .back-image_tinted-purple, .back-image_tinted-blue {
    color: #fbfbf5;
    padding: 8em 0;
  }
}

@media (min-width: 980px) {
  .back-image_wavy-gray-diagonal::before, .back-image_wavy-gray-diagonal::after {
    background-size: 100%;
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201740%20786.6%22%20style%3D%22enable-background%3Anew%200%200%201740%20786.6%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20d%3D%22M0%20648.4V3.9C0%201.8%201.8%200%203.9%200h1732.2c2.2%200%203.9%201.8%203.9%203.9v302.7c0%202.8-3%204.8-5.5%203.5h-.1c-15.4-8.1-31.9-12.9-48.8-16.2-12.3-2.4-24.8-4.2-37.1-6.8-14.7-3.1-29.1-7.1-44.4-6.3-11.2.6-22.5-.2-33.7.2-7.6.3-15.2%201.2-22.6%202.6-15.4%202.8-27.7%2012.7-41.7%2018.7-7.3%203.2-15.1%205.8-22.9%207.3-6.8%201.4-14%20.8-21%201.2-14.3.9-27.5%205.2-38.7%2014.2-15.5%2012.4-32.5%2022.3-49.9%2031.8-15.1%208.2-29.5%2017.8-44.1%2027.1-16.7%2010.6-31.5%2023.9-50%2031.8-16.3%207-30.3%2017.1-42.2%2030.3-6.9%207.6-14.4%2014.8-22.1%2021.7-9.4%208.4-19.1%2014.4-28.9%2022.3-7.4%206.1-47.9%2016.4-56%2021.5-16.3%2010.2-63.7%2028.3-68.8%2030.9-12.7%206.5-78.1%2019.5-90.9%2025.8-17%208.4-30.9%2021.1-46%2032.3-7.2%205.4-14.3%2010.8-21.7%2015.8-16.1%2011.1-32.3%2022-48.6%2032.9-14.4%209.7-28.7%2019.7-43.5%2028.9-16.2%2010.1-31.7%209.8-48%2019.6-15.6%209.4-63.2%2030.6-80.8%2036.7-19.7%206.8-136.4%2028.9-156.6%2034.2-15.8%204.1-32.2%205.9-48.4%208.1-15.4%202.1-30.9%203.5-46.3%205.1-4.9.5-9.9.7-14.9%201.2-12.7%201.2-25.3%203-38%203.6s-93.2-3.5-104.9-8.7c-13.2-5.9-89.1-21.3-103.6-22.9-19-2.1-74.6-31.6-104.4-49.8-44.6-27.2-53.5-46.5-63.3-53.6-1-.6-1.6-1.9-1.6-3.2z%22%20style%3D%22fill%3A%23fbfbf5%22%2F%3E%3C%2Fsvg%3E");
    background-color: transparent;
  }
}

@media (min-width: 980px) and (prefers-color-scheme: dark) {
  .back-image_wavy-gray-diagonal::before, .back-image_wavy-gray-diagonal::after {
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201740%20786.6%22%20style%3D%22enable-background%3Anew%200%200%201740%20786.6%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20d%3D%22M0%20648.4V3.9C0%201.8%201.8%200%203.9%200h1732.2c2.2%200%203.9%201.8%203.9%203.9v302.7c0%202.8-3%204.8-5.5%203.5h-.1c-15.4-8.1-31.9-12.9-48.8-16.2-12.3-2.4-24.8-4.2-37.1-6.8-14.7-3.1-29.1-7.1-44.4-6.3-11.2.6-22.5-.2-33.7.2-7.6.3-15.2%201.2-22.6%202.6-15.4%202.8-27.7%2012.7-41.7%2018.7-7.3%203.2-15.1%205.8-22.9%207.3-6.8%201.4-14%20.8-21%201.2-14.3.9-27.5%205.2-38.7%2014.2-15.5%2012.4-32.5%2022.3-49.9%2031.8-15.1%208.2-29.5%2017.8-44.1%2027.1-16.7%2010.6-31.5%2023.9-50%2031.8-16.3%207-30.3%2017.1-42.2%2030.3-6.9%207.6-14.4%2014.8-22.1%2021.7-9.4%208.4-19.1%2014.4-28.9%2022.3-7.4%206.1-47.9%2016.4-56%2021.5-16.3%2010.2-63.7%2028.3-68.8%2030.9-12.7%206.5-78.1%2019.5-90.9%2025.8-17%208.4-30.9%2021.1-46%2032.3-7.2%205.4-14.3%2010.8-21.7%2015.8-16.1%2011.1-32.3%2022-48.6%2032.9-14.4%209.7-28.7%2019.7-43.5%2028.9-16.2%2010.1-31.7%209.8-48%2019.6-15.6%209.4-63.2%2030.6-80.8%2036.7-19.7%206.8-136.4%2028.9-156.6%2034.2-15.8%204.1-32.2%205.9-48.4%208.1-15.4%202.1-30.9%203.5-46.3%205.1-4.9.5-9.9.7-14.9%201.2-12.7%201.2-25.3%203-38%203.6s-93.2-3.5-104.9-8.7c-13.2-5.9-89.1-21.3-103.6-22.9-19-2.1-74.6-31.6-104.4-49.8-44.6-27.2-53.5-46.5-63.3-53.6-1-.6-1.6-1.9-1.6-3.2z%22%20style%3D%22fill%3A%2332455f%22%2F%3E%3C%2Fsvg%3E");
  }
}

@media (min-width: 980px) {
  .back-image_wavy-gray-diagonal_bicolor::before {
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201740%20786.6%22%20style%3D%22enable-background%3Anew%200%200%201740%20786.6%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20d%3D%22M0%20648.4V3.9C0%201.8%201.8%200%203.9%200h1732.2c2.2%200%203.9%201.8%203.9%203.9v302.7c0%202.8-3%204.8-5.5%203.5h-.1c-15.4-8.1-31.9-12.9-48.8-16.2-12.3-2.4-24.8-4.2-37.1-6.8-14.7-3.1-29.1-7.1-44.4-6.3-11.2.6-22.5-.2-33.7.2-7.6.3-15.2%201.2-22.6%202.6-15.4%202.8-27.7%2012.7-41.7%2018.7-7.3%203.2-15.1%205.8-22.9%207.3-6.8%201.4-14%20.8-21%201.2-14.3.9-27.5%205.2-38.7%2014.2-15.5%2012.4-32.5%2022.3-49.9%2031.8-15.1%208.2-29.5%2017.8-44.1%2027.1-16.7%2010.6-31.5%2023.9-50%2031.8-16.3%207-30.3%2017.1-42.2%2030.3-6.9%207.6-14.4%2014.8-22.1%2021.7-9.4%208.4-19.1%2014.4-28.9%2022.3-7.4%206.1-47.9%2016.4-56%2021.5-16.3%2010.2-63.7%2028.3-68.8%2030.9-12.7%206.5-78.1%2019.5-90.9%2025.8-17%208.4-30.9%2021.1-46%2032.3-7.2%205.4-14.3%2010.8-21.7%2015.8-16.1%2011.1-32.3%2022-48.6%2032.9-14.4%209.7-28.7%2019.7-43.5%2028.9-16.2%2010.1-31.7%209.8-48%2019.6-15.6%209.4-63.2%2030.6-80.8%2036.7-19.7%206.8-136.4%2028.9-156.6%2034.2-15.8%204.1-32.2%205.9-48.4%208.1-15.4%202.1-30.9%203.5-46.3%205.1-4.9.5-9.9.7-14.9%201.2-12.7%201.2-25.3%203-38%203.6s-93.2-3.5-104.9-8.7c-13.2-5.9-89.1-21.3-103.6-22.9-19-2.1-74.6-31.6-104.4-49.8-44.6-27.2-53.5-46.5-63.3-53.6-1-.6-1.6-1.9-1.6-3.2z%22%20style%3D%22fill%3A%235f6551%22%2F%3E%3C%2Fsvg%3E");
  }
  .back-image_dual-green::before, .back-image_dual-green::after {
    background-size: auto 95%;
  }
}

@media (min-width: 1600px) {
  .back-image_wavy-gray-diagonal {
    min-height: calc(42vw + 11em);
    padding: 5em 0;
  }
  .back-image_wavy-gray-diagonal .promo-event__main {
    width: 35%;
  }
}

/*
H1-6

Markup:
<div class="h1">H1</div>
<div class="h2">H2</div>
<div class="h3">H3</div>
<div class="h4">H4</div>
<div class="h5">H5</div>
<div class="h6">H6</div>

Styleguide Typography.H1-6
*/
.h1 {
  font-size: 3.25rem;
  letter-spacing: 6px;
  text-transform: uppercase;
}

@media (min-width: 1024px) {
  .h1 {
    font-size: 6rem;
  }
}

@media (min-width: 1600px) {
  .h1 {
    font-size: 8rem;
  }
}

.h2 {
  font-size: 3rem;
  text-transform: uppercase;
}

@media (min-width: 1024px) {
  .h2 {
    font-size: 4rem;
  }
}

@media (min-width: 1600px) {
  .h2 {
    font-size: 6.25rem;
  }
}

.h3 {
  font-size: 2rem;
  letter-spacing: 3px;
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .h3 {
    letter-spacing: 7px;
  }
}

@media (min-width: 1024px) {
  .h3 {
    font-size: 3rem;
  }
}

@media (min-width: 1600px) {
  .h3 {
    font-size: 4.67rem;
  }
}

.h4 {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
}

@media (min-width: 1600px) {
  .h4 {
    font-size: 2.5rem;
  }
}

.h5 {
  font-weight: 700;
  font-size: 1.25rem;
  text-transform: uppercase;
}

/*
Titles

Markup:
<div class="title {{modifier_class}} h1">
    <div class="title__main">Discover your<br/>next Hike</div>
    <div class="title__subtitle">Edge of the world</div>     
</div>

.title_center - center
.title_underlined - underlined
.title_color-main - color main
.title_color-green - color green

Styleguide Typography.Titles
*/
.title {
  font-family: 'Bebas Neue';
  line-height: 1;
  position: relative;
}

.title__subtitle {
  font-size: 0.5em;
  letter-spacing: 4px;
  display: block;
}

.title__main {
  display: block;
}

.title__main + .title__subtitle {
  margin: 0.25em 0;
  display: block;
}

.title_center {
  text-align: center;
}

.title_color-main {
  color: var(--main-color);
}

@media (prefers-color-scheme: dark) {
  .title_color-main::before {
    background: transparent;
  }
}

.title_underlined {
  margin-bottom: 1.5em;
}

.title_underlined::after {
  content: "";
  position: absolute;
  display: block;
  width: 2em;
  border-bottom: 9px solid currentColor;
  bottom: -0.5em;
}

.align-right .title_underlined::after {
  right: 0;
}

/*
Corner

Markup:
<div>
    <div class="corner {{modifier_class}}">Edge of the world</div> 
</div>

.corner_type-bl - bottom left corner
.corner_type-tr - top right corner

Styleguide Corner
*/
.corner {
  display: inline-block;
  position: relative;
}

.corner_type-bl::before {
  position: absolute;
  content: "";
  width: 2rem;
  height: 2rem;
}

.corner_type-bl::before {
  border-left: solid 2px currentColor;
  border-bottom: solid 2px currentColor;
  left: -0.75rem;
  bottom: -0.75rem;
}

.corner_type-tr::before {
  position: absolute;
  content: "";
  width: 2rem;
  height: 2rem;
}

.corner_type-tr::before {
  border-right: solid 2px currentColor;
  border-top: solid 2px currentColor;
  right: -0.75rem;
  top: -0.75rem;
}

@media (min-width: 768px) {
  .corner_type-bl::before {
    left: -1.25rem;
  }
  .corner_type-tr::before {
    right: -1.25rem;
  }
}

.text {
  letter-spacing: 0.05em;
  font-weight: 600;
}

.text .h1, .text .h2, .text .h3, .text .h4 {
  margin: 1em 0 0.5em;
}

.text .h1:first-child, .text .h2:first-child, .text .h3:first-child, .text .h4:first-child {
  margin-top: 0;
}

.text p {
  line-height: 1.5em;
  margin: 1em 0;
}

.text p:first-child {
  margin-top: 0;
}

.text ul li {
  margin: 0.5em 0;
}

@media (min-width: 1600px) {
  .text .h4 {
    margin: 1em 0 0.5em;
  }
  .text p {
    line-height: 2em;
    margin: 1.5em 0;
  }
  .text ul li {
    margin: 1em 0;
  }
}

.box-underlined-above {
  padding: 2em 0 0 0;
  border-top: solid 1px var(--tint-color-text);
  margin: 2em 0 0 0;
}

/*
Icons

Markup:
<span class="icon {{modifier_class}}">icon rounded</span>
<span class="icon icon_rounded {{modifier_class}}">icon rounded</span>  

.icon_mountains - mountains
.icon_man - man
.icon_backpack - backpack

Styleguide Icons
*/
.icon {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  display: block;
  text-indent: -99999999px;
  position: relative;
  width: 140px;
  height: 140px;
}

.icon::after {
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

.icon::after {
  content: '';
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.icon_rounded {
  border-radius: 50%;
  background-color: #32455f;
}

.icon_rounded::after {
  -webkit-mask-size: 70%;
          mask-size: 70%;
  background-color: #fff;
  -webkit-mask-position: 50% 50%;
          mask-position: 50% 50%;
}

.icon_rounded.icon_backpack::after {
  -webkit-mask-size: 50%;
          mask-size: 50%;
}

.icon_mountains::after {
  -webkit-mask-image: url("../i/icon-mountains.svg");
          mask-image: url("../i/icon-mountains.svg");
}

.icon_backpack::after {
  -webkit-mask-image: url("../i/icon-backpack.svg");
          mask-image: url("../i/icon-backpack.svg");
}

.icon_man::after {
  -webkit-mask-image: url("../i/icon-man.svg");
          mask-image: url("../i/icon-man.svg");
}

.icon_center {
  margin: 0 auto;
}

/*
Event

Markup:
<div class="promo-event back-image back-image_tinted-purple" style="background-image:url('/i/big-photo.jpg');">
    <div class="container">
        <div class="row">
            <div class="promo-event__title">
                <h1 class="title h1 back-image__title">
                    <span class="title__main corner corner-tr">BIG BEND NATIONAL<br/>PARK hiking guide</span>
                    <span class="title__subtitle corner corner-bl">this hike is the next<br/>best option.</span>
                </h1>
            </div>         
            <div class="promo-event__date back-image__event">
                <div class="h3 title title_underlined">
                    <time datetime="2020-05-21">21.05.20</time>
                </div>
                <div>
                    <a href="#" class="button button-more button_color-back">see more</a>
                </div>            
            </div>          
        </div>
    </div>
</div>
 <div class="promo-event back-image back-image_wavy back-image_wavy-gray-diagonal"
      style="background-image:url('/i/group.jpg');">
      <div class="container">
        <div class="row">
          <div class="promo-event__main">
            <div class="title title_main-color h2 back-image__title promo-event__title">
                <h2 class="title__main"><span class="corner corner-bl"><span
                    class="corner corner-tr">Rock</span><br />Climbing</span>
                </h2>
              </div>
            <div class="text">
              <h3 class="h4 title">1. Classes & Events</h3>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.
              </p>
              <div class="box-underlined-above">
                <p>
                  <strong>10 modules <br />
                    divided into 7 weekends</strong>
                </p>
              </div>
            </div>
          </div>
          <div class="promo-event__more">
            <div class="row">
              <div class="corner corner-bl">
                <h4 class="h4 title">
                  <time datetime="2020-09-28">28.09.20</time>
                </h4>
                <time class="promo-event__time" datetime="15:30">15.30 hs.</time>
              </div>
              <div class="promo-event__price">
                Price<br />
                $900
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

Styleguide Promo Event
*/
.promo-event .row {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.promo-event__more {
  padding: 2em 0;
}

.promo-event__more .row {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.promo-event__more .promo-event__time {
  font-size: 1.5em;
  font-family: 'Bebas Neue';
  display: block;
}

.promo-event__title {
  margin-bottom: 1em;
}

.promo-event__price {
  font-size: 1.5em;
  font-weight: bold;
}

* + .promo-event__price {
  margin-left: 2em;
}

.promo-event_inversed .promo-event__main,
.promo-event_inversed .promo-event__more {
  text-align: right;
}

.promo-event_inversed .promo-event__main .title_underlined::after,
.promo-event_inversed .promo-event__more .title_underlined::after {
  right: 5px;
  left: auto;
}

.promo-event_inversed .promo-event__main .row,
.promo-event_inversed .promo-event__more .row {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

@media (min-width: 768px) {
  .promo-event__more {
    padding: 0;
  }
  .promo-event__more .title_underlined::after {
    left: 0px;
    right: auto;
  }
  .promo-event__more .row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .promo-event__more .button {
    margin-right: -0.5em;
  }
  .promo-event__more_right {
    text-align: right;
  }
  .promo-event__more_right .title_underlined::after {
    right: 5px;
    left: auto;
  }
  .promo-event .row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  .promo-event_inversed .promo-event__more {
    text-align: left;
  }
  .promo-event_inversed .promo-event__more .title_underlined::after {
    left: 0px;
    right: auto;
  }
  .promo-event_inversed .promo-event__more .row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  .promo-event_inversed .row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
  }
  .promo-event_flex-end .row {
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
  }
}

/*
Day Card

Markup:
<div class="day-card">
    <h3 class="h4 title">Day 2.</h3>
    <div class="row wrap-row">
        <div class="day-card__description text">
        <ul class="dashed-ul">
            <li>Dolor sit amet consectetur</li>
            <li>Adipiscing elit aptent </li>
            <li>Torquent, interdum</li>
        </ul>
        </div>
        <span class="icon day-card__icon icon_rounded icon_backpack">mountains</span>              
    </div>
    <div class="box-underlined-above">
        <h4 class="h4 title">Lorem Consec Ipsum<br/>
        <time datetime="2020-09-28">28.09.20</time></h4>
        <time class="day-card__day-time" datetime="16:00">16.00 hs.</time>
        <div class="indicator indicator_fill-60">3/5</div>
    </div>
</div>

Styleguide Day Card
*/
.day-card {
  padding: 2em;
  -webkit-box-shadow: 0 5px 10px var(--box-shadow-color);
          box-shadow: 0 5px 10px var(--box-shadow-color);
  border-radius: 5px;
  color: #32455f;
  width: 100%;
}

.day-card + .day-card {
  margin-top: 2em;
}

.day-card__day-time {
  font-family: 'Bebas Neue';
  display: block;
}

.day-card__description {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  width: auto;
  padding-right: 1em;
}

.day-card__icon {
  margin: 0 auto;
}

.day-card__day-time {
  font-size: 1.5em;
  margin: 0.5em 0;
}

@media (min-width: 980px) {
  .day-card {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    width: auto;
  }
  .day-card + .day-card {
    margin-left: 5vw;
    margin-top: 0;
  }
  .day-card__description {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    width: auto;
  }
}

@media (prefers-color-scheme: dark) {
  .day-card {
    background: var(--main-background-lighter-color);
  }
}

/*
Lists

Markup:
<ul class="{{modifier_class}}">
    <li>Dolor sit amet consectetur</li>
    <li>Adipiscing elit aptent </li>
    <li>Torquent, interdum</li>
</ul>

.list-dashed - dashed list
.list-vertical-nav - vertical nav list

Styleguide Lists
*/
.list-dashed {
  margin-left: 1em;
  list-style-type: none;
  font-family: 'Raleway';
  font-size: 1rem;
}

.list-dashed li {
  position: relative;
}

.list-dashed li::before {
  content: "-";
  position: absolute;
  left: -1em;
}

@media (min-width: 1600px) {
  .list-dashed {
    font-size: 1.25rem;
  }
}

.list-vertical-nav {
  list-style-type: none;
}

.list-vertical-nav li {
  display: block;
  margin: 0.5em 0;
}

/*
Indicator

Markup:
<div class="indicator {{modifier_class}}">n/5</div>

.indicator_fill-20 - man
.indicator_fill-40 - backpack
.indicator_fill-60 - mountains
.indicator_fill-80 - man
.indicator_fill-100 - backpack

Styleguide Indicator
*/
.indicator {
  display: inline-block;
  width: 110px;
  text-indent: 110px;
  margin-right: 30px;
  position: relative;
  background: url('data:image/svg+xml; utf8, <svg height="22" width="22" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle cx="6" cy="6" r="4" stroke="%2332455f" fill="transparent" stroke-width="1"></circle></svg>') 0 -100% repeat-x;
  font-family: 'Raleway';
  font-weight: bold;
}

.indicator::after {
  content: '';
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  background: url('data:image/svg+xml; utf8, <svg height="22" width="22" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle cx="6" cy="6" r="4" stroke="%2332455f" fill="32455f" stroke-width="1"></circle></svg>') 0 -100% repeat-x;
}

.indicator_fill-20::after {
  width: 20%;
}

.indicator_fill-40::after {
  width: 40%;
}

.indicator_fill-60::after {
  width: 60%;
}

.indicator_fill-80::after {
  width: 80%;
}

.indicator_fill-100::after {
  width: 100%;
}

/*
Mini Cards

Markup:
<div class="mini-cards">
      <div class="container">       
        <div class="row mini-cards__container">
          <div class="mini-card {{modifier_class}}">
            <img alt="mini-card 1" src="../i/place1.jpg" width="270" height="270" />
            <h3 class="h4 title mini-card__title">Mountain Loop</h3>
            <div class="text">
              <p>Lorem ipsum sit amet, 
                consectetur  adipisicing...</p>
                <div class="box-underlined-above">
                  <p>
                    <strong>Location 0.3 miles.</strong>
                  </p>
                </div> 
            </div>                      
          </div>
          <div class="mini-card {{modifier_class}}">
            <img alt="mini-card 1" src="../i/place2.jpg" width="270" height="270" />
            <h3 class="h4 title mini-card__title">National Park</h3>
            <div class="text">              
              <p>Lorem ipsum sit amet, 
                consectetur  adipisicing...</p>
                <div class="box-underlined-above">
                  <p>
                    <strong>Location 0.3 miles.</strong>
                  </p>
                </div>   
            </div>                     
          </div>
          <div class="mini-card {{modifier_class}}">
            <img alt="mini-card 1" src="../i/place3.jpg" width="270" height="270" />
            <h3 class="h4 title mini-card__title">Canyon Trail</h3>
            <div class="text">              
              <p>Lorem ipsum sit amet, 
                consectetur  adipisicing...</p>
                <div class="box-underlined-above">
                  <p>
                    <strong>Location 0.3 miles.</strong>
                  </p>
                </div>  
            </div>                      
          </div>
        </div>        
      </div>
    </div>

.mini-card_center - center

Styleguide Mini Card
*/
.mini-cards__container {
  margin: 0 -2em;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.mini-card {
  padding: 0 2em;
  max-width: 300px;
  margin: 1.5em 0;
}

.mini-card img {
  width: 100%;
  height: auto;
  border-radius: 50%;
}

.mini-card__title {
  margin: 1em 0;
}

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

/*
Decrease

Markup:
<div class="decrease">
    A<span>B<span>C<span>D</span></span></span>
</div>

Styleguide Decrease
*/
.decrease {
  font-family: 'Bebas Neue';
  font-size: 6em;
}

.decrease span {
  display: inline-block;
  font-size: 0.6em;
  margin-left: calc(2rem - 0.5em);
}

/*
Footer

Markup:
 <footer class="info-tile footer">
    <div class="container">
      <div class="row">
        <div class="col text">          
          <p>
            Lorem ipsum dolor sit amet, consec
            tetur adipisicing elit, sed do eiusmod tempor incididunt ultimam quantum Lorem ipsum dolor sit amet, consec
            tetur adipisicing elit, sed do eiusmod tempor incididunt ultimam quantum Lorem ipsum dolor sit amet, consec          
          </p>
        </div>
        <div class="col row">
          <div class="col">
            Lorem ipsum 
          </div>
          <div class="col">
            Lorem ipsum 
          </div>
          <div class="col">
            Lorem ipsum 
          </div>
        </div>
      </div>
      <div>
        <a class="logo" href="#" alt="Hiking Life Logo">Hiking <span>Life</span></a>
      </div>
    </div>
  </footer>

Styleguide Footer
*/
.footer {
  border-top: 5px solid #99a2af;
  border-bottom: 1em solid var(--green-color);
}

.footer .row {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 0 -2em;
}

.footer .row .col {
  padding: 0 2em;
}

.footer, .footer a {
  color: var(--green-color);
}

.footer .logo {
  color: var(--main-color);
  margin: 2em 0 0;
}