Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

Babel includes JSX processing.

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.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Auto Save

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML 

              
                  <div class="browser-support">
    <p>Your browser is old, and it doesn't support CSS3.</p>
    <p>Please try downloading one of the more modern browsers.</p>
  
    <div class="browser-logos">
      <a href="https://www.google.com/chrome/browser/desktop/" target="_blank">
        <img src="http://giovanni.io/coke/graphics/logos/chrome.svg" alt="Chrome Browser">
        <span class="text">Chrome</span>
      </a>
      <a href="https://www.mozilla.org/en-US/firefox/new/" target="_blank">
        <img src="http://giovanni.io/coke/graphics/logos/firefox.svg" alt="Firefox Browser">
        <span class="text">Firefox</span>
      </a>
      <a href="https://support.apple.com/en-us/HT204416" target="_blank">
        <img src="http://giovanni.io/coke/graphics/logos/safari.svg" alt="Safari Browser">
        <span class="text">Safari</span>
      </a>

    </div>
  </div>

  <div class="machine-container">
    
    <div class="machine-overlay ">
      <div class="machine-overlay-container">
        
        <!-- Coke Pop up -->
        <div class="machine-overlay-inner machine-overlay-coke">
          <div class="machine-overlay-bottle">
            <svg xmlns="http://www.w3.org/2000/svg" width="314.9" height="988.3" viewBox="577.1 -405.6 314.9 988.3" enable-background="new 577.1 -405.6 314.9 988.3">
              <!-- Defs -->
              <defs>
                <!-- Linear Gradient - With SMIL Animation of Filling the bottle -->
                <linearGradient id="cokeGradient"
                                x1="0%"
                                y1="101%"
                                x2="0%"
                                y2="0%">

                  <stop offset="0%"
                        stop-color="#752024" />

                  <stop offset="1%"
                        stop-color="rgba(0,0,0, 0)" />

                  <animate  id="cokeFillAnimation"
                            begin="indefinite"
                            attributeName="y1"
                            from="0%"
                            to="100%"
                            dur="4s"
                             /> 

                </linearGradient>
              </defs>
              <path id="" class="bottle-fill" fill="url(#cokeGradient)" d="M877.2 504.7v13.4c0 12.3-5.6 37.4-19.5 43.5-19.5 9.5-39.6 10.6-59.1 12.8-1.7 0-6.7.5-14 .5h-52.4c-10.6 0-20.1 0-28.4-.5h-7.8c-5 0-9.5 0-13.9-.6h-4.5c-6.7 0-10.6-.6-12.3-.6-19-2.8-39.6-4.5-58.6-13.9-13.9-6.7-19-31.8-19-44.1v-13.4l2.2-19.5c3.3-25.7 17.8-52.4 20.6-78.7.6-5.6 1.7-12.3 2.8-17.8l.6-53.5c-.6-5-.6-9.5-.6-12.8 0-3.4-.6-6.7-.6-8.9v-.6c0-6.7-.6-11.2-.6-11.7 0-1.1-3.9-33.5-5.6-49.6-2.8-22.9-7.8-59.1-11.7-82.5l7.8-165.7v-2.2c2.2-8.9-1.7-17.8 3.4-27.3v-1.1c-2.2-3.3 2.2-11.7 2.2-15.1 0-1.7 6.7-15.1 8.4-22.3 9.5-36.8 29-73.6 40.2-111 .5 0 1.1 0 1.1-.5 36.3-10 66.9-1.7 154.5 0h6.7c10.6 36.8 24.6 73.6 34.6 111 1.1 7.2 8.4 20.6 8.4 22.3 0 3.4 5 10 2.2 13.4l-.6 1.7c5 8.9 1.1 19.5 3.3 29v2.2l8.9 168.5c-3.9 23.4-10 59.7-13.4 82-2.2 16.2-6.7 48.5-6.7 49.6 0 1.1 0 5-.6 11.7v.6c0 2.8-.6 5.6-.6 8.9 0 2.8-.6 6.7-.6 11.2v1.1l-.5 54.1c1.1 5.6 1.7 12.3 2.2 17.8 2.2 25.7 16.2 53 19 78.7l2.5 19.9z"/><path fill="#C5232C" d="M679.2-282.9h117.1v-33.5l5.6-16.7-5.6-16.7-5.6-16.7 5.6-11.2v-16.7l-11.2-5.6h-100.3l-11.2 11.2v11.2l5.6 11.2-5.6 11.2v11.2l-5.6 11.2 5.6 11.2v11.2l5.6 27.5z"/><path fill="#fff" d="M869.4-7.3c2.8-4.5 2.8-8.4 2.8-11.7 0-2.2-1.1-15.6-2.8-23.4-5.6-21.2-13.4-42.4-20.6-62.5-5-14.5-10.6-29.6-15.1-44.6-7.3-21.2-17.3-53-24.5-80.3v-.6c-1.7-4.5-2.8-9.5-3.3-14.5l-1.7-10-1.7-18.4-.6-45.2c1.1-1.7 1.7-2.8 2.8-3.9 2.2-2.8 4.5-6.7 4.5-12.8s-3.9-15.1-7.8-23.4c-1.7-2.2-3.9-7.3-3.9-7.8 0-2.2.6-2.8 2.2-5 2.2-2.2 5-5.6 5-11.7 0-19-16.7-20.6-29.6-21.8-2.2 0-4.5-.6-6.1-.6h-67.5c-2.2 0-4.5.6-6.1.6-13.4 1.1-29.6 2.8-29.6 21.8 0 6.1 2.8 9.5 5 11.7 1.7 1.7 2.2 2.8 2.2 4.5 0 1.1-2.2 6.1-3.9 9.5-3.3 7.8-7.8 16.7-7.8 23.4 0 6.1 2.8 9.5 4.5 12.8 1.1 1.1 1.7 2.2 2.8 3.9l-.6 44.6c-.6 6.7-1.1 12.8-1.7 19l-1.7 10c-.6 5-1.7 10-3.3 14.5v.6c-7.3 27.3-17.3 58.6-24.5 80.3-4.5 15.1-10 30.1-15.1 44.6-7.3 20.6-14.5 41.8-20.6 63-1.1 7.3-2.8 20.1-2.8 22.9 0 3.3 0 7.3 2.8 11.7-1.7 2.8-2.8 5-3.9 7.8h12.3l2.8-4.5c1.7-2.2 1.7-5.6-.6-7.8-2.8-2.8-2.8-3.3-2.8-7.3 0-1.1.6-5.6 1.1-10.6 0-2.2.6-4.5 1.1-6.7 0-1.1.6-2.2.6-2.8 5.6-20.6 13.4-41.8 20.6-61.9 5-14.5 10.6-30.1 15.6-45.2 3.3-9.5 6.7-21.2 10.6-33.5 5-15.6 9.5-31.8 13.9-47.4 2.2-5.6 2.8-11.2 3.9-16.7.6-3.3 1.1-6.1 1.7-8.9v-.6c.6-6.1 1.1-12.8 2.2-20.1l.6-46.3c0-1.1 0-1.7-.6-2.8-1.1-2.8-2.8-5-3.9-6.7-1.7-2.8-2.8-3.9-2.8-6.1 0-3.9 3.9-12.8 6.7-18.4 3.3-7.3 4.5-10.6 4.5-13.4 0-6.7-3.3-10-5-12.3-1.7-1.7-2.2-2.2-2.2-3.9 0-7.8 3.9-9.5 19.5-10.6 2.2 0 4.5-.6 6.1-.6h65.3c2.2 0 4.5.6 6.1.6 15.6 1.1 19.5 2.8 19.5 10.6 0 1.7-.6 2.2-2.2 3.9-2.2 2.2-5 5.6-5 12.3 0 2.8 1.7 6.1 4.5 13.4 2.8 6.1 6.7 15.1 6.7 18.4 0 2.2-.6 3.3-2.8 6.1-1.1 1.7-2.8 3.9-3.9 6.7-.6.6-.6 1.7-.6 2.8l.6 46.9c.6 6.7 1.1 13.4 2.2 19.5v.6l1.7 8.9c.6 5.6 1.7 11.2 3.9 16.7 3.9 15.6 8.9 31.8 13.9 47.4 3.9 12.3 7.8 23.4 10.6 32.9 5 15.1 10 30.1 15.6 45.2 7.3 20.6 14.5 41.3 20.1 61.4l.6 3.3 1.1 6.7c.6 5 1.1 9.5 1.1 10.6 0 3.9 0 5-2.8 7.3-3.3 1.7-3.3 5-1.7 7.3 1.1 1.7 2.2 2.8 2.8 4.5h12.3c-.5-2.4-1.6-5.1-3.3-7.9zm16.2 515.3l-2.2-18.4c-1.7-12.3-6.1-24.5-10-36.8-4.5-12.3-8.4-25.1-10-36.8v-1.1c-.6-5-1.1-10.6-2.2-15.6v-49.6l2.2-32.3c0-2.2 3.3-25.1 6.1-46.3 3.3-22.9 9.5-59.7 12.8-81.4 1.7-9.5 2.2-13.4 2.8-15.6h-11.2c-.6 2.8-1.1 8.4-2.2 13.9-3.9 22.3-10 59.1-13.4 82-3.9 28.4-5 39.6-5.6 44.1v3.3c0 .6 0 2.8-.6 6.1 0 2.8-.6 6.7-.6 11.2v1.7c-.6 3.9-.6 8.4-1.1 13.4v51.9c1.1 4.5 1.7 10 2.2 15.1v1.1c1.1 13.4 6.1 26.2 10 39 3.9 11.7 7.8 23.4 9.5 34.6l1.7 17.8v12.3c0 11.7-5.6 31.8-16.2 36.3-15.6 7.3-32.3 9.5-48.5 11.2l-8.9 1.1c-1.1 0-4.5.6-10.6.6h-5c-11.2 0-28.4.6-50.8.6h-57.4c-5 0-8.4 0-9.5-.6l-8.9-1.1c-16.2-1.7-32.9-3.9-48.5-11.2-10-4.5-15.6-24-15.6-36.3v-12.8l1.7-17.8c1.7-11.2 5.6-22.9 9.5-34.6 4.5-12.8 8.9-26.2 10-39v-2c.6-5 1.1-10 2.2-15.1v-52.4c-.6-4.5-.6-8.9-1.1-12.8-.6-5-.6-9.5-.6-12.3 0-3.3-.6-5.6-.6-6.1v-3.3c-.6-4.5-1.7-15.6-5.6-44.1-3.3-22.9-9.5-59.7-13.4-82-1.1-5.6-1.7-11.2-2.2-13.9h-11.2c.6 2.2 1.1 6.1 2.8 15.6 3.9 21.8 10 58.6 12.8 81.4 3.3 26.2 5.6 44.6 6.1 45.7 0 2.2.6 15.1 2.2 32.3v50.2c-1.1 5-1.7 10.6-2.2 15.6v1.7c-1.1 11.7-5.6 24.5-10 36.8-3.9 12.3-8.4 24.5-10 36.8l-2.2 18.4v13.5c0 9.5 3.9 38.5 22.3 46.3 17.3 8.4 34.6 10 51.9 12.3l8.4 1.1c6.1 1.1 57.4 1.1 67.5 1.1s61.4 0 67.5-1.1c2.8-.6 5.6-.6 8.9-1.1 17.3-2.2 34.6-3.9 51.9-12.3 18.4-7.8 22.3-36.8 22.3-46.3v-12.8c2.8-.6 2.8-1.2 2.8-1.2z"/><path fill="#C5232C" d="M590-9.6s-18.4 65.3-11.2 184.1c0 0 163.4 46.9 312.3 0 0 0 5.6-138.3-11.2-184.1.1 0-132.6 22.3-289.9 0z"/><path fill="#fff" d="M719.4 132.7c-12.3-11.2-20.6-13.4-31.8-13.4-18.4 0-42.4 10-55.8 10-9.5 0-17.8-4.5-17.8-16.7 0-5.6 2.2-11.2 3.9-16.7 3.9-11.2 16.7-31.8 32.9-42.4 2.2-1.7 6.1-3.3 8.9-3.3 1.7 0 3.3.6 3.3 2.8 0 .6 0 1.7-.6 1.7l-2.8.6c-2.8 1.7-3.9 3.9-3.9 6.1 0 1.7 0 2.8 2.2 2.8 4.5 0 7.3-8.4 7.3-10.6 0-3.9-2.8-7.3-7.3-6.7-6.7 0-13.4 3.3-20.1 7.3-2.2 1.1-3.9 2.8-5.6 3.9-19 14.5-31.2 37.4-31.2 54.1 0 12.8 7.3 22.3 21.8 22.3 11.7 0 31.2-8.4 45.7-8.4 6.7 0 15.1.6 20.6 9.5 3.9-6.1 8.4-6.1 12.8-6.1 6.7 0 13.9 2.2 20.1 6.1-.4-.7-1.5-2.4-2.6-2.9zm106-82c-5-2.8-10-4.5-15.1-4.5-3.9 0-7.3 1.1-10.6 2.2-.6 0-1.1.6-1.1.6-.6 0-1.7-1.1-2.2-1.7-1.7-.6-3.3-1.1-5-.6-2.8 0-5.6.6-8.4 1.7-21.2 7.3-43.5 36.3-50.2 54.7-2.2 5-3.3 9.5-3.3 14.5 0 6.1 3.3 16.2 13.4 16.2 2.2 0 4.5-.6 7.3-1.7 13.4-5.6 25.1-24.5 25.1-35.1 0-2.8-.6-7.3-5.6-7.3-11.2 0-20.6 14.5-21.2 26.8 3.3-3.3 7.8-6.7 11.2-8.4 1.1-2.2 1.1-4.5 2.2-6.1 1.7-2.8 4.5-8.4 8.4-8.4 2.2 0 2.8 2.2 2.8 3.9 0 7.3-7.3 20.1-15.6 26.2-2.8 2.2-5 3.3-7.8 3.3-6.1 0-7.8-5.6-7.8-9.5 0-4.5 1.7-11.2 2.8-14.5 3.9-12.3 17.8-33.5 34-46.3 3.3-2.8 10-7.3 14.5-7.3.6 0 2.8 0 2.8.6l-2.2 1.1c-7.3 4.5-14.5 13.4-16.7 19.5-.6 1.1-1.1 3.3-1.1 5 0 2.8 1.1 5.6 4.5 5.6 6.7 0 15.6-11.7 18.4-19.5.6-1.7 1.1-3.3 1.1-4.5l.6-2.2v-3.9c1.1-.6 1.7-.6 2.8-.6 8.9 0 19.5 9.5 28.4 13.9l6.7-6.7c-4.7-2-9.2-4.8-13.1-7zm-30.7 12.8c-.6 1.7-2.3 4.5-4 6.7-1.1 1.7-7.8 8.9-10.6 8.9-2.2 0-2.8-1.1-2.8-2.8 0-6.1 11.2-19.5 16.7-21.8.6-.6 1.7-1.1 2.8-1.1 0 0 0 1.7.1 1.7-.5 2.8-1.1 5.6-2.2 8.4zm54.6-1.7h-2.8l-6.1 7.3c3.3.6 2.8.6 5.6.6 11.7 0 26.2-8.4 34-22.9-9.5 9.5-20.6 15-30.7 15zm-3.3 64.2c-.6.6-2.2 1.1-2.2 1.1-.6 0-1.1-.6-1.1-1.1 0-2.2 6.1-11.2 6.1-11.7 1.7-1.7 2.8-4.5 3.9-6.1l9.5-16.2h-8.4c-.6 1.1-1.1 1.7-1.7 2.2-2.2-2.8-2.8-3.3-5-3.3-3.3 0-5.6 1.1-8.9 3.9-11.2 8.4-15.6 18.4-22.3 27.9-.6 1.1-3.3 4.5-5 4.5s-1.7-2.2-1.7-3.3c0-3.3 2.8-11.2 3.9-13.4.6-1.1.6-2.8 1.7-3.3 1.7-1.7 3.9-2.8 6.1-4.5 8.4-6.1 17.8-16.7 24.5-24.5 2.2-1.7 3.9-3.9 5-6.1h-2.8l-1.7 2.2c-5.6 7.3-13.9 15.6-21.2 22.3-1.7 2.2-3.9 3.9-6.1 5v-.6c5.6-11.2 13.4-22.9 21.8-34 1.1-1.1 13.4-16.2 17.8-16.2.6 0 1.1 0 1.1 1.1 0 2.2-2.2 5.6-3.3 7.8h.5c.6 0 1.7 0 2.3-.6.6-.6 1.1-1.7 1.1-2.2.6-2.2 1.1-3.3 1.1-5.6-.1-2.2-.6-3.9-5.1-1.7-7.8 0-21.8 13.9-27.3 20.6-8.4 10-15.1 19.5-20.1 29.6-1.7 3.3-3.3 6.7-5 9.5-.6.6-3.3 1.1-4.5 1.1l-.6-.6c1.7-3.9 3.9-8.9 3.9-12.3 0-3.3-1.7-6.1-5.6-6.1-11.7 0-28.4 23.4-29.6 35.7v2.8c0 1.1 1.1 3.3 1.7 3.9 1.1 1.1 2.8 1.7 3.9 1.7 4.5 0 10.6-5 14.5-9.5s6.1-8.9 8.9-12.8c.6-.6.6-1.1 1.1-1.1 1.7-.6 3.3-.6 4.5-.6v.6c-1.1 5-3.3 9.5-3.9 14.5v3.3c0 2.8 2.8 5.6 5.6 5.6 4.5 0 8.9-5 12.8-8.9v2.8c0 2.8 1.1 6.1 5 6.1 3.3 0 7.8-3.9 11.2-7.3v2.2c0 2.8.6 5 3.9 5 7.8 0 21.2-18.4 23.4-22.3h-2.8c-2.6 3.9-6.5 9.5-10.9 12.9zm-63-.6c-2.2 0-2.8-1.7-2.8-3.3 0-5 5.6-14.5 8.9-18.4 1.1 2.8 5 5.6 7.8 6.7-.5 1.6-8.3 15-13.9 15zm10-23.4v-2.2c.6-3.3 4.5-6.1 6.7-6.1 1.7 0 2.2 2.2 2.2 3.3 0 3.3-1.7 7.8-3.3 10.6-2.2 0-5.6-3.4-5.6-5.6zm37.4 23.4c-1.1 0-1.7-1.1-1.7-1.7 0-7.3 15.6-29.6 21.2-29.6 1.1 0 1.7 0 1.7 1.1 0 .6-2.3 3.9-3.3 6.1l-5 8.4c-1.7 2.3-8.4 15.7-12.9 15.7zm-113.2-24l-2.8 1.7c-.6 0-1.1-.6-1.1-1.1v-1.1c6.7-10.6 12.8-21.2 19-31.8h-8.9l-1.1 1.7c-1.7-2.2-3.3-2.8-5-2.8-2.2 0-5.6 1.7-7.8 3.3-8.4 6.7-13.4 15.1-19 22.3-3.9 4.5-10 12.3-15.6 12.3-3.3 0-3.9-2.8-3.9-5 0-2.8 1.1-6.1 2.8-9.5l3.9-6.7c2.2-3.9 9.5-12.8 13.9-12.8.6 0 2.2.6 2.2 2.2 0 0 0 1.1-.6 1.1-1.1.6-1.7.6-2.2.6-2.2 1.1-3.9 3.9-3.9 5.6 0 1.1.6 2.2 2.2 2.2 4.5 0 7.3-8.4 7.3-10 0-3.3-2.8-5.6-6.1-5.6-4.5 0-8.4 2.2-12.3 6.1-3.9 3.3-7.8 7.8-11.2 9.5-.6 0-1.7.6-2.8 1.1h-.6c1.1-3.3 2.8-7.3 2.8-10.6 0-2.8-1.1-6.1-6.1-5.6-11.7 0-30.1 22.9-30.1 36.3 0 2.8.6 7.8 6.1 7.8 2.2 0 3.9-1.1 6.1-2.2 8.4-5 15.1-14.5 19-21.2 0-.6.6-1.1.6-1.1 1.1-.6 3.3-1.1 3.9-1.1h.6c-2.2 3.9-5.6 10.6-5.6 15.1 0 3.9 1.1 10 7.8 10 6.7 0 12.3-5 19-11.7-.6 2.2-1.1 5.6-1.1 6.1 0 2.8 1.1 5.6 5 5.6 3.3 0 7.8-3.3 11.1-6.6-.1.2-.4.9.1 3.3.6 2.8 1.7 3.3 3.9 3.3 7.8 0 20.6-17.3 23.4-21.8h-2.8c-2.9 3.3-6.2 7.8-10.1 11.1zm-72.5 1.7c-2.2 0-2.8-2.2-2.8-3.3 0-5 5.6-13.4 8.9-18.4 1.7 2.8 5 5 8.4 6.1-1.1 1.7-8.9 15.6-14.5 15.6zm16.1-18.4c-3.9 0-6.7-2.8-6.7-5.6s3.3-7.3 6.7-7.3c2.2 0 2.8 2.2 2.8 3.9 0 2.9-1.6 6.8-2.8 9zm38.5 19c-1.7 0-1.7-1.1-1.7-1.7 0-6.7 13.4-24 17.8-27.9.6-.6 2.8-1.7 3.9-1.7 0-.6 1.1 0 1.1.6s-2.2 3.3-2.8 5.6l-7.3 12.3c.2.5-6.5 12.8-11 12.8zm39.1-34.6l-4.5 7.3h8.4l4.5-7.3h-8.4z"/>
            </svg>
          </div>
          <p class="bottle-line">Make it happy!</p>
        </div>
        
        <!-- Sprite Pop up -->
        <div class="machine-overlay-inner machine-overlay-sprite">
          <div class="machine-overlay-bottle">
            <svg xmlns="http://www.w3.org/2000/svg" width="314.9" height="988.3" viewBox="577.1 -405.6 314.9 988.3" enable-background="new 577.1 -405.6 314.9 988.3">
              <!-- Defs -->
              <defs>
                <!-- Linear Gradient - With SMIL Animation of Filling the bottle -->
                <linearGradient id="spriteGradient"
                                x1="0%"
                                y1="101%"
                                x2="0%"
                                y2="0%">

                  <stop offset="0%"
                        stop-color="#A9DAC7" />

                  <stop offset="1%"
                        stop-color="rgba(0,0,0, 0)" />

                  <animate  id="spriteFillAnimation"
                            begin="indefinite"
                            attributeName="y1"
                            from="0%"
                            to="100%"
                            dur="4s"
                             /> 

                </linearGradient>
              </defs>
              <path class="bottle-fill" fill="url(#spriteGradient)" d="M877.2 504.7v13.4c0 12.3-5.6 37.4-19.5 43.5-19.5 9.5-39.6 10.6-59.1 12.8-1.7 0-6.7.5-14 .5h-52.4c-10.6 0-20.1 0-28.4-.5h-7.8c-5 0-9.5 0-13.9-.6h-4.5c-6.7 0-10.6-.6-12.3-.6-19-2.8-39.6-4.5-58.6-13.9-13.9-6.7-19-31.8-19-44.1v-13.4l2.2-19.5c3.3-25.7 17.8-52.4 20.6-78.7.6-5.6 1.7-12.3 2.8-17.8l.6-53.5c-.6-5-.6-9.5-.6-12.8 0-3.4-.6-6.7-.6-8.9v-.6c0-6.7-.6-11.2-.6-11.7 0-1.1-3.9-33.5-5.6-49.6-2.8-22.9-7.8-59.1-11.7-82.5l7.8-165.7v-2.2c2.2-8.9-1.7-17.8 3.4-27.3v-1.1c-2.2-3.3 2.2-11.7 2.2-15.1 0-1.7 6.7-15.1 8.4-22.3 9.5-36.8 29-73.6 40.2-111 .5 0 1.1 0 1.1-.5 36.3-10 66.9-1.7 154.5 0h6.7c10.6 36.8 24.6 73.6 34.6 111 1.1 7.2 8.4 20.6 8.4 22.3 0 3.4 5 10 2.2 13.4l-.6 1.7c5 8.9 1.1 19.5 3.3 29v2.2l8.9 168.5c-3.9 23.4-10 59.7-13.4 82-2.2 16.2-6.7 48.5-6.7 49.6 0 1.1 0 5-.6 11.7v.6c0 2.8-.6 5.6-.6 8.9 0 2.8-.6 6.7-.6 11.2v1.1l-.5 54.1c1.1 5.6 1.7 12.3 2.2 17.8 2.2 25.7 16.2 53 19 78.7l2.5 19.9z"/><path fill="#014495" d="M679.2-282.9h117.1v-33.5l5.6-16.7-5.6-16.7-5.6-16.7 5.6-11.2v-16.7l-11.2-5.6h-100.3l-11.2 11.2v11.2l5.6 11.2-5.6 11.2v11.2l-5.6 11.2 5.6 11.2v11.2l5.6 27.5z"/><path fill="#fff" d="M869.4-7.3c2.8-4.5 2.8-8.4 2.8-11.7 0-2.2-1.1-15.6-2.8-23.4-5.6-21.2-13.4-42.4-20.6-62.5-5-14.5-10.6-29.6-15.1-44.6-7.3-21.2-17.3-53-24.5-80.3v-.6c-1.7-4.5-2.8-9.5-3.3-14.5l-1.7-10-1.7-18.4-.6-45.2c1.1-1.7 1.7-2.8 2.8-3.9 2.2-2.8 4.5-6.7 4.5-12.8s-3.9-15.1-7.8-23.4c-1.7-2.2-3.9-7.3-3.9-7.8 0-2.2.6-2.8 2.2-5 2.2-2.2 5-5.6 5-11.7 0-19-16.7-20.6-29.6-21.8-2.2 0-4.5-.6-6.1-.6h-67.5c-2.2 0-4.5.6-6.1.6-13.4 1.1-29.6 2.8-29.6 21.8 0 6.1 2.8 9.5 5 11.7 1.7 1.7 2.2 2.8 2.2 4.5 0 1.1-2.2 6.1-3.9 9.5-3.3 7.8-7.8 16.7-7.8 23.4 0 6.1 2.8 9.5 4.5 12.8 1.1 1.1 1.7 2.2 2.8 3.9l-.6 44.6c-.6 6.7-1.1 12.8-1.7 19l-1.7 10c-.6 5-1.7 10-3.3 14.5v.6c-7.3 27.3-17.3 58.6-24.5 80.3-4.5 15.1-10 30.1-15.1 44.6-7.3 20.6-14.5 41.8-20.6 63-1.1 7.3-2.8 20.1-2.8 22.9 0 3.3 0 7.3 2.8 11.7-1.7 2.8-2.8 5-3.9 7.8h12.3l2.8-4.5c1.7-2.2 1.7-5.6-.6-7.8-2.8-2.8-2.8-3.3-2.8-7.3 0-1.1.6-5.6 1.1-10.6 0-2.2.6-4.5 1.1-6.7 0-1.1.6-2.2.6-2.8 5.6-20.6 13.4-41.8 20.6-61.9 5-14.5 10.6-30.1 15.6-45.2 3.3-9.5 6.7-21.2 10.6-33.5 5-15.6 9.5-31.8 13.9-47.4 2.2-5.6 2.8-11.2 3.9-16.7.6-3.3 1.1-6.1 1.7-8.9v-.6c.6-6.1 1.1-12.8 2.2-20.1l.6-46.3c0-1.1 0-1.7-.6-2.8-1.1-2.8-2.8-5-3.9-6.7-1.7-2.8-2.8-3.9-2.8-6.1 0-3.9 3.9-12.8 6.7-18.4 3.3-7.3 4.5-10.6 4.5-13.4 0-6.7-3.3-10-5-12.3-1.7-1.7-2.2-2.2-2.2-3.9 0-7.8 3.9-9.5 19.5-10.6 2.2 0 4.5-.6 6.1-.6h65.3c2.2 0 4.5.6 6.1.6 15.6 1.1 19.5 2.8 19.5 10.6 0 1.7-.6 2.2-2.2 3.9-2.2 2.2-5 5.6-5 12.3 0 2.8 1.7 6.1 4.5 13.4 2.8 6.1 6.7 15.1 6.7 18.4 0 2.2-.6 3.3-2.8 6.1-1.1 1.7-2.8 3.9-3.9 6.7-.6.6-.6 1.7-.6 2.8l.6 46.9c.6 6.7 1.1 13.4 2.2 19.5v.6l1.7 8.9c.6 5.6 1.7 11.2 3.9 16.7 3.9 15.6 8.9 31.8 13.9 47.4 3.9 12.3 7.8 23.4 10.6 32.9 5 15.1 10 30.1 15.6 45.2 7.3 20.6 14.5 41.3 20.1 61.4l.6 3.3 1.1 6.7c.6 5 1.1 9.5 1.1 10.6 0 3.9 0 5-2.8 7.3-3.3 1.7-3.3 5-1.7 7.3 1.1 1.7 2.2 2.8 2.8 4.5h12.3c-.5-2.4-1.6-5.1-3.3-7.9zm16.2 515.3l-2.2-18.4c-1.7-12.3-6.1-24.5-10-36.8-4.5-12.3-8.4-25.1-10-36.8v-1.1c-.6-5-1.1-10.6-2.2-15.6v-49.6l2.2-32.3c0-2.2 3.3-25.1 6.1-46.3 3.3-22.9 9.5-59.7 12.8-81.4 1.7-9.5 2.2-13.4 2.8-15.6h-11.2c-.6 2.8-1.1 8.4-2.2 13.9-3.9 22.3-10 59.1-13.4 82-3.9 28.4-5 39.6-5.6 44.1v3.3c0 .6 0 2.8-.6 6.1 0 2.8-.6 6.7-.6 11.2v1.7c-.6 3.9-.6 8.4-1.1 13.4v51.9c1.1 4.5 1.7 10 2.2 15.1v1.1c1.1 13.4 6.1 26.2 10 39 3.9 11.7 7.8 23.4 9.5 34.6l1.7 17.8v12.3c0 11.7-5.6 31.8-16.2 36.3-15.6 7.3-32.3 9.5-48.5 11.2l-8.9 1.1c-1.1 0-4.5.6-10.6.6h-5c-11.2 0-28.4.6-50.8.6h-57.4c-5 0-8.4 0-9.5-.6l-8.9-1.1c-16.2-1.7-32.9-3.9-48.5-11.2-10-4.5-15.6-24-15.6-36.3v-12.8l1.7-17.8c1.7-11.2 5.6-22.9 9.5-34.6 4.5-12.8 8.9-26.2 10-39v-2c.6-5 1.1-10 2.2-15.1v-52.4c-.6-4.5-.6-8.9-1.1-12.8-.6-5-.6-9.5-.6-12.3 0-3.3-.6-5.6-.6-6.1v-3.3c-.6-4.5-1.7-15.6-5.6-44.1-3.3-22.9-9.5-59.7-13.4-82-1.1-5.6-1.7-11.2-2.2-13.9h-11.2c.6 2.2 1.1 6.1 2.8 15.6 3.9 21.8 10 58.6 12.8 81.4 3.3 26.2 5.6 44.6 6.1 45.7 0 2.2.6 15.1 2.2 32.3v50.2c-1.1 5-1.7 10.6-2.2 15.6v1.7c-1.1 11.7-5.6 24.5-10 36.8-3.9 12.3-8.4 24.5-10 36.8l-2.2 18.4v13.5c0 9.5 3.9 38.5 22.3 46.3 17.3 8.4 34.6 10 51.9 12.3l8.4 1.1c6.1 1.1 57.4 1.1 67.5 1.1s61.4 0 67.5-1.1c2.8-.6 5.6-.6 8.9-1.1 17.3-2.2 34.6-3.9 51.9-12.3 18.4-7.8 22.3-36.8 22.3-46.3v-12.8c2.8-.6 2.8-1.2 2.8-1.2z"/><path fill="#009739" d="M590-9.6s-18.4 65.3-11.2 184.1c0 0 163.4 46.9 312.3 0 0 0 5.6-138.3-11.2-184.1.1 0-132.6 22.3-289.9 0z"/>

              <path fill="#FFFFFF" d="M724.7,102.2c0,7.9-6.2,20.8-15.8,25.3l-3.4,1.7l-3.4,1.7v-0.6c0,0,2.8-3.4,4.5-5.1
                c1.7-2.8,3.4-5.6,4.5-8.4c1.1-3.9,2.8-7.9,3.4-11.3v-3.9c0-1.7-1.7-3.4-2.8-3.4c-3.4,0-4.5,5.1-5.1,7.3
                c-2.3,12.4-1.7,25.3-6.2,36.6c-2.3,4.5-8.4,6.2-12.4,9l7.3-40c0.6-1.7,0.6-5.6,0.6-5.6c0-1.7-0.6-5.1-2.8-6.2
                c2.8-1.1,5.6-2.3,8.4-2.8c5.1-1.7,9.6-3.9,14.6-3.9C721.9,91.5,724.7,96.5,724.7,102.2L724.7,102.2z M698.8,81.3l-2.3,11.8
                c-2.8-3.4-6.8-5.1-10.1-5.1c-2.8,0-8.4,1.7-8.4,6.2c0,7.3,13,9,13,22c0,3.4-1.1,7.3-2.8,10.7c-6.2,12.4-18.6,17.5-28.2,17.5
                l-6.8-0.6l4.5-15.2c2.8,2.3,5.6,3.4,8.4,3.4c4.5,0,10.7-2.8,11.8-9v-2.3c-0.6-1.1-0.6-2.3-1.7-3.4c-1.7-2.3-5.1-4.5-6.8-6.2
                c-2.8-1.7-4.5-5.6-4.5-7.9v-2.8c1.1-14.6,15.2-20.3,25.9-20.3C693.2,80.2,696,80.8,698.8,81.3z M748.4,89.8l-3.9,0.6
                c-5.6,1.7-5.6,7.3-6.2,11.3l-2.8,18.6l-12.4,6.8l4.5-29.3v-4.5c-0.6-1.7-0.6-4.5-2.3-5.6l6.2-2.3c1.7,0.6,4.5,3.4,5.1,5.1
                c1.7-3.4,5.6-10.1,10.1-11.3c0.6,0,1.7-0.6,2.8-0.6h1.1C750.1,81.9,749.5,85.8,748.4,89.8z M759.7,110.1l-12.4,5.1
                c0.6-2.8,1.1-5.6,1.1-8.4c0.6-2.3,1.1-4.5,1.1-7.3l1.1-6.2c0.6-1.7,0.6-3.4,0.6-5.1l0.6-3.9c0.6-1.1,0.6-2.8,0.6-4.5
                c0-0.6,0-2.3,0.6-2.3c3.9-2.3,8.4-3.9,12.4-5.6C764.2,84.1,761.9,97.1,759.7,110.1z M815.4,67.8c0,6.2-6.2,13-13.5,15.8
                c-1.1,0.6-3.4,1.1-3.4,1.1H798c0-0.6,2.3-2.3,3.4-3.4c2.8-2.8,6.2-9.6,6.2-13c0-1.1-0.6-2.3-1.1-2.3c-1.1,0-1.7,0.6-2.3,1.7
                c-3.4,3.4-4.5,9-5.1,13c-0.6,2.3-0.6,3.9-0.6,6.2c0,2.3,0.6,6.8,4.5,6.8c4.5,0,9.6-5.6,11.8-10.7l1.1,1.1c0,0-1.7,3.4-2.3,5.1
                c-4.5,7.3-11.8,12.4-18,12.4c-6.8,0-9.6-5.6-9.6-11.3c0-3.4,1.1-7.9,2.3-11.3c3.4-9.6,13.5-18,21.4-18
                C813.2,61.6,815.4,63.9,815.4,67.8z M785.6,62.7l11.3-3.9l-0.6,2.8c-1.7,5.6-7.9,5.6-11.3,7.3l-3.9,34.9l-12.4,3.4l5.1-34.4
                l-5.1,1.7V74l0.6-4.5v-0.6c0.6-0.6,1.7-1.7,2.8-2.3l3.4-3.4c2.3-2.8,4.5-6.8,5.6-9.6c0.6-1.1,0.6-3.4,1.7-3.9
                c1.1-1.7,3.9-3.4,5.6-5.1C788.4,44.7,785.6,62.7,785.6,62.7z M818.3,48.7c7.9,0,14.6-2.3,23.1-5.1C833.5,57.7,829,72.9,829,87.5
                c0,12.4,3.4,24.8,11.8,37.2c-7.9-1.1-16.3-2.3-24.2-2.8l-5.1-0.6h-16.3c-18.6,0.6-37.7,4.5-55.8,12.4
                c-18.6,7.9-37.2,19.7-55.8,38.3c-1.1-1.1-2.3-2.3-2.8-3.4c-17.5-15.2-35.5-23.1-52.9-24.2l3.9-6.2c10.1-14.6,16.9-29.3,19.2-43.9
                c1.1-4.5,1.1-9,1.7-13.5V66.7l-1.1-12.4c16.3,6.2,32.7,11.3,49,12.4c1.7,0,6.2,0.6,6.2,0.6h9l3.9-0.6h0.6c1.1,1.7,3.4,3.4,5.1,4.5
                c-1.1,0-11.3,1.7-14.1,1.7h-13c-13-0.6-25.9-3.9-38.9-7.9v6.8c-1.7,23.7-10.7,46.8-28.7,70.4c17.5,1.7,34.4,8.4,51.8,23.7
                c2.3-1.7,4.5-3.4,6.8-5.6c20.3-16.3,40.6-28.2,60.3-34.9c22.5-7.9,45.1-11.3,67.6-12.4l8.4-0.6c-0.6-4.5-2.3-10.7-2.3-14.6V92
                c0-2.8,0.6-5.6,1.1-8.4c2.3-12.4,6.8-25.3,13.5-38.3c-7.3,2.8-14.6,4.5-21.4,4.5c-14.6,0-24.8-7.9-27-27l-6.8,10.7
                c0-1.1-0.6-2.8-0.6-2.8c0-0.6,1.7-2.3,2.3-3.9c2.8-3.9,5.6-9,7.9-13C793.5,34.6,799.7,48.7,818.3,48.7z"/>
              <path fill="#F2D427" d="M772.6,26.1l3.9-1.1c1.7,0,3.4,1.1,3.4,3.4c0,0.6,0,2.3-1.1,2.3c-0.6,0-0.6-0.6-0.6-0.6v-1.1
                c0-0.6-0.6-1.1-0.6-1.1l-0.6,0.6c-1.7,5.1-3.9,10.7-7.9,15.8c-7.9,10.1-18.6,15.2-27.6,17.5c-2.8,0.6-5.6,1.1-9,1.1h-3.9l-5.1-0.6
                c-1.7,0-5.1-1.1-5.1-1.1c-0.6,0-0.6,0-0.6,0.6c0,1.1,2.3,1.1,2.3,1.7c0,0.6-1.1,0.6-1.1,0.6c-1.7,0-2.8-1.7-2.8-3.4
                c0-2.8,2.3-2.3,3.9-5.6c0.6-1.1,0.6-2.3,0.6-2.8l1.7-6.8c7.9-16.9,22-22.5,34.4-22.5C766.4,22.2,769.2,26.1,772.6,26.1L772.6,26.1z
                "/>
              <path fill="#6AB24C" d="M778.8,39.6c0,4.5-1.1,8.4-3.4,13.5c-7.9,14.6-20.8,19.7-31.5,19.7c0,0-2.8,0-4.5-0.6
                c-2.3-0.6-4.5-0.6-6.8-1.7c-1.7-0.6-3.4-1.1-5.1-2.3c-0.6,0-5.1-3.9-5.1-5.1c0-0.6,0.6-0.6,0.6-0.6c0.6,0,2.3,0.6,3.4,0.6
                c2.3,0.6,5.1,0.6,7.9,0.6s6.2-0.6,9.6-1.1c2.3-0.6,5.1-1.7,7.9-2.3c7.3-2.8,17.5-11.3,21.4-19.2c0.6-1.1,1.1-2.3,1.7-2.8
                c0.6-1.1,2.3-5.6,2.8-5.6C778.8,32.9,778.8,39.1,778.8,39.6z"/>
            </svg>
          </div>
          <p class="bottle-line">Obey your thirst!</p>
        </div>
        
        <!-- Diet Pop up -->
        <div class="machine-overlay-inner machine-overlay-diet">
          <div class="machine-overlay-bottle">
            <svg xmlns="http://www.w3.org/2000/svg" width="314.9" height="988.3" viewBox="577.1 -405.6 314.9 988.3" enable-background="new 577.1 -405.6 314.9 988.3">
              <!-- Defs -->
              <defs>
                <!-- Linear Gradient - With SMIL Animation of Filling the bottle -->
                <linearGradient id="dietGradient"
                                x1="0%"
                                y1="101%"
                                x2="0%"
                                y2="0%">

                  <stop offset="0%"
                        stop-color="#55171B" />

                  <stop offset="1%"
                        stop-color="rgba(0,0,0, 0)" />

                  <animate  id="dietFillAnimation"
                            begin="indefinite"
                            attributeName="y1"
                            from="0%"
                            to="100%"
                            dur="4s"
                             /> 

                </linearGradient>
              </defs>
              <path class="bottle-fill" fill="url(#dietGradient)" d="M877.2 504.7v13.4c0 12.3-5.6 37.4-19.5 43.5-19.5 9.5-39.6 10.6-59.1 12.8-1.7 0-6.7.5-14 .5h-52.4c-10.6 0-20.1 0-28.4-.5h-7.8c-5 0-9.5 0-13.9-.6h-4.5c-6.7 0-10.6-.6-12.3-.6-19-2.8-39.6-4.5-58.6-13.9-13.9-6.7-19-31.8-19-44.1v-13.4l2.2-19.5c3.3-25.7 17.8-52.4 20.6-78.7.6-5.6 1.7-12.3 2.8-17.8l.6-53.5c-.6-5-.6-9.5-.6-12.8 0-3.4-.6-6.7-.6-8.9v-.6c0-6.7-.6-11.2-.6-11.7 0-1.1-3.9-33.5-5.6-49.6-2.8-22.9-7.8-59.1-11.7-82.5l7.8-165.7v-2.2c2.2-8.9-1.7-17.8 3.4-27.3v-1.1c-2.2-3.3 2.2-11.7 2.2-15.1 0-1.7 6.7-15.1 8.4-22.3 9.5-36.8 29-73.6 40.2-111 .5 0 1.1 0 1.1-.5 36.3-10 66.9-1.7 154.5 0h6.7c10.6 36.8 24.6 73.6 34.6 111 1.1 7.2 8.4 20.6 8.4 22.3 0 3.4 5 10 2.2 13.4l-.6 1.7c5 8.9 1.1 19.5 3.3 29v2.2l8.9 168.5c-3.9 23.4-10 59.7-13.4 82-2.2 16.2-6.7 48.5-6.7 49.6 0 1.1 0 5-.6 11.7v.6c0 2.8-.6 5.6-.6 8.9 0 2.8-.6 6.7-.6 11.2v1.1l-.5 54.1c1.1 5.6 1.7 12.3 2.2 17.8 2.2 25.7 16.2 53 19 78.7l2.5 19.9z"/><path fill="#D2D3D5" d="M679.2-282.9h117.1v-33.5l5.6-16.7-5.6-16.7-5.6-16.7 5.6-11.2v-16.7l-11.2-5.6h-100.3l-11.2 11.2v11.2l5.6 11.2-5.6 11.2v11.2l-5.6 11.2 5.6 11.2v11.2l5.6 27.5z"/><path fill="#fff" d="M869.4-7.3c2.8-4.5 2.8-8.4 2.8-11.7 0-2.2-1.1-15.6-2.8-23.4-5.6-21.2-13.4-42.4-20.6-62.5-5-14.5-10.6-29.6-15.1-44.6-7.3-21.2-17.3-53-24.5-80.3v-.6c-1.7-4.5-2.8-9.5-3.3-14.5l-1.7-10-1.7-18.4-.6-45.2c1.1-1.7 1.7-2.8 2.8-3.9 2.2-2.8 4.5-6.7 4.5-12.8s-3.9-15.1-7.8-23.4c-1.7-2.2-3.9-7.3-3.9-7.8 0-2.2.6-2.8 2.2-5 2.2-2.2 5-5.6 5-11.7 0-19-16.7-20.6-29.6-21.8-2.2 0-4.5-.6-6.1-.6h-67.5c-2.2 0-4.5.6-6.1.6-13.4 1.1-29.6 2.8-29.6 21.8 0 6.1 2.8 9.5 5 11.7 1.7 1.7 2.2 2.8 2.2 4.5 0 1.1-2.2 6.1-3.9 9.5-3.3 7.8-7.8 16.7-7.8 23.4 0 6.1 2.8 9.5 4.5 12.8 1.1 1.1 1.7 2.2 2.8 3.9l-.6 44.6c-.6 6.7-1.1 12.8-1.7 19l-1.7 10c-.6 5-1.7 10-3.3 14.5v.6c-7.3 27.3-17.3 58.6-24.5 80.3-4.5 15.1-10 30.1-15.1 44.6-7.3 20.6-14.5 41.8-20.6 63-1.1 7.3-2.8 20.1-2.8 22.9 0 3.3 0 7.3 2.8 11.7-1.7 2.8-2.8 5-3.9 7.8h12.3l2.8-4.5c1.7-2.2 1.7-5.6-.6-7.8-2.8-2.8-2.8-3.3-2.8-7.3 0-1.1.6-5.6 1.1-10.6 0-2.2.6-4.5 1.1-6.7 0-1.1.6-2.2.6-2.8 5.6-20.6 13.4-41.8 20.6-61.9 5-14.5 10.6-30.1 15.6-45.2 3.3-9.5 6.7-21.2 10.6-33.5 5-15.6 9.5-31.8 13.9-47.4 2.2-5.6 2.8-11.2 3.9-16.7.6-3.3 1.1-6.1 1.7-8.9v-.6c.6-6.1 1.1-12.8 2.2-20.1l.6-46.3c0-1.1 0-1.7-.6-2.8-1.1-2.8-2.8-5-3.9-6.7-1.7-2.8-2.8-3.9-2.8-6.1 0-3.9 3.9-12.8 6.7-18.4 3.3-7.3 4.5-10.6 4.5-13.4 0-6.7-3.3-10-5-12.3-1.7-1.7-2.2-2.2-2.2-3.9 0-7.8 3.9-9.5 19.5-10.6 2.2 0 4.5-.6 6.1-.6h65.3c2.2 0 4.5.6 6.1.6 15.6 1.1 19.5 2.8 19.5 10.6 0 1.7-.6 2.2-2.2 3.9-2.2 2.2-5 5.6-5 12.3 0 2.8 1.7 6.1 4.5 13.4 2.8 6.1 6.7 15.1 6.7 18.4 0 2.2-.6 3.3-2.8 6.1-1.1 1.7-2.8 3.9-3.9 6.7-.6.6-.6 1.7-.6 2.8l.6 46.9c.6 6.7 1.1 13.4 2.2 19.5v.6l1.7 8.9c.6 5.6 1.7 11.2 3.9 16.7 3.9 15.6 8.9 31.8 13.9 47.4 3.9 12.3 7.8 23.4 10.6 32.9 5 15.1 10 30.1 15.6 45.2 7.3 20.6 14.5 41.3 20.1 61.4l.6 3.3 1.1 6.7c.6 5 1.1 9.5 1.1 10.6 0 3.9 0 5-2.8 7.3-3.3 1.7-3.3 5-1.7 7.3 1.1 1.7 2.2 2.8 2.8 4.5h12.3c-.5-2.4-1.6-5.1-3.3-7.9zm16.2 515.3l-2.2-18.4c-1.7-12.3-6.1-24.5-10-36.8-4.5-12.3-8.4-25.1-10-36.8v-1.1c-.6-5-1.1-10.6-2.2-15.6v-49.6l2.2-32.3c0-2.2 3.3-25.1 6.1-46.3 3.3-22.9 9.5-59.7 12.8-81.4 1.7-9.5 2.2-13.4 2.8-15.6h-11.2c-.6 2.8-1.1 8.4-2.2 13.9-3.9 22.3-10 59.1-13.4 82-3.9 28.4-5 39.6-5.6 44.1v3.3c0 .6 0 2.8-.6 6.1 0 2.8-.6 6.7-.6 11.2v1.7c-.6 3.9-.6 8.4-1.1 13.4v51.9c1.1 4.5 1.7 10 2.2 15.1v1.1c1.1 13.4 6.1 26.2 10 39 3.9 11.7 7.8 23.4 9.5 34.6l1.7 17.8v12.3c0 11.7-5.6 31.8-16.2 36.3-15.6 7.3-32.3 9.5-48.5 11.2l-8.9 1.1c-1.1 0-4.5.6-10.6.6h-5c-11.2 0-28.4.6-50.8.6h-57.4c-5 0-8.4 0-9.5-.6l-8.9-1.1c-16.2-1.7-32.9-3.9-48.5-11.2-10-4.5-15.6-24-15.6-36.3v-12.8l1.7-17.8c1.7-11.2 5.6-22.9 9.5-34.6 4.5-12.8 8.9-26.2 10-39v-2c.6-5 1.1-10 2.2-15.1v-52.4c-.6-4.5-.6-8.9-1.1-12.8-.6-5-.6-9.5-.6-12.3 0-3.3-.6-5.6-.6-6.1v-3.3c-.6-4.5-1.7-15.6-5.6-44.1-3.3-22.9-9.5-59.7-13.4-82-1.1-5.6-1.7-11.2-2.2-13.9h-11.2c.6 2.2 1.1 6.1 2.8 15.6 3.9 21.8 10 58.6 12.8 81.4 3.3 26.2 5.6 44.6 6.1 45.7 0 2.2.6 15.1 2.2 32.3v50.2c-1.1 5-1.7 10.6-2.2 15.6v1.7c-1.1 11.7-5.6 24.5-10 36.8-3.9 12.3-8.4 24.5-10 36.8l-2.2 18.4v13.5c0 9.5 3.9 38.5 22.3 46.3 17.3 8.4 34.6 10 51.9 12.3l8.4 1.1c6.1 1.1 57.4 1.1 67.5 1.1s61.4 0 67.5-1.1c2.8-.6 5.6-.6 8.9-1.1 17.3-2.2 34.6-3.9 51.9-12.3 18.4-7.8 22.3-36.8 22.3-46.3v-12.8c2.8-.6 2.8-1.2 2.8-1.2z"/><path fill="#D2D3D5" d="M590-9.6s-18.4 65.3-11.2 184.1c0 0 163.4 46.9 312.3 0 0 0 5.6-138.3-11.2-184.1.1 0-132.6 22.3-289.9 0z"/>

              <path fill-rule="evenodd" clip-rule="evenodd" fill="#ED3338" d="M834.4,98.1c0,6.6-4.2,9.8-11.7,11.5c-0.9,0.2-2.7,0.7-3.4,0.7
                h-2.5v-4.2c0.3-1.7,1-20.1,10-20.1C833.6,86,834.4,95.5,834.4,98.1z M724.4,109.8c0,5.3-0.2,25.5-11.9,25.5
                c-9.2,0-11.5-14.1-11.5-18.5v-13.3c1-6.8,2.5-18,11.9-18C724.7,85.4,724.4,105.6,724.4,109.8z M766.3,60.6l0.2,47.2
                c2.4-3.2,16.8-19,16.8-20.9c0-2.2-3.5-4.9-5.1-6.1h21.4l-19,22.1c3.2,5.1,6.1,10.5,9.5,15.6c1.9,2.5,7.3,13.4,12.6,13.4
                c0.8,0,1.5,0,2.2-0.5c-3.9-3.7-7.1-12.9-7.1-17.6v-4.3c1.7-20.7,18.5-28,32.4-28c7.5,0,21.4,1.5,21.4,14.1
                c0,16.8-28.2,18-34.5,19.2v1.2c1.9,10.7,6.6,15.3,14.8,15.3c6.6,0,13.2-2.5,19.7-8.3c-5.1,12.7-16.3,16.3-25.3,16.3
                c-0.5,0-6.1-0.5-8.8-1.2c-1.7-0.2-3.9-1-5.6-1.9c-0.7-0.2-2.2-1.5-2.6-1.5c-0.8,0-1.2,0.7-1.8,1c-4.3,2.9-8,3.4-12.1,3.4
                c-15.1,0-16.1-10.9-26.3-25.8c-0.9,1-2.9,2.7-2.9,3.4v20.9h-17.6V67c-0.2-2.2-3.6-6.3-6.1-6.3H766.3z M683.5,60.6
                c0.7,0.3,2.2,0.3,3.4,0l-1.7,21.6c-6.1-13.3-13.9-20.7-24.3-20.7c-20.2,0-22.4,26.5-22.4,36.5c0,12.9,2.9,34.5,24,34.5
                c6.3,0,13.4-2.9,19.2-9.5c0.5-0.7,2.2-1.9,2.2-2.4c0-0.8-1.7-6.6-1.7-7.1v-6.8c2.5-19,18-25.5,31.7-25.5c17,0,30.9,9.7,30.9,28.4
                c0,20-15.3,29.7-32.1,29.7c-8.5,0-19.5-2.7-26.3-12.9c-9.8,10.9-19.7,13.1-29.2,13.1c-15.1,0-32.1-6.3-38.2-27.5
                c-0.8-2.9-1.5-8.2-1.5-8.7v-7.3c2.5-26.7,22.9-39.4,42.3-39.4C668,56.8,675.5,59.5,683.5,60.6z"/>
              <path fill-rule="evenodd" clip-rule="evenodd" fill="#333333" d="M824.4,59.2v1c-1.5,2.5-4.1,3.9-6.1,4.6c0.3-1.7,2.9-4.9,4.9-5.6
                H824.4z M838.8,52.2l-2.7,4.9h3.2c0,2.5-2.9,1.2-3.9,1.5c-1.9,3.4-5.8,9.7-5.8,10.5v1.2c0.2,0.3,0,0.3,0.7,0.3
                c1.2,0,4.9-4.4,5.4-5.1h1.5c-2,3.4-6.8,8-10,8c-1.5,0-2.5-0.9-2.5-2.2c0-0.7,0.3-1.2,0.8-1.9l-0.5-0.5c-1.7,2-6.1,4.6-8.5,4.6
                c-2.2,0-3.9-1.4-4.2-4.3c-1.7,0.9-5.6,4.3-7.5,4.3c-1.5,0-2-1.4-2-2.2c0-2.2,6.6-13.1,7.1-13.9h4.2l-6.8,12.6
                c0.2,0.2,0.2,0.8,0.8,0.8c2.4,0,6.6-7.5,6.8-7.8c1-1.7,2.7-3.4,4.6-4.6c1.5-1.2,2.5-1.2,3.9-1.2c2.2,0,3.2,0.7,3.2,2.2
                c0,2.7-3.7,5.4-5.6,6.1c-1,0.5-2.5,0.5-3.4,1.2c-0.8,0.2-1,1.7-1,2.2c0,2,1.7,2,2.2,2c4.3,0,11.9-9,12.4-12.2h-2.5
                c0.5-2.2,2.2-0.8,3.2-1.5c1.5-1.2,2.2-3.2,3.2-4.9H838.8z M816.8,52.2c0,1.9-2.4,2.4-2.9,2.4c-1.5,0-2-0.9-2-1.7
                c0-1.2,1.5-2.4,2.9-2.4C815.9,50.5,816.8,51.2,816.8,52.2z M805.2,58.5c0,1.7-1,4.2-1.5,5.3c-3.4,7.3-13.6,10.2-19.2,10.2
                c-0.5,0-5.3-0.8-8-1.2c8.8-6.6,9.2-16.3,19.2-21.6c-1,2-2,3.7-2.7,5.9c-1.5,4.4-6.6,12.4-12.4,14.9l-0.2,0.5c0.9,0,2.4,0.2,3.2,0.2
                c8,0,17.3-6.6,17.3-15.8c0-8.5-8.8-9.5-13.4-9.5c-3.2,0-14.3,1.5-14.3,8.2c0,1.9,1.5,2.9,3.2,2.9c2.2,0,4.4-2.5,4.6-2.5
                c0.5,0,1.2,0.5,1.7,0.5c0.8,0,3.4-0.8,4.9-1.5c-2.6,4.6-7.3,6.6-10.9,6.6c-3.4,0-6.3-1.7-6.3-5.1c0-8.5,14.6-10.5,18.3-10.5
                C794.5,46.1,805.2,49.5,805.2,58.5z"/>
            </svg>
          </div>
          <p class="bottle-line">Delicious crisp taste, no calories.</p>
        </div>
        
        <!-- Dasani Pop up -->
        <div class="machine-overlay-inner machine-overlay-dasani">
          <div class="machine-overlay-bottle">
            <svg xmlns="http://www.w3.org/2000/svg" width="314.9" height="988.3" viewBox="577.1 -405.6 314.9 988.3" enable-background="new 577.1 -405.6 314.9 988.3">
              <!-- Defs -->
              <defs>
                <!-- Linear Gradient - With SMIL Animation of Filling the bottle -->
                <linearGradient id="dasaniGradient"
                                x1="0%"
                                y1="101%"
                                x2="0%"
                                y2="0%">

                  <stop offset="0%"
                        stop-color="#C4CFEC" />

                  <stop offset="1%"
                        stop-color="rgba(0,0,0, 0)" />

                  <animate  id="dasaniFillAnimation"
                            begin="indefinite"
                            attributeName="y1"
                            from="0%"
                            to="100%"
                            dur="4s"
                             /> 

                </linearGradient>
              </defs>
              <path class="bottle-fill" fill="url(#dasaniGradient)" d="M877.2 504.7v13.4c0 12.3-5.6 37.4-19.5 43.5-19.5 9.5-39.6 10.6-59.1 12.8-1.7 0-6.7.5-14 .5h-52.4c-10.6 0-20.1 0-28.4-.5h-7.8c-5 0-9.5 0-13.9-.6h-4.5c-6.7 0-10.6-.6-12.3-.6-19-2.8-39.6-4.5-58.6-13.9-13.9-6.7-19-31.8-19-44.1v-13.4l2.2-19.5c3.3-25.7 17.8-52.4 20.6-78.7.6-5.6 1.7-12.3 2.8-17.8l.6-53.5c-.6-5-.6-9.5-.6-12.8 0-3.4-.6-6.7-.6-8.9v-.6c0-6.7-.6-11.2-.6-11.7 0-1.1-3.9-33.5-5.6-49.6-2.8-22.9-7.8-59.1-11.7-82.5l7.8-165.7v-2.2c2.2-8.9-1.7-17.8 3.4-27.3v-1.1c-2.2-3.3 2.2-11.7 2.2-15.1 0-1.7 6.7-15.1 8.4-22.3 9.5-36.8 29-73.6 40.2-111 .5 0 1.1 0 1.1-.5 36.3-10 66.9-1.7 154.5 0h6.7c10.6 36.8 24.6 73.6 34.6 111 1.1 7.2 8.4 20.6 8.4 22.3 0 3.4 5 10 2.2 13.4l-.6 1.7c5 8.9 1.1 19.5 3.3 29v2.2l8.9 168.5c-3.9 23.4-10 59.7-13.4 82-2.2 16.2-6.7 48.5-6.7 49.6 0 1.1 0 5-.6 11.7v.6c0 2.8-.6 5.6-.6 8.9 0 2.8-.6 6.7-.6 11.2v1.1l-.5 54.1c1.1 5.6 1.7 12.3 2.2 17.8 2.2 25.7 16.2 53 19 78.7l2.5 19.9z"/><path fill="#009739" d="M679.2-282.9h117.1v-33.5l5.6-16.7-5.6-16.7-5.6-16.7 5.6-11.2v-16.7l-11.2-5.6h-100.3l-11.2 11.2v11.2l5.6 11.2-5.6 11.2v11.2l-5.6 11.2 5.6 11.2v11.2l5.6 27.5z"/><path fill="#fff" d="M869.4-7.3c2.8-4.5 2.8-8.4 2.8-11.7 0-2.2-1.1-15.6-2.8-23.4-5.6-21.2-13.4-42.4-20.6-62.5-5-14.5-10.6-29.6-15.1-44.6-7.3-21.2-17.3-53-24.5-80.3v-.6c-1.7-4.5-2.8-9.5-3.3-14.5l-1.7-10-1.7-18.4-.6-45.2c1.1-1.7 1.7-2.8 2.8-3.9 2.2-2.8 4.5-6.7 4.5-12.8s-3.9-15.1-7.8-23.4c-1.7-2.2-3.9-7.3-3.9-7.8 0-2.2.6-2.8 2.2-5 2.2-2.2 5-5.6 5-11.7 0-19-16.7-20.6-29.6-21.8-2.2 0-4.5-.6-6.1-.6h-67.5c-2.2 0-4.5.6-6.1.6-13.4 1.1-29.6 2.8-29.6 21.8 0 6.1 2.8 9.5 5 11.7 1.7 1.7 2.2 2.8 2.2 4.5 0 1.1-2.2 6.1-3.9 9.5-3.3 7.8-7.8 16.7-7.8 23.4 0 6.1 2.8 9.5 4.5 12.8 1.1 1.1 1.7 2.2 2.8 3.9l-.6 44.6c-.6 6.7-1.1 12.8-1.7 19l-1.7 10c-.6 5-1.7 10-3.3 14.5v.6c-7.3 27.3-17.3 58.6-24.5 80.3-4.5 15.1-10 30.1-15.1 44.6-7.3 20.6-14.5 41.8-20.6 63-1.1 7.3-2.8 20.1-2.8 22.9 0 3.3 0 7.3 2.8 11.7-1.7 2.8-2.8 5-3.9 7.8h12.3l2.8-4.5c1.7-2.2 1.7-5.6-.6-7.8-2.8-2.8-2.8-3.3-2.8-7.3 0-1.1.6-5.6 1.1-10.6 0-2.2.6-4.5 1.1-6.7 0-1.1.6-2.2.6-2.8 5.6-20.6 13.4-41.8 20.6-61.9 5-14.5 10.6-30.1 15.6-45.2 3.3-9.5 6.7-21.2 10.6-33.5 5-15.6 9.5-31.8 13.9-47.4 2.2-5.6 2.8-11.2 3.9-16.7.6-3.3 1.1-6.1 1.7-8.9v-.6c.6-6.1 1.1-12.8 2.2-20.1l.6-46.3c0-1.1 0-1.7-.6-2.8-1.1-2.8-2.8-5-3.9-6.7-1.7-2.8-2.8-3.9-2.8-6.1 0-3.9 3.9-12.8 6.7-18.4 3.3-7.3 4.5-10.6 4.5-13.4 0-6.7-3.3-10-5-12.3-1.7-1.7-2.2-2.2-2.2-3.9 0-7.8 3.9-9.5 19.5-10.6 2.2 0 4.5-.6 6.1-.6h65.3c2.2 0 4.5.6 6.1.6 15.6 1.1 19.5 2.8 19.5 10.6 0 1.7-.6 2.2-2.2 3.9-2.2 2.2-5 5.6-5 12.3 0 2.8 1.7 6.1 4.5 13.4 2.8 6.1 6.7 15.1 6.7 18.4 0 2.2-.6 3.3-2.8 6.1-1.1 1.7-2.8 3.9-3.9 6.7-.6.6-.6 1.7-.6 2.8l.6 46.9c.6 6.7 1.1 13.4 2.2 19.5v.6l1.7 8.9c.6 5.6 1.7 11.2 3.9 16.7 3.9 15.6 8.9 31.8 13.9 47.4 3.9 12.3 7.8 23.4 10.6 32.9 5 15.1 10 30.1 15.6 45.2 7.3 20.6 14.5 41.3 20.1 61.4l.6 3.3 1.1 6.7c.6 5 1.1 9.5 1.1 10.6 0 3.9 0 5-2.8 7.3-3.3 1.7-3.3 5-1.7 7.3 1.1 1.7 2.2 2.8 2.8 4.5h12.3c-.5-2.4-1.6-5.1-3.3-7.9zm16.2 515.3l-2.2-18.4c-1.7-12.3-6.1-24.5-10-36.8-4.5-12.3-8.4-25.1-10-36.8v-1.1c-.6-5-1.1-10.6-2.2-15.6v-49.6l2.2-32.3c0-2.2 3.3-25.1 6.1-46.3 3.3-22.9 9.5-59.7 12.8-81.4 1.7-9.5 2.2-13.4 2.8-15.6h-11.2c-.6 2.8-1.1 8.4-2.2 13.9-3.9 22.3-10 59.1-13.4 82-3.9 28.4-5 39.6-5.6 44.1v3.3c0 .6 0 2.8-.6 6.1 0 2.8-.6 6.7-.6 11.2v1.7c-.6 3.9-.6 8.4-1.1 13.4v51.9c1.1 4.5 1.7 10 2.2 15.1v1.1c1.1 13.4 6.1 26.2 10 39 3.9 11.7 7.8 23.4 9.5 34.6l1.7 17.8v12.3c0 11.7-5.6 31.8-16.2 36.3-15.6 7.3-32.3 9.5-48.5 11.2l-8.9 1.1c-1.1 0-4.5.6-10.6.6h-5c-11.2 0-28.4.6-50.8.6h-57.4c-5 0-8.4 0-9.5-.6l-8.9-1.1c-16.2-1.7-32.9-3.9-48.5-11.2-10-4.5-15.6-24-15.6-36.3v-12.8l1.7-17.8c1.7-11.2 5.6-22.9 9.5-34.6 4.5-12.8 8.9-26.2 10-39v-2c.6-5 1.1-10 2.2-15.1v-52.4c-.6-4.5-.6-8.9-1.1-12.8-.6-5-.6-9.5-.6-12.3 0-3.3-.6-5.6-.6-6.1v-3.3c-.6-4.5-1.7-15.6-5.6-44.1-3.3-22.9-9.5-59.7-13.4-82-1.1-5.6-1.7-11.2-2.2-13.9h-11.2c.6 2.2 1.1 6.1 2.8 15.6 3.9 21.8 10 58.6 12.8 81.4 3.3 26.2 5.6 44.6 6.1 45.7 0 2.2.6 15.1 2.2 32.3v50.2c-1.1 5-1.7 10.6-2.2 15.6v1.7c-1.1 11.7-5.6 24.5-10 36.8-3.9 12.3-8.4 24.5-10 36.8l-2.2 18.4v13.5c0 9.5 3.9 38.5 22.3 46.3 17.3 8.4 34.6 10 51.9 12.3l8.4 1.1c6.1 1.1 57.4 1.1 67.5 1.1s61.4 0 67.5-1.1c2.8-.6 5.6-.6 8.9-1.1 17.3-2.2 34.6-3.9 51.9-12.3 18.4-7.8 22.3-36.8 22.3-46.3v-12.8c2.8-.6 2.8-1.2 2.8-1.2z"/><path fill="#3657A4" d="M590-9.6s-18.4 65.3-11.2 184.1c0 0 163.4 46.9 312.3 0 0 0 5.6-138.3-11.2-184.1.1 0-132.6 22.3-289.9 0z"/>

              <path id="dasani" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M683.1,101.7c-5.4-0.8-10.9-0.8-16.3,2l8.2-26.4
                L683.1,101.7z M763.3,101.3c-1.9,0.4-5,0-6.2,0c-3.1,0-8.1,1.2-10.4,2.4l8.1-26.9L763.3,101.3z M621.4,63.2
                c15.1,3.6,19,19.6,19,29.3c0,4.8-1.6,10.4-3.5,15.6c-1.6,4.9-10.5,14-16.2,14h-3.1V63.2H621.4z M864,62.8v59.7h-11.3V62.8H864z
                 M805.9,62.8l25.6,37.2V62.8h5v64.5l-35.3-51.6h-0.8v46.9h-4.3V67.6c-1.2-1.2-2.3-3.2-3.5-4.8H805.9z M682.7,62.8
                c4.6,13.6,9.3,27.6,13.9,41.2c1.6,0.5,4.3,0.8,5.4,0.8c2.7,0,4.7,0.4,8.9-2.8c-1.2,5.2-8.2,7.2-12,7.6c-0.4,0.4-0.4,0.8-0.4,0.8
                l3.9,12h-12c-1.6-4.4-3.1-9.2-5-14c-3.9-0.8-11.3-1.6-12.4-1.6c-11.3,0-7.4,2-12.4,15.6h-5l16.7-54.9c-0.8-1.6-1.2-3.2-1.6-4.8
                H682.7z M776.1,103.7c0.8,2,3.9,1.2,5.8,1.2c3.4,0,5,0.4,9.3-3.2c-1.6,5.2-7.8,8-12.4,8c0,0,0,0.4-0.4,0.8l4.3,12h-12.4
                c-1.2-4.4-1.6-10.8-5-14c-3.1-2.8-11.3-1.6-12-1.6c-11.2,0-7.3,1.2-12.4,15.6h-5L752,67.6c-0.4-1.6-0.8-3.2-1.5-4.8
                c10.8,0,12,0,12-0.4C767.2,76,770.7,90.5,776.1,103.7z M622.2,58.8c19.4,3.2,30.7,18,30.7,33.7c0,20-18.3,34-33.3,34h-14.4V58.8
                H622.2z M733.1,53.2c-9.3,3.2-14.7,10.4-14.7,18.4c0,9.6,10.8,28,10.8,39.7c0,0.8-0.4,2.8-0.8,4.4c-0.4,2.4-1.9,7.2-4.3,10
                c-0.8,0.8-8.9,9.2-10.8,9.2h-3.5c5-3.2,8.9-9.6,9.6-14.4v-7.6c-3-11.6-10.4-24.1-10.4-35.7c0-12,9.3-24.5,24-26.5V53.2z"/>

            </svg>
          </div>
          <p class="bottle-line">Refresh, Replenish, Rehydrate</p>
        </div>
      </div>
    </div>
    <!-- Machine Top - Made using CSS3 -->
    <div class="machine-top-perspective">
      <div class="machine-top"></div>
    </div>
    
    <!-- Machine Frame - Made using CSS3 -->
    <div class="machine-frame-container">

      <div class="machine-frame">

        <!-- Machine View -->
        <div class="machine-view">
          <div class="machine-window-container">
            <div class="machine-window">
              
              <div class="machine-window-row">
                <div class="machine-shelf-container">

                  <!-- Coke Shelf -->
                  <div class="machine-shelf">
                    <div class="shelf-block">
                      <div class="shelf-bottles">
                        <img src="http://giovanni.io/coke/graphics/bottles/bottle-coke.svg" alt="">
                        <img src="http://giovanni.io/coke/graphics/bottles/bottle-coke.svg" alt="Coke Bottle">
                      </div>
                      <span class="shelf-hack"></span>
                    </div>
                    <div class="shelf-block">
                      <div class="shelf-bottles shelf-bottles-moving moving-coke">
                        <img class="bottle-back" src="http://giovanni.io/coke/graphics/bottles/bottle-coke.svg" alt="">
                        <img class="bottle-moving" src="http://giovanni.io/coke/graphics/bottles/bottle-coke.svg" alt="">
                        <img class="bottle-front" src="http://giovanni.io/coke/graphics/bottles/bottle-coke.svg" alt="Coke Bottle">
                      </div>
                    </div>
                    <div class="shelf-block">
                      <div class="shelf-bottles">
                        <img src="http://giovanni.io/coke/graphics/bottles/bottle-coke.svg" alt="">
                        <img src="http://giovanni.io/coke/graphics/bottles/bottle-coke.svg" alt="Coke Bottle">
                      </div>
                    </div>
                    <div class="shelf-block">
                      <div class="shelf-bottles">
                        <img src="http://giovanni.io/coke/graphics/bottles/bottle-coke.svg" alt="">
                        <img src="http://giovanni.io/coke/graphics/bottles/bottle-coke.svg" alt="Coke Bottle">
                      </div>
                    </div>
                    <div class="shelf-block">
                      <div class="shelf-bottles">
                        <img src="http://giovanni.io/coke/graphics/bottles/bottle-coke.svg" alt="">
                        <img src="http://giovanni.io/coke/graphics/bottles/bottle-coke.svg" alt="Coke Bottle">
                      </div>
                    </div>
                    <div class="shelf-block">
                      <div class="shelf-bottles">
                        <img src="http://giovanni.io/coke/graphics/bottles/bottle-coke.svg" alt="">
                        <img src="http://giovanni.io/coke/graphics/bottles/bottle-coke.svg" alt="Coke Bottle">
                      </div>
                      <span class="shelf-hack"></span>
                    </div>
                  </div>
                </div>
              </div>
              
              <!-- Sprite Shelf -->
              <div class="machine-window-row">
                <div class="machine-shelf-container">
                  <div class="machine-shelf">
                    <div class="shelf-block">
                      <div class="shelf-bottles">
                        <img src="http://giovanni.io/coke/graphics/bottles/bottle-sprite.svg" alt="">
                        <img src="http://giovanni.io/coke/graphics/bottles/bottle-sprite.svg" alt="sprite Bottle">
                      </div>
                      <span class="shelf-hack"></span>
                    </div>
                    <div class="shelf-block">
                      <div class="shelf-bottles">
                        <img src="http://giovanni.io/coke/graphics/bottles/bottle-sprite.svg" alt="">
                        <img src="http://giovanni.io/coke/graphics/bottles/bottle-sprite.svg" alt="sprite Bottle">
                      </div>
                    </div>
                    <div class="shelf-block">
                      <div class="shelf-bottles shelf-bottles-moving moving-sprite">
                        <img class="bottle-back" src="http://giovanni.io/coke/graphics/bottles/bottle-sprite.svg" alt="">
                        <img class="bottle-moving" src="http://giovanni.io/coke/graphics/bottles/bottle-sprite.svg" alt="">
                        <img class="bottle-front" src="http://giovanni.io/coke/graphics/bottles/bottle-sprite.svg" alt="Coke Bottle">
                      </div>
                    </div>
                    <div class="shelf-block">
                      <div class="shelf-bottles">
                        <img src="http://giovanni.io/coke/graphics/bottles/bottle-sprite.svg" alt="">
                        <img src="http://giovanni.io/coke/graphics/bottles/bottle-sprite.svg" alt="sprite Bottle">
                      </div>
                    </div>
                    <div class="shelf-block">
                      <div class="shelf-bottles">
                        <img src="http://giovanni.io/coke/graphics/bottles/bottle-sprite.svg" alt="">
                        <img src="http://giovanni.io/coke/graphics/bottles/bottle-sprite.svg" alt="sprite Bottle">
                      </div>
                    </div>
                    <div class="shelf-block">
                      <div class="shelf-bottles">
                        <img src="http://giovanni.io/coke/graphics/bottles/bottle-sprite.svg" alt="">
                        <img src="http://giovanni.io/coke/graphics/bottles/bottle-sprite.svg" alt="sprite Bottle">
                      </div>
                      <span class="shelf-hack"></span>
                    </div>
                  </div>
                </div>
              </div>
              
              <!-- Diet Shelf -->
              <div class="machine-window-row">
                <div class="machine-shelf-container">
                  <div class="machine-shelf">
                    <div class="shelf-block">
                      <div class="shelf-bottles">
                        <img src="http://giovanni.io/coke/graphics/bottles/bottle-diet.svg" alt="">
                        <img src="http://giovanni.io/coke/graphics/bottles/bottle-diet.svg" alt="diet Bottle">
                      </div>
                      <span class="shelf-hack"></span>
                    </div>
                    <div class="shelf-block">
                      <div class="shelf-bottles">
                        <img src="http://giovanni.io/coke/graphics/bottles/bottle-diet.svg" alt="">
                        <img src="http://giovanni.io/coke/graphics/bottles/bottle-diet.svg" alt="diet Bottle">
                      </div>
                    </div>
                    <div class="shelf-block">
                      <div class="shelf-bottles">
                        <img src="http://giovanni.io/coke/graphics/bottles/bottle-diet.svg" alt="">
                        <img src="http://giovanni.io/coke/graphics/bottles/bottle-diet.svg" alt="diet Bottle">
                      </div>
                    </div>
                    <div class="shelf-block">
                      <div class="shelf-bottles shelf-bottles-moving moving-diet">
                        <img class="bottle-back" src="http://giovanni.io/coke/graphics/bottles/bottle-diet.svg" alt="">
                        <img class="bottle-moving" src="http://giovanni.io/coke/graphics/bottles/bottle-diet.svg" alt="">
                        <img class="bottle-front" src="http://giovanni.io/coke/graphics/bottles/bottle-diet.svg" alt="Coke Bottle">
                      </div>
                    </div>
                    <div class="shelf-block">
                      <div class="shelf-bottles">
                        <img src="http://giovanni.io/coke/graphics/bottles/bottle-diet.svg" alt="">
                        <img src="http://giovanni.io/coke/graphics/bottles/bottle-diet.svg" alt="diet Bottle">
                      </div>
                    </div>
                    <div class="shelf-block">
                      <div class="shelf-bottles">
                        <img src="http://giovanni.io/coke/graphics/bottles/bottle-diet.svg" alt="">
                        <img src="http://giovanni.io/coke/graphics/bottles/bottle-diet.svg" alt="diet Bottle">
                      </div>
                      <span class="shelf-hack"></span>
                    </div>
                  </div>
                </div>
              </div>

              <div class="machine-window-row">
                <div class="machine-shelf-container">
                  <div class="machine-shelf">
                    <div class="shelf-block">
                      <div class="shelf-bottles">
                        <img src="http://giovanni.io/coke/graphics/bottles/bottle-dasani.svg" alt="">
                        <img src="http://giovanni.io/coke/graphics/bottles/bottle-dasani.svg" alt="dasani Bottle">
                      </div>
                      <span class="shelf-hack"></span>
                    </div>
                    <div class="shelf-block">
                      <div class="shelf-bottles shelf-bottles-moving moving-dasani">
                        <img class="bottle-back" src="http://giovanni.io/coke/graphics/bottles/bottle-dasani.svg" alt="">
                        <img class="bottle-moving" src="http://giovanni.io/coke/graphics/bottles/bottle-dasani.svg" alt="">
                        <img class="bottle-front" src="http://giovanni.io/coke/graphics/bottles/bottle-dasani.svg" alt="Coke Bottle">
                      </div>
                    </div>
                    <div class="shelf-block">
                      <div class="shelf-bottles">
                        <img src="http://giovanni.io/coke/graphics/bottles/bottle-dasani.svg" alt="">
                        <img src="http://giovanni.io/coke/graphics/bottles/bottle-dasani.svg" alt="dasani Bottle">
                      </div>
                    </div>
                    <div class="shelf-block">
                      <div class="shelf-bottles">
                        <img src="http://giovanni.io/coke/graphics/bottles/bottle-dasani.svg" alt="">
                        <img src="http://giovanni.io/coke/graphics/bottles/bottle-dasani.svg" alt="dasani Bottle">
                      </div>
                    </div>
                    <div class="shelf-block">
                      <div class="shelf-bottles">
                        <img src="http://giovanni.io/coke/graphics/bottles/bottle-dasani.svg" alt="">
                        <img src="http://giovanni.io/coke/graphics/bottles/bottle-dasani.svg" alt="dasani Bottle">
                      </div>
                    </div>
                    <div class="shelf-block">
                      <div class="shelf-bottles">
                        <img src="http://giovanni.io/coke/graphics/bottles/bottle-dasani.svg" alt="">
                        <img src="http://giovanni.io/coke/graphics/bottles/bottle-dasani.svg" alt="dasani Bottle">
                      </div>
                      <span class="shelf-hack"></span>
                    </div>
                  </div>
                </div>
              </div>
  
            </div>

            <!-- Machine Pole Wrapper -->
            <div class="machine-pole-wrapper">
              <div class="machine-pole-container">
                <div class="machine-pole">
                  <div class="pole"></div>

                  <!-- Machine Claw Wrapper -->
                  <div class="machine-claw-wrapper">
                    <div class="machine-claw-container">
                      <div class="machine-claw">
                        <img src="http://giovanni.io/coke/graphics/logos/logo-coke.svg" alt="coke-logo">
                      </div>

                      <div class="claw-bottles">
                        <img class="claw-coke" src="http://giovanni.io/coke/graphics/bottles/bottle-coke.svg" alt="">
                        <img class="claw-sprite" src="http://giovanni.io/coke/graphics/bottles/bottle-sprite.svg" alt="">
                        <img class="claw-diet" src="http://giovanni.io/coke/graphics/bottles/bottle-diet.svg" alt="">
                        <img class="claw-dasani" src="http://giovanni.io/coke/graphics/bottles/bottle-dasani.svg" alt="">
                      </div>
                    </div>
                  </div>
                  <!-- End Machine Claw Wrapper -->

                </div>
              </div>
            </div>

            <!-- End Machine Pole -->
          </div>

          <!-- Machine Bottom -->
          <div class="machine-bottom">
            <img src="http://giovanni.io/coke/graphics/logos/logo-coke-red.svg" alt="red-logo">
          </div>
        </div>
        <!-- End Machine View -->

      </div>

    </div>
    
    <!-- Machine Side - Made using CSS3 -->
    <div class="machine-side">
      <div class="machine-side-top">
        <img src="http://giovanni.io/coke/graphics/side-top.svg" alt="Side Top">
      </div>
      <!-- Machine Controls - Made using CSS3 -->
      <div class="machine-controls">
        <span class="tooltip choose-drink">
          <span class="tooltip-text">Choose<br />your<br />drink</span>
        </span>

        <span class="tooltip drink-me">
          <span class="tooltip-text">Drink<br />me</span>
        </span>
        <div class="machine-buttons">

          

          <!-- Coke Button -->
          <a href="javascript:void(null)" class="activator-coke">
            <img src="http://giovanni.io/coke/graphics/logos/logo-coke.svg" alt="Coke Logo">
          </a>

          <!-- Sprite Button -->
          <a href="javascript:void(null)" class="activator-sprite">
            <img src="http://giovanni.io/coke/graphics/logos/logo-sprite.svg" alt="Sprite Logo">
          </a>

          <!-- Diet Button -->
          <a href="javascript:void(null)" class="activator-diet">
            <img src="http://giovanni.io/coke/graphics/logos/logo-diet.svg" alt="Diet Logo">
          </a>

          <!-- Dasani Button -->
          <a href="javascript:void(null)" class="activator-dasani">
            <img src="http://giovanni.io/coke/graphics/logos/logo-dasani.svg" alt="Dasani Logo">
          </a>

        </div>

        <!-- Glass View - Made using CSS3 -->
        <div class="machine-glassview">
          
          <!-- Glass Container Depth - Made using CSS3 -->
          <div class="glass-container-holder">
            <div class="depth-container">
              <div class="top-depth"></div>
              <div class="bottom-depth"></div>
            </div>
          </div>

          <!-- Bottles Container -->
          <div class="bottles-container">
            <img class="bottle-coke" src="http://giovanni.io/coke/graphics/bottles/bottle-coke.svg" alt="Coke Bottle">
            <img class="bottle-sprite" src="http://giovanni.io/coke/graphics/bottles/bottle-sprite.svg" alt="sprite Bottle">
            <img class="bottle-diet" src="http://giovanni.io/coke/graphics/bottles/bottle-diet.svg" alt="diet Bottle">
            <img class="bottle-dasani" src="http://giovanni.io/coke/graphics/bottles/bottle-dasani.svg" alt="dasani Bottle">
          </div>

          <!-- Glass Cover -->
          <div class="glass-cover"></div>
        </div>
        <!-- End Glass View -->
        
      </div>

      <div class="machine-side-bottom">
        <img src="http://giovanni.io/coke/graphics/change-pocket.svg" alt="Change is Good">
        <span class="machine-bottom-text">change<br />is<br />good</span>
      </div>

    </div>
  </div>
!

CSS 

              
                /* Importing Files/Plugins :-
----------------------------- */
html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/* Connecting Fonts      :-
--------------------------- */
@font-face {
  font-family: 'Gotham';
  src: url("http://kryzal.com/joe/common/fonts/Gotham-Book_gdi.eot");
  src: url("http://kryzal.com/joe/common/fonts/Gotham-Book_gdi.eot?#iefix") format('embedded-opentype'), url("http://kryzal.com/joe/common/fonts/Gotham-Book_gdi.woff") format('woff'), url("http://kryzal.com/joe/common/fonts/Gotham-Book_gdi.ttf") format('truetype'), url("http://kryzal.com/joe/common/fonts/Gotham-Book_gdi.svg#Gotham-Book") format('svg');
  font-weight: 325;
  font-style: normal;
  font-stretch: normal;
}
/* Variables             :-
--------------------------- */
body {
  font-family: 'Gotham', Arial, sans-serif;
}
/* Colors       :-
--------------------------- */
/* Zindex Levels         :-
--------------------------- */
/* Mixins & Functions    :-
--------------------------- */
/* Machine Layout        :-
--------------------------- */
.machine-container {
  position: relative;
  margin: 6em auto;
  margin-bottom: 0;
  background-color: #444;
  width: 550px;
  height: 750px;
}
@media (max-height: 800px) {
  .machine-container {
    -webkit-transform: scale(0.85) translateY(-12%);
    -moz-transform: scale(0.85) translateY(-12%);
    -o-transform: scale(0.85) translateY(-12%);
    -ms-transform: scale(0.85) translateY(-12%);
    transform: scale(0.85) translateY(-12%);
  }
}
@media (max-height: 660px) {
  .machine-container {
    -webkit-transform: scale(0.65) translateY(-35%);
    -moz-transform: scale(0.65) translateY(-35%);
    -o-transform: scale(0.65) translateY(-35%);
    -ms-transform: scale(0.65) translateY(-35%);
    transform: scale(0.65) translateY(-35%);
  }
}
@media (max-width: 600px) {
  .machine-container {
    -webkit-transform: scale(0.6) translateY(-35%);
    -moz-transform: scale(0.6) translateY(-35%);
    -o-transform: scale(0.6) translateY(-35%);
    -ms-transform: scale(0.6) translateY(-35%);
    transform: scale(0.6) translateY(-35%);
  }
}
@media (max-width: 500px) {
  .machine-container {
    -webkit-transform: scale(0.55) translateY(-45%) translateX(-30%);
    -moz-transform: scale(0.55) translateY(-45%) translateX(-30%);
    -o-transform: scale(0.55) translateY(-45%) translateX(-30%);
    -ms-transform: scale(0.55) translateY(-45%) translateX(-30%);
    transform: scale(0.55) translateY(-45%) translateX(-30%);
  }
}
.machine-top-perspective {
  -webkit-perspective: 600px;
  -moz-perspective: 600px;
  -ms-perspective: 600px;
  perspective: 600px;
  position: absolute;
  width: 100%;
  top: -86px;
  left: 0;
}
.machine-top {
  background-color: #666;
  width: 90.3%;
  margin: 0 auto;
  height: 125px;
  -webkit-transform: rotateX(70deg);
  -moz-transform: rotateX(70deg);
  -o-transform: rotateX(70deg);
  -ms-transform: rotateX(70deg);
  transform: rotateX(70deg);
}
/* Machine View          :-
--------------------------- */
.machine-frame-container {
  padding-right: 19%;
  height: 100%;
}
.machine-frame {
  width: 100%;
  height: 100%;
  padding: 1em;
}
.machine-view {
  background-color: #eee;
  height: 100%;
  width: 100%;
  position: relative;
  padding: 1em;
}
.machine-window-container {
  height: 70%;
  width: 100%;
  max-width: 100%;
  min-width: 100%;
  overflow: hidden;
  -webkit-border-radius: 0.5em;
  border-radius: 0.5em;
  position: relative;
  opacity: 0.99;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=99)";
  filter: alpha(opacity=99);
}
.machine-window {
  background-color: #fff;
  position: relative;
  -webkit-border-radius: 0.5em;
  border-radius: 0.5em;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.machine-shelf-container {
  height: 100%;
  position: relative;
}
.machine-shelf {
  width: 100%;
  height: 70%;
  position: absolute;
  bottom: 9px;
}
.machine-shelf:after {
  content: '';
  display: block;
  height: 30px;
  width: 100%;
  background-color: #eee;
  position: absolute;
  bottom: -9px;
}
.machine-shelf .shelf-block:first-child .shelf-hack {
  left: 0;
  border-width: 70px 55px 0 0;
  border-color: #fff transparent transparent transparent;
}
.machine-shelf .shelf-block:first-child:after {
  -webkit-border-radius: 0 0 1.45em 0;
  border-radius: 0 0 1.45em 0;
  left: 0;
  width: 94%;
}
.machine-shelf .shelf-block:last-child:after {
  -webkit-border-radius: 0 0 0 1.45em;
  border-radius: 0 0 0 1.45em;
  left: auto;
  right: -1px;
  width: 94.5%;
}
.machine-shelf .shelf-block:last-child .shelf-hack {
  right: -1px;
  border-width: 0 55px 70px 0;
  border-color: transparent #fff transparent transparent;
}
.shelf-hack {
  display: inline-block;
  height: 100%;
  -webkit-border-radius: 0;
  border-radius: 0;
  position: absolute;
  width: 0;
  bottom: 0;
  height: 0;
  border-style: solid;
  background-color: transparent;
  margin-left: 0;
  z-index: 6;
}
.shelf-block {
  height: 100%;
  width: 16.6666666%;
  display: inline-block;
  float: left;
  position: relative;
}
.shelf-block:after {
  content: '';
  width: 87.5%;
  height: 65%;
  background-color: #b7b7b7;
  display: inline-block;
  position: absolute;
  bottom: -2px;
  left: 4px;
  z-index: 4;
  -webkit-border-radius: 0 0 1.45em 1.45em;
  border-radius: 0 0 1.45em 1.45em;
}
.shelf-block:before {
  content: '';
  -webkit-border-radius: 1em;
  border-radius: 1em;
  height: 80%;
  width: 8px;
  position: absolute;
  left: 0;
  bottom: 0;
  margin-left: -4px;
  display: inline-block;
  background-color: #eee;
}
.machine-window-row {
  height: 24%;
  margin-bottom: 1.5%;
}
.machine-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  max-width: 100%;
  height: 25%;
  overflow: hidden;
}
.machine-bottom img {
  position: absolute;
  left: -18%;
  bottom: -5%;
  display: inline-block;
  width: 135%;
}
/* Machine Side          :-
--------------------------- */
.machine-side {
  background: -webkit-linear-gradient(right, #f80506, #ba0405);
  background: -moz-linear-gradient(right, #f80506, #ba0405);
  background: -o-linear-gradient(right, #f80506, #ba0405);
  background: -ms-linear-gradient(right, #f80506, #ba0405);
  background: linear-gradient(to left, #f80506, #ba0405);
  position: absolute;
  top: 0;
  right: 0;
  width: 19%;
  height: 100%;
  padding: 0.75em;
  text-align: center;
}
.machine-side-top {
  width: 100%;
  padding-top: 1.5em;
  padding-bottom: 1.5em;
}
.machine-side-top img {
  width: 35px;
  height: auto;
  display: inline-block;
}
.machine-side-bottom {
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0;
  padding-top: 1.5em;
  padding-bottom: 2.5em;
}
.machine-side-bottom img {
  display: inline-block;
  width: 35px;
  height: auto;
}
.machine-bottom-text {
  margin-top: 0.5em;
  color: #fff;
  font-size: 13px;
  width: 100%;
  display: inline-block;
}
.machine-controls {
  width: 100%;
  max-width: 100%;
  padding: 2.25em 0.5em;
  -webkit-border-radius: 5em;
  border-radius: 5em;
  display: inline-block;
  background-color: #eee;
}
/* Bottle Buttons        :-
--------------------------- */
[class^="activator-"],
[class*=" activator-"] {
  display: inline-block;
  width: 100%;
  -webkit-border-radius: 0.3em;
  border-radius: 0.3em;
  padding: 0.25em;
  margin-bottom: 0.35em;
  border-bottom: 0.2em solid transparent;
}
[class^="activator-"] img,
[class*=" activator-"] img {
  vertical-align: top;
  display: inline-block;
  width: 70%;
}
.activator-coke {
  background-color: #f80506;
  border-bottom-color: #df0505;
}
.activator-sprite {
  background-color: #00b945;
  border-bottom-color: #00a73e;
}
.activator-diet {
  background-color: #bcbdc0;
  border-bottom-color: #a8aaae;
}
.activator-dasani {
  background-color: #5e7eca;
  border-bottom-color: #486cc3;
}
/* Glass View            :-
--------------------------- */
.machine-glassview {
  margin-top: 0.5em;
  height: 120px;
  width: 100%;
  overflow: hidden;
  position: relative;
}
.glass-container-holder {
  height: 100%;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}
.depth-container {
  background-color: #afafaf;
  width: 100%;
  height: 100%;
  -webkit-perspective: 45px;
  -moz-perspective: 45px;
  -ms-perspective: 45px;
  perspective: 45px;
  overflow: hidden;
}
.top-depth {
  height: 84%;
  width: 70%;
  background-color: transparent;
  border: 1px solid #7b7b7b;
  border-top: transparent;
  border-bottom: transparent;
  margin: 0 auto;
}
.bottom-depth {
  width: 100%;
  margin: 0 auto;
  background-color: transparent;
  height: 38px;
  -webkit-transform: rotateX(83deg);
  -moz-transform: rotateX(83deg);
  -o-transform: rotateX(83deg);
  -ms-transform: rotateX(83deg);
  transform: rotateX(83deg);
  border: 1px solid #7b7b7b;
}
.glass-cover {
  opacity: 0.65;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
  filter: alpha(opacity=65);
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  background: -webkit-linear-gradient(top, #bfffff, #fff);
  background: -moz-linear-gradient(top, #bfffff, #fff);
  background: -o-linear-gradient(top, #bfffff, #fff);
  background: -ms-linear-gradient(top, #bfffff, #fff);
  background: linear-gradient(to bottom, #bfffff, #fff);
  width: 100%;
  height: 100%;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -webkit-transform: translateY(0%);
  -moz-transform: translateY(0%);
  -o-transform: translateY(0%);
  -ms-transform: translateY(0%);
  transform: translateY(0%);
}
.bottles-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
}
.bottles-container >img {
  position: absolute;
  top: 14%;
  left: 50%;
  margin-left: -25%;
  max-width: 30px;
  height: 94px;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  transition: all 0.2s ease;
  -webkit-transform: translateY(-7em);
  -moz-transform: translateY(-7em);
  -o-transform: translateY(-7em);
  -ms-transform: translateY(-7em);
  transform: translateY(-7em);
}
.bottles-container >img:hover {
  cursor: pointer;
  opacity: 0.85;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
  filter: alpha(opacity=85);
}
.machine-pole-wrapper {
  z-index: 100;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
}
.machine-pole-container {
  position: relative;
  width: 100%;
  height: 100%;
}
.machine-pole {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  -ms-transition: all 1s;
  transition: all 1s;
  -webkit-transform: translateX(-3%);
  -moz-transform: translateX(-3%);
  -o-transform: translateX(-3%);
  -ms-transform: translateX(-3%);
  transform: translateX(-3%);
}
.pole {
  position: absolute;
  width: 0.75em;
  left: 0;
  top: 0;
  height: 100%;
  background-color: #666;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  -ms-transition: all 1s;
  transition: all 1s;
  -webkit-box-shadow: 4px 3px 8px rgba(0,0,0,0.45);
  box-shadow: 4px 3px 8px rgba(0,0,0,0.45);
}
.machine-claw-wrapper {
  z-index: 100;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
}
.machine-claw-container {
  position: relative;
  width: 100%;
  height: 100%;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
  -webkit-transform: translateY(10%);
  -moz-transform: translateY(10%);
  -o-transform: translateY(10%);
  -ms-transform: translateY(10%);
  transform: translateY(10%);
}
.claw-bottles {
  width: 1.65em;
  height: 77px;
  display: inline-block;
  position: absolute;
  left: 25px;
  opacity: 1;
  -ms-filter: none;
  filter: none;
  top: -26px;
  z-index: 4;
}
.claw-bottles img {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  width: 100%;
  position: absolute;
  display: inline-block;
}
.machine-claw {
  width: 3.25em;
  height: 3.25em;
  padding: 0.35em;
  background-color: #f80506;
  position: absolute;
  border-bottom: 0.25em solid #666;
  left: 0.75em;
  top: 0;
  z-index: 6;
}
.machine-claw >img {
  display: inline-block;
  margin-top: 16%;
  width: 100%;
}
.machine-claw:after {
  content: '';
  color: #000;
  position: absolute;
  right: 0;
  top: -12px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 0 0 12px;
  border-color: transparent transparent transparent #c60405;
}
.machine-claw:before {
  content: '';
  color: #000;
  position: absolute;
  left: 0;
  top: -12px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 12px 0 0;
  border-color: transparent #c60405 transparent transparent;
}
/* Bottles Section       :-
--------------------------- */
.shelf-block {
  background-color: transparent;
}
.shelf-bottles {
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0.25em;
  width: 100%;
  z-index: 12;
}
.shelf-bottles img {
  width: 1.65em;
  position: absolute;
  left: 44%;
  margin-left: -0.825em;
}
.shelf-bottles img:first-child {
  margin-left: -0.35em;
  margin-top: -0.35em;
}
.grapping-bottle .glass-cover {
  -webkit-animation: 5s openGlass linear;
  -moz-animation: 5s openGlass linear;
  -o-animation: 5s openGlass linear;
  -ms-animation: 5s openGlass linear;
  animation: 5s openGlass linear;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.grapping-bottle .hide-bottle {
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  transition: all 0.2s ease;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}
.grapping-bottle .choose-drink {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}
.grapping-bottle .drink-me {
  opacity: 1;
  -ms-filter: none;
  filter: none;
  -webkit-transition-delay: 5s;
  -moz-transition-delay: 5s;
  -o-transition-delay: 5s;
  -ms-transition-delay: 5s;
  transition-delay: 5s;
}
.moving-bottles .bottle-back {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-animation: 5s bottleBack linear;
  -moz-animation: 5s bottleBack linear;
  -o-animation: 5s bottleBack linear;
  -ms-animation: 5s bottleBack linear;
  animation: 5s bottleBack linear;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.moving-bottles .bottle-moving {
  margin-top: -0.35em;
  margin-left: -0.35em !important;
  -webkit-animation: 5s bottleMoving linear;
  -moz-animation: 5s bottleMoving linear;
  -o-animation: 5s bottleMoving linear;
  -ms-animation: 5s bottleMoving linear;
  animation: 5s bottleMoving linear;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.moving-bottles .bottle-front {
  opacity: 1;
  -ms-filter: none;
  filter: none;
  -webkit-animation: 5s bottleFront linear;
  -moz-animation: 5s bottleFront linear;
  -o-animation: 5s bottleFront linear;
  -ms-animation: 5s bottleFront linear;
  animation: 5s bottleFront linear;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.grab-bottle-coke .switching-coke {
  -webkit-animation: 5s cokeToGlass linear;
  -moz-animation: 5s cokeToGlass linear;
  -o-animation: 5s cokeToGlass linear;
  -ms-animation: 5s cokeToGlass linear;
  animation: 5s cokeToGlass linear;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.grab-bottle-coke .machine-claw-container {
  -webkit-animation: 5s clawToCoke linear;
  -moz-animation: 5s clawToCoke linear;
  -o-animation: 5s clawToCoke linear;
  -ms-animation: 5s clawToCoke linear;
  animation: 5s clawToCoke linear;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.grab-bottle-coke .machine-pole {
  -webkit-animation: 5s poleToCoke linear;
  -moz-animation: 5s poleToCoke linear;
  -o-animation: 5s poleToCoke linear;
  -ms-animation: 5s poleToCoke linear;
  animation: 5s poleToCoke linear;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.grab-bottle-coke .claw-coke {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-animation: 5s clawChangeBottle linear;
  -moz-animation: 5s clawChangeBottle linear;
  -o-animation: 5s clawChangeBottle linear;
  -ms-animation: 5s clawChangeBottle linear;
  animation: 5s clawChangeBottle linear;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.grab-bottle-coke .bottle-coke {
  -webkit-animation: 5s bottleInGlass linear;
  -moz-animation: 5s bottleInGlass linear;
  -o-animation: 5s bottleInGlass linear;
  -ms-animation: 5s bottleInGlass linear;
  animation: 5s bottleInGlass linear;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.grab-bottle-sprite .switching-coke {
  -webkit-animation: 5s spriteToGlass linear;
  -moz-animation: 5s spriteToGlass linear;
  -o-animation: 5s spriteToGlass linear;
  -ms-animation: 5s spriteToGlass linear;
  animation: 5s spriteToGlass linear;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.grab-bottle-sprite .machine-claw-container {
  -webkit-animation: 5s clawToSprite linear;
  -moz-animation: 5s clawToSprite linear;
  -o-animation: 5s clawToSprite linear;
  -ms-animation: 5s clawToSprite linear;
  animation: 5s clawToSprite linear;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.grab-bottle-sprite .machine-pole {
  -webkit-animation: 5s poleToSprite linear;
  -moz-animation: 5s poleToSprite linear;
  -o-animation: 5s poleToSprite linear;
  -ms-animation: 5s poleToSprite linear;
  animation: 5s poleToSprite linear;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.grab-bottle-sprite .claw-sprite {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-animation: 5s clawChangeBottle linear;
  -moz-animation: 5s clawChangeBottle linear;
  -o-animation: 5s clawChangeBottle linear;
  -ms-animation: 5s clawChangeBottle linear;
  animation: 5s clawChangeBottle linear;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.grab-bottle-sprite .bottle-sprite {
  -webkit-animation: 5s bottleInGlass linear;
  -moz-animation: 5s bottleInGlass linear;
  -o-animation: 5s bottleInGlass linear;
  -ms-animation: 5s bottleInGlass linear;
  animation: 5s bottleInGlass linear;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.grab-bottle-diet .switching-coke {
  -webkit-animation: 5s dietToGlass linear;
  -moz-animation: 5s dietToGlass linear;
  -o-animation: 5s dietToGlass linear;
  -ms-animation: 5s dietToGlass linear;
  animation: 5s dietToGlass linear;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.grab-bottle-diet .machine-claw-container {
  -webkit-animation: 5s clawToDiet linear;
  -moz-animation: 5s clawToDiet linear;
  -o-animation: 5s clawToDiet linear;
  -ms-animation: 5s clawToDiet linear;
  animation: 5s clawToDiet linear;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.grab-bottle-diet .machine-pole {
  -webkit-animation: 5s poleToDiet linear;
  -moz-animation: 5s poleToDiet linear;
  -o-animation: 5s poleToDiet linear;
  -ms-animation: 5s poleToDiet linear;
  animation: 5s poleToDiet linear;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.grab-bottle-diet .claw-diet {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-animation: 5s clawChangeBottle linear;
  -moz-animation: 5s clawChangeBottle linear;
  -o-animation: 5s clawChangeBottle linear;
  -ms-animation: 5s clawChangeBottle linear;
  animation: 5s clawChangeBottle linear;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.grab-bottle-diet .bottle-diet {
  -webkit-animation: 5s bottleInGlass linear;
  -moz-animation: 5s bottleInGlass linear;
  -o-animation: 5s bottleInGlass linear;
  -ms-animation: 5s bottleInGlass linear;
  animation: 5s bottleInGlass linear;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.grab-bottle-dasani .switching-coke {
  -webkit-animation: 5s dietToGlass linear;
  -moz-animation: 5s dietToGlass linear;
  -o-animation: 5s dietToGlass linear;
  -ms-animation: 5s dietToGlass linear;
  animation: 5s dietToGlass linear;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.grab-bottle-dasani .machine-claw-container {
  -webkit-animation: 5s clawToDasani linear;
  -moz-animation: 5s clawToDasani linear;
  -o-animation: 5s clawToDasani linear;
  -ms-animation: 5s clawToDasani linear;
  animation: 5s clawToDasani linear;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.grab-bottle-dasani .machine-pole {
  -webkit-animation: 5s poleToDasani linear;
  -moz-animation: 5s poleToDasani linear;
  -o-animation: 5s poleToDasani linear;
  -ms-animation: 5s poleToDasani linear;
  animation: 5s poleToDasani linear;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.grab-bottle-dasani .claw-dasani {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-animation: 5s clawChangeBottle linear;
  -moz-animation: 5s clawChangeBottle linear;
  -o-animation: 5s clawChangeBottle linear;
  -ms-animation: 5s clawChangeBottle linear;
  animation: 5s clawChangeBottle linear;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.grab-bottle-dasani .bottle-dasani {
  -webkit-animation: 5s bottleInGlass linear;
  -moz-animation: 5s bottleInGlass linear;
  -o-animation: 5s bottleInGlass linear;
  -ms-animation: 5s bottleInGlass linear;
  animation: 5s bottleInGlass linear;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.tooltip {
  position: absolute;
  right: -6em;
  width: 5em;
  background-color: #df0505;
  height: auto;
  padding: 0.75em;
  text-align: center;
  -webkit-border-radius: 0.25em;
  border-radius: 0.25em;
  -webkit-animation: 4s tooltipFloat linear infinite;
  -moz-animation: 4s tooltipFloat linear infinite;
  -o-animation: 4s tooltipFloat linear infinite;
  -ms-animation: 4s tooltipFloat linear infinite;
  animation: 4s tooltipFloat linear infinite;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.tooltip:after {
  content: '';
  position: absolute;
  left: 10%;
  top: 95%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 20px 15px;
  border-color: transparent transparent transparent #df0505;
  -webkit-transform: rotate(20deg);
  -moz-transform: rotate(20deg);
  -o-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  transform: rotate(20deg);
}
.tooltip-text {
  color: #fff;
  text-align: center;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.25em;
  display: inline-block;
  width: 100%;
  font-size: 10px;
  font-family: arial, sans-serif;
  font-size: 13px;
}
.drink-me {
  top: 56%;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}
.choose-drink {
  opacity: 1;
  -ms-filter: none;
  filter: none;
}
@-moz-keyframes bottleInGlass {
  0%, 60% {
    -webkit-transform: translateY(-7em);
    -moz-transform: translateY(-7em);
    -o-transform: translateY(-7em);
    -ms-transform: translateY(-7em);
    transform: translateY(-7em);
  }
  100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
@-webkit-keyframes bottleInGlass {
  0%, 60% {
    -webkit-transform: translateY(-7em);
    -moz-transform: translateY(-7em);
    -o-transform: translateY(-7em);
    -ms-transform: translateY(-7em);
    transform: translateY(-7em);
  }
  100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
@-o-keyframes bottleInGlass {
  0%, 60% {
    -webkit-transform: translateY(-7em);
    -moz-transform: translateY(-7em);
    -o-transform: translateY(-7em);
    -ms-transform: translateY(-7em);
    transform: translateY(-7em);
  }
  100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes bottleInGlass {
  0%, 60% {
    -webkit-transform: translateY(-7em);
    -moz-transform: translateY(-7em);
    -o-transform: translateY(-7em);
    -ms-transform: translateY(-7em);
    transform: translateY(-7em);
  }
  100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
@-moz-keyframes openGlass {
  0%, 95% {
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -o-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);
  }
  100% {
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}
@-webkit-keyframes openGlass {
  0%, 95% {
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -o-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);
  }
  100% {
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}
@-o-keyframes openGlass {
  0%, 95% {
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -o-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);
  }
  100% {
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}
@keyframes openGlass {
  0%, 95% {
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -o-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);
  }
  100% {
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}
@-moz-keyframes clawChangeBottle {
  0%, 20% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  24%, 60% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  62%, 100% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
}
@-webkit-keyframes clawChangeBottle {
  0%, 20% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  24%, 60% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  62%, 100% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
}
@-o-keyframes clawChangeBottle {
  0%, 20% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  24%, 60% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  62%, 100% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
}
@keyframes clawChangeBottle {
  0%, 20% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  24%, 60% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  62%, 100% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
}
@-moz-keyframes bottleBack {
  0%, 85% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  100% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@-webkit-keyframes bottleBack {
  0%, 85% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  100% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@-o-keyframes bottleBack {
  0%, 85% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  100% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@keyframes bottleBack {
  0%, 85% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  100% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@-moz-keyframes bottleMoving {
  0%, 74% {
    -webkit-transform: translateY(0) translateX(0);
    -moz-transform: translateY(0) translateX(0);
    -o-transform: translateY(0) translateX(0);
    -ms-transform: translateY(0) translateX(0);
    transform: translateY(0) translateX(0);
  }
  75% {
    -webkit-transform: translateY(0.05em) translateX(-0.05em);
    -moz-transform: translateY(0.05em) translateX(-0.05em);
    -o-transform: translateY(0.05em) translateX(-0.05em);
    -ms-transform: translateY(0.05em) translateX(-0.05em);
    transform: translateY(0.05em) translateX(-0.05em);
  }
  100% {
    -webkit-transform: translateY(0.41em) translateX(-0.45em);
    -moz-transform: translateY(0.41em) translateX(-0.45em);
    -o-transform: translateY(0.41em) translateX(-0.45em);
    -ms-transform: translateY(0.41em) translateX(-0.45em);
    transform: translateY(0.41em) translateX(-0.45em);
  }
}
@-webkit-keyframes bottleMoving {
  0%, 74% {
    -webkit-transform: translateY(0) translateX(0);
    -moz-transform: translateY(0) translateX(0);
    -o-transform: translateY(0) translateX(0);
    -ms-transform: translateY(0) translateX(0);
    transform: translateY(0) translateX(0);
  }
  75% {
    -webkit-transform: translateY(0.05em) translateX(-0.05em);
    -moz-transform: translateY(0.05em) translateX(-0.05em);
    -o-transform: translateY(0.05em) translateX(-0.05em);
    -ms-transform: translateY(0.05em) translateX(-0.05em);
    transform: translateY(0.05em) translateX(-0.05em);
  }
  100% {
    -webkit-transform: translateY(0.41em) translateX(-0.45em);
    -moz-transform: translateY(0.41em) translateX(-0.45em);
    -o-transform: translateY(0.41em) translateX(-0.45em);
    -ms-transform: translateY(0.41em) translateX(-0.45em);
    transform: translateY(0.41em) translateX(-0.45em);
  }
}
@-o-keyframes bottleMoving {
  0%, 74% {
    -webkit-transform: translateY(0) translateX(0);
    -moz-transform: translateY(0) translateX(0);
    -o-transform: translateY(0) translateX(0);
    -ms-transform: translateY(0) translateX(0);
    transform: translateY(0) translateX(0);
  }
  75% {
    -webkit-transform: translateY(0.05em) translateX(-0.05em);
    -moz-transform: translateY(0.05em) translateX(-0.05em);
    -o-transform: translateY(0.05em) translateX(-0.05em);
    -ms-transform: translateY(0.05em) translateX(-0.05em);
    transform: translateY(0.05em) translateX(-0.05em);
  }
  100% {
    -webkit-transform: translateY(0.41em) translateX(-0.45em);
    -moz-transform: translateY(0.41em) translateX(-0.45em);
    -o-transform: translateY(0.41em) translateX(-0.45em);
    -ms-transform: translateY(0.41em) translateX(-0.45em);
    transform: translateY(0.41em) translateX(-0.45em);
  }
}
@keyframes bottleMoving {
  0%, 74% {
    -webkit-transform: translateY(0) translateX(0);
    -moz-transform: translateY(0) translateX(0);
    -o-transform: translateY(0) translateX(0);
    -ms-transform: translateY(0) translateX(0);
    transform: translateY(0) translateX(0);
  }
  75% {
    -webkit-transform: translateY(0.05em) translateX(-0.05em);
    -moz-transform: translateY(0.05em) translateX(-0.05em);
    -o-transform: translateY(0.05em) translateX(-0.05em);
    -ms-transform: translateY(0.05em) translateX(-0.05em);
    transform: translateY(0.05em) translateX(-0.05em);
  }
  100% {
    -webkit-transform: translateY(0.41em) translateX(-0.45em);
    -moz-transform: translateY(0.41em) translateX(-0.45em);
    -o-transform: translateY(0.41em) translateX(-0.45em);
    -ms-transform: translateY(0.41em) translateX(-0.45em);
    transform: translateY(0.41em) translateX(-0.45em);
  }
}
@-moz-keyframes bottleFront {
  0%, 20% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  30%, 100% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
}
@-webkit-keyframes bottleFront {
  0%, 20% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  30%, 100% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
}
@-o-keyframes bottleFront {
  0%, 20% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  30%, 100% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
}
@keyframes bottleFront {
  0%, 20% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  30%, 100% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
}
@-moz-keyframes poleToCoke {
  0% {
    -webkit-transform: translateX(-3%);
    -moz-transform: translateX(-3%);
    -o-transform: translateX(-3%);
    -ms-transform: translateX(-3%);
    transform: translateX(-3%);
  }
  10% {
    -webkit-transform: translateX(10%);
    -moz-transform: translateX(10%);
    -o-transform: translateX(10%);
    -ms-transform: translateX(10%);
    transform: translateX(10%);
  }
  20% {
    -webkit-transform: translateX(14%);
    -moz-transform: translateX(14%);
    -o-transform: translateX(14%);
    -ms-transform: translateX(14%);
    transform: translateX(14%);
  }
  30% {
    -webkit-transform: translateX(14%);
    -moz-transform: translateX(14%);
    -o-transform: translateX(14%);
    -ms-transform: translateX(14%);
    transform: translateX(14%);
  }
  40% {
    -webkit-transform: translateX(60%);
    -moz-transform: translateX(60%);
    -o-transform: translateX(60%);
    -ms-transform: translateX(60%);
    transform: translateX(60%);
  }
  50% {
    -webkit-transform: translateX(95%);
    -moz-transform: translateX(95%);
    -o-transform: translateX(95%);
    -ms-transform: translateX(95%);
    transform: translateX(95%);
  }
  60% {
    -webkit-transform: translateX(105%);
    -moz-transform: translateX(105%);
    -o-transform: translateX(105%);
    -ms-transform: translateX(105%);
    transform: translateX(105%);
  }
  70% {
    -webkit-transform: translateX(105%);
    -moz-transform: translateX(105%);
    -o-transform: translateX(105%);
    -ms-transform: translateX(105%);
    transform: translateX(105%);
  }
  80% {
    -webkit-transform: translateX(70%);
    -moz-transform: translateX(70%);
    -o-transform: translateX(70%);
    -ms-transform: translateX(70%);
    transform: translateX(70%);
  }
  90% {
    -webkit-transform: translateX(50%);
    -moz-transform: translateX(50%);
    -o-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
  }
  100% {
    -webkit-transform: translateX(-3%);
    -moz-transform: translateX(-3%);
    -o-transform: translateX(-3%);
    -ms-transform: translateX(-3%);
    transform: translateX(-3%);
  }
}
@-webkit-keyframes poleToCoke {
  0% {
    -webkit-transform: translateX(-3%);
    -moz-transform: translateX(-3%);
    -o-transform: translateX(-3%);
    -ms-transform: translateX(-3%);
    transform: translateX(-3%);
  }
  10% {
    -webkit-transform: translateX(10%);
    -moz-transform: translateX(10%);
    -o-transform: translateX(10%);
    -ms-transform: translateX(10%);
    transform: translateX(10%);
  }
  20% {
    -webkit-transform: translateX(14%);
    -moz-transform: translateX(14%);
    -o-transform: translateX(14%);
    -ms-transform: translateX(14%);
    transform: translateX(14%);
  }
  30% {
    -webkit-transform: translateX(14%);
    -moz-transform: translateX(14%);
    -o-transform: translateX(14%);
    -ms-transform: translateX(14%);
    transform: translateX(14%);
  }
  40% {
    -webkit-transform: translateX(60%);
    -moz-transform: translateX(60%);
    -o-transform: translateX(60%);
    -ms-transform: translateX(60%);
    transform: translateX(60%);
  }
  50% {
    -webkit-transform: translateX(95%);
    -moz-transform: translateX(95%);
    -o-transform: translateX(95%);
    -ms-transform: translateX(95%);
    transform: translateX(95%);
  }
  60% {
    -webkit-transform: translateX(105%);
    -moz-transform: translateX(105%);
    -o-transform: translateX(105%);
    -ms-transform: translateX(105%);
    transform: translateX(105%);
  }
  70% {
    -webkit-transform: translateX(105%);
    -moz-transform: translateX(105%);
    -o-transform: translateX(105%);
    -ms-transform: translateX(105%);
    transform: translateX(105%);
  }
  80% {
    -webkit-transform: translateX(70%);
    -moz-transform: translateX(70%);
    -o-transform: translateX(70%);
    -ms-transform: translateX(70%);
    transform: translateX(70%);
  }
  90% {
    -webkit-transform: translateX(50%);
    -moz-transform: translateX(50%);
    -o-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
  }
  100% {
    -webkit-transform: translateX(-3%);
    -moz-transform: translateX(-3%);
    -o-transform: translateX(-3%);
    -ms-transform: translateX(-3%);
    transform: translateX(-3%);
  }
}
@-o-keyframes poleToCoke {
  0% {
    -webkit-transform: translateX(-3%);
    -moz-transform: translateX(-3%);
    -o-transform: translateX(-3%);
    -ms-transform: translateX(-3%);
    transform: translateX(-3%);
  }
  10% {
    -webkit-transform: translateX(10%);
    -moz-transform: translateX(10%);
    -o-transform: translateX(10%);
    -ms-transform: translateX(10%);
    transform: translateX(10%);
  }
  20% {
    -webkit-transform: translateX(14%);
    -moz-transform: translateX(14%);
    -o-transform: translateX(14%);
    -ms-transform: translateX(14%);
    transform: translateX(14%);
  }
  30% {
    -webkit-transform: translateX(14%);
    -moz-transform: translateX(14%);
    -o-transform: translateX(14%);
    -ms-transform: translateX(14%);
    transform: translateX(14%);
  }
  40% {
    -webkit-transform: translateX(60%);
    -moz-transform: translateX(60%);
    -o-transform: translateX(60%);
    -ms-transform: translateX(60%);
    transform: translateX(60%);
  }
  50% {
    -webkit-transform: translateX(95%);
    -moz-transform: translateX(95%);
    -o-transform: translateX(95%);
    -ms-transform: translateX(95%);
    transform: translateX(95%);
  }
  60% {
    -webkit-transform: translateX(105%);
    -moz-transform: translateX(105%);
    -o-transform: translateX(105%);
    -ms-transform: translateX(105%);
    transform: translateX(105%);
  }
  70% {
    -webkit-transform: translateX(105%);
    -moz-transform: translateX(105%);
    -o-transform: translateX(105%);
    -ms-transform: translateX(105%);
    transform: translateX(105%);
  }
  80% {
    -webkit-transform: translateX(70%);
    -moz-transform: translateX(70%);
    -o-transform: translateX(70%);
    -ms-transform: translateX(70%);
    transform: translateX(70%);
  }
  90% {
    -webkit-transform: translateX(50%);
    -moz-transform: translateX(50%);
    -o-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
  }
  100% {
    -webkit-transform: translateX(-3%);
    -moz-transform: translateX(-3%);
    -o-transform: translateX(-3%);
    -ms-transform: translateX(-3%);
    transform: translateX(-3%);
  }
}
@keyframes poleToCoke {
  0% {
    -webkit-transform: translateX(-3%);
    -moz-transform: translateX(-3%);
    -o-transform: translateX(-3%);
    -ms-transform: translateX(-3%);
    transform: translateX(-3%);
  }
  10% {
    -webkit-transform: translateX(10%);
    -moz-transform: translateX(10%);
    -o-transform: translateX(10%);
    -ms-transform: translateX(10%);
    transform: translateX(10%);
  }
  20% {
    -webkit-transform: translateX(14%);
    -moz-transform: translateX(14%);
    -o-transform: translateX(14%);
    -ms-transform: translateX(14%);
    transform: translateX(14%);
  }
  30% {
    -webkit-transform: translateX(14%);
    -moz-transform: translateX(14%);
    -o-transform: translateX(14%);
    -ms-transform: translateX(14%);
    transform: translateX(14%);
  }
  40% {
    -webkit-transform: translateX(60%);
    -moz-transform: translateX(60%);
    -o-transform: translateX(60%);
    -ms-transform: translateX(60%);
    transform: translateX(60%);
  }
  50% {
    -webkit-transform: translateX(95%);
    -moz-transform: translateX(95%);
    -o-transform: translateX(95%);
    -ms-transform: translateX(95%);
    transform: translateX(95%);
  }
  60% {
    -webkit-transform: translateX(105%);
    -moz-transform: translateX(105%);
    -o-transform: translateX(105%);
    -ms-transform: translateX(105%);
    transform: translateX(105%);
  }
  70% {
    -webkit-transform: translateX(105%);
    -moz-transform: translateX(105%);
    -o-transform: translateX(105%);
    -ms-transform: translateX(105%);
    transform: translateX(105%);
  }
  80% {
    -webkit-transform: translateX(70%);
    -moz-transform: translateX(70%);
    -o-transform: translateX(70%);
    -ms-transform: translateX(70%);
    transform: translateX(70%);
  }
  90% {
    -webkit-transform: translateX(50%);
    -moz-transform: translateX(50%);
    -o-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
  }
  100% {
    -webkit-transform: translateX(-3%);
    -moz-transform: translateX(-3%);
    -o-transform: translateX(-3%);
    -ms-transform: translateX(-3%);
    transform: translateX(-3%);
  }
}
@-moz-keyframes clawToCoke {
  0% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
  10% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
  20% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
  30% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
  40% {
    -webkit-transform: translateY(20%);
    -moz-transform: translateY(20%);
    -o-transform: translateY(20%);
    -ms-transform: translateY(20%);
    transform: translateY(20%);
  }
  50% {
    -webkit-transform: translateY(30%);
    -moz-transform: translateY(30%);
    -o-transform: translateY(30%);
    -ms-transform: translateY(30%);
    transform: translateY(30%);
  }
  60% {
    -webkit-transform: translateY(40%);
    -moz-transform: translateY(40%);
    -o-transform: translateY(40%);
    -ms-transform: translateY(40%);
    transform: translateY(40%);
  }
  70% {
    -webkit-transform: translateY(40%);
    -moz-transform: translateY(40%);
    -o-transform: translateY(40%);
    -ms-transform: translateY(40%);
    transform: translateY(40%);
  }
  80% {
    -webkit-transform: translateY(20%);
    -moz-transform: translateY(20%);
    -o-transform: translateY(20%);
    -ms-transform: translateY(20%);
    transform: translateY(20%);
  }
  90% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
  100% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
}
@-webkit-keyframes clawToCoke {
  0% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
  10% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
  20% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
  30% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
  40% {
    -webkit-transform: translateY(20%);
    -moz-transform: translateY(20%);
    -o-transform: translateY(20%);
    -ms-transform: translateY(20%);
    transform: translateY(20%);
  }
  50% {
    -webkit-transform: translateY(30%);
    -moz-transform: translateY(30%);
    -o-transform: translateY(30%);
    -ms-transform: translateY(30%);
    transform: translateY(30%);
  }
  60% {
    -webkit-transform: translateY(40%);
    -moz-transform: translateY(40%);
    -o-transform: translateY(40%);
    -ms-transform: translateY(40%);
    transform: translateY(40%);
  }
  70% {
    -webkit-transform: translateY(40%);
    -moz-transform: translateY(40%);
    -o-transform: translateY(40%);
    -ms-transform: translateY(40%);
    transform: translateY(40%);
  }
  80% {
    -webkit-transform: translateY(20%);
    -moz-transform: translateY(20%);
    -o-transform: translateY(20%);
    -ms-transform: translateY(20%);
    transform: translateY(20%);
  }
  90% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
  100% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
}
@-o-keyframes clawToCoke {
  0% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
  10% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
  20% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
  30% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
  40% {
    -webkit-transform: translateY(20%);
    -moz-transform: translateY(20%);
    -o-transform: translateY(20%);
    -ms-transform: translateY(20%);
    transform: translateY(20%);
  }
  50% {
    -webkit-transform: translateY(30%);
    -moz-transform: translateY(30%);
    -o-transform: translateY(30%);
    -ms-transform: translateY(30%);
    transform: translateY(30%);
  }
  60% {
    -webkit-transform: translateY(40%);
    -moz-transform: translateY(40%);
    -o-transform: translateY(40%);
    -ms-transform: translateY(40%);
    transform: translateY(40%);
  }
  70% {
    -webkit-transform: translateY(40%);
    -moz-transform: translateY(40%);
    -o-transform: translateY(40%);
    -ms-transform: translateY(40%);
    transform: translateY(40%);
  }
  80% {
    -webkit-transform: translateY(20%);
    -moz-transform: translateY(20%);
    -o-transform: translateY(20%);
    -ms-transform: translateY(20%);
    transform: translateY(20%);
  }
  90% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
  100% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
}
@keyframes clawToCoke {
  0% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
  10% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
  20% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
  30% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
  40% {
    -webkit-transform: translateY(20%);
    -moz-transform: translateY(20%);
    -o-transform: translateY(20%);
    -ms-transform: translateY(20%);
    transform: translateY(20%);
  }
  50% {
    -webkit-transform: translateY(30%);
    -moz-transform: translateY(30%);
    -o-transform: translateY(30%);
    -ms-transform: translateY(30%);
    transform: translateY(30%);
  }
  60% {
    -webkit-transform: translateY(40%);
    -moz-transform: translateY(40%);
    -o-transform: translateY(40%);
    -ms-transform: translateY(40%);
    transform: translateY(40%);
  }
  70% {
    -webkit-transform: translateY(40%);
    -moz-transform: translateY(40%);
    -o-transform: translateY(40%);
    -ms-transform: translateY(40%);
    transform: translateY(40%);
  }
  80% {
    -webkit-transform: translateY(20%);
    -moz-transform: translateY(20%);
    -o-transform: translateY(20%);
    -ms-transform: translateY(20%);
    transform: translateY(20%);
  }
  90% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
  100% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
}
@-moz-keyframes poleToSprite {
  0% {
    -webkit-transform: translateX(-3%);
    -moz-transform: translateX(-3%);
    -o-transform: translateX(-3%);
    -ms-transform: translateX(-3%);
    transform: translateX(-3%);
  }
  10% {
    -webkit-transform: translateX(10%);
    -moz-transform: translateX(10%);
    -o-transform: translateX(10%);
    -ms-transform: translateX(10%);
    transform: translateX(10%);
  }
  20% {
    -webkit-transform: translateX(30.6%);
    -moz-transform: translateX(30.6%);
    -o-transform: translateX(30.6%);
    -ms-transform: translateX(30.6%);
    transform: translateX(30.6%);
  }
  30% {
    -webkit-transform: translateX(30.6%);
    -moz-transform: translateX(30.6%);
    -o-transform: translateX(30.6%);
    -ms-transform: translateX(30.6%);
    transform: translateX(30.6%);
  }
  40% {
    -webkit-transform: translateX(60%);
    -moz-transform: translateX(60%);
    -o-transform: translateX(60%);
    -ms-transform: translateX(60%);
    transform: translateX(60%);
  }
  50% {
    -webkit-transform: translateX(95%);
    -moz-transform: translateX(95%);
    -o-transform: translateX(95%);
    -ms-transform: translateX(95%);
    transform: translateX(95%);
  }
  60% {
    -webkit-transform: translateX(105%);
    -moz-transform: translateX(105%);
    -o-transform: translateX(105%);
    -ms-transform: translateX(105%);
    transform: translateX(105%);
  }
  70% {
    -webkit-transform: translateX(105%);
    -moz-transform: translateX(105%);
    -o-transform: translateX(105%);
    -ms-transform: translateX(105%);
    transform: translateX(105%);
  }
  80% {
    -webkit-transform: translateX(70%);
    -moz-transform: translateX(70%);
    -o-transform: translateX(70%);
    -ms-transform: translateX(70%);
    transform: translateX(70%);
  }
  90% {
    -webkit-transform: translateX(50%);
    -moz-transform: translateX(50%);
    -o-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
  }
  100% {
    -webkit-transform: translateX(-3%);
    -moz-transform: translateX(-3%);
    -o-transform: translateX(-3%);
    -ms-transform: translateX(-3%);
    transform: translateX(-3%);
  }
}
@-webkit-keyframes poleToSprite {
  0% {
    -webkit-transform: translateX(-3%);
    -moz-transform: translateX(-3%);
    -o-transform: translateX(-3%);
    -ms-transform: translateX(-3%);
    transform: translateX(-3%);
  }
  10% {
    -webkit-transform: translateX(10%);
    -moz-transform: translateX(10%);
    -o-transform: translateX(10%);
    -ms-transform: translateX(10%);
    transform: translateX(10%);
  }
  20% {
    -webkit-transform: translateX(30.6%);
    -moz-transform: translateX(30.6%);
    -o-transform: translateX(30.6%);
    -ms-transform: translateX(30.6%);
    transform: translateX(30.6%);
  }
  30% {
    -webkit-transform: translateX(30.6%);
    -moz-transform: translateX(30.6%);
    -o-transform: translateX(30.6%);
    -ms-transform: translateX(30.6%);
    transform: translateX(30.6%);
  }
  40% {
    -webkit-transform: translateX(60%);
    -moz-transform: translateX(60%);
    -o-transform: translateX(60%);
    -ms-transform: translateX(60%);
    transform: translateX(60%);
  }
  50% {
    -webkit-transform: translateX(95%);
    -moz-transform: translateX(95%);
    -o-transform: translateX(95%);
    -ms-transform: translateX(95%);
    transform: translateX(95%);
  }
  60% {
    -webkit-transform: translateX(105%);
    -moz-transform: translateX(105%);
    -o-transform: translateX(105%);
    -ms-transform: translateX(105%);
    transform: translateX(105%);
  }
  70% {
    -webkit-transform: translateX(105%);
    -moz-transform: translateX(105%);
    -o-transform: translateX(105%);
    -ms-transform: translateX(105%);
    transform: translateX(105%);
  }
  80% {
    -webkit-transform: translateX(70%);
    -moz-transform: translateX(70%);
    -o-transform: translateX(70%);
    -ms-transform: translateX(70%);
    transform: translateX(70%);
  }
  90% {
    -webkit-transform: translateX(50%);
    -moz-transform: translateX(50%);
    -o-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
  }
  100% {
    -webkit-transform: translateX(-3%);
    -moz-transform: translateX(-3%);
    -o-transform: translateX(-3%);
    -ms-transform: translateX(-3%);
    transform: translateX(-3%);
  }
}
@-o-keyframes poleToSprite {
  0% {
    -webkit-transform: translateX(-3%);
    -moz-transform: translateX(-3%);
    -o-transform: translateX(-3%);
    -ms-transform: translateX(-3%);
    transform: translateX(-3%);
  }
  10% {
    -webkit-transform: translateX(10%);
    -moz-transform: translateX(10%);
    -o-transform: translateX(10%);
    -ms-transform: translateX(10%);
    transform: translateX(10%);
  }
  20% {
    -webkit-transform: translateX(30.6%);
    -moz-transform: translateX(30.6%);
    -o-transform: translateX(30.6%);
    -ms-transform: translateX(30.6%);
    transform: translateX(30.6%);
  }
  30% {
    -webkit-transform: translateX(30.6%);
    -moz-transform: translateX(30.6%);
    -o-transform: translateX(30.6%);
    -ms-transform: translateX(30.6%);
    transform: translateX(30.6%);
  }
  40% {
    -webkit-transform: translateX(60%);
    -moz-transform: translateX(60%);
    -o-transform: translateX(60%);
    -ms-transform: translateX(60%);
    transform: translateX(60%);
  }
  50% {
    -webkit-transform: translateX(95%);
    -moz-transform: translateX(95%);
    -o-transform: translateX(95%);
    -ms-transform: translateX(95%);
    transform: translateX(95%);
  }
  60% {
    -webkit-transform: translateX(105%);
    -moz-transform: translateX(105%);
    -o-transform: translateX(105%);
    -ms-transform: translateX(105%);
    transform: translateX(105%);
  }
  70% {
    -webkit-transform: translateX(105%);
    -moz-transform: translateX(105%);
    -o-transform: translateX(105%);
    -ms-transform: translateX(105%);
    transform: translateX(105%);
  }
  80% {
    -webkit-transform: translateX(70%);
    -moz-transform: translateX(70%);
    -o-transform: translateX(70%);
    -ms-transform: translateX(70%);
    transform: translateX(70%);
  }
  90% {
    -webkit-transform: translateX(50%);
    -moz-transform: translateX(50%);
    -o-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
  }
  100% {
    -webkit-transform: translateX(-3%);
    -moz-transform: translateX(-3%);
    -o-transform: translateX(-3%);
    -ms-transform: translateX(-3%);
    transform: translateX(-3%);
  }
}
@keyframes poleToSprite {
  0% {
    -webkit-transform: translateX(-3%);
    -moz-transform: translateX(-3%);
    -o-transform: translateX(-3%);
    -ms-transform: translateX(-3%);
    transform: translateX(-3%);
  }
  10% {
    -webkit-transform: translateX(10%);
    -moz-transform: translateX(10%);
    -o-transform: translateX(10%);
    -ms-transform: translateX(10%);
    transform: translateX(10%);
  }
  20% {
    -webkit-transform: translateX(30.6%);
    -moz-transform: translateX(30.6%);
    -o-transform: translateX(30.6%);
    -ms-transform: translateX(30.6%);
    transform: translateX(30.6%);
  }
  30% {
    -webkit-transform: translateX(30.6%);
    -moz-transform: translateX(30.6%);
    -o-transform: translateX(30.6%);
    -ms-transform: translateX(30.6%);
    transform: translateX(30.6%);
  }
  40% {
    -webkit-transform: translateX(60%);
    -moz-transform: translateX(60%);
    -o-transform: translateX(60%);
    -ms-transform: translateX(60%);
    transform: translateX(60%);
  }
  50% {
    -webkit-transform: translateX(95%);
    -moz-transform: translateX(95%);
    -o-transform: translateX(95%);
    -ms-transform: translateX(95%);
    transform: translateX(95%);
  }
  60% {
    -webkit-transform: translateX(105%);
    -moz-transform: translateX(105%);
    -o-transform: translateX(105%);
    -ms-transform: translateX(105%);
    transform: translateX(105%);
  }
  70% {
    -webkit-transform: translateX(105%);
    -moz-transform: translateX(105%);
    -o-transform: translateX(105%);
    -ms-transform: translateX(105%);
    transform: translateX(105%);
  }
  80% {
    -webkit-transform: translateX(70%);
    -moz-transform: translateX(70%);
    -o-transform: translateX(70%);
    -ms-transform: translateX(70%);
    transform: translateX(70%);
  }
  90% {
    -webkit-transform: translateX(50%);
    -moz-transform: translateX(50%);
    -o-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
  }
  100% {
    -webkit-transform: translateX(-3%);
    -moz-transform: translateX(-3%);
    -o-transform: translateX(-3%);
    -ms-transform: translateX(-3%);
    transform: translateX(-3%);
  }
}
@-moz-keyframes clawToSprite {
  0% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
  10% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
  20% {
    -webkit-transform: translateY(35%);
    -moz-transform: translateY(35%);
    -o-transform: translateY(35%);
    -ms-transform: translateY(35%);
    transform: translateY(35%);
  }
  30% {
    -webkit-transform: translateY(35%);
    -moz-transform: translateY(35%);
    -o-transform: translateY(35%);
    -ms-transform: translateY(35%);
    transform: translateY(35%);
  }
  40% {
    -webkit-transform: translateY(35%);
    -moz-transform: translateY(35%);
    -o-transform: translateY(35%);
    -ms-transform: translateY(35%);
    transform: translateY(35%);
  }
  50% {
    -webkit-transform: translateY(40%);
    -moz-transform: translateY(40%);
    -o-transform: translateY(40%);
    -ms-transform: translateY(40%);
    transform: translateY(40%);
  }
  60% {
    -webkit-transform: translateY(45%);
    -moz-transform: translateY(45%);
    -o-transform: translateY(45%);
    -ms-transform: translateY(45%);
    transform: translateY(45%);
  }
  70% {
    -webkit-transform: translateY(40%);
    -moz-transform: translateY(40%);
    -o-transform: translateY(40%);
    -ms-transform: translateY(40%);
    transform: translateY(40%);
  }
  80% {
    -webkit-transform: translateY(20%);
    -moz-transform: translateY(20%);
    -o-transform: translateY(20%);
    -ms-transform: translateY(20%);
    transform: translateY(20%);
  }
  90% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
  100% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
}
@-webkit-keyframes clawToSprite {
  0% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
  10% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
  20% {
    -webkit-transform: translateY(35%);
    -moz-transform: translateY(35%);
    -o-transform: translateY(35%);
    -ms-transform: translateY(35%);
    transform: translateY(35%);
  }
  30% {
    -webkit-transform: translateY(35%);
    -moz-transform: translateY(35%);
    -o-transform: translateY(35%);
    -ms-transform: translateY(35%);
    transform: translateY(35%);
  }
  40% {
    -webkit-transform: translateY(35%);
    -moz-transform: translateY(35%);
    -o-transform: translateY(35%);
    -ms-transform: translateY(35%);
    transform: translateY(35%);
  }
  50% {
    -webkit-transform: translateY(40%);
    -moz-transform: translateY(40%);
    -o-transform: translateY(40%);
    -ms-transform: translateY(40%);
    transform: translateY(40%);
  }
  60% {
    -webkit-transform: translateY(45%);
    -moz-transform: translateY(45%);
    -o-transform: translateY(45%);
    -ms-transform: translateY(45%);
    transform: translateY(45%);
  }
  70% {
    -webkit-transform: translateY(40%);
    -moz-transform: translateY(40%);
    -o-transform: translateY(40%);
    -ms-transform: translateY(40%);
    transform: translateY(40%);
  }
  80% {
    -webkit-transform: translateY(20%);
    -moz-transform: translateY(20%);
    -o-transform: translateY(20%);
    -ms-transform: translateY(20%);
    transform: translateY(20%);
  }
  90% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
  100% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
}
@-o-keyframes clawToSprite {
  0% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
  10% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
  20% {
    -webkit-transform: translateY(35%);
    -moz-transform: translateY(35%);
    -o-transform: translateY(35%);
    -ms-transform: translateY(35%);
    transform: translateY(35%);
  }
  30% {
    -webkit-transform: translateY(35%);
    -moz-transform: translateY(35%);
    -o-transform: translateY(35%);
    -ms-transform: translateY(35%);
    transform: translateY(35%);
  }
  40% {
    -webkit-transform: translateY(35%);
    -moz-transform: translateY(35%);
    -o-transform: translateY(35%);
    -ms-transform: translateY(35%);
    transform: translateY(35%);
  }
  50% {
    -webkit-transform: translateY(40%);
    -moz-transform: translateY(40%);
    -o-transform: translateY(40%);
    -ms-transform: translateY(40%);
    transform: translateY(40%);
  }
  60% {
    -webkit-transform: translateY(45%);
    -moz-transform: translateY(45%);
    -o-transform: translateY(45%);
    -ms-transform: translateY(45%);
    transform: translateY(45%);
  }
  70% {
    -webkit-transform: translateY(40%);
    -moz-transform: translateY(40%);
    -o-transform: translateY(40%);
    -ms-transform: translateY(40%);
    transform: translateY(40%);
  }
  80% {
    -webkit-transform: translateY(20%);
    -moz-transform: translateY(20%);
    -o-transform: translateY(20%);
    -ms-transform: translateY(20%);
    transform: translateY(20%);
  }
  90% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
  100% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
}
@keyframes clawToSprite {
  0% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
  10% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
  20% {
    -webkit-transform: translateY(35%);
    -moz-transform: translateY(35%);
    -o-transform: translateY(35%);
    -ms-transform: translateY(35%);
    transform: translateY(35%);
  }
  30% {
    -webkit-transform: translateY(35%);
    -moz-transform: translateY(35%);
    -o-transform: translateY(35%);
    -ms-transform: translateY(35%);
    transform: translateY(35%);
  }
  40% {
    -webkit-transform: translateY(35%);
    -moz-transform: translateY(35%);
    -o-transform: translateY(35%);
    -ms-transform: translateY(35%);
    transform: translateY(35%);
  }
  50% {
    -webkit-transform: translateY(40%);
    -moz-transform: translateY(40%);
    -o-transform: translateY(40%);
    -ms-transform: translateY(40%);
    transform: translateY(40%);
  }
  60% {
    -webkit-transform: translateY(45%);
    -moz-transform: translateY(45%);
    -o-transform: translateY(45%);
    -ms-transform: translateY(45%);
    transform: translateY(45%);
  }
  70% {
    -webkit-transform: translateY(40%);
    -moz-transform: translateY(40%);
    -o-transform: translateY(40%);
    -ms-transform: translateY(40%);
    transform: translateY(40%);
  }
  80% {
    -webkit-transform: translateY(20%);
    -moz-transform: translateY(20%);
    -o-transform: translateY(20%);
    -ms-transform: translateY(20%);
    transform: translateY(20%);
  }
  90% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
  100% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
}
@-moz-keyframes poleToDiet {
  0% {
    -webkit-transform: translateX(-3%);
    -moz-transform: translateX(-3%);
    -o-transform: translateX(-3%);
    -ms-transform: translateX(-3%);
    transform: translateX(-3%);
  }
  10% {
    -webkit-transform: translateX(10%);
    -moz-transform: translateX(10%);
    -o-transform: translateX(10%);
    -ms-transform: translateX(10%);
    transform: translateX(10%);
  }
  20% {
    -webkit-transform: translateX(47.5%);
    -moz-transform: translateX(47.5%);
    -o-transform: translateX(47.5%);
    -ms-transform: translateX(47.5%);
    transform: translateX(47.5%);
  }
  30% {
    -webkit-transform: translateX(47.5%);
    -moz-transform: translateX(47.5%);
    -o-transform: translateX(47.5%);
    -ms-transform: translateX(47.5%);
    transform: translateX(47.5%);
  }
  40% {
    -webkit-transform: translateX(60%);
    -moz-transform: translateX(60%);
    -o-transform: translateX(60%);
    -ms-transform: translateX(60%);
    transform: translateX(60%);
  }
  50% {
    -webkit-transform: translateX(95%);
    -moz-transform: translateX(95%);
    -o-transform: translateX(95%);
    -ms-transform: translateX(95%);
    transform: translateX(95%);
  }
  60% {
    -webkit-transform: translateX(105%);
    -moz-transform: translateX(105%);
    -o-transform: translateX(105%);
    -ms-transform: translateX(105%);
    transform: translateX(105%);
  }
  70% {
    -webkit-transform: translateX(105%);
    -moz-transform: translateX(105%);
    -o-transform: translateX(105%);
    -ms-transform: translateX(105%);
    transform: translateX(105%);
  }
  80% {
    -webkit-transform: translateX(70%);
    -moz-transform: translateX(70%);
    -o-transform: translateX(70%);
    -ms-transform: translateX(70%);
    transform: translateX(70%);
  }
  90% {
    -webkit-transform: translateX(50%);
    -moz-transform: translateX(50%);
    -o-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
  }
  100% {
    -webkit-transform: translateX(-3%);
    -moz-transform: translateX(-3%);
    -o-transform: translateX(-3%);
    -ms-transform: translateX(-3%);
    transform: translateX(-3%);
  }
}
@-webkit-keyframes poleToDiet {
  0% {
    -webkit-transform: translateX(-3%);
    -moz-transform: translateX(-3%);
    -o-transform: translateX(-3%);
    -ms-transform: translateX(-3%);
    transform: translateX(-3%);
  }
  10% {
    -webkit-transform: translateX(10%);
    -moz-transform: translateX(10%);
    -o-transform: translateX(10%);
    -ms-transform: translateX(10%);
    transform: translateX(10%);
  }
  20% {
    -webkit-transform: translateX(47.5%);
    -moz-transform: translateX(47.5%);
    -o-transform: translateX(47.5%);
    -ms-transform: translateX(47.5%);
    transform: translateX(47.5%);
  }
  30% {
    -webkit-transform: translateX(47.5%);
    -moz-transform: translateX(47.5%);
    -o-transform: translateX(47.5%);
    -ms-transform: translateX(47.5%);
    transform: translateX(47.5%);
  }
  40% {
    -webkit-transform: translateX(60%);
    -moz-transform: translateX(60%);
    -o-transform: translateX(60%);
    -ms-transform: translateX(60%);
    transform: translateX(60%);
  }
  50% {
    -webkit-transform: translateX(95%);
    -moz-transform: translateX(95%);
    -o-transform: translateX(95%);
    -ms-transform: translateX(95%);
    transform: translateX(95%);
  }
  60% {
    -webkit-transform: translateX(105%);
    -moz-transform: translateX(105%);
    -o-transform: translateX(105%);
    -ms-transform: translateX(105%);
    transform: translateX(105%);
  }
  70% {
    -webkit-transform: translateX(105%);
    -moz-transform: translateX(105%);
    -o-transform: translateX(105%);
    -ms-transform: translateX(105%);
    transform: translateX(105%);
  }
  80% {
    -webkit-transform: translateX(70%);
    -moz-transform: translateX(70%);
    -o-transform: translateX(70%);
    -ms-transform: translateX(70%);
    transform: translateX(70%);
  }
  90% {
    -webkit-transform: translateX(50%);
    -moz-transform: translateX(50%);
    -o-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
  }
  100% {
    -webkit-transform: translateX(-3%);
    -moz-transform: translateX(-3%);
    -o-transform: translateX(-3%);
    -ms-transform: translateX(-3%);
    transform: translateX(-3%);
  }
}
@-o-keyframes poleToDiet {
  0% {
    -webkit-transform: translateX(-3%);
    -moz-transform: translateX(-3%);
    -o-transform: translateX(-3%);
    -ms-transform: translateX(-3%);
    transform: translateX(-3%);
  }
  10% {
    -webkit-transform: translateX(10%);
    -moz-transform: translateX(10%);
    -o-transform: translateX(10%);
    -ms-transform: translateX(10%);
    transform: translateX(10%);
  }
  20% {
    -webkit-transform: translateX(47.5%);
    -moz-transform: translateX(47.5%);
    -o-transform: translateX(47.5%);
    -ms-transform: translateX(47.5%);
    transform: translateX(47.5%);
  }
  30% {
    -webkit-transform: translateX(47.5%);
    -moz-transform: translateX(47.5%);
    -o-transform: translateX(47.5%);
    -ms-transform: translateX(47.5%);
    transform: translateX(47.5%);
  }
  40% {
    -webkit-transform: translateX(60%);
    -moz-transform: translateX(60%);
    -o-transform: translateX(60%);
    -ms-transform: translateX(60%);
    transform: translateX(60%);
  }
  50% {
    -webkit-transform: translateX(95%);
    -moz-transform: translateX(95%);
    -o-transform: translateX(95%);
    -ms-transform: translateX(95%);
    transform: translateX(95%);
  }
  60% {
    -webkit-transform: translateX(105%);
    -moz-transform: translateX(105%);
    -o-transform: translateX(105%);
    -ms-transform: translateX(105%);
    transform: translateX(105%);
  }
  70% {
    -webkit-transform: translateX(105%);
    -moz-transform: translateX(105%);
    -o-transform: translateX(105%);
    -ms-transform: translateX(105%);
    transform: translateX(105%);
  }
  80% {
    -webkit-transform: translateX(70%);
    -moz-transform: translateX(70%);
    -o-transform: translateX(70%);
    -ms-transform: translateX(70%);
    transform: translateX(70%);
  }
  90% {
    -webkit-transform: translateX(50%);
    -moz-transform: translateX(50%);
    -o-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
  }
  100% {
    -webkit-transform: translateX(-3%);
    -moz-transform: translateX(-3%);
    -o-transform: translateX(-3%);
    -ms-transform: translateX(-3%);
    transform: translateX(-3%);
  }
}
@keyframes poleToDiet {
  0% {
    -webkit-transform: translateX(-3%);
    -moz-transform: translateX(-3%);
    -o-transform: translateX(-3%);
    -ms-transform: translateX(-3%);
    transform: translateX(-3%);
  }
  10% {
    -webkit-transform: translateX(10%);
    -moz-transform: translateX(10%);
    -o-transform: translateX(10%);
    -ms-transform: translateX(10%);
    transform: translateX(10%);
  }
  20% {
    -webkit-transform: translateX(47.5%);
    -moz-transform: translateX(47.5%);
    -o-transform: translateX(47.5%);
    -ms-transform: translateX(47.5%);
    transform: translateX(47.5%);
  }
  30% {
    -webkit-transform: translateX(47.5%);
    -moz-transform: translateX(47.5%);
    -o-transform: translateX(47.5%);
    -ms-transform: translateX(47.5%);
    transform: translateX(47.5%);
  }
  40% {
    -webkit-transform: translateX(60%);
    -moz-transform: translateX(60%);
    -o-transform: translateX(60%);
    -ms-transform: translateX(60%);
    transform: translateX(60%);
  }
  50% {
    -webkit-transform: translateX(95%);
    -moz-transform: translateX(95%);
    -o-transform: translateX(95%);
    -ms-transform: translateX(95%);
    transform: translateX(95%);
  }
  60% {
    -webkit-transform: translateX(105%);
    -moz-transform: translateX(105%);
    -o-transform: translateX(105%);
    -ms-transform: translateX(105%);
    transform: translateX(105%);
  }
  70% {
    -webkit-transform: translateX(105%);
    -moz-transform: translateX(105%);
    -o-transform: translateX(105%);
    -ms-transform: translateX(105%);
    transform: translateX(105%);
  }
  80% {
    -webkit-transform: translateX(70%);
    -moz-transform: translateX(70%);
    -o-transform: translateX(70%);
    -ms-transform: translateX(70%);
    transform: translateX(70%);
  }
  90% {
    -webkit-transform: translateX(50%);
    -moz-transform: translateX(50%);
    -o-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
  }
  100% {
    -webkit-transform: translateX(-3%);
    -moz-transform: translateX(-3%);
    -o-transform: translateX(-3%);
    -ms-transform: translateX(-3%);
    transform: translateX(-3%);
  }
}
@-moz-keyframes clawToDiet {
  0% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
  10% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
  20% {
    -webkit-transform: translateY(60.3%);
    -moz-transform: translateY(60.3%);
    -o-transform: translateY(60.3%);
    -ms-transform: translateY(60.3%);
    transform: translateY(60.3%);
  }
  30% {
    -webkit-transform: translateY(60.3%);
    -moz-transform: translateY(60.3%);
    -o-transform: translateY(60.3%);
    -ms-transform: translateY(60.3%);
    transform: translateY(60.3%);
  }
  40% {
    -webkit-transform: translateY(60.3%);
    -moz-transform: translateY(60.3%);
    -o-transform: translateY(60.3%);
    -ms-transform: translateY(60.3%);
    transform: translateY(60.3%);
  }
  50% {
    -webkit-transform: translateY(40%);
    -moz-transform: translateY(40%);
    -o-transform: translateY(40%);
    -ms-transform: translateY(40%);
    transform: translateY(40%);
  }
  60% {
    -webkit-transform: translateY(45%);
    -moz-transform: translateY(45%);
    -o-transform: translateY(45%);
    -ms-transform: translateY(45%);
    transform: translateY(45%);
  }
  70% {
    -webkit-transform: translateY(40%);
    -moz-transform: translateY(40%);
    -o-transform: translateY(40%);
    -ms-transform: translateY(40%);
    transform: translateY(40%);
  }
  80% {
    -webkit-transform: translateY(20%);
    -moz-transform: translateY(20%);
    -o-transform: translateY(20%);
    -ms-transform: translateY(20%);
    transform: translateY(20%);
  }
  90% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
  100% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
}
@-webkit-keyframes clawToDiet {
  0% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
  10% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
  20% {
    -webkit-transform: translateY(60.3%);
    -moz-transform: translateY(60.3%);
    -o-transform: translateY(60.3%);
    -ms-transform: translateY(60.3%);
    transform: translateY(60.3%);
  }
  30% {
    -webkit-transform: translateY(60.3%);
    -moz-transform: translateY(60.3%);
    -o-transform: translateY(60.3%);
    -ms-transform: translateY(60.3%);
    transform: translateY(60.3%);
  }
  40% {
    -webkit-transform: translateY(60.3%);
    -moz-transform: translateY(60.3%);
    -o-transform: translateY(60.3%);
    -ms-transform: translateY(60.3%);
    transform: translateY(60.3%);
  }
  50% {
    -webkit-transform: translateY(40%);
    -moz-transform: translateY(40%);
    -o-transform: translateY(40%);
    -ms-transform: translateY(40%);
    transform: translateY(40%);
  }
  60% {
    -webkit-transform: translateY(45%);
    -moz-transform: translateY(45%);
    -o-transform: translateY(45%);
    -ms-transform: translateY(45%);
    transform: translateY(45%);
  }
  70% {
    -webkit-transform: translateY(40%);
    -moz-transform: translateY(40%);
    -o-transform: translateY(40%);
    -ms-transform: translateY(40%);
    transform: translateY(40%);
  }
  80% {
    -webkit-transform: translateY(20%);
    -moz-transform: translateY(20%);
    -o-transform: translateY(20%);
    -ms-transform: translateY(20%);
    transform: translateY(20%);
  }
  90% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
  100% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
}
@-o-keyframes clawToDiet {
  0% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
  10% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
  20% {
    -webkit-transform: translateY(60.3%);
    -moz-transform: translateY(60.3%);
    -o-transform: translateY(60.3%);
    -ms-transform: translateY(60.3%);
    transform: translateY(60.3%);
  }
  30% {
    -webkit-transform: translateY(60.3%);
    -moz-transform: translateY(60.3%);
    -o-transform: translateY(60.3%);
    -ms-transform: translateY(60.3%);
    transform: translateY(60.3%);
  }
  40% {
    -webkit-transform: translateY(60.3%);
    -moz-transform: translateY(60.3%);
    -o-transform: translateY(60.3%);
    -ms-transform: translateY(60.3%);
    transform: translateY(60.3%);
  }
  50% {
    -webkit-transform: translateY(40%);
    -moz-transform: translateY(40%);
    -o-transform: translateY(40%);
    -ms-transform: translateY(40%);
    transform: translateY(40%);
  }
  60% {
    -webkit-transform: translateY(45%);
    -moz-transform: translateY(45%);
    -o-transform: translateY(45%);
    -ms-transform: translateY(45%);
    transform: translateY(45%);
  }
  70% {
    -webkit-transform: translateY(40%);
    -moz-transform: translateY(40%);
    -o-transform: translateY(40%);
    -ms-transform: translateY(40%);
    transform: translateY(40%);
  }
  80% {
    -webkit-transform: translateY(20%);
    -moz-transform: translateY(20%);
    -o-transform: translateY(20%);
    -ms-transform: translateY(20%);
    transform: translateY(20%);
  }
  90% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
  100% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
}
@keyframes clawToDiet {
  0% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
  10% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
  20% {
    -webkit-transform: translateY(60.3%);
    -moz-transform: translateY(60.3%);
    -o-transform: translateY(60.3%);
    -ms-transform: translateY(60.3%);
    transform: translateY(60.3%);
  }
  30% {
    -webkit-transform: translateY(60.3%);
    -moz-transform: translateY(60.3%);
    -o-transform: translateY(60.3%);
    -ms-transform: translateY(60.3%);
    transform: translateY(60.3%);
  }
  40% {
    -webkit-transform: translateY(60.3%);
    -moz-transform: translateY(60.3%);
    -o-transform: translateY(60.3%);
    -ms-transform: translateY(60.3%);
    transform: translateY(60.3%);
  }
  50% {
    -webkit-transform: translateY(40%);
    -moz-transform: translateY(40%);
    -o-transform: translateY(40%);
    -ms-transform: translateY(40%);
    transform: translateY(40%);
  }
  60% {
    -webkit-transform: translateY(45%);
    -moz-transform: translateY(45%);
    -o-transform: translateY(45%);
    -ms-transform: translateY(45%);
    transform: translateY(45%);
  }
  70% {
    -webkit-transform: translateY(40%);
    -moz-transform: translateY(40%);
    -o-transform: translateY(40%);
    -ms-transform: translateY(40%);
    transform: translateY(40%);
  }
  80% {
    -webkit-transform: translateY(20%);
    -moz-transform: translateY(20%);
    -o-transform: translateY(20%);
    -ms-transform: translateY(20%);
    transform: translateY(20%);
  }
  90% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
  100% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
}
@-moz-keyframes poleToDasani {
  0% {
    -webkit-transform: translateX(-3%);
    -moz-transform: translateX(-3%);
    -o-transform: translateX(-3%);
    -ms-transform: translateX(-3%);
    transform: translateX(-3%);
  }
  10% {
    -webkit-transform: translateX(10%);
    -moz-transform: translateX(10%);
    -o-transform: translateX(10%);
    -ms-transform: translateX(10%);
    transform: translateX(10%);
  }
  20% {
    -webkit-transform: translateX(14%);
    -moz-transform: translateX(14%);
    -o-transform: translateX(14%);
    -ms-transform: translateX(14%);
    transform: translateX(14%);
  }
  30% {
    -webkit-transform: translateX(14%);
    -moz-transform: translateX(14%);
    -o-transform: translateX(14%);
    -ms-transform: translateX(14%);
    transform: translateX(14%);
  }
  40% {
    -webkit-transform: translateX(60%);
    -moz-transform: translateX(60%);
    -o-transform: translateX(60%);
    -ms-transform: translateX(60%);
    transform: translateX(60%);
  }
  50% {
    -webkit-transform: translateX(95%);
    -moz-transform: translateX(95%);
    -o-transform: translateX(95%);
    -ms-transform: translateX(95%);
    transform: translateX(95%);
  }
  60% {
    -webkit-transform: translateX(105%);
    -moz-transform: translateX(105%);
    -o-transform: translateX(105%);
    -ms-transform: translateX(105%);
    transform: translateX(105%);
  }
  70% {
    -webkit-transform: translateX(105%);
    -moz-transform: translateX(105%);
    -o-transform: translateX(105%);
    -ms-transform: translateX(105%);
    transform: translateX(105%);
  }
  80% {
    -webkit-transform: translateX(70%);
    -moz-transform: translateX(70%);
    -o-transform: translateX(70%);
    -ms-transform: translateX(70%);
    transform: translateX(70%);
  }
  90% {
    -webkit-transform: translateX(50%);
    -moz-transform: translateX(50%);
    -o-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
  }
  100% {
    -webkit-transform: translateX(-3%);
    -moz-transform: translateX(-3%);
    -o-transform: translateX(-3%);
    -ms-transform: translateX(-3%);
    transform: translateX(-3%);
  }
}
@-webkit-keyframes poleToDasani {
  0% {
    -webkit-transform: translateX(-3%);
    -moz-transform: translateX(-3%);
    -o-transform: translateX(-3%);
    -ms-transform: translateX(-3%);
    transform: translateX(-3%);
  }
  10% {
    -webkit-transform: translateX(10%);
    -moz-transform: translateX(10%);
    -o-transform: translateX(10%);
    -ms-transform: translateX(10%);
    transform: translateX(10%);
  }
  20% {
    -webkit-transform: translateX(14%);
    -moz-transform: translateX(14%);
    -o-transform: translateX(14%);
    -ms-transform: translateX(14%);
    transform: translateX(14%);
  }
  30% {
    -webkit-transform: translateX(14%);
    -moz-transform: translateX(14%);
    -o-transform: translateX(14%);
    -ms-transform: translateX(14%);
    transform: translateX(14%);
  }
  40% {
    -webkit-transform: translateX(60%);
    -moz-transform: translateX(60%);
    -o-transform: translateX(60%);
    -ms-transform: translateX(60%);
    transform: translateX(60%);
  }
  50% {
    -webkit-transform: translateX(95%);
    -moz-transform: translateX(95%);
    -o-transform: translateX(95%);
    -ms-transform: translateX(95%);
    transform: translateX(95%);
  }
  60% {
    -webkit-transform: translateX(105%);
    -moz-transform: translateX(105%);
    -o-transform: translateX(105%);
    -ms-transform: translateX(105%);
    transform: translateX(105%);
  }
  70% {
    -webkit-transform: translateX(105%);
    -moz-transform: translateX(105%);
    -o-transform: translateX(105%);
    -ms-transform: translateX(105%);
    transform: translateX(105%);
  }
  80% {
    -webkit-transform: translateX(70%);
    -moz-transform: translateX(70%);
    -o-transform: translateX(70%);
    -ms-transform: translateX(70%);
    transform: translateX(70%);
  }
  90% {
    -webkit-transform: translateX(50%);
    -moz-transform: translateX(50%);
    -o-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
  }
  100% {
    -webkit-transform: translateX(-3%);
    -moz-transform: translateX(-3%);
    -o-transform: translateX(-3%);
    -ms-transform: translateX(-3%);
    transform: translateX(-3%);
  }
}
@-o-keyframes poleToDasani {
  0% {
    -webkit-transform: translateX(-3%);
    -moz-transform: translateX(-3%);
    -o-transform: translateX(-3%);
    -ms-transform: translateX(-3%);
    transform: translateX(-3%);
  }
  10% {
    -webkit-transform: translateX(10%);
    -moz-transform: translateX(10%);
    -o-transform: translateX(10%);
    -ms-transform: translateX(10%);
    transform: translateX(10%);
  }
  20% {
    -webkit-transform: translateX(14%);
    -moz-transform: translateX(14%);
    -o-transform: translateX(14%);
    -ms-transform: translateX(14%);
    transform: translateX(14%);
  }
  30% {
    -webkit-transform: translateX(14%);
    -moz-transform: translateX(14%);
    -o-transform: translateX(14%);
    -ms-transform: translateX(14%);
    transform: translateX(14%);
  }
  40% {
    -webkit-transform: translateX(60%);
    -moz-transform: translateX(60%);
    -o-transform: translateX(60%);
    -ms-transform: translateX(60%);
    transform: translateX(60%);
  }
  50% {
    -webkit-transform: translateX(95%);
    -moz-transform: translateX(95%);
    -o-transform: translateX(95%);
    -ms-transform: translateX(95%);
    transform: translateX(95%);
  }
  60% {
    -webkit-transform: translateX(105%);
    -moz-transform: translateX(105%);
    -o-transform: translateX(105%);
    -ms-transform: translateX(105%);
    transform: translateX(105%);
  }
  70% {
    -webkit-transform: translateX(105%);
    -moz-transform: translateX(105%);
    -o-transform: translateX(105%);
    -ms-transform: translateX(105%);
    transform: translateX(105%);
  }
  80% {
    -webkit-transform: translateX(70%);
    -moz-transform: translateX(70%);
    -o-transform: translateX(70%);
    -ms-transform: translateX(70%);
    transform: translateX(70%);
  }
  90% {
    -webkit-transform: translateX(50%);
    -moz-transform: translateX(50%);
    -o-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
  }
  100% {
    -webkit-transform: translateX(-3%);
    -moz-transform: translateX(-3%);
    -o-transform: translateX(-3%);
    -ms-transform: translateX(-3%);
    transform: translateX(-3%);
  }
}
@keyframes poleToDasani {
  0% {
    -webkit-transform: translateX(-3%);
    -moz-transform: translateX(-3%);
    -o-transform: translateX(-3%);
    -ms-transform: translateX(-3%);
    transform: translateX(-3%);
  }
  10% {
    -webkit-transform: translateX(10%);
    -moz-transform: translateX(10%);
    -o-transform: translateX(10%);
    -ms-transform: translateX(10%);
    transform: translateX(10%);
  }
  20% {
    -webkit-transform: translateX(14%);
    -moz-transform: translateX(14%);
    -o-transform: translateX(14%);
    -ms-transform: translateX(14%);
    transform: translateX(14%);
  }
  30% {
    -webkit-transform: translateX(14%);
    -moz-transform: translateX(14%);
    -o-transform: translateX(14%);
    -ms-transform: translateX(14%);
    transform: translateX(14%);
  }
  40% {
    -webkit-transform: translateX(60%);
    -moz-transform: translateX(60%);
    -o-transform: translateX(60%);
    -ms-transform: translateX(60%);
    transform: translateX(60%);
  }
  50% {
    -webkit-transform: translateX(95%);
    -moz-transform: translateX(95%);
    -o-transform: translateX(95%);
    -ms-transform: translateX(95%);
    transform: translateX(95%);
  }
  60% {
    -webkit-transform: translateX(105%);
    -moz-transform: translateX(105%);
    -o-transform: translateX(105%);
    -ms-transform: translateX(105%);
    transform: translateX(105%);
  }
  70% {
    -webkit-transform: translateX(105%);
    -moz-transform: translateX(105%);
    -o-transform: translateX(105%);
    -ms-transform: translateX(105%);
    transform: translateX(105%);
  }
  80% {
    -webkit-transform: translateX(70%);
    -moz-transform: translateX(70%);
    -o-transform: translateX(70%);
    -ms-transform: translateX(70%);
    transform: translateX(70%);
  }
  90% {
    -webkit-transform: translateX(50%);
    -moz-transform: translateX(50%);
    -o-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
  }
  100% {
    -webkit-transform: translateX(-3%);
    -moz-transform: translateX(-3%);
    -o-transform: translateX(-3%);
    -ms-transform: translateX(-3%);
    transform: translateX(-3%);
  }
}
@-moz-keyframes clawToDasani {
  0% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
  10% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
  20% {
    -webkit-transform: translateY(85.7%);
    -moz-transform: translateY(85.7%);
    -o-transform: translateY(85.7%);
    -ms-transform: translateY(85.7%);
    transform: translateY(85.7%);
  }
  30% {
    -webkit-transform: translateY(85.7%);
    -moz-transform: translateY(85.7%);
    -o-transform: translateY(85.7%);
    -ms-transform: translateY(85.7%);
    transform: translateY(85.7%);
  }
  40% {
    -webkit-transform: translateY(85.7%);
    -moz-transform: translateY(85.7%);
    -o-transform: translateY(85.7%);
    -ms-transform: translateY(85.7%);
    transform: translateY(85.7%);
  }
  50% {
    -webkit-transform: translateY(40%);
    -moz-transform: translateY(40%);
    -o-transform: translateY(40%);
    -ms-transform: translateY(40%);
    transform: translateY(40%);
  }
  60% {
    -webkit-transform: translateY(45%);
    -moz-transform: translateY(45%);
    -o-transform: translateY(45%);
    -ms-transform: translateY(45%);
    transform: translateY(45%);
  }
  70% {
    -webkit-transform: translateY(40%);
    -moz-transform: translateY(40%);
    -o-transform: translateY(40%);
    -ms-transform: translateY(40%);
    transform: translateY(40%);
  }
  80% {
    -webkit-transform: translateY(20%);
    -moz-transform: translateY(20%);
    -o-transform: translateY(20%);
    -ms-transform: translateY(20%);
    transform: translateY(20%);
  }
  90% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
  100% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
}
@-webkit-keyframes clawToDasani {
  0% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
  10% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
  20% {
    -webkit-transform: translateY(85.7%);
    -moz-transform: translateY(85.7%);
    -o-transform: translateY(85.7%);
    -ms-transform: translateY(85.7%);
    transform: translateY(85.7%);
  }
  30% {
    -webkit-transform: translateY(85.7%);
    -moz-transform: translateY(85.7%);
    -o-transform: translateY(85.7%);
    -ms-transform: translateY(85.7%);
    transform: translateY(85.7%);
  }
  40% {
    -webkit-transform: translateY(85.7%);
    -moz-transform: translateY(85.7%);
    -o-transform: translateY(85.7%);
    -ms-transform: translateY(85.7%);
    transform: translateY(85.7%);
  }
  50% {
    -webkit-transform: translateY(40%);
    -moz-transform: translateY(40%);
    -o-transform: translateY(40%);
    -ms-transform: translateY(40%);
    transform: translateY(40%);
  }
  60% {
    -webkit-transform: translateY(45%);
    -moz-transform: translateY(45%);
    -o-transform: translateY(45%);
    -ms-transform: translateY(45%);
    transform: translateY(45%);
  }
  70% {
    -webkit-transform: translateY(40%);
    -moz-transform: translateY(40%);
    -o-transform: translateY(40%);
    -ms-transform: translateY(40%);
    transform: translateY(40%);
  }
  80% {
    -webkit-transform: translateY(20%);
    -moz-transform: translateY(20%);
    -o-transform: translateY(20%);
    -ms-transform: translateY(20%);
    transform: translateY(20%);
  }
  90% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
  100% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
}
@-o-keyframes clawToDasani {
  0% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
  10% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
  20% {
    -webkit-transform: translateY(85.7%);
    -moz-transform: translateY(85.7%);
    -o-transform: translateY(85.7%);
    -ms-transform: translateY(85.7%);
    transform: translateY(85.7%);
  }
  30% {
    -webkit-transform: translateY(85.7%);
    -moz-transform: translateY(85.7%);
    -o-transform: translateY(85.7%);
    -ms-transform: translateY(85.7%);
    transform: translateY(85.7%);
  }
  40% {
    -webkit-transform: translateY(85.7%);
    -moz-transform: translateY(85.7%);
    -o-transform: translateY(85.7%);
    -ms-transform: translateY(85.7%);
    transform: translateY(85.7%);
  }
  50% {
    -webkit-transform: translateY(40%);
    -moz-transform: translateY(40%);
    -o-transform: translateY(40%);
    -ms-transform: translateY(40%);
    transform: translateY(40%);
  }
  60% {
    -webkit-transform: translateY(45%);
    -moz-transform: translateY(45%);
    -o-transform: translateY(45%);
    -ms-transform: translateY(45%);
    transform: translateY(45%);
  }
  70% {
    -webkit-transform: translateY(40%);
    -moz-transform: translateY(40%);
    -o-transform: translateY(40%);
    -ms-transform: translateY(40%);
    transform: translateY(40%);
  }
  80% {
    -webkit-transform: translateY(20%);
    -moz-transform: translateY(20%);
    -o-transform: translateY(20%);
    -ms-transform: translateY(20%);
    transform: translateY(20%);
  }
  90% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
  100% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
}
@keyframes clawToDasani {
  0% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
  10% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
  20% {
    -webkit-transform: translateY(85.7%);
    -moz-transform: translateY(85.7%);
    -o-transform: translateY(85.7%);
    -ms-transform: translateY(85.7%);
    transform: translateY(85.7%);
  }
  30% {
    -webkit-transform: translateY(85.7%);
    -moz-transform: translateY(85.7%);
    -o-transform: translateY(85.7%);
    -ms-transform: translateY(85.7%);
    transform: translateY(85.7%);
  }
  40% {
    -webkit-transform: translateY(85.7%);
    -moz-transform: translateY(85.7%);
    -o-transform: translateY(85.7%);
    -ms-transform: translateY(85.7%);
    transform: translateY(85.7%);
  }
  50% {
    -webkit-transform: translateY(40%);
    -moz-transform: translateY(40%);
    -o-transform: translateY(40%);
    -ms-transform: translateY(40%);
    transform: translateY(40%);
  }
  60% {
    -webkit-transform: translateY(45%);
    -moz-transform: translateY(45%);
    -o-transform: translateY(45%);
    -ms-transform: translateY(45%);
    transform: translateY(45%);
  }
  70% {
    -webkit-transform: translateY(40%);
    -moz-transform: translateY(40%);
    -o-transform: translateY(40%);
    -ms-transform: translateY(40%);
    transform: translateY(40%);
  }
  80% {
    -webkit-transform: translateY(20%);
    -moz-transform: translateY(20%);
    -o-transform: translateY(20%);
    -ms-transform: translateY(20%);
    transform: translateY(20%);
  }
  90% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
  100% {
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -o-transform: translateY(10%);
    -ms-transform: translateY(10%);
    transform: translateY(10%);
  }
}
@-moz-keyframes tooltipFloat {
  0% {
    -webkit-transform: translateY(-0.3em);
    -moz-transform: translateY(-0.3em);
    -o-transform: translateY(-0.3em);
    -ms-transform: translateY(-0.3em);
    transform: translateY(-0.3em);
  }
  25% {
    -webkit-transform: translateY(0.3em);
    -moz-transform: translateY(0.3em);
    -o-transform: translateY(0.3em);
    -ms-transform: translateY(0.3em);
    transform: translateY(0.3em);
  }
  50% {
    -webkit-transform: translateY(-0.3em);
    -moz-transform: translateY(-0.3em);
    -o-transform: translateY(-0.3em);
    -ms-transform: translateY(-0.3em);
    transform: translateY(-0.3em);
  }
  75% {
    -webkit-transform: translateY(0.3em);
    -moz-transform: translateY(0.3em);
    -o-transform: translateY(0.3em);
    -ms-transform: translateY(0.3em);
    transform: translateY(0.3em);
  }
  100% {
    -webkit-transform: translateY(-0.4em);
    -moz-transform: translateY(-0.4em);
    -o-transform: translateY(-0.4em);
    -ms-transform: translateY(-0.4em);
    transform: translateY(-0.4em);
  }
}
@-webkit-keyframes tooltipFloat {
  0% {
    -webkit-transform: translateY(-0.3em);
    -moz-transform: translateY(-0.3em);
    -o-transform: translateY(-0.3em);
    -ms-transform: translateY(-0.3em);
    transform: translateY(-0.3em);
  }
  25% {
    -webkit-transform: translateY(0.3em);
    -moz-transform: translateY(0.3em);
    -o-transform: translateY(0.3em);
    -ms-transform: translateY(0.3em);
    transform: translateY(0.3em);
  }
  50% {
    -webkit-transform: translateY(-0.3em);
    -moz-transform: translateY(-0.3em);
    -o-transform: translateY(-0.3em);
    -ms-transform: translateY(-0.3em);
    transform: translateY(-0.3em);
  }
  75% {
    -webkit-transform: translateY(0.3em);
    -moz-transform: translateY(0.3em);
    -o-transform: translateY(0.3em);
    -ms-transform: translateY(0.3em);
    transform: translateY(0.3em);
  }
  100% {
    -webkit-transform: translateY(-0.4em);
    -moz-transform: translateY(-0.4em);
    -o-transform: translateY(-0.4em);
    -ms-transform: translateY(-0.4em);
    transform: translateY(-0.4em);
  }
}
@-o-keyframes tooltipFloat {
  0% {
    -webkit-transform: translateY(-0.3em);
    -moz-transform: translateY(-0.3em);
    -o-transform: translateY(-0.3em);
    -ms-transform: translateY(-0.3em);
    transform: translateY(-0.3em);
  }
  25% {
    -webkit-transform: translateY(0.3em);
    -moz-transform: translateY(0.3em);
    -o-transform: translateY(0.3em);
    -ms-transform: translateY(0.3em);
    transform: translateY(0.3em);
  }
  50% {
    -webkit-transform: translateY(-0.3em);
    -moz-transform: translateY(-0.3em);
    -o-transform: translateY(-0.3em);
    -ms-transform: translateY(-0.3em);
    transform: translateY(-0.3em);
  }
  75% {
    -webkit-transform: translateY(0.3em);
    -moz-transform: translateY(0.3em);
    -o-transform: translateY(0.3em);
    -ms-transform: translateY(0.3em);
    transform: translateY(0.3em);
  }
  100% {
    -webkit-transform: translateY(-0.4em);
    -moz-transform: translateY(-0.4em);
    -o-transform: translateY(-0.4em);
    -ms-transform: translateY(-0.4em);
    transform: translateY(-0.4em);
  }
}
@keyframes tooltipFloat {
  0% {
    -webkit-transform: translateY(-0.3em);
    -moz-transform: translateY(-0.3em);
    -o-transform: translateY(-0.3em);
    -ms-transform: translateY(-0.3em);
    transform: translateY(-0.3em);
  }
  25% {
    -webkit-transform: translateY(0.3em);
    -moz-transform: translateY(0.3em);
    -o-transform: translateY(0.3em);
    -ms-transform: translateY(0.3em);
    transform: translateY(0.3em);
  }
  50% {
    -webkit-transform: translateY(-0.3em);
    -moz-transform: translateY(-0.3em);
    -o-transform: translateY(-0.3em);
    -ms-transform: translateY(-0.3em);
    transform: translateY(-0.3em);
  }
  75% {
    -webkit-transform: translateY(0.3em);
    -moz-transform: translateY(0.3em);
    -o-transform: translateY(0.3em);
    -ms-transform: translateY(0.3em);
    transform: translateY(0.3em);
  }
  100% {
    -webkit-transform: translateY(-0.4em);
    -moz-transform: translateY(-0.4em);
    -o-transform: translateY(-0.4em);
    -ms-transform: translateY(-0.4em);
    transform: translateY(-0.4em);
  }
}
/* Machine Overlay       :-
--------------------------- */
.machine-overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 24;
  height: 100%;
  width: 100%;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
  text-align: center;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  visibility: hidden;
  background-color: rgba(0,0,0,0.75);
}
.machine-overlay .machine-overlay-container {
  position: relative;
  max-width: 550px;
  max-height: 750px;
  margin: 6em auto;
}
.machine-overlay.active {
  opacity: 1;
  -ms-filter: none;
  filter: none;
  visibility: visible;
}
.machine-overlay-inner {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.machine-overlay-inner.active {
  opacity: 1;
  -ms-filter: none;
  filter: none;
}
.machine-overlay-bottle {
  width: 100%;
  padding-top: 8em;
}
.machine-overlay-bottle svg {
  display: inline-block;
  width: 25%;
  height: 40%;
}
@media (max-width: 1200px) {
  .machine-overlay-bottle {
    padding-top: 5em;
  }
}
@media (max-width: 900px) {
  .machine-overlay-bottle {
    padding-top: 3em;
  }
}
.bottle-line {
  margin-top: 2em;
  color: #fff;
  letter-spacing: 0.1em;
  font-size: 0.8em;
  font-weight: 600;
  font-family: 'Gotham', Arial, sans-serif;
}
/* Browser Fallbacks     :-
--------------------------- */
.browser-support {
  display: none;
  -webkit-border-radius: 0.25em;
  border-radius: 0.25em;
  background-color: #eee;
  border-bottom: 0.25em solid #d6d6d6;
  width: 50%;
  padding: 2em;
  margin: 4em auto;
  text-align: center;
  font-family: 'Gotham', Arial, sans-serif;
}
.browser-support p {
  margin-bottom: 1em;
  color: #777;
}
.browser-ie .machine-container {
  display: none;
}
.browser-ie .browser-support {
  display: block;
}
.browser-logos {
  margin-top: 2em;
}
.browser-logos a {
  display: inline-block;
  width: 4em;
  margin: 0 0.75em;
  text-decoration: none;
  color: #777;
}
.browser-logos a:hover {
  opacity: 0.8;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  filter: alpha(opacity=80);
}
.browser-logos img {
  display: inline-block;
  width: 100%;
  height: auto;
}
.browser-logos .text {
  display: inline-block;
  margin-top: 0.5em;
}
!

JS 

              
                $(function() {

  function clearClasses() {
    $('.shelf-bottles-moving').removeClass('moving-bottles');
    $('.machine-container').removeClass('grapping-bottle');
    $('.machine-container').removeClass(function (index, css) {
        return (css.match (/(^|\s)grab-bottle[^\s$]+/g) || []).join(' ')+ ' grapping-bottle';
    });
  };

  // Activate Coke Bottle
  $('.activator-coke').click(function() {
    clearClasses();

    setTimeout(function() {
      $('.machine-container').addClass('grab-bottle-coke grapping-bottle');
      $('.moving-coke').addClass('moving-bottles');
    }, 10);
  });

  // Activate Sprite Bottle
  $('.activator-sprite').click(function() {
    clearClasses();
    setTimeout(function() {
      $('.machine-container').addClass('grab-bottle-sprite grapping-bottle');
      $('.moving-sprite').addClass('moving-bottles');
    }, 10);
  });

  // Activate Diet Bottle
  $('.activator-diet').click(function() {
    clearClasses();
    setTimeout(function() {
      $('.machine-container').addClass('grab-bottle-diet grapping-bottle');
      $('.moving-diet').addClass('moving-bottles');
    }, 10);
  });

  // Activate Dasani Bottle
  $('.activator-dasani').click(function() {
    clearClasses();
    setTimeout(function() {
      $('.machine-container').addClass('grab-bottle-dasani grapping-bottle');
      $('.moving-dasani').addClass('moving-bottles');
    }, 10);
  });

  // Open Coke Overlay
  $('.bottle-coke').click(function() {
    clearClasses();


    $(this).addClass('hide-bottle');
    $('.machine-overlay').addClass('active');
    $('.machine-overlay-coke').addClass('active');

    setTimeout(function() {
      $('.machine-overlay').removeClass('active');
      $('.bottle-coke').removeClass('hide-bottle');
      $('.machine-overlay-inner').removeClass('active');
    }, 5000);
     // Linear interpolation helper

    // Activates SMIL animation when the bottle is clicked
    // This part is the only way to make the filling animation.
    var cokeFill = document.getElementById('cokeFillAnimation');
    cokeFill.beginElement();
  });

  // Open Coke Overlay
  $('.bottle-sprite').click(function() {
    clearClasses();


    $(this).addClass('hide-bottle');
    $('.machine-overlay').addClass('active');
    $('.machine-overlay-sprite').addClass('active');

    setTimeout(function() {
      $('.machine-overlay').removeClass('active');
      $('.bottle-sprite').removeClass('hide-bottle');
      $('.machine-overlay-inner').removeClass('active');
    }, 5000);

    // Activates SMIL animation when the bottle is clicked
    // This part is the only way to make the filling animation.
    var spriteFill = document.getElementById('spriteFillAnimation');
    spriteFill.beginElement();
  });

  // Open Coke Overlay
  $('.bottle-diet').click(function() {
    clearClasses();


    $(this).addClass('hide-bottle');
    $('.machine-overlay').addClass('active');
    $('.machine-overlay-diet').addClass('active');

    setTimeout(function() {
      $('.machine-overlay').removeClass('active');
      $('.bottle-diet').removeClass('hide-bottle');
      $('.machine-overlay-inner').removeClass('active');
    }, 5000);

    // Activates SMIL animation when the bottle is clicked
    // This part is the only way to make the filling animation.
    var dietFill = document.getElementById('dietFillAnimation');
    dietFill.beginElement();
  });

  // Open Coke Overlay
  $('.bottle-dasani').click(function() {
    clearClasses();


    $(this).addClass('hide-bottle');
    $('.machine-overlay').addClass('active');
    $('.machine-overlay-dasani').addClass('active');

    setTimeout(function() {
      $('.machine-overlay').removeClass('active');
      $('.bottle-dasani').removeClass('hide-bottle');
      $('.machine-overlay-inner').removeClass('active');
    }, 5000);

    // Activates SMIL animation when the bottle is clicked
    // This part is the only way to make the filling animation.
    var dasaniFill = document.getElementById('dasaniFillAnimation');
    dasaniFill.beginElement();
  });

});
!
999px

Console