/* 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);
}

:root {
	--vh: 100vh; /* Fallback */
}
/*typographie*/
@font-face{
    font-family:"insitu";
    src:url('../fonts/Insitu-Regular.otf');
    font-weight:200;
}
@font-face{
    font-family:"insitu";
    src:url('../fonts/Insitu-RegularItalic.otf');
    font-weight:200;
    font-style:italic;
}
@font-face{
    font-family:"antique-olive";
    src:url('../fonts/Antique-Olive-Std-Nord.ttf');
    font-weight:200;
}
@font-face{
    font-family:"antique-olive";
    src:url('../fonts/Antique-Olive-Std-Nord-Italic.ttf');
    font-weight:200;
    font-style:italic;
}
p{
	font-size:1em;
	line-height:1.2em;
	font-family:"insitu";
}
h1{
	font-size:4em;
	line-height:1em;
	font-family:"antique-olive";
	text-align:center;
}
h2{
	font-size:1.6em;
	line-height:1.2em;
	font-family:"insitu";
}
h3{
	font-size:1em;
	line-height:1.2em;
	font-family:"antique-olive";
}
h4{
	font-size:0.8em;
	line-height:1em;
	font-family:"insitu";
}
h5{
	font-size:1em;
	line-height:1.2em;
	font-family:"insitu";
	margin-top:1em;
	margin-bottom:1em;
	color:white;
}
a{
	text-decoration:none;
	color:inherit;
	color: white;
}

a:hover, .active, strong{
	text-decoration:underline;
	text-decoration-thickness:0.06em;
	text-underline-offset:0.15em;
	color: black;
}

a:hover {
	text-decoration: none;
}

i{font-style:italic;}

/*structure*/
html{
	scroll-behavior:smooth;
	font-size:100%;
}
body{
	display:inline-block;
	height:var(--vh);
}

.mobile{display:none;}

#panels {
	scroll-snap-type: x mandatory;
  overflow-x: scroll;
  display: flex;
	height: 100%;
  width: 100vw;
  flex-wrap: wrap;
  flex-direction: column;
}

.panel{
	width:100vw;
	height:100%;
	z-index:1;
	scroll-snap-align: start;
	position: relative;
}

.head{margin:10px;}

/*text columns*/
.columns p{
	-webkit-column-break-inside:avoid;
  	page-break-inside:avoid;
  	break-inside:avoid;
}
.columns[data-columns="2"]{
	margin:10px;
	column-count:2;
	column-gap:20px;
	text-align:center;
}
.columns[data-columns="2"] p, .columns[data-columns="3"] p{
	font-size:1.2em;
}
.columns[data-columns="3"]{
	margin:10px;
	column-count:3;
	column-gap:20px;
}
.columns[data-columns="4"]{
	margin:10px;
	column-count:4;
	column-gap:20px;
}
.columns p:nth-child(even){
	display:inline-block;
	padding-top:2.4em;
}
.columns[data-columns="6"]{
	margin:10px;
	column-count:6;
	column-gap:20px;
}
.columns[data-columns="6"] p{
	font-size:0.8em;
}

/*images*/
.gallery{
	position:absolute;
	width:100vw;
	height:calc(50vh - 1em - 30px);
	bottom:calc(30px + 2em);
}
.caroussel{
	display:block;
	height:100%;
	margin:10px;
	float:left;
	width:calc(50% - 20px);
}
.slide{
	position:absolute;
	top:0;
	height:100%;
	width:calc(50% - 20px);
	opacity:0;
	z-index:1;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
	background-color:#c0b3a6;
}
.showing{
  opacity: 1 !important;
  z-index: 2;
  -webkit-transition: opacity 0s;
  transition: opacity 0s;
}
.caption{
	position:absolute;
	top:calc(0em - 1.2em - 10px);
	color:white;
	font-variant-numeric: tabular-nums;
}
#iconography .caroussel{
	display:inline;
	margin:none;
	float:none;
	width:100%;
}
#iconography .slide{
	position:absolute;
	top:0;
	height:100%;
	width:100%;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
	background-color:transparent;
}
.caroussel:hover .img-trame{opacity:0;}
.cursor{
  position:absolute;
  width:calc(25% - 10px);
  height:100%;
  top:0;
  z-index:100;
}
.left{
  margin-left:0%;
    cursor:-webkit-image-set(
    url("arrow-left.png") 1x,
    url("arrow-left-2x.png") 2x), pointer;
}
.right{
  margin-left:calc(25% - 10px);
  cursor:-webkit-image-set(
    url("arrow-right.png") 1x,
    url("arrow-right-2x.png") 2x), pointer;
}
#iconography .cursor{
  position:absolute;
  width:50%;
  height:100%;
  top:0;
  z-index:100;
}
#iconography .right{
  margin-left:50%;
  cursor:-webkit-image-set(
    url("arrow-right.png") 1x,
    url("arrow-right-2x.png") 2x), pointer;
}
.logos{
	margin-top:1em;
	width:100%;
}

/*menu*/
#menu{
	position:fixed;
	height:calc(var(--vh) - 4em - 10px);
	top:calc(var(--vh) - 2em - 20px);
	width:100%;	
	bottom:0;
	z-index:1000;
	transition:0.4s;
	background-color:#a0c8fa;
}

#menu a {
	color: black;
}

.full{top:calc(4em + 10px) !important;}
.half{
	width:50%;
	float:left;
	padding:10px;
}
.eighty{
	width:80%;
	float:left;
	padding:10px;
}
.quarter{
	width:25%;
	float:left;
	padding:10px;
}
.tenth{
	width:10%;
	float:left;
	padding:10px;
}
.three-quarter{
	width:75%;
	float:left;
	padding:10px;
}
.quarter:nth-child(even){margin-top:2.4em !important;}
.sub:first-child{padding:0px;}
.sub{
	padding:0px;
	padding-left:10px;
}
.expend{
	display:inline-block;
	width:100%;
	padding:10px;
}
#news{margin-top:1em;}
.caption-news{
	display:inline-block;
	height:25vh;
	width:100%;
	margin-top:10px;
	margin-bottom:10px;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
}
#close-button{
	display:inline;
	z-index:1000;
	cursor:pointer;
}
#open-button{
	width:100%;
	padding:10px;
}
.arrow{
	font-family:'insitu';
	font-size:1.2em;
	margin-right:0.25em;
}
#baseline{
	width:100%;
	position:absolute;
	bottom:0;
	z-index:-1;
}

/*trame*/
#trame{
	position:fixed;
	height:calc(var(--vh) - 4em - 10px);
	width:100%;
	bottom:0;
	margin-left:10px;
	opacity:1;
	transition:0.4s;
	z-index:-1;
}
.trame-line{
	width:calc(100vw / 60);
	height:100%;
	float:left;
	margin-right:calc(100vw / 30);
	border-right:0.26vw solid #c0b3a6;
	border-left:0.26vw solid #ffff5a;
}
.trame-line:last-child{margin-right:0px !important;}
.img-trame{
	position:absolute;
	top:0;
	z-index:10;
	width:calc(50% - 20px);
	height:100%;
	transition:0.2s;
	overflow:hidden;
}
.hidden{
	height:0 !important;
	opacity:0 !important;
	position:absolute !important;
}

/*archives*/
#list{
	display:inline-block;
	width:calc(50vw - 20px);
	margin:10px;
	float:left;
}
#iconography{
	position:relative;
	width:calc(50vw - 20px);
	margin:10px;
	height:calc(var(--vh) - 6em - 60px);
	float:left;
}
#iconography .img-trame{width:100%;}
ul{list-style:none;}
li{
	width:100%;
	display:inline-block;
	border-top:0.06em solid;
	list-style:none;
	padding-top:8px;
}
li:hover{cursor:pointer;}

#list .active,
#list .legend:hover {
	text-decoration:none;
	color:white;
}
.credits{
	position:absolute;
	bottom:0;
	padding:4px;
	color:white;
}
.archives-images{
	opacity:0;
	z-index:1;
}
.archives-images .caption{display:none;}
.archives-images:hover .img-trame{opacity:0;}
#list .archives-caption {display:none;}
#list .active .archives-caption {display:block;}
.archives-caption {
	text-align:right;
	font-variant-numeric: tabular-nums;
}
/*query*/
@media screen and (min-width:1600px){
	html{font-size:120%}
}
@media screen and (min-width:1000px) and (max-width: 1300px){
	html{font-size:90%}
}
@media screen and (min-width:940px) and (max-width: 1000px){
	html{font-size:80%}
}
@media screen and (min-width:800px) and (max-width: 940px){
	html{font-size:80%}
}
@media screen and (min-width:700px) and (max-width: 800px){
	html{font-size:70%}
}
@media screen and (max-width: 700px){
	html{font-size:60%}
}
@media screen and (max-width:940px){
	body{
		/*height:100%;*/
		overflow-y:hidden;
	}
	h1, 
	h3 {
		font-size:2.5em;
	}
	.desktop{display:none}
	.mobile{display:block}
	.columns p{
		-webkit-column-break-inside:auto;
  		page-break-inside:auto;
  		break-inside:auto;
	}
	.columns p:nth-child(even){
		display:inline-block;
		padding-top:0em;
	}
	.gallery{
		position:absolute;
		width:100vw;
		height:calc(36vh - 1em - 30px);
		bottom:calc(30px + 2em);
	}
	.gallery .caroussel{width:calc(100% - 20px)}
	.img-trame{width:calc(100% - 20px)}
	.slide{width:calc(100% - 20px)}
	.cursor{width:calc(50% - 10px)}
	.right{margin-left:calc(50% - 20px)}
	.columns[data-columns="2"]{column-count:1}
	.columns[data-columns="3"]{column-count:2}
	.columns[data-columns="4"]{column-count:2}
	.columns[data-columns="6"]{column-count:2}
	#menu{
		position:fixed;
		height:calc(var(--vh) - 2.5em - 10px);
		top:calc(var(--vh) - 2em - 20px);
	}
	.full{top:calc(2.5em + 10px) !important;}
	#trame{height:calc(var(--vh) - 2.5em - 10px);}
	.caption-news{height:12vh}
	#news .quarter .half{width:100%}
	#news .quarter{width:50%}
	.sub{padding-left:0px}
	#news h3 {font-size:1em}
	.quarter:nth-child(even){margin-top:0px !important;}

	#list{
		width:calc(100vw - 20px);
		margin-top:0px !important;
		max-height: calc(68vh - 4.5em - 60px);
		overflow-y:scroll;
	}
	#iconography{
		position:absolute;
		width:calc(100vw - 20px);
		margin:10px;
		bottom:calc(20px + 2em);
		height: calc(36vh - 1em - 30px);
		box-shadow: 0px -10px 15px 10px #A09664;
	}
	#iconography .img-trame{width:100%;}
	ul{list-style:none;}
	li{
		width:calc(100vw - 20px);
		padding-top:5px;
	}
	li:hover{cursor:pointer;}
	#list .active{
		text-decoration:none;
		color:white;
		z-index:10;
	}
}
@supports (-webkit-touch-callout: none) {
/*  body {
  	min-height: -webkit-fill-available;
    min-height: -moz-available;
    min-height: fill-available;
}*/
}