:root
{
	--text-color: #666;
	--text-color-inverted: #FFF;

	--headline-color: #FFF;

    --splashscreen-background-color: var(--main-color);

    --menu-background-color-header: rgba(0,0,0,0.2);
    --menu-background-color: rgba(0,0,0,0.2);
}

*
{
    color: var(--text-color);
}

h1, h2, h3
{
    color: var(--headline-text-color);
}


/* ====== hero image ======= */

.heroimage
{
	transform: skew(0,-2deg);
	overflow: hidden;
	margin-top: -2vw;
}

.heroimage .img
{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
	transform: skew(0,2deg);
	margin-bottom: -2vw;
    height: 85vh
}

/* ====== menu ======= */

.menu
{
    display: flex; 
    flex-direction: row;
    position: fixed;
    right: 0px;
    top: 0px;
    padding: 2px 20px 2px 20px;
    transition: background-color 0.5s;
    z-index: 1000;
    background-color: var(--menu-background-color);
}
.menu *
{
    color: rgba(255,255,255,1);
    font-family: sourcesanspro-regular;
}
.menu .item
{
    position: relative;
    display: inline-block;
    width: fit-content;
    margin: 0px 10px 0px 10px;
    float: right;
    cursor: pointer;
}
.menu .item:hover
{
    text-decoration: underline;
}
.menu .item.selected
{
    border-bottom: 2px solid white;
}
.menu .item.selected:hover
{
     text-decoration: none;
}
.menu.background-blue
{
    background-color: var(--header-box-subheadline-background-color);
}
.menu-button
{
    position: fixed;
    top: 0px;
    right: 0px;
    display: none;
    height: 40px;
    width: 40px;
    z-index: 1001;
    color: white;
    cursor: pointer;
    background-color: var(--menu-background-color);
}
@media (max-width: 640px)
{
    .menu-button
    {
        display: block;
    }
    .menu
    {
        flex-direction: column;
        top: 40px;
        right: -200px;
        transition: all 0.5s;
    }
    .menu.open
    {
        right: 0px;
    }
    .menu .item
    {
        margin: 3px 10px 3px 10px;
    }
}

/* menu icon animation */

.hamburger {
  padding: 8px 5px;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: #FFF;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible; }
.hamburger:hover { opacity: 0.7; }
.hamburger.is-active:hover { opacity: 0.7; }
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after { background-color: #FFF; }

.hamburger-box {
  width: 30px;
  height: 20px;
  display: inline-block;
  position: relative; }

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
width: 30px;
height: 4px;
background-color: #FFF;
border-radius: 4px;
position: absolute;
transition-property: transform;
transition-duration: 0.15s;
transition-timing-function: ease; }
.hamburger-inner::before, .hamburger-inner::after {
content: "";
display: block; }
.hamburger-inner::before {
top: -10px; }
.hamburger-inner::after {
bottom: -10px; }

.hamburger--spring .hamburger-inner {
  top: 2px;
  transition: background-color 0s 0.13s linear; }
.hamburger--spring .hamburger-inner::before {
top: 10px;
transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--spring .hamburger-inner::after {
top: 20px;
transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--spring.is-active .hamburger-inner {
  transition-delay: 0.22s;
  background-color: transparent !important; }
.hamburger--spring.is-active .hamburger-inner::before {
top: 0;
transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translate3d(0, 10px, 0) rotate(45deg); }
.hamburger--spring.is-active .hamburger-inner::after {
top: 0;
transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translate3d(0, 10px, 0) rotate(-45deg); }


/* ====== header box ======= */

.box.header
{
    height: 100vh;
    margin-bottom: 15vh;
}

.box.header .headline
{
    position: absolute;
    left: 0px;
    top: 30vh;
    width: auto;
    padding: 3vh 5vw 5vh 3vw;
    margin-top: 0px;
    border: unset;
    text-align: center;
	transform: skew(0,-2deg);
	color: var(--header-box-headline-text-color);
    background-color: var(--header-box-headline-background-color);
}
.box.header .headline *
{
	color: var(--header-box-headline-text-color);
}
.box.header .subheadline
{
    position: absolute;
    right: 0px;
    top: 80vh;
    width: auto;
    padding: 20px 60px 20px 60px;
    border: unset;
	transform: skew(0,-2deg);
    background-color: var(--header-box-subheadline-background-color);
}
.box.header .subheadline *
{
	color: var(--header-box-subheadline-text-color) !important;
}

.box.header h1
{
    font-size: 160% !important;
    text-shadow: unset !important;
}
.box.header h2
{
    font-size: 120% !important;
    text-shadow: unset !important;
}


/* ====== headlines ======= */

.box .headline
{
    position: relative;
    width: 60vw;
    padding: 3vh 6vw 3vh 6vw;
    margin: 10vh 0vh 0vh 0vh;
    border: unset;
	transform: skew(0,-2deg);
    background-color: var(--headline-background-color);
    color: var(--headline-text-color);
    font-family: mosk-regular;
    font-size: 140%;
}

.box .subheadline
{
    position: relative;
    width: 80vw;
    float: right;
    padding: 20px 60px 20px 60px;
    margin: -3vh 0vh 10vh 20vh;
    border: unset;
	transform: skew(0,-2deg);
    background-color: var(--subheadline-background-color);
    color: var(--subheadline-text-color);
}
.box .subheadline + .block
{
  clear: both;
}

/* ====== blocks ======= */

.block
{
    position: relative;
    width: 70vw;
    max-width: 1000px;
    height: auto;
    margin: 0 auto;
    margin-bottom: 5vh;
    text-align: justify;
}
.block p
{
    margin-bottom: 10px;
}
.block .label
{
    padding: 2vh 2vw 10vh 2vw;
    margin: 0 1vw 1vh 5px;
    float: left;
    width: fit-content;
    height: fit-content;
    background-color: var(--label-background-color);
    color: var(--label-text-color);
    font-size: 140%;
    font-family: mosk-regular;
}
.block .label.right
{
    margin: 0 5px 1vh 1vw;
    float: right;
}


/* ====== pdf download ======= */

.pdf-download
{
    position: relative;
    width: 12vw;
    height: 12vw;
    max-width: 160px;
    max-height: 160px;
    min-width: 100px;
    min-height: 100px;
    left: calc(50% - 6vw);
    box-shadow: 3px 3px 6px #AAA;
    border-radius: 160px; /* max width */
    padding: 2.5vh 1vw 1.5vh 1vw;
    background: url("../img/pdf.download.white.svg") no-repeat center center red;
    background-origin: content-box;
}
.pdf-download:hover
{
    box-shadow: 6px 6px 12px #AAA;
    cursor: pointer;
}
.pdf-download:active
{
    box-shadow: 3px 3px 6px #AAA;
}


/* ====== newsletter ======= */

.sticker.newsletter
{
    position: fixed;
    width: 150px;
    right: 10px;
    bottom: 10px;
    border-radius: 150px;
    transition: all 1s;
    opacity: 0;
    z-index: 10000;
}
.sticker.newsletter.open
{
    filter: drop-shadow(3px 3px 6px #888);
    width: 480px;
    background: rgba(0,162,255,0.5);
}

@media (max-width: 480px)
{
    .sticker.newsletter
    {
        display: none;
    }
}


.sticker.newsletter img
{
    float: left;
    width: 150px;
    height: 150px;
    filter: drop-shadow(3px 3px 6px #888);
    cursor: pointer
}
.sticker.newsletter.open img
{
    filter: none !important;
}
.sticker.newsletter img:hover
{
    filter: drop-shadow(4px 4px 8px #666);
}
.sticker.newsletter img:active
{
    filter: drop-shadow(3px 3px 6px #888);
}

.sticker.newsletter .inputs
{
    width: 0px;
    height: 30px;
    border-radius: 30px;
    overflow: hidden;
    padding: 2px 5px 5px 5px;
    position: absolute;
    bottom: 15px;
    right: 40px;
    border-bottom: solid 2px #FFF;
    opacity: 0;
}
.sticker.newsletter.open .inputs
{
    width: 280px;
    opacity: 1;
    transition-delay: 1s;
}

.sticker.newsletter input[type="text"]
{
    border: none;
    border-bottom: 1px #fff;
    background: transparent;
    color: white;
    font-size: 90%;
    width: 200px;
    padding-left: 10px;
}
.sticker.newsletter input[type="text"]:focus
{
    border: none
}
.sticker.newsletter input[type="button"]
{
    border: none;
    background: white;
    font-size: 90%;
    width: 110px;
    height: 30px;
    border-radius: 30px;
    margin-top: -2px;
    position: absolute;
    right: 0px;
    cursor: pointer
}
.sticker.newsletter input[type="button"]:active
{
    color: white;
    background: var(--color-vis-tour)
}

.sticker.newsletter .info
{
    width: 0px;
    height: 100px;
    opacity: 0;
    overflow: hidden;
}
.sticker.newsletter.open .info
{
    width: 280px;
    opacity: 1;
    padding: 10px 0px 0px 20px;
    transition-delay: 1s;
}

.sticker.newsletter .info p
{
    display: inline-block;
    color: white;
    line-height: 70%;
    font-size: 80%;
    font-family: 'sourcesanspro-regular';
}