/* reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, section, summary,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  font:inherit;
  vertical-align:baseline;
  box-sizing:border-box;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
  list-style-type:none;
}

:root {--vh: 100vh; /* Fallback */}

@font-face{
    font-family:"unica";
    src:url('../fonts/Unica77LL-Regular.otf');
    font-weight:400;
    font-style:normal;
}

h1{
	font-size:0.7em;
	font-family:unica;
	line-height:1em;
	letter-spacing:0.04em;
	color:black;
}
.emspace{margin-left:1em}
.separation{line-height: 2em;}
a{
	text-decoration:none;
	color:black;
}
a:hover{color:lightgrey;}
a:hover{
	-webkit-transition:color .1s;
	transition:color .1s;
}

body{
	position:absolute;
	display:inline-block;
	height:var(--vh);
	touch-action:manipulation;

}

.cursor{
	position:absolute;
	width:50vw;
	height:100%;
	z-index:100;
	-webkit-user-select:none;
	-moz-user-select:none;
	-khtml-user-select:none;
	-ms-user-select:none
}
.right{
	margin-left:50vw;
	cursor:-webkit-image-set(
    url("arrow-right.png") 1x,
    url("arrow-right-2x.png") 2x), pointer;
}
.left{
	margin-left:0;
	cursor:-webkit-image-set(
    url("arrow-left.png") 1x,
    url("arrow-left-2x.png") 2x), pointer;
}
#header{
	width:100vw;
	padding:40px;
	position:absolute;
	z-index:1000;
}
#caroussel{
	width:100vw;
	height:100%;
}
.legende{
	position:fixed;
	padding:40px;
	width:100%;
	text-align:left;
	bottom:0;
	left:0;
	z-index:2;
	cursor:inherit;
	opacity:0;
}
.legende li{
	display:inline-block;
	margin-right:1em;
}
#arrow,.image{position:absolute}
.image{
	width:calc(100vw - 8em - 100px);
	height:calc(100% - 8em - 100px);
	margin:calc(4em + 50px);
	text-align:center;
	background-color:#fff;
	background-position:50%;
	background-repeat:no-repeat;
	background-size:contain;
	opacity:0;
	z-index:1;
	-webkit-user-select:none;
	-moz-user-select:none;
	-khtml-user-select:none;
	-ms-user-select:none
}
video{
	width:100%;
	height:100%;
}
.vertical{
	width:calc(50vw - 4em - 80px);
	margin-left:calc(4em + 70px);
	background-position: 100% 50% !important;
}
.vertical-solo{
	width:calc(100vw - 8em - 100px);
	background-position:50%;
}
.showing + .vertical {
	opacity:1;
	margin-left:calc(50vw + 10px);
	background-position: 0% 50% !important;
}
.showing{
	opacity:1;
	z-index:2;
}
.showing > .legende{
	opacity:1 !important;
	z-index:1000
}

/*Infos*/

.infos-link{
	position:absolute;
	padding:40px;
	top:0;
	right:0;
}
#infos{
	position:absolute;
	padding:40px;
	width:100vw;
	text-align:left;
	bottom:0;
}

#infos li{
	display:inline-block;
	margin-right:1em;
}

@media screen and (max-width:640px){
	h1{font-size:0.6em}
	body{overflow-y:hidden;}
	#header{padding:20px}
	.legende{padding:20px}
	#infos{padding:20px}
	.infos-link{padding:20px;}
	#arrow{
		opacity:0;
		z-index:1
	}
	.image{
		width:calc(100vw - 4em - 40px);
		height:calc(100% - 4em - 40px);
		margin:calc(2em + 20px);
	}
	.vertical{
		width:calc(100vw - 4em - 40px);
		height:calc(100% - 4em - 40px);
		margin:calc(2em + 20px);
		background-position:50%;
	}
	.showing ~ .vertical{
		opacity:0;
		margin-left:calc(2em + 20px);
		background-position:50%;
	}
}