figureslibres.cc/user/themes/figureslibres-v2/css/theme.css

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, 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;
}

/* 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;
}

a, a:active, a:focus, a:visited {
  text-decoration: none;
  color: inherit;
}

@font-face {
  font-family: "Lato";
  font-weight: bold;
  font-style: normal;
  src: url("../fonts/Lato/Lato-bold/Lato-bold.ttf") format("truetype"), url("../fonts/Lato/Lato-bold/Lato-bold.woff") format("woff"), url("../fonts/Lato/Lato-bold/Lato-bold.woff2") format("woff2");
}
@font-face {
  font-family: "Lato";
  font-weight: normal;
  font-style: italic;
  src: url("../fonts/Lato/Lato-italic/Lato-italic.ttf") format("truetype"), url("../fonts/Lato/Lato-italic/Lato-italic.woff") format("woff"), url("../fonts/Lato/Lato-italic/Lato-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Lato";
  font-weight: bold;
  font-style: italic;
  src: url("../fonts/Lato/Lato-bold-italic/Lato-bold-italic.ttf") format("truetype"), url("../fonts/Lato/Lato-bold-italic/Lato-bold-italic.woff") format("woff"), url("../fonts/Lato/Lato-bold-italic/Lato-bold-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Lato";
  font-weight: normal;
  font-style: normal;
  src: url("../fonts/Lato/Lato-regular/Lato-regular.ttf") format("truetype"), url("../fonts/Lato/Lato-regular/Lato-regular.woff") format("woff"), url("../fonts/Lato/Lato-regular/Lato-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Syne";
  font-weight: bold;
  font-style: normal;
  src: url("../fonts/Syne/Syne-bold/Syne-bold.ttf") format("truetype"), url("../fonts/Syne/Syne-bold/Syne-bold.woff") format("woff"), url("../fonts/Syne/Syne-bold/Syne-bold.woff2") format("woff2");
}
@font-face {
  font-family: "Syne";
  font-weight: normal;
  font-style: normal;
  src: url("../fonts/Syne/Syne-regular/Syne-regular.ttf") format("truetype"), url("../fonts/Syne/Syne-regular/Syne-regular.woff") format("woff"), url("../fonts/Syne/Syne-regular/Syne-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Avara";
  font-weight: bold;
  font-style: italic;
  src: url("../fonts/Avara/Avara-bold-italic/Avara-bold-italic.ttf") format("truetype"), url("../fonts/Avara/Avara-bold-italic/Avara-bold-italic.woff") format("woff"), url("../fonts/Avara/Avara-bold-italic/Avara-bold-italic.woff2") format("woff2");
}
@font-face {
  font-family: "ManifontGrotesk";
  font-weight: bold;
  font-style: italic;
  src: url("../fonts/ManifontGrotesk/ManifontGrotesk-bold-italic/ManifontGrotesk-bold-italic.ttf") format("truetype"), url("../fonts/ManifontGrotesk/ManifontGrotesk-bold-italic/ManifontGrotesk-bold-italic.woff") format("woff"), url("../fonts/ManifontGrotesk/ManifontGrotesk-bold-italic/ManifontGrotesk-bold-italic.woff2") format("woff2");
}
@font-face {
  font-family: "ManifontGrotesk";
  font-weight: normal;
  font-style: italic;
  src: url("../fonts/ManifontGrotesk/ManifontGrotesk-italic/ManifontGrotesk-italic.ttf") format("truetype"), url("../fonts/ManifontGrotesk/ManifontGrotesk-italic/ManifontGrotesk-italic.woff") format("woff"), url("../fonts/ManifontGrotesk/ManifontGrotesk-italic/ManifontGrotesk-italic.woff2") format("woff2");
}
@font-face {
  font-family: "PlayfairDisplay";
  font-weight: normal;
  font-style: italic;
  src: url("../fonts/PlayfairDisplay/PlayfairDisplay-italic/PlayfairDisplay-italic.ttf") format("truetype"), url("../fonts/PlayfairDisplay/PlayfairDisplay-italic/PlayfairDisplay-italic.woff") format("woff"), url("../fonts/PlayfairDisplay/PlayfairDisplay-italic/PlayfairDisplay-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Rumeur";
  font-weight: bold;
  font-style: normal;
  src: url("../fonts/Rumeur/Rumeur-bold/Rumeur-bold.ttf") format("truetype"), url("../fonts/Rumeur/Rumeur-bold/Rumeur-bold.woff") format("woff"), url("../fonts/Rumeur/Rumeur-bold/Rumeur-bold.woff2") format("woff2");
}
@font-face {
  font-family: "Moche";
  font-weight: bold;
  font-style: normal;
  src: url("../fonts/Moche/Moche-bold/Moche-bold.ttf") format("truetype"), url("../fonts/Moche/Moche-bold/Moche-bold.woff") format("woff"), url("../fonts/Moche/Moche-bold/Moche-bold.woff2") format("woff2");
}
@font-face {
  font-family: "Redaction50";
  font-weight: bold;
  font-style: normal;
  src: url("../fonts/Redaction50/Redaction50-bold/Redaction50-bold.ttf") format("truetype"), url("../fonts/Redaction50/Redaction50-bold/Redaction50-bold.woff") format("woff"), url("../fonts/Redaction50/Redaction50-bold/Redaction50-bold.woff2") format("woff2");
}
@keyframes arrowIndex {
  30% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(20px);
  }
  70% {
    transform: translateY(0px);
  }
}
.picto {
  display: block;
  cursor: pointer;
  background-color: #0b1117;
}

.picto-url {
  display: inline-block;
  width: 12px;
  height: 10px;
}

h1, h2 {
  font-family: Syne, Sans-serif;
  font-size: 1.8em;
  line-height: 1.1em;
}

p, ul, figcaption {
  font-family: Lato, Sans-serif;
  font-size: 1.2em;
  line-height: 1.25em;
}

strong {
  font-weight: bold;
  font-family: Syne, Sans-serif;
}

em {
  font-style: italic;
}

body {
  overflow-x: hidden;
  color: #0b1117;
  background-color: #f5f5f5;
}
body header {
  position: fixed;
  top: 0;
  z-index: 1;
  width: 100%;
  box-sizing: border-box;
}
body header #nav-container {
  height: 7vh;
  background-color: #f5f5f5;
  padding: 0 3vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
body header #nav-container h1 {
  cursor: pointer;
}
body header #nav-container #burger {
  width: 25px;
  height: 23px;
}
body header nav {
  position: absolute;
  background-color: #0b1117;
  top: -100vh;
  width: 100%;
  height: calc(100vh - 7vh);
  display: flex;
  align-items: center;
  opacity: 0;
  transition: opacity 0.4s ease-out, top 0.7s ease-out;
}
body header nav #crossMenu {
  position: absolute;
  top: 2vh;
  right: 3vw;
  background-color: #f5f5f5;
  width: 25px;
  height: 23px;
}
body header nav ul {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
}
body header nav ul li {
  text-align: center;
  color: #f5f5f5;
}
body header nav ul li a {
  display: block;
  margin: 4vh 0;
  padding: 2.5vh 0;
  width: 100%;
  font-family: Syne, Sans-serif;
  font-size: 2.2em;
}
body header nav ul li.selected a {
  color: #0b1117;
  background-color: #f5f5f5;
}
body header nav.mobile-nav-open {
  top: 0;
  opacity: 1;
}
body header:after {
  content: "";
  display: block;
  width: 100%;
  height: 4vh;
  background: linear-gradient(to bottom, #f5f5f5, #f5f5f500);
}
body main {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  margin-top: calc(7vh + 4vh);
  z-index: 0;
}
body main .content {
  position: absolute;
  padding: 0 3vw;
}
body main .content h2, body main .content p, body main .content ul {
  margin-bottom: 30px;
}
body main .content h2 a, body main .content p a, body main .content ul a {
  text-decoration: underline;
  text-underline-offset: 0.1em;
  transition: text-underline-offset 0.4s ease-out;
}
body main .content h2 a:hover, body main .content p a:hover, body main .content ul a:hover {
  text-underline-offset: 0.15em;
}
body main .content .projet-card {
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
}
body main .content .projet-card img, body main .content .projet-card video {
  border-radius: 10px;
  width: 100%;
}
body main .content .projet-card .loader {
  min-height: 200px;
  width: 20px;
  opacity: 0.4;
}
body main .content .projet-card a {
  width: 100%;
}
body main .content .projet-card a figcaption {
  color: #0b1117;
  background-color: transparent;
  padding: 0;
  margin-top: 5px;
  position: relative;
  font-size: 0.95em;
  transition: opacity 0.4s ease-out;
}
body main .content .projet-card a figcaption .publique-title {
  font-family: PlayfairDisplay, serif;
  font-style: italic;
}
body main .content .projet-card a figcaption .sociale-title {
  font-family: ManifontGrotesk, sans-serif;
  font-weight: bold;
  font-style: italic;
}
body main .content .projet-card a figcaption .culturelle-title {
  font-family: Avara, serif;
  font-weight: bold;
  font-style: italic;
}
body main .content .card-displayed {
  display: block;
}
body main .content .card-hidden {
  display: none;
}
body main #index-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
body main #index-content #loader-index {
  position: absolute;
  height: 80vh;
  width: 100vw;
  background-color: #f5f5f5;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
body main #index-content #main-p-index p {
  font-size: 2.2em;
}
body main #index-content #main-p-index #figureslibres {
  font-family: Syne, sans-serif;
  font-weight: bold;
}
body main #index-content #main-p-index #figureslibres canvas {
  transform: translateX(calc(-100% + 10px)) translateY(-2px);
}
body main #index-content #main-p-index #publique {
  font-family: PlayfairDisplay, serif;
  font-style: italic;
}
body main #index-content #main-p-index #sociale {
  font-family: ManifontGrotesk, sans-serif;
  font-weight: bold;
  font-style: italic;
}
body main #index-content #main-p-index #sociale canvas {
  transform: translateX(calc(-100% + 15px)) translateY(0px);
}
body main #index-content #main-p-index #culturelle {
  font-family: Avara, serif;
  font-weight: bold;
  font-style: italic;
}
body main #index-content #main-p-index #culturelle canvas {
  transform: translateX(calc(-100% + 15px)) translateY(2px);
}
body main #index-content #main-p-index #logicielslibres {
  font-family: Rumeur, sans-serif;
  font-weight: bold;
}
body main #index-content #extrait-projets > div {
  max-height: 0vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0px 20px;
  align-items: flex-start;
}
body main #index-content #extrait-projets > div div figure {
  align-items: flex-start;
}
body main #index-content #extrait-projets > div div:last-of-type {
  width: auto;
  margin-top: 1vh;
  text-align: center;
  font-size: 1.2em;
  grid-column-end: span 2;
}
body main #index-content #extrait-projets > div div:last-of-type p {
  cursor: pointer;
  margin-bottom: 5px;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
body main #index-content #extrait-projets > div div:last-of-type p span {
  border-bottom: solid 1px #0b1117;
  padding-bottom: 1px;
}
body main #index-content #extrait-projets > div div:last-of-type p span #publique-link {
  font-family: PlayfairDisplay, serif;
  font-style: italic;
}
body main #index-content #extrait-projets > div div:last-of-type p span #sociale-link {
  font-family: ManifontGrotesk, sans-serif;
  font-weight: bold;
  font-style: italic;
}
body main #index-content #extrait-projets > div div:last-of-type p span #culturelle-link {
  font-family: Avara, serif;
  font-weight: bold;
  font-style: italic;
}
body main #index-content #extrait-projets > div div:last-of-type p .picto {
  display: inline-block;
  height: 10px;
  width: 25px;
  margin-left: 8px;
  transition: margin-left 0.4s ease-out;
}
body main #index-content #extrait-projets > div div:last-of-type p:first-of-type:hover + p .picto, body main #index-content #extrait-projets > div div:last-of-type p:last-of-type:hover .picto {
  margin-left: 13px;
}
body main #index-content #second-p-index p {
  font-size: 2.2em;
}
body main #index-content #second-p-index #commanditaires {
  font-family: Moche, sans-serif;
  font-weight: bold;
}
body main #index-content #second-p-index #commanditaires canvas {
  transform: translateX(calc(-100% + 10px)) translateY(0px);
}
body main #index-content #second-p-index #projets {
  font-family: Redaction50, serif;
  font-weight: bold;
}
body main #index-content #commanditaires-grid {
  width: 85vw;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px 40px;
  align-items: center;
}
body main #index-content #commanditaires-grid img {
  filter: grayscale(100%);
  opacity: 0.7;
  width: 100%;
}
body main #index-content #arrow-container {
  margin-top: 30px;
  transition: transform 0.8s ease-out;
}
body main #index-content #arrow-container .picto {
  width: 45px;
  height: 37px;
}
body main #index-content #arrow-container #arrowIndex {
  animation: arrowIndex 4s infinite ease-out;
}
body main #index-content .container {
  overflow-y: hidden;
  height: auto;
  max-height: 0vh;
  margin-top: 0px;
  opacity: 0;
  transition: opacity 0.4s ease-out, 0.7s 0.4s ease-out, max-height 1.2s ease-out, margin-top 1s ease-out;
}
body main #index-content a {
  text-decoration: none;
}
body main #index-content canvas {
  position: absolute;
  transform: translateX(calc(-100% + 15px)) translateY(-2px);
  transition: width 0.4s ease-out, height 0.4s ease-out;
}
body main #projets-index {
  width: 100%;
}
body main #projets-index #filter-index {
  text-align: center;
  width: 100%;
  margin-bottom: 30px;
}
body main #projets-index #filter-index .filter-button {
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.4s ease-out;
}
body main #projets-index #filter-index p {
  margin-bottom: 0;
}
body main #projets-index #filter-index #publique-filter {
  font-family: PlayfairDisplay, serif;
  font-style: italic;
}
body main #projets-index #filter-index #sociale-filter {
  font-family: ManifontGrotesk, sans-serif;
  font-weight: bold;
  font-style: italic;
}
body main #projets-index #filter-index #culturelle-filter {
  font-family: Avara, serif;
  font-weight: bold;
  font-style: italic;
}
body main #projets-index hr {
  width: 66%;
  margin-bottom: 4vh;
  opacity: 0.4;
}
body main #projets-index .projets-grid {
  width: 94vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}
body main #projets-index .projets-grid > div {
  width: 80%;
}
body main #projets-index .title-category {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}
body main #projets-index .title-category h2 {
  margin: 0;
  max-width: 60%;
}
body main #projets-index .title-category .chevron-category {
  display: inline-block;
  width: 25px;
  height: 23px;
  max-height: 10px;
  margin-left: 6px;
  transition: transform 0.4s ease-out;
}
body main #projets-index .title-category .close {
  transform: rotate(180deg);
}
body main #text-content {
  display: flex;
  flex-direction: column-reverse;
}
body main #text-content img {
  width: 100%;
}
body main #reader {
  display: flex;
  flex-direction: column;
  align-items: center;
}
body main #reader figure {
  width: 100%;
  min-height: 200px;
  display: flex;
  justify-content: center;
}
body main #reader img, body main #reader video {
  cursor: pointer;
  max-width: 100%;
}
body main #reader .loader {
  max-width: 20px;
}
body main #reader #header-project {
  z-index: 1;
  display: block;
  position: fixed;
  height: 6vh;
  width: 100%;
  background-color: #f5f5f5;
  top: -9vh;
  transition: top 0.4s ease-out;
}
body main #reader #header-project .info-project-publique span {
  font-family: PlayfairDisplay, serif;
  font-style: italic;
}
body main #reader #header-project .info-project-sociale span {
  font-family: ManifontGrotesk, sans-serif;
  font-weight: bold;
  font-style: italic;
}
body main #reader #header-project .info-project-culturelle span {
  font-family: Avara, serif;
  font-weight: bold;
  font-style: italic;
}
body main #reader #header-project h2 {
  overflow: hidden;
  position: absolute;
  width: 80%;
  padding: 3px 0;
  margin-top: 1.8vh;
  margin-left: 3vw;
  font-size: 1.2em;
}
body main #reader #header-project h2 span {
  transform: translate(0, 0);
  display: inline-block;
  white-space: nowrap;
}
body main #reader #header-project h2 .scrollText:after {
  content: attr(data-text);
  padding-left: 20px;
  white-space: nowrap;
}
body main #reader #header-project #gradient-long-title {
  position: absolute;
  height: 4vh;
  width: 40px;
  top: 1.5vh;
  right: 16.5%;
  background: linear-gradient(to left, #f5f5f5, #f5f5f500);
}
body main #reader #header-project:after {
  position: absolute;
  top: 6vh;
  content: "";
  height: 4vh;
  width: 100%;
  background: linear-gradient(#f5f5f5, rgba(245, 245, 245, 0));
}
body main #reader #header-project + a {
  z-index: 2;
}
body main #reader #close-project {
  position: fixed;
  right: 3vw;
  top: 2.3vh;
  width: calc(25px - 5px);
  height: calc(23px - 5px);
}
body main #reader #cover-image-mobile {
  margin-top: -2vh;
  margin-bottom: 2vh;
}
body main #reader #cover-image {
  display: none;
}
body main #reader #info-project {
  align-self: flex-start;
}
body main #reader #info-project h2 {
  margin-top: 2vh;
  margin-bottom: 0;
  font-size: 1.6em;
  line-height: 1.1em;
}
body main #reader #info-project > div {
  margin-top: 0.3em;
  margin-bottom: 2.5vh;
  font-weight: normal;
  line-height: 1.25em;
}
body main #reader .info-project-publique h2, body main #reader .info-project-publique > div {
  font-family: PlayfairDisplay, serif;
  font-style: italic;
}
body main #reader .info-project-sociale h2, body main #reader .info-project-sociale > div {
  font-family: ManifontGrotesk, sans-serif;
  font-weight: bold;
  font-style: italic;
}
body main #reader .info-project-culturelle h2, body main #reader .info-project-culturelle > div {
  font-family: Avara, serif;
  font-weight: bold;
  font-style: italic;
}
body main #reader #project-description {
  margin-top: 2.2vh;
}
body main #reader #project-images-grid figure {
  margin-top: 3vh;
}
body main #reader hr {
  margin-bottom: 2vh;
  width: 66%;
  opacity: 0.5;
  color: #0b1117;
  background-color: #0b1117;
}
body main #reader #related-pages {
  margin-top: 5vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
body main #reader #related-pages h3 {
  text-align: center;
  font-size: 1.8em;
  font-family: Syne, Sans-serif;
  margin-bottom: 2vh;
  margin-top: 2vh;
}
body main #reader #related-pages #related-grid {
  margin-bottom: 5vh;
  width: 80%;
}
body main #reader #related-pages #related-grid .card-displayed {
  margin-top: 1.5vh;
}
body main #reader #carousel-container {
  display: none;
}
body footer {
  display: none;
  position: fixed;
  height: 7vh;
  bottom: 0;
  align-items: center;
  justify-content: center;
  z-index: 1;
  width: 100vw;
}
body footer p {
  width: 100%;
  height: 100%;
  text-align: center;
  color: #f5f5f5;
}
body footer p a {
  display: block;
  background: #0b1117;
  height: 100%;
  width: 100%;
  font-family: Syne, Sans-serif;
  padding: 0.95em 0;
  color: #f5f5f5;
}

@media only screen and (min-width: 576px) {
  body header nav {
    height: 100vh;
  }
  body .content .card-displayed figure a figcaption {
    opacity: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    background: #0b1117;
    color: #f5f5f5;
    font-size: 0.75em;
    border-radius: 0 0 10px 10px;
  }
  body .card-displayed:hover figure a figcaption {
    opacity: 1;
  }
  body main #index-content {
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  body main #index-content #extrait-projets > div {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
  body main #index-content #extrait-projets > div div:last-of-type {
    overflow-x: hidden;
    text-align: right;
    grid-column-end: span 4;
  }
  body main #index-content #extrait-projets > div div:last-of-type p {
    display: inline-block;
  }
  body main #index-content #extrait-projets > div div:last-of-type p .picto {
    margin-right: -6px;
  }
  body main #index-content #extrait-projets > div div:last-of-type p:last-of-type span:first-of-type {
    margin-left: -5px;
    padding-left: 5px;
  }
  body main #index-content #commanditaires-grid {
    width: auto;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }
  body main #projets-index {
    width: auto;
  }
  body main #projets-index #filter-index {
    display: flex;
    flex-direction: row;
    max-width: 100%;
  }
  body main #projets-index #filter-index p:last-of-type {
    margin-left: 8px;
  }
  body main #projets-index hr {
    margin-left: 0;
    width: 75%;
  }
  body main #projets-index .projets-grid {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 0 10px;
  }
  body main #projets-index .projets-grid > div {
    width: 100%;
  }
  body main #reader #header-project h2 {
    margin-top: 1vh;
  }
  body main #reader #close-project {
    width: 12px;
    height: 10px;
    top: 2.5vh;
  }
  body main #reader #cover-image-mobile {
    display: none !important;
  }
  body main #reader #cover-image {
    display: flex !important;
    margin-bottom: 5vh;
  }
  body main #reader h2#main-project-title {
    font-size: 3.8em;
  }
  body main #reader #info-project {
    margin-top: -6vh;
  }
  body main #reader #info-project div {
    margin-top: 0;
    margin-bottom: 8vh;
  }
  body main #reader #project-description {
    font-size: 0.95em;
    margin-bottom: 5vh;
  }
  body main #reader #project-images-grid {
    width: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 2% 4%;
  }
  body main #reader #project-images-grid figure {
    margin-top: 0;
    width: 100%;
    min-width: 40vw;
  }
  body main #reader #project-images-grid figure img:not(.loader) {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  body main #reader #project-images-grid figure:last-child:nth-child(odd) {
    grid-column: span 2;
  }
  body main #reader #related-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    width: auto !important;
    grid-column-gap: 10%;
    margin-bottom: 6vh !important;
  }
  body main #reader #related-grid .card-displayed {
    margin-top: 2vh !important;
  }
  body main #reader #related-grid .card-displayed figure {
    min-height: 80px !important;
    min-width: 15vw;
  }
  body footer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    padding: 0 15px;
    height: 4vh;
    right: 3vw;
    border-radius: 20px 20px 0 0;
    background-color: #0b1117;
  }
  body footer p {
    height: auto;
    font-size: 0.95em;
  }
  body footer p a {
    padding: 0;
    background-color: transparent;
  }
}
@media only screen and (min-width: 996px) {
  body header #nav-container {
    display: none;
  }
  body header nav {
    position: relative;
    top: 0;
    opacity: 1;
    height: 7vh;
    background-color: #f5f5f5;
    justify-content: center;
  }
  body header nav #crossMenu {
    display: none;
  }
  body header nav ul {
    width: calc(65vw - 12px);
    max-width: 1300px;
    flex-direction: row;
  }
  body header nav ul li {
    width: auto;
    color: #0b1117;
    height: 0.95em;
    z-index: 0;
  }
  body header nav ul li a {
    display: inline;
    font-size: 0.95em;
    width: auto;
    margin: 0;
    padding: 0;
    transition: color 0.4s ease-out;
  }
  body header nav ul li:hover a {
    color: #f5f5f5;
  }
  body header nav ul li.selected a {
    color: #f5f5f5;
    background-color: transparent;
  }
  body header nav ul li:after {
    content: "";
    display: block;
    position: relative;
    opacity: 0;
    height: 100%;
    width: 100%;
    padding: 4px 12px;
    transform: translateX(-12px) translateY(calc(-100% - 2px + 4px));
    background-color: #0b1117;
    border-radius: 15px;
    z-index: -1;
    transition: opacity 0.4s ease-out;
  }
  body header nav ul .selected:after, body header nav ul li:hover:after {
    opacity: 1;
  }
  body header:after {
    height: 2vh;
  }
  body main {
    display: flex;
    justify-content: center;
    margin-top: calc(7vh + 2vh + 30px);
  }
  body main .content {
    width: 65vw;
    padding: 0;
  }
  body main #index-content #commanditaires-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  }
  body main #projets-index {
    width: 65vw;
  }
  body main #projets-index #filter-index .filter-button:hover {
    opacity: 1 !important;
  }
  body main #text-content .text-item {
    width: 70%;
  }
  body main #text-content .text-item:first-of-type {
    position: fixed;
    top: calc(7vh + 2vh + 30px);
    width: 20%;
    left: 70%;
  }
  body main #text-content .text-item:first-of-type img {
    width: 70%;
    margin-bottom: 5vh;
  }
  body main #reader {
    margin-top: -10vh;
    width: 40vw;
  }
  body main #reader #header-project {
    width: 100%;
  }
  body main #reader #header-project h2 {
    width: 35vw;
    margin-left: 29.5vw;
    padding: 0;
  }
  body main #reader #header-project h2 span {
    height: 1.25em;
    padding-top: 5px;
  }
  body main #reader #header-project #gradient-long-title {
    right: 34.2vw;
  }
  body main #reader #info-project {
    width: 100%;
    margin-top: 2vh;
    margin-bottom: 4vh;
  }
  body main #reader #info-project h2 {
    min-width: 100%;
    border-right: solid 1px rgba(0, 0, 0, 0.4);
    margin-top: 0;
    margin-bottom: 1vh;
  }
  body main #reader #info-project div {
    margin-bottom: 2vh;
  }
  body main #reader .info-project-culturelle h2 {
    line-height: 1.25em !important;
  }
  body main #reader #close-project {
    width: 25px;
    height: 23px;
    top: 6vh;
    right: calc(30vw - 25px - 2vw);
    transform: scale(1, 1);
    transition: top 0.4s ease-out, right 0.4s ease-out, transform 0.4s ease-out;
  }
  body main #reader .scrolled-cross {
    top: 1.4vh !important;
    right: 30vw !important;
    transform: scale(0.7, 0.7) !important;
  }
  body main #reader #project-description {
    align-self: flex-start;
  }
  body main #reader #project-images-grid {
    width: auto;
    margin-bottom: 6vh;
  }
  body main #reader #project-images-grid figure {
    min-width: 15vw;
  }
  body main #reader #related-pages hr {
    margin-bottom: 4vh;
  }
  body main #reader #related-pages h3 {
    margin-top: 0;
  }
  body main #reader #related-pages #related-grid {
    grid-column-gap: 3%;
  }
  body main #reader #related-pages #related-grid div figure {
    min-width: 10vw;
  }
  body footer {
    height: 4vh;
    width: auto;
    right: 12%;
  }
  body footer p {
    width: inherit;
  }
  body footer p a {
    font-size: 1.2em;
  }
}
@media only screen and (min-width: 1500px) {
  body main #index-content #main-p-index p {
    font-size: 3.8em;
  }
  body main #index-content #arrow-container {
    margin-top: 7vh;
  }
  body main #index-content #arrow-container .picto {
    width: 60px;
    height: 54px;
  }
  body main #projets-index .projets-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }
}

/*# sourceMappingURL=theme.css.map */