@import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800|Overpass+Mono:300");
@import url("https://use.typekit.net/twh6nuc.css");
html, body {
  width: 100%;
  overflow-x: hidden;
  font-family: 'Poppins', sans-serif;
  font-size: 14px; }

body {
  background: #f3f3f0; }
  body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #f6f6f4;
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    height: 50px;
    z-index: 2; }
  body::after {
    content: '';
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #f6f6f4;
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    height: 50px;
    z-index: 2; }

.logo {
  width: 25px;
  position: fixed;
  z-index: 4;
  margin: 0 auto;
  left: 43vh;
  right: 0;
  top: 10px; }

.logoNom {
  width: 40px;
  position: fixed;
  z-index: 4;
  margin: 0 auto;
  left: 0;
  right: 43vh;
  bottom: 16px; }
  .logoNom img {
    width: 40px; }

.formeLogoContainer {
  -webkit-transform: rotate(25deg);
  -ms-transform: rotate(25deg);
  transform: rotate(25deg);
  position: fixed;
  top: -30vh;
  left: 0;
  right: 0;
  bottom: -30vh;
  overflow: hidden;
  z-index: 3; }

.formeLogo {
  height: 0vh;
  width: 160px;
  background: white;
  position: fixed;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 2;
  -webkit-animation: draw3 2s cubic-bezier(0.93, 0.09, 0.29, 0.87) forwards;
  animation: draw3 2s cubic-bezier(0.93, 0.09, 0.29, 0.87) forwards; }

@-webkit-keyframes draw3 {
  from {
    height: 0vh; }
  to {
    height: 180vh; } }

@keyframes draw3 {
  from {
    height: 0vh; }
  to {
    height: 180vh; } }

.content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  position: relative;
  z-index: 3; }

.claim {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }
  .claim .digitale {
    font-family: 'Overpass Mono', monospace;
    font-size: 60px;
    letter-spacing: -5px;
    margin-right: 12px;
    margin-top: 4px; }
  .claim .humaine {
    font-size: 58px;
    font-weight: 700;
    margin-right: 21px;
    margin-top: 5px; }
  .claim .etHybride {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
  .claim .hybride {
    font-family: 'freight-text-pro', serif;
    font-style: italic;
    font-size: 70px; }
  .claim .logoClaim {
    width: 46px;
    margin-right: 13px; }

.text {
  color: #3f3f3e;
  font-size: 25px;
  font-weight: 500;
  margin-bottom: 70px; }

.adresses {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  max-width: 750px;
  width: 90%; }
  .adresses .adresse {
    text-align: center;
    max-width: 30%; }
    .adresses .adresse .adresseTitre {
      font-size: 14px;
      letter-spacing: 1px;
      text-transform: uppercase;
      font-weight: 600;
      margin-bottom: 15px; }
    .adresses .adresse .adresseAdresse {
      margin-bottom: 15px; }
      .adresses .adresse .adresseAdresse.line2 {
        margin-bottom: 36px; }
    .adresses .adresse a {
      display: block;
      color: #3f3f3e;
      -webkit-transition: 0.5s ease;
      -o-transition: 0.5s ease;
      transition: 0.5s ease; }
      .adresses .adresse a:hover {
        text-decoration: none;
        color: #0d22ec;
        -webkit-transition: 0.5s ease;
        -o-transition: 0.5s ease;
        transition: 0.5s ease; }

.formBlue {
  fill: none;
  stroke: #0d22ec;
  stroke-width: 52;
  stroke-miterlimit: 10; }

.formBlack {
  fill: none;
  stroke: black;
  stroke-width: 52;
  stroke-miterlimit: 10; }

.forme1 {
  position: fixed;
  top: -100px;
  left: -120px; }
  .forme1 svg {
    width: 500px; }

.forme2 {
  position: fixed;
  bottom: 0;
  right: 25px; }
  .forme2 svg {
    width: 260px; }

#forme1 {
  stroke-dasharray: 310px;
  stroke-dashoffset: 310px;
  -webkit-animation: draw 2s cubic-bezier(0.64, 0.25, 0.11, 0.99) forwards 1s;
  animation: draw 2s cubic-bezier(0.64, 0.25, 0.11, 0.99) forwards 1s; }

#forme2 {
  stroke-dasharray: 90px;
  stroke-dashoffset: 90px;
  -webkit-animation: draw2 1s cubic-bezier(0.64, 0.25, 0.11, 0.99) forwards 1.5s;
  animation: draw2 1s cubic-bezier(0.64, 0.25, 0.11, 0.99) forwards 1.5s; }

@-webkit-keyframes draw {
  from {
    stroke-dashoffset: 310px; }
  to {
    stroke-dashoffset: 0px; } }

@keyframes draw {
  from {
    stroke-dashoffset: 310px; }
  to {
    stroke-dashoffset: 0px; } }

@-webkit-keyframes draw2 {
  from {
    stroke-dashoffset: 90px; }
  to {
    stroke-dashoffset: 0px; } }

@keyframes draw2 {
  from {
    stroke-dashoffset: 90px; }
  to {
    stroke-dashoffset: 0px; } }

@media screen and (max-width: 1340px) {
  .forme1 {
    top: -130px;
    left: -130px; }
  .forme2 {
    right: -85px; } }

@media screen and (max-width: 1110px) {
  .forme1 {
    top: -50px;
    left: -130px; }
    .forme1 svg {
      width: 400px; }
  .forme2 {
    right: -85px; }
    .forme2 svg {
      width: 200px; } }

@media screen and (max-width: 972px) {
  .forme1 {
    top: -140px;
    left: -60px; }
    .forme1 svg {
      width: 400px; }
  .forme2 {
    right: 5px; }
    .forme2 svg {
      width: 200px; }
  .adresses {
    max-width: 650px; }
  .claim {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-bottom: 20px; }
    .claim .digitale, .claim .humaine, .claim .ethybride, .claim .hybride {
      margin-right: 0px; }
    .claim .humaine {
      margin-top: -11px; }
    .claim .digitale {
      margin-top: 4px;
      margin-left: 21px; }
    .claim .etHybride {
      margin-top: -21px; }
  .content {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    margin: 100px 0;
    z-index: 1; }
  .formeLogoContainer {
    display: none; }
  .logo {
    left: 0; }
  .logoNom {
    right: 0; }
  .adresses {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
    .adresses .adresse {
      max-width: 90%;
      margin-bottom: 60px; }
      .adresses .adresse .adresseAdresse.line2 {
        margin-bottom: 15px; } }

@media screen and (max-width: 670px) {
  .forme1 {
    top: -85px;
    left: -60px; }
    .forme1 svg {
      width: 300px; }
  .forme2 {
    right: -20px; }
    .forme2 svg {
      width: 150px; }
  .claim .digitale {
    font-size: 55px; }
  .claim .humaine {
    font-size: 53px; }
  .claim .hybride {
    font-size: 60px; }
  .claim .logoClaim {
    width: 41px; } }

@media screen and (max-width: 450px) {
  .forme1 {
    top: -85px;
    left: -90px; }
  .forme2 {
    right: -60px; } }