/*---Reset---------------------------------------------------------------------*/
*,
*:before,
*:after {box-sizing: border-box;margin: 0;padding: 0;}
body, header, footer, nav,
p, ul, ol, li,
h1, h2, h3, h4, h5, h6, 
form, input, textarea, fieldset, blockquote, 
section, article, aside,
dl, dt, dd, 
table, td, th, tr, 
button, div, span {margin: 0;padding: 0;font-size: 100%;font-weight: normal;box-sizing: border-box;}
table {border-collapse: collapse;border-spacing: 0}
ul, ol {list-style: none;}
img, fieldset {border: 0;}
hr {display: none;}
sup {vertical-align: super;font-size: .7em;line-height: .8em;}
sub {vertical-align: sub;font-size: .7em;line-height: .8em;}
address {font-style: normal;}
a, a:hover, a:visited, a:focus, a:active {text-decoration: none;box-sizing: border-box;}
button, button:hover, button:visited, button:focus, button:active {border: none;outline: none;cursor: pointer;}
input, button, textarea, select, optgroup, option {font-family: inherit;font-size: inherit;box-sizing: border-box;}
textarea {resize: none;}
button img {pointer-events: none;}

pre {background-color: #373737;color: #fff;margin-bottom: 15px;font-size: 11px;}

/*---Fonts---------------------------------------------------------------------*/
@font-face {
  font-family: 'Garnett-Regular';
  src: url('../fonts/garnett/Garnett\ Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Garnett-Bold';
  src: url('../fonts/garnett/Garnett\ Bold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Miller';
  src: url('../fonts/Miller-Text.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

/*---General-------------------------------------------------------------------*/
:root {
  --gold: rgba(174, 154, 99, 1);
  --light-gold: rgba(174, 154, 99, 0.2);
  --cream: rgba(251, 246, 239, 1);
  --green-forest: rgba(61, 101, 89, 1);
  --matte-black: rgba(30, 30, 30, 1);
  --button-size: 40px;
}
html {width: 100%;}
body {font-family: 'Garnett-Regular', sans-serif;font-size: 16px;color: var(--matte-black);background-color: var(--green-forest);width: 100%;overflow-x: hidden;}
.flex {display: flex;}
.text-center {text-align: center;}
.text-right {text-align: right;}
.hidden {display: none !important;}
.hom {display: block;}
.hod {display: none;}

.oh {overflow: hidden;}

.creamBg {background-color: var(--cream);}
.lightGoldBg {background-color: var(--light-gold);}
.greenForectBg {background-color: var(--green-forest);}

.goldC {color: var(--gold);}

/*---Layout--------------------------------------------------------------------*/
main {width: 100%;position: relative;}
.wrapper {width: 1400px;margin: 0 auto;}
.wrapper.flex {justify-content: center;}

section h2.title {font-size: 31px;line-height: 40px;color: var(--green-forest);font-family: 'Garnett-Bold', sans-serif;letter-spacing: .7px;}

/*All page*/
main .page {background-color: var(--cream);position: absolute;top: 0;left: 0;width: 100%;}
main .container {padding: 270px 0 0;min-height: calc(100vh - 124px);}

main .current-page {z-index: 0;top: 0;}
main .new-page {z-index: 1;top: 100vh;overflow: hidden;}
#homepage {padding-top: 0;}
#homepage .container {padding-top: 0;}

.intro ,.wrapper-in {width: 1110px;margin: auto;}
.wrapper-out {width: 1390px;margin: auto;}
.intro {position: relative;margin-bottom: 65px;}
.intro h1 {position: absolute;overflow: hidden;z-index: 1;top: -150px;left: -150px;animation: rotate 10000ms linear infinite;width: 300px;height: 300px;}
.intro h1 span {position: absolute;left: -9999px;}
.intro h1 img {width: 100%;height: 100%;}
.intro .text {position: relative;z-index: 2;background-color: var(--cream);overflow: hidden;box-shadow: 0 0 35px 35px var(--cream);}
.intro .desc {color: var(--green-forest);font-size: 28px;line-height: 45px;background-color: var(--cream);width: 60%;}
.intro .subDesc {color: var(--matte-black);font-size: 18px;line-height: 32px;float: right;width: 45%;}

@keyframes rotate {
  0% {transform: rotate(0deg)}
  100% {transform: rotate(360deg)}
}

/*---Header--------------------------------------------------------------------*/
header {position: fixed;top: 0;right: 0;left: 0;z-index: 100;padding: 0 50px 0 45px;display: flex;justify-content: space-between;align-items: center;height: 100px;}
header.show-logo {background-color: rgba(251, 246, 239, 0.8);-webkit-backdrop-filter: blur(3.5px);backdrop-filter: blur(3.5px);}
header #logo {transform: translate(0, calc(-100% - 50px));transition: transform 150ms ease-in-out 250ms;}
header #logo a {width: 70px;height: 70px;background: url('../images/logo-vert.svg') 0 0 / cover no-repeat;display: block;}
header.show-logo #logo {transform: translate(0, 0);}

#mobile-spot, #urgence, #urgence-ipad, .member-expertises-ipad, .member-name.mobile, .member-name-ipad, .cv.ipad {display: none;}

header nav {display: flex;}
#menu {display: flex;padding-top: 6px;}
#menu li:first-child {display: none;}
#menu li + li {margin-left: 30px;}
#menu li a {font-size: 16px;color: var(--green-forest);text-decoration: none;display: block;position: relative;padding-block-end: 10px;text-transform: lowercase;}
#menu li a::before {content: '';background-color: var(--green-forest);width: 0;height: 2px;position: absolute;bottom: 5px;left: 0;transition: width .2s ease-in-out;}
#menu li a:hover::before, #menu li.active a::before {width: 100%;}
#menu li.navButton {position: relative;width: 160px;}
#menu li button {color: var(--cream);background-color: var(--green-forest);font-size: 12px;text-transform: uppercase;padding: 10px 22px;border-radius: 20px;position: absolute;top: -8px;height: 37px;transition: height .2s ease-in-out;overflow: hidden;}
#menu li button span {display: block;font-size: 14px;padding-top: 12px;margin-top: 12px;border-top: 1px solid var(--cream);}
#menu li button:hover {height: 80px;}

#lang {padding-top: 2px;margin-left: 32px;display: none;}
#lang li {display: inline-block;}
#lang li>span, #lang li>a {display: inline-block;width: 32px;height: 32px;line-height: 30px;text-align: center;border: 1px solid var(--matte-black);border-radius: 16px;color: var(--matte-black);font-size: 14px;}
#lang li>span {-webkit-user-select: none;user-select: none;cursor: default;}
#lang li:hover>span, #lang li>a:hover {background-color: var(--matte-black);color: var(--cream);}

#lang>li>ul {padding-top: 28px;opacity: 0;transform: translate(0, -40px);transition: opacity 250ms ease-in-out, transform 250ms ease-in-out;display: flex;flex-direction: column;}
#lang>li:hover ul {opacity: 1;transform: translate(0, 0);}
#lang>li>ul li + li {margin-top: 4px;}

/*---Aside---------------------------------------------------------------------*/
aside {position: fixed;z-index: 20;top: 50%;right: 47px;transform: translate(0, -50%);display: flex;flex-direction: column;align-items: center;}
aside.hom {display: flex;} 
aside.hod {display: none;} 
.awardsBtn {width: 44px;height: 34.5px;background: url('../images/laurier.svg') 0 0 / cover no-repeat;}
.awardsBtn:hover {background-position: 0 -34.5px;}
aside a {display: inline-block;width: var(--button-size);height: var(--button-size);margin-top: 20px;}
aside span {display: none;}
#twitter-account {background: url('../images/tw.svg') 0 0 / cover no-repeat;}
#linkedin-account {background: url('../images/lk.svg') 0 0 / cover no-repeat;}
#twitch-account {background: url('../images/twitch.svg') 0 0 / cover no-repeat;}
#twitter-account:hover, #linkedin-account:hover, #twitch-account:hover {background-position: 0 calc(var(--button-size) * -1);} 

/*---Footer--------------------------------------------------------------------*/
footer {background-color: var(--green-forest);color: #fff;padding: 36px 64px 36px 43px;display: flex;justify-content: space-between;align-items: center;height: 124px;}

.menu-footer a {font-size: 12px;text-decoration: underline;color: #fff;}
.menu-footer a:hover {text-decoration: none;}

.homepage footer {margin-top: 0;}
.expertisePage footer {margin-top: 50px;}
.tribePage footer {margin-top: 132px;}
.joinUsPage footer {margin-top: 0;}
.contactPage footer {margin-top: 0;}

/*---Awards--------------------------------------------------------------------*/
#awards-panel {width: 100%;height: 100vh;overflow-x: hidden;overflow-y: scroll;padding: 111px 0 0 0;background-color: var(--gold);color: var(--matte-black);position: fixed;z-index: 2000;top: 0;left: 0;transform: translate(0, 200%);transition: transform 200ms ease-in-out;background: linear-gradient(180deg, var(--gold), var(--cream));background-size: 100% 130%;animation: AnimationName 15s ease infinite;}
@keyframes AnimationName {
  0%{background-position:0% 0}
  50%{background-position:0% 100%}
  100%{background-position:0% 0}
}

#awards-panel.open {transform: translate(0, 0);}

#awards-logo {position: absolute;top: 38px;left: 45px;display: block;width: 70px;height: 70px;background: url('../images/logo-vert-black.svg') 0 0 / cover no-repeat;}
#close-awards {position: absolute;top: 30px;right: 35px;width: 22px;height: 22px;background: url('../images/close-black.svg') center center / cover no-repeat;cursor: pointer;}

.awards-title {width: 375px;margin: 0 auto 160px;text-align: center;font-size: 32px;line-height: 44.58px;text-transform: uppercase;letter-spacing: 3px;background: url('../images/icon-awards.svg') center 0 no-repeat;padding-top: 70px;}

.awards, .trophies {width: 1121px;margin: 0 auto;display: grid;grid-template-columns: repeat(2, 1fr);gap: 180px;}
.trophies {padding-block: 62px;border-style: solid;border-width: 1px 0;}
#lepoint {display: grid;width: 1121px;padding-block: 60px;margin: 0 auto;grid-template-columns: 210px auto;grid-template-rows: 1fr;height: 200px;}

/*trophies*/
.trophy h3 {font-size: 14px;font-family: 'Garnett-Bold', sans-serif;line-height: 20px;text-transform: uppercase;border-bottom: 1px solid;background: url('../images/trophy-laurel-wreath.svg') 0 7px no-repeat;padding: 0 0 14px 50px;margin-bottom: 10px;}
.trophy h3 span {font-size: 14px;font-family: 'Garnett-Regular', sans-serif;display: block;text-transform: none;}
.trophy-content h4 {text-transform: none;font-size: 18px;line-height: 28px;margin-bottom: 6px;}
.trophy-content p, .trophy-content ul {font-size: 14px;line-height: 24px;}
.trophy-content ul li::before {content: '·';font-size:16px;line-height:24px;margin: 0 10px;}

/*awards*/
.awarder-logo {overflow: hidden;display: grid;align-items: center;margin-bottom: 25px;grid-template-rows: 80px;}
.discover {color: var(--matte-black);border: 1px solid;line-height: 44px;height: 44px;border-radius: 22px;padding: 0 34px;font-size: 12px;display: inline-block;}
.discover.hod {display: none;} 
.discover.hom {display: inline-block;} 
.discover:hover {background-color: var(--matte-black);color: var(--gold);}

#lepoint .awarder-logo {display: block;}

.award .content {font-size: 18px;line-height: 29px;margin-bottom: 25px;}

.category-award {overflow: hidden;margin-top: 80px;}
.category-award .word {margin-bottom: 48px;}
.category-award .word h5 {font-size: 30px;line-height: 24px;font-family: 'Miller', serif;}
.category-award .word p {font-size: 14px;line-height: 24px;font-family: 'Garnett-Bold', sans-serif;}

/*---Homepage------------------------------------------------------------------*/
#bg-video {position: relative;}
#bg-video video {position: relative;z-index: 2;}
#bg-video h1 {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 1;}
#bg-video figure {position: absolute;bottom: 62px;left: 72px;z-index: 3;width: 35%;color: #fff;}
#bg-video figure blockquote {font-size: 22px;line-height: 35px;font-family: 'Miller';font-style: italic;margin-bottom: 20px;}
#bg-video figure figcaption {font-size: 12px;line-height: 22px;}
video {width: 100%;height: auto;}

#scrollToBottom {width: 44px;height: 44px;position: absolute;top: calc(100% - 80px);left: calc(50% - 22px);border-radius: 50%;border: 1px solid #fff;background: url('../images/scrollToBottom.svg') center center / 13px 26px no-repeat;z-index: 20;}
#scrollToBottom:hover {background-color: var(--gold);} 

#home-intro {padding: 110px 0;}

#text-roll {height: 66px;font-size: 48px;line-height: 66px;overflow: hidden;font-family: 'Garnett-Bold';justify-content: center;gap: 16px;margin-block-end: 190px;}
#text-roll .fleft {width: 35%;text-align: right;}
#text-roll .fright {width: 65%;}
#text-roll .fright .marquee[data-dir="vert"] {height: 66px;position: relative;transform-origin: 0 center;}
#text-roll .fright .marquee[data-dir="vert"]>div {position: absolute;top: 0;transition: transform 400ms ease-in-out, opacity 300ms ease-in-out;}
#text-roll .fright .marquee[data-dir="vert"]>div.start {transform: translateY(-100%);opacity: 0;transition: transform 0ms, opacity 300ms ease-in-out;}
#text-roll .fright .marquee[data-dir="vert"]>div.tohide {transform: translateY(100%);opacity: 0;}
#text-roll .fright .marquee[data-dir="vert"]>div.toshow {transform: translateY(0%);opacity: 1;}
.invertHorz {transform: scale(-1, 1);display: inline-block;}


#our-values h2 {margin-bottom: 110px;}
#our-values .flex {gap: 150px;justify-content: center;align-items: flex-start;}
#our-values .flex .fleft {width: 50%;}
#our-values .flex .fright {width: 50%;}

#our-values .text {font-size: 18px;line-height: 32px;display: grid;grid-template-columns: repeat(3, 1fr);gap: 120px;}
#our-values .text div {text-align: center;}
#our-values .text .image-value {width: 140px;height: 140px;display: block;margin: 0 auto 32px;}
/* #our-values .text p + p {margin-top: 32px;} */
#our-values .text .homeIntro {font-size: 28px;line-height: 45px;margin-block-end: 32px;}
/* #our-values .green-text {font-size: 28px;line-height: 45px;color: var(--green-forest);} */

#know-how {padding: 114px 0;}
#know-how h2 {margin-block-end: 130px;}

#acc-know-how {display: none;}

/*Values*/
#tabs {display: flex;justify-content: space-between;margin: 0 auto;color: var(--green-forest);width: 864px;}
.tab-title, h4 {text-transform: uppercase;position: relative;}
.tab-title li {text-align: right;width: 250px;padding-inline-end: 30px;line-height: 2rem;}
.tab-title li + li {margin-block-start: 22px;}
.tab-title li.active {color: var(--gold);font-family: 'Garnett-Bold';background: url('../images/left-arrow.svg') right 0 center no-repeat;}
.tab-content {width: 510px;display: none;font-size: 1.125rem;line-height: 2rem;}
.tab-content.active {display: block;}
.tab-content p {line-height: 30px;}
.tab-content p + p {margin-block-start: 30px;}

/*---Expertisepage-------------------------------------------------------------*/
#accExpert {margin-bottom: 80px;--in-delay: 200ms;--out-delay: 600ms;}
#accExpert h3 {font-size: 25px;line-height: 50px;color: var(--green-forest);text-transform: uppercase;border-bottom: 1px solid rgb(0, 0, 1);padding: 0 25px 0 0;transition: padding 250ms ease-out;cursor: pointer;position: relative;}
#accExpert h3::after {content: '';background-image: url('../images/plus-green.svg');background-position: 3px 3px;background-size: 11px 11px;background-repeat: no-repeat;width: 18px;height: 18px;position: absolute;top: calc(50% - 9px);right: 10px;border-radius: 50%;border: 1px solid transparent;} 
#accExpert .activ h3 {transition: padding 250ms ease-in;}
#accExpert .activ h3::after {background-image: url('../images/minus-green.svg');}
@media (hover) {
  #accExpert h3:hover, #accExpert .activ h3:hover {transition: padding 250ms ease-in;padding: 0 25px 0 15px;} 
  #accExpert h3:hover::after, #accExpert .activ h3:hover::after {border-color: var(--green-forest);background-color: var(--green-forest);}
  #accExpert h3:hover::after {background-image: url('../images/plus-cream.svg')} 
  #accExpert .activ h3:hover::after {background-image: url('../images/minus-cream.svg');} 
}

#accExpert .activ .acc-content {border-bottom: 1px solid rgb(0, 0, 1);}
#accExpert .acc-content:last-child {border-bottom: 0;}
#accExpert .slide-text {height: 60px;line-height: 60px;color: var(--gold);font-size: 20px;overflow: hidden;white-space: nowrap;position: relative;margin-bottom: 80px;}
#accExpert .slide-text .marquee {white-space: nowrap;overflow: hidden;display: inline-block;position: absolute;}
#accExpert .slide-text .marquee span {display: inline;}
.acc-content .expertises {width: 100%;}
.acc-content .expertise {display: grid;grid-template-columns: 30% 60%;grid-template-rows: max-content 1fr; gap: 20px 50px;padding-bottom: 50px;grid-template-areas: "header desc""lawiers desc";}
.acc-content .expertise + .expertise {border-top: 1px solid #000;padding-block: 50px;}
.acc-content .expertise h4 {font-size: 28px;line-height: 36px;font-family: 'Garnett-Bold', sans-serif;margin-bottom: 27px;color: var(--gold);text-transform: initial;grid-area: header;}
.acc-content .expertise .description {font-size: 18px;line-height: 30px;grid-area: desc;}
.acc-content .expertise .description p + p {margin-top: 30px;}
.acc-content>.description {padding-top: 30px;color: var(--green-forest);}

.related-lawiers {padding-top: 16px;grid-area: lawiers;}
.related-lawiers .associate-lawiers {margin-bottom: 45px;}
.related-lawiers > div h5 {font-size: 10px;text-transform: uppercase;}
.related-lawiers > div a {display: inline-block;color: var(--green-forest);font-size: 14px;text-decoration: underline;position: relative;padding-right: 30px;}
.related-lawiers > div a::after {content: '';position: absolute;top: -1px;right: 0;width: 20px;height: 100%;background: url('../images/left-gold-arrow.svg') 0 center no-repeat;}
.related-lawiers > div a:hover {text-decoration: none;}

@keyframes marquee {
  100% {
    transform: translateX(-1000px);
  }
}

/*---TribePage-----------------------------------------------------------------*/
#filtering {margin-bottom: 90px;border-top: 1px solid var(--matte-black);border-bottom:  1px solid var(--matte-black);padding: 14px 0;}
#filtering button {background: transparent;color: var(--matte-black)}
#filters {overflow: hidden;height: 0;padding: 0;transition: height 200ms ease-in-out, padding 200ms ease-in-out;}
.open #filters {height: auto;padding: 30px 0 0 0;}
#filters button {border: 1px solid;line-height: 22px;padding: 10px 20px;border-radius: 22px;margin: 0 30px 30px 0;}
#filters button:last-child {margin-right: 0;}
#filters button:hover {background-color: var(--green-forest);color: var(--cream);}
#filters button.golden-filter:hover {background-color: var(--gold);color: var(--cream);border-color: var(--gold);}
#filters button.on {color: var(--cream);background-color: var(--matte-black);}
#filters button.on.golden-filter {background-color: var(--gold);}
#filtering #see-all-filters {text-transform: uppercase;margin-left: 30px;position: relative;padding-left: 20px;letter-spacing: 1px;}
#filtering #see-all-filters::before {content: '';width: 12px;height: 12px;border: 4px solid var(--matte-black);border-radius: 6px;position: absolute;left: 0;top: calc(50% - 6px)}
#filtering.open #see-all-filters::before {content: '';width: 10px;height: 10px;border: 3px solid var(--cream);box-shadow: 0 0 0 1px var(--matte-black);border-radius: 6px;position: absolute;left: 1px;top: calc(50% - 5px);background-color: var(--matte-black);}
#filtering #reset-filters {margin-right: 15px;float: right;display: none;text-decoration: underline;}
#filtering.open #reset-filters {display: inline-block;}
#filtering.open #reset-filters:hover {text-decoration: none;}
.filter.on {background-color: red;}

#the-tribe {margin-bottom: 160px;}

.member {display: flex;gap: 70px;}
.member.show:nth-child(2n) {flex-direction: row;}
.member:nth-child(2n), .member.show.reverse {flex-direction: row-reverse;}
.member.hide {display: none;}
.member + .member {margin-top: 120px;}
.picture-contact {flex: 1 1 0px;}
.member .description {flex: 2 1 0px;}
.picture-contact {width: calc(30% - 35px)}
.picture-contact img {width: 100%;display: block;border-radius: 40px;}

.contact {text-align: center;padding-top: 20px;--size: 32px;}
.contact a {display: inline-block;width: var(--size);height: var(--size);overflow: hidden;}
.contact a + a {margin-left: 20px;}
.contact .email {background: url('../images/mail.svg') 0 0 / cover no-repeat;}
.contact .twitter {background: url('../images/tw-tribe.svg') 0 0 / cover no-repeat;}
.contact .linkedin {background: url('../images/lk-tribe.svg') 0 0 / cover no-repeat;}
.contact a:hover {background-position: 0 calc(-1 * var(--size));}

.member .description {width: calc(70% - 35%);}
.member-name h3, .member-name-ipad h3 {font-size: 28px;line-height: 45px;}
.member-name h4, .member-name-ipad h4 {font-size: 12px;margin: 5px 0 27px;text-transform: none;}
.member .description .content {font-size: 18px;line-height: 32px;}

.member-expertises {margin: 60px 0 30px;}
.member-expertises>a {display: inline-block;border: 1px solid var(--matte-black);padding: 10px 20px;line-height: 24px;height: 44px;border-radius: 22px;font-size: 12px;margin: 0 12px 16px 0;color: var(--matte-black)}
.member-expertises>a:hover {background-color: var(--matte-black);color: var(--cream)}

.member .cv {margin-top: 36px;padding-top: 36px;border-top: 1px solid var(--matte-black);color: var(--green-forest);font-size: 14px;}
.member .cv ul li {padding-left: 34px;background: url('../images/zigzag.svg') 0 6px no-repeat;}
.member .cv a {color: var(--green-forest);text-decoration: underline;}
.member .cv a:hover {color: var(--gold);text-decoration: none;}

.member .cv h3, .member .cv h4, .member .cv h5 {font-size: 18px;font-family: 'Garnett-Bold', sans-serif;margin-bottom: 12px;}

/*---joinUsPage----------------------------------------------------------------*/
#form-content {width: 976px;margin: 0 auto;}
#form-content>p {font-size: 28px;line-height: 45px;}
#form-content form {margin: 52px 0 240px;}
.grid2col {display: grid;grid-template-columns: repeat(2, 1fr);gap: 50px 162px;}
textarea[name="message"] {grid-column: 1 / span 2;border: 0;}
input[type="text"], input[type="email"], input[type="tel"], .fileField , .custom-select-trigger, textarea {border-radius: 10px;padding: 0 32px 0 21px;}
input[type="text"], input[type="email"], input[type="tel"], .fileField , .custom-select-trigger {height: 54px;line-height: 54px;}
input[type="text"]::placeholder, input[type="email"]::placeholder, input[type="tel"]::placeholder, textarea::placeholder {color: var(--matte-black)}
input[type="text"], input[type="email"], input[type="tel"] {width: 100%;border: 0;}
textarea {padding: 32px 32px 32px 21px;height: 240px;margin-bottom: 50px;}
.fileField {background-color: #fff;position: relative;overflow: hidden;}
input[type="file"], .changeFile, .valid {display: none;}
.add, .valid {position: absolute;top: 50%;right: 11px;transform: translateY(-50%);width: 30px;height: 30px;}
.add {background: url('../images/add.svg') center center no-repeat;}
.valid {background: url('../images/checkmark.svg') center center no-repeat;}
.changeFile {background-color: transparent;font-size: 12px;line-height: 32px;position: absolute;text-decoration: underline;right: 8px;bottom: -28px;}
.changeFile:hover {text-decoration: none;}

.custom-select-trigger:after {background: url('../images/select-arrow.svg') center center no-repeat;width: 12px;height: 12px;}
.custom-option {line-height: 40px;padding: 0 32px 0 21px;}
.custom-option:hover, .custom-option.selection {background-color: var(--green-forest);}

input[type="submit"] {width: 170px;height: 44px;line-height: 44px;font-size: 12px;border: 1px solid var(--matte-black);color: var(--matte-black);border-radius: 22px;background-color: transparent;cursor: pointer;}
input[type="submit"]:hover {background-color: var(--matte-black);color: var(--cream);}

#sending {display: none;width: 170px;height: 44px;line-height: 44px;font-size: 12px;border-radius: 22px;background-color: var(--matte-black);color: var(--cream);text-align: left;padding-left: 22px;cursor: default;position: relative;}
#sending::after {content: '';position: absolute;top: 12px;right: 22px;width: 20px;height: 20px;background: url('../images/spinner.png') center center / cover no-repeat;animation: rotate 3000ms infinite linear;}

#responseForm {margin-bottom: 500px;display: none;}
#responseForm .success {background-color: #fff;width: 650px;margin: 0 auto;text-align: center;padding: 102px 0 77px;border-radius: 25px;}
#responseForm .success h3 {font-size: 28px;line-height: 45px;}
#responseForm .success h3 + h3 {margin-bottom: 70px;}
#responseForm .success #formBack {line-height: 44px;border: 1px solid var(--matte-black);height: 44px;padding: 0 20px;border-radius: 22px;font-size: 12px;background-color: transparent;}
#responseForm .success #formBack:hover {background-color: var(--matte-black);color: #fff;}

#anim {width: 150px;height: 150px;display: inline-block;}

/*--Error fields--------------------------------------------------------------*/
form span, form .fields, form .inputField, form div.custom-select, .file {position: relative;display: block;border-radius: 10px;}
form .fields::before {width: 100%;position: absolute;bottom: 0;left: 0;font-size: 12px;text-align: right;}
form span::before, form .inputField::before, form div.custom-select::before, .file::before {width: fit-content;position: absolute;top: -16px;left: 8px;font-size: 11px;text-align: right;padding: 0 5px;line-height: 16px;height: 16px;}
form .error {box-shadow: 0 0 3px red;}
form .error::before {content: attr(data-content);color: red;}

/*---contactPage----------------------------------------------------------------*/
#contactPage .wrapper-shift {max-width: 1310px;}
.wrapper-shift {display: flex;gap: 50px;width: fit-content;margin: 0 auto 60px;padding: 0 70px 0 105px;align-items: flex-start;}
.contact-panel:first-child {width: 30%;} 
.contact-panel:last-child {width: 70%;} 
.contact-panel {background-color: #fff;border-radius: 25px;padding: 30px 35px 53px;}
.contact-panel h3 {font-family: 'Garnett-Bold', sans-serif;font-size: 30px;line-height: 45px;color: var(--green-forest);margin-bottom: 40px;}
.contact-panel h3 .gmap {font-size: 14px;line-height: 17px;font-family: 'Garnett-Regular', sans-serif;color: var(--matte-black);text-decoration: underline;background: url('../images/left-thin-arrow.svg') right center no-repeat;padding-right: 25px;margin-left: 35px;position: relative;top: -4px;}
.contact-panel h3 .gmap:hover {text-decoration: none;}
.contact-panel>div + div, .writing-contact + .writing-contact {margin-top: 40px;}
.writing-contact .label {font-size: 14px;line-height: 24px;}
.contact-text {font-size: 18px;line-height: 32px;}
.contact-text a {color: var(--matte-black);text-decoration: underline;}
.contact-text a:hover {text-decoration: none;}

#transports {display: grid;grid-template-columns: 60% 40%;margin-top: 50px;}
.transportation + .transportation {margin-top: 55px;}
.transportation h4 {font-size: 24px;line-height: 36px;color: var(--green-forest);text-transform: none;background-repeat: no-repeat;margin-bottom: 20px;}
#t0 {background-position: 0 3px;padding-left: 34px;}
#t1 {background-position: 0 6px;padding-left: 55px;}
#t2 {background-position: 0 3px;padding-left: 37px;}
#t3 {background-position: 0 3px;padding-left: 30px;}
.transportation-line {background-color: var(--matte-black);color: var(--cream);border-radius: 10px;font-size: 12px;line-height: 20px;display: inline-block;min-width: 10px;padding-inline: 6px;position: relative;top: -3px}
.transportation-line + .transportation-line {margin-left: 8px;}
.transportation p {line-height: 28px;}
.transportation p  + p:not(.time-from-station) {margin-top: 10px;}
.transportation .time-from-station {font-size: 14px;line-height: 18px;}
.station + .station {margin-top: 10px;}

/*---legalPage-----------------------------------------------------------------*/
.legal-page .flex {gap: 80px;padding-left: 216px;margin-bottom: 260px;}
.legal-page h1 {font-size: 28px;line-height: 43px;color: var(--green-forest);width: 230px;}
.legal-page .content {width: 755px;font-size: 18px;line-height: 32px;}
.legal-page .content h2 {font-family: 'Garnett-Bold', sans-serif;font-size: 30px;line-height: 40px;}
.legal-page .content p + h2, .legal-page .content ul + h2 {margin-top: 60px;}
.legal-page .content a {text-decoration: underline;color: var(--matte-black)}
.legal-page .content a:hover {text-decoration: none;}

@media screen and (max-width: 1440px) {
  /*---Layout--------------------------------------------------------------------*/
  .wrapper, .wrapper-out {width: 1194px;}
  .wrapper-in, .intro {width: 1050px;}
  .wrapper-shift {padding: 0 70px 0 135px;}

  .intro h1 {top: -100px;left: -100px;width: 200px;height: 200px;}
  .intro .desc {font-size: 24px;line-height: 36px;width: 55%;}
  .intro .subDesc {font-size: 18px;line-height: 28px;}

  /*---Join us---------------------------------------------------------------------*/
  #form-content {width: 910px;}
  .grid2col {gap: 45px 130px;}

  /*---Awards--------------------------------------------------------------------*/
  .awards-title {margin: 0 auto 80px;}


}
@media screen and (max-width: 1280px) {
  /*---Layout--------------------------------------------------------------------*/
  .wrapper, .wrapper-out {width: 1080px;}
  .intro, .wrapper-in {width: 924px;}
  .intro h1 {top: -110px;left: -110px;width: 220px;height: 220px;}
  .intro .desc {font-size: 20px;line-height: 33px;width: 55%;}
  .intro .subDesc {font-size: 16px;line-height: 26px;}
  #text-roll {height: 48px;font-size: 35px;line-height: 48px;gap: 16px;margin-block-end: 140px;}
  #text-roll .fright .marquee[data-dir="vert"] {height: 48px;}
  #our-values .flex {gap: 110px;}
  #our-values .text .homeIntro {font-size: 20px;line-height: 33px;}
  #our-values .text {font-size: 13px;line-height: 23px;}

  /*---Expertise------------------------------------------------------------------*/
  #accExpert h3 {font-size: 20px;line-height: 40px;}
  #accExpert h3::after {top: 16px;}
  #accExpert .slide-text {font-size: 18px;}
  
  .acc-content .expertise h4 {font-size: 30px;}
  
  /*---tribe---------------------------------------------------------------------*/
  #filters button {line-height: 20px;padding: 9px 18px;font-size: 11px;margin: 0 24px 24px 0;}
  
  .member .description .content {font-size: 16px;line-height: 28px;}
  .member-expertises>a {height: 40px;line-height: 20px;font-size: 11px;padding: 9px 18px;}
  
  /*---Join us---------------------------------------------------------------------*/
  #form-content {width: 834px;}
  .grid2col {gap: 40px 122px;}

  /*---Contact----------------------------------------------------------------------*/
  .wrapper-shift {padding: 0 100px 0 125px;gap: 40px;}
  .contact-panel h3 {font-size: 26px;}
  .contact-text {font-size: 16px;line-height: 28px;}

  .transportation h4 {font-size: 18px;line-height: 32px;}
  #t0 {background-size: 20px 20px;background-position: 0 4px;padding-left: 27px;}
  #t1 {background-size: 35px 17px;padding-left: 45px;}
  #t2 {background-size: 20px 20px;padding-left: 26px;background-position-y: 5px;}
  #t3 {background-size: 20px 20px;background-position-y: 5px;padding-left: 25px;}
}

@media screen and (max-width: 1194px) {
  /*---Layout--------------------------------------------------------------------*/
  .wrapper, .wrapper-out {width: 1024px;}
  .intro, .wrapper-in {width: 864px;}

  /*---Join us---------------------------------------------------------------------*/
  #form-content {width: 754px;}
  .grid2col {gap: 30px 100px;}

  .legal-page .flex {gap: 60px;padding-left: 76px;margin-bottom: 260px;}
  .legal-page .content {width: 100%;padding-right: 40px;font-size: 16px;line-height: 24px;}
  .legal-page .content h2 {font-size: 24px;line-height: 36px;}
}

@media screen and (max-width: 1024px) {
  /*---Layout--------------------------------------------------------------------*/
  .wrapper, .wrapper-out {width: 874px;}
  .intro, .wrapper-in {width: 734px;}
  main .page {padding-top: 244px;}
  .intro h1 {top: -90px;left: -90px;width: 180px;height: 180px;}
  .intro .desc {font-size: 18px;line-height: 28px;width: 55%;}
  .intro .subDesc {font-size: 14px;line-height: 24px;}
  .awards, .trophies{width: 920px;gap: 120px}
  #lepoint {width: 920px;}

  /*---Header--------------------------------------------------------------------*/
  header {width: 100%;height: 70px;padding: 0 28px 0 21px;}
  header #logo {transform: translate(0, calc(-100% - 50px));transition: transform 150ms ease-in-out 250ms;}
  header.show-logo #logo {transform: translate(0, 0);}
  header #logo a img {height: 50px;width: auto;}
  header nav, #menu {display: block;}
  #mobile-spot {display: block;width: 24px;height: 24px;border-radius: 50%;border: 8px solid var(--gold);background-color: var(--matte-black);cursor: pointer;position: relative;z-index: 5000;transition: background-color 250ms ease-in-out;}
  #allMenu {position: fixed;top: 0;right: 0;width: 100%;height: 100dvh;background-color: var(--green-forest);padding: 80px 0 0 53px;transform: translateX(-100%);transition: transform 250ms ease-in-out;z-index: 4000;}
  .on #mobile-spot {background-color: #fff;}
  .on #allMenu {transform: translateX(0);}
  #menu, aside {position: static;}

  aside {margin-top: 40px;}
  aside.hom {display: none;} 
  aside.hod {display: block;} 
  aside span {display: inline;}
  aside .awardsBtn {width: auto;height: auto;background: none;color: #fff;font-size: 16px;}
  aside a {width: auto;height: auto;margin-top: 20px;font-size: 16px;}
  #twitter-account, #linkedin-account, #twitch-account {background: none;color: #fff}

  #menu li:first-child {display: block;}
  #menu li.navButton {display: none;}
  #menu li + li {margin-left: 0;}
  #menu li a {color: #fff;font-size: 22px;line-height: 50px;}

  #lang {position: absolute;bottom: 6%;left: 50%;transform: translateX(-50%);margin-left: 0;padding-top: 0;}
  #lang>li>span {display: none;}
  #lang>li>ul {transform: translateY(0);transition: none;opacity: 1;padding-top: 0;flex-direction: row;gap: 50px;}

  #lang>li>ul li + li {margin-top: 0;}
  #lang>li>ul li a {color: #fff;border-color: #fff;}
  #lang li>a:hover {color: var(--green-forest);background-color: #fff;}

  aside {transform: translateY(0);display: block;}
  aside a, aside button {display: block;}

  #urgence-ipad {display: inline-block;position: fixed;padding-inline: 30px;left: 50%;bottom: 20px;bottom: calc(20px + env(safe-area-inset-bottom));transform: translateX(-50%);width: fit-content;text-align: center;text-transform: uppercase;color: #fff;line-height: 58px;height: 58px;border-radius: 29px;background-color: var(--gold);z-index: 3000;}

  /*---Homepage------------------------------------------------------------------*/
  #bg-video figure blockquote {font-size: 18px;line-height: 26px;}
  #our-values .text {gap: 60px;}

  /*---Expertises----------------------------------------------------------------*/
  #accExpert h3 {font-size: 18px;line-height: 28px;padding: 8px 25px 8px 0;}
  #accExpert h3::after {top: calc(50% - 9px);}
  .acc-content .expertises {height: auto !important;}
  .acc-content .expertise {display: block;}

  /*---Tribe----------------------------------------------------------------------*/
  .picture-contact img {border-radius: 32px;}
  .member .description .content {font-size: 14px;line-height: 26px;}
  .member .cv {margin-top: 28px;padding-top: 28px;font-size: 12px;}
  .member .cv ul li {background: url('../images/zigzag.svg') 0 4px no-repeat;}

  /*---Awards----------------------------------------------------------------------*/
  .trophy h3 span {font-size: 12px;}

}

@media screen and (max-width: 834px) {
  body {overflow: initial;}

  /*---Layout--------------------------------------------------------------------*/
  .wrapper, .wrapper-out {width: 740px;}
  .intro, .wrapper-in {width: 650px;}
  .intro h1 {top: -70px;left: -70px;width: 140px;height: 140px;}
  aside {right: 15px;}

  main .page {padding: 168px 0 0;}

  /*---Homepage------------------------------------------------------------------*/
  video {height: 100%;width: auto;left: 50%;transform: translateX(-50%);}
  #scrollToBottom {display: none;}
  #bg-video {overflow-x: hidden;width: 100%;}
  #bg-video figure {bottom: 62px;left: 30px;width: calc(100% - 60px);}
  
  #home-intro {padding: 70px 0;}

  #text-roll {display: block;height: auto;margin-block-end: 70px}
  #text-roll .fleft {width: 100%;text-align: center;}
  #text-roll .fright {width: 100%;overflow: hidden;font-size: 36px;line-height: 39px;}
  #text-roll .fright .marquee[data-dir="vert"] {height: 78px;}
  #text-roll .fright .marquee[data-dir="vert"]>div {text-align: center;width: 100%;}

  #our-values .text {gap: 40px}

  #acc-know-how {display: block;padding: 0 30px;}
  #tabs {display: none;}
  
  #acc-know-how> div {border-bottom: 1px solid var(--green-forest);}
  #acc-know-how h3 {line-height: 70px;color: var(--green-forest);text-transform: uppercase;position: relative;transition: color 200ms ease-in-out;}
  #acc-know-how h3::after {content: '';background: url('../images/left-green-arrow.svg') center center no-repeat;width: 24px;height: 12px;position: absolute;top: calc(50% - 6px);right: 0;transform: rotate(0deg);transition: transform 200ms ease-in-out, background 200ms ease-in-out;}
  #acc-know-how .activ h3 {color: var(--gold);}
  #acc-know-how .activ h3::after {background: url('../images/left-gold-arrow.svg') center center no-repeat;transform: rotate(90deg);}
  
  #acc-know-how .acc-content {font-size: 16px;line-height: 26px;color: var(--green-forest);}
  #acc-know-how .acc-content>div p:last-child {margin-bottom: 25px;}

  /*---Tribe---------------------------------------------------------------------*/
  .member {display: block;}
  .picture-contact, .member .description {width: 100%;}

  .picture-contact {display: grid;grid-template-columns: repeat(2, 1fr);gap: 30px;margin-bottom: 30px;}
  .picture-contact img {border-radius: 29px;}

  .member-name, .member-expertises, .cv {display: none;}
  .member-name-ipad, .cv.ipad {display: block;}

  .member-name-ipad h4 {margin: 5px 0 16px;}
  .cv.ipad {border: 0;padding-top: 0;margin-top: 0;}

  .contact {text-align: left;padding-top: 0;margin-block: 16px;}

  .member-expertises-ipad {display: block;margin: 60px 0 30px;}
  .member-expertises-ipad>a {display: inline-block;border: 1px solid var(--matte-black);padding: 10px 20px;line-height: 24px;height: 44px;border-radius: 22px;font-size: 12px;margin: 0 12px 16px 0;color: var(--matte-black)}
  .member-expertises-ipad>a:hover {background-color: var(--matte-black);color: var(--cream)}

  /*---Join us---------------------------------------------------------------------*/
  #form-content {width: 650px;}
  .grid2col {gap: 30px 100px;}

  /*---Contact-------------------------------------------------------------------*/
  #contactPage .wrapper-shift {display: block;max-width: 100%;padding: 0 30px;width: 80%;}
  .contact-panel:first-child, .contact-panel:last-child {width: 100%;}
  .contact-panel:first-child {display: grid;grid-template-columns: 60% 40%;}
  .contact-panel:first-child>div>img {height: 40px;}
  .contact-panel>div + div {margin-top: 0;}
  .contact-panel:last-child  {margin-top: 36px;}
  .contact-panel {padding: 25px;}
  .contact-panel h3 {font-size: 25px;}
  .contact-panel h3 .gmap {display: block;margin: 24px 0 0 0;width: 140px;}

  /*---Awards----------------------------------------------------------------------*/
  .awards, .trophies{width: 720px;gap: 80px}
  #lepoint {width: 720px;height: 300px;}

}

@media screen and (max-width: 768px) {
  html {overflow-x: hidden;}
  body {width: 100%;min-height: 100vh;}
  .oh {overflow: hidden;}
  .hom {display: none;}
  .hod {display: block;}

  /*---Layout--------------------------------------------------------------------*/
  .wrapper, .wrapper-out, .wrapper-in, .intro {width: 100%;padding: 0 30px;}

  main .page {padding: 168px 0 0;}

  .intro {padding: 0 32px 0 64px;}
  .intro h1 {width: 200px;height: 200px;top: -70px;left: 0;}
  .intro .text {box-shadow: 0 0 10px 10px var(--cream)}
  .intro .desc {width: 100%;}
  .intro .subDesc {float: none;width: 100%;margin-top: 30px;}

  /*---Footer--------------------------------------------------------------------*/
  footer {padding-bottom: 136px;height: 210px;}

  /*---Homepage------------------------------------------------------------------*/
  video {height: 100%;width: auto;left: 50%;transform: translateX(-50%);}
  #scrollToBottom {display: none;}
  #bg-video {overflow-x: hidden;width: 100%;}
  #bg-video figure {bottom: 62px;left: 30px;width: calc(100% - 60px);}
  
  #home-intro {padding: 70px 0;}
  
  #text-roll {display: block;height: auto;margin-block-end: 70px}
  #text-roll .fleft {width: 100%;text-align: center;}
  #text-roll .fright {width: 100%;overflow: hidden;font-size: 28px;line-height: 39px;}
  #text-roll .fright .marquee[data-dir="vert"] {height: 78px;}
  #text-roll .fright .marquee[data-dir="vert"]>div {text-align: center;width: 100%;}
  
  #our-values .flex {flex-direction: column;gap: 57px;}
  #our-values .flex .fleft, #our-values .flex .fright {width: 100%;}

  #our-values h2 {margin-bottom: 70px;}
  #our-values .text {grid-template-columns: repeat(1, 1fr);font-size: 16px;line-height: 26px;gap: 90px;}

  /*---Tribe---------------------------------------------------------------------*/
  .member, .member:nth-child(2n), .member.show.reverse, .member.show:nth-child(2n) {flex-direction: column;}
  .picture-contact, .member .description {width: 100%;}
  .member-name h3 {font-size: 25px;}
  .picture-contact, .cv, .member-name.mobile {display: block;}

  .member-expertises {margin: 30px 0;}

  .member-name-ipad, .member-expertises-ipad, .cv.ipad {display: none;}
  
  #filters button {border: none;padding: 0 30px 0 0;margin: 0;display: block;text-align: left;border-radius: 0;position: relative;width: 100%;line-height: 40px;}
  #filters button + button {margin-top: 10px;}
  #filters button.on {background-color: transparent;color: var(--matte-black)}
  #filters button:hover, #filters button.on:hover {color: var(--matte-black)}
  #filters button::after {content: '';position: absolute;top: 10px;right: 5px;width: 20px;height: 20px;border-radius: 10px;border: 1px solid var(--matte-black);}
  #filters button.on::after {background-color: var(--matte-black);}

  .contact {text-align: center;}
  
  .member-expertises {white-space: nowrap;overflow-y: hidden;overflow-x: auto;display: block;}

  /*---JoinUs--------------------------------------------------------------------*/
  #form-content {width: 100%;padding: 0 15px;}
  .grid2col {display: block;}
  .inputField + .inputField, 
  .inputField + .custom-select-wrapper, 
  .custom-select-wrapper + .custom-select-wrapper, 
  .custom-select-wrapper + .file, 
  .file + .file, 
  .file + textarea {margin-top: 50px;}
  textarea {width: 100%;}
  form .text-right {text-align: center;}
  
  #responseForm .success {width: calc(100% - 30px);margin: 0 15px;}
  
  /*---Awards--------------------------------------------------------------------*/
  #awards-logo {top: 13px;left: 21px;}
  #close-awards {top: 20px;right: 20px}
  .awards-title {font-size: 22px;line-height: 34px;}
  #awards-panel {overflow: auto;}
  .awards, .trophies, #lepoint {display: block;width: auto;padding: 0 15px;}
  .trophies {padding: 60px 15px;}
  #lepoint {height: 350px;}
  #lepoint .awarder-logo {display: grid;}
  .awarder-logo {justify-content: center;}
  .trophy + .trophy {margin-top: 60px;}
  .category-award, .category-award .word {display: block;}
  .category-award .word, .link-center {text-align: center;}
  a.hod {display: block;color: var(--matte-black);border: 1px solid;line-height: 44px;height: 44px;border-radius: 22px;padding: 0 34px;font-size: 12px;margin: 0 auto 60px;width: 224px;text-align: center;} 
  .awarder-logo a.hom {display: none;} 
  
  /*---legal page----------------------------------------------------------------*/
  .legal-page .flex {display: block;padding: 0 30px;}
  .legal-page .content {width: 100%;}
  .legal-page h1 {width: 100%;margin-bottom: 40px;}
  .legal-page .content h2 {font-size: 20px;}

  /*---contact page--------------------------------------------------------------*/
  #contactPage .wrapper-shift {width: 90%;}

}

@media screen and (max-width: 500px) {
  /*---Header--------------------------------------------------------------------*/
  #urgence-ipad {display: none;}
  #urgence {display: inline-block;position: fixed;left: calc(50% - 152px);bottom: calc(20px + env(safe-area-inset-bottom));width: 304px;text-align: center;text-transform: uppercase;color: #fff;line-height: 58px;height: 58px;border-radius: 29px;background-color: var(--gold);z-index: 3000;}

  /*---Contact-------------------------------------------------------------------*/
  #contactPage .wrapper-shift {display: block;max-width: 100%;padding: 0 30px;}
  .contact-panel:first-child, .contact-panel:last-child {width: 100%;}
  .contact-panel:last-child  {margin-top: 36px;}
  .contact-panel {padding: 25px;}
  .contact-panel h3 {font-size: 25px;}
  .contact-panel h3 .gmap {display: block;margin: 24px 0 0 0;width: 140px;}
  
  #transports {display: block;}
  #transports>div:last-child {margin-top: 55px;}
}