/* CSS by Manu LECHAT https://e-lechat.com */ /* /^^ /^^ /^^ /^/^ /^ /^^ /^^ /^ /^^ /^^ /^^ /^ /^^^ /^^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^ /^^ /^ /^ /^^ /^^ /^^ /^^^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^ /^^ /^^ /^^ /^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^^ /^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ */ @font-face { font-family: "font_1"; src: url("../fonts/geomanist-regular.ttf") format('truetype') } @font-face { font-family: "font_2"; src: url("../fonts/geomanist-black.ttf") format('truetype') } /* /^^ /^^ /^^ /^ /^^^ /^^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^/^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^^^ /^^ */ :root { --font_1 : "font_1"; --font_2 : "font_2"; --grid_unit: 40px; --w_wrapper: calc(1200px + var(--grid_unit) *2); --mozaic_unit: 23vw; --fontSize_unit: 10px; --color_txt : #2F2F3D; --color_txt_alt : #2F2F3D; --color_bg: #F6F6F6; } /* /^^ /^^ /^ /^^ /^/^ /^ /^^ /^^ /^^ /^/^ /^ /^^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^^ /^^ /^^ /^^ */ /* titles */ .txt_s { font-size: calc( var(--fontSize_unit) * 1.1) ; } .txt_m { font-size: calc( var(--fontSize_unit) * 1.8); } .txt_l { font-size: calc( var(--fontSize_unit) * 2.8); } .txt_xl { font-size: calc( var(--fontSize_unit) * 3.5); } .txt_xxl { font-size: calc( var(--fontSize_unit) * 3.8); line-height: 1.23em!important; } .regular{ font-family: var(--font_1); } .medium{ font-family: var(--font_1); } .bold{ font-family: var(--font_2); } .font2{ font-family: var(--font_2); font-weight: bolder; letter-spacing: 0.05em; } .center{ text-align: center; } strong{ font-family: var(--font_1); } .maj{ text-transform: uppercase; } /* /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^/^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^ /^^ /^^^ /^^ /^^ /^^/^^ /^^ /^^ */ ::selection { background-color: #4d84f1; opacity: 0.5; transition: all .3s; ; color: #fff; text-shadow: none; } * { box-sizing: border-box; outline: none; } .border *{ border:1px dotted cyan } html{ top:0; left: 0; margin: 0; padding: 0; width:100%;-webkit-font-smoothing: antialiased; box-sizing: border-box; position: relative; text-rendering: optimizeLegibility; } body{ /*transition: all .3s .3s; */ font-size:1em; line-height: 1.35em; overflow-x: hidden; background-color: var(--color_bg); font-family: var(--font_1); width: 100vw; overflow-x: hidden; color: var(--color_txt); margin: 0; padding: 0; top:0; left: 0; } /* background-image: url("../images/bg.png"); background-attachment: fixed; background-size: cover; background-position: right; background-repeat: no-repeat; display: fixed; */ .bg{ z-index: -1; width:100vw; height: 100vh; position: fixed; top:0; left: 0; } .bg img{ width:100%; height: 100%; object-fit: cover; opacity: 0.5; } .bg svg{ width:auto; height: 100vh; min-width: 100vw} .bg svg path{ fill: var(--color_txt); opacity: 0.03;} .underline{ text-decoration: underline; } .page_fadeIn{ opacity: 0; animation: anim_page_fadeIn 1s cubic-bezier(0.17, 0.9, 0.46, 1) .2s 1 normal forwards} body.shownav{ overflow: hidden; } /* body.loading{ overflow: hidden; } */ body.slider_on{ overflow: hidden; } div, figure{ position: relative; display: block; } header, section, main{ margin: 0; padding: 0; width: 100%; max-width: 100vw; display: block; position: relative; overflow-x: hidden; z-index: 2} img{ width: 100%; height: auto; display: block; object-fit: contain; } ul{ margin: 0; display: block; text-align: left; padding: 0;} li{ letter-spacing: 0.05em; margin: 0em 0; list-style: none; min-height:1.6em; padding-left: 0px; background-repeat: no-repeat; background-size: 16px; background-position: 0 3px; padding-bottom: 0px; } h1,h2,h3,h4{ text-transform: uppercase; font-family: var(--font_2); font-size: calc( var(--fontSize_unit) * 2); display: block; width: auto; clear: both; break-after: always; margin: 0 ; line-height: 1.15em; font-weight: 400 } a{ display: inline-block; color: var(--color_txt); text-align: left; text-decoration: none; } a:hover{ cursor: pointer; opacity: 1; } p{ clear: both; display: block; padding: 0; margin: 0; max-width: 60vw; font-weight: lighter; position: relative; line-height: 1.5em; } a.over_underline{ width: fit-content;} a.over_underline:after{ content:""; position: absolute; bottom:0; left: 0; transition: all .1s cubic-bezier(.17,.67,.68,1.01); width:0%; height: 2px; background: var(--color_txt); } a.over_underline:hover:after{ width:100%; } /* Barba */ #barba-wrapper{ position: relative; width: 100vw;} .barba-container{ width: 100%; } .barba-container{ transition: opacity .3s .3s; } .anim_out .barba-container{ opacity: 0; transition: opacity .3s 0s; } /* main layout */ .main_container{ min-height: calc( 100vh - 160px ); margin: 120px auto 0 auto; position: relative; display: block; width: 100%; } .fit_container{ padding: 0 calc( var(--grid_unit) * 1) ; width: 100%; max-width: var(--w_wrapper); margin: 0 auto; } /* screen_loader */ .loading .screen_loader{ display: flex; z-index: 110; width: 100%; height: 100vh; top:0; left: 0; position: fixed; background: var(--color_bg ); flex-direction: column; text-align: center; justify-content: center; } .loading .screen_loader .loading_content{ text-transform: uppercase; display: flex; justify-content: center; line-height: 1.26em; } .loading .screen_loader .gif_loader{ background: var(--color_bg); border-radius: 100% ; padding: 2vw; width: 12vw; height: 12vw; opacity:0; animation: fadeIn .5s cubic-bezier(.17,.67,.66,1.06) .2s 1 normal forwards; } .loading .screen_loader .gif_loader img{ mix-blend-mode: multiply; border-radius: 100% ; } /* maintenance_wrapper */ .maintenance_wrapper { display: flex; z-index: 100; width: 100%; height: 100vh; top:0; left: 0; position: fixed; background: black; flex-direction: column; text-align: center; justify-content: center; } .maintenance_wrapper .maintenance_content{ opacity: 0; text-transform: uppercase; line-height: 1.26em; animation: fadeIn 3s cubic-bezier(.58,.28,.6,.96) 0s 1 normal forwards; color: white; } /* header */ .header{ top: 0; position: fixed; background: var(--color_bg); z-index: 90; padding-left: var(--grid_unit); padding-right: var(--grid_unit); height: auto; width: 100vw; overflow: hidden; } .header .header_flex{ width: 100%; display: flex; justify-content: space-between; } .header .right{ padding-top: 20px; text-transform: uppercase; height: 1.3em; display: flex; align-content: center;} .header .right a.link{ letter-spacing: 0.02em; padding: 0; margin: 0 20px; line-height: 1.3em; } .header .right a:hover{ cursor: pointer; } .header .right a.link.active{ letter-spacing: 0.01em; font-family: var(--font_2); } .header a path{ fill: var(--color_txt); } .header .main_logo{ width: 300px; margin: 5px 0px; } .header .sublogo{ font-family: var(--font_1); font-size: calc( var(--fontSize_unit) * 1.8); padding-left: 0.25em; } .header .icon{ height: 30px; width: 30px; } .header .icon img{ height: 100%; width: 100%; } /* footer */ .footer{ z-index: 100; height: 40px; line-height: 1em; position: relative; text-transform: uppercase; padding-left: var(--grid_unit); padding-right: var(--grid_unit); padding-bottom: calc( var(--grid_unit) * 0.25 ); width: 100%; overflow: hidden; display: flex; flex-direction: column; justify-content: space-around; } .footer .footer_flex{ width: 100%; display: flex; justify-content: space-between; } .footer .footer_flex .col{ width: 33%; height: 1em;} .footer .footer_flex .col1{ text-align: left;} .footer .footer_flex .col2{ text-align: center;} .footer .footer_flex .col3{ text-align: right;} .footer .language{ position: fixed; bottom: calc( var(--grid_unit) * 0.25 ); } .footer .languages{ display: flex; flex-direction: column; position: fixed; bottom: 0; right: 0; padding: calc( var(--grid_unit) * 0.25 );; } .footer .languages a{ margin: 0 10px; } .footer .languages .active{ font-family: var(--font_2); } /* home_template */ .home_template .player_home{ z-index: 91; ; background-color: var(--color_bg); position: fixed; width: 60vw; left: 20vw; height: calc( 100vh - 160px ) ; overflow: hidden; } .home_template .player_home img{ mix-blend-mode: multiply; display: none; width: 100%; height: 100%; position: absolute; box-sizing: border-box; } .home_template .player_home img.active{ display: block; } .home_template .big_text{ z-index: 92; font-size: calc( var(--fontSize_unit) * 4); position: absolute; top: 50%; transform: translateY(-50%) translateX(-80%); left: 50%; } /* projects_cloud */ .projects_cloud{ width: calc( var(--mozaic_unit) * 4 ); justify-content: space-around; margin-left: auto; margin-right: auto; } .projects_cloud{ display: flex; flex-wrap: wrap; } .projects_cloud .grid-item{ padding:10px; width: var(--mozaic_unit) ; height: var(--mozaic_unit) ; } .projects_cloud .grid-sizer{ width: var(--mozaic_unit); height: var(--mozaic_unit); } /* projects_template */ .projects_template{ padding-bottom: calc( var(--grid_unit) * 2) ; overflow-y: hidden; } .projects_template .projects_nav{ text-align: center; padding: 0 var(--grid_unit) ; margin: 0 auto 0 auto; } .projects_template .projects_nav button{ font-size: 0.8em; letter-spacing: 0.05em; margin: 1em; text-transform: uppercase; background: none; border: none; color: var(--color_txt); } .projects_template .projects_nav button:hover{ cursor: pointer; letter-spacing: 0.01em; font-family: var(--font_2); } .projects_template .projects_nav button.is-checked{ letter-spacing: 0.01em; font-family: var(--font_2); } .projects_template .projects_cloud{ margin-top: calc( var(--grid_unit) * 2) ; } .projects_template .projects_cloud .grid-item.cover_sizer_m{ width: calc( var(--mozaic_unit) * 2 ); height: calc( var(--mozaic_unit) * 2 ); } /* project_pad */ .project_pad { background: white; box-shadow: 0px 0px 14px -2px rgba(0,0,0,0.1); border-radius: 3px; width:100%; height: 100%; display: block; } .project_pad .text_wrapper{ flex-wrap: nowrap; padding: 1em; display: flex; justify-content: center; align-items: center; align-content: center;flex-wrap: wrap; align-content: center; flex-wrap: wrap; z-index: 2; flex-direction: column; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .project_pad .cover{ position: absolute; width:100%; height: 100%; object-fit: cover; transition: all .5s; } .project_pad:hover { cursor: pointer; } .project_pad:hover .cover{ opacity: 0.2; } .project_pad .pastille{ position: absolute; top: -15px; left: -15px; width: 33%; height: 33%; } .project_pad .text_wrapper { transition: all .3s .1s; } .project_pad .text_wrapper .title{transform: translateY(-4px); margin: 0; line-height: 1.3em; opacity: 0; text-align: center; padding: 0 0.3em; transition: all .6s .1s; } .project_pad:hover .text_wrapper .title{ opacity: 1; transform: translateY(0); } .project_pad .text_wrapper .tags{ display: flex; flex-wrap: wrap; justify-content: center; padding: 0 1em; } .project_pad .text_wrapper .taglink{ transform: translateY(4px); opacity: 0; margin: 0.3em; padding: 0.3em; background: white; text-transform: uppercase; } .project_pad .text_wrapper .taglink:hover{ text-decoration: underline; } .project_pad:hover .text_wrapper .tags{ opacity: 1; } .project_pad:hover .text_wrapper .taglink{ opacity: 1; transform: translateY(0); } .project_pad:hover .text_wrapper .taglink:nth-child(1){ transition: all .3s .4s; } .project_pad:hover .text_wrapper .taglink:nth-child(2){ transition: all .3s .5s; } .project_pad:hover .text_wrapper .taglink:nth-child(3){ transition: all .3s .6s; } .project_pad:hover .text_wrapper .taglink:nth-child(4){ transition: all .3s .7s; } .project_pad .is_new{ position: absolute; bottom: 0; z-index: 5; background: var(--color_txt); color: #FFF; text-transform: uppercase; width: 4em; height: 4em; display: flex; align-items: center; justify-content: center;} /* project_template */ .project_template{ padding-bottom: calc( var(--grid_unit) * 2) ;; } .project_template .cover_wrapper{ position: relative; width: 100%; height:auto ; margin-bottom: 10px; } .project_template .bg_cover{ opacity:0.4; background-size: cover; background-position: center; background-repeat: no-repeat; position: absolute; width:100%; top:0; left:0; height: 100% ; background-size: cover; } .project_template .intro{ margin-bottom: var(--grid_unit);} .project_template .intro .project_title{ text-align: left; margin-bottom: var(--grid_unit); } .project_template .intro ul{ margin-bottom: var(--grid_unit); display: flex ; } .project_template .intro li{ margin-right: 2em; margin-top: 0.5em; text-transform: uppercase; text-align: left; } .project_template .intro .col { width: 80%; text-align: left; margin-bottom: var(--grid_unit); } .project_template .builder_images{ display: flex; justify-content: space-evenly; } .project_template .builder_images.fullscreen{ display: flex; justify-content: space-evenly; width: 100%; margin: 0 } .project_template .builder_images.fullscreen .img_wrapper{ padding: 0px; width: 100%; } .project_template .builder_images .img_wrapper{ padding: 10px; width: 100%; } .project_template .builder_images .img_wrapper img{ width: 100%; } .project_template .builder_images .appear_once_scroll{ overflow: hidden; transform: translateX(-100%); transition: all .5s .3s cubic-bezier(.17,.67,.32,.96); } .project_template .builder_images .appear_once_scroll.appear{ transform: translateX(0%); } .project_template .builder_images .appear_once_scroll img{ opacity: 0; transform: translateX(100%); transition: all .5s .3s cubic-bezier(.17,.67,.32,.96); } .project_template .builder_images .appear_once_scroll.appear img{ opacity: 1; transform: translateX(0%); } .project_template .titre_other_projects{ padding-top: 40px ; padding-bottom: 20px; } .project_template .builder_images .appear_once_scroll:nth-child(2n+1){ overflow: hidden; transform: translateX(100%); transition: all .5s .3s cubic-bezier(.17,.67,.32,.96); } .project_template .builder_images .appear_once_scroll:nth-child(2n+1).appear{ transform: translateX(0%); } .project_template .builder_images .appear_once_scroll:nth-child(2n+1) img{ opacity: 0; transform: translateX(-100%); transition: all .5s .3s cubic-bezier(.17,.67,.32,.96); } .project_template .builder_images .appear_once_scroll:nth-child(2n+1).appear img{ opacity: 1; transform: translateX(0%); } .project_template .builder_punchline p{ text-transform: uppercase; line-height: 1.6em; text-align: center; padding: 0 15%; margin: auto; } .project_template .builder_punchline .appear_once_scroll{ opacity: 0 } .project_template .builder_punchline .appear{ animation: anim_title_span .6s cubic-bezier(.17,.67,.32,.96) .1s 1 normal forwards; } .project_template .builder_image{ padding: 10px; } .project_template .builder_image img{ width: 100%; } .project_template .builder_image.appear_once_scroll{ overflow: hidden; transform: translateX(-100%); transition: all .5s .3s cubic-bezier(.17,.67,.32,.96); } .project_template .builder_image.appear_once_scroll.appear{ transform: translateX(0%); } .project_template .builder_image.appear_once_scroll img{ transform: translateX(100%); transition: all .5s .3s cubic-bezier(.17,.67,.32,.96); opacity: 0 } .project_template .builder_image.appear_once_scroll.appear img{ transform: translateX(0%); opacity: 1 } .project_template .builder_image.appear_once_scroll:nth-child(2n+1){ overflow: hidden; transform: translateX(100%); transition: all .5s .3s cubic-bezier(.17,.67,.32,.96); } .project_template .builder_image.appear_once_scroll:nth-child(2n+1).appear{ transform: translateX(0%); } .project_template .builder_image.appear_once_scroll:nth-child(2n+1) img{ transform: translateX(-100%); transition: all .5s .3s cubic-bezier(.17,.67,.32,.96); opacity: 0 } .project_template .builder_image.appear_once_scroll:nth-child(2n+1).appear img{ transform: translateX(0%); opacity: 1 } .project_template .projects_cloud{ margin: 20px auto; width: 100%; justify-content: center; } .mobile_nav{ display: none; } /* contact_template */ .contact_wrapper p{ margin: 1em 0 0 0; } .contact_wrapper.actif{ display: flex; } .contact_wrapper .icon_link{ display: flex; align-items: center; margin-top: 20px ;} .contact_wrapper .icon_link img{ width: 40px; margin-right: 10px; } /* popups */ .popup_wrapper{ display: none; z-index: 90; background: rgba(255,255,255,0); transition: all .8s; position: fixed; justify-content: center; align-items: center; top: 0; left: 0; width: 100vw; height: 100vh; } .popup_wrapper .bt_close{ display: block; z-index: 91; position: absolute; top:30px; right: 30px; width: 30px; height: 30px; } .popup_wrapper .bt_close .line{ position: absolute; transform-origin:50% 50%; left: 50%; top:50%; width:0px; height: 1px; background: var(--color_txt); transition: all .3s; } .popup_wrapper .bt_close:hover{ cursor: pointer; } .popup_wrapper .bt_close .line1{ width:30px; transform : translateX(-50%) translateY(0) rotate(45deg); } .popup_wrapper .bt_close .line2{ width:30px; transform : translateX(-50%) translateY(0) rotate(-45deg); } .popup_wrapper:before{ content: ""; background:var(--color_bg); opacity: 0.9; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .popup_wrapper.actif:before{ opacity: 0.8; } .popup_wrapper.actif .popup{ animation: anim_contact_popup .6s cubic-bezier(.17,.67,.32,.96) .1s 1 normal forwards; } .popup_wrapper .popup{ opacity: 0; padding: var(--grid_unit); width: 500px; height: auto; background:white; border-radius: 3px; box-shadow: 0px -1px 14px -3px rgba(0,0,0,0.3); } .popup_wrapper .popup_content{ max-height: 90vh; overflow-y: auto; } .popup_wrapper .popup_content h1, .popup_wrapper .popup_content h2, .popup_wrapper .popup_content h3{ margin: 1em 0; } .popup_wrapper.actif{ display: flex; } /* default */ .default_template p{ margin: 1em 0 0 0; } .default_template .flex_cols{ display: flex; } .default_template .flex_cols .left{ width: 30% } .default_template .flex_cols .right{ padding: var(--grid_unit) 0; width: 70% } .default_template .flex_cols .right h2{ margin: 1em 0; text-transform: uppercase; } .default_template .flex_cols .right p{ margin: 3em 0 3em 0; max-width: 24em; } /* about_template */ .about_template{ padding-top: 80px; } .about_template .illus{ padding-right: var(--grid_unit); padding-left: var(--grid_unit); position: fixed; background: var(--color_bg); transform: translateX(-100%); left: 50vw; top: calc(var(--grid_unit) * 3);; width: 50vw ;} .about_template .illus img{ mix-blend-mode: darken; } .about_template .flex_cols{ display: flex; } .about_template .flex_cols .left{ width: 50% } .about_template .flex_cols .right{ padding:0; width: 50% } .about_template .flex_cols .right h2{ margin-bottom: 1em; text-transform: uppercase; } .about_template .flex_cols .right p{ margin-bottom: calc(var(--grid_unit) * 1.5); max-width: 24em; } .about_template article p{ margin: 1em 0; } .about_template { margin: 1em 0; } .about_template article h2{ margin: 1em 0; } /* burger */ .burger{ display: none; } .splitedWords .ltr{ opacity: 0; } .splitedWords .ltr:nth-child(10n+1){ animation: anim_splitedWords_span .6s cubic-bezier(.17,.67,.32,.96) .1s 1 normal forwards; } .splitedWords .ltr:nth-child(10n+2){ animation: anim_splitedWords_span .6s cubic-bezier(.17,.67,.32,.96) .5s 1 normal forwards; } .splitedWords .ltr:nth-child(10n+3){ animation: anim_splitedWords_span .6s cubic-bezier(.17,.67,.32,.96) .3s 1 normal forwards; } .splitedWords .ltr:nth-child(10n+4){ animation: anim_splitedWords_span .6s cubic-bezier(.17,.67,.32,.96) .25s 1 normal forwards; } .splitedWords .ltr:nth-child(10n+5){ animation: anim_splitedWords_span .6s cubic-bezier(.17,.67,.32,.96) .5s 1 normal forwards; } .splitedWords .ltr:nth-child(10n+6){ animation: anim_splitedWords_span .6s cubic-bezier(.17,.67,.32,.96) .26s 1 normal forwards; } .splitedWords .ltr:nth-child(10n+7){ animation: anim_splitedWords_span .6s cubic-bezier(.17,.67,.32,.96) .7s 1 normal forwards; } .splitedWords .ltr:nth-child(10n+8){ animation: anim_splitedWords_span .6s cubic-bezier(.17,.67,.32,.96) .38s 1 normal forwards; } .splitedWords .ltr:nth-child(10n+9){ animation: anim_splitedWords_span .6s cubic-bezier(.17,.67,.32,.96) .59s 1 normal forwards; } .splitedWords .ltr:nth-child(10n+10){ animation: anim_splitedWords_span .6s cubic-bezier(.17,.67,.32,.96) .41s 1 normal forwards; } /* /^^^^^^^ /^^ /^^ /^^ /^^ /^^ /^^^^ /^ /^^ /^^^^ /^^ /^^ /^ /^^ /^ /^^ /^^ /^ /^^ /^^ /^^ /^^ /^^ /^^ /^^^^^ /^^ /^^^ /^ /^^ /^^^ /^^ /^^ /^^ /^^ /^ /^^ /^^ /^^ /^^ /^/^^ /^^ /^^ /^^^^ /^^ /^^ /^^ /^^ /^^ /^^ /^^ */ @media ( min-width: 1800px){ :root { --fontSize_unit: 13px; /* max value */ } } @media ( max-width: 1200px){ :root { --fontSize_unit: .9vw; } } @media ( max-width: 800px){ :root { /* --mozaic_unit: 48vw; */ --grid_unit: calc(100vw / 12); --mozaic_unit: 25vw; --fontSize_unit: 2vw; } #barba-wrapper { min-height: 95vh; } .footer{ height: 5vh; } .header { display: block; height: 80px; padding:0; } .main_container{ min-height: 90vh; } .header .main_nav{ position: fixed; display: flex; top: 0; left: 100vw; width: 100vw; height: 100vh; background: var(--color_txt); flex-direction: column; justify-content: center; } .shownav .header .main_nav{ left: 0; } .header .main_logo{ margin-left: 15px; margin-top: 9px; width: 260px; max-width: 80vw; } .header .right a{ transition: all 0s; letter-spacing: .1em; opacity: 0; transform: translateX(.5em); font-size: calc( var(--fontSize_unit) * 6); margin: .25em var(--grid_unit); color: var(--color_bg); font-family: 'font_2'; } .shownav .header .right a:nth-child(1){ transition: all .6s cubic-bezier(0.17, 0.67, 0.46, 1.05) .3s ; } .shownav .header .right a:nth-child(2){ transition: all .6s cubic-bezier(0.17, 0.67, 0.46, 1.05) .4s; } .shownav .header .right a:nth-child(3){ transition: all .6s cubic-bezier(0.17, 0.67, 0.46, 1.05) .5s; } .shownav .header .right a:nth-child(4){ transition: all .6s cubic-bezier(0.17, 0.67, 0.46, 1.05) .6s; } .footer .footer_flex .col{ width: auto; line-height: .75em; } .shownav .header .right a{ transform: translateX(0); opacity: 1; letter-spacing: 0; } .header svg{ width: 32px; height: 32px; } .header a path{ fill: var(--color_bg); } .header .col.left{ position: absolute; top: 0; left: 0; } .burger{ display: block; z-index: 91; position: fixed; top:17px; left: calc( 100vw - 50px ); width: 25px; height: 30px; } .burger .line{ position: absolute; transform-origin:50% 50%; left: 50%; top:50%; transition:all .3s; content:''; width: 25px; height: 2px; background: var(--color_txt); transition: all .3s; } .burger:hover{ cursor: pointer; } .burger .line1{ transform : translateX(-50%) translateY(-8px) rotate(0deg); } .burger .line2{ transform : translateX(-50%) translateY(0px) rotate(0deg); } .burger .line3{ transform : translateX(-50%) translateY(8px) rotate(0deg); } .shownav .burger .line1{ background: var(--color_bg);; transform : translateX(-50%) translateY(0) rotate(45deg); transition:all .3s; } .shownav .burger .line3{ background: var(--color_bg);; transform : translateX(-50%) translateY(0) rotate(-45deg); transition:all .3s .1s; } .shownav .burger .line2{ display: none; } .shownav .header .col.left{ color: var(--color_bg); z-index: 111; position: fixed; top: var(--grid_unit); left: var(--grid_unit); } .shownav .header .main_logo{ color: var(--color_bg); opacity: 0; } .contact_template .contact_wrapper{ top: var(--grid_unit); left: var(--grid_unit); transform:none } .shownav .header .col.left{ color: var(--color_bg);} .about_template .flex_cols{ display: block; } .about_template .flex_cols .left{ width: 100%; } .about_template .flex_cols .right{ width: 100%; } .projects_template .projects_nav{ margin: 0; } .projects_template .projects_cloud{ width: 100%; } .projects_template .projects_cloud .grid-item.cover_sizer_m { width: calc( var(--mozaic_unit) ); height: calc( var(--mozaic_unit)); } .project_template .builder_punchline p{ padding: 0; } .about_template .flex_cols .left{ padding-left: 0; } .about_template .flex_cols .right{ padding-left: 0; } .projects_template .projects_nav button{ margin: .5em; } .project_template .projects_cloud{ width: 100%; } .project_template .builder_images{ width: 100%; margin: 0; } .project_template .intro .cols { flex-direction: column; } .project_template .intro .col { width: 100%; } .project_pad .text_wrapper{ display: none; } .default_template h1, .default_template h2, .default_template h3, .default_template h4{ font-weight: 800; font-size: 1.6em; } .about_template .illus{ left: 0%; width: 100%; display: none; } .project_template .builder_images .img_wrapper{ padding: 5px 0; } .projects_cloud .grid-item{ padding: 5px; } .project_template .builder_images { flex-direction: column; } .projects_template .projects_cloud .grid-item.cover_sizer_m{ width: calc( var(--mozaic_unit) * 2 ); height: calc( var(--mozaic_unit) * 2); } .footer .languages{ padding: 0; } .loading .screen_loader .gif_loader{ width: 25vw; height: 25vw; } .home_template{ min-height: 0vh; height: 75vh; top: 15vh; margin: 0; } .home_template .big_text { transform: translateY(-50%) translateX(0%); left: 5vw; width: 90%; font-size: calc( var(--fontSize_unit) * 3); } .popup_wrapper .popup{ width: 90vw; } .project_pad .pastille{ top: -5%; left: -5%; } .projects_template .projects_nav button { font-size: 0.6em; } } @keyframes fadeOut{ to { opacity: 0; } } @keyframes fadeIn{ to { opacity: 1; } } @keyframes fadeInWord{ 0% { opacity: 0 } 100% { opacity: 1; } } @keyframes slideTitle{ to{ opacity: 1; transform:translate3D(0,0,0) } } @keyframes hover_mosaique_item{ 0%{ opacity:0.8; } 100%{ opacity:1 } } @keyframes screen_loader{ from{ opacity:1 } to { opacity: 0; } } @keyframes screen_loader_content{ 0%{ opacity:0; } 10%{ opacity:1; } 80%{ opacity: 1; } 100%{ opacity: 0; } } @keyframes hover_mosaique_item{ 0%{ opacity:0.8; } 100%{ opacity:1 } } @keyframes anim_title_span{ 0% { opacity: 0; top: 20px } 100% { opacity: 1; top: 0px } } @keyframes anim_splitedWords_span{ 0% { opacity: 0; transform:translate3D(0,-50px,0) } 100% { opacity: 1; transform:translate3D(0,0,0) } } @keyframes anim_contact_popup{ 0% { opacity: 0; transform: scale(0.95); } 100% { opacity: 1; transform: scale(1); } }