@font-face {
	font-family: "Neucha";
	src: url("../fonts/Neucha.woff2");
}

@font-face {
    font-family: 'mrdodo';
    src: url('../fonts/mrdodo-light-webfont.woff2') format('woff2'),
         url('../fonts/mrdodo-light-webfont.woff') format('woff');
    font-style: normal;
    font-weight: 100;
}

@font-face {
    font-family: 'mrdodo';
    src: url('../fonts/mrdodo-regular-webfont.woff2') format('woff2'),
         url('../fonts/mrdodo-regular-webfont.woff') format('woff');
    font-style: normal;
    font-weight: 200;
}

@font-face {
    font-family: 'mrdodo';
    src: url('../fonts/mrdodo-medium-webfont.woff2') format('woff2'),
         url('../fonts/mrdodo-medium-webfont.woff') format('woff');
    font-style: normal;
    font-weight: 300;
}

@font-face {
    font-family: 'mrdodo';
    src: url('../fonts/mrdodo-bold-webfont.woff2') format('woff2'),
         url('../fonts/mrdodo-bold-webfont.woff') format('woff');
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: 'DSEG';
    src: url('../fonts/DSEG7Classic-BoldItalic.woff2') format('woff2'),
         url('../fonts/DSEG7Classic-BoldItalic.woff') format('woff');
    font-style: italic;
    font-weight: 400;
}

@property --active
{
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

@property --timing
{
    syntax: "<angle>";
    inherits: true;
    initial-value: 0turn;
}

@keyframes clock 
{
    from { --timing: 0.25turn; }
    to   { --timing: 1.25turn; }
}

@keyframes StopMotion 
{
    0%   { opacity: 0; }
    20%  { opacity: 1; }
    40% { opacity: 1; }
    60% { opacity: 0; }
    100% { opacity: 0; }
}

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

:root
{
    --white100: #FFFFFF;
    --white200: #F5F3E6;
    --light100: #DCDDBC;
    --light200: #BDC3A4;
    --dark100: #6F6874;
    --dark200: #494043;
    --primary: #300F1A;
    --primaryShadowStrong: #110509;
    --primaryShadowWeak: #11050977;
    --primaryShadow: #110509BB;
    --accentRed: #DA4A69;
    --accentRedTxt: #D6385A;
    --accentGreen: #5C967F;
    --accentGreenTxt: #4E7E6B;

    --shadowRadiusSmall: 2px;
    --shadowRadiusMedium: 4px;
    --shadowRadiusLarge: 8px;
}

.withinViewport .interactiveShadow
{
    filter: drop-shadow(0px 0px var(--shadowRadiusMedium) var(--primaryShadow));
}

.withinViewport .interactiveShadow.weak
{
    filter: drop-shadow(0px 0px var(--shadowRadiusMedium) var(--primaryShadowWeak));
}

.withinViewport .interactiveShadow.strong
{
    filter: drop-shadow(0px 0px var(--shadowRadiusMedium) var(--primaryShadowStrong));
}

.withinViewport .interactiveShadow.small
{
    filter: drop-shadow(0px 0px var(--shadowRadiusSmall) var(--primaryShadow));
}

.withinViewport .interactiveShadow.small.weak
{
    filter: drop-shadow(0px 0px var(--shadowRadiusSmall) var(--primaryShadowWeak));
}

.withinViewport .interactiveShadow.small.strong
{
    filter: drop-shadow(0px 0px var(--shadowRadiusSmall) var(--primaryShadowStrong));
}

.withinViewport .interactiveShadow.large
{
    filter: drop-shadow(0px 0px var(--shadowRadiusLarge) var(--primaryShadow));
}

.withinViewport .interactiveShadow.large.weak
{
    filter: drop-shadow(0px 0px var(--shadowRadiusLarge) var(--primaryShadowWeak));
}

.withinViewport .interactiveShadow.large.strong
{
    filter: drop-shadow(0px 0px var(--shadowRadiusLarge) var(--primaryShadowStrong));
}

html, body {
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html
{
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: none;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    scrollbar-color: var(--dark200) var(--white200);
}

html::-webkit-scrollbar 
{
    width: 12px;
}

html::-webkit-scrollbar-track 
{
    background: var(--dark200);
}

html::-webkit-scrollbar-thumb 
{
    background: var(--white200);
}

body
{
    position: relative;
    background-color: var(--white200);
    --stopmotionDuration: 2.5s;
}

button
{
    appearance: none;
    border: none;
    background-color: unset;
    margin: unset;
    padding-block: unset;
    padding-inline: unset;
}

.no-scroll 
{
    overflow: hidden;
}

.withBg
{
    position: absolute;
    z-index: -1;
    inset: 0;
    background-image: url(../images/papermobile.webp?v=2);
	background-color: var(--white200);
	background-position: center top;
	background-size: 100% auto;
	background-repeat: repeat-y;
}

h2 
{
    font-family: mrdodo;
    font-weight: 100;
    letter-spacing: -0.42rem;
    text-transform: uppercase;
    font-size: 6rem;
    color: var(--white200);
    background-image: url(../images/headings/medium_single1.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-block: unset;
    margin-inline: unset;
    padding: 1.25rem 4rem;
    display: inline-block;
    white-space: nowrap;
}

p,
li
{
    font-family: 'Neucha';
    letter-spacing: 0.04rem;
    line-height: 1.14;
    font-size: 1rem;
    font-weight: 100;
    color: var(--dark200);
}

li.one
{
    list-style-image: url('../images/bulletpt1.svg');
}

li.two
{
    list-style-image: url('../images/bulletpt2.svg');
}

li.three
{
    list-style-image: url('../images/bulletpt3.svg');
}

li.four
{
    list-style-image: url('../images/bulletpt4.svg');
}

strong,
h5
{
    font-family: 'mrdodo';
    font-weight: 300;
    font-size: 1.025rem;
    letter-spacing: -0.05rem;
    line-height: 1;
}

figure
{
    margin: 0;
}

input.dialogue,
.dialogue label.primary,
.dialogue label.secondary
{
    cursor: pointer;
}

div.dialogue.pane
{
    background: var(--white100);
    padding: 3.5rem 4.5rem 10.5rem 4.5rem;
    display: inline-block;
    width: 40rem;
    perspective: 50px;
    perspective-origin: center;
    position: relative;
    z-index: 1;
}

.withinViewport .stopmotion .frame 
{
    opacity: 0;
    animation-name: StopMotion;
    animation-timing-function: linear;
    animation-duration: var(--stopmotionDuration);
    animation-iteration-count: infinite;
}

.stopmotion .frame.one
{
    animation-delay: 0s;
}

.stopmotion .frame.two
{
    animation-delay: calc(var(--stopmotionDuration) / 5);
}

.stopmotion .frame.three
{
    animation-delay: calc(2 * var(--stopmotionDuration) / 5);
}

.stopmotion .frame.four
{
    animation-delay: calc(3 * var(--stopmotionDuration) / 5);
}

.stopmotion .frame.five
{
    animation-delay: calc(4 * var(--stopmotionDuration) / 5);
}

div.dialogue header
{
    font-family: 'mrdodo';
    color: var(--dark200);
    font-weight: 400;
    font-size: 2.5rem;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

div.dialogue div.outerMask,
div.dialogue div.innerMask
{
    position: absolute;
}

.withinViewport div.dialogue div.outerMask,
.withinViewport div.dialogue div.innerMask
{
    mask-image: url(../images/brush_swipe_mask_large.svg?v2);
    mask-size: 420% 100%;
    mask-repeat: no-repeat;
    transition-property: transform;
    transition-duration: 0.5s;
    transition-timing-function: cubic-bezier(0, 0, 0, 1);
    transition-delay: 0s;
}

div.dialogue.root div.outerMask.redo
{
    visibility: hidden;
}

input.choice.one.primary:checked ~ input.redo:checked ~ div.dialogue.root.one div.outerMask.primary,
input.choice:not(.one.primary):checked ~ input.redo:checked ~ div.dialogue.root.one div.outerMask.secondary
{
    visibility: hidden;
}

input.choice.one.primary:checked ~ input.redo:checked ~ div.dialogue.root.one div.outerMask.primary.redo,
input.choice:not(.one.primary):checked ~ input.redo:checked ~ div.dialogue.root.one div.outerMask.secondary.redo
{
    visibility: visible;
}

.withinViewport div.dialogue div.outerMask.close,
.withinViewport div.dialogue .close div.innerMask
{
    mask-image: url(../images/brush_swipe_mask.svg?v2);
}

div.dialogue div.outerMask
{
    mask-position: calc(130% - var(--v) * 60%) 0;
}

div.dialogue div.outerMask.primary
{
    --v: calc(min(var(--active) * 1.25, 1.0));
}

div.dialogue div.outerMask.secondary
{
    --v: calc(max(var(--active) * 1.25 - 0.25, 0.0));
}

div.dialogue div.innerMask
{
    position: relative;
    inset: 0;
    display: inline-block;;
}

.withinViewport div.dialogue div.innerMask
{
    mask-position: calc(130% - var(--v) * 45%) calc(50% - var(--v) * 5%);
    mask-size: 420% calc(100% * (1 + 11 * var(--v)))
}

div.dialogue div.outerMask.close,
div.dialogue div.outerMask.close div.innerMask
{
    mask: none;
}

input.redo:checked ~ div.dialogue.root div.outerMask.close,
input.choice:checked ~ div.dialogue.root div.outerMask.close
{
    display: none;
}

div.dialogue div.outerMask.close label 
{
    padding: 1rem 2rem 2rem 2rem;
}

div.dialogue.pane div.outerMask .shadow svg path,
div.dialogue.pane div.outerMask .shadow svg rect
{
    fill: var(--primary);
}

div.dialogue div.outerMask svg.bg
{
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
}

div.dialogue.pane div.outerMask label .shadow svg
{
    position: relative;
    inset: 0;
    left: 0.25rem;
    height: 100%;
    width: auto;
    top: 0.25rem;
}

div.dialogue.pane div.outerMask svg.bg path
{
    fill: var(--dark200);
    transition-property: fill;
    transition-duration: 1s;
}

div.dialogue.pane div.outerMask.close svg.bg path
{
    fill: none;
}

div.dialogue.root input:invalid ~ div.outerMask:not(.close):not(.redo) svg.bg path
{
    fill: var(--dark100);
}

div.dialogue div.outerMask label .icon
{
    position: absolute;
    height: 5rem;
    width: auto;
    inset: 0;
    opacity: 1;
    transition-property: opacity;
    transition-duration: 1s;
}

div.dialogue div.outerMask.close label .icon
{
    height: 4rem;
}

div.dialogue.root div.outerMask:not(.close) label .icon.fg path,
div.dialogue.root div.outerMask:not(.close) label .icon.fg rect
{
    transition-property: fill;
    transition-duration: 1s;
}

div.dialogue.root input:invalid ~ div.outerMask:not(.close) label .icon.fg path,
div.dialogue.root input:invalid ~ div.outerMask:not(.close) label .icon.fg rect
{
    fill: var(--white200);
}

div.dialogue.root input:invalid ~ div.outerMask:not(.close):not(.redo) label .icon.shadow
{
    opacity: 0;
}

div.dialogue div.outerMask label .icon.fg 
{
    position: relative;
}

div.dialogue div.outerMask label.close .icon.fg path
{
    fill: var(--dark100);
}

div.dialogue div.outerMask label.close .icon 
{
    left: unset;
}

div.dialogue div.outerMask label
{
    position: relative;
    inset: 0;
    transform-style: preserve-3d;
    display: inline-block;
    transition-property: opacity;
    transition-duration: 1s;
    padding: 1rem 3rem 1.5rem 3rem;
}

div.dialogue div.outerMask label p
{
    font-family: 'mrdodo';
    color: var(--white200);
    text-transform: uppercase;
    font-size: 2.5rem;
    line-height: 2.5rem;
    font-weight: 200;
    display: inline-block;
    text-align: left;
    margin: 0;
}

div.dialogue div.outerMask label div.iconGrouping
{
    position: relative;
    display: inline-block;
    margin-left: 1rem;
}

div.dialogue.two div.outerMask.secondary label div.iconGrouping
{
    margin-left: 0rem;
}

div.dialogue.root input:invalid ~ div.outerMask:not(.close):not(.redo) label
{
    opacity: 0.5;
}

div.dialogue input.field
{
    width: 100%;
    padding: 0.75rem;
    border-width: 2px;
    border-color: var(--primary);
    color: var(--dark200);
    border-style: solid;
    font-family: 'Neucha';
    font-size: 1.25rem;
    transform: translate3d(0, 0, 0);
    letter-spacing: 0.04rem;
    transition-property: transform, border-color;
    transition-duration: 0.5s;
    transition-timing-function: cubic-bezier(0, 0, 0, 1);
    margin: 0 0 0.25rem 0;
}

div.dialogue input.forename,
div.dialogue input.surname
{
    width: 49%;
    margin: 0 0 1rem 0px;
}

div.dialogue input.forename
{
    margin: 0 2% 1rem 0px;
}

div.dialogue input.field:focus
{
    transform: translate3d(0, 0, 2px);
    border-color: var(--accentGreen);
    outline: unset;
}

div.dialogue input.email:not(:placeholder-shown):invalid:not(:focus)
{
    color: var(--accentRed);
    border-color: var(--accentRed);
}

div.dialogue p.error
{
    color: var(--accentRedTxt);
    margin: 0 1rem;
    opacity: 1;
    transition-duration: 0.25s;
    transition-property: opacity;
}

div.dialogue p.error a
{
    color: var(--accentRedTxt);
}

div.dialogue input.email:not(:invalid) ~ p.error,
div.dialogue input.email:placeholder-shown ~ p.error,
div.dialogue input.email:focus ~ p.error
{
    opacity: 0;
}

input.choice:checked ~ input.redo.one:not(:checked) ~ div.dialogue.root.one input.field,
input.choice:not(.one.primary):checked ~ div.dialogue.root.one input.field
{
    pointer-events: none;
    border-color: white;
}

div.dialogue.root
{
    --active: 0;
    --timing: 0;
    --t: calc(sin(var(--timing)) * 0.5 + 0.5);
    display: inline-block;
    position: absolute;
    transform-style: preserve-3d;
    z-index: 3;
    visibility: hidden;
    transition-property: --active, visibility;
    transition-duration: 1s, 0s;
    transition-delay: 0s, 1s;
    transition-timing-function: ease-out;
    pointer-events: none;
}

div.dialogue.root .pane
{
    pointer-events: auto;
}

input.open:checked ~ div.dialogue.root.certificateDownload.one,
input.one.secondary:checked ~ div.dialogue.root.certificateDownload.two
{
    --active: 1;
    visibility: visible;
    transition-delay: 0s, 0s;
}

input.redo.one:checked ~ div.dialogue.root.certificateDownload.one
{
    --active: 1;
    transition-delay: 0s;
}

input.close:not(:checked) ~ div.dialogue.root
{
    animation: clock 4s linear infinite;
}

div.dialogue.root div.shadow.outer
{
    inset: 0;
    position: absolute;
    perspective: 500px;
    perspective-origin: -50vh -50vh;
}

div.dialogue.root div.shadow div.pane
{
    width: 100%;
    height: 100%;
    background-color: var(--primary);
    opacity: calc(var(--active) * 0.65);
}

input.choice:checked ~ div.dialogue.root.one div.shadow div.pane,
input.two:checked ~ div.dialogue.root.two div.shadow div.pane
{
    opacity: 0.85;
}

div.dialogue.root div.pane
{
    transform: translate3d(50%, 50%, 10px) rotate3d(-0.25, 1, 0, 7deg) translate(-50%, -50%);
}

div.dialogue.root div.dialogue.pane
{
    backface-visibility: hidden;
}

input.dialogue
{
    position: absolute;
    z-index: 4;
}

div.dialogue.root div.outerMask.primary
{
    left: -3rem;
    bottom: 2rem;
    transform: rotate3d(1, 1, 0, 1.25deg);
}

div.dialogue.root div.outerMask.secondary
{    
    right: -5rem;
    bottom: 2rem;
    transform: rotate3d(-0.25, 0.25, -1, -1.5deg);
}

div.dialogue div.outerMask label.close .icon.fg 
{
    position: relative;
}

div.dialogue.root div.outerMask.close
{    
    top: 1rem;
    right: 0rem;
    transform: rotate3d(-1, 1, 0, 1deg);
}

.dialogue a
{
    font-family: 'mrdodo';
    letter-spacing: -0.02rem;
    font-weight: 300;
    color: var(--primary);
}

.dialogue a:hover
{
    color: var(--accentGreenTxt);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus
{
    -webkit-text-fill-color: inherit;     /* keep your normal text color */
    caret-color: inherit;
    -webkit-box-shadow: 0 0 0 1000px var(--white200) inset; /* force background */
    box-shadow: 0 0 0 1000px var(--white200) inset;
}

div.dialogue.root div.stamp
{
    position: absolute;
    display: inline-block;
    visibility: hidden;
}

div.dialogue.root div.stamp p
{    
    font-family: 'mrdodo';
    color: var(--accentGreen);
    text-transform: uppercase;
    font-weight: 300;
    width: 11rem;
    word-break: break-all;
    text-align: center;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
    margin: 0;
    display: inline-block;
    height: fit-content;
    position: absolute;
    visibility: hidden;
}

input.choice:checked ~ input.redo:not(:checked) ~ div.dialogue.root.one div.stamp,
input.two:checked ~ div.dialogue.root.two div.stamp
{
    visibility: visible;
}

input.primary.one:checked ~ input.redo:not(:checked) ~ div.dialogue.root.one div.stamp p.primary,
input.primary.two:checked ~ div.dialogue.root.two div.stamp p.primary
{
    visibility: visible;
}

input.primary.one:checked ~ div.dialogue.root.one div.stamp svg path,
input.primary.two:checked ~ div.dialogue.root.two div.stamp svg path
{
    fill: var(--accentRed);
}

input.secondary.one:checked ~ input.redo:not(:checked) ~ div.dialogue.root.one div.stamp p.secondary,
input.two:checked ~ input.redo:not(:checked) ~ div.dialogue.root.one div.stamp p.secondary,
input.secondary.two:checked ~ div.dialogue.root.two div.stamp p.secondary
{
    visibility: visible;
}

input.secondary.one:checked ~ div.dialogue.root.one div.stamp svg path,
input.two:checked ~ div.dialogue.root.one div.stamp svg path,
input.secondary.two:checked ~ div.dialogue.root.two div.stamp svg path
{
    fill: var(--accentGreen);
}

div.dialogue.root div.stamp svg
{   
    width: 15rem;
    height: auto;
}

input.dialogue.open:checked,
input.dialogue.redo:checked
{
    visibility: hidden;
    pointer-events: none;
}

label.disabled
{
    pointer-events: none;
    cursor: default;
}

.centerConstrained
{
    max-width: 124rem;
    margin: 0 auto;
    padding: 0 2rem;
}

div#menu
{
    position: fixed;
    visibility: hidden;
    flex-direction: row;
    display: flex;
    background-color: var(--white100);
    z-index: 99;
    width: 90%;
    right: 50%;
    bottom: 50%;
    max-width: 112rem;
    min-width: 95rem;
    transform: translate(calc(105vw + 50%), calc(50% + 50vh)) rotate(125deg);
    transition-property: transform, visibility;
    transition-duration: 0.35s, 0s;
    transition-delay: 0s, 0.35s;
    transition-timing-function: ease-in;
}

label#menuLabel div.innerMask
{
    padding: 0 6.15rem 0.75rem 6.5rem;
}

input#menuButton:checked ~ label#menuLabel div.innerMask
{
    padding: 0 6.15rem 0.75rem 5.5rem;
}

label#menuLabel h2
{
    font-family: 'mrdodo';
    background: unset;
    padding: unset;
    font-weight: 400;
    font-size: 4rem;
    letter-spacing: unset;
    color: var(--white200);
    position: relative;
    transition-property: color;
    transition-duration: 0.25s;
    transition-timing-function: ease-out;
}

label#menuLabel h2.alt,
input#menuButton:checked ~ label#menuLabel h2
{
    display: none;
}

input#menuButton:checked ~ label#menuLabel h2.alt
{
    display: inline-block;
}

input#menuButton:checked ~ label#menuLabel h2
{
    color: var(--white100);
}

label#menuLabel svg.bg
{
    position: absolute;
    inset: 0;
    width: auto;
    height: 100%;
}

svg.icon.alt,
input#menuButton:checked ~ svg.icon,
input#menuButton:checked ~ label#menuLabel svg.icon
{
    display: none;
}

input#menuButton:checked ~ label#menuLabel svg.icon.alt
{
    display: block;
}

label#menuLabel svg.alt path
{
    fill: var(--accentRed);
}

input#menuButton:checked ~ svg.icon.alt
{
    display: block;
}

label#menuLabel
{
    position: fixed;
    z-index: 100;
    padding: 0.75rem 0 0 0.75rem;
    cursor: pointer;
    width: 7.5rem;
}

input#menuButton:checked
{
    width: 100%;
    height: 100%;
    display: block;
    position: fixed;
    z-index: 99;
    cursor: pointer;
}

label#menuLabel div.outerMask,
label#menuLabel div.outerMask div.innerMask
{
    position: relative;
    mask: url(../images/brush_swipe_mask_large.svg?v2);
    mask-size: 420% 100%;
    mask-position: 131% 0;
    mask-repeat: no-repeat;
    display: inline-block;
    pointer-events: none;
}

svg.menu.icon
{
    position: fixed;
    left: 1.825rem;
    top: 1.825rem;
    height: 3.5rem;
    width: auto;
    z-index: 99;
}

input#menuButton
{
    appearance: none;
    display: none;
}

input#menuButton:checked ~ div#menu
{    
    visibility: visible;
    transform: translate(50%, 50%) rotate(0.75deg);
    transition-property: transform;
    transition-duration: 0.5s;
    transition-delay: 0s;
    transition-timing-function: cubic-bezier(0, 0.75, 0, 1);
}

div#menu .page
{
    flex: 1 1 0;
    display: grid;
    min-width: 0;
    grid-template-rows: auto auto auto auto auto auto auto auto auto auto;
    grid-template-columns: 1fr 1fr;
    min-width: 0;
    padding: 4rem 4rem 5rem 4rem;
    column-gap: 6rem;
}

div#menu .page h3.studies
{
    font-family: 'mrdodo';
    font-weight: 300;
    font-size: 3.25rem;
    letter-spacing: -0.1rem;
    text-transform: uppercase;
    color: var(--dark200);
    margin: 2rem auto 1.25rem auto;
    background: unset;
    padding: unset;
    line-height: unset;
}

div#menu .page .entry
{
    min-width: 0;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    align-items: baseline;
    text-decoration: none;
}

div#menu .page .entry.main
{
    background-image: url(../images/menu/menu_main.svg?v=7);
    background-size: 100% 100%;
    padding: 2rem;
    margin: 0 -2rem 0.5rem -2rem;
}

div#menu .page .entry h3
{
    flex: 0 0 auto;
    margin: 0 0;
    font-family: 'mrdodo';
    font-weight: 200;
    font-size: 1.75rem;
    color: var(--dark200);
    letter-spacing: -0.025rem;
    text-transform: uppercase;
    padding: 0;
    background: unset;
    white-space: unset;
    align-self: unset;
}

div#menu .page .entry.main h3
{
    text-transform: uppercase;
    font-weight: 400;
    font-size: 3rem;
    line-height: 3rem;
}

div#menu .page .entry span.filler
{
    font-family: 'mrdodo';
    font-size: 2rem;
    overflow: hidden;
    letter-spacing: 0.5rem;
    flex: 1 1 0;
    min-width: 0;
    display: inline-block;
    white-space: nowrap;
    color: var(--dark200);
    text-decoration: none;
}

div#menu .page .entry .button
{
    flex: 0 0 auto;
    font-family: 'mrdodo';
    font-size: 1.75rem;
    font-weight: 300;
    color: var(--white100);
    position: relative;
    text-decoration: none;
    padding: 0.35rem 0.75rem 0.35rem 0.75rem;
    transition-property: transform;
    transition-duration: 200ms;
    transition-timing-function: ease-out;
    margin-bottom: -0.5rem;
    text-transform: uppercase;
}

div#menu .page .entry .button svg
{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

div#menu .page .entry .button svg path
{
    fill: var(--primary);
    transition-property: fill;
    transition-duration: 200ms;
    transition-timing-function: linear;
}

div#menu .page .entry.inactive .button svg path
{
    fill: var(--dark100);
}

div#menu .page .entry.inactive h3,
div#menu .page .entry.inactive .filler,
div#menu .page .entry.inactive .description
{
    color: var(--dark100);
}

div#menu .page .entry .button span
{
    position: relative;
    text-decoration: none;
}

div#menu .page .entry .button span.currency
{
    margin-left: 0.2rem;
}

div#menu .page .entry .button span.priceMinor
{
    font-size: 1.4rem;
}

div#menu .page .entry p
{
    margin: 0;
    grid-row: 2;
    grid-column: 1 / 3;
    margin-right: 0.5rem;
    max-width: unset;
    flex: unset;
}

div#menu .page .entry.main p
{
    font-size: 1.1rem;
}

div#menu .page div.burger
{
    grid-row: 1 / 12;
    grid-column: 2;
    position: relative;
}

div#menu .page div.burger h3
{
    position: absolute;
    background-image: url(../images/menu/menu_burger_title.svg);
    background-size: 100% 100%;
    font-family: 'mrdodo';
    font-size: 3.5rem;
    font-weight: 300;
    text-transform: uppercase;
    color: white;
    padding: 1rem 1rem;
    margin: 0;
    width: 37rem;
    top: 50%;
    line-height: 3.5rem;
    left: calc(50%);
    transform: translate(-50%, -50%) rotate(-5deg);
    text-align: center;
}

div#menu .page div.burger div.part
{
    position: absolute;
    transform: translate(-50%, -50%);
}

div#menu .page div.burger div.part img.item
{
    height: 100%;
    width: auto;
}

div#menu .page div.burger div.part img.arrow
{
    position: absolute;
}

div#menu .page div.burger div.part p
{
    position: absolute;
    font-family: 'mrdodo';
    font-size: 1.5rem;
    font-weight: 200;
    margin: 0;
}

div#menu .page div.burger div.part img.arrow
{
    width: 3.25rem;
}

div#menu .page div.burger div.part.lettuce
{
    left: 50%;
    top: calc(50% + 14.5rem);
    height: 5.5rem;
    rotate: -2deg;
}

div#menu .page div.burger div.part.lettuce p
{
    transform: translate(-1rem, -7.25rem) rotate(2deg);
}

div#menu .page div.burger div.part.lettuce img.arrow
{
    transform: translate(-13rem, -1.25rem) rotate(98deg);
}

div#menu .page div.burger div.part.bun.top
{
    left: 50%;
    top: calc(50% - 25rem);
    height: 7rem;
    rotate: 1deg;
}

div#menu .page div.burger div.part.bun.bottom
{
    left: 50%;
    top: calc(50% + 21.75rem);
    height: 7rem;
}

div#menu .page div.burger div.part.bun.bottom p
{
    transform: translate(-7rem, -2rem) rotate(6deg);
    width: 13rem;
    text-align: left;
    text-align-last: right;
}

div#menu .page div.burger div.part.bun.bottom img.arrow
{
    transform: translate(-19.5rem, 3.75rem) rotate(198deg);
}

div#menu .page div.burger div.part.bun.bottom img.item
{
    transform: rotate(177deg);
}

div#menu .page div.burger div.part.chilli
{
    left: calc(50% - 9rem);
    top: calc(50% - 17.75rem);
    height: 4.25rem;
}

div#menu .page div.burger div.part.chilli img.arrow
{
    transform: translate(-10rem, -0.5rem) rotate(-33deg) scale(-0.75, 0.75);
}

div#menu .page div.burger div.part.chilli p
{
    transform: translate(-4.5rem, -5.75rem) rotate(-3deg);
    width: 21rem;
}

div#menu .page div.burger div.part.cheese
{
    left: 50%;
    top: calc(50% - 16rem);
    rotate: -5deg;
    height: 4rem;
}

div#menu .page div.burger div.part.cheese img.arrow
{
    transform: translate(-15.5rem, -3.5rem) rotate(29deg);
}

div#menu .page div.burger div.part.cheese p
{
    transform: translate(17rem, -7.5rem) rotate(6deg);
    width: 16rem;
    text-align: right;
}

div#menu .page div.burger div.part.patty
{
    left: calc(50% + 0.5rem);
    top: calc(50% - 12.5rem);
    rotate: -5deg;
    height: 5.75rem;
}

div#menu .page div.burger div.part.patty img.arrow
{
    transform: translate(-20rem, 2.5rem) rotate(-85deg);
}

div#menu .page div.burger div.part.patty p
{    
    width: 17rem;
    text-align: right;
    transform: translate(10rem, 0rem);
}

div#menu .page div.burger div.part.sauce
{
    left: 50%;
    top: calc(50% + 9.25rem);
    height: 4.5rem;
    rotate: 3deg;
}

div#menu .page div.burger div.part.sauce p
{
    transform: translate(14rem, -8rem) rotate(-8deg);
    width: 17rem;
    text-align: right;
}

div#menu .page div.burger div.part.sauce img.arrow
{
    transform: translate(-5.75rem, -2rem) rotate(27deg) scale(0.75);
}

div#menu div.sidebar
{
    background-image: url('../images/menu/menu_sidebar.svg?v=4');
    background-position: top center;
    background-size: 100% auto;
    width: 6%;
}

div#menu div.sidebar.right
{
    scale: -1 1;
}

div#menuBackground
{
    visibility: hidden;
    background-color: var(--dark200);
    opacity: 0;
    transition-property: opacity, visibility;
    transition-delay: 0s, 0.5s;
    transition-duration: 0.5s, 0s;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 99;
}

input#menuButton:checked ~ div#menuBackground
{
    opacity: 0.5;
    visibility: visible;
    transition-delay: 0s, 0s;
    transition-duration: 0.5s, 0s;
    pointer-events: none;
}©

input#menuButton:checked ~ div.rootContainer
{
    pointer-events: none;
}

footer
{
    position: relative;
    height: 15rem;
    overflow: hidden;
}

footer a
{
    position: absolute;
    width: 50rem;
    height: 30rem;
    perspective: 1000px;
    perspective-origin: 50% -100%;
}

a#privacy
{    
    left: 50%;
    transform: translateX(-100%);
}

a#imprint
{
    left: 50%;
}

a#imprint .document
{
    transform: translate3d(0, 3rem, 2px) rotate3d(0, 0, 1, 3deg);
}

a#privacy .document
{
    transform: translate3d(2rem, 3rem, 2px) rotate3d(0, 0, 0.5, -3deg);
}

footer a .document
{
    position: absolute;
    background: var(--primary);
    inset: 0;
    width: 100%;
    height: 100%;
}

footer a#privacy > .document
{
    background-color: #FAFAFA;
}

footer a > .document
{
    background: var(--white100);
}

footer a .shadowContainer
{
    position: absolute;
    perspective-origin: -30vh -30vh;
    perspective: 500px;
    inset: 0;
    opacity: 0.75;
}

footer .document.legal h2
{
    background: unset;
    color: var(--dark200);
    font-size: 4rem;
    letter-spacing: -0.25rem;
    font-weight: 400;
    margin: 4rem 4rem;
    padding: 0;
}

form textarea
{
    width: 100%;
    padding: 0.5rem;
    border-width: 2px;
    border-color: var(--primary);
    color: var(--dark200);
    border-style: solid;
    font-family: 'Neucha';
    font-size: 1.2rem;
    transform: scale(1);
    letter-spacing: 0.04rem;
    transition-property: transform, border-color;
    transition-duration: 0.5s;
    transition-timing-function: cubic-bezier(0, 0, 0, 1);
    resize: none;
}

form textarea:focus
{
    transform: scale(1.01);
    border-color: var(--accentGreen);
    outline: unset;
}

a.booking,
a.contact
{
    text-decoration: none;
    position: relative;
    height: fit-content;
    perspective-origin: center;
    perspective: 500px;
    z-index: 1;
    cursor: pointer;
    rotate: 5deg;
}

a.contact
{
    rotate: -3deg;
}

.booking .shadowPerspective,
.contact .shadowPerspective,
.booking img.background,
.contact img.background
{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.contact .envelope
{
    position: relative;
    width: 12rem;
    height: auto;
    transition-duration: 0.35s;
    transition-property: transform, opacity;
    transform: translate3d(0px, 0px, 7px) translate(-50%, -50%) rotate3d(-1, 1, 0, 0deg) translate(50%, 50%);
    transform-style: preserve-3d;
}

.contact strong
{
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    font-family: 'mrdodo';
    text-transform: uppercase;
    color: var(--primary);
    font-size: 2.75rem;
    letter-spacing: -0.1rem;
    transform: translateX(-50%);
}

.contact .fg
{
    position: absolute;
    left: 0;
    width: 12rem;
    height: auto;
    top: 0;
    transition-duration: 0.35s;
    transition-property: transform;
    transform: translateY(-50%) rotate3d(1, 0, 0, 0deg) translateY(50%);
}

.contact .envelope img
{
    width: 100%;
}

.booking .shadowPerspective,
.contact .shadowPerspective
{
    perspective-origin: -30vh -30vh;
    perspective: 800px;
    transition-duration: 0.35s;
    transition-property: opacity;
}

.booking .shadow
{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition-duration: 0.35s;
    transition-property: transform, filter;
    transform: translate3d(0px, 0px, 5px) translate(-50%, -50%) rotate3d(-1, 1, 0, 0deg) translate(50%, 50%);
    background-color: var(--primary);
}

.booking div.foreground
{
    transition-duration: 0.35s;
    transition-property: transform, filter;
    position: relative;
    background-image: url(../images/worktogether/worktogether_booking_fg.svg);
    background-size: 100% 100%;
    padding: 1.2rem 1rem;
    margin-top: 27%;
    margin-right: 2%;
    transform: translate3d(0px, 0px, 0px) translate(-50%, -50%) rotate3d(-1, 1, -0.5, 0deg) translate(50%, 50%);
}

.booking img.background
{
    transition-duration: 0.35s;
    transition-property: transform, filter;
    transform: translate3d(0px, 0px, 0px) translate(-50%, -50%) rotate3d(-1, 1, 0, 0deg) translate(50%, 50%);
}

.booking strong
{
    display: block;
    text-transform: uppercase;
    line-height: 2.5rem;
    font-size: 3rem;
    color: var(--primary);
}

.booking strong.second
{
    font-size: 3.1rem;
}

#privacyDisclaimer
{
    display: inline-block;
    position: absolute;
    top: calc(100vh - 15rem);
    left: 7.5rem;
    cursor: pointer;
    animation: fadeOut linear forwards;
    animation-timeline: scroll(root);
    animation-range: 15svh 45svh;
}

#privacyDisclaimer .background
{
    padding: 0.5rem 3.5rem 1rem 12.5rem;
    position: absolute;
    top: 0.25rem;
    left: -3.75rem;
    background-image: url('/images/worktogether/worktogether_frame_wide.svg');
    background-size: 100% 100%;
    opacity: 0;
    pointer-events: none;
    transition-property: opacity;
    transition-duration: 0.25s;
}

#privacyDisclaimer .border
{
    position: absolute;
    inset: 0.15rem 1.2rem 0rem 1.65rem;
    background-image: url('/images/worktogether/worktogether_frame3.svg');
    background-size: 100% 100%;
    pointer-events: none;
}

#privacyDisclaimer .icon
{
    position: relative;
    display: inline-block;
}

#privacyDisclaimer input
{
    display: none;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

#privacyDisclaimer .foreground
{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: translate(-4px, -4px);
    transition-property: transform;
    transition-duration: 0.1s;
}

#privacyDisclaimer p
{
    position: relative;
    width: 30rem;
    font-size: 1.25rem;
}

#privacyDisclaimer p strong
{
    font-size: 1.28rem;
}

#privacyDisclaimer a
{
    font-family: 'mrdodo';
    font-weight: 300;
    color: var(--primary);
    letter-spacing: -0.05rem;
    text-decoration: underline;
}

#privacyDisclaimer .shadow
{
    width: 7.5rem;
}

#headerContact
{
    position: absolute;
    left: 6.25rem;
    top: -0.1rem;
    transform: scale(0.5);
    animation: fadeOut linear forwards;
    animation-timeline: scroll(root);
    animation-range: 0svh 4svh;
}

#headerContact .interactiveShadow
{
    filter: drop-shadow(0px 0px 6px var(--primaryShadow));
}

@media (hover: hover) and (pointer: fine) 
{
    input#menuButton:hover ~ label#menuLabel div.outerMask,
    input#menuButton:hover ~ label#menuLabel div.outerMask div.innerMask
    {
        mask-position: 70% 0;
    }

    input#menuButton:hover ~ label#menuLabel div.outerMask div.innerMask
    {
        mask-size: 420% 1200%;
        mask-position: 87% 50%;
    }

    div#menu .page .entry.active:hover .button
    {
        transform: scale(1.15);
        transition-timing-function: cubic-bezier(0.25, 3, 0.35, 0);
        transition-duration: 250ms;
    }

    div#menu .page .entry.active:hover .button svg path
    {
        fill: var(--accentGreen);
        transition-duration: 100ms;
        transition-timing-function: ease-out;
    }

    div#menu .page .entry.active:hover h3,
    div#menu .page .entry.active:hover .filler,
    div#menu .page .entry.active:hover .description
    {
        color: var(--accentGreenTxt);
    }

    div.dialogue input.field:hover
    {
        transform: translate3d(0, 0, 2px);
    }

    input.primary.one:hover ~ div.dialogue.root.one div.outerMask.primary,
    input.primary.one:checked ~ input.redo.one:hover ~ div.dialogue.root.one div.outerMask.primary,
    input.primary.two:hover ~ div.dialogue.root.two div.outerMask.primary
    {
        transform: translate3d(0, 0, 5px) rotate3d(1, 1, 0, 2deg);
    }

    input.secondary.one:hover ~ div.dialogue.root.one div.outerMask.secondary,
    input.two:checked ~ input.redo.one:hover ~ div.dialogue.root.one div.outerMask.secondary,
    input.secondary.two:hover ~ div.dialogue.root.two div.outerMask.secondary
    {    
        transform: translate3d(0, 0, 5px) rotate3d(-0.25, 0.25, -1, -2.5deg);
    }

    input.primary.one:hover ~ div.dialogue.root.one div.outerMask.primary .icon.fg,
    input.primary.one:checked ~ input.redo.one:hover ~ div.dialogue.root.one div.outerMask.primary .icon.fg,
    input.primary.two:hover ~ div.dialogue.root.two div.outerMask.primary .icon.fg,
    input.secondary.one:hover ~ div.dialogue.root.one div.outerMask.secondary .icon.fg,
    input.two:checked ~ input.redo.one:hover ~ div.dialogue.root.one div.outerMask.secondary .icon.fg,
    input.secondary.two:hover ~ div.dialogue.root.two div.outerMask.secondary .icon.fg
    {
        left: 0.25rem;
        top: 0.25rem;
    }

    input.close:hover ~ div.dialogue.root div.outerMask.close .icon.fg
    {
        left: 0.25rem;
        top: 0.25rem;
    }
    
    footer a .document
    {
        transition-property: transform;
        transition-duration: 0.35s;
        transition-timing-function: cubic-bezier(0.25, 0, 0.25, 1);
    }
    
    footer a:hover
    {
        z-index: 1;
    }
    
    a#privacy:hover .document
    {
        transform: translate3d(0, 0rem, 82px) rotate3d(0.01, -1, 0.5, -6deg);
    }
    
    a#imprint:hover .document
    {
        transform: translate3d(0, 0, 71px) rotate3d(0, -1, 1, 5deg);
    }

    .contact:hover .envelope
    {
        transform: translate3d(0px, 0px, 84px) translate(-50%, -50%) rotate3d(-1, 1, 0, -16deg) translate(50%, 50%);
    }

    .contact:hover .shadowPerspective .envelope
    {
        opacity: 0.75;
    }

    .contact:hover .fg
    {
        transform: translateY(-50%) rotate3d(1, 0, 0, 55deg) translateY(50%);
    }

    .booking:hover img.background
    {
        filter: brightness(0.975);
        transform: translate3d(0px, 0px, 84px) translate(-50%, -50%) rotate3d(-1, 1, 0, 10deg) translate(50%, 50%);
    }

    .booking:hover div.foreground
    {
        filter: brightness(1.05);
        transform: translate3d(0px, 0px, 70px) translate(-50%, -50%) rotate3d(-1, 1, -0.5, -27deg) translate(50%, 50%);
    }

    .booking:hover .shadow.bg
    {
        transform: translate3d(0px, 0px, 84px) translate(-50%, -50%) rotate3d(-1, 1, 0, 10deg) translate(50%, 50%);
    }

    .booking:hover .shadow.fg
    {
        transform: translate3d(0px, 0px, 70px) translate(-50%, -50%) rotate3d(-1, 1, -0.5, -27deg) translate(50%, 50%);
    }

    .booking:hover .shadowPerspective
    {
        perspective-origin: -30vh -30vh;
        perspective: 800px;
        opacity: 0.75;
    }

    label#menuLabel div.outerMask,
    label#menuLabel div.outerMask div.innerMask
    {
        transition-duration: 3500ms;
        transition-timing-function: cubic-bezier(0, 0.5, 0, 1);
        transition-property: mask-position, mask-size;
    }

    #privacyDisclaimer a:hover
    {
        color: var(--accentGreenTxt);
    }

    #privacyDisclaimer:hover .foreground
    {
        transform: translate(0px, 0px);
    }

    #privacyDisclaimer:hover .background
    {
        opacity: 1;
        pointer-events: auto;
        cursor: auto;
    }
}

@media (hover: none), (pointer: coarse), (pointer: none) 
{
    #privacyDisclaimer input
    {
        display: inline-block;
        position: absolute;
        z-index: 2;
    }

    #privacyDisclaimer .icon
    {
        pointer-events: none;
    }

    #privacyDisclaimer input:checked ~ .icon .foreground
    {
        transform: translate(0px, 0px);
    }

    #privacyDisclaimer input:checked ~ .background
    {
        opacity: 1;
        pointer-events: auto;
        cursor: auto;
    }
}

@media (min-height: 640px) and (min-width: 640px)
{
    .withBg 
    {
        background-image: url(../images/paperultra.webp?v=10);
    }
}

@media (max-height: 1080px) and (min-width: 640px), (max-width: 1600px) and (min-width: 640px)
{
    h2
    {
        font-size: 4.5rem;
        padding: 0.95rem 3rem;
    }

    footer
    {
        height: 12rem;
    }

    footer a
    {
        width: 40rem;
        height: 24rem;
    }

    footer .document.legal h2
    {
        font-size: 3.2rem;
        letter-spacing: -0.2rem;
        margin: 3.2rem 3.2rem;
    }

    p
    {
        margin-block-start: 0.5em;
        margin-block-end: 0.75em;
    }

    h3
    {
        margin-block-start: 0.5em;
        margin-block-end: 0.75em;
    }
}

@media (max-width: 1024px) and (min-width: 640px)
{
    footer
    {
        height: 21rem;
    }

    a#privacy
    {            
        left: 95%;
        top: 8rem;
    }
}

@media (max-width: 1360px) and (min-width: 1025px) 
{
    footer
    {
        height: 15rem;
    }

    a#privacy
    {    
        left: 63%;
        top: unset;
    }

    a#imprint
    {
        left: 63%;
    }
}

@media (max-height: 1080px) and (min-width: 640px), (max-width: 1360px) and (min-width: 640px)
{
    div#menu .page h3.studies
    {
        font-size: 2.5rem;
        letter-spacing: -0.065rem;
        margin: 1.25rem auto 0.4rem auto;
    }

    div#menu .page .entry.main h3
    {
        font-size: 2.25rem;
        line-height: 2.25rem;
    }
    
    div#menu .page .entry.main p
    {
        font-size: 1rem;
    }

    div#menu .page .entry.main
    {
        padding: 1.5rem 2rem;
        margin: 0 -2rem 0.5rem -2rem;
    }

    div#menu .page .entry h3,
    div#menu .page .entry span.filler,
    div#menu .page .entry .button
    {
        font-size: 1.5rem;
    }

    div#menu .page .entry .button span.priceMinor
    {
        font-size: 1.2rem;
    }

    div#menu .page .entry .button
    {
        padding: 0.25rem 0.6rem 0.25rem 0.6rem;
    }

    div#menu .page .entry p
    {
        font-size: 0.87rem;
    }
    
    div#menu .page div.burger
    {
        scale: 0.85;
    }

    label#menuLabel
    {
        padding: 0.6rem 0 0 0.6rem;
        width: 5rem;
    }

    svg.menu.icon
    {
        left: 1.375rem;
        top: 1.375rem;
        height: 2.75rem;
    }

    label#menuLabel h2
    {
        font-size: 3rem;
    }

    label#menuLabel div.innerMask
    {
        padding: 0 4.5rem 0.55rem 5rem;
    }

    input#menuButton:checked ~ label#menuLabel div.innerMask
    {
        padding: 0 4.5rem 0.55rem 4rem;
    }

    #privacyDisclaimer
    {
        left: 6rem;
        top: calc(100vh - 11rem);
    }

    #privacyDisclaimer .background
    {
        padding: 1rem 3rem 1rem 10rem;
        top: 0.2rem;
        left: -3rem;
    }

    #privacyDisclaimer .border
    {
        inset: 0.15rem 1.2rem 0rem 1.65rem;
    }

    #privacyDisclaimer .foreground
    {
        transform: translate(-3px, -3px);
    }

    #privacyDisclaimer p
    {
        width: 25rem;
        font-size: 1rem;
    }

    #privacyDisclaimer p strong
    {
        font-size: 1.025rem;
    }

    #privacyDisclaimer a
    {
        letter-spacing: -0.035rem;
    }

    #privacyDisclaimer .shadow
    {
        width: 6rem;
    }

    #headerContact
    {
        left: 3rem;
        top: -0.85rem;
        transform: scale(0.4);
    }
}

@media (max-height: 800px) and (min-width: 640px)
{
    div#menu
    {
        max-width: 85rem;
        min-width: 0;
    }

    div#menu .page
    {
        grid-template-rows: auto auto auto auto auto;
        align-items: end;
        column-gap: 4rem;
        padding: 2% 2%;
        margin: 3% 3% 4% 3%;
    }

    div#menu .page div.burger
    {
        display: none;
    }

    div#menu .page .entry.main
    {
        grid-column: 1;
        grid-row: 1 / 3;
        padding: 0 -1.5rem 0.5rem -1.5rem;
    }

    div#menu .page h3.studies
    {
        grid-row: 3;
        grid-column: 1;
    }
}

@media (max-width: 1360px) and (min-width: 640px) and (min-height: 800px)
{
    div#menu
    {
        right: calc(5% - 2rem);
    }
}

@media (max-width: 640px), (max-height: 800px) and (max-width: 1360px)
{
    :root
    {
        --shadowRadiusSmall: 1px;
        --shadowRadiusMedium: 2px;
        --shadowRadiusLarge: 4px;
    }

    strong, h5
    {
        font-size: 0.89rem;
        letter-spacing: -0.045rem;
    }

    p, li
    {
        font-size: 0.87rem;
    }

    h2 
    {   
        margin-left: 1rem;
        font-size: 3.5rem;
        letter-spacing: -0.235rem;
        padding: 1.25rem 2rem;
        line-height: 1;
    }

    label#menuLabel
    {        
        right: 0;
        width: 4.5rem;
        height: 4.5rem;
        padding: unset;
    }

    label#menuLabel div.outerMask
    {
        pointer-events: none;
    }

    svg.menu.icon
    {        
        right: 0.875rem;
        left: unset;
        height: 2.75rem;
        top: 1.375rem;
    }

    div#menu
    {
        transform: translate(calc(105vw + 50%), calc(50% + 10vh)) rotate(35deg);
        width: calc(100% + 1rem);
        min-width: unset;
        max-width: unset;
    }

    div#menu div.sidebar
    {
        min-width: 2.75rem;
        width: 10%;
    }

    div#menu div.sidebar.right
    {
        display: none;
    }

    div#menu .page
    {
        display: flex;
        flex-direction: column;
        padding: 3rem 1rem 3rem 2rem;
        row-gap: 1rem;
    }

    div#menu div.burger
    {
        display: none;
    }

    div#menu .page h3.studies
    {
        font-size: 1.75rem;
        letter-spacing: -0.05rem;
        margin: 0.5rem auto 0rem auto;
    }

    div#menu .page .entry span.filler,
    div#menu .page .entry h3,
    div#menu .page .entry .button
    {
        font-size: 1.25rem;
    }

    div#menu .page .entry .button span.priceMinor
    {
        font-size: 1rem;
    }

    div#menu .page .entry .button
    {
        padding: 0.2rem 0.6rem 0.4rem 0.6rem;
        margin-bottom: -0.5rem;
        font-weight: 200;
    }

    div#menu .page .entry .button svg
    {
        scale: -1 1;
    }

    div#menu .page .entry p
    {
        margin: 0;
        grid-column: 1 / 3;
        font-size: 0.9rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1;
        display: none;
    }

    div#menu .page .entry.main h3
    {
        font-size: 1.75rem;
        line-height: 1.75rem;
    }

    div#menu .page .entry.main 
    {
        background: none;
        margin: 0;
        padding: 0 0 1.25rem 0;
        border-style: double;
        border-width: 0 0 6px 0;
        border-color: var(--accentRed);
    }

    div#menu .page .entry.main p
    {
        font-size: 0.95rem;
        -webkit-line-clamp: 3;
    }

    div.dialogue header
    {
        font-size: 3.5rem;
        line-height: 1;
    }

    div.dialogue.pane
    {
        width: 35rem;
    }

    div.dialogue.pane p,
    div.dialogue.pane strong
    {
        font-size: 1.25rem;
        margin-top: 0.2rem;
    }

    div.dialogue.root div.outerMask.close
    {
        top: 2rem;
        right: 4rem;
    }

    div.dialogue.root div.outerMask.primary
    {
        left: -3rem;
        bottom: 3.5rem;
        transform: rotate3d(1, 0.5, 0, 2.5deg);
    }

    div.dialogue.root div.outerMask.secondary
    {    
        left: -3rem;
        bottom: -4rem;
        transform: rotate3d(1, 0.5, 0, 2.5deg)
    }

    div.dialogue div.outerMask label
    {
        padding: 0.65rem 4rem 1.4rem 12rem;
    }

    div.dialogue div.outerMask label p
    {
        font-size: 2.75rem;
    }

    a#imprint
    {
        left: 31%;
        top: 1rem;
    }

    a#imprint .document
    {
        transform: translate3d(0, 0rem, 19px) rotate3d(0, -1, 1, 5deg);
    }

    a#privacy
    {
        left: -2rem;
        transform: unset;
        top: 6rem;
    }

    a#privacy .document
    {
        transform: translate3d(0, 0rem, 47px) rotate3d(0.01, -1, 1, 15deg);
    }

    footer a
    {
        width: 30rem;
        height: 20rem;   
    }

    footer .document.legal h2
    {
        font-size: 2.4rem;
        letter-spacing: -0.15rem;
        margin: 2.4rem;
    }

    footer a .shadowContainer
    {
        perspective-origin: -10rem -10rem;
    }

    #privacyDisclaimer
    {
        left: 2rem;
        top: calc(100svh - 7.5rem);
    }

    #privacyDisclaimer .background
    {
        padding: 0rem 2.25rem 0rem 7.5rem;
        top: -1.25rem;
        left: -2.25rem;
        background-image: url('/images/worktogether/worktogether_frame_bg2.svg');
        max-width: calc(100vw - 9.5rem);
        overflow: hidden;
    }

    #privacyDisclaimer .border
    {
        background-image: url('/images/worktogether/worktogether_frame5.svg');
        inset: 0.15rem 0.85rem 0rem 1rem;
    }

    #privacyDisclaimer .foreground
    {
        transform: translate(-3px, -3px);
    }

    #privacyDisclaimer p
    {
        width: 14rem;
        font-size: 0.87rem;
    }

    #privacyDisclaimer p strong
    {
        font-size: 0.89rem;
        letter-spacing: -0.045rem;
    }

    #privacyDisclaimer a
    {
        font-size: 0.89rem;
        letter-spacing: -0.045rem;
    }

    #privacyDisclaimer .shadow
    {
        width: 4.5rem;
    }

    #headerContact
    {
        left: -0.5rem;
        top: 0rem;
        transform: scale(0.5);
    }
}

@media (max-width: 640px)
{
    .stopmotion .frame
    {
        animation: none !important;
    }

    .stopmotion .frame.one
    {
        opacity: 1;;
    }
}

@media (max-width: 640px) and (max-height: 800px)
{
    label#menuLabel
    {        
        right: unset;
        height: 4.5rem;
        width: 4.5rem;
        padding: unset;
    }

    div#menu .page
    {
        padding: 3rem 1.5rem 3rem 1rem;
    }

    svg.menu.icon
    {        
        right: unset;
        left: 0.875rem;
    }

    #headerContact
    {
        left: 3.25rem;
        top: -0.25rem;
        transform: scale(0.5);
    }
}

@media (max-height: 1080px), (max-width: 1600px)
{
    .contact .envelope,
    .contact .fg
    {
        width: 10rem;
    }

    .contact strong
    {
        bottom: 1.25rem;
        font-size: 2.25rem;
        letter-spacing: -0.08rem;
    }

    .booking div.foreground
    {
        padding: 1rem 0.85rem;   
    }

    .booking strong
    {
        font-size: 2.5rem;
        line-height: 2.1rem;
    }

    .booking strong.second
    {
        font-size: 2.58rem;
        line-height: 2.1rem;
    }

}