/* STYLES.CSS */ /* /^^ /^^ /^^ /^ /^^^ /^^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^/^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^^^ /^^ */ :root { --coolgrey : #e5e5e4; --yellowBoost : yellow; --maxWidth : 1140px; --gridMosaique: 33.33vw; --fontSize_unit: 1px; --plyr-color-main : yellow; --plyr-video-background : white; } /* /^^ /^^ /^ /^^ /^/^ /^ /^^ /^^ /^^ /^/^ /^ /^^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^^ /^^ /^^ /^^ */ /* titles */ .txt_m { font-size: calc( var(--fontSize_unit) * 42); } .txt_ms { font-size: calc( var(--fontSize_unit) * 24); } .txt_m { font-size: calc( var(--fontSize_unit) * 42); } .txt_ml { font-size: calc( var(--fontSize_unit) * 54); } .txt_l { font-size: calc( var(--fontSize_unit) * 60); } .txt_xl { font-size: calc( var(--fontSize_unit) * 82); } .txt_xxl { font-size: calc( var(--fontSize_unit) * 6); } .main_logo{ font-size: calc( var(--fontSize_unit) * 8); font-family: var(--Manrope_Bold); } /* /^^ /^^ /^ /^^ /^^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^ /^^ /^^ /^^ /^^ /^^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^ /^^ /^^^^^ /^^ /^^ /^^ /^^ /^^ /^^^^^ /^^ /^^^ /^^ /^^ /^^ /^^ /^^ /^ /^^ /^ /^^ /^^ /^^ /^^ /^ /^^ /^^ /^^/^^ /^^ /^^ /^^ /^^^^ /^^^ /^^ /^^^ /^^ /^^^^ /^^ /^^ /^^ */ /*Reset */ html{ width: 100vw; height: 100vh; position: relative; overflow-y: hidden; } html * { cursor: none!important; } body{ display: block; overflow-y: auto; height: 100vh; width:100vw; position: relative; font-family: skolar-sans-latin, sans-serif; font-weight: 400; font-style: normal; top:0; left: 0; margin:0; font-size:24px; font-weight:400;letter-spacing: 0.03em; line-height:1.5; color:#000; text-align:left; overflow-x: hidden; background-color:#fff } body.boby_no_scroll { overflow: hidden; height: 100vh; } * { box-sizing: border-box; position: relative;} img{ max-width: 100%; height: auto; } ul{ margin: 0; display: block; text-align: left; padding: 0; } li{ margin: 0.2em 0 ; list-style: none; min-height:1.36em; padding-left: 6px; } ::selection { background: rgba(230, 230, 0, 0.5); } /* Barba */ .barba-container{ transition: opacity .3s .3s; } .anim_out .barba-container{ opacity: 0; transition: opacity .3s 0s; } /* grid */ header, footer, main{ width: 100vw; display: block; position: relative; } div{ display: block; position: relative; } section{ width: 100vw; position: relative; margin: 0; } .row{ padding: 0 40px; position: relative; display: table; margin: 0 auto; width: 100%; max-width: 1140px; } .row_condensed{ padding: 0 40px; position: relative; display: table; margin: 0 auto; width: 100%; max-width: 840px; } .display_size{width: 100vw; height: 100vh; } .display_size:not(.home_header) { overflow: hidden; } .cover_img{ width: 100%; height: 100%; object-fit: cover; max-width: none; } h1, h2, h3, h4{ margin: 0 } .barba-container{ width: 100vw; } #barba-wrapper{ width: 100vw; overflow-y: auto; } #barba-wrapper main.barba-container { position: absolute; top: 0; left: 0; } /* font-style */ .title { margin: 0 0 20px 0; clear: both; font-family: roc-grotesk, sans-serif; font-weight: 600; ; line-height: 1.15em; text-align: left;} .yellowCirleLeft:before{ content: ""; background: var(--yellowBoost); width: 145px; height: 145px; border-radius: 100%; position: absolute; left: -45px; top: -50px; z-index: -1; } .title_medium{ } .title.souligne{ text-decoration: underline;} .min_title{ font-weight: bold; font-size: 35px; letter-spacing: 0; } .intro h1.title, .intro h2.title { display: block; } .intro p{ font-weight: 500; } p{ letter-spacing: 0; display: inline-block; margin:0; position: relative; color: #000; line-height: 1.3em; padding-bottom: 1.6em; font-size: 16px; font-weight: 400; } a{ transition:all .3s; text-align: left; text-decoration: none; color: #000; } .bold{ font-weight: bold; } p.intro{ font-size: 2vh; text-align: right;} p.exergue{ font-family: roc-grotesk, sans-serif; font-weight: 600; ; font-size: 28px; } .italic{ font-style: italic; } /* utils */ .center{ text-align: center;} .underline{ text-decoration: underline;} .bg_white{ background: #fff; } .bg_yellow{ background: yellow!important; } .bg_grey{ background: #f0f0f0; } .col_moitie{ width: 50%; padding-right: 5%; float: left; } .curve{ width: 100%; pointer-events: none;} .curve.mobile_only { display: none; } .only_on_mobile{ display: none; } .only_on_desktop{ display: block; } .alf_p{ width: 50%; padding-right: 5%; float: left;} .maxWidth{ max-width: var(--maxWidth); margin: 0 auto; } /* /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^/^^ /^^ */ /* MAIN LOADER & CURSOR */ #main_loader { position: fixed; top: 0; left: 0; height: 100vh; width: 100vw; z-index: 999998; } #main_loader .main_loader_wrapper { position: absolute; height: 40px; width: 40px; top: 0; left: 0; right: 0; bottom: 0; margin: auto; transition: .5s ease;} #main_loader.wait .main_loader_wrapper { transform: scale(0); } #main_loader.big .main_loader_wrapper { height: 110vh; width: 110vh; bottom: 10vh; transition: .3s cubic-bezier(.66,-0.35,.57,1.33); } #main_loader .main_loader_wrapper span, #cursor span { position: absolute; top: 0; left: 0; height: 100%; width: 100%; border-radius: 100%; } #cursor { position: fixed; width: 10px; height: 10px; transform: translate(-50%, -50%); overflow: visible; pointer-events: none; z-index: 999999; transition: opacity .3s ease;} #cursor span { border: 5px solid #000; } #cursor span:nth-child(1n+2) { opacity: 0; transition-delay: .3s; transition-property: opacity; } #main_loader .main_loader_wrapper span { transition: transform .3s ease, border .3s ease, opacity .3s ease } #cursor, #cursor span { transition: transform .3s ease, border .3s ease, border-radius .3s ease, opacity .3s ease } #main_loader.loading .main_loader_wrapper, #cursor.loading { animation: rotating 1.2s linear infinite; } #cursor.loading span { opacity: 1; transition-delay: 0; } #main_loader.loading .main_loader_wrapper span:nth-child(1), #cursor.loading span:nth-child(1) { transform: translateX(-100%); } #main_loader.loading .main_loader_wrapper span:nth-child(2), #cursor.loading span:nth-child(2) { transform: translateY(-100%); } #main_loader.loading .main_loader_wrapper span:nth-child(3), #cursor.loading span:nth-child(3) { transform: translateX(100%); } #main_loader.loading .main_loader_wrapper span:nth-child(4), #cursor.loading span:nth-child(4) { transform: translateY(100%); } #cursor.hide { opacity: 0; } /* #cursor.hovering:not(.loading) span { transform: scale(2); border: 2px solid #000; } */ #cursor.hovering:not(.loading) span { transform: scale(5); border: 1px solid #000; } #cursor.mailtoing:not(.loading) span { animation: external_link .6s ease-out infinite normal; } /* TRANSITIONER */ #transitioner { position: fixed; top: 0; left: 0; height: 100vh; width: 100vw; z-index: 1000; pointer-events: none; } #transitioner div { position: absolute; top: 0; left: 0; height: 100vh; width: 100vw; transform: translateY( calc(100vh + 27vw) ); } #transitioner.steady.start div:nth-child(1) { transition: transform 1s ease; } #transitioner.steady.start div:nth-child(2) { transition: transform 1.2s ease; } #transitioner.steady.end div:nth-child(1) { transition: transform 1.2s ease; } #transitioner.steady.end div:nth-child(2) { transition: transform 1s ease; } #transitioner.start div { transform: translateY(0); } #transitioner.end div { transform: translateY( calc(-100vh - 19vw) ); } #transitioner div img { position: absolute; } #transitioner div img:nth-child(1) { bottom: 100vh; } #transitioner div img:nth-child(2) { top: 100vh; } /* fixed ui */ .banner_white{ width: 100vw; height: 180px; z-index: 1; position: absolute; left: 0; top: 0; background: linear-gradient(180deg, white, #ffffff00); } .main_logo { position: absolute; left: 30px; top: 17px; z-index: 100; } .main_logo img{ width: 320px; position: relative; } .menuOpen .main_logo{ opacity: 0; transition: all .3s; } .main_logo.fixme { opacity: 1; transition: all .2s; position: fixed; } /* .logo:hover img{ transform: scale(1.05); transition: all .1s ease-in-out .2s } */ .fixed_bt{ font-family: roc-grotesk, sans-serif; font-weight: 600; ; font-size: 18px; z-index: 10; position: fixed; color:black; } .fixed_bt::after{ content:""; width: 100%; left: 0; position: absolute; bottom: 2px; height: 1px; background: black; } .projets_bt{ transform-origin: left center; left: 40px; top: 50%; transform: translateY(50%) rotate(-90deg); } .knowledge_bt{ transform-origin: right center; right: 40px; top: 50%; transform: translateY(50%) translateX(-0.1em) rotate(90deg);} .language_bt{ right: 40px; bottom: 40px; } .logo_pt{ width: 30px; height: 30px; left: 40px; bottom: 120px; z-index: 100; position: fixed; } .logo_in{ width: 30px; height: 30px; left: 40px; bottom: 80px; z-index: 100; position: fixed; } .logo_insta{ width: 30px; height: 30px; left: 40px; bottom: 40px; z-index: 100; position: fixed; } /* message_cookies */ .box_cookies { position: fixed; z-index: 5; width: 270px; font-size: 0px; padding: 20px; bottom: 20px; left: 4vw; border-radius: 10px; } .box_cookies span { font-size: 12px; } .box_cookies .message_cookies { display: block; clear: both; margin-bottom: 12px; } .box_cookies a { margin-left: 8px; } .box_cookies .bt_cookies { display: inline-block; width: 110px; padding: 8px 0px; margin: 0; border-radius: 5px; text-align: center; } /* burger_bt */ .burger_bt{ z-index: 115; width: 60px; height: 60px; position: fixed; left:calc(100vw - 100px); top: 40px; } .burger_bt div{ box-sizing: border-box; position: absolute; transition: all .1s ease-out; width: 50%; height: 50%;; border-radius: 30px; background: yellow; } .burger_bt div.bulle1{ transform:translate3d(0,0,0) } .burger_bt div.bulle2{ transform:translate3d(100%,0,0) } .burger_bt div.bulle3{ transform:translate3d(0,100%,0) } .burger_bt div.bulle4{ transform:translate3d(100%,100%,0) } .burger_bt:hover div.bulle1{ transform:translate3d(-10%,-10%,0) } .burger_bt:hover div.bulle2{ transform:translate3d(110%,-10%,0) } .burger_bt:hover div.bulle3{ transform:translate3d(-10%,110%,0) } .burger_bt:hover div.bulle4{ transform:translate3d(110%,110%,0) } /* burger_close */ .menuOpen .burger_bt div{ border: 2px solid yellow; transition: all .2s ease-out 0s; } .menuOpen .burger_bt *{ pointer-events: none!important; } .menuOpen .burger_bt div.bulle1{ transform:translate3d(90%,90%,0); } .menuOpen .burger_bt div.bulle2{ transform:translate3d(10%,90%,0); } .menuOpen .burger_bt div.bulle3{ transform:translate3d(90%,10%,0); } .menuOpen .burger_bt div.bulle4{ transform:translate3d(10%,10%,0); } /* menu */ .menu_circle{ transition: transform .5s cubic-bezier(.49,.2,1,.51) .1s; width: 10vw; height: 10vw; transform: translate(110vw, -60vh) scale(3); left: 50%; top: 50%; z-index: 98; border-radius: 100vw; position: fixed; background:var(--coolgrey); } .menuOpen .menu_circle{ transform: translate(-50%,-50%) scale(22); } .menu{ border-radius: 100vw; transform: translate(-50%, -50%); width:70vh; height: 70vh; opacity: 0; display: none; background: white; transition: all .5s cubic-bezier(.49,.2,.25,.94) .5s; z-index: 100; position: fixed; top: 50vh; left: 50vw; } .menu .links{ z-index: 105; height: 70vh; flex-direction: column; display: flex; justify-content: center; align-items: center; } .menu .links a{ font-size: 7vh; width: auto; margin: 0px .3em .15em .3em; overflow: visible; text-transform: lowercase; } .menu .links a:hover{ text-decoration: underline; } .menuOpen .menu{ animation: showMenu .2s ease-out .3s 1 normal forwards; display: block; } .menu .logo { position: fixed; z-index: 115; } .menu .title.all_projects { position: absolute; z-index: 115; left: 50%; transform: translateX(-50%); width: 650px; } .menu .projects_items { z-index: 105; margin:120px auto; width: 900px; } .menu .projects_item{ height: 400px; width: 100%; position: relative; margin-bottom:-80px; } .menu .projects_item .item_txt{ position: absolute; width: 280px; top: 180px; } .menu .projects_item .item_txt h3{ display: block; margin: 0; font-size: 42px; line-height: 1.2em; } .menu .projects_item .item_txt:hover h3{ text-decoration: underline;} .menu .projects_item .item_txt p{ margin: 0; font-size: 18px; max-width: 100%; padding: 0 3px;} .menu .projects_item:nth-child(even) .vignette{ left: 0; right: auto; } .menu .projects_item:nth-child(even) .item_txt{ left: 320px; } .menu .projects_item:nth-child(odd) .vignette{ left:auto; right: 0; } .menu .projects_item:nth-child(odd) .item_txt{ right: 320px; text-align: right } .menu .projects_item:nth-child(odd) .item_txt h3{ text-align: right; } .menu .projects_item:nth-child(odd) .item_txt p{ text-align: right; } .menu .projects_item{ } .menu .menu_appear{ opacity: 0; transition: all .5s ease-out 0s; pointer-events: none; user-select: none; } .menuOpen .menu .menu_appear{ opacity: 1; transition: all 2s ease-out 1s; pointer-events: all; user-select: all; } .menu_footer{ position: fixed; left: 0; right: 0; bottom: 24px; z-index: 110; text-align: center; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .3s ease-out; } .menu_footer a{ text-transform: lowercase; } .menu_footer a:hover{ text-decoration: underline; } .menuOpen .menu_footer{ opacity: 1; pointer-events: auto; transition: opacity .4s ease-out .8s; } /* homepage */ .homepage .video_hero_wrapper{ overflow: hidden; height: calc(110vh); } .homepage .home_header .video_hero{ width: 110vh; height: 110vh; z-index: 12; position: relative; left: 50%; top: 45vh; transform: translate3d(-50%, -50%, 0); border: 1px solid #eee; border-radius: 100%; overflow: hidden;} .homepage .home_header .video_hero video{ height: 100%; width: auto; position: absolute; left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0); } .homepage .home_header .video_hero img{ display: none; z-index: 10; position: absolute; width: 80%; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); max-width: none; } /* hero : images en fondu enchaîné + léger zoom (durées pilotées depuis app.js) */ .homepage .home_header .video_hero .hero_slide{ display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; left: 0; top: 0; z-index: 1; opacity: 0; transform: scale(1); transition: opacity var(--hero-fade, 900ms) ease, transform var(--hero-fade, 900ms) ease; } .homepage .home_header .video_hero .hero_slide.is-active{ opacity: 1; z-index: 2; transform: scale(1.06); transition: opacity var(--hero-fade, 900ms) ease, transform var(--hero-zoom, 6000ms) linear; } @media (prefers-reduced-motion: reduce){ .homepage .home_header .video_hero .hero_slide, .homepage .home_header .video_hero .hero_slide.is-active{ transition: none; transform: none; } } .homepage .titre_projet{ margin-top: 60px; text-align: right; float: right; margin-bottom: -1.6em; z-index: 2; } .homepage .intro { position: relative; margin-top: 60px; margin-bottom: 40px; padding: 40px 0 0px 0; } .homepage .intro .title{ margin-top: .25em; } .homepage .intro .row_condensed { margin-top: 40px; margin-bottom: 0px; margin-bottom: 30px; } .homepage .intro:before{ content: ""; background: var(--coolgrey); height: 100%; width: calc(50% - 460px); position: absolute; left: 0; } .homepage .listing_projets { min-height: 500px; overflow-y: visible; } .homepage .listing_projets .curve{ position: absolute; width: 100%; top: 0; } .homepage .projects_items{ width: 100%; max-width: none; padding: 0;} .homepage .projects_item{ height: auto; width: 100%; position: relative; } .homepage .projects_item .vignette{ width: 100%; height: 40vw; overflow: hidden; } .homepage .projects_item .vignette img{ width: 100%; height: auto; position: absolute; top: 50%; transform: translateY(-50%); } .homepage .projects_item .item_txt{ width: 100%; z-index: 2; display: flex; margin-bottom: 40px; min-height: 100px; justify-content: flex-start; flex-direction: column; align-items: flex-start; } .homepage .projects_item .item_txt .title{ display: block; margin: 10px 0 -7px 0; } .homepage .projects_item .item_txt p{ margin: 0; font-size: 24px; } .homepage .projects_item:nth-child(even) .item_txt{ align-items: flex-end; } .homepage .projects_item:nth-child(even) .item_txt .yellowCirleLeft:before { left: auto; right:-35px; } .homepage .projects_item .vignette:hover + .item_txt h3, .homepage .projects_item .item_txt:hover h3{ text-decoration: underline;} .homepage .puce_down { z-index: 13; position: absolute; width:40px; height: 20px; background: yellow; display: inline-block; left: calc(50% - 20px ); border-bottom-left-radius: 260px; border-bottom-right-radius: 260px; } .homepage .puce_down1 { animation: puce_down 2s .2s ease-out infinite normal forwards; top: 92vh} .homepage .puce_down2 { animation: puce_down 2s .6s ease-out infinite normal forwards; top: calc(92vh + 20px) } .homepage .curve{ z-index: -1;} .homepage .swiper-container { background-image: url('../images/bg_slider_home.png'); background-size: 100% 100%; ; background-repeat:none;} .homepage .swiper-container img{ width: 100%; } .homepage .home_bt_projects{ height: 440px; margin-top: -140px; display: flex; flex-direction: column; justify-content: center; } .homepage .home_bt_projects .maxWidth{ display: flex; width:100% ; justify-content: right; font-family: roc-grotesk, sans-serif; font-weight: 600; ; } .homepage .home_bt_projects .link{ z-index: 10; text-align: right; text-decoration: underline; line-height: 1.2em; } .homepage .home_bt_projects .link:before{ z-index: -1; content:""; background: white; width: 1.8em; height: 1.8em; position: absolute; right: -0.5em; bottom: -0.5em; border-radius: 100%; } .homepage .home_bt_projects:before{ content:""; background: var(--yellowBoost); height: 100%; position: absolute; right: 0; width:calc(50% - 350px); } .about .logos_wrapper{ padding-top: 60px; padding-bottom: 60px; } .homepage .logos_wrapper .row, .about .logos_wrapper .row{ margin: 0px auto; } .homepage .logos_wrapper .row .title, .about .logos_wrapper .row .title { max-width: 60%; margin-top: 1em; margin-bottom: 0em; } .homepage .logos_wrapper .row .thumbs, .about .logos_wrapper .row .thumbs { width: 100%; margin-top: 60px; display: flex; flex-wrap: wrap; justify-content: center; } .homepage .logos_wrapper .row .thumbs img, .about .logos_wrapper .row .thumbs img { height: 95px; margin: 5px; } .homepage .clients_intro , .homepage .network_intro, .about .clients_intro , .about .network_intro{ padding: 0 5px; max-width: 840px; } /* page project */ .project .header_project { height: 55vw; overflow: hidden; background: white; } .project .header_project .parallax_01{ height: 55vw; } .project .header_project .cover_img{ position: absolute; width: 100%; left: 0; top: 50%; transform: translateY(-50%);} .project .header_project .curve{ position: absolute; bottom: -1px; } .project .intro{ margin-top: -80px; padding-bottom: 80px; } .project .intro .first{ padding-bottom: 20px; margin-top: 20px; max-width: 50%; z-index: 1; } .project .intro .first h3{ z-index: 2; line-height: 1.15em; margin-bottom: 0em; } .project .intro .first p{ z-index: 2; } .project .intro .first:before{ content: ""; background: var(--yellowBoost); width: 155px; height: 155px; border-radius: 100%; position: absolute; left: -55px; top: -40px; } .project .intro .second{ padding: 20px 0; width: 100%; display: flex; flex-wrap: nowrap; justify-content: space-between; } .project .intro .second .col{ width: 48%; ; } .project .min_title{ font-family: roc-grotesk; } .project .visuels_project{ padding-bottom: 60px; } .project .visuels_project .curve{ position: absolute; top: -100px; height: 1100px; width: 100%; } .project .image_bandeau{ height: 55vw; overflow: hidden; } .project .image_bandeau .parallax_01{ height: 55vw; } .project .image_bandeau .cover_img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate3d(-50%,-50%, 0); overflow: hidden; } .project .text_central { overflow: hidden; } .project .text_central p{ font-weight: 600; padding: 280px 0; z-index: 2; font-size: 2.2vw; font-family: "roc-grotesk"; } .project .text_central:before{ content: ""; z-index: 1; width: 360px; height: 360px; border-radius: 360px; background: var(--yellowBoost); position: absolute; left: 50%; transform: translateX(-700px); top: 180px; } .project .visuels_packshots { padding-bottom: 100px; padding-top: 60px; } .project .go_contact{ background: var(--yellowBoost); } .project .visuel_row img{ object-fit: cover; min-height: 100%; width: 100%; position: absolute; top: 50%; transform: translateY(-55%); z-index: 1; } .project .visuel_rowSize{ width: 1060px; height: 600px; margin: 0; overflow: hidden; } .project .visuel_row_deux_cols{ width: 500px;float: left;; height: 280px; overflow: hidden; margin: 60px 0; } .project .visuel_row_deux_cols:nth-child(odd){ float: right; } .project .visuel_row_trois_cols{ width: 31%; float: left; height: 200px; overflow: hidden; margin: 60px 1% ; } .project .next_project{ position: relative; display: block; height: 25vw; overflow: hidden; bottom: 0; width: 100%; z-index: 2; background: none; } .project .next_project .tirette { position: absolute; top: 0px; left: 50%;transform: translateX(-50%); height: 140px; width: 280px; background: yellow; display: inline-block; border-bottom-left-radius: 280px; border-bottom-right-radius: 280px; } .project .next_project .next_txt{ position: absolute; top: 10px; left: 50%;transform: translateX(-50%); width: 50%; text-align: center; text-transform: uppercase; } .project .next_project .next_title{ font-size: 60px; ; font-family: roc-grotesk, sans-serif; font-weight: 600; ; line-height: 1.15em; display: inline-block; position: absolute; top: 50px; left: 50%;transform: translateX(-50%); width: 50%; text-align: center; } .project .encart_transition { display: none; position: fixed; background: white; } .project .encart_transition .curve{ transition: all 5s; position: absolute; bottom: -300px; } .project .encart_transition.alive { display: block; } .project .encart_transition.alive .curve{ bottom: -1px; z-index: 1;} .project .encart_transition .cover_img_container{ width: 100%; height: 55vw; overflow: hidden; top: 0} .project section { background: white } .project .stamp { height: 25vw; position: fixed; z-index: -1; bottom: 0; } .project .stamp .cover_img{ position: absolute; width: 100%; left: 0; top: 50%; transform: translateY(-50%);} /* PROJETS */ .projects .headline{ height: 250px; } .projects .headline .title { text-align: center; font-size: 5vw; position: absolute; bottom: 0; z-index: 2; left: 50%; transform: translateX(-50%); } .projects .projects_cloud{ margin-top: 120px; } .projects .isotope_grid .grid-sizer{ width: var(--gridMosaique); } .projects .isotope_grid .petit{ width:var(--gridMosaique); height: calc(var(--gridMosaique) * 0.75); } .projects .isotope_grid .grand{ width:calc(var(--gridMosaique) * 2 );; height: calc(var(--gridMosaique) * 1.5); } .projects .isotope_grid .horizontal{ width:calc(var(--gridMosaique) * 2 );; height: calc(var(--gridMosaique) * .75); } .projects .isotope_grid .vertical{ width:var(--gridMosaique); height: calc(var(--gridMosaique) * 1.5); } .projects .isotope_grid .project_item{ overflow: hidden; text-align: center ; } .projects .isotope_grid .project_item p{text-align: center ;} .projects .isotope_grid .project_item img{ height: 100%; width: 100%; object-fit: cover; } .projects .isotope_grid .vignette{ position: relative; padding: 1.5vw; width:100%; height:100% } .projects .isotope_grid .short_title{ padding: 0 5em; line-height: 1.25em; text-align: center; font-family: roc-grotesk, sans-serif; } .projects .isotope_grid .headline{ text-align: center; } .projects .isotope_grid .project_item .hoverContent:before{ content: ""; position: absolute; transition: all 1.8s; width: 100%; height: 100%; background: white; opacity: 0; } .projects .isotope_grid .project_item:hover .hoverContent:before{ opacity: .9; } .projects .isotope_grid .project_item .hoverContent{ opacity: 0; transition: all .3s .3s; transform: scale(1.1); flex-direction: column; justify-content: center; align-items: center; position: absolute; top:0; left: 0; display: flex; height: 100%; width: 100%; } .projects .isotope_grid .project_item:hover .hoverContent{ opacity: 1; transform: scale(1); } .projects .filters_projects{ width: 90%; display: flex; justify-content: center; position: fixed; top: 300px; left: 50%; transform: translateX(-50%) translateY(0px); z-index: 4;} .projects .filters_projects .link{ font-weight: 600; padding: 2em; font-family: "roc-grotesk"; font-size: 15px; } .projects .filters_projects .link.active:before{ width: 4em; height: 4em; top: 0; } .projects .filters_projects .link:before{ content: ""; transition: all .17s; background: var(--yellowBoost); width: 3em; height: 3em; border-radius: 100%; position: absolute; left: 0em; top: 1em; z-index: -1; } .projects .filters_projects .link:hover:before { top: 0; } .projects .first_project_item{ padding-bottom: 80px; } .projects .first_project_item .title{ z-index: 4; margin: 0; } .projects .first_project_item p{ z-index: 4; transform: translateY(-1em); } .projects .first_project_item .yellowCirleLeft:before { width: 135px; height: 135px; } /* ABOUT PAGE */ .about .header_project { background: #f0f0f0; padding: 0; height: 100vh; } .about .go_contact{ background: var(--yellowBoost); } .about .header_project .curve { position: absolute; bottom: -1px; z-index: 2; } .about .headline{ z-index: 3; } .about .headline article { display: inline-block;; position: relative; left:50%; text-align: right; transform: translateY(-50%);} .about .headline article .title { position: relative; font-size: 5vw; } .about .headline img { position: absolute; left: 0; bottom: -1px; } .about .headline article p.intro { display: block; font-size: 20px; padding: 0 2.6vw; padding-bottom: 40px; width: 100%; } .about section.intro { z-index: 3; padding:80px 0; background: #f0f0f0; } .about section.intro .row_condensed{ margin: 0; } .about .members { padding: 120px 0 0 ; background: #f0f0f0; display: flex; } .about .members .row{ padding-bottom: 80px; display: flex; flex-wrap: wrap; flex-direction: row; justify-content: flex-start; } .about .members article { margin: 0 100px; display: flex; flex-direction: column; align-content: center; width: 320px; align-items: center; vertical-align: top; position: relative; } .about .members article:nth-child(odd){ margin-top: 10px; } .about .members article:nth-child(even){ margin-top: 100px; } .about .members article .member_picture { height: 290px; width: 200px; object-fit: cover; } .about .members article .member_picture img{ height: 290px; width: 200px; object-fit: cover; } .about .members article .name { padding-top: 10px; min-height: 2.5em;left: 50%; width: 320px; transform: translate(-50%, 0); font-size: 60px; font-family: roc-grotesk, sans-serif; font-weight: 600; ; line-height: 1.2em; } .about .members article .name span {position: absolute; display: block; width: 100%; white-space: nowrap; line-height: 1em; } .about .members article .name span:nth-child(2n+1) { top: 0.3em; left: 0; text-align: left; } .about .members article .name span:nth-child(1n+2) { top: 1.3em; right: 0; text-align: right; } /* .about .logos .thumbs{ padding-bottom: 100px; transform: translateY(-40px); } */ .about .logos .row .title { width: 60%; transform: translateY(-0.9em); } .about .logos .row .thumbs { width: 100%; margin-top: 60px; display: flex; flex-wrap: wrap; justify-content: center; } .about .logos .row .thumbs img { height: 90px; margin: 10px; } /* KNOWLEDGE PAGE */ .knowledge .knowledges { } .knowledge .knowledges.bottom-space { padding-bottom: 80px} .knowledge .knowledges .curve { position: absolute; top: -1px; } .knowledge .intro .row .intro_wrapper{ max-width: 600px; } .knowledge .intro .row .intro_wrapper p{ padding-right: 2em; } .knowledge .knowledges article { display: flex; flex-direction: row; justify-content: flex-start; margin-top: 60px; } .knowledge .knowledges article:nth-child(2n+1) { flex-direction: row-reverse; } .knowledge .knowledges article .image, .knowledge .knowledges article .text { } .knowledge .knowledges article .image { width: calc( 50% + 60px); height: 34vw; } .knowledge .knowledges article img { display: block; width: 100%; height: 100%; object-fit: cover; } .knowledge .knowledges article .knowledge_title{ margin-bottom: 1em; font-size: 34px; line-height: 1em; font-weight: 600;} .knowledge .knowledges article .text { width: calc(100% - 490px); margin: 80px; max-width: 380px; font-size: .9em; } .knowledge .knowledges article .text p { padding-bottom: .1em; } .knowledge .knowledges article .text ul{ margin-top: 30px;; display: flex; flex-wrap: wrap; flex-direction: column; justify-content: flex-start; } .knowledge .knowledges article .text li { letter-spacing: -0.03em; list-style: none; width: 45%; font-size: 18px; font-weight: 600; opacity: 0; padding: 0; margin: 0; transform: translateX(2em); } .knowledge .knowledges article.appear .text li { opacity: 1; transform: translateX(0); } .knowledge .knowledges article .text li:nth-child(10n+1) { transition: all .3s ease 0.70s; } .knowledge .knowledges article .text li:nth-child(10n+2) { transition: all .3s ease 0.75s; } .knowledge .knowledges article .text li:nth-child(10n+3) { transition: all .3s ease 0.80s; } .knowledge .knowledges article .text li:nth-child(10n+4) { transition: all .3s ease 0.85s; } .knowledge .knowledges article .text li:nth-child(10n+5) { transition: all .3s ease 0.90s; } .knowledge .knowledges article .text li:nth-child(10n+6) { transition: all .3s ease 0.95s; } .knowledge .knowledges article .text li:nth-child(10n+7) { transition: all .3s ease 1.00s; } .knowledge .knowledges article .text li:nth-child(10n+8) { transition: all .3s ease 1.05s; } .knowledge .knowledges article .text li:nth-child(10n+9) { transition: all .3s ease 1.10s; } .knowledge .knowledges article .text li:nth-child(10n+10) { transition: all .3s ease 1.15s; } .knowledge .more_informations { font-size: 16px; width: 100%; padding: 80px 0; margin-top: 60px; display: flex; } .knowledge .more_informations .img_container { width: 35%; float: left; margin-top: -10px; margin-right : 20px; text-align: right; padding-right: 20px;} .knowledge .more_informations .img_container img{ width: 140px; } .knowledge .more_informations p { max-width: 560px; } .knowledge .white_book { padding-top: 80px; } .knowledge .white_book .curve { position: absolute; top: -1px; left: 0; } .knowledge .white_book .iframe_whitebook { width: 100%; height: 55vw; max-height: 740px; margin: 60px auto 80px auto; border: 0; } /* CONTACT PAGE */ .contact .infos { position: absolute; z-index: 2; bottom: 0; background: var(--coolgrey); min-height: 260px; } .contact .infos article { min-height: 260px; padding: 40px 0 60px 0; display: flex; justify-content: center; flex-direction: column; } .contact .infos article .punchline { font-size: 100px; line-height: 1.2em; font-family: roc-grotesk, sans-serif; font-weight: 600; ; pointer-events: none; } .contact .infos .mail_button { align-items: center; display: flex; flex-direction: column; justify-content: center; transition: transform .17s cubic-bezier(0, 0, 0, 1.76); position: absolute; bottom: 120px; left: 60%; height: 260px; width: 260px; border-radius: 100%; line-height: 260px; text-align: center; font-size: 30px; font-family: roc-grotesk, sans-serif; font-weight: 600; ; } .contact .infos .mail_button:hover { transform: scale(1.1); } .contact .infos .mail_button span { line-height: 1.5em; display: block; padding-top: 20px; } .contact .infos .mail_button:hover span { transform: scale(0.95); transition: all .1s ease-in-out .2s; } .contact .infos .denomination{ font-size: 20px; } .contact .infos .mail_button img{ width: 25%; } .contact .address{ display: flex; width: 500px; font-size: 15px; font-family: skolar-sans-latin, sans-serif; font-weight: 700; justify-content: space-between; } /* LEGALS PAGE */ .legals .text img.curve { position: absolute; top: 0; transform: translateY(-100%); } .legals .text .row { transform: translateY(-12vw); z-index: 10; } .legals .text .row .legal_notice { padding-top: 8vw; padding-bottom: 8vw; } .legals .text .row .legal_notice p { display: block; margin-bottom: 1.2em; } .legals .text .row .legal_notice a {text-decoration: underline; } /* go_contact */ .go_contact { padding: 40px 0; background: var(--coolgrey); } .go_contact img.curve { position: absolute; top: 1px; transform: translateY(-100%); } .go_contact .row { width: calc(100vw - 80px); max-width: 1400px; display: flex; align-items: center; align-content: center; min-height: 280px; } .go_contact .col1 { float: left; width: 50%; position: relative; display: inline-block; } .go_contact .col2 { position: absolute; display: inline-block; width: 50%; right: 40px; } .go_contact .punshline { margin: 0 0 20px 0; font-size: 40px; font-weight: bold;line-height: 1.15em; display: inline-block; text-align: left;} .go_contact address { font-style:normal;; margin: 0 0 20px 0; font-size: 22.6px; font-family: "roc-grotesk"; font-weight: 600;; line-height: 1.35em; display: inline-block; text-align: left;} .go_contact address a { text-decoration: underline; } .go_contact .circle { transition: transform .17s cubic-bezier(0, 0, 0, 1.76); position: relative; top: 0px; margin-right: 295px; float: right;border-radius: 100%; width: 280px; height: 280px; background: white; display: inline-block; } .go_contact .circle:hover { transform: scale(1.1)} .go_contact .circle span { position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%,0); font-family: roc-grotesk, sans-serif; font-weight: 600; ; line-height: 1.1em; width: 100%; text-align: center; } .go_contact .top { position: absolute; top: 0px; right: 0px;height: 140px; width: 280px; background: white; display: inline-block; border-bottom-left-radius: 140px; border-bottom-right-radius: 140px; } .go_contact .bottom { position: absolute; top: 140px; right: 0px; height:140px; width: 280px; background: white; display: inline-block; border-top-left-radius: 280px; border-top-right-radius: 280px; } /* MAINTENANCE PAGE */ html.cursor_allowed * { cursor: auto!important; } .maintenance .logo { pointer-events: none; } .maintenance { background: linear-gradient( #f0f0f0 50%, yellow 50% ); } .maintenance .center { top: 50%; width: 50vw; transform: translateY(-50%); } .maintenance .curve { position: absolute; bottom: 50vh; } /* /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^/^ /^ /^^ /^^ /^^ /^^ /^/^ /^ /^/^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^ /^^ /^^ /^^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^^^ /^^ /^^ /^^ /^^^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^ /^^ /^^ /^ /^^ /^^ /^^^ /^^ /^^ /^^^ /^^^^ /^^ /^^ /^^^^ */ @media (max-width: 1481px){ .go_contact .row { width: calc(100vw - 80px); min-height: calc((100vw - 80px) / 5); } .go_contact .punshline { font-size: calc((50vw - 40px)/15); } .go_contact address { font-size: calc((50vw - 40px)/31); } .go_contact .col2 { float: none; width: 50%; position: absolute; right: 40px; } .go_contact .circle { width: calc((100vw - 80px) / 5); height: calc((100vw - 80px) / 5); margin-right: calc((100vw - 80px) / 4.75); } .go_contact .circle span { font-size: calc((100vw - 80px) / 40); } .go_contact .top { width: calc((100vw - 80px) / 5); height: calc((100vw - 80px) / 10); border-bottom-left-radius: calc((100vw - 80px) / 10); border-bottom-right-radius: calc((100vw - 80px) / 10); } .go_contact .bottom { top: calc((100vw - 80px) / 10); width: calc((100vw - 80px) / 5); height: calc((100vw - 80px) / 10); border-top-left-radius: calc((100vw - 80px) / 10); border-top-right-radius: calc((100vw - 80px) / 10); } } /* /^^ /^^ /^^ /^ /^^ /^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^ /^^ /^^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^^^ /^^ /^^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^ /^^^ /^ /^^ /^^ /^^ /^^ /^^ /^^^ /^^^^ */ @media (max-width: 1000px){ :root { --maxWidth : 90vw; --gridMosaique: 50vw; --fontSize_unit: .15vw; } .main_logo img { width: 180px; position: relative; } .txt_xl { font-size: calc( var(--fontSize_unit) * 62); } .txt_ml { font-size: calc( var(--fontSize_unit) * 42); } .txt_m { font-size: calc( var(--fontSize_unit) * 38); } .txt_ms { font-size: calc( var(--fontSize_unit) * 36); } html * { cursor: auto!important; } .hoverable, .hoverable * { cursor: pointer!important; } #cursor{ display: none; } .curve.mobile_only { display: block; } .curve.desktop_only { display: none; } .mobile_bg_white{ background: #fff; } .mobile_bg_yellow{ background: yellow; } .mobile_bg_grey{ background: #f0f0f0; } .display_size { height: 80vw; max-height: 100vh; } .cover_img { height: 80vw; max-height: 100vh; pointer-events: none; } main.project .cover_img { transform: translateY(-12.5vw); } #main_loader.big .main_loader_wrapper { height: 120vw; width: 120vw; left: 50vw; right: 0; top: 10vw; bottom: calc(100vh - 10vw); transform: translate(-50%, 50%); } .swiper-button-prev{ left: 16vw; background: none; width: 28px; top: 100vw; bottom: auto; } .swiper-button-next{ right: 16vw; background: none; width: 28px; top: 100vw; bottom: auto; } .col_moitie{ width: 100%; padding-right: 0%; float: none;; } .alf_p{ width: 100%; padding-right: 0%; float: none;; } .row_condensed, .row { padding: 0 5vw; } .main_menu .nav_link{ margin: 8px 0; height: auto;} .language_bt{ right: 10px; bottom: 10px; } .min_title { } .project .intro .first{ max-width: 100%; } .project .intro .first h3{ font-size: calc( var(--fontSize_unit) * 62); } .logo_pt{ width: 18px; height: 18px; left: auto; right: 10px; bottom: 110px; } .logo_in{ width: 18px; height: 18px; left: auto; right: 10px; bottom: 80px; } .logo_insta{ width: 18px; height: 18px; left: auto; right: 10px; bottom: 50px; } .menu .links a { font-size: 5vh; margin: .25em 0; } .projets_bt{ display: none; } .knowledge_bt{ display: none; } .logo{ height: 80px; } .logo img { width: 180px; top: 16px; left: 10px; } p { font-size: 3.5vw; } .title_smallOnMobile { font-size: 4vw; } .burger_bt { position: fixed; width: 10vw; height: 10vw; left:85vw; top: 5vw; } .homepage .video_hero_wrapper{ height: calc(110vh); } .homepage .logos_wrapper .row .thumbs img, .about .logos_wrapper .row .thumbs img{ width: 25vw; margin:2.5vw; height: auto; } .homepage .logos_wrapper .row .thumbs, .about .logos_wrapper .row .thumbs{ margin-top: 0; } .homepage .home_header { height: 120vw; } .homepage .titre_projet{ } .homepage .home_header .video_hero{ width: 110vw; height: 110vw; top: 23vw; transform: translate3d(-50%, 0, 0); } .homepage .home_header .video_hero video{ height: 120vw; width: auto; } .homepage .home_header .video_txt{ padding-right: 5vw; width: 100%; margin-left: 0; margin-top: 140vw; } .homepage .home_header .video_txt .text{ float: right; } .homepage .home_bt_projects { height: 380px; } .homepage .projects_item .item_txt p{ font-size: 18px; } /* .homepage .projects_item{ height: 120vw; width: 100%; position: relative; margin-top:-40px; } .homepage .projects_item .vignette{ position: absolute; width: 110vw; height: 110vw; overflow: hidden;} */ /* .homepage .projects_item .item_txt{ position: absolute; right: 5vw!important; width: 90vw; padding: 0 5vw; top: 100px; text-align: center!important; left: 0!important; right: 0!important; margin: auto; } .homepage .projects_item .item_txt .title, .homepage .projects_item .item_txt p { text-align: center!important; left: 0!important; right: 0!important; margin: auto; display: block; } .homepage .projects_item .item_txt .title{ font-size: 10vw; } .homepage .projects_item .item_txt p { font-size: 32px; } */ .homepage .home_bt_projects:before { width: calc(50% - 100px); } .homepage .swiper-container { width: 100%; height: auto; overflow:hidden;} .homepage .swiper-slide { overflow-x: visible;; height: 120vw;} .homepage .swiper-slide .projects_item{ width: 110vw; position: absolute; left: -5vw; margin-top: 0; } .homepage .home_header .video_txt .title{ width: 100%; } .swiper-pagination-bullet-active{ background: white; } /* .homepage .home_bt_projects{ left: -5vw; margin: 0; background: white; position: absolute; width: 110vw; height: 110vw; } .homepage .home_bt_projects { font-size:44px } */ .homepage .titre_projet{ width: 100% } .homepage .puce_down { display: none; } .only_on_mobile{ display: block; } .only_on_desktop{ display: none; } .menuOpen .menu_circle{ transition: transform .6s ease-out; } .menuOpen .menu .menu_appear{ transition: all 1s ease-out .4s; } .menu .top_links { margin: 30px auto 30px auto; } .menu .top_links .title{ font-size: 6vw; text-decoration: underline; } .menu .title.all_projects { display: none; } .menu .projects_item { height: 90vw; transform: none; margin-bottom: 0px; margin-top: 10vw; } .menu .swiper-slide { width: 100vw; overflow: hidden;} .menu .top_links .puce{ display: none; } .menu .top_links{ text-align: center; } .menu .top_links a{ width: 100%; text-align: center;} .menu .swiper-container {z-index: 105; position: relative; width: 100%; } .menu .projects_item:hover .item_txt h3{ z-index: 6; text-decoration: none; } .menu .projects_item .vignette { z-index: 120; width: 76vw; height: 76vw; position: absolute; left: 12vw!important; } .menu .projects_item .vignette:hover { transform: scale(.9); } .menu .projects_item .item_txt{ font-size: 6vw; z-index: 150; padding: 0; text-align: center!important; right: auto; width:100%; top: 65vw; left: 0; } .menu .projects_item .item_txt h3{ z-index: 150; clear: both; display: block; font-size: 6vw; text-align: center; float: none!important; width:100%; padding: 0 10%; } .menu .projects_item .item_txt p{ text-align: center!important; width: 100% } .menu .swiper-button-prev{ top: 28vh; left: 7vw; } .menu .swiper-button-next{ top: 28vh; right: 7vw; } .menu .curve1 { top: 32%; height: 70vw; } .menu .curve2 { top: 40%; height: 70vw; } .menu .projects_item .item_txt h3 { width:100%; padding: 0 10%; text-align: center!important; } .project .visuel_rowSize{ width: 100%; height: 60vw; margin: 20px 0 } .project .visuel_row_deux_cols{ width: 100%; height: 60vw; margin: 20px 0 } .project .visuel_row_trois_cols{ width: 100%; height: 60vw; margin: 20px 0 } .project .next_project{ height: 45vw; } .project .next_project .tirette { height: 14vw; width: 28vw; border-bottom-left-radius: 14vw; border-bottom-right-radius: 14vw; } .project .next_project .next_txt{ font-size: 2vw } .project .next_project .next_title{ font-size: 4vw; top: 34px; width: 36%; } .project .intro{ margin-top: 0; padding-bottom: 0; } .project .text_central p { padding: 80px 0; font-size: 24px; } .project .text_central:before { transform: translateX(-360px); top: -140px; } .project .intro .first{ width: 100%; } .about .header_project{ height: 100vh; } .about .header_project .cover_img { display: block; height: 100vh;} .about .headline { padding: 3vw 0 0vw 0; } .about .headline article { display: block; left: 0; right: 0; width: 80vw; width: fit-content; margin: auto; padding-bottom: 15vw; transform: none; } .about .headline article .title { position: relative; transform: translateX(-50%); left: 50%; margin: 0; font-size: 10vw; text-align: center; white-space: nowrap; } .about .headline article p.intro { position: absolute; padding: 0 5.3vw; font-size: 3vw; } .about .members { padding: 0px 0 80px 0; } .about .members .row { display: flex; flex-direction: column; } .about .members .row article { float: none; transform: translateY(0); margin: 0; width: 100%; padding-top: 0px; } .about .members .row article:last-child { margin-bottom: 0; } .about .members article .bubbles { top: 10vw; left: 11vw; height: 9vw; width: 9vw; } .about .logos { padding: 5vw 0 10vw 0; } .about .logos .row .title { } .about .logos .row .title{ width: 100%; } .about .logos .row .thumbs { width: 100%; } .about .logos .row .thumbs img { height: 13vw; margin: 1vw; } .about .logos .row .thumbs{ margin-top: 30px; margin-bottom: 30px; } .about .members article .bubbles span{ background: var(--coolgrey); } .about section.intro:before { top: 70px; } .about .members article .name{ font-size: 50px; } .about .members article p{ padding: 0; margin: 0; width: 100%; } .about .members article .member_picture { height: 220px; margin-top: 30px; } .about .members article .member_picture img{ height: 220px; } .about .members article .name{ width: 300px; } .knowledge .knowledges article{ width: 100%; font-size: 16px;; } .knowledge .knowledges article .image { width: 100%; height: 70vw; } .knowledge .knowledges article .text { width: 65vw; margin: auto; font-size: 1.2em; } .knowledge .knowledges article .text h3 { margin: 20px auto; } .knowledge .knowledges article, .knowledge .knowledges article:nth-child(2n+1){ flex-direction: column; } .knowledge .more_informations { font-size: 3.2vw; margin: 15vw 5vw 5vw 5vw; width: 90vw; } .knowledge .white_book .iframe_whitebook { margin-top: 20px; height: 65vw; } .knowledge .knowledges article .text { width: 100%; } .knowledge .knowledges article .text p { font-size: 15px; } .knowledge .knowledges article .text li { font-size: 15px; } .knowledge .knowledges article .text ul { flex-direction: row; } .contact{ height:100vh } .contact .header_project{ height: calc(100vh - 360px); } .contact .infos .mail_button{ top: calc(100vh - 490px); height: 260px; width: 260px; left: calc( 50% - 130px); position: fixed; transform: scale(.6); } .contact .cover_img{ height: calc(100vh - 360px); } .contact .infos article .punchline{ font-size: 50px; } .contact .address{ flex-direction: column; } .contact .infos article{ height: 340px; padding: 20px 0; justify-content: flex-end; } .contact .infos{ background: white; min-height: 360px; padding-top: 0px;} .contact .infos .mail_button{ } .contact .cover_img { height: 100%; max-height: 100vh; pointer-events: none; } .go_contact .col1{ width: 100%; } .go_contact .col2{ width: 600px; margin: 0 auto; float: none; } .go_contact .punshline{ font-size: calc((50vw - 40px)/7.5); text-align: center; margin-bottom: 2vw; width: 100%; display: block; } .go_contact .col2 { float: none; width: auto; position: relative; right: auto; padding-top: 4vw; } .go_contact .row{ flex-direction: column; width: 100%; text-align: center; padding-bottom: 0; } .go_contact address{ font-size: calc((50vw - 40px)/15.5); text-align: center; width: 100%; display: block; } .go_contact .top{ float: right; top: 4vw; width: calc((100vw - 80px) / 2.5); height: calc((100vw - 80px) / 5); border-bottom-left-radius: calc((100vw - 80px) / 5); border-bottom-right-radius: calc((100vw - 80px) / 5); } .go_contact .circle { float: left; width: calc((100vw - 80px) / 2.5); height: calc((100vw - 80px) / 2.5); border-radius: 100%; margin-right: calc((100vw - 80px) / 2.375); } .go_contact .circle span { font-size: calc((100vw - 80px) / 20); } .go_contact .bottom { top: auto; bottom: 0; width: calc((100vw - 80px) / 2.5); height: calc((100vw - 80px) / 5); border-top-left-radius: calc((100vw - 80px) / 5); border-top-right-radius: calc((100vw - 80px) / 5); } .projects .filters_projects { width: 90%; flex-wrap: wrap; position: relative!important; top: 0!important; } .projects .filters_projects .link { font-size: 10px; } .projects .projects_cloud{ margin-top: 20px; } .projects .headline .title { font-size: 10vw; } .projects .first_project_item .title{ font-size: 6vw; } .projects .isotope_grid .project_item .hoverContent{ display: none; } } /* /^^ /^ /^/^ /^ /^^ /^^ /^^ /^ /^^ /^^ /^ /^^ /^ /^^ /^^ /^^ /^^ */ .appear_on_scroll{ opacity: 0; } .menu .appear_on_scroll{ opacity: 1; } .appear_on_scroll.appear{ animation: fadeIn 1s .5s ease-out 1 normal forwards; } /* /^^ /^^ /^^ /^ /^^ /^^ /^^ /^^ /^^ /^/^ /^ /^ /^^^ /^^ /^^^ /^^ /^^ /^^ /^^^^ /^^ /^^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^ /^^ /^ /^^ /^^ /^/^^ /^^^^^ /^^ /^^^ /^^ /^^ /^^ /^^ /^^ /^ /^^ /^^^^^ /^^ /^^^ /^^ /^^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^ /^^ /^ /^^ /^^ /^^ /^^^^ /^^ /^^ /^^^ /^^ /^^^ /^^^ /^ /^^ /^^^^ /^^ /^^ /^^ */ @keyframes showMenu{ 0% { display: block; opacity: 0; transform: translate(-50%, -50%) scale(0); } 100% { display: block; opacity: 1; transform: translate(-50%, -50%) scale(1); } } @keyframes fadeOut{ to { opacity: 0; } } @keyframes fadeIn{ to { opacity: 1; } } @keyframes puce_down{ 0% { opacity: 0; transform: translate3d( 0, -1vh,0 ) } 30% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; transform: translate3d(0, 1vh,0 ) } } @keyframes external_link{ 0% { border: 5px solid #000; transform: scale(1) } 50% { border: 2px solid #000; transform: scale(2) } 100% { border: 5px solid #000; transform: scale(1) } } @keyframes rotating { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^ /^^ /^^^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^ /^^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^^ /^^ /^^ /^^/^^ /^^ */ .debugmode div, .debugmode header, .debugmode footer, .debugmode main, .debugmode section{ border: 1px dotted rgba(0,255,0,0.2) } .debugmode h1, .debugmode h2, .debugmode h3, .debugmode p, .debugmode ul, .debugmode li, .debugmode a{ border: 1px dotted rgba(0,0,0,0.2) }