@charset "UTF-8";
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  font-smoothing: antialiased;
  font-smooth: never;
  -moz-font-smooth: never;
}

@font-face {
  font-family: 'pitch';
  src: url("../fonts/pitch-sans-web-semibold.eot");
  src: url("../fonts/pitch-sans-web-semibold.woff") format("woff"), url("../fonts/pitch-sans-web-semibold.html") format("woff");
  font-weight: normal;
  font-style: normal;
}

body {
  margin: 0;
  background-color: white;
  font-family: 'jl';
  overflow-x: hidden;
}

.body--blocked {
  overflow: hidden;
}

ul {
  margin: 0;
  padding: 0;
}

a {
  color: #000;
  text-decoration: none;
}

.about-meta a, .about-credits a, .project-infos-meta a {
  text-decoration: underline;
  -webkit-text-decoration-style: dotted;
          text-decoration-style: dotted;
}

.about-meta a:hover, .about-credits a:hover, .project-infos-meta a:hover {
  text-decoration: none;
}

.clear {
  position: relative;
  clear: both;
}

menu {
  margin: 0;
  padding: 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10000;
  -webkit-transition: -webkit-transform .5s ease-out;
  transition: -webkit-transform .5s ease-out;
  transition: transform .5s ease-out;
  transition: transform .5s ease-out, -webkit-transform .5s ease-out;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

menu .menu-container {
  background-color: white;
  position: relative;
  width: 100%;
}

menu .logo {
  margin: 0;
  padding: 0;
  position: relative;
  float: left;
  text-transform: uppercase;
}

menu .logo div {
  background-color: #000;
  border-radius: 50%;
  display: inline-block;
}

menu .nav-filters {
  margin: 0;
}

menu .nav-rightlg {
  margin: 0;
}

menu .nav-filters li {
  list-style: none;
}

menu .nav-rightlg li {
  list-style: none;
}

menu .nav-back  {
  text-transform: uppercase;
}

menu .nav-right-container {
  position: relative;
  float: right;
  text-transform: uppercase;
}

menu .nav-rightlg {
  position: relative;
  float: right;
  text-transform: lowercase;
}


menu .nav-underline:hover {
  text-decoration: underline;
}

menu .filters {
  cursor: pointer;
}

.about-main p {
  margin: 0;
}

.about-infos p {
  margin: 0;
}

.about-infos a {
  display: inline-block;
}

.about-infos a:hover {
  border-bottom: none;
}

.about-meta {
  clear: both;
}

.about-meta ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: relative;
  float: left;
}

/* feed */
.feed-col {
  position: relative;
  float: left;
  width: calc((-2.5vw + 100%)/4);
  margin-right: 0.8vw;
}

.feed-col:nth-child(4) {
  margin-right: 0;
}

.feed-col .feed-a:last-child .feed-project {
  margin: 0;
}

.feed-a a {
  cursor: url("plus.svg"), auto;
}

.feed-project {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.feed-project img, .feed-project video {
  width: 100%;
  display: block;
}

.feed-project .feed-placeholder {
  opacity: 0;
}

.feed-project .lazy-loaded {
  position: absolute;
  top: 0;
  left: 0;
}

.feed-project .feed-project-infos {
  width: 100%;
}

.feed-project .feed-project-infos h2 {
  margin: 0;
  padding: 0;
}

/* Project */
.slideshow-container {
  width: 100%;
}

.project-infos {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  font-size: .8vw;
  line-height: .96vw;
  font-weight: 100;
  font-family: 'pitch', monospace;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  z-index: 3000;
}

.project-infos .project-infos-animation {
  background-color: #ffff;
}

.project-infos .project-infos-header {
  text-transform: uppercase;
}

.project-infos h1 {
  margin: 0;
  padding: 0;
}

/* Tablettes + Ordinateur ----------------------------------------------------- */
@media screen and (min-width: 981px) {
  body {
    padding: 4.6vw 2vw 2vw 2vw;
  }
  menu .menu-container {
    padding: 1.6vw 2vw 1.6vw 2vw;
    font-size: 1.44vw;
    line-height: 1.44vw;
    font-weight: 100;
    font-family: 'pitch', sans-serif;
  }
  menu .logo {
    font-size: 1.44vw;
    line-height: 1.44vw;
    font-weight: 100;
    font-family: 'pitch', sans-serif;
    z-index: 20;
  }
  menu .logo div {
    height: 1.44vw;
    width: 1.44vw;
    margin: -.3vw .25vw 0 0;
    display: inline-block;
    vertical-align: middle;
  }
  menu .logo span {
    margin-left: .4vw;
    display: none;
  }
  menu .logo:hover span {
    display: inline-block;
  }
  menu .nav-filters {
    position: absolute;
    width: 100%;
    top: 1.8vw;
    left: 0;
    text-align: center;
    font-size: 0;
  }
  menu .nav-filters li {
    display: inline-block;
    font-size: .8vw;
    line-height: .96vw;
    font-weight: 100;
    font-family: 'pitch', monospace;
    margin-right: .5vw;
  }
  menu .filter {
    border: 0.08vw solid #000;
    padding: .2vw .9vw .25vw .9vw;
    border-radius: .8vw;
    text-transform: lowercase;
  }
  menu .filter:hover, menu .filter--active {
    background-color: #000;
    color: #FFF;

    
  }
  menu .nav-back {
    position: absolute;
    top: 1.6vw;
    left: calc(65% + .4vw);
    text-transform: uppercase;
  }
  .menu--active {
    -webkit-transform: translateY(-4.7vw);
            transform: translateY(-4.7vw);
    padding-bottom: 3vw;
  }
  .menu--active:hover {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  /* About */
  .about-wrapper {
    min-height: calc(100vh - 7vw);
    padding-bottom: 4.6vw;
  }
  .about-main, .about-meta, .about-infos {
    margin-top: -.2vw;
  }
  .about-main {
    font-size: 2.58vw;
    line-height: 2.58vw;
    font-weight: 100;
    font-family: 'pitch', sans-serif;
    margin-bottom: 4.6vw;
  }
  .about-infos {
    font-size: 1.44vw;
    line-height: 1.44vw;
    font-weight: 100;
    font-family: 'pitch', sans-serif;
    text-transform: uppercase;
    margin-bottom: 4.6vw;
  }
  .about-infos a:hover {
    text-decoration: underline;
  }
  .about-infos-column {
    position: relative;
    float: left;
    width: 50%;
  }
  .about-infos-column:nth-child(2) {
    padding-left: .4vw;
  }
  .about-meta {
    font-size: .8vw;
    line-height: .96vw;
    font-weight: 100;
    font-family: 'pitch', monospace;
  }
  .about-meta ul {
    float: left;
    width: 25%;
  }
  .about-meta ul:not(:first-child) {
    padding-left: .4rem;
  }
  .about-meta li {
    padding-left: 4.5vw;
    text-indent: -2.5vw;
  }
  .about-credits {
    font-size: .8vw;
    line-height: .96vw;
    font-weight: 100;
    font-family: 'pitch', monospace;
    width: 100%;
    margin-bottom: .5vw;
  }
  .about-credits div {
    position: relative;
    float: left;
    width: 25%;
  }
  .about-credits div:not(:first-child) {
    padding-left: .4rem;
  }
  .about-credits div:nth-child(1) {
    width: 50%;
  }
  .about-credits .data-privacy {
    text-decoration: underline;
    -webkit-text-decoration-style: dotted;
            text-decoration-style: dotted;
    cursor: pointer;
  }
  .about-credits .data-privacy:hover {
    text-decoration: none;
  }
  .about-credits .data-privacy-p {
    position: absolute;
    bottom: -.8vw;
    margin: 0;
    display: none;
  }
  .feed-project-infos {
    font-size: .8vw;
    line-height: .96vw;
    font-weight: 100;
    font-family: 'pitch', monospace;
    padding: .5vw 0 .6vw 0;
  }
  .feed-project-infos h2 {
    margin: 0;
    padding: 0;
    font-size: .8vw;
    line-height: .96vw;
    font-weight: 100;
    font-family: 'pitch', monospace;
  }
  .feed-a:last-child .feed-project-infos {
    padding-bottom: 0;
  }
  /* Project */
  .slideshow-wrapper {
    position: relative;
    width: 100vw;
    margin-left: -2vw;
    overflow: hidden;
    padding-left: 2vw;
  }
  .slideshow-container {
    text-align: left;
    white-space: nowrap;
    position: relative;
    font-size: 0;
    -webkit-transition: -webkit-transform 0.3s ease-out;
    transition: -webkit-transform 0.3s ease-out;
    transition: transform 0.3s ease-out;
    transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
    -webkit-transform-origin: top left;
            transform-origin: top left;
  }
  .slideshow-item {
    display: inline-block;
    overflow: hidden;
    margin-right: .8vw;
  }
  .slideshow-item img, .slideshow-item video {
    height: calc(-9.2vw + 100vh);
    -webkit-transition: height 0.3s ease-out;
    transition: height 0.3s ease-out;
    width: auto;
    display: inline-block;
  }
  .slideshow-itempp {
    display: inline-block;
    overflow: hidden;
    margin-right: .8vw;
  }
  .slideshow-itempp img, .slideshow-itempp video {
    height: calc(-9.2vw + 45vh);
    -webkit-transition: height 0.3s ease-out;
    transition: height 0.3s ease-out;
    width: auto;
    display: inline-block;
  }
  .button-slideshow {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    mix-blend-mode: difference;
    z-index: 100;
  }
  .button-slideshow#prev-slideshow {
    left: 0;
  }
  .button-slideshow#next-slideshow {
    right: 0;
  }
  .button-slideshow--active#prev-slideshow {
    cursor: url("prev.svg"), auto;
  }
  .button-slideshow--active#next-slideshow {
    cursor: url("next.svg"), auto;
  }
  .image-container {
    text-align: center;
    -webkit-transition: -webkit-transform 0.3s ease-out;
    transition: -webkit-transform 0.3s ease-out;
    transition: transform 0.3s ease-out;
    transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
    -webkit-transform-origin: top center;
            transform-origin: top center;
  }
  .image-container img, .image-container video {
    height: calc(-10.2vw + 100vh);
    width: auto;
  }
  .project-infos {
    font-size: .8vw;
    line-height: .96vw;
    font-weight: 100;
    font-family: 'pitch', monospace;
  }
  .project-infos .cross {
    display: none;
  }
  .project-infos .project-infos-animation {
    -webkit-transform: translateY(-4.6vw);
            transform: translateY(-4.6vw);
    padding: 1.6vw 2vw 0 2vw;
    -webkit-transition: -webkit-transform 0.3s ease-out;
    transition: -webkit-transform 0.3s ease-out;
    transition: transform 0.3s ease-out;
    transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
  }
  .project-infos .project-infos-header {
    font-size: 1.44vw;
    line-height: 1.44vw;
    font-weight: 100;
    font-family: 'pitch', sans-serif;
    margin-bottom: .6vw;
  }
  .project-infos h1 {
    font-size: 1.44vw;
    line-height: 1.44vw;
    font-weight: 100;
    font-family: 'pitch', sans-serif;
    display: inline-block;
  }
  .project-infos h2 {
    font-size: .8vw;
    line-height: .96vw;
    font-weight: 100;
    font-family: 'pitch', monospace;
  }
  .project-infos .project-infos-content {
    padding-bottom: 2vw;
    -webkit-transform: translateY(1vw);
            transform: translateY(1vw);
    -webkit-transition: -webkit-transform 0.3s ease-out;
    transition: -webkit-transform 0.3s ease-out;
    transition: transform 0.3s ease-out;
    transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
  }
  .project-infos .project-infos-title {
    width: 50%;
    position: relative;
    float: left;
  }
  .project-infos .project-infos-filter {
    position: relative;
    float: left;
    padding-left: .4vw;
  }
  .project-infos .project-infos-slide {
    position: relative;
    float: right;
  }
  .project-infos .project-infos-description {
    width: 50%;
    -webkit-columns: 2;
            columns: 2;
    -webkit-column-gap: .8vw;
            column-gap: .8vw;
    position: relative;
    float: left;
    padding-right: .4vw;
  }
  .project-infos .project-infos-description p {
    margin-top: 0;
  }
  .project-infos .project-infos-meta {
    width: 25%;
    position: relative;
    float: left;
    padding-left: .4vw;
  }
  .project-infos .project-infos-meta h2 {
    margin: 0;
    padding-right: 0.3vw;
    display: table-cell;
  }
  .project-infos .project-infos-meta .project-infos-meta-row {
    margin-bottom: .4vw;
  }
  .project-infos .project-infos-meta .project-infos-meta-row div {
    display: table-cell;
  }
}

/* Smartphone ----------------------------------------------------- */
@media screen and (max-width: 980px) {
  body {
    padding: 14.2vw 3.6vw 3.6vw 3.6vw;
  }
  .body--filters {
    padding-top: 24.9vw;
  }
  menu .menu-container {
    padding: 3.8vw 3.6vw 3.8vw 3.6vw;
    font-size: 6.7vw;
    line-height: 6.7vw;
    font-weight: 100;
    font-family: 'pitch', sans-serif;
  }
  menu .logo div {
    height: 6.6vw;
    width: 6.6vw;
    margin: -1.5vw 1.2vw 0 0;
    display: inline-block;
    vertical-align: middle;
  }
  menu .logo span {
    display: none;
  }
  menu .nav-right-container {
    content: '?';
  }
  menu .nav-rightlg {
    border: 0.38vw solid #000;
    padding: 1vw 4vw 1vw 4vw;
    border-radius: 4vw;
    text-transform: lowercase;
  }
  menu .nav-filters {
    position: absolute;
    background-color: #FFF;
    width: 100%;
    top: 14.1vw;
    left: 0;
    height: 10.6vw;
    text-align: left;
    font-size: 0;
    padding: 0 3.6vw 0 3.6vw;
    overflow-x: scroll;
    overflow-y: none;
    z-index: 3000;
  }
  menu .nav-filters ul {
    white-space: nowrap;
    padding-top: .2vw;
  }
  menu .nav-filters li {
    display: inline-block;
    font-size: 3.7vw;
    line-height: 4.4vw;
    font-weight: 100;
    font-family: 'pitch', monospace;
    margin-right: 1.2vw;
    margin-top: 1.5vw;
  }
  menu .filter {
    border: 0.38vw solid #000;
    padding: 1vw 4vw 1vw 4vw;
    border-radius: 4vw;
    text-transform: lowercase;
  }
  menu .filter:hover, menu .filter--active {
    background-color: #000;
    color: #FFF;
  }







  menu .nav-rightlg {
    position: right;
    background-color: #FFF;
    width: 100%;
    top: 14.1vw;
    left: 0;
    height: 10.6vw;
    text-align: left;
    font-size: 0;
    padding: 0 3.6vw 0 3.6vw;
    overflow-x: scroll;
    overflow-y: none;
    z-index: 3000;
  }
  menu .nav-rightlg ul {
    white-space: nowrap;
    padding-top: .2vw;
  }
  menu .nav-rightlg li {
    display: inline-block;
    font-size: 3.7vw;
    line-height: 4.4vw;
    font-weight: 100;
    font-family: 'pitch', monospace;
    margin-right: 1.2vw;
    margin-top: 1.5vw;
  }
  menu .nav-rightlg {
    border: 0.38vw solid #000;
    padding: 1vw 4vw 1vw 4vw;
    border-radius: 4vw;
    text-transform: lowercase;
  }
  menu .rightlg:hover, menu .rightlgactive {
    background-color: #000;
    color: #FFF;
  }
  menu .nav-back {
    display: none;
  }
  .body--filters .menu--active {
    -webkit-transform: translateY(-24.9vw);
            transform: translateY(-24.9vw);
  }
  .body--filters .menu--active:hover {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .body--default .menu--active {
    -webkit-transform: translateY(-22vw);
            transform: translateY(-22vw);
  }
  .body--default .menu--active:hover {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .filter-responsive {
    position: fixed;
    top: 9vw;
    left: 87vw;
    background-color: white;
    padding: 0 3.6vw 3.6vw 3.6vw;
    width: 100vw;
  }
  .filter-responsive li {
    display: inline-block;
  }
  .about-main {
    font-size: 5.55vw;
    line-height: 5.6vw;
    font-weight: 100;
    font-family: 'pitch', sans-serif;
    margin-bottom: 11.2vw;
  }
  .about-infos {
    font-size: 5.55vw;
    line-height: 5.6vw;
    font-weight: 100;
    font-family: 'pitch', sans-serif;
    text-transform: uppercase;
  }
  .about-infos a:hover {
    text-decoration: underline;
  }
  .about-infos-column:nth-child(1) {
    margin-bottom: 1.7vw;
  }
  .about-meta {
    font-size: 3.7vw;
    line-height: 4.4vw;
    font-weight: 100;
    font-family: 'pitch', monospace;
    margin: 11.2vw 0 9.1vw 0;
  }
  .about-meta ul {
    margin-bottom: 1.7vw;
  }
  .about-meta li {
    padding-left: 9vw;
  }
  .about-credits {
    font-size: 3.7vw;
    line-height: 4.4vw;
    font-weight: 100;
    font-family: 'pitch', monospace;
  }
  .about-credits .data-privacy {
    text-decoration: underline;
    -webkit-text-decoration-style: dotted;
            text-decoration-style: dotted;
    cursor: pointer;
  }
  .about-credits .data-privacy-p {
    margin: 0;
    display: none;
  }
  .about-credits .data-privacy:hover {
    text-decoration: none;
  }
  .feed-project-infos {
    font-size: 3.7vw;
    line-height: 4.4vw;
    font-weight: 100;
    font-family: 'pitch', monospace;
    padding: 2.5vw 0 2.6vw 0;
  }
  .feed-project-infos h2 {
    margin: 0;
    padding: 0;
    font-size: 3.7vw;
    line-height: 4.4vw;
    font-weight: 100;
    font-family: 'pitch', monospace;
  }
  .feed-a:last-child .feed-project-infos {
    padding-bottom: 0;
  }
  /* Project */
  .slideshow-container {
    padding-bottom: 6vw;
  }
  .image-container {
    padding-bottom: 9vw;
  }
  .slideshow-item img, .slideshow-item video {
    width: 100%;
    height: auto;
    margin-bottom: 3.1vw;
  }
  .image-container img {
    width: 100%;
    height: auto;
  }
  .project-infos {
    padding: 0 3.6vw;
    font-size: 3.7vw;
    line-height: 4.4vw;
    font-weight: 100;
    font-family: 'pitch', monospace;
  }
  .project-infos .cross {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
  }
  .project-infos .cross div {
    top: 50%;
    position: relative;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  .project-infos .project-infos-animation {
    /*transform: translateY(-16.8vw);*/
    padding: 0 0 3.6vw 0;
    -webkit-transition: -webkit-transform 0.3s ease-out;
    transition: -webkit-transform 0.3s ease-out;
    transition: transform 0.3s ease-out;
    transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
    max-height: 80vh;
  }
  .project-infos .project-infos-header {
    font-size: 6.7vw;
    line-height: 6.7vw;
    font-weight: 100;
    font-family: 'pitch', sans-serif;
    cursor: pointer;
    padding-right: 12vw;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
    -webkit-transition: -webkit-transform 0.3s ease-out;
    transition: -webkit-transform 0.3s ease-out;
    transition: transform 0.3s ease-out;
    transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
    padding: 3.6vw 8vw 3.2vw 0;
    background-color: #FFF;
  }
  .project-infos h1 {
    font-size: 6.7vw;
    line-height: 6.7vw;
    font-weight: 100;
    font-family: 'pitch', sans-serif;
    display: inline;
  }
  .project-infos h2 {
    font-size: 3.7vw;
    line-height: 4.4vw;
    font-weight: 100;
    font-family: 'pitch', monospace;
  }
  .project-infos .project-infos-filter {
    display: none;
  }
  .project-infos .project-infos-slide {
    display: none;
  }
  .project-infos .project-infos-content {
    padding-bottom: 3.6vw;
  }
  .project-infos .project-infos-description p {
    margin-top: 0;
  }
  .project-infos .cross--active div {
    -webkit-transform: rotate(-45deg) translateY(-50%);
            transform: rotate(-45deg) translateY(-50%);
  }
  .project-infos .project-infos-meta {
    padding-left: 9vw;
  }
  .project-infos .project-infos-meta h2 {
    margin: 0;
    padding-right: 0.8vw;
    display: table-cell;
  }
  .project-infos .project-infos-meta .project-infos-meta-row {
    margin-top: 4.4vw;
  }
  .project-infos .project-infos-meta .project-infos-meta-row div {
    display: table-cell;
  }
  .project-infos--active .project-infos-animation {
    overflow-y: scroll;
    overflow-x: hidden;
  }
  .project-infos--active .project-infos-header {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

.project-infos--active .project-infos-animation {
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}

.project-infos--active .project-infos-content {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

/* Général autre */
@media (hover: none) {
  .button-slideshow {
    display: none;
  }
}

.maintenance {
  background-color: orangered;
  padding: 20px;
  font-size: 35px;
  line-height: 29px;
  font-weight: 100;
  font-family: 'jl', sans-serif;
}

.maintenance h1, .maintenance h2 {
  margin: 0;
  padding: 0;
  font-size: 35px;
  line-height: 29px;
  font-weight: 100;
  font-family: 'jl', sans-serif;
}

.maintenance a {
  display: inline-block;
  border-bottom: 2px solid black;
}

.maintenance a:hover {
  border-bottom: 2px solid orangered;
}
/*# sourceMappingURL=styles.css.map */