/*------------------------------------
Font
-------------------------------------*/

@font-face {
  font-family: "Apercu";
  src: url("font/apercu-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Apercu";
  src: url("font/apercu-light-webfont.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Apercu";
  src: url("font/apercu-bold-webfont.woff") format("woff");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "Apercu";
  src: url("font/apercu-medium-webfont.woff") format("woff");
  font-weight: medium;
  font-style: normal;
}

/*------------------------------------
General
-------------------------------------*/


*, html, body {
  margin: 0px;
  font-family: "Apercu";
  box-sizing: border-box;
}

html, body {
  height: auto;
  min-height: 100vh;
  width: 100%;
  background: #cec7be29;
}

#Page.mdc-layout-grid { max-width: 1180px; }

h1,h2,h3,h4,h5,h6 { font-weight: bold; text-transform: uppercase;}
p, a, label { font-weight: 300; font-size: 18px; line-height: 24px;}
a { text-decoration: none; color: #000; }

.material-symbols-outlined {
  font-family: "Material Icons";
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}

iframe { pointer-events: none;}

/*------------------------------------
Style
-------------------------------------*/

.mdc-layout-grid__cell:not(.none) {
  padding: 24px;
  border-radius: 3rem;
  background: #cec7be40;
}
.mdc-layout-grid__cell.simple:not(.none) { padding: 12px 24px; }
.mdc-layout-grid__cell { height: fit-content; }


.btn {
  background: #cebebe40;
  border-radius: 3rem;
  width: 48px;
  height: 48px;
  transition: 100ms ease;
  padding: 10px;
  font-size: 28px;
	color: #000;
	animation: change-color-anim 20s linear infinite;
}

.btn.bganim, .bganim {
  animation: change-bgcolor-anim 20s linear infinite;
}
.btn.none {
  animation: none;
}

/*
.btn:nth-of-type(1) { animation-delay: 14s;}
.btn:nth-of-type(2) { animation-delay: 7s;}
*/

@media (hover: hover) {
  .btn:not(.text):hover {
    background: #a0b491;
    cursor: pointer;
  }
}

.btn.text, .btn.interactive-text { 
  color: #000;
  width: auto;
  padding: 12px 20px;
  font-size: 18px;
}

.btn.active { background: #a0b491; }


/*#footer { align-items: center; }*/
#footer { align-items: center; margin-top: -60px; }
#footer .btn.text { height: 38px; padding: 6px 24px; }
.override #footer { margin-top: -8px; }


@media (max-width: 1195px) { #footer { margin-top: -8px; } }
@media (max-width: 825px) { #footer { margin-top: 0px; } }


.space div { margin-left:16px;}
.space div:nth-child(1) { margin-left: 0px;}

@keyframes change-color-anim {
	0%,100%{
		color: #db495d;
	}
	15%{
		color: #f4af79;
	}	
  30%{
		color: #f6d385;
	}
  45%{
		color: #a0b491;
	}
  60%{
		color: #467a95;
	}
  75%{
		color: #786180;
	}
  90%{
		color: #8d5575;
	}
}

@keyframes change-bgcolor-anim {
	0%,100%{
		background-color: #db495d;
	}
	15%{
		background-color: #f4af79;
	}	
  30%{
		background-color: #f6d385;
	}
  45%{
		background-color: #a0b491;
	}
  60%{
		background-color: #467a95;
	}
  75%{
		background-color: #786180;
	}
  90%{
		background-color: #8d5575;
	}
}

@keyframes change-bgcolor-anim-transparent {
	0%,100%{
		background-color: #db495cd6;
	}
	15%{
		background-color: #f4ae79d5;
	}	
  30%{
		background-color: #f6d285d7;
	}
  45%{
		background-color: #a0b491d6;
	}
  60%{
		background-color: #467995d7;
	}
  75%{
		background-color: #786180d4;
	}
  90%{
		background-color: #8d5575d6;
	}
}


.flex {
  display: flex;
  padding: 24px;
  justify-content: space-between;
}

.flex.center { justify-content: center;}
.flex.right { justify-content: flex-end;}
.flex.nop { padding: 0px;}  
.flex.wrap { flex-wrap: wrap; }
.flex.wrap>* { margin: 8px; }
.flexhalf { flex: .5;}
.flexfull { flex: 1;}

.relative { position: relative; }

.background {background: #cebebe40; }
.background-anim {animation: change-bgcolor-anim 20s linear infinite;}
.hide { display: none; }
.title { border-radius: 3rem; }
/*.padding { padding: 12px 24px; }*/
.padding { padding: 8px 24px; }
.text-center { text-align: center; }
.mt { margin-top: 8px;}
.mt-medium { margin-top: 16px;}
.mt-large { margin-top: 24px;}
.mb { margin-bottom: 8px;}
.mb-large { margin-bottom: 24px;}
.ph { padding: 0px 8px; }
.ph-large { padding: 0px 24px; }
.nooverflow { overflow: hidden; }

img#bildwerk { width: 40px; height: auto;}

.controls div { 
  display: flex;
}

.controls div:nth-child(1) { flex: .5; }
.controls div:nth-child(2) { flex: 1; }

.loading {
  display: none;
  border-radius: 3rem;
  position: absolute;
  bottom: 0px;
  z-index: 2;
  background: #d8cece;
  margin: 6px;
  font-size: 12px;
  padding: 4px 16px;
  width: 32%;
  text-align: center;
  animation: bgload 3s ease infinite;
  background: radial-gradient(circle, rgba(246,211,133,1) 0%,  rgba(244,175,121,1) 50%, rgba(246,211,133,1) 100%);
  background-position-x: 50%;
}

.loading.active { display: block;}

@keyframes bgload {
  0%, 100% {
    background-size: 100%;
  }
  50% {
    background-size: 500%;
  }
}


.override-show, .override .override-hide {
  display: none;
}

.override .override-show, .override-hide {
  display: block;
}

.override-show.bganim {
  height: min-content;
  padding: 50% 16%;
}

.override-show.cover {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  border-radius: 3rem;
  z-index: 2;
  animation: change-bgcolor-anim-transparent 20s linear infinite;
}

/*------------------------------------
Form
-------------------------------------*/

form .form-warning, .error { display: none; color: #db495d;}
form .form-warning { margin: 16px 0px;}
form.was-validated .form-warning { display: block;}

input, input.mdc-text-field__input {
  border-radius: 3rem;
  height: 48px;
  width: inherit;
  padding: 0px 16px;
  border: none;
  font-weight: 300;
}
input[type="text"] { width: 88%;}

input:focus, input.mdc-text-field__input:focus {
  border: none;
  outline: none;
}

.success, .error { display: none;}
.success.display, .error.display { display: block; }
.success.display.flex, .error.display.flex { display: flex; }

.switch {
  position: relative;
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 24px;
}
.switch__input {
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 20px;
  opacity: 0;
  z-index: 0;
}
.switch__label {
  display: block;
  padding: 0 0 0 44px;
  cursor: pointer;
}
.switch__label:before {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 36px;
  height: 20px;
  background-color: #aa9b9b40;
  border-radius: 14px;
  z-index: 1;
  transition: background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.switch__label:after {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 20px;
  height: 20px;
  background-color: #c79292;
  border-radius: 14px;
  z-index: 2;
  transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: left, background-color;
}
.switch__input:checked + .switch__label:before {
  background-color: #a0b491;
}
.switch__input:checked + .switch__label:after {
  left: 16px;
  background-color: #657559;
}



.switchlarge { width: 70px; height: 38px; }
.switchlarge__label:before {
  top: 6px;
  width: 70px;
  height: 38px;
  border-radius: 3rem;

}
.switchlarge__label:after {
  top: 6px;
  width: 38px;
  height: 38px;
  border-radius: 3rem;
}

.switchlarge__input:checked + .switch__label:before {
  background-color: #cebebe40;
}

.switchlarge__input + .switchlarge__label:after {
  animation: change-bgcolor-anim 20s linear infinite;
  opacity: .25;
}

.switchlarge__input:checked + .switchlarge__label:after {
  left: 31px;
  animation: change-bgcolor-anim 20s linear infinite;
  opacity: 1;
}


.pure-material-slider {
  --pure-material-safari-helper1: rgba(160, 180, 145, 0.04);
  --pure-material-safari-helper2: rgba(160, 180, 145, 0.12);
  --pure-material-safari-helper3: rgba(160, 180, 145, 0.16);
  --pure-material-safari-helper4: rgba(160, 180, 145, 0.24);
  display: flex;
  width: 100%;
  color: #000;
}

/* Input */
.pure-material-slider > input {
  -webkit-appearance: none;
  position: relative;
  /*top: 24px;*/
  display: block;
  /*margin: 0 0 -36px;*/
  width: inherit;
  height: 28px;
  background-color: transparent;
  cursor: pointer;
}

/* Without Span */
.pure-material-slider > input:last-child {
  position: static;
  margin: 0;
}

/* Span */
.pure-material-slider > span {
  display: inline-block;
  /*margin-bottom: 20px;*/
}

/* Focus */
.pure-material-slider > input:focus {
  outline: none;
}

/* Disabled */
.pure-material-slider > input:disabled {
  cursor: default;
  opacity: 0.38;
}

.pure-material-slider > input:disabled + span {
  color: rgba( 0, 0, 0, 0.38);
}

/* Webkit | Track */
.pure-material-slider > input::-webkit-slider-runnable-track {
  margin: 17px 0;
  border-radius: 1px;
  width: 100%;
  height: 4px;
  background-color: rgba(160, 180, 145, 0.24);
}

/* Webkit | Thumb */
.pure-material-slider > input::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  border-radius: 50%;
  height: 3px;
  width: 3px;
  background-color: rgb(160, 180, 145);
  transform: scale(6, 6);
  transition: box-shadow 0.2s;
}

/* Webkit | Hover, Focus */
.pure-material-slider:hover > input::-webkit-slider-thumb {
  box-shadow: 0 0 0 2px var(--pure-material-safari-helper1);
}

.pure-material-slider > input:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 2px var(--pure-material-safari-helper2);
}

.pure-material-slider:hover > input:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 2px var(--pure-material-safari-helper3);
}

/* Webkit | Active */
.pure-material-slider > input:active::-webkit-slider-thumb {
   box-shadow: 0 0 0 2px var(--pure-material-safari-helper4) !important;
}

/* Webkit | Disabled */
.pure-material-slider > input:disabled::-webkit-slider-runnable-track {
  background-color: rgba(0,0,0, 0.38);
}

.pure-material-slider > input:disabled::-webkit-slider-thumb {
  background-color: rgb(0, 0, 0);
  color: rgb(255, 255, 255); /* Safari */
  box-shadow: 0 0 0 1px rgb(255, 255, 255) !important;
  transform: scale(4, 4);
}

/* Moz | Track */
.pure-material-slider > input::-moz-range-track {
  margin: 17px 0;
  border-radius: 1px;
  width: 100%;
  height: 4px;
  background-color: rgba(160, 180, 145, 0.24);
}

/* Moz | Thumb */
.pure-material-slider > input::-moz-range-thumb {
  appearance: none;
  -moz-appearance: none;
  border: none;
  border-radius: 50%;
  height: 3px;
  width: 3px;
  background-color: rgb(160, 180, 145);
  transform: scale(6, 6);
  transition: box-shadow 0.2s;
}

/* Moz | Progress */
.pure-material-slider > input::-moz-range-progress {
  border-radius: 1px;
  height: 4px;
  background-color: rgb(160, 180, 145);
}

/* Moz | Hover, Focus */
.pure-material-slider:hover > input:hover::-moz-range-thumb {
  box-shadow: 0 0 0 2px rgba(160, 180, 145, 0.04);
}

.pure-material-slider > input:focus::-moz-range-thumb {
  box-shadow: 0 0 0 2px rgba(160, 180, 145, 0.12);
}

.pure-material-slider:hover > input:focus::-moz-range-thumb {
  box-shadow: 0 0 0 2px rgba(160, 180, 145, 0.16);
}

/* Moz | Active */
.pure-material-slider > input:active::-moz-range-thumb {
  box-shadow: 0 0 0 2px rgba(160, 180, 145, 0.24) !important;
}

/* Moz | Disabled */
.pure-material-slider > input:disabled::-moz-range-track {
  background-color: rgba(0, 0, 0, 0.38);
}

.pure-material-slider > input:disabled::-moz-range-progress {
  background-color: rgba(0, 0, 0, 0.87);
}

.pure-material-slider > input:disabled::-moz-range-thumb {
  background-color: rgb(0, 0, 0);
  box-shadow: 0 0 0 1px rgb(255, 255, 255) !important;
  transform: scale(4, 4);
}

.pure-material-slider > input::-moz-focus-outer {
  border: none;
}

/* MS | Track */
.pure-material-slider > input::-ms-track {
  box-sizing: border-box;
  margin: 17px 0;
  border: none;
  border-radius: 1px;
  padding: 0 17px;
  width: 100%;
  height: 4px;
  background-color: transparent;
}

.pure-material-slider > input::-ms-fill-lower {
  border-radius: 1px;
  height: 4px;
  background-color: rgb(160, 180, 145);
}

/* MS | Progress */
.pure-material-slider > input::-ms-fill-upper {
  border-radius: 1px;
  height: 4px;
  background-color: rgba(160, 180, 145, 0.24);
}

/* MS | Thumb */
.pure-material-slider > input::-ms-thumb {
  appearance: none;
  margin: 0 17px;
  border: none;
  border-radius: 50%;
  height: 3px;
  width: 3px;
  background-color: rgb(160, 180, 145);
  transform: scale(6, 6);
  transition: box-shadow 0.2s;
}

/* MS | Hover, Focus */
.pure-material-slider:hover > input::-ms-thumb {
  box-shadow: 0 0 0 2px rgba(160, 180, 145, 0.04);
}

.pure-material-slider > input:focus::-ms-thumb {
  box-shadow: 0 0 0 2px rgba(160, 180, 145, 0.12);
}

.pure-material-slider:hover > input:focus::-ms-thumb {
  box-shadow: 0 0 0 2px rgba(160, 180, 145, 0.16);
}

/* MS | Active */
.pure-material-slider > input:active::-ms-thumb {
  box-shadow: 0 0 0 2px rgba(160, 180, 145, 0.24) !important;
}

/* MS | Disabled */
.pure-material-slider > input:disabled::-ms-fill-lower {
  background-color: rgba(0, 0, 0, 0.38);
}

.pure-material-slider > input:disabled::-ms-fill-upper {
  background-color: rgba(0, 0, 0, 0.38);
  opacity: 0.38;
}

.pure-material-slider > input:disabled::-ms-thumb {
  background-color: rgb( 0, 0, 0);
  box-shadow: 0 0 0 1px rgb(255, 255, 255) !important;
  transform: scale(4, 4);
}


/*------------------------------------
Border
-------------------------------------*/


.border-anim {
  --angle: 0deg;
  width: 100%;
  height: 100%;
  border: 8px solid;
  border-image: conic-gradient(from var(--angle), #db495d, #f4af79, #f6d385, #a0b491, #467a95, #786180, #8d5575, #db495d) 1;
  animation: 10s rotate linear infinite;

}

@keyframes rotate {
  to {
    --angle: 360deg;
  }
}

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/*------------------------------------
Video
-------------------------------------*/

/*
.responsive-video {
  width: 100%;
  height: 0;
  position: relative;
  padding-top: 56.25%;
  margin: 24px 0px;
}
.responsive-video > iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  border-radius: 2rem;
  transform: scale(.55)rotate(-90deg);
}
*/

.responsive-video {
  width: 300%;
  height: 0;
  position: relative;
  padding-top: 168.75%;
  overflow: hidden;
}

.responsive-video > iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: -33.5%;
  border: 0;
  border-radius: 2rem;
  transform: scale(.55)rotate(-90deg);
}


/*------------------------------------
File input
-------------------------------------*/

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

.setting h2 {
  color: #999;
  font-size: 14px;
  font-weight: 400;
  margin: 0 0 6px;
  line-height: 24px;
}
.setting a[data-action] {
  cursor: pointer;
  color: #555;
  font-size: 14px;
  line-height: 24px;
  transition: color 0.2s;
}
.setting a[data-action] i {
  width: 1.25em;
  text-align: center;
}
@media (hover: hover) {
  .setting a[data-action]:hover {
    color: #f4af79;
  }
}
.setting a[data-action].disabled {
  opacity: 0.35;
  cursor: default;
}
@media (hover: hover) {
  .setting a[data-action].disabled:hover {
    color: #555;
  }
}
.image_picker .settings_wrap {
  overflow: hidden;
  position: relative;
}
.image_picker .settings_wrap .drop_target,
.image_picker .settings_wrap .settings_actions {
  float: left;
}
.image_picker .settings_wrap .drop_target {
  margin-right: 18px;
}
.image_picker .settings_wrap .settings_actions {
  margin-top: 12px;
}
.settings_actions.vertical a {
  display: block;
}
.drop_target {
  position: relative;
  cursor: pointer;
  background: #cebebe40;
  border-top: 1px solid hsl(0, 0%, 80%);
  border-radius: 4px;
  width: 72px;
  height: 72px;
  padding: 4px 6px 6px;
  transition: all 0.2s;
}
.drop_target input[type="file"] {
  visibility: hidden;
}
.drop_target:before {
  content: '\e1d3';
  font-family: "Material Icons";
  position: absolute;
  display: block;
  width: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 32px;
  color: rgba(0, 0, 0, 0.3);
  transition: color 0.2s;
}
.drop_target:hover,
.drop_target.dropping {
  background: #f4af79;
  border-top-color: #f4af79;
}
.drop_target:hover:before,
.drop_target.dropping:before {
  color: rgba(0, 0, 0, 0.6);
}
.drop_target .image_preview {
  width: 100%;
  height: 100%;
  background: no-repeat center;
  background-size: contain;
  position: relative;
  z-index: 2;
}
.image_details {
  width: 192px;
  padding: 4px;
  background: hsl(0, 0%, 90%);
  border-radius: 4px;
  position: absolute;
  top: 0;
  left: 84px;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}
.dropped ~ .image_details {
  opacity: 1;
  pointer-events: all;
}
.image_details:before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-right-color: hsl(0, 0%, 90%);
  position: absolute;
  left: -12px;
  top: 10px;
}
.image_details .input_line {
  display: block;
  overflow: hidden;
  margin-bottom: 4px;
}
.image_details .input_line:last-of-type {
  margin-bottom: 0;
}
.image_details .input_line span,
.image_details .input_line input {
  float: left;
  line-height: 24px;
}
.image_details .input_line span {
  font-size: 12px;
  color: #666;
  width: 20%;
}
.image_details .input_line input[type="text"] {
  width: 100%;
  color: #444444;
  appearance: none;
  border: 1px solid hsl(0, 0%, 90%);
  border-radius: 3px;
  background: #fff;
  height: 24px;
  line-height: 18px;
  padding: 3px 5px;
  font-size: 14px;
  transition: border 0.2s;
}
.image_details .input_line input[type="text"]:hover,
.image_details .input_line input[type="text"]:focus {
  outline: 0;
  border: 1px solid #467a95;
}
.image_details .input_line input[type="text"]::-webkit-input-placeholder {
  font-size: 14px;
  color: #999;
}
.image_details a.confirm {
  position: absolute;
  right: -12px;
  top: 50%;
  margin-top: -12px;
  display: block;
  width: 21px;
  height: 21px;
  border-radius: 100%;
  background: #eee;
  line-height: 23px;
  text-align: center;
  font-size: 16px;
}

/*------------------------------------
Canvas
-------------------------------------*/

#canvas {
  position: fixed;
  z-index: -1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

/*------------------------------------
Responsiveness
-------------------------------------*/

/* Mobile */

@media (max-width: 599px) {
  .flex { padding: 16px 8px; }
  .flex.break { flex-direction: column; padding: 0px 8px; }
  .flex.break div:nth-child(1) { margin: 12px 8px;}

  .mt-large { margin-top: 12px; }
  .padding { padding: 12px 18px; }
  .mdc-layout-grid__cell:not(.none), .override-show.cover { 
    padding: 20px 16px; 
    border-radius: 2rem;
  }

  h2 { font-size: 16px; }
  h2.pagetitle { font-size: 18px; }
  p, a {
    font-size: 14px;
    line-height: 20px;
  }
  .btn.text { padding: 14px 24px; }

  input, input.mdc-text-field__input, input[type="text"] { width: 80%; }


  #footer .btn.text { height: 32px; padding: 6px 18px; }

  .switchlarge { width: 54px; height: 32px; }
  .switchlarge__label:before {
    width: 54px;
    height: 32px;

  }
  .switchlarge__label:after {
    width: 32px;
    height: 32px;
  }
  .switchlarge__input:checked + .switchlarge__label:after {
    left: 21px;
  }
}

/* Ipad */

@media (min-width: 600px) and (max-width: 839px) {
  .mdc-layout-grid__cell--span-5, .mdc-layout-grid__cell--span-5-tablet {
    grid-column-end: span 4;
    grid-column-start: 3;
  }
  .mdc-layout-grid__cell--span-7, .mdc-layout-grid__cell--span-7-tablet {
    grid-column-end: span 8;
  }
}