@font-face {
  font-family: 'DINPro-Medium';
  src: url('fonts/DINPro-Medium.eot?#iefix') format('embedded-opentype'),  url('fonts/DINPro-Medium.woff') format('woff'), url('fonts/DINPro-Medium.ttf')  format('truetype'), url('fonts/DINPro-Medium.svg#DINPro-Medium') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'mazdawebcustom';
  src: url('fonts/mazda.eot?#iefix') format('embedded-opentype'),  url('fonts/mazda.woff') format('woff'), url('fonts/mazda.ttf')  format('truetype'), url('fonts/mazda.svg#mazdaweb') format('svg');
  font-weight: normal;
  font-style: normal;
}
body {
    background-color:#FFF;
    margin:0;
    padding:0;
    font-family: 'mazdawebcustom';
    overflow:hidden;
    line-height:1.15;
}
.fond {
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    background-color:#FFF;
}
#big-wrapper {
    overflow:hidden;
    position:fixed;
    height:100vh;
    height: calc( var(--vh, 1vh) * 100 );
    width:100.1vw;
    max-width:56.34vh;
    max-width: calc( var(--vh, 1vh) * 56.34 );
    -webkit-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    left:50vw;
    background-color:#FFF;
}
body.wide #big-wrapper {
    overflow:initial;
}
#anim-container, #sketch-container, #menu-container, #mentions-container, #credits-container {
   position:absolute;
   top:0;
   left:0;
   width:100%;
   height:100%;
   background-color:#000;
}
#main-container {
   position:absolute;
   top:0;
   left:0;
   width:100%;
   height:100%;
   background-color:#FFF;
}
.route {
    opacity:0;
    z-index:1;
}
#menu-container {
    opacity:1;
    z-index:99;
    -webkit-transform: translateX(-105%);
    -o-transform: translateX(-105%);
    -ms-transform: translateX(-105%);
    -moz-transform: translateX(-105%);
    transform: translateX(-105%);
    transition: transform 0.5s;
}
#menu-container.actif {
    -webkit-transform: translateX(0px);
    -ms-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -o-transform: translateX(0px);
    transform: translateX(0px);
}
body.wide #menu-container {
    -webkit-transform: translateX(-105vw);
    -moz-transform: translateX(-105vw);
    -ms-transform: translateX(-105vw);
    -o-transform: translateX(-105vw);
    transform: translateX(-105vw);
    transition: transform 0.5s;
}
body.wide #menu-container.actif {
    -webkit-transform: translateX(0px);
    -ms-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -o-transform: translateX(0px);
    transform: translateX(0px);
}
#menu-container.route {
    opacity:1;
    z-index:99;
}
.route.show {
    opacity:1;
    z-index:12;
}
#anim-container {
    z-index:999;
    opacity:1;
    transition: opacity 1s;
}
#anim-container .mask {
	position: absolute;
	width: 10000px;
	height: 5000px;
	background: #FFF;
	left: -5000px;
}
#menu-container {
    z-index:99;
}
#sketch-wrapper {
    background-color: #FFF;
}
.wrapper {
    overflow:hidden;
    height:678px;
    width:382px;
    position:absolute;
    top:0;
    -webkit-transform-origin: top left;
    -moz-transform-origin: top left;
    -o-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
body.wide .wrapper {
    overflow:initial;
}
#anim-debut, #anim-fin, #sketch {
    height:100%;
    width:100%;
    position:absolute;
    top:0;
    left:0;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.swipe-wrap {
    height:678px;
    position:absolute;
    top:0;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.swipe-wrap.swipe-handle {
    background-color:transparent;
    z-index:4
}
.section {
    width:100000%;
    height:678px;
    position:absolute;
    left:0;
    top:0;
    border-left: 1px solid #FFF0;
    z-index:0;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -o-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    opacity:0;
    transition: opacity 1s;
}
.chpaper.on .section {
    opacity:1;
}
.chpaper.before {
    transform: translateX(400px);
}
.chpaper.after {
    transform: translateX(-400px);
}
.parallax1, .parallax2, .parallax3 {
    height:678px;
    position:absolute;
    left:0;
    top:0;
    z-index:1;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -o-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}
.parallax1 {
    -webkit-transform: translateZ(-3px);
    -moz-transform: translateZ(-3px);
    -o-transform: translateZ(-3px);
    -ms-transform: translateZ(-3px);
    transform: translateZ(-3px);
}
.parallax2 {
    -webkit-transform: translateZ(-2px);
    -moz-transform: translateZ(-2px);
    -o-transform: translateZ(-2px);
    -ms-transform: translateZ(-2px);
    transform: translateZ(-2px);
}
.parallax3 {
    -webkit-transform: translateZ(-1px);
    -moz-transform: translateZ(-1px);
    -o-transform: translateZ(-1px);
    -ms-transform: translateZ(-1px);
    transform: translateZ(-1px);
}
.p-element {
    position: absolute;
    left:0;
    top:0;
    width:400px;
    height:100px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    -webkit-transform: translateZ(0) scale(2);
    -moz-transform: translateZ(0) scale(2);
    -o-transform: translateZ(0) scale(2);
    -ms-transform: translateZ(0) scale(2);
    transform: translateZ(0) scale(2);
}

.p-element.gif-volutes {
    position: absolute;
    width: 165px;
    height: 135px;
    overflow: hidden;
    top:0;
    left:0;
}
.p-element.gif-volutes>div {
    display:inline-block;
    background-size:contain;
    width: 3600%;
    height: 100%;
}

.parallax1 .p-element.gif-volutes.t1>div {
    animation: anim 3s -1.3s steps(36) infinite;
}
.parallax2 .p-element.gif-volutes.t1>div {
    animation: anim 3s -2.6s steps(36) infinite;
}
.parallax3 .p-element.gif-volutes.t1>div {
    animation: anim 3s -3.9s steps(36) infinite;
}

.parallax1 .p-element.gif-volutes.t2>div {
    animation: anim 3s -1s steps(36) infinite;
}
.parallax2 .p-element.gif-volutes.t2>div {
    animation: anim 3s -2.3s steps(36) infinite;
}
.parallax3 .p-element.gif-volutes.t2>div {
    animation: anim 3s -3.6s steps(36) infinite;
}

.parallax1 .p-element.gif-volutes.t3>div {
    animation: anim 3s -0.7s steps(36) infinite;
}
.parallax2 .p-element.gif-volutes.t3>div {
    animation: anim 3s -2s steps(36) infinite;
}
.parallax3 .p-element.gif-volutes.t3>div {
    animation: anim 3s -3.3s steps(36) infinite;
}

.train-start {
    position: absolute;
    width: 330px;
    height: 225px;
    overflow: hidden;
    top:220px;
    left:0px;
    transform: translateX(-330px);
    z-index:1;
    transition: transform 3s cubic-bezier(0.39, 0.58, 0.57, 1) 0s;
}
.train-start.on {
    transform: translateX(622px);
}
.train-start>div {
    display:inline-block;
    background-size:contain;
    width: 1600%;
    height: 100%;
}
.train-start>div {
    animation: anim 1.6s -0.6s steps(16) infinite;
}

.train-stop {
    position: absolute;
    width: 330px;
    height: 225px;
    overflow: hidden;
    top:220px;
    right:0;
    transform: translateX(-622px);
    z-index:1;
    transition: transform 3s cubic-bezier(.6,-0.28,.74,.05) 1s;
}
.train-stop.on {
    transform: translateX(330px);
}
.train-stop>div {
    display:inline-block;
    background-size:contain;
    width: 1600%;
    height: 100%;
}
.train-stop>div {
    animation: anim 1.6s -0.6s steps(16) infinite;
}

.p-element.gif-trains {
    position: absolute;
    width: 165px;
    height: 112.5px;
    overflow: hidden;
    top:0;
    left:0;
}
.p-element.gif-trains>div {
    display:inline-block;
    background-size:contain;
    width: 1600%;
    height: 100%;
}

.parallax1 .p-element.gif-trains.t1>div {
    animation: anim 1.6s -0.6s steps(16) infinite;
}
.parallax2 .p-element.gif-trains.t1>div {
    animation: anim 1.6s -1.2s steps(16) infinite;
}
.parallax3 .p-element.gif-trains.t1>div {
    animation: anim 1.6s -1.8s steps(16) infinite;
}

.parallax1 .p-element.gif-trains.t2>div {
    animation: anim 1.6s -0.4s steps(16) infinite;
}
.parallax2 .p-element.gif-trains.t2>div {
    animation: anim 1.6s -1s steps(16) infinite;
}
.parallax3 .p-element.gif-trains.t2>div {
    animation: anim 1.6s -1.6s steps(16) infinite;
}

.parallax1 .p-element.gif-trains.t3>div {
    animation: anim 1.6s -0.2s steps(16) infinite;
}
.parallax2 .p-element.gif-trains.t3>div {
    animation: anim 1.6s -0.8s steps(16) infinite;
}
.parallax3 .p-element.gif-trains.t3>div {
    animation: anim 1.6s -1.4s steps(16) infinite;
}


.p-element.gif-cafards {
    position: absolute;
    width: 54px;
    height: 52.5px;
    overflow: hidden;
    top:0;
    left:0;
}
.p-element.gif-cafards>div {
    display:inline-block;
    background-size:contain;
    width: 1600%;
    height: 100%;
}
@keyframes anim {
    100% {
        -webkit-transform:translateX(-100%);
        -moz-transform:translateX(-100%);
        -ms-transform:translateX(-100%);
        -o-transform:translateX(-100%);
        transform:translateX(-100%);
    }
}
@keyframes move {
  100% {
    margin-top: 200vh;
    margin-left:-200vh;
  }
}
.parallax1 .p-element.gif-cafards.t1 {
    animation: move 20s infinite linear;
}
.parallax1 .p-element.gif-cafards.t2 {
    animation: move 20s -7s infinite linear;
}
.parallax1 .p-element.gif-cafards.t3 {
    animation: move 20s -13s infinite linear;
}
.parallax1 .p-element.gif-cafards.t1>div {
    animation: anim 1s -0.1s steps(16) infinite;
}
.parallax1 .p-element.gif-cafards.t2>div {
    animation: anim 1s -0.4s steps(16) infinite;
}
.parallax1 .p-element.gif-cafards.t3>div {
    animation: anim 1s -0.7s steps(16) infinite;
}
.parallax2 .p-element.gif-cafards.t1 {
    animation: move 20s -2s infinite linear;
}
.parallax2 .p-element.gif-cafards.t2 {
    animation: move 20s -5s infinite linear;
}
.parallax2 .p-element.gif-cafards.t3 {
    animation: move 20s -11s infinite linear;
}
.parallax2 .p-element.gif-cafards.t1>div {
    animation: anim 1s -0.2s steps(16) infinite;
}
.parallax2 .p-element.gif-cafards.t2>div {
    animation: anim 1s -0.5s steps(16) infinite;
}
.parallax2 .p-element.gif-cafards.t3>div {
    animation: anim 1s -0.8s steps(16) infinite;
}
.parallax3 .p-element.gif-cafards.t1 {
    animation: move 20s -4s infinite linear;
}
.parallax3 .p-element.gif-cafards.t2 {
    animation: move 20s -3s infinite linear;
}
.parallax3 .p-element.gif-cafards.t3 {
    animation: move 20s -9s infinite linear;
}
.parallax3 .p-element.gif-cafards.t1>div {
    animation: anim 1s -0.3s steps(16) infinite;
}
.parallax3 .p-element.gif-cafards.t2>div {
    animation: anim 1s -0.6s steps(16) infinite;
}
.parallax3 .p-element.gif-cafards.t3>div {
    animation: anim 1s -0.9s steps(16) infinite;
}








.p-element.gif-clous {
    position: absolute;
    width: 79px;
    height: 79px;
    overflow: hidden;
    top:0;
    left:0;
}
.p-element.gif-clous>div {
    display:inline-block;
    background-size:contain;
    width: 8200%;
    height: 100%;
}

.parallax1 .p-element.gif-clous.t1>div {
    animation: anim 4s -1.3s steps(82) infinite;
}
.parallax2 .p-element.gif-clous.t1>div {
    animation: anim 4s -2.6s steps(82) infinite;
}
.parallax3 .p-element.gif-clous.t1>div {
    animation: anim 4s -3.9s steps(82) infinite;
}

.parallax1 .p-element.gif-clous.t2>div {
    animation: anim 4s -1s steps(82) infinite;
}
.parallax2 .p-element.gif-clous.t2>div {
    animation: anim 4s -2.3s steps(82) infinite;
}
.parallax3 .p-element.gif-clous.t2>div {
    animation: anim 4s -3.6s steps(82) infinite;
}

.parallax1 .p-element.gif-clous.t3>div {
    animation: anim 4s -0.7s steps(82) infinite;
}
.parallax2 .p-element.gif-clous.t3>div {
    animation: anim 4s -2s steps(82) infinite;
}
.parallax3 .p-element.gif-clous.t3>div {
    animation: anim 4s -3.3s steps(82) infinite;
}

.p-element.gif-enclumes {
    position: absolute;
    width: 93.5px;
    height: 74.5px;
    overflow: hidden;
    top:0;
    left:0;
}
.p-element.gif-enclumes>div {
    display:inline-block;
    background-size:contain;
    width: 4900%;
    height: 100%;
}

.parallax1 .p-element.gif-enclumes.t1>div {
    animation: anim 2s -0.6s steps(49) infinite;
}
.parallax2 .p-element.gif-enclumes.t1>div {
    animation: anim 2s -1.2s steps(49) infinite;
}
.parallax3 .p-element.gif-enclumes.t1>div {
    animation: anim 2s -1.8s steps(49) infinite;
}

.parallax1 .p-element.gif-enclumes.t2>div {
    animation: anim 2s -0.4s steps(49) infinite;
}
.parallax2 .p-element.gif-enclumes.t2>div {
    animation: anim 2s -1s steps(49) infinite;
}
.parallax3 .p-element.gif-enclumes.t2>div {
    animation: anim 2s -1.6s steps(49) infinite;
}

.parallax1 .p-element.gif-enclumes.t3>div {
    animation: anim 2s -0.2s steps(49) infinite;
}
.parallax2 .p-element.gif-enclumes.t3>div {
    animation: anim 2s -0.8s steps(49) infinite;
}
.parallax3 .p-element.gif-enclumes.t3>div {
    animation: anim 2s -1.4s steps(49) infinite;
}

.p-element.gif-gants {
    position: absolute;
    width: 97.5px;
    height: 105px;
    overflow: hidden;
    top:0;
    left:0;
}
.p-element.gif-gants>div {
    display:inline-block;
    background-size:contain;
    width: 2400%;
    height: 100%;
}

.parallax1 .p-element.gif-gants.t1>div {
    animation: anim 1s -0.6s steps(24) infinite;
}
.parallax2 .p-element.gif-gants.t1>div {
    animation: anim 1s -1.2s steps(24) infinite;
}
.parallax3 .p-element.gif-gants.t1>div {
    animation: anim 1s -1.8s steps(24) infinite;
}

.parallax1 .p-element.gif-gants.t2>div {
    animation: anim 1s -0.4s steps(24) infinite;
}
.parallax2 .p-element.gif-gants.t2>div {
    animation: anim 1s -1s steps(24) infinite;
}
.parallax3 .p-element.gif-gants.t2>div {
    animation: anim 1s -1.6s steps(24) infinite;
}

.parallax1 .p-element.gif-gants.t3>div {
    animation: anim 1s -0.2s steps(24) infinite;
}
.parallax2 .p-element.gif-gants.t3>div {
    animation: anim 1s -0.8s steps(24) infinite;
}
.parallax3 .p-element.gif-gants.t3>div {
    animation: anim 1s -1.4s steps(24) infinite;
}


.p-element.gif-guitares {
    position: absolute;
    width: 75px;
    height: 120px;
    overflow: hidden;
    top:0;
    left:0;
}
.p-element.gif-guitares>div {
    display:inline-block;
    background-size:contain;
    width: 5700%;
    height: 100%;
}

.parallax1 .p-element.gif-guitares.t1>div {
    animation: anim 5.7s -0.6s steps(57) infinite;
}
.parallax2 .p-element.gif-guitares.t1>div {
    animation: anim 5.7s -1.2s steps(57) infinite;
}
.parallax3 .p-element.gif-guitares.t1>div {
    animation: anim 5.7s -1.8s steps(57) infinite;
}

.parallax1 .p-element.gif-guitares.t2>div {
    animation: anim 5.7s -0.4s steps(57) infinite;
}
.parallax2 .p-element.gif-guitares.t2>div {
    animation: anim 5.7s -1s steps(57) infinite;
}
.parallax3 .p-element.gif-guitares.t2>div {
    animation: anim 5.7s -1.6s steps(57) infinite;
}

.parallax1 .p-element.gif-guitares.t3>div {
    animation: anim 5.7s -0.2s steps(57) infinite;
}
.parallax2 .p-element.gif-guitares.t3>div {
    animation: anim 5.7s -0.8s steps(57) infinite;
}
.parallax3 .p-element.gif-guitares.t3>div {
    animation: anim 5.7s -1.4s steps(57) infinite;
}


.case {
    width:382px;
    height:678px;
    position:absolute;
    left:0;
    top:0;
    -moz-transform-origin: center center;
    -webkit-transform-origin: center center;
    -o-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
}
.item {
    position:absolute;
    left:191px;
    top:339px;
    -moz-transform-origin: top left;
    -webkit-transform-origin: top left;
    -o-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
}
.item-scale, .item-rotate {
    -moz-transform-origin: center;
    -webkit-transform-origin: center;
    -o-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
}
.item-crop {
    position:relative;
    top:0;
    left:0;
    overflow: hidden;
}
.item-txt {
    position:absolute;
    top:0;
    left:0;
    width:100%;
}
.item-txt-fond {
    background: #FFFC;
    box-shadow: 0 0 30px 30px #FFFC;
}
.item-background {
    position:absolute;
    top:0;
    left:0;
}
.txt-container {
    position:relative;
}
#tmp {
    visibility:hidden;
    overflow:hidden;
    position:absolute;
    width:0;
    top:0;
}
img.nodrag {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  pointer-events: none;
}
.statusbar {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    -moz-transform-origin: top left;
    -webkit-transform-origin: top left;
    -o-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    z-index:3;
    opacity:1;
    transition: opacity 1s;
}
.statusbar.off {
    opacity:0;
}
.progressbar {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:12px;
}

.progressbar-chapter {
    position:absolute;
    top:0;
    left:0;
    width:0;
    height:6px;
    background:#999;
    transition: width 1s;
}
.progressbar-strip {
    position:absolute;
    top:6px;
    left:0;
    width:0%;
    height:6px;
    background:#CCC;
    transition: width 1s;
}
.hidden {
    display:none;
}
.lds-dual-ring {
    display: inline-block;
    width: 64px;
    height: 64px;
    position: absolute;
    top: 50%;
    -moz-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    left: 50%;
}
.lds-dual-ring:after {
    content: " ";
    display: block;
    width: 46px;
    height: 46px;
    margin: 1px;
    border-radius: 50%;
    border: 5px solid #fff;
    border-color: #fff transparent #fff transparent;
    animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
  0% {
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      transform: rotate(0deg);
  }
  100% {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      transform: rotate(360deg);
  }
}
#loading {
    position: fixed;
    z-index:1000;
    width: 100%;
    height: 100%;
    opacity:1;
    background:#000;
    transition: opacity 1s;
}
#loading .mask {
	position: absolute;
	width: 10000px;
	height: 5000px;
	background: #000;
	left: -5000px;
}

#loading.fade, #anim-container.fade {
    opacity:0;
    transition: opacity 1s;
}
.sketch-ok, .sketch-clear {
    position:absolute;
    bottom:15px;
    font-size:30px;
    cursor:pointer;
}
.sketch-ok{
    left:30px;
}
.sketch-clear{
    right:30px;
}
#menu-wrapper {
    overflow:hidden;
    background-color:#000;
}
#menu-wrapper .titre {
    position: absolute;
    height: 100px;
    width: 100%;
    top: 0;
    color: #fff;
}
#menu-wrapper .titre img.logo {
    position: absolute;
    width: 50px;
    top: 30px;
    left: 25px;
}
#menu-wrapper .titre img.back {
    position: absolute;
    width: 13px;
    top: 15px;
    right: 15px;
    cursor:pointer;
}
#menu-wrapper .titre .txt {
    position: absolute;
    width: 269px;
    top: 50px;
    left: 90px;
    font-size: 25px;
}
#menu-wrapper .centre {
    position: absolute;
    height: 678px;
    width: 100%;
    top: 0;
    background: #fff;
}
#menu-wrapper .centre .progress {
	position: absolute;
	height: 12px;
	width: 100%;
	top: 630px;
	left: 0;
	background: #000;
}
#menu-wrapper .centre .credits {
	position: absolute;
	top: 15px;
	right: 30px;
	font-size: 33px;
	cursor: pointer;
	height: 45px;
	width: 45px;
	border: 1px solid #000;
	border-radius: 30px;
	text-align: center;
	line-height: 45px;
	z-index: 1000;
}
#menu-wrapper .centre .sketch {
	position: absolute;
	top: 15px;
	left: 30px;
	font-size: 33px;
	cursor: pointer;
	height: 45px;
	width: 45px;
	border: 1px solid #000;
	border-radius: 30px;
	text-align: center;
	line-height: 45px;
	z-index: 1000;
}
#menu-wrapper .centre .sketch > img {
	position: absolute;
	top: 13px;
	left: 13px;
	width: 50px;
}
#mentions-container {
    color: #FFF;
}
#credits-container {
    color: #FFF;
}
.chapter-button {
    position:absolute;
    left:0;
    top:309px;
    cursor:pointer;
    text-align:center;
    margin:15px auto;
    width:150px;
    font-size:60px;
    height:60px;
    opacity:0.5;
}
.chapter-button.actif {
    opacity:1;
}
.chapitres {
    position:absolute;
    height:678px;
    width:0;
    top:0;
}
body.is-mobile #menu-slide-right-button, body.is-mobile #menu-slide-left-button {
    display:none;
}
#menu-slide-right-button, #menu-slide-left-button {
    display:block;
}
#menu-slide-left-button {
	position: absolute;
	height: 100px;
	right: calc(50% + 200px);
	width: 1000px;
	top: 310px;
	cursor: pointer;
}
#menu-slide-left-button img {
	position: absolute;
	right: 30px;
	top: 39px;
	height: 24px;
}
#menu-slide-right-button {
	position: absolute;
	height: 100px;
	left: calc(50% + 200px);
	width: 1000px;
	top: 310px;
	cursor: pointer;
}
#menu-slide-right-button img {
	position: absolute;
	left: 30px;
	top: 39px;
	height: 24px;
}
.menu-zoomable {
    position:relative;
    -webkit-transform-origin: center;
    -o-transform-origin: center;
    -moz-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
    -webkit-transform:scale(1.5) translateY(-100px);
    -o-transform:scale(1.5) translateY(-100px);
    -moz-transform:scale(1.5) translateY(-100px);
    -ms-transform:scale(1.5) translateY(-100px);
    transform:scale(1.5) translateY(-100px);
}
body.is-mobile .menu-zoomable {
    -webkit-transform:unset;
    -o-transform:unset;
    -moz-transform:unset;
    -ms-transform:unset;
    transform:unset;
}
.home {
    cursor:pointer;
    position:absolute;
    top:27px;
    left:15px;
    width:30px;
    z-index:3;
    opacity:1;
    transition: opacity 1s;
}
.home.off {
    opacity:0;
}
#side-trigger {
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:-95%;
    z-index:100;
}
.right-mask {
	position: absolute;
	top: 310px;
	left: calc(50% + 150px);
	height: 100px;
	width: 1000px;
	background: linear-gradient(to right, #fff0,#fff 5%, #fff);
}
.left-mask {
	position: absolute;
	top: 310px;
	right: calc(50% + 150px);
	height: 100px;
	width: 1000px;
	background: linear-gradient(to left, #fff0,#fff 5%, #fff);
}
.no-select {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.sketch-undo-btn {
    position:absolute;
    height: 50px;
    width: 50px;
    border-radius: 25px;
    background-color:#D8D8D8;
    bottom:15px;
    left:15px;
    opacity:0.4;
    transition: opacity 0.5s;
    cursor:pointer;
}
.sketch-redo-btn {
    position:absolute;
    height: 50px;
    width: 50px;
    border-radius: 25px;
    background-color:#D8D8D8;
    bottom:15px;
    left: 71px;
    opacity:0.4;
    transition: opacity 0.5s;
    cursor:pointer;
}
.sketch-share-btn {
    position:absolute;
    height: 50px;
    width: 50px;
    border-radius: 25px;
    background-color:#D8D8D8;
    bottom:15px;
    right:15px;
    cursor:pointer;
}
.sketch-undo {
    position:absolute;
    width: 23px;
    height: 50px;
    top:0;
    left: 12px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.sketch-redo {
    position:absolute;
    width: 23px;
    height: 50px;
    top:0;
    left: 12px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.sketch-share {
    position:absolute;
    width: 23px;
    height: 50px;
    top:0;
    left: 12px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.tool {
    display: inline-block;
    width: 23px;
    height: 50px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    margin: 0 13px;
    transition: width 0.5s, margin 0.5s;
}
.tool-box {
    position:absolute;
    right:15px;
    top:15px;
    height: 50px;
    border-radius: 25px;
    background-color:#D8D8D8;
}
.tool-box.closed .tool {
    width: 0;
    margin:0;
}
.tool-box.closed .tool.tool-on {
    width: 23px;
    margin:0 13px;
}
.tool-box-arrow {
    position:absolute;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width:5px;
    height:50px;
    top:0;
    left:5px;
    opacity:0;
    transition: opacity 0.5s;
}
.tool-box.closed .tool-box-arrow {
    opacity:1;
}
.share-board {
	display: none;
	position: absolute;
	background: #FFF;
	bottom: 30px;
	left: 30px;
	top: 70px;
	right: 30px;
	opacity: 0;
	transition: opacity 0.5s;
	box-shadow: 5px 5px 10px #0008;
}
.show {
    opacity:1;
}
.share-img {
	position: absolute;
	width: 60%;
	left: 20%;
	top: 10%;
    -webkit-transform-origin: center;
    -o-transform-origin: center;
    -moz-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
	/* transform: rotate(2deg); */
	box-shadow: 0px 0px 30px #0003;
}
.img-responsive {
    width:100%;
}
.share-share {
    display:none;
    position:absolute;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width:50px;
    height:50px;
    bottom:30px;
    left:calc(50% - 125px);
    cursor:pointer;
}
.share-fb {
    display:none;
    position:absolute;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width:50px;
    height:50px;
    bottom:30px;
    left:calc(50% - 125px);
    cursor:pointer;
}
.share-tw {
    display:none;
    position:absolute;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width:50px;
    height:50px;
    bottom:30px;
    left:calc(50% - 25px);
    cursor:pointer;
    outline: 0;
}
.save-btn {
    position:absolute;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width:50px;
    height:50px;
    bottom:30px;
    left:calc(50% + 75px);
    cursor:pointer;
}
#menu-progress-bulle {
	position: absolute;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	width: 200px;
	height: 116px;
	top: 150px;
	left: -100px;
	margin-left: 50%;
}
#menu-progress-bulle>div {
    position:absolute;
    width:100px;
    height:50px;
    top: 35px;
    right: 73px;
    font-size: 34px;
    text-align:right;
}
#menu-reprendre {
    font-family: 'DINPro-Medium';
    font-size: 19px;
    position: absolute;
    width: 92px;
    height: 25px;
    top: 480px;
    left: -46px;
    text-align: center;
    border-bottom: 1px solid #000;
    cursor: pointer;
    margin-left: 50%;
}
#credits-wrapper {
    text-align:center;
    background:#FFF;
    color:#000;
}
.disabled {
    opacity:0.2;
}
#loading .titre {
    font-size:38px;
    text-align:center;
    position:absolute;
    top:80px;
    left:0;
    width:100%;
    color:#FFF;
}
#loading .logo {
    position:absolute;
    top:216px;
    left:109px;
    width:164px;
}
#loading .loader {
    position:absolute;
    top:470px;
    left:91;
    width:200px;
    color:#FFF;
}
#loading .progressbar {
    position:absolute;
    top:70px;
    left:0;
    width:100%;
    height:4px;
    background:#FFF8;
    opacity:1;
    transition: opacity 0.5s;
}
#loading .progress {
    position:absolute;
    top:0;
    left:0;
    width:0;
    height:4px;
    background:#FFF;
}
#start-reset-button {
	font-family: 'DINPro-Medium';
	font-size: 19px;
	position: absolute;
	top: 0;
	left: 49px;
	text-align: center;
	width: 104px;
	border-bottom: 1px solid #FFF;
	display: none;
	opacity: 0;
	transition: opacity 0.5s;
	cursor: pointer;
	line-height: 150%;
}
#start-button {
	font-family: 'DINPro-Medium';
	font-size: 19px;
	position: absolute;
	top: 33px;
	left: 56px;
	text-align: center;
	width: 90px;
	border-bottom: 1px solid #FFF;
	display: none;
	opacity: 0;
	transition: opacity 0.5s;
	cursor: pointer;
	line-height: 150%;
}
.casque {
    position:absolute;
    left:0;
    bottom:50px;
    width:100%;
}
.casque-img {
	position: absolute;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
    background-image:url(img/casque.png);
	width: 27px;
	height: 30px;
	bottom: 25px;
	left: 179px;
}
.casque-text {
	position: absolute;
	width: 100%;
	bottom: 0px;
	left: 0;
    font-family: 'DINPro-Medium';
    font-size:13px;
	text-align: center;
	color: #FFF;
}
.epingle-popup {
	position: absolute;
	display: none;
	left: 0px;
	top: 35px;
	width: 375px;
	background-position: center;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	min-height: 400px;
    z-index:10;
}

.epingle-popup-inner {
	margin: 60px 26px;
	width: 330px;
}
.epingle-popup-txt {
	margin: 30px;
	width: 266px;
	font-size: 16px;
    font-family: 'DINPro-Medium';
}
.epingle-popup-titre {
	font-size: 30px;
    font-family: 'mazdawebcustom';
    margin: 30px;
    margin-top: 50px;
    text-align:center;
    width: 266px;
}
.papaper {
    position:absolute;
    z-index:0;
    -webkit-perspective: 5px;
    -o-perspective: 5px;
    -moz-perspective: 5px;
    -ms-perspective: 5px;
    perspective: 5px;
    -webkit-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    height:100%;
}
.chpaper {
    position:absolute;
    z-index:1;
    transform: translateX(0);
}
.chpaper.transition {
    transition: transform 2s 0.2s;
}
.helper-container {
	position: absolute;
    background-color:#000;
	top: 0;
	left: 0;
	width: 100%;
	height: 678px;
	opacity: 0.95;
	transition: opacity 1s;
	z-index: 3;
}
.helper-container.off {
    opacity:0;
}
.helper {
    position:fixed;
    top:0;
    left:0;
    width:382px;
    height:678px;
}
.helper-full {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 678px;
}
.helper-desktop {
    display:block;
    position:absolute;
    top:0;
    left:-25%;
    width:150%;
    bottom:0;
    font-family: 'DINPro-Medium';
    color:#FFF;
    background-color:#000;
    opacity:1;
    transition: opacity 1s;
}
.helper-desktop.off {
    opacity:0;
}
body.is-mobile .helper-desktop {
    display:none;
}

.notice-desktop-t1 {
	position: absolute;
	top: 230px;
	left: -10%;
	text-align: center;
	font-size: 20px;
	width: 120%;
}
.notice-desktop-t2 {
    position: absolute;
	top: 600px;
    left:calc(50% - 14px);
	text-align: left;
	font-size: 20px;
	width: 29px;
	cursor: pointer;
	border-bottom: 1px solid #FFF;
	padding-bottom: 5px;
}
.notice-mobile-t1 {
	position: absolute;
	top: 200px;
	left: 0;
	text-align: center;
	font-size: 20px;
	width: 100%;
}
.notice-mobile-t2 {
    position: absolute;
	top: 600px;
    left:calc(50% - 14px);
	text-align: left;
	font-size: 20px;
	width: 29px;
	cursor: pointer;
	border-bottom: 1px solid #FFF;
	padding-bottom: 5px;
}
.helper-desktop-t1 {
	position: absolute;
	top: 100px;
	left: -10%;
	text-align: center;
	font-size: 20px;
	width: 120%;
}
.helper-desktop-t2 {
	position: absolute;
	top: 410px;
	left: 0;
	text-align: center;
	font-size: 20px;
	width: 100%;
}
.helper-desktop-t3 {
	position: absolute;
	top: 600px;
	left:calc(50% - 14px);
	text-align: left;
	font-size: 20px;
	width: 29px;
	cursor: pointer;
	border-bottom: 1px solid #FFF;
	padding-bottom: 5px;
}
.helper-desktop-img1 {
	position: absolute;
	top: 184px;
	left: 0;
	text-align: center;
	font-size: 20px;
	width: 100%;
	height: 137px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
.helper-desktop-img2 {
	position: absolute;
	top: 457px;
	left: 0;
	text-align: center;
	font-size: 20px;
	width: 100%;
	height: 80px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
.helper-mobile {
    display:none;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    font-family: 'DINPro-Medium';
    color:#FFF;
    background-color:#000;
    opacity:1;
    transition: opacity 1s;
}
.helper-mobile.off {
    opacity:0;
}
body.is-mobile .helper-mobile {
    display:block;
}
.helper-mobile-t1 {
    position:absolute;
    top:100px;
    left:0;
    text-align:center;
    font-size:20px;
    width:100%;
}
.helper-mobile-t3 {
	position: absolute;
	top: 600px;
    left:calc(50% - 14px);
	text-align: left;
	font-size: 20px;
	width: 29px;
	cursor: pointer;
	border-bottom: 1px solid #FFF;
	padding-bottom: 5px;
}
.helper-mobile-img1 {
	position: absolute;
	top: 241px;
	left: 0;
	text-align: center;
	font-size: 20px;
	width: 110%;
	height: 237px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
.helper-mobile-sketch {
    position: absolute;
	top: 100px;
	left: 0;
	text-align: center;
	font-size: 16px;
	width: 100%;
	cursor: pointer;
	padding-bottom: 5px;
}
.helper-desktop-sketch {
	position: absolute;
	top: 100px;
	left: 0;
	text-align: center;
	font-size: 18px;
	width: 100%;
	cursor: pointer;
	padding-bottom: 5px;
}
.helper-sketch-img {
	position: absolute;
	top: 500px;
	left: 0;
	text-align: center;
	font-size: 20px;
	width: 100%;
	height: 67px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
    cursor:pointer;
}
.debug-log{
    display:none;
}
body.debug .debug-log{
    display:block;
    position:fixed;
    bottom:0;
    left:0;
    padding:15px;
    font-size: 12px;
    background-color:#FFF;
    font-family: 'DINPro-Medium'
}
.grey {
    color:#888;
}
.helper-container .mask {
	position: absolute;
	background-color: #000;
	top: -1000px;
	left: 0;
	right: 0;
	bottom: -1000px;
}
#images-preloaded {
    display:none;
}
#toggle-fullscreen {
    position:absolute;
    display:none;
    bottom:15px;
    left:calc(50% - 15px);
    width: 30px;
	cursor:pointer;
    -webkit-transform-origin: center;
    -o-transform-origin: center;
    -moz-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
}
#toggle-fullscreen img {
	position: absolute;
	width: 30px;
	bottom: 0;
	left: 0;
}
#toggle-fullscreen.on img.on {
    display:block;
    opacity:0.2;
}
#toggle-fullscreen.on img.off {
    display:none;
}
#toggle-fullscreen img.on {
    display:none;
}
#toggle-fullscreen img.off{
    display:block;
}
#toggle-fullscreen.ok {
    display:block;
}
body.standalone #toggle-fullscreen.ok {
    display:none;
}
.bnup {
    position:absolute;
    background:#000;
    width:100%;
    top:0;
    z-index:1000;
}
.bndown {
    position:absolute;
    background:#000;
    width:100%;
    bottom:0;
    z-index:1000;
}
#skip-btn-1, #skip-btn-2  {
    display:none;
	position: absolute;
	padding:5px;
	bottom: 15px;
	right: 15px;
	z-index: 10;
	border-radius: 4px;
	border: 1px solid #CCC;
    background-color:#FFFFFF88;
    cursor:pointer;
    font-family: 'DINPro-Medium'
}
#redirection {
    background-color:#000;
    position:absolute;
    top:0;
    left:0;
    opacity:0;
}
#redirection .titre {
    font-size:38px;
    text-align:center;
    position:absolute;
    top:80px;
    left:0;
    width:100%;
    color:#FFF;
}
#redirection .texte {
    font-family: 'DINPro-Medium';
    font-size:16px;
    text-align:center;
    position:absolute;
    top:446px;
    left:0;
    width:100%;
    color:#FFF;
}
#redirection.sketch .titre {
    top:30px;
}
#redirection.sketch .texte {
    top:490px;
}
#redirection .logo {
    position:absolute;
    top:216px;
    left:calc( 50% - 72px);
    width:164px;
}
#redirection .show-sketch {
	position: absolute;
	top: 142px;
	left: 0;
	width: 100%;
	height: 329px;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}
#redirection a, #redirection a:visited, #redirection a:hover, #redirection a:active  {
    text-decoration:none;
    color:#EEE;
    outline: 0;
}
#credits-slide {
	position:absolute;
    width: 382px;
	height: 678px;
	left:calc(50% - 191px);
    top:0;
    transition: top 0.5s;
}
.slide {
	width: 382px;
	height: 678px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}