body {
  background-color: #fff;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/194946/draw.jpg");
  color: #fffff0;
  font-family: 'Dosis', sans-serif;
  margin: 0;
  overflow: hidden;
  -webkit-perspective: 1000px;
          perspective: 1000px;
  font-size: 9px;
}
@media screen and (min-width: 320px) {
  body {
    font-size: calc(9px + 9 * ((100vw - 320px) / 960));
  }
}
@media screen and (min-width: 1280px) {
  body {
    font-size: 18px;
  }
}
.phone {
  display: none;
}
.site-wrap {
  transition: -webkit-transform 2s cubic-bezier(0.55, 0, 0.1, 1);
  transition: transform 2s cubic-bezier(0.55, 0, 0.1, 1);
  transition: transform 2s cubic-bezier(0.55, 0, 0.1, 1), -webkit-transform 2s cubic-bezier(0.55, 0, 0.1, 1);
}
.site-wrap.show-all {
  -webkit-transform: rotateY(-15deg) scale(0.2);
          transform: rotateY(-15deg) scale(0.2);
}
.panel-wrap {
  height: 100vh;
  width: 100vw;
}
figure {
  width: 64vh;
  height: 48vh;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  position: absolute;
  top: 53%;
  left: 50%;
  border-bottom: 50px solid transparent;
  border-top: 50px solid transparent;
}
@media all and (max-width: 600px) {
  figure {
    width: 64vmin;
    height: 48vmin;
  }
}
figure:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0.5%;
  height: 5%;
  width: 99%;
  display: block;
  background-image: radial-gradient(ellipse at center bottom, transparent, transparent 75%, #000 95%, #000 100%);
}
.photos {
  display: block;
  width: 70vw;
  height: 80vh;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
}
@media all and (max-width: 600px) {
  .photos {
    width: 38vh;
    height: 26.25vh;
  }
}
.entretien {
  display: block;
  width: 95vw;
  height: 95vh;
  position: absolute;
  left: 55%;
  top: 0;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.texte {
  display: block;
  width: 70vw;
  height: 85vh;
  position: absolute;
  left: 50%;
  top: 0;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.contacts {
  display: block;
  overflow: hidden !important;
  width: 320px;
  height: 550px;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.video {
  display: block;
  width: 85vw;
  max-width: 560px;
  height: 35vh;
  max-height: 315px;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.fa1 {
  display: block;
  width: 85vw;
  max-width: 560px;
  height: 35vh;
  max-height: 315px;
  position: absolute;
  left: 50%;
  top: 12%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.fa2 {
  display: block;
  width: 85vw;
  max-width: 560px;
  height: 35vh;
  max-height: 315px;
  position: absolute;
  left: 50%;
  top: 53%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
iframe {
  display: block;
  width: 60vw;
  height: 45vh;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.dp {
  display: block;
  width: 70vw;
  height: 90vh;
  max-width: 900px;
  position: absolute;
  left: 50%;
  top: 0;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.panel-wrap {
  -webkit-perspective: 2000px;
          perspective: 2000px;
  transition: -webkit-transform 1s cubic-bezier(0.55, 0, 0.1, 1);
  transition: transform 1s cubic-bezier(0.55, 0, 0.1, 1);
  transition: transform 1s cubic-bezier(0.55, 0, 0.1, 1), -webkit-transform 1s cubic-bezier(0.55, 0, 0.1, 1);
}
.panel-wrap.animate--shrink,
.panel-wrap.animate--tilt,
.panel-wrap.animate--tilt2 {
  transition: -webkit-transform 1s cubic-bezier(0.55, 0, 0.1, 1) 1s;
  transition: transform 1s cubic-bezier(0.55, 0, 0.1, 1) 1s;
  transition: transform 1s cubic-bezier(0.55, 0, 0.1, 1) 1s, -webkit-transform 1s cubic-bezier(0.55, 0, 0.1, 1) 1s;
}
.panel {
  height: 100vh;
  position: absolute;
  transition: -webkit-transform 1s cubic-bezier(0.55, 0, 0.1, 1);
  transition: transform 1s cubic-bezier(0.55, 0, 0.1, 1);
  transition: transform 1s cubic-bezier(0.55, 0, 0.1, 1), -webkit-transform 1s cubic-bezier(0.55, 0, 0.1, 1);
  width: 100vw;
  will-change: transform;
}
.panel:before {
  background-color: transparent;
  bottom: 0;
  content: "";
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  transition: background-color 1s cubic-bezier(0.55, 0, 0.1, 1);
  z-index: 2;
}
.show-all .panel:before {
  pointer-events: all;
}
.show-all .panel:hover:before {
  background-color: rgba(255,255,255,0.1);
  cursor: pointer;
}
.animate--shrink.animate .panel {
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
}
.animate--tilt.animate .panel {
  -webkit-transform: scale(0.6) rotateY(-25deg);
          transform: scale(0.6) rotateY(-25deg);
}
.animate--tilt2.animate .panel {
  -webkit-transform: scale(0.8) rotateX(25deg);
          transform: scale(0.8) rotateX(25deg);
}
.panel h1 {
  cursor: default;
  left: 50%;
  line-height: 1;
  position: absolute;
  text-align: center;
  top: 21%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  font-size: 8vmin;
  text-shadow: 1px 1px 0 #555;
  font-family: 'Chelsea Market', cursive;
  color: #cc3700;
}
.panel[data-x-pos="-2"] {
  left: -200%;
}
.panel[data-x-pos="-1"] {
  left: -100%;
}
.panel[data-x-pos="1"] {
  left: 100%;
}
.panel[data-x-pos="2"] {
  left: 200%;
}
.panel[data-y-pos="-2"] {
  top: 200%;
}
.panel[data-y-pos="-1"] {
  top: 100%;
}
.panel[data-y-pos="1"] {
  top: -100%;
}
.panel[data-y-pos="2"] {
  top: -200%;
}
h2 {
  cursor: default;
  left: 50%;
  line-height: 1;
  position: absolute;
  text-align: center;
  top: 83%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  font-size: 3vmin;
  font-family: 'Dosis', sans-serif;
  letter-spacing: 1px;
  color: #cc3700;
}
[data-x-pos="-2"] {
  left: -200%;
}
[data-x-pos="-1"] {
  left: -100%;
}
[data-x-pos="1"] {
  left: 100%;
}
[data-x-pos="2"] {
  left: 200%;
}
[data-y-pos="-2"] {
  top: 200%;
}
[data-y-pos="-1"] {
  top: 100%;
}
[data-y-pos="1"] {
  top: -100%;
}
[data-y-pos="2"] {
  top: -200%;
}
.panel__zoom {
  cursor: pointer;
  left: 50%;
  opacity: 0.2;
  position: absolute;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%) translateY(-12vmin);
          transform: translateX(-50%) translateY(-50%) translateY(-12vmin);
  transition: opacity 1s cubic-bezier(0.55, 0, 0.1, 1);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  z-index: 10;
}
.panel__zoom:hover {
  opacity: 1;
}
.show-all .panel__zoom {
  pointer-events: none;
}
.panel__nav {
  cursor: pointer;
  opacity: 0.6;
  color: #b5675a;
  position: absolute;
  z-index: 100;
  transition: opacity 1s cubic-bezier(0.55, 0, 0.1, 1);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  will-change: opacity;
  font-family: 'Dosis', sans-serif;
  font-weight: extra-light;
  font-size: 1.2em;
  line-height: 1.2;
}
.panel__nav--up {
  left: 50%;
  top: 2rem;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.panel__nav--left {
  left: 2rem;
  top: 50%;
  -webkit-transform: translateY(-50%) rotate(-90deg) translateX(-100%);
          transform: translateY(-50%) rotate(-90deg) translateX(-100%);
  -webkit-transform-origin: top left;
          transform-origin: top left;
}
.panel__nav--left-top {
  left: 2rem;
  top: 2rem;
}
.panel__nav--left-down {
  bottom: 2rem;
  left: 2rem;
}
.panel__nav--right {
  right: 2rem;
  top: 50%;
  -webkit-transform: translateY(-50%) rotate(90deg) translateX(100%);
          transform: translateY(-50%) rotate(90deg) translateX(100%);
  -webkit-transform-origin: top right;
          transform-origin: top right;
}
.panel__nav--right-top {
  right: 2rem;
  top: 2rem;
}
.panel__nav--right-down {
  bottom: 2rem;
  right: 2rem;
}
.panel__nav--down {
  bottom: 2rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.panel__nav:hover {
  opacity: 1;
}
header {
  width: 100%;
  height: 50px;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/194946/draw.jpg");
  z-index: 90;
}
footer {
  width: 100%;
  height: 50px;
  position: absolute;
  bottom: 0;
  left: 0;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/194946/draw.jpg");
  z-index: 90;
}
.text {
  text-align: center;
}
.text:after {
  content: '\A par Yannick Lemarié';
  white-space: pre;
  font-size: 0.8em;
  text-shadow: none;
}
.seances {
  text-align: center;
}
.seances:after {
  content: '\A Intervenants';
  white-space: pre;
}
.large {
  font-size: 2em;
}
.panel__animation-list {
  font-size: 3.3vmin;
  left: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%) translateY(14vmin);
          transform: translateX(-50%) translateY(-50%) translateY(14vmin);
}
.panel__animation-list span {
  cursor: pointer;
  display: inline-block;
  opacity: 0.2;
  position: relative;
  transition: opacity 1s cubic-bezier(0.55, 0, 0.1, 1);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.panel__animation-list span:after {
  border-bottom: 0.3vmin solid transparent;
  bottom: 0;
  content: "";
  left: -1px;
  position: absolute;
  right: 0;
  transition: border-color 1s cubic-bezier(0.55, 0, 0.1, 1);
  width: 100%;
}
.panel__animation-list span.active:after,
.panel__animation-list span:hover:after,
.panel__animation-list span opacity 1:after {
  border-color: #fff;
}
@media all and (max-width: 320px) {
  .desktop {
    display: none;
  }
  .phone {
    display: block;
    position: absolute;
    width: 90%;
    height: 5%;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
}