/*color*/
/*body*/
* {
  margin: 0;
  padding: 0; }

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  position: relative;
  background-color: white; }

.padding-top, .padding-top-2 {
  padding-top: 80px; }

.padding-top-2 {
  padding-top: 40px; }

.padding-bottom {
  padding-bottom: 80px; }

.hr, .hr2 {
  border-bottom: 1px solid #C7CFD1;
  height: 1px; }

.hr2 {
  margin-top: 30px;
  margin-bottom: 30px; }

.page {
  position: fixed;
  height: 100vh;
  width: 100vw;
  background: transparent;
  z-index: -2;
  overflow: hidden;
  animation: animationIndex 1s ease-in-out;
  -webkit-animation: animationIndex 1s ease-in-out; }

.page_animation {
  width: 100%;
  height: 100%;
  background: white;
  opacity: 0;
  animation: animationPage 1s ease-in-out;
  -webkit-animation: animationPage 1s ease-in-out; }

@keyframes animationPage {
  0% {
    opacity: 1; }
  30% {
    opacity: 1; }
  100% {
    opacity: 0; } }
@keyframes animationIndex {
  0% {
    z-index: 10; }
  99% {
    z-index: 10; }
  100% {
    z-index: -2; } }
/*webkit*/
@-webkit-keyframes animationPage {
  0% {
    opacity: 1; }
  30% {
    opacity: 1; }
  100% {
    opacity: 0; } }
@-webkit-keyframes animationIndex {
  0% {
    z-index: 10; }
  99% {
    z-index: 10; }
  100% {
    z-index: -2; } }
/*-----------MENU----------------*/
nav {
  display: flex;
  justify-content: flex-start;
  padding: 20px;
  position: relative;
  width: 100vw;
  font-family: "Quicksand",sans-serif; }
  nav .title img {
    width: 140px;
    z-index: 2; }
  nav .navigation {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 2;
    /* animation ligne menu*/
    /*animation background circle */
    /*animation navigation ul*/ }
    nav .navigation ul {
      padding-top: 70px;
      opacity: 1;
      transform: translate(200px, 0);
      transition: all 0.1s linear; }
    nav .navigation ul > li {
      list-style: none;
      text-align: right;
      font-weight: 300;
      background: #00B798;
      transform: translate(20px); }
      nav .navigation ul > li a {
        text-decoration: none;
        color: white;
        border-top: 1px solid #01a389;
        width: 140px;
        height: 60px;
        display: block;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: 0.3s ease-in-out; }
      nav .navigation ul > li a:hover {
        background: #1D3038; }
    nav .navigation ul > li:last-child a {
      border-bottom: 1px solid #01a389; }
    nav .navigation #toggler {
      width: 50px;
      height: 50px;
      z-index: 10;
      opacity: 0;
      position: absolute;
      top: 10px;
      right: 0;
      cursor: pointer; }
    nav .navigation .hamburger {
      width: 30px;
      height: 30px;
      position: absolute;
      z-index: 1;
      background: #00B798;
      border-radius: 50%;
      top: 10px;
      right: 0;
      display: flex;
      display: -webkit-flex;
      display: -ms-flex;
      align-items: center;
      justify-content: center;
      padding: 0.6rem; }
      nav .navigation .hamburger .ligne {
        width: 100%;
        height: 2px;
        background: white;
        z-index: 1;
        position: relative;
        transition: all 0.4s ease-in-out; }
        nav .navigation .hamburger .ligne:before, nav .navigation .hamburger .ligne:after {
          content: '';
          width: 100%;
          height: 2px;
          background: white;
          position: absolute;
          top: -10px;
          z-index: 10;
          transition: all 0.4s ease-in-out; }
        nav .navigation .hamburger .ligne:after {
          top: 10px; }
    nav .navigation .responsive_background {
      width: 140px;
      height: 100%;
      position: fixed;
      background: #00B798;
      z-index: -1;
      top: 0px;
      right: 0px;
      transform: translate(140px);
      transition: all 0.1s linear;
      box-shadow: -10px 0px -20px rgba(0, 0, 0, 0); }
    nav .navigation #toggler:checked + .hamburger > .ligne {
      transform: rotate(315deg); }
    nav .navigation #toggler:checked + .hamburger > .ligne:before, nav .navigation #toggler:checked + .hamburger > .ligne:after {
      transform: rotate(90deg);
      top: 0; }
    nav .navigation #toggler:checked ~ .responsive_background {
      transform: translate(0px);
      box-shadow: -5px 0px 20px rgba(0, 0, 0, 0.2); }
    nav .navigation #toggler:checked ~ ul {
      opacity: 1;
      transform: translate(0, 0); }

/*----------NAV PORTFOLIO--------------------*/
nav.portfolio {
  justify-content: center;
  padding-left: 0;
  padding-bottom: 5px; }

hr {
  border: 1px solid #C7CFD1; }

/*----------- HEADER ----------------------*/
header {
  background-image: radial-gradient(#235563, #0D181E);
  width: 100vw;
  position: relative;
  overflow: hidden; }

header.transparent {
  background: transparent; }

/*animation button*/
.button, .button_2, .button_3, .button_4 {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #00B798;
  margin: 0 auto;
  margin-top: 20px;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  width: 150px;
  height: 33px;
  font-family: "heebo",sans-serif;
  font-size: 0.7em; }
  .button a, .button_2 a, .button_3 a, .button_4 a {
    color: white;
    text-decoration: none;
    z-index: 2;
    transition: color 0.3s ease-in-out;
    padding: 10px; }
  .button div, .button_2 div, .button_3 div, .button_4 div {
    position: absolute;
    width: 0px;
    height: 50px;
    top: 50%;
    left: 50%;
    z-index: 0;
    transform: translate(-50%, -50%);
    background: #f3f8f8;
    border-radius: 50%;
    transition: all 0.3s ease-in-out; }
  .button a:hover, .button_2 a:hover, .button_3 a:hover, .button_4 a:hover {
    color: #00B798; }
  .button a:hover + div, .button_2 a:hover + div, .button_3 a:hover + div, .button_4 a:hover + div {
    width: 200px;
    height: 200px; }

.button_left {
  margin: 0;
  margin-top: 10px;
  margin-bottom: 10px;
  width: 125px; }

.button_3 {
  background: #C7CFD1;
  width: 120px; }

.button_3.background_other div {
  background: #1D3038; }
.button_3.background_other a:hover {
  color: #C7CFD1; }

.button_4 {
  width: 190px; }

.button.background_white div, .button_2.background_white div, .button_3.background_white div, .button_4.background_white div {
  background: #235563; }

/*content_1*/
.content_1, .content_2, .content_image, .content_image_2 {
  width: 90%;
  max-width: 1500px;
  margin: 0 auto;
  text-align: center; }

.content_2 {
  max-width: 1200px; }

/*slogan 1*/
.slogan {
  font-size: 5em;
  font-family: "heebo",sans-serif;
  color: #f3f8f8;
  font-weight: 900;
  letter-spacing: 0.02;
  text-transform: uppercase;
  font-style: italic;
  line-height: 70px;
  margin-top: 20px; }

/*slogan 2*/
.slogan_2 {
  font-size: 1.8em;
  font-family: "heebo",sans-serif;
  color: #f3f8f8;
  letter-spacing: 0.02em;
  font-weight: 900;
  text-transform: uppercase;
  font-style: italic; }

/* title h1 accueil*/
h1 {
  color: #f3f8f8;
  font-size: 1em;
  font-weight: 400;
  margin-top: 10px;
  margin-bottom: 7px;
  font-family: "heebo",sans-serif; }
  h1 span span {
    text-transform: uppercase;
    font-weight: 500; }

/*title description*/
.title .description {
  color: #f3f8f8;
  font-size: 0.8em;
  font-family: "Quicksand",sans-serif;
  padding: 3px;
  letter-spacing: 0.02em; }

/* header image_header*/
.image_header img {
  width: 50%; }

/*marge*/
.marge {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translate(-50%, 0);
  width: 2000px; }

.courant_texte {
  line-height: 30px;
  font-size: 0.9em;
  text-align: left;
  font-family: "Quicksand", sans-serif;
  text-align: justify;
  color: #1D3038;
  font-weight: 400; }

/* ------- AVIS ----------*/
.star {
  width: 130px;
  padding-top: 5px;
  padding-bottom: 5px;
  display: block; }

/*---------- TRANSITION CONTENT IMAGE ------------*/
.background_image {
  position: relative; }

.content_image img {
  width: 50%; }

.content_image_2 img {
  width: 80px; }

.background_blue {
  background: #f3f8f8;
  position: absolute;
  width: 100%;
  height: 55%;
  top: 28%;
  z-index: -1; }

/*--------TRAVAUX PORTFOLIO-------------*/
h1.portfolio {
  color: #1D3038;
  font-size: 1.5em;
  font-weight: bold;
  text-transform: uppercase; }

article h2.portfolio, article h3.portfolio, article h4.portfolio {
  text-align: left;
  font-size: 1em;
  color: #1D3038;
  font-weight: bold;
  padding-top: 40px; }

article:first-child > h2.portfolio {
  padding-top: 0; }

.date_travaux.portfolio {
  border: none;
  margin-top: 0; }

/*media queries*/
/*---------- MEDIA SCREEN AND MAX-WIDTH : 468PX-------*/
@media screen and (min-width: 426px) {
  .btn_hidden_2 {
    display: none; } }
/*---------- MEDIA SCREEN AND MAX-WIDTH : 468PX-------*/
@media screen and (max-width: 425px) {
  /*----------- HEADER ----------------------*/
  .slogan {
    font-size: 2.5em;
    line-height: 40px; }

  .slogan_2 {
    display: none; }

  .image_header img {
    width: 180%;
    transform: translate(-20%); }

  h1 {
    font-size: 0.77em; }

  .title .description {
    font-size: 0.75em; }

  .btn_hidden {
    display: none; }

  .content_image img {
    width: 100%; }

  .courant_texte {
    font-size: 0.77em; } }
/*---------- MEDIA SCREEN AND MIN-WIDTH : 469PX AND MAX-WIDTH : 768PX-------*/
@media screen and (min-width: 426px) and (max-width: 768px) {
  /*----------- HEADER ----------------------*/
  .slogan {
    font-size: 2.45em;
    line-height: 40px; }

  .slogan_2 {
    font-size: 1em; }

  .image_header img {
    width: 110%;
    transform: translate(-20%); }

  .content_image img {
    width: 80%; }

  .courant_texte {
    font-size: 0.8em; } }
/*---------- MEDIA SCREEN AND MIN-WIDTH : 769PX AND MAX-WIDTH : 1024PX-------*/
@media screen and (min-width: 769px) and (max-width: 1024px) {
  /*----------- HEADER ----------------------*/
  .slogan {
    font-size: 3em;
    line-height: 40px; }

  .slogan_2 {
    font-size: 1em; }

  .image_header img {
    width: 80%;
    transform: translate(-20%); }

  .content_image img {
    width: 70%; }

  .courant_texte {
    font-size: 0.8em; } }
/*---------- MEDIA SCREEN AND MIN-WIDTH : 1025PX AND MAX-WIDTH : 1440PX-------*/
@media screen and (min-width: 1025px) and (max-width: 1440px) {
  /*----------- HEADER ----------------------*/
  .slogan {
    font-size: 4em;
    line-height: 50px; }

  .slogan_2 {
    font-size: 1.5em; }

  .image_header img {
    width: 60%; }

  .marge {
    width: 2300px; } }
/*---------- MEDIA SCREEN AND MIN-WIDTH : 1025PX AND MAX-WIDTH : 1440PX-------*/
@media screen and (min-width: 1441px) and (max-width: 1900px) {
  /*----------- HEADER ----------------------*/
  .marge {
    width: 2300px; } }
@media screen and (min-width: 1901px) {
  /*----------- HEADER ----------------------*/
  .marge {
    width: 105%; } }
@media screen and (max-width: 1024px) {
  nav {
    padding-bottom: 10px; }
    nav .title img {
      width: 100px; }
    nav .navigation .hamburger {
      width: 20px;
      height: 20px;
      top: 0px; }
    nav .navigation #toggler {
      width: 40px;
      height: 40px;
      top: 0; } }

/*# sourceMappingURL=menu.css.map */