@font-face {
  font-family: "josefin";
  src: url("JosefinSans-Regular.ttf");
}
@font-face {
  font-family: "josefin";
  font-weight: light;
  src: url("JosefinSans-Light.ttf");
}
@font-face {
  font-family: "josefin";
  font-weight: bold;
  src: url("JosefinSans-SemiBold.ttf");
}


body, html{
font-family:josefin,tahoma,arial,helvetica,sans-serif;
	background:#ff8885;
	transition:all 0.3s;
	text-align:center;
	color:#FFF;
	overflow:hidden;
}

input[type=submit], a.input{
	display:inline-block;
border:none;
	font-family:josefin,tahoma,arial,helvetica,sans-serif;
	background:#53fa7b;
	font-size:28px;
	padding:14px 30px 8px 30px;
	letter-spacing: 1px;
	text-transform:uppercase;
	border-radius:4px;
	cursor:pointer;
	text-shadow:1px 1px 1px #FFFFFF;
	color:#000;
	font-weight:bold;
	box-shadow:1px 3px 3px rgba(0,0,0,.25);
}
input[type=submit]:hover, a.input:hover{
border:none;
	background:#34e25e;
	box-shadow:0px 1px 2px rgba(0,0,0,.4);
}



#step1, #step2, #step3, #step4{
	position:absolute;
	width:100%;
	left:0;
	top:calc(35% - 100px);
	height:200px;
	transition:all 0.3s, margin .5s;
}
#step2, #step3, #step4{	margin-left:100%;top:0;}
#step2.visible, #step3.visible, #step4.visible{	margin-left:0%;}
#step1.starter3, #step1.hidden, #step2.hidden, #step3.hidden, #step4.hidden{	margin-left:-100%;}
#step1.starter3.hidden{	margin-left:-200%;}


/* --- STEP 1 --- */

#step1 h1{margin:0px;margin-bottom:100px;}
#step1 #starter, #step1 #starter2, #step1.visible #starter2, #step1 #starter2, #step1.starter3 #starter3{
	padding:0;
	padding:5px;
	margin:0;
	height:160px;
	background:#ff8885;
	padding-top:50px;
	transition:opacity .5s;
}
#step1 #starter2, #step1.visible #starter2, #step1 #starter3, #step1.starter3 #starter3{
	margin-top:-215px;
	padding-top:0;
	position:absolute;
	width:100%;
	opacity:0;
	transition:opacity .5s;
	height:0px;
	overflow:hidden;
}
#step1 #starter input{
	font-size:30px;
	padding:20px 60px 10px 60px;
	margin-top:0px;
	transition:all .5s;
}
#step1.visible #starter input{
	font-size:70px;
	padding:25px 70px 15px 70px;
	margin-top:-25px;
}

#step1.visible #starter2, #step1.starter3 #starter3{
	padding-top:50px;
	opacity:1;
	height:160px;
}
#step1.starter3 #starter3{
	position:fixed;
	margin-left:100%;
	margin-top:0;
	top:0;
	height:auto;
}
#step1.starter3 #starter3 p{margin-top:10%;font-size:30px;text-transform:uppercase;}


#step1.starter3 #starter3 p a{
padding-top:250px;
	margin:0 5% 2% 5%;
	font-size:24px;
	height:auto;
	overflow:visible;
	white-space:auto;
	width:420px;
	padding-bottom:20px;
	display:inline-block;
	vertical-align:middle;
	background-image:url(../images/01.gif);
	background-repeat:no-repeat;
	background-position: center 25px;
	background-size:180px;
}
#step1.starter3 #starter3 p a:last-child{
	background-image:url(../images/02.gif);
	background-repeat:no-repeat;
	background-position: center 25px;
	background-size:180px;
}


#step1 #starter2 label, #step1 #starter3 label{
	display:block;
	font-size:30px;
	margin-bottom:20px;
	margin-top:-20px;
}
#step1 #starter2 input{
	display:inline-block;
	vertical-align:top;
}
#step1 #starter2 input[type=text]{
	font-family:josefin,tahoma,arial,helvetica,sans-serif;
	border:0;
	font-size:40px;
	height:44px;
	padding:6px 10px 1px 10px;
	margin-right:-10px;
	border-radius:4px;
	margin-top:3px;
	width:360px;
}


#step1 h2, #step2 h2, #step3 h2, #step4 h2{
	font-size:46px;
	margin-top:2%;
	top:0px;
	font-weight:normal;
}
 #step2 h2, #step3 h2, #step4 h2{
	padding-top:50px;
}
#step1 h2 span, #step2 h2 span, #step3 h2 span, #step4 h2 span{
	font-weight:bold;
}


/* --- STEP 2 --- */
#step2{
	height:100%;
}

#step2 p{
	position:absolute;
	width:100%;
	height:240px;
	top:calc(50% - 120px);
}
#step2 p input{
	width:320px;
padding-right:0;
	padding-left:0;
	padding-top:200px;
	margin:0 1% 2% 1%;
	background-image:url(../images/03.gif);
	background-repeat:no-repeat;
	background-position: center 0px;
	background-size:170px;
}
#step2 p input:nth-child(2n){ background-image:url(../images/04.gif);}
#step2 p input:nth-child(2n+1){ background-image:url(../images/05.gif);}
#step2 p input:first-child{ background-image:url(../images/03.gif);}
#step2 p input:last-child{ background-image:url(../images/06.gif);}



/* --- STEP 3 --- */

#step3 p#parti{
	position:absolute;
	width:100%;
	margin-top:-10px;
	padding:284px 0;
background:rgba(255,136,133,.6);
	opacity:1;
	transition: opacity 0.25s;
}
#step3 p#parti.go{opacity:0;}
#step3 p#parti.go input{cursor:default;}

#step3 h2{
margin-bottom:10px;
}
#step3 h3{
margin-top:0;	
	margin-bottom:2%;
text-transform:uppercase;
	font-weight:normal;
	font-size:16px;
}

#bingo-grid{
	height:800px;
	margin-bottom:0;
	transition: all 1s;
	width:670px;
	margin:0 auto;
}
.line{
	display:block;
	vertical-align:bottom;
}
.line:first-child .cell{border-top:2px solid rgba(255,136,133,0);}
.cell, .result .cell, .result .cell.visible{
	border-left:2px solid #ff8885;
	background:rgba(255,255,255,.35);
	border-bottom:2px solid #ff8885;
	display:inline-block;
	height:120px;
	width:120px;
	line-height:120px;
	text-align:center;
	vertical-align:bottom;
	transition: all .7s, background .2s, border-color 0.01s;
}
.cell.final{border-bottom:none;background:none;overflow:visible;width:0px;}
.line:first-child .cell.final{border-top:none;}
.final .cell{border:none;width:120px;height:50px;line-height:50px;}
.cell span, .result .cell.visible span{
	display:inline-block;
	width:100px;
	height:100px;
	margin-top:10%;
	line-height:95px;
	border-radius:100%;
	vertical-align:top;
}
.cell span span, .cell.visible span span, .cell.selected.visible span span{
	height:auto;
	margin-top:0%;
	line-height:15px;
	display:inline-block;
	vertical-align:middle;
	color:rgba(137,27,27,1);
}
.cell.selected span, .cell.visible span, .cell.visible span span, .cell.selected.visible span span{background:rgba(137,27,27,1);font-weight:bold;color:#fff;}


.cell.visible{
	animation-duration: .15s;
  animation-name: boucle;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes boucle {
  from {  background:rgba(255,255,255,.8)  }
  to { background:rgba(255,255,255,.2) }
}
.result .cell.visible{
  animation-name: none;
}


@keyframes boucleStar {
  from {  transform:scale(1);  }
  to { transform:scale(.7); }
}
.cell.final span#bingostar-content{
	border-radius:0;
	margin:0;
	width:118px;
	height:118px;
	vertical-align:middle;
	text-align:left;
	transition:all 10s cubic-bezier(.21,2.02,.51,.71);
	transform:scale(0);
}
.cell.final span#bingostar-content.visible{
	transition:all 10s cubic-bezier(.21,2.02,.51,.71);
	animation-duration: .25s;
  animation-name: boucleStar;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
#bingostar{
	border-radius:0px;
margin:0;
	margin-top:-52px;
	margin-left:-15px;
	height:0px;
	width:0px;
line-height: 0;
vertical-align: top;
	transform-origin: center;
	position:absolute;
	transform:rotate(15deg);
	color:#b72727;
	border-color:#b72727;
}
#bingostar span{
	color:#fff;
	position:absolute;
	top:90px;
	left:40px;
	text-align:center;
	font-size:36px;
	text-shadow:0 0 3px #b72727;

}
@keyframes boucleStarColor {
  from {  opacity:0.6;  }
  to {opacity:1;}
}
#bingostar span#star{
	animation-duration: .1s;
  animation-name: boucleStarColor;
  animation-iteration-count: infinite;
  animation-direction: alternate;
	top:0;
	left:0;
	padding:0;
	text-shadow:0 0 0;
	border-radius:0;
	margin: 50px 0;
	position: relative;
	display: block;
	color: #b72727;
	width: 0px;
	height: 0px;
	border-right: 100px solid transparent;
	border-bottom: 70px solid #b72727;
	border-left: 100px solid transparent;
	transform: rotate(35deg);
}
#bingostar span#star:before {
	border-bottom: 80px solid #b72727;
	border-left: 30px solid transparent;
	border-right: 30px solid transparent;
	position: absolute;
	height: 0;
	width: 0;
	top: -45px;
	left: -65px;
	display: block;
	content: '';
	transform: rotate(-35deg);
}
#bingostar span#star:after {
	position: absolute;
	display: block;
	color: #b72727;
	top: 3px;
	left: -105px;
	width: 0px;
	height: 0px;
	border-right:100px solid transparent;
	border-bottom: 70px solid #b72727;
	border-left: 100px solid transparent;
	transform: rotate(-70deg);
	content: '';
}



#phrase-finale{
	font-size:20px;
	opacity:0;
}
#phrase-finale h2{
margin:0;
	padding:0;
	margin-top:-20px;
	font-size:36px;
}
#phrase-finale h2 span.line{
display:block;	
font-weight:normal;
}
#phrase-finale h3{
	font-size:24px;
	margin-top:40px;
}
#phrase-finale h3 span{
	font-weight:bold;
	color:#b72727;
}
#phrase-finale h4{
	font-weight:normal;
	font-size:46px;
	margin-top:20px;
}
#phrase-finale h4 #playerprofile{
	background:rgba(137,27,27,1);
	display:inline-block;
	padding:8px 15px 0 15px;
	border-radius:4px;
	text-shadow: 1px 1px 3px #00000066;
}
#phrase-finale h4 #playerprofile span{
	position:absolute;
	transform:rotate(180deg);
	font-size:15px;
	margin-top:52px;
	margin-left:-400px;
	width:400px;
	text-align:left;
}
#phrase-finale p{
	position:fixed;
	bottom:0;
	right:3%;
}


.result #bingo-grid{margin-bottom:0px;height:180px;}
#step3.result p#parti.go{display:none;}
.result #phrase-finale{opacity:1}

.result .cell{ height:0;border-color:rgba(255,136,133,0);	overflow:hidden;background:rgba(255,255,255,0);}
.result .line:first-child .cell, .result .cell.visible {border-color:rgba(255,136,133,0);}
.result .cell.visible{background:rgba(255,255,255,0);vertical-align:top;}


.result .cell.col2{margin-top:-122px;}
.result .cell.col3{margin-top:-139px;}
.result .cell.col4{margin-top:-156px;}
.result .cell.col5{	margin-top:-190px;}


.result .cell.col1.class1{margin-left:0px;}
.result .cell.col2.class1{margin-left:120px;}
.result .cell.col3.class1{margin-left:240px;margin-top:-154px;}
.result .cell.col4.class1{margin-left:366px;margin-top:-188px}
.result .cell.col5.class1{margin-left:490px;margin-top:-222px;}

.result .cell.col1.class2{margin-left:-260px;}
.result .cell.col2.class2{margin-left:0;}
.result .cell.col3.class2{margin-left:130px;}
.result .cell.col4.class2{margin-left:260px;margin-top:-170px;}
.result .cell.col5.class2{margin-left:390px;margin-top:-204px;}

.result .cell.col1.class3{margin-left:-508px;}
.result .cell.col2.class3{margin-left:-254px;}
.result .cell.col3.class3{margin-left:0}
.result .cell.col4.class3{margin-left:128px;}
.result .cell.col5.class3{margin-left:260px;}

.result .cell.col1.class4{margin-left:-730px;}
.result .cell.col2.class4{margin-left:-486px;}
.result .cell.col3.class4{margin-left:-240px}
.result .cell.col4.class4{margin-left:0;}
.result .cell.col5.class4{margin-left:486px;}

.result .cell.col1.class5{margin-left:-990px;}
.result .cell.col2.class5{margin-left:-740px;}
.result .cell.col3.class5{margin-left:-490px;}
.result .cell.col4.class5{margin-left:-240px;}
.result .cell.col5.class5{margin-left:500px;}


.result .cell.line1{ margin-top:20px;}
.result .cell.line2{ margin-top:5px;}
.result .cell.line3{ margin-top:-10px;}
.result .cell.line4{ margin-top:-25px;}
.result .cell.line5{ margin-top:-40px;}


.result #reset{
	margin:0 auto;
	display:block;
	width:auto;
}
.result #reset #chrono{
	display:none;
}
.result #reset #printbutton{
	position:absolute;
	z-index:40;
	margin:0 auto;
	width:300px;
left:calc(50% - 150px);
	margin-bottom:50px;
	padding:10px 0 5px;
}
.result #reset #exitbutton{
	position:absolute;
	z-index:40;
	margin:0 auto;
	width:300px;
left:calc(50% - 150px);
	margin-top:20px;
	padding:10px 0 5px;
	background:#e55;
}

#print-page{	display:none; }


@media screen and (max-height: 800px){
	#bingo-grid{
		
	 transform:scale(.8);	
		transform-origin:top center;
	z-index:0;
	}
	p#parti{
	 transform:scale(.8);	
		transform-origin:top center;
	z-index:1000;
	}
	#phrase-finale{
		transform:scale(.8);	
		transform-origin:top center;
	margin-top:-60px;
	}
}
@media screen and (max-height: 650px){
	#bingo-grid{
		
	 transform:scale(.6);	
		transform-origin:top center;
	z-index:0;
	}
	p#parti{
	 transform:scale(.61);	
		transform-origin:top center;
	z-index:1000;
	}
	#phrase-finale{
		transform:scale(.65);	
		transform-origin:top center;
	margin-top:-90px;
	}
}

@media screen and (max-width: 1450px){

	#step2 p{
	top:calc(50% - 180px);
}
}

@media screen and (max-width: 1200px){
	#step1.starter3 #starter3 p a, #step1.starter3 #starter3 p a:last-child{
padding-top:200px;
	width:290px;
	background-size:150px;
		font-size:18px;
	margin:0 2% 2% 2%;
}
	#step2 p{
	top:calc(50% - 150px);
}
	#step2 p input{
	width:280px;
	padding-top:160px;
	background-size:140px;
		font-size:22px;
}
}