html
{
	scroll-behavior: smooth;
}

.collage
{
	flex: 0 0 auto;
    position: relative;
}

.withinViewport .burnin
{
	mix-blend-mode: color-burn;
}

.withinViewport .sketch
{
	mix-blend-mode: darken;
}

.withinViewport .stamp
{
	mix-blend-mode: multiply;
	opacity: 0.5;
}

.left
{
	justify-content: start;
}

.right
{
	justify-content: end;
}

.backdrop
{
	position: absolute;
	inset: 0;
    z-index: -1;
}

.challenges .framed .foreground
{
	width: 40rem;
}

.talkinghead
{
	position: relative;
    perspective: 1000px;
    perspective-origin: 50% 50%;
    width: fit-content;
    margin: 0rem -3rem 0 auto;
	cursor: pointer;
}

.talkinghead .bubble
{
	opacity: 0;
	position: absolute;
    width: 20rem;
    transform: translate(0%, -100%) scale(0.5);
    right: 5rem;
    top: -1rem;
    background-color: var(--white100);
    padding: 1.5rem 1.75rem;
	transition-property: opacity, transform;
	transition-duration: 0.25s;
	transition-timing-function: cubic-bezier(0.25, 2, 0.5, 0.75);
	border: var(--light200) solid;
    border-width: 0px 2px 2px 0;
	pointer-events: none;
}

.talkinghead .bubble .bottom
{
	position: absolute;
    transform: translate(0%, 100%);
    bottom: 1px;
    width: 4.5rem;
    right: 4rem;
}

.talkinghead .bubble p
{
	display: block;
	margin: 0;
}

.talkinghead .bubble .name
{
	margin-top: 1rem;
    text-transform: uppercase;
    font-size: 1.35rem;
    display: inline-block;
    color: var(--dark200);
    font-weight: 400;
    letter-spacing: -0.075rem;
    font-style: italic;
}

.talkinghead .shadowContainer
{
	position: absolute;
	inset: 0;
	perspective: 500px;
	perspective-origin: -30rem -30rem;
	transition-property: transform, opacity;
}

.talkinghead .head
{
	width: 10rem;
	height: auto;
	transform: translate3d(0, 0, 2px);
	transition-property: transform;
	transition-duration: 0.25s;
	transition-timing-function: cubic-bezier(0, 0, 0, 1);
}

.talkinghead:hover .head
{
	transform: rotate3d(1, 1, 0, -10deg) translate3d(0, 0, 18px);
}

.talkinghead:hover .shadowContainer
{
	opacity: 0.85;
}

.talkinghead:hover .bubble
{
	opacity: 1;
    transform: translate(0%, -100%) scale(1);
}

picture.cover img
{
	object-fit: cover;
    max-width: unset;
    background-position: center;
    width: 100%;
    height: 100%;
}

.project.framed.primary
{
	position: relative;
}

.project.framed
{
	left: 0;
	top: 0;
	position: absolute;
	width: fit-content;
	height: fit-content;
	display: inline-block;
}

.project.framed .foreground
{
	position: relative;
	border: var(--white100) solid 2rem;
	background-color: var(--white100);
}

.project.framed .shadow
{
	position: absolute;
	inset: 0;
	background-color: var(--light200);
	transform: translate(0.15rem, 0.15rem);
}

.project.framed.low .shadow
{
	transform: translate(0.1rem, 0.1rem);
}

.project.framed.high .shadow
{
	transform: translate(0.2rem, 0.2rem);
}

figure.text
{
	position: absolute;
	left: 0;
	top: 0;
	font-family: 'mrdodo';
    color: var(--dark200);
    font-weight: 300;
    font-size: 12rem;
}

section#header
{
	position: relative;
    width: 100%;
    display: block;
    padding: 0;
    align-items: unset;
}

#header hgroup
{
	position: absolute;
	left: 0;
	top: 0;
    transform: translate(5rem, 8rem) rotate(-1.5deg);
}

h1
{
	color: var(--white100);
    font-family: 'mrdodo';
    font-weight: 200;
    text-transform: uppercase;
    font-size: 9rem;
    letter-spacing: -0.5rem;
    background-size: 100% 100%;
    background-image: url(../../images/projects/projects_header.svg);
    padding: 1.5rem 5.5rem 1.5rem 3.5rem;
    line-height: 1;
    margin: 0;
}

h2
{
    background-image: url(../../images/projects/title_major_long3.svg);
	padding: 0.5rem 6rem 0.25rem 5rem;
}

h2.two
{
    background-image: url(../../images/projects/title_major_medium1.svg);
}

h2.three
{
    background-image: url(../../images/projects/title_major_medium2.svg);
	padding: 0.5rem 6rem 1.25rem 3rem;
}

h3
{
	color: var(--white100);
    font-family: 'mrdodo';
    font-weight: 300;
    text-transform: uppercase;
    font-size: 4.5rem;
    letter-spacing: -0.35rem;
    background-size: 100% 100%;
    background-image: url(../../images/projects/title_minor2.svg);
    padding: 2rem 4.5rem 1rem 2.5rem;
    line-height: 1;
    margin: 0 20rem 0 0;
}

h4
{
    font-family: 'mrdodo';
    font-size: 1.75rem;
    font-weight: 400;
    color: var(--dark200);
    text-transform: uppercase;
    letter-spacing: -0.065rem;
    margin: 0;
}

a
{
	text-decoration: none;
}

a span
{
	text-decoration: solid underline 2px;
}

a span.emoji
{
	text-decoration: none;
}

#header hgroup p
{
	color: var(--white200);
    font-family: 'mrdodo';
    font-weight: 300;
    text-transform: uppercase;
    font-size: 3rem;
    letter-spacing: -0.1rem;
    background-size: 100% 100%;
    background-image: url(../../images/projects/projects_subheader.svg);
    padding: 0.75rem 5.5rem 1rem 3.5rem;
    line-height: 1;
    display: inline-block;
    margin: 0;
    position: absolute;
    right: -5rem;
    bottom: -2.5rem;
	white-space: nowrap;
}

.contentBlock
{
	position: relative;
	background-image: url(../../images/worktogether/worktogether_frame_bg1.svg);
    background-size: 100% 100%;
}

.contentBlock.two
{
	background-image: url(../../images/worktogether/worktogether_frame_bg2.svg);
}

.contentBlock.wide
{
	background-image: url(../../images/worktogether/worktogether_frame_wide.svg);
}

.contentBlock.quote
{
	width: fit-content;
    padding: 0.5rem 3rem;
	background-image: url(../../images/worktogether/worktogether_frame_wide.svg);
	position: absolute;
	left: 0;
	top: 0;
}

.contentBlock.quote.primary
{
	position: relative;
}

.contentBlock.quote p
{
	font-size: 1.25rem;
	max-width: 20rem;
}

.contentBlock.quote .bottom
{
	position: absolute;
    bottom: 0;
    right: 0;
    transform: translate(-5rem, calc(100% - 1rem));
}

.contentBlock.quote.alt .bottom
{
	transform: translate(5rem, calc(100% - 1rem)) scale(-1, 1);
    right: unset;
    left: 0;
}

.contentBlock.quote .border
{
    background-image: url(../../images/worktogether/worktogether_frame3.svg);
	transform: rotate(1deg);
}

.contentBlock.quote.two .border
{
    background-image: url(../../images/worktogether/worktogether_frame4.svg);
	transform: rotate(-1deg);
}

.contentBlock.quote.three .border
{
    transform: scaleX(-1);
}

.contentBlock .border
{
	position: absolute;
	inset: 0rem 0.5rem 0.2rem 1rem;
	background-image: url(../../images/worktogether/worktogether_frame2.svg);
    background-size: 100% 100%;
	pointer-events: none;
}

.contentBlock .border.two
{
	inset: 0rem 1.75rem 0.2rem 1.5rem;
	background-image: url(../../images/worktogether/worktogether_frame1.svg);
}

.contentBlock .border.wide
{
	inset: 0.25rem 4rem 0.25rem 6.5rem;
    background-image: url(../../images/worktogether/worktogether_frame3.svg);
    transform: rotate(0.5deg) scale(-1, 1);
}

#roles
{
	position: absolute;
    right: 0;
    bottom: 0;
    transform: translate(-12rem, calc(-10vh - 8rem)) rotate(0.2deg);
	padding: 2.5rem 6rem 3.5rem 5rem;
}

#roles .heart
{
	position: absolute;
    right: 5rem;
    bottom: -1rem;
    width: 3rem;
    height: auto;
}

#roles .heart.one
{
    right: 4rem;
    bottom: -1rem;
    width: 3rem;
    transform: rotate(15deg);
}

#roles .heart.two
{
	right: -1rem;
    bottom: 2rem;
    width: 4.5rem;
    transform: rotate(-20deg);
}

#roles ul
{
	list-style: none;
	padding: 0;
}

#roles li.role
{
	font-family: 'mrdodo';
	font-size: 5rem;
    text-transform: uppercase;
    font-weight: 400;
    color: var(--dark200);
}

#roles .role li
{
	font-family: 'mrdodo';
	font-size: 2.75rem;
    text-transform: uppercase;
    font-weight: 100;
    color: var(--dark200);
}

#roles li.format
{
	position: absolute;
    right: 5rem;
    top: 3rem;
    transform: translate(50%, -50%) rotate(20deg);
    list-style: none;
    padding: 0;
    margin: 0;
    color: var(--white100);
    font-family: 'mrdodo';
    font-weight: 100;
    font-size: 4.5rem;
    letter-spacing: -0.2rem;
    background-size: 100% 100%;
	background-image: url(../../images/worktogether/worktogether_trackA_desc_bg.svg);
    padding: 0.25rem 4rem 0.25rem 3.5rem;
    margin: 0;
	white-space: nowrap;
}

div.project.grid 
{
	display: flex;
	gap: 16rem; 
	overflow: hidden; 
	position: relative;
	width: 100%;
	flex-direction: column;
	align-items: stretch;
}

section
{
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 5rem;
}

#problem
{
	margin-top: -20rem;
}

#problem h2
{
    z-index: 1;
}

#entry
{
	display: flex;
    margin: 5rem 0rem 8rem 0rem;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    max-width: 90rem;
    gap: 2rem;
}

#entry .framed
{
	flex: 0 1 auto;
    min-width: 0;
}

#entry img,
#entry svg
{
    width: 40rem;
    height: auto;
	box-sizing: border-box
}

#entry .contentBlock
{    
	flex: 0 1 25rem;
    padding: 2rem 4rem;
}

#entry .contentBlock p
{    
	font-size: 1.25rem;
}

#entry .contentBlock p strong
{    
	font-size: 1.28rem;
}

#problem .challenges
{
	display: flex;
	align-items: center;
	gap: 5rem;
	margin: 0rem 5rem;
}

h3
{
	color: var(--white100);
    font-family: 'mrdodo';
    font-weight: 300;
    text-transform: uppercase;
    font-size: 3.5rem;
    letter-spacing: -0.15rem;
    background-size: 100% 100%;
    background-image: url(../../images/projects/title_minor2.svg);
    padding: 1.5rem 4rem 0.75rem 2.25rem;
    line-height: 1;
    margin: 0 25rem 2rem 0;
}

h3.two
{
    background-image: url(../../images/projects/title_minor1.svg);
	padding: 1.25rem 3rem 1rem 2.25rem;
}

h3.three
{
    background-image: url(../../images/projects/title_minor3.svg);
	padding: 1.25rem 3.25rem 1.25rem 3.5rem;
}

h3.four
{
    background-image: url(../../images/projects/title_minor4.svg);
	padding: 1.25rem 6.5rem 1.25rem 4.5rem;
}

h4
{
    font-family: 'mrdodo';
    font-size: 1.75rem;
    font-weight: 400;
    color: var(--dark200);
    text-transform: uppercase;
    letter-spacing: -0.065rem;
    margin: 0;
}

.description.major h3
{
	color: var(--dark200);
    font-weight: 400;
    font-size: 2.5rem;
    letter-spacing: -0.065rem;
	background: unset;
    padding: 0;
    margin: 0;
}

.description.major p
{
    font-size: 1.25rem;
	margin: 0.65rem 0 1rem 0;
}

.description.major a
{
	font-family: 'mrdodo';
    font-size: 1.75rem;
    color: var(--primary);
    margin: auto 0px 0 0;
    font-weight: 300;
    letter-spacing: -0.05rem;
    display: inline-block;
	letter-spacing: -0.075rem;
}

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

.description.major p strong
{
    font-size: 1.28rem;
}

.descriptions
{
	display: flex;
}

.description
{
	max-width: 20rem;
	flex: 1 1 auto;
}

.description.major
{
	max-width: 35rem;
}

.challenges .descriptions
{
	flex: 0 1 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    column-gap: 2rem;
    row-gap: 2rem;
}

.description p
{
	margin: 0.25rem 0 1rem 0;
}

#problem .description p
{
	margin: 0.25rem 0 0 0;
}

.wide .description
{
	max-width: 35rem;
}

.challenges .project.framed
{
	flex: 0 1 auto;
}

#strategy
{
	gap: 4rem;
	padding: 0 1rem;
	margin: 0rem 0rem -4rem 0rem;
}

#strategy h2
{
	margin: 0 0 0 30rem;
}

#strategy .descriptions
{
	justify-content: space-between;
    gap: 2.5rem;
    width: 100%;
    max-width: 108rem;
    padding: 3rem 7rem 4rem 11rem;
	box-sizing: border-box;
}

#strategy .description
{
	flex: 1 1 20rem;
	justify-content: space-between;
    display: flex;
    flex-direction: column;
	align-items: flex-start;
}

.project.cover 
{
	display: block;
	background-position: center; 
	height: 110svh; 
	max-width: unset;
    overflow: hidden;
}

.strategy.part
{
	display: flex;
    align-items: center;
    gap: 3rem;
	width: 100%;
    max-width: 100rem;
}

.strategy.part.wide
{
    max-width: unset;
}

.strategy.part.wide
{
	display: flex;
    flex-direction: column;
}

section.strategy
{
	gap: 8rem;
}

.strategy h3
{
	margin: 0 25rem -4rem 0;
}

section.result
{
	gap: 4rem;
}

#result .content
{
	position: relative;
	display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 3rem;
	row-gap: 3rem;
    width: 100%;
    max-width: 100rem;
	align-items: center;
    justify-items: end;
}

#contact
{
	max-width: 30rem;
    margin: auto;
	padding: 2rem 5rem 5rem 5rem;
}

#contact .title
{
	font-size: 2.75rem;
    text-transform: uppercase;
    color: var(--dark200);
    letter-spacing: -0.125rem;
	align-self: start;
}

#contact p
{
	font-size: 1.25rem;
}

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

#contact .booking
{
	bottom: -4.5rem;
    position: absolute;
    right: 5rem;
}

#contact .booking strong.second
{
	font-size: 2.9rem;
}

#next
{
	width: 100%;
    padding: 0;
	position: relative;
	margin-top: calc(10vh + 10vw);
}

#next h2
{
	background: var(--accentRed);
    color: white;
    font-size: calc(7vw + 7vh);
    font-weight: 300;
    width: 100%;
    padding: calc(0.5vw + 0.5vh) 0rem calc(2vw + 2vh) calc(4vw + 4vh);
    display: inline-block;
    transform: translate(0, -50%) skew(0deg, -5deg);
	z-index: 1;
	position: absolute;
}


#next .teaser
{
	position: absolute;
    inset: 0;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

#next .teaser.levelup
{
	background-color: var(--accentRed);
}

#next h2.levelup 
{
    padding: 3rem 0rem 9rem 10rem;
    font-size: calc(15rem);
    line-height: 1;
}

#next .project.container
{
    width: 100%;
    height: calc(20vw + 20vh);
	position: relative;
	perspective: 1000px;
	perspective-origin: 50% 50%;
	z-index: 1;
}

#next .project.container.levelup 
{
    height: 28rem;
}

#next .shadowContainer
{
	width: 100%;
    height: 100%;
    position: absolute;
    perspective: 500px;
    perspective-origin: 0rem -70rem;
    inset: 0;
	pointer-events: none;
}

#next .shadowContainer div
{
	background-color: var(--primary);
}

#next .bCard 
{
	width: calc(10vw + 10vh);
    position: absolute;
    top: 0rem;
    right: 0;
    transform: translate3d(calc(-20vw - 20vh), calc(3vw + 3vh), 1px) rotate3d(0, 0, 0.5, -7deg);
    aspect-ratio: 1.82;
	border: var(--primary) solid;
    border-width: 0px 1px 1px 0px;
}

#next .bCard.vertical
{
	height: calc(10vw + 10vh);
	width: auto;
    aspect-ratio: 0.55;
	transform: translate3d(calc(-21vw - 21vh), calc(1vw + 1vh), 1px) rotate3d(0, 0, 0.5, -7deg);
}

article#examn,
div#certificate
{
	pointer-events: none;
}

#next .document.examn,
#next .document.certificate
{
	transform: translate3d(calc(50% + 31rem), -36rem, 1px) rotate3d(0, 0, 0.5, 5deg);
	right: 50%;
	transition-property: transform, opacity;
	transition-duration: 0.75s;
	transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

#next a:hover ~ .document.examn,
#next a:hover ~ .shadowContainer .document.examn,
#next a:hover ~ .document.certificate,
#next a:hover ~ .shadowContainer .document.certificate
{
	transform: translate3d(calc(50% + 31rem), -36rem, 51px) rotate3d(-0.5, -1, 0, 5deg);
}

#next a:hover ~ .shadowContainer .document.examn,
#next a:hover ~ .shadowContainer .document.certificate
{
	opacity: 0.65;
}

#next .screen 
{
    width: calc(25vw + 25vh);
    position: absolute;
    top: 0rem;
    right: 0;
    transform: translate3d(calc(1vw + 1vh), calc(-2vw - 2vh), 1px) rotate3d(0, 0, 1, 3deg);
    aspect-ratio: 1.49;
}

#next .screen.duckmatter
{
	aspect-ratio: 1.69;
}

#next .screen.lotteries
{
	aspect-ratio: 1.7;
}

#next .screen.rotable
{
    aspect-ratio: 1.545;
}

#next .screen.tubics
{
    aspect-ratio: 1.68;
}

#next .screen.tricentis
{
    aspect-ratio: 1.69;
}

#next .screen.purplelamp
{
    aspect-ratio: 1.545;
}

#next .screen.mobile
{
    width: calc(8vw + 8vh);
    aspect-ratio: 0.5;
}

#next .screen.mobile.one
{
    transform: translate3d(calc(-15vw + -15vh), calc(-4vw - 4vh), 1px) rotate3d(0, 0, 1, -15deg);
}

#next .screen.mobile.two
{
    transform: translate3d(calc(-7vw - 7vh), calc(-5vw - 5vh), 1px) rotate3d(0, 0, 1, 3deg);
}

#next .screen.mobile.three
{
    transform: translate3d(calc(-11vw - 11vh), calc(-5vw - 5vh), 1px) rotate3d(0, 0, 1, -7deg);
	border: var(--primary) solid;
    border-width: 0px 1px 1px 0px;
}
    
#next .screen,
#next .bCard
{
	transition-property: transform;
	pointer-events: none;
	transition-duration: 1.5s;
	transition-timing-function: cubic-bezier(0.25, 0, 0.25, 1);
} 

#next .nextLink
{
	position: absolute;
	top: 0;
	right: 0;
	width: calc(32vw + 32vh);
    aspect-ratio: 1.75;
    transform: translate3d(calc(1vw + 1vh), calc(-2vw - 2vh), 1px) rotate3d(0, 0, 1, 3deg);
}

#next .nextLink.damit,
#next .nextLink.cityriddler
{
	width: calc(21vw + 21vh);
    aspect-ratio: 1.2;
    transform: translate3d(calc(-6vw + -6vh), calc(-5vw - 5vh), 1px) rotate3d(0, 0, 1, -2deg);
}

#next .nextLink:hover ~ .bCard,
#next .nextLink:hover ~ .shadowContainer .bCard 
{
    transform: translate3d(calc(-12vw - 12vh), calc(0vw + 0vh), 1px) rotate3d(0, 0, 0.5, -1deg);
	transition-timing-function: cubic-bezier(0.1, 0, 0, 1);
	transition-duration: 0.75s;
}

#next .nextLink:hover ~ .bCard.vertical,
#next .nextLink:hover ~ .shadowContainer .bCard.vertical 
{
    transform: translate3d(calc(-10vw - 10vh), calc(0vw + 0vh), 1px) rotate3d(0, 0, 0.5, 5deg);
}

#next .nextLink:hover ~ .bCard.vertical.mobile,
#next .nextLink:hover ~ .shadowContainer .bCard.vertical.mobile
{
    transform: translate3d(calc(-10vw - 10vh), calc(0vw + 0vh), 1px) rotate3d(0, 0, 0.5, 15deg);
}

#next .nextLink:hover ~ .screen,
#next .nextLink:hover ~ .shadowContainer .screen 
{
    transform: translate3d(calc(-5vw - 5vh), calc(-4vw - 4vh), 1px) rotate3d(0, 0, 1, -15deg);
	transition-timing-function: cubic-bezier(0.1, 0, 0, 1);
	transition-duration: 0.75s;
}

#next .nextLink:hover ~ .screen.mobile.one,
#next .nextLink:hover ~ .shadowContainer .screen.mobile.one
{
    transform: translate3d(calc(-17vw + -17vh), calc(-7vw - 7vh), 1px) rotate3d(0, 0, 1, -23deg);
}

#next .nextLink:hover ~ .screen.mobile.two,
#next .nextLink:hover ~ .shadowContainer .screen.mobile.two
{
    transform: translate3d(calc(-5vw - 5vh), calc(-9vw - 9vh), 1px) rotate3d(0, 0, 1, 10deg);
}

#next .nextLink:hover ~ .screen.mobile.three,
#next .nextLink:hover ~ .shadowContainer .screen.mobile.three
{
    transform: translate3d(calc(-11vw - 11vh), calc(-9vw - 9vh), 1px) rotate3d(0, 0, 1, -7deg);
}

footer
{
	margin-top: -15rem;
	z-index: 1;
}

footer.mini a#imprint
{
	left: 25%;
	transform: scale(0.65);
}

footer.mini a#privacy
{
	left: 25%;
	transform: scale(0.65) translateX(-100%) ;
}

.submenu
{
	right: 0;
	bottom: 0;
	position: absolute;
	width: auto;
	z-index: 2;
}

.submenu .icon
{
	margin: 2rem;
	margin: 2rem;
	height: 3.25rem;
	width: auto;
}

@media (max-width: 1920px), (max-height: 1080px)
{
	#next h2.levelup 
	{
		padding: 3rem 0rem 9rem 10rem;
		font-size: 12rem;
	}

	#next .project.container.levelup 
	{
		height: 28rem;
	}
	
	#next .document.examn,
	#next .document.certificate
	{
		transform: translate3d(calc(50% + 27rem), -33rem, 1px) rotate3d(0, 0, 0.5, 5deg) scale(0.85);
	}

	#next a:hover ~ .document.examn,
	#next a:hover ~ .shadowContainer .document.examn
	#next a:hover ~ .document.certificate,
	#next a:hover ~ .shadowContainer .document.certificate
	{
		transform: translate3d(calc(50% + 27rem), -33rem, 51px) rotate3d(-0.5, -1, 0, 5deg) scale(0.85);
	}
}

@media (max-width: 1600px)
{
	#next h2.levelup 
	{
		padding: 3rem 0rem 9rem 10rem;
		font-size: 10.5rem;
	}

	#next .project.container.levelup 
	{
		height: 24rem;
	}
	
	#next .document.examn,
	#next .document.certificate
	{
		transform: translate3d(calc(50% + 24rem), -32rem, 1px) rotate3d(0, 0, 0.5, 5deg) scale(0.75);
	}

	#next a:hover ~ .document.examn,
	#next a:hover ~ .shadowContainer .document.examn,
	#next a:hover ~ .document.certificate,
	#next a:hover ~ .shadowContainer .document.certificate
	{
		transform: translate3d(calc(50% + 24rem), -32rem, 51px) rotate3d(-0.5, -1, 0, 5deg) scale(0.75);
	}
}

@media (max-width: 1360px), (max-height: 800px)
{
	#next h2.levelup 
	{
		padding: 2rem 0rem 6rem 6rem;
		font-size: 7.5rem;
	}

	#next .project.container.levelup 
	{
		height: 32rem;
	}
	
	#next .document.examn,
	#next .document.certificate
	{
		transform: translate3d(calc(50% + 18rem), -29rem, 1px) rotate3d(0, 0, 0.5, 2deg) scale(0.75);
	}

	#next a:hover ~ .document.examn,
	#next a:hover ~ .shadowContainer .document.examn,
	#next a:hover ~ .document.certificate,
	#next a:hover ~ .shadowContainer .document.certificate
	{
		transform: translate3d(calc(50% + 18rem), -29rem, 51px) rotate3d(-0.5, -1, 0, 5deg) scale(0.75);
	}
}

@media (max-width: 1024px) and (min-height: 800px)
{
	#next h2.levelup 
	{
		padding: 2rem 2rem 0rem 4rem;
		font-size: 8rem;
	}

	#next .project.container.levelup 
	{
		height: 82rem;
	}
	
	#next .document.examn,
	#next .document.certificate
	{
		transform: translate(24rem, 8rem) translate3d(0rem, 0rem, 1px) rotate3d(0, 0, 0.5, 2deg) scale(0.9);
        right: 50%;
	}

	#next a:hover ~ .document.examn,
	#next a:hover ~ .shadowContainer .document.examn,
	#next a:hover ~ .document.certificate,
	#next a:hover ~ .shadowContainer .document.certificate
	{
		transform: translate(24rem, 8rem) translate3d(0rem, 0rem, 51px) rotate3d(-0.5, -1, 0, 5deg) scale(0.9);
	}
}

@media (max-width: 640px)
{
	#next h2.levelup 
	{
		padding: 2rem 2rem 0rem 4rem;
		font-size: 5rem;
	}

	#next .project.container.levelup 
	{
		height: 60rem;
	}

	#next .shadowContainer
	{
		opacity: 0.85;
	}
	
	#next .document.examn,
	#next a:hover ~ .document.examn,
	#next a:hover ~ .shadowContainer .document.examn,
	#next .document.certificate,
	#next a:hover ~ .document.certificate,
	#next a:hover ~ .shadowContainer .document.certificate
	{
		transform: translate(50%, -2rem) translate3d(4rem, 0rem, 15px) rotate3d(-0.25, 0.25, -1, 6deg) scale(0.65);
		right: 50%;
		left: unset;
	}
}

@media (max-height: 1080px) and (min-width: 640px), (max-width: 1600px) and (min-width: 640px)
{
	footer 
	{
		margin-top: -12rem;
	}
}

@media (max-width: 1600px), (max-height: 1080px)
{
	h1 
	{
		font-size: 7rem;
		letter-spacing: -0.375rem;
		padding: 1.25rem 4.5rem 1.25rem 3rem;
	}

	figure.text {
		font-size: 9rem;
	}

	.contentBlock.quote p 
	{
		font-size: 1rem;
		max-width: 15rem;
	}

	#header hgroup 
	{
    	transform: translate(5rem, 6rem) rotate(-1.5deg);
	}

	#header hgroup p 
	{
		font-size: 2.5rem;
        letter-spacing: -0.075rem;
        padding: 0.65rem 4.5rem 0.75rem 3rem;
        right: 12rem;
        bottom: -2rem;
        transform: translateX(50%);
	}

	#roles li.role 
	{
		font-size: 3.75rem;
	}
	
	#roles 
	{
		transform: translate(-8rem, calc(-8vh - 6rem)) rotate(0.2deg);
		padding: 1.5rem 4.5rem 2.5rem 3.5rem;
	}

	#roles .role li 
	{
		font-size: 2rem;
	}

	#roles li.format 
	{
		right: 4rem;
		top: 2rem;
		font-size: 3.25rem;
		letter-spacing: -0.125rem;
		padding: 0rem 2.5rem 0.25rem 2rem;
	}

	#entry .contentBlock p,
	#contact p
	{
		font-size: 1rem;
	}

	div.project.grid
	{
		gap: 12rem;
	}

	#problem 
	{
		margin-top: -15rem;
	}

	h3 
	{
		font-size: 2.75rem;
		letter-spacing: -0.125rem;
	}

	h3.four
	{
		padding: 1.25rem 4.5rem 1.25rem 2.75rem;
	}

	h4 
	{
		font-size: 1.5rem;
		letter-spacing: -0.05rem;
	}

	.description.major h3 
	{
		font-size: 2rem;
		letter-spacing: -0.05rem;
	}

	.description.major p 
	{
		font-size: 1rem;
		margin: 0.5rem 0 0.75rem 0;
	}
	
	.description.major p strong,
	#entry .contentBlock p strong,
	#contact p strong
	{
		font-size: 1.025rem;
	}

	.description.major a 
	{
		font-size: 1.4rem;
		letter-spacing: -0.06rem;
	}

	#contact .title 
	{
		font-size: 2rem;
		letter-spacing: -0.1rem;
	}

	#contact 
	{
		max-width: 24rem;
		padding: 2rem 4rem 6rem 4rem;
	}

	.submenu .icon
	{
		margin: 1.5rem;
		margin: 1.5rem;
		height: 2.5rem;
	}

	footer
	{
		margin-top: -12rem;
	}
}

@media (max-width: 1360px)
{
	#entry 
	{
		flex-direction: column;
		gap: 3.5rem;
	}

	#entry .contentBlock 
	{
		order: 2;
		order: 2;
		max-width: 25rem;
		flex: 0 1 auto;
		padding: 1.5rem 3.5rem;
	}

	#problem .challenges
	{
		flex-direction: column;
		margin: 0;
	}

	#strategy .descriptions
	{
		flex-direction: column;
		width: auto;
		max-width: unset;
		padding: 4rem 5rem 5rem 5rem;
		background-image: url(../../images/worktogether/worktogether_frame_bg1.svg);
		justify-content: unset;
		gap: 3.5rem;
	}

	.contentBlock .border.wide 
	{
		inset: 0rem 2rem 0rem 1rem;
		background-image: url(../../images/worktogether/worktogether_frame2.svg);
	}

	#strategy .description
	{
		flex: 1 1 auto;
	}

	.description.major a
	{
		align-self: flex-end;
		margin: 1rem 0px 0px 0rem;
	}

	.strategy.part
	{
		flex-direction: column;
	}

	.description
	{
		max-width: 35rem;
		order: 2;
	}

	.talkinghead
	{
		margin: 1rem -3rem 0 auto;
	}
	
	#result .content
	{
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		justify-items: center;
		width: auto;
	}

	#next .project.container 
	{
		height: calc(30vw + 30vh);
	}

	#next .screen 
	{
    	transform: translate3d(calc(1vw + 1vh), calc(3vw + 3vh), 1px) rotate3d(0, 0, 1, 3deg);
	}

	#next .screen.mobile.one 
	{
    	transform: translate3d(calc(-15vw - 15vh), calc(1.5vw + 1.5vh), 1px) rotate3d(0, 0, 1, -3deg);
	}

	#next .screen.mobile.two 
	{
    	transform: translate3d(calc(-9vw - 9vh), calc(2vw + 2vh), 1px) rotate3d(0, 0, 1, 15deg);
	}

	#next .screen.mobile.three 
	{
    	transform: translate3d(calc(-12vw - 12vh), calc(1vw + 2vh), 1px) rotate3d(0, 0, 1, 7deg);
	}

	#next .bCard 
	{
    	transform: translate3d(calc(-20vw - 20vh), calc(8vw + 8vh), 1px) rotate3d(0, 0, 0.5, -7deg);
	}

	#next .bCard.vertical 
	{
		transform: translate3d(calc(-21vw - 21vh), calc(5vw + 5vh), 1px) rotate3d(0, 0, 0.5, -7deg);
	}
	
	#next .nextLink 
	{
    	transform: translate3d(calc(1vw + 1vh), calc(2vw + 2vh), 1px) rotate3d(0, 0, 1, 3deg);
	}
	
	#next .nextLink.damit, #next .nextLink.cityriddler 
	{
		transform: translate3d(calc(-7.5vw - 4.5vh), calc(1vw + 1vh), 1px) rotate3d(0, 0, 1, -2deg);
	}

	#next .nextLink:hover ~ .screen, 
	#next .nextLink:hover ~ .shadowContainer .screen 
	{
		transform: translate3d(calc(-5vw - 5vh), calc(0vw - 0vh), 1px) rotate3d(0, 0, 1, -15deg);
	}

	#next .nextLink:hover ~ .bCard, 
	#next .nextLink:hover ~ .shadowContainer .bCard 
	{
		transform: translate3d(calc(-12vw - 12vh), calc(4vw + 4vh), 1px) rotate3d(0, 0, 0.5, -1deg);
	}

	#next .nextLink:hover ~ .bCard.vertical, 
	#next .nextLink:hover ~ .shadowContainer .bCard.vertical
	{
		transform: translate3d(calc(-10vw - 10vh), calc(0vw + 0vh), 1px) rotate3d(0, 0, 0.5, 10deg);
	}

	#next .nextLink:hover ~ .bCard.vertical.mobile, 
	#next .nextLink:hover ~ .shadowContainer .bCard.vertical.mobile
	{
		transform: translate3d(calc(-10vw - 10vh), calc(0vw + 0vh), 1px) rotate3d(0, 0, 0.5, 27deg);
	}

	#next .nextLink:hover ~ .screen.mobile.one, #next .nextLink:hover ~ .shadowContainer .screen.mobile.one 
	{
    	transform: translate3d(calc(-15vw + -15vh), calc(-3vw - 3vh), 1px) rotate3d(0, 0, 1, -9deg);
	}
	
	#next .nextLink:hover ~ .screen.mobile.two, #next .nextLink:hover ~ .shadowContainer .screen.mobile.two 
	{
    	transform: translate3d(calc(-3vw - 3vh), calc(-2vw - 2vh), 1px) rotate3d(0, 0, 1, 24deg);
	}

	#next .nextLink:hover ~ .screen.mobile.three, #next .nextLink:hover ~ .shadowContainer .screen.mobile.three 
	{
    	transform: translate3d(calc(-9vw - 9vh), calc(-3.5vw - 3.5vh), 1px) rotate3d(0, 0, 1, 9deg);
	}

	footer
	{
		margin-top: -15rem;
	}
}

@media (max-width: 1024px)
{
	h1 
	{
		padding: 1.25rem 7.5rem 1.25rem 40rem;
	}
	
	figure.text 
	{
		font-size: 6rem;
	}

	#strategy h2 
	{
    	margin: 0 0 0 auto;
	}

	#header hgroup 
	{
    	transform: translate(-36rem, 4rem) rotate(-1.5deg);
	}

	section 
	{
    	padding: 0px 2.5rem;
	}

	.talkinghead 
	{
    	margin: 2rem 5rem 0 auto;
	}

	.challenges .descriptions 
	{
        display: flex;
    	flex-direction: column;
	}

	h3 
	{
		margin: 0 0 1rem 0;
		white-space: nowrap;
		align-self: start;
		padding: 1.25rem 3rem 0.5rem 1.5rem;
	}

	section.strategy 
	{
    	gap: 6rem;
	}

	.strategy h3
	{
		margin: 0 0rem -4rem -1rem;
	}

	#next .project.container 
	{
		height: calc(35vw + 35vh);
	}

	footer.mini a#imprint
	{
		left: 50%;
	}

	footer.mini a#privacy
	{
		left: 95%;
	}
	
	footer 
	{
    	margin-top: -21rem;
	}
	
	.submenu 
	{
		right: unset;
		left: 0;
	}
}

@media (max-width: 640px), (max-height: 800px) and (max-width: 1360px)
{
	.talkinghead 
	{
    	margin: 0.5rem 1rem 0 auto;
	}

	.talkinghead .bubble 
	{
		right: -2rem;
	}
	
	.talkinghead .bubble .bottom 
	{
		right: 11rem;
	}

	div.project.grid 
	{
    	gap: 6rem;
	}

	#problem 
	{
    	margin-top: -10rem;
	}

	.contentBlock.quote 
	{
		position: relative;
	}

	#entry img, 
	#entry svg 
	{
		width: 28rem;
		height: auto;
		box-sizing: border-box;
	}

	#header hgroup 
	{
    	transform: translate(-48rem, 3rem) rotate(-1.5deg);
	}
	
	#header hgroup p 
	{
		font-size: 2rem;
        letter-spacing: -0.06rem;
        padding: 0.65rem 3.5rem 0.75rem 2.25rem;
        right: 15rem;
        bottom: -1rem;
        transform: translateX(65%);
	}

	h1 
	{
		font-size: 5rem;
		letter-spacing: -0.25rem;
		padding: 1.25rem 7.5rem 2rem 49rem;
		line-height: 0.95;
	}
	
	h2 
	{
		background: url(../../images/worktogether/worktogether_celebration_subheader.svg);
		white-space: normal;
		padding: 0.75rem 3rem 1rem 2.5rem;
		background-size: 100% 100%;
		line-height: 0.9;
	}

	h2.three 
	{
		padding: 0.5rem 3rem 1.25rem 2rem;
	}

	h3 
	{
		font-size: 2rem;
		letter-spacing: -0.075rem;
		white-space: normal;
		padding: 1rem 3rem 0.5rem 1.5rem;
	}

	h3.two 
	{
    	padding: 1rem 2.25rem 0.75rem 1.75rem;
	}
	
	h3.three 
	{
    	padding: 1rem 3.25rem 1rem 3rem;
	}
	
	h3.four 
	{
    	padding: 1rem 3.75rem 1rem 2.25rem;
	}

	section 
	{
    	padding: 0px 1rem;
	}

	#entry 
	{
		flex-direction: column;
		gap: 3.5rem;
		margin: 3rem 0rem 6rem 0rem;
	}
	
	#entry .contentBlock 
	{
		order: 2;
		order: 2;
		max-width: 25rem;
		flex: 0 1 auto;
		padding: 0.5rem 2rem;
		background-image: url(../../images/worktogether/worktogether_frame_bg1.svg);
	}

	.contentBlock .border.two 
	{
		inset: 0rem 0.75rem 0.2rem 0.5rem;
		background-image: url(../../images/worktogether/worktogether_frame1_mobile.svg);
	}

	#roles 
	{
    	transform: translate(-1rem, calc(-4vh - 5rem)) rotate(0.2deg);
        padding: 0.75rem 2.5rem 0.75rem 2rem;
	}

	#roles .border
	{
		inset: -0.15rem 0.25rem -0.1rem 0.4rem;
	}

	#roles li.format 
	{
		left: 4rem;
        top: 0.75rem;
        font-size: 2.5rem;
        letter-spacing: -0.1rem;
        padding: 0rem 1.75rem 0.25rem 1.5rem;
        transform: translate(-50%, -50%) rotate(-15deg);
        right: unset;
	}

	#roles li.role 
	{
    	font-size: 3.25rem;
	}

	#roles .role li 
	{
    	font-size: 1.5rem;
	}

	#roles .heart.one 
	{
		right: 2.75rem;
		width: 2.5rem;
	}

	#roles .heart.two 
	{
		width: 3.25rem;
	}

	.project.framed .foreground 
	{
		border: var(--white100) solid 1rem;
	}

	.challenges .framed .foreground 
	{
		width: 22rem;
	}

	.challenges .project.framed 
	{
 	   margin: 0 -2rem;
	}

	#problem .challenges 
	{
		gap: 2.5rem;
	}

	.challenges .descriptions 
	{
		row-gap: 1.25rem;
	}
	
	.description p 
	{
    	margin: 0;
	}
	
	#strategy
	{
		gap: 3rem;
	}

	.strategy h3 
	{
    	margin: 0 0rem -3rem 0rem;
	}

	#strategy .descriptions 
	{
		padding: 2rem 2rem 3rem 2rem;
		gap: 2rem;
	}

	.contentBlock .border.wide 
	{
		background-image: url(../../images/worktogether/worktogether_frame6_mobile.svg);
		inset: 0rem 0.35rem 0rem 0.5rem;
		transform: unset;
	}

	.description.major h3 
	{
		font-size: 1.75rem;
		letter-spacing: -0.04rem;
	}

	.description.major p
	{
		margin: 0.35rem 0 0.5rem 0;
	}

	.description.major a 
	{
		letter-spacing: -0.05rem;
		font-size: 1.3rem;
		margin: 0;
	}
	
	section.strategy 
	{
    	gap: 4rem;
	}

	.strategy.part 
	{
    	gap: 2rem;
	}
	
	section.result 
	{
    	gap: 2.5rem;
	}

	#result .content 
	{
		row-gap: 2rem;
	}

	#contact 
	{
    	padding: 1.5rem 2.5rem 4rem 2.5rem;
	}

	#contact .booking strong.second 
	{
    	font-size: 2.4rem;
	}
	
	#contact .title 
	{
		font-size: 1.75rem;
		letter-spacing: -0.075rem;
	}
	
	#contact p
	{
		margin: 0.5rem 0;
	}

	#next h2 
	{
		padding: calc(2vw + 2vh) 0rem calc(7.5vw + 7.5vh) calc(4vw + 4vh);
	}
	
	#next .project.container 
	{
    	height: calc(50vw + 50vh);
	}

	#next .screen 
	{
		width: calc(35vw + 35vh);
		transform: translate3d(calc(1vw + 1vh), calc(5vw + 5vh), 1px) rotate3d(0, 0, 1, 3deg);
	}

	#next .screen.mobile 
	{
    	width: calc(12vw + 12vh);
	}

	#next .screen.mobile.one 
	{
    	transform: translate3d(calc(-17vw - 17vh), calc(1vw + 1vh), 1px) rotate3d(0, 0, 1, -3deg);
	}
	
	#next .screen.mobile.two 
	{
    	transform: translate3d(calc(-7vw - 7vh), calc(2vw + 2vh), 1px) rotate3d(0, 0, 1, 15deg);
	}

	#next .bCard 
	{
		width: calc(15vw + 15vh);
		transform: translate3d(calc(-3vw - 3vh), calc(0vw + 0vh), 1px) rotate3d(0, 0, 0.5, -7deg);
	}

	#next .bCard.vertical.mobile
	{
    	transform: translate3d(calc(-3vw - 3vh), calc(11vw + 11vh), 1px) rotate3d(0, 0, 0.5, 22deg);
    	height: calc(15vw + 15vh);
	}

	#next .bCard.vertical
	{
		transform: translate3d(calc(-3vw - 3vh), calc(1vw + 1vh), 1px) rotate3d(0, 0, 0.5, 13deg);
		height: calc(15vw + 15vh);
	}

	footer 
	{
    	margin-top: -15rem;
	}

	footer.mini a#imprint 
	{
		left: 31%;
	}
	
	footer.mini a#privacy 
	{
    	left: 1rem;
    	transform: scale(0.65);
	}
}