/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html, body {
  font-family: Arial, sans-serif !important;
  color: #000 !important;  
}
strong { color: #000 !important; }

/* Neo Sans Import */
  @font-face {
      font-family: 'NeoSans';
      src: url('NeoSans.eot');
      src: url('NeoSans.eot?#iefix') format('embedded-opentype'),
          url('NeoSans.woff2') format('woff2'),
          url('NeoSans.woff') format('woff'),
          url('NeoSans.ttf') format('truetype'),
          url('NeoSans.svg#NeoSans') format('svg');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
  }

  @font-face {
      font-family: 'NeoSansBold';
      src: url('NeoSans-Bold.eot');
      src: url('NeoSans-Bold.eot?#iefix') format('embedded-opentype'),
          url('NeoSans-Bold.woff2') format('woff2'),
          url('NeoSans-Bold.woff') format('woff'),
          url('NeoSans-Bold.ttf') format('truetype'),
          url('NeoSans-Bold.svg#NeoSans-Bold') format('svg');
      font-weight: bold;
      font-style: normal;
      font-display: swap;
  }

  @font-face {
      font-family: 'NeoSansLight';
      src: url('NeoSans-Light.eot');
      src: url('NeoSans-Light.eot?#iefix') format('embedded-opentype'),
          url('NeoSans-Light.woff2') format('woff2'),
          url('NeoSans-Light.woff') format('woff'),
          url('NeoSans-Light.ttf') format('truetype'),
          url('NeoSans-Light.svg#NeoSans-Light') format('svg');
      font-weight: 300;
      font-style: normal;
      font-display: swap;
  }

.is-orange { color: #e58327; }

.hero {
  background-image: url("../img/header---background.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}
.hero-body {
  padding: 3rem 3rem 12rem 3rem !important;
}
h1 { font-family: 'NeoSans'; }
h1 strong { font-family: 'NeoSansBold'; }
h1 span { font-family: 'NeoSansLight'; }
.hero-body .columns { width: 100%; }
.hero-body .column:last-child { text-align: center; }
@media screen and (min-width: 769px) {
  .hero-body { padding: 3rem 6rem 12rem 6rem !important; }
}
@media screen and (min-width: 1024px) {
  .hero-body .column:last-child { text-align: right; }
}
@media screen and (min-width: 1408px) {
  .hero-body { padding: 3rem 9rem 12rem 9rem !important; }
}

.mid-content { padding: 0 1.5rem 6rem 1.5rem; }
@media screen and (min-width: 1024px) {
  .mid-content { padding: 3rem 6rem 6rem 6rem; }
}
@media screen and (min-width: 1408px) {
  .mid-content { padding: 3rem 12rem 6rem 12rem; }
}

.beforeaction {
  background-color: #000;
  padding: 3rem 1.5rem;
}
.beforeaction .col { padding: 0 1.5rem }
.beforeaction a { color: #FFF !important; }
.beforeaction a:hover { color: #CCC !important; }
.beforeaction .col>.column:first-child { text-align: center; }
.beforeaction .col>.column:last-child { padding-left: 0 }
.beforeaction .visuel { margin-top: -6rem; }
@media screen and (min-width: 1216px) {
  .beforeaction { padding: 3rem; }
  .beforeaction .col { padding: 0 }
  .beforeaction .col>.column:first-child { text-align: left; }
  .beforeaction .col>.column:last-child { padding-left: 3rem }
  .beforeaction .visuel { margin-top: -5rem; }
}
@media screen and (min-width: 1408px) {
  .beforeaction .visuel { margin-top: -9rem; }
}
h2 { font-family: 'NeoSansLight'; }
h2 strong { font-family: 'NeoSansBold';color: #FFF !important; }

.has-text-white strong {color: #FFF !important;}

.action {
  padding: 2rem 3rem 3rem 3rem;
  background-image: url("../img/landing---background.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: left bottom;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .action { padding: 2rem 3rem 4rem 3rem; }
}

.solutions { padding: 3rem 1.5rem; }
@media screen and (min-width: 769px) {
  .solutions { padding: 3rem 3rem; }
}
@media screen and (min-width: 1408px) {
  .solutions { padding: 3rem 12rem; }
}
.solutions .icon { font-family: 'NeoSans'; background-color: #e58327; color: #FFF; border-radius: 50%; }
.solutions p { font-family: 'NeoSans'; }
h3 { font-family: 'NeoSansBold'; }

footer {
  padding: 3rem; 
  background-image: url("../img/footer-shadow.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
}
.bt-reseaux {
    display: inline-block;
    width: 44px;
    height: 44px;
    background-color: #333333;
    border-radius: 50%;
    margin: 0;
}
.bt-reseaux img {
    width: 50%; height: auto; display: block;margin: 11px
}
.bt-reseaux:hover {
    background-color: #1d1d1b;
}
.footer-logo { width: auto; height: 44px; }

.button.is-black {
  text-transform: uppercase;
  font-family: 'NeoSansBold';
  background-color: #000 !important;
  font-size: 1.25rem !important;
}
.button.is-black:hover { border-color: #1d1d1b !important; background-color: #1d1d1b !important; }

.faces {width: 75%}
@media screen and (min-width: 414px) {
  .button.is-black {  font-size: 1.5rem !important; }
  .faces {width: 100%}
}