/*USAGE : .triangle(down, 3em, 5px, #fff);*/
::selection {
  background: transparent;
  -webkit-appearance: none;
}
:focus {
  outline: none;
}
html {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
body {
  width: 100%;
  height: 100%;
  background-color: #e8e8e8;
  font-family: 'Yanone Kaffeesatz', sans-serif;
		
}
a {
  outline: none !important;
}
#viewport {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
}
#content {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: none;
}
#content #bibliographie {
  display: none;
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: #ffffff;
  width: 100%;
  height: 573px;
  z-index: 9999999999999;
  padding: 200px 50px;
  font-size: 20px;
}
#content #bibliographie li {
  margin-bottom: 20px;
}
#content #bibliographie img {
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
}
#content .voileContent {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: absolute;
  background-color: #e8e8e8;
}
#content .voileContent.active {
  cursor: pointer;
}
#wrapper {
  z-index: 10;
}
.btn-carre {
  -webkit-transition: color 0.25s ease, background 0.25s ease;
  -moz-transition: color 0.25s ease, background 0.25s ease;
  -ms-transition: color 0.25s ease, background 0.25s ease;
  -o-transition: color 0.25s ease, background 0.25s ease;
  transition: color 0.25s ease, background 0.25s ease;
}
.btn_action,
.btn_action2 {
  font-family: "Open Sans", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  text-decoration: none;
  color: #ff9900;
  line-height: 50px;
  padding-right: 60px;
  display: inline-block;
  background: transparent url(img/play_orange.png) no-repeat right center;
}
.btn_action:hover,
.btn_action2:hover {
  text-decoration: underline;
}
#playAreaIpad {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5) url(bigplay.png) no-repeat center 50%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  z-index: 999999999;
}
video:focus {
  outline-color: transparent !important;
  outline: none !important;
}
/* =============== Avertissement vieux navigateur ===== */
#nav_warning {
  font-size: 20px;
  color: #fff;
  padding: 10px;
  text-align: center;
  display: none;
}
#nav_warning span a {
  color: #cf5d29;
}
html #nav_warning span.ipad,
html.js #nav_warning {
  display: none;
}
html.js.ie6 #nav_warning,
html.js.ie7 #nav_warning {
  display: block;
}
/******************* LOADER ********************/
#voilePreload {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9999999;
  background: #dbdbdb;
}
#loader {
  position: absolute;
  top: 50%;
  left: 50%;
  /*display: none;*/
  z-index: 99999999;
  /*-moz-transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	-o-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);*/
  width: 90px;
  /*height: 90px;
	margin: -45px 0 0 -45px;*/
  height: 140px;
  margin: -70px 0 0 -45px;
  text-align: center;
}
#loader #loadingText {
  color: #fff;
  font-size: 20px;
  font-family: 'Yanone Kaffeesatz', sans-serif;
  display: inline-block;
  margin-top: 25px;
}
#loader.preload {
  top: 70%;
  display: block;
}
.windows8Loader {
  position: relative;
  width: 90px;
  height: 90px;
}
.ie8 .windows8Loader {
  display: none;
}
.windows8Loader .wBall {
  position: absolute;
  width: 86px;
  height: 86px;
  opacity: 0;
  -moz-transform: rotate(225deg);
  -moz-animation: orbit 5.5s infinite;
  -webkit-transform: rotate(225deg);
  -webkit-animation: orbit 5.5s infinite;
  -ms-transform: rotate(225deg);
  -ms-animation: orbit 5.5s infinite;
  -o-transform: rotate(225deg);
  -o-animation: orbit 5.5s infinite;
  transform: rotate(225deg);
  animation: orbit 5.5s infinite;
}
.windows8Loader .wBall .wInnerBall {
  position: absolute;
  width: 11px;
  height: 11px;
  background: #FFFFFF;
  left: 0px;
  top: 0px;
  -moz-border-radius: 11px;
  -webkit-border-radius: 11px;
  -ms-border-radius: 11px;
  -o-border-radius: 11px;
  border-radius: 11px;
}
.windows8Loader #wBall_1 {
  -moz-animation-delay: 1.2s;
  -webkit-animation-delay: 1.2s;
  -ms-animation-delay: 1.2s;
  -o-animation-delay: 1.2s;
  animation-delay: 1.2s;
}
.windows8Loader #wBall_2 {
  -moz-animation-delay: 0.24s;
  -webkit-animation-delay: 0.24s;
  -ms-animation-delay: 0.24s;
  -o-animation-delay: 0.24s;
  animation-delay: 0.24s;
}
.windows8Loader #wBall_3 {
  -moz-animation-delay: 0.48s;
  -webkit-animation-delay: 0.48s;
  -ms-animation-delay: 0.48s;
  -o-animation-delay: 0.48s;
  animation-delay: 0.48s;
}
.windows8Loader #wBall_4 {
  -moz-animation-delay: 0.72s;
  -webkit-animation-delay: 0.72s;
  -ms-animation-delay: 0.72s;
  -o-animation-delay: 0.72s;
  animation-delay: 0.72s;
}
.windows8Loader #wBall_5 {
  -moz-animation-delay: 0.96s;
  -webkit-animation-delay: 0.96s;
  -ms-animation-delay: 0.96s;
  -o-animation-delay: 0.96s;
  animation-delay: 0.96s;
}
@-moz-keyframes orbit {
  0% {
    opacity: 1;
    z-index: 99;
    -moz-transform: rotate(180deg);
    -moz-animation-timing-function: ease-out;
  }
  7% {
    opacity: 1;
    -moz-transform: rotate(300deg);
    -moz-animation-timing-function: linear;
    -moz-origin: 0%;
  }
  30% {
    opacity: 1;
    -moz-transform: rotate(410deg);
    -moz-animation-timing-function: ease-in-out;
    -moz-origin: 7%;
  }
  39% {
    opacity: 1;
    -moz-transform: rotate(645deg);
    -moz-animation-timing-function: linear;
    -moz-origin: 30%;
  }
  70% {
    opacity: 1;
    -moz-transform: rotate(770deg);
    -moz-animation-timing-function: ease-out;
    -moz-origin: 39%;
  }
  75% {
    opacity: 1;
    -moz-transform: rotate(900deg);
    -moz-animation-timing-function: ease-out;
    -moz-origin: 70%;
  }
  76% {
    opacity: 0;
    -moz-transform: rotate(900deg);
  }
  100% {
    opacity: 0;
    -moz-transform: rotate(900deg);
  }
}
@-webkit-keyframes orbit {
  0% {
    opacity: 1;
    z-index: 99;
    -webkit-transform: rotate(180deg);
    -webkit-animation-timing-function: ease-out;
  }
  7% {
    opacity: 1;
    -webkit-transform: rotate(300deg);
    -webkit-animation-timing-function: linear;
    -webkit-origin: 0%;
  }
  30% {
    opacity: 1;
    -webkit-transform: rotate(410deg);
    -webkit-animation-timing-function: ease-in-out;
    -webkit-origin: 7%;
  }
  39% {
    opacity: 1;
    -webkit-transform: rotate(645deg);
    -webkit-animation-timing-function: linear;
    -webkit-origin: 30%;
  }
  70% {
    opacity: 1;
    -webkit-transform: rotate(770deg);
    -webkit-animation-timing-function: ease-out;
    -webkit-origin: 39%;
  }
  75% {
    opacity: 1;
    -webkit-transform: rotate(900deg);
    -webkit-animation-timing-function: ease-out;
    -webkit-origin: 70%;
  }
  76% {
    opacity: 0;
    -webkit-transform: rotate(900deg);
  }
  100% {
    opacity: 0;
    -webkit-transform: rotate(900deg);
  }
}
@-ms-keyframes orbit {
  0% {
    opacity: 1;
    z-index: 99;
    -ms-transform: rotate(180deg);
    -ms-animation-timing-function: ease-out;
  }
  7% {
    opacity: 1;
    -ms-transform: rotate(300deg);
    -ms-animation-timing-function: linear;
    -ms-origin: 0%;
  }
  30% {
    opacity: 1;
    -ms-transform: rotate(410deg);
    -ms-animation-timing-function: ease-in-out;
    -ms-origin: 7%;
  }
  39% {
    opacity: 1;
    -ms-transform: rotate(645deg);
    -ms-animation-timing-function: linear;
    -ms-origin: 30%;
  }
  70% {
    opacity: 1;
    -ms-transform: rotate(770deg);
    -ms-animation-timing-function: ease-out;
    -ms-origin: 39%;
  }
  75% {
    opacity: 1;
    -ms-transform: rotate(900deg);
    -ms-animation-timing-function: ease-out;
    -ms-origin: 70%;
  }
  76% {
    opacity: 0;
    -ms-transform: rotate(900deg);
  }
  100% {
    opacity: 0;
    -ms-transform: rotate(900deg);
  }
}
@-o-keyframes orbit {
  0% {
    opacity: 1;
    z-index: 99;
    -o-transform: rotate(180deg);
    -o-animation-timing-function: ease-out;
  }
  7% {
    opacity: 1;
    -o-transform: rotate(300deg);
    -o-animation-timing-function: linear;
    -o-origin: 0%;
  }
  30% {
    opacity: 1;
    -o-transform: rotate(410deg);
    -o-animation-timing-function: ease-in-out;
    -o-origin: 7%;
  }
  39% {
    opacity: 1;
    -o-transform: rotate(645deg);
    -o-animation-timing-function: linear;
    -o-origin: 30%;
  }
  70% {
    opacity: 1;
    -o-transform: rotate(770deg);
    -o-animation-timing-function: ease-out;
    -o-origin: 39%;
  }
  75% {
    opacity: 1;
    -o-transform: rotate(900deg);
    -o-animation-timing-function: ease-out;
    -o-origin: 70%;
  }
  76% {
    opacity: 0;
    -o-transform: rotate(900deg);
  }
  100% {
    opacity: 0;
    -o-transform: rotate(900deg);
  }
}
@keyframes orbit {
  0% {
    opacity: 1;
    z-index: 99;
    transform: rotate(180deg);
    animation-timing-function: ease-out;
  }
  7% {
    opacity: 1;
    transform: rotate(300deg);
    animation-timing-function: linear;
    origin: 0%;
  }
  30% {
    opacity: 1;
    transform: rotate(410deg);
    animation-timing-function: ease-in-out;
    origin: 7%;
  }
  39% {
    opacity: 1;
    transform: rotate(645deg);
    animation-timing-function: linear;
    origin: 30%;
  }
  70% {
    opacity: 1;
    transform: rotate(770deg);
    animation-timing-function: ease-out;
    origin: 39%;
  }
  75% {
    opacity: 1;
    transform: rotate(900deg);
    animation-timing-function: ease-out;
    origin: 70%;
  }
  76% {
    opacity: 0;
    transform: rotate(900deg);
  }
  100% {
    opacity: 0;
    transform: rotate(900deg);
  }
}
/* =============== pageContent ================ */
.header {
  background-color: #dbdbdb;
  height: 33px;
  width: 960px;
  position: absolute;
  z-index: 30;
  top: 0;
  left: 0;
  right: 0;
  bottom: 573px;
  margin: auto;
}
.header .titreSection {
  width: 20px;
  height: 33px;
  display: inline-block;
  color: #ffffff;
  padding: 0;
  margin: 0;
  float: left;
  -webkit-transition: width 0.25s ease;
  -moz-transition: width 0.25s ease;
  -ms-transition: width 0.25s ease;
  -o-transition: width 0.25s ease;
  transition: width 0.25s ease;
}
.header .titreSection.titreSection0 {
  background-color: #cc3333;
}
.header .titreSection.titreSection1 {
  background-color: #7e1b73;
}
.header .titreSection.titreSection2 {
  background-color: #c4187f;
}
.header .titreSection.titreSection3 {
  background-color: #669933;
}
.header .titreSection.titreSection4 {
  background-color: #0b5c7a;
}
.header .titreSection.titreSection5 {
  background-color: #5abfed;
}
.header .titreSection.titreSection6 {
  background-color: #ff9900;
  display: none;
}
.header .titreSection.titreSectionEnd {
  background-color: #dbdbdb;
  width: auto;
  color: #666666;
}
.header .titreSection.open {
  width: 232px;
}
.header .titreSection span {
  line-height: 33px;
  font-size: 14px;
  font-family: "Open Sans", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  padding: 0 20px;
}
#pageContent {
  z-index: 10;
  overflow: hidden;
  display: none;
  width: 960px;
  height: 540px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
#contenu {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  z-index: 10;
  overflow: hidden;
}
#conteneur_texte {
  font-size: 15px;
  color: #666666;
}
.playbarHider {
  display: none;
  position: absolute;
  z-index: 50;
  top: 600px;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}
h2 {
  font-weight: normal;
  font-size: 53px;
  color: #666666;
  border-bottom: 20px solid #dbdbdb;
  margin: 80px 100px 40px;
}
h2.sousmenu {
  width: 360px;
  background-color: #7e1b73;
  font-size: 35px;
  color: #ffffff;
  border-bottom: none;
  margin: 0;
  padding: 10px 30px;
  height: 264px;
  position: absolute;
  left: 0;
  top: 155px;
  font-weight: normal;
}
h2.sousmenu span {
  font-size: 55px;
  display: block;
  line-height: 50px;
  font-weight: normal;
}
h3 {
  font-weight: normal;
  font-size: 30px;
  color: #666666;
  margin: 60px auto;
  text-align: center;
}
p.consigne {
  font-size: 15px;
  color: #666666;
  line-height: 50px;
  padding-left: 60px;
  font-family: "Open Sans", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: bold;
  background: transparent url(img/info_orange.png) no-repeat 0 0;
  margin-left: 140px;
}
.divSousmenu {
  width: 600px;
  position: absolute;
  right: 0;
  top: 155px;
}
a.page-btn {
  width: 100%;
  display: inline-block;
  line-height: 33px;
  color: #666666;
  font-size: 20px;
  text-decoration: none;
  background-image: url(img/icon_play.png);
  background-repeat: no-repeat;
  background-position: 570px center;
}
a.page-btn:hover {
  color: #333333;
}
a.page-btn.disabled {
  background-image: none;
  cursor: default;
}
a.page-btn.disabled:hover {
  color: #666666;
}
a.page-btn span {
  color: #ffffff;
  display: inline-block;
  width: 53px;
  line-height: 33px;
  text-align: center;
  margin-right: 20px;
}
a.page-btn.hidden {
  display: none;
  visibility: hidden;
}
a.page-btn:nth-child(odd) {
  background-color: #dbdbdb;
}
a.page-btn:nth-child(odd) span {
  background-color: #894382;
}
a.page-btn:nth-child(even) {
  background-color: #e8e8e8;
}
a.page-btn:nth-child(even) span {
  background-color: #9b4b92;
}
a.page-btn.del {
  background-image: none;
  cursor: default;
  -webkit-opacity: 0.5;
  -moz-opacity: 0.5;
  opacity: 0.5;
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}
a.page-btn.del:hover {
  color: #666666;
}
#mainMenu {
  overflow: hidden;
  display: none;
  width: 960px;
  height: 540px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
#mainMenu #menu h1 {
  font-size: 30px;
  color: #666666;
  font-weight: normal;
  text-align: center;
  width: 100%;
  position: absolute;
  top: 80px;
}
#mainMenu #menu p {
  font-size: 15px;
  color: #666666;
  line-height: 50px;
  padding-left: 60px;
  font-family: "Open Sans", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: bold;
  background: transparent url(img/info_green.png) no-repeat 0 0;
  position: absolute;
  top: 80px;
  left: 215px;
}
#mainMenu #menu .arrow {
  position: absolute;
  bottom: 380px;
  left: 105px;
}
#mainMenu #menu .menu-item {
  position: absolute;
  height: 219px;
  top: 170px;
  text-align: center;
  color: #ffffff;
  font-size: 25px;
  text-decoration: none;
  padding-top: 20px;
  -webkit-transition: background 0.25s ease;
  -moz-transition: background 0.25s ease;
  -ms-transition: background 0.25s ease;
  -o-transition: background 0.25s ease;
  transition: background 0.25s ease;
  -webkit-transition: color 0.25s ease, background 0.25s ease;
  -moz-transition: color 0.25s ease, background 0.25s ease;
  -ms-transition: color 0.25s ease, background 0.25s ease;
  -o-transition: color 0.25s ease, background 0.25s ease;
  transition: color 0.25s ease, background 0.25s ease;
}
#mainMenu #menu .menu-item.del {
  -webkit-opacity: 0.5;
  -moz-opacity: 0.5;
  opacity: 0.5;
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
  cursor: default;
}
#mainMenu #menu .menu-item.visible {
  -webkit-opacity: 1 !important;
  -moz-opacity: 1 !important;
  opacity: 1 !important;
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100) !important;
}
#mainMenu #menu .menu-item span {
  -webkit-transition: opacity 0.25s ease;
  -moz-transition: opacity 0.25s ease;
  -ms-transition: opacity 0.25s ease;
  -o-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
  -webkit-opacity: 0.5;
  -moz-opacity: 0.5;
  opacity: 0.5;
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}
#mainMenu #menu .menu-item#linkMenu1 {
  left: 0px;
  background: transparent url(img/menu1.png) no-repeat 0 0;
  width: 238px;
}
#mainMenu #menu .menu-item#linkMenu1:hover {
  background: transparent url(img/menu1_over.png) no-repeat 0 0;
}
#mainMenu #menu .menu-item#linkMenu1:hover span {
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
}
#mainMenu #menu .menu-item#linkMenu1.sectionCompleted {
  background: transparent url(img/menu1_complete.png) no-repeat 0 0;
}
#mainMenu #menu .menu-item#linkMenu1.sectionCompleted:hover {
  background: transparent url(img/menu1_over_complete.png) no-repeat 0 0;
}
#mainMenu #menu .menu-item#linkMenu2 {
  background: transparent url(img/menu2.png) no-repeat 0 0;
  left: 238px;
  width: 239px;
}
#mainMenu #menu .menu-item#linkMenu2:hover {
  background: transparent url(img/menu2_over.png) no-repeat 0 0;
}
#mainMenu #menu .menu-item#linkMenu2:hover span {
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
}
#mainMenu #menu .menu-item#linkMenu2.sectionCompleted {
  background: transparent url(img/menu2_complete.png) no-repeat 0 0;
}
#mainMenu #menu .menu-item#linkMenu2.sectionCompleted:hover {
  background: transparent url(img/menu2_over_complete.png) no-repeat 0 0;
}
#mainMenu #menu .menu-item#linkMenu3 {
  background: transparent url(img/menu3.png) no-repeat 0 0;
  left: 477px;
  width: 238px;
}
#mainMenu #menu .menu-item#linkMenu3:hover {
  background: transparent url(img/menu3_over.png) no-repeat 0 0;
}
#mainMenu #menu .menu-item#linkMenu3:hover span {
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
}
#mainMenu #menu .menu-item#linkMenu3.sectionCompleted {
  background: transparent url(img/menu3_complete.png) no-repeat 0 0;
}
#mainMenu #menu .menu-item#linkMenu3.sectionCompleted:hover {
  background: transparent url(img/menu3_over_complete.png) no-repeat 0 0;
}
#mainMenu #menu .menu-item#linkMenu4 {
  background: transparent url(img/menu4.png) no-repeat 0 0;
  left: 715px;
  width: 240px;
}
#mainMenu #menu .menu-item#linkMenu4:hover {
  background: transparent url(img/menu4_over.png) no-repeat 0 0;
}
#mainMenu #menu .menu-item#linkMenu4:hover span {
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
}
#mainMenu #menu .menu-item#linkMenu4.sectionCompleted {
  background: transparent url(img/menu4_complete.png) no-repeat 0 0;
}
#mainMenu #menu .menu-item#linkMenu4.sectionCompleted:hover {
  background: transparent url(img/menu4_over_complete.png) no-repeat 0 0;
}
/* =============== Playbar ================ */
#playbar {
  width: 100%;
  height: 50px;
  z-index: 30;
  bottom: 0px;
  background: #f4f4f4;
  overflow: visible;
  position: absolute;
  top: 590px;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  -webkit-transition: transform 0.5s ease-in-out;
  -moz-transition: transform 0.5s ease-in-out;
  -ms-transition: transform 0.5s ease-in-out;
  -o-transition: transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out;
}
#playbar #innerPlaybar {
  width: 960px;
  margin: 0 auto;
  position: relative;
  height: 50px;
  vertical-align: middle;
  text-align: left;
  line-height: 50px;
}
#playbar #innerPlaybar > div {
  display: inline-block;
  margin: 10px 0 0;
  padding: 0px;
}
#playbar #innerPlaybar > div > * {
  vertical-align: middle;
}
#playbar #innerPlaybar .btn {
  -webkit-opacity: 0.5;
  -moz-opacity: 0.5;
  opacity: 0.5;
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
  vertical-align: middle;
  display: inline-block;
  cursor: default;
  padding: 0 10px;
  /*
			&#btnTOC{margin-right: 100px;}
			&#btnBack{margin-right: 20px;}
			&#btnNext{margin-right: 20px;}
			&#btnhome{margin-right: 20px;}
			&#btnmenu{margin-right: 20px;}
			&#btnGlossary{margin-right: 20px;}
			&#btnHelp{}
			*/
}
#playbar #innerPlaybar .btn.active {
  cursor: pointer;
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
}
#playbar #innerPlaybar .btn img {
  vertical-align: middle;
}
#playbar #innerPlaybar .btn#btnTOC {
  margin-right: 20px;
}
#playbar #innerPlaybar .btn#btnBack {
  margin-right: 20px;
}
#playbar #innerPlaybar .btn#btnNext {
  margin-right: 150px;
}
#playbar #innerPlaybar .btn#btnhome {
  margin-right: 20px;
}
#playbar #innerPlaybar .btn#btnmenu {
  margin-right: 20px;
}
#playbar #innerPlaybar .btn#btnGlossary {
  margin-right: 20px;
}
#playbar #innerPlaybar #playerController {
  width: 470px;
  margin: 0;
  text-align: left;
  position: relative;
}
#playbar #innerPlaybar #playerController #playerBar {
  display: inline-block;
  border: 1px solid #dbdbdb;
  cursor: pointer;
  margin-right: 20px;
}
#playbar #innerPlaybar #playerController #playerBar .ui-widget-header {
  border: none;
  background: #666666;
}
#playbar #innerPlaybar #playerController #playerBar .ui-slider-handle {
  cursor: pointer;
  display: none;
}
#playbar #innerPlaybar #playerController #btnPlayPause {
  display: inline-block;
  margin-right: 50px;
}
#playbar #innerPlaybar #playerController #btnPlayPause span {
  display: block;
  width: 20px;
  height: 50px;
  background: transparent url(img/btn_pause.png) no-repeat 0px center;
  cursor: pointer;
}
#playbar #innerPlaybar #playerController #btnPlayPause span.paused {
  background: transparent url(img/btn_play.png) no-repeat 0px center;
}
#playbar #innerPlaybar #playerController #volumeContainer {
  display: inline-block;
  cursor: pointer;
  display: none;
}
#playbar #innerPlaybar #playerController #volumeContainer #btnVolume {
  display: inline-block;
}
#playbar #innerPlaybar #playerController #volumeContainer #btnVolume span {
  display: block;
  width: 22px;
  height: 40px;
  cursor: pointer;
}
#playbar #innerPlaybar #playerController #volumeContainer #volumeSlider {
  display: inline-block;
}
#playbar #innerPlaybar #playerController.volume-horizontal #playerBar {
  width: 200px;
  height: 10px;
}
#playbar #innerPlaybar #playerController.volume-horizontal #btnPlayPause {
  width: 20px;
}
#playbar #innerPlaybar #playerController.volume-horizontal #volumeContainer {
  width: 80px;
}
#playbar #innerPlaybar #playerController.volume-horizontal #volumeContainer #btnVolume {
  width: 20px;
  margin-right: 10px;
}
#playbar #innerPlaybar #playerController.volume-horizontal #volumeContainer #volumeSlider {
  vertical-align: middle;
  width: 45px;
}
#playbar #innerPlaybar #playerController #playerBarOverlay {
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
}
#playbar #innerPlaybar #playerController #playerBarOverlay.active {
  display: block;
}
#playbar #innerPlaybar #btnGlossary {
  margin-right: 20px;
}
#playbar #innerPlaybar div.sound {
  display: inline-block;
  width: 70px;
  height: 40px;
  cursor: pointer;
}
#playbar #innerPlaybar div.sound span {
  display: block;
  width: 70px;
  height: 40px;
}
#game-container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  color: #333;
  display: none;
}
#game-container .consigneJeu {
  font-size: 25px;
  text-align: center;
  color: #676767;
  margin: 20px 0;
}
#game-container #game-question-container {
  font-family: 'Yanone Kaffeesatz', sans-serif;
  padding: 10px;
  font-size: 22px;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 0px;
  z-index: 10;
  width: 165px;
  height: 165px;
  -webkit-transition: background 0.25s ease, color 0.25s ease;
  -moz-transition: background 0.25s ease, color 0.25s ease;
  -ms-transition: background 0.25s ease, color 0.25s ease;
  -o-transition: background 0.25s ease, color 0.25s ease;
  transition: background 0.25s ease, color 0.25s ease;
  /*&.good{
			-webkit-filter: drop-shadow(5px 3px 0 #3e6913)
	        drop-shadow(-1px -1px 0 #3e6913);
	 		filter: drop-shadow(5px 3px 0 #3e6913) 
	        drop-shadow(-1px -1px 0 #3e6913);
		}

		&.wrong{
			-webkit-filter: drop-shadow(5px 3px 0 #841313)
	        drop-shadow(-1px -1px 0 #841313);
	 		filter: drop-shadow(5px 3px 0 #841313) 
	        drop-shadow(-1px -1px 0 #841313);
		}*/
}
#game-container .enonce {
  display: block;
  color: #676767;
  position: absolute;
  top: 25px;
  left: 400px;
  width: 100%;
  text-align: center;
  font-family: "Open Sans", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 15px;
}
#game-container #game-info-count-questions {
  display: block;
  color: #676767;
  position: absolute;
  top: 25px;
  left: 450px;
  width: 100%;
  text-align: center;
  font-family: "Open Sans", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 15px;
}
#game-container .game-button {
  display: block;
  position: absolute;
  bottom: 20px;
  color: #f4f4f4;
  font-family: 'Yanone Kaffeesatz', sans-serif;
  font-size: 23px;
  cursor: pointer;
  width: 233px;
  height: 49px;
  padding-top: 10px;
  text-align: center;
  -webkit-transition: background 0.25s ease, color 0.25s ease;
  -moz-transition: background 0.25s ease, color 0.25s ease;
  -ms-transition: background 0.25s ease, color 0.25s ease;
  -o-transition: background 0.25s ease, color 0.25s ease;
  transition: background 0.25s ease, color 0.25s ease;
}
#game-container .game-button#game-button-0 {
  background-color: #cc3333;
  right: 60%;
}
#game-container .game-button#game-button-0:hover,
#game-container .game-button#game-button-0.hover {
  background-color: #841313;
}
#game-container .game-button#game-button-1 {
  background-color: #669933;
  left: 60%;
}
#game-container .game-button#game-button-1:hover,
#game-container .game-button#game-button-1.hover {
  background-color: #3e6913;
}
#game-container .game-button img {
  position: absolute;
  display: block;
  top: -18px;
}
#quiz {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 0;
}
#quiz .question {
  width: 260px;
  height: 230px;
  text-align: center;
  font-size: 25px;
  background-color: #3aada4;
  color: #ffffff;
  display: table-cell;
  vertical-align: middle;
  padding: 20px;
}
#quiz #choices {
  text-align: center;
  position: relative;
}
#quiz #choices label {
  background: transparent url(img/fond_rond.png) no-repeat center center;
  background-size: 100% 100%;
  color: #666666;
  position: absolute;
  display: table;
  vertical-align: middle;
  width: 150px;
  height: 150px;
  margin: 10px;
  cursor: pointer;
  -webkit-transition: color 0.25s ease, background 0.25s ease, border 0.25s ease;
  -moz-transition: color 0.25s ease, background 0.25s ease, border 0.25s ease;
  -ms-transition: color 0.25s ease, background 0.25s ease, border 0.25s ease;
  -o-transition: color 0.25s ease, background 0.25s ease, border 0.25s ease;
  transition: color 0.25s ease, background 0.25s ease, border 0.25s ease;
}
#quiz #choices label span {
  vertical-align: middle;
  display: table-cell;
}
#quiz #choices label span span {
  display: inline-block;
}
#quiz #choices label.disabled {
  cursor: default;
}
#quiz #choices label.good span {
  color: #cc3333;
}
#quiz #choices label.wrong span {
  color: #669933;
}
#quiz #choices label.checked span,
#quiz #choices label.checked.disabled:hover span {
  background: transparent url(img/icon_check.png) no-repeat 85% 5%;
}
#quiz #choices label.checked span span,
#quiz #choices label.checked.disabled:hover span span {
  background: none;
}
#quiz #choices label.checked.good span,
#quiz #choices label.checked.disabled:hover.good span {
  background: transparent url(img/good.png) no-repeat 85% 5%;
  color: #669933;
}
#quiz #choices label.checked.good span span,
#quiz #choices label.checked.disabled:hover.good span span {
  background: none;
}
#quiz #choices label.checked.wrong span,
#quiz #choices label.checked.disabled:hover.wrong span {
  background: transparent url(img/bad.png) no-repeat 85% 5%;
  color: #cc3333;
}
#quiz #choices label.checked.wrong span span,
#quiz #choices label.checked.disabled:hover.wrong span span {
  background: none;
}
#quiz #choices input {
  position: absolute;
  left: -999999px;
}
#quiz #choices .draggable {
  color: #666666;
  position: absolute;
  display: block;
  width: 300px;
  height: 50px;
  background: #ff9900;
  padding: 10px 20px;
  margin: 0;
  cursor: move;
  z-index: 210;
  -webkit-transition: color 0.25s ease, background 0.25s ease, border 0.25s ease;
  -moz-transition: color 0.25s ease, background 0.25s ease, border 0.25s ease;
  -ms-transition: color 0.25s ease, background 0.25s ease, border 0.25s ease;
  -o-transition: color 0.25s ease, background 0.25s ease, border 0.25s ease;
  transition: color 0.25s ease, background 0.25s ease, border 0.25s ease;
}
#quiz #choices .droppable {
  position: absolute;
  display: block;
  width: 300px;
  height: 50px;
  background: #ffffff;
  border: 2px dashed #bfbfbf;
  z-index: 200;
}
#quiz #btnValider {
  display: none;
  color: #ffffff;
  background-color: #3aada4;
  padding: 10px 30px;
  font-size: 23px;
  text-decoration: none;
  position: absolute;
  top: 400px;
  left: 420px;
}
#quiz #retroactions {
  display: none;
  position: absolute;
  left: 0;
  top: 390px;
  width: 100%;
  z-index: 220;
  background: #f4f4f4;
  text-align: center;
}
#quiz #retroactions h3 {
  margin: 0;
  font-size: 23px;
  display: inline-block;
  line-height: 50px;
  padding-left: 50px;
}
#quiz #retroactions > div {
  display: none;
}
#quiz #retroactions > div.active {
  display: block;
}
#quiz #retroactions .retroaction-success h3 {
  background: transparent url(img/good.png) no-repeat 0 center;
}
#quiz #retroactions .retroaction-failed h3 {
  background: transparent url(img/bad.png) no-repeat 0 center;
}
#tocContainer {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 540px;
  width: 0px;
  margin-left: -480px;
  margin-top: -270px;
  z-index: 400;
  overflow: hidden;
  -webkit-transition: width 0.2s ease-in-out;
  -moz-transition: width 0.2s ease-in-out;
  -ms-transition: width 0.2s ease-in-out;
  -o-transition: width 0.2s ease-in-out;
  transition: width 0.2s ease-in-out;
}
#tocContainer.opened {
  width: 232px;
}
#tocContainer #btnTOC {
  background: url(img/menu.png) no-repeat top left;
  position: absolute;
  top: 100px;
  width: 65px;
  right: -100px;
  height: 65px;
  display: none;
}
#tocContainer #btnTOC.active {
  display: block;
}
#tocContainer #tableOfContents {
  position: absolute;
  width: 232px;
  height: 100%;
  color: #fff;
  z-index: 999;
  -webkit-transition: transform 0.2s ease-in-out;
  -moz-transition: transform 0.2s ease-in-out;
  -ms-transition: transform 0.2s ease-in-out;
  -o-transition: transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out;
  -webkit-transform: translate3d(-100%, 0, 0);
  -moz-transform: translate3d(-100%, 0, 0);
  -ms-transform: translate3d(-100%, 0, 0);
  -o-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  left: -240px;
}
#tocContainer #tableOfContents.opened {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  left: 0px;
}
#tocContainer #tableOfContents ul {
  margin: 0;
  list-style: none;
  background-color: #fff;
  position: absolute;
  bottom: 0;
}
#tocContainer #tableOfContents ul li {
  display: block;
  width: 100%;
  margin-bottom: 2px;
}
#tocContainer #tableOfContents ul li a {
  display: block;
  color: #fff;
  text-decoration: none;
  font-size: 22px;
  line-height: 33px;
  padding: 0 20px;
}
#tocContainer #tableOfContents ul li.hidden {
  display: none;
}
#tocContainer #tableOfContents ul li.S00_E01 a {
  background-color: #cc3333;
}
#tocContainer #tableOfContents ul li.S01_E00 a {
  background: #7e1b73 url(img/menu_deroulant2.png) no-repeat 210px center;
}
#tocContainer #tableOfContents ul li.S01_E00.open a {
  background: #7e1b73 url(img/menu_deroulant.png) no-repeat 210px center;
}
#tocContainer #tableOfContents ul li.S01_E00.open ul {
  height: 280px;
}
#tocContainer #tableOfContents ul li.S01_E00.open ul li:nth-child(odd) a {
  background-color: #894382;
}
#tocContainer #tableOfContents ul li.S01_E00.open ul li:nth-child(even) a {
  background-color: #9b4b92;
}
#tocContainer #tableOfContents ul li.S01_E00.open ul a {
  background-image: none;
}
#tocContainer #tableOfContents ul li.S01_E00 ul a {
  background-image: none;
}
#tocContainer #tableOfContents ul li.S02_E00 a {
  background: #c4187f url(img/menu_deroulant2.png) no-repeat 210px center;
}
#tocContainer #tableOfContents ul li.S02_E00.open a {
  background: #c4187f url(img/menu_deroulant.png) no-repeat 210px center;
}
#tocContainer #tableOfContents ul li.S02_E00.open ul {
  height: 138px;
}
#tocContainer #tableOfContents ul li.S02_E00.open ul li:nth-child(odd) a {
  background-color: #c14e93;
}
#tocContainer #tableOfContents ul li.S02_E00.open ul li:nth-child(even) a {
  background-color: #c8619e;
}
#tocContainer #tableOfContents ul li.S02_E00.open ul a {
  background-image: none;
}
#tocContainer #tableOfContents ul li.S02_E00 ul a {
  background-image: none;
}
#tocContainer #tableOfContents ul li.S03_E00 a {
  background: #669933 url(img/menu_deroulant2.png) no-repeat 210px center;
}
#tocContainer #tableOfContents ul li.S03_E00.open a {
  background: #669933 url(img/menu_deroulant.png) no-repeat 210px center;
}
#tocContainer #tableOfContents ul li.S03_E00.open ul {
  height: 138px;
}
#tocContainer #tableOfContents ul li.S03_E00.open ul li:nth-child(odd) a {
  background-color: #809966;
}
#tocContainer #tableOfContents ul li.S03_E00.open ul li:nth-child(even) a {
  background-color: #8ca375;
}
#tocContainer #tableOfContents ul li.S03_E00.open ul a {
  background-image: none;
}
#tocContainer #tableOfContents ul li.S03_E00 ul a {
  background-image: none;
}
#tocContainer #tableOfContents ul li.S04_E00 a {
  background: #0b5c7a url(img/menu_deroulant2.png) no-repeat 210px center;
}
#tocContainer #tableOfContents ul li.S04_E00.open a {
  background: #0b5c7a url(img/menu_deroulant.png) no-repeat 210px center;
}
#tocContainer #tableOfContents ul li.S04_E00.open ul {
  height: 138px;
}
#tocContainer #tableOfContents ul li.S04_E00.open ul li:nth-child(odd) a {
  background-color: #2b738d;
}
#tocContainer #tableOfContents ul li.S04_E00.open ul li:nth-child(even) a {
  background-color: #3182a1;
}
#tocContainer #tableOfContents ul li.S04_E00.open ul a {
  background-image: none;
}
#tocContainer #tableOfContents ul li.S04_E00 ul a {
  background-image: none;
}
#tocContainer #tableOfContents ul li.S05_E01 a {
  background-color: #5abfed;
}
#tocContainer #tableOfContents ul li.S01_E00 ul li a:hover,
#tocContainer #tableOfContents ul li.S01_E00 ul li a:hover,
#tocContainer #tableOfContents ul li.S01_E00 ul li a:hover,
#tocContainer #tableOfContents ul li.S01_E00 ul li a:hover,
#tocContainer #tableOfContents ul li.S01_E00.open ul li a:hover,
#tocContainer #tableOfContents ul li.S01_E00.open ul li a:hover,
#tocContainer #tableOfContents ul li.S01_E00.open ul li a:hover,
#tocContainer #tableOfContents ul li.S01_E00.open ul li a:hover,
#tocContainer #tableOfContents ul li.S01_E00 ul li a.current,
#tocContainer #tableOfContents ul li.S01_E00 ul li a.current,
#tocContainer #tableOfContents ul li.S01_E00 ul li a.current,
#tocContainer #tableOfContents ul li.S01_E00 ul li a.current,
#tocContainer #tableOfContents ul li.S01_E00.open ul li a.current,
#tocContainer #tableOfContents ul li.S01_E00.open ul li a.current,
#tocContainer #tableOfContents ul li.S01_E00.open ul li a.current,
#tocContainer #tableOfContents ul li.S01_E00.open ul li a.current {
  color: #ffffff;
  background: #666666;
}
#tocContainer #tableOfContents ul li.S01_E00 ul li a.current,
#tocContainer #tableOfContents ul li.S01_E00 ul li a.current,
#tocContainer #tableOfContents ul li.S01_E00 ul li a.current,
#tocContainer #tableOfContents ul li.S01_E00 ul li a.current,
#tocContainer #tableOfContents ul li.S01_E00.open ul li a.current,
#tocContainer #tableOfContents ul li.S01_E00.open ul li a.current,
#tocContainer #tableOfContents ul li.S01_E00.open ul li a.current,
#tocContainer #tableOfContents ul li.S01_E00.open ul li a.current {
  cursor: default;
}
#tocContainer #tableOfContents ul li ul {
  overflow: hidden;
  height: 0;
  position: static;
  -webkit-transition: height 0.25s ease-in-out;
  -moz-transition: height 0.25s ease-in-out;
  -ms-transition: height 0.25s ease-in-out;
  -o-transition: height 0.25s ease-in-out;
  transition: height 0.25s ease-in-out;
}
#tocContainer #tableOfContents ul li ul li a {
  font-size: 16px;
}
#tocContainer #tableOfContents ul li ul li:last-child {
  margin-bottom: 0px;
}
#tocContainer #tableOfContents ul li.open ul {
  height: auto;
  margin-top: 2px;
}
#tocContainer #tableOfContents ul li.niveau-2 a {
  padding-left: 35px;
  font-weight: normal;
}
#tocContainer #tableOfContents ul li.first {
  margin-top: 40px;
}
#tocContainer #tableOfContents ul li.last {
  border-bottom: 1px solid transparent;
  margin-bottom: 20px;
}
#tocContainer #tableOfContents ul.unlocked li a:hover,
#tocContainer #tableOfContents ul.unlocked li a.current {
  color: #ffffff;
  background: #666666;
}
#tocContainer #tableOfContents ul.unlocked li a.current {
  cursor: default;
}
#tocContainer #tableOfContents ul.locked li a.active.current {
  cursor: default;
}
#tocContainer #tableOfContents ul.locked li a.disabled {
  -webkit-opacity: 0.5;
  -moz-opacity: 0.5;
  opacity: 0.5;
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
  cursor: default;
}
.situation0.page1 .time1 {
  position: absolute;
  top: 145px;
  left: 155px;
}
.situation0.page1 .time2 {
  position: absolute;
  top: 150px;
  left: 370px;
  font-size: 33px;
}
.situation0.page1 .time3 {
  position: absolute;
  top: 165px;
  left: 370px;
  color: #7e1b73;
  font-size: 85px;
}
.situation0.page1 .time4 {
  position: absolute;
  top: 240px;
  left: 370px;
  font-size: 56px;
}
.situation0.page1 .time5 {
  position: absolute;
  top: 310px;
  left: 370px;
  font-size: 20px;
}
.situation0.page1 .time6 {
  position: absolute;
  top: 170px;
  left: 690px;
}
.situation0.page1 .btn_action {
  position: absolute;
  top: 350px;
  left: 545px;
}
.situation0.page1 .btn_action2 {
  display: none;
  position: absolute;
  top: 440px;
  left: 576px;
}
.situation0.page1 .playbarHider {
  display: inline-block;
}
.situation0.page2 #playbar #innerPlaybar .btn#btnTOC,
.situation0.page2 #playbar #innerPlaybar .btn#btnhome,
.situation0.page2 #playbar #innerPlaybar .btn#btnmenu,
.situation0.page2 #playbar #innerPlaybar .btn#btnGlossary {
  -webkit-opacity: 0.5;
  -moz-opacity: 0.5;
  opacity: 0.5;
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
  cursor: default;
}
.situation0.page2 #pageContent {
  z-index: 300;
  overflow: inherit;
}
.situation0.page2 #pageContent #contenu {
  overflow: inherit;
}
.situation0.page2 .fleche {
  position: absolute;
  bottom: 10px;
  left: 595px;
  z-index: 10;
}
.situation0.page2 .time2 {
  position: absolute;
  top: 250px;
  left: 400px;
  font-size: 25px;
}
.situation0.page2 .time3 {
  position: absolute;
  top: 260px;
  left: 400px;
  font-size: 60px;
  color: #333333;
}
.situation0.page2 .time4 {
  position: absolute;
  top: 200px;
  left: 330px;
}
.situation0.page2 .checkbo {
  position: absolute;
  top: 530px;
}
.situation0.page2 .checkbo.check1 {
  left: 540px;
}
.situation0.page2 .checkbo.check2 {
  left: 600px;
}
.situation0.page2 .checkbo.check3 {
  left: 70px;
}
.situation0.page2 .checkbo.check4 {
  left: 790px;
}
.situation0.page2 .checkbo.check5 {
  left: 910px;
}
.situation0.page2 .checkbo.check7 {
  left: 850px;
}
.situation0.page2 .checkbo.check8 {
  left: 10px;
}
.situation0.page2 .trigger-checkbo {
  position: absolute;
  top: 530px;
  display: none;
}
.situation0.page2 .trigger-checkbo.trigger1 {
  left: 540px;
}
.situation0.page2 .trigger-checkbo.trigger2 {
  left: 600px;
}
.situation0.page2 .trigger-checkbo.trigger3 {
  left: 70px;
}
.situation0.page2 .trigger-checkbo.trigger4 {
  left: 790px;
}
.situation0.page2 .trigger-checkbo.trigger5 {
  left: 910px;
}
.situation0.page2 .trigger-checkbo.trigger7 {
  left: 850px;
}
.situation0.page2 .trigger-checkbo.trigger8 {
  left: 10px;
}
.situation0.page2 .zoneTrigger .trigger-btn {
  display: inline-block;
  position: absolute;
}
.situation0.page2 .zoneTrigger .trigger-btn.menu1 {
  background: transparent url(../data/situation0/assets/images/E02_prev.png) no-repeat 0 0;
  height: 55px;
  width: 55px;
  top: 370px;
  left: 280px;
}
.situation0.page2 .zoneTrigger .trigger-btn.menu2 {
  background: transparent url(../data/situation0/assets/images/E02_next.png) no-repeat 0 0;
  height: 75px;
  width: 75px;
  top: 380px;
  left: 340px;
}
.situation0.page2 .zoneTrigger .trigger-btn.menu3 {
  background: transparent url(../data/situation0/assets/images/E02_playpause.png) no-repeat 0 0;
  height: 130px;
  width: 155px;
  top: 70px;
  left: 370px;
}
.situation0.page2 .zoneTrigger .trigger-btn.menu4 {
  background: transparent url(../data/situation0/assets/images/E02_home.png) no-repeat 0 0;
  height: 50px;
  width: 50px;
  top: 350px;
  left: 590px;
}
.situation0.page2 .zoneTrigger .trigger-btn.menu5 {
  background: transparent url(../data/situation0/assets/images/E02_biblio.png) no-repeat 0 0;
  height: 75px;
  width: 75px;
  top: 220px;
  left: 680px;
}
.situation0.page2 .zoneTrigger .trigger-btn.menu7 {
  background: transparent url(../data/situation0/assets/images/E02_menu.png) no-repeat 0 0;
  height: 75px;
  width: 75px;
  top: 295px;
  left: 650px;
}
.situation0.page2 .zoneTrigger .trigger-btn.menu8 {
  background: transparent url(../data/situation0/assets/images/E02_toc.png) no-repeat 0 0;
  height: 150px;
  width: 150px;
  top: 160px;
  left: 180px;
}
.situation0.page2 .trigger-show {
  z-index: 999999;
  display: none;
  position: absolute;
  width: 192px;
  font-family: "Open Sans", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
.situation0.page2 .trigger-show h2 {
  color: #ffffff;
  background-color: #ff9900;
  line-height: 33px;
  font-size: 15px;
  font-weight: normal;
  border: none;
  text-align: center;
  margin: 0;
}
.situation0.page2 .trigger-show.leftArrow h2:after {
  right: 100%;
  top: 0;
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(255, 153, 0, 0);
  border-right-color: #ff9900;
  border-width: 16px;
  margin-top: 0;
}
.situation0.page2 .trigger-show.topArrow h2:after {
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(255, 153, 0, 0);
  border-bottom-color: #ff9900;
  border-width: 16px;
  margin-left: -16px;
}
.situation0.page2 .trigger-show.rightArrow h2:after {
  left: 100%;
  top: 0;
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(255, 153, 0, 0);
  border-left-color: #ff9900;
  border-width: 16px;
  margin-top: 0;
}
.situation0.page2 .trigger-show p {
  font-size: 12px;
  color: #333333;
  background-color: #ffffff;
  padding: 15px 20px;
}
.situation0.page2 .trigger-show.trigger1 {
  top: 383px;
  left: 66px;
}
.situation0.page2 .trigger-show.trigger2 {
  top: 403px;
  left: 440px;
}
.situation0.page2 .trigger-show.trigger3 {
  top: 85px;
  left: 540px;
}
.situation0.page2 .trigger-show.trigger4 {
  top: 420px;
  left: 519px;
}
.situation0.page2 .trigger-show.trigger5 {
  top: 241px;
  left: 775px;
}
.situation0.page2 .trigger-show.trigger6 {
  top: 0;
  left: 0;
}
.situation0.page2 .trigger-show.trigger7 {
  top: 315px;
  left: 750px;
}
.situation0.page2 .trigger-show.trigger8 {
  top: 330px;
  left: 70px;
  width: 200px;
}
.situation0.page2 .trigger-show.trigger8.topArrow h2:after {
  left: 100%;
  margin-left: -50px;
}
.situation0.page3 #playbar #innerPlaybar .btn#btnTOC,
.situation0.page3 #playbar #innerPlaybar .btn#btnhome,
.situation0.page3 #playbar #innerPlaybar .btn#btnmenu {
  -webkit-opacity: 0.5;
  -moz-opacity: 0.5;
  opacity: 0.5;
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
  cursor: default;
}
.situation0.page3 .fleche {
  position: absolute;
  z-index: 1000;
  bottom: 10px;
  left: 593px;
}
.situation0.page4 #playbar #innerPlaybar .btn#btnTOC,
.situation0.page4 #playbar #innerPlaybar .btn#btnhome,
.situation0.page4 #playbar #innerPlaybar .btn#btnmenu {
  -webkit-opacity: 0.5;
  -moz-opacity: 0.5;
  opacity: 0.5;
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
  cursor: default;
}
.situation0.page4 .fleche {
  position: absolute;
  z-index: 1000;
  bottom: 10px;
  left: 593px;
}
.situation1.page1 #playbar #playerController {
  visibility: hidden;
}
.situation1.page13 #conteneur_texte {
  width: 832px;
  height: 440px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -220px 0 0 -416px;
  z-index: 2;
  color: #676767;
  text-align: center;
  font-size: 32px;
}
.situation1.page13 #conteneur_texte p {
  margin: 120px 0 40px 0;
  display: block;
}
.situation1.page13 #conteneur_texte #consigne {
  display: none;
  position: absolute;
  top: -140px;
  width: 720px;
  left: 45px;
}
.situation1.page13 #conteneur_texte #retroactions {
  display: none;
  top: 0;
  background: transparent;
  height: 450px;
}
.situation1.page13 #conteneur_texte #retroactions #middle p {
  z-index: 9999;
  position: absolute;
  top: -95px;
  left: 50%;
  margin-left: -80px;
}
.situation1.page13 #conteneur_texte #retroactions #middle p span {
  font-size: 72px;
  font-weight: bold;
}
.situation1.page13 #conteneur_texte #retroactions #middle img {
  position: absolute;
  top: 0px;
  left: 50%;
  margin-left: -177px;
  z-index: 9;
}
.situation1.page13 #conteneur_texte #retroactions #complication {
  position: absolute;
  left: -60px;
  top: 0px;
  border: 2px solid #cc3333;
  font-size: 20px;
}
.situation1.page13 #conteneur_texte #retroactions #complication p {
  font-size: 24px;
  margin: 0 0 20px 0;
  padding: 7px 0;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  color: #f4f4f4;
  background-color: #cc3333;
}
.situation1.page13 #conteneur_texte #retroactions #complication ul {
  list-style-image: url('img/puce.png');
  text-align: left;
  padding: 0 15px 10px 0;
  margin-left: 25px;
  font-family: "Open Sans", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 14px;
  line-height: 2em;
}
.situation1.page13 #conteneur_texte #retroactions #habituelle {
  position: absolute;
  right: -55px;
  top: 0px;
  border: 2px solid #669933;
  font-size: 20px;
  width: 310px;
}
.situation1.page13 #conteneur_texte #retroactions #habituelle p {
  font-size: 24px;
  margin: 0 0 20px 0;
  padding: 7px 0;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  color: #f4f4f4;
  background-color: #669933;
}
.situation1.page13 #conteneur_texte #retroactions #habituelle ul {
  list-style-image: url('img/puce_vert.png');
  text-align: left;
  padding: 0 15px 10px 0;
  margin-left: 25px;
  font-family: "Open Sans", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 14px;
  line-height: 2em;
}
.situation1.page13 #conteneur_texte #btnDemarrer,
.situation1.page13 #conteneur_texte #btnRetry,
.situation1.page13 #conteneur_texte #btnPoursuivre {
  text-decoration: none;
  font-family: 'Yanone Kaffeesatz', sans-serif;
  color: #f4f4f4;
  background-color: #3aada4;
  padding: 11px 41px;
  font-size: 23px;
}
.situation1.page13 #conteneur_texte #btnDemarrer:hover,
.situation1.page13 #conteneur_texte #btnRetry:hover,
.situation1.page13 #conteneur_texte #btnPoursuivre:hover {
  background-color: #086d63;
  -webkit-transition: background-color 0.5s ease;
  -moz-transition: background-color 0.5s ease;
  -ms-transition: background-color 0.5s ease;
  -o-transition: background-color 0.5s ease;
  transition: background-color 0.5s ease;
}
.situation1.page13 #conteneur_texte #btnRetry {
  padding: 11px 55px;
  position: absolute;
  bottom: 0px;
  left: 230px;
}
.situation1.page13 #conteneur_texte #btnPoursuivre {
  padding: 11px 44px;
  position: absolute;
  bottom: 0px;
  left: 430px;
}
.situation1.page13 span.red {
  color: #cc3333;
}
.situation1.page13 span.green {
  color: #669933;
}
.situation1.page13 #choices {
  height: 100%;
  top: 70px;
}
.situation1.page13 #choices .game-question {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.situation1.page13 #btnChoix .btnChoix {
  display: block;
  position: absolute;
  bottom: -20px;
  color: #f4f4f4;
  font-family: 'Yanone Kaffeesatz', sans-serif;
  font-size: 23px;
  cursor: pointer;
  width: 233px;
  height: 49px;
  text-decoration: none;
  padding-top: 10px;
  text-align: center;
  -webkit-transition: background 0.25s ease, color 0.25s ease;
  -moz-transition: background 0.25s ease, color 0.25s ease;
  -ms-transition: background 0.25s ease, color 0.25s ease;
  -o-transition: background 0.25s ease, color 0.25s ease;
  transition: background 0.25s ease, color 0.25s ease;
}
.situation1.page13 #btnChoix .btnChoix[data-reponse="0"] {
  background-color: #cc3333;
  right: 60%;
}
.situation1.page13 #btnChoix .btnChoix[data-reponse="0"]:hover,
.situation1.page13 #btnChoix .btnChoix[data-reponse="0"].hover {
  background-color: #841313;
}
.situation1.page13 #btnChoix .btnChoix[data-reponse="1"] {
  background-color: #669933;
  left: 60%;
}
.situation1.page13 #btnChoix .btnChoix[data-reponse="1"]:hover,
.situation1.page13 #btnChoix .btnChoix[data-reponse="1"].hover {
  background-color: #3e6913;
}
.situation1.page13 #btnChoix .btnChoix.good {
  background-color: #dbdbdb;
}
.situation1.page13 #btnChoix .btnChoix.checked.good {
  /*red*/
  /*green*/
}
.situation1.page13 #btnChoix .btnChoix.checked.good[data-reponse="0"] {
  background-color: #cc3333;
}
.situation1.page13 #btnChoix .btnChoix.checked.good[data-reponse="1"] {
  background-color: #669933;
}
.situation1.page13 #btnChoix .btnChoix.checked.wrong {
  background-color: #dbdbdb;
}
.situation1.page13 #btnChoix .btnChoix.checked:hover.good[data-reponse="0"] {
  background-color: #cc3333;
}
.situation1.page13 #btnChoix .btnChoix.checked:hover.good[data-reponse="1"] {
  background-color: #669933;
}
.situation1.page13 #btnChoix .btnChoix.checked:hover.wrong {
  background-color: #dbdbdb;
}
.situation1.page13 #btnChoix .btnChoix[data-reponse="0"].good:hover {
  background-color: #dbdbdb;
}
.situation1.page13 #btnChoix .btnChoix[data-reponse="1"].good:hover {
  background-color: #dbdbdb;
}
.situation1.page13 #btnChoix .btnChoix img {
  position: absolute;
  display: block;
  top: -18px;
}
.situation1.page14 #conteneur_texte h3 {
  font-size: 53px;
}
.situation1.page14 #conteneur_texte .conteneur.etape1 {
  font-size: 72px;
  color: black;
  position: absolute;
  top: 250px;
  left: 50%;
  margin-left: -114px;
}
.situation1.page14 #conteneur_texte .conteneur.etape2 {
  font-size: 28px;
  color: black;
  position: absolute;
  top: 200px;
  left: 50%;
  margin-left: -210px;
}
.situation1.page14 #conteneur_texte .conteneur.etape2 p {
  font-size: 36px;
  margin-bottom: 10px;
}
.situation1.page14 #conteneur_texte .conteneur.etape2 ul {
  margin-left: 10px;
  line-height: 1.4em;
}
.situation1.page14 #conteneur_texte .conteneur.etape2 ul li {
  background: url('img/list.png') no-repeat left center;
  padding: 0px 0px 0px 30px;
  list-style: none;
  margin: 0;
}
.situation1.page14 #conteneur_texte .conteneur.etape3 {
  font-size: 28px;
  color: black;
  position: absolute;
  top: 200px;
  left: 50%;
  margin-left: -126px;
}
.situation1.page14 #conteneur_texte .conteneur.etape3 p {
  font-size: 36px;
  margin-bottom: 10px;
}
.situation1.page14 #conteneur_texte .conteneur.etape3 ul {
  margin-left: 10px;
  line-height: 1.4em;
  margin-bottom: 30px;
}
.situation1.page14 #conteneur_texte .conteneur.etape3 ul li {
  background: url('img/list.png') no-repeat left center;
  padding: 0px 0px 0px 30px;
  list-style: none;
  margin: 0;
}
.situation1.page14 #conteneur_texte .conteneur.etape4 {
  font-size: 72px;
  color: black;
  position: absolute;
  top: 220px;
  left: 50%;
  margin-left: -263px;
}
.situation1.page14 #conteneur_texte .conteneur.etape5 {
  font-size: 42px;
  color: black;
  position: absolute;
  top: 220px;
  width: 240px;
  left: 50%;
  margin-left: -120px;
}
.situation1.page14 #conteneur_texte .conteneur.etape5 p {
  position: absolute;
  top: 17px;
  left: 105px;
}
.situation1.page14 #conteneur_texte .conteneur.etape5 img {
  width: 90px;
}
.situation1.page14 #conteneur_texte .conteneur.etape6 {
  font-size: 28px;
  color: black;
  position: absolute;
  top: 200px;
  left: 50%;
  margin-left: -187px;
}
.situation1.page14 #conteneur_texte .conteneur.etape6 p {
  font-size: 36px;
  margin-bottom: 10px;
}
.situation1.page14 #conteneur_texte .conteneur.etape6 ul {
  margin-left: 10px;
  line-height: 1.4em;
  margin-bottom: 30px;
}
.situation1.page14 #conteneur_texte .conteneur.etape6 ul li {
  background: url('img/list.png') no-repeat left center;
  padding: 0px 0px 0px 30px;
  list-style: none;
  margin: 0;
}
.situation1.page15 #conteneur_texte h3 {
  margin-bottom: 10px;
  font-size: 52px;
}
.situation1.page15 #conteneur_texte .consigne {
  margin-left: 220px;
  margin-bottom: 55px;
}
.situation1.page15 #conteneur_texte .clic {
  font-size: 30px;
  cursor: pointer;
  margin: 25px 0 5px 0;
  color: black;
  margin-left: 150px;
}
.situation1.page15 #conteneur_texte .clic i {
  font-size: 16px;
  margin-right: 5px;
  float: left;
  padding-top: 10px;
}
.situation1.page15 #conteneur_texte .desc {
  display: none;
  font-size: 24px;
  margin-left: 150px;
}
.situation1.page16 #conteneur_texte h3 {
  margin-bottom: 40px;
  font-size: 52px;
}
.situation1.page16 #conteneur_texte ul {
  color: black;
  font-size: 26px;
  margin-left: 10px;
  line-height: 1.5em;
  margin-left: 170px;
}
.situation1.page16 #conteneur_texte ul li {
  padding: 0px 0px 0px 30px;
  list-style: none;
  margin: 0;
  background: url('img/list.png') no-repeat left center;
  position: absolute;
  left: 160px;
}
.situation1.page16 #conteneur_texte ul li.li1 {
  top: 165px;
}
.situation1.page16 #conteneur_texte ul li.li2 {
  top: 205px;
}
.situation1.page16 #conteneur_texte ul li.li3 {
  top: 245px;
}
.situation1.page16 #conteneur_texte ul li.li4 {
  top: 285px;
}
.situation1.page16 #conteneur_texte ul li.li5 {
  top: 325px;
}
.situation1.page16 #conteneur_texte ul li.li6 {
  top: 365px;
}
.situation1.page16 #conteneur_texte ul li.li7 {
  top: 405px;
}
.situation1.page16 #conteneur_texte ul li.li8 {
  top: 445px;
}
.situation1.page17 #btnPoursuivre {
  text-decoration: none;
  font-family: 'Yanone Kaffeesatz', sans-serif;
  color: #f4f4f4;
  background-color: #3aada4;
  font-size: 23px;
  z-index: 9999;
  padding: 11px 44px;
  position: absolute;
  top: 50%;
  margin-top: -25px;
  left: 50%;
  margin-left: -81px;
}
.situation1.page17 #btnPoursuivre:hover {
  background-color: #086d63;
  -webkit-transition: background-color 0.5s ease;
  -moz-transition: background-color 0.5s ease;
  -ms-transition: background-color 0.5s ease;
  -o-transition: background-color 0.5s ease;
  transition: background-color 0.5s ease;
}
.situation1.page2 #conteneur_texte img {
  margin-left: 275px;
  margin-top: 60px;
}
.situation1.page2 #conteneur_texte img.dot {
  position: absolute;
  margin: 0;
  top: 178px;
  left: 490px;
}
.situation1.page3 #conteneur_texte .box {
  top: 100px;
  left: 100px;
  position: absolute;
  width: 480px;
  border: 1px solid #7e1b73;
  height: 330px;
}
.situation1.page3 #conteneur_texte .box.mauve h4 {
  background-color: #7e1b73;
  line-height: 50px;
  color: #ffffff;
  font-size: 30px;
  font-weight: normal;
  padding: 0 20px;
}
.situation1.page3 .time1 {
  position: absolute;
  top: 60px;
  left: 10px;
}
.situation1.page3 .time2 {
  position: absolute;
  top: 80px;
  left: 320px;
}
.situation1.page3 .time3 {
  position: absolute;
  top: 130px;
  left: 128px;
}
.situation1.page3 .time4 {
  position: absolute;
  top: 340px;
  left: 610px;
}
.situation1.page3 .time5 {
  position: absolute;
  top: 335px;
  left: 680px;
  font-size: 40px;
}
.situation1.page4 #conteneur_texte h3 {
  font-size: 53px;
}
.situation1.page4 #conteneur_texte .fondbulle {
  position: absolute;
  top: 160px;
  left: 75px;
}
.situation1.page4 #conteneur_texte .time1,
.situation1.page4 #conteneur_texte .time2,
.situation1.page4 #conteneur_texte .time3,
.situation1.page4 #conteneur_texte .time4,
.situation1.page4 #conteneur_texte .time5 {
  position: absolute;
  top: 160px;
  left: 75px;
  width: 810px;
}
.situation1.page4 #conteneur_texte .time1 span,
.situation1.page4 #conteneur_texte .time2 span,
.situation1.page4 #conteneur_texte .time3 span,
.situation1.page4 #conteneur_texte .time4 span,
.situation1.page4 #conteneur_texte .time5 span {
  font-family: "Open Sans", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 15px;
  position: absolute;
  top: 220px;
  width: 125px;
  text-align: center;
}
.situation1.page4 #conteneur_texte .time1 span {
  left: 20px;
}
.situation1.page4 #conteneur_texte .time2 span {
  left: 185px;
}
.situation1.page4 #conteneur_texte .time3 span {
  left: 340px;
}
.situation1.page4 #conteneur_texte .time4 span {
  left: 500px;
}
.situation1.page4 #conteneur_texte .time5 span {
  left: 665px;
}
.situation1.page5 #conteneur_texte #quiz #choices {
  position: static;
}
.situation1.page5 #conteneur_texte #quiz .time1 {
  top: 170px;
  left: 300px;
  width: 130px;
  height: 130px;
}
.situation1.page5 #conteneur_texte #quiz .time1 span {
  font-size: 40px;
  line-height: 30px;
}
.situation1.page5 #conteneur_texte #quiz .time1 span span {
  font-size: 25px;
}
.situation1.page5 #conteneur_texte #quiz .time2 {
  top: 250px;
  left: 480px;
  width: 90px;
  height: 90px;
}
.situation1.page5 #conteneur_texte #quiz .time2 span {
  font-size: 24px;
  line-height: 18px;
}
.situation1.page5 #conteneur_texte #quiz .time2 span span {
  font-size: 22px;
}
.situation1.page5 #conteneur_texte #quiz .time3 {
  top: 70px;
  left: 770px;
  width: 130px;
  height: 130px;
}
.situation1.page5 #conteneur_texte #quiz .time3 span {
  font-size: 40px;
  line-height: 26px;
}
.situation1.page5 #conteneur_texte #quiz .time3 span span {
  font-size: 26px;
}
.situation1.page5 #conteneur_texte #quiz .time4 {
  top: 70px;
  left: 400px;
  width: 105px;
  height: 105px;
}
.situation1.page5 #conteneur_texte #quiz .time4 span {
  font-size: 26px;
  line-height: 30px;
}
.situation1.page5 #conteneur_texte #quiz .time5 {
  top: 180px;
  left: 640px;
  width: 180px;
  height: 180px;
}
.situation1.page5 #conteneur_texte #quiz .time5 span {
  font-size: 32px;
  line-height: 30px;
}
.situation1.page5 #conteneur_texte #quiz .time5 span span {
  font-size: 25px;
}
.situation1.page5 #conteneur_texte #quiz .time6 {
  top: 120px;
  left: 520px;
  width: 125px;
  height: 125px;
}
.situation1.page5 #conteneur_texte #quiz .time6 span {
  font-size: 26px;
  line-height: 30px;
}
.situation1.page6 #conteneur_texte .consigne {
  margin: 30px 0 0 200px;
}
.situation1.page6 #conteneur_texte .trigger-show {
  display: none;
}
.situation1.page6 #conteneur_texte .CI {
  position: absolute;
  left: 50%;
  margin-left: -92px;
  top: 215px;
}
.situation1.page6 #conteneur_texte .containerIndication {
  position: absolute;
  top: 295px;
  left: 10px;
  width: 361px;
}
.situation1.page6 #conteneur_texte .containerIndication.opened {
  -webkit-transform: translate(0, -120px);
  -moz-transform: translate(0, -120px);
  -ms-transform: translate(0, -120px);
  -o-transform: translate(0, -120px);
  transform: translate(0, -120px);
}
.situation1.page6 #conteneur_texte .containerIndication.relatives {
  right: -15px;
  width: 390px;
  left: inherit;
}
.situation1.page6 #conteneur_texte .containerIndication.relatives img {
  margin-right: 0px !important;
}
.situation1.page6 #conteneur_texte .containerIndication.relatives.opened {
  -webkit-transform: translate(0, -150px);
  -moz-transform: translate(0, -150px);
  -ms-transform: translate(0, -150px);
  -o-transform: translate(0, -150px);
  transform: translate(0, -150px);
}
.situation1.page6 #conteneur_texte .containerIndication .trigger-btn {
  background-color: #cc3333;
  padding: 10px 28px;
  color: #f4f4f4;
  text-decoration: none;
  font-family: 'Yanone Kaffeesatz', sans-serif;
  font-size: 30px;
  cursor: pointer;
}
.situation1.page6 #conteneur_texte .containerIndication .trigger-btn img {
  margin-left: 30px;
}
.situation1.page6 #conteneur_texte .containerIndication .trigger-show {
  padding: 25px 15px 0 15px;
  width: 358px;
  border: 1px solid #cc3333;
}
.situation1.page6 #conteneur_texte .containerIndication .trigger-show p {
  font-family: "Open Sans", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 14px;
  margin: 0 0 10px 15px;
}
.situation1.page6 #conteneur_texte .containerIndication .trigger-show ul {
  font-family: "Open Sans", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 14px;
  list-style-image: url('img/puce.png');
}
.situation1.page6 #conteneur_texte .containerIndication .trigger-show ul li {
  margin-bottom: 20px;
  padding-left: 15px;
}
.situation1.page6 #conteneur_texte .containerIndication .trigger2 {
  width: 357px;
}
/*FIREFOX*/
.ff3 .situation1.page6 #conteneur_texte .containerIndication.absolues .trigger-show {
  width: 357px;
}
.ff3 .situation1.page6 #conteneur_texte .containerIndication.relatives .trigger-show {
  width: 353px;
}
.situation1.page7 #conteneur_texte .trigger-btn {
  position: absolute;
  top: 120px;
  left: 50px;
}
.situation1.page7 #conteneur_texte .trigger-btn.menu2 {
  top: 265px;
}
.situation1.page7 #conteneur_texte .trigger-btn.menu3 {
  top: 410px;
}
.situation1.page7 #conteneur_texte .trigger-btn img {
  width: 160px;
  border: 8px solid #dbdbdb;
}
.situation1.page7 #conteneur_texte .trigger-btn.open img {
  border: 8px solid #ff9900;
}
.situation1.page7 #conteneur_texte .trigger-show {
  background: url('img/bgZoneVideo.png') bottom right no-repeat;
  width: 658px;
  height: 388px;
  background-color: #fff;
  position: absolute;
  top: 120px;
  right: 60px;
  border: 20px solid #dbdbdb;
}
.situation1.page8 .img {
  position: absolute;
  left: 40px;
  bottom: 40px;
}
.situation2.page1 #conteneur_texte {
  position: absolute;
  left: 550px;
}
.situation2.page1 #conteneur_texte h2.sousmenu {
  background-color: #c4187f;
  left: 25px;
}
.situation2.page1 #conteneur_texte h3 {
  margin-left: 25px;
}
.situation2.page1 #conteneur_texte h3.eeeee {
  position: absolute;
  top: 0px;
  left: -285px;
  width: 400px;
}
.situation2.page1 #conteneur_texte #finished {
  display: none;
  position: absolute;
  width: 250px;
  text-align: center;
  font-size: 18px;
  top: 450px;
  left: 122px;
}
.situation2.page1 #conteneur_texte #finished p {
  position: absolute;
  background-color: #ffffff;
  padding: 10px;
  z-index: 9999999;
  border: 1px solid #ff9900;
}
.situation2.page1 #conteneur_texte #finished img {
  position: absolute;
  top: 40px;
  left: 110px;
  z-index: 999;
}
.situation2.page1 #conteneur_texte .divSousmenu a {
  position: absolute;
  width: 320px;
  left: 645px;
  padding-left: 20px;
  background-position: 290px center;
}
.situation2.page1 #conteneur_texte .divSousmenu a.menu1 {
  top: 120px;
}
.situation2.page1 #conteneur_texte .divSousmenu a.menu2 {
  top: 170px;
}
.situation2.page1 #conteneur_texte .divSousmenu a.menu3 {
  top: 220px;
}
.situation2.page1 #videoContainer {
  position: absolute;
  top: 145px;
  left: 25px;
}
.situation2.page2 #conteneur_texte img {
  position: absolute;
  top: 100px;
  left: 50%;
  margin-left: -200px;
}
.situation2.page2 .pointer {
  position: absolute;
  left: 730px;
  top: 170px;
}
.situation2.page2 .pointer p {
  padding: 10px;
  background-color: #c4177e;
  color: white;
  font-size: 22px;
  position: absolute;
  top: 90px;
  width: 200px;
  text-align: center;
}
.situation2.page2 .pointer.p2 {
  left: 735px;
  top: 95px;
}
.situation2.page2 .pointer.p2 p {
  top: 75px;
}
.situation2.page2 .pointer.p3 {
  left: 440px;
  top: 110px;
}
.situation2.page2 .pointer.p3 img {
  position: absolute;
  left: 400px;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
.situation2.page2 .pointer.p3 p {
  left: -365px;
  top: 65px;
}
.situation2.page3 #conteneur_texte h2 {
  border: none;
  margin-top: 15px;
  text-align: center;
}
.situation2.page3 #conteneur_texte .consigne {
  position: absolute;
  top: 150px;
  left: 50%;
  margin-left: -172px;
}
.situation2.page3 #conteneur_texte .img {
  position: absolute;
  top: 220px;
  left: 50%;
  margin-left: -200px;
}
.situation2.page3 #conteneur_texte .trigger {
  position: absolute;
  cursor: pointer;
}
.situation2.page3 #conteneur_texte .trigger.good {
  width: 50px;
  height: 40px;
  top: 340px;
  left: 510px;
  z-index: 99999999;
}
.situation2.page3 #conteneur_texte .trigger.wrong {
  width: 405px;
  height: 320px;
  top: 220px;
  left: 280px;
  z-index: 99999;
}
.situation2.page3 #conteneur_texte #retroactions {
  display: block;
  z-index: 99999999999;
  top: 123px;
}
.situation2.page3 #conteneur_texte #retroactions .retro {
  display: none;
}
.situation2.page3 #conteneur_texte #retroactions p {
  font-size: 22px;
  margin: 5px 0 15px 0;
}
.situation2.page4 #conteneur_texte img {
  position: absolute;
  top: 100px;
  left: 50%;
  margin-left: -172px;
}
.situation2.page4 #conteneur_texte img.doigt {
  width: 200px;
}
.situation2.page4 #conteneur_texte img.doigt.d1 {
  top: 245px;
  left: 480px;
}
.situation2.page4 #conteneur_texte img.doigt.d2 {
  top: 200px;
  left: 680px;
}
.situation2.page4 #conteneur_texte img.doigt.d3 {
  top: 185px;
  left: 765px;
}
.situation2.page4 #conteneur_texte img.fleche {
  z-index: 9999;
}
.situation2.page4 #conteneur_texte img.fleche.f1 {
  -webkit-transform: rotate(-145deg);
  -moz-transform: rotate(-145deg);
  -ms-transform: rotate(-145deg);
  -o-transform: rotate(-145deg);
  transform: rotate(-145deg);
  left: 680px;
  top: 200px;
}
.situation2.page4 #conteneur_texte img.fleche.f2 {
  -webkit-transform: rotate(35deg);
  -moz-transform: rotate(35deg);
  -ms-transform: rotate(35deg);
  -o-transform: rotate(35deg);
  transform: rotate(35deg);
  left: 670px;
  top: 215px;
}
.situation2.page5 #conteneur_texte #quiz #choices {
  position: static;
}
.situation2.page5 #conteneur_texte #quiz .question {
  position: absolute;
  top: 135px;
  padding-top: 70px;
}
.situation2.page5 #conteneur_texte #quiz label {
  background-image: none;
  background-color: #f4f4f4;
  border: 2px solid #f4f4f4;
  border-radius: 20px;
  top: 100px;
  -webkit-transition: border-color 0.5 ease;
  -moz-transition: border-color 0.5 ease;
  -ms-transition: border-color 0.5 ease;
  -o-transition: border-color 0.5 ease;
  transition: border-color 0.5 ease;
}
.situation2.page5 #conteneur_texte #quiz label img {
  padding: 10px;
  width: 220px;
}
.situation2.page5 #conteneur_texte #quiz label:hover {
  border-color: #c4187f;
}
.situation2.page5 #conteneur_texte #quiz label.checked.good {
  border-color: green;
}
.situation2.page5 #conteneur_texte #quiz label.checked.wrong {
  border-color: red;
}
.situation2.page5 #conteneur_texte #quiz .time1 {
  left: 260px;
}
.situation2.page5 #conteneur_texte #quiz .time2 {
  left: 490px;
}
.situation2.page5 #conteneur_texte #quiz .time3 {
  left: 720px;
}
.situation2.page5 #conteneur_texte #quiz #retroactions {
  top: 75px;
}
.situation2.page5 #conteneur_texte #quiz #retroactions p {
  font-size: 18px;
  margin-bottom: 25px;
}
.situation2.page5 #conteneur_texte #quiz #retroactions img {
  margin-bottom: 10px;
}
.situation2.page6 #conteneur_texte img {
  position: absolute;
  top: 120px;
  left: 50%;
  margin-left: -266px;
}
.situation2.page6 #conteneur_texte img.fleche {
  left: 820px;
  top: 350px;
}
.situation2.page6 #conteneur_texte img.trajet {
  left: 600px;
  top: 190px;
  margin: 0;
}
.situation2.page6 #conteneur_texte img.trajet.t2 {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 297px;
  left: 545px;
}
.situation2.page6 #conteneur_texte img.trajet.t3 {
  -webkit-transform: rotate(-20deg);
  -moz-transform: rotate(-20deg);
  -ms-transform: rotate(-20deg);
  -o-transform: rotate(-20deg);
  transform: rotate(-20deg);
  top: 148px;
  left: 540px;
}
.situation3.page1 #conteneur_texte h2.sousmenu {
  top: 240px;
  background-color: #669933;
  height: 100px;
  padding-top: 20px;
  line-height: 0.5em;
}
.situation3.page1 #conteneur_texte .divSousmenu {
  top: 240px;
}
.situation3.page1 #conteneur_texte .divSousmenu a {
  padding-left: 20px;
}
.situation3.page1 #conteneur_texte #finished {
  display: none;
  position: absolute;
  width: 250px;
  text-align: center;
  font-size: 18px;
  top: 450px;
  left: 675px;
}
.situation3.page1 #conteneur_texte #finished p {
  position: absolute;
  background-color: #ffffff;
  padding: 10px;
  z-index: 9999999;
  border: 1px solid #ff9900;
}
.situation3.page1 #conteneur_texte #finished img {
  position: absolute;
  top: 40px;
  left: 110px;
  z-index: 999;
}
.situation3.page2 #conteneur_texte img {
  position: absolute;
  top: 100px;
  left: 50%;
  margin-left: -290px;
}
.situation3.page2 .pointer {
  position: absolute;
  left: 800px;
  top: 115px;
}
.situation3.page2 .pointer p {
  padding: 10px;
  background-color: #669933;
  color: white;
  font-size: 22px;
  position: absolute;
  top: 95px;
  width: 190px;
  text-align: center;
  left: -50px;
}
.situation3.page2 .pointer.p1 {
  left: 800px;
  top: 195px;
}
.situation3.page2 .pointer.p2 {
  left: 460px;
  top: 135px;
}
.situation3.page2 .pointer.p2 img {
  position: absolute;
  left: 400px;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
.situation3.page2 .pointer.p2 p {
  left: -365px;
  top: 75px;
}
.situation3.page2 .pointer.p3 {
  left: 450px;
  top: 180px;
}
.situation3.page2 .pointer.p3 img {
  position: absolute;
  left: 400px;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
.situation3.page2 .pointer.p3 p {
  left: -355px;
  top: 122px;
}
.situation3.page4 #conteneur_texte h2 {
  border: none;
  margin-top: 15px;
  text-align: center;
}
.situation3.page4 #conteneur_texte .consigne {
  position: absolute;
  top: 150px;
  left: 50%;
  margin-left: -156px;
}
.situation3.page4 #conteneur_texte .img {
  position: absolute;
  width: 440px;
  top: 205px;
  left: 50%;
  margin-left: -220px;
}
.situation3.page4 #conteneur_texte .trigger {
  position: absolute;
  cursor: pointer;
}
.situation3.page4 #conteneur_texte .trigger.good {
  width: 35px;
  height: 45px;
  top: 315px;
  left: 495px;
  z-index: 99999999;
  -webkit-transform: rotate(-30deg);
  -moz-transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
  -o-transform: rotate(-30deg);
  transform: rotate(-30deg);
}
.situation3.page4 #conteneur_texte .trigger.wrong {
  width: 440px;
  height: 330px;
  top: 205px;
  left: 260px;
  z-index: 99999;
}
.situation3.page4 #conteneur_texte #retroactions {
  display: block;
  z-index: 99999999999;
  top: 96px;
}
.situation3.page4 #conteneur_texte #retroactions .retro {
  display: none;
}
.situation3.page4 #conteneur_texte #retroactions img {
  width: 440px;
}
.situation3.page4 #conteneur_texte #retroactions p {
  padding: 0 100px;
  font-size: 22px;
  margin: 5px 0 15px 0;
}
.situation4.page1 #conteneur_texte {
  position: absolute;
  left: 550px;
}
.situation4.page1 #conteneur_texte.off {
  display: none;
}
.situation4.page1 #conteneur_texte h2.sousmenu {
  background-color: #0b5c7a;
  left: 25px;
  top: 145px;
  height: 281px;
}
.situation4.page1 #conteneur_texte h3 {
  margin-left: 25px;
}
.situation4.page1 #conteneur_texte h3.eeeee {
  position: absolute;
  top: 0px;
  left: -285px;
  width: 400px;
}
.situation4.page1 #conteneur_texte .text {
  position: absolute;
  color: #f4f4f4;
  font-size: 28px;
  left: 56px;
  top: 305px;
  width: 250px;
}
.situation4.page1 #conteneur_texte .text.text2 {
  top: 343px;
}
.situation4.page1 #conteneur_texte .text.text3 {
  top: 380px;
}
.situation4.page1 #conteneur_texte #finished {
  display: none;
  position: absolute;
  width: 250px;
  text-align: center;
  font-size: 18px;
  top: 450px;
  left: 122px;
}
.situation4.page1 #conteneur_texte #finished p {
  position: absolute;
  background-color: #ffffff;
  padding: 10px;
  z-index: 9999999;
  border: 1px solid #ff9900;
}
.situation4.page1 #conteneur_texte #finished img {
  position: absolute;
  top: 40px;
  left: 110px;
  z-index: 999;
}
.situation4.page1 #conteneur_texte .divSousmenu a {
  position: absolute;
  width: 320px;
  left: 645px;
  padding-left: 20px;
  background-position: 290px center;
}
.situation4.page1 #conteneur_texte .divSousmenu a.menu1 {
  top: 150px;
}
.situation4.page1 #conteneur_texte .divSousmenu a.menu2 {
  top: 190px;
}
.situation4.page1 #conteneur_texte .divSousmenu a.menu3 {
  top: 230px;
}
.situation4.page1 #videoContainer {
  position: absolute;
  top: 145px;
  left: 25px;
}
.situation4.page2 #conteneur_texte img.genou {
  position: absolute;
  top: 100px;
  left: 50%;
  margin-left: -400px;
}
.situation4.page2 .pointer {
  position: absolute;
  left: 950px;
  top: 170px;
}
.situation4.page2 .pointer p {
  left: -190px;
  padding: 10px;
  background-color: #0b5c7a;
  color: white;
  font-size: 22px;
  position: absolute;
  top: 90px;
  width: 200px;
  text-align: center;
}
.situation4.page2 .pointer.p1 img {
  position: absolute;
  top: 100px;
  left: -320px;
}
.situation4.page2 .pointer.p2 {
  left: 290px;
  top: 275px;
}
.situation4.page2 .pointer.p2 img {
  position: absolute;
  left: -300px;
  top: 100px;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
.situation4.page2 .pointer.p2 p {
  left: -300px;
}
.situation4.page2 .pointer.p3 {
  left: 750px;
  top: 80px;
}
.situation4.page2 .pointer.p3 img {
  position: absolute;
  left: -270px;
  top: 100px;
}
.situation4.page2 .pointer.p3 p {
  left: 10px;
  top: 84px;
}
.situation4.page2 .pointer.p4 {
  left: 425px;
  top: 130px;
}
.situation4.page2 .pointer.p4 img {
  position: absolute;
  left: -350px;
  top: 100px;
  -webkit-transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  transform: scaleX(-1);
}
.situation4.page2 .pointer.p4 p {
  top: 83px;
  left: -425px;
}
.situation4.page2 .pointer.p5 {
  left: 395px;
  top: 190px;
}
.situation4.page2 .pointer.p5 img {
  position: absolute;
  left: -355px;
  top: 100px;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
.situation4.page2 .pointer.p5 p {
  left: -395px;
}
.situation4.page3 #conteneur_texte h2 {
  border: none;
  margin-top: 15px;
  text-align: center;
}
.situation4.page3 #conteneur_texte .consigne {
  position: absolute;
  top: 150px;
  left: 50%;
  margin-left: -156px;
}
.situation4.page3 #conteneur_texte .img {
  position: absolute;
  width: 550px;
  top: 212px;
  left: 50%;
  margin-left: -275px;
}
.situation4.page3 #conteneur_texte .trigger {
  position: absolute;
  cursor: pointer;
}
.situation4.page3 #conteneur_texte .trigger.good {
  width: 75px;
  height: 65px;
  top: 315px;
  left: 440px;
  z-index: 99999999;
}
.situation4.page3 #conteneur_texte .trigger.wrong {
  width: 550px;
  height: 304px;
  top: 210px;
  left: 205px;
  z-index: 99999;
}
.situation4.page3 #conteneur_texte #retroactions {
  display: block;
  z-index: 99999999999;
  top: 115px;
}
.situation4.page3 #conteneur_texte #retroactions .retro {
  display: none;
}
.situation4.page3 #conteneur_texte #retroactions p {
  padding: 0 100px;
  font-size: 22px;
  margin: 5px 0 15px 0;
}
.situation4.page3 #conteneur_texte #retroactions img {
  width: 550px;
}
.situation4.page4 #conteneur_texte #quiz #choices {
  position: static;
}
.situation4.page4 #conteneur_texte #quiz .time1 {
  top: 100px;
  left: 300px;
  width: 185px;
  height: 185px;
}
.situation4.page4 #conteneur_texte #quiz .time1 span {
  font-size: 40px;
  line-height: 35px;
}
.situation4.page4 #conteneur_texte #quiz .time2 {
  top: 220px;
  left: 520px;
  width: 185px;
  height: 185px;
}
.situation4.page4 #conteneur_texte #quiz .time2 span {
  font-size: 40px;
  line-height: 35px;
}
.situation4.page4 #conteneur_texte #quiz .time3 {
  top: 70px;
  left: 720px;
  width: 185px;
  height: 185px;
}
.situation4.page4 #conteneur_texte #quiz .time3 span {
  font-size: 36px;
  line-height: 35px;
}
.situation4.page4 #conteneur_texte #quiz #retroactions {
  top: 380px;
}
.situation4.page4 #conteneur_texte #quiz #retroactions p {
  font-size: 20px;
  margin-bottom: 15px;
}