/* 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-forest.png) #2b2929;  background-size: cover !important;  }
.container { max-width: 1200px; width: 100% }
.headTop { padding: 40px 60px; display: flex; justify-content: space-between; position: relative; }

.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;}

#head { position: relative;  z-index: 99;}

.bg-etoile {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    z-index: 1;
}
#particles-js {
    width: 100%;
    height: 100%;
    background-color: transparent;
    background-image: url('');
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
.js-count-particles {
    display: none;
}
#stats {
    display: none;
}

/* Menu */
body { overflow-x: hidden; }

@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: 5px; stroke: #fff; font-size:80px; stroke-width: 1; /*animation: textAnimate 3s infinite alternate;*/font-family:  NeueHaasGrotesk-b;}
.blcTitle h2 svg {  fill: transparent; height: 90px}

@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
  
  }
  
}


.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;}

    /* Portal */
    .lst-portal { display: flex; flex-flow: row wrap; margin: 0 -50px }
    .lst-portal > div { width: 50%; max-width: 800px; margin: 0 auto; text-align: center; opacity: 1 ; transition: all 400ms ease-in-out;}
    

    .lst-portal .lst-portal-com:hover ~ .lst-portal-mg{ opacity: .3 }
  


    .lst-portal .blc-txt p { text-align: center; max-width: 520px; margin: 0 auto; font-family: NeueHaasGrotesk; font-size: 14px ; line-height: 24px; margin-bottom: 30px}
    .lst-portal .blc-txt .blcBtn { text-align: center; }
    .lst-portal-com h2, .lst-portal-mg h2 { font-size: 40px; line-height: normal; }
    .lst-portal-com p, .lst-portal-mg p { font-size: 28px; line-height: normal; font-family: NeueHaasGrotesk-b }
    .head {  text-align: center; padding-top: 54px; display: flex;align-items: center;  justify-content: center; margin-bottom: 100px}
    .head  strong { font-size: 24px; font-family: NeueHaasGrotesk-b }
    .head  span { font-size: 16px; font-family: NeueHaasGrotesk-b; transition: all 400ms ease-in-out }
    .head  .ico span {  display: block; width: 50px;  height: 50px; border-radius: 50%; border: #a4a4a4 solid 1px; margin: 10px 7px 10px; }
    .head  .ico span.tel {  background: url(../images/tel.png) no-repeat center; }
    .head  .ico span.WhatsApp {  background: url(../images/whaptsapp.png) no-repeat center;}
    .head  .ico span a { display: block; width: 50px;height: 50px; }
    .head  .ico { display: flex; }
    .blc-logo {  position: absolute; left: 0; right: 0;  margin: auto;top:0; bottom: 0; width: 800px; height: 800px; transition: all 1000ms ease-in-out;}
    .blc-logo a {
        display: block;
        position: relative;
        z-index: 2; 
        border-radius: 50%;
        overflow: hidden;
        width: 100%;
        height: 100%
    }
    .lune {
        width: 600px;
        height: 600px;
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        top: 0
    }
     .lune img { width: 100% }
    .img-logo {
    width: 100px;
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 20;
}
    .blc-portal {
        position: relative;
       /* background: url(../images/bg-forest.png) no-repeat center; background-size: cover*/
    }
    
    .slide-titre {
        margin-bottom: 70px;
    }
  
    .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;
    }
    .blc-portal .content__container__list__item { font-size: 40px; line-height: 48px; font-family:NeueHaasGrotesk-b   }
    .content__container__list.lstSlider {
        margin-bottom: 20px;
    }
    .head a { color: #fff; font-size: 18px }
    .blc-logo img {
       
    }
    .portal {
        position: relative;
        z-index: 20;
        padding-bottom: 60px
    }
    .blc-portal {
        position: relative;
        padding: 0 40px 0;
    }
    .lune { width: 800px; height: 800px; position: absolute; left: 0; right: 0; margin: auto; bottom: 0 ;  transition: all 1000ms ease-in-out; }
 
    }
    .blc-logo  { transition: all 3000ms ease-in-out; }

    .blc-logo.zoom .lune { width: 218px; height: 218px }
    .blc-logo.zoom { width: 218px; height: 218px }

    .img-logo { opacity: 0 }
    .img-logo.opacity { opacity: 1 }

    .lst-portal-com.opacity { opacity: 0.3 }
    .lune .mob { display: none; }

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


    .para {  animation: control-width 3s steps(30) 2s forwards, blink 0.7s infinite; overflow: hidden;    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    transform: translateY(-50%);   }

    .anim-typewriter{
      animation: typewriter 4s steps(44) 1s 1 normal both,
                 blinkTextCursor 500ms steps(44) infinite normal;
    }
    @keyframes typewriter{
      from{width: 0;}
      to{width: 24em;}
    }
    @keyframes blinkTextCursor{
      from{border-right-color: rgba(255,255,255,.75);}
      to{border-right-color: transparent;}
    }





@media (min-width:1201px){ 
    /* Flashlight Overlay */
    :root {
     
      --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;
    }

    .head .ico span:hover {
        background-color: #2a2929;
        border-color: #2a2929;
    }

}

@media (min-width:1201px){
    .btn:hover { border-color:#2a2929; background-color: #2a2929  }

}
@media (max-width:1700px) {
    .blc-portal .content__container__list__item { font-size: 35px }

}

@media (max-width:1500px) { 
     .blcBanner .Txt div { font-size: 60px }
    .blc-logo  { width: 180px; }
    .blc-logo:after { width: 180px; height: 180px }
    .lst-portal-com .item > p, .lst-portal-mg .item > p {
        height: 80px;
    }
    .lst-portal {
        margin: 0 -40px;
    }
     .blc-portal {
        position: relative;
        padding: 0 40px 40px;
    }
    .slide-titre{
        margin-bottom: 20px;
    }
    .head { margin-bottom: 30px; padding-top: 30px }
    .blc-portal .content__container__list__item { font-size: 30px }
    .blc-logo a { width: 180px; height: 180px }
    body { height: 100vh }

 }

@media (max-width:1400px) { 
    svg text {letter-spacing: 2px}
    .lst-portal-com p, .lst-portal-mg p { font-size: 24px }
    .blc-portal .content__container__list__item { font-size: 40px }
    .blc-logo { width: 180px }
    .img-logo { width: 80px }
    .lst-portal-com p, .lst-portal-mg p { height: 85px }
    .blc-portal {
        position: relative;
        padding: 0 40px 40px;
    }
    .blcTitle h2 {
        height: 90px !important;
    }
    .blcBtn .btn { padding: 25px 35px 19px 35px }
    .blc-portal .content__container__list__item { font-size: 30px }
    .slide-titre{
        margin-bottom: 20px;
    } 
   
}

@media (max-width:1365px) {   
 
   .head {
        margin-bottom: 30px;
    }
    .blc-portal .content__container__list__item {
        font-size: 35px;
    }
   
    .lst-portal .lst-portal-com .item h2 { height: 80px }
    .lst-portal .lst-portal-mg .item h2 { height: 80px }
    .lst-portal { margin: 0 -40px }
    .lst-portal > div { padding: 0 60px }
    .lst-portal .blc-txt p { height: auto }
    .lst-portal .lst-portal-mg .item h2 { font-size: 40px }
    .blc-logo { top: 0 }
    .blc-logo { position: static; }
    .lst-portal > div {
        padding: 0 40px;
    }
    .blc-logo a { width: 180px; height: 180px }
     body { height: auto }



}


@media (max-width:1200px) {  
    .blc-portal {
        position: relative;
        padding: 0 40px 60px;
    }
    svg text { font-size: 80px }

    .blcBtn .btn {
        padding: 25px 14px 19px 14px;
    }
    .lst-portal .lst-portal-mg .item h2 {
        font-size: 35px;
        height: auto
    }
    .lst-portal .lst-portal-com .item h2 {
        font-size: 35px;
        height: auto
    }
    .blc-logo a { width: 180px; height: 180px; margin: 0 auto }
    .lune { width: 180px; height: 180px }
    .blc-logo.zoom .lune {
        width: 180px;
        height: 180px;
    }
     .blc-logo.zoom  {
        width: 180px;
        height: 180px;
    }


}

@media (max-width:1024px) {
   .lst-portal > div { width: 100% }
   .lst-portal .lst-portal-com .item {
        margin-bottom: 0;
    }
    .blc-logo { position: static; }
    .lst-portal .lst-portal-mg .item {
        margin-bottom: 0;
    }
    .lst-portal-com {
        margin-bottom: 40px !important;
    }
    .lst-portal-com h2, .lst-portal-mg h2 { height: auto }
    .blcTitle h2 svg { height: 80px }
     .lst-portal { margin: 25px 0 0 0 }
    .lst-portal > div { padding: 0  }
    .lst-portal-com p, .lst-portal-mg p {
        height: auto;
    }
    .blcBtn .btn {
        padding: 20px 14px 15px 14px;
        height: 60px;
    }
    .slide-titre {
        margin-bottom: 0;
    }
    .portal { padding-bottom: 0 }
   .lst-portal-com .item > p, .lst-portal-mg .item > p {
        height: auto;
    }



  

}


@media (max-width:767px) { 
    .decoHead { height: 400px; width: 400px; top: -200px; }
    .head strong { font-size: 20px }
    .lst-portal-com h2, .lst-portal-mg h2 { font-size: 40px }
    .blcBtn .btn { width: 250px; margin-bottom: 20px }
    .blcBtn .btn:last-child { margin-bottom: 0 }
    .lst-portal .blc-txt p { margin-bottom: 0 }
    .head { flex-direction: column; }
    .blcTitle h2 {
        height: 70px !important;
    }
    .lune .mob { display: block; }
    .lune .desk { display: none; }
    .img-logo {
        opacity: 1;
    }

}

@media (max-width:600px) {
    .blc-portal {
        padding: 0 20px 60px;
    }
    svg text {
        font-size: 50px;
    }
   .blc-portal .content__container__list__item {
        font-size: 30px;
        line-height: normal;
        height: 80px;
        display: flex !important;
        justify-content: center;
    }
    .blcTitle h2 svg {
        height: 60px;
    }

  
}