/* GLOBALS */
:root {
--elem-white-100: rgba(255,255,255,1);
--elem-white-75: rgba(255,255,255,.75);
--elem-white-50: rgba(255,255,255,.5);
--elem-white-33: rgba(255,255,255,.33);
--elem-white-25: rgba(255,255,255,.25);
--elem-white-10: rgba(255,255,255,.1);
--elem-white-5: rgba(255,255,255,.05);
--elem-white-0: rgba(255,255,255,0);
--elem-cream-100: rgba(252,226,215,1);
--elem-cream-75: rgba(252,226,215,.75);
--elem-cream-50: rgba(252,226,215,.5);
--elem-cream-33: rgba(252,226,215,.33);
--elem-cream-25: rgba(252,226,215,.25);
--elem-cream-10: rgba(252,226,215,.1);
--elem-cream-5: rgba(252,226,215,.05);
--elem-cream-0: rgba(252,226,215,0);
--elem-grey-100: rgba(136,136,136,1);
--elem-grey-75: rgba(136,136,136,.75);
--elem-grey-50: rgba(136,136,136,.5);
--elem-grey-25: rgba(136,136,136,.25);
--elem-grey-10: rgba(136,136,136,.1);
--elem-grey-5: rgba(136,136,136,.05);
--elem-grey-0: rgba(136,136,136,0);
--elem-red-100: rgba(236,48,1,1);
--elem-red-75: rgba(236,48,1,.75);
--elem-red-50: rgba(236,48,1,.5);
--elem-red-33: rgba(236,48,1,.33);
--elem-red-25: rgba(236,48,1,.25);
--elem-red-10: rgba(236,48,1,.1);
--elem-red-5: rgba(236,48,1,.05);
--elem-red-0: rgba(236,48,1,0);
--elem-cyan-100: rgba(12,78,201,1);
--elem-cyan-75: rgba(12,78,201,.75);
--elem-cyan-50: rgba(12,78,201,.5);
--elem-cyan-33: rgba(12,78,201,.33);
--elem-cyan-25: rgba(12,78,201,.25);
--elem-cyan-10: rgba(12,78,201,.1);
--elem-cyan-5: rgba(12,78,201,.05);
--elem-cyan-0: rgba(12,78,201,0);
--elem-gold-100: rgba(247,173,107,1);
--elem-gold-75: rgba(247,173,107,.75);
--elem-gold-50: rgba(247,173,107,.5);
--elem-gold-33: rgba(247,173,107,.33);
--elem-gold-25: rgba(247,173,107,.25);
--elem-gold-10: rgba(247,173,107,.1);
--elem-gold-5: rgba(247,173,107,.05);
--elem-gold-0: rgba(247,173,107,0);
--elem-braun-100: rgba(96,56,19,1);
--elem-braun-75: rgba(96,56,19,.75);
--elem-braun-50: rgba(96,56,19,.5);
--elem-braun-25: rgba(96,56,19,.25);
--elem-braun-10: rgba(96,56,19,.1);
--elem-braun-5: rgba(96,56,19,.05);
--elem-braun-0: rgba(96,56,19,0);
--elem-black-100: rgba(0,0,0,1);
--elem-black-75: rgba(0,0,0,.75);
--elem-black-50: rgba(0,0,0,.5);
--elem-black-25: rgba(0,0,0,.25);
--elem-black-10: rgba(0,0,0,.1);
--elem-black-5: rgba(0,0,0,.05);
--elem-black-0: rgba(0,0,0,0);
}
html {
width: 100%;
overflow-x: hidden;
font-family: 'Candara', sans-serif;
}
body {
margin: 0;
-webkit-font-smoothing: auto;
}
body.modal-open {
padding: 0 !important;
}
*:focus {
border: none;
box-shadow: none;
outline: none;
}
a {
color: inherit;
text-decoration: none;
}
a:active,
a:hover {
color: var(--elem-gold-100);
text-decoration: none;
}
.container {
margin: 0 auto;
padding: 2rem 0;
}
.container-fluid {
align-items: center;
justify-content: center;
position: relative;
width: 100%;
max-width: 100%;
height: 100vh;
margin: 0 auto;
padding: 3rem 0;
overflow: hidden;
}
.flex-row {
display: flex;
flex-flow: row wrap;
}
.flex-col {
display: flex;
flex-flow: column wrap;
}
header div.container-fluid,
footer div.container-fluid {
display: flex;
flex-flow: row wrap;
align-items: flex-start;
height: auto;
min-height: 4rem;
margin: 0 auto;
padding: 0;
box-shadow: none;
}
/* TYPOGRAPHY */
@font-face {
font-family: 'Candara';
src: url('Candara.eot');
src: local('./fonts/Candara'), local('./fonts/Candara'),
url('./fonts/Candara.eot?#iefix') format('embedded-opentype'),
url('./fonts/Candara.woff2') format('woff2'),
url('./fonts/Candara.woff') format('woff'),
url('./fonts/Candara.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: fallback;
}
@font-face {
font-family: 'Mak Light';
src: url('Mak-Light.eot');
src: local('./fonts/Mak-Light'), local('./fonts/Mak-Light'),
url('/fonts/Mak-Light.eot?#iefix') format('embedded-opentype'),
url('/fonts/Mak-Light.woff2') format('woff2'),
url('/fonts/Mak-Light.woff') format('woff'),
url('/fonts/Mak-Light.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: fallback;
}
@font-face {
font-family: 'Mak Bold';
src: url('Mak-Bold.eot');
src: local('./fonts/Mak-Bold'), local('./fonts/Mak-Bold'),
url('./fonts/Mak-Bold.eot?#iefix') format('embedded-opentype'),
url('./fonts/Mak-Bold.woff2') format('woff2'),
url('./fonts/Mak-Bold.woff') format('woff'),
url('./fonts/Mak-Bold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
font-display: fallback;
}
h1, h2, h3, h4, h5, h6 {
clear: both;
color: var(--elem-braun-100);
font-weight: 600;
margin-top: 1.5rem;
margin-bottom: 1rem;
}
h1 {
font-family: 'Candara', sans-serif;
font-weight: bold;
font-size: 2rem;
}
h2 {
font-family: 'Candara', sans-serif;
font-weight: bold;
font-size: 1.5rem;
}
h3 {
font-family: 'Candara', sans-serif;
font-weight: bold;
font-size: 1.2rem;
}
h4 {
font-family: 'Candara', sans-serif;
font-weight: 600;
font-size: 1rem;
}
h5 {
font-family: 'Candara', sans-serif;
font-weight: 600;
font-size: .9rem;
}
h6 {
font-family: 'Candara', sans-serif;
font-weight: 600;
font-size: .85rem;
}
p {
font-family: 'Candara', sans-serif;
font-weight: normal;
margin-bottom: 1rem;
}
p span {
color: var(--elem-braun-100);
font-weight: 600;
}
.scripted-light {
font-family: 'Mak Light', sans-serif; 
}
.scripted-hard {
font-family: 'Mak Bold', sans-serif; 
}
/* ELEMENTS */
body {
position: relative;
background: var(--elem-cream-100);
}
img {
height: auto;
max-width: 100%;
}
figure {
margin: 1em 0;
}
table {
margin: 0 0 1.5em;
width: 100%;
}
.nav-links {
align-items: center;
justify-content: space-between;
}
.content {
align-items: center;
justify-content: center;
width: 100%;
height: auto;
min-height: 85vh;
margin: 0;
padding: 0;
}
.hidden {
display: none;
}
/* Menus */
.headline-desktop--menu {
align-items: center;
justify-content: flex-end;
width: 100%;
max-width: calc(100% / 2);
height: auto;
margin: 0 0 0 auto;
}
.main-menu--items {
align-items: flex-start;
justify-content: space-between;
position: relative;
width: auto;
margin: auto 0;
padding: 0;
list-style: none inside none;
background: 0 0;
}
.main-menu--items .main-menu--item {
width: fit-content !important;
margin: 0 0 0 .5rem;
padding: .25rem;
font-family: 'Candara', sans-serif;
font-weight: 600;
color: var(--elem-braun-75);
text-transform: uppercase;
cursor: pointer;
}
.main-menu--items .main-menu--item.hidden {
width: 0 !important;
margin: 0;
padding: 0;
}
.main-menu--items .main-menu--item svg {
width: auto;
height: 2rem;
margin: 0 .25rem 0 0;
padding: 0;
}
.main-menu--items .main-menu--item:hover,
.main-menu--items .main-menu--item.slick-current {
color: var(--elem-white-100);
}
.navbar-toggle .icon-bar {
background: var(--elem-white-0) none repeat scroll 0 0;
}
/* FORMS */
/* modal forms */
.modal-form {
margin: 0 0 1.5rem;
padding: 0;
}
.modal-form .form-group {
width: 100%;
align-items: center;
justify-content: center;
margin: 0 auto .5rem;
padding: 0;
}
.modal-form .form-group label.form-label {
display: none;
}
.modal-form .form-group input.form-control,
.modal-form .form-group textarea.form-control {
width: 100%;
min-width: calc(100% / 5 * 4 - 1rem);
margin: 0 0 0 auto;
padding: .25rem .75rem;
border: 1px solid var(--elem-grey-25);
outline: none;
box-shadow: none;
border-radius: .5rem;
}
.modal-form .form-group input.form-control:focus,
.modal-form .form-group textarea.form-control:focus {
width: 100%;
min-width: calc(100% / 5 * 4 - 1rem);
margin: 0 0 0 auto;
padding: .25rem .75rem;
border: 1px solid var(--elem-grey-25);
outline: 1px solid var(--elem-grey-25);
box-shadow: none;
border-radius: .5rem;
}
.modal-form .form-group button,
.modal-form .form-group button:focus,
.modal-form .form-group button:hover {
width: auto;
max-width: calc(100% / 3 + 2rem);
height: auto;
margin: 1rem auto;
padding: .25rem;
}
.modal-form .form-group.hidden-group {
display: none;
}
.fairymail {
display: none;
}
/* ANIMATE */
@keyframes onload {
0% {
transform: scale(.75);
transform-origin: center center;
stroke-dasharray: 0 100%;
fill: var(--elem-white-0);
}
85% {
transform: scale(1);
transform-origin: center center;
stroke-dasharray: 100% 100%;
fill: var(--elem-white-0);
}
92.5% {
transform: scale(1);
transform-origin: center center;
stroke-dasharray: 100% 100%;
fill: var(--elem-white-50);
}
100% {
transform: scale(1);
transform-origin: center center;
stroke-dasharray: 100% 100%;
fill: var(--elem-white-100);
}
}
@keyframes loadend {
0% {
background: var(--elem-gold-100);
opacity: 1;
z-index: 10000;
}
100% {
background: var(--elem-gold-0);
opacity: 0;
z-index: -1;
}
}
.animate-fast {
-moz-transition: all .1s ease-in-out .05s;
-webkit-transition: all .1s ease-in-out .05s;
transition: all .1s ease-in-out .05s;
}
.animate-faster {
-moz-transition: all .3s ease-in-out .1s;
-webkit-transition: all .3s ease-in-out .1s;
transition: all .3s ease-in-out .1s;
}
.animate-normal {
-moz-transition: all .6s ease-in-out .2s;
-webkit-transition: all .6s ease-in-out .2s;
transition: all .6s ease-in-out .2s;
}
.animate-slower {
-moz-transition: all .9s ease-in-out .3s;
-webkit-transition: all .9s ease-in-out .3s;
transition: all .9s ease-in-out .3s;
}
.animate-slow {
-moz-transition: all 1.2s ease-in-out .4s;
-webkit-transition: all 1.2s ease-in-out .4s;
transition: all 1.2s ease-in-out .4s;
}
/* HEADER */
header.headline {
position: fixed;
top: 0;
left: 0;
margin: 0;
padding: 0 !important;
width: 100%;
max-width: 100%;
height: 100%;
max-height: 5rem;
box-shadow: 0 .15rem .15rem var(--elem-black-0);
z-index: 50;
overflow: visible;
}
.headline.glass {
background: var(--elem-gold-0);
}
.headline.red {
background: var(--elem-red-100);
box-shadow: 0 .15rem .15rem var(--elem-black-25);
}
.headline.cyan {
background: var(--elem-cyan-100);
box-shadow: 0 .15rem .15rem var(--elem-black-25);
}
.headline.gold {
background: var(--elem-gold-100);
box-shadow: 0 .15rem .15rem var(--elem-black-25);
}
.headline-rows {
width: auto;
margin: 0 auto;
padding: 0;
background: var(--elem-white-0);
}
.headline-bottom, 
.headline-top {
align-items: center;
justify-content: space-between;
position: relative;
width: 100%;
height: 100%;
margin: auto;
padding: 0;
}
.headline-middle {
position: relative;
width: 100%;
height: auto;
min-height: 5rem;
}
.headline-logo {
position: absolute;
top: 0;
left: auto;
width: 100%;
max-width: 15rem;
height: auto;
margin: .25rem 0;
padding: 0;
}
.headline-logo a.site-logo {
align-items: center;
justify-content: center;
width: 100%;
max-width: 15rem;
height: auto;
margin: 0;
background: none;
outline: 0;
}
.headline-logo a.site-logo svg {
width: 100%;
max-width: 100%;
height: auto;
margin: auto;
padding: 1rem 1rem 0;
overflow: visible;
}
.headline-logo a.site-logo svg path {
fill: var(--elem-white-100);
}
.headline-mobile--menu {
display: none;
}
.headline-desktop--menu {
display: flex;
}
.function-buttons {
align-items: center;
justify-content: space-between;
width: 100%;
max-width: -moz-fit-content;
max-width: fit-content;
height: auto;
margin: auto 0 auto 2rem;
}
.toggler,
.toggler:focus,
.toggler:hover {
width: 2.5rem;
height: 2.5rem;
margin: 0 0 0 .5rem;
border: none;
outline: none;
box-shadow: none;
}
.toggler-link {
width: 2.5rem;
height: 2.5rem;
margin: 0;
padding: 0;
box-shadow: none;
}
.toggler-link svg {
width: 100%;
max-width: 100%;
height: auto;
}
.toggler-link svg path {
fill: var(--elem-cream-75);
}
.toggler-link:hover svg path {
fill: var(--elem-white-100);
}
.toggler-link .menu-toggler path, .toggler-link:focus .menu-toggler path {
fill: var(--elem-braun-75);
transform: rotate(0);
transform-origin: center center;
opacity: 1;
}
.toggler-link .menu-toggler path,
.toggler-link:focus .menu-toggler path {
fill: var(--elem-braun-100);
transform: rotate(0deg);
transform-origin: center center;
opacity: 1;
}
.toggler-link .menu-toggler:hover path,
.toggler-link.show .menu-toggler:hover path {
fill: var(--elem-braun-100);
}
.toggler-link.show .menu-toggler path.top {
transform: rotate(-45deg);
transform-origin: 2rem 1rem;
}
.toggler-link.show .menu-toggler path.center {
transform: rotate(0deg);
opacity: 0;
}
.toggler-link.show .menu-toggler path.bottom {
transform: rotate(45deg);
transform-origin: 2rem 1.5rem;
}
/* CONTENT */
.welcome {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
width: 100vw;
height: 100vh;
z-index: 10000;
animation: loadend .15s ease-in-out 5s 1 normal both;
}
.welcome svg {
padding: 0 1rem;
animation: loadend .15s ease-in-out 4.75s 1 normal both;
}
.welcome svg path.letter {
stroke: var(--elem-white-100);
stroke-width: 1px;
animation: onload ease-in-out 1 normal both;
transform-origin: left center;
}
.welcome svg path.letter.el-1{
animation-duration: 1.25s;
animation-delay: 1.25s;
}
.welcome svg path.letter.el-2{
animation-duration: 1.5s;
animation-delay: 1s;
}
.welcome svg path.letter.el-3{
animation-duration: 1.75s;
animation-delay: .5s;
}
.welcome svg path.letter.el-4{
animation-duration: 2s;
animation-delay: 0s;
}
.welcome svg path.letter.el-5{
animation-duration: 1.75s;
animation-delay: .5s;
}
.welcome svg path.letter.el-6{
animation-duration: 1.5s;
animation-delay: 1s;
}
.welcome svg path.letter.el-7{
animation-duration: 1.25s;
animation-delay: 1.25s;
}
.section-halfgap {
height: 1.5rem;
}
.section-gap {
height: 3rem;
}
.panels-all {
display: block;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.panels-all.hidden {
height: 0;
overflow: hidden;
}
.panel-glass .extend-back {
background: var(--elem-cream-100); 
}
.panel-red .extend-back {
background: var(--elem-red-100); 
}
.panel-cyan .extend-back {
background: var(--elem-cyan-100); 
}
.panel-gold .extend-back {
background: var(--elem-gold-100); 
}
.panel-dt .panel-backface,
.panel-tp .panel-backface,
.panel-ph .panel-backface   {
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: -20vw;
width: 120vw;
height: 120vh;
margin: 0;
z-index: -1;
opacity: .75;
}
.slick-slide {
display: block;
float: left;
margin: auto;
text-align: center;
}
.slick-dots {
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: center;
position: absolute;
width: 1rem;
height: 30vh;
top: 35vh;
left: 1.5vw;
margin: 0;
padding: 0;
border-radius: 1rem;
list-style: none inside;
overflow: hidden;
z-index: 75;
}
.slick-dots li {
width: 100%;
min-height: 1.25rem;
margin: 0;
}
.slick-dots li button {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 1rem;
height: 100%;
min-height: 1rem;
margin: .125rem 0;
padding: 0;
border: .1rem solid var(--elem-braun-50);
border-radius: 1rem;
outline: none;
background: var(--elem-cream-100);
font-size: 0;
color: transparent;
-moz-transition: all .3s ease-in-out .1s;
-webkit-transition: all .3s ease-in-out .1s;
transition: all .3s ease-in-out .1s;
}
.slick-dots li.slick-active button {
background: var(--elem-gold-100);
}
.panel-frontface {
position: absolute;
width: 100%;
max-width: 20vw;
height: auto;
}
.panel-frontface.face-bottom-left {
bottom: -3.5rem;
left: -4.5rem;
margin: auto auto 0 0;
}
.panel-frontface.face-bottom-right {
bottom: -3.5rem;
right: -4.5rem;
margin: auto 0 0 auto;
}
/* section firstscreen */
.section-firstscreen {
position: relative;
width: 100%;
height: 100%;
min-height: 100vh;
background: linear-gradient(210deg, rgba(253,96,58,1),var(--elem-red-100));
padding: 0;
text-align: center;
}
.section-firstscreen--title {
position: relative;
top: 3rem;
left: 0;
width: 25vw;
margin: 15vh 5vw auto 0;
}
.section-firstscreen--title h2 {
margin: .5rem auto;
font-size: 2vw;
color: var(--elem-white-100);
text-align: left;
text-transform: uppercase;
letter-spacing: .15rem;
}
.section-firstscreen--naming {
align-items: center;
justify-content: center;
position: absolute;
top: 60vh;
left: 20vw;
width: auto;
height: auto;
z-index: 2;
color: var(--elem-white-100);
}
.section-firstscreen--naming.name-mild {
top: 60vh;
left: 15vw;
right: auto;
}
.section-firstscreen--naming.name-strong {
top: 30vh;
left: auto;
right: 5vw;
}
.section-firstscreen--naming .title-back {
width: 100%;
max-width: fit-content;
margin: 0 auto 1rem;
padding: 0;
border-radius: 1.5vw 0 1.5vw 0;
overflow: hidden;
}
.section-firstscreen--naming .title-back.red {
background: var(--elem-red-100);
}
.section-firstscreen--naming .title-back.cyan {
background: var(--elem-cyan-100);
}
.section-firstscreen--naming .title-body {
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
margin: 0;
padding: .25rem 2rem;
background: var(--elem-white-33);
}
.section-firstscreen--naming .title {
font-size: 2rem;
line-height: 1;
margin: .25rem auto 0;
}
.section-firstscreen--naming .subtitle {
font-size: 1rem;
line-height: 1;
margin: 0 auto .25rem;
}
.section-firstscreen--naming .anons p {
margin: 0;
font-size: 1rem;
text-transform: uppercase;
}
.section-firstscreen--image {
position: relative;
width: 50vw;
height: auto;
margin: auto 10vw auto -10vw;
padding: 0;
}
.section-firstscreen--image picture,
.section-firstscreen--image img {
width: auto;
height: 100%;
max-height: 85vh;
margin: auto;
}
/* section-product */
.section-product {
position: relative;
width: 100%;
height: 100%;
min-height: 100vh;
padding: 0;
text-align: center;
}
.section-product--imagebody {
align-items: center;
justify-content: center;
position: relative;
width: 100%;
max-width: 40vw;
height: 120vh;
margin: -10vh auto -10vh 10vw;
background: var(--elem-cream-100);
border-radius: 0 50vh 50vh 0;
-webkit-transform: scaleX(.5);
-moz-transform: scaleX(.5);
transform: scaleX(.5);
overflow: visible;
}
.section-product--image {
align-items: center;
justify-content: center;
width: 100%;
max-width: 50vw;
margin: auto -5vw auto 0vw;
padding: 5vw;
transform: scaleX(2);
}
.section-product--image picture,
.section-product--image img {
width: 100%;
height: 100%;
margin: auto;
}
.extend-back {
align-items: center;
justify-content: center;
position: absolute;
top: 0;
right: 0;
width: 75vw;
height: 100vh;
margin: 0;
padding: 10vh 0 10vh 25vw;
z-index: -1;
}
.extend-back hr {
width: 100%;
height: .15rem;
margin: .25rem 0;
border: none;
background: linear-gradient(to right, var(--elem-cream-0), var(--elem-cream-100), var(--elem-cream-100));
}
.extend-cell {
width: 100%;
height: auto;
margin: auto;
padding: 0;
}
.extend-back .main,
.extend-back .anons {
align-items: center;
justify-content: space-between;
width: 100%;
max-width: calc(100% - 4rem);
height: min-content;
margin: 1.5rem auto 0;
}
.extend-back .main .titles {
width: 100%;
max-width: 12rem;
margin: 0 1rem 0 0;
padding: .15rem;
background: var(--elem-white-25);
border-radius: 1.5rem 0 1.5rem 0;
color:var(--elem-white-100);
}
.extend-back .main .titles .title {
font-size: 1.5rem;
}
.extend-back .main .titles .subtitle {
font-size: .9rem;
text-transform: uppercase;
}
.extend-back .main .infocell {
align-items: center;
justify-content: center;
width: 100%;
max-width: -moz-fit-content;
max-width: fit-content;
margin: 0 auto;
color: var(--elem-cream-100);
font-size: 1rem;
}
.extend-back .main .infocell svg {
width: 4rem;
height: auto;
margin: 0 .5rem 0 0;
}
.extend-back .main .infocell.red svg  path {
fill: var(--elem-red-100);
}
.extend-back .main .infocell.cyan svg  path {
fill: var(--elem-cyan-100);
}
.extend-back .main .infocell.gold svg  path {
fill: var(--elem-gold-100);
}
.extend-back .anons p {
color: var(--elem-cream-100);
font-size: 1rem;
text-align: left;
text-transform: uppercase;
}
.extend-back .image-left {
align-items: center;
width: 100%;
max-width: calc(100% / 3);
height: auto;
margin: auto;
}
.extend-back .text-right {
align-items: flex-start;
justify-content: flex-start;
width: 100%;
max-width: calc(100% / 3 * 1.8);
margin: 1.5rem 2rem 0 auto;
}
.extend-back .text-right .line {
align-items: center;
justify-content: flex-start;
width: 100%;
margin: 0 0 .5rem;
padding: 0 0 0 10%;
color: var(--elem-cream-100);
font-size: 1rem;
}
.extend-back .text-right .line svg {
width: 4rem;
height: auto;
margin: 0 1rem 0 0;
}
.extend-back .text-right.red .line svg  path {
fill: var(--elem-red-100);
}
.extend-back .text-right.cyan .line svg  path {
fill: var(--elem-cyan-100);
}
.extend-back .text-right.gold .line svg  path {
fill: var(--elem-gold-100);
}
.extend-back .text-right .line p {
width: 100%;
max-width: calc(100% - 6rem);
text-align: left;
margin: 0;
line-height: 1;
font-size: 1rem;
}
.extend-back .text-right .line p span {
color: var(--elem-white-100);
text-transform: uppercase;
font-size: 1.5rem; 
}
.extend-back .contains {
align-items: flex-start;
justify-content: flex-start;
width: 100%;
max-width: calc(100% - 4rem);
margin: 1.5rem auto;
text-align: left;
font-size: 1.2rem;
color: var(--elem-cream-100);
}
.extend-back .details {
align-items: flex-start;
justify-content: center;
width: 100%;
max-width: calc(100% - 4rem);
margin: 0 auto auto;
}
.extend-back .details .cell {
align-items: center;
justify-content: flex-start;
width: 100%;
max-width: calc(100% / 2 - .5rem);
margin: 0 0 .5rem;
color: var(--elem-cream-100);
font-size: 1rem;
}
.extend-back .details .cell svg {
width: 4rem;
height: auto;
margin: 0 .5rem 0 0;
}
.extend-back .details.red .cell svg  path {
fill: var(--elem-red-100);
}
.extend-back .details.cyan .cell svg  path {
fill: var(--elem-cyan-100);
}
.extend-back .details.gold .cell svg  path {
fill: var(--elem-gold-100);
}
.extend-back .details .cell span {
width: 100%;
max-width: calc(100% - 6rem);
text-align: left;
}
/* section-vendors */
.section-vendors {
align-items: center;
justify-content: center;
position: relative;
width: 100%;
height: 100%;
min-height: 100vh;
padding: 0;
text-align: center;
}
.section-vendors--text {
margin: 15vh auto auto;
}
.section-vendors--text .textbody {
align-items: center;
justify-content: center;
width: 100%;
max-width: 35vw;
margin: 0 -20vw 0 20vw;
padding: 0 0 2rem;
background: var(--elem-gold-100);
border-radius: 2.5rem 0 2.5rem 0;
}
.section-vendors--text .textbody h3 {
color: var(--elem-white-100);
font-size: 1.5rem;
text-align: center;
text-transform: uppercase;
}
.section-vendors--text .textbody svg {
width: 100%;
max-width: 20vw;
height: auto;
margin: auto;
}
.section-vendors--text .textbody svg path {
fill: var(--elem-white-100);
}
.section-vendors--image {
width: 100%;
max-width: 66vw;
height: auto;
margin: auto auto 0 0;
padding: 0;
}
.section-vendors--image picture,
.section-vendors--image img {
width: 100%;
height: 100%;
margin: auto;
}
/* section-wherebuy */
.section-wherebuy {
align-items: center;
justify-content: center;
position: relative;
width: 100%;
height: 100%;
min-height: 90vh;
padding: 0;
text-align: center;
}
.section-wherebuy--capline {
width: 100vw;
height: auto;
margin: auto;
padding: 0;
}
.section-wherebuy--capline .title {
width: 100%;
margin: auto 0 2rem;
font-size: 4rem;
font-weight: 800;
color: var(--elem-braun-100);
text-align: center;
text-transform: uppercase;
}
.section-wherebuy--capline .items {
align-items: flex-start;
justify-content: space-around;
width: 80vw;
height: min-content;
margin: 0 auto auto;
}
.section-wherebuy--logo {
width: 100%;
max-width: calc(100% / 4 - 2rem);
margin: 0 0 1rem;
}
.section-wherebuy--logo svg {
width: 100%;
height: auto;
margin: auto;
}
.section-wherebuy--logo svg g.active,
.section-wherebuy--logo:hover svg g.passive {
opacity: 0;
}
.section-wherebuy--logo svg g.passive,
.section-wherebuy--logo:hover svg g.active {
opacity: 1;
}
/* FOOTER */
.footline {
position: absolute;
bottom: 0;
width: 100%;
min-width: 100%;
height: auto;
min-height: 6rem;
margin: 0;
padding: 1rem 0;
background: var(--elem-gold-100);
overflow: visible;
z-index: -1;
opacity: 0;
}
.footline.on-air {
z-index: 50;
opacity: 1;
}
.footline-row {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.footline-top {
align-items: center;
justify-content: space-around;
width: 100%;
margin: 0;
padding: 0;
}
.footer-1,
.footer-2,
.footer-3 {
align-items: center;
justify-content: center;
width: 100%;
margin: 0 auto;
padding: 0;
text-align: center;
}
.footer-1 {
max-width: 2rem;
order: 1;
}
.footer-2 {
max-width: calc(100% - 4rem);
order: 2;
}
.footer-3 {
max-width: 2rem;
order: 3;
}
.footline .title {
width: 100%;
margin: 1rem auto .5rem;
color: var(--elem-white-100);
font-size: 1.5rem;
letter-spacing: .2rem;
text-transform: uppercase;
}
.footline a.footline-link {
display: block;
width: auto;
margin: 0 2rem;
color: var(--elem-white-75);
font-weight: 600;
font-size: 1rem;
}
.footline a.footline-link:focus,
.footline a.footline-link:hover {
color: var(--elem-white-100);
}
.copyright {
width: auto;
margin: 0 auto;
padding: 0;
font-size: .6rem;
color: var(--elem-white-75);
text-align: center;
}
/* modals */
.modal-dialog {
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: center;
width: inherit;
max-width: -moz-fit-content;
max-width: fit-content;
height: 100%;
margin: auto;
padding: 0;
}
.modal-full .modal-dialog {
max-width: calc(100% / 2);
}
.modal-content {
align-items: center;
justify-content: center;
position: relative;
width: 100%;
max-width: 100%;
height: auto;
margin: 0;
padding: .15rem;
background: transparent;
border: none;
border-radius: 1rem;
outline: none;
box-shadow: none;
overflow: hidden;
}
.modal-content button.close, 
.modal-content button.close:focus, 
.modal-content button.close:hover {
position: absolute;
top: .5rem;
right: .5rem;
width: 1.5rem;
height: 1.5rem;
margin: 0;
padding: 0;
border: none;
box-shadow: none;
outline: none;
z-index: 250;
}
.modal-content button.close svg {
margin: auto;
}
.modal-content button.close svg path,
.modal-content button.close:hover svg path {
fill: var(--elem-gold-100);
}
.modal-content-inn {
position: relative;
width: 100%;
max-width: 100%;
height: 100%;
min-height: 100%;
margin: 0;
padding: 1rem;
background: var(--elem-white-100);
border: none;
border-radius: .9rem;
outline: none;
}
.modal-header {
position: relative;
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
border: none;
outline: none;
}
.modal-title {
width: 100%;
margin: 1rem auto;
padding: 0;
color: var(--elem-white-100);
font-size: 3rem;
text-align: center;
}
.modal-body {
position: relative;
width: 100%;
margin: 0;
padding: 0;
}
.modal-body h2, 
.modal-body h3, 
.modal-body p {
margin: 0;
padding: 0 0 .5rem;
color: var(--elem-white-100);
}
.modal-body picture,
.modal-body img {
width: auto;
max-width: 600px;
height: auto;
max-height: calc(100% - 4rem);
}
.modal-body label.hidden {
display: none;
}
.modal-body input[type="text"] {
width: auto;
min-width: 30vw;
margin: 0 .5rem;
padding: .25rem .5rem;
border: 1px solid var(--elem-braun-25);
border-radius: 1rem;
box-shadow: none;
outline: none;
font-size: 1.25rem;
}
.modal-body input[type="text"]:focus {
margin: 0 .5rem;
padding: .25rem .5rem;
border: 1px solid var(--elem-braun-25);
border-radius: .5rem;
outline: 1px solid var(--elem-braun-25);
}
.modal-formgroup {
align-items: center;
justify-content: center;
width: auto;
min-width: 20rem;
margin: 0 0 0.5rem;
padding: 0;
}
.modal-backdrop.show {
opacity: 1;
background: var(--elem-black-50);
}
/* -modal menu */
.modal-full ul.main-menu--items {
align-items: flex-start;
justify-content: space-between;
position: relative;
width: 100%;
margin: 0;
padding: 0;
list-style: none inside none;
background: transparent;
}
.modal-full ul.main-menu--items li.main-menu--item {
animation: split 1s 1 alternate ease-in-out 0s;
position: relative;
display: block;
width: 100%;
text-align: center;
margin: 0 .15rem;
background: transparent;
}
.modal-full ul.main-menu--items li.main-menu--item:nth-child(2n) {
transform-origin: 35% center;
}
.modal-full ul.main-menu--items li.main-menu--item:nth-child(2n+1) {
transform-origin: 65% center;
}
.modal-full ul.main-menu--items li.main-menu--item a {
display: block;
border: none;
border-radius: 0;
background: var(--elem-white-0);
color: var(--elem-white-50);
padding: .25rem .5rem;
font-size: 3vh;
font-weight: 600;
text-decoration: none;
text-transform: uppercase;
-moz-transition: all .3s ease-in-out .1s;
-webkit-transition: all .3s ease-in-out .1s;
transition: all .3s ease-in-out .1s;
}
.modal-full ul.main-menu--items li.main-menu--item:hover a,
.modal-full ul.main-menu--items li.main-menu--item.active a {
color: var(--elem-white-100);
}
/* MEDIA QUERY */
/* xxl */
@media all and (min-width: 1400px) {
.container {
max-width: 1360px;
}
.headline-desktop--menu {
display: flex;
}
.headline-mobile--menu {
display: none;
}
.headline-mobile.toggler {
display: none;
}
.headline-desktop--menu ul.main-menu--items {
display: flex;
}
.extend-body {
margin: -3rem 0 auto;
}
}
/* xl */
@media all and (min-width: 1200px) and (max-width: 1399.98px) {
.container {
max-width: 1160px;
}
.headline-logo {
max-width: 15rem;
}
.headline-logo a.site-logo {
max-width: 15rem;
}
.headline-desktop--menu {
display: flex;
}
.headline-mobile--menu {
display: none;
}
.headline-mobile.toggler {
display: none;
}
.headline-desktop--menu ul.main-menu--items {
display: flex;
}
.extend-body {
margin: -3rem 0 auto;
}
.panel-frontface {
max-width: 20vw;
}
.panel-frontface.face-bottom-left {
left: -1.5rem;
}
.panel-frontface.face-bottom-right {
right: -1.5rem;
}
}
/* lg */
@media all and (min-width: 992px) and (max-width: 1199.98px) {
.container {
max-width: calc(100% - 2rem);
}
.headline-logo {
max-width: 15rem;
}
.headline-logo a.site-logo {
max-width: 15rem;
}
.headline-desktop--menu {
display: flex;
}
.headline-mobile--menu {
display: none;
}
.headline-mobile.toggler {
display: none;
}
.headline-desktop--menu ul.main-menu--items {
display: none;
}
.extend-body {
margin: -3rem 0 auto;
}
.panel-frontface {
max-width: 22vw;
}
.panel-frontface.face-bottom-left {
left: -1.5rem;
}
.panel-frontface.face-bottom-right {
right: -1.5rem;
}
.section-firstscreen,
.section-productline,
.section-product,
.section-vendors,
.section-wherebuy {
min-height: 80vh;
}
}
/* md */
@media all and (min-width: 768px) and (max-width: 991.98px) {
.container {
max-width: calc(100% - 2rem);
}
.headline-logo {
max-width: 15rem;
margin: .5rem calc(100% / 2 - 7.5rem) 0;
}
.headline-logo a.site-logo {
padding: 0 .5rem .5rem;
border-radius: 1rem;
}
.headline-desktop--menu {
display: none;
}
.headline-mobile--menu {
display: flex;
}
.headline-mobile.toggler {
display: flex;
margin: 0 .5rem 0 0;
}
.headline-desktop--menu ul.main-menu--items {
display: none;
}
.extend-body {
margin: -3rem 0 auto;
}
.panel-frontface {
max-width: 26vw;
}
.panel-frontface.face-bottom-left {
left: -1.5rem;
}
.panel-frontface.face-bottom-right {
right: -1.5rem;
}
.section-firstscreen,
.section-productline,
.section-product,
.section-vendors,
.section-wherebuy {
min-height: 80vh;
}
}
/* sm */
@media all and (min-width: 576px) and (max-width: 767.98px) {
.container {
max-width: 100%;
}
.headline-logo {
max-width: 100%;
margin: 0;
}
.headline-logo a.site-logo {
margin: 0 auto;
padding: .5rem;
border-radius: 0;
}
.headline-logo a.site-logo svg {
padding: .25rem;
}
.headline-desktop--menu {
display: none;
}
.headline-mobile--menu {
display: flex;
}
.headline-mobile.toggler {
display: flex;
margin: 0 .5rem 0 0;
}
.headline-desktop--menu ul.main-menu--items {
display: none;
}
.extend-body {
margin: -5rem 0 auto;
}
.panel-frontface {
max-width: 34vw;
}
.panel-frontface.face-bottom-left {
left: -1.5rem;
}
.panel-frontface.face-bottom-right {
right: -1.5rem;
}
.section-firstscreen,
.section-productline,
.section-product,
.section-vendors,
.section-wherebuy {
min-height: 80vh;
}
.section-firstscreen--image,
.section-productline--image,
.section-product--image,
.section-vendors--image,
.section-wherebuy--image {
margin: 5rem auto auto;
}
.section-wherebuy--capline .title {
font-size: 3rem;
}
.section-wherebuy--logo {
max-width: calc(100% / 2 - 2rem);
margin: 0 0 .5rem;
}
}
/* xs */
@media all and (max-width: 575.98px) {
.container {
max-width: 100%;
}
header.headline {
max-width: 100vw;
}
.headline-logo {
max-width: 100%;
margin: 0;
}
.headline-logo a.site-logo {
margin: 0 auto;
padding: .5rem;
border-radius: 0;
}
.headline-logo a.site-logo svg {
padding: .25rem;
}
.headline-desktop--menu {
display: none;
}
.headline-mobile--menu {
display: flex;
}
.headline-mobile.toggler {
display: flex;
margin: .5rem .5rem .5rem -.5rem;
}
.extend-body {
margin: 6vh auto 0;
}
.panel-frontface {
max-width: 40vw;
}
.section-firstscreen {
min-height: calc(100vh + 4rem);
margin: -4rem auto 0;
padding: 3rem 0 0;
}
.section-product {
min-height: 50vh;
max-height: 50vh;
margin: auto auto -5vh;
}
.extend-back {
position: relative;
width: 100vw;
height: 100%;
max-height: 50vh;
margin: auto 0 0;
padding: 0;
z-index: -1;
}
.extend-back .main {
width: 100%;
max-width: calc(100% - 4rem);
height: min-content;
margin: 1.5rem auto 0;
}
.extend-back .anons {
width: 100%;
max-width: calc(100% - 4rem);
height: min-content;
margin: .5rem auto auto;
}
.extend-back .main .titles {
width: 100%;
max-width: 30vw;
margin: 0;
padding: .15rem;
background: var(--elem-white-25);
border-radius: 1.5rem 0 1.5rem 0;
color: var(--elem-white-100);
}
.extend-back .main .titles .title {
font-size: 1.5rem;
}
.extend-back .main .titles .subtitle {
font-size: .9rem;
text-transform: uppercase;
}
.extend-back .main .infocell {
align-items: center;
justify-content: center;
width: 100%;
max-width: 25vw;
margin: 0;
color: var(--elem-cream-100);
font-size: .85rem;
}
.extend-back .main .infocell svg {
width: 12vw;
height: auto;
margin: 0;
}
.extend-back .main .infocell.red svg path,
.extend-back .text-right.red .line svg path,
.extend-back .details.red .cell svg path {
fill: var(--elem-red-100);
}
.extend-back .main .infocell.cyan svg path,
.extend-back .text-right.cyan .line svg path,
.extend-back .details.cyan .cell svg path {
fill: var(--elem-cyan-100);
}
.extend-back .anons p {
color: var(--elem-cream-100);
font-size: .95rem;
text-align: left;
text-transform: uppercase;
}
.extend-back .image-left {
align-items: center;
width: 100%;
max-width: 30vw;
height: auto;
margin: auto;
}
.extend-back .text-right {
align-items: flex-start;
justify-content: flex-start;
width: 100%;
max-width: 50vw;
margin: 1.5rem 2rem 0 auto;
}
.extend-back .text-right .line {
align-items: center;
justify-content: flex-start;
width: 100%;
margin: 0 0 .5rem;
color: var(--elem-cream-100);
font-size: .85rem;
}
.extend-back .text-right .line svg {
width: 15vw;
height: auto;
margin: 0;
}
.extend-back .text-right .line p {
width: 100%;
max-width: calc(100% - 17vw);
text-align: left;
margin: 0 0 0 auto;
line-height: 1;
font-size: .8rem;
}
.extend-back .text-right .line p span {
color: var(--elem-white-100);
text-transform: uppercase;
font-size: 1.15rem;
}
.extend-back .contains {
align-items: flex-start;
justify-content: flex-start;
width: 100%;
max-width: calc(100% - 4rem);
margin: 1.5rem auto 0;
text-align: left;
font-size: .9rem;
color: var(--elem-cream-100);
}
.extend-back .details {
align-items: flex-start;
justify-content: center;
width: 100%;
max-width: calc(100% - 4rem);
margin: 0 auto auto;
}
.extend-back .details .cell {
align-items: center;
justify-content: flex-start;
width: 100%;
max-width: calc(100% / 2 - .5rem);
margin: 0 0 .5rem;
color: var(--elem-cream-100);
font-size: .85rem;
}
.extend-back .details .cell svg {
width: 14vw;
height: auto;
margin: 0 .5rem 0 0;
}
.extend-back .details .cell span {
width: 100%;
max-width: calc(100% - 17vw);
text-align: left;
}
.section-firstscreen--title {
position: absolute;
top: 6rem;
left: 10%;
width: calc(100% - 20%);
margin: auto;
}
.section-firstscreen--title h2 {
margin: .5rem auto 0;
font-size: 1.5rem;
}
.section-firstscreen--image {
width: 100vw;
margin: 20vh auto auto;
}
.section-product--imagebody {
max-width: 100vw;
height: 45vh;
margin: 0 auto -5vh auto;
border-radius: 0;
transform: none;
}
.section-product--image {
max-width: 100vw;
padding: 0;
transform: none;
margin: 3rem auto -3rem;
}
.section-product--image picture,
.section-product--image img {
width: auto;
max-width: 50vh;
height: 100%;
margin: auto;
}
.section-vendors,
.section-wherebuy {
min-height: 94vh;
}
.section-vendors--text {
margin: 10vh auto auto;
}
.section-vendors--text .textbody {
max-width: 80vw;
margin: 0 auto;
padding: 0 0 1rem;
}
.section-vendors--text .textbody h3 {
font-size: 1rem;
}
.section-vendors--text .textbody svg {
max-width: 50vw;
}
.section-vendors--image {
max-width: 100vw;
margin: auto auto 7vh;
}
.section-wherebuy--capline .title {
font-size: 2.5rem;
}
.section-wherebuy--logo {
max-width: calc(100% / 2 - 2rem);
margin: 0 0 .5rem;
}  
}