/* -------------------------------------------- */
/* GENERAL										*/
/* -------------------------------------------- */
@font-face
{
	font-family: "ARIALN";
	src: url("../../fonts/ARIALN.TTF");
	font-weight: normal;
	font-style: normal;
}
@font-face
{
	font-family: "HELVETICANEUELTSTD-CN";
	src: url("../../fonts/HELVETICANEUELTSTD-CN.OTF");
	font-weight: normal;
	font-style: normal;
}

body
{
	margin: 0;
	font-family: Helvetica, Arial, "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", "sans-serif";
	overflow-x: hidden;
    position: relative;
    height: 100%;
	background-image: url(/images/games/katamino/PLATEAU-FACING.jpg);
	background-repeat: no-repeat;
	background-position: -100% 0%
}
h2 {
	text-align: center;
	margin-top: 5px;
	margin-bottom: 20px;
	font-size: 2.5em;
}
a
{
	color: #5E5E5E;
	text-decoration: none;
}
a:hover
{
	color: #7C7C7C;
}


/* -------------------------------------------- */
/* HEADER										*/
/* -------------------------------------------- */
#plateau_facing {
	position: absolute;
	top: 0px;
	right: -500px;
	display: none;
}
#logo 
{
	background-color: black;
	color: white;
	font-family: 'ARIALN', 'HELVETICANEUELTSTD-CN', Helvetica, Gotham, "Helvetica Neue", Arial, sans-serif;
	padding: 5px;
	width: 500px;
	max-width: 100%;
	font-size: 5em;
	font-weight: normal;
	position: relative;
	z-index: 3;
	text-align: left;
}
#btn_menu:dir(rtl) {
    left: 0%;
    right: auto;
}
#btn_menu
{
	background-color: #000000;
	color: white;
	font-size: 3.5em;
	height: 84px;
	width: 84px;
	position: absolute;
	top: 40px;
	right: 0px;
	z-index: 9;
	cursor: pointer;
	-webkit-transition: 0.2s all;
	-o-transition: 0.2s all;
	transition: 0.2s all;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	display: none;
}
#btn_menu:hover
{
	background-color: #444;
}
#menu
{
	position: relative;
	margin: auto;
	max-width: 80%;
	width: 1500px;
	height: 28px;
}
#menu ul
{
	padding: 0;
	list-style: none;
	position: absolute;
	font-size: 1.4em;
	margin: 0;
}
#menu li
{
	display: inline-block;
}
#menu li a
{
	color: white;
	text-decoration: none;
	background-color: black;
	padding: 10px;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
	position: relative;
	top: -2px;
	cursor: pointer;
}
#menu li a:hover
{
	background-color: #444;
	position: relative;
	top: -7px;
}
#langue {
	position: absolute;
	top: 0px;
	right: 0px;
	cursor: pointer;
}
#langue a {
	padding: 10px 15px 45px 15px;
	top: -25px;
	color: white;
	text-decoration: none;
	background-color: black;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
	position: relative;
}
#langue a:hover {
	background-color: #444;
	position: relative;
	top: -30px;
}
#langue img {
	vertical-align: top;
	width: 50px;
}
.drapeau {
	width: 50px;
}
#onglet_connexion {
	right: 110px;
	left: auto;
}
#choix_langue {
	position: absolute;
	right: -5px;
	top: 31px;
	background-color: #BDC900;
	font-size: 1.5em;
	padding: 0;
	display: none;
	z-index: 4;
}
#choix_langue:dir(rtl) {
    left: auto;
    right: 0;
}
#choix_langue a {
	display: block;
	padding: 10px 30px;
	cursor: pointer;
	background-color: #BDC900;
	color: #FFFFFF;
	border-top: #8B9500 solid 1px;
}
#choix_langue div:first-child a {
	border-top: none;
}
#choix_langue a:hover {
	background-color: #A1AD01;
}
.drapeau_carre_langue, .drapeau_cube_langue {
	display: none;
}

/* -------------------------------------------- */
/* PAGE											*/
/* -------------------------------------------- */
#main
{
	max-width: 80%;
	width: 1500px;
	margin: auto;
	padding: 1%;
	background-color: rgba(255,255,255,1.00);
	position: relative;
	z-index: 1;
	border: solid;
}
.piece_deco
{
	position: absolute;
	top : 300px;
}
#piece-deco-T {
	top: 450px;
	left: 3vw;
}

#piece-deco-L {
	top: 650px;
	left: 1vw;
}

#piece-deco-U {
	top: 300px;
	left: 1vw;
}

#piece-deco-S {
	top: 500px;
	right: 3vw;
}

#piece-deco-I {
	top: 700px;
	right: 2vw;
}

#piece-deco-VW {
	top: 250px;
	right: 1vw;
}


/* -------------------------------------------- */
/* REGLES										*/
/* -------------------------------------------- */
#video {
	text-align: center;
	margin-top: 10px;
	width: 100%!important;
	min-height: 31vw;
}
#video > * {
	max-width: 100%;
	border: 0;
	width: 55.1vw;
	height: 31vw;
	-webkit-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}
#Penta_A8_livret, #grille_vide {
	width: 90%;
	position: absolute;
	top: 15%;
	left: 5%;
}
.title_section {
	background-color: black;
	color: white;
}
.bubble {
	background-color: black!important;
	color: white;
}
/* -- Introduction -- */
#introduction {
	text-align: center;
}
/* -- Les défis -- */
#penta_a3, #Penta_A4_livret {
	width: 60%;
	position: absolute;
	top: 10%;
	left: 20%;
}
#plateau_penta_3a, #plateau_penta_4a {
	width: 110%;
	position: absolute;
	top: 10%;
	left: 20%;
}

#plateau_reglette_3, #plateau_reglette_4, #plateau_reglette_4_libre {
	width: 110%;
	position: absolute;
	top: 25%;
	left: 15%;
}
#plateau_reglette_3_zoom, #plateau_reglette_4_zoom, #plateau_reglette_4_zoom_libre {
	position: absolute;
	top: 13.6%;
	left: -19%;
	width: 220%;
}
#plateau_reglette_3_zoom {
	-webkit-clip-path: ellipse(5% 7% at 30.5% 12%);
	clip-path: ellipse(5% 7% at 30.5% 12%);
	top: 13.6%;
	left: -19%;
}
#plateau_reglette_4_zoom, #plateau_reglette_4_zoom_libre{
	-webkit-clip-path: ellipse(5% 7% at 36.7% 11%);
	clip-path: ellipse(5% 7% at 36.7% 11%);
	top: 14.9%;
	left: -26.6%;
}
#tour_plateau_r3_zoom, #tour_plateau_r4_zoom, #tour_plateau_r4_zoom_libre {
	position: absolute;
	top: 13.6%;
	left: -25.1%;
	-webkit-filter: brightness(0);
	        filter: brightness(0);
	width: 240%;
	-webkit-clip-path: ellipse(5% 7.4% at 30.5% 11%);
	clip-path: ellipse(5% 7.4% at 30.5% 11%);
}
#tour_plateau_r3_zoom {
	top: 13.6%;
	left: -25.1%;
}
#tour_plateau_r4_zoom, #tour_plateau_r4_zoom_libre {
	left: -19%;
}
#piece_penta_a3_y, #piece_penta_a3_t, #piece_penta_a3_l, #pieces_penta_a4_prec, #pieces_penta_a4_new {
	max-height: 100%;
	max-width: 100%;
	position: absolute;
	top: 0%;
	left: 0%;
}
#piece_penta_a3_y {
	-webkit-clip-path: polygon(48% 1%, 60% 5%, 60% 20%, 78% 25%, 75% 47%, 34% 35%, 36% 13%, 45% 15%);
	clip-path: polygon(48% 1%, 60% 5%, 60% 20%, 78% 25%, 75% 47%, 34% 35%, 36% 13%, 45% 15%);
}
#piece_penta_a3_l {
	-webkit-clip-path: polygon(30% 35%, 47% 60%, 35% 80%, 28% 70%, 10% 100%, 0 85%);
	clip-path: polygon(30% 35%, 47% 60%, 35% 80%, 28% 70%, 10% 100%, 0 85%);
}
#piece_penta_a3_t {
	-webkit-clip-path: polygon(62% 62%, 81% 60%, 80% 44%, 95% 40%, 100% 93%, 85% 95%, 85% 82%, 65% 85%);
	clip-path: polygon(62% 62%, 81% 60%, 80% 44%, 95% 40%, 100% 93%, 85% 95%, 85% 82%, 65% 85%);
}
#pieces_penta_a4_prec {
	-webkit-clip-path: polygon(0% 0%, 56% 0%, 56% 100%, 0% 100%);
	clip-path: polygon(0% 0%, 56% 0%, 56% 100%, 0% 100%);
}
#pieces_penta_a4_new {
	-webkit-clip-path: polygon(100% 0%, 57% 0%, 57% 100%, 100% 100%);
	clip-path: polygon(100% 0%, 57% 0%, 57% 100%, 100% 100%);
}

/* -- LIBRE -- */
#piece_libre_t {
	position: absolute;
	width: 30%;
	top: 1%;
	right: 10%;
}
.combinaisons_libre {
	width: 26%;
}
#soluce1_penta4_libre {
	top: 1%;
	left: 10%;
}
#soluce2_penta4_libre {
	top: 1%;
	right: 10%;
}
#soluce3_penta4_libre {
	bottom: 1%;
	right: 10%;
}
#soluce4_penta4_libre {
	bottom: 1%;
	left: 10%;
}
#libre_penta_5_6 {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}
#libre_penta_5_6 img {
	max-width: 100%;
	margin: 5px;
	max-height: 50%;
}
/* -- 2 JOUEURS -- */
.grille td {
	border: 1px black solid;
	width: 26px;
	height: 26px;
	background-color: white;
}
.grille {
	border-collapse: collapse;
	position: absolute;
	z-index: 1;
	top: 50%;
	-webkit-transform: translateY(-50%) translateX(-50%);
	    -ms-transform: translateY(-50%) translateX(-50%);
	        transform: translateY(-50%) translateX(-50%);
	left: 50%;
	max-height: 100%;
	max-width: 100%;
	direction: ltr;
}
.dos_livre {
	height: 258px;
	max-height: 90%;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%) translateX(-50.5%);
	    -ms-transform: translateY(-50%) translateX(-50.5%);
	        transform: translateY(-50%) translateX(-50.5%);
	left: 50%;
}


/* -------------------------------------------- */
/* SOLUTIONS									*/
/* -------------------------------------------- */
#solutions
{
	text-align: center;
}
#plateau
{
	background-image: url('/images/games/katamino/PLATEAU-VIDE.jpg');
	background-size: 100%;
	background-repeat: no-repeat;
	width: 60vw;
	height: 28vw;
	margin: auto;
	position: relative;
	direction: ltr;
}
.case
{
	border-style: solid;
	border-width: 0.1vw;
	border-color: rgba(0,0,0,0.00)
}
#pieces
{
	border-collapse: collapse;
	position: absolute;
	top: 4.1vw;
	left: 4.65vw;
	width: 46.7vw;
	height: 19.4vw;
}
.piece td 
{
	width: 25px;
	height: 25px;
}
.piece table 
{
	border-collapse: collapse;
}
.piece
{
	width: 90px;
	height: 140px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	margin: 10px;
	outline : none;
	padding: 5px;
	cursor: pointer;
}
.piece:hover
{
	background-color: #eee;
}
.piece:active
{
	background-color: #ddd;
}
#liste_pieces
{
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack:center;
	    -ms-flex-pack:center;
	        justify-content:center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-ms-flex-line-pack: stretch;
	    align-content: stretch;
	direction: ltr;
}
#bouton_resoudre, #bouton_desselectionner
{
	border: none;
	padding: 10px 40px;
	font-size: 1.5em;
	font-weight: bold;
	border-radius: 50px 50px 50px 50px;
	background-color: #6BCEFF;
}
#bouton_resoudre:hover 
{
	background-color: #31A3DB;
	cursor: pointer;
}
#bouton_desselectionner {
	background-color: #CCB6FF;
}
#bouton_desselectionner:hover {
	background-color: #957ECC;
	cursor: pointer;
}
#reglette {
	position: absolute;
	top: 1.7vw;
	left: 52.2vw;
	width: 3.6vw;
	-webkit-transition: left 1s;
	-o-transition: left 1s;
	transition: left 1s;
}
#erreur_nb_pieces, #erreur_solution {
	color: red;
	margin: 0;
	display: none;
}

/* -------------------------------------------- */
/* MES PENTAS									*/
/* -------------------------------------------- */
#mes_pentas
{
	text-align: center;
}
#menu_niveaux
{
	text-align: center;
	position: relative;
	margin-top: 22px;
	margin-bottom: 20px;
}
#menu_niveaux ul
{
	padding: 0px;
	list-style: none;
	position: relative;
	font-size: 1.4em;
	margin: 0px;
}
#menu_niveaux li
{
	display: inline-block;
	color: white;
	text-decoration: none;
	background-color: black;
	padding: 20px;
	margin: 5px;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
	position: relative;
	cursor: pointer;
}
#menu_niveaux li:hover
{
	background-color: #444;
	position: relative;
}
.defis
{
	position: relative;
	border-collapse: collapse;
	width: 100%;
	text-align: center;
	font-size: 2em;
	display: none;
	direction: ltr;
}
.defis th
{
	background-color: black;
	color: white;
}
.defis tr
{
	height: 50px;
}
.defis td, .defis th
{
	border-right: solid black 2px;
	border-bottom: solid black 1px;
}
.defis tr:last-child
{
	border-bottom: solid black 2px;
}
.defis td
{
	height: 50px;
	width: 4%
}
.defis img
{
	max-width: 100%;
	max-height: 100%;
	margin-bottom: -7px;
}
.penta
{
	cursor: pointer;
}
.penta:hover
{
	background-color: #eee;
}
.penta:active
{
	background-color: #ddd;
}
.penta_reussi
{
	background-color: #CCFFF4;
}
#btn_reinit {
	margin-top: 10px;
	padding: 10px 30px;
	background-color:#74C0EA;
	border: 1px solid #5EB6E6;
	cursor: pointer;
	font-size: 1.2em;
}
#btn_reinit:hover {
	background-color:#62B8E7;
	border: 1px solid #4CAEE3;
}
#btn_reinit:focus {
	background-color:#52B0E4;
	border: 1px solid #41A8E1;
}

/* -------------------------------------------- */
/* FOOTER										*/
/* -------------------------------------------- */
footer 
{
	background-color: #181615;
	max-width: 80%;
	width: 1500px;
	margin: auto;
	padding: 1%;
	position: relative;
	z-index: 1;
	border: #181615 solid;
	color: white;
	margin-bottom: 50px;
}
.conteneur_cols
{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: distribute;
	    justify-content: space-around;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
}
.titre_col_footer
{
	font-size: 1.1em;
}
footer a
{
	font-weight: bold;
	color: #E5E5E5;
	text-decoration: none;
}
footer a:hover
{
	color: #FFFFFF;
} 
.mentionslegales {
	text-align: center;
	padding: 20px 0 5px 0;
	color: white;
}
.footer_col 
{
	margin: 20px 0;
	min-width: 209px;
}
#footer_sites, #footer_reseaux, #footer_adresse
{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
}
footer p, footer a {
	margin: 2px 0;
}
.reseaux_footer {
	width: 70px;
}
.reseaux_footer:hover {
	-webkit-box-shadow: 0px 0px 5px white;
	        box-shadow: 0px 0px 5px white;
}
#bouton_point_vente {
	color: white;
	background-color: #adb614;
	border: none;
	margin: 20px 0 0 0;
	padding: 20px 10px;
	font-size: 1.1em;
	cursor: pointer;
	display: block;
}
#bouton_point_vente:hover {
	background-color: #909810;
}

/* -------------------------------------------- */
/* CONNEXION									*/
/* -------------------------------------------- */
.page_connexion
{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}
#part_connexion, #part_register
{
	width: 50%;
	padding:10px;
}
#part_connexion
{
	border-right: 1px solid #B5B5B5;
}
.page_connexion label
{
	display: block;
	padding-left: 10px;
}
.page_connexion input[type="text"], .page_connexion input[type="password"], .page_connexion input[type="e-mail"]
{
	width: calc(100% - 6px);
	font-size: 1.2em;
	padding: 2px 1px 2px 5px;
	border: 0;
	border-bottom: solid 2px #8EBF24;
	margin: 10px 0;
	-webkit-transition: padding 0.3s, margin 0.3s;
	-o-transition: padding 0.3s, margin 0.3s;
	transition: padding 0.3s, margin 0.3s;
}
.page_connexion input[type="text"]:focus, .page_connexion input[type="password"]:focus, .page_connexion input[type="e-mail"]:focus
{
	margin-left: -5px;
	border-bottom-width: 3px;
	padding: 2px 6px 2px 10px;
}
.formulaire {
	margin: auto;
	width: 250px;
	max-width: 95%;
}
.page_connexion a
{
	color: #555;
	font-weight: bold;
	text-decoration: none;
	display: inline-block;
	padding: 10px;
}
.page_connexion a:hover
{
	color: #777;
}
.page_connexion button
{
	float: right;
	background-color: #eee;
	border: none;
	padding: 10px;
	border-radius: 7px;
	cursor: pointer;
}
.page_connexion button:hover
{
	background-color: #ddd;
}
.page_connexion button:focus
{
	background-color: #ccc;
}
.connexion_reseau {
	text-align: center;
	vertical-align: middle;
}
#btn_facebook {
	background-color: #3B5998;
	color: white;
	border: none;
}
#btn_facebook:hover {
	background-color: #35518A;
}
#btn_facebook:focus {
	background-color: #2F4779;
}
.btn_reseaux i {
	padding: 0 20px 0 5px;
	font-size: 1em;
}
.btn_reseaux {
	margin: 10px 10px;
	padding: 10px;
	font-size: 2em;
	border-radius: 5px;
	-webkit-box-shadow: 0px 2px 5px #888;
	        box-shadow: 0px 2px 5px #888;
	cursor: pointer;
}
.btn_reseaux img {
	width: 32px;
	padding: 0 20px 0 5px;
}
#btn_google {
	background-color: #fff;
	color: #aaa;
	border: none;
}
#btn_google:hover {
	background-color: #eee;
}
#btn_google:focus {
	background-color: #ddd;
}
.error {
	background-color: #D75759;
	padding: 10px;
	font-weight: bold;
	width: 500px;
	max-width: 90%;
	margin: auto;
	margin-bottom: 10px;
}
.success {
	background-color: #94DD3E;
	padding: 10px;
	font-weight: bold;
	width: 500px;
	max-width: 90%;
	margin: auto;
	margin-bottom: 10px;
}

#popVictoire {
	display: none;
	position: fixed;
	background-color: rgba(0,0,0,0.30);
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 10;
}
#conteneur_popup {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50% , -50%);
	    -ms-transform: translate(-50% , -50%);
	        transform: translate(-50% , -50%);
	background-color: white;
	min-width: 40%;
	padding: 5% 0;
	max-width: 100%;
	max-height: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}
.share_facebook {
	cursor: pointer;
	height: 40px;
	border: none;
	border-radius: 3px;
	vertical-align: middle;
	overflow: hidden;
	color: white;
	background-color: #3b5998;
	font-size: 1.1em;
}
.share_facebook:hover {
	background-color: #2d4373;
}

#auteur {
	font-family: 'ARIALN', 'HELVETICANEUELTSTD-CN', Helvetica, Gotham, "Helvetica Neue", Arial, sans-serif;
	font-weight: bold;
	position: absolute;
	top: -30px;
	right: 20px;
}

#onglet_pages {
	left: 0;
}


/* -------------------------------------------- */
/* Tablette en paysage, petit/moyen écran		*/
/* -------------------------------------------- */
@media (max-width: 1280px){
}


/* -------------------------------------------- */
/* Smartphone en paysage, tablette en portrait	*/
/* -------------------------------------------- */
@media (max-width: 959px){
	body
	{
		background-position: 50% 0%
	}
	/* HEADER */
	#plateau_facing {
		position: absolute;
		top: -10px;
		right: -600px;
	}
	#logo 
	{
		width: 300px;
		font-size: 4em;
		margin-top: 40px;
		margin-bottom: 100px;
	}
	#langue
	{
		left: 10px;
	}
	#langue a {
		top: -55px;
	}
	#langue a:hover {
		top: -60px;
	}
	#btn_menu
	{
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
	}
	#menu 
	{
		position: absolute;
		width: 100%;
		max-width: 100%;
	}
	#menu ul
	{
		z-index: 8;
		position: relative;
		right: 0px;
		top: -59px;
		margin: 0;
		font-size: 1.4em;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		-webkit-box-align: end;
		    -ms-flex-align: end;
		        align-items: flex-end;
		overflow: hidden;
		-webkit-transition: all 0.5s;
		-o-transition: all 0.5s;
		transition: all 0.5s;
		height: 0px;
	}
	#menu li
	{
		display: block;
		max-width: 70%;
		width: 300px;
		-webkit-transition: all 0.5s;
		-o-transition: all 0.5s;
		transition: all 0.5s;
		height: 46px;
	}
	#menu li a 
	{
		top: 0px;
		padding-left: 20px;
		right: -10px;
		display: block;
		border: 1px solid #333;
	}
	#menu li a:hover
	{
		top: 0px;
		right: 0px;
	}
	#connect, #subscribe
	{
		position: relative;
		right: auto;
	}
	#choix_langue 
	{
		right: auto;
		left: 5px;
		top: 0px;
	}
	/* PAGE */
	#main
	{
		max-width: 98%;
		border: none;
	}
	.piece_deco
	{
		visibility: hidden;
		top: 0;
	}
	/* SOLUTIONS */
	#bouton_resoudre, #bouton_desselectionner
	{
		padding: 7px 25px;
		margin: 4px 0;
		font-weight: bold;
	}
	/* MES PENTAS */
	.defis
	{
		font-size: 1em;
	}
	/* FOOTER */
	footer 
	{
		max-width: 100%;
		border: none;
		margin: 0px;
	}
}
@media only screen and (max-width: 920px) {
	#video > *
	{
		width: 97vw;
		height: 54vw;
	}
	#video
	{
		min-height: 54vw;
	}
}

/* -------------------------------------------- */
/* Smartphone en portrait						*/
/* -------------------------------------------- */
@media (max-width: 479px){
	/* HEADER */
	#btn_menu
	{
		top: 92px;
	}
	#menu ul
	{
		top: -8px;
	}
	/* REGLES */
	.grille td {
		width: 5vw;
		height: 5vw;
	}
	/* SOLUTIONS */
	#bouton_resoudre, #bouton_desselectionner
	{
		padding: 5px 15px;
		margin: 4px 0;
		font-size: 1.1em;
		font-weight: normal;
	}
	.piece td 
	{
		width: 15px;
		height: 15px;
	}
	.piece table 
	{
		border-collapse: collapse;
	}
	.piece
	{
		width: 60px;
		height: 100px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		margin: 5px;
		outline : none;
	}
	#plateau
	{
		width: 92vw;
		height: 43vw;
	}
	#pieces
	{
		border-collapse: collapse;
		position: absolute;
		top: 6.1vw;
		left: 7.2vw;
		width: 71.8vw;
		height: 30vw;
	}
	#reglette {
		top: 2.9vw;
		left: 80vw;
		width: 5.5vw;
	}
	/* CONNEXION */
	#part_connexion
	{
		border-right: 0px;
		border-bottom: 1px solid #B5B5B5;
	}
	.page_connexion
	{
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
	}
	#part_connexion, #part_register {
		width: 100%;
		padding: 0px;
		padding-bottom: 20px;
	}
}

@media (max-width: 330px){
}