@font-face {
    font-family: "Nexa";
    src: url('fonts/nexa.woff2') format('woff2'),
         url('fonts/nexa.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}

@font-face {
  font-family: "TCPN";
  src: url('fonts/tcpn-extralight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: "TCPN";
  src: url('fonts/tcpn-extrabold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "TCPN";
  src: url('fonts/tcpn-light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}

body {
  font-family: 'TCPN', 'Open Sans', sans-serif !important;
  background-color: #fff !important;
  margin: 0px !important;
  max-width: 100vw !important;
}

@media only screen and (min-width: 800px) {

  .fp-overflow{
    overflow-y: visible !important;
  }
  .menu {
    align-items: center !important;
    cursor: pointer;
  }

  .menu:hover {
    font-weight: 700;
  }

  .active {
    font-weight: 700;
  }

  /* .scroller {
    height: calc(100vh - 60px);
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
  }

  .scroller section {
    scroll-snap-align: start;
  } */

  h2 {
    font-family: 'Nexa', 'TCPN', 'Open Sans', sans-serif !important;
    margin-bottom: 0px !important;
    color: #00D7DA;
    font-weight: 700 !important;
    font-size: 3vw !important;
  }

  p {
    margin-bottom: 24px !important;
    font-weight: 700;
    color: #B1B1B1;
    font-size: 1.3vw !important;
  }

  ul{
    font-weight: 700;
    color: #ffffff;
    list-style: none;
    margin-left: 8px;
    margin-right: 8px;
    font-size: 1.3vw !important;
  }

  ol {
    font-weight: 700;
    font-size: 1.3vw !important;
    list-style: none;
    margin-top: 1rem !important;
  }

  .menu_text {
    color: #00D7DA;
    margin-left: 2vw;
    min-width: 15vw;
  }

  .banner_blue_content .menu_text {
    visibility: hidden;
    color: #00D7DA;
  }

  ul {
    margin-left: -20px !important;
  }

  ul li {
    margin-bottom: 0px !important;
  }

  ul li::before {
    content: "\2022";
    color: #00D7DA;
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
  }

  li {
    margin-bottom: 0.2vw;
    font-size: 1.3vw !important;
    transition: color 0.5s;
    display: flex !important;
  }

  .banner_blue_intro {
    background-image: url("images/banner_blue.svg");
    width: 44vw;
    background-size: cover;
    padding-left: 7vw;
  }

  .banner_blue_content {
    background-image: none;
    background-size: cover;
    transition: all 0.7s ease;
    width: 15vw;
    padding-left: 7vw;
  }

  .big_t {
    position: fixed;
    top: 9vh;
    right: 10vw;
    max-width: 30vw;
    height: 76vh;
    opacity: 0;
    overflow-y: hidden;
    pointer-events: none;
  }

  .trans {
    transition: all 0.5s;
  }

  .little_menu {
    position: fixed;
    top: 20vh;
    right: 0;
    height: 60vh;
  }

  .banner_grey {
    background-image: url("images/banner_grey.svg");
    background-position: right;
    width: 44vw;
    background-size: cover;
    min-width: 70vw;
    /* padding: 36 48 12 0; */
    padding-left: 20vw;
    margin-left: -20vw;
    transform: translateZ(2px);
    box-shadow: inset 1px 1px 1px 1px hsl(0, 0%, 100%);
  }

  .tech_footer {
    padding: 20 10vw 20 10vw;
    position: fixed;
    bottom: 0;
    background-color: #00D7DA;
    height: 80px;
    width: 100%;
    color: #fff !important;
    font-family: 'Open Sans', sans-serif !important;
    font-size: 14px;
    font-weight: 500;
    display: flex !important;
  }

  a {
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 700;
  }

  a:visited {
    color: #fff !important;
    text-decoration: none !important;
  }

  .tech_card {
    width: 100%;
    padding: 0 10vw 0 10vw;
  }

  .tech_max_width {
    width: 100%;
  }

  .section {
    max-height: calc(100vh - 80px) !important;
  }

  .tech_section {
    margin-top: -60px;
  }

  .tech_card_content {
    max-width: 50vw;
  }

  .tech_card_title {
    margin-bottom: 16px;
  }

  .tech_direction {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 2vw;
  }

  .tech_shadow {
    box-shadow: inset rgba(235, 235, 235, 0.24) 0px 0px 8px 2px;
  }

  .tech_highlight {
    color : #00D7DA;
    font-weight: 700;
  }

  .tech_card_blue {
    background-color: #CDF7F8;
  }

  .tech_card_white {
    background-color: #ffffff00;
  }

  .tech_card_grey {
    background-color: #e0e0e0;
  }

  .tech_icon {
    margin-right: 60px;
    height: 4vw;
  }

  .tech_icon_mini {
      height: 2vw;
      margin-top: 0.3vw;
      margin-bottom: 0.3vw;
  }

  .banner_blue_content .tech_icon_mini {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    margin-right: 20px;
    height: 2vw;
  }

  .appear .tech_icon_mini{
    filter: grayscale(0%) !important;
    -webkit-filter: grayscale(0%) !important;
  }

  .greyer{
     filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
  }

  .tech_icon_social {
    margin: 0 5 0 5;
    height: 30px;
  }

  .logo {
    height: 6vw;
    margin-bottom: 1vw;
  }

  .scale05 {
    transition: .1s linear !important;
    font-weight: 500 !important;;
  }

  .scale05:hover {
    transform: scale(1.05);
  }

  .nv_compense{
    height: 60px;
  }

  .tech_footer_info {
    margin-left: 10px;
    margin-right: 10px;
  }

  #histoire {
    padding-bottom: 60px;
  }

}

@media only screen and (max-width: 799px) {
  h2 {
    margin-bottom: 24px !important;
    color: #00D7DA;
    font-weight: 700 !important;
  }

  p {
    margin-bottom: 24px !important;
    font-weight: 300;
    color: #B1B1B1;
    font-size: 1em !important;
  }

  ul {
    font-weight: 300;
    color: #B1B1B1;
    list-style: none;
    margin-left: 8px;
    margin-right: 8px;
    font-size: 1em !important;
  }

  ul li::before {
    content: "\2022";
    color: #00D7DA;
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
  }

  li {
    margin-bottom: 14px;
    padding-left: 0.5vw !important;
  }

  .big_t {
    margin-left: 30px;
    margin-right: 30px;
    margin-top: 60px;
    max-width: 100%;
  }

  .first {
    order: 1;
  }

  .second {
    order: 2;
  }

  .arrow {
    visibility: hidden;
    position: absolute;
    bottom: 80;
    height: 25;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .tech_footer {
    padding: 5 30 25 30;
    bottom: 0;
    height: 80px;
    position: fixed;
    background-color: #00D7DA;
    width: 100%;
    color: #fff !important;
    font-family: 'Open Sans', sans-serif !important;
    font-size: 0.8em;
    font-weight: 300;
    max-width: 100vw !important;
  }

  a {
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 700;
  }

  a:visited {
    color: #fff !important;
    text-decoration: none !important;
  }

  .tech_card {
    width: 100%;
    padding: 90 30 90 30;
    max-width: 100vw !important;
  }


  .tech_card_content {
    width: 100%;
  }

  .tech_card_mini {
    padding: 30 30 16 30;
    background-color: #fff;
    width: 100%;
  }

  .tech_direction {
    display: block !important;
  }

  .tech_shadow {
    box-shadow: inset rgba(235, 235, 235, 0.24) 0px 0px 8px 2px;
  }

  .tech_highlight {
    color: #00D7DA;
    font-weight: 700;
  }

  .tech_card_blue {
    background-color: #E3FAFA;
  }

  .tech_card_white {
    background-color: #fff;
  }

  .tech_card_grey {
    background-color: #eeeeee;
  }

  .tech_icon {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 80px;
    margin-bottom: 30px;
  }

  .tech_icon_social {
    margin: 0 5 0 5;
    height: 30px;
  }

  .teck_nv_mobile{
    position: fixed;
    top: 0px;
    height: 60px;
    width: 100%;
    margin-left: -30px;
    background-color: #fff;
    box-shadow: inset rgba(235, 235, 235, 0.24) 0px 0px 8px 2px;
  }

  .logo {
    margin: 5 35 35 15;
    /* height: 50px; */
  }

  .scale05 {
    transition: .1s linear !important;
    font-weight: 500 !important;
  }

  .scale05:hover {
    transform: scale(1.05);
  }

  .tech_footer_info {
    margin-top: 8px;
    margin-bottom: 8px;
  }

  .nv_compense {
    height: 60px;
  }

  .footer_compense {
    visibility: hidden;
  }

  br {
    display: none;
  }

  .flex-row {
    display: block !important;
    margin: 12 0 0 0 !important;;
  }
}