@charset "utf-8";

/* Style Tablette horizontale */
@media screen and (min-width: 992px) and (max-width: 1200px){

.tablette{
	display:block;
}
}

html{
	font-size:100%;	/* Permet de gêrer les fonts en em */
	-webkit-text-size-adjust:none;	/* Containte taille de police automatique sur iphone et ipad au changement d'orientation */
}

body{
	margin:0;
	color:#fff;
	font-family:Arial, Helvetica, sans-serif;
	background-color:#481764;
}

.content{
	position:relative;
	width:100%;
	height:auto;
	min-width:320px;
	max-width:1000px;
	margin-left:auto;
	margin-right:auto;
	background-color:#481764;
	background-image: url("../img/bg_top.jpg");
	background-position: top center;
	background-repeat: no-repeat;
    background-size:1000px 480px;
	overflow:hidden;
}

p, ul, li, table, tr, th, td, h1, h2, h3{
	padding:0;
	margin:0;
}

a{
	color:#fff;
}

img{
	border:0;
}

:focus{
	outline:0;
}

@font-face{
    font-family : "MDLZBITETYPE-Regular";
	src : url('../font/MDLZBITETYPE-Regular.eot'); /* Pour IE9 Compat mode */
    src : url('../font/MDLZBITETYPE-Regular.eot?#iefix') format('eot'),
		  url('../font/MDLZBITETYPE-Regular.woff') format('woff'),
          url('../font/MDLZBITETYPE-Regular.svg') format('svg'),
          url('../font/MDLZBITETYPE-Regular.ttf') format('truetype');
}

.fontMDLZBITETYPERe{
	font-family: "MDLZBITETYPE-Regular";
	font-style:normal;
}

@font-face{
    font-family : "calibri-regular";
	src : url('../font/calibri-regular.eot'); /* Pour IE9 Compat mode */
    src : url('../font/calibri-regular.eot?#iefix') format('eot'),
		  url('../font/calibri-regular.woff') format('woff'),
          url('../font/calibri-regular.svg') format('svg'),
          url('../font/calibri-regular.ttf') format('truetype');
}

.fontCalibriRe{
	font-family: "calibri-regular";
	font-style:normal;
}

@font-face{
    font-family : "calibri-bold";
	src : url('../font/calibri-bold.eot'); /* Pour IE9 Compat mode */
    src : url('../font/calibri-bold.eot?#iefix') format('eot'),
		  url('../font/calibri-bold.woff') format('woff'),
          url('../font/calibri-bold.svg') format('svg'),
          url('../font/calibri-bold.ttf') format('truetype');
}

.fontCalibriBd{
	font-family: "calibri-bold";
	font-style:normal;
}

@font-face{
    font-family : "OpenSans-ExtraBold";
	src : url('../font/OpenSans-ExtraBold.eot'); /* Pour IE9 Compat mode */
    src : url('../font/OpenSans-ExtraBold.eot?#iefix') format('eot'),
		  url('../font/OpenSans-ExtraBold.woff') format('woff'),
          url('../font/OpenSans-ExtraBold.svg') format('svg'),
          url('../font/OpenSans-ExtraBold.ttf') format('truetype');
}

.fontOpenSansExBd{
	font-family: "OpenSans-ExtraBold";
	font-style:normal;
}

.bouton{
	float:left;
	width:100%;
	text-align:center;
}

.bouton .load{
	position:absolute;
	left:50%;
	top:50%;
	width:30px;
	height:30px;
	margin-top:-19px;
	margin-left:-19px;
	border:4px solid #f3f3f3;
	border-top:4px solid #e30613;
	border-radius:50%;
	-webkit-animation: spin 1s linear infinite; /* Safari */
	animation: spin 1s linear infinite;
}

.bouton a{
	display:inline-block;
	width:240px;
    max-width:100%;
	height:50px;
	margin:0;
	padding:0;
	color:#fff;
	font-size:24px;
	line-height:44px;
	text-align:center;
	text-decoration:none;
	background-color:#4f2170;
	border:2px solid #fff;
    border-radius:25px;
	cursor:pointer;
	-webkit-transition:all 0.3s; /* Chrome, Safari */
	-moz-transition:all 0.3s; /* Mozilla */
	-ms-transition:all 0.3s; /* IE */
	-o-transition:all 0.3s; /* Opéra */
	transition:all 0.3s;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
    box-shadow: 0px 5px 13px 0px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0px 5px 13px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 5px 13px 0px rgba(0,0,0,0.5);
}

.bouton a:hover{
	color:#4f2170;
	background-color:#fff;
}

.ui-autocomplete{
    display:none;
    z-index:1000;
    position:absolute;
    top:100%;
    left:0;
    float:left;
    min-width:200px; 
	max-height:300px;  
    padding:0;
    margin:0 0 10px 25px;
    list-style:none;
	border:1px solid #9e9e9e;
    background-color:#fff;
	overflow:auto;
}

.ui-menu-item{
	padding:7px 10px;
    font-size:12px;
    color:#222;
	cursor:pointer;
}

.ui-menu-item span{
    color:#000;
}

.ui-menu-item:hover{
    background-color:#eeeeee;
}

.ui-helper-hidden-accessible{
	display:none;  
}


/* HEADER */

header{
    z-index:+1;
	position:relative;
	width:100%;
	min-height:56px;
}

#icon_menu{
    z-index:+2;
	position:absolute;
	top:10px;
	right:4%;
	width:40px;
	height:auto;
	padding-top:10px;
	padding-bottom:10px;
    cursor:pointer;
	background-color:transparent;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#icon_menu .bar{
    display:block;
    width:20px;
    height:3px;
    margin:0 auto;
    background:#fff;
    border-radius:2px;
	-webkit-transition:all .7s ease;
	-moz-transition:all .7s ease;
	-ms-transition:all .7s ease;
	-o-transition:all .7s ease;
	transition:all .7s ease;
}

#icon_menu .middle{
    margin:3px auto;
}

#icon_menu.open .top{
	-webkit-transform: translateY(6px) rotateZ(45deg);
	-moz-transform: translateY(6px) rotateZ(45deg);
	-ms-transform: translateY(6px) rotateZ(45deg);
	-o-transform: translateY(6px) rotateZ(45deg);
	transform: translateY(6px) rotateZ(45deg);
}
 
#icon_menu.open .bottom{
	-webkit-transform: translateY(-6px) rotateZ(-45deg);
	-moz-transform: translateY(-6px) rotateZ(-45deg);
	-ms-transform: translateY(-6px) rotateZ(-45deg);
	-o-transform: translateY(-6px) rotateZ(-45deg);
	transform: translateY(-6px) rotateZ(-45deg);
}
 
#icon_menu.open .middle{
	width:0;
}

#menu{
	z-index:+1;
	position:absolute;
	display:none;
	top:0;
	left:0;
	width:100%;
	background-color:#481764;
	background-image: url("../img/bg_top.jpg");
	background-position: top center;
	background-repeat: no-repeat;
    background-size:1000px 480px;
}

#menu li{
	float:left;
	width:100%;
	list-style:none;
    text-align:center;
}

#menu li:first-child{
	margin-top:100px;
}

#menu li:last-child{
	margin-bottom:100px;
}

#menu li a{
	color:#fff;
	font-size:20px;
	line-height:2.5em;
	text-decoration:none;
}

#menu li a:hover{
    text-decoration:underline;
}

#menu_bg{
	z-index:1;
	display:none;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	position:fixed;
	background:rgba(0,0,0,0.7);
}


/* CONTENU */

#contenu{
	position:relative;
	width:100%;
	height:auto;
}

#bl_contenu{
	width:100%;
    max-width:600px;
	padding:0 4% 50px 4%;
	margin:0 auto;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	overflow:hidden;
}

h1{
	font-size:40px;
	line-height:1.1em;
	text-align:center;
    font-weight:normal;
}

.sstitre{
	font-size:24px;
    text-align:center;
}

.text1{
	font-size:16px;
	line-height:1.2em;
}


/* PAGE: Accueil */

#page_home{
	background-image: url("../img/bg_tophome.jpg");
	background-position: top center;
	background-repeat: no-repeat;
    background-size:1000px 500px;
}

#page_home #bt_participer{
    margin-top:340px;
	margin-bottom:43px;
}

#page_home #bl_tuto{
    clear:both;
	position:relative;
	text-align:center;
}

#page_home #bl_tuto #tuto_titre{
    font-size:24px;
    line-height:1.2em;
}

#page_home #bl_tuto .tuto_cadre{
	width:100%;
	margin:0 auto;
	margin-top:25px;
}

#page_home #bl_tuto .tuto_num{
    display:inline-block;
    width:35px;
    height:35px;
    padding-top:4px;
    color:#4f2170;
	font-size:24px;
    line-height:1em;
    background-color:#fff;
    border-radius:50%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#page_home #bl_tuto .tuto_text{
    width:100%;
    max-width:320px;
    margin:0 auto;
	margin-top:12px;
	font-size:16px;
    line-height:1.2em;
}


/* PAGE: Formulaire */

#page_coord h1{
	font-size:28px;
}

#page_coord #bl_contenu form{
    width:100%;
    margin:0 auto;
	margin-top:23px;
}

#page_coord #bl_codebarres{
    display:flex;
	float:left;
	width:100%;
}

#page_coord #icon_aide{
    width:24px;
    height:24px;
    margin-top:5px;
    margin-left:10px;
    cursor:pointer;
}

#page_coord #bl_recaptcha{
    float:left;
    display:block;
	width:100%;
    height:72px;
}

#page_coord .bl_checkbox{
	float:left;
	width:100%;
}

#page_coord #bl_checkbox1{
	margin-top:27px;
}

#page_coord #bl_checkbox2{
	margin-top:16px;
}

#page_coord #bl_checkbox3{
	margin-top:16px;
}

#page_coord #mentions{
	float:left;
    width:100%;
	margin-top:24px;
	font-size:10px;
	line-height:1.2em;
    text-align:justify;
}

#page_coord #bt_valider{
	margin-top:50px;
}


/* PAGE: Reveal */

#page_reveal{
	background-image: url("../img/bg_reveal.png"), url("../img/bg_top.jpg");
	background-position: top 66px center, top center;
	background-repeat: no-repeat, no-repeat;
    background-size:430px 430px, 1000px 480px;
}

#page_reveal #bl_contenu{
    padding-top:3px;
    padding-bottom:70px;
	text-align:center;
}

#page_reveal h1{
	font-size:28px;
}

#page_reveal #decompte{
	margin-top:55px;
}

#page_reveal #decompte p{
	font-size:150px;
}


/* PAGE: Gain */

#page_gain{
	background-image: url("../img/bg_gain.png"), url("../img/bg_top.jpg");
	background-position: top center, top center;
	background-repeat: no-repeat, no-repeat;
    background-size:430px 405px, 1000px 480px;
}

#page_gain #bl_contenu{
	padding:79px 0 50px 0;
    text-align:center;
}

#page_gain #visuel_dotation{
	width:270px;
	height:auto;
	margin-bottom:8px;
}

#page_gain #page_gain_text{
    margin:0 4%;
    font-size:16px;
    line-height:1.2em;
}


/* PAGE: Perdu */

#page_perdu #bl_contenu{
    padding-bottom:80px;
	text-align:center;
}

#page_perdu #page_perdu_text{
	margin-top:52px;
	font-size:16px;
	line-height:1.2em;
}

#page_perdu #bt_back{
	margin-top:60px;
}


/* PAGE: Dotations */

#page_dot{
	background-image: url("../img/bg_dot.png"), url("../img/bg_top.jpg");
	background-position: top 110px center, top center;
	background-repeat: no-repeat, no-repeat;
    background-size:320px 274px, 1000px 480px;
}

#page_dot #bl_contenu{
	padding:0 0 50px 0;
    text-align:center;
}

#page_dot .sstitre{
    margin-top:30px;
	font-size:23px;
}

#page_dot #visuel_dotation{
	width:270px;
	height:auto;
    margin-top:-10px;
	margin-bottom:8px;
}

#page_dot #page_dot_text{
    margin:0 4%;
    font-size:16px;
    line-height:1.2em;
}

#page_dot #bt_back{
	margin-top:46px;
}


/* PAGE: Mentions légales */

#page_text #bl_text{
	margin-top:21px;
    text-align:justify;
}

#page_text .table{
	width:100%;
	border-collapse:inherit;
}

#page_text .table td, #page_text .table th{
	border:1px solid #fff;
}

#page_text .bull{
	padding:0 10px 0 20px;
}

#page_text #bt_back{
	margin-top:37px;
}


/* PAGE: Attente et Fin */

#page_out #bl_contenu{
	text-align:center;
}

#page_out h1{
	margin:20vh 0;
	font-size:18px;
	line-height:1.2em;
	text-transform:none;
}


/* LIGHTBOX */

#lightbox{
	z-index:99;
	display:none;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	position:fixed;
	background:rgba(0,0,0,0.7);
}

#lightbox_bg{
	width:100%;
	height:100%;
}

#lightbox_load{
	position:absolute;
	left:50%; 
	top:50%;
	width:60px;
	height:60px;
	margin-top:-38px;
	margin-left:-38px;
	border:8px solid #f3f3f3;
	border-top:8px solid #481764;
	border-radius:50%;
	-webkit-animation: spin 2s linear infinite; /* Safari */
	animation: spin 2s linear infinite;
}

@-webkit-keyframes spin{ /* Safari */
	0%{-webkit-transform: rotate(0deg);}
	100%{-webkit-transform: rotate(360deg);}
}

@keyframes spin{
	0%{transform: rotate(0deg);}
	100%{transform: rotate(360deg);}
}

.lightbox_content{
	display:none;
	position:absolute;
	left:50%;
	top:50%;
	width:92%;
	height:auto;
	max-width:450px;
	max-height:90%;
	padding:3.5em 4% 1.5em 4%;
	background-color:#481764;
	background-image: url("../img/bg_lb.jpg");
	background-position: top center;
	background-repeat: no-repeat;
    background-size:cover;
	overflow:auto;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */ 
}

.lightbox_close{
	position:absolute;
	top:0;
	right:4px;  
	padding:0 6px;
	cursor:pointer; 
}

.lightbox_close .bar{
	display:block;
	width:32px;
	height:2px;
	margin:16px auto;
	background:#fff;
	border-radius:0;
}

.lightbox_close .top{
	-webkit-transform: translateY(9px) rotateZ(45deg);
	-moz-transform: translateY(9px) rotateZ(45deg);
	-ms-transform: translateY(9px) rotateZ(45deg);
	-o-transform: translateY(9px) rotateZ(45deg);
	transform: translateY(9px) rotateZ(45deg);
}

.lightbox_close .bottom{
	-webkit-transform: translateY(-9px) rotateZ(-45deg);
	-moz-transform: translateY(-9px) rotateZ(-45deg);
	-ms-transform: translateY(-9px) rotateZ(-45deg);
	-o-transform: translateY(-9px) rotateZ(-45deg);
	transform: translateY(-9px) rotateZ(-45deg);
}

.lightbox_titre{
	margin-bottom:25px;
	font-size:18px;
	line-height:1.2em;
	text-align:center;
	text-transform:uppercase;
}

.lightbox_text{
	max-width:90%;
	margin:0 auto;
	font-size:16px;
	line-height:1.2em;
	text-align:center;  
}

.lightbox_content .bouton{
	margin-top:2em;
}

.lightbox_content .bouton a{
	max-width:100%;
    margin-left:0;
    margin-right:0;
}

#lb_aide{
    padding-top:30px;
    padding-bottom:25px;
    text-align:center;
}

#lb_aide_visuel{
    display:block;
    margin:0 auto;
    width:100%;
    height:auto;
    max-width:240px;
}

#lb_aide_text{
	margin-top:3px;
    font-size:24px;
    line-height:1.2em;
}


/* FOOTER */

footer{
	position:relative;
	width:100%;
    border-top:1px solid #fff;
    overflow:hidden;
}

#footer{
	width:92%;
	margin:21px 4% 21px 4%;
    overflow:hidden;
}

footer ul{
    float:left;
    width:100%;
    text-align:center;
}

footer li{
	float:left;
	width:100%;
	list-style:none;
}

footer li a{
	font-size:14px;
	line-height:25px;
	text-decoration:none;
}

footer li a:hover{
	text-decoration:underline;
}