body{
	background: linear-gradient(to bottom, #1f2a37,#1a242f) fixed;
}

@font-face {
    font-family: Aharoni;
    src: url('ahronbd.ttf');
}

h1{
	position:relative;
	font-family: Aharoni, arial, verdana, sans-serif;
	padding:0px;
	margin:0px;
	margin-bottom:5px;
	padding-left:32px;
	transition:padding-left 0.3s ease-in;
	line-height: 36px;
}
h2{
	position:relative;
	font-family: Aharoni, arial, verdana, sans-serif;
	font-size:16px;
	padding:0px;
	margin:0px;
	margin-bottom:5px;
	padding-left:32px;
	transition:padding-left 0.3s ease-in;
	line-height: 36px;
}
.H1T1,.H1T2,.H1T3{
	position:absolute;
	top:4px;
	left:0px;
	width:32px;
	height:30px;
	transform: rotate(0deg);
	transition:transform 0.3s ease-in;
}
.H1T1{
	background:url('H1T1.png') no-repeat center;
}
.H1T2{
	background:url('H1T2.png') no-repeat center;
}
.H1T3{
	background:url('H1T3.png') no-repeat center;
}
.B:hover h1,.B:hover h2{
	padding-left:36px;
}
.B:hover .H1T1{
	transform: rotate(-180deg);
}
.B:hover .H1T2{
	transform: rotate(180deg);
}
.B:hover .H1T3{
	transform: rotate(180deg);
}

#Load1,#Load2{
	position:fixed;
	left:-25%;
	width:150%;
	height:100%;
	background:rgba(255, 255, 255, 1);
	border:1px solid rgba(0, 0, 0, 1);
	transition:	transform 2s linear,top 2s linear,bottom 2s linear;
	z-index:200;
}
#Load1{
	top:-50%;
}
#Load2{
	bottom:-50%;
}

#Verr1,#Verr2{
	transition:	left 0.5s linear;
	position:absolute;
	margin-left:-175px;
	width:350px;
	height:75px;
}
#Verr1{
	left:100%;
	background:url('Verr1.png');
	bottom:10px;
}
#Verr2{
	left:0%;
	background:url('Verr2.png');
	top:10px;
}

#Banner{
	position:relative;
	left:0px;
	width:100%;
	height:270px;
	border-bottom:1px solid black;
	
	overflow:hidden;
}
#BannerIn{
	position:absolute;
	margin:20px;
	text-align:center;
	width: calc(100% - 40px);
}

.Header{
	position:fixed;
	width:100%;
	height:50px;
	left:0px;
	top:0px;
	border:1px solid black;
	background:rgba(255,255,255,0.95);
	z-index:10;
}
#Logo{
	position:absolute;
	top:0px;
	left:0px;
	width:100px;
	height:100px;
}
#Logo img{
	height:100px;
}

.VideBan{
	position:relative;
	height:50px;
}

.TimeChrono{
	position:relative;
	width:100%;
	height:100px;
	margin-top:5px;
	left:0px;
	background:rgba(255,255,255,0.25);
	overflow:hidden;
	border:1px solid white;
}
.Footer{
	position:relative;
	width:100%;
	height:100px;
	margin-top:5px;
	left:0px;
	border:1px solid black;
	background:rgba(255,255,255,0.95);
	overflow:hidden;
}

.Contenu{
	position:relative;
	margin-top:5px;
	margin-bottom:5px;
	margin-left:auto;
	margin-right:auto;
	width:1000px;
	height:auto;
}

.Block,.BlockTri,.BlockTri2,.BlockBi{
	position:relative;
	margin:5px;
	padding:10px;
	border:10px solid rgba(255,255,255,0.8);
	background:rgba(255,255,255,0.5);
	text-align:justify;
	vertical-align:top;
	color:white;
}

.B{
	transition:border 0.3s ease-in,background 0.2s ease-in,color 0.2s ease-in;
}

.B:hover{
	border:10px solid rgba(255,255,255,1);
	background:rgba(255,255,255,0.8);
	color:black;
}

.Corner1,.Corner2,.Corner3,.Corner4{
	position:absolute;
	width:30px;
	height:30px;
	margin:0px;
	transition:margin 0.15s ease-in;
	z-index:20;
}
.B:hover .Corner1,.B:hover .Corner2,.B:hover .Corner3,.B:hover .Corner4{
	margin:10px;
}
.Corner1,.Corner2{
	top:-10px;
}
.Corner3,.Corner4{
	bottom:-10px;
}
.Corner1,.Corner4{
	left:-10px;
}
.Corner2,.Corner3{
	right:-10px;
}
.Corner1{
	background:url('Corner1.png');
}
.Corner2{
	background:url('Corner2.png');
}
.Corner3{
	background:url('Corner3.png');
}
.Corner4{
	background:url('Corner4.png');
}

.Block{
	min-height:25px;
	height:auto;
}

.BlockTri{
	display:inline-block;
	width:280.33px;
	height:300px;
}

.BlockTri2{
	display:inline-block;
	width:614.66px;
	height:300px;
}

.BlockBi{
	display:inline-block;
	width:448px;
	height:300px;
}

.ImgBlock{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	overflow:hidden;
}
.ImgBlockI{
	position:absolute;
	top:0px;
	left:0px;
	height:100%;
	z-index:0;
	transition:filter 0.3s ease-in;
}
.ImgBlockIn{
	position:absolute;
	top:0px;
	left:0px;
	width:calc(100% - 20px);
	height:35px;
	max-height:calc(100% - 20px);
	padding:10px;
	background:rgba(0,0,0,0.75);
	z-index:1;
	overflow:hidden;
	transition:background 0.3s ease-in,height 0.3s ease-in;
}
.B:hover .ImgBlockI{
	filter: grayscale(100%);
}
.B:hover .ImgBlockIn{
	height:300px;
	background:rgba(255,255,255,0.8);
}

.Ban{
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:50px;
	background: linear-gradient(white , #eeeeee);
	border:1px solid black;
	box-shadow:5px 5px 5px 0px black;
	opacity:0.9;
	z-index:200;
}
.Logo1{
	margin:15px;
}

.BanB1,.BanB2,.BanB3,.BanB4,.BanB5{
	position:absolute;
	width:900px;
	height:300px;
	border:1px solid black;
	box-shadow:5px 5px 5px 0px black;
	
}
.BanB1{
	top:-170px;
	left:-400px;
	transform:rotate(-60deg);
	background: linear-gradient(to right, white , #dddddd, white);
	z-index:-1;
	opacity:0.9;
	transition:transform 0.3s ease-in;
}
.BanB2{
	top: -0px;
	left: -500px;
	transform: rotate(-75deg);
	background: linear-gradient(to right, black , #0f0f0f, black);
	z-index: -2;
	opacity:0.7;
	transition:transform 0.35s ease-in;
}
.BanB3{
	top: -230px;
	left: -350px;
	transform: rotate(-10deg);
	background:linear-gradient(to right, black , #0f0f0f, black);
	z-index: -3;
	opacity:0.5;
	transition:transform 0.2s ease-in;
}
.BanB4{
	top: -130px;
	left: -350px;
	transform: rotate(-50deg);
	background: linear-gradient(to right, white , #dddddd, white);
	z-index: -4;
	opacity:0.3;
	transition:transform 0.3s ease-in;
}
.BanB5{
	top: -60px;
	left: -350px;
	transform: rotate(-45deg);
	background: linear-gradient(to right, black , #0f0f0f, black);
	z-index: -5;
	opacity:0.1;
	transition:transform 0.5s ease-in;
}

.Ban:hover .BanB1{
	transform:rotate(-62deg);
}
.Ban:hover .BanB2{
	transform:rotate(-73deg);
}
.Ban:hover .BanB3{
	transform:rotate(-12deg);
}
.Ban:hover .BanB4{
	transform:rotate(-52deg);
}
.Ban:hover .BanB5{
	transform:rotate(-42deg);
}

.GradR1,.GradR2,.GradR3,.GradR4{
	position:fixed;
	top:0px;
	height:100%;
}
.GradR1{
	opacity:0.02;
	right:10px;
	width:10px;
	background:url('GradR1.png') repeat;
	animation: GradR1 0.6s linear infinite;
}
.GradR2{
	opacity:0.02;
	right:20px;
	width:35px;
	background:url('GradR2.png') repeat;
	animation: GradR2 50s linear infinite;
}
.GradR3{
	opacity:0.02;
	right:40px;
	width:35px;
	background:url('GradR3.png') repeat;
	animation: GradR3 75s linear infinite;
}
.GradR4{
	opacity:0.02;
	right:25px;
	width:35px;
	background:url('GradR4.png') repeat;
	animation: GradR4 90s linear infinite;
}
@keyframes GradR1 { 0% {background-position-y:0px;}	100% {background-position-y:-5px;} }
@keyframes GradR2 { 0% {background-position-y:0px;}	100% {background-position-y:518px;} }
@keyframes GradR3 { 0% {background-position-y:0px;}	100% {background-position-y:-516px;} }
@keyframes GradR4 { 0% {background-position-y:0px;}	100% {background-position-y:661px;} }

.Disabled{
	filter:url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	filter: grayscale(100%);
}