:root {
	--white: #fff;
	--black: #000;
	--wilhelmsblau: #1b5b92;
	--bordeaux: #551120;
	--rose: #fbdadb;
	--vanille: #fbeed5;
	--kurkuma: #ecb509;
	--olive: #4e4d42;
	--footer-bg: #363839;
	--footer-text: #8c8989;
	--footer-link: #bfbfbf;
	--footer-bottom-bg: #101010;
	--default-margin-left: 5vw;
	--default-margin-top: 5vw;
	--font-size-01: 1.25rem;
	--font-size-02: 1.5rem;
	--font-size-03: 2rem;
	--font-size-04: 3rem;
	--font-size-05: 3.5rem;
	--font-size-06: 4.5rem;
	--line-height-01: 1.5rem;
	--line-height-02: 2rem;
	font-size: 16px;
	line-height: 16px;
}

body {
	background-color: var(--wilhelmsblau);
	color: var(--white);
	overflow-x: hidden;
	font-family: "sofia-pro", sans-serif;
	font-weight: 200;
	font-style: normal;
}

a {
	text-decoration: none;
	color: var(--white);
}

strong {
	font-weight: 500;
}

/* logo */

.logo {
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;
	background-color: transparent;
	background-image:url("../images/Westzeit_black.svg");
	position: fixed;
	top: var(--default-margin-top);
	left: var(--default-margin-left);
	z-index: 150;
	overflow: hidden;
	text-indent:-9999px;
	width: 20vw;
	height: calc(20vw*0.3);
	cursor: pointer;
}


/* call to action */
	
a.calltoaction {
	font-weight: 500;
	font-size: var(--font-size-02);
	margin-bottom: 1rem;
	text-transform: uppercase;
	display: block;
	border: 1px solid var(--black);
	border-right: none;
	padding: 0.6rem 0.2rem;
	position: fixed;
	top: 30%;
	right: 0;
	z-index: 999;
	writing-mode: vertical-rl;
	cursor: pointer;
	color: var(--black);
}

a.calltoaction:hover {
	color: var(--black);
	background: rgba(255,255,255,0.5);
	cursor: pointer;
}


/* menu */

.menu {
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;
	background-color: transparent;
	background-image:url("../images/burgermenu_black.svg");
	position: fixed;
	top: var(--default-margin-top);
	right: var(--default-margin-left);
	z-index: 100;
	overflow: hidden;
	text-indent:-9999px;
	height: 4vw;
	width: calc(4vw*0.45);
	display: block;
}

#menu-overlay > ul.main-menu,
#menu-overlay > ul.secondary-menu {
	position: absolute;
	left: var(--default-margin-left);
}

#menu-overlay > ul.main-menu {
	top: var(--default-margin-top);
}

#menu-overlay > ul.main-menu > li {
	text-transform: uppercase;
	font-size: var(--font-size-06);
}

#menu-overlay > ul.main-menu > li a:hover {
	color: var(--black);
}

#menu-overlay > ul.secondary-menu {
	bottom: var(--default-margin-top);
}

#menu-overlay > ul.secondary-menu > li {
	font-size: var(--font-size-03);
}

#menu-overlay > ul.secondary-menu > li a:hover {
	color: var(--black);
}


/* overlay */

.overlay {
	position: fixed;
	top: 0;
	left: 100%;
	width: 100%;
	height: 100%;
	background-color: var(--wilhelmsblau);
	color: var(--white);
	z-index: 200;
}

.overlay a.close {
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;
	background-color: transparent;
	background-image:url("../images/Pfeil_back_white.svg");
	position: absolute;
	top: var(--default-margin-top);
	right: var(--default-margin-left);
	overflow: hidden;
	text-indent:-9999px;
	height: 4vw;
	width: calc(4vw);
	display: block;
}


/* sections */

section {
	display: flex;
	height: 100vh;
	width:  100%;
	overflow: hidden;
}

section > .content {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}

section > .content .bgimage {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	background-color: transparent;
}

section > .content .image-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	width: 100%;
	height: 100%;
}

section > .content .image-wrapper > div {
	transform: translate(-50%,-50%);
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100vw;
	height: 100vh;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	background-color: transparent;
}

section .claim {
	position: absolute;
	bottom: calc(2 * var(--default-margin-top));
	left: var(--default-margin-left);
	color: var(--black);
	font-size: var(--font-size-05);
	z-index: 100;
}

section#intro > .content .image-wrapper > .mask {
	top: 50%;
	left: 70%;
	width: 250vw;
	height: 250vw;
	background-image:url("../images/intro_mask.svg");
}

section#intro .text {
	position: absolute;
	bottom: calc(2 * var(--default-margin-top));
	left: var(--default-margin-left);
	width: 35%;
	color: var(--black);
	font-size: var(--font-size-05);
	z-index: 100;
}

section#intro .headline {
	text-transform: uppercase;
	color: var(--black);
	font-size: var(--font-size-06);
}

section#intro .copy {
	color: var(--black);
	font-size: var(--font-size-02);
	line-height: var(--line-height-02);
}

section#intro .headline + .copy {
	margin-top: 1.5em;
}

section#history .text {
	position: absolute;
	bottom: calc(2 * var(--default-margin-top));
	left: var(--default-margin-left);
	width: 55%;
	color: var(--rose);
	font-size: var(--font-size-02);
	line-height: var(--line-height-02);
}

section#location .claim {
	color: var(--rose);
}

section#location > .content .image-wrapper .map-locations > div {
	z-index: 95;
	position: absolute;
	transform: translate(-50%,-50%);
	color: var(--rose);
	font-size: var(--font-size-02);
	text-align: center;
}

section#location > .content .image-wrapper .map-locations > div.kudamm {
	top: 20%;
	left: 45%;
}

section#location > .content .image-wrapper .map-locations > div.schoeneberg {
	top: 35%;
	left: 55%;
}

section#location > .content .image-wrapper .map-locations > div.wilmersdorf {
	bottom: 40%;
	left: 30%;
}

section#location > .content .image-wrapper .map-locations > div.schlossstrasse {
	bottom: 15%;
	left: 50%;
}

section#neighbourhood {
	transition: background-color 0.5s ease;
}

section#neighbourhood,
section#neighbourhood.color-wilhelmsblau {
	background-color: var(--wilhelmsblau);
}

section#neighbourhood.color-rose {
	background-color: var(--rose);
}

section#neighbourhood > .content .image-wrapper > .circle {
	left: 65%;
	width: 50vw;
	height: 50vw;
	border-radius: 50%;
	overflow: hidden;
}

section#neighbourhood > .content .image-wrapper > .circle > div {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	background-color: transparent;
}

section#neighbourhood > .content .image-wrapper > .circle > div.neighbourhood-graphic {
	background-color: var(--rose);
	background-image: url("../images/nachbarschaft.svg");
}

section#neighbourhood .location-container {
	position: absolute;
	top: calc(3 * var(--default-margin-top));
	left: var(--default-margin-left);
	bottom: var(--default-margin-top);
	right: var(--default-margin-left);
}

section#neighbourhood .location-container > div {
	display: none;
	position: absolute;
	left: 0;
	bottom: 0;
	max-width: 40%;
	color: var(--black);
	font-size: var(--font-size-02);
}

section#neighbourhood .location-container > div > .description {
	line-height: var(--line-height-02);
}

section#neighbourhood .location-container > div:first-child {
	display: block;
}

section#neighbourhood .location-container > div.intro {
	color: var(--rose);
}

section#neighbourhood .location {
	font-size: var(--font-size-05);
}

section#neighbourhood .location + div {
	margin-top: 1rem;
}

section#apartments .claim {
	color: var(--black);
}

section#apartments .claim.color-white {
	color: var(--white);
	transition: color 0.5s ease;
}

section#floorplans {
	background-color: var(--white);
}

section#floorplans .content > .inner {
	position: absolute;
	top: calc(3 * var(--default-margin-top));
	left: var(--default-margin-left);
	bottom: var(--default-margin-top);
	right: var(--default-margin-left);
	display: flex;
	justify-content: space-between;
}

section#floorplans .content > .inner > .col1,
section#floorplans .content > .inner > .col2 {
	max-height: 100%;
	overflow: hidden;
	width: 20%;
}

section#floorplans .content > .inner > .col1 {
	display: flex;
	flex-direction: column;
	justify-content: end;
}

section#floorplans .content > .inner > .col2 {
	width: 75%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

section#floorplans .content > .inner > .col2 .headline {
	font-size: var(--font-size-04);
	color: var(--black);
}

section#floorplans ul.floorplan-menu > li > a {
	background-color: var(--black);
	color: var(--white);
	text-decoration: none;
	text-transform: uppercase;
	padding: 1.5rem;
	display: block;
	margin-bottom: 1rem;
	font-weight: bold;
	font-size: var(--font-size-02);
	border-radius: 10rem;
	text-align: center;
}

section#floorplans ul.floorplan-menu > li > a:hover {
	color: var(--black);
}

section#floorplans ul.floorplan-menu > li > a[data-color="color-wilhelmsblau"]:hover {
	background-color: var(--wilhelmsblau);
}

section#floorplans ul.floorplan-menu > li > a[data-color="color-bordeaux"]:hover {
	background-color: var(--bordeaux);
	color: var(--white);
}

section#floorplans ul.floorplan-menu > li > a[data-color="color-vanille"]:hover {
	background-color: var(--vanille);
}

section#floorplans ul.floorplan-menu > li > a[data-color="color-rose"]:hover {
	background-color: var(--rose);
}

section#floorplans ul.floorplan-menu > li > a[data-color="color-kurkuma"]:hover {
	background-color: var(--kurkuma);
}

section#floorplans ul.floorplan-menu > li > a[data-color="color-olive"]:hover {
	background-color: var(--olive);
}

section#floorplans ul.floorplan-menu > li:last-child > a {
	margin-bottom: 0;
}

section#floorplans .overlay {
	color: var(--white);
	padding-left: var(--default-margin-left);
	padding-right: var(--default-margin-left);
	width: calc(100% - ( 2 * var(--default-margin-left)));
	z-index: 120;
	font-size: var(--font-size-01);
}

section#floorplans .overlay.color-wilhelmsblau {
	background-color: var(--wilhelmsblau);
}

section#floorplans .overlay.color-bordeaux {
	background-color: var(--bordeaux);
}

section#floorplans .overlay.color-rose {
	background-color: var(--rose);
	color: var(--black);
}

section#floorplans .overlay.color-vanille {
	background-color: var(--vanille);
	color: var(--black);
}

section#floorplans .overlay.color-kurkuma {
	background-color: var(--kurkuma);
}

section#floorplans .overlay.color-olive {
	background-color: var(--olive);
}

section#floorplans .overlay .content .slideshow {
	position: absolute;
	top: calc(3 * var(--default-margin-top));
	left: var(--default-margin-left);
	bottom: calc(2 * var(--default-margin-top));
	right: var(--default-margin-left);
}

section#floorplans .overlay .content .slideshow > .slide {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	display: none;
}

section#floorplans .overlay .content .slideshow > .slide:first-child {
	display: block;
}

section#floorplans .overlay .content .slideshow > .slide > .apartment-inner {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	display: flex;
	justify-content: space-between;
}

section#floorplans .overlay .content .col1,
section#floorplans .overlay .content .col2 {
	max-height: 100%;
	overflow: hidden;
	width: 35%;
}

section#floorplans .overlay .content .col2 {
	width: 55%;
}

section#floorplans .overlay .content .col1 {
	display: flex;
	flex-direction: column;
	justify-content: end;
	line-height: var(--line-height-02);
}

section#floorplans .overlay .content .col1 .apartment-location {
	margin-top: 2em;
	height: 5em;
}

section#floorplans .overlay .content .col1 .apartment-location img:first-child {
	margin-right: 1em;
}

section#floorplans .overlay .content .apartment-name {
	font-weight: 500;
	margin-bottom: 1em;
}

section#floorplans .overlay .content .col2 > .floorplan-wrapper {
	width: 100%;
	height: 100%;
}

section#floorplans .overlay .content .col2 > .floorplan-wrapper > div {
	width: 100%;
	height: 100%;
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;
	background-color: transparent;
	display: none;
}

section#floorplans .overlay .content .col2 > .floorplan-wrapper > div.active {
	display: block;
}

section#floorplans .overlay .switchfloor {
	position: absolute;
	right: 0;
	top: 0;
	background-color: var(--white);
	color: var(--black);
	font-size: var(--font-size-01);
	cursor: pointer;
	font-weight: 500;
	padding: 0.5em;
	z-index: 100;
}

section#floorplans .content > .inner .col2 ul.floorplan-menu {
	display: none;
}

section#floorplans #floorplan-overlay .content .col1 .floorplan-link,
section#floorplans #floorplan-overlay .content .col1 .floorplan-link-close {
	display: none;
}


/* footer */

.footer {
	background-color: var(--footer-bg);
	color: var(--footer-text);
	text-align: center;
	font-size: var(--font-size-01);
	line-height: var(--line-height-01);
}

.footer a {
	color: var(--footer-link);
}

.footer .residea-logo {
	margin-bottom: 1rem;
}

.footer-content-wrapper {
	padding: 3rem 2rem;
}

.footer .footer-bottom {
	background-color: var(--footer-bottom-bg);
	padding: 1rem 2rem;
}

/* slideshow */

section .slideshow {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

section .slideshow > .slide {
	position:absolute;
	top: 0;
	left: 0;
	width:  100%;
	height: 100%;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	background-color: transparent;
	background-image: none;
}


/* pager */

ul.pager,
ul.pager-neighbourhood {
	position: absolute;
	bottom: var(--default-margin-top);
	right: var(--default-margin-left);
	display: flex;
	flex-direction: row;
	justify-content: end;
	z-index: 100;
	
}

ul.pager li,
ul.pager-neighbourhood li {
	border: 1px solid var(--white);
	color: var(--white);
	border-radius: 50%;
	width: 4vw;
	height: 4vw;
	text-align: center;
	margin-left: 1vw;
	font-size: var(--font-size-02);
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: background-color 0.5s ease;
}

ul.pager li.active,
ul.pager-neighbourhood li.active {
	background-color: var(--white);
	color: var(--wilhelmsblau);
}

/* imprint and privacy */

#imprint-overlay {
	background-color: var(--vanille);
	color: var(--black);
}

#imprint-overlay a.close {
	background-image: url("../images/Pfeil_back_black.svg");
}

#imprint-overlay .content-wrapper {
	position: absolute;
	top: calc(3 * var(--default-margin-top));
	left: var(--default-margin-left);
	bottom: calc(2 * var(--default-margin-top));
	right: var(--default-margin-left);
}

#imprint-overlay .content-wrapper .content {
	line-height: 1.5em;
	width: 70%;
}

#imprint-overlay .content-wrapper .content .title {
	font-size: var(--font-size-02);
	margin-bottom: 2rem;
}

/* media queries */

@media (orientation: portrait) {
	
	section#intro .text {
		top: calc(5 * var(--default-margin-top));
		bottom: auto;
	}
	
	section#intro > .content .headline br {
		display: none;
	}

	section#intro > .content .image-wrapper > .mask {
		top: 70%;
		left: 50%;
		width: 400vw;
		height: 400vw;
	}

	section#neighbourhood > .content .image-wrapper > .circle {
		left: 50%;
		top: 40%;
		width: 75vw;
		height: 75vw;
	}

	section#neighbourhood .location-container > div {
		bottom: calc(3 * var(--default-margin-top));
	}
	
	section#neighbourhood .location-container > div {
		max-width: 100%;	
	}
	
	section#intro .text,
	section#history .text {
		right: var(--default-margin-left);
		width: auto;
	}
	
	section#floorplans .content > .inner {
		top: calc(5 * var(--default-margin-top));
	}
	
	section#floorplans > .content > .inner > .col1 {
		display: none;
	}

	section#floorplans > .content > .inner > .col2 {
		width: auto;
	}
	
	section#floorplans > .content > .inner > .col2 .headline {
		margin-bottom: 3rem;
	}
	
	section#floorplans > .content > .inner > .col2 ul.floorplan-menu {
		display: block;
		margin-top: 3rem;
	}
	
	section#floorplans #floorplan-overlay .content .slideshow > .slide > .apartment-inner {
		display: block;
	}

	section#floorplans #floorplan-overlay .content .col1 {
		display: block;
		width: auto;
	}
	
	section#floorplans #floorplan-overlay .content .col1 .floorplan-link,
	section#floorplans #floorplan-overlay .content .col2 .floorplan-link-close {
		display: block;
		font-weight: 500;
		margin-top: 1em;
		cursor: pointer;
	}

	section#floorplans #floorplan-overlay .content .col1 .floorplan-link {
		margin-top: 1em;
	}

	section#floorplans #floorplan-overlay .content .col2 .floorplan-link-close {
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 100;
	}

	section#floorplans #floorplan-overlay .content .col2 {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: var(--wilhelmsblau);
		width: auto;
		height: auto;
		display: none;
	}

	section#floorplans #floorplan-overlay.overlay.color-bordeaux .content .col2 {
		background-color: var(--bordeaux);
	}

	section#floorplans #floorplan-overlay.overlay.color-kurkuma .content .col2 {
		background-color: var(--kurkuma);
	}

	section#floorplans #floorplan-overlay.overlay.color-vanille .content .col2 {
		background-color: var(--vanille);
	}

	section#floorplans #floorplan-overlay.overlay.color-wilhelmsblau .content .col2 {
		background-color: var(--wilhelmsblau);
	}

	section#floorplans #floorplan-overlay.overlay.color-rose .content .col2 {
		background-color: var(--rose);
	}

	section#floorplans #floorplan-overlay.overlay.color-olive .content .col2 {
		background-color: var(--olive);
	}

	section#floorplans #floorplan-overlay .content .col2.open {
		display: block;
	}

}

@media only screen and (max-width: 767px) and (orientation: landscape) {
	
	:root {
		font-size: 14px;
		--font-size-01: 1.25rem;
		--font-size-02: 1.25rem;
		--font-size-03: 2rem;
		--font-size-04: 2.5rem;
		--font-size-05: 2.5rem;
		--font-size-06: 2.5rem;
		--line-height-01: 1.5rem;
		--line-height-02: 1.5rem;
	}

	.logo {
		width: 30vw;
		height: calc(30vw*0.3);
	}
	
	.menu {
		width: calc(6vw*0.45);
		height: 6vw;
	}

	ul.pager li,
	ul.pager-neighbourhood li {
		width: 6vw;
		height: 6vw;
		font-size: var(--font-size-01);
	}

	section#floorplans .content > .inner {
		top: calc(4 * var(--default-margin-top));
		bottom: auto;
	}
	
	section#history .text {
		right: var(--default-margin-left);
		width: auto;
	}

	section#intro .text {
		top: calc(3 * var(--default-margin-top));
		bottom: auto;
	}

	section#location .claim {
		bottom: calc(1 * var(--default-margin-top));
	}
	  
	section#neighbourhood > .content .image-wrapper > .circle {
		top: 40%;
		width: 40vw;
		height: 40vw;
	}

	section#neighbourhood .location-container {
		bottom: calc(1 * var(--default-margin-top));
	}

	section#floorplans .content > .inner > .col1 {
		width: 40%;
	}
	
	section#floorplans > .content > .inner > .col2 {
		width: 55%;
	}
	
	section#floorplans > .content > .inner > .col2 .headline {
		margin-bottom: 3rem;
	}
	
	section#floorplans > .content > .inner > .col2 ul.floorplan-menu li > a {
		font-size: var(--font-size-01);
	}
	
	section#floorplans .overlay .content .slideshow {
		top: calc(3.5 * var(--default-margin-top));
	}

	section#floorplans > .content > .inner > .col2 .shapes {
		display: none;
	}
	
	section#floorplans #floorplan-overlay .content .slideshow > .slide > .apartment-inner {
		display: block;
	}

	section#floorplans #floorplan-overlay .content .col1 {
		display: block;
		width: auto;
	}

	section#floorplans .overlay .content .apartment-name br {
		display: none;
	}

	section#floorplans #floorplan-overlay .content .col1 .floorplan-link,
	section#floorplans #floorplan-overlay .content .col2 .floorplan-link-close {
		display: block;
		font-weight: 500;
		margin-top: 1em;
		cursor: pointer;
	}

	section#floorplans #floorplan-overlay .content .col1 .floorplan-link {
		margin-top: 1em;
	}

	section#floorplans #floorplan-overlay .content .col2 .floorplan-link-close {
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 100;
	}

	section#floorplans #floorplan-overlay .content .col2 {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: var(--wilhelmsblau);
		width: auto;
		height: auto;
		display: none;
	}

	section#floorplans #floorplan-overlay.overlay.color-bordeaux .content .col2 {
		background-color: var(--bordeaux);
	}

	section#floorplans #floorplan-overlay.overlay.color-kurkuma .content .col2 {
		background-color: var(--kurkuma);
	}

	section#floorplans #floorplan-overlay.overlay.color-vanille .content .col2 {
		background-color: var(--vanille);
	}

	section#floorplans #floorplan-overlay.overlay.color-wilhelmsblau .content .col2 {
		background-color: var(--wilhelmsblau);
	}

	section#floorplans #floorplan-overlay.overlay.color-rose .content .col2 {
		background-color: var(--rose);
	}

	section#floorplans #floorplan-overlay.overlay.color-olive .content .col2 {
		background-color: var(--olive);
	}

	section#floorplans #floorplan-overlay .content .col2.open {
		display: block;
	}
	
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
	
	:root {
		font-size: 14px;
		--font-size-01: 1.25rem;
		--font-size-02: 1.25rem;
		--font-size-03: 2rem;
		--font-size-04: 2.5rem;
		--font-size-05: 2.5rem;
		--font-size-06: 2.5rem;
		--line-height-01: 1.5rem;
		--line-height-02: 1.5rem;
	}

	.logo {
		width: 30vw;
		height: calc(30vw*0.3);
	}
	
	.menu {
		width: calc(6vw*0.45);
		height: 6vw;
	}
	
	section .claim {
		bottom: calc(5 * var(--default-margin-top));
	}

	ul.pager li,
	ul.pager-neighbourhood li {
		width: 8vw;
		height: 8vw;
		font-size: var(--font-size-01);
	}

	section#location .map-locations .schlossstrasse {
		display: none;
	}
	
	section#neighbourhood > .content .image-wrapper > .circle {
		top: 35%;
	}

	section#neighbourhood .location-container {
		bottom: calc(1 * var(--default-margin-top));
	}
	
	section#floorplans > .content > .inner > .col2 ul.floorplan-menu li > a {
		font-size: var(--font-size-01);
	}
	
	section#floorplans .overlay .content .slideshow {
		top: calc(5 * var(--default-margin-top));
	}

	section#floorplans > .content > .inner > .col2 .shapes {
		display: none;
	}

}