/*****************************************************/
/*** Basics ***/

html,body{
	background:var(--black);
	color: var(--white);
	width:100%;
	height:100%;
	margin: 0; 
	padding: 0;} 

img {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

#debug-panel{
	position:fixed;
	display: block;
	width: 100%;
	bottom: 6%;left: 2%;
	color: red;z-index: 10;}

/*****************************************************/
/*** CSS Variables ***/

:root {
  --black: #2E2E37;
  --white: white;
  --yellow: #FFE600;
  --transition: 0.40s ease-in-out all !important;
}

/*****************************************************/
/*** Top nav ***/

section#nav-wrapper{
	width: 100%;
	height: 70px;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 3;
}

section nav{
	width: 100%;
	max-width: 1500px;
	height: 100%;
	margin: 0 auto;
	display: block;
}

div#logo {
	float: left;
	height: 50px;
	padding-left: 20px;
}

div#logo img{
	height: 100%;
}

.btn-outline{
	padding:  10px 20px;
	color: var(--white);
	outline: 2px solid var(--white);
	background: rgba(46,46,55,0.8);
	font-family: 'EYInterstate';
	text-decoration: none;
	text-transform: uppercase;
	font-weight: bold;
}

.mt-10{margin-top: 10px;}
.mt-20{margin-top: 20px;}
.mr-20{margin-right: 20px;}
.f-left{float: left;}
.f-right{float: right;}

/*****************************************************/
/*** Canvas styling ***/

section#mask{
  width: 100vw;
  height: 100%;
  overflow: hidden;
  cursor: grab;
  position: relative;
}

div#canvas{
  width: 200vw;
  height: 300%;
  position: absolute;
  top: 0;
  left: 0;
}
.slice{
  width: 50vw;
  height: 33.3%;
  float: left;
  /*outline: 2px solid red;*/
  background: transparent;
}

/* Mobile */
@media screen and (max-width: 768px){	
	div#canvas{
	  width: 400vw;
	}
	.slice{
	  width: 100vw;
	}
}

/*****************************************************/
/*** Texts styling ***/

h1,h2,h3{
  font-family: 'EYInterstate', Helvetica;
  font-weight: bold;
  font-size: 50px;
  line-height: 140%;
  text-align: left;
  margin: 0;
  padding: 0;
}

h5{
  font-family: 'EYInterstate', Helvetica;
  font-weight: lighter;
  font-size: 14px;
  line-height: 180%;
  text-align: left;
}

p{
  font-family: 'EYInterstate', Helvetica;
  font-weight: lighter;
  font-size: 18px;
  line-height: 180%;
  text-align: left;
}



/*****************************************************/
/*** Content section styling ***/

.slice-wrapper{
	width: 100%;
	height: 100%;
	position: relative;
}

.slice-wrapper h1, .slice-wrapper h2{
  text-shadow: 0px 0px 7px rgba(0, 0, 0, .7);
}

/*  slice 1 - Wavespace */
.wavespace{
	position: absolute; bottom: 0%;
	width: 80%;
	padding: 0 0 10% 13%;
	z-index: 3;
	max-width: 500px;
}

.wavespace h1{
	/*font-size: 52px;*/
	max-width: 500px;
}

/*  slice 2 - Team */
.team{
	position: absolute; bottom: 15%;right: 0;
	width: 90%;
	padding: 0 5% 10% 5%;
	z-index: 3;
	max-width: 570px;
}

.team h2{
	font-size: 36px;	
	max-width: 570px;
}

/*  slice 3 - Projects */
.projects{
	position: absolute; bottom: 15%;
	width: 75%;
	padding: 0 5% 10% 20%;
	z-index: 3;
	max-width: 550px;
}

.projects h2{
	max-width: 450px;
	font-size: 36px;
}


/*  slice 4 - Contact */
.contact{
	position: absolute; bottom: 17%;
	width: 80%;
	padding: 0 0 7% 3%;
	z-index: 3;
	max-width: 500px;
}


/*****************************************************/
/*** Triangle styling ***/

.triangle, .triangle-fixed{
	display: block;
	position: absolute;
	/*background: var(--black);*/
	overflow: hidden;
	transition: 0.2s ease;
}

.t-yellow-100{background: var(--yellow);}
.t-yellow-50{background: var(--yellow);opacity: 0.5;}
.t-grey-100{background: #828287;}
.t-grey-50{background: #58585F;}

.triangle:hover{
	transform: scale(1.04);
	transition: 0.2s ease;
}

.reference-point{
	/*filter: drop-shadow(0px 0px 22px rgba(0,0,0,0.3));*/
}

.triangle-down{
	clip-path: polygon(0% 0%, 100% 0%, 50% 100%, 50% 100%);
}

.triangle-up{
	clip-path: polygon(50% 0%, 50% 0%, 100% 100%, 0% 100%);
}

.reference-point{
	width: 100%;
	position: relative;
	max-width: 900px;
	max-height: 900px;
	min-width: 600px;
	min-height: 600px;
	float: right;
}


/*****************************************************/
/*** Article styling ***/

/**/
/* Closed */
/**/
.wrapper{
	width: 200%;
	transition: var(--transition);
}

.article-picture{
 width: 50%;
 float: left;
 transition: var(--transition);
}

.article-picture img{
	width: 100%;
	padding-left: 0;
	transition: var(--transition);
}

.article-content{
	width: 50%;
	float: left;
	padding-top: 0%;
	padding-left: 0%;
	padding-right: 0%;
	transition: var(--transition);
}

/**/
/* Opening */
/**/
.article-opening{
	height: 100%;
	transition: var(--transition);
	z-index: 3;
}

.article-opening:hover{
	transform: scale(1.0) !important;
	transition: 0.2s ease;
}

.article-opening .wrapper{
	width: 100%;
	transition: var(--transition);
}

.article-opening .article-picture{
	width: 50%;
	transition: var(--transition);
}
.article-opening .article-picture img{
	width: 80%;
    padding-left: 15%;
    padding-top: 20%;
	transition: var(--transition);
	float: right;
	max-width: 600px;
}
.article-opening .article-content{
	width: 40%;
	padding-top: 15%;
	padding-left: 2%;
	padding-right: 8%;
	transition: var(--transition);
	max-width: 600px;
}

/**/
/* Mobile */
/**/
@media screen and (max-width: 768px){
	.wrapper{width: 100%;overflow-y: scroll; -ms-overflow-style: none;scrollbar-width: none;}
	.article-opening{overflow-y: scroll !important; -ms-overflow-style: none;scrollbar-width: none;}
	.wrapper::-webkit-scrollbar, .article-opening::-webkit-scrollbar{display: none;}
	.article-picture{width: 100%;}
	.article-opening .article-picture{width: 100%;}
	.article-opening .article-picture img{float: left;width: 100%;max-width: 100%;padding: 0;}
	.article-opening .article-content{width: 100%;}
}

/*****************************************************/
/*** Disclaimers ***/

.disclaimer{
	width: 100vw;
	height: 100vh;
	background: var(--black);
	color: var(--white);
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 100;
	position: fixed;
	top: 0;
	left: 0;
}

.disclaimer h2, .disclaimer p{
	text-align: center !important;}


@media screen and (max-width: 768px) and (orientation: landscape){
	.landscape-issue{display: flex !important;}
}

@media screen and (max-device-width: 768px) and (orientation: landscape){
	.landscape-issue{display: flex !important;}
}

.available-actions{
	display: flex;
	background: rgba(46,46,45,0.9);
	
}

.btn-available-actions{
	outline:0px !important;
	border: 0px !important;
	display: block; 
	margin: 0 auto;
	text-align: center;
	position: absolute;
	width: 100%;
	bottom: 5%;
	left: 0;
}