cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <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 {
  max-width: 960px;
	width: 100%;
  margin: auto;
  text-align: center;
}

  .grid--cell {
    width: 24%;
    text-align: center;
    vertical-align: top;
    display: inline-block;
    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: 15px;
  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;
    }
            
          
!
999px
Loading ..................

Console