::selection {
	background-color: rgba(0,0,0,0.25);
	color: white;
}

::-moz-selection {
	background-color: rgba(0,0,0,0.25);
	color: white;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-smooth: always;
	text-rendering: optimizeLegibility;
	margin: 0;

	background-color: white;

	font-family: suisse;
}

img{
	display: block;
	image-rendering: crisp-edges;
}

ol,
ul { list-style: none; }

a {	text-decoration: none; }

*{
	box-sizing: border-box;
	user-select: none;
}

.hidden { display: none; 
}

.invisible { 
	visibility: hidden; 
}

.transparent { 
	opacity: 0;
}

.clear { clear: both; }

div{
	margin:0;
}
 /*//////////////////////////////////////////////////////////////////////////////*/

@font-face {
    font-family: suisse;
    src: url("fonts/SuisseIntl-Book.otf");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: suisse;
    src: url("fonts/SuisseIntl-Light.otf");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: suisse;
    src: url("fonts/SuisseIntl-Thin.otf");
    font-weight: 200;
    font-style: normal;
}



/*//////////////////////////////////////////////////////////////////////////////*/



h1{
	position: fixed;
	top: 40px;
	left: 50px;

	font-size: 2rem;

	padding: 0;
	margin:0;
}


h2{
	position: fixed;
	top: 40px;
	left: 300px;

	font-size: 2rem;

	padding: 0;
	margin:0;
}


p{
	position: fixed;
	bottom: 40px;
	left: 300px;

	font-size: 1rem;
	font-weight: 300;

	padding: 0;
	margin:0;
}

p a {
	color: black;
	text-decoration: underline;
}








.container{
	position: absolute;
	width: calc(100vw - 100px);

	display: grid;
	grid-column-gap: 50px;
	grid-template-columns: repeat(6, 1fr);

	margin: 0 50px 0 50px;
}



.fauteuils{
	position: relative;
	width: 100%;
	height: 100%;

}

.fauteuils img{
	width: 100%;
	height: 100%;

	transform: translate(0%, 30%);
	opacity: 0;

	animation: fade 18s infinite cubic-bezier(.05,.46,.24,1.01);
	
	transition: 0.6s;
} 



img.nothing{
	/*animation: none;*/
	/*animation-play-state: paused;*/
	/*opacity: 1 !important;*/
	/*transform: translate(0%, 0%) !important;*/
}





@keyframes fade {
	0%{
		opacity: 0;
		transform: translate(0%, 30%);
	}

	5%{
		opacity: 1;
		transform: translate(0%, 0%);
	}

	60%{
		opacity: 1;
		transform: translate(0%, 0%);
	}


	65%{
		opacity: 0;
		transform: translate(0%, 30%);

	}
	100%{
		opacity: 0;
		transform: translate(0%, 30%);
	}
}



#titreDi{
	position: absolute;
    bottom: 0px;
    left: 50%;

    transform: translate(-50%, 0);
    text-align: center;
    width: 150%;

    font-weight: 300;
    font-size: 1rem;
    z-index: 10;
    animation: fadeTitre 0.7s forwards cubic-bezier(.05,.46,.24,1.01);
}



@keyframes fadeTitre {
	0%{
		opacity: 0;
		transform: translate(-50%, 30%);
	}

	100%{
		opacity: 01;
		transform: translate(-50%, 0%);
	}
}








/*//////////////////////////////////////////////////////////////////////////////*/


/*html {
    overflow: scroll;
    overflow-x: hidden;
}
::-webkit-scrollbar {
    width: 0px; 
    background: transparent;  
::-webkit-scrollbar-thumb {
    background: #FF0000;
}*/



/*//////////////////////////////////////////////////////////////////////////////*/


@media screen and (max-width: 700px) {

	h1{
		font-size: 1rem;
		left: 35px;
	}

	h2{
		font-size: 1rem;
		left: 180px;
	}


	p{
		font-size: 0.75rem;
		left: 180px;
		top: 95px;
		font-weight: 200;
	}

	.container{
		grid-column-gap: 0px;
		grid-template-columns: repeat(3, 1fr);

		margin: 0 20px 0 20px;
		width: calc(100vw - 40px);
	}

	#titreDi{
		font-size: 0.75rem;
		bottom: -5px;
		font-weight: 200;
		width: 100%;
	}


}