@import url("https://fonts.googleapis.com/css?family=Work+Sans:100,200,300,400,500,600,700,800,900");
body {
  overflow: hidden;
  max-width: 100vw;
  font-family: "Work Sans";
  color: white;
  background-color: black;
  font-size: 15px;
  font-weight: 300;
  text-transform: uppercase;
  font-style: oblique; }
  body::-moz-selection {
    background-color: white;
    color: black; }
  body::selection {
    background-color: white;
    color: black; }

a {
  color: white;
  text-decoration: none; }
  a:hover {
    color: white;
    text-decoration: none; }

input {
  border: none; }

span::-moz-selection, div::-moz-selection, a::-moz-selection, p::-moz-selection, h1::-moz-selection, h2::-moz-selection, h3::-moz-selection h4::-moz-selection {
  background-color: white;
  color: black; }

span::selection, div::selection, a::selection, p::selection, h1::selection, h2::selection, h3::selection h4::selection {
  background-color: white;
  color: black; }

.move-up-container {
  overflow: hidden; }

.move-up {
  -webkit-transform: translateY(100%);
      -ms-transform: translateY(100%);
          transform: translateY(100%); }

.move-up-slow {
  -webkit-transform: translateY(100%);
      -ms-transform: translateY(100%);
          transform: translateY(100%); }

.appear {
  opacity: 0; }

.appear-s {
  opacity: 0; }

.navbar {
  width: 100vw;
  background: none;
  position: fixed;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  top: 0;
  left: 0;
  padding: 40px 50px; }
  .navbar .brand, .navbar .menu {
    text-align: left;
    width: 50%; }
    .navbar .brand span:hover, .navbar .menu span:hover {
      cursor: pointer; }
  .navbar .menu .btn-menu {
    display: inline-block;
    transition: ease-in-out .5s all;
    position: relative;
    left: 0;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%); }
    .navbar .menu .btn-menu:before {
      transition: ease-in-out .5s all;
      background-color: white;
      content: "";
      width: 1px;
      height: 20px;
      position: absolute;
      left: 50%;
      top: -120%; }
    .navbar .menu .btn-menu:after {
      transition: ease-in-out .5s all;
      background-color: white;
      content: "";
      width: 1px;
      height: 20px;
      position: absolute;
      left: 50%;
      top: -170%;
      opacity: 0; }
  .navbar .menu.close-menu {
    transition: ease-in-out .5s all; }
    .navbar .menu.close-menu span {
      color: rgba(255, 255, 255, 0); }
      .navbar .menu.close-menu span:before {
        transition: ease-in-out .3s all;
        height: 45px;
        top: -100%;
        -webkit-transform: rotateZ(45deg);
            -ms-transform: rotate(45deg);
                transform: rotateZ(45deg); }
      .navbar .menu.close-menu span:after {
        transition: ease-in-out .3s all;
        height: 45px;
        opacity: 1;
        top: -100%;
        -webkit-transform: rotateZ(-45deg);
            -ms-transform: rotate(-45deg);
                transform: rotateZ(-45deg); }
      .navbar .menu.close-menu span:hover:before, .navbar .menu.close-menu span:hover:after {
        background-color: rgba(255, 255, 255, 0.3); }

@media screen and (max-width: 768px) {
  .navbar {
    padding: 40px 10px; } }

.e-mail, .navbar {
  font-weight: 400;
  z-index: 1000; }

.e-mail {
  color: rgba(255, 255, 255, 0.6);
  position: fixed;
  bottom: 30px;
  left: 50px;
  -webkit-transform: rotateZ(-90deg);
      -ms-transform: rotate(-90deg);
          transform: rotateZ(-90deg);
  text-transform: none;
  -webkit-transform-origin: left;
      -ms-transform-origin: left;
          transform-origin: left;
  transition: ease-in-out .3s all; }
  .e-mail:hover {
    transition: ease-in-out .2s all;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer; }
  @media screen and (max-width: 768px) {
    .e-mail {
      -webkit-transform: rotateZ(0);
          -ms-transform: rotate(0);
              transform: rotateZ(0);
      left: 5px;
      bottom: 10px; } }

.page-menu {
  visibility: hidden;
  opacity: 0;
  background-color: black;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  font-weight: 700;
  font-style: oblique;
  font-size: 80px; }
  .page-menu .references {
    margin-bottom: 10px;
    width: 100vh;
    font-size: 17px;
    font-weight: 200;
    white-space: nowrap;
    text-transform: none;
    z-index: 1000;
    color: white;
    position: absolute;
    right: -25%;
    -webkit-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
            transform: rotate(-90deg);
    bottom: 48.5%;
    overflow: hidden; }
    .page-menu .references .elt-references {
      -webkit-transform: translateX(100%);
          -ms-transform: translateX(100%);
              transform: translateX(100%);
      -webkit-animation: deroule 15s infinite linear;
              animation: deroule 15s infinite linear; }

@-webkit-keyframes deroule {
  from {
    -webkit-transform: translateX(100%);
            transform: translateX(100%); }
  to {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%); } }

@keyframes deroule {
  from {
    -webkit-transform: translateX(100%);
            transform: translateX(100%); }
  to {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%); } }
  .page-menu .wave {
    background-color: black;
    width: 5px;
    min-height: 100%;
    position: absolute;
    top: 0;
    overflow: hidden; }
  .page-menu .bloc-menu {
    z-index: 100;
    width: 100vw;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    left: 0;
    color: white;
    text-align: center; }
    .page-menu .bloc-menu .menu-item-container {
      overflow: hidden; }
    .page-menu .bloc-menu .menu-item {
      line-height: 100px;
      display: block;
      text-transform: uppercase;
      opacity: .5;
      -webkit-transform: translateY(100%);
          -ms-transform: translateY(100%);
              transform: translateY(100%); }
      .page-menu .bloc-menu .menu-item:hover {
        cursor: pointer;
        opacity: 1; }
      @media screen and (max-width: 768px) {
        .page-menu .bloc-menu .menu-item {
          line-height: 70px; } }
  .page-menu .loading-menu {
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
    font-size: 80px;
    text-align: center;
    width: 100vw;
    height: 100vh;
    position: absolute;
    right: 100%;
    color: white;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    opacity: 0;
    transition: all .5s ease-in-out; }
    .page-menu .loading-menu.behind {
      color: black;
      z-index: 2; }
    .page-menu .loading-menu.above {
      color: white;
      z-index: 3; }
    .page-menu .loading-menu.anim-on {
      opacity: 1;
      -webkit-animation: defile 4.5s forwards;
              animation: defile 4.5s forwards;
      -webkit-animation-timing-function: linear;
              animation-timing-function: linear; }
    @media screen and (max-width: 768px) {
      .page-menu .loading-menu {
        font-size: 50px; } }
  @media screen and (max-width: 768px) {
    .page-menu {
      font-size: 50px; } }

.page-menu {
  transition: all .5s ease-in-out; }
  .page-menu.open-menu {
    visibility: visible;
    transition: all .5s ease-in-out;
    opacity: 1; }
    .page-menu.open-menu .menu-item {
      display: block; }
      .page-menu.open-menu .menu-item.about {
        -webkit-animation: appear .5s forwards;
                animation: appear .5s forwards; }
      .page-menu.open-menu .menu-item.work {
        -webkit-animation: appear .5s forwards .1s;
                animation: appear .5s forwards .1s; }
      .page-menu.open-menu .menu-item.contact {
        -webkit-animation: appear .5s forwards .2s;
                animation: appear .5s forwards .2s; }

@-webkit-keyframes defile {
  0% {
    right: 0; }
  80% {
    right: 100%; }
  100% {
    right: 100%; } }

@keyframes defile {
  0% {
    right: 0; }
  80% {
    right: 100%; }
  100% {
    right: 100%; } }

@-webkit-keyframes appear {
  0% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%); }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0); } }

@keyframes appear {
  0% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%); }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0); } }

.bloc-contact {
  width: 100vw;
  height: 100vh;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-style: normal;
  font-weight: 600;
  font-size: 100px;
  text-transform: none; }
  .bloc-contact .name {
    text-transform: capitalize;
    position: absolute; }
    .bloc-contact .name.black {
      color: black; }
    .bloc-contact .name.white {
      color: white; }
    .bloc-contact .name:hover {
      cursor: pointer; }
  @media screen and (max-width: 768px) {
    .bloc-contact {
      font-size: 80px; } }
  @media screen and (max-width: 600px) {
    .bloc-contact {
      font-size: 60px; } }

#loading {
  background-color: black;
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  font-size: 150px; }
  #loading .elt-loader1, #loading .elt-loader2 {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    font-weight: 600;
    padding: 10px; }
  #loading .elt-loader1 {
    color: black;
    -webkit-text-stroke: 1px white; }
  #loading .elt-loader2 {
    color: white;
    text-stroke: 1px white;
    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
            clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
    -webkit-animation: clipAnim 5s forwards ease-out;
            animation: clipAnim 5s forwards ease-out; }

@-webkit-keyframes clipAnim {
  0% {
    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
            clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%); }
  100% {
    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
            clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0); } }

@keyframes clipAnim {
  0% {
    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
            clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%); }
  100% {
    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
            clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0); } }

.copy-confirmation {
  position: absolute;
  opacity: 0; }

.landing-page {
  background-position: center left;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat; }
  .landing-page .bloc-content {
    height: 100vh;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-justify-content: space-around;
        -ms-flex-pack: distribute;
            justify-content: space-around; }
    .landing-page .bloc-content .question {
      text-align: center;
      font-size: 80px;
      font-weight: 600;
      font-style: oblique; }
      .landing-page .bloc-content .question .elt-question {
        display: inline-block; }
      @media screen and (max-width: 1200px) {
        .landing-page .bloc-content .question {
          font-size: 70px; } }
      @media screen and (max-width: 992px) {
        .landing-page .bloc-content .question {
          font-size: 60px; } }
      @media screen and (max-width: 768px) {
        .landing-page .bloc-content .question {
          font-size: 50px; } }
      @media screen and (max-width: 650px) {
        .landing-page .bloc-content .question {
          font-size: 40px; } }
      @media screen and (max-width: 470px) {
        .landing-page .bloc-content .question {
          font-size: 30px; } }
    .landing-page .bloc-content .bloc-infos {
      position: relative;
      width: 80%;
      margin-left: auto;
      margin-right: auto;
      font-size: 25px; }
      .landing-page .bloc-content .bloc-infos .bloc-progression {
        position: absolute;
        top: 0;
        left: 0;
        padding: 15px 0; }
        .landing-page .bloc-content .bloc-infos .bloc-progression span {
          display: block; }
      .landing-page .bloc-content .bloc-infos .skip-btn {
        padding: 15px 0;
        position: absolute;
        top: 0;
        right: 0;
        display: block;
        transition: all .2s ease-in-out;
        color: rgba(255, 255, 255, 0.2); }
        .landing-page .bloc-content .bloc-infos .skip-btn:hover {
          cursor: pointer;
          transition: all .2s ease-in-out;
          color: rgba(255, 255, 255, 0.8); }
      @media screen and (max-width: 1200px) {
        .landing-page .bloc-content .bloc-infos {
          font-size: 22px; } }
      @media screen and (max-width: 992px) {
        .landing-page .bloc-content .bloc-infos {
          font-size: 20px; } }
      @media screen and (max-width: 768px) {
        .landing-page .bloc-content .bloc-infos {
          font-size: 18px; } }
      @media screen and (max-width: 650px) {
        .landing-page .bloc-content .bloc-infos {
          font-size: 15px;
          width: 90%; } }
      @media screen and (max-width: 470px) {
        .landing-page .bloc-content .bloc-infos {
          font-size: 13px; } }
    .landing-page .bloc-content .response {
      text-align: center; }
      .landing-page .bloc-content .response input {
        text-align: center;
        font-style: oblique;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        font-size: 80px;
        font-weight: 200;
        background: none;
        color: rgba(255, 255, 255, 0.4);
        border-bottom: 1px rgba(255, 255, 255, 0.4) solid; }
        .landing-page .bloc-content .response input:focus {
          outline: none;
          border-bottom: 1px rgba(255, 255, 255, 0.8) solid;
          color: rgba(255, 255, 255, 0.8); }
        .landing-page .bloc-content .response input::-moz-selection {
          background-color: white;
          color: black; }
        .landing-page .bloc-content .response input::selection {
          background-color: white;
          color: black; }
        .landing-page .bloc-content .response input::-webkit-input-placeholder {
          text-transform: uppercase;
          font-style: oblique; }
        .landing-page .bloc-content .response input::-moz-placeholder {
          text-transform: uppercase;
          font-style: oblique; }
        .landing-page .bloc-content .response input:-ms-input-placeholder {
          text-transform: uppercase;
          font-style: oblique; }
        .landing-page .bloc-content .response input::-ms-input-placeholder {
          text-transform: uppercase;
          font-style: oblique; }
        .landing-page .bloc-content .response input::placeholder {
          text-transform: uppercase;
          font-style: oblique; }
        @media screen and (max-width: 1200px) {
          .landing-page .bloc-content .response input {
            font-size: 70px; } }
        @media screen and (max-width: 992px) {
          .landing-page .bloc-content .response input {
            font-size: 60px; } }
        @media screen and (max-width: 768px) {
          .landing-page .bloc-content .response input {
            font-size: 50px; } }
        @media screen and (max-width: 650px) {
          .landing-page .bloc-content .response input {
            font-size: 40px;
            width: 90%; } }
        @media screen and (max-width: 470px) {
          .landing-page .bloc-content .response input {
            font-size: 30px; } }

.page-about {
  overflow-y: auto; }
  .page-about .content-container {
    height: 100vh;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-align-content: center;
        -ms-flex-line-pack: center;
            align-content: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center; }
    .page-about .content-container .title-section .content-title {
      white-space: nowrap;
      padding: 0 10px;
      position: absolute;
      top: 0;
      -webkit-transform: translate(0, -50%);
          -ms-transform: translate(0, -50%);
              transform: translate(0, -50%);
      text-transform: uppercase;
      font-weight: 600;
      font-size: 200px; }
      .page-about .content-container .title-section .content-title.first-right {
        right: 0%; }
      .page-about .content-container .title-section .content-title.right {
        right: 0%; }
      .page-about .content-container .title-section .content-title.left {
        left: -25%; }
      @media screen and (max-width: 1200px) {
        .page-about .content-container .title-section .content-title {
          font-size: 180px; } }
      @media screen and (max-width: 992px) {
        .page-about .content-container .title-section .content-title {
          font-size: 140px; } }
      @media screen and (max-width: 768px) {
        .page-about .content-container .title-section .content-title {
          font-size: 120px; } }
      @media screen and (max-width: 500px) {
        .page-about .content-container .title-section .content-title {
          font-size: 80px; } }
      @media screen and (max-width: 400px) {
        .page-about .content-container .title-section .content-title {
          font-size: 60px; } }
    .page-about .content-container .bloc-content {
      display: -webkit-flex;
      display: -moz-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-align-items: center;
         -moz-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-justify-content: center;
         -moz-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      height: 100%; }
      .page-about .content-container .bloc-content .elt-content {
        text-transform: none;
        font-size: 45px;
        width: 90%; }
        .page-about .content-container .bloc-content .elt-content .description-content {
          font-weight: 300; }
        .page-about .content-container .bloc-content .elt-content h1, .page-about .content-container .bloc-content .elt-content h2 {
          font-size: 45px; }
      @media screen and (max-width: 1200px) {
        .page-about .content-container .bloc-content .elt-content {
          font-size: 38px; }
          .page-about .content-container .bloc-content .elt-content h1, .page-about .content-container .bloc-content .elt-content h2 {
            font-size: 38px; } }
      @media screen and (max-width: 992px) {
        .page-about .content-container .bloc-content .elt-content {
          font-size: 35px; }
          .page-about .content-container .bloc-content .elt-content h1, .page-about .content-container .bloc-content .elt-content h2 {
            font-size: 35px; } }
      @media screen and (max-width: 768px) {
        .page-about .content-container .bloc-content .elt-content {
          font-size: 35px; }
          .page-about .content-container .bloc-content .elt-content h1, .page-about .content-container .bloc-content .elt-content h2 {
            font-size: 35px; } }
      @media screen and (max-width: 500px) {
        .page-about .content-container .bloc-content .elt-content {
          font-size: 28px; }
          .page-about .content-container .bloc-content .elt-content h1, .page-about .content-container .bloc-content .elt-content h2 {
            font-size: 28px; } }

.page-work {
  overflow-y: auto; }
  .page-work .bloc-titre {
    width: 100vw;
    height: 70vh; }
    .page-work .bloc-titre .move-up-container {
      position: fixed;
      top: 50%;
      left: 0;
      width: 100%;
      text-align: center;
      -webkit-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
              transform: translateY(-50%); }
      .page-work .bloc-titre .move-up-container.titre-clone {
        opacity: 0; }
    .page-work .bloc-titre .elt-titre {
      font-size: 50px;
      font-weight: 600; }
      @media screen and (max-width: 500px) {
        .page-work .bloc-titre .elt-titre {
          font-size: 40px; } }
      @media screen and (max-width: 400px) {
        .page-work .bloc-titre .elt-titre {
          font-size: 30px; } }
  .page-work .bloc-work {
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center; }
    .page-work .bloc-work .col-work {
      margin-top: 80px; }
      .page-work .bloc-work .col-work .elt-work {
        position: relative;
        margin: 80px auto;
        width: 500px;
        height: 280px;
        background-color: black;
        background-position: center;
        background-size: cover; }
        .page-work .bloc-work .col-work .elt-work.superherocheesecake {
          background-image: url(../images/shcc-preview.jpg); }
        .page-work .bloc-work .col-work .elt-work.fanettebullat {
          background-image: url(../images/fanette-preview.jpg); }
        .page-work .bloc-work .col-work .elt-work.nike {
          background-image: url(../images/nike3d.jpg); }
        .page-work .bloc-work .col-work .elt-work.klein {
          background-image: url(../images/projet1-klein.jpg); }
        .page-work .bloc-work .col-work .elt-work.words-cascade {
          background-image: url(../images/github-logo.jpg); }
        .page-work .bloc-work .col-work .elt-work.word-reveal {
          background-image: url(../images/github-logo.jpg); }
        .page-work .bloc-work .col-work .elt-work.monologue-otis {
          background-image: url(../images/github-logo.jpg); }
        .page-work .bloc-work .col-work .elt-work.henri-mouraire {
          background-image: url(../images/henri-mouraire.jpg); }
        .page-work .bloc-work .col-work .elt-work .title-work {
          white-space: nowrap;
          position: absolute;
          top: 30%;
          right: 0;
          -webkit-transform: translate(0%, -50%);
              -ms-transform: translate(0%, -50%);
                  transform: translate(0%, -50%);
          opacity: 0; }
          .page-work .bloc-work .col-work .elt-work .title-work .tags-title {
            text-transform: none;
            font-weight: 600;
            font-size: 60px; }
            @media screen and (max-width: 1200px) {
              .page-work .bloc-work .col-work .elt-work .title-work .tags-title {
                font-size: 50px; } }
            @media screen and (max-width: 992px) {
              .page-work .bloc-work .col-work .elt-work .title-work .tags-title {
                font-size: 40px; } }
            @media screen and (max-width: 600px) {
              .page-work .bloc-work .col-work .elt-work .title-work .tags-title {
                font-size: 25px; } }
          .page-work .bloc-work .col-work .elt-work .title-work .tags {
            text-align: right;
            line-height: 10px;
            font-size: 14px;
            font-weight: 300; }
            @media screen and (max-width: 1200px) {
              .page-work .bloc-work .col-work .elt-work .title-work .tags {
                font-size: 13px;
                line-height: 9px; } }
            @media screen and (max-width: 992px) {
              .page-work .bloc-work .col-work .elt-work .title-work .tags {
                font-size: 10px;
                line-height: 7px; } }
            @media screen and (max-width: 600px) {
              .page-work .bloc-work .col-work .elt-work .title-work .tags {
                font-size: 8px;
                line-height: 4px; } }
          @media screen and (max-width: 1200px) {
            .page-work .bloc-work .col-work .elt-work .title-work {
              width: 95%;
              top: 35%;
              -webkit-transform: translate(0, -100%);
                  -ms-transform: translate(0, -100%);
                      transform: translate(0, -100%); }
              .page-work .bloc-work .col-work .elt-work .title-work .tags {
                text-align: left; } }
        .page-work .bloc-work .col-work .elt-work .moving-title-work {
          opacity: 0;
          white-space: nowrap;
          position: absolute;
          top: 50%;
          left: 50%; }
        @media screen and (max-width: 992px) {
          .page-work .bloc-work .col-work .elt-work {
            margin: 70px auto;
            width: 400px;
            height: 220px; } }
        @media screen and (max-width: 768px) {
          .page-work .bloc-work .col-work .elt-work {
            margin: 50px auto;
            width: 350px;
            height: 200px; } }
        @media screen and (max-width: 600px) {
          .page-work .bloc-work .col-work .elt-work {
            margin: 40px auto;
            width: 250px;
            height: 140px; } }
        .page-work .bloc-work .col-work .elt-work:hover {
          cursor: pointer; }
  .page-work .anim-project {
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0; }
    .page-work .anim-project .moving-title-project {
      white-space: nowrap;
      text-transform: uppercase;
      font-size: 120px;
      font-weight: 600;
      text-align: center;
      line-height: 120px;
      opacity: 0; }
      @media screen and (max-width: 768px) {
        .page-work .anim-project .moving-title-project {
          font-size: 80px; } }
      @media screen and (max-width: 650px) {
        .page-work .anim-project .moving-title-project {
          font-size: 50px; } }
      @media screen and (max-width: 550px) {
        .page-work .anim-project .moving-title-project {
          font-size: 30px; } }

.page-project {
  overflow-y: auto; }
  .page-project .content-container {
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center; }
  .page-project .head-container {
    padding-top: 15vh;
    height: 85vh;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center; }
    .page-project .head-container .project-box .container-title h1 {
      text-align: center;
      text-transform: none;
      font-size: 80px;
      font-weight: 600; }
      @media screen and (max-width: 600px) {
        .page-project .head-container .project-box .container-title h1 {
          font-size: 60px; } }
    .page-project .head-container .project-box .container-text {
      margin-top: 50px;
      text-transform: none; }
      .page-project .head-container .project-box .container-text .elt-text .title-text {
        font-size: 22px;
        font-weight: 600; }
      .page-project .head-container .project-box .container-text .elt-text .content-text {
        min-height: 100px;
        font-size: 22px;
        font-weight: 200; }
        .page-project .head-container .project-box .container-text .elt-text .content-text a:hover {
          border-bottom: 1.5px solid white; }
      @media screen and (max-width: 600px) {
        .page-project .head-container .project-box .container-text .elt-text .title-text {
          font-size: 18px; }
        .page-project .head-container .project-box .container-text .elt-text .content-text {
          min-height: 50px;
          font-size: 18px; } }
  .page-project .content-container .container-screenshot {
    margin: 15px 0; }
    .page-project .content-container .container-screenshot .elt-screenshot {
      width: 100%; }
      .page-project .content-container .container-screenshot .elt-screenshot img, .page-project .content-container .container-screenshot .elt-screenshot video {
        opacity: 0;
        width: 100%;
        height: auto; }
      .page-project .content-container .container-screenshot .elt-screenshot.iframe-container {
        position: relative;
        padding-bottom: 56.25%;
        /* 16:9 */
        padding-top: 25px;
        height: 0; }
        .page-project .content-container .container-screenshot .elt-screenshot.iframe-container iframe {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%; }
      .page-project .content-container .container-screenshot .elt-screenshot.elt-link {
        transition: opacity .3s ease-in-out; }
        .page-project .content-container .container-screenshot .elt-screenshot.elt-link:hover {
          transition: opacity .3s ease-in-out;
          opacity: .8; }
  .page-project .content-container .container-text {
    opacity: 0; }
    .page-project .content-container .container-text .elt-text {
      width: 90%;
      margin: 100px auto; }
      .page-project .content-container .container-text .elt-text h3 {
        text-transform: none;
        font-weight: 400;
        font-size: 20px; }
      .page-project .content-container .container-text .elt-text a {
        font-size: 20px;
        font-weight: 600; }
        .page-project .content-container .container-text .elt-text a:hover {
          border-bottom: 1.5px solid white; }
      @media screen and (max-width: 600px) {
        .page-project .content-container .container-text .elt-text h3, .page-project .content-container .container-text .elt-text a {
          font-size: 18px; } }
  .page-project .container-links {
    height: 100vh;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center; }
    .page-project .container-links .link-projet {
      opacity: 0;
      z-index: 1000;
      font-size: 80px;
      text-transform: none; }
      .page-project .container-links .link-projet.disable {
        color: rgba(255, 255, 255, 0.3); }
      .page-project .container-links .link-projet:hover {
        cursor: pointer; }
      @media screen and (max-width: 768px) {
        .page-project .container-links .link-projet {
          font-size: 50px; } }
      @media screen and (max-width: 500px) {
        .page-project .container-links .link-projet {
          font-size: 30px; } }
    .page-project .container-links .container-next-apercu, .page-project .container-links .container-previous-apercu {
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
      width: 50%; }
      .page-project .container-links .container-next-apercu img, .page-project .container-links .container-previous-apercu img {
        width: 100%;
        height: auto; }
    .page-project .container-links .container-next-apercu {
      -webkit-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%); }
    .page-project .container-links .container-previous-apercu {
      -webkit-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%); }

.page-contact {
  overflow-y: auto; }
  .page-contact .container-message {
    height: 100vh;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center; }
    .page-contact .container-message .elt-message {
      text-align: center;
      font-size: 40px;
      font-weight: 400; }
      .page-contact .container-message .elt-message a {
        font-weight: 200; }
  .page-contact .big-container-choices .container-choices-form {
    height: 100vh;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-align-content: center;
        -ms-flex-line-pack: center;
            align-content: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center; }
    .page-contact .big-container-choices .container-choices-form .container-choice {
      text-align: center; }
      .page-contact .big-container-choices .container-choices-form .container-choice .elt-choice {
        min-width: 100vw; }
        .page-contact .big-container-choices .container-choices-form .container-choice .elt-choice div {
          white-space: nowrap;
          line-height: 140px;
          color: rgba(255, 255, 255, 0.5);
          background: none;
          font-size: 140px;
          font-style: oblique;
          font-weight: 600; }
          .page-contact .big-container-choices .container-choices-form .container-choice .elt-choice div:hover {
            color: white;
            cursor: pointer; }
          @media screen and (max-width: 1200px) {
            .page-contact .big-container-choices .container-choices-form .container-choice .elt-choice div {
              font-size: 100px;
              line-height: 100px; } }
          @media screen and (max-width: 992px) {
            .page-contact .big-container-choices .container-choices-form .container-choice .elt-choice div {
              font-size: 90px;
              line-height: 90px; } }
          @media screen and (max-width: 768px) {
            .page-contact .big-container-choices .container-choices-form .container-choice .elt-choice div {
              font-size: 60px;
              line-height: 60px; } }
          @media screen and (max-width: 500px) {
            .page-contact .big-container-choices .container-choices-form .container-choice .elt-choice div {
              font-size: 40px;
              line-height: 40px; } }
  .page-contact .container-form {
    display: none;
    visibility: hidden;
    opacity: 0;
    margin: 150px auto;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center; }
    .page-contact .container-form form {
      width: 100%; }
      .page-contact .container-form form .container-input {
        width: 90%;
        margin: 20px auto; }
        .page-contact .container-form form .container-input .elt-input {
          width: 100%; }
          .page-contact .container-form form .container-input .elt-input input {
            font-style: oblique;
            font-weight: 200;
            font-size: 40px;
            width: 100%;
            color: rgba(255, 255, 255, 0.5);
            background: none;
            border-bottom: 1.5px rgba(255, 255, 255, 0.5) solid; }
            .page-contact .container-form form .container-input .elt-input input#submit {
              padding: 5px 15px;
              font-weight: 400;
              font-size: 30px;
              color: white;
              width: 20%;
              border: 1.5px rgba(255, 255, 255, 0.5) solid;
              border-radius: 2px; }
              .page-contact .container-form form .container-input .elt-input input#submit:focus {
                border: 1.5px white solid; }
              .page-contact .container-form form .container-input .elt-input input#submit:hover {
                cursor: pointer; }
            .page-contact .container-form form .container-input .elt-input input:focus {
              color: white;
              outline: none;
              border-bottom: 1.5px white solid; }
          .page-contact .container-form form .container-input .elt-input textarea {
            font-style: oblique;
            font-weight: 200;
            color: rgba(255, 255, 255, 0.5);
            font-size: 40px;
            border-left: none;
            border-right: none;
            border-top: none;
            width: 100%;
            background: none;
            border-bottom: 1.5px rgba(255, 255, 255, 0.5) solid; }
            .page-contact .container-form form .container-input .elt-input textarea:focus {
              outline: none;
              color: white;
              border-bottom: 1.5px white solid; }
          .page-contact .container-form form .container-input .elt-input input::-moz-selection, .page-contact .container-form form .container-input .elt-input textarea::-moz-selection {
            background-color: white;
            color: black; }
          .page-contact .container-form form .container-input .elt-input input::selection, .page-contact .container-form form .container-input .elt-input textarea::selection {
            background-color: white;
            color: black; }
        .page-contact .container-form form .container-input .elt-label label {
          font-size: 40px;
          text-transform: none;
          font-weight: 400; }
        .page-contact .container-form form .container-input .elt-label .unlock {
          height: 22%;
          width: auto;
          position: absolute;
          right: 20px;
          bottom: 15px;
          opacity: 0; }
          .page-contact .container-form form .container-input .elt-label .unlock:hover {
            cursor: pointer;
            opacity: 1; }
        @media screen and (max-width: 700px) {
          .page-contact .container-form form .container-input .elt-input input, .page-contact .container-form form .container-input .elt-input textarea {
            font-size: 25px; }
            .page-contact .container-form form .container-input .elt-input input#submit, .page-contact .container-form form .container-input .elt-input textarea#submit {
              font-size: 25px;
              width: 50%; }
          .page-contact .container-form form .container-input .elt-label label {
            font-size: 25px; } }
    .page-contact .container-form .return-btn {
      position: fixed;
      right: 0;
      bottom: 0;
      padding: 50px;
      font-size: 30px;
      font-weight: 400; }
      .page-contact .container-form .return-btn:hover {
        cursor: pointer; }