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

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: 'Karla', sans-serif;
  background-color: #f0f4f3;
  overflow-x: hidden; }

.clr {
  clear: both; }

h1 {
  font-size: 62px;
  font-weight: 900;
  line-height: 75px; }
  @media screen and (max-width: 1680px) {
    h1 {
      font-size: 55px;
      line-height: 65px; } }
  @media screen and (max-width: 768px) {
    h1 {
      font-size: 34px;
      font-weight: 900;
      line-height: 42px; } }

h3 {
  display: block;
  text-transform: uppercase;
  font-weight: 900;
  color: #000000;
  font-size: 18px;
  letter-spacing: 2px; }
  h3 a {
    text-decoration: none;
    color: #000000;
    transition: opacity 0.3s; }
    h3 a:hover {
      opacity: 0.45; }
      @media screen and (max-width: 1080px) {
        h3 a:hover {
          opacity: 1; } }

p strong {
  font-weight: 900; }

.page-content {
  position: relative;
  height: auto;
  width: 100%;
  height: auto;
  min-height: 100vh; }
  .page-content.home {
    height: 100vh;
    min-height: 860px; }
    @media screen and (max-width: 1680px) {
      .page-content.home {
        min-height: 820px; } }
    @media screen and (max-width: 1080px) {
      .page-content.home {
        min-height: 680px; } }
    @media screen and (max-width: 768px) {
      .page-content.home {
        min-height: 0; } }
  .page-content .desk {
    height: 100%;
    width: 100%; }
    @media screen and (max-width: 768px) {
      .page-content .desk {
        display: none; } }
  .page-content .overlay {
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    position: absolute;
    z-index: 900;
    display: none; }
  .page-content .middle {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    position: relative; }
    .page-content .middle h1 {
      max-width: 700px;
      display: block;
      position: absolute;
      left: 90px;
      margin-top: -285px;
      color: #000000;
      z-index: 910; }
      @media screen and (max-width: 1080px) {
        .page-content .middle h1 {
          width: calc(100% - 325px);
          max-width: 600px;
          margin-top: -225px;
          font-size: 45px;
          line-height: 50px;
          left: 50px; } }
    .page-content .middle .featured {
      position: relative;
      padding: 65px 0;
      background: #292929;
      z-index: 909;
      display: block;
      cursor: pointer;
      max-width: 750px;
      width: 50%; }
      .page-content .middle .featured .btn {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 100px;
        width: 100px;
        background: url(../assets/images/Bouton-REEL-gris.svg) no-repeat center;
        transition: background 0.3s;
        background-size: 100px; }
      .page-content .middle .featured:hover {
        z-index: 915; }
        .page-content .middle .featured:hover .btn {
          background: url(../assets/images/fullscreen.svg) no-repeat center;
          background-size: 100px; }
      .page-content .middle .featured img {
        width: 100%; }
      @media screen and (max-width: 1080px) {
        .page-content .middle .featured {
          padding: 40px 0;
          width: calc(100% - 500px); }
          .page-content .middle .featured .btn {
            width: 70px;
            height: 70px;
            background-size: 70px; }
          .page-content .middle .featured:hover .btn {
            background-size: 70px; } }
  .page-content .menu {
    position: absolute;
    top: 35px;
    right: 45px;
    width: 225px;
    text-align: right; }
    @media screen and (max-width: 1080px) {
      .page-content .menu {
        right: 25px; } }
    @media screen and (max-width: 1680px) {
      .page-content .menu.portfolio {
        right: 110px; } }
    @media screen and (max-width: 1080px) {
      .page-content .menu.portfolio {
        right: 40px; } }
    .page-content .menu a {
      display: block;
      text-decoration: none;
      font-weight: 900;
      color: #000000;
      letter-spacing: 1px;
      transition: opacity 0.3s; }
      .page-content .menu a.portfolio {
        font-size: 18px;
        margin-bottom: 40px;
        letter-spacing: 2px; }
        .page-content .menu a.portfolio.active {
          color: #8e9291; }
          .page-content .menu a.portfolio.active:hover {
            opacity: 1 !important; }
      .page-content .menu a.contact {
        font-size: 22px;
        line-height: 30px;
        padding-bottom: 30px;
        background: url(../assets/images/fleche-desktop.svg) no-repeat right bottom;
        margin-bottom: 40px; }
      .page-content .menu a.reel {
        display: inline-block;
        max-width: 100px;
        margin-bottom: 35px; }
        .page-content .menu a.reel img {
          width: 100%; }
      .page-content .menu a:hover {
        opacity: 0.45; }
        @media screen and (max-width: 1080px) {
          .page-content .menu a:hover {
            opacity: 1; } }
    .page-content .menu .social a {
      display: inline-block;
      margin-left: 5px; }
    @media screen and (max-width: 768px) {
      .page-content .menu {
        display: none; } }
  .page-content .full-page-menu {
    height: 100vh;
    position: relative;
    background: url(../assets/images/Image-mobile.jpg) no-repeat center top;
    background-size: cover;
    transition: opacity 0.2s; }
    @media screen and (min-width: 769px) {
      .page-content .full-page-menu {
        display: none; } }
    .page-content .full-page-menu.portfolio {
      opacity: 0; }
      @media screen and (min-width: 769px) {
        .page-content .full-page-menu.portfolio {
          display: none !important; } }
      .page-content .full-page-menu.portfolio.active {
        opacity: 1; }
    .page-content .full-page-menu h3 {
      position: absolute;
      left: 10px;
      top: 20px;
      z-index: 900; }
      .page-content .full-page-menu h3.more {
        left: inherit;
        right: 10px; }
      .page-content .full-page-menu h3 a img {
        max-width: 125px; }
        .page-content .full-page-menu h3 a img.picto {
          max-width: 20px; }
    .page-content .full-page-menu .center-menu {
      display: flex;
      height: 100%;
      position: absolute;
      top: 0;
      left: 10px;
      width: 100%;
      align-items: center;
      opacity: 0;
      transition: all 0.5s;
      margin-top: 25px; }
      .page-content .full-page-menu .center-menu.active {
        opacity: 1;
        margin-top: 0; }
      .page-content .full-page-menu .center-menu ul li {
        font-size: 40px;
        text-transform: uppercase;
        font-weight: 900;
        letter-spacing: 3px; }
        .page-content .full-page-menu .center-menu ul li a {
          color: #ffffff;
          text-decoration: none;
          display: block;
          margin: 40px 0; }
        @media screen and (min-width: 769px) {
          .page-content .full-page-menu .center-menu ul li {
            font-size: 55px;
            line-height: 65px; } }
    .page-content .full-page-menu.portfolio {
      display: none; }
    .page-content .full-page-menu .more-infos {
      position: absolute;
      top: 0;
      left: 100%;
      height: 100%;
      width: 100%;
      background: #f0f4f3;
      transition: left 0.3s; }
      .page-content .full-page-menu .more-infos.active {
        left: 0; }
      .page-content .full-page-menu .more-infos .center {
        height: 100%;
        width: 100%;
        padding-top: 125px; }
        .page-content .full-page-menu .more-infos .center h1 {
          display: block;
          max-width: 300px;
          margin-left: 35px;
          margin-bottom: 25px;
          margin-right: 35px; }
    .page-content .full-page-menu .contact {
      position: absolute;
      top: 0;
      left: 100%;
      height: 100%;
      width: 100%;
      background: #f0f4f3;
      transition: left 0.3s; }
      .page-content .full-page-menu .contact.active {
        left: 0; }
      .page-content .full-page-menu .contact .center {
        height: 100%;
        width: 100%;
        padding-top: 125px;
        position: relative; }
        .page-content .full-page-menu .contact .center a.email {
          position: relative;
          display: inline-block;
          text-decoration: none;
          color: #000000;
          font-weight: 900;
          font-size: 30px;
          line-height: 38px;
          padding-bottom: 40px;
          background: url(../assets/images/fleche-desktop.svg) no-repeat left bottom;
          margin-bottom: 40px;
          transition: none;
          margin-left: 35px; }
        .page-content .full-page-menu .contact .center .social {
          position: relative;
          margin-left: 35px;
          margin-bottom: 50px; }
          .page-content .full-page-menu .contact .center .social a img {
            margin-right: 12px; }
    .page-content .full-page-menu a.backtomenu {
      display: block;
      margin-left: 35px;
      text-transform: uppercase;
      font-weight: 900;
      font-size: 18px;
      text-decoration: none;
      color: #000000;
      padding-left: 30px;
      background: url(../assets/images/fleche-back.svg) no-repeat left center;
      background-size: 20px;
      outline: none !important; }
  .page-content .mobile-menu {
    position: relative;
    height: 86px;
    border-bottom: 2px solid #ffffff;
    display: none; }
    @media screen and (max-width: 768px) {
      .page-content .mobile-menu {
        display: block; } }
    .page-content .mobile-menu a {
      display: block;
      position: absolute; }
      .page-content .mobile-menu a.tog-menu {
        left: 10px;
        text-transform: uppercase;
        font-weight: 900;
        color: #000000;
        font-size: 18px;
        letter-spacing: 1px;
        text-decoration: none;
        background: url(../assets/images/fleche-menu-mobile.svg) no-repeat right center;
        background-size: 13px;
        padding-right: 20px;
        top: 32px; }
      .page-content .mobile-menu a.reel {
        right: 10px;
        top: 10px; }
    .page-content .mobile-menu img {
      width: 65px;
      text-align: right; }
  .page-content .projects {
    width: calc(100% - 420px);
    margin-left: 90px;
    margin-right: 330px;
    padding: 35px 0 60px 0;
    max-width: 1600px; }
    .page-content .projects h3 a img {
      max-width: 125px; }
    @media screen and (max-width: 1680px) {
      .page-content .projects {
        width: calc(100% - 420px); } }
    @media screen and (max-width: 1080px) {
      .page-content .projects {
        width: calc(100% - 350px); }
        .page-content .projects h3 {
          margin-bottom: 100px; } }
    @media screen and (max-width: 768px) {
      .page-content .projects {
        width: 100%;
        padding: 0;
        margin: 0; }
        .page-content .projects h3 {
          display: none; } }
    .page-content .projects .controls {
      padding: 35px 0;
      display: flex;
      align-items: center; }
      @media screen and (max-width: 1080px) {
        .page-content .projects .controls {
          display: none; } }
      @media screen and (max-width: 768px) {
        .page-content .projects .controls {
          display: flex;
          padding-left: 30px; } }
      .page-content .projects .controls a {
        display: inline-block;
        opacity: 0.45;
        transition: opacity 0.3s; }
        .page-content .projects .controls a:first-of-type {
          margin-right: 125px; }
          @media screen and (max-width: 768px) {
            .page-content .projects .controls a:first-of-type {
              margin-right: 25px; } }
        .page-content .projects .controls a.list {
          display: flex;
          align-items: center;
          text-decoration: none;
          color: #000000; }
          .page-content .projects .controls a.list img {
            margin-right: 10px; }
        .page-content .projects .controls a:hover {
          opacity: 1; }
      .page-content .projects .controls .active {
        opacity: 1; }
      @media screen and (max-width: 768px) {
        .page-content .projects .controls img {
          max-width: 30px; } }
    .page-content .projects .project {
      position: relative;
      float: left;
      width: 50%;
      height: auto;
      background-size: cover;
      background-position: center;
      min-height: 250px;
      overflow: hidden; }
      @media screen and (max-width: 1680px) {
        .page-content .projects .project {
          width: 100%;
          max-width: 750px; } }
      .page-content .projects .project .overlay {
        background-color: rgba(0, 0, 0, 0.8);
        z-index: 10;
        display: block;
        opacity: 0;
        transition: opacity 0.3s; }
      .page-content .projects .project .title {
        text-transform: uppercase;
        font-weight: 700;
        color: #ffffff;
        letter-spacing: 1px;
        font-size: 20px;
        position: absolute;
        bottom: 30px;
        left: 20px;
        width: calc(100% - 40px);
        color: #ffffff;
        line-height: 32px;
        transition: opacity 0.3s; }
        @media screen and (max-width: 1080px) {
          .page-content .projects .project .title {
            font-size: 18px;
            bottom: 20px;
            line-height: 26px; } }
      .page-content .projects .project .infos {
        position: relative;
        z-index: 15;
        opacity: 0;
        transition: opacity 0.3s;
        padding: 40px 20px 30px 20px;
        color: #ffffff;
        font-size: 22px;
        font-weight: 700; }
        @media screen and (max-width: 1080px) {
          .page-content .projects .project .infos {
            padding: 30px 20px 20px 20px;
            font-size: 18px; } }
        .page-content .projects .project .infos ul {
          padding-bottom: 65px; }
          .page-content .projects .project .infos ul li {
            margin-bottom: 12.5px; }
            .page-content .projects .project .infos ul li strong {
              color: #f4fa9a !important;
              padding: 0;
              margin: 0; }
          @media screen and (max-width: 1080px) {
            .page-content .projects .project .infos ul {
              padding-bottom: 45px; } }
        .page-content .projects .project .infos a {
          position: absolute;
          bottom: 30px;
          transition: color 0.3s;
          text-transform: uppercase;
          text-decoration: underline;
          color: #ffffff;
          letter-spacing: 1px;
          font-size: 20px; }
          @media screen and (max-width: 1080px) {
            .page-content .projects .project .infos a {
              font-size: 18px;
              bottom: 10px !important; } }
          .page-content .projects .project .infos a:hover {
            color: #f4fa9a; }
            @media screen and (max-width: 1080px) {
              .page-content .projects .project .infos a:hover {
                color: #ffffff; } }
      .page-content .projects .project:hover .overlay, .page-content .projects .project:hover .infos {
        opacity: 1; }
      .page-content .projects .project:hover .title {
        opacity: 0; }
      .page-content .projects .project.list .overlay, .page-content .projects .project.list .infos {
        opacity: 1; }
      .page-content .projects .project.list .title {
        opacity: 0; }

@keyframes grain {
  0% {
    left: 0px;
    top: 0px; }
  25% {
    left: -5%;
    top: -10%; }
  50% {
    left: -15%;
    top: -5%; }
  75% {
    left: -3%;
    top: -10%; }
  100% {
    left: -15%;
    top: -5%; } }
      .page-content .projects .project .grain {
        position: absolute;
        top: 0;
        left: 0;
        width: 200%;
        height: 200%;
        background: url(../assets/images/grain.png) repeat center;
        animation-name: grain;
        animation-duration: 0.5s;
        animation-iteration-count: infinite; }
  .page-content .credits {
    position: absolute;
    width: 160px;
    bottom: 15px;
    right: 45px; }
    .page-content .credits p {
      text-transform: uppercase;
      font-weight: 100;
      color: #8c8e8d;
      font-size: 10px;
      line-height: 18px;
      text-align: right; }
    @media screen and (max-width: 768px) {
      .page-content .credits {
        display: none; } }
  .page-content .border-white {
    position: absolute;
    top: 40px;
    left: 0;
    width: 245px;
    height: 3px;
    background-color: white;
    z-index: -1; }
  .page-content .border-yellow {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #f4fa9a;
    z-index: -1; }
  .page-content .border-pf {
    position: absolute;
    top: 42px;
    right: 0;
    width: 245px;
    height: 3px;
    background-color: white;
    z-index: -1; }
    @media screen and (max-width: 1680px) {
      .page-content .border-pf {
        right: 65px;
        width: 260px; } }
    @media screen and (max-width: 1080px) {
      .page-content .border-pf {
        right: 0;
        width: 50%; } }
    @media screen and (max-width: 768px) {
      .page-content .border-pf {
        display: none; } }

#player {
  height: 100vh;
  position: fixed;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  display: none;
  z-index: 999; }
  #player #close {
    position: absolute;
    top: 25px;
    right: 25px;
    cursor: pointer;
    z-index: 999;
    color: #ffffff;
    font-weight: 900;
    transition: color 0.3s; }
    #player #close:hover {
      color: #f4fa9a; }
  #player .player-center {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center; }
  #player .embed-container {
    width: 75%;
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden; }
    @media screen and (max-width: 768px) {
      #player .embed-container {
        width: 100%; } }
  #player .embed-container iframe, #player .embed-container object, #player .embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }