* {
    box-sizing: border-box;
  }
  
  html,
  body {
    color: #444;
    font-family: 'Helvetica', 'Verdana', sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
  }
  
  html {
    overflow: hidden;
  }
  
  body {
    align-content: stretch;
    align-items: stretch;
    background: rgba(222,157,169,0.74);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  
  body.accueil-le-relais {
    background: url(/assets/images/gassendi-le-relais-accueil.jpg) center center no-repeat;
    background-size: cover;
  }

  body.solution-le-relais .main {
    background: url(/assets/images/solution-relais-v2.jpg) center center no-repeat;
    background-size: contain;
    /* background-position-y: 56px; */
    background-color: rgba(222,157,169,0.74);
  }

  /**
   * Header
   */
  
  .header {
    align-content: center;
    align-items: stretch;
    background: #DE9DA9;
    box-shadow:
      0 4px 5px 0 rgba(243, 159, 171, 0.14),
      0 2px 9px 1px rgba(243, 159, 171, 0.12),
      0 4px 2px -2px rgba(243, 159, 171, 0.2);
    color: #fff;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    font-size: 20px;
    height: 56px;
    justify-content: flex-start;
    padding: 16px 16px 0 16px;
    position: fixed;
    transition: transform 0.233s cubic-bezier(0, 0, 0.21, 1) 0.1s;
    width: 100%;
    will-change: transform;
    z-index: 1000;
  }
  
  .header h1 {
    flex: 1;
    font-size: 20px;
    font-weight: 400;
    margin: 0;
  }
  
  .header button {
    border: none;
    cursor: pointer;
    height: 24px;
    margin-right: 16px;
    opacity: 0.54;
    outline: none;
    overflow: hidden;
    text-indent: -30000px;
    transition: opacity 0.333s cubic-bezier(0, 0, 0.21, 1);
    width: 24px;
  }

  .header .logo img {
    height: 24px;
    padding-right: 10px;
  } 
  
  .header #butRefresh {
    background: url(/assets/images/refresh.svg) center center no-repeat;
  }
  
  .header #butInstall {
    background: url(/assets/images/install.svg) center center no-repeat;
  }

  .header #butBack {
    background: url(/assets/images/arrow-back-white.png) center center no-repeat;
  }
  
  .header .powered-by {
    color: white;
    font-size: 0.6em;
    text-decoration: none;
  }
  
  /**
   * Loading spinner
   */
  
  .card-spinner {
    background-color: rgba(255, 255, 255, 0.8);
    height: 100%;
    margin-left: -16px;
    margin-top: -16px;
    position: absolute;
    width: 100%;
  }
  
  .card-spinner svg {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  
  .card-spinner svg circle {
    animation: line 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite, rotate 1.6s linear infinite;
    box-sizing: border-box;
    stroke: #3f51b5;
    stroke-width: 3px;
    transform-origin: 50%;
  }
  
  @keyframes rotate {
    from { transform: rotate(0); }
    to { transform: rotate(450deg); }
  }
  
  @keyframes line {
    0% {
      stroke-dasharray: 2, 85.964;
      transform: rotate(0);
    }
  
    50% {
      stroke-dasharray: 65.973, 21.9911;
      stroke-dashoffset: 0;
    }
  
    100% {
      stroke-dasharray: 2, 85.964;
      stroke-dashoffset: -65.973;
      transform: rotate(90deg);
    }
  }
  
  /**
   * Icons
   */

    .sound-card {
        width: 237px;
        height: 237px;
        margin: 0 auto;
    }
    .sound-card.solution {
        padding: 15px;
    }
    .help {
        position: absolute;
        bottom: 1rem;
        right: 1rem;
        width: 100px;
    }
    .help.close {
        text-align: right;
        width: 45px;
        bottom: 2.5rem;
        right: 2.5rem;
    }
  
    .sound-icon:hover {
        cursor: pointer;
    }
    .dog #queue .animate {
      transform-origin: 50% 50%;
      animation: waggle 0.5s infinite;
    }
    .dog-head-animation .animate {
      transform-origin: 50% 50%;
      animation: sniff 1.8s infinite;
    }
    .fountain #eau .animate, .fountain #goutte_bas .animate, .fountain #goutte_haut .animate {
      animation: water-color-cycle 4s infinite linear;
    }
    .fountain #reflets .animate {
      animation: water-drops 1s infinite linear;
    }
    .kiss .animate {
      animation: fade-cycle 2s infinite linear;
    }
    .fadein {
        animation: fadeIn 1s;
    }
    .fadeout {
        animation: fadeOut 1s;
    }
    @keyframes waggle {
      0%, 100% {
           transform: rotate(10deg);
           animation-timing-function: ease-in;
       }
       70% {
           transform: rotate(-10deg);
           animation-timing-function: ease-out;
       }
    }
    @keyframes water-color-cycle {
      0%, 100% { 
        fill:lavender;
      }
      50% { 
        fill:CornflowerBlue;
      }
      75% { 
        fill:silver;
      }
    }
    @keyframes water-drops {
      0% {
           transform: translateY(-20px);
           animation-timing-function: ease-in;
       }
       100% {
        transform: translateY(20px);
        animation-timing-function: ease-in;
       }
    }
    @keyframes blink {
        0%, 100% {
            transform: scale(1, .05);
            animation-timing-function: ease-in;
        }
        5%,
        95% {
            transform: scale(1, 1);
            animation-timing-function: ease-out;
        }
    }
    @keyframes blink-blink {
        0%, 30%, 50% {
            transform: scale(1, .05);
            animation-timing-function: ease-in;
        }
        5%, 25%, 45%, 55% {
            transform: scale(1, 1);
            animation-timing-function: ease-out;
        }
    }
    @keyframes stare {
        0%, 100% {
            transform: scale(1, 1);
            animation-timing-function: linear;
        }
        50% {
            transform: scale(2, 2);
            animation-timing-function: linear;
        }
    }
    @keyframes zoom {
        0%, 50% {
            transform: scale(1, 1);
            animation-timing-function: linear;
        }
        40% {
            transform: scale(1.5, 1.5);
            animation-timing-function: ease-in;
        }
    }
    @keyframes nod {
       0%, 100% {
            transform: rotate(10deg);
            animation-timing-function: ease-in;
        }
        70% {
            transform: rotate(-10deg);
            animation-timing-function: ease-out;
        }
    }
    @keyframes sniff {
        0%, 30%, 50% {
             transform: rotate(3deg);
             animation-timing-function: ease-in;
        }
        10% {
            transform: rotate(-1deg);
            animation-timing-function: ease-out;
        }
        25%, 40% {
            transform: rotate(-3deg);
            animation-timing-function: ease-out;
        }
        100% {
            transform: rotate(0deg);
            animation-timing-function: ease-out;
        }
     }
    @keyframes duck {
        0%, 100% {
             transform: rotate(10deg);
             animation-timing-function: linear;
        }
        20% {
            transform: rotate(0deg);
            animation-timing-function: linear;
        }
        30% {
            transform: rotate(-7deg);
            animation-timing-function: linear;
        }
        50% {
             transform: rotate(-10deg);
             animation-timing-function: linear;
        }
        70% {
            transform: rotate(-3deg);
            animation-timing-function: linear;
        }
        90% {
            transform: rotate(0deg);
            animation-timing-function: linear;
        }
    }
    @keyframes fade-cycle{
        0%, 100% {
          opacity:1;
        }
        50% {
            fill: #E3CD16;
            opacity:0.3;
        }
    }
    @keyframes fadeIn{
        from {
          opacity:0;
        }
        to {
          opacity:1;
        }
    }
    @keyframes fadeOut{
        from {
          opacity:1;
        }
        to {
          opacity:0;
        }
    }
    @keyframes test-color-cycle {
        0%   { 
          fill:orange;
        }
        5% { 
          fill:MediumSpringGreen;
        }
        15% { 
          fill:lavender;
        }
        25% { 
          fill:CornflowerBlue;
        }
        35% { 
          fill:silver;
        }
        45% { 
          fill:coral;
        }
        55% { 
          fill:teal;
        }
        65% { 
          fill:olive;
        }
        75% { 
          fill:maroon;
        }
        85% { 
          fill:silver;
        }
        95% { 
          fill:orange;
        }
        100% { 
          fill:orange;
        }
    }
  
  /**
   * Main body
   */
  
  .main {
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    padding-top: 60px;
    /* background-color: rgba(243, 159, 171, 0.10); */
    background-color: rgba(158, 197, 147, 0.2);
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-content: center;
  }
  .main .column-item {
    flex-grow: 1;
    width: 33%;
  }
  .main .fab {
    background-color: #3f51b5;
    border-radius: 50%;
    bottom: 1rem;
    height: 56px;
    padding: 12px;
    position: fixed;
    right: 1rem;
    width: 56px;
    z-index: 1000;
  }
  
  .main .fab .icon {
    display: inline-block;
    height: 100%;
    width: 100%;
  }

  .main .logo {
    position: absolute;
    width: 87px;
    bottom: 2.5rem;
    right: 2.5rem;
  }

  .main .heading {
    position: absolute;
    bottom: 1rem;
    left: 3.5rem;
    color: #FFF;
  }
  .main .heading h2 {
    font-size: 2em;
    display: inline-block;
  }
  .main .heading span {
    font-size: 1.3em;
    padding-left: 10px;
  }
  
  
  /**
   * Media query to adjust size of content for small screens
   */
  
  @media (max-width: 450px) {
    .header h1 {
      font-size: 17px;
      margin: -6px;
    }
    .header h1 span {
      display: block;
      line-height: 0.8;
    }
    .main {
      flex-flow: column;
      justify-content: start;
    }
    .main > a {
      margin: auto;
    }
    .main .column-item {
      width: 100%;
    }
  }