@font-face 
{
	font-family:'RBNo2-Light';
	src: url('RBNo2Light.eot?#iefix') format('embedded-opentype'),
	url('RBNo2Light.woff') format('woff'),
	url('RBNo2Light.ttf') format('truetype'),
	url('RBNo2Light.svg#RBNo2-Light') format('svg');font-weight:normal;font-style:normal;
}
@font-face 
{
    font-family: 'Haettenschweiler';
	src: url('haettenschweiler.ttf');
}
@font-face 
{
    font-family: 'Simplifica';
	src: url('Simplifica.ttf');
}
@font-face 
{
    font-family: 'Quadaptor';
	src: url('quadaptor.ttf');
}
body
{
	background-image: url("Ab1.jpg");
	background-attachment: fixed;
    background-size: 100% 100%;
}
#TopOTP
{
	position: relative;
	top: -110px;
	margin-left: auto;
    margin-right: auto;
    color: transparent;
    background-color:transparent;
}
#main
{
	display: flex;
}
#PixBackground2
{
	position: fixed;
    background-image: url("Pocheton.png");
    height: 100%;
    width: 99%;
    opacity: 0.65;
    background-repeat: repeat-y;
    background-position: right;
    background-size: 100% 100%;
    z-index: -2;
}
#sideMenu
{
	position: fixed;
	width: 15%;
	height: 97%;
	cursor: pointer;
}
#pageCentrale
{
	position: absolute;
	width: auto;
	right: 0px;
	height: 275%;
	left: 13%;
	z-index: -1;
	scrollbar-color: #f04e23 transparent;
	::-webkit-scrollbar
	{
		width: 2px;
	}
	/*Handle*/
	::-webkit-scrollbar-thumb
	{
		background: #00f6ff;
		border-radius: 25px; 
	}
}
h2
{
	font-weight: normal;
	opacity: 0.79;
	font-family: 'Quadaptor';
	font-size: 5.9vw; /*72px;*/
	color: #f24c04;
}
#demos
{
	position: relative;
	padding: 0.125em 2.26em 0px 1.86em; /*1px 300px 0px 600px;*/
	margin: auto;
	width: 50%;
	right: -9.06vw;
	height: 0.63em; /*44px;*/
	overflow: hidden;
	border-bottom: 2px solid;
}
#LogoNumbNSymb1
{
	position: relative;
	background-color: transparent;
	image-orientation: -90deg;
	transform: rotate(-90deg);
	width: 33vw;
	left: -78%;
	top: 46%;
	margin: 0px;
	z-index: 1;
}
#LogoNumbNSymb2
{
	position: relative;
	background-color: transparent;
	image-orientation: -90deg;
	transform: rotate(-90deg);
	width: 33vw;
	left: -63%;
	top: 38%;
	margin: 0px;
}
#LogoNumbNSymb3
{
	position: relative;
	background-color: transparent;
	image-orientation: -90deg;
	transform: rotate(-90deg);
	opacity: 0.65;
	width: 33vw;
	left: -47%;
	top: 29%;
	margin: 0px;
	z-index: -1;
}
#elementSideHaut
{
	position: absolute;
	background-color: transparent;
	width: 7vh;
	left: 52%;
	top: 14%;
	margin: 0px;
}
#elementSideCentre
{
	position: absolute;
	background-color: transparent;
	width: 5.5vh;
	left: 75%;
	top: 14%;
	margin: 0px;
}
#elementSideBas
{
	position: absolute;
	background-color: transparent;
	width: 10vh;
	left: 15%;
	top: 82%;
	margin: 0px;
}
.VideosG
{
	border: 0px solid blue;
	position: relative;
	display: block;
	width: 87%;
	float: right;
	margin-top: 10%; 
}
.VideosD
{
	border: 0px solid blue;
	position: relative;
	display: block;
	width: 87%;
	float: right;
	margin-top: 10%;
}
#Vido
{
	box-shadow: 8px 8px 10px 3px black;
	text-align: center;
}
#Vido2
{
	box-shadow: -8px 10px 10px 3px black;
	position: relative;
	left: 27%;
}
#Vido3
{
	box-shadow: 8px 8px 10px 3px black;
	text-align: center;
}
#Vido4
{
	box-shadow: -8px 10px 10px 3px black;
	position: relative;
	left: 27%;
}
.cornersDroits
{
	font-family: 'Haettenschweiler';
	font-size: 2em;
	position: absolute;
	top: -9%;
	right: 25%;
	margin: 0px;
	border: 0px;
	color: white;
}
.cornersGauches
{
	font-family: 'Haettenschweiler';
	font-size: 2em;
	position: absolute;
	top: -9%;
	left: 0%;
	margin: 0px;
	border: 0px;
	color: black;
}
.date
{
	font-family: 'Haettenschweiler';
	font-size: 0.9vw;
	position: absolute;
	opacity: 0.95;
	display: inline-block;
	top: 6%;
	right: 24.8%;
	margin: 0px;
	border: 0px solid red;
	writing-mode: vertical-lr;
	text-orientation: upright;
	color: black;
	background-color: white;
}
#Date2
{
	color: white;
	background-color: black;
	margin-right: 73.8%;
	left: -0.2%;
}
.TextVideo
{
	font-family:'RBNo2-Light';
	position: absolute;
	font-size: 1.7vw;
	top: 18%;
	right: 32%;
	border: 0px solid green;
	width: 105px;
	padding: 0% 0% 0% 0%;
	text-align: center;
}
#texteVid1
{
	color: #00F6FF;
}
#texteVid2
{
	color: white;
	left: 8%;
}
#texteVid3
{
	color: #F04E23;
}
#texteVid4
{
	color: #00F6FF;
	left: 8%;
}
#TopButton 
{
    display: block; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 1; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    font-size: 1.9vw;
    background-color: transparent; /* Set a background color */
    color: #52f6A5; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    transition-duration: 0.7s;
}
#TopButton:hover {
    background-color: transparent; /* Add a dark-grey background on hover */
    color: white;
}