/*
CSS by Manu LECHAT
https://e-lechat.com
*/


/*

  /^^
  /^^                                                                                                 
/^/^ /^     /^^   /^^     /^ /^^          /^^         
  /^^        /^^ /^^      /^  /^^       /^^  /^^       
  /^^          /^^^       /^   /^^     /^^    /^^    
  /^^           /^^       /^^ /^^       /^^  /^^     
   /^^         /^^        /^^             /^^          
             /^^          /^^                                    /^^                        /^^

 */


 @font-face {
  font-family: "font_1";
  src: url("../fonts/Manrope/Manrope-Medium.ttf") format('truetype')
}

@font-face {
  font-family: "font_2";
  src: url("../fonts/Colby/Colby.ttf") format('truetype')
}

@font-face {
  font-family: "font_3";
  src: url("../fonts/Manrope/Manrope-Bold.ttf") format('truetype')
}

/*

/^^     /^^        /^^         /^ /^^^      /^^^^
 /^^   /^^       /^^  /^^       /^^        /^^
  /^^ /^^       /^^   /^^       /^^          /^^^
   /^/^^        /^^   /^^       /^^            /^^
    /^^           /^^ /^^^     /^^^        /^^

*/

:root {
  --font_1 : "font_1";
  --font_2 : "font_2";
  --font_3 : "font_3";
  --grid_unit: calc(100vw / 14);
  --vert_unit: calc(100vh / 14);
  --fontSize_unit: 10px;
  --color_txt : white;  
  --color_bg:#000;
  --swiper-theme-color : white; 
}




/*

  /^^                                    /^^
/^                                       /^^
/^/^ /^        /^^         /^^ /^^       /^/^ /^      /^^^^
/^^        /^^  /^^       /^^  /^^       /^^       /^^
/^^       /^^    /^^      /^^  /^^       /^^         /^^^
/^^        /^^  /^^       /^^  /^^       /^^           /^^
/^^          /^^         /^^^  /^^        /^^      /^^ /^^

                                                           */



/* titles */

.txt_s { font-size: calc( var(--fontSize_unit) * 1) ;  }
.txt_11 { font-size: calc( var(--fontSize_unit) * 1.1) ;  }
.txt_m { font-size: calc( var(--fontSize_unit) * 1.6) ;  }
.txt_l { font-size: calc( var(--fontSize_unit) * 2.1) ;  }
.txt_12 { font-size: 12px }
.txt_13 { font-size: calc( var(--fontSize_unit) * 1.3); }
.txt_14 { font-size: calc( var(--fontSize_unit) * 1.4); }
.txt_16 { font-size: 16px; }
.txt_20 { font-size: calc( var(--fontSize_unit) * 2.0); }
.txt_36 { font-size: 36px; }
.txt_42 { font-size: calc( var(--fontSize_unit) * 4.2); }
.txt_54 { font-size: 54px; }
.txt_72 { font-size: 72px; line-height: 1.2em; }
.txt_90 { font-size: 90px; line-height: 1.2em; }

.maj{ text-transform: uppercase;    }
.typo_titre{ font-family: var(--font_2); }

/*

 /^^                                                                /^^
 /^^                                                                /^^
 /^^        /^^         /^^   /^^        /^^         /^^  /^^     /^/^ /^
 /^^      /^^  /^^       /^^ /^^       /^^  /^^      /^^  /^^       /^^
 /^^     /^^   /^^         /^^^       /^^    /^^     /^^  /^^       /^^
 /^^     /^^   /^^          /^^        /^^  /^^      /^^  /^^       /^^
/^^^       /^^ /^^^        /^^           /^^           /^^/^^        /^^
                         /^^
*/


::selection {  background-color: rgba(0,0,0,0); opacity: 0.5; transition: all .3s; ; color: grey;  text-shadow: none; }
* {  box-sizing: border-box; outline: none;   }

html{  color: var(--color_txt);  min-height: 100vh;  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: background 1s; letter-spacing: .0125em; min-height: 100vh; font-size: calc( var(--fontSize_unit) * 1.6); line-height: 1.35em;  overflow-x: hidden;  background-color: var(--color_bg);  font-family: var(--font_1); width: 100vw; overflow-y: auto; color: var(--color_txt); margin: 0; padding: 0; top:0; left: 0; }
body.shownav{ overflow: hidden; }
div, 
figure{  position: relative; display: block;  }
header, 
section, 
main{ width: 100%; }
.font2{  font-family: var(--font_2); }
img{  max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; object-fit: contain; }
ul{ margin: 0; display: block; text-align: left; padding: 0;}
li{ 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{  font-family: var(--font_2);  }
h1,h2,h3,h4{   display: block; margin: 0; clear: both; break-after: always;   line-height: 1.15em; letter-spacing: 0;  font-weight: 400 } 

a{  color: var(--color_txt);  text-align: left; text-decoration: none;  }
a:hover{ cursor: pointer; text-decoration: none;  }
p{  clear: both; display: block; padding: 0; margin: 0;font-weight: lighter; position: relative;  ;  line-height: 1.6em;  }
p a{ text-decoration: underline; }
.bold{ font-family: var(--font_3); }

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%;  }
 
.section{ max-width:  100% ; width: var(--w_wrapper); margin: 0 auto;  }
.main_container{ width: 100%; }
.center{ text-align: center; }

.multiply{ mix-blend-mode: multiply; }

/* swiper */


.swiper-pagination-bullet { box-sizing:border-box; border-radius: 0; width: 10px; height: 2px; transition: all .3s; background:none; border-bottom: 2px solid white; }
.swiper-button-next, .swiper-button-prev{ z-index: 5; width: 2.3em; height: 2.3em; padding: .3em; border-radius: 50%;  }
:root {  --swiper-navigation-size: 1.2em; }

.swiper-button-next{right: calc(var(--grid_unit) * 0.5)} 
.swiper-button-prev{left: calc(var(--grid_unit) * 0.5)} 
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled { opacity: 0 }

.swiper-horizontal>.swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal{ top: auto; bottom: 0; }


/* bg  */
.bg_nb{   background-size: auto;  z-index: -1; position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; object-fit: cover;  }

/* .project_template .bg_nb{ mix-blend-mode: multiply; } */
/* .home_template  .bg_nb{ mix-blend-mode: multiply; } */

/* burger */
.burger{ display: none; }

/* Barba */
#barba-wrapper{  top: 0; left: 0;  margin: 0; padding: 0; width: 100vw; min-width: 100%; height: fit-content; min-height: 100vh;  position: absolute; }
.barba-container{  width: 100%;position: absolute; top: 0; left: 0; }


/* logo */
.main_logo{ background-color: var(--color_bg); position: fixed; overflow:hidden;  z-index: 90;   top: calc(var(--vert_unit) * 0.5); left: 60px;  width: 480px; max-width: 100%;   }

.main_logo:hover{ cursor: pointer; }
.main_logo img{ width: 100%; }

/* nav */
.main_nav{   background-color: var(--color_bg);  gap: 10px;  align-items: center;   padding: 8px; position: fixed;  width: fit-content; display: flex; top: calc(var(--vert_unit) * 0.5); right: calc( var(--grid_unit) * 0.5);   z-index: 10;  }
.main_nav a{  padding: .3em 1em;  font-size: calc( var(--fontSize_unit) * 1.6);  line-height: 1em;  } 



/* bg_gradient */
.bg_gradient{ width: 140vw; height: 140vw; top: 50vh; left: 50vw; transform: translate(-50%, -50%); position: fixed;  opacity: 0.2; mix-blend-mode: color-burn; background: radial-gradient( #ffffff, #e3dcdc, #424242) }

/* footer */

.footer{    z-index: 100; position: fixed; display: flex; left: 60px; bottom: 10px;    }
.footer a{   opacity: 0.6;   }
.footer a:hover{   opacity: 1;   }
.footer .txt{ background-color: var(--color_bg); padding: 3px 8px 3px 8px ; letter-spacing: 0.08em; display: none;  }

/* home */


.bookmarks_link{ align-items: center;  display: flex; gap: 10px; padding: 3px; display: flex; z-index: 1100; text-transform: uppercase; position: fixed; bottom: 10px; right: 60px; }
.bookmarks_link img{ width: 16px; height: 16px; height: auto; }

/* .home_template .bg_nb{ opacity: 0.2; } */

.home_template .flex_scroller{ width: max-content; gap: 0px;  display: flex; flex-direction: row; padding-left: 60px; padding-right: 20vw;  padding-top: 140px; padding-bottom: 40px;  flex-wrap: nowrap; height: 100vh; min-width: 100vw;  width: fit-content; }
.home_template .project_pad{ padding: 40px 60px; aspect-ratio: 1; height: auto;  min-width: 500px;  display: flex; flex-direction: column; gap: 20px; align-items: center;  align-items: center; align-items: center;  justify-content: center;  } 
.home_template .project_pad .cover_wrapper{ transition: all .3s ease-out; aspect-ratio: 3/4; height: 100%;   }
.home_template .project_pad .cover_wrapper img{ position: absolute; width: 100%; height: 100%;  object-fit: contain;  }
.home_template .project_pad .cover_wrapper .cover_hover{  opacity: 1; transition: all .3s ease-in-out; }
.home_template .project_pad:hover .cover_wrapper .cover_hover{  opacity: 1; }
.home_template .project_pad  .text_wrapper{ width: 100%; text-align: center; opacity: 0; height: 20px;  }
.home_template .project_pad:hover .cover_wrapper{ transform: scale(1.02); }



/* .home_template  .bg_nb{ mix-blend-mode: multiply; } */

/* .project */



.project_template .flex_scroller{ width: max-content;  display: flex; gap: 0px; flex-direction: row; padding-left: 60px; padding-right: 20vw;  padding-top: 140px; padding-bottom: 40px;  flex-wrap: nowrap; height: 100vh; min-width: 100vw;  width: fit-content; }
.project_template .slide{  height: 100% }
.project_template .slide img{ height: 100%; width: auto; position: relative; max-width: none; display: block; }
.project_template .slide_intro{ min-width: 500px; width: 20vw; padding: 40px; display: flex; color: var(--color_bg); flex-direction: column; gap: 20px; background-color: #fff;  }
.project_template .slide_intro h1{  line-height: 1em; }
.project_template .slide_intro p{ line-height:1.3em }
.project_template .caption_img{ position: absolute; bottom: 0; left: 0; background-color: var(--color_bg); padding: 1em; }
.project_template .project_pad{ aspect-ratio: 3/4;  height: 100%; min-height: 500px; width: 30vw;   display: flex; flex-direction: column; gap: 20px; align-items: center;  align-items: center; align-items: center;  justify-content: center;  } 
.project_template .project_pad .cover_wrapper{ transition: all .3s ease-out; aspect-ratio: 3/4; height: calc(100% - 40px);   }
.project_template .project_pad .cover_wrapper img{ position: absolute; width: 100%; height: 100%; object-fit: contain;  }
.project_template .project_pad .cover_wrapper .cover_hover{  opacity: 1; transition: all .3s ease-in-out; }
.project_template .project_pad:hover .cover_wrapper .cover_hover{  opacity: 1; }
.project_template .project_pad  .text_wrapper{ width: 100%; text-align: center; opacity: 0; height: 20px;  }
.project_template .project_pad:hover .cover_wrapper{ transform: scale(1.02); }
.project_template .slide_caption{ padding: 40px; min-width: 20vw; display: flex; align-items: flex-end; padding-bottom: 5vw; color: var(--color_bg); background-color: #fff; }

.project_template .slide_titre_next{  min-width: 300px;  display: flex;   align-items: flex-end; padding: 40px;  justify-content: flex-end;  flex-direction: column; }
.project_template .titre_next{ display: flex; gap: 10px; align-items: center; padding: 5px; text-align: right; background-color: #fff; color: var(--color_bg);  }




/* default */
.default_template .main_container{  }
.default_template h1{ font-size: 72px; }
.default_template h2{ font-size: 34px; }
.default_template .page_wraper{ width: 100%;  max-width: calc(var(--grid_unit) * 12); margin-left: calc(var(--grid_unit) * 1); margin-top: calc(var(--vert_unit) * 3); }
.default_template .cover_wraper{ overflow: hidden; animation: 1.6s  cover_wraper ease-out 1.8s 1 normal forwards;  width: 0; height: calc(var(--grid_unit) * 4); left: calc(var(--grid_unit) * 1); top: calc(var(--vert_unit) * 3); position: fixed;; left: calc(var(--grid_unit) * 1); top: calc(var(--vert_unit) * 3); position: fixed; }
.default_template .cover_img{ animation: 1.6s  cover_img ease-out 1.8s 1 normal forwards; max-width: none;  width: calc(var(--grid_unit) * 5);  height: calc(var(--grid_unit) * 4); object-fit: cover;  }
.default_template .blocs_wraper{ z-index: 2;  width: calc(var(--grid_unit) * 5); margin-left: calc(var(--grid_unit) * 5); padding-bottom: calc(var(--vert_unit) * 3);  display: flex;   flex-direction: column;  gap: 20px; }
.default_template .blocs_wraper:before{ content: ""; z-index: 3; position: fixed; top: 0; height:calc(var(--vert_unit) * 1);   width: calc(var(--grid_unit) * 5); }
.default_template .block-type-text p{ padding-bottom: 1em; }

/* maintenance */
.maintenance .page_wraper{  flex-direction: column; display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; }
.maintenance  p{  font-size: 2em; font-family: var(--font_2); }
.maintenance  .picto{ width: 200px; mix-blend-mode: multiply; }

/* about */
.about_template .main_container{  }
.about_template .page_wraper{ width: 100%;  max-width: calc(var(--grid_unit) * 12); margin-left: calc(var(--grid_unit) * 1); margin-top: calc(var(--vert_unit) * 3); }
/* .about_template .cover_wraper{ background: white; overflow: hidden; animation: .8s  cover_wraper ease-out 1s 1 normal forwards;  width: 0; height: calc(var(--grid_unit) * 4); left: calc(var(--grid_unit) * 0); top: calc(var(--vert_unit) * 4); position: fixed;  } */
/* .about_template .img_wraper{ position: absolute; animation: .8s  img_wraper ease-out 1s 1 normal forwards; max-width: none;  width: calc(var(--grid_unit) * 5);  height: calc(var(--grid_unit) * 4); object-fit: cover;  } */
.about_template .cover_wraper{  top: calc(var(--vert_unit) * 4); position: fixed;  }
.about_template .img_wraper{ position: absolute;  width: calc(var(--grid_unit) * 5);zssz }
.about_template .cover_img{ max-width: none;  width: calc(var(--grid_unit) * 6);  height: calc(var(--grid_unit) * 4); object-fit: cover;  }
.about_template .blocs_wraper{ top: calc(var(--grid_unit) * 0); padding-right: calc(var(--grid_unit) * 0.5); padding-left: calc(var(--grid_unit) * 0.5); padding-top: calc(var(--grid_unit) * 0.5);  background-color: var(--color_bg); z-index: 2;  width: calc(var(--grid_unit) * 5.5); margin-left: calc(var(--grid_unit) * 5.5); padding-bottom: calc(var(--vert_unit) * 0.5);  }
.about_template .blocs_wraper:before{ content: ""; z-index: 3; position: fixed; top: 0; height:calc(var(--vert_unit) * 1);   width: calc(var(--grid_unit) * 5);  }
.about_template .block-type-text p{ padding-bottom: 1em; }
.about_template .block:nth-child(1){ opacity: 0; transform: translateY(2em); animation: 2.6s fadeIn cubic-bezier(0, 0, 0, 1.06) .4s 1 normal forwards; }
.about_template .block:nth-child(2){ opacity: 0; transform: translateY(2em); animation: 2.6s fadeIn cubic-bezier(0, 0, 0, 1.06) .8s 1 normal forwards; }
.about_template .block:nth-child(3){ opacity: 0; transform: translateY(2em); animation: 2.6s fadeIn cubic-bezier(0, 0, 0, 1.06) 1.2s 1 normal forwards; }
.about_template .block:nth-child(4){ opacity: 0; transform: translateY(2em); animation: 2.6s fadeIn cubic-bezier(0, 0, 0, 1.06) 1.6s 1 normal forwards; }

@keyframes cover_wraper{
  from{ width: 0; transform: translate3d(calc(var(--grid_unit) * 6),0,0);  }
  to{ width: calc(var(--grid_unit) * 6);  transform: translate3d(0%,0,0); }
}
@keyframes img_wraper{
  from{ left: calc(var(--grid_unit) * -6); }
  to{  left: 0;  }
}


/* listing_projects_template */

.listing_projects_template .page_wraper{  width: 100%;  max-width: calc(var(--grid_unit) * 13); margin-left: calc(var(--grid_unit) * 0.5); margin-top: calc(var(--vert_unit) * 5); }
.listing_projects_template .intro{ width: fit-content; padding: 10px; margin-bottom: 20px; background-color: var(--color_bg); color: (var(--color_txt)); }

.listing_projects_template .planche_contact{ display: flex; margin-bottom: var(--grid_unit); align-items: flex-start; flex-wrap: wrap; flex-direction: row; justify-content: flex-start;}
.listing_projects_template .project_img{   height: calc(var(--grid_unit) * 2.6); }
.listing_projects_template .img_wrapper{ border-radius: 0px; overflow: hidden; width: auto; transition: all .3s; position: relative; height: calc(var(--grid_unit) * 2.6);  padding:5px; }
.listing_projects_template .makePdf{ display: none; font-size: 0.8em; position: fixed; bottom: 20px; right: 20px; z-index: 111; background: black; color: white; font-weight: bold; border-radius: 20px; padding: 1em 2em;  }
.listing_projects_template .makePdf:hover{ cursor: pointer; }
.listing_projects_template .imgToPdf{ padding: 3px;   }
.listing_projects_template .imgToPdf .project_img{  border-radius: 10px; }
.listing_projects_template .img_wrapper .project_img_topdf{ display: none; transform: scale(1.5); position: absolute; top: 0; left: 0; }
.listing_projects_template .img_wrapper .selector{ z-index: 10; border-radius: 100%; position: absolute; top: 10px; left: 10px; width: 30px; height: 30px; }
.listing_projects_template .img_wrapper .selector svg{ z-index: 111;  fill: white;  fill-opacity: 0; }
.listing_projects_template .img_wrapper:hover .selector svg{  fill-opacity: 1; }
.listing_projects_template .img_wrapper .selector:hover svg{ fill: royalblue;  fill-opacity: .8;; cursor: pointer; }
.listing_projects_template .imgToPdf .selector svg{ fill: royalblue; fill-opacity: 1; }
.listing_projects_template  .img_wrapper .zone_zoom{  z-index:2;  position: absolute;  background: linear-gradient(0deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.1) 12%, rgba(0,0,0,0.1) 86%, rgba(0,0,0,0.4) 100%);; top: 0px; left: 0px; width: 100%; height: 100%;   opacity: 0; }
.listing_projects_template  .img_wrapper .zone_zoom .icon_zoom{ position: absolute; right: 5px; bottom: 5px;; width: 22px; height: 22px; z-index: 3; }
.listing_projects_template .img_wrapper:hover .zone_zoom{ opacity: 1; cursor: pointer; }




/* overlay */
.overlay { z-index: -1; align-items: center;  background: rgba(255,255,255,0.8); top: 0; left: 0;    align-content: center;  width: 100vw; height: 100vh; position: fixed; display: none; justify-content: center;  }
.overlay.activ{ display: flex; z-index: 100; }

/* contact */
 .popup_contact{ opacity: 0; transition: all .3s .3s; text-align: center; flex-direction: column;  align-items: center; background-color: white; box-shadow:  0px 0px 25px rgba(0,0,0,0.3); display: flex;  justify-content: center; max-height: 80vh; overflow: hidden;  width: calc(var(--grid_unit) * 12); ; position: relative; }
 .activ .popup_contact{ opacity: 1; }
 .popup_contact .text_wrapper{   padding: var(--grid_unit);  display: flex;  flex-direction: column;  align-items: center; }
 .popup_contact .titre{ padding-bottom: 0.5em;  }
 .popup_contact  .picto{ width: 200px; mix-blend-mode: multiply; }

/* popup_wrapper */
.popup_wrapper .bt_close{ display: block; z-index: 91;  position: absolute; top:20px; right: 20px; width: 30px; height: 30px; }
.popup_wrapper .bt_close:hover{ cursor: pointer; }
.popup_wrapper .bt_close .line{ position: absolute;  height: 2px;  border-radius: 3px; transform-origin:50% 50%; left: 50%; top:50%;  width:0px;  background: var(--color_txt); transition: all .3s; }
.popup_wrapper .bt_close .line1{  width:30px;  transform : translateX(-50%) translateY(0)  rotate(45deg);  transition:all .3s 1.4s;  }
.popup_wrapper .bt_close .line2{ width:30px; transform : translateX(-50%) translateY(0) rotate(-45deg); transition:all .3s 1.5s; }

/* contact */
.bt_contact{ z-index: 80; padding: 5px 8px; letter-spacing: 0.05em;  cursor: pointer; text-transform: uppercase; width: 1.5em;   display: flex; justify-content: center; position: fixed; left:calc( 100vw -  60px ); top:calc( var(--grid_unit) * 1);  writing-mode: vertical-rl;  text-orientation: mixed; }
.bt_contact:hover{ text-decoration: underline;}

/* contact_template */

.contact_wrapper { color: var(--color_bg); }
.contact_wrapper a{ color: var(--color_bg); }
.contact_wrapper p{ margin: 1em 0 0 0; }

/* 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_bg); 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{  z-index: 101; 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{ z-index: 102;  animation: anim_contact_popup .6s cubic-bezier(.17,.67,.32,.96)  .1s 1 normal forwards;  }
.popup_wrapper .popup{ opacity: 0; padding: 3em; width: calc(var(--grid_unit) * 5);; 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-bottom: 1em; font-family: var(--font_2); }
.popup_wrapper.actif{ display: flex;   }




/*


/^^^^^^^                                                                        
/^^    /^^                                                                      
/^^    /^^          /^^          /^^^^      /^ /^^        /^^^^      /^^     /^^
/^ /^^            /^   /^^      /^^         /^  /^^      /^^          /^^   /^^ 
/^^  /^^         /^^^^^ /^^       /^^^      /^   /^^       /^^^        /^^ /^^  
/^^    /^^       /^                 /^^     /^^ /^^          /^^        /^/^^   
/^^      /^^       /^^^^        /^^ /^^     /^^          /^^ /^^         /^^    
                                            /^^                                 


*/

/* 
@media ( min-width: 1800px){

  :root {
   --fontSize_unit: 13px; 
  }

} */
@media ( max-width: 1550px){
  .main_logo { width: 30vw }
}



@media ( max-width: 1440px){


  .project_template .slide_intro{  width: 40vw;   }
  .project_template .slide_intro .txt_16{ font-size: 14px;  }
}



@media ( max-width: 800px){


  :root {  
     --fontSize_unit: 1vw;     
     --fontSize_unit: 2vw;
     --mozaic_unit: 6vw;
     --vert_unit: 4vw;
  }
  body{ min-height: unset; height: 100vh;  }
  #barba-wrapper{ min-height: unset; height: 100vh;  }
  .main_nav { flex-direction: column;  align-items: flex-end; gap: 10px; }
  .main_nav .link{ margin: 0 0.15em; font-size: 12px; margin: 0.2em 0!important; }
  .footer{ display: none; }
  .home_template{  height: 100vh; }
  .home_template .project_pad { width: 100vw }  
  .main_logo,  .main_logo img{ width: 60vw!important; padding: 0; left: 20px; }
  .main_logo{ overflow:visible; animation: .6s none; width:60vw; ;  }

  .project_template{ padding-top: 0;   }
  .home_template .flex_scroller{ margin-top: 0; }
  .project_template .project_swiper_horizontal{  width: 100vw; height: 70vh; top: 15vh; left: 0; }
  .project_template .swiper-slide{ height:100%; padding-right: calc(var(--grid_unit) * 0.5); min-width: calc(  100vw - var(--grid_unit) * 0.5); }
  .project_template .page_wraper{ top: 0; }
  .project_template .intro{width: 90vw }
  .project_template .next_project{ width: 100vw; height: 100%;  }
  .project_template .next_project .cover{max-width: 60vw; max-height: 50vh; }
  .project_template .fake_project{ background: none; min-width: 0; width: calc( var(--grid_unit) * 0.25); padding: 0; }
  .about_template .page_wraper{ margin-left: calc( var(--grid_unit) * 0.5); max-width: calc(var(--grid_unit) * 13);  }
  .about_template .blocs_wraper { width: 100%; top: 30vh; margin-left: 0vw; padding: 5vh 5vw; } 
  .about_template .cover_wraper { left: 10vw; top: 15vh;  }
  .about_template .img_wraper{ width: calc(var(--grid_unit) * 6);   width: 100%; height: 100%; }
  .about_template .cover_wraper {width: calc(var(--grid_unit) * 6);   }

  .popup_wrapper .popup{ width: 86vw;  }
  .popup_wrapper .popup_content h1, .popup_wrapper .popup_content h2, .popup_wrapper .popup_content h3{ font-size: 3em; }

  .default_template .blocs_wraper{ width: 100%; margin-left: 0; }
  
  .footer {  height: auto;  padding: O; bottom:5px;  background: none;}
  .projects .grid{ align-items: center; flex-direction: column; }
  .footer .col:nth-child(1){ text-align: center; padding:1em }
  .footer .col {    justify-content: center; }
  .footer .col1 {    width: 100%; }
  .footer .col2 {    width: 100%; }
  .overlay  { z-index: 999; } 
  .overlay .popup_contact {  width: 92%; } 
  .overlay .popup_contact .ligne2 .col { width: 100%; padding-bottom:20px ; }
  .overlay .popup_contact .ligne1{ padding:20px 0 }
  .overlay .popup_contact .ligne2 {  flex-direction: column; }
  .overlay .popup_contact .logo_insta img { width: 40%; margin: 0 30%; }
  .gallery_template { flex-direction: column; }
  .gallery_template .gallery_item_viewer{ width: 100%; }
  .gallery_template .col1{ width: 90%; margin: 0 5%; }
  .gallery_template .col2{   width: 100%; margin: 0; height: auto; max-width: 100%; }
  .gallery_template .gallery_items{ flex-wrap: nowrap; margin: 0;  display: inline-flex; max-width:none; width: auto; height: 140px;  }
  .gallery_template .gallery_items .gallery_item{ float: left; }
  .listing_projects_template .img_wrapper{ height: auto; }
  .listing_projects_template .project_img{ height: auto; max-height: 15vh; max-width: 40vw; }
  .listing_projects_template .img_wrapper .selector svg{ fill-opacity: 0.8; }
  .listing_projects_template .img_wrapper .selector{ width:20px; height: 20px;}
  .events .cover{  height: 50vw; } 

  .gallery_template .gallery_items .scroller{ overflow-x: scroll; width: 100%; margin: 0; height: auto; max-width: 100%; border: 2px solid red; }
  .gallery_template .top_col{ left: 5%; }
  .gallery_template .scroller{  max-width: 100%; height: 160px; overflow: scroll; }
  .project_pad .blur.cover {   bottom: -5px; filter: blur(5px);  }
  .projects .projects_nav { left: 0; bottom: calc(var(--grid_unit) * 6); }
  .projects .projects_nav .button{ font-size: 0.8em; }
  .about .cover {    width: calc(var(--grid_unit) * 20);  position:relative;   height: calc(var(--grid_unit) * 22); }
  .about .text_wrapper{    width: calc(var(--grid_unit) * 20);  position:relative; left: calc(var(--grid_unit) * 3);  } 
  .project_template .bt_close {  top: calc(var(--vert_unit) * 6); left: calc(var(--grid_unit) * .5) }

}




@keyframes main_logo{
  from{ width: 0; transform: translate3d(20px,0,0); }
  to{ width: calc(var(--grid_unit) * 3); transform: translate3d(0px,0,0);  }
}


@keyframes home_cover{
  from{ opacity: 0; transform:translate3D(0,20px,0) }
  to{ opacity: 1; transform:translate3D(0,0,0) }
}



@keyframes fadeIn_bg_nb{
  from { opacity: 0;  }
    to { opacity: 0.05;  }
}
@keyframes fadeIn{
  to { opacity: 1; transform:translate3D(0,0,0) }
}
@keyframes fadeInUp{
  from { opacity: 0; transform:translate3D(0,10px,0) }
    to { opacity: 1; transform:translate3D(0,0,0) }
}

@keyframes fadeInLogo{

  from { opacity: 0;transform: rotate(-90deg) translateX(-100%); }
  to { opacity: 1; transform: rotate(-90deg) translateX(-100%); }
}


@keyframes home_cover_img{
  0% { opacity: 0; filter: brightness(1.5); }
  100% { opacity: 1; filter: brightness(1.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_contact_popup{
  0% {  opacity: 0; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes hover_mosaique_item{
  0%{ opacity:0.8; }
  100%{ opacity:1 }
}

@keyframes clignoti{
  0% { opacity: 0; }
  1% { opacity: 1; }
  2% { opacity: 0; }
  5% { opacity: 0; }
  6% { opacity: 1; }
  7% { opacity: 0; }
  100% { opacity: 0;}
}