<style>
A:link {}

A:link {
   text-decoration: none;
   color: #fff;
}

A:visited {
   text-decoration: none;
   color: #fff;
}

A:hover {
   text-decoration: none;
   color: #fff;
}

A:active {
   text-decoration: none;
   color: #fff;
}

h1{
	font-size:26px;
	margin:none;
}
h2{
	font-size:20px;
	margin:none;
}
h3{
	font-size:16px;
	margin:none;
}
h4{
	font-size:14px;
	margin:none;
	line-height:20px;
	font-weight: normal;
}

form{
	color:#fff;
	font-size:14px;
	font-weight: bold;
}
input, select {
	border:none;
	border-radius:4px;
	margin-left:10px;
	padding:4px;
	line-height:20px;
}
input[type=button], input[type=submit]{
	position:relative;
	background-color:rgb(0, 12, 19, .8);
	border-radius:8px;
  border:1px solid #fff;
	padding:5px;
	padding-left:15px;
	padding-right: 15px;
	font-size:16px;
	font-weight: bold;
	color:#fff;
  cursor:pointer;
}
input[type=button]:hover, input[type=submit]:hover{ background-color:#999 }
input[type=button].blanc, input[type=button].Connect{
    background-color:#fff;
    color:#000c13;
}
input[type=radio]{
  /* The native appearance is hidden */
  appearance: none;
  -webkit-appearance: none;
  /* For a circular appearance we need a border-radius. */
  border-radius: 50%;
  /* The background will be the radio dot's color. */
  background: #fff;
  /* The border will be the spacing between the dot and the outer circle */
  border: 3px solid #FFF;
  /* And by creating a box-shadow with no offset and no blur, we have an outer circle*/
  box-shadow: 0 0 0 1px #fff;
}
input[type=radio]:checked{
  /* The native appearance is hidden */
  appearance: none;
  -webkit-appearance: none;
  /* For a circular appearance we need a border-radius. */
  border-radius: 50%;
  /* The background will be the radio dot's color. */
  background: #2E86B0;
  /* The border will be the spacing between the dot and the outer circle */
  border: 3px solid #FFF;
  /* And by creating a box-shadow with no offset and no blur, we have an outer circle*/
  box-shadow: 0 0 0 1px #fff;
}
input[type=checkbox]{
  /* The native appearance is hidden */
  appearance: none;
  -webkit-appearance: none;
  /* For a circular appearance we need a border-radius. */
  border-radius: 10%;
  /* The background will be the radio dot's color. */
  background: #fff;
  /* The border will be the spacing between the dot and the outer circle */
  border: 2px solid #FFF;
  transform: scale(1.5);
}
input[type=checkbox]:checked{
  /* The native appearance is hidden */
  appearance: none;
  -webkit-appearance: none;
  /* For a circular appearance we need a border-radius. */
  border-radius: 10%;
  /* The background will be the radio dot's color. */
  background: #2E86B0;
  /* The border will be the spacing between the dot and the outer circle */
  border: 2px solid #FFF;
  transform: scale(1.5);
}

.boutonInscr{
  cursor:pointer;
  background:#000C13;
  padding: 10 60 10 60;
  font-size:16px;
  font-weight: bold;
  border:2px solid #2E86B0;
  border-radius:8px;
}
.boutonInscr:hover{
  background-color: #2E86B0;
}

.table { display:table; }
.col, .row { display:block; }
.cell{ display:table-cell; padding:5px; }
.messcell{ padding:5px; width:1000px; }
.inline{ display:inline-block; }
.messinline{ display:inline-block; }
.icone{ display:inline-block; vertical-align:middle; font-size:20px; }
.OK{ cursor:pointer; }
.centrer{ text-align:center; }
.full{ width:100%; }
.ongletOn{ cursor:pointer; background-color: #fff; color:#000c13; padding:5px; }
.ongletOff{ cursor:pointer; background-color: #000c13; color:#fff; padding:5px; border:1px solid #fff; }
.ongletGauche { border-top-left-radius: 8px; border-bottom-left-radius: 8px; width:100px; text-align:center; }
.ongletDroite { border-top-right-radius: 8px; border-bottom-right-radius: 8px; width:100px; text-align:center; }
.Bouton1, .pointeur { cursor:pointer; }
.Bouton{ background-color:#fff; color:#000c13; border-radius:8px; kine-height:30px; padding:5px; cursor:pointer; }
.Bouton2{ border:1px solid #fff; background-color:rgb(0, 12, 19, .8); border-radius:8px; padding:4px; }
.Bouton2:hover{ background-color:#999; }

.autocomplete{
	position:relative;
	display:none;
	background-color:rgb(0, 12, 19, .8);
	border-bottom-left-radius:8px;
	border-bottom-right-radius:8px;
  width:70%;
	min-height:100px;
  margin-left: 15px;
	padding-top:10px;
	padding-bottom:10px;
  padding-left:15px;
  padding-right:15px;
	font-size:14px;
  text-align: justify;
}
.Bloc{ //Bloc seul
	position:relative;
	display:inline-block;
	background-color:rgb(0, 12, 19, .8);
	border-radius:8px;
	min-height:100px;
	padding-top:10px;
	padding-bottom:10px;
  padding-left:15px;
  padding-right:15px;
	font-size:14px;
  text-align: justify;
}
.Bloc2{ //Bloc avec onglet au dessus
	position:relative;
	display:inline-block;
	background-color:rgb(0, 12, 19, .8);
	border-bottom-left-radius:8px;
	border-bottom-right-radius:8px;
	border-top-right-radius:8px;
  width:100%;
	min-height:100px;
	padding-top:10px;
	padding-bottom:10px;
  padding-left:15px;
  padding-right:15px;
	font-size:14px;
  text-align: justify;
}
.Bloc3{ //Bloc seul
	position:relative;
	display:inline-block;
	background-color:rgb(0, 12, 19, .8);
  border:1px solid #fff;
	border-radius:8px;
	min-height:100px;
	padding-top:10px;
	padding-bottom:10px;
  padding-left:15px;
  padding-right:15px;
	font-size:14px;
  text-align: justify;
  width:96%;
}
.BlocMatch{ //Bloc seul
	position:relative;
	display:block;
  background:rgba(50, 50, 50, 0.8);
	border-radius:16px;
	font-size:14px;
  text-align: justify;
}
.tdBloc{
  background-color:rgb(0, 12, 19, .8);
  border:1px solid #fff;
  border-radius:8px;
  padding-top:10px;
  padding-bottom:10px;
  padding-left:15px;
  padding-right:15px;
  font-size:14px;
  text-align: justify;
  width:96%;
}
.tdBloc2{
  background-color:rgb(0, 12, 19, .8);
	border-bottom-left-radius:8px;
	border-bottom-right-radius:8px;
	border-top-right-radius:8px;
  padding-top:10px;
  padding-bottom:10px;
  padding-left:15px;
  padding-right:15px;
  font-size:14px;
  text-align: justify;
  width:96%;
}
.tdBlocFull{
  background-color:rgb(0, 12, 19, .8);
  border:1px solid #fff;
  border-radius:8px;
  font-size:14px;
  text-align: justify;
  width:100%;
}
.tdFull{ font-size:14px; text-align: justify; width:100%; }


/* Montre */
.clock-container{
  position: absolute;
  top:10px;
  right:-60px;
  z-index:99;
}
.clock{
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.8);
  border: 2px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
}
.clock span{
  position: absolute;
  transform: rotate(calc(30deg * var(--i))); 
  inset: 12px;
  text-align: center;
}
.clock span b{
  transform: rotate(calc(-30deg * var(--i)));
  display: inline-block;
  font-size: 12px;
}
.clock::before{
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #fff;
  z-index: 2;
}
.hand{
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.hand i{
  position: absolute;
  background-color: var(--clr);
  width: 3px;
  height: var(--h);
  border-radius: 8px;
}



.titre{ font-size:16px; font-weight:bold; }
.intro{ background:#aaa; color:#222; text-align: left; border-radius:8px; padding:5px; padding-left:10px; line-height:22px; margin-bottom:20px; }


#Onglet{
  border-top-left-radius: 8px; border-top-right-radius: 8px; width:100%; height:30px; text-align:center; cursor:pointer; background-color:rgb(0, 12, 19, .9);
  border-bottom: 1px solid #fff; color:#fff; padding:10px; padding-left:15px; padding-right:15px; font-size:16px; font-weight: bold; line-height:30px; margin:0;
}
.Onglet0On{
  display:inline-block; border-top-left-radius: 8px; border-top-right-radius: 8px; height:30px; text-align:center; cursor:pointer; background-color:rgb(0, 12, 19, .9);
  border-bottom: 1px solid #fff; border-right: 1px solid #fff; color:#fff; padding:10px; padding-left:15px; padding-right:15px; font-size:16px; font-weight: bold; line-height:30px; margin:0;
}
.Onglet1On{
  display:inline-block; border-top-left-radius: 8px; height:30px; text-align:center; cursor:pointer; background-color:rgb(0, 12, 19, .9);
  border-bottom: 1px solid #fff; border-right: 1px solid #fff; color:#fff; padding:10px; padding-left:15px; padding-right:15px; font-size:16px; font-weight: bold; line-height:30px; margin:0;
}
.Onglet1On.Blanc{ background:#fff; color:#000; }
.Onglet1Off{
  display:inline-block; border-top-left-radius: 8px; height:30px; text-align:center; cursor:pointer; background-color:rgb(30, 30, 30, .5);
  border-bottom: 1px solid #000c13; border-right: 1px solid #000c13; color:#fff; padding:10px; padding-left:15px; padding-right:15px; font-size:16px; font-weight: bold; line-height:30px; margin:0;
} .Onglet1Off:hover{ background-color:rgb(0, 12, 19, .8); }
.Onglet1Off.Blanc{ background:#fff; color:#000; }
.Onglet2On{
  display:inline-block; height:30px; text-align:center; cursor:pointer; background-color:rgb(0, 12, 19, .9);
  border-bottom: 1px solid #fff; border-left: 1px solid #fff; border-right: 1px solid #fff; color:#fff; padding:10px; padding-left:15px; padding-right:15px; font-size:16px; font-weight: bold; line-height:30px; margin:0;
}
.Onglet2On.Blanc{ background:#fff; color:#000; }
.Onglet2Off{
  display:inline-block; height:30px; text-align:center; cursor:pointer; background-color:rgb(30, 30, 30, .5);
  border-bottom: 1px solid #000c13; border-right: 1px solid #000c13; color:#fff; padding:10px; padding-left:15px; padding-right:15px; font-size:16px; font-weight: bold; line-height:30px; margin:0;
} .Onglet2Off:hover{ background-color:rgb(0, 12, 19, .8); }
.Onglet2Off.Blanc{ background:#fff; color:#000; }
.Onglet3On{
  display:inline-block; border-top-right-radius: 8px; height:30px; text-align:center; cursor:pointer; background-color:rgb(0, 12, 19, .9);
  border-bottom: 1px solid #fff; color:#fff; border-left: 1px solid #fff; padding:10px; padding-left:15px; padding-right:15px; font-size:16px; font-weight: bold; line-height:30px; margin:0;
}
.Onglet3On.Blanc{ background:#fff; color:#000; }
.Onglet3Off{
  display:inline-block; border-top-right-radius: 8px; height:30px; text-align:center; cursor:pointer; background-color:rgb(30, 30, 30, .5);
  border-bottom: 1px solid #000c13; color:#fff; padding:10px; padding-left:15px; padding-right:15px; font-size:16px; font-weight: bold; line-height:30px; margin:0;
} .Onglet3Off:hover{ background-color:rgb(0, 12, 19, .8); }
.Onglet3Off.Blanc{ background:#fff; color:#000; }


.OngletBis1On{
  display:inline-block; height:15px; text-align:center; cursor:pointer; background-color:rgb(0, 12, 19, .9);
  border: 1px solid #fff; color:#fff; padding:10px; padding-left:10px; padding-right:10px; font-size:14px; font-weight: bold; line-height:15px; margin:0;
}
.OngletBis1Off{
  display:inline-block; height:15px; text-align:center; cursor:pointer; background-color:rgba(74, 79, 82, 0.8); opacity:60%;
  border: 1px solid #fff; color:#fff; padding:10px; padding-left:10px; padding-right:10px; font-size:14px; font-weight: normal; line-height:15px; margin:0;
} 
.OngletBis1Off:hover{ background-color:rgb(255, 255, 255, .5); }
.OngletBis2On, .OngletBis3On{
  display:inline-block; border-bottom-right-radius: 8px; height:15px; text-align:center; cursor:pointer; background-color:rgb(0, 12, 19, .9);
  border: 1px solid #fff; color:#fff; padding:10px; padding-left:10px; padding-right:10px; font-size:14px; font-weight: bold; line-height:15px; margin:0;
} 
.OngletBis2Off:hover{ background-color:rgb(255, 255, 255, .5); } 
.OngletBis3Off:hover{ background-color:rgb(255, 255, 255, .5); }
.OngletBis2Off, .OngletBis3Off{
  display:inline-block; border-bottom-right-radius: 8px; height:15px; text-align:center; cursor:pointer; background-color:rgba(74, 79, 82, 0.8); opacity:60%;
  border: 1px solid #fff; color:#fff; padding:10px; padding-left:10px; padding-right:10px; font-size:14px; font-weight: normal; line-height:15px; margin:0;
}


.margin2 { margin:2px }
.margin4 { margin:4px }
.margin6 { margin:6px }
.margin8 { margin:8px }
.margin10 { margin:10px }
.marginTop{  }
.Padding2{ padding:2px; }
.padding2 { padding:2px }
.padding4 { padding:4px }
.padding6 { padding:6px }
.padding8 { padding:8px }
.padding10 { padding:10px }

.paddingDroite2{ padding-right:2px; }
.paddingDroite4{ padding-right:4px; }
.paddingDroite6{ padding-right:6px; }
.paddingDroite8{ padding-right:8px; }
.paddingDroite10{ padding-right:10px; }

.paddingGauche2{ padding-left:2px; }
.paddingGauche4{ padding-left:4px; }
.paddingGauche6{ padding-left:6px; }
.paddingGauche8{ padding-left:8px; }
.paddingGauche10{ padding-left:10px; }

.txt9{ font-size:9px; }
.txt10{ font-size:10px; }
.txt11{ font-size:11px; }
.txt12{ font-size:12px; }
.txt13{ font-size:13px; }
.txt14{ font-size:14px; }
.txt16{ font-size:16px; }
.txt18{ font-size:18px; }
.txt20{ font-size:20px; }
.txt30{ font-size:30px; }
.txt40{ font-size:40px; }

.txtBlanc{ color:#fff; }
.txtNoir { color:#000000; }
.txtGras { font-weight:bold; }
.txtBleu { color:#0B73B5; }
.txtVert { color:#77d965; }
.txtJaune { color:#FFC300; }
.txtJauneP { color:#FFCC00; font-weight:bold; font-family: Arial, sans serif; font-size:11px; }
.txtRouge { color:#FF8790; }
.TexteRouge { color:#FF3B4A; text-decoration: none }
.TexteVert { color:#006600; text-decoration: none }
.txtGris { color:#ccc; }
.txtGrisF { color:#666; }

.fondvert, .fondVert { background:#33AD38; color: #FFFFFF; font-weight: bold;}
.fondOrange { background:#FFA800; color: #FFFFFF; font-weight: bold;}
.fondRouge { background:#990000; color: #FFFFFF; font-weight: bold;}
.fondNoir { background:#000; color: #FFFFFF; font-weight: bold;}
.fontcolore, .fontColore { background: #000c13; padding:6px; }
.fontcolore2, .fontColore2, .fontcoloreHover:hover { background: #0B73B5; padding:6px; }

.bgBlanc { background:#fff; }

table { text-align:left; }
tr { border: 0; border-spacing: 0px; padding: 0px; }
td { border: 0; border-spacing: 0px; padding: 5px; font-size:14px; }
.tdbarre { color:#FFFFFF; font-weight:bold; height:20px; border:none; background-image: url(../Images/Design/barre.png?8); background-repeat:no-repeat; }
.tdbarreRouge { color:#FFFFFF; font-weight:bold; height:20px; border-right:1px solid #999999; border-left:1px solid #999999; background-image: url(../Images/Design/barre_rouge.png?8); background-repeat:repeat-x; }
.tdTitres{ color:#FFFFFF; background-color:#000C13; border:0; padding:6px; }
.tdFond { background-color:#333; filter:Alpha(opacity="80"); MozOpacity:0.80; opacity:0.80; }
.tdFond2 { background-color:#666; filter:Alpha(opacity="80"); MozOpacity:0.80; opacity:0.80; }
.tdFond3 { background-color:rgb(0, 12, 19, .9); filter:Alpha(opacity="80"); MozOpacity:0.80; opacity:0.80; }
.tdCadre { border:1px; border-style:solid; border-color:#000c13; }
.tdCadre2 { border:2px; border-style:solid; border-color:#000c13; }
.tdCadre3 { border:3px; border-style:solid; border-color:#000c13; }
.tdCadre4 { border:4px; border-style:solid; border-color:#000c13; }
.tdCadreBlanc { border-width: 1px 1px 1px 1px; border-style: solid; border-color: #FFFFFF }
.tdCadreGris { border-width: 1px 1px 1px 1px; border-style: solid; border-color: #CCCCCC }
.tdssMenu { border-width:1px 0 0 0; border-style:solid; border-color:#FFFFFF }
.txt { color:#0B73B5; }

.tdDroit { border-width: 0 1px 0 0; border-style: solid; border-color: #333333 }
.tdGche { border-width:0 0 0 1px; border-style:solid; border-color:#333333 }
.tdBas { border-width:0 0 1px 0; border-style:solid; border-color:#999999 }
.tdBasDroit { border-width:0 1px 1px 0; border-style:solid; border-color:#333333 }
.tdBasGche { border-width:0 0 1px 1px; border-style:solid; border-color:#333333 }
.tdPointsBas { border-width:0 0 1px 0; border-style:solid; border-color:#0B73B5 }
.tdHaut { border-width:1px 0 0 0; border-style:solid; border-color:#999999 }
.tdHautDroit { border-width:1px 1px 0 0; border-style:solid; border-color:#333333 }
.tdHautGche { border-width:1px 0 0 1px; border-style:solid; border-color:#333333 }
.tdPointsHaut { border-width:1px 0 0 0; border-style:solid; border-color:#0B73B5 }
.tdHautBas { border-width:1px 0 1px 0; border-style:solid; border-color:#999999 }
.tdHautBasGche { border-width:1px 0 1px 1px; border-style:solid; border-color:#999999 }
.tdDroitGauche { border-width:0 1px 0 1px; border-style:solid; border-color:#333333 }
.tdGcheDroitBas { border-width:0 1px 1px 1px; border-style:solid; border-color:#000000 }
.tdGcheDroitHaut { border-width:1px 1px 0 1px; border-style:solid; border-color:#333333 }
.tdCadreClubHouse { border-width: 0px 0px 1px 1px; border-style: dashed; border-color: #0B73B5; }
.tdBasBleu { border-width:0 0 1px 0; border-style:solid; border-color:#0B73B5 }

.tdMenu, .tdMenu2 { color:#FFFFFF; padding:6px; line-height:30px; }

#CadreBis{ color:#666666; }
#CadreBis table, #CadreBis td { color:#666666; }

.tdTirets { border-style: dashed; }
.tdPoints { border-style: dotted; }
.tdArrondi { border-radius: 8px; }
.tdArrondiHaut { border-top-left-radius: 4px; border-top-right-radius: 4px; }
.tdArrondi6 { border-radius: 6px; }
.tdArrondi8 { border-radius: 8px; }
.tdArrondi10 { border-radius: 10px; }
.tdOmbre { /*-moz-box-shadow:0 0 5px #aaaaaa; -webkit-box-shadow:0 0 5px #aaaaaa; box-shadow:0 0 5px #aaaaaa;*/ }
.tdOmbreNoir { /*-moz-box-shadow:0 0 5px #333333; -webkit-box-shadow:0 0 5px #333333; box-shadow:0 0 5px #333333;*/ }
.tdArrondiGauche{ border-top-left-radius:8px; border-bottom-left-radius:8px; }
.tdArrondiDroite{ border-top-right-radius:8px; border-bottom-right-radius:8px; }

.tdGris { background: #666666 }
.tdGrisC { background: #cccccc }
.tdBlanc { background: #fff }

body {
	margin:0;
	padding:0;
	height: 100%;
	color: #fff;
	font-family: 'Lato', sans serif;
	font-size:12px;
	background-color:#000c13;

	background-image:url(../Images/Design/fond.webp);
	background-position:top center;
  background-attachment: fixed;
	background-repeat:no-repeat;
  background-size: cover;
}
body.materiel{ 
  background-image:url(../Images/Design/materiel.webp);
  background-position: center center;
}
body.spectateurs{ 
  background-image:url(../Images/Design/stade.webp);
  background-position: center center;
}
body.stade{ 
  background-image:url(../Images/Design/maintenance.webp);
  background-position: center center;
}
body.formation{ 
  background-image:url(../Images/Design/formation.webp);
}
body.sponsors{ 
  background-image:url(../Images/Design/sponsors.webp);
}
body.banque{ 
  background-image:url(../Images/Design/banque.webp);
}
body.staff{ 
  background-image:url(../Images/Design/staff.webp);
}
body.stats{ 
  background-image:url(../Images/Design/stats.webp);
}
body.entrainement{ 
  background-image:url(../Images/Design/entrainement.webp);
}
body.matchs{ 
  background-image:url(../Images/Design/matchs.webp);
}
body.compte{ 
  background-image:url(../Images/Design/bureau.webp);
}
body.trophees{ 
  background-image:url(../Images/Design/trophees.webp);
}
body.seniors{ 
  background-image:url(../Images/Design/seniors.webp);
}
body.espoirs{ 
  background-image:url(../Images/Design/espoirs.webp);
}
body.infirmerie{ 
  background-image:url(../Images/Design/infirmerie.webp);
}
body.messages{ 
  background-image:url(../Images/Design/courrier.webp);
}
body.pays{ 
  background-image:url(../Images/Design/pays.webp);
}
body.transferts{ 
  background-image:url(../Images/Design/transferts.webp);
}
body.transfertsE{ 
  background-image:url(../Images/Design/transfertsE.webp);
}

div#BoutonAide { position:absolute; right:80px; top:50px; z-index:6; }
div#Aide { border: 1px; border-style:solid; position:absolute; left:200px; top:200px; width:600px; z-index:12; }


div#Entete {
	position:fixed;
	left:0px;
	top:0px;
	height:100px;
	width:100%;
	background-color:#000c13;
  color:#fff;
	z-index:2;

	align-content: center;
	text-align: center;
	box-shadow: 0px -4px 4px 6px rgba(0, 0, 0, 0.2);
  z-index:15;
}
div#ZoneMenu{
	position:relative;
	max-width:1024px;
	margin:auto;
}
div#Logo{
	position: absolute;
  top:0px;
  left:40px;
  z-index:30;
}
.Logo{
  vertical-align: middle; 
  border:4px solid #000; 
  border-radius:30px; 
  box-shadow: 0px 2px 2px 4px rgb(0, 0, 0, 0.2); 
}
.MenuOff{
	position: relative;
	display:inline-block;
	height:60px;
	line-height: 100px;
	font-size:14px;
	vertical-align: bottom;
	padding-block:10px;
	margin-left:10px;
	margin-right: 10px;

	transition-property: border;
  transition-duration: 400ms;
  transition-delay: 10ms;
}
.Menu{
	position: relative;
	font-size:14px;
	vertical-align: bottom;
	padding-block:10px;
	margin-left:10px;
	margin-right: 10px;
  cursor:pointer;

	transition-property: border;
  transition-duration: 400ms;
  transition-delay: 10ms;
}.selected, .Menu:hover{
	border-bottom:2px solid #fff;
}.notselected{
	border-bottom:2px solid #000c13;
}
.Desktop{}
.Centpx{ width:100px; }
.CentPrct{ width: 100%; }

.SousMenu{
  display:none;
  font-size:12px;
  z-index:5;
}
.MenuLigne{
  position:relative;
  display:block;
  line-height: 30px;
  border-bottom:2px solid #000;
}.MenuLigne:hover{
	border-bottom:2px solid #fff;
}

div#BurgerIcon{
  position:absolute;
  display:none;
  top:30px;
  right:40px;
}
div#BurgerMenu{
  position:relative;
}

div#Inscrits{
  position:absolute;
  top:90px;
  left:0px;
	background-color:rgb(0, 12, 19, .8);
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
	box-shadow: 0px -4px 4px 6px rgba(0, 0, 0, 0.2);
	padding:10px;
  text-align:left;
	z-index: 3;
}
div#Actifs{
  position:absolute;
  top:90px;
  left:200px;
	background-color:rgb(0, 12, 19, .8);
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
	box-shadow: 0px -4px 4px 6px rgba(0, 0, 0, 0.2);
	padding:10px;
  text-align:left;
	z-index: 3;
}
div#Connectes{
  position:absolute;
  top:90px;
  left:400px;
	background-color:rgb(0, 12, 19, .8);
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
	box-shadow: 0px -4px 4px 6px rgba(0, 0, 0, 0.2);
	padding:10px;
  text-align:left;
	z-index: 3;
}

div#Login{
	position: absolute;
	top:90px;
	right:0px;
	background-color: #000c13;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
	box-shadow: 0px -4px 4px 6px rgba(0, 0, 0, 0.2);
	padding:10px;
  text-align:left;
	z-index: 3;
}
div#Login form{ text-align:left; line-height:40px; }

div#Profil{
	position: absolute;
	top:90px;
	left:50px;
  width:200px;
  height:210px;
  overflow: hidden;
	background-color: #000c13;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
	box-shadow: 0px -4px 4px 6px rgba(0, 0, 0, 0.2);
	padding:5px;
  text-align:left;
  font-size:14px;
	z-index: 3;
}
div#HistMatchs{
	position: absolute;
	top:90px;
	left:290px;
  width:450px;
  height:210px;
  overflow: hidden;
	background-color: #000c13;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
	box-shadow: 0px -4px 4px 6px rgba(0, 0, 0, 0.2);
	padding:5px;
  text-align:left;
  font-size:14px;
	z-index: 3;
}
div#Actu{
	position: absolute;
	top:90px;
	left:770px;
  width:200px;
  height:210px;
  overflow: hidden;
	background-color: #000c13;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
	box-shadow: 0px -4px 4px 6px rgba(0, 0, 0, 0.2);
	padding:5px;
  text-align:left;
  font-size:14px;
	z-index: 3;
}


div#Corps{
	position:relative;
	left:0px;
	top:60px;
	height:100%;
	width:100%;
}
div#Centre{
	position:relative;
	margin:auto;
	padding-top:140px;
	max-width:1024px;
}

div#Footer{
  position:relative;
  width:100%;
  height:200px;
}

div#Alerte.Modale { width:400px; left:25%; line-height:20px; padding:10px; padding-top:20px; padding-bottom:20px; }
div#Message.Modale { line-height:30px; }

div#Pub{
	position:fixed;
	bottom:0px;
  left: 50%;
  transform: translateX(-50%);
	margin:auto;
	width:728px;
	height:90px;
	background-color: #000c13;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	box-shadow: 0px 4px 4px 6px rgba(0, 0, 0, 0.2);
	padding:10px;
	z-index: 29;

  transition:
    width 1s,
    height 1s,
    left 1s;
}
div#Pub.Closed{ width:100px; height:20px; overflow:hidden; }

div#Credit{
  bottom:0px;
  left:0px;
  padding:10px;
  color:#fff;
  font)size:12px;
}

/* CALENDRIER DES EVENEMENTS */
.EventOn {
    width:55px;
    height:45px;
    padding:4px;
    display:inline-block;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    color:#fff;
    font-size:12px;
    background:#000c13;
    border: 1px solid #fff;
    text-align:center;
    z-index:21;
}
.EventOff {
    width:55px;
    height:40px;
    padding:4px;
    display:inline-block;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    color:#666666;
    font-size:12px;
    background:#FFFFFF;
    cursor:pointer;
    z-index:21;
}
.EventEmpty {
    width:55px;
    height:40px;
    padding:4px;
    display:inline-block;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    color:#CCCCCC;
    font-size:12px;
    background:#FFFFFF;
    cursor:pointer;
    z-index:21;
}
.BlocEvents{ //Bloc avec onglet au dessus
	position:relative;
	background-color:rgb(0, 12, 19, .8);
  border: 1px solid #fff;
	border-radius:8px;
  width:100%;
	padding-top:10px;
	padding-bottom:10px;
  padding-left:15px;
  padding-right:15px;
	font-size:14px;
  text-align: justify;
  margin-left: 1px;
  margin-top:-1px;
  /*max-height:180px;*/
  z-index:15;
  display:none;
  /*overflow:auto;*/
}
/* -- */

/* Classement championnat */
div#Ranking{ }
div#Ranking::-webkit-scrollbar{
	background-color:#fffff;
	width:6px;
	height:6px;
}
div#Ranking::-webkit-scrollbar-thumb{
	background-color:#666666;
}
/* -- */

.Modale{
  position:absolute; background-color:rgb(0, 12, 19); border:1px solid #fff; border-radius:8px; min-height:100px;
	padding:10px; font-size:14px; text-align:center; top:180px; display:none; visibility:visible; box-shadow: 0px 0px 4px 6px rgba(0, 0, 0, 0.2); z-index:99;
}
div#Fiche.Modale { position:absolute; top:-100px; z-index:30; }
div#Fiche2.Modale { position:absolute; top:0px; z-index:31; }
div#Fiche3.Modale { position:absolute; top:0px; z-index:32; }

div#fenetre { border: 1px solid #999999; position:absolute; left:150px; top:273px; width:350px; height:117px; z-index:16; background-color: #FFFFFF; layer-background-color: #FFFFFF; visibility: hidden; }
div#Msge { color: #333333; font-weight: bold; z-index:17; }
div#fenetreCH { border: 1px solid #999999; position:absolute; left:150px; top:350px; width:400px; min-height:117px; z-index:99; background-color: #FFFFFF; layer-background-color: #FFFFFF; visibility: hidden; }
div#InfoCH { color: #333333; font-weight: bold; z-index:17; }
div#enteteCH { border: 0; position:absolute; left:2px; top:-30px; width:61px; height:43px; z-index:17; }
div#Masque{ position: absolute; top: 0; left: 0; z-index:20; width: 100%; height: 500px; background-color: #000; filter:Alpha(opacity="80"); MozOpacity:0.80; opacity:0.80; visibility:hidden; }
div#MasqueDidac{ position:fixed; width:100%; height:110%; left:0px; top:-20px; background:#666666; opacity:0.6; -moz-opacity:0.6; -ms-filter:'alpha(opacity=60)'; filter:alpha(opacity=60); z-index:10; display:none; }

.avatar{ position:relative; cursor:pointer; }
.avatar-info{ position:absolute; top:-15px; left:35px; width:100px; background: #333; color:#fff; border:2px solid #fff; border-radius:8px; padding:4px; white-space= nowrap; z-index:5; }
.droite .avatar-info{ left:35px; }
.gauche .avatar-info{ left:-115px; }

@media screen and (min-width: 1024px) {
  .Bloc{ position:relative; display:inline-block; }
  div#Infos.Bloc{ width:65%; display:table-cell; }
  div#Top10.Bloc{ width:35%; display:table-cell; }
  .Mobile{ display:none; }
  .Modale{ left:25%; width:50%; }
  div#Credit{ position:fixed; }
  .Menu{ display:inline-block; height:60px; line-height:100px; text-align:center; }
  .SousMenu{ position:absolute; top:100px; left: 50%; transform: translateX(-50%); width:150px; background-color:rgb(0, 12, 19); border-radius:8px; padding:10px; border:1px solid #fff; }
  .drawer-hamburger{ display:none; }
  .drawer-nav{ width:auto; text-align:left; background:#000c13; color:#fff; position:relative; font-family: 'Lato', sans serif; font-size:14px; overflow: visible; height: auto; z-index:5; }

  div#HistMatchsB{ display: none; }
  div#ActuB{ display: none; }
}
@media screen and (max-width: 1200px) {
  .clock-container{ display:none; }
}
@media screen and (max-width: 1024px) {
  .Bloc{ position:relative; display:block; margin:5px; }
  .BlocEvents { padding-left:0; padding-right:0; margin:auto; }
  .Bloc, .Bloc2, .Bloc3 { margin:auto; width:92%; }
  div#Centre { padding-left:10px; padding-right:10px; }
  div#Top10{ width:90%; }
  /*div#Pub{ display:none; }*/
  div#Pub{ width:90%; }
  .Desktop{ display:none; }
  .Mobile{ display:inline-block; }
  .BigScreen { display:inline-block; }
  .Modale{ left:0; width:100%; box-shadow: none; padding:0; padding-top:10px;}
  div#Credit{ position:absolute; left:10%;}

  div#BoutonAide { position:absolute; right:60px; top:10px; z-index:6; }

  div#Logo{
    position: absolute;
    top:0px;
    left:40%;
  }

  div#Profil, div#Profil.On{ 
    opacity:100%; 
    width:200px;
    transition-property: width;
    transition-duration: 400ms;
    transition-delay: 10ms;
    z-index: 3;
  } 

  div#HistMatchs{
    opacity: 70%;
    left:50%;
    width:25px;
    transition-property: width;
    transition-duration: 400ms;
    transition-delay: 10ms;
    z-index: 2;
  }
  div#HistMatchs.On{ 
    opacity:100%; 
    left: 35%;
    width:305px;
    transition-property: width;
    transition-duration: 400ms;
    transition-delay: 10ms; 
    z-index: 3;
  }
  div#HistMatchs.On .Contenu{ display:block; }
  div#HistMatchs .Contenu{ display:none; }
  div#HistMatchs .Elargir{ display:block; }
  div#HistMatchs.On .Elargir{ display:none; }

  div#Actu{
    opacity: 70%;
    left:75%;
    width:25px;
    transition-property: width;
    transition-duration: 400ms;
    transition-delay: 10ms;
    z-index: 2;
  }
  div#Actu.On{ 
    opacity:100%; 
    left: 65%;
    width:200px;
    transition-property: width;
    transition-duration: 400ms;
    transition-delay: 10ms; 
    z-index: 3;
  }
  div#Actu.On .Contenu{ display:block; }
  div#Actu .Contenu{ display:none; }
  div#Actu .Elargir{ display:block; }
  div#Actu.On .Elargir{ display:none; }

  .Onglet1On, .Onglet1Off, .Onglet2On, .Onglet2Off, .Onglet3On, .Onglet3Off{ padding-left:10px; padding-right:10px; font-size:14px; }
  .general{ font-size:14px; }
  .tdBloc{ width:96%; padding-left:5px; padding-right:5px; padding-top:10px; padding-bottom:10px; }

  /*
  div#BurgerIcon{ display:block; }
  div#BurgerMenu{ position:absolute;display:none;top:90px;right:5px;width:200px;max-height:400px;background-color:rgb(0, 12, 19);border:2px solid #fff;border-radius:8px;padding:10px;font-size:14px;text-align:center;overflow-y:scroll;z-index:4;}
  */

  .Menu{ display:block; line-height:30px; }
  .SousMenu{ position:relative; border-top: 2px solid #fff; border-bottom: 2px solid #fff; }
  .drawer-hamburger{ display:block; color:#fff; }
  .drawer-hamburger-icon, .drawer-hamburger-icon:after, .drawer-hamburger-icon:before { background-color:#fff;}
  .drawer-nav{ width:150px; padding-left:25px; padding-right:5px; font-family: 'Lato', sans serif; font-size:14px; background:#000c13; color:#fff; z-index:99; }
  .drawer--right.drawer-open .drawer-hamburger{ right:170px; }

  input[type=button]{
  	padding:5px;
  	padding-left:10px;
  	padding-right: 10px;
  	font-size:14px;
  }

  input[type=button], input[type=submit]{
  	padding:5px;
  	padding-left:5px;
  	padding-right: 5px;
  	font-size:14px;
  }

  .messcell{ padding:5px; width:97%; border-radius:8px; margin-top:10px; }
  .messinline{ display:block; }
}
@media screen and (max-width: 750px) {
  div#Alerte.Modale { width:350px; left:5%; }

  div#Profil{ 
    opacity:70%; 
    width:20px;
    transition-property: width;
    transition-duration: 400ms;
    transition-delay: 10ms;
    z-index: 2;
  }
  div#Profil.On .Contenu{ display:block; }
  div#Profil .Contenu{ display:none; }
  div#Profil .Elargir{ display:block; }
  div#Profil.On .Elargir{ display:none; }

  div#HistMatchs{ left: 50%; }
  div#HistMatchs.On{ left: 25%; width:305px; }
  div#Actu{ left:75%; width:25px; }
  div#Actu.On{ left: 65%; width:200px; }
  .hideMobile { display:none; }
  .icone.bleuMobile { color:#0B73B5 }
  .icone.grisMobile { color:#ccc }
  .cell { padding:2px; }
}
@media screen and (max-width: 500px) {
  div#Alerte.Modale { width:350px; left:5%; }
  .BigScreen{ display:none; }
  div#HistMatchs{ left: 275px; }
  div#HistMatchs.On{ left: 95px; width:205px; }
  div#Actu{ left:325px; width:25px; }
  div#Actu.On{ left: 75px; width:200px; }
}
</style>