@charset "UTF-8";
/*----------------   COLORS   ----------------*/
$black: #1C1C21;
$blue: #676779;
$lightblue: #868698;
$lighterblue: #A7A7B4;
$yellow: #F5CD20;
$red: #D4AF37;
$whiteblue: #E9E9ED;
$beige: #F3EDE2;
$white: #FFFFFF;

/*----------------   FONT SIZE CALIBRATION   ----------------*/
html {
 font-size: 62.5%;
}

/*----------------   ICONS   ----------------*/
@font-face {
 font-family: 'prosol';
 src: url('../fonts/prosol.eot?kupzmx');
 src: url('../fonts/prosol.eot?kupzmx#iefix') format('embedded-opentype'), url('../fonts/prosol.ttf?kupzmx') format('truetype'), url('../fonts/prosol.woff?kupzmx') format('woff'), url('../fonts/prosol.svg?kupzmx#vq') format('svg');
 font-weight: normal;
 font-style: normal;
 font-display: block;
}

[class^="icon-"],
[class*=" icon-"] {
 /* use !important to prevent issues with browser extensions that change fonts */
 font-family: 'prosol' !important;
 speak: never;
 font-style: normal;
 font-weight: normal;
 font-variant: normal;
 text-transform: none;
 line-height: 1;
 /* Better Font Rendering =========== */
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

.icon-file:before {
 content: "\e900";
}

.icon-town:before {
 content: "\e901";
}

.icon-people:before {
 content: "\e902";
}

.icon-plus:before {
 content: "\e903";
}

.icon-close:before {
 content: "\e904";
}

.icon-phone:before {
 content: "\e905";
}

.icon-eye:p {
 content: "\e906";
}

/*----------------   GENERIC STYLES   ----------------*/
*:focus {
 outline: 0 !important;
}

.collapsing {
 -webkit-transition: none;
 transition: none;
 display: none;
}

body {
 font-family: 'Roboto', sans-serif;
 font-size: 1.6rem;
 -moz-osx-font-smoothing: grayscale;
 -webkit-font-smoothing: antialiased;
 font-smoothing: antialiased;
 font-weight: 400;
 background-color: $whiteblue;
 overflow-x: hidden;
}

/*----------------   BUTTONS   ----------------*/
button,
.button {
 display: inline-block;
 font-family: 'Roboto', sans-serif;
 font-size: 2rem;
 font-weight: 500;
 text-align: center;
 border-radius: 30px;
 padding: 10px 20px;
 border: 0;
 vertical-align: middle;
 cursor: pointer;
 -webkit-transform: perspective(1px) translateZ(0);
 transform: perspective(1px) translateZ(0);
 box-shadow: 0 0 1px rgba(0, 0, 0, 0);
 -webkit-transition-duration: 0.3s;
 transition-duration: 0.3s;
 -webkit-transition-property: transform;
 transition-property: transform;

 &:hover,
 &:focus,
 &:active {
  text-decoration: none;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
 }
}

.button-xl {
 padding: 15px 80px;
}

.button-yellow {
 background-color: $yellow;
 color: $blue;

 &:hover,
 &:focus {
  color: $blue;
 }
}

.button-blue {
 background-color: $blue;
 color: $white;

 &:hover,
 &:focus {
  color: $white;
 }
}

.button-discover {
 border-radius: 40px;
 font-size: 4rem;
 width: 50vw;
}

/*----------------   HEADER   ----------------*/
header {
 min-height: 120px;
 background: linear-gradient(to bottom, #676779 0%, #E9E9ED 100%);
 position: relative;
 z-index: 3;
 .header-container {
  position: relative;

  .logo {
   line-height: 120px;

   img {
    display: inline-block;
    vertical-align: middle;
   }
  }

  .navbar {
   position: absolute;
   top: 0;
   right: 0;
   text-align: right;
   min-height: 120px;
   padding: 0;
   font-size: 0;
   justify-content: space-between;

   #menu-collapse {
    flex-grow: 0;

    a,
    span {
     color: $white;
     background-color: $blue;
     cursor: pointer;
     font-size: 1.8rem;
     font-weight: 700;
     display: inline-block;
     border-radius: 30px;
     padding: 10px 20px;
     -webkit-transition: all 0.4s ease;
     transition: all 0.4s ease;
     margin-left: 1.5rem;
     margin-right: 1.5rem;

     &:hover {
      text-decoration: none;
      -webkit-transform: scale(1.1);
      transform: scale(1.1);
      -webkit-transition: all 0.3s ease;
      transition: all 0.3s ease;
     }

     &.active {
      background-color: $yellow;
      color: $blue;
     }
    }
   }

   .navbar-toggle {
    height: 4rem;
    width: 4rem;
    padding: 0;
    background-color: transparent !important;
    border: none;
    display: none;
    margin-right: 15px;

    .icon-bar {
     display: block;
     margin: auto;
     width: 3.5rem;
     height: 0.3rem;
     border-radius: 0;
     background-color: $white;
     transition: all 0.2s ease-in-out;
    }

    .icon-bar + .icon-bar {
     margin-top: 0.5rem;
    }

    &[aria-expanded="true"] .icon-bar:nth-child {
     background-color: $white !important;
    }

    &[aria-expanded="true"] .icon-bar:nth-child(1) {
     width: 3.5rem;
     -webkit-transform: translate(0, 0.5rem) rotate(45deg);
     -ms-transform: translate(0, 0.5rem) rotate(45deg);
     -o-transform: translate(0, 0.5rem) rotate(45deg);
     transform: translate(0, 0.37rem) rotate(45deg);
     background-color: $white;
    }

    &[aria-expanded="true"] .icon-bar:nth-child(2) {
     display: none;
    }

    &[aria-expanded="true"] .icon-bar:nth-child(3) {
     width: 3.5rem;
     -webkit-transform: translate(0, -0.5rem) rotate(-45deg);
     -ms-transform: translate(0, -0.5rem) rotate(-45deg);
     -o-transform: translate(0, -0.5rem) rotate(-45deg);
     transform: translate(0, -0.37rem) rotate(-45deg);
     background-color: $white;
    }
   }
  }
 }
}
 body#homepage header{
  background: transparent;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
 }
/*----------------   SLIDER DOTS   ----------------*/
.owl-dots {
 position: absolute;
 bottom: 10px;
 left: 0;
 width: 100%;
 text-align: center;

 .owl-dot {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  margin: 15px;
  background-color: $white !important;

  &.active {
   background-color: $red !important;
  }
 }
}

/*----------------   HERO   ----------------*/
.hero-slider-container {
}

.hero-slider {
 .hero-slide {
  height: 100vh;
  /*min-height: 700px;*/
  position: relative;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;

  .hero-slide-infos {
   top: 30%;
   left: 0;
   min-height: 50%;
   width: 55%;
   position: absolute;
   background-color: rgba(255, 255, 255, 0.7);
   font-size: 2rem;
   color: $black;
   padding: 3rem;
   display: flex;
   flex-direction: column;
   justify-content: space-between;

   
   h2, h3 {
    font-family: 'Roboto', sans-serif;
    font-size: 3.2rem;
    font-weight: 300;
    color: $blue;
   }
   h2{
    text-transform: uppercase;
    font-weight: 700;
   }
   
   .hero-slide-text {
    line-height: 3rem;
   }

   .hero-slide-button {
    text-align: right;
   }
  }

  img {
   width: 100%;
   height: 100%;
   object-fit: cover;
  }
 }
}

/*----------------   PANEL SECTIONS   ----------------*/
.panel {
 background-color: $white;
}

.panel-news {
 padding-bottom: 60px;
 margin: 0 !important;

 h2 {
  background-color: $blue;
  color: $white;
  text-align: center;
  line-height: 1;
  padding: 20px 0;
  font-size: 4.2rem;
 }

 .news-date {
  display: block;
  font-size: 2rem;
  color: $red;
  margin: 40px 0 10px;
 }

 h3 {
  font-size: 2rem;
  color: $blue;
  text-transform: uppercase;
  margin: 20px 0;
 }
}

.panel-sample {
/* height: 500px;*/
 height: calc(100vh);
 display: flex;
 flex-direction: row;
 position: relative;

 .name-container {
  position: absolute;
  width: 100%;
  top: 60%;
  left: 0;
  text-align: center;
  display: flex;
  justify-content: center;
  height: 0;

  #samplename {
   text-transform: uppercase;
   color: #FFF;
   font-size: 3.6rem;
  }
 }

 #button-container {
  position: absolute;
  top: calc(50vh - 65px);
  left: 0;
  display: block;
  width: 100%;
  height: 0;

  .button {
   display: flex !important;
   flex-direction: row;
   justify-content: space-around;
   padding: 25px 30px;
   margin: 0 auto;
   text-align: left;
   border-radius: 40px;
   width: 600px;
   font-size: 4rem;
   font-weight: 500;
   display: block;
   color: $white;
   text-transform: none;
   line-height: 4rem;

   &::before {
    font-family: 'prosol' !important;
    content: "\e906";
    font-size: 5rem;
    color: $white;
    line-height: 8rem;
   }
  }
 }

 > a {
  height: 100%;
  flex: 1;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  cursor: pointer;
  position: relative;

  &::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.6);
   -webkit-transition: all 0.5s ease;
   transition: all 0.5s ease;
  }

  &:hover {
   &::before {
    background: rgba(0, 0, 0, 0);
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
   }
  }
 }
}

.panel-customer {
 padding-top: 40px;
 padding-bottom: 40px;

 h2 {
  background-color: transparent;
  color: $blue;
  font-weight: 400;
  text-align: center;
  line-height: 1;
  padding: 20px 0;
  font-size: 4.2rem;
  padding-bottom: 40px;
 }

 .customer-slider {
  padding: 0 0 60px;
 }

 .customer {
  width: 120px;
  height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  justify-content: space-evenly;
  margin-left: 60px;
 }
}

.panel-editorial {
 padding-bottom: 40px;

 .panel-editorial-visual {
  height: 580px;
  width: 100%;
  object-fit: cover;
 }

 h2 {
  background-color: transparent;
  color: $blue;
  font-size: 3.2rem;
  margin: 3rem 0;
  font-weight: 700;
  text-transform: uppercase;
  text-align: left;
  line-height: normal;
 }
}

.panel-timeline {
 padding-bottom: 40px;
 background-color: $whiteblue;

 h2 {
  background-color: $blue;
  color: $white;
  text-align: center;
  line-height: 1;
  padding: 20px 0;
  font-size: 4.2rem;
  font-weight: 400;
  margin-bottom: 80px;
 }
}

/*----------------   TIMELINE   ----------------*/
.main-timeline {
 &::after {
  content: '';
  display: block;
  clear: both;
 }

 &::before {
  content: '';
  background-color: $blue;
  height: 100%;
  width: 4px;
  transform: translateX(-50%);
  position: absolute;
  top: 0;
  left: calc(50%);
 }

 .timeline {
  width: 50%;
  padding: 0 100px 0 0;
  margin: 0 10px 20px 0;
  float: left;
  position: relative;
  z-index: 1;

  .timeline-year {
   color: $red;
   background-color: $lightblue;
   font-size: 4.2rem;
   font-weight: 600;
   text-align: center;
   line-height: 85px;
   height: 95px;
   width: 95px;
   border-radius: 50%;
   position: absolute;
   right: -47.5px;
   border: 8px solid $red;
   top: 0;
   z-index: 1;

   span {
    margin-left: 100px;
   }
  }

  .timeline-year:before {
   content: '';
   height: 80%;
   width: 80%;
   border-radius: 50%;
   transform: translateX(-50%) translateY(-50%);
   position: absolute;
   left: 50%;
   top: 50%;
   z-index: -1;
  }

  .timeline-content {
   color: $black;
   background-color: $white;
   padding: 15px;
   border-radius: 12px;
   visibility: hidden;

   &::before {
    content: '';
    background-color: $white;
    height: 35px;
    width: 35px;
    transform: rotate(45deg);
    position: absolute;
    right: -17.5px;
    top: 20px;
    z-index: -1;
   }
  }

  .title {
   color: $blue;
   font-size: 20px;
   font-weight: 700;
   letter-spacing: 1px;
   text-transform: uppercase;
   padding: 10px;
   margin: 0 0 10px;
  }

  .description {
   font-size: 16px;
   margin: 0 15px;
  }
 }

 .timeline:nth-child(even) {
  padding: 0 0 0 100px;
  margin: 0 0 20px 10px;
  float: right;
 }

 .timeline:nth-child(even) .timeline-content:before {
  right: auto;
  left: -17.5px;
 }

 .timeline:nth-child(even) .timeline-year {
  right: auto;
  left: -50px;

  span {
   margin-left: -210px;
  }
 }
}

/*----------------   FOOTER   ----------------*/
footer {
 background-color: $whiteblue;

 .footer-main {
  .footer-address {
   background-color: $whiteblue;
   color: $blue;

   p {
    margin-top: 20px;
    font-weight: bold;
   }
  }

  .footer-contact {
   background-color: $yellow;
   color: $blue;

   &:hover,
   &:focus {
    text-decoration: none;
   }

   p {
    &::before {
     display: block;
     content: "\e905";
     font-family: 'prosol' !important;
     font-size: 8rem;
     color: $white;
    }

    margin-top: 20px;
    font-size: 2.4rem;
    text-align: center;
    font-weight: 500;
   }
  }

  .footer-map {
   background-color: $white;
   padding: 0;
   margin: 0;
   position: relative;
   min-height: 380px;
  }

  .footer-address,
  .footer-contact {
   > div {
    min-height: 380px;
    padding-top: 20px;
    padding-bottom: 20px;
   }
  }
 }

 .footer-baseline {
  background-color: $white;
  min-height: 50px;
  font-size: 1.4rem;
  text-align: center;
  padding: 20px 0 60px;

  span, a {
   cursor: pointer;
   color: $black;

   &:hover,
   &:focus {
    text-decoration: underline;
   }
  }
 }
}

#map-container {
 position: absolute;
 top: 0;
 left: 0;
 height: 100%;
 width: calc(50vw - 7.5px);
}

#map {
 height: 380px;
}

/*----------------   PRODUCTS   ----------------*/
.col-custom-container{
}

.row.no-gutters {
  margin-right: 0;
  margin-left: 0; }
  .row.no-gutters > [class^="col-"], .row.no-gutters > [class*=" col-"] {
    padding-right: 0;
    padding-left: 0; }

.col-5,
.col-sm-5,
.col-md-5,
.col-lg-5,
.col-xl-5 {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}
.col-5 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
}
@media (min-width: 540px) {
    .col-sm-5 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}
@media (min-width: 720px) {
    .col-md-5 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}
@media (min-width: 960px) {
    .col-lg-5 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}
@media (min-width: 1140px) {
    .col-xl-5 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}



.ss-menu-product{
 display: block;
 width: 100%;
 background-color: $lightblue;
 border: 2.5px solid $white;
 position: relative;
 .ss-menu-product-title{
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  background: rgba(0,0,0,0.4);
  flex-direction: column;
  justify-content: center;
  -webkit-transition: all 0.2s ease;
   transition: all 0.2s ease;
  &:hover, &:focus{
   background: rgba(0,0,0,0.15);
   -webkit-transition: all 0.2s ease;
   transition: all 0.2s ease;
  }
  h2{
   align-items: center;
   color: $white;
   font-size: 2.6rem;
   text-align: center;
  }
 }
}
.product-title {
 font-size: 4.2rem;
 font-weight: 400;
 line-height: 1;
 padding: 30px 0;
 color: $blue;
 margin: 0;

 p {
  margin: 0
 }
}

.product-description {
 display: flex;
 flex-direction: column;
 justify-content: space-around;
 justify-content: space-evenly;
 padding-bottom: 60px;

 &.opened {
  padding-bottom: 0;
 }

 p {
  font-size: 2rem;
 }

 .product-type {
  color: $red;
  text-transform: uppercase;
  font-size: 1.2rem;
  font-weight: bold;

  > span {
   margin-right: 15px;

   &::before {
    font-family: 'prosol' !important;
    margin-right: 0.3rem;
    font-weight: 400;
   }

   &.public::before {
    content: "\e902";
   }

   &.pro::before {
    content: "\e901";
   }
  }
 }

 h2 {
  background-color: transparent;
  font-size: 3.2rem;
  color: $blue;
  text-transform: uppercase;
  text-align: left;
 }
}

.product-information {
 margin: 0 -15px;
 background-color: $white;

 .product-open {
  height: 60px;
  top: -60px;
  position: absolute;
  z-index: 2;

  > div {
   background-color: $yellow;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   text-align: center;
   cursor: pointer;
   -webkit-transition: width 0.2s ease;
   transition: width 0.2s ease;

   span {
    font-size: 1.4rem;
    text-transform: uppercase;
    font-weight: bold;
    line-height: 6rem;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
   }

   &::before {
    display: inline;
    content: "\e903";
    font-family: 'prosol' !important;
    font-size: 3.6rem;
    display: inline-block;
    margin: -2.5px 2.5px 0 0;
    vertical-align: middle;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
   }
  }
 }

 .product-open[aria-expanded="true"] {
  top: 0;
  position: absolute;
  -ms-flex: 0 0 100% !important;
  flex: 0 0 100% !important;
  max-width: 100% !important;

  > div {
   height: 40px;
   width: 100%;
   text-align: right;
   background-color: transparent;
   color: $black;

   &::before {
    margin-right: 10px;
    transform: rotate(45deg);
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
   }

   span {
    display: none;
   }
  }
 }

 .product-information-container {
  padding: 50px 15px 30px;
 }

 .product-information-container.show {
  .product-information-chapeau {
   color: $blue;
   font-size: 2rem;
  }

  .product-information-text {
   column-count: 2;
  }

  .product-information-bt {
   margin-top: 1.5rem;
   cursor: pointer;
  }
 }
}

.panel-product {
 background-color: transparent;
 margin-top: 0;

 .product-item {
  margin-bottom: 40px;

  > div {
   &:first-child {
    background: $white;
   }
  }

  .slideshow-container {
   padding: 0;
   margin: 0;
   min-height: 430px;
   position: relative;

   .product-slideshow {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: calc(50vw + 182.5px);
    overflow: hidden;

    .owl-next {
     position: absolute;
     top: calc(50% - 37.5px);
     right: -37.5px;

     .next {
      display: none;
      width: 75px;
      height: 75px;
      padding-left: 10px;


      font-size: 3em;
      font-weight: 600;
      line-height: 7.5rem;
      text-align: left;
      color: $black;
      border-radius: 50%;
      background-color: $whiteblue;

      &::before {
       content: '>';
      }
     }

    }

    &:hover,
    &:focus,
    &:active {
     .next {
      display: block;
     }
    }

    .product-slide {
     /*display: flex;*/
     height: 430px;
     border-right: 4px solid $whiteblue;

     img {
      height: 100%;
      width: auto;
     }
    }
   }
  }
 }
}


/*----------------   MODAL  ----------------*/
.modal-backdrop {
 background-color: $white;
}

.modal-backdrop.show {
 opacity: 1;
}

.modal {
 .modal-dialog {
  .modal-content {
   background-color: $whiteblue;
   color: $blue;
   border: 0;
   border-radius: 0;

   .modal-header {
    padding: 50px 75px 0;
    position: relative;
    border: 0;

    .modal-close {
     color: $black;
     font-family: 'prosol';
     font-size: 6rem;
     position: absolute;
     top: 3rem;
     right: 3rem;
     cursor: pointer;
     font-weight: bold;

     &:before {
      content: "\e904";
     }
    }

    h2 {
     font-family: 'Roboto', sans-serif;
     color: $blue;
     font-size: 4.2rem;
     font-weight: 400;
     line-height: 1.1;
     margin-top: 1.5rem;
     margin-bottom: 3rem;
     max-width: 85%;
    }
   }

   .modal-body {
    padding: 15px 75px 25px;
    font-size: 1.8rem;

    a {
     color: $blue;
     text-decoration: underline;
     font-weight: bold;
    }

    h3 {
     font-size: 2.4rem;
     font-family: 'Roboto', sans-serif;
     font-weight: 700;

     &.title-green {
      color: $blue
     }

     &.title-white {
      color: $white;
      text-transform: uppercase;
      font-size: 2.4rem;
     }
    }
   }

   .modal-footer {
    border: 0;
    padding: 50px 20px 20px 75px;
   }
  }
 }
}

/*----------------   FORM   ----------------*/
#modalform {
 display: none;
 position: fixed;
 width: 100%;
 height: 100%;
 background-color: $whiteblue;
 overflow: hidden;
 top: 0;
 left: 0;
 z-index: 9999;
}

#modalform iframe {
 height: 100%;
 width: 100%;
 border: 0;
}

body.modalform-open {
 overflow: hidden;
}

.form-close {
 color: $blue;
 font-weight: bold;
 font-family: 'prosol';
 font-size: 6rem;
 position: absolute;
 top: 2rem;
 right: 4rem;
 cursor: pointer;
 z-index: 2;

 &:before {
  content: "\e904";
 }
}

.form-content {
 min-height: 100vh;

 .form-header {
  padding: 15px;
  position: relative;
  border: 0;

  h2 {
   font-family: 'Roboto', sans-serif;
   color: $white;
   font-size: 5rem;
   font-weight: 900;
   line-height: 1.1;
   margin-top: 1.5rem;
   margin-bottom: 3rem;
   max-width: 85%;
  }
 }

 .form-body {
  /*padding: 15px 75px 25px;*/
  padding-top: 30px;
  padding-bottom: 30px;
  font-size: 2rem;
  text-transform: uppercase;
  color: $black;

  a.formlink {
   color: $blue;
   text-decoration: none;
   font-size: 2.8rem;
   font-weight: bold;
  }

  .reponse_formulaire_erreur {
   font-weight: bold
  }

  .reponse_formulaire_erreur,
  .erreur_message {
   color: $red;
   text-transform: none;
   font-size: 1.6rem;
  }

  .formulaire_formidable button[type=submit] {
   background-color: $blue;
   width: 100%;
   color: $white;
  }
 }

 .form-footer {
  border: 0;
  padding: 50px 20px 20px 75px;
 }
}

.formulaire_formidable {
 padding-top: 1.5rem;
 text-align: left;
}

.formulaire_formidable label {
 display: none;
}

.formulaire_formidable textarea {
 border: 0;
 background-color: $white;
 width: 100%;
 padding: 1rem 2.5rem;
 color: #747474;
 font-size: 2.2rem;
 font-weight: bold;
 margin-bottom: 3rem;
 border-radius: 30px;
 min-height: 7rem;
}


.formulaire_formidable input[type=text],
.formulaire_formidable input[type=email] {
 border: 0;
 background-color: $white !important;
 width: 100%;
 padding: 1rem 2.5rem;
 color: #747474 !important;
 font-size: 2.2rem;
 font-weight: bold;
 border-radius: 30px;
 margin-bottom: 3rem;
 min-height: 7rem;
}

.formulaire_formidable .saisie_selection {
 position: relative;
 width: 100%;
 margin-bottom: 3rem;
 background-color: $white;
 border-radius: 30px;
}

.formulaire_formidable button[type=submit] {
 display: inline-block;
 font-family: 'Roboto', sans-serif;
 font-size: 2rem;
 font-weight: 700;
 color: $white;
 text-align: center;
 border-radius: 30px;
 padding: 10px 20px;
 border: 0;
 cursor: pointer;
 background-color: $blue;
 min-height: 7rem;

 &:hover,
 &:focus {
  text-decoration: none;
  color: $white;
 }
}

.formulaire_formidable input::-webkit-input-placeholder,
.formulaire_formidable textarea::-webkit-input-placeholder {
 /* Chrome/Opera/Safari */
 color: $black;
}

.formulaire_formidable input::-moz-placeholder,
.formulaire_formidable textarea::-moz-placeholder {
 /* Firefox 19+ */
 color: $black;
}

.formulaire_formidable input:-ms-input-placeholder,
.formulaire_formidable textarea:-ms-input-placeholder {
 /* IE 10+ */
 color: $black;
}

.formulaire_formidable input:-moz-placeholder,
.formulaire_formidable textarea:-moz-placeholder {
 /* Firefox 18- */
 color: $black;
}

/*----------------   ANIMATIONS   ----------------*/
.hvr-grow {
 display: inline-block;
 vertical-align: middle;
 -webkit-transform: perspective(1px) translateZ(0);
 transform: perspective(1px) translateZ(0);
 box-shadow: 0 0 1px rgba(0, 0, 0, 0);
 -webkit-transition-duration: 0.3s;
 transition-duration: 0.3s;
 -webkit-transition-property: transform;
 transition-property: transform;
}

.hvr-grow:hover,
.hvr-grow:focus,
.hvr-grow:active {
 -webkit-transform: scale(1.1);
 transform: scale(1.1);
}

/*----------------   RESPONSIVE LAYOUT   ----------------*/
@media only screen and(max-width : 1199px) {
 .navbar-toggle {
  display: block !important;
 }

 body.active {
  overflow: hidden;
 }

 .panel-product .product-item .slideshow-container .product-slideshow {
  width: calc(50vw + 152.5px);
 }

 header.active {
  position: fixed;
  width: 100%;
  overflow-y: scroll;

  .header-container {
   .navbar {
    position: static;

    .navbar-toggle {
     position: absolute;
     top: 0;
     right: 0;
     min-height: 120px;
    }

    #menu-collapse {
     a {
      font-size: 0;
      -webkit-transition: all 0s ease;
      transition: all 0s ease;
      background-color: transparent;
     }

     &.show {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      justify-content: space-evenly;
      height: calc(100vh - 120px);

      a,
      span {
       text-align: center;
       text-transform: uppercase;
       font-size: 3.6rem;
       font-weight: 900;
       line-height: 1.1;
       -webkit-transition: all 0.5s ease;
       transition: all 0.5s ease;

       &.active {
        color: $yellow !important;
        background-color: transparent;
       }

       &:hover,
       &:focus {
        color: $yellow;
        text-decoration: none;
        background-color: transparent;
       }
      }
     }
    }
   }
  }
 }
}

@media only screen and(max-width : 991px) {
 .hero-slider .hero-slide .hero-slide-infos {
  width: 60%;
 }

 .panel-product .product-item .slideshow-container .product-slideshow {
  width: calc(50vw - 7.5px);
 }

 footer .container {
  max-width: 100% !important
 }

 #map-container {
  width: calc(100vw - 15px);
 }

 .product-information .product-information-container.show .product-information-text {
  column-count: 1;
 }

 .panel-product .product-item .slideshow-container .product-slideshow .product-slide {
  /*border-right: 0;*/
 }
}

@media only screen and(max-width : 767px) {
 .hero-slider .hero-slide .hero-slide-infos {
  width: 75%;
 }

 .product-description h2 {
  background-color: transparent;
  font-size: 2.8rem;
 }

 .product-description p {
  font-size: 1.8rem;
 }

 .product-information-chapeau {
  font-size: 1.6rem !important;
 }

 .product-information-text {
  font-size: 1.4rem;
 }

 .panel-sample #button-container .button {
  padding: 20px 10px;
  border-radius: 25px;
  width: 350px;
  font-size: 2.4rem;
  line-height: 2.4rem;

  &::before {
   font-size: 4rem;
   line-height: 4.8rem;
  }
 }

 .hero-slider .hero-slide .hero-slide-infos {
  background-color: rgba(255, 255, 255, 0.75);
  top: 25%;
 }

 .hero-slider .hero-slide .hero-slide-infos {
  font-size: 1.8rem;
 }

 .hero-slider .hero-slide .hero-slide-infos h2,
 .hero-slider .hero-slide .hero-slide-infos h3 {
  font-size: 2.4rem;
 }

 .hero-slider .hero-slide .hero-slide-infos .hero-slide-text {
  line-height: 2.4rem;
 }

 .panel h2 {
  font-size: 3.6rem;
 }

 .main-timeline .timeline,
 .main-timeline .timeline:nth-child(even) {
  width: 100%;
  float: none;
  padding: 95px 0 0;
  margin: 0;

  .timeline-content {
   margin: 60px 0 40px 0;
  }
 }

 .main-timeline .timeline .timeline-content:before {
  left: calc(50% - 17.5px) !important;
  right: auto !important;
  top: -17.5px !important;
 }

 .main-timeline .timeline-year {
  left: 50%;
  transform: translateX(-50%);
 }

 .main-timeline .timeline:nth-child(even) .timeline-year {
  left: 50%;
  transform: translateX(-50%);
 }

 .panel-product .product-item .slideshow-container .product-slideshow .product-slide {
  display: flex;
  border-right: 0;
 }

 .panel-product .product-item .slideshow-container .product-slideshow .product-slide img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: left bottom;
 }

 .product-description {
  padding-top: 25px;
  padding-bottom: 75px;
 }

 .product-information-bt {
  text-align: center;
 }

 .panel-product .product-item .slideshow-container .product-slideshow {
  position: static;
  width: auto;
 }
}

@media only screen and(max-width : 575px) {
 .hero-slider .hero-slide .hero-slide-infos {
  width: 90%;
 }

 .footer-address,
 .footer-contact {
  text-align: center;

  > div {
   min-height: 0 !important;
  }
 }

 .panel-sample #samplename {
  font-size: 3.2rem;
 }
}