/*
FFFFFF = Blanc
B4B4B4 = Gris
000000 = Noir
*/

@font-face{
	font-family: 'LTRemark-Black';
	src: url('fonts/LTRemark-Black.otf') format(opentype);
}

@font-face{
	font-family: 'LTRemark-BlackItalic';
	src: url('fonts/LTRemark-BlackItalic.otf') format(opentype);
}

@font-face{
	font-family: 'LTRemark-Bold';
	src: url('fonts/LTRemark-Bold.otf') format(opentype);
}

@font-face{
	font-family: 'LTRemark-BoldItalic';
	src: url('fonts/LTRemark-BoldItalic.otf') format(opentype);
}

@font-face{
	font-family: 'LTRemark-Italic';
	src: url('fonts/LTRemark-Italic.otf') format(opentype);
}

@font-face{
	font-family: 'LTRemark-Regular';
	src: url('fonts/LTRemark-Regular.otf') format(opentype);
}

body{
	background-color: #000000;
	color: #FFFFFF;
	font-family: LTRemark-Regular;
	font-size: 3.6vw;
    line-height: 4.5vw;
	overflow-x: hidden;
}

::-webkit-scrollbar{
    display: none;
}

*{
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: crosshair;
}

::selection{
	background-color: #FFFFFF;
	color: #000000;
}

a{
	color: #FFFFFF;
	outline: none;
	text-decoration: none;
}

a:link{
	color: #FFFFFF;
	outline: none;
	text-decoration: none;
}

a:visited{
	color: #FFFFFF;
	outline: none;
	text-decoration: none;
}

a:hover{
	color: #FFFFFF;
	outline: none;
	text-decoration: none;
}

.loader{
	width: 100vw;
	height: 100vh;
	position: fixed;
	background-color: #000000;
	z-index: 100;
}

#counter{
	position: absolute;
	top: 3vw;
	left: 50%;
    transform: translate(-50%, 0%);
	font-size: 6vw;
    line-height: 6vw;
}

.fondu{
	opacity: 0;
	transition: opacity 0.3s ease-out;
	transition-delay: 1s;
	pointer-events: none;
}

#conteneur_all{
	width: 100vw;
	height: auto;
}

#conteneur_logotype1{
    width: 16vw;
    height: 100svh;
    position: fixed;
    left: 50%;
    transform: translate(-50%, 0%);
    z-index: 50;
    pointer-events: none;
}

#logotype1{
    width: 16vw;
    height: 16vw;
    position: absolute;
    top: -16vw;
    transition: transform 0.2s ease-out;
    background-color: #000000;
    border-radius: 50%;
    pointer-events: auto;
}

#logotype1 video{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.logotype1_animation{
	transform: translateY(19vw);
}

.conteneur{
	width: 100vw;
	height: 100svh;
	position: relative;
}

#navbar{
	width: 94vw;
	height: auto;
	position: absolute;
	top: 3vw;
	left: 3vw;
	display: flex;
	justify-content: space-between;
	font-size: 6vw;
    line-height: 6vw;
    z-index: 10;
}

.navbar01_animation{
	opacity: 0;
	transform: translateY(-3vw);
	animation: fadeIn 1s ease forwards, slide 0.5s ease forwards;
	animation-delay: 2s;
}

.navbar02_animation{
	opacity: 0;
	transform: translateY(-3vw);
	animation: fadeIn 1s ease forwards, slide 0.5s ease forwards;
	animation-delay: 2.1s;
}

.navbar03_animation{
	opacity: 0;
	transform: translateY(-3vw);
	animation: fadeIn 1s ease forwards, slide 0.5s ease forwards;
	animation-delay: 2.2s;
}

#about{
	width: 94vw;
	height: auto;
	position: absolute;
	top: 15vw;
	left: 3vw;
	text-align: justify;
	z-index: 10;
}

.about_animation{
	opacity: 0;
	transform: translateY(-3vw);
	animation: fadeIn 1s ease forwards, slide 0.5s ease forwards;
	animation-delay: 3s;
}

#conteneur_logotype2_noir {
    width: 100vw;
    height: 32vw;
    position: absolute;
    bottom: 0vw;
    background: linear-gradient(to top, #000000 50%, transparent 100%);
    opacity: 1;
    transition: opacity 0.3s ease-out;
}

#conteneur_logotype2_noir.logotype2_animation {
    opacity: 0;
}

#conteneur_logotype2 {
    width: 100vw;
    height: auto;
    position: absolute;
    bottom: 0vw;
    z-index: 10;
}

#logotype2 {
    width: 100%;
    height: 100%;
    position: relative;
    opacity: 1;
    transition: opacity 0.3s ease-out;
}

#logotype2.logotype2_animation {
    opacity: 0;
}

#logotype2 video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.conteneur img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.conteneur video{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.more{
	width: 6vw;
	height: 6vw;
	position: absolute;
	bottom: 3vw;
	left: 3vw;
	transition: 0.2s ease-out;
	z-index: 20;
}

.more_rotate{
	transform: rotate(0deg);
}

.conteneur_info{
	width: 100vw;
	height: 100svh;
	position: absolute;
	background-color: rgba(0, 0, 0, 0.5);
	opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-out;
}

.info{
	width: 94vw;
	height: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.info h2{
	font-family: LTRemark-Bold;
	font-size: 6vw;
    line-height: 6vw;
    text-align: center;
    margin-bottom: 4.5vw;
}

.info h3{
	text-align: justify;
}

.conteneur_info.visible{
	opacity: 1;
	pointer-events: auto;
}

@keyframes fadeIn{
	to{
		opacity: 1;
	}
}

@keyframes slide{
	to{
		transform: translateY(0);
	}
}