/**
 *
 */
@import url('https://fonts.googleapis.com/css?family=Ubuntu:400,400i,500,500i,700,700i');

/*
html, body, .reveal div:not(.mejs__container):not(.mejs__horizontal-volume-current), .reveal span, .reveal applet, .reveal object, .reveal iframe,
.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6, .reveal p, .reveal blockquote, .reveal pre,
.reveal a:not(.mejs__horizontal-volume-slider), .reveal abbr, .reveal acronym, .reveal address, .reveal big, .reveal cite, .reveal code,
.reveal del, .reveal dfn, .reveal em, .reveal img, .reveal ins, .reveal kbd, .reveal q, .reveal s, .reveal samp,
.reveal small, .reveal strike, .reveal strong, .reveal sub, .reveal sup, .reveal tt, .reveal var,
.reveal b, .reveal u, .reveal center,
.reveal dl, .reveal dt, .reveal dd, .reveal ol, .reveal ul, .reveal li,
.reveal fieldset, .reveal form, .reveal label, .reveal legend,
.reveal table, .reveal caption, .reveal tbody, .reveal tfoot, .reveal thead, .reveal tr, .reveal th, .reveal td,
.reveal article, .reveal aside, .reveal canvas, .reveal details, .reveal embed,
.reveal figure, .reveal figcaption, .reveal footer, .reveal header, .reveal hgroup,
.reveal menu, .reveal nav, .reveal output, .reveal ruby, .reveal section, .reveal summary,
.reveal time, .reveal mark, .reveal audio, .reveal video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }*/

/*********************************************
 * GLOBAL STYLES
 *********************************************/
body {
  color: #000;
  font-family: 'Ubuntu', sans-serif;
  font-weight: normal;
  font-size:100%;
  line-height:1.3;
  word-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-backface-visibility: hidden;
}

body * {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  -webkit-backface-visibility: hidden;
}

/*html, body, .reveal div, .reveal span, .reveal applet, .reveal object, .reveal iframe, .reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6, .reveal p, .reveal blockquote, .reveal pre, .reveal a, .reveal abbr, .reveal acronym, .reveal address, .reveal big, .reveal cite, .reveal code, .reveal del, .reveal dfn, .reveal em, .reveal img, .reveal ins, .reveal kbd, .reveal q, .reveal s, .reveal samp, .reveal small, .reveal strike, .reveal strong, .reveal sub, .reveal sup, .reveal tt, .reveal var, .reveal b, .reveal u, .reveal center, .reveal dl, .reveal dt, .reveal dd, .reveal ol, .reveal ul, .reveal li, .reveal fieldset, .reveal form, .reveal label, .reveal legend, .reveal table, .reveal caption, .reveal tbody, .reveal tfoot, .reveal thead, .reveal tr, .reveal th, .reveal td, .reveal article, .reveal aside, .reveal canvas, .reveal details, .reveal embed, .reveal figure, .reveal figcaption, .reveal footer, .reveal header, .reveal hgroup, .reveal menu, .reveal nav, .reveal output, .reveal ruby, .reveal section, .reveal summary, .reveal time, .reveal mark, .reveal audio, .reveal video {
     -webkit-backface-visibility: hidden;
}*/

svg {
  display: block;
}

.reveal .slide-background {
    background-position: top left!important;
}

::selection {
  color: #fff;
  background: #3ACBE4;
  text-shadow: none; }

::-moz-selection {
  color: #fff;
  background: #3ACBE4;
  text-shadow: none; 
}

input, button, submit { 
  border:none;
  background: none;
  cursor:pointer;
} 


.reveal .slides > section {
  top: 0;
}

.reveal .slides > section,
.reveal .slides > section > section {
  /*font-weight: inherit; */
}


/*********************************************
 * HEADERS
 *********************************************/
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
  margin: 0 0 0.25em 0;
  line-height:110%;
  font-weight: normal;
  letter-spacing: normal;
  text-transform: none;
  text-shadow: none;
  word-wrap: break-word; }

.reveal h1 {
  font-size: 2em; }

.reveal h2 {
  font-size: 1.6em; }

.reveal h3 {
  font-size: 1.3em; }

.reveal h4 {
  font-size: 1em; }

.reveal h1 {
  text-shadow: none; }

/*********************************************
 * OTHER
 *********************************************/
.reveal p {
  margin: 0 0 0.75em 0; }

/* Ensure certain elements are never larger than the slide itself */
.reveal img,
.reveal video,
.reveal iframe {
  max-width: 100%;
  max-height: 100%; }

.reveal strong,
.reveal b {
  font-weight: bold; }

.reveal em {
  font-style: italic; }

.reveal ol,
.reveal dl,
.reveal ul {
  display: inline-block;
  text-align: left;
  margin: 0 0 0 1em; }

.reveal ol {
  list-style-type: decimal; }

.reveal ul {
  list-style-type: disc; }

.reveal ul ul {
  list-style-type: square; }

.reveal ul ul ul {
  list-style-type: circle; }

.reveal ul ul,
.reveal ul ol,
.reveal ol ol,
.reveal ol ul {
  display: block;
  margin-left: 40px; }

.reveal dt {
  font-weight: bold; }

.reveal dd {
  margin-left: 40px; }

.reveal q,
.reveal blockquote {
  quotes: none; }

.reveal blockquote {
  display: block;
  position: relative;
  width: 70%;
  margin: 20px auto;
  padding: 5px;
  font-style: italic;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }

.reveal blockquote p:first-child,
.reveal blockquote p:last-child {
  display: inline-block; }

.reveal q {
  font-style: italic; }

.reveal pre {
  display: block;
  position: relative;
  width: 90%;
  margin: 20px auto;
  text-align: left;
  font-size: 0.55em;
  font-family: monospace;
  word-wrap: break-word;
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }

.reveal code {
  font-family: monospace; }

.reveal pre code {
  display: block;
  padding: 5px;
  overflow: auto;
  max-height: 400px;
  word-wrap: normal; }

.reveal table {
  margin: auto;
  border-collapse: collapse;
  border-spacing: 0; }

.reveal table th {
  font-weight: bold; }

.reveal table th,
.reveal table td {
  text-align: left;
  padding: 0.2em 0.5em 0.2em 0.5em;
  border-bottom: 1px solid; }

.reveal table th[align="center"],
.reveal table td[align="center"] {
  text-align: center; }

.reveal table th[align="right"],
.reveal table td[align="right"] {
  text-align: right; }

.reveal table tbody tr:last-child th,
.reveal table tbody tr:last-child td {
  border-bottom: none; }

.reveal sup {
  vertical-align: super; }

.reveal sub {
  vertical-align: sub; }

.reveal small {
  display: inline-block;
  font-size: 0.6em;
  vertical-align: top; }

.reveal small * {
  vertical-align: top; }

/*********************************************
 * LINKS
 *********************************************/
.reveal a {
  color: #00008B;
  text-decoration: none;
  -webkit-transition: color .15s ease;
  -moz-transition: color .15s ease;
  transition: color .15s ease; }

.reveal a:hover {
  color: #0000f1;
  text-shadow: none;
  border: none; }

.reveal .roll span:after {
  color: #fff;
  background: #00003f; }

/*********************************************
 * IMAGES
 *********************************************/
.fancybox {
  display: block;
}
.fancybox img {
  width:100%;
}

.hidden-fragment {
  position: fixed;
  left:-9999px;
  top:-9999px;
}

/* ***** FOCUS ***** */
button:focus, a:focus {
  outline:0;
}

/* ***** BARRE DU BAS ***** */
.bottom-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    z-index: 10;
    background: #21557F;
    font-size: 17px!important;
    font-weight:500;
    color:#fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing:grayscale;
}

.bottom-bar > div {
  border-right:2px solid #4F7B99;
  height:100%;
  padding:0;
  text-align: center;
  width:auto;
  float:left;
}

.bottom-bar > .home {
  width:6.8%;
  min-width:70px;
  padding-top:8px;
}


.is_iPad .bottom-bar > .home {
  min-width:90px;
}

.bottom-bar .mode-lecture  {
  text-transform: uppercase;
  font-size: 15px!important;
  padding-top:2px;
  width:22%;
  min-width: 225px;
  font-weight:700;
}

#mode-video, #mode-diaporama {
  cursor:default;
}

#mode-video.selected, #mode-diaporama.selected {
  color:#3ACBE4;
}

.is_iPad .bottom-bar .mode-lecture {
  min-width:260px;
}

.bottom-bar .diapo-progress {
  width:26.4%;
  min-width: 270px;
}

.bottom-bar .diapo-progress .switchertext {
  display: inline-block;
  position: relative;
  top: 2px;
}

.bottom-bar > div.contenus-supp {
  padding:0;
  position: relative;
  width:37.6%;
  min-width:385px;
}

.is_iPad .bottom-bar > div.contenus-supp {
  min-width: 401px;
  border-right:0
}

.bottom-bar #supplementaire {
  display: block;
  width:100%;
  padding:8px 0 0;
  height:100%;
  cursor: pointer;
}

.bottom-bar #supplementaire:not(.active):hover {
  color:#3ACBE4;
}

.bottom-bar #supplementaire.active {
  background:#3ACBE4;
}

.bottom-bar #supplementaire:after {
  content:"";
  display: inline-block;
  width:15px;
  height:15px;
  background-image:url(../img/supp-arrow.svg);
  background-size:15px 15px;
  margin-left:10px;
  position: relative;
  top:2px;
  -moz-transition:transform ease-in-out 0.2s;
  -webkit-transition:transform ease-in-out 0.2s;
  -o-transition:transform ease-in-out 0.2s;
  -ms-transition:transform ease-in-out 0.2s;
  transition:transform ease-in-out 0.2s;
}

.bottom-bar #supplementaire:not(.active):hover:after {
  background-image:url(../img/supp-arrow-hover.svg);
}

.bottom-bar #supplementaire.active:after {
  -ms-transform: rotate(180deg); /* IE 9 */
  -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
  transform: rotate(180deg);
}

.bottom-bar #liste-contenus {
  position: absolute;
  top:0;
  left:-2px;
  height:0;
  width:calc(100% + 4px);
  background:#fff;
  color:#333;
  border:2px solid #3FB2E3;
  border-bottom:0;
  padding:0 10px 0 15px;
  visibility: hidden;
  -webkit-border-top-left-radius: 4px;
  -webkit-border-top-right-radius: 4px;
  -moz-border-radius-topleft: 4px;
  -moz-border-radius-topright: 4px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  transition:all ease-in-out 0.4s;
}

.bottom-bar #liste-contenus.open {
  display: block;
  top:-280px;
  height:280px;
  visibility: visible;
  padding:10px 10px 10px 15px;
  
}

#suppcontenttomove {
  display: none;
}

.bottom-bar #liste-contenus .liste-container {
  overflow: auto;
  height:100%;
  padding-right:5px;
  text-align: left;
  color:#333;
}

.bottom-bar #liste-contenus .subtitle {
  font-weight:600;
  font-size:17px;
  padding-top:0.75em;
  display: block;
}

.bottom-bar #liste-contenus .subtitle:first-child {
  padding-top:0em;
}

.bottom-bar #liste-contenus a {
  color:#333;
  font-size:15px;
  font-weight:400;
  text-decoration: none;
}

.bottom-bar #liste-contenus a:hover, .bottom-bar #liste-contenus a:active {
  color:#3FB2E3;
  text-decoration: underline;
}

.bottom-bar #liste-contenus ul {
  margin:0.25em 0 0;
  padding-left: 0;
}

.bottom-bar #liste-contenus ul li {
  padding-bottom:0.25em;
  padding-left: 0.85em;
  list-style-type: none;
  background:url('../img/supp-list.svg') no-repeat left 8px;
  background-size:5px auto;
}


/* Automatique */
.bottom-bar .diapo-control {
  width:26.4%;
  min-width: 270px;
}

.is_iPad .bottom-bar .diapo-control {
  border-right:0;
}

.duree {
  display: none;
  position: absolute;
  text-align: left;
  bottom: 65px;
  border:0;
}

.duree.visible {
  display: block;
}

.is_iPad .duree {
  bottom: 60px;
}

.duree .duree-container {
  display: inline-block;
  padding:3px 12px;
  background:#21557f;
  color:#fff;
  text-transform: uppercase;
  font-size:15px;
  font-weight: 600;
  position: relative;
  top:7px;
  left:20px;
  border-radius: 20px;
  letter-spacing: 0.2px;
}

.bottom-bar .audio-volume  {
  width: 37.6%;
  min-width: 385px;
}

.bottom-bar .audio-volume .icone-volume {
  background-image:url(../img/volume.svg);
  background-size: 30px 24px;
  display: inline-block;
  width:30px;
  height:24px;
  position: relative;
  top: 7px;
  margin-right: 15px;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .bottom-bar .audio-volume .icone-volume {
    top:-27px;
  }
}

/* Global */

.bottom-bar .full-screen {
  border:none;
  float:right;
  width:6.8%;
  min-width:70px;
}

.diaposwitcher {
  display:inline-block;
  margin-left:5px;
  color:#21557F;
  position: relative;
  top:8px;
}

.diaposwitcher button {
  display:block;
  float:left;
  background-color:#21557F;
  color:white;
  border-top:2px solid white;
  border-bottom:2px solid white;
  height:24px;
  width:34px;
  text-align:center;
}

.navigate-video-left, .navigate-manuel-left {
  border-left:2px solid white;
  -webkit-border-top-left-radius: 12px;
  -webkit-border-bottom-left-radius: 12px;
  -moz-border-radius-topleft: 12px;
  -moz-border-radius-bottomleft: 12px;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
  background-image:url(../img/fleche-prev.svg);
  background-size: 8px 12px;
  background-position: center center;
  background-repeat: no-repeat;
}

.navigate-video-right, .navigate-manuel-right {
  border-right:2px solid white;
  -webkit-border-top-right-radius: 12px;
  -webkit-border-bottom-right-radius: 12px;
  -moz-border-radius-topright: 12px;
  -moz-border-radius-bottomright: 12px;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  background-image:url(../img/fleche-next.svg);
  background-size: 8px 12px;
  background-position: center center;
  background-repeat: no-repeat;
}

.navigate-video-left, .navigate-video-right {
  width:28px;
  height:28px;
  border:0;
  background-color:transparent;
  background-position: center center;
  position: relative;
  top:6px;
  border-radius:0;
  background-size: auto 14px;
}

.switcherprogress {
  display:block;
  float:left;
  background:white;
  border-top:2px solid white;
  border-bottom:2px solid white;
  height:24px;
  padding:0;
  font-size: 15px;
  width: 100px;
}
.switcherprogresslastpage {
  display: none;
  float:left;
  background:white;
  border-top:2px solid white;
  border-bottom:2px solid white;
  height:24px;
  padding:0;
  font-size: 15px;
  width: 100px;
}
.reveal-container {
  height:calc(100% - 40px);
}

.bottom-bar a, .bottom-bar a:active {
  color:#fff;
}

.bottom-bar a:hover {
  color:#3ACBE4;
}

.navigate-manuel-left:hover, .navigate-manuel-right:hover {
  background-color:#3ACBE4;
  border-color:#3ACBE4;
  color:white;
}

.navigate-video-left:hover {
  background-image:url(../img/fleche-prev-hover.svg);
}
.navigate-video-right:hover {
  background-image:url(../img/fleche-next-hover.svg);
}

.navigate-video-left:not(.enabled), .navigate-video-left:not(.enabled):hover {
  background-image:url(../img/fleche-prev.svg);
  background-color:transparent;
  opacity:0.4;
  cursor: default;
}

.navigate-video-right:not(.enabled), .navigate-video-right:not(.enabled):hover {
  background-image:url(../img/fleche-next.svg);
  background-color:transparent;
  opacity:0.4;
  cursor: default;
}

.navigate-manuel-left:not(.enabled), .navigate-manuel-left:not(.enabled):hover,
.navigate-manuel-right:not(.enabled), .navigate-manuel-right:not(.enabled):hover {
  background-color:#222;
  border-color:white;
  cursor:default;
}

#fullscreen {
  display: inline-block;
  width:24px;
  height: 24px;
  background-image:url(../img/fullscreen.svg);
  background-size:100% 100%;
  position: relative;
  top:7px;
  margin:0!important;
  padding:0!important;
}

#fullscreen:hover {
  background-image:url(../img/fullscreen-hover.svg);
}

#fullscreen.close {
  background-image:url(../img/fullscreen-close.svg);
}

#fullscreen.close:hover {
  background-image:url(../img/fullscreen-close-hover.svg);
}

#playpause {
  width:28px;
  height:28px;
  background-image:url(../img/play-pause-sprite.svg);
  background-size:328px 28px;
  background-repeat: no-repeat;
  background-position:0 0;
  display: inline-block;
  position: relative;
  top:6px;
  margin: 0 14px;
}

#playpause:not(.disabled):hover {
  background-position:-100px 0;
}

#playpause.pause {
  width:28px;
  height:28px;
  background-position:-200px 0;
  display: inline-block;
}

#playpause.pause:not(.disabled):hover {
  background-position:-300px 0;
}

#playpause.disabled {
  opacity:0.6;
  cursor:default;
}

#maison {
  background-image:url(../img/tdm.svg);
  background-repeat: no-repeat;
  background-size:28px 25px;
  width:28px;
  height:25px;
  cursor:pointer;
}


#maison:hover {
  background-image:url(../img/tdm-hover.svg);
  background-size:28px 25px;
  width:28px;
  height:25px;
}

#maison, #retour {
  background-image:url(../img/tdm.svg);
  background-size:28px 25px;
  width:28px;
  height:25px;
  /*cursor:pointer;*/
}

#maison:hover, #retour:hover, #maison.disabled, #retour.disabled {
  background-image:url(../img/tdm-hover.svg);
}

.reveal .pause-overlay {
  background:rgba(0,0,0,0);
  height:0;
}

/* Barre différente selon le mode de lecture */
.bottom-bar.auto .diapo-progress, .bottom-bar.auto .contenus-supp {
  display: none;
}

.bottom-bar.manuel .diapo-control, .manuel .duree, .bottom-bar.manuel .audio-volume {
  display: none;
}


/* Cacher les lecteurs audio automatiques */
audio:not(.audio-player) {
  width: 0;
  height: 0;
  position: fixed;
  left: -9999px;
}

.audio-player {
  background:#21557F;
  border-radius: 4px;
}

.mejs__controls:not([style*="display: none"]) {
  background:none;
}

.mejs__controls {
    height: 30px;
}
.mejs__button, .mejs__time, .mejs__time-rail {
    height: 30px;
}

.mejs__time-loaded {
  display:none;
}

.mejs__button>button {
    margin: 5px;
}

.mejs__time {
    float: right;
    font-family:'Ubuntu', sans-serif;
    font-size: 12px!important;
    padding: 5px 10px!important;
    box-sizing:border-box;
}

.mejs__time-rail {
    width: 180px;
    padding-top: 12px!important;
}

.mejs__time-total {
  height:6px;
  background:#E5E5E5;
}

.mejs__time-current {
  height:6px;
  background:#3FB2E3;
}

/* temporaire */
.slides {
  backface-visibility: hidden !important;
  -moz-backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}
.slides.chromefix section, .slides.chromefix section a,
.slides.chromefix section .fragment, .slides.chromefix section div.fragment.visible {
  /*-webkit-backface-visibility: initial !important;*/
  /*-webkit-transform-origin: 50% 50%;*/
}


/* Switch vidéo / manuel */
.onoffswitch {
    position: relative; width: 41px;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select: none;
    display:inline-block;
    top: 6px;
    margin:0 5px;
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    height: 24px; padding: 0; line-height: 24px;
    border: 0px solid #E3E3E3; border-radius: 24px;
    background-color: #FFFFFF;
}
.onoffswitch-label:before {
    content: "";
    display: block; width: 24px; margin: 0px;
    background: #3ACBE4;
    position: absolute; top: 0; bottom: 0;
    right: 17px;
    border-radius: 24px;
    /*box-shadow: 0 6px 12px 0px #757575;*/
    transition:all ease-in-out 0.25s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label {
    background-color: #FFFFFF;
}
.onoffswitch-checkbox:checked + .onoffswitch-label, .onoffswitch-checkbox:checked + .onoffswitch-label:before {
   border-color: #FFFFFF;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label:before {
    right: 0px; 
    background-color: #3ACBE4; 
    /*box-shadow: 3px 6px 18px 0px rgba(0, 0, 0, 0.2);*/
    transition:all ease-in-out 0.25s;
}

/* Range */

input[type=range] {
  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
  width: 120px; /* Specific width is required for Firefox. */
  background: transparent; /* Otherwise white in Chrome */
  position: relative;
  top: 0px;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  input[type=range] {
    top: -18px;
  }
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type=range]:focus {
  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

input[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;

  /* Hides the slider so custom styles can be added */
  background: transparent; 
  border-color: transparent;
  color: transparent;
  box-shadow: none;
}

/* Special styling for WebKit/Blink */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 18px;
  width: 18px;
  border-radius: 100%;
  background: #3ACBE4;
  cursor: pointer;
  border:0;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.3), 0px 0px 3px rgba(0,0,0,0.3);
  margin-top: -4px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
  /*box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* Add cool effects to your sliders! */
}

/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 3px rgba(0,0,0,0.3), 0px 0px 3px rgba(0,0,0,0.3);
  height: 18px;
  width: 18px;
  border-radius: 100%;
  background: #3ACBE4;
  border:0;
  cursor: pointer;
}


/* All the same stuff for IE */
input[type=range]::-ms-thumb {
  /*box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;*/
  height: 18px;
  width: 18px;
  border-radius: 100%;
  background: #3ACBE4;
  border:0;
  cursor: pointer;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.3), 0px 0px 3px rgba(0,0,0,0.3);
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  background: #ebebeb;
  border-radius: 10px;
}

input[type=range]::-moz-range-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  background: #ebebeb;
  border-radius: 10px;
}

input[type=range]::-moz-range-progress {
  background: #3ACBE4;
  height:10px;
  border-radius:10px;
}

input[type=range]::-ms-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
  box-shadow:none;
}
input[type=range]::-ms-fill-lower {
  background: #3ACBE4;
  border-radius: 10px;
  /*box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;*/
}

input[type=range]::-ms-fill-upper {
  background: #ebebeb;
  /*border: 0.2px solid #010101;*/
  border-radius: 10px;
}

/* ZOOM */
.zoom-functions {
  display: none;
  position: fixed;
  background-color:#c8cbcf;
  background-image:url(../img/draggable-handle.svg);
  background-size: 17px 17px;
  background-repeat: no-repeat;
  background-position: 7px 4px;
  top:20px;
  right:20px;
  z-index:9999;
  display: none;
  width:calc(44px * 2);
  padding-top:25px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -webkit-box-shadow: 1px 2px 5px 0px rgba(0,0,0,0.35);
  -moz-box-shadow: 1px 2px 5px 0px rgba(0,0,0,0.35);
  box-shadow: 1px 2px 5px 0px rgba(0,0,0,0.35);
  cursor:pointer;
}

.btnContainer {
  background-color:#21557f;
  -webkit-border-bottom-left-radius: 8px;
  -moz-border-radius-bottomleft: 8px;
  border-bottom-left-radius: 8px;
  -webkit-border-bottom-right-radius: 8px;
  -moz-border-radius-bottomright: 8px;
  border-bottom-right-radius: 8px;
  overflow: hidden;
}

.zoom-functions.hasLoupe:not(.is_iPad) {
  width:calc(44px * 3);
}

.is_iPad a.zoom-in, .is_iPad a.zoom-reset {
  display: none!important;
}

.zoom-functions a {
  width:44px;
  height:44px;
  background-color:transparent;
  background-image:url(../img/fleche-anim-next.svg);
  background-size: 9px 18px;
  background-repeat: no-repeat;
  background-position: center center;
  margin:0;
  border-left:2px solid #4d7799;
  float:left;
}

.zoom-functions a.navigate-left, .zoom-functions a.prevBlocked {
  background-image:url(../img/fleche-anim-prev.svg);
  -webkit-border-bottom-left-radius: 8px;
  -moz-border-radius-bottomleft: 8px;
  border-bottom-left-radius: 8px;
  border-left:0;
}
.zoom-functions a.navigate-right, .zoom-functions a.restart {
  -webkit-border-bottom-right-radius: 8px;
  -moz-border-radius-bottomright: 8px;
  border-bottom-right-radius: 8px;
}

.zoom-functions a.navigate-left {
  display: none;
}

.zoom-functions a.prevBlocked {
  opacity:0.4;
  cursor:default;
}

a.zoom-out {
  display: none;
  background-image:url(../img/zoom-out.svg);
}

a.zoom-in, a.zoom-reset {
  background-image:url(../img/zoom-in.svg);
  background-size:20px 20px;
  cursor:pointer;
}
a.zoom-reset {
  display:none;
  background-image:url(../img/zoom-out.svg);
}

.zoom-functions a:not(.prevBlocked):hover {
  background-color:#3FB2E3;
}

.full-height {
  height:100%!important;
}

/* utilitaires */
.absolute {
  position: absolute!important;
}

.block {
  display: block;
}

.center-block {
  margin-left:auto!important;
  margin-right:auto!important;
}

.align-left {
  text-align:left;
}

.align-center {
  text-align:center;
}

.align-right {
  text-align:right;
}

.clearer {
  clear:both;
}


/* Styles spécifiques pour ipad */

.is_iPad .full-screen, .is_iPad .audio-volume {
  display:none;
}



/*********************************************
 * ANIMATIONS
 *********************************************/

 span.fragment {
  display: inline-block;
 }

 /* Grow seulement "grow" quand current */
.reveal .slides section .fragment.grow.visible:not(.current-fragment) {
  -webkit-transform: none;
  transform: none;
}

.chromefix.reveal .slides section .fragment.grow {
  backface-visibility: hidden !important;
  transform-origin: 50% 50%!important;
}


.reveal .slides section .fragment.surligner-jaune {
  opacity: 1;
  visibility: visible;
  display: inline-block;
  background: none;
  position: relative;
  z-index:1;
}

.reveal .slides section .fragment.surligner-jaune::after {
  position: absolute;
  content: '';
  top:0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: #F9FF4A;
/*  transform-origin:left;
   transition:width 0.5s ease; */
  z-index:-1;
}

.reveal .slides section .fragment.surligner-jaune.visible.current-fragment::after {
  width: 100%;
}


/* Effet dactylo -- à ajuster */
.reveal .slides section .fragment.typewriter {
  opacity: 0;
  visibility: inherit;
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
}
.reveal .slides section .fragment.typewriter.visible {
    opacity:1;
    animation: 
    typing 3.5s steps(40, end);
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}


/* *** Bordure animée *** */

.reveal .slides section .fragment.anim-border {
  background:#fff;
  position: relative;
  opacity: 1;
  visibility: visible;
}

.reveal .slides section .fragment.anim-border:before, 
.reveal .slides section .fragment.anim-border:after {
    /* Set border to invisible, so we don't see a 4px border on a 0x0 element before the transition starts */
    box-sizing: inherit;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border: 3px solid transparent;
    width: 0;
    height: 0;
  }

/* This covers the top & right borders (expands right, then down) */
.reveal .slides section .fragment.anim-border:before {
  top: 0;
  left: 0;
}

/* And this the bottom & left borders (expands left, then up) */
.reveal .slides section .fragment.anim-border:after {
  bottom: 0;
  right: 0;
}

  /* Hover styles */
.reveal .slides section .fragment.anim-border.visible:before, 
.reveal .slides section .fragment.anim-border.visible:after {
  width: 100%;
  height: 100%;
}

/* Visiblité des bordures et variantes de couleur */

/* Défaut */
.reveal .slides section .fragment.anim-border.visible:before {
  border-top-color: #E2E5E6; /* Make borders visible */
  border-right-color: #E2E5E6; 
  /* Width expands first */
  transition:
    width 0.25s ease-out, 
    height 0.25s ease-out 0.25s; /* And then height */
}

.reveal .slides section .fragment.anim-border.visible:after {
  border-bottom-color: #E2E5E6; /* Make borders visible */
  border-left-color: #E2E5E6;
  /* Wait for ::before to finish before showing border */
  /* And then exanding width */
  transition:
    border-color 0s ease-out 0.5s, 
    width 0.25s ease-out 0.5s, 
    height 0.25s ease-out 0.75s; /* And finally height */
}

/* Bordure déjà visible */
.visible-border {
  /*border:3px solid #E2E5E6!important;*/
  background:#fff;
  position: relative;
}

.visible-border:before {
  content:"";
  display: block;
  position: absolute;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  border:3px solid #E2E5E6!important;
  top:0;
  left:0;
}


/* Fade in plus lent */
.reveal .slides section .fragment.fade-in-slow {
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}

.reveal .slides section .fragment.fade-in-carte {
  -webkit-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
    visibility: visible!important;
}
.reveal .slides section .fragment.fade-in-carte.carte-1s {
  -webkit-transition: opacity 1s ease;
    transition: opacity 1s ease;
}
.reveal .slides section .fragment.fade-in-carte.carte-2s {
  -webkit-transition: opacity 2s ease;
    transition: opacity 2s ease;
}
.reveal .slides section .fragment.fade-in-carte.carte-3s {
  -webkit-transition: opacity 3s ease;
    transition: opacity 3s ease;
}
.reveal .slides section .fragment.fade-in-carte.carte-4s {
  -webkit-transition: opacity 4s ease;
    transition: opacity 4s ease;
}
.reveal .slides section .fragment.fade-in-carte.carte-5s {
  -webkit-transition: opacity 5s ease;
    transition: opacity 5s ease;
}

.reveal .slides section .fragment.fade-in-carte.current-fragment {
    opacity: 1;
}


/*********************************************
 * GRILLE
 *********************************************/

 /* http://simplegrid.io/ */

.row {
  position: relative;
  width: 100%;
  overflow: hidden;
  /*background:rgba(0,50,0,0.2);*/
}

.row.has-overflow {
  overflow: visible;
}

.row [class^="col"] {
    float: left;
    /*margin: 8px 1%;*/
    margin:10px;
    /*padding:10px;*/
    min-height: 2px;
    box-sizing: border-box;
    position: relative;
    /*background:rgba(150,0,0,0.2);*/
}

.row [class^="col"] p:last-child, .row [class^="col"] h2:last-child, .row [class^="col"] h3:last-child {
    margin-bottom:0;
}


.col-1 {
  width:calc(8.33333333% - 20px);
}

.col-2 {
  width:calc(16.6666666% - 20px);
}

.col-3 {
    width: calc(25% - 20px);
}

.col-4 {
    width:calc(33.3333333% - 20px);
}

.col-5 {
    width:calc(41.66666666% - 20px);
}

.col-6 {
    width: calc(50% - 20px);
}

.col-7 {
    width:calc(58.333333333% - 20px);
}

.col-8 {
    width:calc(66.66666666% - 20px);
}

.col-9 {
    width: calc(75% - 20px);
}

.col-10 {
  width:calc(83.3333333% - 20px);
}

.col-11 {
      width:calc(91.66666666% - 20px);
}

.col-12 {
    width: calc(100% - 20px);
}

.bloc-blanc p:last-child {
  margin-bottom:0;
  padding-bottom:0;
}

.bloc-blanc {
  background:#fff;
  color:#000;
  border-radius:4px;
  padding:10px!important;
  -webkit-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.15);
  -moz-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.15);
  box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.15);
}


.double-size {
  font-size:2em!important;
  /*line-height:;*/
}

.carte-anim img {
  display: block;
  width:100%;
  position: absolute;
  top:0;
  left:0;
  border: 1px solid transparent; 
}
.carte-anim img.carte-base {
  position: static;
}

.carte-anim .carte-legend {
  position: absolute;
  font-size:12px;
  top: 10px;
  left: 10px;
  padding:4px;
  z-index: 10;
}
.carte-anim .carte-legend .box {
    padding: 4px!important;
}
.carte-anim .carte-legend > div[class^="col"] > .row {
  background:rgba(255,255,255,0.9);
}

.carte-anim .carte-legend > div[class^="col"] > .row > div[class^="col"] {
  margin: 6px 4px;
}

.carte-anim .carte-legend > div[class^="col"] > .row > .col-1 {
  width:calc(8.33333333% - 8px);
}

.carte-anim .carte-legend > div[class^="col"] > .row > .col-2 {
  width:calc(16.6666666% - 8px);
}

.carte-anim .carte-legend > div[class^="col"] > .row > .col-3 {
    width: calc(25% - 8px);
}

.carte-anim .carte-legend > div[class^="col"] > .row > .col-4 {
    width:calc(33.3333333% - 8px);
}

.carte-anim .carte-legend > div[class^="col"] > .row > .col-5 {
    width:calc(41.66666666% - 8px);
}

.carte-anim .carte-legend > div[class^="col"] > .row > .col-6 {
    width: calc(50% - 8px);
}

.carte-anim .carte-legend > div[class^="col"] > .row > .col-7 {
    width:calc(58.333333333% - 8px);
}

.carte-anim .carte-legend > div[class^="col"] > .row > .col-8 {
    width:calc(66.66666666% - 8px);
}

.carte-anim .carte-legend > div[class^="col"] > .row > .col-9 {
    width: calc(75% - 8px);
}

.carte-anim .carte-legend > div[class^="col"] > .row > .col-10 {
  width:calc(83.3333333% - 8px);
}

.carte-anim .carte-legend > div[class^="col"] > .row > .col-11 {
      width:calc(91.66666666% - 8px);
}

.carte-anim .carte-legend > div[class^="col"] > .row > .col-12 {
    width: calc(100% - 8px);
}

.carte-anim .carte-legend > div[class^="col"] > .row > .no-margin {
    margin-top: -6px!important;
    margin-bottom: -6px!important;
}


.full-width {
  display: block;
  width:100%;
}

.vertical-title {
  background:#eee;
  border:1px solid transparent;
  padding: 0.3em 0 0.35em!important;
  height: 30px;
  left: 30px;
  transform:rotate(-90deg);
  transform-origin:bottom left;
  position: absolute;
  bottom:0;
  z-index:10;
  backface-visibility: hidden;
}

.vertical-title-right {
  background:#eee;
  border:1px solid transparent;
  padding: 0.3em 0 0.35em!important;
  height: 30px;
  right: 30px;
  transform:rotate(-90deg);
  transform-origin:top right;
  position: absolute;
  top:0;
  z-index:10;
  backface-visibility: hidden;
}

.row.has-vertical {
  /*min-height:130px;*/
}


/*Overview/maison*/
div.overview-bloc {
  padding:0!important;
  transition:all ease-in-out 0.2s;
  position: relative;
}

.manuel div.overview-bloc.ignore-diaporama {
  display: none;
}

.auto div.overview-bloc button:after {
  content:"";
  display: block;
  background-color:rgba(221,222,225,0.85);
  background-image:url(../img/play-sommaire.svg);
  background-size: 18px 20px;
  background-position: 18px 16px;
  background-repeat: no-repeat;
  border:2px solid white;
  border-radius: 100%;
  width:50px;
  height:50px;
  position: absolute;
  top:calc(50% - 25px);
  left:calc(50% - 25px);
  transition:all ease-in-out 0.2s;
  -webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.25);
  -moz-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.25);
  box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.25);
}

div.overview-bloc:hover button img {
  border:3px solid #6D7C82;
}

.auto div.overview-bloc button:hover:after {
  background-color:#3fb2e3;
  background-image:url(../img/play-sommaire-hover.svg);
}

div.overview-bloc button {
  display: block;
  width:100%;
  height:100%;
  padding: 0;
}

div.overview-bloc button img {
  width:100%;
  border:3px solid #E3E5E5;
  display: block;
  transition:all ease-in-out 0.2s;
}




/* Hacks firefox */


@-moz-document url-prefix() { 
  .bottom-bar > .home {
    padding-top:2px;
  }

  #fullscreen {
    top: 2px;
  }

  #replay {
    top: 3px;
  }

  #playpause {
    top: 3px;
  }

  input[type="range"] {
    top: 6px;
  }
  .navigate-video-left, .navigate-video-right {
    top: 3px;
  }

}



/* HOVER IPAD */

.is_iPad .bottom-bar a:hover, .is_iPad .bottom-bar a:active,
.is_iPad .bottom-bar #supplementaire:not(.active):hover {
  color:#fff;
}

.is_iPad .bottom-bar #supplementaire:not(.active):hover:after {
    background-image: url(../img/supp-arrow-hover.svg);
}

.is_iPad .onoffswitch-label:before {
  transition: none!important;
}

.is_iPad #playpause:not(.disabled):hover {
  background-position:0 0;
}

.is_iPad #playpause.pause:not(.disabled):hover {
  background-position:-200px 0;
}


.bottom-bar a:hover {
  color:#3ACBE4;
}

.is_iPad .navigate-manuel-left:hover, .is_iPad .navigate-manuel-right:hover {
  background-color:transparent;
  border-color:#fff;
  color:white;
}

.is_iPad .navigate-video-left:hover {
  background-image:url(../img/fleche-prev.svg);
}
.is_iPad .navigate-video-right:hover {
  background-image:url(../img/fleche-next.svg);
}