/*
    Created on : 21 déc. 2015, 12:06:20
    Author     : Audrey Delécolle
*/

@font-face {
    font-family: 'blackswordregular';
    src: url('../font/blacksword-webfont.woff2') format('woff2'),
		url('../font/blacksword-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

.fb-share-button {
	display: block;
	background-image: url('../img/share.png');
	width : 331px;
	height: 107px;
}
.fb-share-button span {
	display: none ;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height:normal;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
input:focus, textarea:focus { outline:none }
.clear { clear:both }
b, strong { font-weight:bold }
img { max-width:100%; height:auto }
img.responsive-img { width:100%; display:block; }

.hid, .err { display:none }
.err { color:red; margin:-10px 0 10px }
a { color:#fff }

html {
	background-color:#972928;
	background:url('../img/bg-mobile-new.jpg') no-repeat center 0 #002f6b;
}
body {
	font-size:14px;
	font-family: 'Roboto', helvetica, arial, sans-serif;
	text-align:left;
	color:#fff;
	line-height:1;
}

body.lf .cl_only,
body.cl .lf_only { display:none !important }

.jeu-wrapper,
.main { position:relative }

.wrapper-container {
	margin:0 80px;
	position:relative;
	z-index:2
}
.marque { text-transform:uppercase; font-size:15px; text-align:center; padding-top:20px; margin:0 15px 0 22px }
.marque img { vertical-align:middle; margin-left:3px }
.lf .marque { text-transform:none; font-family:'Garamond', serif; font-size:20px; padding-bottom:15px }
.lf .marque img { width:216px; display:block; margin:-12px auto 0 }
.bandeau-container { text-align:center; margin-left:23px; margin-right:10px; position:relative; z-index:2;  }
#bandeau { margin:0 auto; padding-top:2px; width:100%; max-width:272px; display:block; }
.intro { position:relative; z-index:2; margin:0 17px }
.lf .intro { margin-bottom:10px }
.affiche-container { margin:13px 15px 0 15px }
.affiche {
	height:auto;
	display:block;
	margin-left:auto;
	margin-right:auto;
	clear:left;
	margin-bottom:10px;
}
.date { width:72.42%; margin:0 auto; display:block; }

p.participer { font-size:12px; text-align:center; margin:0 0 1em; line-height:normal }
.colona-p { margin-top:24px }
.step-2 p.participer { max-width:380px; font-size:17px; margin:20px auto 0; text-align:center; }
/*.date { text-align:right; margin-right:20px; }
.date span{
	text-transform:uppercase;
	background-color:#fce11a;
	color:#000;
	font-family: 'open_sanscl', arial, sans-serif;
	font-size:20px;
	padding:0 9px;
	display:inline-block;
	height:32px;
	line-height:32px;
	box-shadow: 3px -3px 4px rgba(0,0,0,.3)
}*/

.gain {
	text-align:center;
}
/*.gain .w-container { display:flex }*/
.gain .w-container { margin-bottom:27px }
.gain .w-td {
	/*width:100%*/
	display:table-cell;
	width:30%
}
.gain .w-border { position:relative; top:-6px; }
.gain .w-border span{ border-bottom:1px solid #fff; display:inline-block; width:100% }
.gain .white {
	color:#fff;
	font-family: 'blackswordregular', arial, sans-serif;
	font-size:53px;
	padding:0 0.3em 0;
}
.gain-item {
	text-transform:uppercase;
	line-height:0.90;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight:700;
}
.gain-item img { vertical-align:top }
.gain-item-container { display:inline-block }
/*.gain1 img{ float:right }
.gain2 img{ float:left }*/
.gain1,
.gain2 { white-space:nowrap }
.gain2 { margin-top:18px }
.gain1 img { margin-top:7px; width:135px }
.lf .gain1 img { margin-left:13px }
.gain2 .big,
.gain2 .sub-container { display:inline-block }
.gain2 .gain-item-container { margin-bottom:9px; vertical-align:middle; }
.gain2 img { vertical-align:middle; }
.f11 { font-size:30px }
.f12 { font-size:21px }
.f21 { font-size:15px }
.f22 { font-size:38px }
.and {
	font-family: 'Roboto Condensed', sans-serif;
	font-weight:700;
	font-size:36px;
	position:absolute;
	left:0;
	width:100%;
	text-align:center;
}
.main .gain .big { font-size:67px; color:#fecd1a }
.gain .ast { font-size:14px; vertical-align:super; margin-left:0.5em }

.credits { font-size:10px; color:#FFF; font-family:times, serif; text-align:center }
.credits p { margin:0 15px; line-height:normal }
.credits a { color:#fff; text-decoration:underline; }

input {
	width:100%; height:24px;
	box-sizing:border-box;
	border:1px solid #002005;
	color:#00501f;
	font-size:12px;
	font-family: helvetica, arial, sans-serif;
	padding: 4px;
	margin-bottom:8px;
}
label { cursor:pointer }
header { padding-bottom:80px }

.oblig { font-size:11px }
.input-grp { position:relative }
.input-grp input::placeholder{ color: #002f6b;}
.input-checkbox { margin:1.1em 0; text-align:left }
.input-radio input,
.input-checkbox input { width:auto; height:auto; margin:0; vertical-align:middle }
.input-radio label,
.input-checkbox label { vertical-align:middle; font-size:16px; }
.input-submit { text-align:center; z-index:2 }
.input-submit input {
	font-family: 'Roboto Condensed', sans-serif;
	font-weight:700;
	font-size:20px;
	line-height:1;
	background-color:#fecd1a;
	color:#000;
	border: 2px solid black;
	text-transform:uppercase;
	width:100%; height:2.6em;
	margin:0;
	padding:0;
	margin:0 auto;
	cursor:pointer;
	box-shadow:0px 0px 5px 0px rgba(0,0,0,.3)
}
.footer { padding:0 0 1em; clear:left }

.step-2 .form-content { position:relative; text-align:center }
.step-2 .input-radio { text-align:center; margin-bottom:2.5em; }
.step-2 .input-radio p { line-height:1.5; margin:1.5em 0 .5em; color:#fecd1a; font-weight:bold; }
/*.step-2 .reponse { display:inline; margin-left:15px; }*/
.step-2 .reponse-wrapper { text-align:left; display:inline-block; }
.step-2 .reponse { margin-top:1em }
/*.step-2 p + .reponse { display:inline; margin-left:0 }*/
.step-2 .input-submit input { width:auto; padding:0 20px }
#open_video { margin-bottom:20px; display:inline-block }

.step-3 { text-align:center }
.step-3 #share { margin:23px 0; display:block; }
.step-3 .wrapper-container { text-align:center }
.step-3 p.participer { text-align:center; font-size:15px; margin-top:1em }

.popup_error { color:#000; margin:.5em 0; padding:5px; display:block; background-color:#fff; }
.popup_error span { color:#ff0000 }
.error_field { width:100%; color:orange; font-size:10px; position:absolute; bottom:0 }
.step-2 .error_field { bottom:-2em }
.input-checkbox .error_field { top:17px }

.large-only,
.large-only-inline,
.medium-only,
.no-mobile {
	display:none;
}
.shadow { display:none; z-index:10; position:fixed; width:100%; left:0; right:0; top:0; bottom:0; background:url('../img/shadow.png') repeat;;}
.video-container { width:100%; display:none; z-index:20; position:fixed; top:0; left:0 }
.close { float:right; margin-bottom:28px; }
.close a img{ display:block;}

.has_played { margin-top:1em; text-align:center; font-size: 18px; font-weight: bold; }



/** PAGE GAGNANTS **/
.gagnants { background-size:100% 100%; padding-top:2em }
.gagnants .main {
	padding:3rem 0; line-height:1.5
}
.gagnants h1 {
	font-size:2rem;
	text-align:center;
}
.gagnants h2 { font-size:1rem; color:#f7e495; margin:1.5em 0 1em; text-align:center; line-height:1.5 }
.gagnants h2 + p { font-size:0.8rem; text-align:center; font-style:italic; margin-bottom:3em }

/*.gagnants .resultats > div { float:left; width:50% }*/
.gagnants .liste { clear:both; padding:0 1em }
.gagnants .credits { margin-top:4rem }
.gagnants .col-container { padding:0 0em 3em 0 }
.gagnants .col {
	width:50%;
	display:inline-block;
	vertical-align:top
}
.gagnants .col p { margin-bottom:0.5em }



.wait .waiting {
	font-size:30px;
	font-family:serif;
	text-align:center;
	padding-top:10px;
}
.wait .waiting p {
	text-align:left;
	position:relative;
	display:inline-block;
	padding-left:1em;
}
.wait .waiting p:before{
	content:'...';
	position:absolute;
	left:0
}
.wait .waiting a {
	display:block;
	margin-top:16px;
}

@media all and (min-width:576px){
	html {
		background-image:url('../img/bg-medium-new.jpg');
		background-size:cover;
		background-position:top center;
	}
	header { padding-bottom:60px }
	.no-mobile { display:block }
	.mobile-only { display:none !important }
	.medium-only { display:block }
	.main { max-width:500px; margin:0 auto; }
	.marque { margin: 0 32px 0 122px }
	.lf .marque { margin:0 auto }
	.lf .marque img { width:312px; margin-top:-25px }
	.bandeau-container { margin:0 }
	#bandeau { padding-top:2px; width:auto; max-width:none }
	.wrapper-container { margin-left:auto; margin-right:auto; max-width:430px }
	.affiche-container { margin:24px auto 13px }
	.affiche { width:auto; margin:0 auto 20px; }
	.date { width:296px }
	.gain { font-size:32px; text-align:left; margin-left: 80px; }
	.gain-item,
	.gain .w-container { margin-bottom:0.7rem }
	.gain .w-border { font-size:25px }
	.gain .white { padding-bottom:0 }
	.gain-item { margin:0; display:inline-block; vertical-align:middle }
	.lf .gain-item { display:block; text-align:center }
	.gain1 img { margin-left:3px; margin-top:7px; width:auto }
	.gain2 { white-space:normal }
	.gain2 img { float:right; margin:-6px -18px 0 3px; width:91px; }
	.gain2 .sub-container { display:block }
	.and { position:static; width:auto; margin:0 16px 0 -8px; vertical-align:middle }
	p.participer { margin:10px 0 8px 0; text-align:left }
	.credits { font-size:11px }
	#form { width:275px; margin-right:16px }
	#form,
	.colona-p { margin-top:0; vertical-align:top; display:inline-block }

	/* step 2 */
	.step-2.wrapper-container { margin:0; width:auto; max-width:none }
	.step-2 .input-submit { text-align:right; margin-bottom:20px; }
	.video-container { width:488px; margin:170px 0 0 -244px; top:0; left:50% }
	.video-container iframe { width:488px; height:295px }
	.step-2 .input-radio p {  }
	.step-2 #form { margin:0 auto; width:auto; display:block }
	.step-2 .reponse-wrapper { display:block; text-align:center; }
	.step-2 .reponse { display:inline; margin-left:15px }


	.wait .waiting { font-size:40px }
	.wait .waiting img { max-width:368px }
}
@media all and (min-width:800px){
	html { background-image:url('../img/bg-large-new.jpg') }
	.medium-only { display:none }
	.large-only { display:block }
	.large-only-inline { display:inline }

	.main { width:780px; max-width:none; margin:0 auto; padding:0 0 90px 0 }
	.main-container { float:right; margin:0 }
	.footer { text-align:center; width:370px }
	.credits p { margin-left:0px; margin-right:0 }

	.marque { width:375px; margin:0 0 23px 72px; padding-top:52px; }
	.lf .marque { padding:39px 0 0; margin:0 0 30px }
	.bandeau-container { position:absolute; right:0; top:9px }
	#bandeau { width:398px }
	.affiche-container { float:left; margin:0; width:370px }
	.date { margin:15px auto 10px }
	.intro { padding-top:80px; float:right; margin-right: -30px; }
	.wrapper-container { width:390px; max-width:none }
	.and { margin:0 0 0 -18px }
	.gain { margin-left: 0;}
	.gain { text-align:left }
	.gain1 img { width:130px }
	.gain2 { margin-left:15px }
	.gain2 .gain-item-container,
	.gain2 img { vertical-align:middle }
	.gain2 img { width:auto; margin-top:0 }
	.main .gain .big { font-size:68px }

	#form { width:235px }
	.step-2 #form { width:auto; font-size: 16px }
	.step-2.wrapper-container { width:405px }
	p.participer { margin:2px 0 8px }
	.video-container { width:640px; margin-top:133px; margin-left:-320px; left:50%;  }
	.video-container iframe { width:640px; height:360px }



	.wait #bandeau { padding-top:115px }
	.wait #form { width:auto; margin:0 }
	.wait .waiting {
		padding-top:150px;
		font-size:47px;
	}
	.gagnants { padding-top:8em }
	.gagnants .liste-container { display:flex; justify-content:space-between }
	.gagnants .col-container { padding:0 2em 0em 0 }
}
@media all and (min-width:992px){
	html { background-image:url('../img/bg-new.jpg') }
	.no-xl { display:none }
	header { padding-bottom:0 }
	.main { width:988px; padding-bottom:0; padding-right:0 }
	.marque { width:375px; margin:0 0 13px 0; padding-top:32px }
	.lf .marque { width:auto; text-align:left; margin:0 0 8px 25px }
	.lf .marque img { width:auto; display:inline-block; }
	.affiche-container { width:520px }
	.affiche { width:459px }
	.date { width:auto }
	#bandeau { width:auto }
	.intro { margin-right:40px; }
	.wrapper-container { width:430px; margin-right:-5px; }
	.intro { padding-top:145px }
	.and { position:static; margin:0 0 0 3px }
	#form { width:255px }
	.step-2 #form { width:auto }
	.step-2.wrapper-container { width:465px }
	.footer { width:520px }

	.wait .main { width:1010px }
	.wait .wrapper-container { width:463px; margin:0 }
	.wait .waiting {
		padding-top:189px;
		font-size:50px;
	}
}