@font-face {
    font-family: "SuperMario";
    src: url("fonts/SuperMario256.ttf") format("truetype");
   }
@font-face {
    font-family: "FreshLychee";
    src: url("fonts/FreshLychee.otf") format("truetype");
    }
@font-face {
    font-family: "RetroGaming";
    src: url("fonts/RetroGaming.ttf") format("truetype");
    }

*{scroll-behavior: smooth; padding: 0; margin: 0; text-decoration: none;}

html {scrollbar-width: none;}
body.lock-scroll {overflow: hidden;}
::-webkit-scrollbar {display: none;}

div.green {background-color: #16404F; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; width: 100vw;}
div.green > img {height: 48px; width: 90vw; object-fit: contain; margin-bottom: 2vw;}
div.green > a > h1 {position: relative; color: white; font-family: 'Work Sans'; font-size: calc(7px + 1vw); font-weight: 300;}
div.green > a > h1:after {content: ''; position: absolute; width: 100%; height: 1px; bottom: 0; left: 0; transition: .3s; background-color: white;}
div.green > a > h1:hover:after {bottom: -2px; left: 9px; transition: .3s;}

div.wrapper.black {background-color: black;}
div.wrapper.white {background-color: white;}

::selection{background-color: #b6002c;}

div.transition {position: fixed; z-index: 10000000; height: 100vh; width: 100vw; top: 0; left: 0; pointer-events: none; display: flex; justify-content: center; align-items: center;}
div.transition > ul {list-style: none; display: flex; justify-content: center; align-items: center; height: 100%; width: 100%;}
div.transition > ul > li {position: absolute; height: 300vw; background-color: #b6002c; margin-left: auto; margin-right: auto; width: 300vw; -webkit-transform: scaleX(1) rotate(45deg); transform: scaleX(1) rotate(45deg);}
div.transition > ul > li > div.logo {position: absolute; top: calc(50% - 24px); left: calc(50% - 45vw); height: 150px; width: 90vw; background-image: url(images/kyoruBlanc.png); background-size: contain; background-position: center; background-repeat: no-repeat; transform: rotate(-45deg);}

header.black {position: fixed; width: 100%; z-index: 1000;}
header.black > div.fond {background-color: black; width: 100%; height: 56px; position: absolute; top: 0; left: 0; z-index: -1; opacity: 0;}
header.black > div.content {display: flex; justify-content: space-between; align-items: center; padding: 14px;}
header.black > div.content > a {height: 28px;}
header.black > div.content > a > div.headerlogo {height: 28px; width: 183px; background-image: url(images/JeremBlanc.png); background-size: contain; background-repeat: no-repeat;}
header.black > div.content > div#primarynav {display: flex; justify-content: space-between; align-items: center; height: 28px;}
header.black > div.content > div#primarynav > ul {display: flex; align-items: center; list-style: none; height: 100%;}
header.black > div.content > div#primarynav > ul > li {display: flex; align-items: center; margin-left: 16px; height: 100%;}
header.black > div.content > div#primarynav > ul > li > a {display: flex; align-items: center; text-decoration: none; color: white; text-transform: uppercase; font-family: 'Work Sans'; position: relative; height: 100%;}
header.black > div.content > div#primarynav > ul > li > a:after {content: ''; position: absolute; background-color: white; height: 1px; width: 100%; bottom: 0; left: 0; transform-origin: right; transform: scaleX(0); transition: transform .3s ease-in-out;}
header.black > div.content > div#primarynav > ul > li > a:hover:after {transform-origin: left; transform: scaleX(1);}
header.black > div.content > div#secondarynav {position: absolute; height: 100vh; width: 100vw; z-index: 1; top: 0; right: -100vw; background-color: white; transition: right 0.5s ease; flex-direction: column; justify-content: space-between;}
header.black > div.content > div#secondarynav.active {right: 0; transition: right 0.5s ease; display: flex;}
header.black > div.content > div#secondarynav > ul {list-style-type: none; padding: 0; margin: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center;}
header.black > div.content > div#secondarynav > ul > li > a {padding: 8px; font-size: calc(19px + 6vw); font-family: 'Raleway'; font-weight: 100; text-transform: uppercase; text-align: center; color: black; display: block; transition: 0.3s;}
header.black > div.content > div#secondarynav > ul > li > a:hover {color: #b6002c; transition: .3s; letter-spacing: 5px;}
header.black > div.content > div#secondarynav > a#close {position: absolute; margin-top: 14px; height: 28px; width: 35px; top: 0; right: 14px; font-size: 36px; display: flex; flex-direction: row; align-items: center; text-align: center;}
header.black > div.content > a > span.burger {display: flex; flex-direction: column; justify-content: space-around; height: 100%;}
header.black > div.content > a > span.burger > span.line {display: block; width: 35px; height: 1px; background-color: white;}
header.black > div.content > div > a > span.burger {display: flex; flex-direction: column; justify-content: space-around; height: 100%;}
header.black > div.content > div > a > span.burger > span.line:nth-child(1) {position: absolute; display: block; width: 35px; height: 1px; background-color: black; transform: rotate(45deg);}
header.black > div.content > div > a > span.burger > span.line:nth-child(2) {position: absolute; display: block; width: 35px; height: 1px; background-color: black; transform: rotate(-45deg);}
header.black > div.content > div#secondarynav,
header.black > div.content > a#open {display: none;}
header.white {position: fixed; width: 100%; z-index: 1000;}
header.white > div.fond {background-color: white; width: 100%; height: 56px; position: absolute; top: 0; left: 0; z-index: -1; opacity: 0;}
header.white > div.content {display: flex; justify-content: space-between; align-items: center; padding: 14px;}
header.white > div.content > a {height: 28px;}
header.white > div.content > a > div.headerlogo {height: 28px; width: 183px; background-image: url(images/JeremNoir.png); background-size: contain; background-repeat: no-repeat;}
header.white > div.content > div#primarynav {display: flex; justify-content: space-between; align-items: center; height: 28px;}
header.white > div.content > div#primarynav > ul {display: flex; align-items: center; list-style: none; height: 100%;}
header.white > div.content > div#primarynav > ul > li {display: flex; align-items: center; margin-left: 16px; height: 100%;}
header.white > div.content > div#primarynav > ul > li > a {display: flex; align-items: center; text-decoration: none; color: black; text-transform: uppercase; font-family: 'Work Sans'; position: relative; height: 100%;}
header.white > div.content > div#primarynav > ul > li > a:after {content: ''; position: absolute; background-color: black; height: 1px; width: 100%; bottom: 0; left: 0; transform-origin: right; transform: scaleX(0); transition: transform .3s ease-in-out;}
header.white > div.content > div#primarynav > ul > li > a:hover:after {transform-origin: left; transform: scaleX(1);}
header.white > div.content > div#secondarynav {position: absolute; height: 100vh; width: 100vw; z-index: 1; top: 0; right: -100vw; background-color: black; transition: right 0.5s ease; flex-direction: column; justify-content: space-between;}
header.white > div.content > div#secondarynav.active {right: 0; transition: right 0.5s ease; display: flex;}
header.white > div.content > div#secondarynav > ul {list-style-type: none; padding: 0; margin: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center;}
header.white > div.content > div#secondarynav > ul > li > a {padding: 8px; font-size: calc(19px + 6vw); font-family: 'Raleway'; font-weight: 100; text-transform: uppercase; text-align: center; color: white; display: block; transition: 0.3s;}
header.white > div.content > div#secondarynav > ul > li > a:hover {color: #b6002c; transition: .3s; letter-spacing: 5px;}
header.white > div.content > div#secondarynav > a#close {position: absolute; margin-top: 14px; height: 28px; width: 35px; top: 0; right: 14px; font-size: 36px; display: flex; flex-direction: row; align-items: center; text-align: center;}
header.white > div.content > a > span.burger {display: flex; flex-direction: column; justify-content: space-around; height: 100%;}
header.white > div.content > a > span.burger > span.line {display: block; width: 35px; height: 1px; background-color: black;}
header.white > div.content > div > a > span.burger {display: flex; flex-direction: column; justify-content: space-around; height: 100%;}
header.white > div.content > div > a > span.burger > span.line:nth-child(1) {position: absolute; display: block; width: 35px; height: 1px; background-color: white; transform: rotate(45deg);}
header.white > div.content > div > a > span.burger > span.line:nth-child(2) {position: absolute; display: block; width: 35px; height: 1px; background-color: white; transform: rotate(-45deg);}
header.white > div.content > div#secondarynav,
header.white > div.content > a#open {display: none;}

main {height: 100vh; position: relative; z-index: 2;}
main.black {background: black;}
main.white {background-color: white;}

.hidden {display: none;}

main > div.video > video {width: 100vw; height: calc(100vh + 1px); max-width: 100%; object-fit: cover;}
main > div.video {opacity: 20%; z-index: -10; height: calc(100vh + 1px);}

main > div.text-top {position: absolute; z-index: 20; right: 7vw; bottom: calc(10vh - 22px); color: white; font-size: calc(24px + 6vw);}
main > div.text-top > p {font-family: 'Yeseva One';}
main > div.text-top > div.project {display: flex; flex-direction: row; align-items: center; height: calc(7vw + 30px);}
main > div.text-top > div.project > a{height: calc(3.5vw + 14px); width: calc(3.5vw + 14px); position: relative;}
main > div.text-top > div.project > a:first-child{margin-left: calc(0px - 6.5vw - 14px);}
main > div.text-top > div.project > div:nth-child(2){margin-left: calc(3vw); display: flex; align-items: center;}
main > div.text-top > div.project > a:last-child{margin-left: calc(3vw);}
main > div.text-top > div.project > a > svg {position: absolute; height: calc(3.5vw + 14px); width: calc(3.5vw + 14px); top: 0; border: 1px white solid; border-radius: calc(0.3vw + 7px);}
main > div.text-top > div.project > div {margin-bottom: 1vh;} 
main > div.text-top > div.project > div > span:first-child {padding-left: 1vw;} 
main > div.text-top > div.project > div > span:last-child {padding-right: 1vw;}
main > div.text-top > div.project > div > span.freedom {background-image: url(images/fond.jpg); background-size: cover; background-clip: text;-webkit-background-clip: text; color: white; transition: .3s; font-size: calc(35px + 8vw);}
main > div.text-top > div.project > div:hover > span.freedom {background-image: url(images/fond.jpg); background-size: cover; background-clip: text;-webkit-background-clip: text; color: transparent; opacity: 1; transition: .3s;}
main > div.text-top > div.project > div > span.pengu {background-image: url(images/blocPengu.png); background-size: cover; background-clip: text;-webkit-background-clip: text; color: white; transition: .3s; font-size: calc(20px + 5vw);}
main > div.text-top > div.project > div:hover > span.pengu {background-image: url(images/blocPengu.png); background-size: cover; background-clip: text;-webkit-background-clip: text; color: transparent; opacity: 1; transition: .3s;}
main > div.text-top > div.project > div > span.circle{position: relative; color: transparent;}
main > div.text-top > div.project > div > span.circle:after{margin-top: 1px; content: ''; position: absolute; width: calc(18px + 3.9vw); height: calc(18px + 3.9vw); background-color: white; border-radius: 1000px; top: 50%; right: 50%; left: 50%; bottom: 50%; transform: translate(-50% , -50%); transition: .3s}
main > div.text-top > div.project > div:hover > span:after {background-color: #b6002c; transition: .3s} 
main > div.text-top > a > div.space {height: calc(3.5vw + 14px); width: calc(100% - 6.1vw - 15px); border: white 1px solid; border-radius: calc(0.3vw + 7px); display: flex; align-items: flex-end;}
main > div.text-top > a > div.space > p {font-family: 'RetroGaming'; text-transform: uppercase; letter-spacing: 1px; font-size: calc(7px + 1vw); padding: 0 0 2px 10px; color: white;}

div.scroll.black {left: 14px; position: absolute; bottom: 0; transform: rotate(-90deg); color: white; text-transform: uppercase; display: flex; align-items: center; font-size: 14px; font-family: 'Quicksand'; margin: 0 0 52px -53px; z-index: 3;}
div.scroll.black > span {width: 60px; height: 1px; background-color: white; margin-right: 10px;}

div.scroll.white {left: 14px; position: absolute; bottom: 0; transform: rotate(-90deg); color: black; text-transform: uppercase; display: flex; align-items: center; font-size: 14px; font-family: 'Quicksand'; margin: 0 0 52px -53px; z-index: 3;}
div.scroll.white > span {width: 60px; height: 1px; background-color: black; margin-right: 10px;}

.memento{font-family: 'Work Sans'!important; font-weight: 900!important; text-transform: uppercase!important;} 
.pengu {font-family: 'SuperMario'!important;} 
.freedom {font-family: 'FreshLychee'!important;}

section.article.black {background-color: black; min-height: calc(100vh - 10vw); padding: 5vw; display: flex; overflow-x: hidden;}
section.article.black > div {display: flex; flex-direction: column; justify-content: center; width: 50%;}
section.article.black > div > a,
section.article.black > div > div {height: 50%; display: flex; justify-content: center; align-items: center; text-decoration: none; color: white;}
section.article.black > div > a > p:nth-child(1) {transition: .6s; font-size: calc(4vw + 12px); font-family: 'Yeseva One'; z-index: 2; color: #191919;}
section.article.black > div > a > p:nth-child(2) {transition: .6s; font-size: calc(10vw + 12px); position: absolute; font-family: 'Kaisei HarunoUmi'; z-index: 1; color: transparent;}
section.article.black > div > a > p:nth-child(2)::selection {transition: .6s; background-color: transparent;}
section.article.black > div > a:hover > p:nth-child(1) {transition: .6s; color: white;}
section.article.black > div > a:hover > p:nth-child(2) {transition: .6s; color: #191919;}
section.article.black > div > a:hover > p:nth-child(2)::selection {transition: .6s; background-color: #b6002c;}
section.article.black > div > div > p:nth-child(1) {font-size: calc(4vw + 12px); font-family: 'Yeseva One'; z-index: 2;}
section.article.black > div > div > p:nth-child(2) {font-size: calc(10vw + 12px); position: absolute; font-family: 'Kaisei HarunoUmi'; z-index: 1; color: #191919;}
section.article.black > div > p {color: white; font-family: "Work Sans"; font-size: calc(16px + 2vw); font-weight: 300; padding: 28px;}
section.article.black > div > p > span.red {position: relative; color: transparent; line-height: 0;}
section.article.black > div > p > span.red::after {position: absolute; content: ''; width: 50%; height: 0; padding-bottom: 50%; border-radius: 200px; bottom: 20%; left: 70%; background-color: white; transition: .3s}
section.article.black > div > p:hover > span.red:after {width: 150%; height: 0; padding-bottom: 150%; border-radius: 200px; background-color: #b6002c; transition: .3s}
section.article.black > div > h1 {color: white; font-family: "Work Sans"; font-size: calc(16px + 2vw); font-weight: 300; padding: 28px;}
section.article.black > div > h1 > span.red {position: relative; color: transparent; line-height: 0;}
section.article.black > div > h1 > span.red::after {position: absolute; content: ''; width: 50%; height: 0; padding-bottom: 50%; border-radius: 200px; bottom: 20%; left: 70%; background-color: white; transition: .3s}
section.article.black > div > h1:hover > span.red:after {width: 150%; height: 0; padding-bottom: 150%; border-radius: 200px; background-color: #b6002c; transition: .3s}

section.article.white {background-color: white; min-height: calc(100vh - 10vw); padding: 5vw; display: flex; overflow-x: hidden;}
section.article.white > div {display: flex; flex-direction: column; justify-content: center; width: 50%;}
section.article.white > div > a,
section.article.white > div > div {height: 50%; display: flex; justify-content: center; align-items: center; text-decoration: none; color: black;}
section.article.white > div > a > p:nth-child(1) {transition: .6s; font-size: calc(4vw + 12px); font-family: 'Yeseva One'; z-index: 2; color: #e6e6e6;}
section.article.white > div > a > p:nth-child(2) {transition: .6s; font-size: calc(10vw + 12px); position: absolute; font-family: 'Kaisei HarunoUmi'; z-index: 1; color: transparent;}
section.article.white > div > a > p:nth-child(2)::selection {transition: .6s; background-color: transparent;}
section.article.white > div > a:hover > p:nth-child(1) {transition: .6s; color: black;}
section.article.white > div > a:hover > p:nth-child(2) {transition: .6s; color: #e6e6e6;}
section.article.white > div > a:hover > p:nth-child(2)::selection {transition: .6s; background-color: #b6002c;}
section.article.white > div > div > p:nth-child(1) {font-size: calc(4vw + 12px); font-family: 'Yeseva One'; z-index: 2;}
section.article.white > div > div > p:nth-child(2) {font-size: calc(10vw + 12px); position: absolute; font-family: 'Kaisei HarunoUmi'; z-index: 1; color: #e6e6e6;}
section.article.white > div > p {color: black; font-family: "Work Sans"; font-size: calc(16px + 2vw); font-weight: 300; padding: 28px;}
section.article.white > div > p > span.red {position: relative; color: transparent; line-height: 0;}
section.article.white > div > p > span.red::after {position: absolute; content: ''; width: 50%; height: 0; padding-bottom: 50%; border-radius: 200px; bottom: 20%; left: 70%; background-color: black; transition: .3s}
section.article.white > div > p:hover > span.red:after {width: 150%; height: 0; padding-bottom: 150%; border-radius: 200px; background-color: #b6002c; transition: .3s}
section.article.white > div > h1 {color: black; font-family: "Work Sans"; font-size: calc(16px + 2vw); font-weight: 300; padding: 28px;}
section.article.white > div > h1 > span.red {position: relative; color: transparent; line-height: 0;}
section.article.white > div > h1 > span.red::after {position: absolute; content: ''; width: 50%; height: 0; padding-bottom: 50%; border-radius: 200px; bottom: 20%; left: 70%; background-color: black; transition: .3s}
section.article.white > div > h1:hover > span.red:after {width: 150%; height: 0; padding-bottom: 150%; border-radius: 200px; background-color: #b6002c; transition: .3s}

main.text-w {height: auto; display: flex; flex-direction: column;}
main.text-w > a {position: relative; width: 100%; font-size: 26vw; display: flex; flex-direction: row; justify-content: center; align-items: center; margin: 2vh auto; color: white;}
main.text-w > a > div:nth-child(2) {text-align: center; display: flex; align-items: center; justify-content: center; background-color: black; color: white; mix-blend-mode: multiply; user-select: none; width: 100%;}
main.text-w > a > div:nth-child(2) > span.circle{position: relative; font-size: 15vw; margin: 0 calc(1px + 3.2vw);}
main.text-w > a > div:nth-child(2) > span.circle:after{mix-blend-mode: none; user-select: none; margin-top: 1px ;content: ''; position: absolute; width: 17.2vw; height: 17.2vw; background-color: white; mix-blend-mode: normal; border-radius: 1000px; top: 50%; right: 50%; left: 50%; bottom: 50%; transform: translate(-50% , -50%); transition: .3s;}
main.text-w > a > div:nth-child(2) > span.memento {margin-bottom: 20px;}
main.text-w > a > span {text-align: center; background-color: black; color: white; mix-blend-mode: multiply; user-select: none; width: 100%;;}
main.text-w > a > span.pengu {font-size: 20vw;} 
main.text-w > a > span.freedom {font-size: 35vw;}
main.text-w > a > div.video {position: absolute; width: 99%; height: 99%;;}
main.text-w > a > div.video > video {position: absolute; width: 100%; height: 100%; object-fit: cover;}
main.text-w > a > div.video:after {position: absolute; content: ''; width: 100%; height: 100%; background-color: white; opacity: .15;}
main.text-w > a:first-child > div.video:after {position: absolute; content: ''; width: 100%; height: 100%; background-color: black; opacity: .15;}

.logo {position: relative;}
.logo > img {position: absolute; left: 0; top: 0; transition: .5s ease-in-out;}
.logo > img:nth-child(2) {opacity: 0; transition: .5s ease-in-out;}
.logo:hover > img:nth-child(1) {opacity: 0; transition: .5s ease-in-out;}
.logo:hover > img:nth-child(2) {opacity: 1; transition: .5s ease-in-out;}

main.black.about {height: auto; min-height: 100vh; padding: 5vw;}
main.black.about > div > p {color: white; font-family: 'Raleway'; font-weight: 400; font-size: calc(5vw + 15px); margin: 10vh 0; letter-spacing: -0.41vw; word-spacing: calc(10px + 0.3vw); text-transform: uppercase;}
main.black.about > div > div {display: flex; flex-wrap: wrap;}
main.black.about > div > div > div {width: calc(20vw + 182px); padding: 28px 0; display: flex; justify-content: center; align-items: flex-end; margin: 1vh auto;}
main.black.about > div > div > div > div.logo,
main.black.about > div > div > div > div.logo > img {height: calc(100px + 8vw); width: calc(100px + 8vw); object-fit: contain;}
main.black.about > div > div > div > div.score {display: flex; flex-direction: column; justify-content: center; color: #b6002c; font-family: 'Work Sans'; font-size: 0.9rem; font-weight: 700; margin-left: calc(1vw + 10px); text-align: center;}
main.black.about > div > div > div > div.score > p {margin-bottom: 3px;}
main.black.about > div > div > div > div.score > p > span{font-size: 1.7rem; margin-right: 2px;}
main.black.about > div > div > div > div.score > img {width: calc(65px + 4vw); height: calc(65px + 4vw); object-fit: contain; object-position: center;}

main.black.details {height: auto; min-height: 100vh; text-decoration: none; color: white; font-family: "Work Sans"; font-size: calc(16px + 1vw); font-weight: 300; padding: 5vw; display: flex; flex-direction: column; justify-content: center; align-items: center;}
main.black.details > div:nth-child(1) {display: flex; position: relative; z-index: 2;}
main.black.details > div:nth-child(1) > div:nth-child(1) {width: 60%;}
main.black.details > div:nth-child(1) > div:nth-child(2) {width: 40%;}
main.black.details > div:nth-child(1) > div:nth-child(2) > div {display: flex; flex-wrap: wrap;}
main.black.details > div:nth-child(1) > div:nth-child(2) > div > p > a {color: white; transition: .3s; position: relative;}
main.black.details > div:nth-child(1) > div:nth-child(2) > div > p > a:hover {color: #b6002c; transition: .3s;}
main.black.details > div:nth-child(1) > div:nth-child(2) > div > p > a:after {content: ''; position: absolute; width: 100%; height: 1px; background-color: white; bottom: 0; left: 0; transition: .3s;}
main.black.details > div:nth-child(1) > div:nth-child(2) > div > p > a:hover:after {background-color: #b6002c; left: 9px; bottom: -2px; transition: .3s;}
main.black.details > div:nth-child(1) > div > p,
main.black.details > div:nth-child(1) > div > div {padding: 42px 2vw;}
main.black.details > div:nth-child(1) > div > p > span.red {position: relative; color: transparent; line-height: 0;}
main.black.details > div:nth-child(1) > div > p > span.red::after {position: absolute; content: ''; width: 50%; height: 0; padding-bottom: 50%; border-radius: 200px; bottom: 20%; left: 70%; background-color: white; transition: .3s}
main.black.details > div:nth-child(1) > div > p:hover > span.red:after {width: 150%; height: 0; padding-bottom: 150%; border-radius: 200px; background-color: #b6002c; transition: .3s}
main.black.details > div:nth-child(2) {width: calc(80px + 35vw); height: calc(80px + 35vw); border-radius: 100vh; background-color: #191919; position: absolute;}

section.article.white.project > div {flex-direction: row; align-items: center; justify-content: space-around;}
section.article.white.project > div > a {height: calc(3.5vw + 14px); width: calc(3.5vw + 14px);}
section.article.white.project > div > a > svg {border: 1px black solid; border-radius: calc(0.3vw + 7px); height: 100%; width: 100%;}
main.white.project {height: auto; min-height: 100vh; padding: 10vh 5vw; display: flex; flex-direction: column; justify-content: space-between; align-items: center; overflow-x: hidden;}
main.white.project > h1.memento {font-size: calc(2vw + 20px); text-align: center; margin-bottom: calc(2vw + 30px);}
main.white.project > h1.pengu,
main.white.project > h1.freedom {font-size: calc(4.5vw + 20px); text-align: center; margin-bottom: calc(2vw + 30px);}
main.white.project > h1 > span.circle{position: relative; font-size: calc(20px + 2vw); color: transparent;}
main.white.project > h1 > span.circle:after{margin-top: 1px; content: ''; position: absolute; width: calc(14px + 1.3vw); height: calc(14px + 1.3vw); background-color: black; border-radius: 1000px; top: 50%; right: 50%; left: 50%; bottom: 50%; transform: translate(-50% , -50%);}
main.white.project p {padding-bottom: 1.5vh;}
main.white.project p.small {padding-bottom: 1.5vh; font-size: 50%;}
main.white.project > div {position: relative; font-family: 'Work Sans'; font-size: calc(16px + 1vw); font-weight: 300; width: 90vw; padding: calc(4vw + 30px) 0;}
main.white.project > div p {padding: 0 5vw 1.5vh;}
main.white.project > div img {padding: 0 5vw;}
main.white.project > div > a {color: black; position: relative; transition: .3s;}
main.white.project > div > a::after {content: ''; position: absolute; width: 100%; bottom: 0; left: 0; height: 1px; background-color: black; transition: .3s;}
main.white.project > div > a:hover {color: #b6002c; transition: .3s;}
main.white.project > div > a:hover::after {bottom: -2px; left: 9px; background-color: #b6002c; transition: .3s;}
main.white.project > div > div > p > a {color: black; position: relative; transition: .3s;}
main.white.project > div > div > p > a::after {content: ''; position: absolute; width: 100%; bottom: 0; left: 0; height: 1px; background-color: black; transition: .3s;}
main.white.project > div > div > p > a:hover {color: #b6002c; transition: .3s;}
main.white.project > div > div > p > a:hover::after {bottom: -2px; left: 9px; background-color: #b6002c; transition: .3s;}
main.white.project > div > div > div > p > a {color: black; position: relative; transition: .3s;}
main.white.project > div > div > div > p > a::after {content: ''; position: absolute; width: 100%; bottom: 0; left: 0; height: 1px; background-color: black; transition: .3s;}
main.white.project > div > div > div > p > a:hover {color: #b6002c; transition: .3s;}
main.white.project > div > div > div > p > a:hover::after {bottom: -2px; left: 9px; background-color: #b6002c; transition: .3s;}
main.white.project > div.ressources{display: flex; flex-direction: column; align-items: flex-end;}
main.white.project > div.infos > video, 
main.white.project > div.infos > iframe {border-radius: 5px; box-shadow: 19px 19px 19px #19191919; max-height: 50vh; max-width: 90vw;}
main.white.project > div.crea > img {max-width: 80vw; margin: 0 0 calc(4vw + 30px) 0;}
main.white.project > div.crea > div {padding: 0 5vw 1.5vh;}
main.white.project > div.crea > div > p {padding: 0 0 1.5vh 0;}
main.white.project > div.crea > div > img {max-width: 25vw;}
main.white.project > div.image {max-width: 90vw; display: flex; align-items: center; justify-content: center;}
main.white.project > div.image > img {max-height: 80vh; max-width: 90vw; padding: 0;}
main.white.project > div:last-child {padding: calc(2vw + 30px) 0 0; display: flex; flex-direction: column; align-items: center;}
main.white.project > div:last-child > a {margin-top: 10vh}

footer.black {background-color: black; position: relative; min-height: 50vh; padding: 28px; display: flex; flex-direction: column; justify-content: center;}
footer.black:after {content: ''; position: absolute; width: calc(100% - 56px); height: 1px; background-color: white; top: 28px; left: 28px;}
footer.black *{color: white;}
footer.black > div {display: flex; flex-direction: row; justify-content: space-between; padding: 28px 56px;}
footer.black > div > div.col-2 {display: flex; flex-direction: column; justify-content: space-between; width: 75%;}
footer.black > div > div.col-2 > p {font-family: 'Sylfaen'; font-weight: 800; font-size: calc(2vw + 20px); margin-bottom: calc(0.2vw + 5px);}
footer.black > div > div.col-2 > div {display: flex; flex-direction: column; align-items: flex-end; margin-left: 5vw; margin-right: auto;}
footer.black > div > div.col-2 > div > p {margin-bottom: 5vh; font-family: 'Sylfaen'; font-size: calc(2vw + 16px); text-transform: uppercase;}
footer.black > div > div.col-2 > div > div {position: relative; width: 100%; display: flex; align-items: center; justify-content: flex-end; margin-bottom: 10px;}
footer.black > div > div.col-2 > div > div:last-child {margin-bottom: 0px;}
footer.black > div > div.col-2 > div > div > a {font-family: 'Work Sans'; font-size: calc(0.5vw + 12px); text-transform: uppercase; letter-spacing: 5px; transition: .3s;}
footer.black > div > div.col-2 > div > div > a:hover {color: #b6002c; transition: .3s;}
footer.black > div > div.col-1 {display: flex; flex-direction: column; width: 25%; justify-content: space-between;}
footer.black > div > div.col-1 > div {display: flex; justify-content: space-between;}
footer.black > div > div.col-1 > div > div {display: flex; flex-direction: column;}
footer.black > div > div.col-1 > div > div > a {font-family: 'Work Sans'; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 0.5rem; transition: .3s;}
footer.black > div > div.col-1 > div > div > a:hover {color: #b6002c; transition: .3s;}
footer.black > div > div.col-1 > a {display: flex; align-items: flex-end; width: 100%; height: 100%;}
footer.black > div > div.col-1 > a > div.footerlogo {position: relative; height: 100%; width: 100%; min-height: 28px;}
footer.black > div > div.col-1 > a > div.footerlogo > img {width: 100%; height: 100%; position: absolute; bottom: 0; object-fit: contain; object-position: bottom;}
footer.black > div > div.col-1 > a > div.footerlogo > img.white {transition: .3s;}
footer.black > div > div.col-1 > a > div.footerlogo > img.black {opacity: 0;}
footer.black > div > div.col-1 > a > div.footerlogo > img.red {opacity: 0;transition: .3s;}
footer.black > div > div.col-1 > a > div.footerlogo:hover > img.red {opacity: 1;transition: .3s;}
footer.black > div > div.col-1 > a > div.footerlogo:hover > img.white {opacity: 0;transition: .3s;}

footer.white {background-color: white; position: relative; min-height: 50vh; padding: 28px; display: flex; flex-direction: column; justify-content: center;}
footer.white:after {content: ''; position: absolute; width: calc(100% - 56px); height: 1px; background-color: black; top: 28px; left: 28px;}
footer.white *{color: black;}
footer.white > div {display: flex; flex-direction: row; justify-content: space-between; padding: 28px 56px;}
footer.white > div > div.col-2 {display: flex; flex-direction: column; justify-content: space-between; width: 75%;}
footer.white > div > div.col-2 > p {font-family: 'Sylfaen'; font-weight: 800; font-size: calc(2vw + 20px); margin-bottom: calc(0.2vw + 5px);}
footer.white > div > div.col-2 > div {display: flex; flex-direction: column; align-items: flex-end; margin-left: 5vw; margin-right: auto;}
footer.white > div > div.col-2 > div > p {margin-bottom: 5vh; font-family: 'Sylfaen'; font-size: calc(2vw + 16px); text-transform: uppercase;}
footer.white > div > div.col-2 > div > div {position: relative; width: 100%; display: flex; align-items: center; justify-content: flex-end; margin-bottom: 10px;}
footer.white > div > div.col-2 > div > div:last-child {margin-bottom: 0px;}
footer.white > div > div.col-2 > div > div > a {font-family: 'Work Sans'; font-size: calc(0.5vw + 12px); text-transform: uppercase; letter-spacing: 5px; transition: .3s;}
footer.white > div > div.col-2 > div > div > a:hover {color: #b6002c; transition: .3s;}
footer.white > div > div.col-1 {display: flex; flex-direction: column; width: 25%; justify-content: space-between;}
footer.white > div > div.col-1 > div {display: flex; justify-content: space-between;}
footer.white > div > div.col-1 > div > div {display: flex; flex-direction: column;}
footer.white > div > div.col-1 > div > div > a {font-family: 'Work Sans'; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 0.5rem; transition: .3s;}
footer.white > div > div.col-1 > div > div > a:hover {color: #b6002c; transition: .3s;}
footer.white > div > div.col-1 > a {display: flex; align-items: flex-end; width: 100%; height: 100%;}
footer.white > div > div.col-1 > a > div.footerlogo {position: relative; height: 100%; width: 100%; min-height: 28px;}
footer.white > div > div.col-1 > a > div.footerlogo > img {width: 100%; height: 100%; position: absolute; bottom: 0; object-fit: contain; object-position: bottom;}
footer.white > div > div.col-1 > a > div.footerlogo > img.white {opacity: 0;}
footer.white > div > div.col-1 > a > div.footerlogo > img.black {transition: .3s;}
footer.white > div > div.col-1 > a > div.footerlogo > img.red {opacity: 0;transition: .3s;}
footer.white > div > div.col-1 > a > div.footerlogo:hover > img.red {opacity: 1;transition: .3s;}
footer.white > div > div.col-1 > a > div.footerlogo:hover > img.black {opacity: 0;transition: .3s;}

footer > section {font-family: 'Work Sans';}
footer.black > section > p {font-size: calc(8px + 0.4vw); color: #191919; text-align: center;}
footer.black > section > p > a {color: #191919;}
footer.white > section > p {font-size: calc(8px + 0.4vw); color: #e6e6e6; text-align: center;}
footer.white > section > p > a {color: #e6e6e6;}

a.aos-init {pointer-events: none; user-select: none;}
a.aos-init.aos-animate {pointer-events: auto; user-select: auto;}

@media only screen and (max-width: 1200px) {
    footer.black > div > div.col-1 > div {flex-direction: column-reverse;}
    footer.black > div > div.col-1 > div > div {display: flex; flex-direction: column; align-items: flex-end;}
    footer.black > div > div.col-1 > div > div:nth-child(2) {margin-bottom: 15px;}
    footer.white > div > div.col-1 > div {flex-direction: column-reverse;}
    footer.white > div > div.col-1 > div > div {display: flex; flex-direction: column; align-items: flex-end;}
    footer.white > div > div.col-1 > div > div:nth-child(2) {margin-bottom: 15px;}

}

@media only screen and (max-width: 1000px) {
    footer.black > div {padding: 28px 0;}
    footer.white > div {padding: 28px 0;}
}

@media only screen and (max-width: 800px) {
    header.black > div.content {padding: 14px;}
    header.black > div.content > div#primarynav{display: none;}
    header.black > div.content > div#secondarynav,
    header.black > div.content > a#open {display: block;}
    
    header.white > div.content {padding: 14px;}
    header.white > div.content > div#primarynav{display: none;}
    header.white > div.content > div#secondarynav,
    header.white > div.content > a#open {display: block;}
    
    section.article.black > div > p > span.red, 
    section.article.white > div > p > span.red {color: inherit;}
    section.article.black > div > h1 > span.red, 
    section.article.white > div > h1 > span.red {color: inherit;}
    span.red:after {display: none};
}


@media only screen and (max-width: 750px) {
    footer.black > div {flex-direction: column;}
    footer.black > div > div.col-2 {width: 100%; margin-bottom: 5vh; text-align: center;}
    footer.black > div > div.col-2 > div {margin-left: auto;}
    footer.black > div > div.col-1 {width: 100%;}
    footer.black > div > div.col-1 > div {justify-content: space-around;}
    footer.black > div > div.col-1 > div > div {align-items: flex-start;}
    footer.black > div > div.col-1 > div {flex-direction: row;}
    footer.white > div {flex-direction: column;}
    footer.white > div > div.col-2 {width: 100%; margin-bottom: 5vh; text-align: center;}
    footer.white > div > div.col-2 > div {margin-left: auto;}
    footer.white > div > div.col-1 {width: 100%;}
    footer.white > div > div.col-1 > div {justify-content: space-around;}
    footer.white > div > div.col-1 > div > div {align-items: flex-start;}
    footer.white > div > div.col-1 > div {flex-direction: row;}

}

@media only screen and (max-width: 550px) {
    section.article.black.index {flex-direction: column; justify-content: space-around; min-height: auto; padding: 15vh 5vw;}
    section.article.black.column {flex-direction: column; justify-content: center;}
    section.article.black > div {display: flex; flex-direction: row; justify-content: space-around; align-items: center; width: 100%; min-height: calc(20vh - 5vw);}
    section.article.black > div:nth-child(2) {display: flex; flex-direction: column; justify-content: center; align-items: flex-start; width: 100%; min-height: calc(20vh - 5vw);}
    section.article.black > div > div,
    section.article.black > div > a {width: 50%;}
    section.article.white.index {flex-direction: column; justify-content: space-around; min-height: auto;}
    section.article.white.column {flex-direction: column; justify-content: center;}
    section.article.white > div {display: flex; flex-direction: row; justify-content: space-around; align-items: center; width: 100%; min-height: calc(20vh - 5vw);}
    section.article.white > div:nth-child(2) {display: flex; flex-direction: column; justify-content: center; align-items: flex-start; width: 100%; min-height: calc(20vh - 5vw);}
    section.article.white > div > div,
    section.article.white > div > a {width: 50%;}
    main.black.details > div:nth-child(1) {flex-direction: column-reverse;}
    main.black.details > div:nth-child(1) > div:nth-child(1),
    main.black.details > div:nth-child(1) > div:nth-child(2) {width: auto;}
    main > div.text-top {bottom: calc(23vh - 22px);}
    main.black.about,
    main.black.details,
    main.text-w {margin-bottom: 15vh; margin-top: 15vh;}
}

@media only screen and (max-width: 500px) {
    footer.black > div > div.col-2 {text-align: left;}
    footer.white > div > div.col-2 {text-align: left;}

}

@media only screen and (max-width: 415px) {
    footer.black > div > div.col-2 > div > div > a {letter-spacing: 3px;}
    footer.white > div > div.col-2 > div > div > a {letter-spacing: 3px;}
}

@media only screen and (max-width: 360px) {
    footer.black > div > div.col-2 > div > div > a {letter-spacing: 0px;}
    footer.white > div > div.col-2 > div > div > a {letter-spacing: 0px;}
}

@media only screen and (max-width: 320px) {
    footer.black > div > div.col-1 > div {flex-direction: column; margin-bottom: 4vh;}
    footer.black > div > div.col-1 > div > div {align-items: center;}
    footer.white > div > div.col-1 > div {flex-direction: column; margin-bottom: 4vh;}
    footer.white > div > div.col-1 > div > div {align-items: center;}
}

@media only screen and (max-width: 290px) {
    footer.black > div > div.col-2 > p {font-size: calc(2vw + 19px);}
    footer.black > div > div.col-2 > div > p {font-size: calc(2vw + 15px);}
    footer.white > div > div.col-2 > p {font-size: calc(2vw + 19px);}
    footer.white > div > div.col-2 > div > p {font-size: calc(2vw + 15px);}
}