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

body{ background:rgb(38,38,38);}

section
{
	margin:auto;
	width:960px;
	border:dashed 10px #f00;
	background:#282828;
}
article
{
	width:100%;
	height:500px;
}
aside
{
	background:#fff;
	text-align:center;
}
section i.pics
{
	font-size:25px;
	color:#fff;
	text-align:center;
}
strong
{
	display:block;
	margin:auto;
	text-align:center;
	margin:0;
}
i
{
	font-variant:normal;
	font-weight:bold;
	font-size:65px;
	text-align:center;
	color: #fff;
	font-family:"Orator Std";
	/*font-style:normal;*/
	text-shadow: 2px 2px 2px #000;
	margin-top:3px;
}
a
		{
			text-decoration:none;
			color:#000;
			/*text-align:center;*/
			font-family:"Orator Std";
			font-size:20px;
			font-weight:bold;
		}
a:hover
		{
			color:#f00;
		}
em
		{
			font-family:"Orator Std";
			font-style:oblique;
			text-decoration:none;
			color:#909090;
		}
/*------debut-style-serge-formateur--------jeu-principal----------------------*/
header { 
  width:415px; height:60px; margin:0 auto 0 auto; background:#ccc; position: relative;
}

span.btn {
  background: #3498db; display: block; width:80px; text-align: center;
  position: absolute;right:10px;top:10px;
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  border-radius: 28px; text-shadow: 1px 1px 3px #666666;
  font-family: Arial; color: #ffffff; font-size: 15px;
  padding: 10px 20px 10px 20px; text-decoration: none;
}
span.btn:hover
{
	cursor:pointer;
}

span.compteur {
  display: block; position: absolute;left:10px;top:10px;text-align: center;
  width:40px;height:40px;background-image: linear-gradient(to top, #3498db, #2980b9); color:white;
  border-radius: 100%; line-height: 40px;
}

header p {
  width:50%; margin-left:80px; height: 60px; line-height: 60px;
  color:white; font-family: verdana; font-size: 1.1em;
}


/* bloc principal avec 16 div flottants */

.main{ 
    width:415px; margin:10px auto; perspective: 700px;
}


/* CARTES */

.carte { 
	float:left; width:100px; height:100px; position:relative; 
  transition: transform .6s; margin:0 5px 5px 0;
  transform-style: preserve-3d;
}

.main > div:nth-child(4n){ margin-right: 0}


/* FACES DES CARTES */ 

.carte  div { 
	position:absolute;top:0; left:0; width:100px; height:100px;
	line-height:100px; text-align: center; font-size:4em; background:#eee;
  backface-visibility: hidden;
}

/* ROTATION FACE */
.front {  transform: rotateY( 180deg ); }


/* ROTATION via JS */
.flip{  transform: rotateY( 180deg ); }

.hide{ transition: opacity .6s; opacity:.1; }