@import url('https://fonts.googleapis.com/css?family=Open+Sans:700');

    #introAnimation {
      position: relative;
      outline: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background: url("../img/fond-intro.png") no-repeat center center fixed;
      background-size: cover;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
    }
    .main-animation > .show {
      position: absolute;
      // left: 50%;
      // top: 50%;
      // transform: translate(-50%, -50%);
      width: 100%;
      height: 100%;
    }

    svg {
      position: absolute;
      width: 100%;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

    .titre {
      width: 80%;
      opacity: 0;
      animation: show 2s ease 5s forwards, titleUp 2s ease 5s forwards;
      -ms-animation: show 2s ease 5s forwards, titleUp 2s ease 5s forwards;
      -o-animation: show 2s ease 5s forwards, titleUp 2s ease 5s forwards;
      -moz-animation: show 2s ease 5s forwards, titleUp 2s ease 5s forwards;
      -webkit-animation: show 2s ease 5s forwards, titleUp 2s ease 5s forwards;
    }
    .subtitle {
      width: 60%;
      opacity: 0;
      animation: show 2s ease 5s forwards, titleDown 2s ease 5s forwards;
      -ms-animation: show 2s ease 5s forwards, titleDown 2s ease 5s forwards;
      -o-animation: show 2s ease 5s forwards, titleDown 2s ease 5s forwards;
      -moz-animation: show 2s ease 5s forwards, titleDown 2s ease 5s forwards;
      -webkit-animation: show 2s ease 5s forwards, titleDown 2s ease 5s forwards;
    }
    
    .opening-button {
      opacity: 0;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      padding: .1em 1em;
      font-size: 40px;
      color: white;
      border: none;
      background-color: #59667c;
      z-index: 1;
      font-family: 'Open-sans', sans-serif;
      line-height: 1.1;
      border-radius: 50px;
      outline: none;

      transition: color, background-color 200ms ease;

      animation: show 2s ease 5.7s forwards;
      -ms-animation: show 2s ease 5.7s forwards;
      -o-animation: show 2s ease 5.7s forwards;
      -moz-animation: show 2s ease 5.7s forwards;
      -webkit-animation: show 2s ease 5.7s forwards;
    }

    .opening-button:hover {
      cursor: pointer;
      color: #19284a;
      background-color: #fff;
    }
    .opening-rideau-left {
      animation: curtainsOpeningLeft 6s ease forwards;
      -ms-animation: curtainsOpeningLeft 6s ease forwards;
      -o-animation: curtainsOpeningLeft 6s ease forwards;
      -moz-animation: curtainsOpeningLeft 6s ease forwards;
      -webkit-animation: curtainsOpeningLeft 6s ease forwards;
    }
    .opening-rideau-right {
      animation: curtainsOpeningRight 6s ease forwards;
      -ms-animation: curtainsOpeningRight 6s ease forwards;
      -o-animation: curtainsOpeningRight 6s ease forwards;
      -moz-animation: curtainsOpeningRight 6s ease forwards;
      -webkit-animation: curtainsOpeningRight 6s ease forwards;
    }
    @keyframes titleUp {
      0% { transform: translate(-50%, -50%); }
      100% { transform: translate(-50%, -70%); }
    } 
    @keyframes titleDown {
      0% { transform: translate(-50%, -50%); }
      100% { transform: translate(-50%, -20%); }
    }     
    @keyframes curtainsOpeningLeft {
      0% { transform: translateX(0px); }
      20% { transform: translateX(-850px); }
      80% { transform: translateX(-850px); }
      100% { transform: translateX(-2000px); }
    }
    @keyframes curtainsOpeningRight {
      0% { transform: translateX(0px); }
      20% { transform: translateX(850px); }
      80% { transform: translateX(850px); }
      100% { transform: translateX(2000px); }
    }
    @keyframes show {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }
    @keyframes hide {
      0% { opacity: 1; }
      100% { opacity: 0; }
    }
    .loader {
      position: fixed;
      left: 0px;
      top: 0px;
      width: 100%;
      height: 100%;
      background-color: #111111;
      color: white;
      z-index: 9999;
    }
    .loader svg {
      width: 50%;
    }
    .paused {
      -ms-animation-play-state:paused;
      -o-animation-play-state:paused;
      -moz-animation-play-state:paused;
      -webkit-animation-play-state:paused;
      animation-play-state: paused;
    }

    /* Medium */
    @media (min-width: 500px) and (max-width: 950px) {
      .opening-button {
        font-size: 50px;
      }
      @keyframes titleUp {
        0% { transform: translate(-50%, -50%); }
        100% { transform: translate(-50%, -90%); }
      } 
    }


    /* Large */
    @media (min-width: 900px) {
      #introAnimation {
        background-position: top;
      }
      .titre {
        top: 40%;
        width: 70%;
        opacity: 0;
        animation: show 2s ease 5s forwards, titleUp 2s ease 5s forwards;
        -ms-animation: show 2s ease 5s forwards, titleUp 2s ease 5s forwards;
        -o-animation: show 2s ease 5s forwards, titleUp 2s ease 5s forwards;
        -moz-animation: show 2s ease 5s forwards, titleUp 2s ease 5s forwards;
        -webkit-animation: show 2s ease 5s forwards, titleUp 2s ease 5s forwards;

      }
      .subtitle {
        width: 20%;
        opacity: 0;
        animation: show 2s ease 5s forwards, titleDown 2s ease 5s forwards;
        -ms-animation: show 2s ease 5s forwards, titleDown 2s ease 5s forwards;
        -o-animation: show 2s ease 5s forwards, titleDown 2s ease 5s forwards;
        -moz-animation: show 2s ease 5s forwards, titleDown 2s ease 5s forwards;
        -webkit-animation: show 2s ease 5s forwards, titleDown 2s ease 5s forwards;
      }
      .opening-button {
        font-size: 50px;
        outline: none;
        top: 55%;

        animation: show 2s ease 5.2s forwards;
        -ms-animation: show 2s ease 5.2s forwards;
        -o-animation: show 2s ease 5.2s forwards;
        -moz-animation: show 2s ease 5.2s forwards;
        -webkit-animation: show 2s ease 5.2s forwards;
      }
      .loader svg {
        width: 30%;
      }
    }

    /* Mobile*/
    @media (max-width: 500px) {
      .opening-button {
        font-size: 30px;
      }
      .titre {
        width: 90%;
        animation: show 2s ease 1s forwards, titleUp 2s ease 1s forwards !important;
        -ms-animation: show 2s ease 1s forwards, titleUp 2s ease 1s forwards !important;
        -o-animation: show 2s ease 1s forwards, titleUp 2s ease 1s forwards !important;
        -moz-animation: show 2s ease 1s forwards, titleUp 2s ease 1s forwards !important;
        -webkit-animation: show 2s ease 1s forwards, titleUp 2s ease 1s forwards !important;
      }
      .subtitle {
        width: 60%;
        animation: show 2s ease 1s forwards, titleDown 2s ease 1s forwards !important;
        -ms-animation: show 2s ease 1s forwards, titleDown 2s ease 1s forwards !important;
        -o-animation: show 2s ease 1s forwards, titleDown 2s ease 1s forwards !important;
        -moz-animation: show 2s ease 1s forwards, titleDown 2s ease 1s forwards !important;
        -webkit-animation: show 2s ease 1s forwards, titleDown 2s ease 1s forwards !important;
      }
      @keyframes titleUp {
        0% { transform: translate(-50%, -50%); }
        100% { transform: translate(-50%, -80%); }
      } 
      @keyframes titleDown {
        0% { transform: translate(-50%, -50%); }
        100% { transform: translate(-50%, -25%); }
      }
    }