@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Space+Mono:400,700&display=swap&subset=latin-ext");
html,
body,
ul,
ol,
section,
p, h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
}

@font-face {
  font-family: 'Space Grotesk';
  src: url("../fonts/SpaceGrotesk/webfont/SpaceGrotesk-Regular.woff") format("woff"), url("../fonts/SpaceGrotesk/ttf/SpaceGrotesk-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Space Grotesk';
  src: url("../fonts/SpaceGrotesk/webfont/SpaceGrotesk-Bold.woff") format("woff"), url("../fonts/SpaceGrotesk/ttf/SpaceGrotesk-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

html {
  font-size: 50%;
}

h1 {
  font-size: 5rem;
  line-height: 7rem;
  margin-bottom: 4rem;
}

h2 {
  font-size: 3.5rem;
  line-height: 5rem;
  margin-bottom: 1rem;
  margin-top: 5rem;
}

h3 {
  font-size: 2.5rem;
  line-height: 4rem;
}

p, ul {
  font-size: 2.25rem;
  line-height: 3rem;
  margin-bottom: 1rem;
}

.small {
  font-size: 2rem;
  line-height: 3rem;
}

.button, .big, .header__menu, .footer__menu, .footer__text p, .hero .container p, .works__text, .contact p {
  font-size: 3rem;
  line-height: 4rem;
  margin-bottom: 2rem;
}

.chapo, .intro__chapo, .error__chapo {
  font-size: 3.25rem;
  line-height: 4rem;
  font-weight: 700;
}

.legende, .footer__credits p, .parcours__content p:last-child, .content figcaption {
  font-size: 1.5rem;
  line-height: 2rem;
  margin-bottom: 0;
}

.projet__tag, .intro__tag {
  font-family: 'Space Mono', Courier, monospace;
  font-weight: 400;
  font-size: 2rem;
  line-height: 3rem;
  color: #0000FF;
  margin-right: 2rem;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
}

a, a:visited {
  text-decoration: none;
  color: #0000FF;
  position: relative;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

a:hover, a:focus {
  text-decoration: underline;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.button {
  font-family: 'Space Grotesk', Verdana, sans-serif;
  color: #0000FF;
}

.button::after {
  content: " →";
  -webkit-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}

.button:hover, .button:focus {
  text-decoration: none;
}

.button:hover::after, .button:focus::after {
  margin-left: 1rem;
  -webkit-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}

ul {
  list-style-type: '→     ';
  list-style-position: outside;
  margin-left: 5rem;
}

li {
  margin-bottom: 1rem;
}

li::marker {
  color: #0000FF;
}

*::-moz-selection {
  color: #FFFFFF;
  background-color: #0000FF;
}

*::selection {
  color: #FFFFFF;
  background-color: #0000FF;
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
  .big {
    font-size: 2.25rem;
    line-height: 3rem;
    margin-bottom: 1rem;
  }
  h1 {
    font-size: 3.5rem;
    line-height: 4rem;
    margin-bottom: 1rem;
  }
}

.container {
  max-width: 141rem;
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
  .container {
    margin: 0 2rem;
  }
}

@media only screen and (min-width: 768px) {
  .container {
    margin: 0 auto;
  }
}

body {
  font-size: 2rem;
  line-height: 3rem;
  font-family: 'Space Grotesk', Verdana, sans-serif;
  font-weight: normal;
  background-color: #FFFFFF;
  color: #2E2E2E;
}

.button {
  background: none;
  border: none;
  padding: 0;
}

.header {
  -webkit-transition: .25s;
  transition: .25s;
  padding-top: 4rem;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 500;
}

.header .container {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 28.75rem auto;
      grid-template-columns: 28.75rem auto;
  grid-column-gap: 3rem;
}

.header__logo {
  z-index: 999;
}

.header__menu {
  font-weight: 700;
  height: 8rem;
  -ms-grid-column-align: end;
      justify-self: end;
  list-style-type: none;
}

.header__item {
  display: inline-block;
  line-height: 9rem;
}

.header__menu-toggle {
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  -ms-grid-column-align: end;
      justify-self: end;
  padding-right: 2rem;
  cursor: pointer;
}

.header__menu-toggle::before {
  content: url("hamburger.svg");
  -webkit-transition: .25s;
  transition: .25s;
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
  .header__menu {
    width: 100%;
    display: block;
    -ms-grid-column-align: center;
        justify-self: center;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1 / 3;
    margin-left: 0;
    -webkit-transform: translate(0, -600%);
            transform: translate(0, -600%);
    -webkit-transition: .25s;
    transition: .25s;
  }
  .header__item {
    display: block;
    text-align: center;
  }
  .header-menu {
    background: #E5E5FF;
  }
  .container-menu {
    -ms-grid-rows: auto 32rem;
        grid-template-rows: auto 32rem;
  }
  .menu-open {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    -webkit-transition: .25s;
    transition: .25s;
  }
  .is-active::before {
    content: url("close.svg");
    -webkit-transition: .25s;
    transition: .25s;
  }
}

@media only screen and (min-width: 768px) {
  .header__menu-toggle {
    display: none;
  }
  .header__item {
    margin-left: 3rem;
  }
}

.footer {
  background: #2E2E2E;
  color: #FFFFFF;
}

.footer a {
  color: #AAAAFF !important;
}

.footer__menu {
  list-style-type: none;
  margin-left: 0;
}

.footer__logos {
  margin-top: 4rem;
}

.footer__credits p {
  max-width: 105rem;
  color: #E5E5FF;
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
  .footer {
    padding: 4rem 0 6rem 0;
  }
  .footer__menu {
    text-align: center;
    margin-bottom: 3rem;
  }
  .footer__item {
    margin-bottom: 2rem;
  }
  .footer__text p {
    font-size: 2.25rem;
    line-height: 3rem;
    margin-bottom: 1rem;
  }
  .footer__logos {
    text-align: center;
    margin-bottom: 4rem;
  }
  .footer__logo {
    width: 40%;
  }
  .footer__logo:first-child {
    margin-right: 3rem;
  }
}

@media only screen and (min-width: 768px) {
  .footer {
    padding: 10rem 0;
  }
  .footer__primarycontent {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 2fr 3fr 1fr;
        grid-template-columns: 2fr 3fr 1fr;
    grid-columns-gap: 3rem;
    margin-bottom: 6rem;
  }
  .footer__item {
    margin-bottom: 2rem;
  }
  .footer__logo {
    max-width: 21rem;
    margin-right: 3rem;
  }
}

.hero, .contact {
  background: #E5E5FF;
}

.hero .container p:first-child {
  margin-bottom: 0;
}

.hero h1 {
  margin-bottom: 1rem;
}

.hero h1 strong {
  color: #0000FF;
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
  .hero .container {
    padding: 18rem 0 8rem 0;
  }
  .hero p {
    font-size: 2.25rem;
    line-height: 3rem;
    margin-bottom: 1rem;
  }
  .works {
    padding: 4rem 0;
  }
  .works__text {
    font-size: 2.25rem;
    line-height: 3rem;
  }
  .contact {
    padding: 8rem 0 10rem 0;
  }
  .contact p {
    font-size: 2.25rem;
    line-height: 3rem;
    margin-bottom: 1rem;
  }
}

@media only screen and (min-width: 768px) {
  .hero .container {
    padding: 22rem 0 10rem 0;
  }
  .hero .container p {
    max-width: 93rem;
  }
  .works {
    padding: 8rem 0;
  }
  .contact {
    padding: 10rem 0 15rem 0;
  }
  .contact .container {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
    grid-column-gap: 3rem;
  }
  .contact__title {
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1 / 3;
  }
}

.projet__title {
  color: #2E2E2E;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.projet__desc {
  color: #2E2E2E;
}

.projet a:hover, .projet a:focus {
  text-decoration: none;
}

.projet__cover {
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.projet__tags {
  margin-bottom: 2rem;
}

.projet__desc {
  margin-bottom: 3rem;
}

.projet:hover .projet__title, .projet:focus .projet__title {
  color: #0000FF;
  text-decoration: underline;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.projet:hover .projet__cover, .projet:focus .projet__cover {
  -webkit-transform: scale(1.03);
          transform: scale(1.03);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
  .projet {
    margin-bottom: 5rem;
  }
  .projet__title {
    margin-top: 1rem;
  }
  .projet__cover {
    width: 100%;
    height: 30rem;
  }
}

@media only screen and (min-width: 768px) {
  .projet {
    margin-bottom: 8rem;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
    grid-column-gap: 3rem;
  }
  .projet__title {
    margin-top: 0;
  }
  .projet__content {
    padding: 2rem 0 2rem 0;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-column: 1 / 2;
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1 / 2;
  }
  .projet__covercontainer {
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
    grid-column: 2 / 3;
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1 / 2;
  }
  .projet__cover {
    width: 69rem;
    height: 38rem;
  }
}

aside a {
  display: block;
}

.quisuisje {
  background: #E5E5FF;
}

.quisuisje__title {
  color: #0000FF;
}

.quisuisje__img {
  width: 33rem;
}

.quisuisje .container {
  padding-top: 19rem;
  padding-bottom: 10rem;
}

.parcours__title {
  color: #0000FF;
}

.parcours .container {
  padding-top: 8rem;
  padding-bottom: 10rem;
}

.valeurs {
  background: #E5E5FF;
}

.valeurs__title {
  color: #0000FF;
}

.valeurs .container {
  padding-top: 8rem;
  padding-bottom: 10rem;
}

.valeurs__content h2:first-child {
  margin-top: 0;
}

.wishlist__title {
  color: #0000FF;
}

.wishlist .container {
  padding-top: 8rem;
  padding-bottom: 10rem;
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
  h1 {
    margin-bottom: 3rem;
  }
  aside h2 {
    margin-top: 0;
  }
}

@media only screen and (min-width: 768px) {
  .quisuisje .container {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 2fr 3fr 1fr;
        grid-template-columns: 2fr 3fr 1fr;
    grid-column-gap: 3rem;
  }
  .parcours .container {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 2fr 3fr 1fr;
        grid-template-columns: 2fr 3fr 1fr;
    grid-column-gap: 3rem;
  }
  .valeurs .container {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 2fr 3fr 1fr;
        grid-template-columns: 2fr 3fr 1fr;
    grid-column-gap: 3rem;
  }
  .wishlist .container {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 2fr 3fr 1fr;
        grid-template-columns: 2fr 3fr 1fr;
    grid-column-gap: 3rem;
  }
}

.intro__cover {
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
  display: block;
}

.intro__title {
  margin-bottom: 1rem;
  max-width: 69rem;
  margin-left: auto;
  margin-right: auto;
}

.intro__chapo {
  max-width: 69rem;
  margin-left: auto;
  margin-right: auto;
}

.intro__tags {
  margin: 0 auto;
  max-width: 69rem;
}

.infos__item {
  display: inline-block;
  margin-bottom: 2rem;
}

.content {
  margin-bottom: 10rem;
}

.content figure {
  margin: 5rem auto;
}

.content figcaption {
  margin-top: 2rem;
  padding-bottom: 5rem;
  margin-left: auto;
  margin-right: auto;
  max-width: 141rem;
}

.content .contained-image {
  max-width: 141rem;
}

.content .first-image {
  margin-bottom: 0;
}

.content .middle-images {
  margin-top: 0;
  margin-bottom: 0;
}

.content .last-image {
  margin-top: 0;
}

.content .full-width img {
  margin: 0 auto;
  max-width: 180rem;
}

.content img {
  width: 100%;
  display: block;
}

.otherprojects {
  padding-top: 5rem;
}

.otherprojects__title {
  color: #2E2E2E;
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
  .intro {
    padding-top: 18rem;
    padding-bottom: 5rem;
  }
  .intro__cover {
    width: 100%;
    max-height: 30rem;
  }
  .intro__chapo {
    font-size: 3rem;
    -webkit-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
  }
  .infos__box {
    margin-left: 0;
    padding: 4rem 0;
  }
  .infos__item {
    display: block;
  }
  .content h1, .content h2, .content h3, .content h4, .content h5, .content h6, .content p, .content ul, .content li, .content ol {
    margin-left: 2rem;
    margin-right: 2rem;
  }
  .content figcaption {
    margin-left: 2rem;
    margin-right: 2rem;
  }
}

@media only screen and (min-width: 768px) {
  .intro {
    padding-top: 16rem;
    padding-bottom: 10rem;
  }
  .intro__cover {
    width: 141rem;
    max-height: 53rem;
    margin-bottom: 5rem;
  }
  .infos__box {
    -webkit-columns: 3;
            columns: 3;
    padding: 5rem 0;
  }
  .infos__item {
    display: inline-block;
    margin-right: 15rem;
    margin-bottom: 2rem;
  }
  .content h1, .content h2, .content h3, .content h4, .content h5, .content h6, .content p, .content ul, .content li, .content ol {
    max-width: 69rem;
    margin-left: auto;
    margin-right: auto;
  }
}

.projets {
  margin-top: 22rem;
}

.default {
  margin-bottom: 15rem;
}

.default p, .default h1, .default h2, .default h3, .default h4, .default h5, .default h6, .default ul, .default ol, .default li {
  max-width: 69rem;
}

.default p, .default h1, .default h2, .default h3, .default h4, .default h5, .default h6, .default ul, .default ol {
  margin-left: auto;
  margin-right: auto;
}

.default li {
  margin-left: 5rem;
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
  .default {
    margin-top: 18rem;
  }
}

@media only screen and (min-width: 768px) {
  .default {
    margin-top: 22rem;
  }
}

.error {
  padding-top: 22rem;
  padding-bottom: 15rem;
  font-family: 'Space Mono', monospace;
  color: #FFFFFF;
  background: #0000FF;
}

.error::-moz-selection {
  color: #0000FF;
  background: #FFFFFF;
}

.error::selection {
  color: #0000FF;
  background: #FFFFFF;
}

.error a {
  color: #FFFFFF;
  text-decoration: underline;
}

.error a:hover, .error a:focus {
  color: #AAAAFF;
}

.error p, .error h1, .error h2, .error h3, .error h4, .error h5, .error h6, .error ul, .error ol, .error li, .error img {
  max-width: 69rem;
}

.error p, .error h1, .error h2, .error h3, .error h4, .error h5, .error h6, .error ul, .error ol, .error img {
  margin-left: auto;
  margin-right: auto;
}

.error li {
  margin-left: 5rem;
}

.error img {
  display: block;
  margin-bottom: 5rem;
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
  .error img {
    width: 80%;
  }
}
/*# sourceMappingURL=main.css.map */