body{
    margin:0;
    padding:0;
    font-family:"Amatic SC";
    color:#000000;
}
@font-face {
  font-family: 'Amatic SC';
  font-style: normal;
  font-weight: normal;
  src:  url('../font/AmaticSC-Regular.svg#AmaticSC-Regular') format('svg'),
        url('../font/AmaticSC-Regular.ttf') format('truetype'),
        url('../font/AmaticSC-Regular.woff') format('woff'),
        url('../font/AmaticSC-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Amatic SC';
  font-style: normal;
  font-weight: bold;
  src:  url('../font/AmaticSC-Bold.svg#AmaticSC-Bold') format('svg'),
        url('../font/AmaticSC-Bold.ttf') format('truetype'),
        url('../font/AmaticSC-Bold.woff') format('woff'),
        url('../font/AmaticSC-Bold.woff2') format('woff2');
}

#main-wrapper{
    margin:0 auto;/* enlever pour debug */
    width:1024px;
    border:2px solid #000000;
}
.step{
    display:block;
    width:108px;
    height:16px;
    background:url("../img/progression-sprite.png") 0 0 no-repeat;
}
.step#step2 {
    background-position:0 -16px;
}
.step#step3 {
    background-position:0 -32px;
}
.step#step4 {
    background-position:0 -48px;
}
.step#step5 {
    background-position:0 -64px;
}
#main{
    left:0;
    top:0;
    position:relative;
    width:1024px;
    height:690px;
}
#top,#bottom{
    
    width:100%;
    background-color:#FFFFFF;
}
#bottom{
    position:absolute;
    bottom:0;
}
#bottom-bouton{
    margin-top: 70px;
    position: relative;
}
#top-left,#bottom-left,#bottom-middle{
    font-size:28px;
    text-align: center;
    font-size:2.5em;
    padding-left:10px;
}
#top-right{
    position:absolute;
    padding:20px 20px 0 0;
    right:20px;
    top:0;
}
#top-left{
    font-weight: bold;
}
#bottom-left{
    font-weight: bold;
    color:#998;
}
#bottom-right{
    position:absolute;
    padding-bottom:3px;
    right:12px;
    bottom:0; 
}
#bottom-left{
    position:absolute;
    padding-bottom:3px;
    left:12px;
    bottom:0; 
}
#content{
    height:590px;
    width:100%;
    position:absolute;
    overflow:hidden;

}
#suivant{
    display:block;
    height:44px;
    width:102px;
    background-image:url(../img/bouton-suivant-off.png);
    margin-left:20px;
}
#suivant.on{
    cursor:pointer;
    background-image:url(../img/bouton-suivant.png);
}
#suivant.on:hover,#suivant.on:active,#suivant.on:focus{
    background-position:0 -44px;
}
#valider{
    display:block;
    height:44px;
    width:102px;
    background-image:url(../img/bouton-valider-2.png);
    background-position:0 -88px;
    margin-left:20px;
}
#valider.on{
    cursor:pointer;
    background-position:0 0;
}
#valider.on:hover,#valider.on:active,#valider.on:focus{
    background-position:0 -44px;
}
#aide{
    display:block;
    height:44px;
    width:102px;
    background-image:url(../img/bouton-aide-off.png);
}
#aide.on{
    cursor:pointer;
    background-image:url(../img/bouton-aide.png);
}
#aide.on:hover,#aide.on:active,#aide.on:focus{
    background-position:0 -44px;
}



#retour {
    background-image: url("../img/bouton-retour.png");
    cursor:pointer;
    display: block;
    height: 44px;
    width: 105px;
}
#video{
    display:block;
    height:44px;
    width:102px;
    background-image:url(../img/bouton-video-off.png);
}
#imprimer{
    display:block;
    height:44px;
    width:102px;
    background-image:url(../img/bouton-imprimer.png);
}
#video.on{
    cursor:pointer;
    background-image:url(../img/bouton-video.png);
}
#imprimer:hover,#imprimer:active,#imprimer:focus,#retour:hover,#retour:active,#retour:focus,#video.on:hover,#video.on:active,#video.on:focus{
    background-position:0 -44px;
}

#video,#suivant,#aide,#valider,#retour,#imprimer{
    float:left;
}

#modal{
    box-sizing: border-box;
    /*background:url(../img/pop-up-510.png) no-repeat;*/
    /*width:440px;*/
    height:510px;
    display:none;
/*    padding:10px 20px;*/
/*    padding:0 22px 0 20px;*/
    z-index:1000;
}
#modal a.modalCloseImg{
	background:url("../img/common-croix.png") no-repeat; /* adjust url as required */
	width:30px;
	height:30px;
	display:inline;
	z-index:3200;
	position:absolute;
	top:10px;
	right:10px;
	cursor:pointer;
}
#modal .modalTitle{
    font-size:3em;
    font-weight:bold;
    padding:10px 50px 0 20px;
}
#modal .modalContent{
    font-size:1.6em;
    line-height:1.05em;
/*    height: 170px;*/
    overflow: hidden;
    font-weight:bold;
    text-align: justify;
    margin-bottom:10px;
    padding:0 20px 10px 20px;
}
#modal .modalContentMentions{
    font-size:1.6em;
    line-height:1.05em;
    height: 418px;
    font-weight:bold;
    text-align: left;
    padding:0 20px 10px 20px;
    overflow-y: scroll;
    width:892px;
}
#modal img{
    margin-left:20px;
}
.modalArrow{
    background:url("../img/step2-fleche-longue.png") no-repeat; /* adjust url as required */
    /*background:url("../img/step2-fleche.png") no-repeat; adjust url as required */
    width:518px;
    height:20px;
    position:absolute;
    z-index:999;
}
.modal-overlay{
    background: url("../img/bg_flat_0_000000_40x100.png") repeat-x scroll 50% 50% #000;
    opacity: 0.6;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index:900;
}
#modal .modalButton{
    margin-left:20px;
}
#btn-demarrer:hover,#btn-demarrer:active,#btn-demarrer:focus{background-position:0 -80px;}
#btn-passeralactivitesuivante:hover,#btn-passeralactivitesuivante:active,#btn-passeralactivitesuivante:focus{background-position:0 -64px;}
#btn-passerausuivant:hover,#btn-passerausuivantactive:active,#btn-passerausuivant:focus,#btn-suivant:hover,#btn-suivant:active,#btn-suivant:focus{background-position:0 -44px;}


#slideshow-wrapper{
    background:url("../img/step2-slideshow-bg.png") no-repeat; /* adjust url as required */
    width:1014px;
    height:590px;
    position:absolute;
    left:0;
    top:0;
    z-index:1000;
/*    display:none;*/
}
#mentions-legales{
    font-size:1.736em;
    text-align:center;
}