*,
*::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);
  }
}

.info-tile {
  padding: 2em 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;
}

.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;
}

/*
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);
}

/*
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;
}

/*
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);
  }
}

/*
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;
}

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

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

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

.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;
}

.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;
}

.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;
}

/*
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 (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;
}

.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;
}