@charset "UTF-8";
@import url(vendors/reset.css);
@import url(vendors/normalize.css);
@import url(vendors/swiper.css);
@import url(font-awesome.css);
/* --------------------------------
	Fonts
--------------------------------*/
/*** Montserrat ***/
@font-face {
  font-family: 'Montserrat';
  src: url("../fonts/montserrat/montserrat-regular-webfont.eot");
  src: url("../fonts/montserrat/montserrat-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/montserrat/montserrat-regular-webfont.woff2") format("woff2"), url("../fonts/montserrat/montserrat-regular-webfont.woff") format("woff"), url("../fonts/montserrat/montserrat-regular-webfont.ttf") format("truetype"), url("../fonts/montserrat/montserrat-regular-webfont.svg#montserrat") format("svg");
  font-weight: 400;
  font-style: normal; }
@font-face {
  font-family: 'Montserrat';
  src: url("../fonts/montserrat/montserrat-italic-webfont.eot");
  src: url("../fonts/montserrat/montserrat-italic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/montserrat/montserrat-italic-webfont.woff2") format("woff2"), url("../fonts/montserrat/montserrat-italic-webfont.woff") format("woff"), url("../fonts/montserrat/montserrat-italic-webfont.ttf") format("truetype"), url("../fonts/montserrat/montserrat-italic-webfont.svg#montserrat") format("svg");
  font-weight: 400;
  font-style: italic; }
@font-face {
  font-family: 'Montserrat';
  src: url("../fonts/montserrat/montserrat-thin-webfont.eot");
  src: url("../fonts/montserrat/montserrat-thin-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/montserrat/montserrat-thin-webfont.woff2") format("woff2"), url("../fonts/montserrat/montserrat-thin-webfont.woff") format("woff"), url("../fonts/montserrat/montserrat-thin-webfont.ttf") format("truetype"), url("../fonts/montserrat/montserrat-thin-webfont.svg#montserrat") format("svg");
  font-weight: 100;
  font-style: normal; }
@font-face {
  font-family: 'Montserrat';
  src: url("../fonts/montserrat/montserrat-thinitalic-webfont.eot");
  src: url("../fonts/montserrat/montserrat-thinitalic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/montserrat/montserrat-thinitalic-webfont.woff2") format("woff2"), url("../fonts/montserrat/montserrat-thinitalic-webfont.woff") format("woff"), url("../fonts/montserrat/montserrat-thinitalic-webfont.ttf") format("truetype"), url("../fonts/montserrat/montserrat-thinitalic-webfont.svg#montserrat") format("svg");
  font-weight: 100;
  font-style: italic; }
@font-face {
  font-family: 'Montserrat';
  src: url("../fonts/montserrat/montserrat-extralight-webfont.eot");
  src: url("../fonts/montserrat/montserrat-extralight-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/montserrat/montserrat-extralight-webfont.woff2") format("woff2"), url("../fonts/montserrat/montserrat-extralight-webfont.woff") format("woff"), url("../fonts/montserrat/montserrat-extralight-webfont.ttf") format("truetype"), url("../fonts/montserrat/montserrat-extralight-webfont.svg#montserrat") format("svg");
  font-weight: 200;
  font-style: normal; }
@font-face {
  font-family: 'Montserrat';
  src: url("../fonts/montserrat/montserrat-extralightitalic-webfont.eot");
  src: url("../fonts/montserrat/montserrat-extralightitalic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/montserrat/montserrat-extralightitalic-webfont.woff2") format("woff2"), url("../fonts/montserrat/montserrat-extralightitalic-webfont.woff") format("woff"), url("../fonts/montserrat/montserrat-extralightitalic-webfont.ttf") format("truetype"), url("../fonts/montserrat/montserrat-extralightitalic-webfont.svg#montserrat") format("svg");
  font-weight: 200;
  font-style: italic; }
@font-face {
  font-family: 'Montserrat';
  src: url("../fonts/montserrat/montserrat-light-webfont.eot");
  src: url("../fonts/montserrat/montserrat-light-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/montserrat/montserrat-light-webfont.woff2") format("woff2"), url("../fonts/montserrat/montserrat-light-webfont.woff") format("woff"), url("../fonts/montserrat/montserrat-light-webfont.ttf") format("truetype"), url("../fonts/montserrat/montserrat-light-webfont.svg#montserrat") format("svg");
  font-weight: 300;
  font-style: normal; }
@font-face {
  font-family: 'Montserrat';
  src: url("../fonts/montserrat/montserrat-lightitalic-webfont.eot");
  src: url("../fonts/montserrat/montserrat-lightitalic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/montserrat/montserrat-lightitalic-webfont.woff2") format("woff2"), url("../fonts/montserrat/montserrat-lightitalic-webfont.woff") format("woff"), url("../fonts/montserrat/montserrat-lightitalic-webfont.ttf") format("truetype"), url("../fonts/montserrat/montserrat-lightitalic-webfont.svg#montserrat") format("svg");
  font-weight: 300;
  font-style: italic; }
@font-face {
  font-family: 'Montserrat';
  src: url("../fonts/montserrat/montserrat-medium-webfont.eot");
  src: url("../fonts/montserrat/montserrat-medium-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/montserrat/montserrat-medium-webfont.woff2") format("woff2"), url("../fonts/montserrat/montserrat-medium-webfont.woff") format("woff"), url("../fonts/montserrat/montserrat-medium-webfont.ttf") format("truetype"), url("../fonts/montserrat/montserrat-medium-webfont.svg#montserrat") format("svg");
  font-weight: 500;
  font-style: normal; }
@font-face {
  font-family: 'Montserrat';
  src: url("../fonts/montserrat/montserrat-mediumitalic-webfont.eot");
  src: url("../fonts/montserrat/montserrat-mediumitalic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/montserrat/montserrat-mediumitalic-webfont.woff2") format("woff2"), url("../fonts/montserrat/montserrat-mediumitalic-webfont.woff") format("woff"), url("../fonts/montserrat/montserrat-mediumitalic-webfont.ttf") format("truetype"), url("../fonts/montserrat/montserrat-mediumitalic-webfont.svg#montserrat") format("svg");
  font-weight: 500;
  font-style: italic; }
@font-face {
  font-family: 'Montserrat';
  src: url("../fonts/montserrat/montserrat-semibold-webfont.eot");
  src: url("../fonts/montserrat/montserrat-semibold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/montserrat/montserrat-semibold-webfont.woff2") format("woff2"), url("../fonts/montserrat/montserrat-semibold-webfont.woff") format("woff"), url("../fonts/montserrat/montserrat-semibold-webfont.ttf") format("truetype"), url("../fonts/montserrat/montserrat-semibold-webfont.svg#montserrat") format("svg");
  font-weight: 600;
  font-style: normal; }
@font-face {
  font-family: 'Montserrat';
  src: url("../fonts/montserrat/montserrat-semibolditalic-webfont.eot");
  src: url("../fonts/montserrat/montserrat-semibolditalic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/montserrat/montserrat-semibolditalic-webfont.woff2") format("woff2"), url("../fonts/montserrat/montserrat-semibolditalic-webfont.woff") format("woff"), url("../fonts/montserrat/montserrat-semibolditalic-webfont.ttf") format("truetype"), url("../fonts/montserrat/montserrat-semibolditalic-webfont.svg#montserrat") format("svg");
  font-weight: 600;
  font-style: italic; }
@font-face {
  font-family: 'Montserrat';
  src: url("../fonts/montserrat/montserrat-bold-webfont.eot");
  src: url("../fonts/montserrat/montserrat-bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/montserrat/montserrat-bold-webfont.woff2") format("woff2"), url("../fonts/montserrat/montserrat-bold-webfont.woff") format("woff"), url("../fonts/montserrat/montserrat-bold-webfont.ttf") format("truetype"), url("../fonts/montserrat/montserrat-bold-webfont.svg#montserrat") format("svg");
  font-weight: 700;
  font-style: normal; }
@font-face {
  font-family: 'Montserrat';
  src: url("../fonts/montserrat/montserrat-bolditalic-webfont.eot");
  src: url("../fonts/montserrat/montserrat-bolditalic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/montserrat/montserrat-bolditalic-webfont.woff2") format("woff2"), url("../fonts/montserrat/montserrat-bolditalic-webfont.woff") format("woff"), url("../fonts/montserrat/montserrat-bolditalic-webfont.ttf") format("truetype"), url("../fonts/montserrat/montserrat-bolditalic-webfont.svg#montserrat") format("svg");
  font-weight: 700;
  font-style: italic; }
@font-face {
  font-family: 'Montserrat';
  src: url("../fonts/montserrat/montserrat-extrabold-webfont.eot");
  src: url("../fonts/montserrat/montserrat-extrabold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/montserrat/montserrat-extrabold-webfont.woff2") format("woff2"), url("../fonts/montserrat/montserrat-extrabold-webfont.woff") format("woff"), url("../fonts/montserrat/montserrat-extrabold-webfont.ttf") format("truetype"), url("../fonts/montserrat/montserrat-extrabold-webfont.svg#montserrat") format("svg");
  font-weight: 800;
  font-style: normal; }
@font-face {
  font-family: 'Montserrat';
  src: url("../fonts/montserrat/montserrat-extrabolditalic-webfont.eot");
  src: url("../fonts/montserrat/montserrat-extrabolditalic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/montserrat/montserrat-extrabolditalic-webfont.woff2") format("woff2"), url("../fonts/montserrat/montserrat-extrabolditalic-webfont.woff") format("woff"), url("../fonts/montserrat/montserrat-extrabolditalic-webfont.ttf") format("truetype"), url("../fonts/montserrat/montserrat-extrabolditalic-webfont.svg#montserrat") format("svg");
  font-weight: 800;
  font-style: italic; }
@font-face {
  font-family: 'Montserrat';
  src: url("../fonts/montserrat/montserrat-black-webfont.eot");
  src: url("../fonts/montserrat/montserrat-black-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/montserrat/montserrat-black-webfont.woff2") format("woff2"), url("../fonts/montserrat/montserrat-black-webfont.woff") format("woff"), url("../fonts/montserrat/montserrat-black-webfont.ttf") format("truetype"), url("../fonts/montserrat/montserrat-black-webfont.svg#montserrat") format("svg");
  font-weight: 900;
  font-style: normal; }
@font-face {
  font-family: 'Montserrat';
  src: url("../fonts/montserrat/montserrat-blackitalic-webfont.eot");
  src: url("../fonts/montserrat/montserrat-blackitalic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/montserrat/montserrat-blackitalic-webfont.woff2") format("woff2"), url("../fonts/montserrat/montserrat-blackitalic-webfont.woff") format("woff"), url("../fonts/montserrat/montserrat-blackitalic-webfont.ttf") format("truetype"), url("../fonts/montserrat/montserrat-blackitalic-webfont.svg#montserrat") format("svg");
  font-weight: 900;
  font-style: italic; }
/* --------------------------------
    Custom Colors
--------------------------------*/
:root {
  --no-color: rgba(0,0,0,0);
  --bg-primary: #ffffff;
  --bg-secondary: #f0f0f0;
  --bg-contrasting: #282a2d;
  --bg-contrasting-half: #494C51;
  --bg-contrasting-logo: #808080;
  --accent-primary: #00846A;
  --accent-darker: #005141;
  --accent-lighter: #00AA88;
  --logo-gradient: -webkit-linear-gradient(170deg, #00AA88 10%, #005141 100%);
  --logo-gradient: -moz-linear-gradient(170deg, #00AA88 10%, #005141 100%);
  --logo-gradient: linear-gradient(170deg, #00AA88 10%, #005141 100%);
  --logo-gradient-inv: -webkit-linear-gradient(170deg, #005141 10%, #00AA88 100%);
  --logo-gradient-inv: -moz-linear-gradient(170deg, #005141 10%, #00AA88 100%);
  --logo-gradient-inv: linear-gradient(170deg, #005141 10%, #00AA88 100%);
  --logo-gradient-anim: -webkit-linear-gradient(170deg, #00AA88 0%, #005141 45%, #005141 55%, #00AA88 100%);
  --logo-gradient-anim: -moz-linear-gradient(170deg, #00AA88 0%, #005141 45%, #005141 55%, #00AA88 100%);
  --logo-gradient-anim: linear-gradient(170deg, #00AA88 0%, #005141 45%, #005141 55%, #00AA88 100%);
  --logo-gradient-anim-inv: -webkit-linear-gradient(170deg, #005141 0%, #00AA88 45%, #00AA88 55%, #005141 100%);
  --logo-gradient-anim-inv: -moz-linear-gradient(170deg, #005141 0%, #00AA88 45%, #00AA88 55%, #005141 100%);
  --logo-gradient-anim-inv: linear-gradient(170deg, #005141 0%, #00AA88 45%, #00AA88 55%, #005141 100%);
  --plain-white: -webkit-linear-gradient(0deg, #fff, #fff); }

/* --------------------------------
	Main Styles
--------------------------------*/
* {
  box-sizing: border-box; }

* svg {
  image-rendering: optimizeQuality; }

html,
body {
  margin: 0; }

html {
  font-size: 62.5%;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0.1rem;
  font-weight: 400;
  /* Font-variant */
  font-variant-ligatures: none;
  -webkit-font-variant-ligatures: none;
  /* Smoothing */
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; }

@media screen and (-webkit-min-device-pixel-ratio: 2) {
  html {
    -webkit-font-smoothing: subpixel-antialiased; } }
a {
  outline: none;
  text-decoration: none; }

li {
  list-style: none; }

hr {
  width: 100%;
  margin: 4.0rem 0rem;
  border: 0;
  height: 1px;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0)); }

hr.text::after {
  content: '---';
  display: inline-block;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  transform-origin: 50% 50%;
  padding: 1rem;
  background-color: white;
  color: var(--accent-primary);
  font-weight: 500;
  font-size: 0.8rem; }

hr.text.url::after {
  content: 'slawik.medien.design'; }

hr.text.section {
  width: 50%; }

hr.text.section::after {
  font-size: 2.4rem;
  text-transform: uppercase; }

hr.text.section.colors::after {
  content: 'Color Scheme'; }

/* -------------------------------------------------------
    Typography
-------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
  color: var(--bg-contrasting-half);
  font-weight: 500;
  line-height: 1.5;
  margin: 4.0rem 0rem;
  color: #666; }

h1 {
  font-size: 4.0rem; }

h2 {
  font-size: 3.2rem; }

h3 {
  font-size: 2.8rem; }

h4 {
  font-size: 2.4rem; }

h5 {
  font-size: 2.0rem; }

h6 {
  font-size: 1.6rem; }

a {
  color: var(--accent-primary);
  transition-property: color;
  transition-duration: 0.5s; }

a:hover {
  color: var(--bg-secondary); }

p {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2;
  letter-spacing: 0.064rem;
  color: var(--bg-contrasting-half);
  margin: 1.6rem 0rem; }

/* -------------------------------------------------------
    Grid-Base
-------------------------------------------------------*/
.row {
  display: grid;
  grid-template-columns: repeat(12, 5fr);
  grid-gap: 0.0rem; }

.show-grid [class^=col-] {
  padding-top: 1.0rem;
  padding-bottom: 1.0rem; }

[class^=col-] {
  grid-column-end: span 12; }

@media (min-width: 0) {
  .col-xxs-1 {
    grid-column-end: span 1; }

  .col-xxs-2 {
    grid-column-end: span 2; }

  .col-xxs-3 {
    grid-column-end: span 3; }

  .col-xxs-4 {
    grid-column-end: span 4; }

  .col-xs-5 {
    grid-column-end: span 5; }

  .col-xxs-6 {
    grid-column-end: span 6; }

  .col-xs-7 {
    grid-column-end: span 7; }

  .col-xxs-8 {
    grid-column-end: span 8; }

  .col-xxs-9 {
    grid-column-end: span 9; }

  .col-xxs-10 {
    grid-column-end: span 10; }

  .col-xxs-11 {
    grid-column-end: span 11; }

  .col-xxs-12 {
    grid-column-end: span 12; } }
@media (min-width: 480px) {
  .col-xs-1 {
    grid-column-end: span 1; }

  .col-xs-2 {
    grid-column-end: span 2; }

  .col-xs-3 {
    grid-column-end: span 3; }

  .col-xs-4 {
    grid-column-end: span 4; }

  .col-xs-5 {
    grid-column-end: span 5; }

  .col-xs-6 {
    grid-column-end: span 6; }

  .col-xs-7 {
    grid-column-end: span 7; }

  .col-xs-8 {
    grid-column-end: span 8; }

  .col-xs-9 {
    grid-column-end: span 9; }

  .col-xs-10 {
    grid-column-end: span 10; }

  .col-xs-11 {
    grid-column-end: span 11; }

  .col-xs-12 {
    grid-column-end: span 12; } }
@media (min-width: 768px) {
  .col-sm-1 {
    grid-column-end: span 1; }

  .col-sm-2 {
    grid-column-end: span 2; }

  .col-sm-3 {
    grid-column-end: span 3; }

  .col-sm-4 {
    grid-column-end: span 4; }

  .col-sm-5 {
    grid-column-end: span 5; }

  .col-sm-6 {
    grid-column-end: span 6; }

  .col-sm-7 {
    grid-column-end: span 7; }

  .col-sm-8 {
    grid-column-end: span 8; }

  .col-sm-9 {
    grid-column-end: span 9; }

  .col-sm-10 {
    grid-column-end: span 10; }

  .col-sm-11 {
    grid-column-end: span 11; }

  .col-sm-12 {
    grid-column-end: span 12; } }
@media (min-width: 992px) {
  .col-md-1 {
    grid-column-end: span 1; }

  .col-md-2 {
    grid-column-end: span 2; }

  .col-md-3 {
    grid-column-end: span 3; }

  .col-md-4 {
    grid-column-end: span 4; }

  .col-md-5 {
    grid-column-end: span 5; }

  .col-md-6 {
    grid-column-end: span 6; }

  .col-md-7 {
    grid-column-end: span 7; }

  .col-md-8 {
    grid-column-end: span 8; }

  .col-md-9 {
    grid-column-end: span 9; }

  .col-md-10 {
    grid-column-end: span 10; }

  .col-md-11 {
    grid-column-end: span 11; }

  .col-md-12 {
    grid-column-end: span 12; } }
@media (min-width: 1200px) {
  .col-lg-1 {
    grid-column-end: span 1; }

  .col-lg-2 {
    grid-column-end: span 2; }

  .col-lg-3 {
    grid-column-end: span 3; }

  .col-lg-4 {
    grid-column-end: span 4; }

  .col-lg-5 {
    grid-column-end: span 5; }

  .col-lg-6 {
    grid-column-end: span 6; }

  .col-lg-7 {
    grid-column-end: span 7; }

  .col-lg-8 {
    grid-column-end: span 8; }

  .col-lg-9 {
    grid-column-end: span 9; }

  .col-lg-10 {
    grid-column-end: span 10; }

  .col-lg-11 {
    grid-column-end: span 11; }

  .col-lg-12 {
    grid-column-end: span 12; } }
@media (min-width: 1690px) {
  .col-xlg-1 {
    grid-column-end: span 1; }

  .col-xlg-2 {
    grid-column-end: span 2; }

  .col-xlg-3 {
    grid-column-end: span 3; }

  .col-xlg-4 {
    grid-column-end: span 4; }

  .col-xlg-5 {
    grid-column-end: span 5; }

  .col-xlg-6 {
    grid-column-end: span 6; }

  .col-xlg-7 {
    grid-column-end: span 7; }

  .col-xlg-8 {
    grid-column-end: span 8; }

  .col-xlg-9 {
    grid-column-end: span 9; }

  .col-xlg-10 {
    grid-column-end: span 10; }

  .col-xlg-11 {
    grid-column-end: span 11; }

  .col-xlg-12 {
    grid-column-end: span 12; } }
/* --------------------------------
	Pre-Loader
--------------------------------*/
.loader-overlay-top {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: white;
  transform-origin: top center;
  z-index: 999999998; }

.loader-overlay-bottom {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--accent-primary);
  z-index: 999999999; }

.loader {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center; }

.loader svg.emblem {
  position: relative;
  width: calc(5.0rem * 1.25);
  height: calc(8.66rem * 1.25);
  transform: scaleX(0);
  transform-origin: center center;
  margin-right: 2.0rem; }

.loader svg.wordmark {
  position: relative;
  width: calc(46.61rem * 0.5);
  width: 0;
  height: calc(7.97rem * 0.5);
  transform-origin: center center; }

/* --------------------------------
	Basic Container
--------------------------------*/
.container {
  position: relative;
  width: 100%;
  left: 0;
  padding: 0.0rem 3.0rem;
  top: 0; }

@media (min-width: 1200px) {
  .container {
    position: relative;
    width: 120.0rem;
    left: calc(50% - 60.0rem);
    padding: 0.0rem 3.0rem;
    top: 0; } }
/* --------------------------------
	Basic Button
--------------------------------*/
a.button {
  display: inline-block;
  background-color: var(--accent-primary);
  background-image: var(--logo-gradient-anim);
  border-radius: 0.6rem;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
  padding: 8px 16px;
  border: none;
  border: 2px solid white;
  cursor: pointer;
  width: 100%;
  background-size: 200%;
  transition: 0.3s; }

a.button:hover {
  background-position: right; }

/* --------------------------------
	Header & Navigation
--------------------------------*/
header {
  position: fixed;
  width: 100%;
  height: 12.0rem;
  top: 0;
  left: 0;
  z-index: 999;
  transition: top;
  transition-duration: 0.4s; }

header.top {
  top: 0.0rem; }

@media (min-width: 462px) {
  header.top {
    top: 2.3rem; } }
header .container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 0 0 0.4rem 0.4rem; }

header .header-logo-wrap {
  position: relative;
  width: calc(20.0rem);
  height: calc(12.0rem); }

header .header-logo svg {
  position: relative;
  width: calc(20.0rem);
  height: calc(6.48rem);
  margin: 2.76rem 0.0rem;
  left: 0.0rem; }

@media (min-width: 343px) {
  header .header-logo-wrap {
    position: relative;
    width: calc(22.2rem);
    height: calc(12.0rem); }

  header .header-logo svg {
    position: relative;
    width: calc(22.2rem);
    height: calc(7.2rem);
    margin: 2.4rem 0.0rem;
    left: 0.0rem; } }
@media (min-width: 386px) {
  header .header-logo-wrap {
    position: relative;
    width: calc(24.75rem);
    height: calc(12.0rem); }

  header .header-logo svg {
    width: calc(24.75rem);
    height: calc(8.0rem);
    margin: 2.0rem 0.0rem; } }
nav {
  position: relative;
  width: calc(100% - 24.75rem - 4.8rem);
  height: 12.0rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end; }

nav ul {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  background-color: rgba(255, 255, 255, 0.95);
  position: fixed;
  left: 0;
  top: 12.0rem;
  width: 100vw;
  height: calc(100vh - 12.0rem);
  transform: scaleY(0);
  transform-origin: top center;
  overflow: hidden; }

nav ul.top {
  top: 12.0rem; }

@media (min-width: 462px) {
  nav ul {
    top: 12.0rem;
    height: calc(100vh - 12.0rem); }

  nav ul.top {
    top: 18.0rem; } }
@media (min-width: 949px) {
  nav ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    visibility: visible;
    opacity: 1;
    padding-right: 2.4rem;
    background-color: rgba(0, 0, 0, 0);
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: 12.0rem; }

  nav ul.top {
    top: 0.1rem; } }
nav ul li {
  position: relative;
  margin: 2.4rem 0.0rem 2.4rem 0.0rem;
  font-size: 1.6rem;
  font-weight: 500;
  text-transform: uppercase;
  transform: translateY(-1.8rem);
  opacity: 0;
  visibility: hidden; }

nav ul li:first-of-type {
  margin-top: calc(-12.0rem + 2.4rem); }

nav ul li a::after {
  content: '';
  position: absolute;
  height: 0.2rem;
  width: calc(100% + 0.3rem);
  left: -0.2rem;
  bottom: -0.5rem;
  border-radius: 0.4rem;
  background-color: var(--accent-primary);
  transform-origin: right;
  transform: scaleX(0);
  transition: transform, background-color;
  transition-duration: 0.4s, 0.4s;
  transition-delay: 0.0s, 0.4s; }

nav ul li.active a::after {
  content: '';
  position: absolute;
  height: 0.2rem;
  width: calc(100% + 0.3rem);
  left: -0.2rem;
  bottom: -0.5rem;
  border-radius: 0.4rem;
  background-color: var(--accent-primary);
  transform-origin: left;
  transform: scaleX(1);
  transition: transform, background-color;
  transition-duration: 0.4s, 0.4s;
  transition-delay: 0.4s, 0.4s; }

nav ul li a {
  color: #808080; }

nav ul li a:hover {
  color: var(--accent-primary); }

@media (min-width: 462px) {
  nav ul li.top:first-of-type {
    margin-top: calc(-21.4rem); }

  nav ul li:first-of-type {
    margin-top: calc(-12.0rem + 2.4rem); } }
@media (min-width: 949px) {
  nav ul li {
    position: relative;
    margin: 0.1rem 2.4rem 0.0rem 2.4rem;
    font-size: 1.6rem;
    font-weight: 500;
    text-transform: uppercase; }

  nav ul li.top:first-of-type {
    margin-top: 0.1rem; }

  nav ul li:first-of-type {
    margin-top: 0.1rem; } }
.menu-button-wrap {
  position: relative;
  width: 4.8rem;
  height: 12.0rem; }

.menu-button {
  position: absolute;
  cursor: pointer;
  width: 4.8rem;
  height: 3.6rem;
  left: 3.6rem;
  top: 4.2rem;
  left: 0.1rem;
  top: calc(4.2rem + 0.1rem); }

.menu-button svg {
  position: absolute;
  width: 4.8rem;
  height: 3.6rem;
  width: calc(4.8rem - 0.2rem);
  height: calc(3.6rem - 0.2rem); }

.menu-button svg {
  stroke: var(--accent-primary); }

.menu-button svg path.center-piece.copy {
  opacity: 0;
  visibility: hidden; }

/* --------------------------------
	Top-Bar
--------------------------------*/
.top-bar-fill {
  position: fixed;
  width: 100%;
  height: 6.0rem;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.95);
  z-index: -1; }

.top-bar {
  position: relative;
  color: #777;
  color: #fff;
  font-weight: 600;
  width: 100%;
  z-index: 1;
  display: none;
  visibility: hidden;
  opacity: 0;
  transform-origin: top center; }

.top-bar .container {
  background-image: var(--logo-gradient-inv);
  border-radius: 0.4rem 0.4rem 0.4rem 0.4rem;
  padding: 0.0rem 0.0rem;
  width: calc(100% - 6.0rem);
  left: 3.0rem;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-start; }

@media (min-width: 462px) {
  .top-bar {
    display: block;
    visibility: visible;
    opacity: 1; }

  .top-bar .container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between; } }
@media (min-width: 1200px) {
  .top-bar .container {
    left: calc(50% - 60.0rem + 3.0rem);
    width: calc(120.0rem - 6.0rem); } }
.top-bar a {
  color: var(--accent-lighter);
  color: #FFA033; }

.top-bar a:hover {
  color: #fff; }

.top-bar .mail,
.name {
  float: left;
  width: 55%; }

.top-bar .phone {
  float: right;
  text-align: right;
  font-size: 16px;
  font-weight: 600;
  padding: 1.0rem 0; }

.top-bar .phone i {
  width: 4.0rem;
  text-align: center; }

.top-bar .phone i.mobile {
  display: unset;
  margin-right: 0.0rem;
  margin-left: 1.6rem; }

.top-bar .phone i.larger {
  display: none;
  margin-right: 1.8rem;
  margin-left: 1.8rem; }

.top-bar .phone.text {
  text-align: left;
  float: left;
  font-weight: 500;
  display: none;
  margin-left: 4.8rem; }

.top-bar .fa-envelope,
.fa-phone {
  margin-right: 4px; }

@media (min-width: 462px) {
  .top-bar .phone.text {
    display: unset; }

  .top-bar .phone i.mobile {
    display: none; }

  .top-bar .phone i.larger {
    display: unset; } }
@media (min-width: 949px) {
  .top-bar .phone i.larger {
    margin-left: 5.5rem; } }
/* --------------------------------
	Main-Styles
--------------------------------*/
main {
  position: relative;
  background-color: none;
  z-index: 1; }

footer {
  position: relative;
  z-index: 0; }

section {
  position: relative;
  padding: 5.0rem 0.0rem; }

section.blank {
  height: 500px; }

section.spacer {
  height: 300px; }

/* --------------------------------
	Hero-Content
--------------------------------*/
section.hero {
  width: 100%;
  min-height: 100vh;
  padding: 0;
  margin-bottom: 12.0rem; }

.swiper-container {
  position: relative;
  height: calc(100vh - 120px - 12.0rem);
  max-width: calc(100% - 60px);
  left: calc(30px);
  margin: 120px 0px 60px 0px;
  z-index: 0;
  border-radius: 0.8rem; }

@media (min-width: 462px) {
  .swiper-container {
    margin: 180px 0px 60px 0px; } }
.swiper-slide {
  overflow: hidden;
  border-radius: 0.8rem; }

.slide-inner {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-size: cover;
  background-position: center;
  border-radius: 0.8rem; }

.swipe-next,
.swipe-prev {
  position: absolute;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  opacity: 0.75;
  width: 3.7rem;
  height: 8.0rem;
  transform: scale(0.8); }

.swipe-next.small,
.swipe-prev.small {
  display: unset; }

.swipe-next.large,
.swipe-prev.large {
  display: none; }

.swipe-prev {
  left: 4px;
  top: calc(25% - 2.4rem);
  border-radius: 0.8rem 0.0rem 0.8rem 0.0rem; }

.swipe-next {
  left: 6px;
  top: calc(75% - 2.4rem);
  border-radius: 0.0rem 0.8rem 0.0rem 0.8rem; }

.swipe-next.small svg,
.swipe-prev.small svg {
  cursor: pointer;
  width: 2.4825rem;
  height: 4.5rem;
  transform: scale(0.8);
  stroke: white; }

.swipe-next.large svg,
.swipe-prev.large svg {
  cursor: pointer;
  width: 2.4825rem;
  height: 4.5rem;
  transform: scale(0.8);
  stroke: var(--accent-primary); }

@media (min-width: 1200px) {
  .swiper-container {
    max-width: calc(1200px - 60px);
    left: calc(50% - 600px + 30px);
    z-index: 0;
    border-radius: 0.8rem; } }
@media (min-width: 1280px) {
  .swipe-next,
  .swipe-prev {
    transform: scale(1); }

  .swipe-next.small,
  .swipe-prev.small {
    display: none; }

  .swipe-next.large,
  .swipe-prev.large {
    display: unset; }

  .swipe-next {
    left: unset;
    right: calc((100% - 1200px) / 4);
    bottom: unset;
    top: calc(50% - 143px);
    color: var(--accent-primary);
    background-color: none;
    width: unset;
    height: unset; }

  .swipe-prev {
    left: calc((100% - 1200px) / 4);
    top: calc(50% - 143px);
    color: var(--accent-primary);
    background-color: none;
    width: unset;
    height: unset; } }
.swiper-pagination {
  margin-bottom: 1.0rem;
  margin-left: 1.0rem;
  transform: scale(1.25) !important;
  display: none; }

.swiper-pagination .swiper-pagination-bullet {
  opacity: 1;
  background-color: white; }

.swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-primary);
  border: white solid 1px; }

@media (min-width: 590px) {
  .swiper-pagination {
    display: unset; } }
.swiper-color-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 0.8rem;
  z-index: 998; }

.swiper-text-container {
  position: absolute;
  left: 3.7rem;
  top: 0;
  width: 33%;
  height: 100%;
  opacity: 1;
  padding: 0.0rem 0.0rem;
  z-index: 999; }

.swiper-slide h2 {
  position: absolute;
  display: block;
  font-weight: 600;
  color: #ffa033;
  text-transform: uppercase;
  margin-left: 1.8rem;
  font-size: 1.8rem;
  letter-spacing: 0.1rem;
  width: 20.5rem;
  top: calc(25% - 6.3rem); }

.swiper-slide p {
  position: absolute;
  display: block;
  width: 20.5rem;
  margin-top: 5.0rem;
  color: white;
  margin-left: 1.8rem;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2.7rem;
  letter-spacing: 0.1rem;
  top: calc(75% - 8.8rem); }

.swiper-slide p span {
  font-weight: 500;
  color: #ffb055; }

.swiper-slide a.button {
  position: absolute;
  left: 1.8rem;
  top: calc(75% - 10.0rem);
  width: calc(30.0rem);
  font-size: 1.4rem;
  text-align: center;
  background-size: 200%;
  background-image: -webkit-linear-gradient(-60deg, #f8aa50 0%, #fa8f15 50%, #f8aa50 100%);
  background-image: -moz-linear-gradient(-60deg, #f8aa50 0%, #fa8f15 50%, #f8aa50 100%);
  background-image: linear-gradient(-60deg, #f8aa50 0%, #fa8f15 50%, #f8aa50 100%);
  margin-top: 8.0rem;
  border-radius: 0.6rem 0.6rem 0.6rem 0.6rem;
  opacity: 0.9;
  display: none; }

section.hero a.button.small {
  position: absolute;
  margin-top: -5.3rem;
  width: calc(100% - 5.6rem);
  left: 2.8rem;
  border-radius: 0.6rem 0.6rem 0.6rem 0.6rem;
  font-size: 1.2rem;
  text-align: center;
  background-size: 200%;
  background-image: -webkit-linear-gradient(-60deg, #f8aa50 0%, #fa8f15 50%, #f8aa50 100%);
  background-image: -moz-linear-gradient(-60deg, #f8aa50 0%, #fa8f15 50%, #f8aa50 100%);
  background-image: linear-gradient(-60deg, #f8aa50 0%, #fa8f15 50%, #f8aa50 100%);
  border: 2px solid white; }

@media (min-width: 386px) {
  .swiper-slide h2 {
    width: 27.0rem;
    font-size: 2.4rem;
    top: calc(25% - 7.2rem);
    font-weight: 500; }

  .swiper-slide p {
    width: 22.5rem;
    font-size: 1.4rem; } }
@media (min-width: 462px) {
  .swiper-slide h2 {
    width: 35.0rem;
    font-size: 3.0rem;
    top: calc(25% - 8.0rem);
    font-weight: 400; }

  .swiper-slide p {
    width: 25.0rem;
    font-size: 1.6rem;
    top: calc(50% - 8.0rem); }

  section.hero a.button.small {
    display: none; }

  .swiper-slide a.button {
    display: unset; } }
@media (min-width: 590px) {
  .swiper-slide h2 {
    width: 40.0rem;
    font-size: 3.6rem;
    top: calc(25% - 9.0rem);
    left: 3.7rem; }

  .swiper-slide p {
    width: 25.0rem;
    font-size: 1.6rem;
    left: 3.7rem; }

  .swiper-slide a.button {
    left: 5.5rem; } }
@media (min-width: 768px) {
  .swiper-color-overlay {
    background-image: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0.75) 25%, rgba(0, 0, 0, 0) 100%);
    background-image: -moz-linear-gradient(90deg, rgba(0, 0, 0, 0.75) 25%, rgba(0, 0, 0, 0) 100%);
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.75) 25%, rgba(0, 0, 0, 0) 100%);
    background-color: transparent; } }
.swiper-deco-bar {
  position: absolute;
  width: 3.7rem;
  height: 100%;
  background-image: var(--logo-gradient-inv);
  border-radius: 0.8rem;
  z-index: 1010; }

.swiper-deco-bar.left {
  left: 0; }

.swiper-deco-bar.right {
  right: 0; }

/* --------------------------------
	Info Section
--------------------------------*/
section.info {
  position: relative; }

section.info .container {
  padding-left: 3.0rem;
  padding-right: 3.0rem; }

section.info h1 {
  color: #777;
  font-weight: 400;
  transform: skew(-5deg);
  line-height: 1.25;
  font-size: 3.6rem; }

section.info h1 span {
  display: inline-block;
  color: #999;
  font-weight: 400;
  transform: skew(-1deg); }

section.info p:first-of-type {
  position: relative;
  display: block;
  color: #777;
  font-size: 1.4rem;
  margin-left: 0.3rem;
  display: inline;
  text-decoration: none;
  border-bottom: 1px solid var(--accent-primary);
  font-style: italic; }

section.info p {
  margin-left: 0.2rem;
  color: #777;
  font-weight: 400; }

section.info p:nth-of-type(2) {
  margin-top: 10.0rem; }

section.info .signature {
  width: 20.0rem;
  float: right;
  margin-right: 3.0rem;
  margin-top: 3.0rem; }

@media (min-width: 440px) {
  section.info .container {
    padding-left: 8.0rem;
    padding-right: 8.0rem; } }
@media (min-width: 506px) {
  section.info h1 {
    margin-bottom: 1.5rem; } }
@media (min-width: 1200px) {
  section.info .container {
    padding-right: 12.0rem; }

  section.info .signature {
    width: 20.0rem;
    float: right;
    margin-right: 3.0rem;
    margin-top: 3.0rem; } }
.info-bg-img::before {
  content: '';
  position: absolute;
  top: calc(0% - 20.0rem);
  right: 0.0rem;
  width: calc(81.0rem * 0.395);
  height: calc(54.0rem * 0.395);
  background-image: url(../img/bg/plant_info_x_y.png);
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: cover;
  z-index: -1;
  overflow: hidden; }

@media (min-width: 360px) {
  .info-bg-img::before {
    width: calc(81.0rem * 0.445);
    height: calc(54.0rem * 0.445); } }
@media (min-width: 768px) {
  .info-bg-img::before {
    width: calc(81.0rem * 0.6);
    height: calc(54.0rem * 0.6); } }
@media (min-width: 1200px) {
  .info-bg-img::before {
    width: calc(81.0rem * 0.8);
    height: calc(54.0rem * 0.8); } }
.info-bg-img::after {
  content: '';
  position: absolute;
  top: calc(100% + 14.0rem);
  left: 0.0rem;
  width: calc(81.0rem * 0.395);
  height: calc(54.0rem * 0.395);
  background-image: url(../img/bg/plant_info.png);
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: cover;
  z-index: -1;
  overflow: hidden; }

@media (min-width: 360px) {
  .info-bg-img::after {
    top: calc(100% + 10.0rem);
    width: calc(81.0rem * 0.445);
    height: calc(54.0rem * 0.445); } }
@media (min-width: 768px) {
  .info-bg-img::after {
    top: calc(100% - 0.0rem);
    width: calc(81.0rem * 0.6);
    height: calc(54.0rem * 0.6); } }
@media (min-width: 1200px) {
  .info-bg-img::after {
    top: calc(100% - 7.0rem);
    width: calc(81.0rem * 0.8);
    height: calc(54.0rem * 0.8); } }
/* --------------------------------
	Tab-View Angebot
--------------------------------*/
section.angebot-spacer {
  height: 400px; }

@media (min-width: 768px) {
  section.angebot-spacer {
    height: 400px; } }
@media (min-width: 1200px) {
  section.angebot-spacer {
    height: 400px; } }
.tabview-angebot {
  width: calc(100% - 6.0rem);
  margin: 0 auto;
  box-shadow: 0px 24px 80px rgba(34, 35, 58, 0.2);
  border-radius: 0.6rem; }

@media (min-width: 1260px) {
  .tabview-angebot {
    width: 1200px; } }
.tabs {
  display: table;
  table-layout: fixed;
  width: 100%;
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
  background-image: var(--logo-gradient);
  background-image: var(--logo-gradient-anim);
  border-radius: 5px 5px 0 0;
  margin-top: -5.0rem; }

.tabs > li {
  transition-duration: .25s;
  display: table-cell;
  list-style: none;
  text-align: center;
  padding: 20px 20px 25px 20px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  color: white;
  text-transform: uppercase;
  font-size: 1.2rem;
  font-weight: 500;
  border-radius: 5px 5px 0 0;
  padding-top: 2.0rem;
  padding-bottom: 1.8rem;
  transition: font-weight, background-color, color;
  transition-duration: 0.25s, 0.25s, 0.2s; }

.tabs li.first {
  text-align: center; }

.tabs li.second {
  text-align: center; }

.tabs li.third {
  background-color: rgba(0, 0, 0, 0.2); }

.tabs > li:before {
  z-index: -1;
  position: absolute;
  content: "";
  width: 100%;
  height: 120%;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.3);
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  transition-duration: .25s; }

.tabs > li:hover:before {
  -webkit-transform: translateY(70%);
  transform: translateY(70%); }

.tabs > li.active {
  color: var(--accent-primary);
  background-color: white;
  z-index: 1000;
  opacity: 1; }

.tabs > li.active:before {
  transition-duration: .5s;
  background-color: white;
  -webkit-transform: translateY(0);
  transform: translateY(0); }

.tabs li span {
  position: relative; }

.tabs li span::after {
  content: '';
  position: absolute;
  height: 0.2rem;
  width: calc(100% + 0.3rem);
  left: -0.2rem;
  bottom: -2.5rem;
  border-radius: 0.4rem;
  background-color: rgba(0, 132, 106, 0.75);
  transform-origin: center;
  transform: scaleX(0);
  transition: transform, background-color;
  transition-duration: 0.4s, 0.4s;
  transition-delay: 0.0s, 0.4s; }

.tabs li.active span::after {
  content: '';
  position: absolute;
  height: 0.2rem;
  width: calc(100% + 0.3rem);
  left: -0.2rem;
  bottom: -1.0rem;
  border-radius: 0.4rem;
  background-color: rgba(0, 132, 106, 0.75);
  transform-origin: center;
  transform: scaleX(1);
  transition: transform, background-color;
  transition-duration: 0.4s, 0.4s;
  transition-delay: 0.4s, 0.4s; }

.tab-content {
  position: relative;
  width: 100%;
  border-radius: 5px; }

.tab-content > li {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  list-style: none; }

.tab-content > li .tab-content-wrapper {
  border-radius: 5px;
  width: 100%;
  padding: 60px 10% 100px 10%; }

@media (min-width: 462px) {
  .tabs > li {
    font-size: 1.4rem; }

  .tabs li.first {
    text-align: left;
    padding-left: 50px; }

  .tabs li.second {
    text-align: right;
    padding-right: 50px; }

  .tab-content > li .tab-content-wrapper {
    padding: 90px 50px 150px 50px; } }
@media (min-width: 1260px) {
  .tabs > li {
    font-size: 1.6rem; }

  .tab-content > li .tab-content-wrapper {
    padding: 120px 80px 160px 80px; }

  .tabs li.first {
    padding-left: 80px; }

  .tabs li.second {
    padding-right: 80px; } }
.tab-content-wrapper p {
  text-align: left;
  font-size: 1.5rem;
  font-weight: 400;
  color: #808080; }

.tab-content-wrapper p:last-of-type {
  margin-bottom: 8.0rem; }

.tab-content-wrapper h2 {
  width: 100%;
  text-align: center;
  padding-bottom: 20px;
  font-weight: 400;
  color: #808080;
  word-break: normal;
  word-wrap: break-word;
  font-size: 1.7rem;
  font-weight: 600; }

.tab-content-wrapper h2.ernährung {
  text-align: left; }

.tab-content-wrapper h2.kosmetik {
  text-align: right; }

.tab-content-wrapper p.subheading {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 400;
  font-style: italic;
  color: #ffa033; }

.tab-content-wrapper p.subheading.ernährung {
  text-align: left; }

.tab-content-wrapper p.subheading.kosmetik {
  text-align: right; }

.tab-content-wrapper img {
  width: 100%;
  height: auto;
  border-radius: 5px; }

.tab-content-wrapper a.button {
  border: 0px;
  margin-left: -2px;
  margin-top: 6.0rem;
  position: absolute;
  width: calc(100% - 20% + 4px);
  bottom: 60px;
  font-size: 1.2rem; }

.tab-content-wrapper a.button.ernährung {
  text-align: left;
  background-image: var(--logo-gradient-anim-inv); }

.tab-content-wrapper a.button.kosmetik {
  text-align: right;
  background-image: var(--logo-gradient-anim); }

@media (min-width: 462px) {
  .tab-content-wrapper a.button {
    width: calc(100% - 100px + 4px);
    bottom: 90px; }

  .tab-content-wrapper h2 {
    font-size: 2.4rem;
    font-weight: 500; } }
@media (min-width: 488px) {
  .tab-content-wrapper a.button {
    bottom: 100px; } }
@media (min-width: 1260px) {
  .tab-content-wrapper a.button {
    width: calc(100% - 160px + 4px);
    bottom: 100px;
    font-size: 1.4rem; }

  .tab-content-wrapper h2 {
    font-size: 3.0rem;
    font-weight: 400; } }
section.angebot .title {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 26px;
  font-weight: 400;
  line-height: 36px;
  padding-bottom: 36px;
  color: var(--accent-primary);
  margin-bottom: 15.0rem; }

section.angebot .title::before {
  content: 'Angebot';
  position: absolute;
  transform: translate(-17px, 2px);
  color: #f5f5f5;
  font-size: 50px;
  font-weight: 400;
  z-index: -1; }

@media (min-width: 337px) {
  section.angebot .title::before {
    transform: translate(-42px, 3px);
    font-size: 60px; } }
@media (min-width: 360px) {
  section.angebot .title::before {
    transform: translate(-55px, 3px);
    font-size: 65px; } }
@media (min-width: 395px) {
  section.angebot .title::before {
    transform: translate(-7px, 3px);
    font-size: 65px; } }
@media (min-width: 768px) {
  section.angebot .title::before {
    transform: translate(-96px, 5px);
    font-size: 100px; } }
/* --------------------------------
	Kontaktformular
--------------------------------*/
@media (min-width: 768px) {
  .contactform .row {
    display: grid;
    grid-template-columns: repeat(12, 5fr);
    grid-gap: 6.0rem; } }
section.contactform {
  position: relative;
  margin: 5.0rem 0; }

section.contactform .title {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 26px;
  font-weight: 400;
  line-height: 36px;
  padding-bottom: 36px;
  color: var(--accent-primary); }

section.contactform .title::before {
  content: 'Kontakt';
  position: absolute;
  transform: translate(-42px, 2px);
  color: #f5f5f5;
  font-size: 50px;
  font-weight: 400;
  z-index: -1; }

@media (min-width: 337px) {
  section.contactform .title::before {
    transform: translate(-17px, 3px);
    font-size: 60px; } }
@media (min-width: 360px) {
  section.contactform .title::before {
    transform: translate(-42px, 3px);
    font-size: 70px; } }
@media (min-width: 768px) {
  section.contactform .title::before {
    transform: translate(-116px, 5px);
    font-size: 100px; } }
.form {
  padding: 0; }

.form .form-field {
  position: relative;
  margin: 48px 0px 0px 0px; }

@media (min-width: 768px) {
  .form .form-field {
    position: relative;
    margin: 32px 0px 32px 0px; } }
textarea[type=text],
input[type=text],
input[type=checkbox] {
  background-color: rgba(0, 0, 0, 0); }

.form .input-text {
  display: block;
  padding-left: 4px;
  width: 100%;
  height: 36px;
  border-width: 0 0 1px 0;
  border-color: #acacac;
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
  color: #696969; }

.form .input-text:focus {
  outline: none;
  background-color: #f7f7f7;
  border-radius: 0.4rem;
  transition: background-color, border-radius;
  transition-duration: 0.3s, 0.3s;
  transition-delay: 0.15s, 0.15s; }

.input-text::selection {
  background-color: #0078D7 !important; }

.input-text::-moz-selection {
  background-color: #0078D7 !important; }

.form .label {
  position: absolute;
  left: 4px;
  bottom: calc(10px + 5px);
  font-size: 14px;
  line-height: 15px;
  font-weight: 400;
  color: #888;
  cursor: text;
  -webkit-transition: -webkit-transform .2s ease-in-out;
  transition: -webkit-transform .2s ease-in-out;
  transition: transform .2s ease-in-out;
  transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out; }

.form .input-text:focus + .label,
.form .input-text.not-empty + .label {
  -webkit-transform: translateY(-35px);
  transform: translateY(-35px); }

.form .input-text.message:focus + .label,
.form .input-text.message.not-empty + .label {
  -webkit-transform: translate(-1px, 50px);
  transform: translate(-1px, 50px); }

.form .input-text:focus:invalid + .label,
.form .input-text.not-empty:invalid + .label,
.form .input-text.message:focus:invalid + .label,
.form .input-text.message.not-empty:invalid + .label {
  color: crimson; }

.form .input-text:focus:valid + .label,
.form .input-text.not-empty:valid + .label,
.form .input-text.message:focus:valid + .label,
.form .input-text.message.not-empty:valid + .label {
  color: var(--accent-primary); }

.input-text:invalid {
  box-shadow: none !important; }

.form .requirements {
  position: relative;
  padding: 0px 0px 0px 0px;
  transition: 0.3s;
  font-weight: 400;
  font-size: 1.1rem;
  top: 10px; }

.form-field .requirements {
  padding: 0 0 0 4px;
  color: #808080; }

.checkercontainer .requirements {
  padding: 0 0 0 0;
  color: crimson;
  margin-top: -0.5rem; }

.form-field .input-text ~ .requirements {
  opacity: 0;
  visibility: hidden; }

.form-field .form-check-input ~ .requirements {
  opacity: 1;
  visibility: visible; }

.form .input-text:focus:invalid ~ .requirements,
.form .input-text.not-empty:invalid ~ .requirements,
.form .input-text.message:focus:invalid ~ .requirements,
.form .input-text.message.not-empty:invalid ~ .requirements {
  opacity: 1 !important;
  visibility: visible !important; }

.form .form-check-input:valid ~ .requirements {
  opacity: 0 !important;
  visibility: hidden !important; }

.form textarea {
  min-height: 7.9rem; }

.char-count {
  position: absolute;
  color: #808080;
  right: 0; }

input[type=time] {
  text-align: center; }

#from-time {
  margin-top: 5.0rem; }

label.reach {
  position: absolute;
  left: 3.4rem;
  top: 43.5rem;
  font-size: 14px;
  line-height: 15px;
  font-weight: 400;
  color: #ccc; }

@media (min-width: 768px) {
  #from-time {
    margin-top: 0.0rem; }

  label.reach {
    left: calc(50% + 3.4rem);
    top: 21.5rem; } }
button[type="submit"] {
  display: inline-block;
  background-color: var(--accent-primary);
  background-image: var(--logo-gradient-anim);
  border-radius: 0.6rem;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
  padding: 8px 16px;
  border: none;
  border: 2px solid white;
  cursor: pointer;
  width: 100%;
  background-size: 200%;
  transition: all 0.3s ease; }

button[type="submit"]:hover {
  background-position: right; }

button[type="submit"].active {
  font-size: 0;
  border-radius: 24px;
  width: 44px;
  height: 44px;
  background: none; }

button[type="submit"].spinner {
  border-right: 2px solid #00846A;
  -webkit-animation: spinner .4s linear infinite;
  animation: spinner .4s linear infinite; }

button[type="submit"].success {
  border-radius: 4px;
  width: 44px;
  height: 44px;
  background: none;
  color: #00846A; }

@-webkit-keyframes spinner {
  0% {
    -webkit-transform: rotateZ(0);
    transform: rotateZ(0); }
  100% {
    -webkit-transform: rotateZ(360deg);
    transform: rotateZ(360deg); } }
@keyframes spinner {
  0% {
    -webkit-transform: rotateZ(0);
    transform: rotateZ(0); }
  100% {
    -webkit-transform: rotateZ(360deg);
    transform: rotateZ(360deg); } }
:focus {
  outline: none !important; }

.checkercontainer {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-top: 25px;
  margin-bottom: 45px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: #808080;
  line-height: 2.0rem;
  height: 2.1rem;
  left: 0.4rem; }

label.checkercontainer,
.checkmark {
  cursor: pointer !important; }

.checkercontainer a {
  font-weight: 500;
  color: var(--accent-primary); }

.checkercontainer span {
  display: block;
  padding-top: 3px; }

.checkercontainer input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; }

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 21px;
  width: 21px;
  background-color: #eee;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  outline: none;
  border: 2px solid var(--accent-primary) !important;
  transition: background-color;
  transition-duration: 0.2s; }

label.checkercontainer {
  top: 2.0rem; }

.checkercontainer :hover input ~ .checkmark {
  background-color: #808080; }

.checkercontainer input:checked ~ .checkmark {
  background-color: var(--accent-primary); }

.checkmark:after {
  content: "";
  position: absolute;
  display: none; }

.checkercontainer input:checked ~ .checkmark:after {
  display: block; }

.checkercontainer .checkmark:after {
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg); }

section.contact-spacer {
  height: 200px; }

@media (min-width: 440px) {
  section.contact-spacer {
    height: 300px; } }
.contact-bg-img::before {
  content: '';
  position: absolute;
  height: 198px;
  width: 320px;
  top: calc(0% - 200px);
  right: 0;
  background-image: url(../img/bg/footer_leaf_x_y.png);
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: cover;
  z-index: -1;
  overflow: hidden; }

@media (min-width: 360px) {
  .contact-bg-img::before {
    top: calc(0% - 212px);
    height: 222px;
    width: 360px; } }
@media (min-width: 440px) {
  .contact-bg-img::before {
    top: calc(0% - 280px);
    width: calc(81.0rem * 0.5);
    height: calc(54.0rem * 0.5); } }
@media (min-width: 768px) {
  .contact-bg-img::before {
    top: calc(0% - 320px);
    width: calc(81.0rem * 0.66);
    height: calc(54.0rem * 0.66); } }
.contact-bg-img::after {
  content: '';
  position: absolute;
  top: calc(100% + 80px);
  left: 0;
  height: 198px;
  width: 320px;
  background-image: url(../img/bg/footer_leaf.png);
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: cover;
  z-index: -1;
  overflow: hidden; }

@media (min-width: 360px) {
  .contact-bg-img::after {
    top: calc(100% + 80px);
    height: 222px;
    width: 360px; } }
@media (min-width: 440px) {
  .contact-bg-img::after {
    top: calc(100% + 50px);
    height: 293px;
    width: 440px; } }
/* --------------------------------
	Footer
--------------------------------*/
section.footer-spacer {
  height: 100px; }

@media (min-width: 440px) {
  section.footer-spacer {
    height: 150px; } }
@media (min-width: 768px) {
  section.footer-spacer::before {
    top: -50px; } }
footer {
  position: relative;
  min-height: 20.0rem;
  width: 100%;
  padding: 16.0rem 0.0rem 16.0rem 0.0rem; }

footer h4 {
  margin: 0;
  margin: 2.0rem 0.0rem 5.0rem 0.0rem;
  font-weight: 300;
  font-size: 2.8rem; }

footer h4::after {
  content: '';
  display: block;
  left: 0;
  margin-top: -0.0rem;
  width: 21.0rem;
  height: 0.2rem;
  background-color: var(--accent-primary);
  border-radius: 0.4rem; }

footer b {
  font-weight: 500; }

footer b,
footer p {
  color: #696969; }

footer a.phone,
footer a.mail {
  color: #696969; }

footer a.phone:hover,
footer a.mail:hover {
  color: var(--accent-primary); }

footer .row {
  padding: 0.0rem 0.1rem; }

footer .container {
  padding: 3.0rem 3.0rem; }

footer .footer-logo svg {
  position: relative;
  width: calc(15.475rem * 1.5);
  height: calc(5.0rem * 1.5);
  margin: 3.0rem 0.0rem;
  left: 0.0rem; }

footer .row {
  position: relative;
  width: 100%;
  left: 0.0rem; }

.header-bg-img,
.footer-bg-img {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url(../img//bg/plant_footer.png);
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: cover;
  z-index: -1; }

.header-bg-img {
  width: 81.0rem;
  height: 108.0rem;
  top: -57.0rem;
  left: 0;
  transform: rotate(180deg); }

.footer-bg-img {
  bottom: -2.5rem;
  right: 0; }

@media (min-width: 830px) {
  .header-bg-img,
  .footer-bg-img {
    width: 81.0rem;
    height: 108.0rem; }

  .header-bg-img {
    top: -57.0rem; } }
/* --------------------------------
	To-Top Button
--------------------------------*/
.to-top-wrap {
  position: fixed;
  bottom: 1.1rem;
  right: 3.0rem;
  width: calc(12.0rem + 1.0rem);
  height: calc(3.0rem + 1.0rem);
  visibility: hidden;
  opacity: 0;
  overflow: hidden;
  z-index: 998; }

.to-top {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.2rem;
  color: white;
  width: calc(12.0rem + 1.0rem);
  height: calc(3.0rem + 1.0rem);
  border-radius: 0.4rem;
  background-color: var(--accent-primary);
  background-image: var(--logo-gradient-anim);
  border: 2px solid white;
  cursor: pointer;
  transform: translateY(4rem);
  background-size: 200%; }

.to-top i {
  font-weight: 700;
  color: white;
  margin: 0.0rem 0.6rem;
  font-size: 1.4rem; }

/* --------------------------------
	Additions - Special-Deals
--------------------------------*/
.tab-content-wrapper h3 {
  width: 100%;
  padding-bottom: 20px;
  font-weight: 500;
  color: #ff8800;
  word-break: normal;
  word-wrap: break-word;
  font-size: 1.5rem;
  font-weight: 500;
  font-style: italic !important; }

.tab-content-wrapper h3::before,
.tab-content-wrapper h3::after {
  content: '';
  position: absolute;
  left: 10%;
  width: calc(100% - 20%);
  height: 0.1rem;
  border-radius: 0.4rem;
  background-color: #b8b8b8; }

.tab-content-wrapper h3::before {
  margin-top: -3.0rem; }

.tab-content-wrapper h3::after {
  margin-top: 5.0rem; }

.tab-content-wrapper h3.invisible::before,
.tab-content-wrapper h3.invisible::after {
  display: none; }

@media (min-width: 462px) {
  .tab-content-wrapper h3 {
    font-size: 1.8rem;
    font-weight: 500; }

  .tab-content-wrapper h3::before,
  .tab-content-wrapper h3::after {
    left: 50px;
    width: calc(100% - 100px); }

  .tab-content-wrapper h3::before {
    margin-top: -3.0rem; }

  .tab-content-wrapper h3::after {
    margin-top: 6.0rem; } }
@media (min-width: 1260px) {
  .tab-content-wrapper h3 {
    font-size: 2.2rem;
    font-weight: 400; }

  .tab-content-wrapper h3::before,
  .tab-content-wrapper h3::after {
    left: 80px;
    width: calc(100% - 160px); }

  .tab-content-wrapper h3::before {
    margin-top: -3.0rem; }

  .tab-content-wrapper h3::after {
    margin-top: 6.0rem; } }
.tab-content-wrapper .ernährung-deal {
  text-align: left;
  padding-left: 0.3rem; }

.tab-content-wrapper .kosmetik-deal {
  text-align: right;
  padding-right: 0.3rem; }

.tab-content-wrapper .ernährung-deal-timeframe,
.tab-content-wrapper .kosmetik-deal-timeframe {
  color: var(--accent-primary); }

.tab-content-wrapper h3 + p {
  margin-top: 10.0rem; }

.tab-content-wrapper h3.invisible + p {
  margin-top: -10.0rem; }

body.cms .tab-content-wrapper h3.invisible + p {
  margin-top: 10.0rem; }

/* --------------------------------
	Rechtliches
--------------------------------*/
.legals {
  position: relative;
  width: calc(100%);
  height: 100%;
  margin-top: calc(12.0rem); }

.legals h1 {
  color: #808080;
  font-weight: 300;
  font-size: 3.6rem; }

.legals h1.top {
  margin-top: 3.2rem; }

.legals h1.dat::after {
  content: '';
  display: block;
  left: 0;
  margin-top: -0.0rem;
  width: 24.5rem;
  height: 0.2rem;
  background-color: var(--accent-primary);
  border-radius: 0.4rem; }

.legals h1.imp::after {
  content: '';
  display: block;
  left: 0;
  margin-top: -0.0rem;
  width: 22.0rem;
  height: 0.2rem;
  background-color: var(--accent-primary);
  border-radius: 0.4rem; }

.legals h2 {
  color: #888;
  font-weight: 400;
  font-size: 3.0rem;
  margin-top: 20.0rem; }

.legals h2:first-of-type {
  margin-top: 10.0rem; }

.legals h3 {
  color: #888;
  font-weight: 300;
  font-size: 2.4rem;
  margin-top: 10.0rem; }

.legals h3:first-of-type {
  margin-top: 10rem; }

.legals h3::before {
  content: '» '; }

.legals p {
  color: #888;
  font-weight: 400;
  margin-bottom: 2.0rem !important;
  font-size: 1.4rem; }

.legals p:last-of-type {
  margin-bottom: 0.0rem !important;
  padding-bottom: 4.5rem;
  text-align: right; }

.legals ul li {
  color: #888;
  font-weight: 400;
  margin: 2.0rem;
  line-height: 1.5;
  font-size: 1.4rem;
  list-style-type: initial;
  margin-left: 2.0rem; }

.legals a {
  color: var(--accent-primary); }

.legals a:hover {
  color: #aaa; }

.spacer {
  height: 10.0rem;
  background: transparent;
  pointer-events: none; }

.legals hr {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.025), rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.025));
  margin-bottom: 0.0rem;
  margin-top: 6.5rem; }

.legals strong {
  font-weight: 500 !important; }

.legals .adresse,
.legals .kontaktinfo {
  margin-left: 2.4rem; }

.legals .adresse {
  margin-bottom: 1.7rem !important; }

.legals .adresse::before,
.legals .kontaktinfo::before {
  content: '';
  position: absolute;
  width: 0.2rem;
  margin-left: -2.0rem;
  background-color: var(--accent-primary); }

.legals .adresse::before {
  height: 8.1rem; }

.legals .kontaktinfo::before {
  height: 5.3rem; }

section.legals p.infotext {
  margin-left: 0.0rem;
  margin-bottom: 6.0rem !important; }

section.legals p.kontaktinfo {
  margin-top: 3.0rem !important; }

.legal footer {
  margin-top: calc(-24.0rem); }

span.credit {
  display: block;
  font-weight: 600;
  color: #555;
  font-style: italic;
  margin-bottom: -2.4rem; }

/* --------------------------------
	404 - Error-Page
--------------------------------*/
section.error {
  position: relative; }

section.error .container {
  min-height: calc(100vh - 12.0rem*2);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-left: 3.0rem;
  padding-top: 6.0rem; }

section.error h1 {
  color: #808080;
  font-size: 2.4rem; }

section.error h1 span {
  color: var(--accent-primary); }

section.error p {
  color: #808080; }

section.error a {
  font-size: 1.6rem;
  font-weight: 500; }

@media (min-width: 386px) {
  section.error .container {
    padding-left: 8.0rem; }

  section.error h1 {
    color: #808080;
    font-size: 3.0rem; } }
body.error .footer-bg-img {
  position: absolute;
  width: 100%;
  height: 100%;
  right: 0;
  bottom: 0;
  background-image: url(../img//bg/plant_footer.png);
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: cover;
  z-index: -1; }

@media (min-width: 428px) {
  body.error .footer-bg-img {
    width: calc(81.0rem * 0.5);
    height: calc(108.0rem * 0.5); } }
@media (min-width: 640px) {
  body.error .footer-bg-img {
    width: calc(81.0rem * 0.7);
    height: calc(108.0rem * 0.7); } }
@media (min-width: 1200px) {
  body.error .footer-bg-img {
    width: calc(81.0rem * 0.9);
    height: calc(108.0rem * 0.9); } }
body.error footer {
  margin-top: calc(-24.0rem); }

/**
 * Clearfix - For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 **/
.clearfix::before,
.clearfix::after {
  content: " ";
  display: table; }

.clearfix::after {
  clear: both; }

/**
  * For IE 6/7 only
  * Include this rule to trigger hasLayout and contain floats.
  */
.clearfix {
  *zoom: 1; }

/* -------------------------------------------------------
     Remove Blue-Box-Tap-Feedback on Mobile
 -------------------------------------------------------*/
* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -moz-tap-highlight-color: rgba(0, 0, 0, 0); }

/* --------------------------------
    Custom Selection Styles
--------------------------------*/
::selection {
  background: var(--accent-primary);
  color: white; }

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

mark {
  background: black;
  color: white;
  padding: 1.0rem 0.6rem 0.8rem 1.6rem;
  border-radius: 0.6rem;
  -webkit-transition: color 0.3s ease 0s;
  -moz-transition: color 0.3s ease 0s;
  -o-transition: color 0.3s ease 0s;
  transition: color 0.3s ease 0s; }

/* -------------------------------------
    Quick Shortcut Toolkit
------------------------------------- */
i {
  font-style: italic; }

b {
  font-style: bold; }

em {
  text-decoration: underline; }

strong {
  font-style: bold; }

important {
  font-style: italic;
  text-decoration: underline; }

priority {
  font-weight: 700;
  font-style: italic;
  text-decoration: underline; }

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); }

.centered-v {
  position: absolute;
  top: 50%;
  transform: translateY(-50%); }

.centered-h {
  position: absolute;
  left: 50%;
  transform: translateX(-50%); }

.rotated-l {
  transform: rotate(-90deg); }

.rotated-r {
  transform: rotate(90deg); }

@media only screen and (min-width: 800px) {
  .visible-sm {
    visibility: hidden; } }
.visible-lg {
  visibility: hidden; }

@media only screen and (min-width: 800px) {
  .visible-lg {
    visibility: hidden; } }
@media only screen and (min-width: 1200px) {
  .visible-lg {
    visibility: visible; } }
.hidden-mob {
  visibility: hidden; }

@media only screen and (min-width: 949px) {
  .hidden-mob {
    visibility: visible; } }
.hidden {
  visibility: hidden; }

.absent-sm {
  display: none; }

@media only screen and (min-width: 800px) {
  .absent-sm {
    display: unset; } }
.absent-sm-up {
  display: unset; }

@media only screen and (min-width: 800px) {
  .absent-sm-up {
    display: none; } }
.absent {
  display: none; }

/* -------------------------------------
    e-Mail related
------------------------------------- */
input[name=fax],
input[name=password] {
  opacity: 1;
  display: block;
  position: absolute;
  visibility: visible;
  margin: 0 !important;
  padding: 0 !important;
  height: 0.5px !important;
  font-size: 0.5px !important;
  border: none !important;
  pointer-events: none !important;
  color: rgba(0, 0, 0, 0) !important;
  background-color: rgba(0, 0, 0, 0) !important; }

form .row.zero {
  height: 0.5px !important;
  margin-top: -50px;
  margin-bottom: 50px; }

/* -------------------------------------
    Miscellaneous
------------------------------------- */
.center-indicator {
  position: fixed;
  z-index: 2000;
  opacity: 0.5;
  pointer-events: none;
  filter: invert(100%); }

.center-indicator.vertical {
  top: 0;
  left: calc(50% - 5.0rem);
  width: 10.0rem;
  height: 100%;
  border-left: 0.1rem dashed var(--accent-primary);
  border-right: 0.1rem dashed var(--accent-primary); }

.center-indicator.horizontal {
  left: 0;
  top: calc(50% - 5.0rem);
  height: 10.0rem;
  width: 100%;
  border-top: 0.1rem dashed var(--accent-primary);
  border-bottom: 0.1rem dashed var(--accent-primary); }

/* -------------------------------------
    Info
------------------------------------- */
/* Coded by Paul J. Slawik */
/* Compiled by Koala */