/* base */
/* === VARIABLES ========================================================= */
/* === COLORS === */
/* blue */
/* darker blue */
/* === FONTS === */
/* === GENERALS ========================================================= */
/* === INIT === */
* {
  margin: 0;
  padding: 0;
  outline: none;
  background-repeat: no-repeat; }

body {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  overflow-x: hidden;
  font-size: 16px;
  /* clear */ }
  body .clear:after {
    content: '';
    display: block;
    clear: both; }

/* components */
/* === VARIABLES ========================================================= */
/* === COLORS === */
/* blue */
/* darker blue */
/* === FONTS === */
/* === HEADER ========================================================= */
header {
  height: 86px;
  /* ===================================================================== */
  /* === MEDIA QUERIES =================================================== */
  /* ===================================================================== */ }
  header h1 {
    margin: 10px 0 0 30px;
    float: left; }
    header h1 a {
      display: block; }
  header .invacare-logo {
    height: 65px;
  }
  header .service-logo {
    margin: 22px 40px 0 0;
    float: right; }
  @media screen and (max-width: 600px) {
    header h1 a {
      width: 100px;
      overflow: hidden; } }

/* === VARIABLES ========================================================= */
/* === COLORS === */
/* blue */
/* darker blue */
/* === FONTS === */
/* === MAIN ========================================================= */
.main {
  /* ===================================================================== */
  /* === MEDIA QUERIES =================================================== */
  /* ===================================================================== */ }
  .main .visuel {
    width: 50%;
    float: left;
    display: inline-block;
  }
  .main .visuel img {
    height: 100%;
    object-fit: cover;
  }
  .main .content {
    background-color: #0070c0;
    width: 50%;
    color: white;
    padding: 30px;
    min-height: 600px;
    box-sizing: border-box;
    float: left;
    position: relative; }
    .main .content h2 {
      font-size: 2.5em;
      font-weight: 700;
      margin-bottom: 30px; }
    .main .content p {
      margin-bottom: 30px;
      line-height: 1.5em;
      font-size: 0.9em; }
    .main .content ul {
      margin-left: 40px;
      margin-bottom: 50px; 
      margin-top: 1em; }
      .main .content ul li {
        list-style-type: disc;
        font-size: 100%;
        line-height: 1.5em; }
        .main .content ul li span {
          font-size: 1.5em; }
    .main .content .details {
      margin-bottom: 100px; }
      .main .content .details .left, .main .content .details .right {
        width: 50%;
        float: left;
        box-sizing: border-box; }
      .main .content .details .left {
        padding-right: 20px; }
        .main .content .details .left p {
          font-size: 100%;
        }
    .main .content .socials {
      position: absolute;
      bottom: 20px;
      width: calc(100% - 60px); }
      .main .content .socials h3, .main .content .socials a {
        width: 33.33%;
        float: left;
        height: 25px;
        line-height: 25px;
        box-sizing: border-box; }
      .main .content .socials h3 {
        text-transform: uppercase; }
      .main .content .socials a {
        color: white;
        text-decoration: none;
        font-size: 0.8em;
        display: block;
        transition: color 0.2s ease;
        background-repeat: no-repeat;
        background-position: left center;
        /* pictos */ }
        .main .content .socials a:hover {
          color: #002060; }
        .main .content .socials a.facebook {
          background-image: url("../img/socials/facebook.png");
          padding-left: 20px; }
        .main .content .socials a.youtube {
          background-image: url("../img/socials/youtube.png");
          padding-left: 35px; }
  @media screen and (max-width: 1100px) {
    .main .content .socials h3 {
      float: none;
      width: 100%;
      margin-bottom: 10px; }
    .main .content .socials a {
      width: 50%; } }
  @media screen and (max-width: 768px) {
    .main .visuel {
      background-position: center left 22%; }
    .main .content {
      padding: 30px 25px; }
      .main .content .details .left, .main .content .details .right {
        float: none;
        width: 100%; } }
  @media screen and (max-width: 760px) {
    .main .content .socials {
      position: static; }
      .main .content .socials h3 {
        margin-bottom: 30px; }
      .main .content .socials a {
        width: 100%;
        height: 30px;
        line-height: 30px; } }
  @media screen and (max-width: 600px) {
    .main .visuel {
      float: none;
      width: 100%;
      height: 250px; }
    .main .content {
      width: 100%;
      float: none; }
      .main .content .socials {
        position: static;
        width: 100%; }
        .main .content .socials h3 {
          text-align: center;
          margin-bottom: 30px; }
        .main .content .socials a {
          width: 50%;
          float: left; } }
  @media screen and (max-width: 400px) {
    .main .content .socials a {
      width: 100%; } }

/* === VARIABLES ========================================================= */
/* === COLORS === */
/* blue */
/* darker blue */
/* === FONTS === */
/* === BUTTONS ========================================================= */
.button {
  display: block;
  background-color: #002060;
  color: white;
  text-decoration: none;
  height: 50px;
  line-height: 50px;
  font-size: 0.9em;
  margin-bottom: 20px;
  text-align: center;
  transition: background 0.2s ease; }
  .button:hover {
    background-color: #001847; }