@inport url("bootstrap-grid.min.css");
html {
  font-size: 18px;
  margin: 0;
  padding: 0;
  overflow-x: hidden; }

body {
  font-family: 'Roboto', sans-serif;
  color: rgba(0, 0, 0, 0.57);
  margin: 0;
  padding: 0;
  width: 100%;
  position: relative;
  background-color: #EFEFEF; }

.scroll-smooth {
  scroll-behavior: smooth; }

h1, h2, h3, h4 {
  font-family: 'Rubik', sans-serif;
  color: rgba(0, 0, 0, 0.8);
  font-weight: 400;
  margin-top: 0; }

h2 {
  font-size: 1.8rem; }
  @media (min-width: 768px) {
    h2 {
      font-size: 3.75rem; } }

h3 {
  font-size: 1.25rem; }
  @media (min-width: 768px) {
    h3 {
      font-size: 1.5rem; } }

h4 {
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: .25rem; }

p {
  margin-top: 0; }

.p-abs {
  position: absolute; }

.p-rel {
  position: relative; }

.no-cut {
  word-break: keep-all;
  white-space: nowrap; }

.row {
  position: relative; }

header .menu-nav, header .bg-nav {
  height: 3rem;
  width: 100%;
  position: fixed; }
header .bg-nav {
  z-index: 9997;
  background-color: #222222; }
  header .bg-nav > .container {
    height: 100%; }
    header .bg-nav > .container a.logo {
      display: inline-flex;
      color: rgba(255, 255, 255, 0.7);
      height: 100%;
      align-items: center;
      text-decoration: none;
      opacity: .85;
      transition: opacity ease .2s; }
      header .bg-nav > .container a.logo:hover {
        opacity: 1; }
      header .bg-nav > .container a.logo img {
        width: 100%;
        max-width: 250px;
        max-height: 18px;
        display: block; }
header .menu-nav {
  z-index: 9999;
  pointer-events: none; }
  header .menu-nav nav {
    height: 100%; }
    header .menu-nav nav ul {
      display: flex;
      list-style: none;
      height: 100%;
      margin: 0;
      padding: 0; }
      header .menu-nav nav ul li {
        margin: 0 1rem;
        height: 100%; }
        header .menu-nav nav ul li a:not(.logo) {
          pointer-events: all;
          display: flex;
          height: 100%;
          align-items: center;
          text-decoration: none;
          color: #ffffff;
          position: relative; }
          header .menu-nav nav ul li a:not(.logo):after {
            content: '';
            background-color: #ffffff;
            height: 2px;
            width: 100%;
            position: absolute;
            left: 0;
            bottom: 0;
            opacity: 0;
            transition: opacity ease .2s; }
          header .menu-nav nav ul li a:not(.logo):hover:after {
            opacity: 1; }

.banner {
  z-index: 9998;
  position: relative;
  background-color: #222222;
  background-image: url(../img/elingue-cable.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  height: 60vw;
  min-height: 50vmin;
  max-height: 80vh; }
  .banner .parallax {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); }
    .banner .parallax .triangles {
      display: none; }
    .banner .parallax h1 {
      margin: 0; }
      .banner .parallax h1 span {
        display: none; }
      .banner .parallax h1 .main-logo {
        width: 600px;
        max-width: 80vmax;
        max-height: 30vmin;
        display: block; }
  .banner .parallax_description {
    color: #FFFFFF;
    text-align: right;
    padding-right: 100px;
    width: 30%;
    float: right;
    font-weight: lighter;
    line-height: 23px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px; }

.menu-nav-mobile ul {
  list-style: none;
  margin: 0;
  padding: 0; }
  .menu-nav-mobile ul li {
    line-height: 2.2;
    font-weight: bold;
    background-color: #ffffff;
    margin-bottom: 5px;
    padding: 0 1rem;
    border-left: 0px solid #00A3E0;
    transition: all ease .2s; }
    .menu-nav-mobile ul li:hover {
      color: #00A3E0;
      border-left: 4px solid #00A3E0; }
.menu-nav-mobile a {
  color: inherit;
  text-decoration: none;
  display: block; }

.galerie img {
  display: block;
  margin-bottom: 1rem;
  max-width: 100%; }

.div-img-palan {
  position: absolute;
  z-index: 0;
  opacity: 0.35;
  width: 40vw;
  max-width: 200px;
  right: 0;
  z-index: -1; }
  @media (min-width: 768px) {
    .div-img-palan {
      opacity: 1; } }
  .div-img-palan .img-palan {
    width: 100%;
    margin-top: 50px; }

.img-lux-3d {
  position: absolute;
  left: -15vw;
  top: -14vw;
  width: 130vw; }

.btn {
  display: block;
  color: #ffffff;
  border: none;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  cursor: pointer;
  width: 320px;
  margin: auto; }
  .btn ~ .btn {
    margin-top: 25px; }
  .btn.btn-rouge {
    background-color: #EF3340; }
    .btn.btn-rouge:hover {
      background-color: #ed1b2a; }
  .btn.btn-bleu {
    background-color: #00A3E0; }
    .btn.btn-bleu:hover {
      background-color: #0090c7; }
  .btn.btn-gris {
    background-color: #222222; }
    .btn.btn-gris:hover {
      background-color: #151515; }

.img-fluid {
  max-width: 100%;
  display: block; }

.img-potence {
  width: 80%;
  display: block;
  margin: auto;
  margin-top: 50px; }

.img-catalogue-em {
  width: 100%;
  max-width: 300px; }

#manutention, #qui-sommes-nous, #contact, #map, #footer {
  background-color: #222222;
  position: relative;
  color: rgba(255, 255, 255, 0.7); }
  #manutention h1, #manutention h2, #manutention h3, #manutention h4, #qui-sommes-nous h1, #qui-sommes-nous h2, #qui-sommes-nous h3, #qui-sommes-nous h4, #contact h1, #contact h2, #contact h3, #contact h4, #map h1, #map h2, #map h3, #map h4, #footer h1, #footer h2, #footer h3, #footer h4 {
    color: white; }
  #manutention h2, #qui-sommes-nous h2, #contact h2, #map h2, #footer h2 {
    padding-top: 1rem; }
    @media (min-width: 768px) {
      #manutention h2, #qui-sommes-nous h2, #contact h2, #map h2, #footer h2 {
        padding-top: 3rem; } }

#levage {
  position: relative; }
  #levage:after {
    position: absolute;
    content: " ";
    display: block;
    left: 0;
    bottom: 0;
    height: 25vw;
    width: 100vw;
    z-index: -1;
    background: #EFEFEF;
    background: linear-gradient(180deg, #EFEFEF 0%, rgba(0, 0, 0, 0.5) 100%); }

#manutention {
  margin-bottom: 13vw; }
  #manutention::before {
    position: absolute;
    content: " ";
    display: block;
    left: 0;
    top: -15vw;
    width: 100vw;
    border-style: solid;
    border-width: 0 0 15vw 100vw;
    border-color: transparent transparent #222222 transparent; }
  #manutention::after {
    position: absolute;
    content: " ";
    display: block;
    left: 0;
    bottom: -20vw;
    width: 100vw;
    z-index: 1;
    border-style: solid;
    border-width: 0vw 60vw 25vw 40px;
    border-color: transparent #222222 transparent transparent; }
  #manutention .bg-blanc-fleche {
    background-color: #ffffff;
    position: relative; }
    #manutention .bg-blanc-fleche > .container {
      position: relative;
      z-index: 3; }
    #manutention .bg-blanc-fleche::before {
      position: absolute;
      content: " ";
      display: block;
      left: 0;
      width: 100%;
      border-style: solid;
      border-color: #222222 #222222 transparent transparent;
      border-width: 40px 728px 180px 0; }
      @media (min-width: 768px) {
        #manutention .bg-blanc-fleche::before {
          border-width: 80px 1920px 460px 0; } }
    #manutention .bg-blanc-fleche::after {
      position: absolute;
      content: " ";
      display: block;
      left: 0;
      bottom: -15vw;
      width: 100vw;
      z-index: 2;
      border-style: solid;
      border-color: #ffffff #ffffff transparent;
      border-width: 0 0 20vw 100vw; }

#filet {
  position: relative;
  padding-top: 3rem; }
  #filet:before {
    position: absolute;
    content: " ";
    display: block;
    left: 0;
    top: -13vw;
    height: 13vw;
    width: 100vw;
    z-index: -1;
    background: #EFEFEF;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, #EFEFEF 100%); }
  #filet .card-blanc {
    background-color: #ffffff; }
    #filet .card-blanc picture {
      display: flex;
      align-items: center;
      justify-content: center; }
      #filet .card-blanc picture .cat_img {
        width: 100%;
        max-width: 100px; }

.divider-top {
  width: 100vw;
  height: 10vmax;
  overflow: hidden;
  position: relative;
  margin-bottom: -1px; }
  .divider-top .gris {
    position: absolute;
    z-index: 2;
    border-style: solid;
    border-color: transparent transparent #222222 transparent;
    border-width: 2vmax 85vw 8vmax 15vw; }
  .divider-top:before {
    content: "";
    z-index: 0;
    position: absolute;
    border-style: solid;
    border-color: transparent transparent #00A3E0 transparent;
    border-width: 4vmax 12vw 6vmax 40vw;
    right: 0; }
  .divider-top:after {
    content: "";
    position: absolute;
    z-index: 1;
    border-style: solid;
    border-color: transparent transparent #EF3340 transparent;
    border-width: 1vmax 13vw 9vmax 40vw;
    right: 14vw; }

#qui-sommes-nous .img-carte {
  max-width: 100%;
  width: 800px;
  display: block; }
#qui-sommes-nous ul {
  padding-left: 1rem;
  list-style-position: outside; }

.divider-bottom {
  width: 100vw;
  height: 10vmax;
  overflow: hidden;
  position: relative; }
  .divider-bottom .gris {
    position: absolute;
    z-index: 2;
    border-style: solid;
    border-color: #222222 transparent transparent transparent;
    border-width: 8vmax 15vw 2vmax 85vw; }
  .divider-bottom:before {
    content: "";
    z-index: 0;
    position: absolute;
    border-style: solid;
    border-color: #00A3E0 transparent transparent transparent;
    border-width: 6vmax 40vw 4vmax 12vw;
    left: 0; }
  .divider-bottom:after {
    content: "";
    position: absolute;
    z-index: 1;
    border-style: solid;
    border-color: #EF3340 transparent transparent transparent;
    border-width: 9vmax 40vw 1vmax 13vw;
    left: 14vw; }

#agence h2 {
  padding-top: 3rem; }
#agence .card {
  background-color: #ffffff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); }
  #agence .card.card-levage {
    text-align: center; }
    #agence .card.card-levage big {
      color: #222222; }
  #agence .card.card-carte {
    max-width: 350px; }

#contact {
  text-align: center;
  padding-bottom: 3rem;
  margin-top: 8vmax; }
  #contact .divider-top-contact {
    width: 100vw;
    height: 5vmax;
    position: absolute;
    background-color: #222222;
    left: 0;
    top: -5vmax; }
    #contact .divider-top-contact:before {
      content: " ";
      display: block;
      position: absolute;
      left: 40vw;
      width: 20vw;
      border-style: solid;
      border-width: 5vmax 10vw 0vw 10vw;
      border-color: #EFEFEF #222222 #222222 #222222; }
  #contact::after {
    position: absolute;
    z-index: 1;
    content: " ";
    display: block;
    left: 40vw;
    top: 100%;
    border-style: solid;
    border-width: 5vmax 10vw 0vw 10vw;
    border-color: #222222 transparent transparent transparent; }
  #contact .alert {
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
    font-size: .8rem; }
  #contact .success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb; }
  #contact .error {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb; }
  #contact ul {
    display: inline-block;
    text-align: left;
    margin-bottom: 0; }
  #contact form {
    margin: auto; }
    @media (min-width: 768px) {
      #contact form {
        max-width: 500px; } }
    #contact form span {
      font-size: .6rem; }
    #contact form input, #contact form textarea {
      display: block;
      border: none;
      padding: .75rem .5rem;
      min-width: 100%;
      max-width: 100%;
      font-size: 1rem;
      margin-bottom: 1rem;
      font-family: 'Roboto', sans-serif; }
      #contact form input:focus, #contact form textarea:focus {
        outline: 3px solid #00A3E0; }
    #contact form .btn {
      margin-right: 0;
      width: auto; }
    #contact form .id_form {
      border: none;
      background: transparent;
      height: 1px;
      width: 1px;
      color: #fff;
      font-size: 1px;
      cursor: default; }
  #contact img {
    max-height: 40px; }
  #contact p {
    margin-bottom: 0; }

#map {
  padding: 0;
  margin: 0;
  height: 75vh;
  position: static; }
  #map #my-google-map {
    height: 100%; }

#footer h4 {
  padding: 1rem 0; }
#footer ul {
  list-style: none;
  list-style-position: inside;
  padding: 0;
  margin: 0; }
  #footer ul li {
    position: relative;
    padding-left: 1rem;
    line-height: 1.3rem;
    transition: all ease .2s; }
    #footer ul li:before {
      content: '-';
      position: absolute;
      left: 0; }
    #footer ul li:hover {
      color: #00A3E0;
      padding-left: 1.25rem; }
  #footer ul a {
    color: inherit;
    display: block;
    text-decoration: none; }
#footer img {
  width: 100%;
  max-width: 65vw; }

#siret {
  background-color: rgba(0, 0, 0, 0.57);
  text-align: center;
  padding: .75rem 0;
  margin-top: 1rem; }

#copyright {
  text-align: center;
  margin-top: 3rem;
  padding-bottom: 6rem; }