@charset "UTF-8";
/* Body */
@font-face {
  font-family: "Suisse Intl Regular"; /* regular font */
  src: url("SuisseIntl-Regular-WebS.woff") format("woff"),
	  url("SuisseIntl-Regular-WebS.woff2") format("woff2"),
	  url("SuisseIntl-Regular-WebS.ttf") format("ttf"),
	  url("SuisseIntl-Regular-WebS.eot") format("eot");
}
@font-face {
  font-family: "Suisse Intl Light"; /* light font */
  src: url("SuisseIntl-Light-WebS.woff") format("woff"),
	  url("SuisseIntl-Light-WebS.woff2") format("woff2"),
	  url("SuisseIntl-Light-WebS.ttf") format("ttf"),
	  url("SuisseIntl-Light-WebS.eot") format("eot");
}
body {
	font-family: "Suisse Intl Light", "Suisse Intl Regular";
	background-color: #ffffff;
	color: #000000;
	margin: 0;
	padding: 0;
	font-kerning: auto;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-moz-hyphens: auto;
	-o-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	–webkit-overflow-scrolling: touch;
	-webkit-overflow-scrolling: auto;
}
#app{
	margin: 0;
	padding: 0;
	height: 100%;
}
.imprintwrap, .infowrap{
	 -webkit-animation: 1s ease 0s normal forwards 1 initialfade;
    animation: 2s ease 0s normal forwards 1 initialfade;
}
@keyframes initialfade{
    0% { opacity:0; }
	20% { opacity:0; }
    100% { opacity:1; }
}

@-webkit-keyframes initialfade{
    0% { opacity:0; }
    20% { opacity:0; }
    100% { opacity:1; }
}
.gridinfo {
    -webkit-animation: 3s ease 0s normal forwards 1 fadein;
    animation: 3s ease 0s normal forwards 1 fadein;
}
@keyframes fadein{
    0% { opacity:0; }
	20% { opacity:0; }
    100% { opacity:1; }
}

@-webkit-keyframes fadein{
    0% { opacity:0; }
    20% { opacity:0; }
    100% { opacity:1; }
}
section{
	opacity: 0;
	transition: transform 4s .25s cubic-bezier(0,1,.3,1), opacity .5s .25s ease-out;
	will-change: transform, opacity;
}
section.is-visible{
	opacity: 1;
}
svg:hover {
	-webkit-transition: all 600ms ease-in-out;
    transition: all 600ms ease-in-out;
	fill: darkgrey;
}
a:hover{
	-webkit-transition: all 600ms ease-in-out;
    transition: all 600ms ease-in-out;
	color: darkgrey;
}
a {
	text-decoration: none;
	color: black;
}

.info, .slide-count-wrap, .footer {
	font-family: "Suisse Intl Light";
	text-align: right;
	background-color: white;
}
.specs_bigname, .specs_headline, body {
	font-family: "Suisse Intl Light";
}
.specs_headline_thicker, .description {
	font-family: "Suisse Intl Regular";
}
.slider img {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;	
}
.slider img.rightarrow, .slider img.leftarrow{
	display: none;
}
header {
	background-color: white;
	left: 0;
	right: 0;
	top: 0;
	position: fixed;
	z-index: 100;
}
p{
	margin-block-start: 0px;
    margin-block-end: 0px;
}
.span-col-1 {
	grid-column: span 2;
}
.span-col-2 {
	grid-column: span 2;
}
.slider {
	grid-row: 1 / span 1;
	height: 100%;
	width: 100%;
}
.projectwrap {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}
.leftwrapper {
	display: grid;
	grid-template-rows: repeat(9, 1fr);
}
.infowrap {
	display: grid;
	height: 100vh;
	min-height: 100%;
}
.gridinfo {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: max-content;
	padding-bottom: 2vw;
}
.slide-count-wrap {
	grid-row: row 1;
	grid-column: 1 / span 2;
}
.wrapper {
	display: grid;
	grid-template-columns: repeat(7, 12vw);
	grid-column-gap: 1.42vw;
	grid-row: row 2;
	grid-template-rows: repeat(4, auto);
}
.a {
	grid-column: 1 / span 7;
	grid-row: row 1;
}
.j {
	grid-column: 1 / span 7;
	grid-row: row 2;
}
.b {
	grid-column: 1 / span 1;
	grid-row: row 3;
}
.c {
	grid-column: 2 / span 2;
	grid-row: row 3;
}
.d {
	grid-column: 4 / span 2;
	grid-row: row 3;
}
.e {
	grid-column: 6 / span 2;
	grid-row: row 3;
}
.f {
	grid-column: 1 / span 1;
	grid-row: row 4;
}
.g {
	grid-column: 2 / span 2;
	grid-row: row 4;
}
.h {
	grid-column: 4 / span 2;
	grid-row: row 4;
}
.i {
	grid-column: 6 / span 2;
	grid-row: row 4;
}
.description {
	grid-row: row 3;
}
.slide-count-wrap {
	border-top: solid 1px;
	border-bottom: solid 1px;
}
.footer {
	border-bottom: solid 1px;
	border-top: solid 1px;
	align-self: end;
}
.specs_bigname {
	font-size: 7vw;
	padding-bottom: 3vw;
	line-height: 1;
}
.wrapper {
	padding: 3vw;
}
.specs_headline {
	font-size: 3.1vw;
	padding-bottom: 1vw;
}
.specs_headline_thicker {
	font-size: 3.1vw;
}
.logo {
	width: 94vw;
	padding: 2vw 3vw;
	line-height: 1;
}
.info {
	border-bottom: solid 1px;
	border-top: solid 1px;
}
.description {
	font-size: 4vw;
	line-height: 1.5;
	padding: 10vw 3vw;
}
.info, .footer, .slide-count-wrap {
	font-size: 6vw;
	padding: 1vw 3vw;
}
.gridinfo {
	padding: 3vw;
}
.biginfotext {
	grid-column: 1 / span 4;
	font-size: 7vw;
	padding: 3vw 0;
}
.smallinfotextone {
	grid-column: 1 / span 2;
	font-size: 4vw;
}
.imprint {
	grid-column: 1 / span 4;
	font-size: 3vw;
	padding: 3vw 0;
}
.displaynone {
	color: #FFFFFF;
}
/*iPad portrait*/
@media only screen and (min-width : 768px) and (max-width : 1366px) and (orientation : portrait){	
	.specs_bigname {
		font-size: 5.8vw;
		padding-bottom: 2vw;
	}
	.logo {
		width: 47vw;
		padding: 2vw 3vw;
	}
	.wrapper {
		padding: 3vw;
	}
	.specs_headline {
		font-size: 2vw;
		padding-bottom: 1vw;
	}
	.specs_headline_thicker {
		font-size: 2vw;
	}
	.description {
		font-size: 2.8vw;
	}
	.info, .slide-count-wrap, .footer {
		font-size: 3.5vw;
		padding: 1vw 3vw;
	}
	.gridinfo {
		padding: 21.5vw 3vw 3vw 3vw;
	}
	.biginfotext {
		font-size: 5.8vw;
	}
	.smallinfotextone {
		font-size: 2.8vw;
	}
	.imprint {
		grid-column: 3 / span 2;
		font-size: 2vw;
	}
}
/*ALL MOBILE; landscape*/
@media only screen and (min-width : 375px) and (max-width: 823px) and (orientation : landscape){
/*grid change*/
	.span-col-1 {
		grid-column: span 2;
	}
	.slider {
		grid-row: 1 / span 1;
		height: 100%;
		width: 100%;
	}
	.span-col-1.slide-count-wrap {
		grid-row: row 1;
		grid-column: 1 / span 2;
	}
	.logo {
	width: 28vw;
	padding: 1vw 2vw;
	}
	.wrapper {
		display: grid;
		padding: 2vw 2vw 0 2vw;
		grid-template-columns: repeat(10, 8.5vw);
		grid-column-gap: 1vw;
		grid-template-rows: 2vw 1fr;
		grid-row: row 2;
	}
	.a {
		grid-column: 1 / span 3;
		grid-row: 1 / span 1;
	}
	.j {
		grid-column: 1 / span 3;
		grid-row: 2/ span 1;
	}
	.b {
		grid-column: 4 / span 1;
		grid-row: 1 / span 1;
	}
	.c {
		grid-column: 5 / span 2;
		grid-row: 1 / span 1;
	}
	.d {
		grid-column: 7 / span 2;
		grid-row: 1 / span 1;
	}
	.e {
		grid-column: 9 / span 2;
		grid-row: 1 / span 1;
	}
	.f {
		grid-column: 4 /span 1;
		grid-row: 2 / span 1;
	}
	.g {
		grid-column: 5 / span 2;
		grid-row: 2 / span 1;
	}
	.h {
		grid-column: 7 / span 2;
		grid-row: 2 / span 1;
	}
	.i {
		grid-column: 9 / span 2;
		grid-row: 2 / span 1;
	}
	.description {
		grid-row: row 3;
		border-bottom: solid 1px;
	}
	.gridinfo {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
	.imprint {
		grid-column: 3 / span 2;
	}
	.footer{
		border-top: none;
	}
	.info-footer{
		border-top: solid 1px;
	}
}
/*iPhone 4 Landscape*/
@media only screen and (min-width : 375px) and (max-width: 480px) and (orientation : landscape){
	.specs_bigname, .biginfotext {
		font-size: 4.5vw;
	}
	.specs_headline, .specs_headline_thicker {
		font-size: 2.2vw;
	}
	.slider {
		padding: 0 23vw;
		align-content: center;
	}
	.description {
		line-height: 1.5;
		font-size: 2.7vw;
		padding: 10vw 2vw;
	}
	.wrapper {
		grid-row-gap: 1.5vw;
	}
	.logo {
		width: 28vw;
		padding: 0.67vw 2vw;
	}
	.info, .slide-count-wrap, .footer {
		font-size: 4vw;
		padding: 0.67vw 2vw;
	}
	.gridinfo {
		padding: 16.5vw 2vw 2vw 2vw;
	}
	.biginfotext {
		grid-column: 1 / span 4;
		padding: 2vw 0;
	}
	.smallinfotextone {
		grid-column: 1 / span 2;
		font-size: 2.7vw;
	}
	.imprint {
		padding-top: 4vw;
		font-size: 2vw;
	}
}
/*medium phones Landscape*/
@media only screen and (min-width : 481px) and (max-width: 811px) and (orientation : landscape){
	.specs_bigname {
		font-size: 3.9vw;
	}
	.slider {
		padding: 0 27vw;
	}
	.wrapper {
		grid-row-gap: 0.8vw;
	}
	.logo {
		width: 28vw;
		padding: 0.55vw 2vw;
	}
	.specs_headline, .specs_headline_thicker {
		font-size: 1.8vw;
	}
	.description {
		font-size: 2.3vw;
		line-height: 1.5;
		padding: 10vw 2vw;
	}
	.info, .slide-count-wrap, .footer {
		font-size: 3.4vw;
		padding: 0.55vw 2vw;
	}
	.gridinfo {
		padding: 13.8vw 2vw 2vw 2vw;
	}
	.biginfotext {
		grid-column: 1 / span 4;
		font-size: 3.9vw;
		padding: 2vw 0;
	}
	.smallinfotextone {
		grid-column: 1 / span 2;
		font-size: 2.3vw;
	}
	.imprint {
		padding-top: 4vw;
		font-size: 1.5vw;
	}
}
/*iPhone X Landscape*/
@media only screen and (min-width : 812px) and (max-width : 812px) and (orientation : landscape){
	.slider {
		align-content: center;
		padding: 0 31vw 0 31vw;
		height: 100%;
		width: 100%;
	}
	.info, .slide-count-wrap, .footer {
		font-size: 2.77vw;
		padding: 0.45vw 2vw;
	}
	.specs_bigname {
		font-size: 3.3vw;
		padding-bottom: 2vw;
	}
	.wrapper {
		padding: 2vw;
		grid-row-gap: 0.45vw;
	}
	.logo {
		width: 28vw;
		padding: 0.45vw 2vw;
}
	.specs_headline {
		font-size: 1.4vw;
	}
	.specs_headline_thicker {
		font-size: 1.4vw;
	}
	.description {
		font-size: 1.9vw;
		padding: 10vw 2vw;
		line-height: 1.5;
	}
	.gridinfo {
		padding: 11.5vw 2vw 2vw 2vw;
	}
	.biginfotext {
		grid-column: 1 / span 4;
		font-size: 3.3vw;
		padding: 2vw 0;
	}
	.smallinfotextone {
		grid-column: 1 / span 2;
		font-size: 1.9vw;
	}
	.imprint {
		padding-top: 4vw;
		font-size: 1.4vw;
	}
}
/*LANDSCAPE IPAD / DESKTOP*/
@media only screen and (min-width: 824px) and (orientation : landscape){
	.span-col-2 {
		grid-column: span 2;
	}
	.span-col-1 {
		grid-column: span 1;
	}
	.info {
		border-top: solid 1px;
	}
	.info, .footer {
		padding: 1vw 2vw;
	}
	.imprint {
		grid-column: 3/ span 2;
		padding: 2.5vw;
	}
	.description {
		line-height: normal;
		grid-row: 4 / span 5;
		align-self: end;
		padding: 0 2vw;
	}
	.slide-count-wrap {
		grid-row: 9 / span 1;
		align-self: end;
		border: none;
		padding: 0 2vw 2vw 2vw;
	}
	.projectwrap {
		border-bottom: solid 1px;
		display: grid;
	}
	.logo {
		width: 37vw;
		padding: 1vw 2vw;
	}
	.wrapper {
		display: grid;
		grid-template-columns: repeat(10, 3.6vw);
		grid-column-gap: 1vw;
		grid-template-rows: 2vw 1fr;
		grid-row: 1 / span 3;
		grid-column: 1 / span 1;
		padding: 2vw 2vw 0 2vw;
	}
	.a {
		grid-column: 1 / span 3;
		grid-row: 1 / span 1;
	}
	.j {
		grid-column: 1 / span 3;
		grid-row: 2/ span 1;
	}
	.b {
		grid-column: 4 / span 1;
		grid-row: 1 / span 1;
	}
	.c {
		grid-column: 5 / span 2;
		grid-row: 1 / span 1;
	}
	.d {
		grid-column: 7 / span 2;
		grid-row: 1 / span 1;
	}
	.e {
		grid-column: 9 / span 2;
		grid-row: 1 / span 1;
	}
	.f {
		grid-column: 4 /span 1;
		grid-row: 2 / span 1;
	}
	.g {
		grid-column: 5 / span 2;
		grid-row: 2 / span 1;
	}
	.h {
		grid-column: 7 / span 2;
		grid-row: 2 / span 1;
	}
	.i {
		grid-column: 9 / span 2;
		grid-row: 2 / span 1;
	}
	.biginfotext {
		grid-column: 3 / span 2;
		padding: 2vw 0;
	}
	.smallinfotextone {
		grid-column: 3 / span 1;
	}
	.displaynone {
		color: #FFFFFF;
	}
	.slider {
		width: 50vw;
		grid-column: 2 / span 1;
	}
	.footer {
		border-top: none;
	}
	.info-footer {
		border-top: solid 1px;
		border-bottom: solid 1px;
		align-self: end;
	}
	.projectwrap, .info {
		border-bottom: solid 1px;
	}
}
/*iPad landscape*/
@media only screen and (min-width : 824px) and (max-width : 1366px) and (orientation : landscape){	
	.info, .slide-count-wrap, .footer {
		font-size: 1.8vw;
	}
	.gridinfo {
		padding: 15.4vw 2vw 2vw 2vw;
	}
	.slide-count-wrap {
		padding: 0 2vw 2vw 0;
	}
	.specs_bigname {
		font-size: 2.3vw;
	}
	.specs_headline {
		font-size: 0.9vw;
	}
	.specs_headline_thicker {
		font-size: 0.9vw;
	}
	.description {
		font-size: 1.3vw;
	}
	.biginfotext {
		font-size: 2.3vw;
	}
	.smallinfotextone {
		font-size: 1.3vw;
	}
	.imprint {
		font-size: 1vw;
	}
}
/*Desktop*/
@media only screen and (min-width: 1367px){
	.logo{
		width: 36vw;
		padding: 1vw 2vw;
	}
	.specs_bigname {
		font-size: 2.1vw;
	}
	.specs_headline {
		font-size: 0.8vw;
	}
	.specs_headline_thicker {
		font-size: 0.8vw;
	}
	.gridinfo {
		padding: 12.8vw 2vw 2vw 2vw;
	}
	.info, .slide-count-wrap, .footer {
		font-size: 1.4vw;
	}
	.description {
		font-size: 1.4vw;
	}
	.biginfotext {
		font-size: 2.1vw;
	}
	.smallinfotextone {
		font-size: 1.4vw;
	}
	.imprint {
		font-size: 1vw;
	}
}
@media only screen and (min-width : 824px) and (orientation : landscape) and (pointer: fine){
	/*Arrows instead of touch swipe*/
.slider img.leftarrow{ 
	position: absolute;
	left: 2vw;
	bottom: 2vw;
	display: block;
	height: auto;
	width: 2.5vw;
}
.slider img.rightarrow{
	position: absolute;
	display: block;
	right: 2vw;
	bottom: 2vw;
	height: auto;
	width: 2.5vw;
}
.slider>.slick-prev {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
}
.slider>.slick-next {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
}
.slider>.slick-next, .slider>.slick-prev{
	width: 50%;
	opacity: 0;
	z-index: 1;
	margin: 0;
	padding:0;
}
.slider>.slick-next:hover, .slider>.slick-prev:hover{
	opacity: 1;
	-webkit-transition: all 600ms ease-in-out;
    transition: all 600ms ease-in-out;
}
}