@charset "UTF-8";

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––*
 * Clearfix 
 *–––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* target only IE8 with the following class */
.ie8 .my-class { ... }

.clearfix:after {  /*  Firefox, IE8, Opera, Safari, etc. */
    content: ".";  
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
 
* + html .clearfix { /*  IE7 */
    display: inline-block;
}
 
* html .clearfix { /*  IE6 */
	height: 1%;
}

@font-face { 
	font-family: suisse; 
	src: url(../font/SuisseIntl-Regular.otf); 
	font-weight:100; 
	}

@font-face { 
	font-family: italic; 
	src: url(../font/SuisseIntl-RegularItalic.otf); 
	font-weight:100; 
	}	

@font-face { 
	font-family: works; 
	src: url(../font/SuisseWorks-Regular.otf); 
	font-weight: normal; 
	}	

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
::selection {
	background: #F4F4F4; /* WebKit/Blink Browsers */
	color: blue;
  }
  ::-moz-selection {
	background: #F4F4F4; /* Gecko Browsers */
	color: blue;
  }

a{
	text-decoration:none;
	color: #414042;
}

a:visited{
color: #414042;
}


a:hover{
	color: blue;
	cursor: url("../img/cursor.png") 10 10, pointer;
	cursor: -webkit-image-set(url("../img/cursor.png") 2x) 10 10, pointer;
}


body{
	margin:0;
	background-color: #F4F4F4;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
	font-family: suisse, Helvetica, Arial, sans-serif;
	cursor: url("../img/cursor.png") 10 10, pointer;
	cursor: -webkit-image-set(url("../img/cursor.png") 2x) 10 10, pointer;
}


#header-wrapper {
    position: fixed;
    top: -7px;
    z-index: 99999999999;	
	
}

#header {
    top: 0;
    z-index: 100;
    display: flex;
	width: calc(100vw - 2px);
    justify-content: space-between;
    margin-left: 1px;
    margin-right: 1px;	
}

.introvideo{
	padding:56.25% 0 0 0;
	position:relative; 
}

iframe{
	border-radius:30px;
	width: 100%;
	max-width: 100vw;
	}

.introswiper{
	width: 100%;
	height: 100vh;
	overflow: hidden;
	position: relative;
}

.introslide{
	width: 100%;
	height: 100vh;
	display: flex;
	transition: transform 0.5s ease-in-out;
}

.introslide img{
	width: 100%;
	height: 100vh;
	object-fit: cover;
}

.prev, .next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	padding: 1rem;
	background-color: #000;
	color: #fff;
	border: none;
}

.prev {
	left: .5rem;
}
  
.next {
	right: .5rem;
}

#bottomtitle{
	font-size: 2.8em;
    position: fixed;
    bottom: -10px;
    z-index: 99;
	display: flex;
    width: calc(100vw - 2px);
	justify-content: space-around;  
}

#wrapper{
	color: #414042;
	max-width:calc(100vw - 2px);
	min-width:300px;
	padding-top:10vh;
	margin-left:5px;
	margin-right: 5px;
}

#wrapper img{
	width:100%;
	max-width:1150px;
	margin-right:10px;
}

#content{
	font-family: Helvetica, Arial, sans-serif;
	font-size:50px;
	max-width:80%;
	min-width:340px;
	margin-top:0px;
	margin-left:5px;

}


#content a{
text-decoration:underline;
}

#content a:hover{
text-decoration: none;
}


.switcher{
	position:relative;
	left:50%;
	width:254px;
	height:50px;
	padding-bottom:50px;
}

.switch{
	height:70px; 
	float:left;
	padding-right:35px;	
}

/*.swiper-wrapper {
	max-height: 100%;
	height: 100%;
	display: flex;
  }
  
  .swiper-container {
	height: auto;
	max-height: 100vh; 
	min-height: 0;
	min-width: 0;
	max-width: 100vw;
	width: auto;
	overflow: hidden;
  }
*/
  .swiper-slide {
	-webkit-transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	display: flex;
	align-items: center;
	
  }
    
  .video {
	width: inherit;
	max-width:1135px;
	max-height:1135px;
  }


/*----TEXT------------------*/
.headline{
	font-size: 3.2em;
	text-transform: uppercase;

	/*-ROUND CORNERS---
	border-radius: 200px;
	border: 1px solid #000000c6;
	margin-top: 10px;
	padding: 0px 15px;
	/*--*/
}

.projecthead{
	display: flex;
	width: calc(100% - 2px);
    justify-content: space-between;
	z-index: 10;
	background-image: linear-gradient(to bottom, #F4F4F4, #F4F4F4,#F4F4F4,#F4F4F4, #F4F4F400);
}

.projectname{	
	font-size: 3.2em;
	text-transform: uppercase;
	z-index: 10;
}

.projectinfo{
	font-size: 0.9em;
	text-transform: uppercase;
	cursor:help;
}

.description {
	width: 30%;
	margin-top: -10px;
	margin-bottom: 5px;
	font-size: 0.9em;
	line-height: 1.3em;
}

.page {
	font-size: 3.2em;
	text-align: end;	
}

.about{
	padding-top: 1vh;
	padding-bottom: .5vh;
	font-size: 3.2em;
	z-index: 10;
	line-height: 1.2em;
	display: flex;
	justify-content: center;
}

.italic{
	font-family: italic;
}	

.info{ 
	margin-top: 10vh;  
	margin-left: 5px; 
	font-size: 4em;
	line-height: 1.2em;
}

.references{
	font-size: 1.2em;
	line-height: 2em;
}

.refrow {
	margin-top: 2vh;
	margin-bottom: 20vh;
	display: flex;
	width: 100%;
  }
  
.refcolumn {
	flex: 50%;
	max-width: 50%;
	padding: 0 2px;
	
	font-size: 3em;
	line-height: 1.2em;
  }

/*--INDEX-------------------------------------------------------**/
.row {
	display: flex;
	flex-wrap: wrap;
	padding: 200px 2px;
	font-size: 0.7em;
	max-width: (100vw - 2px)
  }
  

  .column {
	flex: 19%;
	max-width: 20%;
	padding: 0 2px;
	margin-bottom: -3px;
  }
  
  .column img {
	margin-top: 8px;
	vertical-align: middle;
	width: 100%;

  }
  
  /* Responsive layout - makes a two column-layout instead of four columns */
  @media screen and (max-width: 800px) {
	.column {
	  flex:24%;
	  max-width: 25%;
	}
  }
  
  /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 600px) {
	.column {
	  flex: 49%;
	  max-width: 50%;
	}
  }


/*--MOBILE------------------------------------------------------**/


@media screen and (max-width:1000px){
	#header-wrapper{
		top: -4px;
		z-index: 99999999999;
	}

	#wrapper{
		margin-top:1vh;
		}


.refrow {
	flex-direction:column;
	margin-bottom: 5vh;
  }

	.refcolumn{
	font-size: 2em;
	max-width: 100%;
	}

	.headline, .projectname, .page, .about {
		font-size: 2em;
	}

	.swiper-button-prev .swiper-container-rtl .swiper-button-next{
		cursor: w-resize;
		mix-blend-mode: difference;
	}

	.swiper-button-next .swiper-container-rtl .swiper-button-prev{
		cursor: e-resize;	
		mix-blend-mode: difference;
	}

	.about{
		max-width: 100vw;
	}

	.info{
		font-size: 2em;
	}
}
@media screen and (max-device-width:900px){
	#wrapper{
		margin-top:10vh;
		}
}


@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */} 
@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }