/* By Athlon Front-End Team */
/* Core variables */
/**
 * Variables
*/
/* Typography */
/* Breakpoints */
/* Paths */
/* Grid setup */
/* Colour palette */
/* Components */
/* CSS Reset */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  border: none;
  font: inherit;
  font-size: 100%;
  margin: 0;
  padding: 0;
  vertical-align: baseline; }

html {
  box-sizing: border-box; }

*,
*:before,
*:after {
  box-sizing: inherit; }

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary,
main {
  display: block; }

audio,
canvas,
video {
  display: inline-block; }

body {
  margin: 0; }

ul {
  list-style-type: none; }

a {
  background: transparent;
  text-decoration: none; }

button,
input {
  line-height: normal; }

input[type='search'] {
  -webkit-appearance: textfield; }

input[type='search']::-webkit-search-decoration,
input[type='search']::-webkit-search-cancel-button {
  -webkit-appearance: none; }

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

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

img {
  display: block;
  max-width: 100%;
  height: auto; }

textarea:focus,
input:focus {
  outline: 0; }

input {
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }

/* CSS print */
/**
 * Print Stylesheet
*/
@media print {
  @page {
    margin: 1cm; }
  body {
    background: #fff;
    color: #000; }
  a {
    page-break-inside: avoid; }
  blockquote {
    page-break-inside: avoid; }
  table,
  pre {
    page-break-inside: avoid; }
  ul, ol, dl {
    page-break-before: avoid; } }

/* Fonts */
/**
 * Fonts
*/
@font-face {
  font-family: 'DINP-R';
  src: url(../fonts/DINPro-Regular.fa495e.eot) format("eot"), url(../fonts/DINPro-Regular.62db14.woff) format("woff"), url(../fonts/DINPro-Regular.500703.ttf) format("truetype"), url(../fonts/DINPro-Regular.0f9f28.svg#DINPro-Regular) format("svg");
  font-style: normal; }

/* Mixins, helpers and functions */
/**
 * Helper mixins
*/
/* Vendor */
/**************************\
  Basic Modal Styles
\**************************/
.modal {
  font-family: -apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif; }

.modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99; }

.modal__container {
  background-color: #fff;
  padding: 30px;
  max-width: 500px;
  max-height: 100vh;
  border-radius: 4px;
  overflow-y: auto;
  box-sizing: border-box; }

.modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center; }

.modal__title {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.25;
  color: #00449e;
  box-sizing: border-box; }

.modal__close {
  background: transparent;
  border: 0; }

.modal__header .modal__close:before {
  content: "\2715"; }

.modal__content {
  margin-top: 2rem;
  margin-bottom: 2rem;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.8); }

.modal__btn {
  font-size: .875rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: .5rem;
  padding-bottom: .5rem;
  background-color: #e6e6e6;
  color: rgba(0, 0, 0, 0.8);
  border-radius: .25rem;
  border-style: none;
  border-width: 0;
  cursor: pointer;
  -webkit-appearance: button;
  text-transform: none;
  overflow: visible;
  line-height: 1.15;
  margin: 0;
  will-change: transform;
  -moz-osx-font-smoothing: grayscale;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: transform .25s ease-out; }

.modal__btn:focus, .modal__btn:hover {
  transform: scale(1.05); }

.modal__btn-primary {
  background-color: #00449e;
  color: #fff; }

/**************************\
  Demo Animation Style
\**************************/
@-webkit-keyframes mmfadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
@keyframes mmfadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@-webkit-keyframes mmfadeOut {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

@keyframes mmfadeOut {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

@-webkit-keyframes mmslideIn {
  from {
    transform: translateY(15%); }
  to {
    transform: translateY(0); } }

@keyframes mmslideIn {
  from {
    transform: translateY(15%); }
  to {
    transform: translateY(0); } }

@-webkit-keyframes mmslideOut {
  from {
    transform: translateY(0); }
  to {
    transform: translateY(-10%); } }

@keyframes mmslideOut {
  from {
    transform: translateY(0); }
  to {
    transform: translateY(-10%); } }

.micromodal-slide {
  display: none; }

.micromodal-slide.is-open {
  display: block; }

.micromodal-slide[aria-hidden="false"] .modal__overlay {
  -webkit-animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
          animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1); }

.micromodal-slide[aria-hidden="false"] .modal__container {
  -webkit-animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1);
          animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1); }

.micromodal-slide[aria-hidden="true"] .modal__overlay {
  -webkit-animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
          animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1); }

.micromodal-slide[aria-hidden="true"] .modal__container {
  -webkit-animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1);
          animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1); }

.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay {
  will-change: transform; }

/* Components */
/* Browser specific styles */
/**
 * Dirty hacks, yes internet explorer, we are looking at you
*/
/* Demo styles */
body {
  width: 100%;
  height: 100%;
  background-color: #fcf8f3;
  font-family: 'Jost', sans-serif; }

.stage {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background-color: #fcf8f3;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  padding: 3em;
  overflow: hidden; }

.cleaner {
  position: absolute;
  width: 24em;
  height: 25em;
  left: 19em;
  top: 7em;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
  -webkit-animation-delay: 5s;
          animation-delay: 5s;
  -webkit-filter: drop-shadow(-20px 20px 0px rgba(0, 0, 0, 0.15));
          filter: drop-shadow(-20px 20px 0px rgba(0, 0, 0, 0.15));
  pointer-events: none; }
  .no-webp .cleaner {
    background-image: url(../images/design/Putze-8.4050d2.png); }
  .webp .cleaner {
    background-image: url(../images/design/putze.531133.webp); }
  .cleaner.active {
    -webkit-animation-delay: 5s;
            animation-delay: 5s;
    -webkit-animation: myOrbit 2s linear infinite, fade 60s linear infinite;
            animation: myOrbit 2s linear infinite, fade 60s linear infinite; }

@-webkit-keyframes fade {
  0% {
    opacity: 0; }
  5% {
    opacity: 0; }
  6% {
    opacity: 1; }
  24% {
    opacity: 1; }
  25% {
    opacity: 0; }
  100% {
    opacity: 0; } }

@keyframes fade {
  0% {
    opacity: 0; }
  5% {
    opacity: 0; }
  6% {
    opacity: 1; }
  24% {
    opacity: 1; }
  25% {
    opacity: 0; }
  100% {
    opacity: 0; } }

@-webkit-keyframes myOrbit {
  from {
    -webkit-transform: rotate(0deg) translateX(1em) rotate(0deg); }
  to {
    -webkit-transform: rotate(360deg) translateX(1em) rotate(-360deg); } }

@keyframes myOrbit {
  from {
    transform: rotate(0deg) translateX(1em) rotate(0deg); }
  to {
    transform: rotate(360deg) translateX(1em) rotate(-360deg); } }

.plaque {
  width: 30em;
  height: 38em;
  padding-left: 1.3em;
  padding-right: 0.6em;
  margin-bottom: 1em;
  display: flex;
  flex-flow: column;
  align-items: center;
  position: relative;
  background-size: contain;
  background-repeat: no-repeat; }
  .no-webp .plaque {
    background-image: url(../images/design/Holz.c59ee8.jpg); }
  .webp .plaque {
    background-image: url(../images/design/Holz.ed3b4a.webp); }
  .plaque .sign-wrapper {
    width: 18em;
    border: 2px solid #2e0d0a;
    position: relative; }
    .plaque .sign-wrapper.top {
      margin-bottom: 1.3em;
      margin-top: 3.6em; }
      .plaque .sign-wrapper.top .font_size {
        position: absolute;
        height: calc(50% - .4em);
        right: -3em;
        width: 2em;
        text-align: center;
        line-height: 1.9em;
        cursor: pointer;
        -webkit-user-select: none;
           -moz-user-select: none;
            -ms-user-select: none;
                user-select: none;
        background-color: #c5ab65;
        border: .1em solid #2e0d0a;
        color: #2e0d0a; }
        .plaque .sign-wrapper.top .font_size:hover {
          background-color: #8e7a40; }
        .plaque .sign-wrapper.top .font_size span {
          font-size: 2em; }
        .plaque .sign-wrapper.top .font_size.plus {
          top: 0; }
        .plaque .sign-wrapper.top .font_size.minus {
          top: 50%; }
    .plaque .sign-wrapper.bottom {
      width: 16em; }
      .plaque .sign-wrapper.bottom:before {
        content: '';
        display: block;
        position: absolute;
        width: calc(100% + 2em);
        left: -1em;
        top: -0.8em;
        border: 2px solid #d39d11;
        height: 1em;
        background-color: #f5bb2f; }
      .plaque .sign-wrapper.bottom:after {
        content: '';
        display: block;
        position: absolute;
        width: calc(100% + 2em);
        left: -1em;
        bottom: -0.8em;
        border: 2px solid #d39d11;
        height: 1em;
        background-color: #f5bb2f; }
  .plaque .sign {
    border: none;
    background-color: #c5ab65;
    width: 100%;
    text-align: center;
    padding: 1em;
    font-family: 'Jost', sans-serif;
    font-size: 1.5em;
    color: #4b1f19;
    resize: none; }
    .plaque .sign::-moz-placeholder {
      color: #4b1f19;
      opacity: .3; }
    .plaque .sign:-ms-input-placeholder {
      color: #4b1f19;
      opacity: .3; }
    .plaque .sign::-ms-input-placeholder {
      color: #4b1f19;
      opacity: .3; }
    .plaque .sign::placeholder {
      color: #4b1f19;
      opacity: .3; }
    .plaque .sign.top {
      font-size: 1.7em;
      font-weight: 600;
      padding: 0.6em;
      line-height: 1.2; }
    .plaque .sign.name {
      text-transform: uppercase;
      padding-bottom: 0;
      font-weight: 600;
      font-size: 1.3em;
      padding-top: 0.5em; }
    .plaque .sign.date {
      padding-top: 0;
      padding-bottom: 0.5em;
      font-size: 1em; }
  .plaque .image-container {
    width: 16em;
    height: 15.5em;
    background-color: #999999;
    position: relative;
    margin-bottom: 1.9em; }
    .plaque .image-container .drop-area {
      height: 100%;
      width: 100%;
      background-color: #ec1f4e;
      transition: opacity .3s; }
      .plaque .image-container .drop-area.deactivated {
        pointer-events: none;
        opacity: 0;
        display: none; }
      .plaque .image-container .drop-area .uppy-Root {
        height: 100%;
        font-family: 'Jost', sans-serif; }
      .plaque .image-container .drop-area .uppy-Dashboard-inner {
        border-radius: 0;
        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#40403f+0,202020+100 */
        background: #40403f;
        /* Old browsers */
        /* FF3.6-15 */
        /* Chrome10-25,Safari5.1-6 */
        background: radial-gradient(ellipse at center, #40403f 0%, #202020 100%);
        /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#40403f', endColorstr='#202020', GradientType=1);
        /* IE6-9 fallback on horizontal gradient */
        border: none; }
        .plaque .image-container .drop-area .uppy-Dashboard-inner .uppy-Dashboard-AddFiles-title {
          color: #999999;
          font-weight: 600;
          font-size: 1.4em; }
        .plaque .image-container .drop-area .uppy-Dashboard-inner .uppy-Dashboard-AddFiles {
          border: 1px dashed #696969; }
    .plaque .image-container .image-canvas {
      background-position: center;
      background-size: cover;
      height: 100%;
      width: 100%;
      position: absolute;
      left: 0;
      top: 0; }
      .plaque .image-container .image-canvas .close {
        height: 3em;
        width: 3em;
        position: absolute;
        right: 0;
        top: 0;
        cursor: pointer;
        background-size: contain;
        background-repeat: no-repeat;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' aria-labelledby='title' aria-describedby='desc'%3E%3Cpath data-name='layer1' fill='none' stroke='%23fff' stroke-miterlimit='10' stroke-width='3' d='M41.999 20.002l-22 22m22 0L20 20' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E"); }

.button {
  font-family: 'Jost', sans-serif;
  font-size: 1em;
  color: #fff;
  background-color: #50ca7b;
  padding: 0.7em 1.5em;
  border-radius: 0.2em;
  padding-top: 0.6em;
  cursor: pointer;
  transition: opacity .3s; }
  .button:hover {
    background-color: #a8e5bd; }
  .button.disabled {
    pointer-events: none;
    opacity: .2; }
  .button.share:not(.disabled) {
    background-color: #50ca7b;
    -webkit-animation-name: color;
            animation-name: color;
    -webkit-animation-duration: 3s;
            animation-duration: 3s;
    -webkit-animation-delay: .6s;
            animation-delay: .6s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite; }

@-webkit-keyframes color {
  0% {
    background-color: #50ca7b; }
  50% {
    background-color: #5fff96; }
  100% {
    background-color: #50ca7b; } }

@keyframes color {
  0% {
    background-color: #50ca7b; }
  50% {
    background-color: #5fff96; }
  100% {
    background-color: #50ca7b; } }

.modal #share-link {
  border: 1px solid #ccc;
  font-size: 1.2em;
  padding: .2em;
  border-radius: .2em;
  background-color: transparent; }

.modal.link_copied .modal__container {
  background-color: #50ca7b; }

.modal.link_copied .modal__title {
  color: #fff; }

.modal.link_copied #share-link {
  color: #fff;
  border-color: #fff; }

@media only screen and (max-width: 41.875em) {
  body {
    font-size: 3vw; } }