html{background: url('../images/reckinger_bg2.jpg') no-repeat left top; background-size: cover; overflow-x: hidden; -webkit-font-smoothing:antialiased}

html body{width: 769px; height:818px; margin: 0 auto; position: relative; font-family: 'Roboto', sans-serif; letter-spacing: 0.5px; border-radius: 0; background: transparent !important}

html *{font-family: 'Roboto', sans-serif; font-weight: 200}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #000; font-weight: 500}
::-moz-placeholder { /* Firefox 19+ */ color: #000;font-weight: 500}
:-ms-input-placeholder { /* IE 10+ */ color: #000; font-weight: 500}
:-moz-placeholder { /* Firefox 18- */ color: #000; font-weight: 500}

#jeu_concours{width: 769px; height: 780px; position: relative; }

h2{color: #f8ac00; font-style: normal}

#header{width: 583px; height:100px; z-index: 10; font-size: 38px; color: #fff; font-style: italic; padding: 25px 0 0; font-family: 'Roboto', sans-serif; text-align: center}

#leaderboard{width: 100%; height: 740px; float: left; margin: 0 auto 0; position: relative}

#intro{text-align: center; width: 583px; font-weight: normal; font-style: italic; display: block; color: #fff; height: 100px}

#intro h1{font-size: 24px; line-height: 30px; font-weight: 500; margin-top: 30px}
#intro h2{font-size: 23px; font-weight: 500; margin: 0}

#images_right{float: left; width: 186px}
#images_right img{margin-bottom: 1px}

#registration{float: left; margin:0; width:583px; min-height: 660px; padding: 15px 15px 0 20px; position: relative; border: 1px solid #7c063f;
	background: rgb(250,174,4); /* Old browsers */
	background: -moz-linear-gradient(45deg,  rgba(250,174,4,1) 0%, rgba(243,18,18,1) 52%, rgba(84,26,86,1) 99%); /* FF3.6-15 */
	background: -webkit-linear-gradient(45deg,  rgba(250,174,4,1) 0%,rgba(243,18,18,1) 52%,rgba(84,26,86,1) 99%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(45deg,  rgba(250,174,4,1) 0%,rgba(243,18,18,1) 52%,rgba(84,26,86,1) 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#faae04', endColorstr='#541a56',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

#registration #intro_formulaire{color: #fff; font-size: 15px; line-height: 19px; margin: 25px 30px 25px 15px}

#registration em{display: none !important}

#registration #message_erreur{background: #000 none repeat scroll 0 0;  border: 1px solid #ea0519; box-sizing: border-box; color: #fff;  float: none; font-size: 17px; height: 40px; line-height: 40px; margin: 0 30px 15px 15px; text-align: center; width: auto; display: none}

#registration h1{color: #000000; font-family: 'Roboto', sans-serif; font-size: 38px; font-weight: normal; line-height: 38px; margin: 35px 0 15px; padding: 0; text-align: center; width: 465px;}
 
#registration h2{color: #fff; font-family: 'Roboto', sans-serif; font-size: 23px; font-weight: 500;  margin-bottom: 30px;  margin-top: 90px; text-align: center; width: 100%}

#registration h3{  color: #fff; font-family: 'Roboto', sans-serif; font-size: 18px; font-style: italic;  font-weight: 300; line-height: 23px; margin-bottom: 25px; text-align: center; width: 100%}

#registration a{color:#000}

#registration .left{float: left; width: 52%; margin-bottom: 15px}

#registration .container{float: left; width: 100%; margin-bottom: 8px}
#registration .container.largepaddingright{padding-right: 30px}
#registration .container.row.margintop{margin-top: 10px}

#registration label{font-size: 13px; float: left; width: 100%; display: block; clear: both; color: #fff; letter-spacing: 0.3px;}
#registration a{color: #7d7d7d;}

#registration input{color: #7d7d7d} 

#registration input[type="checkbox"]{float: left; margin: 4px 0 0}

#registration input[type=text], input[type=email]{-webkit-appearance:none; width:100%; height:40px; float:left; margin:3px 4% 20px 0; padding:2px 0 0 5px; margin-bottom:10px; font-size:18px; border: 1px solid #e30519}

#registration input[type=text].error, input[type=email].error{background: #000; color: #f71c11}
#registration select.error{background: #000; color: #f71c11}

#registration input[type=text].error::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #f71c11; font-weight: 500}
#registration input[type=text].error::-moz-placeholder { /* Firefox 19+ */ color: #f71c11;font-weight: 500}
#registration input[type=text].error:-ms-input-placeholder { /* IE 10+ */ color: #f71c11; font-weight: 500}
#registration input[type=text].error:-moz-placeholder { /* Firefox 18- */ color: #f71c11; font-weight: 500}

#registration input[type=email].error::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #f71c11; font-weight: 500}
#registration input[type=email].error::-moz-placeholder { /* Firefox 19+ */ color: #f71c11;font-weight: 500}
#registration input[type=email].error:-ms-input-placeholder { /* IE 10+ */ color: #f71c11; font-weight: 500}
#registration input[type=email].error:-moz-placeholder { /* Firefox 18- */ color: #f71c11; font-weight: 500}

#registration select{-webkit-appearance:none; width:100%; height:40px; float:left; margin:3px 0 15px 0; padding:0; font-size:18px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; border: 1px solid #e30519}
#registration select option{font-size:18px; padding: 10px 0}
#registration select option:hover{background: #f8ac00; color: #fff}

#registration .col-sm-6{padding-right:0}
#registration .col-sm-6.gauche{padding-right:0}
#registration .col-sm-6 p {float: left; width: 100%; display: block; margin: 0}
#registration .col-sm-6 p input{float: left; cursor: pointer}
#registration .col-sm-6 p label{float: left; clear: none; display: inline; width: auto; margin-left: 6px; margin-top: 4px; font-size: 13px; max-width: 90%; line-height: 17px; cursor: pointer}

#registration .col-sm-6 .no_margin_bottom{margin-right: 15px}

#registration .container.acceptabilite p{margin: 0; height: 19px; clear: both; width: 100%}
#registration .acceptabilite p{color: #fff}
#registration .acceptabilite p small{float: right; margin-right:0}

#registration a{color: #fff; text-decoration: underline}
#registration a:hover{text-decoration: none}

#registration a.nonsouligne{text-decoration: none; font-size: 12px}
#registration a.nonsouligne:hover{text-decoration: underline}

#registration .gris{color: #7d7d7d; font-size: 12px;}

#sharebt{display:block; position: absolute; left:50%; bottom:-35px; height:20px; width:72px; margin-left:-35px; background:url('../images/bouton_partage_fb.png') no-repeat left top}

#registration #formSubmit{background: #f8ac00; color: #003576; font-weight: 700; width: 174px; height: 40px; line-height: 43px; vertical-align: middle; border: none; margin: 15px 0 8px 0; width: 100%}

#registration #formSubmit:hover{background:#ffc43f}

#registration #formSubmit .participerContent{float:left; margin: -3px auto 0; width:100%}

#bouton_inscription{height:55px ; /*background:  url('../images/bouton_inscription.png') no-repeat left top;*/ cursor: pointer; margin: 25px 0 0 155px; width: 210px}
#bouton_inscription:hover{background-position: 0 -58px}

#logo_white{width: 72px; height: 22px; background:  url('../images/logo_small_reckinger.png') no-repeat left top; position: absolute; left: 30px; bottom: 30px; z-index: 25;}
#separation_bottom{width: 44px; height: 159px; background:  url('../images/separation_bottom.png') no-repeat left top; position: absolute; left: 230px; bottom: 0; z-index: 10;}


#registration .col-sm-8 #lien_decouvrir{background: #f8ac00; color: #003576; font-weight: 700; height: 40px; line-height: 43px; vertical-align: middle; border: none; margin: 25px 0 8px 0; width: 100%; text-transform: uppercase; display: block; text-decoration: none; text-align: center}
#registration .col-sm-8 #lien_decouvrir:hover{background:#ffc43f}
p.grandMarginTop{margin-top: 50px; text-align: center; color: #fff}
.col-sm-8 p{color: #fff}

p.grandMarginTop img{max-width: 100%; height: auto}


/* ==========================================================================
   Media Queries
========================================================================== */

/* mobiles iPhone 4 + 5 OK*/
@media only screen and (max-width:1024px){
	
	html {background:#000 !important}
	
	*{margin:0; padding:0}
	
	html body{margin:0 auto !important; padding:0 !important; border:none; border-top:none !important; height:auto !important; width: 568px !important}
	
	#header {padding: 25px 0 0 0; width: 100%}
	
	#jeu_concours {height: 800px; position: relative; width: 100%}
	
	#registration{float: left; margin:0; width:100%; min-height: 1000px; padding: 15px 15px 25px 20px; position: relative}
	
	#registration #intro_formulaire {color: #fff; font-size: 23px; line-height: 27px; margin: 25px 30px 25px 15px}
	
	#registration .col-sm-6{width: 100%}
	
	#registration input[type=text], #registration input[type=email]{ -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; height: 60px !important; font-size: 30px !important; padding: 0 0 0 10px !important}
	#registration select{background: #fff !important; height: 60px !important; font-size: 30px !important; font-weight: 500 !important; padding: 0 0 0 10px !important}
	#registration select.error{background: #000 !important}
	#registration label{font-size: 25px !important; margin-bottom: 5px}
	
	#registration input[type=radio]{width: 25px !important; height: 25px !important;}
	#registration input[type=checkbox]{width: 25px !important; height: 25px !important;}
	
	#registration .col-sm-6 p label {font-size: 25px; line-height: 30px; margin-left: 6px; margin-top: -1px;  max-width: 92%; width: auto}
	
	#registration a.nonsouligne {font-size: 25px; margin-bottom: 25px !important; line-height: 40px; height: 40px !important; display: block;}
	
	#registration #formSubmit{background: #f8ac00; color: #003576; font-weight: 700; height: 60px; line-height: 63px; font-size: 24px; vertical-align: middle; border: none; margin: 15px 0 8px 0; width: 100%}
	
	#registration .col-sm-6 p {margin: 0 0 15px 0}
	
	#registration #message_erreur{font-size: 25px !important; height: 60px !important; line-height: 60px !important}
	
	#separation_bottom{display: none}
		
}