/* WEBSITE COPYRIGHT JULIEN WENDE - www.artstudio-jw.com - contact@artstudio-jw.com */

/* F O N T S */

@font-face {font-family:'degular_text';
  src:url('../fonts/Degular/degulartext-thin-webfont.eot');src:url('../fonts/Degular/degulartext-thin-webfont.eot?#iefix') format('embedded-opentype'),url('../fonts/Degular/degulartext-thin-webfont.woff2') format('woff2'),url('../fonts/Degular/degulartext-thin-webfont.woff') format('woff'),url('../fonts/Degular/degulartext-thin-webfont.ttf') format('truetype'),url('../fonts/Degular/degulartext-thin-webfont.svg#degular_textthin') format('svg');
  font-weight:200;font-style:normal;}
  
  @font-face {font-family:'degular_text';
  src:url('../fonts/Degular/degulartext-medium-webfont.eot');src:url('../fonts/Degular/degulartext-medium-webfont.eot?#iefix') format('embedded-opentype'),url('../fonts/Degular/degulartext-medium-webfont.woff2') format('woff2'),url('../fonts/Degular/degulartext-medium-webfont.woff') format('woff'),url('../fonts/Degular/degulartext-medium-webfont.ttf') format('truetype'),url('../fonts/Degular/degulartext-medium-webfont.svg#degular_textmedium') format('svg');
  font-weight:400;font-style:normal;}
  
  @font-face {font-family:'degular_text';
  src:url('../fonts/Degular/degulartext-bold-webfont.eot');src:url('../fonts/Degular/degulartext-bold-webfont.eot?#iefix') format('embedded-opentype'),url('../fonts/Degular/degulartext-bold-webfont.woff2') format('woff2'),url('../fonts/Degular/degulartext-bold-webfont.woff') format('woff'),url('../fonts/Degular/degulartext-bold-webfont.ttf') format('truetype'),url('../fonts/Degular/degulartext-bold-webfont.svg#degular_textbold') format('svg');
  font-weight:800;font-style:normal;}
  
  @font-face {font-family:'degular';
  src:url('../fonts/Degular/degular-thin-webfont.eot');src:url('../fonts/Degular/degular-thin-webfont.eot?#iefix') format('embedded-opentype'),url('../fonts/Degular/degular-thin-webfont.woff2') format('woff2'),url('../fonts/Degular/degular-thin-webfont.woff') format('woff'),url('../fonts/Degular/degular-thin-webfont.ttf') format('truetype'),url('../fonts/Degular/degular-thin-webfont.svg#degularthin') format('svg');
  font-weight:200;font-style:normal;}
  
  @font-face {font-family:'degular';
  src:url('../fonts/Degular/degular-medium-webfont.eot');src:url('../fonts/Degular/degular-medium-webfont.eot?#iefix') format('embedded-opentype'),url('../fonts/Degular/degular-medium-webfont.woff2') format('woff2'),url('../fonts/Degular/degular-medium-webfont.woff') format('woff'),url('../fonts/Degular/degular-medium-webfont.ttf') format('truetype'),url('../fonts/Degular/degular-medium-webfont.svg#degularmedium') format('svg');
  font-weight:400;font-style:normal;}
  
  @font-face {font-family:'degular';
  src:url('../fonts/Degular/degular-bold-webfont.eot');src:url('../fonts/Degular/degular-bold-webfont.eot?#iefix') format('embedded-opentype'),url('../fonts/Degular/degular-bold-webfont.woff2') format('woff2'),url('../fonts/Degular/degular-bold-webfont.woff') format('woff'),url('../fonts/Degular/degular-bold-webfont.ttf') format('truetype'),url('../fonts/Degular/degular-bold-webfont.svg#degularbold') format('svg');
  font-weight:800;font-style:normal;}
  
/* G E N E R A L */ 

html {width:100%;height:100vh;}
body {background:var(--color-secondary);margin:0;--scroll-behavior:smooth;scroll-behavior:smooth;overflow-x:hidden;overflow-y:visible;}
h1 {font-family:'Degular',sans-serif;font-size:70px;font-weight:400;text-transform:capitalize;color:var(--color-primary);}
h2 {font-family:'Degular',sans-serif;font-size:320px;line-height:225px;text-transform:capitalize;font-weight:800;color:var(--color-primary);}
h3 {font-family:'Degular',sans-serif;font-size:30px;font-weight:200;color:var(--color-primary);}
h4 {font-family:'Degular',sans-serif;font-size:40px;line-height:38px;font-weight:800;letter-spacing:1px;color:var(--color-primary);}
a {font-family:'Degular',sans-serif;text-decoration:none;color:var(--color-primary);}
p {font-family:'Degular_text',sans-serif;font-size:18px;line-height:24px;font-weight:400;color:var(--color-primary);}
span {font-family:'Degular',sans-serif;}
.title-extra{font-family:'Degular',sans-serif;font-size:160px;line-height:120px;font-weight:800;color:var(--color-primary);}
.title-big{font-family:'Degular',sans-serif;font-size:80px;line-height:65px;font-weight:800;color:var(--color-primary);}
.title-normal{font-family:'Degular',sans-serif;font-size:60px;font-weight:200;color:var(--color-primary);}
.title-small{font-family:'Degular',sans-serif;font-size:30px;line-height:28px;font-weight:800;letter-spacing:1px;color:var(--color-primary);}
.ghost {font-family:'Degular',sans-serif;font-size:0px;}
.surbrillance {font-weight:800;color:var(--color-accent);letter-spacing:.5px;}
.height-80 {height:80px;}
.padding-50 {padding-left:50px;}
.br {display:initial;}
.br-m {display:none;}


/*  T H E M E  M O D E */

.theme-light {
    --color-primary:#0F1A20;
    --color-primary-opacity:#1e1f2100;
    --color-secondary:#F4F1ED;
    --color-secondary-opacity:#fffbf700;
    --color-accent:#F9B438;
    --font-color:#C5C5C8;
    --color-grey:#9EA6A8;
    --img-logo:url(../img/btn/logo-JW.webp);
    --img-logo-reverse:url(../img/btn/logo-JW-dark.webp);
    --img-photo:url(../img/btn/julien-wende-light.webp);
    --img-photo-circle:url(../img/btn/icon-jw-light.webp);
    --img-arrow:url(../img/btn/icon-interne-light.webp);
    --img-arrow-return:url(../img/btn/icon-return-light.webp);
    --img-srv-branding:url(../img/btn/icon-srv-branding-light.webp);
    --img-srv-web:url(../img/btn/icon-srv-web-light.webp);
    --img-srv-print:url(../img/btn/icon-srv-print-light.webp);
    --img-srv-event:url(../img/btn/icon-srv-event-light.webp);
    --img-srv-socialmedia:url(../img/btn/icon-srv-socialmedia-light.webp);
    --img-srv-calligraphy:url(../img/btn/icon-srv-calligraphy-light.webp);
    --img-certificate:url(../img/btn/icon-certificate-dark.webp);
    --img-why-tarif:url(../img/btn/icon-why-tarif-light.webp);
    --img-why-shakehand:url(../img/btn/icon-why-shakehand-light.webp);
    --img-why-clock:url(../img/btn/icon-why-clock-light.webp);
    --img-why-rules:url(../img/btn/icon-why-rules-light.webp);
    --img-notation:url(../img/btn/icon-notation-light.webp);
    --img-signage:url(../img/btn/signage-light.webp);
    --img-in:url(../img/btn/icon-in-light.webp);
    --img-gg:url(../img/btn/icon-gg-light.webp);
    --img-contact-mobile:url(../img/btn/icon-mobile-light.webp);
    --img-contact-mail:url(../img/btn/icon-mail-light.webp);
    --img-process-1:url(../img/btn/icon-process-1-light.webp);
    --img-process-2:url(../img/btn/icon-process-2-light.webp);
    --img-process-3:url(../img/btn/icon-process-3-light.webp);
    --img-process-4:url(../img/btn/icon-process-4-light.webp);
    --img-process-5:url(../img/btn/icon-process-5-light.webp);
    --img-process-6:url(../img/btn/icon-process-6-light.webp);
  }
  .theme-dark {
    --color-primary:#F4F1ED;
    --color-primary-opacity:#fffbf700;
    --color-secondary:#0F1A20;
    --color-secondary-opacity:#1e1f2100;
    --color-accent:#F9B438;
    --font-color:#717171;
    --color-grey:#9EA6A8;
    --img-logo:url(../img/btn/logo-JW-dark.webp);
    --img-logo-reverse:url(../img/btn/logo-JW.webp);
    --img-photo:url(../img/btn/julien-wende-dark.webp);
    --img-photo-circle:url(../img/btn/icon-jw-dark.webp);
    --img-arrow:url(../img/btn/icon-interne-dark.webp);
    --img-arrow-return:url(../img/btn/icon-return-dark.webp);
    --img-srv-branding:url(../img/btn/icon-srv-branding-dark.webp);
    --img-srv-web:url(../img/btn/icon-srv-web-dark.webp);
    --img-srv-print:url(../img/btn/icon-srv-print-dark.webp);
    --img-srv-event:url(../img/btn/icon-srv-event-dark.webp);
    --img-srv-socialmedia:url(../img/btn/icon-srv-socialmedia-dark.webp);
    --img-srv-calligraphy:url(../img/btn/icon-srv-calligraphy-dark.webp);
    --img-certificate:url(../img/btn/icon-certificate-light.webp);
    --img-why-tarif:url(../img/btn/icon-why-tarif-dark.webp);
    --img-why-shakehand:url(../img/btn/icon-why-shakehand-dark.webp);
    --img-why-clock:url(../img/btn/icon-why-clock-dark.webp);
    --img-why-rules:url(../img/btn/icon-why-rules-dark.webp);
    --img-notation:url(../img/btn/icon-notation-dark.webp);
    --img-signage:url(../img/btn/signage-dark.webp);
    --img-in:url(../img/btn/icon-in-dark.webp);
    --img-gg:url(../img/btn/icon-gg-dark.webp);
    --img-contact-mobile:url(../img/btn/icon-mobile-dark.webp);
    --img-contact-mail:url(../img/btn/icon-mail-dark.webp);
    --img-process-1:url(../img/btn/icon-process-1-dark.webp);
    --img-process-2:url(../img/btn/icon-process-2-dark.webp);
    --img-process-3:url(../img/btn/icon-process-3-dark.webp);
    --img-process-4:url(../img/btn/icon-process-4-dark.webp);
    --img-process-5:url(../img/btn/icon-process-5-dark.webp);
    --img-process-6:url(../img/btn/icon-process-6-dark.webp);
  }

/* E F F E C T */

.effect-line-light {color:#0000;background:linear-gradient(90deg,#F9B438 50%,var(--color-primary) 0%) var(--_p,100%)/200% no-repeat;-webkit-background-clip: text;background-clip: text;-webkit-transition:.4s;transition:.4s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;}
.effect-line-light:hover {--_p: 0%;}
.effect-line-dark {color:#0000;background:linear-gradient(90deg,#F9B438 50%,var(--color-secondary) 0%) var(--_p,100%)/200% no-repeat;-webkit-background-clip: text;background-clip: text;-webkit-transition:.4s;transition:.4s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;}
.effect-line-dark:hover {--_p: 0%;}

#logo-anim {z-index:20;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);min-width:100%;min-height:100%;animation:forwards;animation-delay:4s;animation-duration:.6s;animation-name:backvideo;animation-timing-function:ease-in-out;}
@keyframes backvideo {0%{top:50%;}100%{top:-100%}}

/* C T A */

.cta {position:absolute;cursor:pointer;border:none;outline:none;border-radius:60px;width:325px;height:70px;padding:0px 0px 5px 30px;text-align:left;font-family:'Degular',sans-serif;font-size:22px;font-weight:600;letter-spacing:.5px;color:var(--color-secondary);background:linear-gradient(90deg,#F9B438 50%,var(--color-primary) 0%) var(--_p,100%)/200% no-repeat;-webkit-background-clip:border-box;background-clip:border-box;-webkit-transition:.8s;transition:.8s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;}
.cta:hover {--_p: 0%;color:#1E1F21;-webkit-transition:.2s;transition:.2s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;}
.cta .link {position:absolute;background-color:var(--color-secondary);width:15px;height:15px;top:28px;left:280px;border-radius:40px;padding:-20px;-webkit-transition:.4s;transition:.4s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;}
.cta:hover .link {background-color:var(--color-secondary);transform:scale(4);-webkit-transition:.2s;transition:.2s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;background-image:var(--img-arrow);background-position:center;background-repeat:no-repeat;background-size:cover;}

.cta-outline {position:absolute;cursor:pointer;border:none;outline:none;border-radius:60px;width:325px;height:70px;padding:0px 0px 5px 30px;text-align:left;font-family:'Degular',sans-serif;font-size:22px;font-weight:600;letter-spacing:.5px;border:1px solid var(--color-primary);color:var(--color-primary);background:linear-gradient(90deg,#F9B438 50%,var(--color-secondary) 0%) var(--_p,100%)/200% no-repeat;-webkit-background-clip:border-box;background-clip:border-box;-webkit-transition:.8s;transition:.8s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;}
.cta-outline:hover {--_p: 0%;color:#1E1F21;border:1px solid var(--color-accent);-webkit-transition:.2s;transition:.2s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;}
.cta-outline .link {position:absolute;background-color:var(--color-primary);width:15px;height:15px;top:28px;left:280px;border-radius:40px;padding:-20px;-webkit-transition:.4s;transition:.4s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;}
.cta-outline:hover .link {background-color:var(--color-secondary);transform:scale(4);-webkit-transition:.2s;transition:.2s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;background-image:var(--img-arrow);background-position:center;background-repeat:no-repeat;background-size:cover;}

/* H E A D E R */

.line-header {z-index:30;position:fixed;background-color:var(--color-primary);height:1px;top:80px;width:100%;left:-100%;}
.A-lineheader {position:fixed;left:-100%;animation:forwards;animation-delay:1.5s;animation-duration:3s;animation-name:A-lineheader;animation-timing-function:ease-in-out;}
@keyframes A-lineheader {0%{left:-100%;background-color:var(--color-accent);}50%{left:0%;background-color:var(--color-primary);}100%{left:100%;}}

.header {z-index:100;position:fixed;top:0px;width:90%;margin:0 auto;padding:10px 80px 10px 80px;background:var(--color-secondary);transition:top 0.3s;}
.A-header {position:fixed;transform: translateY(-300px);animation:forwards;animation-delay:2s;animation-duration:1.5s;animation-name:A-header;animation-timing-function:ease-in-out;}
@keyframes A-header {0%{transform: translateY(-300px);}100%{transform: translateY(0px);}}

.header ul {position:absolute;margin:0;padding:0px;list-style:none;overflow:hidden;left:27%;height:75px;top:0px;}
.header li a {display:block;text-align:center;text-decoration:none;padding:25px 40px 20px 40px;margin-left:10px;font-family:'Degular',sans-serif;font-size:22px;font-weight:400;font-style:normal;letter-spacing:2px;text-transform:uppercase;text-decoration:none;-webkit-transition:.5s;transition:.5s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;}
.header .logo {display:block;float:left;width:60px;height:60px;text-decoration:none;background-image:var(--img-logo);background-position:center;background-repeat:no-repeat;background-size:cover;-webkit-transition:1s;transition:1s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;}
.header .logo:hover {background-image:url("../img/btn/logo-JW-hover.webp");-webkit-transition:.4s;transition:.4s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;}

.header .menu {clear:both;max-height:0;transition:max-height .2s ease-out;}
.header .menu-icon {cursor:pointer;padding:25px 40px;position:relative;float:right;user-select:none;}
.header .menu-icon .navicon {background:var(--color-primary);display:block;height:1px;position:relative;transition:.2s ease-out;width:40px;}
.header .menu-icon .navicon:before, .header .menu-icon .navicon:after {background:var(--color-primary);content:'';display:block;height:80%;position:absolute;transition:all .2s ease-out;width:100%;}
.header .menu-icon .navicon:before {top:10px;}
.header .menu-icon .navicon:after {top:-10px;}

.header .menu-btn {display:none;}
.header .menu-btn:checked ~ .menu {overflow: visible;width:100%;min-height:200px;margin-left:-30%;margin-top:13%;background:var(--color-secondary);border-bottom: 1px solid #0F1A20;}
.header .menu-btn:checked ~ .menu-icon .navicon {background:transparent;}
.header .menu-btn:checked ~ .menu-icon .navicon:before {transform: rotate(-45deg);}
.header .menu-btn:checked ~ .menu-icon .navicon:after {transform: rotate(45deg);}
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before, .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {top:0;}

/* C T N  -  H O M E */

.ctn-home {z-index:2;position:relative;width:100%;height:100vh;background-color:var(--color-secondary);margin:0;padding:120px 50px 50px 50px;}

.box-desc {z-index:5;position:absolute;left:80px;bottom:250px;width:1150px;height:580px;margin:0;padding:0;}
.box-desc .h1-1 {position:absolute;bottom:380px;}
.box-desc .h2-1 {position:absolute;bottom:-50px;}
.box-desc .h2-2 {position:absolute;bottom:-275px;left:-12px;}
.box-desc p {position:absolute;bottom:245px;left:480px;font-family:'Degular';font-size:26px;line-height:30px;font-weight:400;font-style:normal;}

.box-img {position:absolute;width:500px;height:700px;float:right;right:100px;bottom:170px;background-image:var(--img-photo);background-position:center;background-repeat:no-repeat;background-size:contain;}

.A-box-img {opacity:0;animation:forwards;animation-delay:0.1s;animation-duration:2s;animation-name:A-box-img;animation-timing-function:ease-in-out;}
@keyframes A-box-img {0%{opacity:0;}100%{opacity:1;}}
.A-h1 {opacity:0;animation:forwards;animation-delay:0.1s;animation-duration:2s;animation-name:A-h1;animation-timing-function:ease-in-out;}
@keyframes A-h1 {0%{transform:translateX(-1000px);opacity:0;}100%{transform:translateX(Opx);opacity:1;}}
.A-h2-1 {opacity:0;animation:forwards;animation-delay:0.5s;animation-duration:2s;animation-name:A-h2-1;animation-timing-function:ease-in-out;}
@keyframes A-h2-1 {0%{transform:translateX(-1000px);opacity:0;}100%{transform:translateX(Opx);opacity:1;}}
.A-h2-2 {opacity:0;animation:forwards;animation-delay:1s;animation-duration:2s;animation-name:A-h2-2;animation-timing-function:ease-in-out;}
@keyframes A-h2-2 {0%{transform:translateX(-1000px);opacity:0;}100%{transform:translateX(Opx);opacity:1;}}
.A-h3-1 {opacity:0;animation:forwards;animation-delay:1.5s;animation-duration:2s;animation-name:A-h3-1;animation-timing-function:ease-in-out;}
@keyframes A-h3-1 {0%{transform:translateX(-1000px);opacity:0;}100%{transform:translateX(Opx);opacity:1;}}
.A-p {opacity:0;animation:forwards;animation-delay:1.8s;animation-duration:0.8s;animation-name:A-p;animation-timing-function:ease-in-out;}
@keyframes A-p {0%{transform:translateX(-80px);opacity:0;}100%{transform:translateX(Opx);opacity:1;}}


/* C T N  -  S E R V I C E S */

.ctn-services {z-index:2;position:relative;width:100%;background:var(--color-primary);top:-170px;height:160px;}
.ctn-services .title-normal,.ctn-services .title-small {position:relative;color:var(--color-secondary);float:right;right:80px;} 
.ctn-services .title-normal {position: relative;top:20px;}
.ctn-services .title-small {position: relative;top:90px;opacity:.5;left:245px;}

.ctn-icon {position: relative;width:50%;height:160px;padding-left:65px;}
.icon-srv {display: inline-block;width:10%;height:50%;margin:35px 35px 0px 0px;}

.info-bulle {z-index:10;display:none;position:fixed;top:-54px;width:1300px;height:201px;background:var(--color-accent);padding:0px 0px 0px 80px;}
.info-bulle h4 {position:relative;top:0px;color:#0F1A20;}
.info-bulle p {position:relative;top:-40px;font-size:26px;line-height:30px;letter-spacing:.5px;color:#0F1A20;}

.srv_1:hover .info-bulle,.srv_2:hover .info-bulle,.srv_3:hover .info-bulle,.srv_4:hover .info-bulle,.srv_5:hover .info-bulle,.srv_6:hover .info-bulle 
{display:block;position:fixed;top:-54px;width:1300px;height:201px;background:var(--color-accent);padding:0px 0px 0px 80px;}
.srv_1:hover .info-bulle {left:1150%}
.srv_2:hover .info-bulle {left:960%;}
.srv_3:hover .info-bulle {left:770%;}
.srv_4:hover .info-bulle {left:580%;}
.srv_5:hover .info-bulle {left:390%;}
.srv_6:hover .info-bulle {left:200%;}

.srv_1,.srv_2,.srv_3,.srv_4,.srv_5,.srv_6 {transform: scale(0.8);}
.srv_1 {background-image:var(--img-srv-branding);background-position:center;background-repeat:no-repeat;background-size:cover;-webkit-transition:.2s;transition:.2s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;}
.srv_2 {background-image:var(--img-srv-web);background-position:center;background-repeat:no-repeat;background-size:cover;-webkit-transition:.2s;transition:.2s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;}
.srv_3 {background-image:var(--img-srv-print);background-position:center;background-repeat:no-repeat;background-size:cover;-webkit-transition:.2s;transition:.2s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;}
.srv_4 {background-image:var(--img-srv-event);background-position:center;background-repeat:no-repeat;background-size:cover;-webkit-transition:.2s;transition:.2s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;}
.srv_5 {background-image:var(--img-srv-socialmedia);background-position:center;background-repeat:no-repeat;background-size:cover;-webkit-transition:.2s;transition:.2s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;}
.srv_6 {background-image:var(--img-srv-calligraphy);background-position:center;background-repeat:no-repeat;background-size:cover;-webkit-transition:.2s;transition:.2s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;}

.srv_1:hover {background-image:url(../img/btn/icon-srv-branding-hover.webp);background-position:center;background-repeat:no-repeat;background-size:cover;-webkit-transition:.2s;transition:.2s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;}
.srv_2:hover {background-image:url(../img/btn/icon-srv-web-hover.webp);background-position:center;background-repeat:no-repeat;background-size:cover;-webkit-transition:.2s;transition:.2s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;}
.srv_3:hover {background-image:url(../img/btn/icon-srv-print-hover.webp);background-position:center;background-repeat:no-repeat;background-size:cover;-webkit-transition:.2s;transition:.2s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;}
.srv_4:hover {background-image:url(../img/btn/icon-srv-event-hover.webp);background-position:center;background-repeat:no-repeat;background-size:cover;-webkit-transition:.2s;transition:.2s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;}
.srv_5:hover {background-image:url(../img/btn/icon-srv-socialmedia-hover.webp);background-position:center;background-repeat:no-repeat;background-size:cover;-webkit-transition:.2s;transition:.2s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;}
.srv_6:hover {background-image:url(../img/btn/icon-srv-calligraphy-hover.webp);background-position:center;background-repeat:no-repeat;background-size:cover;-webkit-transition:.2s;transition:.2s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;}

/* C T N - I N T R O */
.ctn-intro {z-index:2;position:relative;width:100%;height:430px;top:-170px;left:0px;padding:40px 0px 0px 80px;background:var(--color-secondary);}
.ctn-intro p {position: relative;width:800px;font-family:'Degular';font-size:40px;line-height:50px;}
.ctn-intro .cta-outline{left:420px;}

/* C T N  -  P R O J E C T S */

#projets {scroll-margin-left:50px;}
.ctn-project {z-index:2;position:relative;width:100%;top:-330px;background:var(--color-secondary);padding:40px 0px 0px 80px;}

.line-bottom {border-bottom:1px solid var(--color-primary);}

.gallery {position:relative;width:100%;top:60px;left:-80px;}
.gallery_item {cursor:pointer;position:relative;width:100%;height:200px;background-color:var(--color-secondary);border-top:1px solid var(--color-primary);}
.gallery_item:hover {background-color:var(--color-primary);}

.prj_arrow {position:absolute;width:115px;height:115px;top:40px;left:-130px;background-color:var(--color-secondary);border-radius:80px;background-image:var(--img-arrow);background-position:center;background-repeat:no-repeat;background-size:cover;}
.prj_date {position:absolute;top:50px;right:80px;font-family:'Degular',sans-serif;font-size:70px;font-weight:100;letter-spacing:.5px;color:var(--color-primary);opacity:.2;-webkit-transition:.8s;transition:.8s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;}
.prj_title {position:relative;top:-10px;left:80px;font-family:'Degular',sans-serif;font-size:120px;font-weight:300;letter-spacing:.5px;color:var(--color-primary);opacity:1;-webkit-transition:.8s;transition:.8s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;}
.prj_tag {position:relative;left:90px;top:-30px;font-family:'Degular',sans-serif;font-size:30px;font-weight:100;letter-spacing:.5px;color:var(--color-primary);opacity:1;-webkit-transition:.8s;transition:.8s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;}

.gallery_item:hover .prj_arrow {left:80px;-webkit-transition:.2s;transition:.2s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;}
.gallery_item:hover .prj_date {opacity:0;-webkit-transition:.2s;transition:.2s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;}
.gallery_item:hover .prj_title {color:var(--color-secondary);left:225px;-webkit-transition:.2s;transition:.2s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;}
.gallery_item:hover .prj_tag {color:var(--color-secondary);left:235px;-webkit-transition:.2s;transition:.2s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;}

.prj_0, .prj_1, .prj_2, .prj_3, .prj_4, .prj_5, .prj_6, .prj_7, .prj_8 {background-image:url(../img/btn/cover_project.webp);background-position:center;background-repeat:no-repeat;background-size:cover;-webkit-transition:.8s;transition:.8s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;}
.prj_0:hover {background-image:linear-gradient(90deg, var(--color-primary) 50%, var(--color-primary-opacity)),url(../img/projets/fcsm/cover__fcsm.webp);background-position:center;background-repeat:no-repeat;background-size:cover;-webkit-transition:.2s;transition:.2s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;}
.prj_1:hover {background-image:linear-gradient(90deg, var(--color-primary) 50%, var(--color-primary-opacity)),url(../img/projets/beeateam/cover__beeateam.webp);background-position:center;background-repeat:no-repeat;background-size:cover;-webkit-transition:.2s;transition:.2s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;}
.prj_2:hover {background-image:linear-gradient(90deg, var(--color-primary) 50%, var(--color-primary-opacity)),url(../img/projets/horae/cover__horae.webp);background-position:center;background-repeat:no-repeat;background-size:cover;-webkit-transition:.2s;transition:.2s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;}
.prj_3:hover {background-image:linear-gradient(90deg, var(--color-primary) 50%, var(--color-primary-opacity)),url(../img/projets/delta/cover__delta.webp);background-position:center;background-repeat:no-repeat;background-size:cover;-webkit-transition:.2s;transition:.2s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;}
.prj_4:hover {background-image:linear-gradient(90deg, var(--color-primary) 50%, var(--color-primary-opacity)),url(../img/projets/esart/cover__esart.webp);background-position:center;background-repeat:no-repeat;background-size:cover;-webkit-transition:.2s;transition:.2s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;}
.prj_5:hover {background-image:linear-gradient(90deg, var(--color-primary) 50%, var(--color-primary-opacity)),url(../img/projets/vineo/cover__vineo.webp);background-position:center;background-repeat:no-repeat;background-size:cover;-webkit-transition:.2s;transition:.2s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;}
.prj_6:hover {background-image:linear-gradient(90deg, var(--color-primary) 50%, var(--color-primary-opacity)),url(../img/projets/isart/cover__isart.webp);background-position:center;background-repeat:no-repeat;background-size:cover;-webkit-transition:.2s;transition:.2s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;}
.prj_7:hover {background-image:linear-gradient(90deg, var(--color-primary) 50%, var(--color-primary-opacity)),url(../img/projets/nft/cover__nft.webp);background-position:center;background-repeat:no-repeat;background-size:cover;-webkit-transition:.2s;transition:.2s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;}
.prj_8:hover {background-image:linear-gradient(90deg, var(--color-primary) 50%, var(--color-primary-opacity)),url(../img/projets/rejv/cover__rejv.webp);background-position:center;background-repeat:no-repeat;background-size:cover;-webkit-transition:.2s;transition:.2s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;}

/* C T N  -  A S K */
.ctn-ask {z-index:2;position:relative;width:100%;height:620px;background-color:var(--color-primary);top:-272px;padding:40px 0px 0px 80px;}
.ctn-ask p {position:relative;width:1200px;font-family:'Degular';font-weight:200;font-size:80px;line-height:80px;color:var(--color-secondary);}

.ctn-ask .cta {top:420px;}
.ctn-ask .cta {color:var(--color-primary);background:linear-gradient(90deg,#F9B438 50%,var(--color-secondary) 0%) var(--_p,100%)/200% no-repeat;-webkit-background-clip:border-box;background-clip:border-box;-webkit-transition:.8s;transition:.8s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;}
.ctn-ask .cta:hover {--_p: 0%;color:#1E1F21;-webkit-transition:.2s;transition:.2s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;}
.ctn-ask .cta .link {position:absolute;background-color:var(--color-primary);background-image:url(../img/btn/icon-interne-dark.webp);width:15px;height:15px;top:28px;left:280px;border-radius:40px;padding:-20px;-webkit-transition:.4s;transition:.4s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;}
.ctn-ask .cta:hover .link {background-color:var(--color-primary);transform:scale(4);-webkit-transition:.2s;transition:.2s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;background-image:url(../img/btn/icon-interne-dark.webp);background-position:center;background-repeat:no-repeat;background-size:cover;}

.ctn-ask .cta-outline {top:420px;left:420px;}
.ctn-ask .cta-outline {position:absolute;cursor:pointer;border:none;outline:none;border-radius:60px;width:325px;height:70px;padding:0px 0px 5px 30px;text-align:left;font-family:'Degular',sans-serif;font-size:22px;font-weight:600;letter-spacing:.5px;border:1px solid var(--color-secondary);color:var(--color-secondary);background:linear-gradient(90deg,#F9B438 50%,var(--color-primary) 0%) var(--_p,100%)/200% no-repeat;-webkit-background-clip:border-box;background-clip:border-box;-webkit-transition:.8s;transition:.8s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;}
.ctn-ask .cta-outline:hover {--_p: 0%;color:#1E1F21;border:1px solid var(--color-accent);-webkit-transition:.2s;transition:.2s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;}
.ctn-ask .cta-outline .link {position:absolute;background-color:var(--color-secondary);width:15px;height:15px;top:28px;left:280px;border-radius:40px;padding:-20px;-webkit-transition:.4s;transition:.4s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;}
.ctn-ask .cta-outline:hover .link {background-color:var(--color-secondary);transform:scale(4);-webkit-transition:.2s;transition:.2s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;background-image:var(--img-arrow);background-position:center;background-repeat:no-repeat;background-size:cover;}

/* C T N  -  W H Y */

.ctn-why {z-index:2;position:relative;width:100%;height:1180px;top:-272px;padding:40px 0px 0px 0px;background-color: var(--color-secondary);}

.why-cl {position: relative;width:100%;height:640px;margin:0;padding:0;top:60px;}
.why-cl-1 {position: relative;width:50%;height:640px;display:inline-block;padding-left:80px;}
.why-cl-2 {position: relative;width:30%;height:460px;display:inline-block;padding:180px 0px 0px 50px;top:-160px;opacity:.3;}

.why-cl-1 .why-certificate {position: relative;width:120px;height:120px;background-image:var(--img-certificate);background-position:center;background-repeat:no-repeat;background-size:cover;}
.why-cl-1 .title-big {position: absolute;width:440px;left:240px;top:-5px;}
.why-cl-1 .title-small {position:absolute;width:400px;top:180px;}
.why-cl-1 p {position:absolute;top:240px;padding-right:100px;}
.why-cl-1 .cta{top:540px;}
.why-cl-1 .cta-outline{top:540px;left:420px;}

.why-cl-2 .why-grid {position:relative;width:200px;height:160px;display:inline-block;}
.why-cl-2 .why-icon {position:relative;width:60px;height:60px;margin:0 auto;}

.why-icon-1 {background-image:var(--img-why-tarif);background-position:center;background-repeat:no-repeat;background-size:cover;}
.why-icon-2 {background-image:var(--img-why-shakehand);background-position:center;background-repeat:no-repeat;background-size:cover;}
.why-icon-3 {background-image:var(--img-why-clock);background-position:center;background-repeat:no-repeat;background-size:cover;}
.why-icon-4 {background-image:var(--img-why-rules);background-position:center;background-repeat:no-repeat;background-size:cover;}

.why-cl-2 p {text-align:center;font-weight:800;}

.ctn-why .title-normal {position: relative;left:80px;top:140px;}
.ctn-why .notation {position: relative;width:200px;height:33px;left:400px;top:85px;background-image:var(--img-notation);background-position:center;background-repeat:no-repeat;background-size:cover;}

.box-avis {position:relative;width:95%;height:190px;top:140px;padding-left:80px;}
.avis {position:relative;width:24%;height:160px;margin-right:40px;padding:10px 30px 10px 30px;display: inline-block;border-radius:20px;border:1px solid var(--color-primary);}
.avis .name {font-size:22px;font-weight: 800;}
.avis .datation {padding-left:15px;font-weight:200;font-style: italic;color: var(--color-grey);}

/* C T N - A B O U T */

.ctn-about {z-index:2;position:relative;width:100%;height:640px;top:-272px;padding:80px 0px 0px 80px;border-top: 1px solid var(--color-primary);background-color: var(--color-secondary);}
.contact-coordonnees {position:relative;margin-top:160px;font-size:35px;line-height:30px;}
.icon-contact {position:relative;width:35px;height:35px;background:none;border:none;text-decoration:none;margin-right:10px;}
.mobile {top:5px;background-image:var(--img-contact-mobile);background-position:center;background-repeat:no-repeat;background-size:cover;}
.mail {top:5px;background-image:var(--img-contact-mail);background-position:center;background-repeat:no-repeat;background-size:cover;}

.circle-contact {position:relative;top:-400px;left:950px;width:250px;height:250px;border:1px solid var(--color-primary);border-radius:50%;background-image:var(--img-photo-circle);background-position:center;background-repeat:no-repeat;background-size:cover;}
.circle-contact-active {position:relative;width:25px;height:25px;top:-590px;left:1180px;border-radius:50%;background:var(--color-accent);box-shadow:var(--color-accent) 0px 0px 30px;}
.signage {position:relative;opacity:.1;top:-375px;left:950px;width:333px;height:253px;background-image:var(--img-signage);background-position:center;background-repeat:no-repeat;background-size:cover;}

/* C T N - F O O T E R */

footer {position:sticky;width:100%;margin-top:-280px;background-color: var(--color-primary);padding:40px 80px 40px 80px;height:70px;}
footer .logo {position:relative;width:60px;height:60px;opacity:.3;background-image:var(--img-logo-reverse);background-position:center;background-repeat:no-repeat;background-size:cover;}
footer p {color: var(--color-secondary);font-weight:400;margin-top:-42px;margin-left:100px;}
.social-media {position:absolute;width:120px;height:60px;top:50px;right:240px;}
.in {position:absolute;width:50px;height:50px;top:0px;background-image:var(--img-in);background-position:center;background-repeat:no-repeat;background-size:cover;-webkit-transition:0.4s;transition:0.4s;}
.gg {position:absolute;width:50px;height:50px;left:70px;top:2px;background-image:var(--img-gg);background-position:center;background-repeat:no-repeat;background-size:cover;-webkit-transition:0.4s;transition:0.4s;}
.in:hover {background-image:url(../img/btn/icon-in-hover.webp);background-position:center;background-repeat:no-repeat;background-size:cover;-webkit-transition:0.4s;transition:0.4s;}
.gg:hover {background-image:url(../img/btn/icon-gg-hover.webp);background-position:center;background-repeat:no-repeat;background-size:cover;-webkit-transition:0.4s;transition:0.4s;}




















/* P R O J E T S */

.ctn-home-w {position:relative;min-width:100%;min-height:100%;display:grid;grid-template-columns:repeat(2, 1fr);grid-template-rows:1fr;grid-column-gap:0px;grid-row-gap:0px;}
.ctn-home-w-l {z-index:10;grid-area: 1 / 1 / 2 / 2;color:var(--color-primary);padding:0px 50px 0px 50px;overflow: hidden;}
.ctn-home-w-r { grid-area: 1 / 1 / 2 / 3; }

.btn_return {position:absolute;width:100px;height:100px;top:25px;left:25px;z-index:5;-webkit-transition:.2s;transition:.2s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;background-image:var(--img-arrow-return);background-position:center;background-repeat:no-repeat;background-size:cover;transform:translateX(0px);animation:forwards;animation-delay:0s;animation-duration:.5s;animation-name:btn-return;animation-timing-function:ease-in-out;}
@keyframes btn-return {0%{top:-333px;}100%{top:25px}}
.btn_return:hover {transform:translateX(-10px);-webkit-transition:.2s;transition:.2s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;}
.return_text {position:absolute;color:var(--color-primary);font-family: Degular;font-size:22px;width:250px;top:33px;left:80px;letter-spacing:.5px;opacity:0;-webkit-transition:.2s;transition:.2s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;}
.btn_return:hover .return_text {opacity:1;-webkit-transition:.2s;transition:.2s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;}

.ctn-desc-w {position:absolute;width:45%;bottom:50px;left:50px;animation:forwards;animation-delay:0s;animation-duration:.6s;animation-name:ctn-desc-w;animation-timing-function:ease-in-out;}
@keyframes ctn-desc-w {0%{left:-1000px;}100%{left:50px;}}
.ctn-home-w h2 {z-index:5;font-size:150px;line-height:120px;}
.ctn-desc-w span{position:relative;font-size:25px;line-height:30px;top:-60px;}

.table-w {position:relative;opacity:.5;top:-20px;width:80%;height:60px;border-bottom:.5px solid var(--color-primary);font-family:'Degular';font-size:22px;color:var(--color-primary);}
.table_1 {position:relative;left:0px;top:15px;}
.table_2 {position:relative;left:250px;top:-15px;}

.skyline-02 {position:relative;width:50%;left:50%;height:2px;bottom:0px;background:linear-gradient(to right, var(--color-secondary), var(--color-primary));}

.fcsm {background-image:linear-gradient(90deg, var(--color-secondary)30%, var(--color-secondary-opacity)70%),url(../img/projets/fcsm/cover__w__fcsm.webp);position:relative;right:-100%;background-position:center;background-repeat:no-repeat;background-size:cover;}
.beeateam {background-image:linear-gradient(90deg, var(--color-secondary)30%, var(--color-secondary-opacity)70%),url(../img/projets/beeateam/cover__w__beeateam.webp);position:relative;right:-100%;background-position:center;background-repeat:no-repeat;background-size:cover;}
.horae {background-image:linear-gradient(90deg, var(--color-secondary)30%, var(--color-secondary-opacity)70%),url(../img/projets/horae/cover__w__horae.webp);position:relative;right:-100%;background-position:center;background-repeat:no-repeat;background-size:cover;}
.delta {background-image:linear-gradient(90deg, var(--color-secondary)30%, var(--color-secondary-opacity)70%),url(../img/projets/delta/cover__w__delta.webp);position:relative;right:-100%;background-position:center;background-repeat:no-repeat;background-size:cover;}
.esart {background-image:linear-gradient(90deg, var(--color-secondary)30%, var(--color-secondary-opacity)70%),url(../img/projets/esart/cover__w__esart.webp);position:relative;right:-100%;background-position:center;background-repeat:no-repeat;background-size:cover;}
.vineo {background-image:linear-gradient(90deg, var(--color-secondary)30%, var(--color-secondary-opacity)70%),url(../img/projets/vineo/cover__w__vineo.webp);position:relative;right:-100%;background-position:center;background-repeat:no-repeat;background-size:cover;}
.isart {background-image:linear-gradient(90deg, var(--color-secondary)30%, var(--color-secondary-opacity)70%),url(../img/projets/isart/cover__w__isart.webp);position:relative;right:-100%;background-position:center;background-repeat:no-repeat;background-size:cover;}
.nft {background-image:linear-gradient(90deg, var(--color-secondary)30%, var(--color-secondary-opacity)70%),url(../img/projets/nft/cover__w__nft.webp);position:relative;right:-100%;background-position:center;background-repeat:no-repeat;background-size:cover;}
.rejv {background-image:linear-gradient(90deg, var(--color-secondary)30%, var(--color-secondary-opacity)70%),url(../img/projets/rejv/cover__w__rejv.webp);position:relative;right:-100%;background-position:center;background-repeat:no-repeat;background-size:cover;}
.fcsm, .beeateam, .horae, .delta, .esart, .vineo, .isart, .nft, .rejv {animation:forwards;animation-delay:.5s;animation-duration:.5s;animation-name:img-w;animation-timing-function:ease-in-out;}
@keyframes img-w {0%{right:-100%;}100%{right:0%}}

.cta-w {position:relative;top:600px;margin-bottom:60px;animation:forwards;animation-delay:1s;animation-duration:.6s;animation-name:fullscreen;animation-timing-function:ease-in-out;}
@keyframes fullscreen {0%{top:600px;}100%{top:60px;}}

.cta-float {position:relative;left:0px;margin-top:20px;margin-bottom:40px;}

.ctn-challenge-w {position:relative;width:100%-600px;padding:100px 550px 100px 50px;color: var(--color-primary);}
.ctn-challenge-w p {font-size:40px;line-height:50px;}

.ctn-details-w {position:relative;background-color:#FFFBF7;width:100%;padding:40px 0px 40px 0px;margin-bottom:60px;}
.swipe-w {position:relative;height:590px;margin:0px 55px;top:40px;margin-bottom:80px;overflow-x:scroll;display:flex;flex-direction:row;background-color:#FFFBF7;}
.card-w {margin-top:40px;width:700px;height:490px;flex:none;border-radius:15px;border:1px solid var(--color-grey);background-color:#FFFBF7;}
.card-w-number {z-index:5;position:relative;width:80px;height:80px;border-radius:40px;border:1px solid var(--color-grey);background-color:#FFFBF7;background-color:#FFFBF7;color:var(--color-grey);text-align: center;left:43%;top:-40px;}
.card-w-number span {position:relative;font-family: Degular;font-size:50px;line-height:60px;top:5px;}
.card-w-img {position:relative;cursor:zoom-in;margin-top:-80px;width:100%;height:300px;object-fit:contain;}
.card-w-desc{height:180px;display:flex;justify-content:center;align-items:center;}
.card-w-desc p {font-size:22px;line-height:24px;color:#1E1F21;padding:0px 40px;text-align:center;}

.ctn-img-final {position:relative;width:100%-100px;padding:0px 50px;}
.img-project-final {cursor:zoom-in;width:100%;height:800px;object-fit:cover;margin:0px 0px 20px 0px;border-radius:15px;}
  
.more-p {font-size:40px;line-height:50px;margin-bottom:-40px;}


/* P R O F I L */

.ctn-profil-img {position:fixed;width:40%;height:80%;float:right;right:0px;bottom:0px;background-image:var(--img-photo);background-position:center;background-repeat:no-repeat;background-size:cover;opacity:0;animation:forwards;animation-delay:.8s;animation-duration:2s;animation-name:ctn-profil-img;animation-timing-function:ease-in-out;}
@keyframes ctn-profil-img {0%{opacity:0;}100%{opacity: 1;}}
.ctn-profil {position:relative;width:55%;left:-3000px;padding:10px 55px 100px 55px;animation:forwards;animation-delay:0s;animation-duration:.8s;animation-name:ctn-profil;animation-timing-function:ease-in-out;}
@keyframes ctn-profil {0%{left:-3000px;}100%{left:0px;}}
.ctn-profil h1 {position:relative;margin-top:220px;left:-1000px;font-size:200px;line-height:145px;font-weight:800;animation:forwards;animation-delay:.2s;animation-duration:.8s;animation-name:ctn-profil-h1;animation-timing-function:ease-in-out;}
@keyframes ctn-profil-h1 {0%{left:-1000px;}100%{left:0px;}}
.profil-p {font-size:25px;line-height:30px;}
.ctn-profil-talk p {font-size:80px;line-height:80px;}
.ctn-profil-talk h4 {margin-top:-40px;}
.ctn-profil-talk .cta {margin-top:0px;}


/* M E N T I O N S - L E G A L E S */

.ctn-profil-card {position:fixed;width:40%;height:80%;float:right;right:0px;bottom:0px;opacity:0;animation:forwards;animation-delay:.8s;animation-duration:2s;animation-name:ctn-profil-img;animation-timing-function:ease-in-out;}
@keyframes ctn-profil-img {0%{opacity:0;}100%{opacity: 1;}}
.ctn-mention-card {position:absolute;width:70%;height:70%;background-color:var(--color-primary);color:var(--color-secondary);border-radius:15px;right:15%;top:5%;text-align:center;}
.logo-card {position:relative;width:20%;height:20%;top:10%;left:38%;background-image:var(--img-logo-reverse);background-position:center;background-repeat:no-repeat;background-size:cover;}
.ctn-mention-card h3 {position:relative;padding-top:40px;color:var(--color-secondary);}
.ctn-mention-card p {position:relative;margin-top:-30px;color:var(--color-secondary);}




/* T H E M E  C O L O R */

.switch {position:fixed;display:inline-block;right:180px;top:40px;width:60px;height:15px;}
.switch input {opacity:0;width:0;height:0;}
.slider-theme {position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--font-color);-webkit-transition:0.4s;transition:0.4s;}
.slider-theme:before {position:absolute;content:"";height:30px;width:30px;left:-10px;bottom:4px; top:0;bottom:0;margin:auto 0;-webkit-transition:0.4s;transition:0.4s;background:var(--color-primary) url('../img/btn/icon-moon.webp');background-position:center;background-repeat:no-repeat;background-size:cover;border:8px solid var(--color-secondary);}

input:checked + .slider-theme {background-color:#F9B438;}
input:checked + .slider-theme:before {-webkit-transform:translateX(40px);-ms-transform:translateX(40px);transform:translateX(40px);background:var(--color-primary) url('../img/btn/icon-sun.webp');background-position:center;background-repeat:no-repeat;background-size:cover;border:8px solid var(--color-secondary);}

.slider-theme.round {border-radius:34px;}
.slider-theme.round:before {border-radius:50%;}


/* S C R O L L B A R */

::-webkit-scrollbar {height:0px;width:0px;}
::-webkit-scrollbar:horizontal {height:15px;width:10px;}
::-webkit-scrollbar-track:horizontal {background:none;border-radius:10px;}
::-webkit-scrollbar-thumb:horizontal {background:var(--color-grey);border-radius:10px;}
::-webkit-scrollbar-thumb:horizontal:hover {background:#1E1F21;}


/* O P T I M I S A T I O N - F I R E F OX */

@supports (-moz-appearance:button) and (contain:paint) {
  .icon-contact {position:relative;width:25px;height:25px;background:none;border:none;text-decoration:none;top:-7px;margin-right:10px;}
  .mobile {background-image:var(--img-contact-mobile);background-position:center;background-repeat:no-repeat;background-size:cover;}
  .mail {background-image:var(--img-contact-mail);background-position:center;background-repeat:no-repeat;background-size:cover;}
}


/* __________________________________________________ */
/* __________________________________________________ */
/* __________________________________________________ */
/* __________________________________________________ */
/* _________    M E D I A - Q U E R I E S    _________*/
/* __________________________________________________ */
/* __________________________________________________ */
/* __________________________________________________ */
/* __________________________________________________ */




@media all and (max-width:1000px) {
    html {overflow-x: hidden;}
    h1 {font-size:40px;}
    h2 {font-size:90px;line-height:70px;}
    h3 {font-size:20px;line-height:22px;}
    h4 {font-size:40px;}
    .title-extra{font-size:75px;line-height:60px;}
    .title-big {font-size:45px;line-height:40px;}
    .title-normal{font-size:40px;line-height:40px;}

    .br-m {display:initial;}
    .padding-50 {padding-left:0px;}

    /* H E A D E R */
    .line-header {top:60px;}
    .header {width:100%;padding:10px 15px 10px 15px;height:50px;background-color:none;}
    .header .logo {width:40px;height:40px;margin-top:5px;}
    .header li a {font-size:20px;padding:10px 10px 10px 10px;margin-left:20px;} 
    .header .menu-btn:checked ~ .menu {margin-left:-32%;margin-top:70px;}

    /* C T A */
    .cta {border-radius:60px;width:230px;height:60px;padding:0px 0px 5px 30px;font-size:18px;}
    .cta .link {width:0px;height:0px;}
    .cta-outline {border-radius:60px;width:230px;height:60px;padding:0px 0px 5px 30px;font-size:18px;}
    .cta-outline .link {width:0px;height:0px;}

    /* C T N  -  I N T R O */
    .ctn-home {width:100%;height:100vh;margin:0;padding:50px 15px 50px 15px;}
    .box-desc {left:25px;top:100px;width:80%;height:280px;}
    .box-desc .h1-1 {position:absolute;top:0px;}
    .box-desc .h2-1 {position:absolute;top:5px;}
    .box-desc .h2-2 {position:absolute;top:70px;left:-5px;}
    .box-desc p {position:absolute;top:210px;left:0px;font-size:16px;line-height:18px;}
    .ctn-home .box-img {width:400px;height:400px;right:20px;bottom:100px;}

    /* C T N  -  S E R V I C E S */
    .ctn-services {z-index:50;top:-100px;height:160px;}
    .ctn-services .title-normal,.ctn-services .title-small {position:relative;float:left;left:15px;} 
    .ctn-services .title-normal {position: relative;top:20px;}
    .ctn-services .title-small {position: relative;top:20px;left:15px;}
    .ctn-icon {position:absolute;width:100%;top:100px;height:50px;padding-left:15px;}
    .icon-srv {width:13%;height:80%;margin:5px 5px 0px 0px;}
    .info-bulle {top:50px;width:900%;height:120px;padding:0px 20px 0px 20px;}
    .info-bulle h4 {position:relative;top:-20px;font-size:26px;}
    .info-bulle p {position:relative;top:-55px;font-size:22px;line-height:26px;letter-spacing:0px;}
    .srv_1:hover .info-bulle,.srv_2:hover .info-bulle,.srv_3:hover .info-bulle,.srv_4:hover .info-bulle,.srv_5:hover .info-bulle,.srv_6:hover .info-bulle {top:50px;width:900%;height:120px;padding:0px 20px 0px 20px;}
    .srv_1:hover .info-bulle {left:-25px;}
    .srv_2:hover .info-bulle {left:-95px;}
    .srv_3:hover .info-bulle {left:-165px;}
    .srv_4:hover .info-bulle {left:-235px;}
    .srv_5:hover .info-bulle {left:-305px;}
    .srv_6:hover .info-bulle {left:-375px;}

    /* C T N - I N T R O */
    .ctn-intro {height:420px;top:-100px;left:0px;padding:60px 0px 0px 15px;}
    .ctn-intro p {width:100%;font-size:30px;line-height:30px;}
    .ctn-intro .cta-outline{left:15px;top:350px;}

    /* C T N  -  P R O J E C T S */
    .ctn-project {width:100%;left:0px;top:-260px;padding:40px 0px 0px 15px;}
    .gallery {top:30px;left:-15px;}
    .gallery_item {height:130px;}
    .prj_arrow {width:0px;height:0px;}
    .prj_date {top:85px;left:15px;font-size:16px;opacity:.5;}
    .prj_title {top:15px;left:15px;font-size:40px;font-weight:800;}
    .prj_tag {top:5px;left:15px;font-size:22px;}
    .gallery_item:hover .prj_date {opacity:1;color:var(--color-grey);left:25px;}
    .gallery_item:hover .prj_title {left:25px;}
    .gallery_item:hover .prj_tag {left:25px;}
    .prj_0, .prj_0:hover {background-image:linear-gradient(90deg, var(--color-secondary)30%, var(--color-secondary-opacity)),url(../img/projets/fcsm/cover__fcsm__m.webp);}
    .prj_1, .prj_1:hover {background-image:linear-gradient(90deg, var(--color-secondary)30%, var(--color-secondary-opacity)),url(../img/projets/beeateam/cover__beeateam__m.webp);}
    .prj_2, .prj_2:hover {background-image:linear-gradient(90deg, var(--color-secondary)30%, var(--color-secondary-opacity)),url(../img/projets/horae/cover__horae__m.webp);}
    .prj_3, .prj_3:hover {background-image:linear-gradient(90deg, var(--color-secondary)30%, var(--color-secondary-opacity)),url(../img/projets/delta/cover__delta__m.webp);}
    .prj_4, .prj_4:hover {background-image:linear-gradient(90deg, var(--color-secondary)30%, var(--color-secondary-opacity)),url(../img/projets/esart/cover__esart__m.webp);}
    .prj_5, .prj_5:hover {background-image:linear-gradient(90deg, var(--color-secondary)30%, var(--color-secondary-opacity)),url(../img/projets/vineo/cover__vineo__m.webp);}
    .prj_6, .prj_6:hover {background-image:linear-gradient(90deg, var(--color-secondary)30%, var(--color-secondary-opacity)),url(../img/projets/isart/cover__isart__m.webp);}
    .prj_7, .prj_7:hover {background-image:linear-gradient(90deg, var(--color-secondary)30%, var(--color-secondary-opacity)),url(../img/projets/nft/cover__nft__m.webp);}
    .prj_8, .prj_8:hover {background-image:linear-gradient(90deg, var(--color-secondary)30%, var(--color-secondary-opacity)),url(../img/projets/rejv/cover__rejv__m.webp);}
    .prj_0:hover {background-image:linear-gradient(90deg, var(--color-primary)30%, var(--color-primary-opacity)),url(../img/projets/fcsm/cover__fcsm__m.webp);}
    .prj_1:hover {background-image:linear-gradient(90deg, var(--color-primary)30%, var(--color-primary-opacity)),url(../img/projets/beeateam/cover__beeateam__m.webp);}
    .prj_2:hover {background-image:linear-gradient(90deg, var(--color-primary)30%, var(--color-primary-opacity)),url(../img/projets/horae/cover__horae__m.webp);}
    .prj_3:hover {background-image:linear-gradient(90deg, var(--color-primary)30%, var(--color-primary-opacity)),url(../img/projets/delta/cover__delta__m.webp);}
    .prj_4:hover {background-image:linear-gradient(90deg, var(--color-primary)30%, var(--color-primary-opacity)),url(../img/projets/esart/cover__esart__m.webp);}
    .prj_5:hover {background-image:linear-gradient(90deg, var(--color-primary)30%, var(--color-primary-opacity)),url(../img/projets/vineo/cover__vineo__m.webp);}
    .prj_6:hover {background-image:linear-gradient(90deg, var(--color-primary)30%, var(--color-primary-opacity)),url(../img/projets/isart/cover__isart__m.webp);}
    .prj_7:hover {background-image:linear-gradient(90deg, var(--color-primary)30%, var(--color-primary-opacity)),url(../img/projets/nft/cover__nft__m.webp);}
    .prj_8:hover {background-image:linear-gradient(90deg, var(--color-primary)30%, var(--color-primary-opacity)),url(../img/projets/rejv/cover__rejv__m.webp);}
    
    /* C T N  -  A S K */
    .ctn-ask {width:100%;height:460px;top:-230px;padding:40px 0px 0px 15px;}
    .ctn-ask p {width:100%;font-size:30px;line-height:35px;}
    .ctn-ask .cta {top:240px;}
    .ctn-ask .cta .link {width:0px;height:0px;}
    .ctn-ask .cta-outline {top:320px;left:15px;width:230px;height:60px;padding:0px 0px 5px 30px;font-size:18px;}
    .ctn-ask .cta-outline .link {width:0px;height:0px;}

    /* C T N  -  W H Y */
    .ctn-why {height:1650px;top:-272px;padding:40px 0px 0px 0px;}
    .why-cl {width:100%;height:640px;margin:0;padding:0;top:0px;}
    .why-cl-1 {width:100%;height:900px;padding-left:15px;}
    .why-cl-2 {width:100%;height:210px;padding:0px 0px 0px 0px;top:-10px;}
    .why-cl-1 .why-certificate {width:60px;height:60px;}
    .why-cl-1 .title-big {width:250px;left:100px;top:-10px;}
    .why-cl-1 .title-small {top:120px;}
    .why-cl-1 p {top:180px;padding-right:40px;}
    .why-cl-1 .cta{top:700px;}
    .why-cl-1 .cta-outline{top:770px;left:15px;}
    .why-cl-2 .why-grid {width:100%;height:60px;top:-30px;}
    .why-cl-2 .why-icon {width:40px;height:40px;margin:0px 0px -20px 15px;}
    .why-cl-2 p {position:relative;text-align:left;font-weight:800;top:-30px;left:70px;}
    .ctn-why .title-normal {left:15px;top:500px;}
    .ctn-why .notation {width:105px;height:16.5px;left:220px;top:475px;}
    .box-avis {width:100%;height:190px;top:500px;padding-left:15px;}
    .avis {width:85%;height:auto;margin-bottom:20px;padding:0px 15px 0px 15px;}
    .avis p {font-size:16px;line-height:20px;}
    .avis .name {font-size:16px;left:15px;margin-top:-10px;}
    .avis .datation {padding-left:15px;}



    .srv_grid {width:auto;margin-top:-20px;padding-bottom:0px;height:100px;overflow-x:scroll;overflow-y:hidden;white-space: nowrap;}
    .srv_item {position: relative;display: inline-block;width:calc(70% - 10px);height:100px;margin:0px 10px 10px 0px;}


    /* C T N - A B O U T */
    .ctn-about {position:relative;width:95%;height:740px;top:-272px;padding:60px 15px 0px 15px;}
    .contact-coordonnees {margin-top:120px;font-size:20px;line-height:30px;}
    .icon-contact {position:relative;width:20px;height:20px;background:none;border:none;text-decoration:none;margin-right:10px;}
    .mobile {top:3px;background-image:var(--img-contact-mobile);background-position:center;background-repeat:no-repeat;background-size:cover;}
    .mail {top:3px;background-image:var(--img-contact-mail);background-position:center;background-repeat:no-repeat;background-size:cover;}
    .circle-contact {top:0px;left:15px;width:150px;height:150px;}
    .circle-contact-active {width:15px;height:15px;top:-120px;left:150px;}
    .signage {opacity:.1;top:5px;left:40px;width:250px;height:190px;}

    /* C T N - F O O T E R */
    footer {z-index:20;margin:-280px 0px 0px 0px;padding:40px 15px 40px 15px;height:150px;}
    footer .logo {width:35px;height:35px;}
    footer p {margin-top:-30px;margin-left:50px;line-height:30px;}
    .social-media {width:100px;height:50px;top:140px;left:55px;}
    .in {width:40px;height:40px;top:0px;}
    .gg {width:40px;height:40px;left:50px;top:2px;}


    /* T H E M E  C O L O R */
    .switch {position:relative;display:inline-block;left:27%;top:10px;width:45px;height:10px;}
    .slider-theme:before {height:25px;width:25px;left:-20px;}
    .slider:before {height:20px;width:20px;bottom:0px;border:5px solid var(--color-secondary);}
    input:checked + .slider-theme:before {-webkit-transform:translateX(45px);-ms-transform:translateX(45px);transform:translateX(45px);border:5px solid var(--color-secondary);}

    /* S C R O L L B A R */
    ::-webkit-scrollbar:horizontal {height:5px;width:10px;}
  }

  @media (min-width:1000px) {
    .header li {float:left;}
    .header .menu {clear:none;float:right;max-height:none;}
    .header .menu-icon {display:none;}
    .slide-content{margin: 0 10px;}
    .swiper-navBtn{display:none;}
    }