header { position:absolute; z-index:5; padding:3em;}
.logo { width:200px; filter:invert(100%); }
.langs { position:absolute; top:3.75em; left:300px; display:flex; }
.langs a { color:#000; padding:0 .25em; font-size:1.25em; }
.langs a:hover { opacity:.5; }
header nav {padding:1em 0;display:flex;flex-direction:column;align-items:flex-start;}
header nav a { position:relative; color:#000; padding:.25em 0; font-size:1.5em; }
header nav a:after { position:absolute; content:'';width:0;height:1px; background:#000; left:0; bottom:0; overflow:hidden; transition:.4s; }
header nav a:hover:after { width:100%; }
.essentials {}
.essentials a {display:block;position:relative;color:#000;padding:.25em 0;margin:.5em 0;font-size:1.25em;text-shadow:1px 1px 10px #fff;}
.essentials a:after { position:absolute; content:'';width:0;height:1px; background:#000; left:0; bottom:0; overflow:hidden; transition:.4s; }
.essentials a:hover:after { width:100%; }

header .socials { display:flex; }
header .socials a { width:30px; height:30px; border-radius:15px; margin-right:5px; background:#000; display:flex; justify-content:center; align-items:center; }
header .socials a img { width:15px; height:15px; }
header .socials a:hover { filter:invert(100%); }
.outer-links {  }
.outer-links a { display:block; background:#000; color:#fff; margin:.5em 0; padding:0 1em; font-size:1.5em; }
.outer-links a:hover { background:#fff; color:#000; }
main {}
main > section { position:relative; width:100vw; height:100vh; }
main > section img { position:absolute; z-index:1; width:100vw; height:100vh; }
main > section h2 { position:relative; z-index:5; text-align:center;font-family:mongoose; font-size:5em; color:#fff; font-weight:bold; text-shadow:5px 5px 10px #262626; padding:1em 0 0 0; }
main > section p { position:relative; z-index:5; width:60%; left:20%; text-align:center; color:#fff; }
main > section a { position:relative; z-index:5; display:block; text-align:center; color:#fff; font-weight:bold; font-size:1.5em; text-shadow:5px 5px 10px #000; }
main > section a:hover { color:#000; text-shadow:5px 5px 10px #fff; }
/****/
#section2 img { opacity:.2; }
#section2 h2 { color:#000; text-shadow:unset; }
#section2 p { color:#000; padding:2em 0 3em 0; }
#section2 a { color:#000;  }
/****/
.sub { display:flex; }
.sub .essentials a {color:#fff;}
/* For-Mobile Only */
.mobile-button { display:none; }

aside { width:16vw; padding:2vw 0 2vw 4vw; height:calc(100vh - 4vw); background:#000; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; }
aside .logo { filter:invert(100%); }
aside nav {}
aside nav a { position:relative; display:block; color:#fff; margin:.25em 0; font-size:1.5em; }
aside nav a:after { position:absolute; content:''; width:0%; height:1px; background:#fff; left:0; bottom:0; overflow:hidden; transition:.4s; }
aside nav a:hover:after { width:100%; }
.asideNavSelected:after { width:100%; }
aside .socials {  }
aside .socials a { width:30px; height:30px; border-radius:15px; margin-right:2px; background:#333033; display:inline-flex; justify-content:center; align-items:center; }
aside .socials a:hover { filter:invert(100%); }
aside .socials a img { width:15px; height:15px; }
.sub > section { width:80vw; height:100vh; }
/**/
.static { width:100%; height:100%; position:relative; display:flex; align-items:center; }
.static > img { position:absolute; top:0; left:0; bottom:0; right:0; width:80vw; height:100vh; object-fit:cover; background:#000; filter:brightness(20%); }
.static > section { width:80vw; height:90vh; position:relative; z-index:5; display:flex; justify-content:space-around; align-items:center; }
.static > section > figure { width:40vw; height:90vh; display:flex; flex-direction:column; justify-content:space-between; align-items:center; }
.static > section > figure img { width:90%; height:43vh; object-fit:cover; }
.static > section > figure img:only-of-type { height:100%; }
.static > section > article { width:36vw; color:#fff; padding:2vw; }
.static > section > article h3 { font-size:3em; }
.static > section > article p { padding:.25em 0; }
.static > section > article ul { padding:.5em; }
.static > section > article li { list-style:circle; letter-spacing:0; }
/****/
.timeline { width:100%; height:100%; position:relative; display:flex; overflow:hidden; }
.timeline h3 { position:absolute; top:1em; left:1em; color:#fff; font-size:3em; }
.timeline > img { position:absolute; top:0; left:0; bottom:0; right:0; width:85vw; height:100vh; object-fit:cover; background:#000; filter:brightness(20%); }
.line { position:absolute; top:calc(50% - 1px); width:100%; height:1px; background:#fff; }
.timeline article { position:absolute; display:flex; overflow:scroll; top:50%; transform: translateY(-50%); }
.timeline span { position:relative; display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start; height:200px; color:#fff; margin:0 .5em; font-size:1.5em; }
.timeline span:nth-child(odd) { justify-content:flex-end; }
.timeline span:nth-child(even) { justify-content:flex-start; }
.timeline span:nth-child(odd)::before { position:absolute; top:calc(50% - 2px); content:''; width:4px; height:4px; border-radius:4px; background:#fff; }
.timeline span:nth-child(even)::after { position:absolute; bottom:calc(50% - 2px); content:''; width:4px; height:4px; border-radius:4px; background:#fff; }
.timeline strong {}
.timeline small {}
/****/
.projects { width:80vw; display:flex; }
.projects > section { position:relative; width:42.5vw; height:100vh; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; }
.projects > section img { position:absolute; width:100%; height:100vh; object-fit:cover; object-position:center; }
.projects > section span { margin:1em; position:relative; }
.projects > section h3 { position:relative; color:#fff; font-size:4em; width:60%; line-height:90%; margin:.5em 0; }
.projects > section:last-child h3 { color:#000; }
.projects > section a { height:40px; line-height:40px; padding:0 10px 0 50px; position:relative; background:#000; color:#fff; }
.projects > section a:after { position:absolute; content:'>'; left:0; width:40px; height:40px; line-height:40px; text-align:center; background:#000; color:#fff; }
.projects > section a:hover { background:#fff; color:#000; }
.details { width:80vw; height:100vh; }
/****/
.slider-for { width:80vw; height:70vh; background:#fff; color:#000; }
.slider-nav { width:80vw; height:30vh; background:#000; color:#fff; }
.slider-for .slick-prev { width:30px; height:30px; left:0 !important; z-index:50 !important; background:rgba(0,0,0,0.45) !important; }
.slider-for .slick-next { width:30px; height:30px; right:0 !important; z-index:50 !important; background:rgba(0,0,0,0.45) !important; }
.slider-nav .slick-prev { left:0 !important; z-index:50 !important; height:100% !important; background:rgba(0,0,0,0.45) !important; }
.slider-nav .slick-next { right:0 !important; z-index:50 !important; height:100% !important; background:rgba(0,0,0,0.45) !important; }
/****/
.project-details {  }
.project-detail { position:relative; background:#000; display:flex; }
.project-detail > figure { width:45vw; height:70vh; }
.project-detail > figure img { width:100%; height:100%; object-fit:cover; }
.project-detail > article { padding:1em; width:35vw; color:#fff; display:flex; flex-direction:column; justify-content:center; }
.category-header { position:absolute; top:0; right:0; background:#fff; color:#000; padding:.25em 1em; }
.project-detail h3 { font-size:2.5em; }
.project-detail small { font-size:1.25em; margin-bottom:1em; }
.project-infos { color:#fff; }
.project-infos span { display:flex; font-size:1.25em; }
.project-infos mark { display:block; min-width:150px; }
.go-to-website { position:absolute; bottom:0; left:45vw; background:#fff; color:#000; padding:.25em 1em; }
.go-to-website:hover { background:#000; color:#fff; }
.other-projects {}
.other-project { position:relative; padding:5vh 0; height:20vh; overflow:hidden; cursor:pointer; }
.other-project > img { position:absolute; width:95%; height:20vh; object-fit:cover; }
.other-project > span { position:absolute; display:block; left:0; right:0; bottom:5vh; padding:.25em; background:rgba(0,0,0,0.6); font-size:1.25em; }
/**/
.brands { display:flex; }
.brands > section { position:relative; flex:1; height:100vh; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; }
.brands > section img { position:absolute; width:100%; height:100vh; object-fit:cover; object-position:center; }
.brands > section span { margin:1em; position:relative; }
.brands > section h3 { position:relative; color:#fff; font-size:3em; width:60%; line-height:90%; margin:.5em 0; }
.brands > section:nth-child(odd) h3 { color:#000; }
.brands > section a { height:40px; line-height:40px; padding:0 10px 0 50px;  position:relative; background:#000; color:#fff; }
.brands > section a:after { position:absolute; content:'>'; left:0px; width:40px; height:40px; line-height:40px; text-align:center; background:#000; color:#fff; }
.brands > section a:hover { background:#fff; color:#000; }
/**/
.contact iframe { width:38vw; margin:0 1vw; height:100%; }
.contact a { display:block; font-size:1.5em; color:#fff; }
.contact article > div { display:flex; }
.contact article > div a { background:#000; width:40px; height:40px; border-radius:20px; display:flex; align-items:center; justify-content:center; }

.essentials-cont {width:100%;height:100%;padding:1em;box-sizing:border-box;overflow:auto;}

.essentials-cont article {}
.essentials-cont p {padding:1em 0;}