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: #0e1229; } .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: #0e1229; background-color: #f5f5f5; transition: background-color 0.4s ease-out; } body header { position: fixed; top: 0; z-index: 1; width: 100%; box-sizing: border-box; } body header #nav-container { height: 7vh; padding: 0 3vw; display: flex; justify-content: space-between; align-items: center; background-color: #f5f5f5; transition: background-color 0.4s ease-out; } body header #nav-container h1 { cursor: pointer; } body header #nav-container #burger { width: 25px; height: 23px; } body header nav { position: absolute; background-color: #0e1229; 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, background-color 0.4s 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: #0e1229; 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); opacity: 1; transition: opacity 0.4s ease-out; } body header.plain_bg:after { opacity: 0; } 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 !important; } 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: #0e1229; 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 .animateText { text-decoration: underline 1px; } 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 #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 #culturelle { font-family: Avara, serif; font-weight: bold; font-style: italic; } body main #index-content #extrait-projets > div { max-height: 0vh; display: grid; grid-template-columns: repeat(2, 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 #0e1229; 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 #projets { font-family: Redaction50, serif; font-weight: bold; } body main #index-content #commanditaires-grid { width: 85vw; display: grid; grid-template-columns: repeat(2, 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; margin-bottom: 0vh; transition: transform 0.8s ease-out, margin-bottom 0.4s 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: 0vh; 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 #projets-index { width: 100%; } body main #projets-index #filter-index { text-align: center; width: 100%; margin-bottom: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; } body main #projets-index #filter-index .filter-button { cursor: pointer; filter: grayscale(1); opacity: 0.4; padding: 0.25rem 0.75rem; border-radius: 1rem; font-size: 0.95em; min-height: 1.25em; display: inline-block; transition: opacity 0.4s ease-out, filter 0.4s ease-out; } body main #projets-index #filter-index .filter-button:hover { filter: grayscale(0) !important; opacity: 1 !important; } body main #projets-index #filter-index p { margin-bottom: 1rem; } body main #projets-index #filter-index #publique-filter { font-family: PlayfairDisplay, serif; font-style: italic; background-color: #ffaeab; } body main #projets-index #filter-index #sociale-filter { font-family: ManifontGrotesk, sans-serif; font-weight: bold; font-style: italic; background-color: #71ff94; } body main #projets-index #filter-index #culturelle-filter { font-family: Avara, serif; font-weight: bold; font-style: italic; background-color: #feff74; } 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%; top: -4vh; transition: top 0.4s ease-out; } body main #reader #header-project h2 { margin: 0; overflow: hidden; position: absolute; width: 100%; height: 100%; padding: 3px 0; padding-top: 1.8vh; padding-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 h2.info-project-publique { background: linear-gradient(to bottom, #ffaeab, #ffaeab 60%, rgba(255, 174, 171, 0)); } body main #reader #header-project h2.info-project-publique span { font-family: PlayfairDisplay, serif; font-style: italic; } body main #reader #header-project h2.info-project-sociale { background: linear-gradient(to bottom, #71ff94, #71ff94 60%, rgba(113, 255, 148, 0)); } body main #reader #header-project h2.info-project-sociale span { font-family: ManifontGrotesk, sans-serif; font-weight: bold; font-style: italic; } body main #reader #header-project h2.info-project-culturelle { background: linear-gradient(to bottom, #feff74, #feff74 60%, rgba(254, 255, 116, 0)); } body main #reader #header-project h2.info-project-culturelle span { font-family: Avara, serif; font-weight: bold; font-style: italic; } 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 + 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 figure#cover-image-mobile { margin-top: -2vh; margin-bottom: 2vh; } body main #reader figure#cover-image { display: none; } body main #reader figure#cover-image-mobile, body main #reader figure#cover-image { position: relative; margin-top: 3vh; } body main #reader figure#cover-image-mobile img, body main #reader figure#cover-image img { filter: grayscale(0); transition: filter 0.4s ease-out; mix-blend-mode: normal; } body main #reader figure#cover-image-mobile:hover img, body main #reader figure#cover-image:hover img { filter: grayscale(1); mix-blend-mode: darken; } body main #reader figure#cover-image-mobile::before, body main #reader figure#cover-image::before { position: absolute; content: ""; height: 100%; width: 100%; opacity: 0; transition: opacity 0.4s ease-out; } body main #reader figure#cover-image-mobile:hover::before, body main #reader figure#cover-image:hover::before { opacity: 1; } body main #reader figure#cover-image-mobile.sociale:hover::before, body main #reader figure#cover-image.sociale:hover::before { background-color: #71ff94; } body main #reader figure#cover-image-mobile.culturelle:hover::before, body main #reader figure#cover-image.culturelle:hover::before { background-color: #feff74; } body main #reader figure#cover-image-mobile.publique:hover::before, body main #reader figure#cover-image.publique:hover::before { background-color: #ffaeab; } 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 { position: relative; margin-top: 3vh; } body main #reader #project-images-grid figure img { filter: grayscale(0); transition: filter 0.4s ease-out; mix-blend-mode: normal; } body main #reader #project-images-grid figure:hover img { filter: grayscale(1); mix-blend-mode: darken; } body main #reader #project-images-grid figure::before { position: absolute; content: ""; height: 100%; width: 100%; opacity: 0; transition: opacity 0.4s ease-out; } body main #reader #project-images-grid figure:hover::before { opacity: 1; } body main #reader #project-images-grid figure:hover.sociale::before { background-color: #71ff94; } body main #reader #project-images-grid figure:hover.publique::before { background-color: #ffaeab; } body main #reader #project-images-grid figure:hover.culturelle::before { background-color: #feff74; } body main #reader hr { margin-bottom: 2vh; width: 66%; opacity: 0.5; color: #0e1229; background-color: #0e1229; } 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 { width: 80%; } body main #reader #related-pages #related-grid .card-displayed { margin-top: 1.5vh; } body main #reader #related-pages p { margin-top: 3vh; margin-bottom: 5vh; } body main #reader .swiper { position: fixed; top: 0; left: 0; height: 100vh; width: 100vw; background-color: rgba(255, 255, 255, 0.75); backdrop-filter: blur(2px); box-sizing: border-box; z-index: 3; display: none; opacity: 0; transition: opacity 0.3s ease-out; } body main #reader .swiper .swiper-wrapper { z-index: 9; display: flex; align-items: center; } body main #reader .swiper .swiper-wrapper .swiper-slide { height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; } body main #reader .swiper .swiper-wrapper .swiper-slide img { max-height: 90%; max-width: 90%; object-fit: cover; } body main #reader .swiper .swiper-button-next, body main #reader .swiper .swiper-button-prev { color: #0e1229; padding: 2rem; bottom: 5vh; top: unset; } body main #reader .swiper #close-carousel { width: calc(25px - 5px); height: calc(23px - 5px); position: absolute; top: 5vh; right: 5vh; z-index: 10; } 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: #0e1229; 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 main #index-content { min-height: 80vh; display: flex; flex-direction: column; justify-content: center; } body main #index-content #extrait-projets > div { grid-template-columns: repeat(2, 1fr); } body main #index-content #extrait-projets > div div:last-of-type { overflow-x: hidden; text-align: right; grid-column-end: span 2; } 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: repeat(5, 1fr); } body main #projets-index { width: auto; } body main #projets-index #filter-index { justify-content: start; 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: repeat(3, 1fr); gap: 0 10px; align-items: start; } body main #projets-index .projets-grid > div { width: 100%; } 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: 2.9em; } 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: repeat(2, 1fr); grid-gap: 1em; } 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-pages #related-grid { display: grid; grid-template-columns: repeat(3, 1fr); width: auto !important; grid-column-gap: 10%; } body main #reader #related-pages #related-grid .card-displayed { margin-top: 2vh !important; width: 100%; } body main #reader #related-pages #related-grid .card-displayed figure { min-height: 80px !important; } body main #reader #related-pages p { margin-top: 3vh; margin-bottom: 6vh !important; } body main #reader .swiper .swiper-button-next, body main #reader .swiper .swiper-button-prev { bottom: unset; top: var(--swiper-navigation-top-offset, 50%); } 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: #0e1229; } 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 { background-color: #f5f5f5; position: relative; top: 0; opacity: 1; height: 7vh; 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: #0e1229; 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: #0e1229; 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 #index-content > #extrait-projets figure a figcaption { background-color: #0e1229; color: #f5f5f5; } body main .content { width: 65vw; padding: 0; } body main .content .card-displayed figure a figcaption { opacity: 0; position: absolute; bottom: 0; left: 0; width: 100%; box-sizing: border-box; padding: 10px; color: #0e1229; font-size: 0.75em; border-radius: 0 0 10px 10px; } body main .content .culturelle-card figure a figcaption { background-color: #feff74; } body main .content .sociale-card figure a figcaption { background-color: #71ff94; } body main .content .publique-card figure a figcaption { background-color: #ffaeab; } body main .card-displayed:hover figure a figcaption { opacity: 1; } body main #index-content #extrait-projets > div { grid-template-columns: repeat(4, 1fr); } body main #index-content #extrait-projets > div div:last-of-type { grid-column-end: span 4; } body main #index-content #commanditaires-grid { grid-template-columns: repeat(8, 1fr); } body main #projets-index { width: 65vw; } body main #projets-index .projets-grid { grid-template-columns: repeat(4, 1fr); } 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: 60vw; } body main #reader #header-project { width: 100%; } body main #reader #header-project h2 { width: 100%; padding: 0; } body main #reader #header-project h2 span { padding-left: 20vw; padding-top: 1.4vh; height: 1.25em; } body main #reader #header-project #gradient-long-title { right: 34.2vw; } body main #reader #cover-image { width: 66.666%; box-sizing: border-box; margin: 0 10vw; } body main #reader #info-project { width: 100%; box-sizing: border-box; padding: 0 10vw; margin-top: 2vh; margin-bottom: 4vh; } body main #reader #info-project h2 { min-width: 95%; 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: calc(4vh + 11.5px); 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: 20vw !important; transform: scale(0.7, 0.7) !important; } body main #reader #project-description { padding: 0 10vw; 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 { width: 100%; grid-column-gap: 3%; } body main #reader #related-pages #related-grid div figure { min-width: 10vw; } body main #reader #related-pages p { align-self: flex-end; } 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: 2.9em; } 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 { column-gap: 2em; grid-template-columns: repeat(4, 1fr); } body main #reader #related-pages { padding: 0 10vw; box-sizing: border-box; } } /*# sourceMappingURL=theme.css.map */