@font-face {
	font-family : "Block_Berthold_BQ_Regular";
	src: url("../fonts/Block_Berthold_BQ_Regular.otf") format("opentype");
	font-weight: 100;
}



html, body {
  overflow-x: hidden;
}
body {
  position: relative
}

#waittext > h1{
	
	font-family: "Block_Berthold_BQ_Regular", sans-serif;
	color:#fff !important;
	background-color: #ce1022;
	padding:25px;
	font-size: 30px;
	margin-top: 15vh;
	text-align: center;
	
}

.heading-alt{
	
	color:#ffffff !important;
	
}

.navigation-link{
	
	/* color:#000 !important; */
	
}

.extra-heading{
	color:#feed00 !important;
	text-shadow: #c23c39 5px 5px;
}

.sub-heading{
	color:#feed00 !important;
	text-shadow: #c23c39 5px 5px;
	font-family: 'Block_Berthold_BQ_Regular', arial;
	letter-spacing: 0.1em;
	font-size: 80px;
	line-height: 30px;
}


#canvas-coca{

	z-index: 1;
    position: absolute;
    left: 0;
	
}

#canvas-gagnant{

	z-index: 1;
    position: absolute;
    left: 0;
	
}


#jouerblock {
	
	width:300px;
	
}

#jouerbtn {
	
	position: relative;
	top:-70px;
	
	
}

#jouerbtn > a {
	
	
	font-family: 'Block_Berthold_BQ_Regular', arial !important;
	background: #fbbd00 !important;
	font-size: 24px;
	font-weight: bold;
	margin-right: 0;
	letter-spacing: 0.1em !important;
	line-height: 26px;
	padding:20px 50px;
	
	
}

.optin {
	
	border-radius: 5px;
	border: 1px solid rgb(161, 236, 255);
	padding : 10px;
	background-color: rgb(227, 247, 253);
}

.optin > label  {
	
	font-size: 12px;
	
}

#jouerbtn > a:hover {
	
	background: black !important;
	
}


#commentjouer {
	
	
	background-color: black;
	overflow : inherit !important;
	height: inherit !important;
	
	
}


#commentjouer > h3 , #commentjouer > p {
	
	color: white;
	
}


#commentjouer > div p{
	
	
	color:white;
	font-size: 18px;
	font-weight: bold;
	
}

#valid-form {
	
	
		background: #ce1022;

}
#hero{

	
	padding-top: 0px !important;
	height : 100vh;
	min-height: 800px; 
}

#official{
	
	position: absolute;
	z-index: 1;
	display: block;
	top: calc(75vh - 100px);
	left : calc(50vw - 110px);
	
}



#voiture{
	
	position: absolute;
	top:30px;
	z-index: 1;
	display: block;
	float: left;
	margin-left:5vw;

	
}


#pluslots{	
	text-align: center;
	font-weight: bold;
	
	opacity: 0;
	position: absolute;
	top: calc(50vh);
	left: calc(55vw - 130px);
	width:280px;
	-webkit-animation: 0.5s ease-out 0.1s forwards  move_eye;
    animation: 0.5s ease-out 0.1s forwards move_eye ;
    transform: rotate(-10deg);
}

#agagner{
	text-align: center;
	font-weight: bold;
	
	opacity: 1;
	position: absolute;
	top: calc(45vh);
	left: calc(47vw - 330px);
	width:340px;
	-webkit-animation: 0.5s ease-out forwards  move_eye;
    animation: 0.5s ease-out forwards move_eye ;
    transform: rotate(-10deg);
}


#agagner > h1 {
	font-family: 'Block_Berthold_BQ_Regular', arial !important;
	position: absolute;
	z-index: 99;
	padding-left: 20px;
	padding-top: 20px;
	
}

#pluslots > h1{
	font-family: 'Block_Berthold_BQ_Regular', arial !important;
	line-height: 140px;
	position: absolute;
	z-index: 99;
	padding-left: 50px;
	top: -50px;
	transform: rotate(-2deg);

	
	
	
}

#agagner > h2 {
	font-family: 'Block_Berthold_BQ_Regular', arial !important;
	font-size: 40px;
	position: absolute;
	z-index: 99;
	top:150px;
	padding-left: 80px;
	
	
}

#pluslots > h2{
	font-family: 'Block_Berthold_BQ_Regular', arial !important;
	font-size: 30px;
	position: absolute;
	z-index: 99;
	top:50px;
	padding-left: 40px;
	padding-bottom: 60px;
	
	
}

#square-gagner, #square-pluslots{
	
	transform: rotate(45deg);
	
}



@-webkit-keyframes move_eye { from { margin-top:50px;opacity: 0; } to { margin-top:0px; opacity: 1;}  }
		@keyframes move_eye { from { margin-top:50px;opacity: 0; } to { margin-top:0px; opacity: 1;}  }


@media (max-height: 800px) {
	
	#official{
		top: 600px !important;
	}
	
	#agagner{
		
		top: 550px;
	}
	
	.ortitle{
		
	}
	
		
}


@media (max-width: 1000px) {
	
	#hero{
		height:1200px !important;
	}
	
	#official{
	
		position: absolute;
		z-index: 1;
		display: block;
		top: 900px !important;
		left : calc(50vw - 110px);
	}
	
	#pluslots{	
	text-align: center;
	font-weight: bold;
	
	opacity: 0;
	position: absolute;
	top: 520px;
	left: calc(75vw - 100px);
	width:210px;
	-webkit-animation: 0.5s ease-out 0.1s forwards  move_eye;
    animation: 0.5s ease-out 0.1s forwards move_eye ;
    transform: rotate(-10deg);
	}
	
	#agagner{
		text-align: center;
		font-weight: bold;
		
		opacity: 1;
		position: absolute;
		top: 550px;
		left: calc(30vw - 130px);
		width:260px;
		-webkit-animation: 0.5s ease-out forwards  move_eye;
	    animation: 0.5s ease-out forwards move_eye ;
	    transform: rotate(-10deg);
	}
	
	
	#voiture{
		
		position: absolute;
		top:550px;
		z-index: 1; 
		display: block;
		float: left;
    	
	}
	
	#agagner > h1 {
		font-family: 'Block_Berthold_BQ_Regular', arial !important;
		position: absolute;
		z-index: 99;
		padding-left: 45px;
		padding-top: 0px;
	}
	
	#pluslots > h1{
		
		font-family: 'Block_Berthold_BQ_Regular', arial !important;
		line-height: 120px;
		position: absolute;
		z-index: 99;
		padding-left: 50px;
		top: -50px;
		transform: rotate(-2deg);		
		
	}
	
	#agagner > h2 {
		font-family: 'Block_Berthold_BQ_Regular', arial !important;
		letter-spacing: 5px;
		font-size: 35px;
		position: absolute;
		z-index: 99;
		top:80px;
		padding-left: 50px;
		
		
	}
	
	#pluslots > h2{
		font-family: 'Block_Berthold_BQ_Regular', arial !important;
		font-size: 25px;
		position: absolute;
		z-index: 99;
		top:40px;
		padding-left: 20px;
		
		
	}
		
}













.formorangina {
	
	background: rgb(62,228,245);
	  background: -moz-linear-gradient(90deg, rgba(62,228,245,1) 34%, rgba(2,174,216,1) 81%);
	  background: -webkit-linear-gradient(90deg, rgba(62,228,245,1) 34%, rgba(2,174,216,1) 81%);
	  background: linear-gradient(90deg, rgba(62,228,245,1) 34%, rgba(2,174,216,1) 81%);
	  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3ee4f5",endColorstr="#02aed8",GradientType=1);
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
	border-bottom: 0 !important;

}


.bgform {
	
		margin-top: 100px;
	
}

#valid-form{
	
	margin-top : 20px; 
}

 
 
.ortitle h2 {
	
	color:#feed00 !important;
	text-shadow: #c23c39 3px 3px;
	font-size: 60px;
	text-align: left;
	margin-left: 20px;
	letter-spacing: 5px;
	
} 


#twingo{
	
	
	background-color: #172c6c;
	
}

#twingo h3 {
	
	color:#ffdd00;
	
}


#twingo p {
	
	color:#CCCCCC;
	
}

.twingo{
	
	font-size: 11px;
	border: 0 !important;
	border-spacing: 0;
	padding:0;
	color:#DDD;
}

.twingo tr {
	
	background: none !important;
	border: 0 !important;
	border-color: none !important;
}

.twingo td {
	border:0;
	padding:1px 0px !important;
	background-color: none !important;
	border-color: none !important;
	border-style: none !important;
	
}


.reglement{
	
	color: black !important;
	height : 100% !important;
	background: rgb(62,228,245);
	background: -moz-linear-gradient(90deg, rgba(62,228,245,1) 34%, rgba(2,174,216,1) 81%);
	background: -webkit-linear-gradient(90deg, rgba(62,228,245,1) 34%, rgba(2,174,216,1) 81%);
	background: linear-gradient(90deg, rgba(62,228,245,1) 34%, rgba(2,174,216,1) 81%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3ee4f5",endColorstr="#02aed8",GradientType=1);
	
}

@media (max-width: 991px) {
	
	
	.ortitle h2 {
	
		font-size: 3em;
		color: #feed00 !important;
		text-align: center;
		letter-spacing: 5px;
			
	} 
	
}


.errorlogin{
	
	margin:30px;
	padding: 5px 20px;;
	background: black;
	color:white;
	
}


#contacter{
		
	min-height: 850px !important;
	
}


.subwhite {
	
	font-size: 5em;
	letter-spacing: 0em;
	color:white !important;
	text-shadow: none !important;
	border: 0;
	font-weight: 100;
	padding-right: 2vw;
}





.subwhiteh {
	
	font-size: 4em;
	letter-spacing: 0em;
	color:white !important;
	text-shadow: none !important;
	border: 0;
	font-weight: 100;
	padding-right: 2vw;
	line-height:0.8em;
	
}

#uefa > .numfour {
	
	display: inline-block;
	position: relative;
	top: -135px;
	right:20em;
	width : 60px;
	height: 70px;
	padding: 8px;
	margin:0;
	background-color: #feed01;
	-webkit-box-shadow: -4px 5px 0px 0px rgba(194,59,57,1);
	-moz-box-shadow: -4px 5px 0px 0px rgba(194,59,57,1);
	box-shadow: -4px 5px 0px 0px rgba(194,59,57,1);
	rotate: -10deg;
	
	
}

.numfour  > .sub-heading {
	font-weight: 100;
	color:#c23c39 !important;
	font-size: 80px !important;
	text-shadow: none;
}


#etoile{
	
	color: #feed01 !important;
	
}



.navbar-zero {
	
	background : none !important;
	border : none !important;
	
}



#confirmEmail {
	
	margin-top: 30vh;
}