*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}


.notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}

html { -webkit-text-size-adjust: none; }

html, body {
    height:100vh;
    width:100vw;
    padding:0;
    margin:0;

    font-size: 8vh;
    background-color:black;
		overflow:hidden;
}



/*##########################
#### Full screen modal  ####
##########################*/
div#splash {
		position:absolute;
    width:100vw;
    height:100vh;
		overflow:hidden;
		top:0;
		left:0;
		z-index:100;
		background-color:black;

    display: flex;
    justify-content: center;
    align-items: center;
}


div#splash div {
		width:30vw;
		height:30vh;

    display: flex;
    justify-content: center;
    align-items: center;
		color:white;
    margin:5vw;
    cursor:pointer;
    background-size:contain;
    background-position:center center;
    background-repeat:no-repeat;
}

div#splash div#go_settings { background-image:url("img/Set_Up_1.svg"); }
div#splash div#go_trick    { background-image:url("img/Go_Up_1.svg"); }



div#container {
		position:absolute;
    width:300vw;
    height:200vh;
		overflow:hidden;
		top:0%;
		left:-100%;
		display:flex;
		flex-wrap:wrap;
		transition:top 1s, left 1s;
}

div#container > div {
		width:100vw;
		height:100vh;
		flex-shrink:0;
		overflow:hidden;
}



/*################################
#### Composer dial for cards  ####
################################*/

/*
 * General layout
 */

div#composer {
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: stretch;
}

div#composer div.row {
    display: flex;
    flex:0;
    flex-flow: row wrap;
    justify-content: center;

    min-height:13vh;    height:13vh;
}

@media (max-aspect-ratio: 5/8){
  div#composer div.row {
    min-height:21vw;    height:21vw;
  }
}



div#composer div.row div.cell {
    display:flex;
    flex:0;
    flex-flow: colunm wrap;
    justify-content: center;
    align-items: center;

    min-height:11vh;    height:11vh;
    min-width:11vh;     width:11vh;
		margin:1vh;

    color:white;
    border:1px solid rgb(22,22,23);
		border-radius:6vh;
		background-color:#343333;

		background-size:auto 40%;
		background-position:center center;
		background-repeat:no-repeat;
}


@media (max-aspect-ratio: 5/8)
{
  div#composer div.row div.cell {
    min-height:18vw;    height:18vw;
    min-width:18vw;     width:18vw;
    margin:2vw;
  }
}


/*
 *  Interaction
 */
div#composer div.row div.cell {
    cursor:pointer;
}

div#composer div.row div.cell:hover {
    background-color:#474644;
}



div#composer div.row div.cell.selected {
		background-color:#8c8989;
}


/*
 *  Specific cells
 */


div#composer div.row div.cell#numero_1  { background-image:url('img/BTN_AS.svg'); }
div#composer div.row div.cell#numero_2  { background-image:url('img/BTN_2.svg'); }
div#composer div.row div.cell#numero_3  { background-image:url('img/BTN_3.svg'); }
div#composer div.row div.cell#numero_4  { background-image:url('img/BTN_4.svg'); }
div#composer div.row div.cell#numero_5  { background-image:url('img/BTN_5.svg'); }
div#composer div.row div.cell#numero_6  { background-image:url('img/BTN_6.svg'); }
div#composer div.row div.cell#numero_7  { background-image:url('img/BTN_7.svg'); }
div#composer div.row div.cell#numero_8  { background-image:url('img/BTN_8.svg'); }
div#composer div.row div.cell#numero_9  { background-image:url('img/BTN_9.svg'); }
div#composer div.row div.cell#numero_10 { background-image:url('img/BTN_10.svg'); }
div#composer div.row div.cell#numero_11 { background-image:url('img/BTN_J.svg'); }
div#composer div.row div.cell#numero_12 { background-image:url('img/BTN_Q.svg'); }
div#composer div.row div.cell#numero_13 { background-image:url('img/BTN_K.svg'); }
div#composer div.row div.cell#empty.zero     { background-image:url('img/BTN_DOTS_0.svg'); background-size:40% auto; }
div#composer div.row div.cell#empty.one     { background-image:url('img/BTN_DOTS_1.svg'); background-size:40% auto; }
div#composer div.row div.cell#empty.two     { background-image:url('img/BTN_DOTS_2.svg'); background-size:40% auto; }
div#composer div.row div.cell#empty.three     { background-image:url('img/BTN_DOTS_3.svg'); background-size:40% auto; }
div#composer div.row div.cell#pique   { 	background-image:url('img/BTN_PIQUE.svg');	}
div#composer div.row div.cell#coeur   { 	background-image:url('img/BTN_COEUR.svg');	}
div#composer div.row div.cell#trefle  { 	background-image:url('img/BTN_TREFLE.svg');	}
div#composer div.row div.cell#carreau { 	background-image:url('img/BTN_CARREAU.svg');	}


div#composer div.row div.cell.selected#numero_1  { background-image:url('img/BTN_DOWN_AS.svg'); }
div#composer div.row div.cell.selected#numero_2  { background-image:url('img/BTN_DOWN_2.svg'); }
div#composer div.row div.cell.selected#numero_3  { background-image:url('img/BTN_DOWN_3.svg'); }
div#composer div.row div.cell.selected#numero_4  { background-image:url('img/BTN_DOWN_4.svg'); }
div#composer div.row div.cell.selected#numero_5  { background-image:url('img/BTN_DOWN_5.svg'); }
div#composer div.row div.cell.selected#numero_6  { background-image:url('img/BTN_DOWN_6.svg'); }
div#composer div.row div.cell.selected#numero_7  { background-image:url('img/BTN_DOWN_7.svg'); }
div#composer div.row div.cell.selected#numero_8  { background-image:url('img/BTN_DOWN_8.svg'); }
div#composer div.row div.cell.selected#numero_9  { background-image:url('img/BTN_DOWN_9.svg'); }
div#composer div.row div.cell.selected#numero_10 { background-image:url('img/BTN_DOWN_10.svg'); }
div#composer div.row div.cell.selected#numero_11 { background-image:url('img/BTN_DOWN_J.svg'); }
div#composer div.row div.cell.selected#numero_12 { background-image:url('img/BTN_DOWN_Q.svg'); }
div#composer div.row div.cell.selected#numero_13 { background-image:url('img/BTN_DOWN_K.svg'); }
div#composer div.row div.cell.selected#empty     { background-image:url('img/BTN_DOWN_DOTS.svg'); }
div#composer div.row div.cell.selected#pique   { 	background-image:url('img/BTN_PIQUE.svg');	}
div#composer div.row div.cell.selected#coeur   { 	background-image:url('img/BTN_COEUR.svg');	}
div#composer div.row div.cell.selected#trefle  { 	background-image:url('img/BTN_TREFLE.svg');	}
div#composer div.row div.cell.selected#carreau { 	background-image:url('img/BTN_CARREAU.svg');	}


div#composer.training div.row div.cell#empty     {
	background-image:url('img/Quit_Up.svg') !important;
  background-size:100%;
}


div#composer.training div.row:first-of-type {
	background-image:url(img/training.png);
	background-position:center center;
	background-size: 70% auto;
	background-repeat:no-repeat;
}


/* Predict button */
div#composer div.row div.cell#predire {
    min-width:24vh;     width:24vh;
    background:#fcca8c;
		background-image:url('img/BTN_DOWN_PREDICT.svg');
		background-size:auto 40%;
		background-position:center center;
		background-repeat:no-repeat;
}

@media (max-aspect-ratio: 5/8)
{
  div#composer div.row div.cell#predire {
    min-width:40vw;     width:40vw;
    margin:2vw;
  }
}


div#composer div.row div.cell#predire.disabled {
    cursor:not-allowed;
    background-color:#f28f00;
		background-image:url('img/BTN_PREDICT.svg');
}



div#composer div.row div.cell#pique,
div#composer div.row div.cell#coeur,
div#composer div.row div.cell#trefle,
div#composer div.row div.cell#carreau {
	background-size:45% 45%;
	background-color:#696563;
}

div#composer div.row div.cell.selected#pique,
div#composer div.row div.cell.selected#coeur,
div#composer div.row div.cell.selected#trefle,
div#composer div.row div.cell.selected#carreau {
	background-color:#dfe0e2;
}


/* Empty cell */
/*div#composer div.row div.cell#empty, div#composer div.row div.cell#empty:hover,*/
div#composer div.row div.cell.carte, div#composer div.row div.cell.carte:hover {
    background-color: transparent;
    cursor:default;
}


/*
 *  Cards images
 */
/* First row : height > width */
div#composer div.row:first-of-type {
  min-width:60vh;
  max-width:60vh;
  align-self:center;
}

div#composer div.row:first-of-type,
div#composer div.row:first-of-type div.cell {
/*    min-height:30vh;    height:30vh;*/
    min-height:20vh;    height:20vh;
/*		margin:2vh 0vh;*/
		margin:1vh 0vh;
		border:none;
}


@media (max-aspect-ratio: 5/8){
  div#composer div.row:first-of-type {
    min-width:84vw;
    max-width:84vw;
    align-self:center;
  }


  div#composer div.row:first-of-type,
  div#composer div.row:first-of-type div.cell {
    min-height:50vw;
  }
}


div#composer div.row:first-of-type div.cell {
	min-width:39%;	width:39%;
	margin:0;
	margin-right:-20%;
	flex-shrink:0;
}
div#composer div.row:first-of-type div.cell:last-of-type {
	margin-right:0;
}

div.cell.carte div {
    width:100%;
    height:100%;
    margin:auto;

    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
}

div#composer div.row div.cell.carte {
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
}



/*###########################
#### Display prediction  ####
###########################*/
/*
 * General layout
 */
div#displayer {
    width:50%;
    height:100%;

    display: flex;
    flex-flow: column wrap;
    justify-content: space-between;
    align-items: center;
}



/*
 * Card
 */
div#displayer #flip-container {
		perspective: 1000px;
		width:32.14vh;
		height:45vh;
}


div#displayer #flip-container.back #flipper {
		transform: rotateY(180deg);
}


/* flip speed goes here */
div#displayer #flip-container #flipper {
	transition: 1s;
	transform-style: preserve-3d;
	position: relative;
	backface-visibility: hidden; -webkit-backface-visibility:hidden;
}


div#displayer #flip-container #front, div#displayer #flip-container #back {
	backface-visibility: hidden; -webkit-backface-visibility:hidden;
	position: absolute;
	top: 0;
	left: 0;
	background-size:contain;
	width:32.14vh;
	height:45vh;
}

div#displayer #flip-container #front {
	z-index: 2;
	transform: rotateY(0deg);
}

div#displayer #flip-container #back {
	transform: rotateY(180deg);
	background-image:url("img/DOS_GV.svg");
}




/*
 * The rest (button and dummy)
 */

div#displayer div#next, div#displayer div#dummy {
    display:flex;
    flex:0;
    flex-flow: colunm wrap;
    justify-content: center;
    align-items: center;

    min-height:12vh;    height:12vh;
    min-width:12vh;     width:12vh;
		margin:1vh;

    color:white;
    border:1px solid rgb(22,22,23);
		border-radius:6vh;
		background-color:#343333;
}

div#displayer div#next {
		margin-bottom:3vh;
		cursor:pointer;
		background-image:url("img/next.svg");
		background-size:30% 30%;
		background-position:55% center;
		background-repeat:no-repeat;
    opacity:0;
		transition:opacity 2s;
}

div#displayer div#dummy {
	background-color:transparent;
	border:none;
	margin-top:3vh;
}


div#displayer div#next:hover.enabled {
		background-color:#8c8989;
}

div#displayer div#next.enabled {
    opacity:1;
}





/*##########################
#### Display all cards  ####
##########################*/
/*
 * General layout
 */
div#final {
  width:100%;
  height:100%;

  display: flex;
  flex-flow: column wrap;
  justify-content: flex-end;
  align-items: center;
  background:black;
}


div#final div#stack_container {
		position:relative;
    flex:0;
    min-height:60vh;    height:60vh;
    min-width:40vh;     width:40vh;
}

div#final div#stack_container div#stack {
    min-height:50vh;    height:50vh;
    min-width:30vh;     width:30vh;
    margin-left:5vh;
    margin-top:5vh;
    position:relative;
}


div#final div#stack_container div#stack div {
    position:absolute;
    min-height:43.49vh; height:43.49vh;
    min-width:30vh;     width:30vh;

    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;

    transform:rotate(0deg);
    transition: top 0.4s ease, left 0.4s ease, transform 0.4s ease;
}


div#final div#restart {
	cursor: pointer;
	background-image: url("img/next.svg");
	background-size: 30% 30%;
	background-position: 55% center;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity 2s;
	min-height: 12vh;
	height: 12vh;
	min-width: 12vh;
	width: 12vh;
	color: white;
	border: 1px solid rgb(22,22,23);
	border-radius: 6vh;
	background-color: #343333;
	position: absolute;
	bottom: 5vh;
	left: 50%;
	margin-left: -6vh;
	z-index:100;
}

/*#################
#### Settings  ####
#################*/
div#settings {
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
		background-color:#ffffff;
		font-family:Arial,Helvetica,Verdana;
}

div#settings h1 {
	width:100%;
	height:6vh;
	margin:0;
	padding:0;
	font-size:2.2vh;
	line-height:6vh;
	color:rgba(0,0,0,.3);
	text-align:center;
	font-weight:normal;
	border-bottom:1px solid rgba(0,0,0,0.1)	;

	display:flex;
  justify-content: center;
  align-items: center;
	position:relative;
}


div#settings h1 > em {
		height:6vh;
		width:6vh;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
}

div#settings.opened h1 > em {
		cursor:pointer;
}


div#settings h1 > em:before {
    content: '';
    border-bottom: 2px solid transparent;
    border-right: 2px solid transparent;
    box-sizing: content-box;
    display: block;
    position: absolute;
    top: 50%;
		margin-top:-0.6vh;
    bottom: 0;
    left: 23px;
    right: auto;
    width: 8px;
    height: 8px;
		transform: rotate(135deg);
}

div#settings.opened h1 > em:before {
		border-color:#FF6A6C;
}


div#settings div#menu_container {
	width:100%;
	position:relative;
	margin:0;
	display:flex;
  flex-flow: column;
	flex-grow:1;
}



div#settings div#menu_container nav.menu,
div#settings div#menu_container nav.submenu {
	width:100%;
	height:100%;
	position:absolute;
	transition:left 0.5s;
	background-color:#ffffff;

	display:flex;
  flex-flow:column;
  overflow-y: auto;
  overflow-x:hidden;
}

div#settings div#menu_container nav.menu {
	left:0%;
}

div#settings div#menu_container nav.submenu {
	left:100%;
	z-index:2;
}


/* Opening submenu */
div#settings.opened div#menu_container nav.menu {
	left:-30%;
}

div#settings.opened div#menu_container nav.submenu.opened {
	left:0%;
}



div#settings div.item {
	width:100%;
	height:6vh;
	margin:0;
	padding:0;
	position:relative;
}

div#settings div.item.divider {
	height:4vh;
	background-color:rgba(0,0,0,.06)
}

div#settings div.item-text {
  height:auto;
  padding:10px 20px;
  font-size:14px;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  text-align: justify;
  line-height: 18px;
}

div#settings div.item-text li {
  margin-bottom:10px;
}

div#settings div.item-text img {
  display: block;
  width: 70vw;
  height: auto;
  margin: 10px auto;
}

div#settings div.item em,
div#settings div.item label  {
		height:6vh;
    line-height: 6vh;
    margin-top: -3vh;
    position: absolute;
    right: 45px;
    top: 50%;
		display:flex;
	  justify-content:center;
	  align-items:center;
		font-size:2.2vh;
		font-style: normal;
		color:#FF6A6C;
}


div#settings div.item a {
	width:100%;
	height:6vh;
	display:block;
}

div#settings div.item a > span {
	display:none;
	cursor:pointer;
}

div#settings div.item a:after {
    content: '';
    border-top: 2px solid transparent;
    border-left: 2px solid transparent;
    box-sizing: content-box;
    display: block;
    width: 8px;
    height: 8px;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
		transform: rotate(135deg);
    right: 23px;
    left: auto;
}

div#settings div.item.submenu a:after {
		border-color:rgba(0,0,0,.3);
}


div#settings div.item > span{
	position:absolute;
	top:50%;
	left:20px;
	height:6vh;
  line-height: 6vh;
  margin-top: -3vh;
	width:100%;
	border-bottom:1px solid rgba(0,0,0,0.1);

	display:flex;
  justify-content:flex-start;
  align-items: center;

	color:rgba(0,0,0,0.7);
	text-decoration:none;
	font-size:2.2vh;
	font-style:normal;
	cursor:pointer;
}




div#settings nav.submenu div.item label {
	width:6vh;
	right:5px;
}

nav.submenu div.item label:before {
		content:'';
		border-left: 3px solid;
    border-bottom: 3px solid;
    width: 40%;
    height: 20%;
    margin: 0%;
    opacity: 0.1;
    transform: rotate(-45deg);
		border-color:#FF6A6C;
}

nav.submenu div.item.selected label:before {
		opacity:1;
}





div#settings div.item#orderItem em span,
div#settings div.item#cardsItem em span,
div#settings nav#orderSubMenu div.item span span {
	display:flex;
	width:2.5vh;
	height:2.5vh;
	margin-left:0.5vh;
	background-size:contain;
	background-position:center center;
	background-repeat:no-repeat;
}
div#settings div.item#cardsItem em span {
	height:5vh;
	width:4.3vh;
}

div#settings nav#orderSubMenu div.item span span {
	margin:0 1vh;
}

div#settings nav#orderSubMenu div.item > span {
	font-weight:bold;
}


div#settings div.item .order_1 span:nth-child(1) {	background-image:url('img/SETTINGS_PIQUE.svg'); }
div#settings div.item .order_1 span:nth-child(2) {	background-image:url('img/SETTINGS_COEUR.svg'); }
div#settings div.item .order_1 span:nth-child(3) {	background-image:url('img/SETTINGS_TREFLE.svg'); }
div#settings div.item .order_1 span:nth-child(4) {	background-image:url('img/SETTINGS_CARREAU.svg'); }

div#settings div.item .order_2 span:nth-child(1) {	background-image:url('img/SETTINGS_TREFLE.svg'); }
div#settings div.item .order_2 span:nth-child(2) {	background-image:url('img/SETTINGS_COEUR.svg'); }
div#settings div.item .order_2 span:nth-child(3) {	background-image:url('img/SETTINGS_PIQUE.svg'); }
div#settings div.item .order_2 span:nth-child(4) {	background-image:url('img/SETTINGS_CARREAU.svg'); }



div#settings div#layout_preview div {
	margin-top:10vh;
	width:100%;
	height:40vh;
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center center;
}

div#settings div#layout_preview.left div {	background-image:url("img/LAYOUT_1.svg"); }
div#settings div#layout_preview.top  div {	background-image:url("img/LAYOUT_2.svg"); }

/*
div#settings div#layoutKeyboard {
		width:75%;
		height:22vh;
		padding-bottom:4vh;
    display: flex;
    flex-flow: row;
    justify-content: space-around;
    align-items: center;
		border-bottom:0.5vh solid white;
}


div#settings div#layoutKeyboard div {
	height:20vh;
	width:18vh;
	background-color:white;
	border-radius:0.5vh;
	border:0.8vh solid #343333;
	cursor:pointer;

	background-size:auto 90%;
	background-position:center center;
	background-repeat:no-repeat;
}

div#settings div#layoutKeyboard div.selected {
	border-color:rgba(40,185,40,1);
}


div#settings div#layoutKeyboard div#layout_1 { background-image:url("img/LAYOUT_1.svg"); }
div#settings div#layoutKeyboard div#layout_2 { background-image:url("img/LAYOUT_2.svg"); }
*/


div#settings #cardsSubMenu div.item:nth-of-type(2),
div#settings #cardsSubMenu div.item:nth-of-type(4),
div#settings #trainingSubMenu div.item:nth-of-type(2),
div#settings #trainingSubMenu div.item:nth-of-type(4) {
	padding:1vh 0vh;
	height:26vh;
}

div#settings #cardsSubMenu div.item:nth-of-type(3) > span,
div#settings #trainingSubMenu div.item:nth-of-type(3) > span {
	border-top:1px solid rgba(0,0,0,0.1);
}

div#settings #cardsSubMenu div.item:nth-of-type(4),
div#settings #trainingSubMenu div.item:nth-of-type(4) {
	text-align:center;
}
div#settings #cardsSubMenu div.item:nth-of-type(4) div,
div#settings #trainingSubMenu div.item:nth-of-type(4) div {
	margin-right:0;
}


div#settings #cardsSubMenu div.item div,
div#settings #trainingSubMenu div.item div {
	display:inline-block;
	width:38%;
/*	min-height:28vh; height:28vh;*/
	min-height:23vh; height:23vh;
	margin-right:-20%;
	cursor:pointer;

	background-size:contain;
	background-position:center center;
	background-repeat:no-repeat;
}
div#settings div#cardsSubMenu div:nth-of-type(4) {
	margin-right:0;
}



div#settings div#menu_footer {
	width:100%;
	height:10vh;
	display:flex;
	align-items:center;
	justify-content:center;
  position:absolute;
  bottom:0;
}

div#settings div#menu_footer button {
	font-size:2.6vh;
	background-color:#FF6A6C;
	color:white;
	border:none;
	padding:1.3vh 2.4vh;
	border-radius:2vh;
	cursor:pointer;
}



div#settings .video-container {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}


div#settings .video-container iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height:80vh;
    border: 0;
}



.mobileSelect .wheels span.pique,
.mobileSelect .wheels span.coeur,
.mobileSelect .wheels span.carreau,
.mobileSelect .wheels span.trefle {
	display: flex;
	width: 100%;
	height: 100%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: auto 50%;
}

.mobileSelect .wheels span.pique	{	background-image:url('img/SETTINGS_PIQUE.svg'); }
.mobileSelect .wheels span.coeur	{	background-image:url('img/SETTINGS_COEUR.svg'); }
.mobileSelect .wheels span.trefle {	background-image:url('img/SETTINGS_TREFLE.svg'); }
.mobileSelect .wheels span.carreau {	background-image:url('img/SETTINGS_CARREAU.svg'); }