/*-------generals-----*/
html, body{
	padding: 0;
	margin: 0;
	background-color: #C9CAE5;
	width: 100%;
	font-size: 16px;}
::-webkit-scrollbar, .container::-webkit-scrollbar {
    width: 0px;
    background: transparent;}
#mainsketch{
	padding: 0;
	position: fixed;
	margin: 0;
	z-index: 4;
	width: 100%;
	pointer-events: none;}
@font-face {
	font-family: Suisse-BP;
	src: url("Suisse BP Serif.otf");}
@font-face {
	font-family: NH-med;
	src: url('NeueHaasUnicaPro-Medium.otf');}
::placeholder { 
    color: black;
    opacity: 1;}
/*-------animations-----*/
@keyframes slideright{
	0%{transform: translateX(200%);}
	100%{transform: translateX(0);}}
@keyframes slidetop{
	0%{transform: translateY(-200%);}
	100%{transform: translateY(0);}}
@keyframes slidebottom{
	0%{transform: translateY(200%);}
	100%{transform: translateY(0);}}
/*----scrolling banners*/
.scroller{
	font-family: Suisse-BP;
	padding: 0;
	margin-top: 16px;
	margin-bottom: 0;
	z-index: 4;
	font-size: 1.2em;
	list-style: none;
	text-align: center;}
.leftone{float: left; margin-left: 10px;}
.rightone{float: right;margin-right: 10px;}
li{ margin-bottom: 0.7em;}
/*----hovers*/
.title span:hover, .nav ul li span:hover, .languages span:hover, sup:hover, .years span:hover, .social a:hover, .artists li span:hover,
.joindre a:hover, .commander a:hover, .ecrire a:hover, .textcontact a:hover, .abonner:hover {color: white; cursor: pointer;}
/*-------main body-----*/
.container {
    position: fixed;
    height: 100%;
    padding-top: 16px;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    text-align: center;
	left: 34px; 
    right: 34px;}
.nav, .artists{
	font-family: Suisse-BP;
	font-size: 2em;
	position: absolute;}
.title{
	font-family: Suisse-BP;
	font-size: 2em;
	text-align: center;
	left: 34px; 
    right: 34px;
	z-index: 1;
	user-select: none;
	animation: 3s ease-out 0s 1 slidetop;	}
.nav{
	text-align: left;
	margin-left:30px;
	margin-top: 40px;
	padding-bottom: 20px;
	user-select: none;
	animation: 3s ease-out 0s 1 slideright;
	padding:0;}
.nav ul{list-style: none; margin: 0;}
.nav ul li{margin-bottom: 0;}
.languages{
	left: 34px; 
    right: 34px;
	z-index: 1;
	-webkit-user-select: none;
	user-select: none;
	text-align: center;
	display: grid;
	grid-template-columns: repeat(4, auto);
	align-content: center;
	position: absolute;
	font-family: Suisse-BP;
	font-size: 1.2em;
	animation: 3s ease-out 0s 1 slidebottom;}
.modal {
	display: none;
	text-align: center;
	font-family: Suisse-BP;
	font-size: 0.7em;
    z-index: 1; }
/*-----About-----*/
#abouttext, .textjoindre, .textnewsletter, .textcontact, .textshop, .textsponsors{
	font-family: NH-med;	
	line-height: 100%;
	margin-left: -70px;
	display: none;}
#abouttext{ font-size: 0.8em;}
/*-----Residence & Artists-----*/
.years, .social, .buy {
	display:none;
}
sup{font-size: 0.5em;}
a{text-decoration: none; color: black; cursor: default;}
.artists{
	display: none;
	position: relative;
	padding-bottom: 9px;
	z-index: 2;
	text-align: left;
	float: left;
	margin-left: 55%;
	user-select: none;
	list-style: none;}
.artists li{margin-bottom: 0;}
.years li, .social li {margin-bottom: -0.5em;}
.text16, .text17, .text18{
	font-family: NH-med;
	font-size: 0.6em;
	margin-left: -110px;
	line-height: 100%;
	margin-right: 60%;
	margin-top:0;
	display: none;}
.text16{margin-bottom: 2%;}
.textjoindre, .textnewsletter, .textshop{
	font-size: 0.6em;
	margin-top: 0;
	margin-right: 55%;}
.textcontact, .textsponsors{
	font-size: 0.6em;
	margin-top: 0;}
.joindre, .abonner, .ecrire, .commander{display: none;}
.info{
	font-family: NH-med;
	margin-left: -70px;
	line-height: 100%;
	font-size: 0.6em;
	margin-bottom: 3%;
	display: none;}
/*-----Newsletter-----*/
.abonner{border: none; background-color: #C9CAE5; font-family: Suisse-BP; font-size: 1em;}
#mc_embed_signup{background:#C9CAE5; clear:left; font: Suisse-BP; }
.email{display: none; background-color:#C9CAE5; font-family: Suisse-BP; font-size: 1em; color:black; outline: none; border: none; margin-left: 68px;}
input:focus {outline:none;}
/*-----Images-----*/
.images2016, .images2017, .images17, .images2018{
	position: absolute;
	z-index: 3;
	margin-left: 50%;
	margin-right: 34px;
	display: none;
	overflow-y: scroll;}
.images2016 img, .images2017 img, .images17 img, .images2018 img{
	width: 100%;
	margin: auto;
	padding-bottom: 10px;}

/*@-moz-document url-prefix() {
    html,body{overflow: hidden !important;}
}*/
/*-----RWD-----*/
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	html{font-size: 10px; height: 1100vh;}
	.container{left:20px; right: 20px;}
	.scroller{display:none;}
	.images2016, .images2017, .images2018, .images17{margin-left:20px; margin-right:20px;}
	.artists{margin-left: -40px; position: relative; font-size: 1em;}
	.text16, .text17, .text18{margin-right: 0; font-size: 0.8em;}
	.languages{font-size: 2em; padding-bottom: 30px; bottom: 0;}
	.modal{font-size: 0.5em;}
	.textjoindre, .textnewsletter, .textcontact, .textshop, .textsponsors{ margin-right: 0; font-size: 0.8em;}
	.info{margin-left: -32%; font-size: 0.75em;}}
@media only screen and (max-width: 688px){
	html{font-size: 10px; height: 1100vh;}
	.container{left:20px; right: 20px;}
	.scroller{display:none;}
	.images2016, .images2017, .images2018, .images17{margin-left:20px; margin-right:20px;}
	.artists{margin-left: -40px; position: relative; font-size: 1em;}
	.text16, .text17, .text18{margin-right: 0; font-size: 0.8em;}
	.languages{font-size: 2em; padding-bottom: 30px; bottom: 0;}
	.modal{font-size: 0.5em;}
	.textjoindre, .textnewsletter, .textcontact, .textshop, .textsponsors{ margin-right: 0; font-size: 0.8em;}
	.info{margin-left: -32%; font-size: 0.75em;}}