/* Fonts */
@font-face {
    font-family: 'NeueHaasGrotesk-L';
    src: url('../fonts/NeueHaasDisplay-Light.eot');
    src: url('../fonts/NeueHaasDisplay-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/NeueHaasDisplay-Light.woff2') format('woff2'),
        url('../fonts/NeueHaasDisplay-Light.woff') format('woff'),
        url('../fonts/NeueHaasDisplay-Light.ttf') format('truetype'),
        url('../fonts/NeueHaasDisplay-Light.svg#NeueHaasDisplay-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'NeueHaasGrotesk-b';
    src: url('../fonts/NeueHaasDisplay-Bold.eot');
    src: url('../fonts/NeueHaasDisplay-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/NeueHaasDisplay-Bold.woff2') format('woff2'),
        url('../fonts/NeueHaasDisplay-Bold.woff') format('woff'),
        url('../fonts/NeueHaasDisplay-Bold.ttf') format('truetype'),
        url('../fonts/NeueHaasDisplay-Bold.svg#NeueHaasDisplay-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'NeueHaasGrotesk';
    src: url('../fonts/NeueHaasDisplay-Roman.eot');
    src: url('../fonts/NeueHaasDisplay-Roman.eot?#iefix') format('embedded-opentype'),
        url('../fonts/NeueHaasDisplay-Roman.woff2') format('woff2'),
        url('../fonts/NeueHaasDisplay-Roman.woff') format('woff'),
        url('../fonts/NeueHaasDisplay-Roman.ttf') format('truetype'),
        url('../fonts/NeueHaasDisplay-Roman.svg#NeueHaasDisplay-Roman') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Tiempos';
    src: url('../fonts/TiemposHeadline-Medium.eot');
    src: url('../fonts/TiemposHeadline-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/TiemposHeadline-Medium.woff2') format('woff2'),
        url('../fonts/TiemposHeadline-Medium.woff') format('woff'),
        url('../fonts/TiemposHeadline-Medium.ttf') format('truetype'),
        url('../fonts/TiemposHeadline-Medium.svg#TiemposHeadline-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}





/* Defaults */
body, ul, li, ol, form, h1, h2, h3, h4, h5, h6, div, span, p { padding:0; margin:0; border:0; -webkit-text-size-adjust:none; -moz-text-size-adjust:none; text-size-adjust:none;}
article, aside, dialog ,figcaption, figure, footer, header, hgroup, main, nav, section { display:block;}
input, textarea { -webkit-appearance:none; -ms-appearance:none; appearance:none; -moz-appearance:none; -o-appearance:none; border-radius:0;}
label { margin: 0; padding: 0;}
* { outline:none !important;}
strong, b { font-weight:normal;}
ul { list-style-type:none;}
body { font: normal 16px/24px 'NeueHaasGrotesk';  background: #ffffff; color: #ffff}
body *  { box-sizing:border-box; outline:0; /*transition: all 400ms ease-in-out;*/}
a { text-decoration:none !important;  outline:none; transition: all 400ms ease-in-out;}
img { border:none;}
p { padding-bottom: 25px; letter-spacing: 1px }
/**, ::before, ::after { box-sizing: border-box; transition: all ease-in-out 400ms;}*/

 ::-webkit-input-placeholder     { opacity:1; color: #fff }
 :-moz-placeholder               { opacity:1; color: #fff}
 ::-moz-placeholder              { opacity:1; color: #fff}

.container {  max-width: 1200px;  margin: 0 auto }
.btn { position: relative; text-align: center; background-color: transparent; border:#a8a8a8 solid 1px ; font:16px/normal NeueHaasGrotesk-b; color:#fff; padding:25px 45px 19px 45px; border-radius: 50px; text-transform: uppercase; display: inline-block; height: 70px; transition: all 400ms ease-in-out; box-shadow: none; letter-spacing: 1px }
body  { background:url(../images/bg-page.jpg) #2b2929;  background-size: cover; background-attachment: fixed; }
.container { max-width: 1200px; width: 100% }
.headTop { padding: 40px 60px; display: flex; justify-content: space-between; position: relative; }
.txtHead { position: absolute; left: 0; right: 0; margin: auto; text-align: center }
.txtHead  p { color: #fff; text-transform: uppercase; font-size: 16px; font-family:NeueHaasGrotesk-l; padding-top: 25px ; letter-spacing: 1px }
.decoHead { background: url(../images/decoHead.png); background-size: cover; width: 705px;height: 716px; display: block; position: absolute; left: 0;top: -402px; right: 0; margin: auto; animation: animName 80s linear infinite;}
.blcBanner { padding:15px 140px;  }
.blcBanner h1 { font:60px/normal NeueHaasGrotesk-l; letter-spacing: 1.5px; }
.blcBanner .Txt div { font-family: NeueHaasGrotesk-b; font-size: 110px; line-height: 105px; height: 110px; letter-spacing: 2.8px ; white-space: nowrap;overflow: hidden; text-overflow: ellipsis;}
.blcBanner .Txt span { text-align: right;display: block; font-size: 48px;padding-top: 0; line-height: normal}
.blcBanner .Txt span  strong { font-family:NeueHaasGrotesk-b  }
.blcBanner .blcBtn { text-align: center; margin-top: 48px;}
.blcBtn .btn { margin: 0 13px }
.txt-carousel{ margin-bottom: 22px }
.txtRotate { position: absolute; left: 40px; bottom: 0 ; width: 124px; height: 124px }
.blcHeader .txtRotate  { bottom:60px ; }
.blcBanner { position: relative;height: calc(100vh - 220px); display: flex; align-items: center;}
.blcHeader { height: 100vh; position: relative;}
.Header { height: 100vh; position: relative;}
.txtBanner { margin-top: -200px;}
.circTxt p { text-transform: uppercase; font-size: 14px;}
.txtRotate svg { fill: currentColor; height: auto;max-width: 66vmin;transform-origin: center;width: 66%;text-transform: uppercase;}
.txtRotate svg a { color: #fff; letter-spacing: 1px; position: relative; }
.txtRotate svg a:before { content: ""; background:url(../images/ico.png); width: 20px; height: 29px; display: block; }
.cursor { background: url(../images/cursor.png) no-repeat center ; width: 100%; height: 100%;  position: absolute;  left: 0; top: 0; display: block;  bottom: 0;  margin: auto; right: 0; z-index: 20; transition: .3s all ease;}
.scrollT { background: url(../images/scroll.png) no-repeat center ; width: 130px; height: 130px;  position: absolute;  left: 0; top: 0; display: block;  bottom: 0;  margin: auto; right: 0; z-index: 2; }
.txtRotate:hover .scrollT { opacity: 0 }
.age { font-family: Tiempos;  width: 125px; height: 125px; position: absolute; left: 0%; right: 0; margin: auto; top: 0;bottom: 0;display: flex;font-size: 40px; text-align: center;align-items: center; justify-content: center; flex-direction: column;}
.age span {display: block;font-size: 20px;}
#head { position: relative;  z-index: 99;}


@keyframes text-animation {
  0% {
    width: 0;
  }
  50% {
    width: 100%;
  }
  100% {
    width: 0;
  }
}

/* Apropos */
#Apropos {  padding:0 80px 47px; position: relative;}
#Apropos h2 { text-align: center; font:128px/normal NeueHaasGrotesk-b; color: #fff; margin-bottom: 7px  }
#Apropos h3 { color: #fff; text-align: center; font:48px/50px NeueHaasGrotesk-b; max-width: 1090px; margin: 0 auto 5px }
.Text-image { display: flex; flex-flow: row wrap }
.Text-image > div { width: 50%; position: relative;}
.Text-image > div.txt { max-width: 600px; margin: 0 auto; padding:20px 60px; position: relative; z-index: 20}
.Text-image img { width: 100%;display: block;}
.Text-image > div.images { opacity: 0.5;}
.Text-image > div.images img {  position: absolute; right: 79px; top: -200px}
#Apropos .txtRotate { left: auto; right: 40px; }
#Apropos .blcTxt:after {  content: "";  background: url(../images/decoHead.png); background-size: cover; width: 705px; height: 716px; position: absolute; right: -360px; bottom: -200px; z-index: -1; animation: animName 80s linear infinite;}
#Apropos .blcTxt.reverse:after { display: none; }
#Apropos .blcTitle h3 { margin-top: 10px }

/* Services */
#Services h2 { color: #fff; font:128px/normal NeueHaasGrotesk-b; color: #fff; margin-bottom: 7px; text-align: center }
.slideService .item div { font:48px/normal NeueHaasGrotesk-b; color: #fff; position: relative; text-align: center; opacity: 0.5 ; padding: 0 40px}
.slideService .item div:after { content: ""; background:#fff; width: 14px; height: 14px; border-radius: 50%;  display: block; position: absolute; right: 0; top: 0; bottom:0; margin: auto }
.slideService .slick-center .item div { opacity: 1 }
.slideService  .item:hover div { opacity: 1; transition:  all 400ms ease-in-out}
#slideService .slick-list.draggable { padding: 0 200px 0 0 !important;}
.SlideTxt .item span { text-align: center; font-size: 16px; text-transform: uppercase; display: block; letter-spacing: 1px }
#SlideTxt { position: relative;z-index: 2;}
#slideService { margin-bottom: 22px; position: relative; z-index: 2;}
#slideService .item.slick-center  div { opacity: 1; }
.DetailsService .item .inner {  display: flex; flex-flow: row wrap; position: relative;}
.DetailsService .item .inner .img { width: 55% }
.DetailsService .item .inner .lstService { width: 45% ; max-width: 650px; margin-top: 286px}
.lstService .content h3 { color:#fff; font:30px/normal NeueHaasGrotesk-b ; margin-bottom: 2px; letter-spacing: 0.8px; padding-right: 200px}
.lstService .content { position: relative; margin-bottom: 46px; opacity: 0.5; transition: all 400ms ease-in-out;  }
.lstService .content:hover { opacity: 1 }
.lstService .content .btn { position: absolute; right: 0; top: 0; opacity: 0 }
.lstService .content:before { content: ""; background: url(../images/ico2.png); width: 20px; height: 29px; display: block; position: absolute; left: -40px; top: 10px }
.lstService .content:hover .btn { opacity: 1 }
.DetailsService .item .inner .img img { display: block;  object-fit: cover; opacity: 0.25; max-height: 800px}
.DetailsService .item .inner { display: flex;  flex-flow: row wrap;  position: relative;}
#DetailsService { margin-top: -200px; position: relative; }
#DetailsService:after { content: ""; background: url(../images/deco-service.png); background-size: cover; width: 766px; height:725px; position: absolute; right: 0; top: 0; display: block; z-index: -1; opacity: 0.5  }
#Services { position: relative; }

/* Réalisations */
#Realisation { margin-top: -143px; position: relative; padding-bottom: 0}
#Realisation:before{ content: ""; background: url(../images/decoHead.png); background-size: auto; background-size: cover; width: 705px; height: 716px; position: absolute; left: -360px; bottom: 0; top:0; margin: auto; z-index: -1;animation: animName 80s linear infinite;}
.blcTitle h2 { color: #fff; font:128px/normal NeueHaasGrotesk-b; color: #fff; margin-bottom: 7px; text-align: center; height: 128px }
.blcTitle h3 { color: #fff; text-align: center; font:48px/50px NeueHaasGrotesk-b; max-width: 1090px; margin: 0 auto 40px; display: block; letter-spacing: 1px  }
.lstRealisations .item  { padding: 0 15px }
.lstRealisations .item .inner { position: relative; opacity: 0.6}
.lstRealisations .item .inner .img { width: 100%; height: auto; display: block; }
.lstRealisations .item .inner .img img { display: block; width: 100%;    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
  filter: gray; /* IE6-9 */ -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */; -moz-filter: grayscale(100%); -ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: grayscale(100%); }
.lstRealisations .item .inner {  width: 100%; height: auto ; position: relative; }
.lstRealisations .item .inner .logoSite { transition: all 1000ms ease-in-out; position: absolute;left: 0;right: 0; margin: auto;bottom: 60px; text-align: center;}
.lstRealisations .item .inner .btn { position: absolute;  left: 0; right: 0; margin: auto;width: 196px; bottom: 60px; background-color: #2a2929; border-color: #2a2929; opacity: 0}
.lstRealisations .item .inner:hover .logoSite  { bottom: auto; top: 60px }
.lstRealisations .item .inner:hover .btn { opacity: 1 }
.lstRealisations .item .inner:hover img { filter: none; -webkit-filter: grayscale(0); }
.home .lstRealisations .item:nth-child(2n) { margin-top: -120px;}
.lstRealisations .item {  display: flex; justify-content: center;align-items: center;}
.lstRealisations .item:nth-child(even) { color: white;}
#Realisation .txtRotate { left: auto;right: 20px; bottom: -80px; z-index: 20}


/* Atout*/
#Atout { position: relative; }
.blcAtout { padding: 117px 0 80px; position: relative; }
.lstAtout:after { z-index: -1; opacity: 0.4; content: ""; background: url(../images/decoAtout.png); width: 181px; height:264px; background-size: cover; display: block; position: absolute; left: 0; right: 0; margin:auto ;  top: 0; bottom: 0 }
.lstAtout { position: relative; }
.lstAtout { display: flex; flex-flow: row wrap; }
.lstAtout .item {  width: 33.33%; padding: 0 20px; }
.lstAtout .item .inner { display: flex ; align-items: center; opacity: 0.5; transition: all 1000ms ease-in-out; }
.lstAtout .item .inner:hover { opacity: 1 }
.lstAtout .item .cardTitle { font-size: 30px ; font-family: NeueHaasGrotesk-b ; margin-bottom: 10px }
.blcAtout .blcTitle { margin-bottom: 118px ;}
.lstAtout .item .inner p {  padding-bottom: 0;}
.lstAtout .item .inner .ico { padding-right: 20px }
#Atout .txtRotate { right: 0; bottom:-25px; }

/* Footer */
.blcFooter { padding: 69px 0; position: relative; }
.blcFooter .img { content: ""; background:url(../images/bg-ftr.png); width: 995px; height: 647px; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; opacity: 0.3; z-index: -1 }
.blcFooter .blcBtn { text-align: center; padding-bottom: 50px}
.blcFooter .blcTitle { margin-bottom: 119px;}
.lstFooter .container { display: flex; flex-flow: row wrap; justify-content: space-between;}
.lstFooter .container .col1 { text-align: center }
.lstFooter .container .col1 .titre { font:30px/normal NeueHaasGrotesk-b ; }
.lstFooter .container .col1 a { color:#fff; display: block; font-family: NeueHaasGrotesk-b }
.sociau {  display: flex;justify-content: center; margin-top: 10px; }
.sociau li a { width: 50px; height: 50px; border-radius: 50%; border:#a4a4a4 solid 1px; transition: all 400ms ease-in-out; }
.sociau li { margin:0 8px; }
.sociau li.facebook a { background:url(../images/fb.png) no-repeat center;  }
.sociau li.linkedin a { background:url(../images/in.png) no-repeat center;  }
.ftrBottom p { text-align: center; }
.lstFooter { padding-bottom: 96px; }
.blcFooter::after {  content: "";  background: url(../images/decoHead.png); background-size: cover; width: 705px; height: 716px; position: absolute; right: -360px; bottom: -200px; z-index: -1; animation: animName 80s linear infinite;}
.blcFooter .txtRotate { left: auto; right:20px; bottom: 60px }
.footer {  overflow: hidden; position: relative;}
#wrapper { position: relative; }
.bg-etoile {  position: absolute;top: 0; left: 0; width: 100%;height: 100%; opacity: 0.5;z-index: -2}
#msText { display: none;}
#stats { display: none;}

/* Menu */
body { overflow-x: hidden; }
.blcMenu { position: relative; z-index: 20;}
.nav-menu { background: none; width: 60px; height: 80px; top: 0;right: 15px; -webkit-transition: width 0.2s ease, height 0.4s ease; -moz-transition: width 0.2s ease, height 0.4s ease;-o-transition: width 0.2s ease, height 0.4s ease; transition: width 0.2s ease, height 0.4s ease;}
.menu-list { margin-top: 100px; text-align: center;opacity: 0;}
.list-open { opacity: 1; -webkit-transition: opacity 0.9s ease;-moz-transition: opacity 0.9s ease;  -o-transition: opacity 0.9s ease; transition: opacity 0.64s ease;-webkit-transition-delay: 0.34s; -moz-transition-delay: 0.34s; -o-transition-delay: 0.34s;transition-delay: 0.34s;}
.menu-list li { padding: 10px; background: none;color: #fff;}
.menu-list li:hover { cursor: pointer;}
.menu-list li a { color:#3a3939; font-family:NeueHaasGrotesk-l  }
.menu-list li:hover a { color:#fff }
.menu-list li.active a { color:#fff; }
li .social-icons:hover { background: none;}
.social-icons { margin-top: 20px; font-size: 24px}
.social-icons a { margin: 18px; color: #fff;}

/* Burger menu */
#burger-wrap { position: fixed; top: 0;  right: 15px;margin: 0;padding: 0;width: 60px; height: 80px;}
.burger { position: fixed; top: 40px;right: 70px; cursor: pointer; margin: 0;padding: 0; width: 60px;height: 60px; border-radius: 50%; border: none;-webkit-transition: all .3s; transition: all .3s;background-color: #fff;}
.burger:after { content: ""; width: 70px; height: 70px; border:#777676 solid 1px; position: absolute; left: -5px; top: -5px; border-radius: 50%; display: block; }
.burger span { display: block; position: absolute; top: 30px;left: 16px;right: 16px; height: 3px; background: #373533;border-radius: 0;-webkit-transition: background 0.3s .3s; transition: background 0.3s .3s;-o-transition: background 0s 0s;-webkit-transition-delay: 0.4s,0s; transition-delay: 0.4s,0s;}
.open .burger span { background: 0 0 transparent;transform: rotate(90deg);-webkit-transition: all 0.3s ease-in;transition: all 0.3s ease-in;-o-transition: all 0s ease;-webkit-transition-delay: 0s,0s;transition-delay: 0s,0s;}
.burger span::after,
.burger span::before { position: absolute; display: block; left: 0; width: 100%; height: 3px;background-color: #373533; content: "";border-radius: 5px;-webkit-transition-duration: .3s,.3s;transition-duration: .3s,.3s;-webkit-transition-delay: 0.4s,0s;transition-delay: 0.4s,0s;}
.burger span::before { top: -8px;-webkit-transition-property: top,-webkit-transform;transition-property: top,transform;}
.burger span::after {  bottom: -8px; -webkit-transition-property: bottom,-webkit-transform;transition-property: bottom,transform;}
.open .burger span::after,
.open .burger span::before { -webkit-transition-delay: 0s,.4s; transition-delay: 0s,.4s;background-color: #373533;}
.open .burger span::before { top: 0;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg); transform: rotate(45deg);}
.open .burger span::after { bottom: 1px; /* Fix for codepen, set to zero for normal use */ -webkit-transform: rotate(-45deg);-ms-transform: rotate(-45deg);transform: rotate(-45deg);}
.menu-list .inner { display: flex; justify-content: space-between;}
.menu-list .menu  a { text-transform: uppercase; font-size: 30px; opacity: 0.8 }
.menu-list .menu a { margin-bottom: 75px; position: relative; z-index: 20 !important}
.menu-list .menu a:hover { margin-left: 60px; opacity: 1}
.menu-list .menu li:hover { opacity: 1 }
.menu-list  .menu { text-align: left; position: relative;}
.contactHead ul li strong { display: block;  margin-bottom: 10px; font:30px/normal NeueHaasGrotesk-b; }
.contactHead ul li span { display: block; }
.contactHead ul li.tel span { margin-bottom: 10px;}
.contactHead ul li a { color:#fff ; }
.contactHead { text-align: left;}
.contactHead ul li { transition: all 400ms ease-in-out; margin-bottom: 30px; opacity: 0.5 }
.contactHead ul li:hover  { opacity: 1 }
.contactHead ul li:hover span,
.contactHead ul li:hover a  { color: #fff  }
.contactHead ul li.tel a { font-family: NeueHaasGrotesk-b }
.sociau li a { display: block;}
.contactHead  .sociau { justify-content: inherit;}
.menu-list { position: relative; height:90vh }
.menu-list:after  { content: ""; background:url(../images/deco-menu.png); width: 275px; height: 332px; position: absolute; bottom: 60px; right: 40px; display: block; }
.txtMenu { font: 30px/normal NeueHaasGrotesk-b;  color: #fff;  opacity: 1; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); position: absolute; left: 0; letter-spacing: 3px; top: 10px;}
.menu-list:before { content: ""; background:url(../images/deco-menu2.png); width: 507px; height: 100%; position: absolute; right: 0; top: 0; z-index: -1 }
.contMenu { position: relative; }
.bg-menu { background: none;width: 20vw;height: 20vw;top: -10vw; right: -10vw;
 -webkit-transition: width 0.2s ease, height 0.4s ease;
 -moz-transition: width 0.2s ease, height 0.4s ease; -o-transition: width 0.2s ease, height 0.4s ease;transition: all 1s ease-in-out; border-radius: 50%; position: absolute; overflow: hidden;}
.open .bg-menu {  position: fixed;background: url(../images/bg-menu.jpg) no-repeat top center; background-size: cover; background-color: #202020;width: 200vw; height: 200vw;  top: -100vw; right: -86vw; transition: all .3s ease-in-out; background-attachment: fixed;}
.contentMenu { position: fixed; left: 0; right: 0; width: 100%; max-width: 100% !important; margin: 0 auto; top: 0 ; display: none; transition: all .5s ease-in-out;}
.open .contentMenu { display: block; }
.lstFooter .container .col1 p { padding: 0;}
.lstFooter .container .col1 .ico { display: flex; align-items: center;  justify-content: center;}
.lstFooter .container .col1 .ico span  { display: block; width: 50px; height: 50px; border-radius: 50%; border:#a4a4a4 solid 1px; margin: 10px 7px 10px  }
.lstFooter .container .col1 .ico span.tel { background:url(../images/tel.png) no-repeat center; }
.lstFooter .container .col1 .ico span.WhatsApp { background:url(../images/whaptsapp.png) no-repeat center; }

.contactHead ul li.tel .ico { display: inline-block; vertical-align: middle; }
.contactHead ul li.tel .ico span  { display: inline-block; width: 50px; height: 50px; border-radius: 50%; border: #484848 solid 1px; margin: 0 7px 0 0  }
.contactHead ul li.tel .ico span.tel { background:url(../images/tel.png) no-repeat center; }
.contactHead ul li.tel .ico span.WhatsApp { background:url(../images/whaptsapp.png) no-repeat center; }
.contactHead ul li.tel a { display: inline-block; vertical-align: middle; }

 #Apropos .txtRotate .cursor { opacity: 0 }
 #Services .txtRotate { bottom: 120px; z-index: 20}
.txtRotate .cursor { opacity: 0 }
.line { position: relative;}
.line-mask {  position: absolute; top: 0; right: 0;background-color: #2b2929; opacity: 0.75; height: 100%; width: 100%;z-index: 2;}
.menu-list .cursor { background: none; width: 0; height: 0; transition: none }
.menu-list .menu { transform: none !important }

/* text-circle */
.circle {  position: relative; border-radius: 100%;padding: 0;animation: rotate-animation 8s infinite linear;}
.circle span {  position: absolute; transform-origin: top left; font-size: 14px; text-transform: uppercase;}
.circle2 {  position: relative; border-radius: 100%; padding: 0; animation: rotate-animation 8s infinite linear;}
.circle2 span { position: absolute; transform-origin: top left; font-size: 14px; text-transform: uppercase;}
@keyframes rotate-animation {
  from { transform: rotate(0); }
  to { transform: rotate(-360deg); }
}
/* realiation scroll Horinzontale */
.pinned-images-wrap {  overflow: hidden;}
.pinned-images-inner { display: flex;flex-wrap: nowrap; padding-top: 8rem;padding-bottom: 0;}
.pinned-images-inner .image { flex: none;display: flex; align-items: center;justify-content: center; margin-right: 0;width: 25%;}
@-webkit-keyframes opacity {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@keyframes opacity {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@keyframes change {
  0%, 12.66%, 100% {
    transform: translate3d(0, 0, 0);
  }
  16.66%, 29.32% {
    transform: translate3d(0, -25%, 0);
  }
  33.32%, 45.98% {
    transform: translate3d(0, -50%, 0);
  }
  49.98%, 62.64% {
    transform: translate3d(0, -75%, 0);
  }
  66.64%, 79.3% {
    transform: translate3d(0, -50%, 0);
  }
  83.3%, 95.96% {
    transform: translate3d(0, -25%, 0);
  }
}
.gsap-marker-end, .gsap-marker-start, .gsap-marker-scroller-end ,.gsap-marker-scroller-start { display: none !important }
svg text { letter-spacing: 10px; stroke: #fff; font-size: 128px;stroke-width: 1; /*animation: textAnimate 3s infinite alternate;*/font-family:  NeueHaasGrotesk-b;}
.blcTitle h2 svg {  fill: transparent}

@keyframes textAnimate {
  0% {
    stroke-dasharray: 0 50%;
    stroke-dashoffset:  20%;
    fill:hsl(1, 68%, 75%, 0);
    opacity: 0.3

  }
  
  100% {
    stroke-dasharray: 50% 0;
    stroke-dashoffstet: -20%;
    fill: hsla(0, 68%, 75%,0%);
    opacity: 1
  }
  
}

@keyframes textAnimate1 {
  0% {
    stroke-dasharray: 50% 0;
    stroke-dashoffstet: -20%;
    fill: hsla(0, 68%, 75%,0%);
    opacity: 1

  }
  
  100% {
    stroke-dasharray: 0 50%;
    stroke-dashoffset:  20%;
    fill:hsl(1, 68%, 75%, 0);
    opacity: 0.3
  
  }
  
}

.scrolling_down svg text {  animation: textAnimate 5s  alternate;}
.scrolling_up svg text {  animation: textAnimate1 5s  alternate;}
.contactHead { position: relative;z-index: 20;}
.overflow { overflow: hidden;}

/* Animation texte */

.slidelr,
.sliderl {
    position: relative;
    overflow: hidden;
    animation-name: slidelr;
    -webkit-animation-name: slidelr;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    transform-origin: 100% 0 0;
    -webkit-transform-origin: 100% 0 0
}
@keyframes slidelr {
    0% {
        transform: scale(0, 1)
    }
    100% {
        transform: scale(1, 1)
    }
}
@-webkit-keyframes slidelr {
    0% {
        -webkit-transform: scale(0, 1)
    }
    100% {
        -webkit-transform: scale(1, 1)
    }
}
.sliderl {
    animation-name: sliderl;
    -webkit-animation-name: sliderl;
    transform-origin: 0 0 0;
    -webkit-transform-origin: 0 0 0
}
@keyframes sliderl {
    0% {
        transform: scale(0, 1)
    }
    100% {
        transform: scale(1, 1)
    }
}
@-webkit-keyframes sliderl {
    0% {
        transform: scale(0, 1)
    }
    100% {
        transform: scale(1, 1)
    }
}
.slidelr::after,
.sliderl::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    background:#2a2929;
    animation-name: animlr;
    -webkit-animation-name: animlr;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-delay: .9s;
    -webkit-animation-delay: .9s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards
}

@keyframes animlr {
    0% {
        left: 0
    }
    100% {
        left: -100%
    }
}
@-webkit-keyframes animlr {
    0% {
        left: 0
    }
    100% {
        left: -100%
    }
}
.sliderl::after {
    animation-name: animrl;
    -webkit-animation-name: animrl
}
@keyframes animrl {
    0% {
        left: 0
    }
    100% {
        left: 100%
    }
}
@-webkit-keyframes animrl {
    0% {
        left: 0
    }
    100% {
        left: 100%
    }
}


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

.contactHead .sociau li {  padding: 0; margin-left: 0; margin-right: 15px}
.slick-dots { display: block; position: absolute;transform: translateX(-50%); left: 50%; margin: 0; bottom: 0px; list-style: none;}
.slick-dots li { display: inline-block;margin: 0 4px;}
.slick-dots li button { width: 12px; height: 12px; border: 0; border-radius: 100%; background-color: #fff; text-indent: -999999px; cursor: pointer;  opacity: 0.6}
.slick-dots li.slick-active button { background-color: #000;}
#particles-js { width: 100%; height: 100%; background-color: transparent; background-image: url(''); background-size: cover; background-position: 50% 50%; background-repeat: no-repeat;}
.logo { position: relative; z-index: 20;}

/* PAGE REALISATION */ 
.page #Realisation { margin-top: 0;}
.page .lstRealisations { display: flex;flex-flow: row wrap;padding-top: 60px}
.page .lstRealisations .item { width: 33.33% ; margin-bottom: 30px}
.page .lstRealisations .row { width: 100%; display: flex;}
.page .lstRealisations .item .inner { opacity: 1;}
.page .lstRealisations .item:nth-child(3n + 2)  { margin-top: -120px }
.page .lstRealisations .item:nth-of-type(2) { margin-top:-120px}
.page .lstRealisations .item .inner .img img { max-height: 485px; object-fit: cover }
.txtBanner .Txt { overflow: hidden;}

.loader { position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 99999; background: url(../images/bg-page.jpg); background-size: cover; background-color: #202020 }
.loader img { display: block; position: absolute; left: 0; right: 0; margin: auto; top: 0; bottom: 0 }
.loader .txtRotate { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 170px; height: 170px }
.logo-loading { background:url(../images/logo-loading.png); width: 77px; height: 72px; position: absolute; left: 0; right: 0; top: 0; bottom:0; margin: auto; transition: all 400ms ease-in-out ; transition-delay: 3s;}
.loader #myProgress { opacity: 0 }
.loader #myProgress #myBar { display: none !important; }
.js-count-particles { display: none;}

/* popup relaisations */ 
.pp-realisation { padding: 110px 80px; width: 100%; height: 100%;  background: url(../images/bg-menu.jpg) no-repeat top center; background-size: cover; background-color: #202020;}
.pp-realisation .inner-pp { display: flex; flex-flow: row wrap; position: relative; padding: 0 60px }
.pp-realisation .inner-pp .titre-vertical { writing-mode: vertical-rl; transform: rotate(180deg); position: absolute; left: 0; top: 0 }
.pp-realisation .inner-pp .titre-vertical h2 { color: #fff; font: 30px/normal NeueHaasGrotesk-b; text-transform: uppercase; letter-spacing: 4.3px }
.pp-realisation .inner-pp .blc-img  { position: relative; max-width: 624px; margin-bottom: 30px }
.pp-realisation .inner-pp .blc-img .img-mob { position: absolute; left: 50px; top: calc(100% - 122px);}
.pp-realisation .inner-pp .txt { padding-left: 273px }
.pp-realisation .inner-pp .txt h2 { color: #fff; font-size: 36px; line-height: 40px ;font-family:NeueHaasGrotesk-b; margin-bottom: 20px; letter-spacing: 1px  }
.pp-realisation .inner-pp .blcleft  { width: 70% }
.pp-realisation .inner-pp .blcRight  { width: 30%; max-width: 670px }
.pp-realisation .lstDetails .content { margin-bottom: 25px; opacity: 0.6; transition: all 400ms ease-in-out }
.pp-realisation .lstDetails .content h3 { font-size: 30px; font-family:NeueHaasGrotesk-b; margin-bottom: 10px }
.pp-realisation .inner-pp .txt p { letter-spacing: 1px; max-width: 395px}
.fancybox-close-small { background: url(../images/close.png); width: 70px; height: 70px }
.fancybox-button svg { display: none !important }
.fancybox-slide--html .fancybox-close-small { top: 40px; right: 60px }
.pp-realisation::after { content: ""; background: url(../images/deco-menu.png);  width: 275px; height: 332px; position: absolute; bottom: 60px;right: 40px;display: block;}
.pp-realisation:before { content: "";  background: url(../images/deco-menu2.png); width: 507px; height: 100%; position: absolute;right: 0; top: 0; z-index: -1;}
.img-desc img { width: 100%;}
.load { overflow: hidden;}




/* PAGE Contact */
.contactInfo .blc-select select { letter-spacing: 1px; font-size: 16px; font-family: NeueHaasGrotesk-b;  border: none; background: url(../images/select.png) no-repeat right center;background-color: transparent; appearance: none;outline: 0; height: 70px; border-radius: 35px; color: #fff; padding: 0 50px; border:#9c9b9b solid 1px; text-transform: uppercase; width: 380px; cursor: pointer; margin: 0 auto; display: block;}
.contactInfo .blc-select { margin-bottom: 40px;}
.contactInfo .blc-select select option { font-family: Arial; text-transform: uppercase; color: #000 }
.contactInfo  select { width: 100%; font-size: 16px; font-family: NeueHaasGrotesk;  border: none; background: url(../images/select.png) no-repeat right center;background-color: transparent; appearance: none;outline: 0; height: 70px; border-radius: 35px; color: #fff; padding: 0 30px; border:#9c9b9b solid 1px; text-transform: uppercase;  cursor: pointer;}
.contactInfo  select option { font-family: Arial; text-transform: uppercase; color: #000 }
.contactInfo .form-control { letter-spacing: 1px ; width: 100%; height: 70px; border-radius: 35px; color: #fff; padding: 0 30px; border:#9c9b9b solid 1px; font-family: NeueHaasGrotesk; font-size: 16px; background-color: transparent; }
.cont-form .col-33 { display: flex; flex-flow: row wrap }
.cont-form .col-33 .blc-chp {  width: 33.33%;}
.cont-form  .blc-chp  { padding: 0 15px; margin-bottom: 30px; }
.cont-form .col-100 .blc-chp {  width: 100%;}
.contactInfo textarea.form-control { padding-top: 23px; padding-left: 30px; padding-right: 30px;}
.blc-chp .scroll-textarea > .scroll-content > textarea { height: 68px !important; overflow-x: hidden !important;}
.contactInfo .blcBtn { text-align: center;}
.contactInfo .blcBtn .btn { background: url(../images/send.png) no-repeat 30px center ; background-color: #2a2929; border-color:#2a2929; cursor: pointer; padding-left: 70px; padding-top: 21px }
.cont-form.visible-form {display: block;}
.cont-form { display: none;}
#Contact { position: relative; padding-bottom: 80px}
#Contact .txtRotate { left: auto; right: 40px }
/* Message d'erreur page contact */
.blc-chp label.error,
.blc-chp #Cv-error.error + .add,
.blc-chp #motivation-error.error + .add { margin-top: 15px; display: block; }
.blc-chp #Cv-error.error,
.blc-chp #motivation-error.error {margin-top: 0;}
.contactInfo textarea.form-control + label.error { margin-top: 3px; }
.blcBtn .infos { margin-bottom: 30px; }

.lstPoste .lstTop .item a { display: block; font:48px/normal NeueHaasGrotesk-b; color: #fff; position: relative; text-align: center; opacity: 0.5 ; padding: 0 40px}
.lstPoste .lstTop .item a:after {  content: "";  background: #fff; width: 14px; height: 14px; border-radius: 50%;  display: block;  position: absolute; right: 0; top: 0; bottom: 0; margin: auto;}
.lstPoste .lstTop .slick-center .item a { opacity: 1 !important;}
.lstTop .item a:hover { opacity: 1 }
.detPoste { text-align: center;}
.detPoste .item { text-transform: uppercase;  }
#SlidePoste { margin-bottom: 20px;}
.detPoste .item  .btcBtn {  margin-top: 56px;}
.detPoste .item  .btcBtn  .btn { margin: 0 15px }
.contactInfo .form-control[type=file] { height: 0; overflow: hidden;width: 0; border:none; position: absolute; left: 0; top: 0}
.contactInfo .form-control[type=file] + label { color: #fff; cursor: pointer; display: inline-block; outline: none; position: relative; transition: all 0.3s; vertical-align: middle; position: relative;   white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 1px ; width: 100%; height: 70px;  border-radius: 35px; color: #fff; padding: 23px 50px 0 30px; border:#9c9b9b solid 1px; text-transform: uppercase; font-family: NeueHaasGrotesk; font-size: 16px;  background-color: transparent; }
.contactInfo .form-control[type=file] + label:after { content: ""; background:url(../images/file.png); width: 30px; height: 30px; background-size: cover; position: absolute; right: 20px; top: 20px; display: block; }
.contactInfo .form-control::-webkit-input-placeholder     { opacity:1; text-transform: uppercase; }
.contactInfo .form-control:-moz-placeholder               { opacity:1; text-transform: uppercase;}
.contactInfo .form-control::-moz-placeholder              { opacity:1; text-transform: uppercase;}


.pp-DetailsPoste { padding: 110px 80px; width: 100%; height: 100%;  background: url(../images/bg-menu.jpg) no-repeat top center; background-size: cover; background-color: #202020;}
.pp-DetailsPoste .inner-pp { display: flex; flex-flow: row wrap; position: relative; padding: 0 60px }
.pp-DetailsPoste .inner-pp .titre-vertical { writing-mode: vertical-rl; transform: rotate(180deg); position: absolute; left: 0; top: 0 }
.pp-DetailsPoste .inner-pp .titre-vertical h2 { color: #fff; font: 30px/normal NeueHaasGrotesk-b; text-transform: uppercase; letter-spacing: 4.3px; white-space: nowrap; } 
.pp-DetailsPoste .inner-pp .blcLeft { width: 70%; padding-right: 40px}
.pp-DetailsPoste .inner-pp .blcLeft h3 { font-size: 36px; font-family:NeueHaasGrotesk-b; margin-bottom: 32px}
.pp-DetailsPoste .inner-pp .blcLeft h3  span { font-family:NeueHaasGrotesk}
.pp-DetailsPoste .inner-pp .blcLeft ul li { padding-left: 30px; position: relative; margin-bottom: 35px ;}
.pp-DetailsPoste .inner-pp .blcLeft ul li:before { content: ""; background: url(../images/ico2.png); width: 21px; height: 29px; background-size: cover; position: absolute; left: 0; top: -1px}
.slideDetProfil .slick-track .slick-slide {
    width: 100%;
}
.slideDetProfil .slick-track .slick-slide .item { width: 100% !important }

.pp-DetailsPoste .inner-pp  .blcRight  { width: 30%; max-width: 670px }
.lstDetPoste .item > div { margin-bottom: 20px; opacity: 0.75; transition: all 400ms ease-in-out }
.lstDetPoste h4 { font-size: 30px; font-family: NeueHaasGrotesk-b; margin-bottom: 10px }
.lstDetPoste  .slick-slide { opacity: 0.75; margin-bottom: 20px}
.lstDetPoste .slick-slide.slick-current.slick-active { opacity: 1; }
.slideDetProfil .titre { font-size: 36px; line-height: 36px; font-family:NeueHaasGrotesk-b; display: none; margin-bottom: 20px  }
.cont-form h3.visible { display: block; }
.datepicker { background: url(../images/date.png) no-repeat right center; background-size: 50px }
.lstDetPoste .item { cursor: pointer;}
#Contact:before{ content: ""; background: url(../images/decoHead.png); background-size: auto; background-size: cover; width: 705px; height: 716px; position: absolute; left: -360px; bottom: -200px;  margin: auto; z-index: -1;animation: animName 80s linear infinite;}
#recrutement { position: relative;padding-bottom: 140px;}
optgroup { color: #000;}

/* Page Agence*/
#Equipe { position: relative; padding-bottom: 100px }
.Text-image.reverse { flex-direction: row-reverse;}
.Text-image.reverse > div.images img { position: absolute;right: 0;top: 0;}
.Text-image h4 { text-transform: uppercase; font-family: NeueHaasGrotesk; font-size: 24px; margin-bottom: 20px }
.blcApropos .blcTxt { position: relative;}
#Apropos .blcApropos .blcTxt.reverse .txtRotate { left: 0; right: auto; }
.ListEquipe  { margin-bottom: 40px }
.ListEquipe .item div { cursor: pointer; font: 48px/normal NeueHaasGrotesk-b;color: #fff; position: relative; text-align: center; opacity: 0.5; padding: 0 40px;}
.ListEquipe .item div::after {  content: "";  background: #fff; width: 14px; height: 14px;  border-radius: 50%; display: block; position: absolute; right: 0; top: 0;  bottom: 0; margin: auto;}
.contTxtEquipe .item div { display: block; text-align: center; max-width: 800px; margin: 0 auto }
.ListEquipe .slick-center .item div { opacity: 1;}
.ListEquipe .item div:hover { opacity: 1 } 
#Equipe .txtRotate { left: auto; right: 40px }
.blcAtout .container {  max-width: 1280px;}
.page .blcAtout { padding-top: 0 }

.page #Apropos {
    padding: 0 0 47px;
}

.cont-form  .blcTitle h3 { margin-bottom: 30px }
#recrutement .txtRotate:hover .age {  opacity: 0;}

/* Page service */
.blc-service-itrn .textImage {  display: flex; flex-flow: row wrap; justify-content: space-between;}
.blc-service-itrn .textImage .photo { max-width: 600px; margin: 0 auto; }
.blc-service-itrn .textImage  .description { width: 50%; margin-top: -20px}
.blc-service-itrn .textImage  .description ul li div strong { display: block; font-size: 30px; line-height: 35px; font-family:NeueHaasGrotesk-b; margin-bottom: 5px  }
.blc-service-itrn .textImage  .description ul li { margin-bottom: 40px; padding-left: 35px; position: relative; }
.blc-service-itrn .textImage  .description ul li:before { content: ""; background:url(../images/ico2.png); width: 21px; height: 29px; background-size: cover; position: absolute; left: 0; top: 0 ; bottom: 0; margin: auto}
.blc-service-itrn .textImage  .description ul  { margin-top: 20px }
.blc-service-itrn .row { position: relative; padding-bottom: 120px}
.blc-service-itrn .row .txtRotate { left: auto; right: 40px }
.blc-service-itrn .row.reverse .txtRotate { left: 40px; right: auto; }
.blc-service-itrn .reverse .textImage { flex-direction: row-reverse;}
.blc-service-itrn .container {  max-width: 1400px;}
.blc-service-itrn .container .blcTitle h3 { max-width: inherit; }

.pp-services { padding: 110px 80px; width: 100%; height: 100%;  background: url(../images/bg-menu.jpg) no-repeat top center; background-size: cover; background-color: #202020;}
.pp-services .inner-pp { display: flex; flex-flow: row wrap; position: relative; padding: 0 60px; justify-content: space-around}
.pp-services .inner-pp .titre-vertical { writing-mode: vertical-rl; transform: rotate(180deg); position: absolute; left: -20px; top: 0 }
.pp-services .inner-pp .titre-vertical h2 { color: #fff; font: 30px/normal NeueHaasGrotesk-b; text-transform: uppercase; letter-spacing: 4.3px; text-align: right; } 
.pp-services .inner-pp .blcLeft { width: 70%;}
.pp-services .inner-pp .blcRight {  width: 30%;}
.pp-services::after { content: ""; background: url(../images/deco-menu.png);  width: 275px; height: 332px; position: absolute; bottom: 60px;right: 40px;display: block;}
.pp-services:before { content: "";  background: url(../images/deco-menu2.png); width: 507px; height: 100%; position: absolute;right: 0; top: 0; z-index: -1;}
.pp-services .inner-pp .blcleft { width: 60%;}
.pp-services .inner-pp .blcleft h2 {  font-size: 36px; font-family: NeueHaasGrotesk-b;margin-bottom: 20px;}
.pp-services .blc-btn { text-align: left; margin-top: 25px}

.pp-services .blc-btn .btn { margin: 0 30px 0 0 }

.lstSite .img { position: relative; }
.lstSite .img img { width: 100%; filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
filter: gray;
-webkit-filter: grayscale(1);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%); display: block; margin: 0 auto }
.lstSite .img .logo { position: absolute; left: 0; right: 0; margin:  auto; bottom: 60px; text-align: center }
.lstSite .img .logo img { width: auto }

.lstDetPoste {
    height: 300px;
}

.blc-service-itrn .textImage .description ul li .btn {
    position: absolute;
    right: 0;
    top: 0;
    opacity: 0
}
.blc-service-itrn .textImage .description ul li:hover .btn  { opacity: 1 }

.blc-service-itrn .textImage .description ul li { padding-right: 200px }

.page #Contact:after { z-index: -1; content: ""; background:url(../images/bg-contact.png) no-repeat; opacity:0.25; width: 100%; height: 100% ; display: block; position: absolute; left: 0; top: 0 }

.lstFooter .container .col1 .ico span a, .tel span a {
    display: block;
    width: 50px;
    height: 50px;
}


#SiteWeb::before {
    content: "";
    background: url(../images/decoHead.png);
    background-size: auto;
    background-size: cover;
    width: 705px;
    height: 716px;
    position: absolute;
    left: -360px;
    bottom: -500px;
    top: 0;
    margin: auto;
    z-index: -1;
    animation: animName 80s linear infinite;
}

#Referencement:after { 
    content: "";
    background: url(../images/decoHead.png);
    background-size: auto;
    background-size: cover;
    width: 705px;
    height: 716px;
    position: absolute;
    right: -360px;
    bottom: -500px;
    top: 0;
    margin: auto;
    z-index: -1;
    animation: animName 80s linear infinite;

 }
 #CommunityManager:after { 
     content: "";
    background: url(../images/decoHead.png);
    background-size: auto;
    background-size: cover;
    width: 705px;
    height: 716px;
    position: absolute;
    left: -360px;
    bottom: -500px;
    top: 0;
    margin: auto;
    z-index: -1;
    animation: animName 80s linear infinite;

  }
  #Equipe:after { 
     content: "";
    background: url(../images/decoHead.png);
    background-size: auto;
    background-size: cover;
    width: 705px;
    height: 716px;
    position: absolute;
    left: -360px;
    bottom: -500px;
    top: 0;
    margin: auto;
    z-index: -1;
    animation: animName 80s linear infinite;

  }




@media (min-width:1201px){ 
    /* Flashlight Overlay */
    :root {
     /* cursor: none;*/
      --cursorX: 50vw;
      --cursorY: 50vh;
    }
    :root:before {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      position: fixed;
      pointer-events: none;
      background: radial-gradient(
        circle 30vmax at var(--cursorX) var(--cursorY),
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.5) 80%,
        rgba(0, 0, 0, 0.6) 100%
      );
      z-index: 999999
    }
    body {
         cursor: url("../images/ico2.png"), auto;
    }
}

@media (min-width:1201px){
    .lstFooter .container .col1 a:hover { color:#999; }
    .sociau li a:hover { background-color: #2a2929; border-color:#2a2929; }
    #Apropos .txtRotate:hover .age { opacity: 0 }
    #Apropos .txtRotate:hover .cursor { opacity: 1 }
    .txtRotate:hover .cursor  { opacity: 1 }
    .btn:hover { border-color:#2a2929; background-color: #2a2929  }
    .pp-realisation .lstDetails .content:hover { opacity: 1 }
    .contactInfo .blcBtn .btn:hover { background-color: transparent; border-color:#9c9b9b; }

}

@media (max-width:1400px) { 
    #slideService .slick-list.draggable {  padding: 0 50px 0 0 !important;}
    #Atout .txtRotate { left:20px; right: 0; bottom: -60px;}
    .blc-service-itrn .container { padding: 0 40px }
    svg text {letter-spacing: 2px}

}

@media (max-width:1365px) { 
    #Apropos {  padding:0 40px 47px;  position: relative;}
    .blcAtout { padding: 40px 40px 80px ;position: relative;}
    .lstFooter { padding: 0 40px 60px;}
    .blcBanner {  padding:15px 40px 120px }
    .txtMenu { left: -20px }
    .blcFooter .txtRotate { bottom: 20px }
    .DetailsService .item .inner .lstService { width: 50% }
    .DetailsService .item .inner .img { width: 50%;}
    .lstAtout .item { width: 33.33%;padding: 0 10px;}
    .pp-realisation { padding: 80px 60px }
    .pp-realisation .inner-pp .blcleft { padding-right: 40px }
    .pp-realisation .inner-pp .txt { padding-left: 230px;}
    .pp-realisation .inner-pp .blc-img .img-mob { left: 30px }
    .pp-DetailsPoste { padding: 80px 60px }
    .burger { right: 47px }
    #Realisation .txtRotate { right: 20px }
    .blcFooter .txtRotate { right: 20px }
    #Apropos .txtRotate { right: 20px }
    .blc-service-itrn .row .txtRotate { right: 20px }
    .pp-services {  padding:  80px 60px  }
    .pp-services .blc-btn .btn {  margin: 0 10px; padding: 25px 30px 19px 30px;}
    .page #Apropos { padding: 0 40px 47px;}
    #Equipe .txtRotate { right: 20px }
    .page #Apropos .txtRotate { right: -20px;}
      #Contact .txtRotate { right: 20px;}
 #PageServices #CommunityManager .blcTitle svg text {  font-size: 90px}

}

@media (max-width:1200px) {  
    .Text-image > div.images img { top: -123px;}
    .lstRealisations .item { min-height: auto }
    .lstAtout .item .cardTitle { font-size: 25px }
    .lstRealisations { top: 60px }
    .headTop { padding: 40px }
    .burger { right: 40px }
    .contentMenu { padding: 0 40px }
    .pinned-images-inner .image { width: 33.33% }
    #Services .txtRotate { bottom: 100px;}
    .Text-image > div.txt { padding: 20px 20px }
    .pinned-images-inner { padding-top: 5rem }
    .blcRealisation { padding: 0 40px;}
    #DetailsService { padding: 0 40px; }
    .lstService .content .btn {   opacity: 1; margin-top: 0;  padding: 0;  font-size: 0;  width: 50px;  height: 50px; right: 0px; background:url(../images/arw.png) no-repeat center; background-size: 10px}
    .lstService .content { padding-right: 60px }
    .txtRotate .cursor { opacity: 1;}
    .blcFooter .txtRotate .cursor { display: none;}
    .txtRotate:hover .scrollT { opacity: 1;}
    .pp-realisation { padding: 80px 40px;}
    .contactInfo { padding: 0 40px; }
    .pp-DetailsPoste { padding: 80px 40px }
    .lstRealisations .item .inner { opacity: 1 }
    .pp-DetailsPoste .inner-pp .blcLeft { width: 65%;}
    .pp-DetailsPoste .inner-pp .blcRight { width: 35% }
    .burger { right: 50px;}
    .pp-services .inner-pp { padding: 0 0 0 60px }
    .pp-services { padding: 80px 40px }
    .pp-services .blc-btn .btn { margin-bottom: 10px }
    .blcHeader .txtRotate { bottom: 0 }
    .txtBanner { margin-top: -100px;}
    #PageServices .blcTitle svg text {  font-size: 90px}
    #PageServices #CommunityManager .blcTitle svg text {  font-size: 70px}
    .blcBanner h1 { font-size: 50px }
     .lstService .content h3 { padding-right: 0 }
     #Realisation .txtRotate { bottom: 0 }
    .page #Realisation {   padding-bottom: 120px;}
  


}
@media (max-width:1024px) {  

    .pinned-images-inner { display: block; }
    .lstRealisations { top: 0;}
    .lstRealisations .item .inner { width: auto }
    .pinned-images-inner .image {  width: auto ;}
    .pinned-images-inner { display: block; padding: 0 40px;}
    .pinned-images-wrap.js-pinned-images-wrap { position: static !important;}
    .pin-spacer { padding: 0 !important; height: auto !important;}
    .home .lstRealisations .item:nth-child(2n) { margin-top: 0;}
    .pinned-images-inner { padding: 0 0 40px;}
    .page .lstRealisations { padding-top: 60px;}
    /*.page .lstRealisations .item:nth-child(2n) {  margin-top: -120px; }*/
    .page #Realisation { margin-top: 0 }
    .lstRealisations .item .inner .logoSite { top: 40px }
    .lstRealisations .item .inner .btn { bottom: 40px; }
    .lstRealisations .item .inner:hover .logoSite {  top: 40px; }
    .lstRealisations .item .inner .btn { opacity: 1 }
    .slick-slide img { margin: auto }
    .DetailsService .item .inner .lstService { width: 50%;}
    .DetailsService .item .inner .img { width: 50% }
    .lstService .content .btn {   opacity: 1; margin-top: 0;  padding: 0;  font-size: 0;  width: 50px;  height: 50px; right: 40px; background:url(../images/arw.png) no-repeat center; background-size: 10px}
    .menu-list { margin-top: 0; padding-top: 60px}
    .pp-realisation .inner-pp { padding: 0 40px; z-index: 20 }
    .pp-realisation .inner-pp .titre-vertical { left: -20px }
    .blc-service-itrn .textImage .photo { display: none; }
    .blc-service-itrn .textImage .description {  width: 100%; }
    .blc-service-itrn .textImage  .description { margin-top: 0 }
    .lstService .content h3 { padding-right: 0 }
    .pp-services .inner-pp { padding: 0;}
    .pp-services .inner-pp .txt { padding: 0 0 0 60px;}
    .lstRealisations .item .inner .img::after {
        content: "";
        background-color: rgba(0,0,0,0.4);
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

}


@media (max-width:991px) {
    .blcHeader { height: auto; position: relative; }
    .blcBanner { height: auto }
    .txtBanner { margin-top: 0;}
    .blcBanner h1 { font-size: 40px }
    /*.blcBanner > div { font-size: 90px; line-height: 93px; white-space: nowrap;  text-overflow: ellipsis; overflow: hidden;}*/
    .blcBanner .Txt span { font-size: 40px }
    .blcBanner .txtRotate {  bottom: 0; }
    #Apropos h2, #Services h2  { font-size: 90px }
    svg text { font-size: 90px }
    .blcTitle h2 { font-size: 90px }
    #Apropos h3 { font-size: 40px; line-height: 35px }
    .blcTitle h3 { font-size: 40px; line-height: 35px }
    .lstAtout .item { margin-bottom: 40px }
    .blcAtout .blcTitle { margin-bottom: 20px;}
    .DetailsService .item .inner .lstService { margin-top: 220px }
    .blcAtout { padding: 0 40px 20px}
    .blcFooter .blcTitle { margin-bottom: 40px;}
    .lstFooter { padding:0 40px 74px}
    .blcFooter { padding: 20px 0 20px;}
    .blcFooter::before { width: 530px; height: 400px; background-size: cover}
    .lstAtout .item .inner { flex-direction: column; }
    .lstAtout .item .inner .ico { padding-right: 0; height: 80px;display: flex; align-items: center; justify-content: center;}
    .lstAtout .item .inner .txt { text-align: center;}
    .contentMenu { padding: 0 40px;}
    .txtMenu { left: -20px }
    .lstFooter .container .col1 .titre { font-size: 25px }
    .blcFooter .txtRotate { bottom: 20px }
    .lstAtout .item .inner p br {  display: none;}
    .txtHead { max-width: 400px }
    .Text-image > div.images img {  position: absolute;right: 0;  top: 0; z-index: 2;}
    .lstService .content .btn { opacity: 1; margin-top: 20px; top: 7px}
    .lstService .content .btn {   opacity: 1; margin-top: 0;  padding: 0;  font-size: 0;  width: 50px;  height: 50px; right: 40px; background:url(../images/arw.png) no-repeat center; background-size: 10px}
    .lstService .content { padding-right: 0 }
    .lstService .content .btn { right: 5px }
    .lstService .content { margin-bottom: 20px; padding-right: 60px }
    .lstService .content span { display: block; }
    .lstRealisations .item img { display: block; margin: auto; }
    .home .lstRealisations .item:nth-child(2n+2) {  margin-top: 0;}
    .lstRealisations .item .inner .img { max-width: 282px; margin: 0 auto }
    .menu-list .menu a { margin-bottom: 40px;}
    .contactHead ul li { margin-bottom: 20px }
    .open .bg-menu { border-radius: 0 }
    .menu__item::before { display: none; }
    #Realisation { margin-top: -80px }
    .pinned-images-inner .image { width: 33.33% }
    .pinned-images-inner { padding: 0 0 40px}
    .decoHead { width: 400px; height: 406px; top:-218px}
    .blcFooter::after {  width: 400px; height: 406px; right: -200px; bottom: -100px;}
    #Apropos .blcTxt:after { width: 400px; height: 406px; right: -200px; bottom: -100px;  }
    #Realisation:before { width: 400px; height: 406px; left: -200px; bottom: -100px; }
    .blcBanner .txtRotate { left: 20px }
    .Header { height: auto;}
    .DetailsService .item .inner .lstService {  width: 50%;}
   .DetailsService .item .inner .img {  width: 50%;  margin-top: -110px}
    #DetailsService::after { display: none; }
    .DetailsService .item .inner .img img {  max-height: 500px; }
    #DetailsService { margin-top: 0 }
    .DetailsService .item .inner .lstService { margin-top: 40px;}
    .page .lstRealisations .item:nth-child(3n+2) { margin-top: -60px; }
    .page .lstRealisations .item:nth-of-type(2) { margin-top: -60px; }
   .blcHeader { height: 700px;  padding-bottom: 100px;}
    .blcHeader .txtRotate { bottom: 0; }
/*    .sociau li a { border-color: #fff }*/
    #head { position: relative; z-index: 999;}
    .open .contentMenu { background: url(../images/bg-menu.jpg) no-repeat top center; background-size: cover}
    .bg-menu { display: none; }
    .txtRotate .cursor { opacity: 1;}
    .blcFooter .txtRotate .cursor { display: none;} 
    .blcMenu { z-index: 999 }
    .contentMenu { height: 100%; overflow: scroll; background-color: #282627 }
    .contentMenu { right: -200%; display: inherit;  transition: all 1s ease-in-out }
    .open .contentMenu { right: 0; left:auto; display: inherit;}
    .list-open { background-color: #282627 ;  transition: all 400ms ease-in-out }
    .menu-list { opacity: 1 }
    .menu-list { height: 100%; opacity: 1; transition: all 400ms ease-in-out !important;  background: url(../images/bg-menu.jpg) no-repeat top center; background-size: cover; /* background: #282627; */}
    .pp-realisation .inner-pp .blcleft { width: 100%; }
    .pp-realisation .inner-pp .blcRight { width: 100% ; max-width: 624px ;margin: 0 auto}
    .pp-realisation .lstDetails .content { margin-bottom: 0 }
    .pp-realisation .inner-pp .blcleft {  padding-right: 0; display: flex; flex-direction: column;align-items: center;}
    .fancybox-slide--html .fancybox-close-small {  top: 20px; right: 20px;}
    .pp-realisation .inner-pp .blc-img .img-mob img {  width: 100%; display: block;}
    .menu-list::after { display: none; }
    .menu-list::before { display: none; }
    .page .lstRealisations .item .inner .img img { max-height: inherit;}
    .cont-form .blc-chp { padding: 0 5px;}
    .cont-form .col-33 .blc-chp { width: 50%;}
    #Contact { position: relative; padding-bottom: 130px;}
    .cont-form.demande-devis .col-33 .blc-chp:last-child {  width: 100%;}
    .cont-form.rendez-vous .col-33 .blc-chp:last-child {  width: 100%;}
    .pp-DetailsPoste .inner-pp { padding: 0 0 0 60px;}

    .pp-DetailsPoste .inner-pp .blcLeft { width: 100%; }
    .pp-DetailsPoste .inner-pp .blcRight { display: none; }
    .slideDetProfil .titre { display: block; }
    #Contact::before { width: 400px; height: 406px; left: -200px;  bottom: -100px;}

    #recrutement .txtRotate .cursor {   opacity: 0; }
    #recrutement .txtRotate:hover .age {  opacity: 1;}
    #recrutement  .txtRotate { left: 20px }
    .Text-image > div.txt { padding: 20px 0;}
    #PageServices .blcTitle h2 { font-size: 50px;}
    #PageServices .blcTitle svg text { letter-spacing: 0 ; font-size: 85px}
    .pp-services .inner-pp .blcleft { width: 100%;margin-bottom: 20px;}
    .pp-services .inner-pp .blcRight { width: 100%;}

    #PageServices .blcTitle svg text svg text {
        font-size: 70px;
    }

    .blc-service-itrn .textImage .description ul li .btn { opacity: 1 }
    .lstService .content h3 { padding-right: 0 }
    .lstService .content { opacity: 1 }
    .pp-services .inner-pp .titre-vertical h2 { white-space: normal; text-align: left;  }
    .lstRealisations .item {
        padding: 0 10px;
    }
    .lstRealisations .item .inner .btn { width: 180px; padding: 25px 20px 19px 20px}
    #Realisation .txtRotate { bottom: 0 }
    .page #Realisation {   padding-bottom: 120px;}

    #SiteWeb::before {
        width: 400px;
        height: 406px;
        left: -200px;
        bottom: -500px;
    }

    #Referencement::after {
        width: 400px;
        height: 406px;
        right: -200px;
        bottom: -500px;
    }
    #CommunityManager:after { 
        width: 400px;
        height: 406px;
        left: -200px;
        bottom: -500px;
     }
     #Equipe:after { 
        width: 400px;
        height: 406px;
        left: -200px;
        bottom: -500px;
     }
     .pp-services .blc-btn { margin-top: 0 }
     .pp-services .inner-pp .blcRight { padding: 0 20px }


}


@media (max-width:767px) { 
    body { background-attachment: inherit; }
    .headTop { padding: 20px 40px;}
    .blcBanner h1 { font-size: 35px;}
    .Text-image > div.txt {  max-width: 100%;  margin: 0 auto;}
    .Text-image > div { width: 100% }
    .Text-image > div.images img{ position: static; }
    .decoHead { width: 385px; height: 200px; }
    .blcBanner .txtRotate { left: 20px }
    .blcBanner .Txt div {  font-size: 70px;  white-space: nowrap;  line-height: 70px; height: 70px; text-overflow: ellipsis; overflow: hidden;}
    #Apropos h2, #Services h2 { font-size: 70px;}
    svg text { font-size: 70px }
    .blcTitle h2 { font-size: 70px;}
    #Apropos h3 { font-size: 30px;}
    .blcTitle h3 { font-size: 30px;}
    #Apropos {  padding: 0 40px 47px; position: relative;}
    .blcServices .txtRotate {  left: 20px; bottom: 80px; }
    .lstAtout .item { width: 100% }
    .lstAtout .item .inner { flex-direction: row;}
    .lstAtout .item .inner .ico { padding-right: 20px; width: 90px }
    .lstAtout .item .inner .txt { text-align: left; }
    .lstAtout .item { margin-bottom: 20px;} 
    .lstFooter .container .col1 { width: 100% ; margin-bottom: 20px}
    .lstFooter { padding: 0 40px 20px;}
    .blcAtout .blcTitle {  margin-bottom: 20px;}
    .blcTitle h2 { font-size: 70px; margin-bottom: 0; height: 110px}
    .blcFooter .img { display: none }
    #Realisation { margin-top: 0; padding-bottom: 100px }
    #Realisation .txtRotate { bottom: 0px }
    .menu-list .inner { flex-flow: row wrap }
    .open .bg-menu { border-radius: 0 }
    .contactHead ul li { margin-bottom: 0; }
    .txtMenu { display: block; margin-bottom: 20px ;writing-mode: inherit; transform: inherit; position: static; text-align: left; }
    .menu__item { padding-left: 0 }
    .menu-list .menu a:hover {  margin-left: 0;}
    .contactHead {  margin-top: 35px;}
    .menu-list { margin-top: 0 }
    .menu-list .menu a { font-size: 20px }
    .contactHead ul li strong { font-size: 25px }
    .pinned-images-inner .image { width: 50% }
    .content__container__list__item { font-size: 70px; line-height: 70px }
    .content__container { height: 70px }
    #Atout .txtRotate { bottom:0}

    .decoHead { width: 400px; height: 406px; top:-218px}
    .blcRealisation { margin-top: -70px;}
    .pinned-images-inner { padding-top: 20px;}
    .Text-image > div.txt { padding: 0;}
    .blcBanner .txtRotate {  bottom: 0 }
    .blcServices { margin-top:0;}

    .page .lstRealisations .item { width: 50%;  margin-bottom: 20px;  }
    .page .lstRealisations .item:nth-of-type(2) { margin-top: 0;}
    .page .lstRealisations .item:nth-child(3n+2) { margin-top: 0;}
    .page .blcRealisation { margin-top: 0;}
    .page .lstRealisations { padding-top: 0;}
    .page .lstRealisations .item { padding: 0 10px;}
    .lstRealisations .item .inner { width: 100%;}
    .lstRealisations .item .inner .img { max-width: 100%;}
    .page .blcRealisation { padding: 50px 40px 0;}
    .blcHeader {  height: auto; padding-bottom: 0 }
    .blcTitle h2 svg { height: 90px;}
    .blcTitle h2 { margin-bottom: 0; height: auto; }
    .pinned-images-inner { padding: 0 }
    .DetailsService .item .inner .lstService { width: 60%;}
    .DetailsService .item .inner .img { width: 40% }
    .blcRealisation { padding: 0 20px;}
    .blcBtn .btn { margin: 0 13px 15px; }
    .blcFooter .blcBtn { padding-bottom: 20px; }
    .blcFooter .blcTitle { margin-bottom: 0; padding-bottom: 20px}
    .blcTitle h3 { margin-bottom: 0 }
    .lstRealisations .item .inner .btn { bottom: 40px }
    .blcRealisation .blcTitle { padding-bottom: 30px;}
    .lstRealisations .item .inner:hover .logoSite {  bottom: auto; top: 40px;}
    .lstRealisations .item .inner:hover .btn { opacity: 1;}
    #Atout {  padding-bottom: 120px;}
    #Services { padding-bottom: 100px;}
    #Services .txtRotate {bottom:60px;right: 10px;}
    .DetailsService .item .inner .lstService {  padding: 0 0 20px;}
    #Apropos .txtRotate { right: 20px }
    .DetailsService .item .inner .lstService { max-width: 100% }
    .pinned-images-inner { padding: 0;padding-bottom: 40px; }
    .lstRealisations .item .inner:hover .logoSite { bottom: auto; top: 40px;}
    .menu-list .inner { padding-bottom: 30px }
    .pp-realisation { padding:100px 20px 60px}
    .pp-realisation .inner-pp .titre-vertical { left: -10px;}
    .contactInfo .blc-select select { padding: 0 20px; width: 100% }
    .cont-form .blcTitle { margin-bottom: 20px;}
    .cont-form .blc-chp {  margin-bottom: 10px;}
    .blcBtn .infos { margin-bottom: 10px;}
    .blc-chp label.error,
    .blc-chp #Cv-error.error + .add, 
    .blc-chp #motivation-error.error + .add { margin-top: 8px;}
    .contactInfo textarea.form-control + label.error { margin-top: 0;}

     .pp-DetailsPoste .inner-pp .blcLeft { width: 100%;}
     .pp-DetailsPoste .inner-pp  .blcRight  { width: 100%; max-width: inherit; }
     .pp-DetailsPoste .inner-pp .titre-vertical { writing-mode: inherit; transform: rotate(0deg); position: static; margin-bottom: 20px;}
     .pp-DetailsPoste .inner-pp { padding: 0 ;}
     .Text-image.reverse > div.images img { position: static;}
     .contTxtEquipe { padding: 0 40px;}
     .contactHead ul li { padding-left: 0 }
     .cont-form .blcTitle { margin: 15px 0; padding: 0 }
     .contactInfo .blc-select { margin-bottom: 20px; margin-top: 20px}
     .cont-form .blcTitle h3 { margin-bottom: 0;}
     .contactInfo .blcBtn .btn { background-color: transparent; border-color: #a8a8a8 }
     .blcRecrutement { padding-top: 20px;}
     .detPoste .item .btcBtn { margin-top: 30px;}
     #Equipe { padding-bottom: 120px;}
     .slidelr::after, .sliderl::after { display: none; }
     #PageServices .blcTitle h2 { font-size: 20px;}
     #PageServices .blcTitle svg text { font-size: 60px;}
     #PageServices #CommunityManager .blcTitle svg text { font-size: 50px;}

    .pp-services  .inner-pp .titre-vertical { writing-mode: inherit; transform: rotate(0deg); position: static; margin-bottom: 20px;}
    .pp-services .inner-pp { padding: 0; z-index: 20 }
    .blc-service-itrn .textImage .description ul li { margin-bottom: 20px }
    .lstService .content h3 { padding-right: 0 }

    .blc-service-itrn .textImage .description ul li { padding-right: 70px }
    .blc-service-itrn .textImage .description ul li .btn {
        opacity: 1;
        margin-top: 0;
        padding: 0;
        font-size: 0;
        width: 50px;
        height: 50px;
        right: 0;
        background: url(../images/arw.png) no-repeat center;
        background-size: 10px; }
    .blcHeader .loader .txtRotate {  left: 0;}
    .pp-services .inner-pp .titre-vertical h2 { letter-spacing: 1px }
    .pp-services .inner-pp .txt { padding: 0 0 0;}
    .pp-services .inner-pp .blcRight { padding: 0 }
    .pp-services .inner-pp { justify-content: inherit; }
    
}

@media (max-width:600px) {
    .decoHead { width: 300px; height: 150px;}
    .headTop { padding: 20px 20px;}
    .txtHead { max-width: 250px;}
    .burger { right: 20px;}
    .blcBanner { padding: 15px 20px 120px}
    .blcBanner .Txt div { font-size: 50px;  line-height: 53px;}
    #Apropos { padding: 0 20px 120px}
    .slideService .item div { font-size: 30px }
    #SlideTxt { padding: 0 20px }
    .DetailsService .item .inner .lstService { width: 100% }
    .DetailsService .item .inner .lstService {  margin-top: 20px;padding:  0}
    #DetailsService { margin-top: 0; position: relative;}
    .DetailsService .item .inner .img { display: none; }
    #Realisation { margin-top: 0 }
    #DetailsService::after { width: 400px; height: 400px; }
    .blcServices .txtRotate { left: auto; bottom: 10px;right: 0;}
    .blcFooter .blcBtn .btn { margin-bottom: 20px;}
    .blcFooter .blcBtn { padding-bottom: 20px }
    .blcAtout { padding: 0 20px 0;}
    .btn { padding: 20px; height: auto; }
    .blcBanner .Txt span { font-size: 28px;}
    .lstFooter { padding: 0 20px 20px;}
    #Apropos h2, #Services h2 { font-size: 50px;}
    svg text { font-size: 50px }
    .blcTitle h2 {   font-size: 50px; height: auto}
    .blcTitle h3 { margin-bottom: 0 }
    #Apropos h3 { font-size: 25px; margin-bottom: 20px; line-height: 30px}
    .blcTitle h3 { font-size: 25px;}
    .blcFooter .blcTitle { margin-bottom: 0;}
    .blcFooter .blcBtn { padding-bottom: 0;}
    #Realisation .blcTitle { padding: 0 20px 40px;}
    .blcFooter .txtRotate { bottom: 60px;}
    #Apropos .txtRotate { right: 0 }
    .blcBanner .blcBtn { margin-top: 20px }
    .blcBanner .blcBtn .btn {  margin-bottom: 20px; width: 280px; margin: 0 auto 15px;}
    .blcBanner .txtRotate { bottom: -54px; }
    #slideService { padding: 0 20px }
    .blcBanner .Txt div { overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .txtHead { display: none; }
    .menu-list .menu a { margin-bottom: 30px; }
    .bg-menu { border-radius: 0 }
    .open .bg-menu { top: 0; height: 100vh;  }
    .contentMenu { padding: 0 20px;}
    .contactHead { margin-top: 0;}
    .hover-reveal { width: 150px; height: 150px }
    .content__container__list__item { font-size: 50px;line-height: 50px;overflow: hidden; text-overflow: ellipsis;}
    .content__container { height: 50px;}
    .lstRealisations .item .inner:hover .logoSite {  bottom: auto; top: 40px;}
    .lstRealisations .item .inner:hover .btn { opacity: 1;}
    .lstRealisations .item .inner .btn { opacity: 1;}
    .lstRealisations .item .inner .logoSite { top: 40px; bottom: auto;}
    .pinned-images.content-wrapper { padding-bottom: 20px;}
    #Realisation .blcTitle {  padding: 0;}
    .txtMenu { margin-bottom: 10px }
    .blcBanner .txtRotate {  left: 10px;  bottom: -80px;}
  
    #Realisation { padding-bottom: 120px;}
    #Services .txtRotate { bottom: 0; right: 10px}
    .lstAtout .item { padding: 0;}
    .blcBanner .txtRotate { bottom: -95px;}
    .Text-image > div.txt { padding: 0;}
    .blcRealisation { margin-top: 0px;}
    .lstService .content .btn { right: 5px }
  
    .pinned-images-inner {  padding:20px 0 40px}
    .blcFooter { padding: 20px 20px 20px;}
    .blcTitle h3 { font-size: 25px; line-height: 30px;}
    .slideService .item div { padding: 0 }
    .slideService .item div::after { display: none; }
    #Realisation .txtRotate { bottom: 0 }
    .slideService .item div { opacity: 1 }
    #slideService .slick-list.draggable {  padding: 0 0 0 0 !important; }
    .page .blcRealisation { padding:0 20px 0}
    .page .lstRealisations .item { width: 100%; }
    .page .blcRealisation  .content-inner { padding-top: 30px;}
    .blcHeader .txtRotate { bottom: 20px; left: 20px }
    .blcRealisation {  padding: 0 20px;}
    .lstRealisations .item { padding: 0 0;}
    .burger { top: 20px }
    .menu-list { margin-top: 0; padding-top: 60px}
    .blcFooter .blcBtn .btn { width: 280px;margin: 0 0 10px;}
    .blcFooter .blcBtn { padding-bottom: 15px;}
    .lstRealisations .item .inner .logoSite { top: 40px }
    .lstRealisations .item .inner .btn { bottom: 40px; }
    #Apropos .txtRotate { right: 10px;}
    #Services { padding-bottom: 120px;}
    #DetailsService { padding: 0 20px; }

    .pp-realisation .inner-pp .titre-vertical { position: static; }
    .pp-realisation .inner-pp .titre-vertical { writing-mode: inherit;  transform: inherit; position: static; margin-bottom: 20px;}
    .pp-realisation .inner-pp { padding: 0;}
     .pp-realisation .inner-pp .blc-img .img-mob { left: 10px; max-width: 105px; top: calc(100% - 70px)}
    .pp-realisation .inner-pp .txt { padding-left: 0; padding-top: 130px }
    .pp-realisation .inner-pp .txt p { max-width: 100% }
    .cont-form .col-33 .blc-chp { width: 100%;}
    .contactInfo { padding: 0 20px;}
    .lstPoste .lstTop .item a::after { display: none; }

    .contactInfo .blcBtn .btn { background-position: 10px center; margin: 0 0 15px; padding-left:40px; padding-right: 20px; width: 100%  }
     .cont-form .blc-chp { padding: 0 }
     .lstPoste .lstTop .item a { padding: 0 20px}
     .lstPoste .lstTop .item a { font-size: 35px }
     .detPoste .item .btcBtn .btn { margin: 0 auto 10px;width: 280px; display: block;}



    .pp-DetailsPoste { padding:80px 20px 60px}
    .pp-DetailsPoste .inner-pp .blcLeft h3 { font-size: 30px; line-height: 40px; margin-bottom: 20px }
    .pp-DetailsPoste .inner-pp .titre-vertical { writing-mode: inherit; transform: rotate(0deg); position: static; margin-bottom: 10px;}

    .ListEquipe  .lstTop .item a { padding: 0 20px}
    .ListEquipe  .lstTop .item a { font-size: 30px; line-height: 35px }
    .ListEquipe .item div::after { display: none; }
    .ListEquipe { margin-bottom: 20px;}
    .contTxtEquipe { padding: 0 20px;}
    .ListEquipe .item div { padding: 0 20px; font-size: 30px;line-height: 35px;}
    .blcTitle h2 svg { height: 50px }
    .Text-image.reverse { padding-top: 20px }
    .slick-dots { width: 100%; text-align: center; }
    .blc-service-itrn .container { padding: 0 20px;}
    .blc-service-itrn .row { padding-top: 10px }
    .blc-service-itrn .textImage .description ul li div strong { font-size: 25px; line-height: 30px; display: block; font-family: NeueHaasGrotesk-b }
    .blc-service-itrn .textImage .description ul {  margin-top: 0;}
    .blc-service-itrn .row.reverse .txtRotate { left: 20px }
    .pp-services { padding: 100px 20px 60px}
    .pp-services .inner-pp .blcleft h2 { font-size: 30px }
    .pp-services .blc-btn .btn { width: 260px;margin: 0 0 10px; }
     .page #Apropos { padding:0 20px 20px}
     .page #Apropos .blcTxt {
        padding-bottom: 120px;
    }
     #PageServices #CommunityManager .blcTitle svg text {
        font-size: 46px;
    }
    .fancybox-slide--html .fancybox-close-small {
        top: 15px;
        right: 15px;
    }
    .pp-DetailsPoste .inner-pp .titre-vertical h2 { letter-spacing: 1px }
    .blcHeader .loader .txtRotate {
        left: 0;
    }
    .Text-image h4 { line-height: 30px }
    .xdsoft_datetimepicker {
        left: 50% !important;
        transform: translateX(-50%);
        min-width: 308px;
    }
  

}


@media (max-width:480px) { 
    .blcBanner h1 { font-size: 30px; }
    .blcFooter .blcBtn .btn { width: 290px }
    .pinned-images-inner .image { width: 60%;}
    .lstRealisations .item .inner .btn { width: 150px }
    svg text { font-size: 40px; letter-spacing: 5px;}
    .lstAtout .item .inner .ico img { max-width: 50px;}
    #Atout .txtRotate { bottom:0}
    .blcBanner .txtRotate {  bottom:0}
    .blcFooter .txtRotate .circle { display: none;}
    .txtRotate:hover .scrollT { opacity: 1;}
    .blcFooter .txtRotate { bottom: 130px;width: 60px; height: 60px;}
    .scrollT { width: 60px; height: 60px }
    .lstService .content h3 { font-size: 25px }
    .slideService .item div { font-size: 28px; white-space: nowrap;}
    .blcTitle h3 { font-size: 24px;}
    #PageServices .blcTitle svg text { font-size: 40px;}
    #PageServices #CommunityManager .blcTitle svg text { font-size: 28px;}
    

}
.grecaptcha-badge { display: none;}