body {
    background: url("images/backGlace.png") no-repeat center center fixed;
    -webkit-background-size: cover; /* For WebKit*/
    -moz-background-size: cover;    /* Mozilla*/
    -o-background-size: cover;      /* Opera*/
    background-size: cover;         /* Generic*/
}
.centrer {
    /*margin:auto;*/
    margin-left: auto;
    margin-right: auto;
    margin-top:5px;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    width:900px;
    height:675px;
    padding:0px;
    z-index:-1;
}

.barrePointage {
    width:900px;
    height:100px;
    margin:0px;
    border:0px;
    padding: 0px;
    z-index:3;
}

#barrePointsBack {
    position: absolute;
    z-index: 1;
}

#logoEquipeGauche {
    position: absolute;
    left: 23px;
    top: 9px;
    z-index:3;
}

#logoEquipeDroite {
    position: absolute;
    left: 808px;
    top: 9px;
    z-index:3;
}

#nomsGauche {
    position: absolute;
    left: 105px;
    top: 20px;
    z-index:3;
}

#nomsDroite {
    position: absolute;
    left: 595px;
    top: 20px;
    z-index:3;
}

.nomEcole {
    font-family: sans-serif;
    font-style: italic;
    font-size: 10px;
    z-index:3;
}

.nomEquipe {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 20px;
    z-index:3;
}


.pointEquipe {
    position: absolute;

    width :70px;
    height:75px;
    border-width: 3px;
    border-color: black;
    border-style: solid;
    
    padding-top: 5px;
    text-align: center;
    font-family: sans-serif;
    font-size: 50px;
    font-weight: bold;
    color: black;
    z-index:3;
}

#pointEquipeGauche {
    left:310px;
    top:0px;
	background-color: #d90000;
}

#pointEquipeDroite {
    left:510px;
    top:0px;   
    background-color: #2351cc;
}

.punitionEquipe {
    position:absolute;
    font-family: sans-serif;
    font-size: 15px;
    font-weight: bold;
    color: white; 
    z-index:3;
}

#punitionEquipeGauche {
    left:100px;
    top:70px;
}

#punitionEquipeDroite {
    left:600px;
    top:70px;  
}

.informations {
    position:absolute;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    padding-top: 40px;
    left: 0; right: 0;
    top:60px;
    width :650px;
    height:350px;
    
    border-width: 3px;
    border-color: black;
    border-radius: 10px;
    border-style: solid;
    background-color: rgba(20,20,20,0.75);
    z-index: 0;
}

.contenuInformations {
	position:absolute;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    padding-top: 40px;
    left: 0; right: 0;
    top:70px;
    width :650px;
    height:400px;
	
	border-width: 3px;
    border-color: black;
    border-radius: 10px;
    border-style: solid;
    background-color: rgba(20,20,20,0.75);
    z-index: 0;
	
    color:white;
    font-family: sans-serif;
    font-size: 1.2em;   
}

#caucus {
    display:block;     
}

#carton {
    display:none; 
}

#punition {
    display:none;    
}

#vote {
    display:none;     
}


/* Boutons */
/*
.boutons {
    position:absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0; right: 0;
    top: 330px;
}
*/
* {

    margin: 0;
    padding: 0;
  	-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	
/*
	ul {
		margin: 30px auto;
		text-align: center;
	}

	li {
		list-style: none;
		position: relative;
		display: inline-block;
		width: 100px;
		height: 100px;
	}

	@-moz-keyframes rotate {
		0% {transform: rotate(0deg);}
		100% {transform: rotate(-360deg);}
	}

	@-webkit-keyframes rotate {
		0% {transform: rotate(0deg);}
		100% {transform: rotate(-360deg);}
	}

	@-o-keyframes rotate {
		0% {transform: rotate(0deg);}
		100% {transform: rotate(-360deg);}
	}

	@keyframes rotate {
		0% {transform: rotate(0deg);}
		100% {transform: rotate(-360deg);}
	}

	.round {
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		padding-top: 30px;		
		text-decoration: none;		
		text-align: center;
		font-size: 25px;		
		text-shadow: 0 1px 0 rgba(255,255,255,.7);
		letter-spacing: -.065em;
		font-family: "Hammersmith One", sans-serif;		
		-webkit-transition: all .25s ease-in-out;
		-o-transition: all .25s ease-in-out;
		-moz-transition: all .25s ease-in-out;
		transition: all .25s ease-in-out;
		box-shadow: 2px 2px 7px rgba(0,0,0,.2);
		border-radius: 300px;
		z-index: 1;
		border-width: 4px;
		border-style: solid;
	}

	.round:hover {
		width: 130%;
		height: 130%;
		left: -15%;
		top: -15%;
		font-size: 33px;
		padding-top: 38px;
		-webkit-box-shadow: 5px 5px 10px rgba(0,0,0,.3);
		-o-box-shadow: 5px 5px 10px rgba(0,0,0,.3);
		-moz-box-shadow: 5px 5px 10px rgba(0,0,0,.3);
		box-shadow: 5px 5px 10px rgba(0,0,0,.3);
		z-index: 2;
		border-size: 10px;
		-webkit-transform: rotate(-360deg);
		-moz-transform: rotate(-360deg);
		-o-transform: rotate(-360deg);
		transform: rotate(-360deg);
	}

    a.gris {
        background-color: rgb(114, 117, 124);
		color: rgb(0, 0, 0);
		border-color: rgba(33, 33, 33, 0.74);    
    
    }

	
	a.green {
		background-color: rgba(1,151,171,1);
		color: rgba(0,63,71,1);
		border-color: rgba(0,63,71,.2);
	}

	a.green:hover {
		color: rgba(1,151,171,1);
	}

	
	.round span.round {
		display: block;
		opacity: 0;
		-webkit-transition: all .5s ease-in-out;
		-moz-transition: all .5s ease-in-out;
		-o-transition: all .5s ease-in-out;
		transition: all .5s ease-in-out;
		font-size: 1px;
		border: none;
		padding: 40% 20% 0 20%;
		color: #fff;
	}

	.round span:hover {
		opacity: .85;
		font-size: 16px;
		-webkit-text-shadow: 0 1px 1px rgba(0,0,0,.5);
		-moz-text-shadow: 0 1px 1px rgba(0,0,0,.5);
		-o-text-shadow: 0 1px 1px rgba(0,0,0,.5);
		text-shadow: 0 1px 1px rgba(0,0,0,.5);	
	}

	.green span {
		background: rgba(0,63,71,.7);		
	}

	.gris span {
		background: rgba(77, 77, 77, 0.7);		
	}

*/
/* animation des onglets */
.animation-bas-0 {
  animation: animation-slide-down-0 1s ease-in-out forwards;
}
.animation-bas {
  animation: animation-slide-down 1s ease-in-out forwards;
}
.animation-haut {
  animation: animation-slide-up 1s ease-in-out forwards;
}

@keyframes animation-slide-down-0 {
  0% {
    top: -500px;
	/*height:0px;*/
	opacity: 0;
  }
  25% {
	opacity: 1;  
  }
  50% {
    top: 70px;
	opacity: 1;
  }
  100% {
	opacity: 1;
	    top: 70px;
		display:block;
/*	height: 400px;*/
  }  
}

@keyframes animation-slide-down {
  50% {
    top: -500px;
	opacity: 0;
	/*height:0px;*/
  }
  75% {
	  top: 70px;
	opacity: 1;  
  }
  100% {
    top: 70px;
	/*height: 400px;*/
	opacity: 1;
	display:block;
  }
}


@keyframes animation-slide-up {
  0% {
    top: 70px;
	opacity: 1;
  }
  25% {
	opacity: 1;  
  }
  50% {
    top: -500px;
	opacity: 0;
	display:none;
  }
}


.animation-in {
	animation: animation-slide-in 1s ease-in-out forwards;	
}
.animation-out {
	animation: animation-slide-out 1s ease-in-out forwards;
}
.animation-aucun {
	left:- 200px; opacity: 0;
}


@keyframes animation-slide-in {
  0% {
    left: 0px;
	opacity: 0;
  }
  100% {
    left: calc(50% - 200px);
	opacity: 1;
  }
}

@keyframes animation-slide-out {
  100% {
    left: calc(100% - 420px);
	opacity: 0;
  }
  0% {
    left: calc(50% - 200px);
	opacity: 1;
  }  
}

/* Joueurs */
.bancJoueurs {
    position:absolute;
	width: 445px;
	height: 150px;
    top: 520px;
}

#bancJoueursGauche {
     left: 2px;
     top: 470px;  
}
#bancJoueursDroit {
     left: 454px;
     top: 470px;  
}

.banc {
	position: absolute;
	width: 445px;
}

#bancGauche {
	top: 130px;
	left: 0px;
}

#bancDroit {
	top: 130px;
	left: 0px;
}

#bancDessusG {
	left:0px;
	top:0px;
	width:445px;
	height: 20px;
	border-radius: 25px;
	background-color: red;
}
#bancDessusD {
	left:0px;
	top:0px;
	width:445px;
	height: 20px;
	border-radius: 25px;
	background-color: blue;
}

.joueur {
	position:absolute;
	width: 50px;
	height: 100px;
    padding:2px;
    padding-top:14px;
    background-image: url("images/joueurCadre.png");
	background-repeat: no-repeat;
	background-position: center;
}


.joueurNumero {
    margin-top:-2px;
    text-align: center;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 20px;
    color:white;
}

/* Animation pour la présentation des joueurs */
.contenuJoueur {
	position:absolute;
    padding: 10px;
    top:160px;
	left:calc(50% - 200px);
    width :400px;
    height:300px;
	
	border-width: 3px;
    border-color: black;
    border-radius: 10px;
    border-style: solid;
    background-color: rgba(20,20,20,0.75);
    z-index: 0;
	
    color:white;
    font-family: sans-serif;
    font-size: 25px;
	text-align:center;
}