@charset "utf-8";
/* CSS Document */

@font-face {
  font-family: 'DINPro-Regular';
  src: url('../Typo/DINPro-Regular.eot?#iefix') format('embedded-opentype'),  url('../Typo/DINPro-Regular.otf')  format('opentype'),
	     url('../Typo/DINPro-Regular.woff') format('woff'), url('../Typo/DINPro-Regular.ttf')  format('truetype'), url('../Typo/DINPro-Regular.svg#DINPro-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: 'DINPro-Medium';
  src: url('../Typo/DINPro-Medium.eot?#iefix') format('embedded-opentype'),  url('../Typo/DINPro-Medium.otf')  format('opentype'),
	     url('../Typo/DINPro-Medium.woff') format('woff'), url('../Typo/DINPro-Medium.ttf')  format('truetype'), url('../Typo/DINPro-Medium.svg#DINPro-Medium') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'DINPro-Bold';
  src: url('../Typo/DINPro-Bold.eot?#iefix') format('embedded-opentype'),  url('../Typo/DINPro-Bold.otf')  format('opentype'),
	     url('../Typo/DINPro-Bold.woff') format('woff'), url('../Typo/DINPro-Bold.ttf')  format('truetype'), url('../Typo/DINPro-Bold.svg#DINPro-Bold') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'DINPro-Light';
  src: url('../Typo/DINPro-Light.eot?#iefix') format('embedded-opentype'),  url('../Typo/DINPro-Light.otf')  format('opentype'),
	     url('../Typo/DINPro-Light.woff') format('woff'), url('../Typo/DINPro-Light.ttf')  format('truetype'), url('../Typo/DINPro-Light.svg#DINPro-Light') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'DINPro-Black';
  src: url('../Typo/DINPro-Black.eot?#iefix') format('embedded-opentype'),  url('../Typo/DINPro-Black.otf')  format('opentype'),
	     url('../Typo/DINPro-Black.woff') format('woff'), url('../Typo/DINPro-Black.ttf')  format('truetype'), url('../Typo/DINPro-Black.svg#DINPro-Black') format('svg');
  font-weight: normal;
  font-style: normal;
}

Body {
	overflow-x: hidden;
	cursor: none;
}

#Coo{
	position: absolute;
	color: black;
	font-size: 22px;
	font-family: 'DINPro-Light';
	bottom: 8px;
	left: 165px;
	opacity: 1 ;
	z-index: 12;
}

#Coo1{
	position: absolute;
	color: black;
	font-size: 22px;
	font-family: 'DINPro-Light';
	bottom: 8px;
	left: 15px;
	opacity: 1 ;
	z-index: 12;
}

#Annee{
	position: absolute;
	color: white;
	font-size: 55px;
	font-family: 'DINPro-Medium';
	font-style: italic;
	bottom: 50%;
	left: 50%;
	transform: translate(-50%,50%);
	opacity: 1 ;
	z-index: 12;
}

#Accueil {
	position: absolute;
	color: white;
	font-size: 15px;
	font-family: 'DINPro-Medium';
	top: 15px;
	left: 50%;
	transform: translateX(-50%);
	opacity: 1 ;
	z-index: 12;
}

#BlockB {
	position: fixed;
	top: 50%;
	left: 50px;
	height: 210px;
	width: 100px;
	transform: translateY(-50%);
	opacity: 0 ;
	z-index: 1;
}

#A1 {
	font-size: 55px;
	font-family: 'DINPro-Bold';
	color: white;
	opacity: 0;
}

#A2 {
	font-size: 45px;
	font-family: 'DINPro-Medium';
	color: white;
	opacity: 0;
}

#A3 {
	font-size: 35px;
	font-family: 'DINPro-Regular';
	color: white;
	opacity: 0;
}

#A4 {
	font-size: 25px;
	font-family: 'DINPro-Light';
	color: white;
	opacity: 0;
}

#F5 {
	position: fixed;
	color: white;
	font-size: 15px;
	font-family: 'DINPro-Medium';
	top: 15px;
	left: 50%;
	transform: translateX(-50%);
	opacity: 1 ;
	z-index: 12;
}

#Cont {
	position: absolute;
	color: white;
	font-size: 15px;
	font-family: 'DINPro-Medium';
	bottom: 15px;
	left: 50%;
	transform: translateX(-50%);
	opacity: 1 ;
	z-index: 2;
}

#Page1A {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 100%;
	width: 100%;
	transform: translate(-50%,-50%);
	opacity: 1 ;
	z-index: 1;
}

#BlockT1{
	position: absolute;
	top: 30%;
	left: 80px;
	height: 70%;
	width: 55%;
	opacity: 1 ;
	z-index: 1;
}

#Titre0{
	font-size: 55px;
	font-family: 'DINPro-Bold';
	color: white;
	opacity: 1;
}

#Texte3 {
	margin-top: 20px;
	font-size: 14px;
	font-family: 'DINPro-Light';
	color: white;
	opacity: 1;
}

.BGB {
	position: absolute;
background:url("/Images/P1.png");
	background-size:cover; 
	top: 50%;
	left: 50%;
	height: 100%;
	width: 100%;
	transform: translate(-50%, -50%);
	opacity: 0 ;
	z-index: 0;
}

#BGB1 {
	position: absolute;
	background:url("/Images/P2.png");
	background-size:cover; 
	top: 50%;
	right: 0%;
	height: 100%;
	width: 100%;
	transform: translateY(-50%);
	opacity: 0;
	z-index: 1;
}

#section0 {
	background-color: white; 
	height: 100%;
	width: 100%;
	opacity: 1 ;
	z-index: -1;
}

#TimeL {
	background:url("/Images/TimeL1.png");
	background-size:cover; 
	top: 50%;
	height: 90%;
	width: 50%;
	transform: translateX(50%);
	opacity: 1 ;
	z-index: 1;
}

#section1 {
	background:url("/Images/06.png");
	background-size:cover; 
	height: 100%;
	width: 100%;
	opacity: 1 ;
	z-index: -1;
}

#section2 {
	background:url("/Images/2022-03-23_17.57.48.png");
	background-size:cover; 
	height: 100%;
	width: 100%;
	opacity: 1 ;
	z-index: -1;
}

#section3 {
	background:url("/Images/2022-03-23_18.08.34.png");
	background-size:cover; 
	height: 100%;
	width: 100%;
	opacity: 1 ;
	z-index: -1;
}

#section4 {
	background:url("/Images/04.png");
	background-size:cover; 
	height: 100%;
	width: 100%;
	opacity: 1 ;
	z-index: -1;
}

#section5 {
	background-image:url("/Images/05.png");
	background-size:cover; 
	height: 100%;
	width: 100%;
	opacity: 1 ;
	z-index: -1;
}

#Block1 {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 70px;
	width: 450px;
	transform: translate(-50%,-50%);
	z-index: 1;
}

#Titre1 {
	position: absolute;
	color: white;
	font-size: 55px;
	font-family: 'DINPro-Bold';
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	opacity: 1 ;
	z-index: 2;
}

#CarreB {
	position: absolute;
	background-color: white;
	background-size:cover; 
	top: 50%;
	right: -200%;
	height: 60%;
	width: 70%;
	transform: translateY(-50%);
	opacity: 1 ;
	z-index: 2;
}

#CarreA {
	position: absolute;
	background-color: white;
	background-size:cover; 
	top: 50%;
	right: -200%;
	height: 60%;
	width: 70%;
	transform: translateY(-50%);
	opacity: 1 ;
	z-index: 2;
}

#LineA {
	position: absolute;
	background-color: dodgerblue;
	background-size:cover; 
	top: 50%;
	left: -3px;
	height: 100%;
	width: 6px;
	transform: translateY(-50%);
	opacity: 1 ;
	z-index: 2;
}

#LineB {
	position: absolute;
	background-color: yellow;
	background-size:cover; 
	top: 50%;
	left: -3px;
	height: 100%;
	width: 6px;
	transform: translateY(-50%);
	opacity: 1 ;
	z-index: 2;
}

#TxtA {
	position: absolute;
	font-family: 'DINPro-Regular';
	font-size: 15px;
	top: 48%;
	left:50%;
	height: 95%;
	width: 95%;
	transform: translate(-50%,-50%);
	opacity: 1 ;
	z-index: 2;
}

#TxtB {
	position: absolute;
	font-family: 'DINPro-Regular';
	font-size: 15px;
	top: 48%;
	left:50%;
	height: 95%;
	width: 95%;
	transform: translate(-50%,-50%);
	opacity: 1 ;
	z-index: 2;
}

#Deco1 {
	position: absolute;
	background-color: orangered;
	background-size:cover; 
	top: 0;
	left: 0;
	height: 2px;
	width: 300px;
	opacity: 1 ;
	z-index: 2;
}

#DecoA {
	position: absolute;
	background-color: orangered;
	background-size:cover; 
	bottom: 0;
	right: 0;
	height: 2px;
	width: 300px;
	opacity: 1 ;
	z-index: 2;
}

#Rond {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 600px;
	width: 600px;
	transform: translate(-50%,-50%);
	z-index: 1;
	background-color: white;
	background-size: cover;
	border: 2px solid white;
	border-width: 2px;
	opacity: 0.2;
	border-radius: 50%;
}

#Page1B {
	position: absolute;
	top: 50%;
	left: 150%;
	height: 100%;
	width: 100%;
	transform: translate(-50%,-50%);
	opacity: 1 ;
	z-index: 1;
}

#Block2 {
	position: absolute;
	top: 10%;
	right: 0;
	height: 100%;
	width: 600px;
	opacity: 1 ;
	z-index: 1;
}

#Titre2 {
	position: absolute;
	top: 40px;
	left: -20px;
	font-size: 40px;
	font-family: 'DINPro-Medium';
	color: white;
	opacity: 1 ;
	z-index: 1;
}

#TitreA {
	position: absolute;
	top: 95px;
	left: -20px;
	font-size: 45px;
	font-family: 'DINPro-Bold';
	color: white;
	opacity: 1 ;
	z-index: 1;
}

#DecoB {
	position: absolute;
	top: 180px;
	left: 20px;
	height: 200px;
	width: 400px;
	font-size: 15px;
	color: white;
	font-family: 'DINPro-Regular';
	opacity: 1 ;
	z-index: 1;
}

#TL {
	position: absolute;
	top: 20px;
	right: 20px;
	height: 80px;
	width: 25px;
	font-size: 15px;
	writing-mode: vertical-rl;
	color: orangered;
	font-family: 'DINPro-Bold';
	opacity: 1 ;
	z-index: 1;
	
}

#GL {
	position: absolute;
	bottom: 60px;
	left: 20px;
	height: 80px;
	width: 100px;
	font-size: 20px;
	color: orangered;
	font-family: 'DINPro-Bold';
	opacity: 1 ;
	z-index: 1;
	
	
}

#next {
	position: absolute;
	top: 50%;
	right: 0;
	height: 100%;
	width: 50px;
	background-color: gray;
	transform: translateY(-50%);
	opacity: 0.5 ;
	z-index: 10;
	
}

#past {
	position: absolute;
	top: 50%;
	left: 0;
	height: 100%;
	width: 50px;
	background-color: gray;
	transform: translateY(-50%);
	opacity: 0.5 ;
	z-index: 10;
	
}

#next:hover {
	position: absolute;
	top: 50%;
	right: 0;
	height: 100%;
	width: 50px;
	background-color: gray;
	transform: translateY(-50%);
	opacity: 0.9 ;
	z-index: 10;
	
}

#past:hover {
	position: absolute;
	top: 50%;
	left: 0;
	height: 100%;
	width: 50px;
	background-color: gray;
	transform: translateY(-50%);
	opacity: 0.9 ;
	z-index: 10;
	
}

#Im {
	position: absolute;
	top: 300px;
	left: 90px;
	height: 80px;
	width: 212px;
	font-size: 20px;
	transform: translateY(-50%);
	background-image: url("/Images/Coins.png");
	background-size:cover; 
	font-family: 'DINPro-Bold';
	opacity: 0 ;
	z-index: 1;
	display:inline;
	
}

#Im1 {
	position: absolute;
	top: 440px;
	left: 90px;
	height: 80px;
	width: 212px;
	font-size: 20px;
	transform: translateY(-50%);
	background-image: url("/Images/ATC.png");
	background-size:cover; 
	font-family: 'DINPro-Bold';
	opacity: 1 ;
	z-index: 1;
	display: inline;
}

#Shop {
	position: absolute;
	bottom: 30px;
	right: 25px;
	font-size: 80px;
	color: orangered;
	font-family: 'DINPro-Bold';
	transform: translateY(-70%);
	opacity: 1 ;
	z-index: 1;
	display: inline;
}

.soc {
	height: 20px;
	width: 20px;
	transform: translateY(-50%);
	opacity: 1 ;
	z-index: 1;
	display: inline;
}

#Insta {
	position: absolute;
	top: 120px;
	right: 20px;
	background-image: url("/Images/Insta.png");
	background-size:cover; 
	opacity: 1 ;
	z-index: 1;
	display: inline;
}

#Discord {
	position: absolute;
	top: 170px;
	right: 20px;
	background-image: url("/Images/discord.png");
	background-size:cover; 
	opacity: 1 ;
	z-index: 1;
	display: inline;
}

#Twitter {
	position: absolute;
	top: 220px;
	right: 20px;
	background-image: url("/Images/Twitter.png");
	background-size:cover; 
	opacity: 1 ;
	z-index: 1;
	display: inline;
}

#DecoB1 {
	position: absolute;
	top: 20px;
	left: -50px;
	height: 640px;
	width: 510px;
	background-color: dimgrey;
	opacity: 1 ;
	z-index: -1;
}

#DecoB1A {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	
	background-color: white;
	opacity: 1 ;
	z-index: -2;
}

#DecoB1B {
	position: absolute;
	top: 167px;
	left: -20px;
	height: 2px;
	width: 110px;
	
	background-color: orangered;
	opacity: 1 ;
	z-index: 1;
}

#DecoB2 {
	position: absolute;
	top: 200px;
	right: 10px;;
	height: 110px;
	border: 3px solid white;
	width: 6px;
	opacity: 0.5 ;
	z-index: -1;
}

#DecoB3 {
	position: absolute;
	top: 200px;
	right: -20px;;
	height: 100px;
	border: 3px solid white;
	width: 6px;
	opacity: 0.5 ;
	z-index: -1;
}

#DecoB3:hover {
	position: absolute;
	top: 200px;
	right: -20px;;
	height: 100px;
	background: white;
	width: 6px;
	opacity: 0.5 ;
	z-index: -1;
}

#DecoB2:hover {
	position: absolute;
	top: 200px;
	right: 10px;;
	height: 150px;
	background: white;
	width: 6px;
	opacity: 0.5 ;
	z-index: -1;
}

#Page1C {
	position: absolute;
	top: 50%;
	left: 150%;
	height: 100%;
	width: 100%;
	transform: translate(-50%,-50%);
	opacity: 1 ;
	z-index: 1;
}

#Texte1 {
	position: absolute;
	top: 65%;
	left: 50%;
	height: 50%;
	transform: translate(10%,-50%);
	width: 30%;
	color: white;
	font-family: 'DINPro-Light';
	font-size: 12px;
	opacity: 1 ;
	z-index: 1;
}

#Texte2 {
	position: absolute;
	top: 65%;
	left: 50%;
	height: 50%;
	width: 30%;
	transform: translate(10%,-50%);
	color: white;
	font-family: 'DINPro-Light';
	font-size: 12px;
	opacity: 1 ;
	z-index: 1;
}

#MaSouris {
	position: absolute;
	top: 0;
	left: 0;
	height: 20px; 
	width: 20px;
	margin-left: -10px;
	margin-top: -10px;
	transform: translate(-50%,-50%);
	background: url("/Images/s1.png");
	background-size: cover;
	pointer-events: none;
	mix-blend-mode: difference;
	z-index:9999;
}