@charset "UTF-8";

/*@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700|Rubik:900');*/
@font-face {
    font-family: 'nexa_rust_sansblack';
    src: url('../font/fontfabric_-_nexa_rust_sans_black-webfont.woff2') format('woff2'),
         url('../font/fontfabric_-_nexa_rust_sans_black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/* Chargement */
.js div#preloader {
	position: fixed; 
	left: 0; 
	top: 0; 
	z-index: 90000; 
	width: 100%; 
	height: 100%; 
	overflow: visible; 
	background: black url('../images/loading.gif') no-repeat center center;
}

* {
	margin:0;
	padding:0;
}

html {
	width:100%;
	height: 100%;
}
body { 
	width:100%;
	height: 100%;
	margin:auto;
	font-family: 'nexa_rust_sansblack', sans-serif;
	color:#fffd3b;
	background-color: black;
	text-align: center;
	overflow:hidden;
}

a {
	text-decoration:none;
}
a:hover {
	cursor:pointer;
}

#player{
	top:0;
	left:0;
}
#cacheControls {
	background-color:black; 
	position:absolute; 
	bottom:0; 
	height:8%; 
	width:100%; 
	z-index:25;
}

#boutonLowDef {
	position:absolute;
	text-transform:uppercase;
	font-size:14px;
	right: 10px; bottom: 10px;
	z-index:901;
	font-family: 'nexa_rust_sansblack', sans-serif;
	/*font-family: 'Open Sans', sans-serif;*/
	/*font-weight: 400;*/
	font-size:12px;
	animation: apparitionFooter 1s forwards;
	color:#666;
}
#boutonLowDef:hover {
	cursor:pointer;
}

#compteurVisites {
	position:absolute;
	text-transform:uppercase;
	font-size:14px;
	left: 10px; bottom: 10px;
	z-index:890;
	font-family: 'nexa_rust_sansblack', sans-serif;
	/*font-family: 'Open Sans', sans-serif;*/
	/*font-weight: 400;*/
	font-size:12px;
	animation: apparitionFooter 1s forwards;
	color:#666;
	display:none;
}

#footer {
	position:absolute;
	width:100%;
	text-transform:uppercase;
	font-size:14px;
	left: 0; bottom: 10px; right: 0;
	z-index:900;
	font-family: 'nexa_rust_sansblack', sans-serif;
	/*font-family: 'Open Sans', sans-serif;*/
	/*font-weight: 400;*/
	font-size:12px;
	animation: apparitionFooter 1s forwards;
}
#footer a {
	color:#fffd3b;
}
#footer #boutonJumpToChoice {
	border:1px solid #fffd3b;
	padding :2px 5px;
	background-color: #fffd3b;
	color:black;
}
#footer #boutonJumpToChoice:hover {
	border:1px solid #fffd3b;
	padding :2px 5px;
	background-color: black;
	color: #fffd3b;
}

#footer #boutonBack:hover {
	
}
#footer #conteneurBoutonJumpToChoice {
	
}
#footer #boutonPause {
	display:inline-block;
	margin-top:15px;
}
#footer #boutonBack {
	display:inline-block;
	margin-top:15px;
}
#footer #boutonJumpToChoice .texteFrancais, #footer #boutonJumpToChoice:hover .texteAnglais {
    display : none;
}
#footer #boutonJumpToChoice:hover .texteFrancais {
    display : inline-block;
}
#footer #boutonFullscreen .texteFrancais, #footer #boutonFullscreen:hover .texteAnglais {
    display : none;
}
#footer #boutonFullscreen:hover .texteFrancais {
    display : inline-block;
}
#footer #boutonBack .texteFrancais, #footer #boutonBack:hover .texteAnglais {
    display : none;
}
#footer #boutonBack:hover .texteFrancais {
    display : inline-block;
}
#footer #boutonStartOver .texteFrancais, #footer #boutonStartOver:hover .texteAnglais {
    display : none;
}
#footer #boutonStartOver:hover .texteFrancais {
    display : inline-block;
}

#header {
	position:absolute;
	margin:0 auto;
	width:100%;
	text-transform:uppercase;
	font-size:14px;
	left: 0; right: 0; top: 20px;
	z-index:1490;
	animation: apparitionHeader 1s forwards;
	text-align: center;
	height:60px;
	padding-top:20px;
}
#header .plus{
	display:none;
}
/*#header:hover {
	cursor:pointer;
}*/
.tete {
	/*float:left;*/
	display:inline-block;
	width:2.5%;
	margin-right:0.2%;
	/*border:1px solid #fffd3b;*/
}
.tete-pas-ok {
    position: absolute;
    width: 2.5%;
    height: 2.5%;
	display:block;
    
	/*background-color: #fffd3b;
    font-size: 27px;
    color: black;
    padding-left: 2px;*/
}
.tete-pas-ok:hover {
    cursor:pointer;
}
.imageTete1, .imageTete2, .imageTete3, .imageTete4, .imageTete5, .imageTete6, .imageTete7, .imageTete8, .imageTete9, .imageTete10, .imageTete11, .imageTete12, .imageTete13, .imageTete14, .imageTete15, .imageTete16, .imageTete17, .imageTete18, .imageTete19, .imageTete20, .imageTete21, .imageTete22, .imageTete23, .imageTete24, .imageTete25, .imageTete26, .imageTete27 {
    cursor:pointer;
}
#end2 .tete {
	float:left;
	width:76px;
	height:76px;
	margin-right:7px;
	margin-bottom:7px;
	border:none;
}
#end2 .tete-pas-ok {
    position: absolute;
    width: 76px;
    height: 76px;
    /*display:none;*/
}
.plus {
	/*float: left;*/
	display:inline-block;
    width: 18px;
    height: 40px;
    margin-right: 3px;
    font-size: 27px;
    text-align: center;
    line-height: 9px;
    padding-top: 6px;
}
#end2 .plus {
	float: left;
    width: 82px;
    height: 20px;
    margin-right: 3px;
    font-size: 85px;
    line-height: 16px;
    padding-top: 31px;
}
.special-guest {
	font-size: 8px;
    line-height: 4px;
}
#end2 .plus .special-guest {
	font-size: 15px;
	line-height:9px;
}
#credits {
	position:absolute;
	width:100%;
	height:100%;
	margin-top: 50vh; /* poussé de la moitié de hauteur de viewport */
  	transform: translateY(-50%) translateX(-50%); /* tiré de la moitié de sa propre hauteur */
	margin-left: 50vw; /* poussé de la moitié de largeur de viewport */
	z-index:999;
	display:none;
	text-align: center;
}
#credits #creditsContenus {
	background-color: #fffd3b;
	width:50%;
	height:50%;
	color:black;
}

#conteneurVideo
{
   position:absolute;
   height:100%;
   width:100%;
	top:0;
	bottom:0;
   background-color: black;
   z-index:2;
	
	overflow:hidden;
}

#conteneurVideo video
{
   height:100%;
   width:100%;
}
#conteneurVideoKaraoke
{
   position:absolute;
   height:100%;
   width:100%;
	top:0;
	bottom:0;
   background-color: black;
   z-index:2;
	
	overflow:hidden;
}

#conteneurVideoKaraoke video
{
   height:100%;
   width:100%;
}


#choix1, #choix1Mobile, #choix2, #choix3, #choix4, #choix5, #choix6, #choix7, #choix8, #choix9, #choix10, #choix11, #choix12, #choix13, #choix14, #choix15, #choix16, #choix17, #choix18, #choix21, #choix22, #choix23, #choix27 {
	position:absolute;
	width:100%;
	height:80%;
	margin:auto;
	top:0;
	bottom:0;
	z-index:150;
	font-size: 90px;
	line-height:70px;
	text-transform: uppercase;
	display:none;
	/*display:block;*/
}
.maVideo1-mobile {
	display:none;
}
.action1 {
	width:50%;
	height:100%;
	float:left;
	margin:auto;
}
.action2 {
	width:50%;
	height:100%;
	float:right;
	margin:auto;
}
.action1-garage {
	position:absolute;
	width:25%;
	height:100%;
	left:42%;
	margin:auto;
}
.action2-garage {
	width:32%;
	height:100%;
	float:right;
	margin:auto;
}
.action0-nap {
	width:35%;
	height:100%;
	float:right;
	margin:auto;
}
.action1-television {
    position: absolute;
    width: 9%;
    height: 11%;
    right: 35%;
    top: 0;
    bottom: 19%;
    margin: auto;
}
.action0-gauche {
	width:50%;
	height:100%;
	float:left;
	margin:auto;
}
.action0-videogames {
    width: 31%;
    height: 100%;
    float: left;
    top: 0;
    bottom: 0;
    margin: auto;
}
.action0-play {
    position: absolute;
    width: 8%;
    height: 15%;
    left: 32%;
    top: 0;
    bottom: 14%;
    margin: auto;
    /*border: 1px solid yellow;*/
}
.action0-droite {
	width:50%;
	height:100%;
	float:right;
	margin:auto;
}
.action0-allover {
	width:100%;
	height:100%;
	margin:auto;
}
.action1:hover, .action2:hover, .action1-garage:hover, .action2-garage:hover, .action0-nap:hover, .action1-television:hover, .action0-gauche:hover, .action0-videogames:hover, .action0-play:hover, .action0-droite:hover, .action0-allover:hover {
	cursor:pointer;
}

#boutonPlay {
	position: absolute;
    z-index: 17000;
    width:100%;
	height:100%;
	display:none;
}

#messageLandscape {
	position: absolute;
    z-index: 20000;
    width:100%;
	height:100%;
	background-color:black;
	color:#fffd3b;
	display:none;
}
#messageIPhoneApp {
	position: absolute;
    z-index: 20001;
    width:100%;
	height:100%;
	background-color:black;
	color:#fffd3b;
	display:none;
}


#game {
	position: absolute;
  	margin: auto;
  	top: 0;
 	right: 0;
 	bottom: 0;
 	left: 0;
	width: 100%;
	height: 100%;
	z-index:1800;
	display:none;
	background-color:rgba(0,0,0,0.7);
	
}
#game .content-game {
	margin: auto;
	width:800px;
	height:470px;
	top: 0;
 	right: 0;
 	bottom: 0;
 	left: 0;
}

#end2 {
	position: absolute;
	width: 100%;
	height: 100%;
	top:0;
	bottom:0;
	margin:auto;
	z-index:1500;
	background-color: black;
	display:none;
}

#end2 #suiteContinue {
	display:none;
}
#end2 #suiteTryNew {
	display:none;
}
#end2 #suiteJeu {
	display:none;
}


#end {
	position: absolute;
  	margin: auto;
  	top: 0;
 	right: 0;
 	bottom: 0;
 	left: 0;
	width: 100%;
	height: 100%;
	/*width:100%;
	height:100%;
	position:absolute;*/
	z-index:1500;
	background-size: cover;
	display:none;
}
#end-content {
	margin: auto;
	height:100%;
	top: 0;
 	right: 0;
 	bottom: 0;
 	left: 0;
	/*background-color:green;*/
    /*width:100%;
	height:100%;*/
	/*display:none;*/
}
#end-partie-gauche {
	width: 425px;
    height: 560px;
    float: left;
    margin-right: 50px;
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: -450px;
}

#end2 #end-partie-droite {
	position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 250px;
    width: 100% !important;
    height: 575px !important;
}
#end2 .pourcentage {
	/*display:none;*/
}
#end2 #boutonTryANewLife:hover {
	cursor:pointer;
}
#end2 #boutonContinue:hover {
	cursor:pointer;
}

#end2 .texte-droite {
	font-size:30px;
	line-height:32px;
	margin-top:8px;
}
#end2 .deux-points {
	line-height:32px;
}
#end2 .pourcentage {
	clear:both;
}
.texte-pourcentage{
	display:block;
	font-size:60px;
	margin:15px 0;
}
#end2 #boutonShare1, #end2 #boutonShare2 {
	clear:both;
	font-size: 16px;
    line-height: 18px;
    background-color: #fffd3b;
    width: 340px;
    margin: 0 auto;
    padding: 10px 0 7px 0;
    color: black;
	margin-bottom:14px;
	border:1px solid #fffd3b;
	display:block;
}
#end2 #boutonShare1:hover, #end2 #boutonShare2:hover, #end2 #boutonCredits1:hover, #end2 #boutonCredits2:hover, #end2 #boutonCredits3:hover {
	cursor:pointer;
	background-color: black;
    color: #fffd3b;
	border:1px solid #fffd3b;
}
#end2 #boutonCredits1, #end2 #boutonCredits2, #end2 #boutonCredits3 {
	font-size: 16px;
    line-height: 18px;
    background-color: #fffd3b;
    width: 340px;
    margin: 0 auto;
    padding: 10px 0 7px 0;
    color: black;
	border:1px solid #fffd3b;
}

input {
	background-color: black;
	border:2px solid #fffd3b;
	font-size:14px;
	font-family: 'nexa_rust_sansblack', sans-serif;
	color:#fffd3b;
	text-align: center;

    width: 291px;
    margin-bottom: 13px;
    padding: 10px 0;
}
input:focus {
	outline:none;
}
input[type=submit] {
	background-color: black;
	border:2px solid #fffd3b;
	font-size:14px;
	font-family: 'nexa_rust_sansblack', sans-serif;
	color:#fffd3b;
	text-align: center;

    width: 40px;
    margin-bottom: 13px;
    padding: 10px 0;
}
input[type=submit]:hover {
	background-color: #fffd3b;
	color:black;
	cursor:pointer;
}
input[type=submit]:focus {
	outline:none;
}


@keyframes rolloverChoix {
  from {
    letter-spacing: 0px;
  }
  to {
    letter-spacing: 8px;
  }
}
@keyframes rolloutChoix {
  from {
    letter-spacing: 8px;
  }
  to {
    letter-spacing: 0px;
  }
}
.elementFadeRapide {
  animation: pulse 0.5s ease-out;
}

.elementFadeLent {
  animation: pulse 1s ease-out;
}
@keyframes pulse {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes apparitionFooter {
  from {
    bottom:-50px;
	}
  to {
    bottom:10px;
  }
}
@keyframes apparitionHeader {
  from {
    top:-50px;
	}
  to {
    top:0px;
  }
}


/* DETECTION VERTICALE */
@media only screen and (max-width: 600px) and (orientation: portrait)
{
    #messageLandscape {
		display:block;
	}
}


/* DETECTION IPAD */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
	
	#footer #boutonJumpToChoice:hover .texteFrancais {
    	display : none;
	}
	#footer #boutonJumpToChoice:hover .texteAnglais {
		display : inline-block;
	}
	#footer #boutonBack:hover .texteFrancais {
		display : none;
	}
	#footer #boutonBack:hover .texteAnglais {
		display : inline-block;
	}
	#footer #boutonStartOver:hover .texteFrancais {
		display : none;
	}
	#footer #boutonStartOver:hover .texteAnglais {
		display : inline-block;
	}
	#boutonFullscreen {
		display:none !important;
	}

}

/* DETECTION MOBILE */
@media only screen and (max-width: 900px)
{
 
	#game .content-game {
		margin: auto;
		width:640px;
		height:376px;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}

	#cacheControls {
	background-color:black; 
	position:absolute; 
	bottom:0; 
	height:18%; 
	width:100%; 
	z-index:25;
}
   #header {
		display:none;
	}
	#compteurVisites {
		display:none;
	}
	#footer {
		font-size:12px;
		margin-bottom:10px;
	}
	#espaceApresPause {
    	display: none !important;
	}
	#boutonPlay {
		display:block !important;
	}
	#footer #conteneurBoutonJumpToChoice {
    	display: inline-block;
	}
	#footer #boutonJumpToChoice:hover .texteFrancais {
    	display : none;
	}
	#footer #boutonJumpToChoice:hover .texteAnglais {
		display : inline-block;
	}
	#footer #boutonPause {
		display : none;
	}
	#footer #boutonBack:hover .texteFrancais {
		display : none;
	}
	#footer #boutonBack:hover .texteAnglais {
		display : inline-block;
	}
	#footer #boutonStartOver:hover .texteFrancais {
		display : none;
	}
	#footer #boutonStartOver:hover .texteAnglais {
		display : inline-block;
	}

	#end-partie-gauche{
		display:none;
	}

	#end-partie-droite {
		position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0 !important;
width:100% !important;
	height:290px !important;
	/*display:none;*/

}
	#end-partie-droite .pourcentage {
		display:block !important;
		font-size:23px !important;
		line-height: 23px !important;
		margin-bottom:20px;
	/*display:none;*/

}
	#end-partie-droite .texte-droite {
		font-size:23px !important;
		line-height: 23px !important;
	/*display:none;*/

}
	.colonneGauche {
		display:none !important;
	}
	.colonneCentrale {
		display:none !important;
	}
	#boutonContinue {
		display:none !important;
	}
	#boutonContinueMobile {
		display:block !important;
	}
	#boutonContinueMobile img {
		margin-top:0 !important;
	}
	#boutonTryANewLife {
		display:none !important;
	}
	#boutonTryANewLifeMobile {
		display:block !important;
	}
	#boutonTryANewLifeMobile img {
		margin-top:0 !important;
	}
	
	#suiteJeu img {
		display:none;
	}
	#message {
		margin: 40px 0 20px 0;
    	font-size: 30px;
    	line-height: 32px;
	}
	
	#boutonFullscreen {
		display:none !important;
	}
	
	.reglement {
		font-size:16px !important;
		line-height: 15px !important;
		margin-top:20px;
		margin-bottom:10px;
	}

	#boutonCredits1, #boutonCredits2, #boutonCredits3 {
		display:none;
	}
	
	#end2 .texte-droite {
    margin-bottom: 30px;
		margin-top:40px;
}
	#end2 .pourcentage {
    margin-top: 40px;
}
input {
	font-size:22px;
	width: 400px;
}
input[type=submit] {
	font-size:22px;
    width: 60px;
}

#boutonLowDef {
	display:none;
}

	
	}
}