<div class="wrapper">  
  <div class="grid">

    <!-- SOFTWARE DEVELOPMENT -->

    <div class="grid--cell">
      <div class="animation-wrapper animation-wrapper--software-bg">

        <div class="absolute software-monitor">

          <!-- Monitor hardware + screen chrome/UI -->
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" class="absolute software-screen software-screen--bg">

            <!-- Monitor feet -->
            <g fill="#333">
              <circle cx="80" cy="152" r="4" />
              <circle cx="220" cy="152" r="4" />
            </g>

            <!-- Browser chrome BG -->
            <path fill="#A6A6A6" d="M60 149.5c-1.38 0-2.5-1.12-2.5-2.5V19c0-1.38 1.12-2.5 2.5-2.5h180c1.38 0 2.5 1.12 2.5 2.5v128c0 1.38-1.12 2.5-2.5 2.5H60z" />

            <!-- Monitor Bezel -->
            <path fill="#333" d="M240 19v128H60V19h180m0-5H60c-2.76 0-5 2.24-5 5v128c0 2.76 2.24 5 5 5h180c2.76 0 5-2.24 5-5V19c0-2.76-2.24-5-5-5z" />

            <!-- Browser page BG -->
            <path fill="#E5E5E5" d="M60 26h180v116H60z" />

            <!-- Sidebar BG -->
            <path fill="#D1D1D1" d="M80 26h30v116H80z" />

            <!-- Browser buttons -->
            <path fill="#191919" d="M218 20h5v5h-5zm7.5 0h5v5h-5z" />

            <!-- Line numbers -->
            <path fill="#D60000" d="M233 20h5v5h-5zM96.02 26.33h-1.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h1.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zm0 7.4h-1.85c-1.02 0-1.84.83-1.84 1.84 0 1 .82 1.83 1.84 1.83h1.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zm0 7.4h-1.85c-1.02 0-1.84.83-1.84 1.84 0 1 .82 1.83 1.84 1.83h1.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zm0 7.4h-1.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h1.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zm0 7.47h-1.85c-1.02 0-1.84.82-1.84 1.83 0 1.02.82 1.84 1.84 1.84h1.85c1.02 0 1.84-.82 1.84-1.84 0-1-.82-1.83-1.84-1.83zm0 7.33h-1.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h1.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zm0 7.4h-1.85c-1.02 0-1.84.83-1.84 1.84 0 1 .82 1.83 1.84 1.83h1.85c1.02 0 1.84-.82 1.84-1.83 0-1-.82-1.84-1.84-1.84zm0 7.27h-1.85c-1.02 0-1.84.82-1.84 1.83 0 1.02.82 1.84 1.84 1.84h1.85c1.02 0 1.84-.82 1.84-1.84 0-1-.82-1.83-1.84-1.83zm0 7.53h-1.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h1.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zm0 7.4h-1.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h1.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zm0 7.4h-1.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h1.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zm0 7.4h-1.85c-1.02 0-1.84.83-1.84 1.84 0 1 .82 1.83 1.84 1.83h1.85c1.02 0 1.84-.82 1.84-1.83 0-1-.82-1.84-1.84-1.84zm0 7.27h-1.85c-1.02 0-1.84.82-1.84 1.83 0 1.02.82 1.84 1.84 1.84h1.85c1.02 0 1.84-.82 1.84-1.84 0-1-.82-1.83-1.84-1.83zm0 7.53h-1.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h1.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zm0 7.4h-1.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h1.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zm0 7.4h-1.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h1.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84z"
            />
          </svg>

          <!-- Monitor screen mask - Height is animated for R "code reveal" -->
          <div class="absolute software-screen software-screen--fg-mask">

            <!-- Monitor screen R graphic - Translates upwards for R "code scroll" -->
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" class="absolute software-screen software-screen--fg">
              <path fill="#D60000" d="M130.02 33.73h-3.85c-1.02 0-1.84.83-1.84 1.84 0 1 .82 1.83 1.84 1.83h3.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zm18 0h-10.85c-1.02 0-1.84.83-1.84 1.84 0 1 .82 1.83 1.84 1.83h10.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zM170.02 41.13h-21.85c-1.02 0-1.84.83-1.84 1.84 0 1 .82 1.83 1.84 1.83h21.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zm-29 7.4h-14.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h14.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zM177.02 56h-6.85c-1.02 0-1.84.82-1.84 1.83 0 1.02.82 1.84 1.84 1.84h6.85c1.02 0 1.84-.82 1.84-1.84 0-1-.82-1.83-1.84-1.83zm1 7.33h-28.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h28.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zm-24 7.4h-13.85c-1.02 0-1.84.83-1.84 1.84 0 1 .82 1.83 1.84 1.83h13.85c1.02 0 1.84-.82 1.84-1.83 0-1-.82-1.84-1.84-1.84zM176.02 78h-9.85c-1.02 0-1.84.82-1.84 1.83 0 1.02.82 1.84 1.84 1.84h9.85c1.02 0 1.84-.82 1.84-1.84 0-1-.82-1.83-1.84-1.83zm-32 7.53h-17.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h17.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zM169.02 92.93h-29.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h29.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zM157.02 100.33h-2.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h2.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zm-16 7.4h-2.85c-1.02 0-1.84.83-1.84 1.84 0 1 .82 1.83 1.84 1.83h2.85c1.02 0 1.84-.82 1.84-1.83 0-1-.82-1.84-1.84-1.84zM168.02 115h-25.85c-1.02 0-1.84.82-1.84 1.83 0 1.02.82 1.84 1.84 1.84h25.85c1.02 0 1.84-.82 1.84-1.84 0-1-.82-1.83-1.84-1.83zM159.02 129.93h-6.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h6.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zm19 0h-11.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h11.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84z"
              />

              <path fill="#bbb" d="M161.02 33.73h-5.85c-1.02 0-1.84.83-1.84 1.84 0 1 .82 1.83 1.84 1.83h5.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zm-20 7.4h-10.85c-1.02 0-1.84.83-1.84 1.84 0 1 .82 1.83 1.84 1.83h10.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zM159.02 48.53h-10.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h10.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zM159.02 78h-14.85c-1.02 0-1.84.82-1.84 1.83 0 1.02.82 1.84 1.84 1.84h14.85c1.02 0 1.84-.82 1.84-1.84 0-1-.82-1.83-1.84-1.83zM132.02 92.93h-5.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h5.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zM162.02 107.73h-13.85c-1.02 0-1.84.83-1.84 1.84 0 1 .82 1.83 1.84 1.83h13.85c1.02 0 1.84-.82 1.84-1.83 0-1-.82-1.84-1.84-1.84zM163.02 122.53h-15.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h15.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84z"
              />

              <path fill="#888" d="M175.02 48.53h-8.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h8.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zm-12 7.47h-22.85c-1.02 0-1.84.82-1.84 1.83 0 1.02.82 1.84 1.84 1.84h22.85c1.02 0 1.84-.82 1.84-1.84 0-1-.82-1.83-1.84-1.83zM178.02 70.73h-16.85c-1.02 0-1.84.83-1.84 1.84 0 1 .82 1.83 1.84 1.83h16.85c1.02 0 1.84-.82 1.84-1.83 0-1-.82-1.84-1.84-1.84zm-41 7.27h-10.85c-1.02 0-1.84.82-1.84 1.83 0 1.02.82 1.84 1.84 1.84h10.85c1.02 0 1.84-.82 1.84-1.84 0-1-.82-1.83-1.84-1.83zM175.02 85.53h-22.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h22.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zM146.02 100.33h-11.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h11.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84zM173.02 122.53h-2.85c-1.02 0-1.84.82-1.84 1.84 0 1 .82 1.83 1.84 1.83h2.85c1.02 0 1.84-.82 1.84-1.83 0-1.02-.82-1.84-1.84-1.84z"
              />
            </svg>
          </div>

          <!-- Monitor screen shine overlay -->
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" class="absolute software-screen software-screen--shine">
            <linearGradient id="a" x1="195" x2="41" y1="-26" y2="128" gradientUnits="userSpaceOnUse">
              <stop offset="0" stop-color="#FFF" stop-opacity=".75" />
              <stop offset="1" stop-color="#FFF" stop-opacity="0" />
            </linearGradient>
            <linearGradient id="b" x1="244.5" x2="138.5" y1="45.5" y2="151.5" gradientUnits="userSpaceOnUse">
              <stop offset="0" stop-color="#FFF" stop-opacity=".55" />
              <stop offset="1" stop-color="#FFF" stop-opacity="0" />
            </linearGradient>

            <path fill="url(#a)" d="M240 19H60v128h52" />
            <path fill="url(#b)" d="M240 59V41L134 147h18" />
          </svg>
        </div>

        <!-- Keyboard -->
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" class="absolute software-keyboard">
          <path fill="#E0E0E0" d="M70 166h160v58H70z" />
          <g fill="#FFF">
            <path d="M73 169h11v7H73zm13 0h11v7H86zm26 0h11v7h-11zm-13 0h11v7H99zm26 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm-98 9h11v7H92zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h18v7h-18zm-123 9h11v7H86zm13 0h11v7H99zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm-96 9h11v7H94zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm-99 9h11v7H99zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h11v7h-11zm13 0h24v7h-24zm-13 9h16v7h-16zm18 0h19v7h-19zm-5-27h11v7h-11zm0-18h11v7h-11zm13 0h11v7h-11zm-143 9h17v7H73zm0 9h11v7H73zm0 9h19v7H73zm0 9h24v7H73zm0 9h19v7H73zm21 0h16v7H94zm18 0h76v7h-76zM216 187v9h-5v7h16v-16"
            />
          </g>
        </svg>

        <!-- Left & right hands - Have to be done with DIV BG's as we need to animate the BG position for switching sprites -->
        <div class="absolute software-hand software-hand--left"></div>
        <div class="absolute software-hand software-hand--right"></div>
      </div>

      <h1 class="title title--software">Software Development</h1>
    </div>

    <!-- WEBSITE DEVELOPMENT -->

    <div class="grid--cell">
      <div class="animation-wrapper animation-wrapper--website-bg">

        <!-- Desktop screen -->
        <div class="absolute web-hardware web-hardware--desktop">

          <!-- Animated DIV BG for simple scrolling through site GFX -->
          <div class="web-screen web-screen--website-desktop">
            <div class="screen-shine"></div>
          </div>
        </div>

        <!-- Mobile screen -->
        <div class="absolute web-hardware web-hardware--mobile">

          <!-- Animated DIV BG for simple scrolling through site GFX -->
          <div class="web-screen web-screen--website-mobile">
            <div class="screen-shine"></div>
          </div>
        </div>
      </div>

      <h1 class="title title--webdev">Website Development</h1>
    </div>

    <!-- WEBAPP DEVELOPMENT -->

    <div class="grid--cell">
      <div class="animation-wrapper animation-wrapper--webapp-bg">

        <!-- Desktop screen -->
        <div class="absolute web-hardware web-hardware--desktop">

          <!-- Animated DIV BG for simple scrolling through site GFX -->
          <div class="web-screen web-screen--webapp-desktop">

            <!-- Screen shine set to DIV BG because background-size: cover is magical -->
            <div class="screen-shine"></div>
          </div>
        </div>

        <!-- Mobile screen -->
        <div class="absolute web-hardware web-hardware--mobile">

          <!-- Animated DIV BG for simple scrolling through site GFX -->
          <div class="web-screen web-screen--webapp-mobile">

            <!-- Screen shine set to DIV BG because background-size: cover is magical -->
            <div class="screen-shine"></div>
          </div>
        </div>
      </div>

      <h1 class="title title--webapp">Webapp Development</h1>
    </div>

    <!-- WINDOWS DESKTOP APPLICATIONS -->

    <div class="grid--cell">
      <div class="animation-wrapper animation-wrapper--win-app-bg">

        <!-- Monitor and desktop chrome -->
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" class="absolute win-desktop">

          <!-- Desktop colour -->
          <path fill="#FCC000" d="M30 240c-2.76 0-5-2.24-5-5V65c0-2.76 2.24-5 5-5h240c2.76 0 5 2.24 5 5v170c0 2.76-2.24 5-5 5H30z" />

          <!-- Device -->
          <g fill="#333">
            <circle cx="60" cy="245" r="10" />
            <circle cx="240" cy="245" r="10" />
            <path d="M270 65v170H30V65h240m0-10H30c-5.52 0-10 4.48-10 10v170c0 5.52 4.48 10 10 10h240c5.52 0 10-4.48 10-10V65c0-5.52-4.48-10-10-10z" />
          </g>

          <!-- Taskbar -->
          <path fill="#E48109" d="M30 224h240v11H30z" />

          <!-- Taskbar inactive buttons and systray -->
          <path fill="#ED9E48" d="M91 226h40v7H91zm45 0h40v7h-40zm112 1h20v5h-20z" />

          <!-- Desktop inactive shortcuts -->
          <path fill="#F4D387" d="M40 105h20v20H40zm0 30h20v20H40zm0 30h20v20H40z" />

          <g fill="#FFF">

            <!-- Windows button -->
            <path d="M32 226h3v3h-3zm0 4h3v3h-3zm4-4h3v3h-3zM36 230h3v3h-3z" />

            <!-- Desktop wallpaper graphic -->
            <path d="M210 142V85l-62 8.9V142m0 6v48.08l62 8.92v-57m-72-6V94.94l-48 7.2V142m0 6v39.86l48 7.2V148" opacity=".15" />
          </g>
        </svg>

        <!-- App shortcuts -->
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" class="absolute win-desktop">

          <!-- Desktop shortcut -->
          <path fill="#F4D387" d="M40 75h20v20H40z" class="win-desktop--shortcut-icon-01" />

          <!-- Taskbar shortcut button -->
          <path fill="#ED9E48" d="M46 226h40v7H46z" class="win-desktop--shortcut-icon-02" />
        </svg>

        <!-- App window -->
        <div class="win-desktop--window">

          <!-- App chrome -->
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" class="absolute win-desktop win-desktop--app-window">
            <path fill="#E48109" d="M50 72h200v143H50z" />
            <path fill="#FFF" d="M50 91h200v117H50z" />
            <path fill="#E5E5E5" d="M50 91h40v117H50z" />
            <path fill="#CCC" d="M55 106.5h30v4H55zm0 10h30v4H55zm0 10h30v4H55zm0 10h30v4H55zm0 10h30v4H55zm0 10h30v4H55zm0 10h30v4H55zM50 81h200v10H50z" />
            <path fill="#7F4506" d="M52 75h86v4H52z" />
            <path fill="#7F4506" d="M232 73h7v7h-7zm-10 0h7v7h-7z" />

            <!-- Close X button -->
            <path d="M242 73h7v7h-7z" class="win-desktop--app-window--close-button" />

            <!-- Sidebar link -->
            <path fill="#CCC" d="M55 96.5h30v4H55z" class="win-desktop--app-link" />

            <!-- In-app screen -->
            <g fill="#E5E5E5" class="win-desktop-chrome">
              <rect width="40" height="20" x="100" y="100" />
              <rect width="40" height="20" x="150" y="100" />

              <!-- Button 01 -->
              <rect width="40" height="20" x="200" y="100" class="win-desktop--button win-desktop--button-01" />

              <!-- Button 02 -->
              <rect width="40" height="20" x="100" y="130" class="win-desktop--button win-desktop--button-02" />
              <rect width="40" height="20" x="150" y="130" />
              <rect width="40" height="20" x="200" y="130" />

              <rect width="40" height="10" x="100" y="160" />
              <rect width="90" height="10" x="150" y="160" />

              <!-- Ok button-->
              <rect width="40" height="10" x="200" y="180" class="win-desktop--button win-desktop--button-03" />
            </g>
          </svg>

          <!-- Modal window -->
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" class="absolute win-desktop win-desktop-chrome--modal">

            <!-- Modal BG -->
            <path d="M50 81h200v127H50z" opacity=".7" />

            <!-- Modal dialog -->
            <path fill="#FFF" d="M100 114.5h100v70H100z" />
            <path fill="#E5E5E5" d="M110 124h80v6h-80zm0 12h80v6h-80zm0 12h60v6h-60zm5 16h30v10h-30z" />

            <!-- Modal button -->
            <path d="M155 164h30v10h-30z" class="win-desktop--button win-desktop--modal-button" />
          </svg>

          <!-- Tick overlay -->
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" class="absolute win-desktop win-desktop--tick">
            <rect width="200" height="127" x="50" y="81" fill="#FFF" opacity=".75" />
            <circle cx="150" cy="145" r="35" fill="#91D329" />
            <g fill="#FFF">
              <rect width="40" height="10" x="135.3" y="140" transform="rotate(-45 155.307 145.005)" />
              <rect width="25" height="10" x="126.89" y="145.3" transform="rotate(45 139.396 150.303)" />
            </g>
          </svg>
        </div>

        <!-- Mouse cursor -->
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" class="absolute win-desktop win-desktop--cursor">
          <g stroke="#000" stroke-miterlimit="10">
            <path d="M153.7 152.66l-7.2-7v10l2.45-.97 1.56 3.63 2.57-1-1.56-3.7z" opacity=".4" />
            <path fill="#FFF" d="M153.7 149.66l-7.2-7v10l2.45-.97 1.56 3.63 2.57-1-1.56-3.7z" />
          </g>
        </svg>

        <!-- Screen shine -->
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" class="absolute win-desktop">
          <linearGradient id="a" x1="210" x2="21" y1="5" y2="194" gradientUnits="userSpaceOnUse">
            <stop offset="0" stop-color="#FFF" stop-opacity=".5" />
            <stop offset="1" stop-color="#FFF" stop-opacity="0" />
          </linearGradient>
          <linearGradient id="b" x1="272.22" x2="139.69" y1="90.22" y2="222.74" gradientUnits="userSpaceOnUse">
            <stop offset="0" stop-color="#FFF" stop-opacity=".3" />
            <stop offset="1" stop-color="#FFF" stop-opacity="0" />
          </linearGradient>
          <path fill="url(#a)" d="M270 65H30v138h69.68" />
          <path fill="url(#b)" d="M270 111.9V88L129.95 213h23.95" />
        </svg>
      </div>

      <h1 class="title title--win-app">Windows Desktop Applications</h1>
    </div>

    <!-- WINDOWS MOBILE APPLICATIONS -->

    <div class="grid--cell">
      <div class="animation-wrapper animation-wrapper--win-mobile-app-bg">

        <!-- Device BG -->
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" class="absolute win-mobile">
          <path stroke="#000" stroke-width="10" stroke-miterlimit="10" d="M100 50h100v200H100z" stroke-linejoin="round" />
          <path d="M100 50h100v200H100z" />
          <path fill="#333" d="M134.28 143.18l32.53 32.53-5.6 5.7-32.5-32.5zm-8.48 8.48l26.86 26.87-5.65 5.66-26.8-26.9zm11.3-11.3l36.78-36.78 2.83 2.83-36.7 36.8zm5.67 5.64l45.25-45.24 2.83 2.83-45.25 45.2zm5.65 5.67l13.43-13.43 2.83 2.83-13.44 13.43zm5.66 5.65l18.38-18.38 2.83 2.83-18.4 18.38z"
          />
          <path fill="#7F807F" d="M122.13 146.9c.6.6.22.9-.23 1.35l-1.9 1.9-3.2 3.2c-.4.4-1.12-.44-1.22-.78-.1-.33.33-.6.53-.8l1.8-1.8-8.1-8.15-.8 3.3c-.3 1-1.4-.12-1.3-.78 0-.35.2-.76.3-1.1.2-1 .44-1.97.65-2.95.05-.4 1.07-1.6 1.44-1.2.26.2.5.4.7.7l3.3 3.3 5.4 5.4 1.96-2c.27-.3.68.1.88.3.1.1-.1-.1 0 0zm4.1-13.76c2.56 2.55 4.8 6.27 1.73 9.36-3.08 3.1-6.6.6-9.1-1.9-2.53-2.53-4.8-6.27-1.72-9.35 3.1-3.1 6.6-.6 9.1 1.9.82.8-.9-.9 0 0zm-1.35 1.56c-1.6-1.6-4.44-4.4-6.66-2.2-2.15 2.16.42 4.96 2 6.55 1.42 1.4 4 4.1 6.17 2.6 2.9-2 .2-5.2-1.6-6.95zm4-6.68c.62.62.72 1.16.07 1.8-.66.67-1.2.57-1.82-.06-.64-.64-.77-1.17-.1-1.84.67-.67 1.2-.54 1.84.1.18.18-.2-.2 0 0zm5.74 5.75c.63.63.74 1.17.1 1.82-.68.6-1.2.5-1.84-.1-.63-.7-.75-1.2-.1-1.9.67-.7 1.22-.6 1.84.1.2.1-.18-.2 0 0zm6.64-11c2.37 2.36 1.2 5.56-1.1 7.5-.66.55-2.4 1.9-3.33 1.4-.32-.18-.8-.57-.9-.93-.16-.47 1.06-.63 1.35-.74 2.23-.9 5.22-4.1 2.18-6.04-2.05-1.3-4 .88-5.35 2.22-.4.47-1.6-.64-1.1-1.1.2-.34.7-.7 1-.95.9-.88 1.5-2.13 1-3.36-.4-1.24-1.8-2.1-3.1-1.52-1.2.54-1.8 1.8-2.1 3-.05.25-.1 1.2-.53 1.04-.47-.2-.97-.8-.97-1.3-.05-2.3 2.6-5 4.8-5.1 1.46-.1 2.8 1 3.46 2.2.63 1.2.4 2.4-.2 3.5 1.5-1.2 3.64-1.4 5.05 0 .5.5-.32-.36 0 0zm6.72-11.37c2.55 2.55 4.8 6.27 1.72 9.36-3.08 3.08-6.6.6-9.1-1.9-2.53-2.54-4.8-6.28-1.72-9.35 3.1-3 6.6-.6 9.1 1.9zm-1.36 1.55c-1.6-1.6-4.44-4.4-6.65-2.2-2.16 2.16.42 4.97 2 6.56 1.4 1.4 4 4.1 6.16 2.7 2.93-2 .23-5.2-1.5-6.9-.54-.5.4.4 0 0z"
          />
        </svg>

        <!-- Home screen -->
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" class="absolute win-mobile win-mobile--home">

          <!-- BG -->
          <path d="M100 50h100v200H100z" class="absolute win-mobile win-mobile--home-bg" />

          <!-- 1st row -->
          <g class="absolute win-mobile win-mobile--home-row-01">
            <path fill="#0056A7" d="M100 61h32v32h-32zm0 34h66v32h-66z" />
            <path fill="#7A3293" d="M100 129h32v32h-32z" />
            <path fill="#399743" d="M100 163h15v15h-15zm17 0h15v15h-15zm-17 17h15v15h-15zm17 0h15v15h-15z" />
            <path fill="#0056A7" d="M100 197h66v32h-66zm0 34h15v15h-15zm17 0h15v15h-15z" />
          </g>

          <!-- 2nd row -->
          <g class="absolute win-mobile win-mobile--home-row-02">
            <path fill="#7A3293" d="M134 61h32v32h-32z" />
            <path d="M134 129h32v32h-32z" class="win-mobile--home-shortcut" />
            <path fill="#0056A7" d="M134 163h32v32h-32zm0 68h15v15h-15zm17 0h15v15h-15z" />
          </g>

          <!-- 3rd row -->
          <g class="absolute win-mobile win-mobile--home-row-03">
            <path fill="#7A3293" d="M168 61h32v32h-32z" />
            <path fill="#F57929" d="M168 95h32v32h-32z" />
            <path fill="#0056A7" d="M168 163h32v32h-32zm0 34h32v32h-32zm0 34h32v15h-32z" />
            <path fill="#399743" d="M168 129h15v15h-15zm17 0h15v15h-15zm-17 17h15v15h-15zm17 0h15v15h-15z" />
          </g>
        </svg>

        <!-- Mobile app -->
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" class="absolute win-mobile win-mobile--app-01">
          <!-- BG -->
          <path d="M100 50h100v200H100z" class="win-mobile--app-01--bg" />

          <!-- App screen 01 icons -->
          <g class="absolute win-mobile win-mobile--app-01-icons">
            <path d="M108 94h22v22h-22z" class="win-mobile--app-01--icons--shortcut-01" />
            <path d="M108 184h22v22h-22z" class="win-mobile--app-01--icons--shortcut-02" />

            <g fill="#fff" opacity="0.2">
              <path d="M108 64h22v22h-22z" />
              <path d="M138 64h54v7h-54z" />
              <path d="M138 75h54v4h-54zM138 82h54v4h-54z" />

              <path d="M138 94h54v7h-54z" />
              <path d="M138 105h54v4h-54zM138 112h54v4h-54z" />

              <path d="M108 124h22v22h-22z" />
              <path d="M138 124h54v7h-54z" />
              <path d="M138 135h54v4h-54zM138 142h54v4h-54z" />

              <path d="M108 154h22v22h-22z" />
              <path d="M138 154h54v7h-54z" />
              <path d="M138 165h54v4h-54zM138 172h54v4h-54z" />

              <path d="M138 184h54v7h-54z" />
              <path d="M138 195h54v4h-54zM138 202h54v4h-54z" />

              <path d="M108 214h22v22h-22z" />
              <path d="M138 214h54v7h-54z" />
              <path d="M138 225h54v4h-54z" />
            </g>
          </g>
        </svg>

        <!-- App screen 02 icons -->
        <div class="absolute win-mobile win-mobile--app-02">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
            <rect width="100" height="200" x="100" y="50" fill="#000000" />
            <g fill="#4D4D4D">
              <rect width="22" height="22" x="139" y="64" />
              <rect width="22" height="22" x="170" y="64" class="win-mobile--app-02--button_03" />
              <rect width="22" height="22" x="108" y="64" />
              <rect width="22" height="22" x="139" y="94" class="win-mobile--app-02--button_04" />
              <rect width="22" height="22" x="170" y="94" />
              <rect width="22" height="22" x="108" y="94" class="win-mobile--app-02--button_01" />
              <rect width="22" height="22" x="139" y="124" />
              <rect width="22" height="22" x="170" y="124" />
              <rect width="22" height="22" x="108" y="124" />
              <rect width="22" height="22" x="139" y="154" />
              <rect width="22" height="22" x="170" y="154" />
              <rect width="22" height="22" x="108" y="154" class="win-mobile--app-02--button_05" />
              <rect width="22" height="22" x="139" y="184" class="win-mobile--app-02--button_02" />
              <rect width="22" height="22" x="170" y="184" class="win-mobile--app-02--button_06" />
              <rect width="22" height="22" x="108" y="184" />
            </g>
          </svg>
        </div>

        <!-- Device decoration -->
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" class="absolute win-mobile">
          <path d="M100 50h100v11H100zm0 182h100v18H100z" />
          <rect width="8" height="5" x="104" y="53" fill="#333" />
          <rect width="8" height="5" x="188" y="53" fill="#333" />
          <!-- Back button -->
          <rect width="8" height="8" x="104" y="237" class="win-mobile--home-back" />
          <rect width="8" height="8" x="188" y="237" fill="#333" />
          <path fill="#FFF" d="M154 241v-4l-4 .74V241m0 1v3.26l4 .74v-4m-5-1v-3.17l-3 .6V241m0 1v2.57l3 .6V242" />
        </svg>

        <!-- Screen shine -->
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" class="absolute win-mobile">
          <linearGradient id="a" x1="203.29" x2="97.8" y1="76.29" y2="181.78" gradientUnits="userSpaceOnUse">
            <stop offset="0" stop-color="#FFF" stop-opacity=".3" />
            <stop offset="1" stop-color="#FFF" stop-opacity="0" />
          </linearGradient>
          <linearGradient id="b" x1="175" x2="84.49" y1="25" y2="115.51" gradientUnits="userSpaceOnUse">
            <stop offset="0" stop-color="#FFF" stop-opacity=".5" />
            <stop offset="1" stop-color="#FFF" stop-opacity="0" />
          </linearGradient>
          <path fill="url(#a)" d="M100 162.26v21.72L200 96.9V73" />
          <path fill="url(#b)" d="M100 50v81.02L200 50" />
        </svg>
      </div>

      <h1 class="title title--win-mobile-app">Windows Mobile Applications</h1>
    </div>
  </div>
</div>

// ========
// GRID ===
// ========

.wrapper {
  display: flex;
  width: 100vw;
  height: 100vh;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
	width: 100%;
  margin: auto;
  text-align: center;
}

  .grid--cell {
    width: 20%;
    min-width: 140px;
    max-width: 280px;
    text-align: center;
    padding: 10px;
    padding-bottom: 20px;
  }

// =====================
// MODULAR & UTILITY ===
// =====================

.animation-wrapper {
  position: relative;
  transform: translateZ(0);
  overflow: hidden;
  border-radius: 5%;
  width: 100%;
  padding-bottom: 100%;
}

  .animation-wrapper--software-bg {
    background: linear-gradient(-135deg, saturate(#ff3231, 35), saturate(darken(#ee3231, 20), 35));
  }

  .animation-wrapper--website-bg {
    background: linear-gradient(-135deg, #bcd74c, saturate(darken(#bcd74c, 26), 35));
  }

  .animation-wrapper--webapp-bg {
    background: linear-gradient(-135deg, #f68e51, saturate(darken(#f68e51, 18), 12));
  }

  .animation-wrapper--win-app-bg {
    background: linear-gradient(-135deg, #fcc000, saturate(darken(#EE9B00, 4), 25));
  }

  .animation-wrapper--win-mobile-app-bg {
    background: linear-gradient(-135deg, #01bcf3, saturate(darken(#01bcf3, 20), 25));
  }

.title {
  display: inline-block;
  font-size: 75%;
  font-weight: bold;
  color: #fff;
  padding: 6px 9px;
  margin-top: 2px;
  border-radius: 5px;
}

  .title--software {
    background-color: #ff3231;  
  }

  .title--webdev {
    background-color: saturate(darken(#bcd74c, 26), 35);   
  }

  .title--webapp {
    background-color: saturate(darken(#f68e51, 18), 12);    
  }

  .title--win-app {
    background-color: (darken(#fcc000, 7));
  }

  .title--win-mobile-app {
    background-color: (darken(#01bcf3, 10));
  }

.screen-shine {
  position: relative;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  text-align: right;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/350480/animation_modular_screen_shine.svg");
  background-size: cover;
  background-position: top right;
  opacity: 0.3;
}

.absolute {
  position: absolute;
  top: 0;
  width: 100%;
}

// ========================
// SOFTWARE DEVELOPMENT ===
// ========================

.software-monitor {
  left: 0;
  top: 6%;
  height: 100%;
  z-index: 6;
}

  .software-screen--bg {
    left: 0;
    height: 100%;
  }

  @keyframes software-screen--fg-mask {
    0% {height: 0%;}
    65% {height: 35%;}
    85% {height: 35%;}
    100% {height: 0%;}
  }

  .software-screen--fg-mask {
    vertical-align: top;
    left: 0%;
    margin-top: 10%;
    height: 30%;
    overflow: hidden;
    animation: software-screen--fg-mask 3s linear infinite;
  }

    @keyframes software-screen--fg {
      0% {transform: translate(0,-10%);}
      69% {transform: translate(0,-10%);}
      90% {transform: translate(0,-50%);}
      100% {transform: translate(0,-50%);}
    }

    .software-screen--fg {
      left: 0;
      animation: software-screen--fg 3s linear infinite;
    }

  .software-screen--shine {
    right: 0;
    height: 100%;
    opacity: 0.6;
    z-index: 10;
  }

.software-keyboard {
  left: 0;
  top: 7%;
  height: 100%;
}

.software-hand {
  left: 0;
  top: 7%;
  height: 100%;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/350480/animation_software_development_hand.svg");
  background-size: 600% 100%;
  background-position: top left;
}

  @keyframes software-hand--left {
    0% {background-position: -300% 0;}
    5% {background-position: -200% 0;}
    10% {background-position: -100% 0; transform: translate(0,0%) scale(-1,1);}
    15% {background-position: 0 0; transform: translate(0,5%) scale(-1,1);}
    20% {background-position: -100% 0;}
    25% {background-position: -200% 0;}
    30% {background-position: -400% 0; transform: translate(0,5%) scale(-1,1);}
    35% {background-position: -100% 0; transform: translate(0,0) scale(-1,1);}
    40% {background-position: 0% 0;}
    45% {background-position: -200% 0; transform: translate(0,0) scale(-1,1);}
    50% {background-position: 0% 0; transform: translate(0,5%) scale(-1,1);}
    55% {background-position: -100% 0;}
    60% {background-position: -200% 0; transform: translate(0,5%) scale(-1,1);}
    65% {background-position: 0 0; transform: translate(-2%,7%) scale(-1,1);}
    95% {background-position: 0 0; transform: translate(0,2%) scale(-1,1);}
  }

  .software-hand--left {
    transform: scale(-1,1);
    animation: software-hand--left 3s steps(1, end) infinite;
  }

  @keyframes software-hand--right {
    0% {background-position: 0 0;}
    2% {background-position: -100% 0;}
    4% {background-position: 0 0;}
    6% {background-position: -500% 0; transform: translate(0,0);}
    8% {background-position: 0 0; transform: translate(0,5%);}
    10% {background-position: -100% 0;}
    12% {background-position: -0 0;}
    14% {background-position: -200% 0;}
    16% {background-position: 0 0;}
    18% {background-position: -200% 0;}
    20% {background-position: -100% 0; transform: translate(0,5%);}
    22% {background-position: -200% 0; transform: translate(0,0);}
    24% {background-position: 0 0;}
    26% {background-position: -500% 0;}
    28% {background-position: 0 0;}
    30% {background-position: -200% 0;}
    32.5% {background-position: -400% 0;}
    50% {background-position: 0 0;}
    52% {background-position: -200% 0;}
    54% {background-position: -500% 0; transform: translate(0,0);}
    56% {background-position: -100% 0; transform: translate(0,5%);}
    58% {background-position: 0 0;}
    60% {background-position: -200% 0;}
    62% {background-position: -100% 0;}
    64% {background-position: 0 0;}
    66% {background-position: -500% 0;}
    68% {background-position: -200% 0;}
    70% {background-position: 0% 0; transform: translate(0,5%);}
    72% {background-position: -200% 0; transform: translate(0,0);}
    74% {background-position: -300% 0;}
    76% {background-position: -500% 0;}
    78% {background-position: 0 0;}
    80% {background-position: -500% 0;}
    82.5% {background-position: -400% 0;}
    100% {background-position: -400% 0;}
  }

  .software-hand--right {
    right: 0;
    animation: software-hand--right 6s steps(1, end) infinite;
  }

// =================================
// WEBSITES & WEBAPP DEVELOPMENT ===
// =================================

.web-hardware {
  margin: 0 auto;
  border-radius: 6px;    
}

.web-hardware--desktop {
  width: 70%;
  height: 55%;
  top: 14%;
  left: 8%;
  padding: 6% 3%;
  background-color: #262626;
}

.web-hardware--mobile {
  width: 25%;
  height: 45%;
  top: 30%;
  right: 8%;
  padding: 5% 2%;
  background-color: #444;
}

  @keyframes web-scroller-anim {
    0% {background-position: 0 0;}
    35% {background-position: 0 99.5%;}
    36% {background-position: 0 100%;}
    50% {background-position: 0 100%;}
    85% {background-position: 0 0.5%;}
    86% {background-position: 0 0;}
    100% {background-position: 0 0;}
  }

.web-screen {
  width: 100%;
  height: 100%;
  background-color: #000;
  border-radius: 2px;
  animation: web-scroller-anim 9s infinite;
}

  .web-screen--website-desktop {
    background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/350480/animation_website_development_desktop.svg");
    background-size: 100%;
  }

  .web-screen--website-mobile {
    background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/350480/animation_website_development_mobile.svg");
    background-size: 100%;
  }

  .web-screen--webapp-desktop {
    background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/350480/animation_webapp_development_desktop.svg");
    background-size: 100%;
  }

  .web-screen--webapp-mobile {
    background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/350480/animation_webapp_development_mobile.svg");
    background-size: 100%;
  }

// ================================
// WINDOWS DESKTOP APPLICATIONS ===
// ================================

.win-desktop {
  top: -3%;
  left: 0;
  height: 100%;
}

  // Desktop shortcut icon & start bar

  @keyframes shortcut-icon-01 {
    10% {fill: #F4D387;}
    11% {fill: white;}
    12% {fill: white;}
    13% {fill: #F4D387;}
  }

  .win-desktop--shortcut-icon-01 {
    animation: shortcut-icon-01 10s linear infinite;
    fill: #F4D387;
  }

  @keyframes shortcut-icon-02 {
    16% {fill: #ED9E48;}
    18% {fill: white;}
    86% {fill: white;}
    87% {fill: #ED9E48;}
  }

  .win-desktop--shortcut-icon-02 {
    animation: shortcut-icon-02 10s linear infinite;
    fill: #ED9E48;
  }

  // App window

  @keyframes app-window {
    16% {opacity: 0;}
    18% {opacity: 1;}
    86% {opacity: 1;}
    87% {opacity: 0;}
  }

  .win-desktop--window {
    animation: app-window 10s linear infinite;
    opacity: 0;            
  }

    @keyframes win-desktop--app-window--close-button {
      84% {fill: #aa0000;}
      84.2% {fill: #ff0000; }
      92% {fill: #aa0000; }
    }

    .win-desktop--app-window--close-button {
      fill: #aa0000;
      animation: win-desktop--app-window--close-button 10s linear infinite;
    }

    // In-app sidebar link

    @keyframes win-desktop--app-link {
      24% { fill: #ccc;}
      25% { fill: #888;}
      73% {fill: #888;}
      74% { fill: #ccc;}
    }

    .win-desktop--app-link {
      fill: #ccc;
      animation: win-desktop--app-link 10s linear infinite;
    }

    // In-app panel

    @keyframes app-chrome {
      28% {opacity: 0;}
      30% {opacity: 1;}
      74% {opacity: 1;}
      75% {opacity: 0;}
    }

    .win-desktop-chrome {
      animation: app-chrome 10s linear infinite;
      opacity: 0;
    }

    // In-app buttons

    .win-desktop--button {
      fill: #E5E5E5;
    }

      // In-app button 01

      @keyframes win-desktop--button-press {
        36% {fill: #E5E5E5;}
        38% {fill: #91d329;}
        86% {fill: #91d329;}
      }

      .win-desktop--button-01 {
        animation: win-desktop--button-press 10s linear infinite;
      }

      // In-app button 02

      .win-desktop--button-02 {
        animation: win-desktop--button-press 10s 0.65s linear infinite;
      }

      // In-app button 03

      .win-desktop--button-03 {
        animation:  win-desktop--button-press 10s 1.35s linear infinite;
      }

    // Modal

    @keyframes modal-reveal {
      52% {opacity: 0;}
      56% {opacity: 1;}
      62% {opacity: 1;}
      64% {opacity: 0;}
    }

    .win-desktop-chrome--modal {
      animation: modal-reveal 10s linear infinite;
      opacity: 0;
    }

    // Modal button

    .win-desktop--modal-button {
      animation:  button-press 10s 2.45s linear infinite;
    }

    // Tick overlay

    @keyframes win-desktop--tick {
      62% {opacity: 0;}
      64% {opacity: 1;}
      66% {opacity: 1;}
      68% {opacity: 0;}
    }

    .win-desktop--tick {
      opacity: 0;
      animation: win-desktop--tick 10s linear infinite;
    }

    // MOUSE CURSOR

    @keyframes win-desktop--cursor {
      // idle position
      0% {transform: translate(11%, 4%)}

      // desktop shortcut open            
      8% {transform: translate(-32%, -19%)}
      11% {transform: translate(-32%, -19%)}

      // in-app link open            
      24% {transform: translate(-26%, -15%)}
      26% {transform: translate(-26%, -15%)}

      // in-app button 01 on            
      34% {transform: translate(24%, -12%)}
      36% {transform: translate(24%, -12%)}

      // in-app button 02 on            
      42% {transform: translate(-10%, 1%)}
      43% {transform: translate(-10%, 1%)}

      // in-app button 03 submit            
      49% {transform: translate(25%, 15%)}
      52% {transform: translate(25%, 15%)}

      // modal button ok            
      60% {transform: translate(8%, 9%)}
      65% {transform: translate(8%, 9%)}

      // in-app link closer            
      72% {transform: translate(-26%, -15%)}
      75% {transform: translate(-26%, -15%)}

      // app close
      83% {transform: translate(33%, -22%)}
      85% {transform: translate(33%, -22%)}

      // return to idle position
      92% {transform: translate(11%, 4%)}
    }

    .win-desktop--cursor {
      transform: translate(11%, 4%);
      animation: win-desktop--cursor 10s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
    }

// ===============================
// WINDOWS MOBILE APPLICATIONS ===
// ===============================

.win-mobile {
  left: 0;
  height: 100%;
}

  @keyframes win-mobile--home-back {
    61% {fill: #333;}
    61.2% {fill: #fff;}
    63% {fill: #333;}
    86% {fill: #333;}
    86.2% {fill: #fff;}
    88% {fill: #333;}
    90% {fill: #333;}
    90.2% {fill: #fff;}
    91.9% {fill: #333;}
    92% {fill: #333;}
    92.2% {fill: #fff;}
    94% {fill: #333;}
  }

  .win-mobile--home-back {
    fill: #333;
    animation: win-mobile--home-back 10s linear infinite;
  }

  .win-mobile--home {
    opacity: 1;
  }

    @keyframes win-mobile--home-bg {
      8% {opacity: 0;}
      16% {opacity: 1;}
      95% {opacity: 1;}
      99% {opacity: 0;}
    }

    .win-mobile--home-bg {
      opacity: 0;
      animation: win-mobile--home-bg 10s cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite;
    }

    @keyframes win-mobile--home-row-01 {
      9% {opacity: 0; transform: scale(0,1)}
      11% {opacity: 1; transform: scale(1,1)}
      94% {opacity: 1; transform: scale(1,1)}
      97% {opacity: 0; transform: scale(0,1)}
    }

    .win-mobile--home-row-01 {
      transform: scale(0,1);
      transform-origin: 33% 0;
      opacity: 0;
      animation: win-mobile--home-row-01 10s cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite;
    }

    @keyframes win-mobile--home-row-02 {
      10% {opacity: 0; transform: scale(0,1)}
      12% {opacity: 1; transform: scale(1,1)}
      95% {opacity: 1; transform: scale(1,1)}
      98% {opacity: 0; transform: scale(0,1)}
    }

    .win-mobile--home-row-02 {
      transform: scale(0,1);
      transform-origin: 48% 0;
      opacity: 0;
      animation: win-mobile--home-row-02 10s cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite;
    }

    @keyframes win-mobile--home-row-03 {
      11% {opacity: 0; transform: scale(0,1)}
      13% {opacity: 1; transform: scale(1,1)}
      96% {opacity: 1; transform: scale(1,1)}
      98% {opacity: 0; transform: scale(0,1)}
    }

    .win-mobile--home-row-03 {
      transform: scale(0,1);
      transform-origin: 60% 0;
      opacity: 0;
      animation: win-mobile--home-row-03 10s cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite;
    }

  @keyframes win-mobile--home-shortcut {
    17% {fill: #D60000;}
    17.2% {fill: #fff;}
    25% {fill: #D60000;}
  }

  .win-mobile--home-shortcut {
    fill: #D60000;
    animation: win-mobile--home-shortcut 10s linear infinite;
  }

  @keyframes win-mobile--app-01 {
    23% {opacity: 0; transform: scale(0.5,0.5);}
    26% {opacity: 1; transform: scale(1,1);}
    90% {opacity: 1; transform: scale(1,1);}
    94% {opacity: 0; transform: scale(0.5,0.5);}
  }

  .win-mobile--app-01 {
    transform: scale(0.5,0.5);
    opacity: 0;
    animation: win-mobile--app-01 10s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
  }

    @keyframes win-mobile--app-01--bg {
      26% {fill: red;}
      34% {fill: #330000;}
      100% {fill: #330000;}
    }

    .win-mobile--app-01--bg {
      fill: red;
      animation: win-mobile--app-01--bg 10s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
    }

    @keyframes win-mobile--app-01-icons {
      30% {opacity: 0;}
      32% {opacity: 1;}
      100% {opacity: 1;}
    }

    .win-mobile--app-01-icons {
      opacity: 0;
      animation: win-mobile--app-01-icons 10s linear infinite;    
    }

      @keyframes win-mobile--app-01--shortcut-01 {
        36% {opacity: 0.2}
        36.2% {opacity: 1}
        44% {opacity: 0.2}
      }

      .win-mobile--app-01--icons--shortcut-01 {
        opacity: 0.2;
        fill: #fff;
        animation: win-mobile--app-01--shortcut-01 10s linear infinite;
      }

      .win-mobile--app-01--icons--shortcut-02 {
        opacity: 0.2;
        fill: #fff;
        animation: win-mobile--app-01--shortcut-01 10s 3.25s linear infinite;
      }

  @keyframes win-mobile--app-02 {
    42% {opacity: 0;transform: scale(0.9,0.9);}
    44% {opacity: 1;transform: scale(1,1);}
    62% {opacity: 1;transform: scale(1,1);}
    64% {opacity: 0;transform: scale(0.9,0.9);}
    72% {opacity: 0;transform: scale(0.9,0.9);}
    74% {opacity: 1;transform: scale(1,1);}
    88% {opacity: 1;transform: scale(1,1);}
    90% {opacity: 0;transform: scale(0.9,0.9);}
    100% {opacity: 0;transform: scale(0.9,0.9);}
  }

  .win-mobile--app-02 {
    opacity: 0;
    transform: scale(0.9,0.9);
    animation: win-mobile--app-02 10s linear infinite;
  }

    @keyframes win-mobile--app-02--button {
      51% {fill: #4d4d4d;}
      51.2% {fill: #bbb;}
      65% {fill: #bbb;}
      65.2% {fill: #4d4d4d;}
    }

    .win-mobile--app-02--button_01 {
      fill: #4d4d4d;
      animation: win-mobile--app-02--button 10s linear infinite;
    }

    .win-mobile--app-02--button_02 {
      fill: #4d4d4d;
      animation: win-mobile--app-02--button 10s 0.2s linear infinite;
    }

    .win-mobile--app-02--button_03 {
      fill: #4d4d4d;
      animation: win-mobile--app-02--button 10s 0.4s linear infinite;
    }

    .win-mobile--app-02--button_04 {
      fill: #4d4d4d;
      animation: win-mobile--app-02--button 10s 2.9s linear infinite;
    }

    .win-mobile--app-02--button_05 {
      fill: #4d4d4d;
      animation: win-mobile--app-02--button 10s 3.04s linear infinite;
    }

    .win-mobile--app-02--button_06 {
      fill: #4d4d4d;
      animation: win-mobile--app-02--button 10s 3.19s linear infinite;
    }