/* Developped By Toxicode */
/* ------------- reset css ------------- */
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%;
  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: 1;
}
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;
}

body{
  background-color: black;
  font-family: "Istok Web", "Arial";
}

/* ------------- helpers ------------- */

.clear {
  clear: both;
}

/* ------------- main --------------*/

#main-container {
  position: relative;
  margin: 0 auto;
  width: 990px;
  height: 650px;
  overflow: hidden;
}

#main-container h1, 
#main-container h2{
  display: none;
}


#loader {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 990px;
  height: 650px;
  background: url(../images/loader.jpg);
  background-color: #072f63;
  z-index: 999999;
}

#loader .load-text {
  position: absolute;
  top: 570px;
  color: #D9B464;
  left: 42%;
  font-size: 32px;
}

.texts {
  display: none;
}
/* ------------- header --------------*/

#main-header {
  width: 100%;
  height: 10%;
  z-index: 1000;
}

#main-navbar h3{
  display: none;
}

#main-navbar {
  position: relative;
  margin: 0 auto;
  top: 5px;
  width: 470px;
  height: 31px;
  background: url(../images/bandeau-or.png);
  z-index: 1000;
}
#main-navbar li {
  position: relative;
  float: left;
  top: -2px;

}

#main-navbar li .icones {
  width: 36px;
  height: 36px;
}

#main-navbar li .title {
  position: absolute;
  width: 20em;
  left: -15px;
  top: 40px;
  display: none;
  color: #F0DC86;
  font-weight: bold;
  text-shadow: 0px 1px 0px #666; 
}

#main-navbar li.selected .title {
  display: block;
}

#main-navbar li[data-page="1"].selected .title img {
  position: relative;
  left: 3px;
}

#main-navbar li[data-page="2"].selected .title img {
  position: relative;
  left: -24px;
}

#main-navbar li[data-page="3"].selected .title img {
  position: relative;
  left: -14px;
}

#main-navbar li[data-page="4"].selected .title img {
  position: relative;
  left: -39px;
}

#main-navbar li[data-page="5"].selected .title img {
  position: relative;
  left: 0px;
}

#main-navbar li[data-page="6"].selected .title img {
  position: relative;
  left: -39px;
}

#main-navbar li[data-page="7"].selected .title img {
  position: relative;
  left: 6px;
}

#main-navbar li:last-child .icones{
  margin-right: 0;
}

#main-navbar li[data-page="1"] .icones, #main-navbar li[data-page="7"] .icones{
  background: url(../images/icones/icone-step17-noactive.png);
  margin-left: 10px;
}

#main-navbar li[data-page="2"] .icones {
  background: url(../images/icones/icone-step2-noactive.png);
  margin-left: 30px;
}

#main-navbar li[data-page="3"] .icones {
  background: url(../images/icones/icone-step3-noactive.png);
  margin-left: 30px;
}

#main-navbar li[data-page="4"] .icones {
  background: url(../images/icones/icone-step4-noactive.png);
  margin-left: 32px;
}

#main-navbar li[data-page="5"] .icones {
  background: url(../images/icones/icone-step5-noactive.png);
  margin-left: 32px;
}

#main-navbar li[data-page="6"] .icones {
  background: url(../images/icones/icone-step6-noactive.png);
  margin: 0 24px 0 34px;
}


#main-navbar li[data-page="1"].noallowed .icones, #main-navbar li[data-page="7"].noallowed .icones{
  background: url(../images/icones/icone-step17-noallowed.png);
}

#main-navbar li[data-page="2"].noallowed .icones{
  background: url(../images/icones/icone-step2-noallowed.png);
}

#main-navbar li[data-page="3"].noallowed .icones{
  background: url(../images/icones/icone-step3-noallowed.png);
}

#main-navbar li[data-page="4"].noallowed .icones{
  background: url(../images/icones/icone-step4-noallowed.png);
}

#main-navbar li[data-page="5"].noallowed .icones{
  background: url(../images/icones/icone-step5-noallowed.png);
}

#main-navbar li[data-page="6"].noallowed .icones{
  background: url(../images/icones/icone-step6-noallowed.png);
}

#main-navbar li[data-page="1"].selected .icones, #main-navbar li[data-page="7"].selected .icones{
  background: url(../images/icones/icone-step17-active.png);
}

#main-navbar li[data-page="2"].selected .icones{
  background: url(../images/icones/icone-step2-active.png);
}

#main-navbar li[data-page="3"].selected .icones{
  background: url(../images/icones/icone-step3-active.png);
}

#main-navbar li[data-page="4"].selected .icones{
  background: url(../images/icones/icone-step4-active.png);
}

#main-navbar li[data-page="5"].selected .icones{
  background: url(../images/icones/icone-step5-active.png);
}

#main-navbar li[data-page="6"].selected .icones{
  background: url(../images/icones/icone-step6-active.png);
}

/* ------------- content --------------*/
#main-content {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.cloud-container{
  position: absolute;
  top: 0;
  left: -1221px;
  width: 2442px;
}

.img-bg.cloud {
  position: relative;
  float: left;
}

.volute {
  position: absolute;
  width: 30%;
  height: 10%;
  z-index: 0;
}

.volute1{
  top: 300px;
  left: 191px;
}

.volute2{
  top: 300px;
  left: 391px;
}

.step-volute {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

#main-content .step{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
}

/* ------------- step 1 --------------*/

.page-container {
  width: 100%;
  height: 100%;
}

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

.img-bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.intro1 img {
  z-index: -1;
}
.intro1 .img-petit-prince {
  position: absolute;
  top: 295px;
  left: 789px;
}

.next-button{
  z-index: 2;
}

.intro1 .next-button {
  position: absolute;
  top : 572px;
  left: 902px;
  height: 47px;
  width: 48px;
  background: url(../images/play-button-intro.png);
  background-position: 0 0;
  cursor: pointer;
}

.intro1 .next-button:hover {
  background-position: 48px 0;
}

.intro1 .title {
  position: absolute;
  top: 44px;
  left: 578px;
  width: 344px;
  height: 177px;
}

.intro1 .sub-title{
  position: absolute;
  top: 140px;
  left: 605px;
}

.skip-video {
  position: absolute;
  top : 572px;
  left: 828px;
  height: 46px;
  width: 123px;
  background: url(../images/skip-video.png);
  background-position: 0 0;
  cursor: pointer;
  z-index: 1002;
}

.skip-video:hover {
  background-position: 123px 0;
}

.dialogs-container-1 {
  position: absolute;
  top: 573px;
  left: 4px;
}

.dialogs-container-1 .petit_prince .sentence-arrow{
  left: 76%;
}

.img-foehn-intro2 {
  position: absolute;
  top: 228px;
  left: 22px;
}

.img-petit-prince-intro2 {
  position: absolute;
  top : 325px;
  left: 125px;
}

/* ------------- step 2 --------------*/
#step2 {
  width: 100%;
  height: 100%;
}

.img-pp-renard {
  position: absolute;
  top: 458px;
  left: 6px;
}

.dialogs-container {
  position: absolute;
  top: 573px;
  left: 12px;
  max-width: 60%;
  z-index: 2000;
}

.dialogs-container-2 .petit_prince .sentence-arrow{
  left: 32%;
}

.dialogs-container-2 .renard .sentence-arrow{
  left: 65%;
}

/* ------------- player video --------------*/

.video-player {
  position: absolute;
  width: 81%;
  left: 20px;
  bottom: 41px;
  z-index: 1001;
}

.video-play {
  height: 20px;
  width: 17px;
  margin-right: 15px;
  float: left;
  background: url(../images/player/play.png);
  cursor: pointer;
}

.video-pause {
  height: 20px;
  width: 17px;
  margin-right: 15px;
  float: left;
  background: url(../images/player/pause.png);
  cursor: pointer;
}

.video-stop {
  height: 20px;
  width: 20px;
  margin-right: 13px;
  float: left;
  background: url(../images/player/stop.png);
  cursor: pointer;
}

.video-progress {
  position: relative;
  margin-top: 1px;
  float: left;
  width: 728px;
  height: 18px;
  background: url(../images/player/base.png);
}
.video-seek-bar {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 18px;
  cursor: pointer;
}

.video-play-bar {
  position: relative;
  border-radius: 5px;
  top: 3px;
  left: 3px;
  height: 11px;
  background: #204b73;
  min-width: 0.5%;
  max-width: 99%;
  z-index: 99999;
}
/* ------------- video 1 --------------*/

#video-step1, #video-conclusion {
  position: absolute;
  top: -11px;
  left: 0;
  z-index: 1000;
}
/* ------------- qcm 1 --------------*/

#qcm1 .choice {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}

#qcm1 .choice-name {
  color: #ebd063;
  text-shadow: 1.5px 1px 2px #444;
  position: relative;
  left: 0.5em;
}

#qcm1 .choice-sol .choice-name {
  left: 0.8em;
}

#qcm1 .choice-glace .choice-name,
#qcm1 .choice-soleil .choice-name {
  left: 0.4em;
}

#qcm1 .choice-foret .choice-name {
  top: -2em;
  left: 3.5em;
}

#qcm1 .choice.select .choice-name {
  color: #0e2841;
  text-shadow: 1.5px 1px 2px #feec9c;
}


#qcm1 .choice-explain {
  position: absolute;
  width: 260px;
  left: -85px;
  top: -71px;
  text-align: center;
  color: #1e4a72;
  display: none;
  font-size: 14px;
}

#qcm1 .choice-soleil .choice-explain {
  top: 0;
  left: 56px;
}

#qcm1 .choice-sol .choice-explain, 
#qcm1 .choice-foret .choice-explain {
  color : #feec9c;
}

#qcm1 .choice-sol .choice-explain {
  top: -82px;
  left: -100px;
}
#qcm1 .choice-glace .choice-explain {
  width: 200px;
  left: -76px;
  top: -50px;
}

#qcm1 .choice-vent .choice-explain {
  top: -104px;
  left: -68px;
  padding: 0.2em 0em !important;
  text-align: center;
}
#qcm1 img {
  cursor: pointer;
}

#qcm1 .choice.select img{
  background: url(../images/zone-active.png);
}

#qcm1 img:hover{
  background: url(../images/zone-active.png);
}

.mask-transparent {
  position: absolute;
  top: 0;
  left:0;
  width: 100%;
  height: 100%;
  z-index: 99999;
}

.dragndrop-1 .restart-qcm{
  top: 343px;
  left: 571px;
}
.restart-qcm {
  position: absolute;
  top: 573px;
  left: 830px;
  width: 121px;
  height: 47px;
  background: url(../images/restart.png);
  background-position: 0 0;
  cursor: pointer;
}

.restart-qcm:hover{
  background-position: 121px 0;
}

#qcm1 .btnNext, .dndbtnNext, .finish {
  position: absolute;
  height: 47px;
  width: 121px;
  top: 573px;
  left: 830px;
  background: url(../images/continue.png);
  background-position: 0 0;
  cursor: pointer;
}

.finish{
  top: 573px;
  left: 183px;
  z-index: 9000;
}

.zonesToDrop .finish {
  left: 864px;
}

.dndbtnNext {
  display: none;
  z-index: 2;
}

#qcm1 .btnNext:hover, .dndbtnNext:hover, .finish:hover {
  background-position: 121px 0;
}

.dragndrop-1 .infos{
  position: absolute;
  width: 340px;
  color: #1e4a72;
  display: none;
  top: 178px;
  left: 20px;
}

.dragndrop-1 .infos h3 {
  font-weight: bold;
}

.dragndrop-1 .infos.info-explains {
  top: 203px;
  left: 54px;
}

/* ------------- step 3 --------------*/
.pageStep3 .img-pp-renard-step3 {
  position: absolute;
  width: 222px;
  height: 479px;
  top: 160px;
  left: 0;
}

.dialogs-container-3 .petit_prince .sentence-arrow{
  left: 20%;
}

.dialogs-container-3 .renard .sentence-arrow{
  left: 28%;
}

/* --------------- qcm 2, qcm 3 ----------------- */
.instruction-2 {
  z-index: 1000;
}

#qcm2.qcm-popup,
#qcm3.qcm-popup {
  position: relative;
  top : 146px;
  left: 30px;
  margin: 0 auto;
  padding-left: 40px;
  width: 702px;
  height: 378px;
  background: url(../images/pop-up-qcm.png);
  background-repeat: no-repeat;
  z-index: 2;
}

#qcm2 .choice,
#qcm3 .choice{
  position: relative;
  width: 189px;
  float: left;
  margin: 14% 26px 0 0;
  cursor: pointer;
}

#qcm3 .choice {
  margin-top: 12%;
}

#qcm2 .choice-name,
#qcm3 .choice-name{
  display: none;
}

#qcm2 .title,
#qcm3 .title,
.dragndrop-1 .title {
  position: absolute;
  top: 0.35em;
  left: 10px;
  color: #fde172;
  text-shadow : 1px 1px 1px #666;
  font-size: 18px;
  font-weight: 700;
}

.pageStep3 .dragndrop-1 .title {
  top: 0.3em;
  left: 10px;
  
}

.pageStep3 .dragndrop-1 .explains {
  top: 2.25em;
  line-height: 1.2em;
}



#qcm2 .explains,
#qcm3 .explains,
.dragndrop-1 .explains {
  position: absolute;
  top: 1.9em;
  left: 10px;
  max-width: 84%;
  font-size: 14px;
  font-weight: 500;
  font-family: "Istok Web", "Arial";
  color: #173857;
}

.step #qcm3 .explains {
  top : 2em;
  line-height: 0.95em;
}

.btnNext{
  z-index: 2;
}

#qcm2 .question .explains {
  top: 2.2em;
  line-height: 1.2em;
}

#qcm2 .btnNext,
#qcm3 .btnNext {
  position: absolute;
  top: 324px;
  left: 271px;
  width: 156px;
  height: 47px;
  background-position: 0 0;
  cursor: pointer;
}

#qcm2 .btnNext {
  background: url(../images/btn-choice-helix.png);
}

#qcm3 .btnNext {
  background: url(../images/btn-choice-mat.png);
}

#qcm2 .btnNext:hover,
#qcm3 .btnNext:hover{
  background-position: 156px 0;
}


.comeback{
  position: absolute;
  bottom: 58px;
  left: 3px;
  width: 71px;
  height: 46px;
  background: url(../images/comeback.png);
  background-position: 0 0;
  cursor: pointer;
  z-index: 9999;
}

.comeback:hover {
  background-position: 71px 0;
}

#qcm2 .select,
#qcm3 .select{
  position: absolute;
  bottom: 12px;
  left: 46%;
  width: 30px;
  height: 29px;
  background: url(../images/select-step3.png);
  display: none;
}

/* ------------- dragndrop 1 --------------*/

.dragndrop-1 {
  position: relative;
  width: 703px;
  height: 399px;
  top : 126px;
  left: 25px;
  margin: 0 auto;
  background: url(../images/dragndrop-1.png);
  z-index: 1;
}

.dragndrop-1 .choice{
  position: absolute;
  top: 100px;
  z-index: 2;
}

.dragndrop-1 .zone {
  height: 50px;
  width: 50px;
  position: absolute;
  z-index: 1000;
}

.dragndrop-1 .choice-hover{
  
}

.dragndrop-1 .choicesToDrag {
  position: absolute;
  top: 150px;
  left: 20px;
  height: 80%;
  width: 50%;
}

.dragndrop-1 .zonesToDrop {
  position: absolute;
  top: 178px;
  left: 377px;
}

.dragndrop-1 .zone img {
  display: none;
}

.dnd-explains {
  position: absolute;
  top: 573px;
  left: 12px;
  max-width: 50%;
}

.dnd-explains .sentence-arrow{
  left: 55px;
}

.dragndrop-1 .timer{
  width: 62px;
  height: 62px;
  position: absolute;
  top: 5px;
  right: 5px;
  background: url(../images/timer.png); 
}

.dragndrop-1 .timer .time {
  color: #F0DC86;
  position: relative;
  top: 0.70em;
  margin: 0 auto;
  font-size: 1.7em;
  text-align: center;
}

.dragndrop-1 .mat{
  position: absolute;
  top: 222px;
  left: 480px;
}

.dragndrop-1 .helice{
  position: absolute;
  top: 71px;
  left: 360px;
}


.dragndrop-1 .mat2{
  top: 235px;
}

.dragndrop-1 .mat1{
  top: 238px;
  left: 502px;
}

.dragndrop-1 .nacelle{
  position: absolute;
  top: 170px;
  left: 432px;
}

.mask {
  position: absolute;
  cursor: pointer;
  z-index: 9999999;
}

.mask-nacelle {
  top: 179px;
  left: 445px;
  width: 176px;
  height: 70px;
}

.mask-helix {
  top: 73px;
  left: 367px;
  width: 100px;
  height: 321px;
  z-index: 9999998;
}

.mask-matt {
  top: 250px;
  left: 491px;
  width: 58px;
  height: 145px;
}

.mask-frein {
  top: 190px;
  left: 528px;
  width: 20px;
  height: 52px;
}

.mask-multiplicateur {
  top: 189px;
  left: 468px;
  width: 59px;
  height: 53px;
}

.mask-generateur {
  top: 200px;
  left: 549px;
  width: 53px;
  height: 40px;
}

.label {
  position: absolute;
  top: 0;
  left: 0;
  color : #24374C;
  width: 150px;
  font-weight: bold;
  font-size : 0.8em;
  display : none;
}


/* ------------- step 4 --------------*/
.instruction-3 {
  width: 200px;
}

.dialogs-container-4 .foehn .sentence-arrow{
  left: 23%;
}

.pageStep5 .dnd-explains.dnd-explains-3 {
  left: auto;
  right: 50px;
}

.pageStep5 .dnd-explains.dnd-explains-4 {
  left: auto;
  right: 50px;
}

/* ------------- drag n drod 2 --------------*/

.dragndrop-2 .choicesToDrag {
  position: absolute;
  top: 201px;
  left: 285px;
  height: 48px;
  width: 47px;
  z-index: 3000;
}

.choicesToDrag.with-mat1 {
  top: 222px;
  left: 256px;
}

.choicesToDrag.with-mat2 {
  top: 184px;
  left: 254px;
}

.choicesToDrag.with-mat3 {
  top: 136px;
  left: 252px;
}

.dragndrop-2 .zonesToDrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.dragndrop-2 .zone {
  position: absolute;
  background: url(../images/zone-paysage.png);
  background-repeat: no-repeat;
}

.dragndrop-2 .zone.select {
  background-image : none;
}

.dragndrop-2 .zone.choice-hover{
  background: url(../images/zone-paysage-hover.png);
}

.drag{
  position: absolute;
  top : 0;
  left: 0;
  width: 30px;
  height: 30px;
}

.construct {
  position: absolute;
  top: 574px;
  left: 811px;
  width: 30px;
  height: 30px;
}



.drag .mat-drop,
.construct .mat-drop,
.choice .mat-drop {
  position: absolute;
  top: -150px;
  left: -10px;
  cursor: pointer;
}



.drag .helice-drop,
.construct .helice-drop,
.choice .helice-drop{
  position: absolute;
  top: -225px;
  left: -80px;
  height: 180px;
  width: 200px;
  cursor: pointer;
}

.step .construct .mat-drop, 
.step .construct .helice-drop, 
.step .construct{
  cursor: auto;
}

.with-mat2 .mat-drop{
  top : -100px;
}

.with-mat2 .helice-drop{
  top : -175px;
}

.with-mat3 .mat-drop{
  top : -50px;

}
.with-mat3 .helice-drop{
  top : -125px;
  left: -80px;
}

.zone-foret .drag {
  top: 50px;
  left: 10px;
}

.zone-cite .drag {
  top: 60px;
  left: 10px;
}

.choice{
  cursor: pointer;
}
/* ------------- step 5 --------------*/

.pageStep5 .perso {
  position: absolute;
  bottom: 60px;
  right: 5px;  
}

.pageStep5 .img-pp{
  bottom: 100px;
  left: 778px;
}

.pageStep5 .img-foehn{
  bottom: 110px;
  left: 690px;
}

.pageStep5 .speaker.foehn .sentence-arrow{
  left: 52%;
}

.levier {
  position: absolute;
}

.base-levier {
  z-index: -1;
}

.levier-container{
  position: absolute;
  bottom: 43px;
  right: 75px;
  background-repeat: no-repeat;
  height: 232px;
}
.img-levier-base  {
  left: 0px;
  bottom: 0px;
}

.levier-pos-0 {
  width: 75px;
  height: 102px;
  background: url(../images/levier-pos-0.png);
  z-index: 1;
  left: 43px;
  bottom: 57px;
  z-index: 9001;
}


.levier.noselect {
  opacity: 0;
  cursor: pointer;
}

.levier-pos-1 {
  width: 32px;
  height: 121px;
  left: 100px;
  bottom: 59px;
  background: url(../images/levier-pos-1.png);
  z-index: 9002;
}

.levier-pos-2 {
  width: 39px;
  height: 120px;
  left: 136px;
  bottom: 58px;
  background: url(../images/levier-pos-2.png);
  z-index: 9004;
}

.levier-pos-3 {
  width: 68px;
  height: 102px;
  left: 153px;
  bottom: 57px;
  background: url(../images/levier-pos-3.png);
  z-index: 9003;
}

.img-jauge {
  position: absolute;
  bottom: 10px;
  left: 0px;
  width: 183px;
  height: 180px;
  background: url(../images/jauge-0.png);
}

.next-speaker{
  z-index: 2;
}

.pageStep5 .next-speaker{
  left:  915px;
}

.dialogs-container-5  {
  left: auto;
  right: 81px;
}

.dialogs-container-5 .gouverneur .sentence-arrow {
  left: auto;
  right: 3%;
}

.pageStep5 .img-pp2 {
  position: absolute;
  top: 300px;
  right: 0;
}

.pageStep5 .eolienne{
  position: absolute;
  width: 77px;
  height: 80px;
}

.pageStep5 .dnd-explains {
  left: auto;
  right: 131px;
}

.pageStep5 .dnd-explains .sentence-arrow{
  left: auto;
  right: 5%;
}

.eolienne .mat {
  position: absolute;
  width: 62px;
  height: 217px;
  top: -100px;
  left: -10px;
  background-repeat: no-repeat;
}

.eolienne .mat3 {
  top: 0px;
  left: -10px;
}

.eolienne.cite .mat2, 
.eolienne.colline .mat2,
.eolienne.foret .mat2  {
  top: -30px;
  left: 10px;
}

.eolienne.coline .mat1 {
  top: -150px;
}

.eolienne.cite .mat3 {
  top: 8px;
  left: -2px;
}

.eolienne.coline .mat3 {
  top: -45px;
}

.eolienne .helice {
  width: 200px;
  height: 177px;
}

.overlay {
  color: #fde172;
  font-size: 14px;
  font-family: "Istok Web", "Arial";
  text-shadow: 1px 1px 1px #666;
}

.pageStep5 .overlay-levier{
  position: absolute;
  text-align: center;
  bottom: 50px;
  right: 105px;
}

.overlay-jauge{
  position: absolute;
  bottom: 170px;
  text-align: center;
  min-width: 183px;
  text-shadow: 2px 2px 1px #333;
}

.overlay-jauge.start {
  left: 10px;
}

.change-btn, .show-solution{
  position: absolute;
  height: 47px;
  width: 121px;
  top: 573px;
  cursor: pointer;
  display: none;
}

.change-btn img{
  position: absolute;
  right: -15px;
  top: 5px;
  z-index: 1000;
}
.change-position {
  background: url(../images/change-position.png);
  left: 573px;
  background-position: 0 0;
}

.change-position:hover {
  background-position: 121px 0;
}

.change-matt {
  background: url(../images/change-matt.png);
  left: 433px;
}

.change-matt:hover {
  background-position: 121px 0;
}

.change-helix {
  background: url(../images/change-helix.png);
  left: 291px;
}

.change-helix:hover{
  background-position: 121px 0;
}


.show-solution {
  background: url(../images/show-solution.png);
  left: 92px;
  top: 180px;
}

.show-solution:hover {
  background-position: 121px 0;
}

.pageStep5 .explains-solution {
  position: absolute;
  width: 250px;
  background: rgba(255, 255, 255, 0.7);
  display: none;
}

.explains-solution.helix{
  left: 475px;
  top: 96px;
}

.explains-solution.helix .arrow,
.explains-solution.matt .arrow,
.explains-solution.position .arrow {
  position: absolute;
  right: -25px;
  top: 29px; 
  width: 23px;
  height: 17px;
  background: url(../images/arrow-2.png);
}

.explains-solution.matt .arrow {
  right: -50px;
}

.explains-solution.position .arrow {
  background: url(../images/arrow-1.png);
  width: 19px;
  height: 23px;
  top: -38px;
  right: 70px;
}

.explains-solution.matt{
  left: 475px;
  top: 205px;
}

.explains-solution.position{
  right: 5px;
  top: 280px;
  width: 300px;
  z-index: 9999999;
}


.pageStep5 .instructions.instruction-4 {
  top: 55px;
}

/* ------------- step 6 --------------*/

.pageStep6 .img-foehn {
  position: absolute;
  right: 120px;
  top: 240px;
}



.pageStep6 .img-pp {
  position: absolute;
  right: 23px;
  top: 335px;
  z-index: 10001;
}

.pageStep6 .speaker.foehn {
  position: relative;
  left: 302px;
}

.pageStep6 .speaker.petit-prince .sentence-arrow {
  left: 93%;
}

.pageStep6 .speaker.petit-prince {
  position: relative;
  left: 367px;
}

.pageStep6 .speaker.foehn .sentence-arrow {
  left: 90%;
}

.pageStep6 .qcm-popup {
  position: relative;
  left: 20px;
  top: 100px;
  z-index: 10000;
}

.pageStep6 .test-solution {
  background: url(../images/test-solution.png);
  width: 156px;
  height: 47px;
  position: absolute;
  bottom: 5px;
  margin: 0 34.7%;
  cursor: pointer;
}

.pageStep6 .test-solution:hover {
  background-position: 156px 0;
}

.pageStep6 .qcm-popup .explain1 {
  width: 463px;
  height: 322px;
  position: absolute;
  top: 33px;
  left: 175px;
}

.pageStep6 .instruction-5 {
  display: none;
}

.pageStep6 .second-eolienne {
  top: 300px;
  left: 300px;
}

.pageStep6 .next-speaker-step6 {
  left: 915px;
}

/* ------------- conclusion ------------------*/
.conclusion .skip-video.reload {
  background: url(../images/reload.png);
  width: 121px;
  height: 47px;
  top : 572px;
  left: 831px;
}

.conclusion .skip-video.reload:hover{
  background-position: 121px 0;
}

.conclusion .dialogs-container-8{
  top: 570px;
  left: 410px;
}
/* ------------- dialogs common --------------*/
.sentence, .explains-solution, #qcm1 .choice-vent.select .choice-explain {
  padding: 0.5em 1em;
  background: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  color : #0e2841;
  -moz-box-shadow: 1px 1px 2px #153c60;
  -webkit-box-shadow: 1px 1px 2px #153c60;
  box-shadow: 1px 1px 3px #153c60;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  font-weight: 500;
  line-height: 1.2em;
  font-family: "Istok Web", "Arial";
}

.dialogs-container {
  position: absolute;
  max-width: 60%;
  z-index: 2000;
}

.sentence-arrow {
  position: absolute;
  top: -18px;
  left: 10%;
  height: 18px;
  width: 13px;
  background: url(../images/sentence-arrow.png);
}

.next-speaker {
  position: absolute;
  top : 572px;
  left: 880px;
  width: 67px;
  height: 47px;
  background: url(../images/next-speaker.png);
  cursor: pointer;
  z-index: 1000;
}

.next-speaker:hover {
  background-position: 67px 0;
}


/* ------------- instructions --------------*/
.instructions {
  background-color: #18446b;
  color: #fde172;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  -moz-box-shadow: -2px -2px 0px #fde172;
  -webkit-box-shadow: -2px -2px 0px #fde172;
  box-shadow: -2px -2px 3px #fde172;
  border-right: 2px solid  #0e2a44;
  border-bottom: 2px solid  #0e2a44;
  max-width: 30%;
  position: absolute;
  left: 6px;
  top: 72px;
  padding: 10px;
  font-size: 14px;
  font-family: "Istok Web", "Arial";
  font-weight: 400;
  line-height: 1.25em;
  text-shadow: 1px 1px 1px #666;
}


.imready {
  position: absolute;
  width: 67px;
  height: 48px;
  top : 572px;
  left: 880px;
  background: url(../images/imready.png);
  z-index: 2;
  cursor: pointer;
}

.imready:hover {
  background-position: 67px 0;
}
/* ------------- footer --------------*/

#main-footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 22px;
  background: url(../images/background-footer.png);
  z-index: 1002;
}

#sound-control{
  position: absolute;
  top: 5px;
  right: 15px;
  width: 19px;
  height: 16px;
  background: url(../images/icones/sound.png);
  background-repeat: no-repeat;
  cursor: pointer;
}

#sound-control.mute {
  background: url(../images/icones/no-sound.png);
  background-repeat: no-repeat;
}

#credits {
  position: absolute;
  top: -3px;
  left : 0px;
  width: 86px;
  height: 34px;
  background: url(../images/icones/credit.png);
  background-repeat: no-repeat;
  cursor: pointer;
}

#credits:hover, #credits.display {
  background: url(../images/icones/credit-click.png);
}

.credit-container {
  position: absolute;
  top: 50px;
  left: 110px;
  height: 557px;
  width: 760px;
  background: url(../images/credit-popup.png);
  display: none;
  z-index: 999999;
}

.credit-container .close-credit {
  background: url(../images/close.png);
  position: absolute;
  width: 85px;
  height: 48px;
  right: 5px;
  top: 5px;
  background-position: 0 0;
  cursor: pointer;
}

.credit-container .close-credit:hover {
  background-position: 85px 0;
}

.credit-container .title {
  position: absolute;
  color: #fde172;
  top: 8px;
  left: 10px;
}

.credit-container .content {
  margin: 75px 0 0 20px;
  color: white;
  font-size: 13px;
}

.credit-container .content div {
  margin-bottom: 30px;
}

.credit-container h3 {
  margin-bottom: 5px;
  font-weight: 400;
  font-size: 14px;
  color: #f1dd86;
}

.credit-container .content .ludo-credits{
  margin: 65px 0;
}

.credit-container .logo{
  cursor: pointer;
}

.credit-container .ftv-logo {
  margin-bottom: 49px;
}

.credit-container .ludo-logo {
  margin-bottom: 12px;
  margin-left: 10px;
}

.credit-container .logo-container {
  position: absolute;
  left: 50%;
}