html, body {height: 100%; margin: 0; font-family: Helvetica, Arial, sans-serif; background: #0096eb;}
* {margin: 0; padding: 0; box-sizing: border-box;}
img {pointer-events: none;}
body#no-protection img {pointer-events: auto;}
::selection {background: white; color: #b9b9b9;}
a {text-decoration:none; color: #b9b9b9;}

/* ---------------------------------------------------------------------------------------- */

.about-page {width: 100%;}

.top-banner {
  width: 100%;
  padding: 30px;
  font-size: 3.5rem;
  line-height: 3.5rem;
  text-align: left;
  font-weight: bold;
  letter-spacing: -1px;
  color: #b9b9b9;
}

.about-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  width: 100%;
  font-size: 0.9rem;
  padding: 0px;
  background: transparent;
}

.col {
  flex: 1 1 25%;
  min-width: 200px;
  padding: 30px;
  color: #b9b9b9;
}

.col a:hover {color: transparent;}

/* Responsive : empilement */
@media (max-width: 900px) {
  .about-wrapper {flex-direction: column;}
  .col {width: 100%;}
}

/* ---------------------------------------------------------------------------------------- */

/* FOOTER */
.flex-bar {
  width: 100%;
  margin: 10px auto;
  background-color: transparent;
  display: flex;
  justify-content: space-between;
  padding-top: 100px;
  padding-left: 30px;
  padding-right: 30px;
  font-size: 0.9rem;
}

.flex-colr {
  flex: 1;
  text-align: right;
  color: #b9b9b9;
}

.flex-col {
  flex: 1;
  text-align: left;
  color: #b9b9b9;
}

.flex-col a {
  color: #b9b9b9;
  text-decoration: none;
  display: inline-block;
}

.flex-col a:hover {
  color: transparent;
}

.logo {
  width: 100%;
  padding: 30px;
  background: transparent;
}

.logo img {
  width: 100%;
}