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.
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.
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.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
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.
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).
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.
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.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
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.
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.
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.
Using packages here is powered by Skypack, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ES6 import
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.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<div id="wrapper">
<div id="outline" class="centering" >
<div class="base">
<div id="tridiv">
<div class="body-part anim-base body-anim">
<div id="sp" class="sphere">
<svg>
<defs>
<polygon id="tri" points="0,60 16,-1 32,60"></polygon>
<polygon id="tpz1" points="13,-1 0,60 59,60 45,-1"></polygon>
<polygon id="tpz2" points="16,-1 7,60 83.5,60 74.5,-1"></polygon>
<polygon id="tpz3" points="12.2,-1 8.5,60 91,60 88.5,-1"></polygon>
</defs>
</svg>
<div>
<div class="hemi head">
<div class="phase-1">
<div class="opposite1">
<svg class="tr1a" width="32px" height="60px">
<use xlink:href="#tri"></use>
</svg>
<svg class="tr1b" width="32px" height="60px">
<use xlink:href="#tri"></use>
</svg>
</div>
<div class="opposite2">
<svg class="tr1a" width="32px" height="60px">
<use xlink:href="#tri"></use>
</svg>
<svg class="tr1b" width="32px" height="60px">
<use xlink:href="#tri"></use>
</svg>
</div>
<div class="opposite3">
<svg class="tr1a" width="32px" height="60px">
<use xlink:href="#tri"></use>
</svg>
<svg class="tr1b" width="32px" height="60px">
<use xlink:href="#tri"></use>
</svg>
</div>
<div class="opposite4">
<svg class="tr1a" width="32px" height="60px">
<use xlink:href="#tri"></use>
</svg>
<svg class="tr1b" width="32px" height="60px">
<use xlink:href="#tri"></use>
</svg>
</div>
<div class="opposite5">
<svg class="tr1a" width="32px" height="60px">
<use xlink:href="#tri"></use>
</svg>
<svg class="tr1b" width="32px" height="60px">
<use xlink:href="#tri"></use>
</svg>
</div>
<div class="opposite6">
<svg class="tr1a" width="32px" height="60px">
<use xlink:href="#tri"></use>
</svg>
<svg class="tr1b" width="32px" height="60px">
<use xlink:href="#tri"></use>
</svg>
</div>
</div>
<div class="phase-2">
<div class="opposite1">
<svg class="tpz1a" width="59px" height="60px">
<use xlink:href="#tpz1"></use>
</svg>
<svg class="tpz1b" width="59px" height="60px">
<use xlink:href="#tpz1"></use>
</svg>
</div>
<div class="opposite2">
<svg class="tpz1a" width="59px" height="60px">
<use xlink:href="#tpz1"></use>
</svg>
<svg class="tpz1b" width="59px" height="60px">
<use xlink:href="#tpz1"></use>
</svg>
</div>
<div class="opposite3">
<svg class="tpz1a" width="59px" height="60px">
<use xlink:href="#tpz1"></use>
</svg>
<svg class="tpz1b" width="59px" height="60px">
<use xlink:href="#tpz1"></use>
</svg>
</div>
<div class="opposite4">
<svg class="tpz1a" width="59px" height="60px">
<use xlink:href="#tpz1"></use>
</svg>
<svg class="tpz1b" width="59px" height="60px">
<use xlink:href="#tpz1"></use>
</svg>
</div>
<div class="opposite5">
<svg class="tpz1a" width="59px" height="60px">
<use xlink:href="#tpz1"></use>
</svg>
<svg class="tpz1b" width="59px" height="60px">
<use xlink:href="#tpz1"></use>
</svg>
</div>
<div class="opposite6">
<svg class="tpz1a" width="59px" height="60px">
<use xlink:href="#tpz1"></use>
</svg>
<svg class="tpz1b" width="59px" height="60px">
<use xlink:href="#tpz1"></use>
</svg>
</div>
</div>
<div class="phase-3">
<div class="opposite1">
<svg class="tpz2a" width="90px" height="60px">
<use xlink:href="#tpz2"></use>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="10px" y="10px" width="71.008px" height="51.629px" viewBox="0 0 71.008 51.629" enable-background="new 0 0 71.008 51.629" xml:space="preserve">
<defs>
</defs>
<polygon fill="#364872" points="16.734,0 0,51.629 71.008,51.629 60,0 "></polygon>
<circle cx="32.508" cy="20.75" r="16.75"></circle>
</svg>
</svg>
<svg class="tpz2b" width="90px" height="60px">
<use xlink:href="#tpz2"></use>
</svg>
</div>
<div class="opposite2">
<svg class="tpz2a" width="90px" height="60px">
<use xlink:href="#tpz2"></use>
</svg>
<svg class="tpz2b" width="90px" height="60px">
<use xlink:href="#tpz2"></use>
</svg>
</div>
<div class="opposite3">
<svg class="tpz2a" width="90px" height="60px">
<use xlink:href="#tpz2"></use>
</svg>
<svg class="tpz2b" width="90px" height="60px">
<use xlink:href="#tpz2"></use>
</svg>
</div>
<div class="opposite4">
<svg class="tpz2a" width="90px" height="60px">
<use xlink:href="#tpz2"></use>
</svg>
<svg class="tpz2b" width="90px" height="60px">
<use xlink:href="#tpz2"></use>
</svg>
</div>
<div class="opposite5">
<svg class="tpz2a" width="90px" height="60px">
<use xlink:href="#tpz2"></use>
</svg>
<svg class="tpz2b" width="90px" height="60px">
<use xlink:href="#tpz2"></use>
</svg>
</div>
<div class="opposite6">
<svg class="tpz2a" width="90px" height="60px">
<use xlink:href="#tpz2"></use>
</svg>
<svg class="tpz2b" width="90px" height="60px">
<use xlink:href="#tpz2"></use>
</svg>
</div>
</div>
<div class="phase-4">
<div class="opposite1">
<svg class="tpz3a" width="100px" height="60px">
<use xlink:href="#tpz3"></use>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="15px" y="10px" width="73.25px" height="46px" viewBox="0 0 73.25 46" enable-background="new 0 0 73.25 46" xml:space="preserve">
<defs>
</defs>
<rect x="0.5" y="0.5" fill="none" stroke="#364872" stroke-miterlimit="10" width="72.25" height="45"></rect>
<rect x="17.5" y="7.5" fill="#364872" width="49.75" height="38"></rect>
<rect x="1.25" y="7.5" fill="#364872" width="11.25" height="38"></rect>
<circle fill="#999999" cx="49.5" cy="24.75" r="12.25"></circle>
</svg>
</svg>
<svg class="tpz3b" width="100px" height="60px">
<use xlink:href="#tpz3"></use>
</svg>
</div>
<div class="opposite2">
<svg class="tpz3a" width="100px" height="60px">
<use xlink:href="#tpz3"></use>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="10px" y="10px" width="73.25px" height="46px" viewBox="0 0 73.25 46" enable-background="new 0 0 73.25 46" xml:space="preserve">
<defs>
</defs>
<rect x="0.5" y="0.5" fill="none" stroke="#364872" stroke-miterlimit="10" width="72.25" height="45"></rect>
<g>
<path fill="#364872" d="M53.25,43.5c0,1.1,0.9,2,2,2h13.5c1.1,0,2-0.9,2-2v-41c0-1.1-0.9-2-2-2h-13.5c-1.1,0-2,0.9-2,2V43.5z"></path>
</g>
<g>
<path fill="#364872" d="M37.75,43.5c0,1.1,0.9,2,2,2h8c1.1,0,2-0.9,2-2v-41c0-1.1-0.9-2-2-2h-8c-1.1,0-2,0.9-2,2V43.5z"></path>
</g>
<g>
<path fill="#364872" d="M3.75,43.5c0,1.1,0.9,2,2,2h22c1.1,0,2-0.9,2-2v-41c0-1.1-0.9-2-2-2h-22c-1.1,0-2,0.9-2,2V43.5z"></path>
</g>
</svg>
</svg>
<svg class="tpz3b" width="100px" height="60px">
<use xlink:href="#tpz3"></use>
</svg>
</div>
<div class="opposite3">
<svg class="tpz3a" width="100px" height="60px">
<use xlink:href="#tpz3"></use>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="10px" y="10px" width="73.25px" height="46px" viewBox="0 0 73.25 46" enable-background="new 0 0 73.25 46" xml:space="preserve">
<defs>
</defs>
<rect x="0.5" y="0.5" fill="none" stroke="#364872" stroke-miterlimit="10" width="72.25" height="45"></rect>
<g>
<path fill="#364872" d="M53.25,43.5c0,1.1,0.9,2,2,2h13.5c1.1,0,2-0.9,2-2v-41c0-1.1-0.9-2-2-2h-13.5c-1.1,0-2,0.9-2,2V43.5z"></path>
</g>
<g>
<path fill="#364872" d="M37.75,43.5c0,1.1,0.9,2,2,2h8c1.1,0,2-0.9,2-2v-41c0-1.1-0.9-2-2-2h-8c-1.1,0-2,0.9-2,2V43.5z"></path>
</g>
<g>
<path fill="#364872" d="M3.75,43.5c0,1.1,0.9,2,2,2h22c1.1,0,2-0.9,2-2v-41c0-1.1-0.9-2-2-2h-22c-1.1,0-2,0.9-2,2V43.5z"></path>
</g>
</svg>
</svg>
<svg class="tpz3b" width="100px" height="60px">
<use xlink:href="#tpz3"></use>
</svg>
</div>
<div class="opposite4">
<svg class="tpz3a" width="100px" height="60px">
<use xlink:href="#tpz3"></use>
</svg>
<svg class="tpz3b" width="100px" height="60px">
<use xlink:href="#tpz3"></use>
</svg>
</div>
<div class="opposite5">
<svg class="tpz3a" width="100px" height="60px">
<use xlink:href="#tpz3"></use>
</svg>
<svg class="tpz3b" width="100px" height="60px">
<use xlink:href="#tpz3"></use>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="10px" y="10px" width="73.25px" height="46px" viewBox="0 0 73.25 46" enable-background="new 0 0 73.25 46" xml:space="preserve">
<defs>
</defs>
<rect x="0.5" y="0.5" fill="none" stroke="#364872" stroke-miterlimit="10" width="72.25" height="45"></rect>
<g>
<path fill="#364872" d="M4.75,43.5c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2v-41c0-1.1-0.9-2-2-2h-14c-1.1,0-2,0.9-2,2V43.5z"></path>
</g>
<g>
<path fill="#364872" d="M26.75,43.5c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2v-41c0-1.1-0.9-2-2-2h-14c-1.1,0-2,0.9-2,2V43.5z"></path>
</g>
<g>
<path fill="#364872" d="M50.75,43.5c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2v-41c0-1.1-0.9-2-2-2h-14c-1.1,0-2,0.9-2,2V43.5z"></path>
</g>
</svg>
</svg>
</div>
<div class="opposite6">
<svg class="tpz3a" width="100px" height="60px">
<use xlink:href="#tpz3"></use>
</svg>
<svg class="tpz3b" width="100px" height="60px">
<use xlink:href="#tpz3"></use>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="10px" y="10px" width="73.25px" height="46px" viewBox="0 0 73.25 46" enable-background="new 0 0 73.25 46" xml:space="preserve">
<defs>
</defs>
<rect x="0.5" y="0.5" fill="none" stroke="#364872" stroke-miterlimit="10" width="72.25" height="45"></rect>
<g>
<path fill="#364872" d="M50.75,43.5c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2v-41c0-1.1-0.9-2-2-2h-14c-1.1,0-2,0.9-2,2V43.5z"></path>
</g>
</svg>
</svg>
<div class="shape cylinder-2 cyl-2 eye">
<div class="face bm"></div>
<div class="face tp"></div>
<div class="face side s0"></div>
<div class="face side s1"></div>
<div class="face side s2"></div>
<div class="face side s3"></div>
<div class="face side s4"></div>
<div class="face side s5"></div>
<div class="face side s6"></div>
<div class="face side s7"></div>
<div class="face side s8"></div>
<div class="face side s9"></div>
<div class="face side s10"></div>
<div class="face side s11"></div>
<div class="face side s12"></div>
<div class="face side s13"></div>
<div class="face side s14"></div>
<div class="face side s15"></div>
<div class="face side s16"></div>
<div class="face side s17"></div>
<div class="face side s18"></div>
<div class="face side s19"></div>
</div>
<div class="shape cylinder-2 cyl-2 eye2">
<div class="face side s0"></div>
<div class="face side s1"></div>
<div class="face side s2"></div>
<div class="face side s3"></div>
<div class="face side s4"></div>
<div class="face side s5"></div>
<div class="face side s6"></div>
<div class="face side s7"></div>
<div class="face side s8"></div>
<div class="face side s9"></div>
<div class="face side s10"></div>
<div class="face side s11"></div>
<div class="face side s12"></div>
<div class="face side s13"></div>
<div class="face side s14"></div>
<div class="face side s15"></div>
<div class="face side s16"></div>
<div class="face side s17"></div>
<div class="face side s18"></div>
<div class="face side s19"></div>
<div class="face tp"></div>
</div>
</div>
</div>
</div>
<div class="hemi2">
<div class="phase-3">
<div class="opposite1">
<svg class="tpz2a" width="90px" height="60px">
<use xlink:href="#tpz2"></use>
</svg>
<svg class="tpz2b" width="90px" height="60px">
<use xlink:href="#tpz2"></use>
</svg>
</div>
<div class="opposite2">
<svg class="tpz2a" width="90px" height="60px">
<use xlink:href="#tpz2"></use>
</svg>
<svg class="tpz2b" width="90px" height="60px">
<use xlink:href="#tpz2"></use>
</svg>
</div>
<div class="opposite3">
<svg class="tpz2a" width="90px" height="60px">
<use xlink:href="#tpz2"></use>
</svg>
<svg class="tpz2b" width="90px" height="60px">
<use xlink:href="#tpz2"></use>
</svg>
</div>
<div class="opposite4">
<svg class="tpz2a" width="90px" height="60px">
<use xlink:href="#tpz2"></use>
</svg>
<svg class="tpz2b" width="90px" height="60px">
<use xlink:href="#tpz2"></use>
</svg>
</div>
<div class="opposite5">
<svg class="tpz2a" width="90px" height="60px">
<use xlink:href="#tpz2"></use>
</svg>
<svg class="tpz2b" width="90px" height="60px">
<use xlink:href="#tpz2"></use>
</svg>
</div>
<div class="opposite6">
<svg class="tpz2a" width="90px" height="60px">
<use xlink:href="#tpz2"></use>
</svg>
<svg class="tpz2b" width="90px" height="60px">
<use xlink:href="#tpz2"></use>
</svg>
</div>
</div>
</div>
</div>
</div>
<div class="shape cylinder-1 cyl-1">
<div class="face side s0">
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="67.546px" height="275.634px" viewBox="0 0 67 275" enable-background="new 0 0 67 275" xml:space="preserve">
<defs>
</defs>
<path fill="#FFFFFF" d="M67.046,70.806H18.21c-1.366,0-2.483-1.117-2.483-2.483V20.402c0-1.366,1.117-2.483,2.483-2.483h48.836
v-7.827h-56.7c-1.366,0-2.483,1.117-2.483,2.483v262.354c0,0.246,0.047,0.48,0.115,0.705h59.068V70.806z M57.529,255.562H20.694
c-1.366,0-2.483-1.117-2.483-2.483v-20.985c0-1.366,1.117-2.483,2.483-2.483h36.833c1.366,0,2.483,1.117,2.483,2.483v20.985h0.002
C60.012,254.445,58.895,255.562,57.529,255.562z M57.529,220.644H20.694c-1.366,0-2.483-1.117-2.483-2.483v-12.292
c0-1.366,1.117-2.483,2.483-2.483h36.833c1.366,0,2.483,1.117,2.483,2.483v12.292h0.002
C60.012,219.526,58.895,220.644,57.529,220.644z M60.114,190.756c0,1.366-1.117,2.483-2.483,2.483H20.798
c-1.366,0-2.483-1.117-2.483-2.483V81.911c0-1.366,1.117-2.483,2.483-2.483h36.833c1.366,0,2.483,1.117,2.483,2.483V190.756z"></path>
<path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M20.694,67.582c-1.366,0-2.483-1.117-2.483-2.483V22.885
c0-1.366,1.117-2.483,2.483-2.483h46.352v-2.483H18.21c-1.366,0-2.483,1.117-2.483,2.483v47.921c0,1.366,1.117,2.483,2.483,2.483
h48.836v-3.223H20.694z"></path>
<path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M18.21,22.885v42.214c0,1.366,1.117,2.483,2.483,2.483h46.352
V20.402H20.694C19.328,20.402,18.21,21.519,18.21,22.885z"></path>
<path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M57.631,79.428H20.798c-1.366,0-2.483,1.117-2.483,2.483v108.846
c0,1.366,1.117,2.483,2.483,2.483h36.833c1.366,0,2.483-1.117,2.483-2.483V81.911C60.114,80.545,58.997,79.428,57.631,79.428z
M57.84,188.238c0,1.366-1.117,2.483-2.483,2.483H23.075c-1.366,0-2.483-1.117-2.483-2.483V83.944c0-1.366,1.117-2.483,2.483-2.483
h32.281c1.366,0,2.483,1.117,2.483,2.483V188.238z"></path>
<path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M60.01,205.869c0-1.366-1.117-2.483-2.483-2.483H20.694
c-1.366,0-2.483,1.117-2.483,2.483v12.292c0,1.366,1.117,2.483,2.483,2.483h36.836c1.366,0,2.483-1.117,2.483-2.483H60.01V205.869z"></path>
<path fill="#818989" stroke="#000000" stroke-miterlimit="10" d="M60.01,232.094c0-1.366-1.117-2.483-2.483-2.483H20.694
c-1.366,0-2.483,1.117-2.483,2.483v20.985c0,1.366,1.117,2.483,2.483,2.483h36.836c1.366,0,2.483-1.117,2.483-2.483H60.01V232.094z
M55.873,246.911c0,1.366-1.117,2.483-2.483,2.483H36.422c-1.366,0-2.483-1.117-2.483-2.483v-8.651c0-1.366,1.117-2.483,2.483-2.483
H53.39c1.366,0,2.483,1.117,2.483,2.483V246.911z"></path>
<path fill="#4E595A" stroke="#000000" stroke-miterlimit="10" d="M53.39,235.776H36.422c-1.366,0-2.483,1.117-2.483,2.483v8.651
c0,1.366,1.117,2.483,2.483,2.483H53.39c1.366,0,2.483-1.117,2.483-2.483v-8.651C55.873,236.894,54.756,235.776,53.39,235.776z"></path>
<path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M55.356,81.461H23.075c-1.366,0-2.483,1.117-2.483,2.483v104.294
c0,1.366,1.117,2.483,2.483,2.483h32.281c1.366,0,2.483-1.117,2.483-2.483V83.944C57.84,82.579,56.722,81.461,55.356,81.461z"></path>
</svg>
</div>
<div class="face side s1">
</div>
<div class="face side s2"></div>
<div class="face side s3">
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="67.046px" height="275.634px" viewBox="0 0 67.046 275.634" enable-background="new 0 0 67.046 275.634" xml:space="preserve">
<defs>
</defs>
<g>
<path fill="#FFFFFF" d="M57.113,217.021c0,1.366-1.117,2.483-2.483,2.483H7.45c-1.366,0-2.483-1.117-2.483-2.483v-11.353
c0-1.366,1.117-2.483,2.483-2.483H54.63c1.366,0,2.483,1.117,2.483,2.483V217.021z"></path>
<path fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M57.113,217.021c0,1.366-1.117,2.483-2.483,2.483
H7.45c-1.366,0-2.483-1.117-2.483-2.483v-11.353c0-1.366,1.117-2.483,2.483-2.483H54.63c1.366,0,2.483,1.117,2.483,2.483V217.021z"></path>
</g>
<g>
<path fill="#FFFFFF" d="M44.72,193.331c0,1.366-1.117,2.483-2.483,2.483H7.45c-1.366,0-2.483-1.117-2.483-2.483V17.025
c0-1.366,1.117-2.483,2.483-2.483h34.787c1.366,0,2.483,1.117,2.483,2.483L44.72,193.331z"></path>
<path fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M44.72,193.331c0,1.366-1.117,2.483-2.483,2.483
H7.45c-1.366,0-2.483-1.117-2.483-2.483V17.025c0-1.366,1.117-2.483,2.483-2.483h34.787c1.366,0,2.483,1.117,2.483,2.483
L44.72,193.331z"></path>
</g>
<g>
<path fill="#FFFFFF" d="M39.731,186.676c0,1.366-1.117,2.483-2.483,2.483H12.416c-1.366,0-2.483-1.117-2.483-2.483V22.686
c0-1.366,1.117-2.483,2.483-2.483h24.832c1.366,0,2.483,1.117,2.483,2.483V186.676z"></path>
<path fill="none" stroke="#C4D4E3" stroke-width="0.25" stroke-miterlimit="10" d="M39.731,186.676
c0,1.366-1.117,2.483-2.483,2.483H12.416c-1.366,0-2.483-1.117-2.483-2.483V22.686c0-1.366,1.117-2.483,2.483-2.483h24.832
c1.366,0,2.483,1.117,2.483,2.483V186.676z"></path>
</g>
<polygon fill="#778089" points="25.326,261.092 14.964,250.727 14.964,236.072 25.326,225.709 39.982,225.709 50.344,236.072
50.344,250.727 39.982,261.092 "></polygon>
<circle fill="#AEBCC9" stroke="#40454A" stroke-width="0.5" stroke-miterlimit="10" cx="32.654" cy="243.4" r="10.67"></circle>
</svg>
</div>
<div class="face side s4">
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="68.092px" height="276.134px" viewBox="0 0 68.092 276.134" enable-background="new 0 0 68.092 276.134" xml:space="preserve">
<defs>
</defs>
<path fill="#B5B5B5" d="M8.026,90.641c0-1.366,1.117-2.483,2.483-2.483h42.234c1.366,0,2.483,1.117,2.483,2.483V200.87h0.003
c0,1.366-1.117,2.483-2.483,2.483H10.509c-1.366,0-2.483-1.117-2.483-2.483V90.641z M20.462,265.455
c0,1.366-1.117,2.483-2.483,2.483h-7.469v-0.002c-1.366,0-2.483-1.117-2.483-2.483v-27.335c0-1.366,1.117-2.483,2.483-2.483h7.469
c1.366,0,2.483,1.117,2.483,2.483V265.455z M22.925,224.559v-11.353c0-1.366,1.117-2.483,2.483-2.483h27.337
c1.366,0,2.483,1.117,2.483,2.483v11.353c0,1.366-1.117,2.483-2.483,2.483H25.408C24.042,227.042,22.925,225.925,22.925,224.559z
M37.844,265.455c0,1.366-1.117,2.483-2.483,2.483h-7.469v-0.002c-1.366,0-2.483-1.117-2.483-2.483v-27.335
c0-1.366,1.117-2.483,2.483-2.483h7.469c1.366,0,2.483,1.117,2.483,2.483V265.455z M57.709,265.455c0,1.366-1.117,2.483-2.483,2.483
h-7.469v-0.002c-1.366,0-2.483-1.117-2.483-2.483v-27.335c0-1.366,1.117-2.483,2.483-2.483h7.469c1.366,0,2.483,1.117,2.483,2.483
V265.455z"></path>
<path fill="#FFFFFF" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M10.509,203.353h42.237
c1.366,0,2.483-1.117,2.483-2.483h-0.003V90.641c0-1.366-1.117-2.483-2.483-2.483H10.509c-1.366,0-2.483,1.117-2.483,2.483V200.87
C8.026,202.235,9.143,203.353,10.509,203.353z"></path>
<path fill="#FFFFFF" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M52.746,227.042
c1.366,0,2.483-1.117,2.483-2.483v-11.353c0-1.366-1.117-2.483-2.483-2.483H25.408c-1.366,0-2.483,1.117-2.483,2.483v11.353
c0,1.366,1.117,2.483,2.483,2.483H52.746z"></path>
<path fill="#FFFFFF" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M55.226,235.634h-7.469
c-1.366,0-2.483,1.117-2.483,2.483v27.335c0,1.366,1.117,2.483,2.483,2.483v0.002h7.469c1.366,0,2.483-1.117,2.483-2.483v-27.337
C57.709,236.752,56.592,235.634,55.226,235.634z"></path>
<path fill="#FFFFFF" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M35.361,235.634h-7.469
c-1.366,0-2.483,1.117-2.483,2.483v27.335c0,1.366,1.117,2.483,2.483,2.483v0.002h7.469c1.366,0,2.483-1.117,2.483-2.483v-27.337
C37.844,236.752,36.727,235.634,35.361,235.634z"></path>
<path fill="#FFFFFF" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M17.978,235.634h-7.469
c-1.366,0-2.483,1.117-2.483,2.483v27.335c0,1.366,1.117,2.483,2.483,2.483v0.002h7.469c1.366,0,2.483-1.117,2.483-2.483v-27.337
C20.462,236.752,19.344,235.634,17.978,235.634z"></path>
<g>
<path d="M52.229,47.473H1v-1h51.229c1.378,0,2.5-1.122,2.5-2.5V3.5c0-1.378-1.122-2.5-2.5-2.5H1V0h51.229c1.93,0,3.5,1.57,3.5,3.5
v40.473C55.729,45.902,54.158,47.473,52.229,47.473z"></path>
</g>
<g>
<path d="M52.229,79.473H0v-1h52.229c1.378,0,2.5-1.122,2.5-2.5v-26c0-1.378-1.122-2.5-2.5-2.5H0v-1h52.229c1.93,0,3.5,1.57,3.5,3.5
v26C55.729,77.902,54.158,79.473,52.229,79.473z"></path>
</g>
<path fill="#0E172E" d="M47.377,14.253c1.366,0,2.483-1.117,2.483-2.483V6.878c0-1.366-1.117-2.483-2.483-2.483H1v9.858H47.377z"></path>
<polygon fill="#2D3C5C" points="11.035,71.242 21.758,74.967 48.75,71.242 48.75,57.272 21.758,53.393 11.035,57.272 1,58.325
1,70.436 "></polygon>
<polygon fill="#2D3C5C" points="25.455,40.202 35.068,36.167 48.75,36.167 48.75,23.284 35.068,23.284 25.455,18.628 1,18.628
1,40.202 "></polygon>
</svg>
</div>
<div class="face side s5">
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="67.39px" height="276.134px" viewBox="0 0 67 276" enable-background="new 0 0 67 276" xml:space="preserve">
<defs>
</defs>
<path fill="#B5B5B5" d="M51.985,264.402c0,1.366-1.117,2.483-2.483,2.483H17.22c-1.366,0-2.483-1.117-2.483-2.483v-32.281
c0-1.366,1.117-2.483,2.483-2.483h32.281c1.366,0,2.483,1.117,2.483,2.483V264.402z M8.529,89.05c0-1.366,1.117-2.483,2.483-2.483
h44.697c1.366,0,2.483,1.117,2.483,2.483v110.229c0,1.366-1.117,2.483-2.483,2.483H11.012c-1.366,0-2.483-1.117-2.483-2.483V89.05z
M11.012,209.132h44.697c1.366,0,2.483,1.117,2.483,2.483v11.353c0,1.366-1.117,2.483-2.483,2.483H11.012
c-1.366,0-2.483-1.117-2.483-2.483v-11.353C8.529,210.249,9.646,209.132,11.012,209.132z"></path>
<rect x="0" y="4.395" fill="#0E172E" width="67.39" height="9.858"></rect>
<polygon fill="#2D3C5C" points="52.54,59.911 50.484,57.272 50.484,53.393 0.045,53.393 0.045,74.967 50.484,74.967 50.484,71.242
52.54,69.223 67.39,70.403 67.39,58.369 "></polygon>
<polygon fill="#2D3C5C" points="15.92,18.628 15.92,22.353 13.864,24.372 0.045,23.274 0.045,35.118 13.864,33.684 15.92,36.321
15.92,40.202 67.39,40.202 67.39,18.628 "></polygon>
<path fill="#212C4C" d="M11.012,201.762h44.697c1.366,0,2.483-1.117,2.483-2.483V89.05c0-1.366-1.117-2.483-2.483-2.483H11.012
c-1.366,0-2.483,1.117-2.483,2.483v110.229C8.529,200.644,9.646,201.762,11.012,201.762z M14.737,106.504
c0-6.829,5.587-12.416,12.416-12.416h12.416c6.829,0,12.416,5.587,12.416,12.416v21.557c0,6.829-5.587,12.416-12.416,12.416H27.153
c-6.829,0-12.416-5.587-12.416-12.416V106.504z M14.737,161.134c0-6.829,5.587-12.416,12.416-12.416h12.416
c6.829,0,12.416,5.587,12.416,12.416v21.557c0,6.829-5.587,12.416-12.416,12.416H27.153c-6.829,0-12.416-5.587-12.416-12.416
V161.134z"></path>
<path fill="#202D4F" d="M49.501,229.638H17.22c-1.366,0-2.483,1.117-2.483,2.483v32.281c0,1.366,1.117,2.483,2.483,2.483h32.281
c1.366,0,2.483-1.117,2.483-2.483v-32.281C51.985,230.755,50.867,229.638,49.501,229.638z"></path>
<path fill="#FFFFFF" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M11.012,225.451h44.697
c1.366,0,2.483-1.117,2.483-2.483v-11.353c0-1.366-1.117-2.483-2.483-2.483H11.012c-1.366,0-2.483,1.117-2.483,2.483v11.353
C8.529,224.334,9.646,225.451,11.012,225.451z"></path>
<path fill="#B2BBCA" d="M27.153,140.477h12.416c6.829,0,12.416-5.587,12.416-12.416v-21.557c0-6.829-5.587-12.416-12.416-12.416
H27.153c-6.829,0-12.416,5.587-12.416,12.416v21.557C14.737,134.889,20.324,140.477,27.153,140.477z"></path>
<path fill="#B2BBCA" d="M27.153,195.107h12.416c6.829,0,12.416-5.587,12.416-12.416v-21.557c0-6.829-5.587-12.416-12.416-12.416
H27.153c-6.829,0-12.416,5.587-12.416,12.416v21.557C14.737,189.519,20.324,195.107,27.153,195.107z"></path>
<rect x="0.344" width="66.906" height="1"></rect>
<rect x="0.414" y="46.473" width="66.906" height="1"></rect>
<rect x="0.088" y="78.403" width="66.906" height="1"></rect>
</svg>
</div>
<div class="face side s6">
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="67.046px" height="276.134px" viewBox="0 0 67.046 276.134" enable-background="new 0 0 67.046 276.134" xml:space="preserve">
<path fill="#B5B5B5" d="M53.272,265.928H9.795V236.13h43.477V265.928z M22.211,145.566H9.795v-6.008h12.416V145.566z
M45.822,211.217v16.321h-27.81v-16.321H45.822z M22.211,150.773v6.008H9.795v-6.008H22.211z M22.211,161.987v6.008H9.795v-6.008
H22.211z M22.211,173.202v6.008H9.795v-6.008H22.211z M22.211,184.416v6.008H9.795v-6.008H22.211z M22.211,195.63v6.008H9.795
v-6.008H22.211z M53.272,203.848H31.533v-65.531h21.739V203.848z M53.272,131.836H6.701V88.653h46.57V131.836z"></path>
<g>
<path fill="#FFFFFF" d="M31.533,202.848c0,0.55,0.45,1,1,1h19.739c0.55,0,1-0.45,1-1v-63.531c0-0.55-0.45-1-1-1H32.533
c-0.55,0-1,0.45-1,1V202.848z"></path>
<path fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M31.533,202.848c0,0.55,0.45,1,1,1h19.739
c0.55,0,1-0.45,1-1v-63.531c0-0.55-0.45-1-1-1H32.533c-0.55,0-1,0.45-1,1V202.848z"></path>
</g>
<g>
<path fill="#FFFFFF" d="M6.701,130.836c0,0.55,0.45,1,1,1h44.57c0.55,0,1-0.45,1-1V89.653c0-0.55-0.45-1-1-1H7.701
c-0.55,0-1,0.45-1,1V130.836z"></path>
<path fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M6.701,130.836c0,0.55,0.45,1,1,1h44.57
c0.55,0,1-0.45,1-1V89.653c0-0.55-0.45-1-1-1H7.701c-0.55,0-1,0.45-1,1V130.836z"></path>
</g>
<g>
<path fill="#CFD9E0" d="M9.795,264.928c0,0.55,0.45,1,1,1h41.477c0.55,0,1-0.45,1-1V237.13c0-0.55-0.45-1-1-1H10.795
c-0.55,0-1,0.45-1,1V264.928z"></path>
<path fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M9.795,264.928c0,0.55,0.45,1,1,1h41.477
c0.55,0,1-0.45,1-1V237.13c0-0.55-0.45-1-1-1H10.795c-0.55,0-1,0.45-1,1V264.928z"></path>
</g>
<g>
<path fill="#FFFFFF" d="M18.012,226.538c0,0.55,0.45,1,1,1h25.81c0.55,0,1-0.45,1-1v-14.321c0-0.55-0.45-1-1-1h-25.81
c-0.55,0-1,0.45-1,1V226.538z"></path>
<path fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M18.012,226.538c0,0.55,0.45,1,1,1h25.81
c0.55,0,1-0.45,1-1v-14.321c0-0.55-0.45-1-1-1h-25.81c-0.55,0-1,0.45-1,1V226.538z"></path>
</g>
<g>
<path fill="#C7D1DA" d="M9.795,155.781c0,0.55,0.45,1,1,1h10.416c0.55,0,1-0.45,1-1v-4.008c0-0.55-0.45-1-1-1H10.795
c-0.55,0-1,0.45-1,1V155.781z"></path>
</g>
<g>
<path fill="#C7D1DA" d="M9.795,166.995c0,0.55,0.45,1,1,1h10.416c0.55,0,1-0.45,1-1v-4.008c0-0.55-0.45-1-1-1H10.795
c-0.55,0-1,0.45-1,1V166.995z"></path>
</g>
<g>
<path fill="#C7D1DA" d="M9.795,178.209c0,0.55,0.45,1,1,1h10.416c0.55,0,1-0.45,1-1v-4.008c0-0.55-0.45-1-1-1H10.795
c-0.55,0-1,0.45-1,1V178.209z"></path>
</g>
<g>
<path fill="#C7D1DA" d="M9.795,189.424c0,0.55,0.45,1,1,1h10.416c0.55,0,1-0.45,1-1v-4.008c0-0.55-0.45-1-1-1H10.795
c-0.55,0-1,0.45-1,1V189.424z"></path>
</g>
<g>
<path fill="#C7D1DA" d="M9.795,200.638c0,0.55,0.45,1,1,1h10.416c0.55,0,1-0.45,1-1v-4.008c0-0.55-0.45-1-1-1H10.795
c-0.55,0-1,0.45-1,1V200.638z"></path>
</g>
<g>
<path fill="#C7D1DA" d="M9.795,144.566c0,0.55,0.45,1,1,1h10.416c0.55,0,1-0.45,1-1v-4.008c0-0.55-0.45-1-1-1H10.795
c-0.55,0-1,0.45-1,1V144.566z"></path>
</g>
<g>
<path d="M67.046,47.473h-57c-1.93,0-3.5-1.57-3.5-3.5V3.5c0-1.93,1.57-3.5,3.5-3.5h57v1h-57c-1.378,0-2.5,1.122-2.5,2.5v40.473
c0,1.378,1.122,2.5,2.5,2.5h57V47.473z"></path>
</g>
<path fill="#0E172E" d="M17.206,4.395c-1.37,0-2.491,1.117-2.491,2.483v4.892c0,1.366,1.121,2.483,2.491,2.483h49.451V4.395H17.206z
"></path>
<g>
<path d="M66.701,79.473h-57c-1.93,0-3.5-1.57-3.5-3.5v-26c0-1.93,1.57-3.5,3.5-3.5h57v1h-57c-1.378,0-2.5,1.122-2.5,2.5v26
c0,1.378,1.122,2.5,2.5,2.5h57V79.473z"></path>
</g>
<polygon fill="#2D3C5C" points="31.465,57.428 17.727,57.428 17.727,70.308 31.465,70.308 41.118,74.967 66.701,74.967
66.701,53.393 41.118,53.393 "></polygon>
<polygon fill="#2D3C5C" points="55.599,22.353 44.831,18.628 17.727,22.353 17.727,36.321 44.831,40.202 55.599,36.321
66.701,35.162 66.701,23.241 "></polygon>
</svg>
</div>
<div class="face side s7">
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="67.046px" height="275.634px" viewBox="0 0 67.046 275.634" enable-background="new 0 0 67.046 275.634" xml:space="preserve">
<defs>
</defs>
<g>
<path fill="#FFFFFF" d="M53.41,202.348c0,0.55-0.45,1-1,1H14.658c-0.55,0-1-0.45-1-1V23.076c0-0.55,0.45-1,1-1H52.41
c0.55,0,1,0.45,1,1V202.348z"></path>
<path fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M53.41,202.348c0,0.55-0.45,1-1,1H14.658
c-0.55,0-1-0.45-1-1V23.076c0-0.55,0.45-1,1-1H52.41c0.55,0,1,0.45,1,1V202.348z"></path>
</g>
<g>
<path fill="#CFD9E0" d="M59.41,264.428c0,0.55-0.45,1-1,1H5.758c-0.55,0-1-0.45-1-1v-47.664c0-0.55,0.45-1,1-1H58.41
c0.55,0,1,0.45,1,1V264.428z"></path>
<path fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M59.41,264.428c0,0.55-0.45,1-1,1H5.758
c-0.55,0-1-0.45-1-1v-47.664c0-0.55,0.45-1,1-1H58.41c0.55,0,1,0.45,1,1V264.428z"></path>
</g>
</svg>
</div>
<div class="face side s8"></div>
<div class="face side s9">
</div>
<div class="face side s10">
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="67px" height="275px" viewBox="0 0 67 275" enable-background="new 0 0 67 275" xml:space="preserve">
<defs>
</defs>
<path fill="#FFFFFF" d="M59.683,12.575c0-1.366-1.117-2.483-2.483-2.483H0.5v7.827h48.423c1.366,0,2.483,1.117,2.483,2.483v47.921
h-0.003c0,1.366-1.117,2.483-2.483,2.483H0.5v204.828h59.068c0.068-0.225,0.115-0.459,0.115-0.705V12.575z M45.613,255.562H8.778
c-1.366,0-2.483-1.117-2.483-2.483v-20.985c0-1.366,1.117-2.483,2.483-2.483h36.833c1.366,0,2.483,1.117,2.483,2.483v20.985h0.003
C48.096,254.445,46.979,255.562,45.613,255.562z M45.613,220.644H8.778c-1.366,0-2.483-1.117-2.483-2.483v-12.292
c0-1.366,1.117-2.483,2.483-2.483h36.833c1.366,0,2.483,1.117,2.483,2.483v12.292h0.003
C48.096,219.526,46.979,220.644,45.613,220.644z M48.198,190.756c0,1.366-1.117,2.483-2.483,2.483H8.882
c-1.366,0-2.483-1.117-2.483-2.483V81.911c0-1.366,1.117-2.483,2.483-2.483h36.833c1.366,0,2.483,1.117,2.483,2.483V190.756z"></path>
<path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M46.026,20.402c1.366,0,2.483,1.117,2.483,2.483v42.214
c0,1.366-1.117,2.483-2.483,2.483H0.5v3.223h48.421c1.366,0,2.483-1.117,2.483-2.483h0.003V20.402c0-1.366-1.117-2.483-2.483-2.483
H0.5v2.483H46.026z"></path>
<path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M46.026,67.582c1.366,0,2.483-1.117,2.483-2.483V22.885
c0-1.366-1.117-2.483-2.483-2.483H0.5v47.181H46.026z"></path>
<path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M45.715,79.428H8.882c-1.366,0-2.483,1.117-2.483,2.483v108.846
c0,1.366,1.117,2.483,2.483,2.483h36.833c1.366,0,2.483-1.117,2.483-2.483V81.911C48.198,80.545,47.081,79.428,45.715,79.428z
M45.924,188.238c0,1.366-1.117,2.483-2.483,2.483H11.159c-1.366,0-2.483-1.117-2.483-2.483V83.944c0-1.366,1.117-2.483,2.483-2.483
h32.281c1.366,0,2.483,1.117,2.483,2.483V188.238z"></path>
<path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M48.094,205.869c0-1.366-1.117-2.483-2.483-2.483H8.778
c-1.366,0-2.483,1.117-2.483,2.483v12.292c0,1.366,1.117,2.483,2.483,2.483h36.836c1.366,0,2.483-1.117,2.483-2.483h-0.003V205.869z
"></path>
<path fill="#818989" stroke="#000000" stroke-miterlimit="10" d="M48.094,232.094c0-1.366-1.117-2.483-2.483-2.483H8.778
c-1.366,0-2.483,1.117-2.483,2.483v20.985c0,1.366,1.117,2.483,2.483,2.483h36.836c1.366,0,2.483-1.117,2.483-2.483h-0.003V232.094z
M34.024,246.911c0,1.366-1.117,2.483-2.483,2.483H14.573c-1.366,0-2.483-1.117-2.483-2.483v-8.651c0-1.366,1.117-2.483,2.483-2.483
h16.968c1.366,0,2.483,1.117,2.483,2.483V246.911z"></path>
<path fill="#4E595A" stroke="#000000" stroke-miterlimit="10" d="M31.541,235.776H14.573c-1.366,0-2.483,1.117-2.483,2.483v8.651
c0,1.366,1.117,2.483,2.483,2.483h16.968c1.366,0,2.483-1.117,2.483-2.483v-8.651C34.024,236.894,32.907,235.776,31.541,235.776z"></path>
<path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M43.441,81.461H11.159c-1.366,0-2.483,1.117-2.483,2.483v104.294
c0,1.366,1.117,2.483,2.483,2.483h32.281c1.366,0,2.483-1.117,2.483-2.483V83.944C45.924,82.579,44.806,81.461,43.441,81.461z"></path>
</svg>
</div>
<div class="face side s11">
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="68px" height="275.634px" viewBox="0 0 68 275" enable-background="new 0 0 68 275" xml:space="preserve">
<defs>
</defs>
<polyline fill="#FFFFFF" points="0.5,10.092 0.5,17.919 67.546,17.919 67.546,10.092 "></polyline>
<path fill="#FFFFFF" d="M0.5,275.634h67.046V70.806H0.5V275.634z M53.199,261.832c0,1.366-1.117,2.483-2.483,2.483H18.435
c-1.366,0-2.483-1.117-2.483-2.483v-32.281c0-1.366,1.117-2.483,2.483-2.483h32.281c1.366,0,2.483,1.117,2.483,2.483V261.832z
M8.845,79.996c0-1.366,1.117-2.483,2.483-2.483h46.766c1.366,0,2.483,1.117,2.483,2.483v108.846h0.003
c0,1.366-1.117,2.483-2.483,2.483H11.328c-1.366,0-2.483-1.117-2.483-2.483V79.996z M11.191,201.471h46.766
c1.366,0,2.483,1.117,2.483,2.483v12.292c0,1.366-1.117,2.483-2.483,2.483H11.191c-1.366,0-2.483-1.117-2.483-2.483v-12.292
C8.708,202.588,9.826,201.471,11.191,201.471z"></path>
<rect x="0.5" y="67.582" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" width="67.046" height="3.223"></rect>
<rect x="0.5" y="17.919" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" width="67.046" height="2.483"></rect>
<rect x="0.5" y="20.402" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" width="67.046" height="47.181"></rect>
<path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M11.328,191.325h46.768c1.366,0,2.483-1.117,2.483-2.483h-0.003
V79.996c0-1.366-1.117-2.483-2.483-2.483H11.328c-1.366,0-2.483,1.117-2.483,2.483v108.846
C8.845,190.207,9.962,191.325,11.328,191.325z M11.122,83.03c0-1.366,1.117-2.483,2.483-2.483h42.214
c1.366,0,2.483,1.117,2.483,2.483v102.779c0,1.366-1.117,2.483-2.483,2.483H13.605c-1.366,0-2.483-1.117-2.483-2.483V83.03z"></path>
<path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M11.191,218.729h46.766c1.366,0,2.483-1.117,2.483-2.483v-12.292
c0-1.366-1.117-2.483-2.483-2.483H11.191c-1.366,0-2.483,1.117-2.483,2.483v12.292C8.708,217.612,9.826,218.729,11.191,218.729z"></path>
<path fill="#202D4F" stroke="#000000" stroke-miterlimit="10" d="M50.716,227.068H18.435c-1.366,0-2.483,1.117-2.483,2.483v32.281
c0,1.366,1.117,2.483,2.483,2.483h32.281c1.366,0,2.483-1.117,2.483-2.483v-32.281C53.199,228.185,52.082,227.068,50.716,227.068z"></path>
<path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M13.605,188.293h42.214c1.366,0,2.483-1.117,2.483-2.483V83.03
c0-1.366-1.117-2.483-2.483-2.483H13.605c-1.366,0-2.483,1.117-2.483,2.483v102.779C11.122,187.175,12.239,188.293,13.605,188.293z"></path>
</svg>
</div>
</div>
<div class="center-ancle">
<div class="shape cylinder-2 cyl-2 cyl-2-indirect">
<div class="face bm"></div>
<div class="face tp"></div>
<div class="face side s0"></div>
<div class="face side s1"></div>
<div class="face side s2"></div>
<div class="face side s3"></div>
<div class="face side s4"></div>
<div class="face side s5"></div>
<div class="face side s6"></div>
<div class="face side s7"></div>
<div class="face side s8"></div>
<div class="face side s9"></div>
<div class="face side s10"></div>
<div class="face side s11"></div>
<div class="face side s12"></div>
<div class="face side s13"></div>
<div class="face side s14"></div>
<div class="face side s15"></div>
<div class="face side s16"></div>
<div class="face side s17"></div>
<div class="face side s18"></div>
<div class="face side s19"></div>
</div>
<div class="shape cuboid-1 cub-1 ankle">
<div class="face ft"></div>
<div class="face bk"></div>
<div class="face rt"></div>
<div class="face bm"></div>
<div class="face tp"></div>
</div>
</div>
</div>
<div class="foot-left">
<div class="foot">
<div class="foot-top">
<div class="shape prism-1 pri-1">
<div class="face ft"></div>
<div class="face bk"></div>
<div class="face-wrapper rt">
<div class="face"></div>
</div>
<div class="face-wrapper lt">
<div class="face"></div>
</div>
<div class="face bm"></div>
</div>
<div class="shape cuboid-1 cub-1">
<div class="face ft"></div>
<div class="face bk"></div>
<div class="face bm"></div>
<div class="face tp"></div>
</div>
<div class="shape prism-2 pri-2">
<div class="face ft"></div>
<div class="face bk"></div>
<div class="face-wrapper rt">
<div class="face"></div>
</div>
<div class="face-wrapper lt">
<div class="face"></div>
</div>
<div class="face bm"></div>
</div>
</div>
<div class="foot-top2">
<div class="shape prism-1 pri-1">
<div class="face ft"></div>
<div class="face bk"></div>
<div class="face-wrapper rt">
<div class="face"></div>
</div>
<div class="face-wrapper lt">
<div class="face"></div>
</div>
<div class="face bm"></div>
</div>
<div class="shape cuboid-1 cub-1">
<div class="face ft"></div>
<div class="face bk"></div>
<div class="face bm"></div>
<div class="face tp"></div>
</div>
<div class="shape prism-2 pri-2">
<div class="face ft"></div>
<div class="face bk"></div>
<div class="face-wrapper rt">
<div class="face"></div>
</div>
<div class="face-wrapper lt">
<div class="face"></div>
</div>
<div class="face bm"></div>
</div>
</div>
<div class="foot-top3">
<div class="shape prism-1 pri-1">
<div class="face ft"></div>
<div class="face bk"></div>
<div class="face-wrapper rt">
<div class="face"></div>
</div>
<div class="face-wrapper lt">
<div class="face"></div>
</div>
<div class="face bm"></div>
</div>
<div class="shape cuboid-1 cub-1">
<div class="face ft"></div>
<div class="face bk"></div>
<div class="face bm"></div>
<div class="face tp"></div>
</div>
<div class="shape prism-2 pri-2">
<div class="face ft"></div>
<div class="face bk"></div>
<div class="face-wrapper rt">
<div class="face"></div>
</div>
<div class="face-wrapper lt">
<div class="face"></div>
</div>
<div class="face bm"></div>
</div>
</div>
<div class="foot-bottom">
<div class="shape prism-1 pri-1">
<div class="face ft"></div>
<div class="face bk"></div>
<div class="face-wrapper rt">
<div class="face"></div>
</div>
<div class="face-wrapper lt">
<div class="face"></div>
</div>
<div class="face bm"></div>
</div>
<div class="shape cuboid-1 cub-1">
<div class="face ft"></div>
<div class="face bk"></div>
<div class="face bm"></div>
<div class="face tp"></div>
</div>
<div class="shape prism-2 pri-2">
<div class="face ft"></div>
<div class="face bk"></div>
<div class="face-wrapper rt">
<div class="face"></div>
</div>
<div class="face-wrapper lt">
<div class="face"></div>
</div>
<div class="face bm"></div>
</div>
</div>
<div class="foot-part-1">
<div class="shape cylinder-2 cyl-2">
<div class="face bm"></div>
<div class="face tp"></div>
<div class="face side s0"></div>
<div class="face side s1"></div>
<div class="face side s2"></div>
<div class="face side s3"></div>
<div class="face side s4"></div>
<div class="face side s5"></div>
<div class="face side s6"></div>
<div class="face side s7"></div>
<div class="face side s8"></div>
<div class="face side s9"></div>
</div>
<div class="shape cylinder-2 cyl-2 cyl-2-bottom">
<div class="face bm"></div>
<div class="face tp"></div>
<div class="face side s0"></div>
<div class="face side s1"></div>
<div class="face side s2"></div>
<div class="face side s3"></div>
<div class="face side s4"></div>
<div class="face side s5"></div>
<div class="face side s6"></div>
<div class="face side s7"></div>
<div class="face side s8"></div>
<div class="face side s9"></div>
</div>
<div class="shape cuboid-1 cub-1 cub-2">
<div class="face ft"></div>
<div class="face bk"></div>
<div class="face rt"></div>
<div class="face lt"></div>
<div class="face bm"></div>
<div class="face tp"></div>
</div>
</div>
</div>
<div class="arm">
<div class="shape cylinder-2 cyl-2 cyl-2-indirect">
<div class="face bm"></div>
<div class="face tp"></div>
<div class="face side s0"></div>
<div class="face side s1"></div>
<div class="face side s2"></div>
<div class="face side s3"></div>
<div class="face side s4"></div>
<div class="face side s5"></div>
<div class="face side s6"></div>
<div class="face side s7"></div>
<div class="face side s8"></div>
<div class="face side s9"></div>
<div class="face side s10"></div>
<div class="face side s11"></div>
<div class="face side s12"></div>
<div class="face side s13"></div>
<div class="face side s14"></div>
<div class="face side s15"></div>
<div class="face side s16"></div>
<div class="face side s17"></div>
<div class="face side s18"></div>
<div class="face side s19"></div>
</div>
<div class="shape cuboid-1 cub-1 ankle">
<div class="face ft"></div>
<div class="face bk"></div>
<div class="face rt"></div>
<div class="face bm"></div>
<div class="face tp"></div>
</div>
<div class="shape cuboid-1 cub-1 reservoir-box">
<div class="face ft"></div>
<div class="face bk"></div>
<div class="face rt"></div>
<div class="face lt"></div>
<div class="face bm"></div>
<div class="face tp"></div>
</div>
<div class="inburicant-filter">
<div class="shape cylinder-2 cyl-2 reservoir">
<div class="face bm"></div>
<div class="face tp"></div>
<div class="face side s0"></div>
<div class="face side s1"></div>
<div class="face side s2"></div>
<div class="face side s3"></div>
<div class="face side s4"></div>
<div class="face side s5"></div>
<div class="face side s6"></div>
<div class="face side s7"></div>
<div class="face side s8"></div>
<div class="face side s9"></div>
<div class="face side s10"></div>
<div class="face side s11"></div>
<div class="face side s12"></div>
<div class="face side s13"></div>
<div class="face side s14"></div>
<div class="face side s15"></div>
<div class="face side s16"></div>
<div class="face side s17"></div>
<div class="face side s18"></div>
<div class="face side s19"></div>
</div>
<div class="shape cylinder-2 cyl-2 reservoir-back">
<div class="face bm"></div>
<div class="face tp"></div>
<div class="face side s0"></div>
<div class="face side s1"></div>
<div class="face side s2"></div>
<div class="face side s3"></div>
<div class="face side s4"></div>
<div class="face side s5"></div>
<div class="face side s6"></div>
<div class="face side s7"></div>
<div class="face side s8"></div>
<div class="face side s9"></div>
<div class="face side s10"></div>
<div class="face side s11"></div>
<div class="face side s12"></div>
<div class="face side s13"></div>
<div class="face side s14"></div>
<div class="face side s15"></div>
<div class="face side s16"></div>
<div class="face side s17"></div>
<div class="face side s18"></div>
<div class="face side s19"></div>
</div>
<div class="shape prism-1 pri-1 reservoir-pr1">
<div class="face ft"></div>
<div class="face bk"></div>
<div class="face-wrapper rt">
<div class="face"></div>
</div>
<div class="face-wrapper lt">
<div class="face"></div>
</div>
<div class="face bm"></div>
</div>
<div class="shape prism-1 pri-1 reservoir-pr2">
<div class="face ft"></div>
<div class="face bk"></div>
<div class="face-wrapper rt">
<div class="face"></div>
</div>
<div class="face-wrapper lt">
<div class="face"></div>
</div>
<div class="face bm"></div>
</div>
</div>
<div class="shape cuboid-1 cub-1 arm-bottom">
<div class="face ft"></div>
<div class="face bk"></div>
<div class="face rt"></div>
<div class="face lt"></div>
<div class="face bm"></div>
<div class="face tp"></div>
</div>
<div class="shape cuboid-1 cub-1 arm-bottom-2">
<div class="face ft"></div>
<div class="face bk"></div>
<div class="face rt"></div>
<div class="face lt"></div>
<div class="face bm"></div>
<div class="face tp"></div>
</div>
<div class="shape prism-1 pri-1 arm-pri-1">
<div class="face ft"></div>
<div class="face bk"></div>
<div class="face-wrapper rt">
<div class="face"></div>
</div>
<div class="face-wrapper lt">
<div class="face"></div>
</div>
<div class="face bm"></div>
</div>
<div class="shape prism-1 pri-1 arm-pri-2">
<div class="face ft"></div>
<div class="face bk"></div>
<div class="face-wrapper rt">
<div class="face"></div>
</div>
<div class="face-wrapper lt">
<div class="face"></div>
</div>
<div class="face bm"></div>
</div>
<div class="shape cuboid-1 cub-1 sholder-1">
<div class="face bk"></div>
<div class="face tp"></div>
</div>
<div class="shape cuboid-1 cub-1 sholder-2">
<div class="face bk"></div>
<div class="face bm"></div>
<div class="guard1"></div>
<div class="guard2"></div>
</div>
<div class="shape cylinder-2 cyl-2 sholder-3">
<div class="face tp">
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="96px" height="84.314px" viewBox="0 0 96 84.314" enable-background="new 0 0 96 84.314" xml:space="preserve">
<defs>
</defs>
<path fill="#eeeeee" d="M96,48C96,21.49,74.51,0,48,0C21.49,0,0,21.49,0,48c0,14.514,6.451,27.513,16.631,36.314l1.839-0.016
l0.161-0.265l11.043-23.338c-2.353-3.497-3.733-7.704-3.749-12.232h-0.002c0-0.013,0.001-0.026,0.001-0.039
s-0.001-0.026-0.001-0.039h0.002c0.042-12.157,9.908-22,22.075-22s22.033,9.843,22.075,22h0.002c0,0.013-0.001,0.026-0.001,0.039
s0.001,0.026,0.001,0.039h-0.002c-0.016,4.656-1.477,8.969-3.952,12.523l11.895,22.485l0.178,0.298l1.822-0.016
C89.825,74.964,96,62.205,96,48z"></path>
</svg>
</div>
<div class="face side s0"></div>
<div class="face side s1"></div>
<div class="face side s2"></div>
<div class="face side s3"></div>
<div class="face side s4"></div>
<div class="face side s5"></div>
<div class="face side s6"></div>
<div class="face side s7"></div>
<div class="face side s8"></div>
<div class="face side s9"></div>
</div>
<div class="shape cylinder-2 cyl-2 sholder-4">
<div class="face side s0"></div>
<div class="face side s1"></div>
<div class="face side s2"></div>
<div class="face side s3"></div>
<div class="face side s4"></div>
<div class="face side s5"></div>
<div class="face side s6"></div>
<div class="face side s7"></div>
<div class="face side s8"></div>
<div class="face side s9"></div>
<div class="face side s10"></div>
<div class="face side s11"></div>
<div class="face side s18"></div>
<div class="face side s19"></div>
</div>
<div class="shape cylinder-2 cyl-2 cyl-2-indirect-top">
<div class="face bm"></div>
<div class="face tp"></div>
<div class="face side s0"></div>
<div class="face side s1"></div>
<div class="face side s2"></div>
<div class="face side s3"></div>
<div class="face side s4"></div>
<div class="face side s5"></div>
<div class="face side s6"></div>
<div class="face side s7"></div>
<div class="face side s8"></div>
<div class="face side s9"></div>
<div class="face side s10"></div>
<div class="face side s11"></div>
<div class="face side s12"></div>
<div class="face side s13"></div>
<div class="face side s14"></div>
<div class="face side s15"></div>
<div class="face side s16"></div>
<div class="face side s17"></div>
<div class="face side s18"></div>
<div class="face side s19"></div>
</div>
</div>
</div>
<div class="foot-right">
<div class="foot">
<div class="foot-top">
<div class="shape prism-1 pri-1">
<div class="face ft"></div>
<div class="face bk"></div>
<div class="face-wrapper rt">
<div class="face"></div>
</div>
<div class="face-wrapper lt">
<div class="face"></div>
</div>
<div class="face bm"></div>
</div>
<div class="shape cuboid-1 cub-1">
<div class="face ft"></div>
<div class="face bk"></div>
<div class="face bm"></div>
<div class="face tp"></div>
</div>
<div class="shape prism-2 pri-2">
<div class="face ft"></div>
<div class="face bk"></div>
<div class="face-wrapper rt">
<div class="face"></div>
</div>
<div class="face-wrapper lt">
<div class="face"></div>
</div>
<div class="face bm"></div>
</div>
</div>
<div class="foot-top2">
<div class="shape prism-1 pri-1">
<div class="face ft"></div>
<div class="face bk"></div>
<div class="face-wrapper rt">
<div class="face"></div>
</div>
<div class="face-wrapper lt">
<div class="face"></div>
</div>
<div class="face bm"></div>
</div>
<div class="shape cuboid-1 cub-1">
<div class="face ft"></div>
<div class="face bk"></div>
<div class="face bm"></div>
<div class="face tp"></div>
</div>
<div class="shape prism-2 pri-2">
<div class="face ft"></div>
<div class="face bk"></div>
<div class="face-wrapper rt">
<div class="face"></div>
</div>
<div class="face-wrapper lt">
<div class="face"></div>
</div>
<div class="face bm"></div>
</div>
</div>
<div class="foot-top3">
<div class="shape prism-1 pri-1">
<div class="face ft"></div>
<div class="face bk"></div>
<div class="face-wrapper rt">
<div class="face"></div>
</div>
<div class="face-wrapper lt">
<div class="face"></div>
</div>
<div class="face bm"></div>
</div>
<div class="shape cuboid-1 cub-1">
<div class="face ft"></div>
<div class="face bk"></div>
<div class="face bm"></div>
<div class="face tp"></div>
</div>
<div class="shape prism-2 pri-2">
<div class="face ft"></div>
<div class="face bk"></div>
<div class="face-wrapper rt">
<div class="face"></div>
</div>
<div class="face-wrapper lt">
<div class="face"></div>
</div>
<div class="face bm"></div>
</div>
</div>
<div class="foot-bottom">
<div class="shape prism-1 pri-1">
<div class="face ft"></div>
<div class="face bk"></div>
<div class="face-wrapper rt">
<div class="face"></div>
</div>
<div class="face-wrapper lt">
<div class="face"></div>
</div>
<div class="face bm"></div>
</div>
<div class="shape cuboid-1 cub-1">
<div class="face ft"></div>
<div class="face bk"></div>
<div class="face bm"></div>
<div class="face tp"></div>
</div>
<div class="shape prism-2 pri-2">
<div class="face ft"></div>
<div class="face bk"></div>
<div class="face-wrapper rt">
<div class="face"></div>
</div>
<div class="face-wrapper lt">
<div class="face"></div>
</div>
<div class="face bm"></div>
</div>
</div>
<div class="foot-part-1">
<div class="shape cylinder-2 cyl-2">
<div class="face bm"></div>
<div class="face tp"></div>
<div class="face side s0"></div>
<div class="face side s1"></div>
<div class="face side s2"></div>
<div class="face side s3"></div>
<div class="face side s4"></div>
<div class="face side s5"></div>
<div class="face side s6"></div>
<div class="face side s7"></div>
<div class="face side s8"></div>
<div class="face side s9"></div>
</div>
<div class="shape cylinder-2 cyl-2 cyl-2-bottom">
<div class="face bm"></div>
<div class="face tp"></div>
<div class="face side s0"></div>
<div class="face side s1"></div>
<div class="face side s2"></div>
<div class="face side s3"></div>
<div class="face side s4"></div>
<div class="face side s5"></div>
<div class="face side s6"></div>
<div class="face side s7"></div>
<div class="face side s8"></div>
<div class="face side s9"></div>
</div>
<div class="shape cuboid-1 cub-1 cub-2">
<div class="face ft"></div>
<div class="face bk"></div>
<div class="face rt"></div>
<div class="face lt"></div>
<div class="face bm"></div>
<div class="face tp"></div>
</div>
</div>
</div>
<div class="arm">
<div class="shape cylinder-2 cyl-2 cyl-2-indirect">
<div class="face bm"></div>
<div class="face tp"></div>
<div class="face side s0"></div>
<div class="face side s1"></div>
<div class="face side s2"></div>
<div class="face side s3"></div>
<div class="face side s4"></div>
<div class="face side s5"></div>
<div class="face side s6"></div>
<div class="face side s7"></div>
<div class="face side s8"></div>
<div class="face side s9"></div>
<div class="face side s10"></div>
<div class="face side s11"></div>
<div class="face side s12"></div>
<div class="face side s13"></div>
<div class="face side s14"></div>
<div class="face side s15"></div>
<div class="face side s16"></div>
<div class="face side s17"></div>
<div class="face side s18"></div>
<div class="face side s19"></div>
</div>
<div class="shape cuboid-1 cub-1 ankle">
<div class="face ft"></div>
<div class="face bk"></div>
<div class="face rt"></div>
<div class="face bm"></div>
<div class="face tp"></div>
</div>
<div class="shape cuboid-1 cub-1 reservoir-box">
<div class="face ft"></div>
<div class="face bk"></div>
<div class="face rt"></div>
<div class="face lt"></div>
<div class="face bm"></div>
<div class="face tp"></div>
</div>
<div class="inburicant-filter">
<div class="shape cylinder-2 cyl-2 reservoir">
<div class="face bm"></div>
<div class="face tp"></div>
<div class="face side s0"></div>
<div class="face side s1"></div>
<div class="face side s2"></div>
<div class="face side s3"></div>
<div class="face side s4"></div>
<div class="face side s5"></div>
<div class="face side s6"></div>
<div class="face side s7"></div>
<div class="face side s8"></div>
<div class="face side s9"></div>
<div class="face side s10"></div>
<div class="face side s11"></div>
<div class="face side s12"></div>
<div class="face side s13"></div>
<div class="face side s14"></div>
<div class="face side s15"></div>
<div class="face side s16"></div>
<div class="face side s17"></div>
<div class="face side s18"></div>
<div class="face side s19"></div>
</div>
<div class="shape cylinder-2 cyl-2 reservoir-back">
<div class="face bm"></div>
<div class="face tp"></div>
<div class="face side s0"></div>
<div class="face side s1"></div>
<div class="face side s2"></div>
<div class="face side s3"></div>
<div class="face side s4"></div>
<div class="face side s5"></div>
<div class="face side s6"></div>
<div class="face side s7"></div>
<div class="face side s8"></div>
<div class="face side s9"></div>
<div class="face side s10"></div>
<div class="face side s11"></div>
<div class="face side s12"></div>
<div class="face side s13"></div>
<div class="face side s14"></div>
<div class="face side s15"></div>
<div class="face side s16"></div>
<div class="face side s17"></div>
<div class="face side s18"></div>
<div class="face side s19"></div>
</div>
<div class="shape prism-1 pri-1 reservoir-pr1">
<div class="face ft"></div>
<div class="face bk"></div>
<div class="face-wrapper rt">
<div class="face"></div>
</div>
<div class="face-wrapper lt">
<div class="face"></div>
</div>
<div class="face bm"></div>
</div>
<div class="shape prism-1 pri-1 reservoir-pr2">
<div class="face ft"></div>
<div class="face bk"></div>
<div class="face-wrapper rt">
<div class="face"></div>
</div>
<div class="face-wrapper lt">
<div class="face"></div>
</div>
<div class="face bm"></div>
</div>
</div>
<div class="shape cuboid-1 cub-1 arm-bottom">
<div class="face ft"></div>
<div class="face bk"></div>
<div class="face rt"></div>
<div class="face lt"></div>
<div class="face bm"></div>
<div class="face tp"></div>
</div>
<div class="shape cuboid-1 cub-1 arm-bottom-2">
<div class="face ft"></div>
<div class="face bk"></div>
<div class="face rt"></div>
<div class="face lt"></div>
<div class="face bm"></div>
<div class="face tp"></div>
</div>
<div class="shape prism-1 pri-1 arm-pri-1">
<div class="face ft"></div>
<div class="face bk"></div>
<div class="face-wrapper rt">
<div class="face"></div>
</div>
<div class="face-wrapper lt">
<div class="face"></div>
</div>
<div class="face bm"></div>
</div>
<div class="shape prism-1 pri-1 arm-pri-2">
<div class="face ft"></div>
<div class="face bk"></div>
<div class="face-wrapper rt">
<div class="face"></div>
</div>
<div class="face-wrapper lt">
<div class="face"></div>
</div>
<div class="face bm"></div>
</div>
<div class="shape cuboid-1 cub-1 sholder-1">
<div class="face bk"></div>
<div class="face tp"></div>
</div>
<div class="shape cuboid-1 cub-1 sholder-2">
<div class="face bk"></div>
<div class="face bm"></div>
<div class="guard1"></div>
<div class="guard2"></div>
</div>
<div class="shape cylinder-2 cyl-2 sholder-3">
<div class="face tp">
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="96px" height="84.314px" viewBox="0 0 96 84.314" enable-background="new 0 0 96 84.314" xml:space="preserve">
<defs>
</defs>
<path fill="#eeeeee" d="M96,48C96,21.49,74.51,0,48,0C21.49,0,0,21.49,0,48c0,14.514,6.451,27.513,16.631,36.314l1.839-0.016
l0.161-0.265l11.043-23.338c-2.353-3.497-3.733-7.704-3.749-12.232h-0.002c0-0.013,0.001-0.026,0.001-0.039
s-0.001-0.026-0.001-0.039h0.002c0.042-12.157,9.908-22,22.075-22s22.033,9.843,22.075,22h0.002c0,0.013-0.001,0.026-0.001,0.039
s0.001,0.026,0.001,0.039h-0.002c-0.016,4.656-1.477,8.969-3.952,12.523l11.895,22.485l0.178,0.298l1.822-0.016
C89.825,74.964,96,62.205,96,48z"></path>
</svg>
</div>
<div class="face side s0"></div>
<div class="face side s1"></div>
<div class="face side s2"></div>
<div class="face side s3"></div>
<div class="face side s4"></div>
<div class="face side s5"></div>
<div class="face side s6"></div>
<div class="face side s7"></div>
<div class="face side s8"></div>
<div class="face side s9"></div>
</div>
<div class="shape cylinder-2 cyl-2 sholder-4">
<div class="face side s0"></div>
<div class="face side s1"></div>
<div class="face side s2"></div>
<div class="face side s3"></div>
<div class="face side s4"></div>
<div class="face side s5"></div>
<div class="face side s6"></div>
<div class="face side s7"></div>
<div class="face side s8"></div>
<div class="face side s9"></div>
<div class="face side s10"></div>
<div class="face side s11"></div>
<div class="face side s18"></div>
<div class="face side s19"></div>
</div>
<div class="shape cylinder-2 cyl-2 cyl-2-indirect-top">
<div class="face bm"></div>
<div class="face tp"></div>
<div class="face side s0"></div>
<div class="face side s1"></div>
<div class="face side s2"></div>
<div class="face side s3"></div>
<div class="face side s4"></div>
<div class="face side s5"></div>
<div class="face side s6"></div>
<div class="face side s7"></div>
<div class="face side s8"></div>
<div class="face side s9"></div>
<div class="face side s10"></div>
<div class="face side s11"></div>
<div class="face side s12"></div>
<div class="face side s13"></div>
<div class="face side s14"></div>
<div class="face side s15"></div>
<div class="face side s16"></div>
<div class="face side s17"></div>
<div class="face side s18"></div>
<div class="face side s19"></div>
</div>
</div>
</div>
<div class="foot-center anim-base foot-anim">
<div class="foot-top">
<div class="shape prism-1 pri-1">
<div class="face ft"></div>
<div class="face bk"></div>
<div class="face-wrapper rt">
<div class="face"></div>
</div>
<div class="face-wrapper lt">
<div class="face"></div>
</div>
<div class="face bm"></div>
</div>
<div class="shape cuboid-1 cub-1">
<div class="face ft"></div>
<div class="face bk"></div>
<div class="face bm"></div>
<div class="face tp"></div>
</div>
<div class="shape prism-2 pri-2">
<div class="face ft"></div>
<div class="face bk"></div>
<div class="face-wrapper rt">
<div class="face"></div>
</div>
<div class="face-wrapper lt">
<div class="face"></div>
</div>
<div class="face bm"></div>
</div>
</div>
<div class="foot-top2">
<div class="shape prism-1 pri-1">
<div class="face ft"></div>
<div class="face bk"></div>
<div class="face-wrapper rt">
<div class="face"></div>
</div>
<div class="face-wrapper lt">
<div class="face"></div>
</div>
<div class="face bm"></div>
</div>
<div class="shape cuboid-1 cub-1">
<div class="face ft"></div>
<div class="face bk"></div>
<div class="face bm"></div>
<div class="face tp"></div>
</div>
<div class="shape prism-2 pri-2">
<div class="face ft"></div>
<div class="face bk"></div>
<div class="face-wrapper rt">
<div class="face"></div>
</div>
<div class="face-wrapper lt">
<div class="face"></div>
</div>
<div class="face bm"></div>
</div>
</div>
<div class="foot-top3">
<div class="shape prism-1 pri-1">
<div class="face ft"></div>
<div class="face bk"></div>
<div class="face-wrapper rt">
<div class="face"></div>
</div>
<div class="face-wrapper lt">
<div class="face"></div>
</div>
<div class="face bm"></div>
</div>
<div class="shape cuboid-1 cub-1">
<div class="face ft"></div>
<div class="face bk"></div>
<div class="face bm"></div>
<div class="face tp"></div>
</div>
<div class="shape prism-2 pri-2">
<div class="face ft"></div>
<div class="face bk"></div>
<div class="face-wrapper rt">
<div class="face"></div>
</div>
<div class="face-wrapper lt">
<div class="face"></div>
</div>
<div class="face bm"></div>
</div>
</div>
<div class="foot-bottom cub-center">
<div class="shape prism-1 pri-1">
<div class="face ft"></div>
<div class="face bk"></div>
<div class="face-wrapper rt">
<div class="face"></div>
</div>
<div class="face-wrapper lt">
<div class="face"></div>
</div>
<div class="face bm"></div>
</div>
<div class="shape cuboid-1 cub-1">
<div class="face ft"></div>
<div class="face bk"></div>
<div class="face bm"></div>
<div class="face tp"></div>
</div>
<div class="shape prism-2 pri-2">
<div class="face ft"></div>
<div class="face bk"></div>
<div class="face-wrapper rt">
<div class="face"></div>
</div>
<div class="face-wrapper lt">
<div class="face"></div>
</div>
<div class="face bm"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@charset "utf-8";
.face {
background-color:rgba(235, 235, 235, 1.00);
box-shadow_:inset 0 0 0 1px rgba(0, 0, 0, 0.4);
}
#tri {
fill:#26325e;
}
#tpz1 {
fill:rgba(63, 84, 140, 1.00);
stroke:#d9d9d9;
stroke-width:6px;
}
#tpz2 {
fill:rgba(217, 217, 217, 1.00);
}
#tpz3 {
fill:rgba(199, 199, 199, 1.00);
}
.tr1a {
-webkit-transform:translate3d(0.00px,0.00px,0.00px) rotate(0.00deg) rotateX(-11.25deg) rotateY(0.00deg) rotateZ(0.00deg);
-moz-transform:translate3d(0.00px,0.00px,0.00px) rotate(0.00deg) rotateX(-11.25deg) rotateY(0.00deg) rotateZ(0.00deg);
-o-transform:translate3d(0.00px,0.00px,0.00px) rotate(0.00deg) rotateX(-11.25deg) rotateY(0.00deg) rotateZ(0.00deg);
-ms-transform:translate3d(0.00px,0.00px,0.00px) rotate(0.00deg) rotateX(-11.25deg) rotateY(0.00deg) rotateZ(0.00deg);
transform:translate3d(0.00px,0.00px,0.00px) rotate(0.00deg) rotateX(-11.25deg) rotateY(0.00deg) rotateZ(0.00deg);
}
.tr1b {
-webkit-transform:translate3d(0.00px,-60.00px,0.00px) rotate(180.00deg) rotateX(-11.25deg);
-moz-transform:translate3d(0.00px,-60.00px,0.00px) rotate(180.00deg) rotateX(-11.25deg);
-o-transform:translate3d(0.00px,-60.00px,0.00px) rotate(180.00deg) rotateX(-11.25deg);
-ms-transform:translate3d(0.00px,-60.00px,0.00px) rotate(180.00deg) rotateX(-11.25deg);
transform:translate3d(0.00px,-60.00px,0.00px) rotate(180.00deg) rotateX(-11.25deg);
}
.tpz1a {
-webkit-transform:translate3d(-13px,54.30px,0.00px) rotate(0.00deg) rotateX(-33.75deg);
-moz-transform:translate3d(-13px,54.30px,0.00px) rotate(0.00deg) rotateX(-33.75deg);
-o-transform:translate3d(-13px,54.30px,0.00px) rotate(0.00deg) rotateX(-33.75deg);
-ms-transform:translate3d(-13px,54.30px,0.00px) rotate(0.00deg) rotateX(-33.75deg);
transform:translate3d(-13px,54.30px,0.00px) rotate(0.00deg) rotateX(-33.75deg);
width:59px;
}
.tpz1b {
-webkit-transform:translate3d(-14px,-114px,0.00px) rotate(180.00deg) rotateX(-33.75deg);
-moz-transform:translate3d(-14px,-114px,0.00px) rotate(180.00deg) rotateX(-33.75deg);
-o-transform:translate3d(-14px,-114px,0.00px) rotate(180.00deg) rotateX(-33.75deg);
-ms-transform:translate3d(-14px,-114px,0.00px) rotate(180.00deg) rotateX(-33.75deg);
transform:translate3d(-14px,-114px,0.00px) rotate(180.00deg) rotateX(-33.75deg);
width:59px;
}
.tpz2a {
-webkit-transform:translate3d(-28.50px,95.7px,0.00px) rotate(0.00deg) rotateX(-56.25deg);
-moz-transform:translate3d(-28.50px,95.7px,0.00px) rotate(0.00deg) rotateX(-56.25deg);
-o-transform:translate3d(-28.50px,95.7px,0.00px) rotate(0.00deg) rotateX(-56.25deg);
-ms-transform:translate3d(-28.50px,95.7px,0.00px) rotate(0.00deg) rotateX(-56.25deg);
transform:translate3d(-28.50px,95.7px,0.00px) rotate(0.00deg) rotateX(-56.25deg);
}
.tpz2b {
-webkit-transform:translate3d(-29.50px,-155.5px,0.00px) rotate(180.00deg) rotateX(-56.25deg);
-moz-transform:translate3d(-29.50px,-155.5px,0.00px) rotate(180.00deg) rotateX(-56.25deg);
-o-transform:translate3d(-29.50px,-155.5px,0.00px) rotate(180.00deg) rotateX(-56.25deg);
-ms-transform:translate3d(-29.50px,-155.5px,0.00px) rotate(180.00deg) rotateX(-56.25deg);
transform:translate3d(-29.50px,-155.5px,0.00px) rotate(180.00deg) rotateX(-56.25deg);
}
.tpz3a {
-webkit-transform:translate3d(-33.5px,118.00px,0.00px) rotate(0.00deg) rotateX(-78.75deg);
-moz-transform:translate3d(-33.5px,118.00px,0.00px) rotate(0.00deg) rotateX(-78.75deg);
-o-transform:translate3d(-33.5px,118.00px,0.00px) rotate(0.00deg) rotateX(-78.75deg);
-ms-transform:translate3d(-33.5px,118.00px,0.00px) rotate(0.00deg) rotateX(-78.75deg);
transform:translate3d(-33.5px,118.00px,0.00px) rotate(0.00deg) rotateX(-78.75deg);
}
.tpz3b {
-webkit-transform:translate3d(-34.5px,-178.00px,0.00px) rotate(180.00deg) rotateX(-78.75deg);
-moz-transform:translate3d(-34.5px,-178.00px,0.00px) rotate(180.00deg) rotateX(-78.75deg);
-o-transform:translate3d(-34.5px,-178.00px,0.00px) rotate(180.00deg) rotateX(-78.75deg);
-ms-transform:translate3d(-34.5px,-178.00px,0.00px) rotate(180.00deg) rotateX(-78.75deg);
transform:translate3d(-34.5px,-178.00px,0.00px) rotate(180.00deg) rotateX(-78.75deg);
}
.opposite1 {
}
.opposite2 {
-webkit-transform:translate3d(0.00px,0.00px,0.00px) rotate(30deg);
-moz-transform:translate3d(0.00px,0.00px,0.00px) rotate(30deg);
-o-transform:translate3d(0.00px,0.00px,0.00px) rotate(30deg);
-ms-transform:translate3d(0.00px,0.00px,0.00px) rotate(30deg);
transform:translate3d(0.00px,0.00px,0.00px) rotate(30deg);
}
.opposite3 {
-webkit-transform:translate3d(0.00px,0.00px,0.00px) rotate(60deg);
-moz-transform:translate3d(0.00px,0.00px,0.00px) rotate(60deg);
-o-transform:translate3d(0.00px,0.00px,0.00px) rotate(60deg);
-ms-transform:translate3d(0.00px,0.00px,0.00px) rotate(60deg);
transform:translate3d(0.00px,0.00px,0.00px) rotate(60deg);
}
.opposite4 {
-webkit-transform:translate3d(0.00px,0.00px,0.00px) rotate(90deg);
-moz-transform:translate3d(0.00px,0.00px,0.00px) rotate(90deg);
-o-transform:translate3d(0.00px,0.00px,0.00px) rotate(90deg);
-ms-transform:translate3d(0.00px,0.00px,0.00px) rotate(90deg);
transform:translate3d(0.00px,0.00px,0.00px) rotate(90deg);
}
.opposite5 {
-webkit-transform:translate3d(0.00px,0.00px,0.00px) rotate(120deg);
-moz-transform:translate3d(0.00px,0.00px,0.00px) rotate(120deg);
-o-transform:translate3d(0.00px,0.00px,0.00px) rotate(120deg);
-ms-transform:translate3d(0.00px,0.00px,0.00px) rotate(120deg);
transform:translate3d(0.00px,0.00px,0.00px) rotate(120deg);
}
.opposite6 {
-webkit-transform:translate3d(0.00px,0.00px,0.00px) rotate(150deg);
-moz-transform:translate3d(0.00px,0.00px,0.00px) rotate(150deg);
-o-transform:translate3d(0.00px,0.00px,0.00px) rotate(150deg);
-ms-transform:translate3d(0.00px,0.00px,0.00px) rotate(150deg);
transform:translate3d(0.00px,0.00px,0.00px) rotate(150deg);
}
.phase-1 > div,
.phase-2 > div,
.phase-3 > div,
.phase-4 > div {
width:32px;
}
.phase-1 {
-webkit-transform:translate3d(0.00px,0.00px,100.00px);
-moz-transform:translate3d(0.00px,0.00px,100.00px);
-o-transform:translate3d(0.00px,0.00px,100.00px);
-ms-transform:translate3d(0.00px,0.00px,100.00px);
transform:translate3d(0.00px,0.00px,100.00px);
width:32px;
}
.phase-2 {
-webkit-transform:translate3d(0.00px,0.00px,77.50px);
-moz-transform:translate3d(0.00px,0.00px,77.50px);
-o-transform:translate3d(0.00px,0.00px,77.50px);
-ms-transform:translate3d(0.00px,0.00px,77.50px);
transform:translate3d(0.00px,0.00px,77.50px);
}
.phase-3 {
-webkit-transform:translate3d(0.00px,0.00px,36px);
-moz-transform:translate3d(0.00px,0.00px,36px);
-o-transform:translate3d(0.00px,0.00px,36px);
-ms-transform:translate3d(0.00px,0.00px,36px);
transform:translate3d(0.00px,0.00px,36px);
}
.phase-4 {
-webkit-transform:translate3d(0.00px,0.00px,-18px);
-moz-transform:translate3d(0.00px,0.00px,-18px);
-o-transform:translate3d(0.00px,0.00px,-18px);
-ms-transform:translate3d(0.00px,0.00px,-18px);
transform:translate3d(0.00px,0.00px,-18px);
}
.hemi {
-webkit-transform:translate3d(45.00px, 50px, 59.7px) scale3d(0.31, 0.31, 0.31);
-moz-transform:translate3d(45.00px, 50px, 59.7px) scale3d(0.31, 0.31, 0.31);
-o-transform:translate3d(45.00px, 50px, 59.7px) scale3d(0.31, 0.31, 0.31);
-ms-transform:translate3d(45.00px, 50px, 59.7px) scale3d(0.31, 0.31, 0.31);
transform:translate3d(45.00px, 50px, 59.7px) scale3d(0.31, 0.31, 0.31);
}
.hemi2 {
-webkit-transform:translate3d(45.00px,50.00px,36.6px) rotate(0.00deg) rotateX(180.00deg) scale3d(0.31, 0.31, 0.31);
-moz-transform:translate3d(45.00px,50.00px,36.6px) rotate(0.00deg) rotateX(180.00deg) scale3d(0.31, 0.31, 0.31);
-o-transform:translate3d(45.00px,50.00px,36.6px) rotate(0.00deg) rotateX(180.00deg) scale3d(0.31, 0.31, 0.31);
-ms-transform:translate3d(45.00px,50.00px,36.6px) rotate(0.00deg) rotateX(180.00deg) scale3d(0.31, 0.31, 0.31);
transform:translate3d(45.00px,50.00px,36.6px) rotate(0.00deg) rotateX(180.00deg) scale3d(0.31, 0.31, 0.31);
}
/* /!\ You need to add vendor prefixes in order to render the CSS properly (or simply use https://leaverou.github.io/prefixfree/) /!\ */
#tridiv {
}
.face {
box-shadow:inset 0 0 0 1px rgba(0, 0, 0, 0.4);
}
.scene,
.shape,
.face,
.face-wrapper,
.cr {
position:absolute;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
transform-style:preserve-3d;
}
.shape {
top:50%;
left:50%;
width:0;
height:0;
-webkit-transform-origin:50%;
-moz-transform-origin:50%;
-o-transform-origin:50%;
-ms-transform-origin:50%;
transform-origin:50%;
}
#tridiv .face,
.face-wrapper {
overflow:hidden;
-webkit-transform-origin:0 0;
-moz-transform-origin:0 0;
-o-transform-origin:0 0;
-ms-transform-origin:0 0;
transform-origin:0 0;
-webkit-backface-visibility:visible;
-moz-backface-visibility:visible;
-o-backface-visibility:visible;
-ms-backface-visibility:visible;
backface-visibility:visible;
}
#tridiv .face {
background-size:100% 100%!important;
background-position:center;
box-shadow:none !important;
}
.face-wrapper .face {
left:100%;
width:100%;
height:100%;
}
.side {
left:50%;
}
[class*="cylinder"] .tp {
-webkit-transform:rotateX(90deg) translateY(-50%);
-moz-transform:rotateX(90deg) translateY(-50%);
-o-transform:rotateX(90deg) translateY(-50%);
-ms-transform:rotateX(90deg) translateY(-50%);
transform:rotateX(90deg) translateY(-50%);
}
[class*="cylinder"] .bm {
-webkit-transform:rotateX(-90deg) translateY(-50%);
-moz-transform:rotateX(-90deg) translateY(-50%);
-o-transform:rotateX(-90deg) translateY(-50%);
-ms-transform:rotateX(-90deg) translateY(-50%);
transform:rotateX(-90deg) translateY(-50%);
}
[class*="cylinder"] .tp,
[class*="cylinder"] .bm,
[class*="cylinder"] .tp .photon-shader,
[class*="cylinder"] .bm .photon-shader {
border-radius:50%;
}
[class*="cylinder"] .bm {
top:100%;
}
/* .cyl-1 styles */
.cyl-1 {
opacity:1;
width:6em;
height:5em;
-webkit-transform:translate3d(72px, 78px, 111px) rotate(15deg) rotateX(90deg) scale3d(1, 1, 1);
-moz-transform:translate3d(72px, 78px, 111px) rotate(15deg) rotateX(90deg) scale3d(1, 1, 1);
-o-transform:translate3d(72px, 78px, 111px) rotate(15deg) rotateX(90deg) scale3d(1, 1, 1);
-ms-transform:translate3d(72px, 78px, 111px) rotate(15deg) rotateX(90deg) scale3d(1, 1, 1);
transform:translate3d(72px, 78px, 111px) rotate(15deg) rotateX(90deg) scale3d(1, 1, 1);
}
.cyl-1 .side {
width:1.6327em;
height:6.9em;
}
.cyl-1 .s0 {
-webkit-transform:rotateY(15deg) translate3d(-50%, 0, 2.975em);
-moz-transform:rotateY(15deg) translate3d(-50%, 0, 2.975em);
-o-transform:rotateY(15deg) translate3d(-50%, 0, 2.975em);
-ms-transform:rotateY(15deg) translate3d(-50%, 0, 2.975em);
transform:rotateY(15deg) translate3d(-50%, 0, 2.975em);
}
.cyl-1 .s1 {
-webkit-transform:rotateY(45deg) translate3D(-50%, 0, 2.975em);
-moz-transform:rotateY(45deg) translate3D(-50%, 0, 2.975em);
-o-transform:rotateY(45deg) translate3D(-50%, 0, 2.975em);
-ms-transform:rotateY(45deg) translate3D(-50%, 0, 2.975em);
transform:rotateY(45deg) translate3D(-50%, 0, 2.975em);
}
.cyl-1 .s2 {
-webkit-transform:rotateY(75deg) translate3D(-50%, 0, 2.975em);
-moz-transform:rotateY(75deg) translate3D(-50%, 0, 2.975em);
-o-transform:rotateY(75deg) translate3D(-50%, 0, 2.975em);
-ms-transform:rotateY(75deg) translate3D(-50%, 0, 2.975em);
transform:rotateY(75deg) translate3D(-50%, 0, 2.975em);
}
.cyl-1 .s3 {
-webkit-transform:rotateY(105deg) translate3D(-50%, 0, 2.975em);
-moz-transform:rotateY(105deg) translate3D(-50%, 0, 2.975em);
-o-transform:rotateY(105deg) translate3D(-50%, 0, 2.975em);
-ms-transform:rotateY(105deg) translate3D(-50%, 0, 2.975em);
transform:rotateY(105deg) translate3D(-50%, 0, 2.975em);
}
.cyl-1 .s4 {
-webkit-transform:rotateY(135deg) translate3D(-50%, 0, 2.975em);
-moz-transform:rotateY(135deg) translate3D(-50%, 0, 2.975em);
-o-transform:rotateY(135deg) translate3D(-50%, 0, 2.975em);
-ms-transform:rotateY(135deg) translate3D(-50%, 0, 2.975em);
transform:rotateY(135deg) translate3D(-50%, 0, 2.975em);
}
.cyl-1 .s5 {
-webkit-transform:rotateY(165deg) translate3D(-50%, 0, 2.975em);
-moz-transform:rotateY(165deg) translate3D(-50%, 0, 2.975em);
-o-transform:rotateY(165deg) translate3D(-50%, 0, 2.975em);
-ms-transform:rotateY(165deg) translate3D(-50%, 0, 2.975em);
transform:rotateY(165deg) translate3D(-50%, 0, 2.975em);
}
.cyl-1 .s6 {
-webkit-transform:rotateY(195deg) translate3D(-50%, 0, 2.975em);
-moz-transform:rotateY(195deg) translate3D(-50%, 0, 2.975em);
-o-transform:rotateY(195deg) translate3D(-50%, 0, 2.975em);
-ms-transform:rotateY(195deg) translate3D(-50%, 0, 2.975em);
transform:rotateY(195deg) translate3D(-50%, 0, 2.975em);
}
.cyl-1 .s7 {
-webkit-transform:rotateY(225deg) translate3D(-50%, 0, 2.975em);
-moz-transform:rotateY(225deg) translate3D(-50%, 0, 2.975em);
-o-transform:rotateY(225deg) translate3D(-50%, 0, 2.975em);
-ms-transform:rotateY(225deg) translate3D(-50%, 0, 2.975em);
transform:rotateY(225deg) translate3D(-50%, 0, 2.975em);
}
.cyl-1 .s8 {
-webkit-transform:rotateY(255deg) translate3D(-50%, 0, 2.975em);
-moz-transform:rotateY(255deg) translate3D(-50%, 0, 2.975em);
-o-transform:rotateY(255deg) translate3D(-50%, 0, 2.975em);
-ms-transform:rotateY(255deg) translate3D(-50%, 0, 2.975em);
transform:rotateY(255deg) translate3D(-50%, 0, 2.975em);
}
.cyl-1 .s9 {
-webkit-transform:rotateY(285deg) translate3D(-50%, 0, 2.975em);
-moz-transform:rotateY(285deg) translate3D(-50%, 0, 2.975em);
-o-transform:rotateY(285deg) translate3D(-50%, 0, 2.975em);
-ms-transform:rotateY(285deg) translate3D(-50%, 0, 2.975em);
transform:rotateY(285deg) translate3D(-50%, 0, 2.975em);
}
.cyl-1 .s10 {
-webkit-transform:rotateY(315deg) translate3D(-50%, 0, 2.975em);
-moz-transform:rotateY(315deg) translate3D(-50%, 0, 2.975em);
-o-transform:rotateY(315deg) translate3D(-50%, 0, 2.975em);
-ms-transform:rotateY(315deg) translate3D(-50%, 0, 2.975em);
transform:rotateY(315deg) translate3D(-50%, 0, 2.975em);
}
.cyl-1 .s11 {
-webkit-transform:rotateY(345deg) translate3D(-50%, 0, 2.975em);
-moz-transform:rotateY(345deg) translate3D(-50%, 0, 2.975em);
-o-transform:rotateY(345deg) translate3D(-50%, 0, 2.975em);
-ms-transform:rotateY(345deg) translate3D(-50%, 0, 2.975em);
transform:rotateY(345deg) translate3D(-50%, 0, 2.975em);
}
.cyl-1 .face,
.cyl-1 .side {
background-color:#ffffff;
}
[class*="prism"] .ft,
[class*="prism"] .bk {
width:100%;
height:100%;
}
[class*="prism"] .bk {
left:100%;
}
[class*="prism"] .rt {
-webkit-transform:rotateY(-90deg) translate3d(-50%,0px,0px);
-moz-transform:rotateY(-90deg) translate3d(-50%,0px,0px);
-o-transform:rotateY(-90deg) translate3d(-50%,0px,0px);
-ms-transform:rotateY(-90deg) translate3d(-50%,0px,0px);
transform:rotateY(-90deg) translate3d(-50%,0px,0px);
}
[class*="prism"] .lt {
-webkit-transform:rotateY(90deg) translateX(-50%);
-moz-transform:rotateY(90deg) translateX(-50%);
-o-transform:rotateY(90deg) translateX(-50%);
-ms-transform:rotateY(90deg) translateX(-50%);
transform:rotateY(90deg) translateX(-50%);
}
[class*="prism"] .bm {
-webkit-transform:rotateX(-90deg) translateY(-50%);
-moz-transform:rotateX(-90deg) translateY(-50%);
-o-transform:rotateX(-90deg) translateY(-50%);
-ms-transform:rotateX(-90deg) translateY(-50%);
transform:rotateX(-90deg) translateY(-50%);
}
[class*="prism"] .lt {
left:100%;
}
[class*="prism"] .bm {
top:100%;
}
[class*="prism"] .rt .face {
left:-100%;
-webkit-transform-origin:100% 0;
-moz-transform-origin:100% 0;
-o-transform-origin:100% 0;
-ms-transform-origin:100% 0;
transform-origin:100% 0;
}
[class*="cuboid"] .ft,
[class*="cuboid"] .bk {
width:100%;
height:100%;
}
[class*="cuboid"] .bk {
left:100%;
}
[class*="cuboid"] .rt {
-webkit-transform:rotateY(-90deg) translateX(-50%);
-moz-transform:rotateY(-90deg) translateX(-50%);
-o-transform:rotateY(-90deg) translateX(-50%);
-ms-transform:rotateY(-90deg) translateX(-50%);
transform:rotateY(-90deg) translateX(-50%);
}
[class*="cuboid"] .lt {
-webkit-transform:rotateY(90deg) translateX(-50%);
-moz-transform:rotateY(90deg) translateX(-50%);
-o-transform:rotateY(90deg) translateX(-50%);
-ms-transform:rotateY(90deg) translateX(-50%);
transform:rotateY(90deg) translateX(-50%);
}
[class*="cuboid"] .tp {
-webkit-transform:rotateX(90deg) translateY(-50%);
-moz-transform:rotateX(90deg) translateY(-50%);
-o-transform:rotateX(90deg) translateY(-50%);
-ms-transform:rotateX(90deg) translateY(-50%);
transform:rotateX(90deg) translateY(-50%);
}
[class*="cuboid"] .bm {
-webkit-transform:rotateX(-90deg) translateY(-50%);
-moz-transform:rotateX(-90deg) translateY(-50%);
-o-transform:rotateX(-90deg) translateY(-50%);
-ms-transform:rotateX(-90deg) translateY(-50%);
transform:rotateX(-90deg) translateY(-50%);
}
[class*="cuboid"] .lt {
left:100%;
}
[class*="cuboid"] .bm {
top:100%;
}
/* .pri-1 styles */
.pri-1 {
-webkit-transform:translate3d(1.576em, -0.8em, 1px) rotateX(0deg) rotateY(-270deg) rotateZ(0deg) scale3d(1, 0.67, 0.5);
-moz-transform:translate3d(1.576em, -0.8em, 1px) rotateX(0deg) rotateY(-270deg) rotateZ(0deg) scale3d(1, 0.67, 0.5);
-o-transform:translate3d(1.576em, -0.8em, 1px) rotateX(0deg) rotateY(-270deg) rotateZ(0deg) scale3d(1, 0.67, 0.5);
-ms-transform:translate3d(1.576em, -0.8em, 1px) rotateX(0deg) rotateY(-270deg) rotateZ(0deg) scale3d(1, 0.67, 0.5);
transform:translate3d(1.576em, -0.8em, 1px) rotateX(0deg) rotateY(-270deg) rotateZ(0deg) scale3d(1, 0.67, 0.5);
opacity:1;
width:5.125em;
height:5em;
}
.pri-1 .rt .face {
-webkit-transform:translate3d(23px,55px,0px) rotateZ(-44.27477570094075deg);
-moz-transform:translate3d(23px,55px,0px) rotateZ(-44.27477570094075deg);
-o-transform:translate3d(23px,55px,0px) rotateZ(-44.27477570094075deg);
-ms-transform:translate3d(23px,55px,0px) rotateZ(-44.27477570094075deg);
transform:translate3d(23px,55px,0px) rotateZ(-44.27477570094075deg);
}
.pri-1 .lt .face {
-webkit-transform:rotateZ(44.27477570094075deg);
-moz-transform:rotateZ(44.27477570094075deg);
-o-transform:rotateZ(44.27477570094075deg);
-ms-transform:rotateZ(44.27477570094075deg);
transform:rotateZ(44.27477570094075deg);
}
.pri-1 .ft {
height:6.983238861731711em;
-webkit-transform:translateZ(-2.4375em) rotateX(44.27477570094075deg);
-moz-transform:translateZ(-2.4375em) rotateX(44.27477570094075deg);
-o-transform:translateZ(-2.4375em) rotateX(44.27477570094075deg);
-ms-transform:translateZ(-2.4375em) rotateX(44.27477570094075deg);
transform:translateZ(-2.4375em) rotateX(44.27477570094075deg);
}
.pri-1 .bk {
-webkit-transform:translateZ(-2.4375em) rotateY(180deg);
-moz-transform:translateZ(-2.4375em) rotateY(180deg);
-o-transform:translateZ(-2.4375em) rotateY(180deg);
-ms-transform:translateZ(-2.4375em) rotateY(180deg);
transform:translateZ(-2.4375em) rotateY(180deg);
}
.pri-1 .rt,
.pri-1 .lt {
width:4.875em;
height:5em;
}
.pri-1 .rt .face,
.pri-1 .lt .face {
height:6.983238861731711em;
}
.pri-1 .bm {
width:5.125em;
height:4.875em;
}
.pri-1 .face {
background-color:#FFFFFF;
}
/* .cub-1 styles */
.cub-1 {
-webkit-transform:translate3d(-3.07em, 0em, 0em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
-moz-transform:translate3d(-3.07em, 0em, 0em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
-o-transform:translate3d(-3.07em, 0em, 0em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
-ms-transform:translate3d(-3.07em, 0em, 0em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
transform:translate3d(-3.07em, 0em, 0em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
opacity:1;
width:6em;
height:3.40em;
}
.cub-2 {
-webkit-transform:translate3d(-3.18em, 0em, -4.19em) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1.147, 0.45, 0.35);
-moz-transform:translate3d(-3.18em, 0em, -4.19em) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1.147, 0.45, 0.35);
-o-transform:translate3d(-3.18em, 0em, -4.19em) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1.147, 0.45, 0.35);
-ms-transform:translate3d(-3.18em, 0em, -4.19em) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1.147, 0.45, 0.35);
transform:translate3d(-3.18em, 0em, -4.19em) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1.147, 0.45, 0.35);
opacity:1;
width:6.125em;
height:5em;
}
.cub-1 .ft {
-webkit-transform:translate3d(0px,0px,2.5625em) rotate(0deg) rotateX(0deg);
-moz-transform:translate3d(0px,0px,2.5625em) rotate(0deg) rotateX(0deg);
-o-transform:translate3d(0px,0px,2.5625em) rotate(0deg) rotateX(0deg);
-ms-transform:translate3d(0px,0px,2.5625em) rotate(0deg) rotateX(0deg);
transform:translate3d(0px,0px,2.5625em) rotate(0deg) rotateX(0deg);
}
.cub-1 .bk {
-webkit-transform:translateZ(-2.5625em) rotateY(180deg);
-moz-transform:translateZ(-2.5625em) rotateY(180deg);
-o-transform:translateZ(-2.5625em) rotateY(180deg);
-ms-transform:translateZ(-2.5625em) rotateY(180deg);
transform:translateZ(-2.5625em) rotateY(180deg);
}
.cub-1 .rt,
.cub-1 .lt {
width:5.225em;
height:5em;
}
.cub-1 .tp,
.cub-1 .bm {
width:6em;
height:5.125em;
}
.cub-1 .face {
background-color:#ffffff;
}
/* .pri-2 styles */
.pri-2 {
-webkit-transform:translate3d(-6.84em, -0.87em, 0px) rotateX(0deg) rotateY(-450deg) rotateZ(0deg) scale3d(1, 0.67, 0.50);
-moz-transform:translate3d(-6.84em, -0.87em, 0px) rotateX(0deg) rotateY(-450deg) rotateZ(0deg) scale3d(1, 0.67, 0.50);
-o-transform:translate3d(-6.84em, -0.87em, 0px) rotateX(0deg) rotateY(-450deg) rotateZ(0deg) scale3d(1, 0.67, 0.50);
-ms-transform:translate3d(-6.84em, -0.87em, 0px) rotateX(0deg) rotateY(-450deg) rotateZ(0deg) scale3d(1, 0.67, 0.50);
transform:translate3d(-6.84em, -0.87em, 0px) rotateX(0deg) rotateY(-450deg) rotateZ(0deg) scale3d(1, 0.67, 0.50);
opacity:1;
width:5.125em;
height:5em;
}
.pri-2 .rt .face {
-webkit-transform:translate3d(23px,55px,0px) rotateZ(-44.27477570094075deg);
-moz-transform:translate3d(23px,55px,0px) rotateZ(-44.27477570094075deg);
-o-transform:translate3d(23px,55px,0px) rotateZ(-44.27477570094075deg);
-ms-transform:translate3d(23px,55px,0px) rotateZ(-44.27477570094075deg);
transform:translate3d(23px,55px,0px) rotateZ(-44.27477570094075deg);
}
.pri-2 .lt .face {
-webkit-transform:rotateZ(44.27477570094075deg);
-moz-transform:rotateZ(44.27477570094075deg);
-o-transform:rotateZ(44.27477570094075deg);
-ms-transform:rotateZ(44.27477570094075deg);
transform:rotateZ(44.27477570094075deg);
}
.pri-2 .ft {
height:6.983238861731711em;
-webkit-transform:translateZ(-2.4375em) rotateX(44.27477570094075deg);
-moz-transform:translateZ(-2.4375em) rotateX(44.27477570094075deg);
-o-transform:translateZ(-2.4375em) rotateX(44.27477570094075deg);
-ms-transform:translateZ(-2.4375em) rotateX(44.27477570094075deg);
transform:translateZ(-2.4375em) rotateX(44.27477570094075deg);
}
.pri-2 .bk {
-webkit-transform:translateZ(-2.4375em) rotateY(180deg);
-moz-transform:translateZ(-2.4375em) rotateY(180deg);
-o-transform:translateZ(-2.4375em) rotateY(180deg);
-ms-transform:translateZ(-2.4375em) rotateY(180deg);
transform:translateZ(-2.4375em) rotateY(180deg);
}
.pri-2 .rt,
.pri-2 .lt {
width:4.875em;
height:5em;
}
.pri-2 .rt .face,
.pri-2 .lt .face {
height:6.983238861731711em;
}
.pri-2 .bm {
width:5.125em;
height:4.875em;
}
.pri-2 .face {
background-color:#FFFFFF;
}
.cyl-2 {
opacity:1;
width:6em;
height:5em;
-webkit-transform:translate3d(-50px,-18px,-67px) rotate(0deg) rotateX(180deg) rotateZ(90deg) scale3d(0.4, 1.4, 0.3);
-moz-transform:translate3d(-50px,-18px,-67px) rotate(0deg) rotateX(180deg) rotateZ(90deg) scale3d(0.4, 1.4, 0.3);
-o-transform:translate3d(-50px,-18px,-67px) rotate(0deg) rotateX(180deg) rotateZ(90deg) scale3d(0.4, 1.4, 0.3);
-ms-transform:translate3d(-50px,-18px,-67px) rotate(0deg) rotateX(180deg) rotateZ(90deg) scale3d(0.4, 1.4, 0.3);
transform:translate3d(-50px,-18px,-67px) rotate(0deg) rotateX(180deg) rotateZ(90deg) scale3d(0.4, 1.4, 0.3);
}
.cyl-2 .tp,
.cyl-2 .bm {
width:6em;
height:6em;
}
.cyl-2 .side {
width:0.9753066419472177em;
height:5em;
}
.cyl-2 .s0 {
-webkit-transform:rotateY(9deg) translate3D(-50%, 0, 2.975em);
-moz-transform:rotateY(9deg) translate3D(-50%, 0, 2.975em);
-o-transform:rotateY(9deg) translate3D(-50%, 0, 2.975em);
-ms-transform:rotateY(9deg) translate3D(-50%, 0, 2.975em);
transform:rotateY(9deg) translate3D(-50%, 0, 2.975em);
}
.cyl-2 .s1 {
-webkit-transform:rotateY(27deg) translate3D(-50%, 0, 2.975em);
-moz-transform:rotateY(27deg) translate3D(-50%, 0, 2.975em);
-o-transform:rotateY(27deg) translate3D(-50%, 0, 2.975em);
-ms-transform:rotateY(27deg) translate3D(-50%, 0, 2.975em);
transform:rotateY(27deg) translate3D(-50%, 0, 2.975em);
}
.cyl-2 .s2 {
-webkit-transform:rotateY(45deg) translate3D(-50%, 0, 2.975em);
-moz-transform:rotateY(45deg) translate3D(-50%, 0, 2.975em);
-o-transform:rotateY(45deg) translate3D(-50%, 0, 2.975em);
-ms-transform:rotateY(45deg) translate3D(-50%, 0, 2.975em);
transform:rotateY(45deg) translate3D(-50%, 0, 2.975em);
}
.cyl-2 .s3 {
-webkit-transform:rotateY(63deg) translate3D(-50%, 0, 2.975em);
-moz-transform:rotateY(63deg) translate3D(-50%, 0, 2.975em);
-o-transform:rotateY(63deg) translate3D(-50%, 0, 2.975em);
-ms-transform:rotateY(63deg) translate3D(-50%, 0, 2.975em);
transform:rotateY(63deg) translate3D(-50%, 0, 2.975em);
}
.cyl-2 .s4 {
-webkit-transform:rotateY(81deg) translate3D(-50%, 0, 2.975em);
-moz-transform:rotateY(81deg) translate3D(-50%, 0, 2.975em);
-o-transform:rotateY(81deg) translate3D(-50%, 0, 2.975em);
-ms-transform:rotateY(81deg) translate3D(-50%, 0, 2.975em);
transform:rotateY(81deg) translate3D(-50%, 0, 2.975em);
}
.cyl-2 .s5 {
-webkit-transform:rotateY(99deg) translate3D(-50%, 0, 2.975em);
-moz-transform:rotateY(99deg) translate3D(-50%, 0, 2.975em);
-o-transform:rotateY(99deg) translate3D(-50%, 0, 2.975em);
-ms-transform:rotateY(99deg) translate3D(-50%, 0, 2.975em);
transform:rotateY(99deg) translate3D(-50%, 0, 2.975em);
}
.cyl-2 .s6 {
-webkit-transform:rotateY(117deg) translate3D(-50%, 0, 2.975em);
-moz-transform:rotateY(117deg) translate3D(-50%, 0, 2.975em);
-o-transform:rotateY(117deg) translate3D(-50%, 0, 2.975em);
-ms-transform:rotateY(117deg) translate3D(-50%, 0, 2.975em);
transform:rotateY(117deg) translate3D(-50%, 0, 2.975em);
}
.cyl-2 .s7 {
-webkit-transform:rotateY(135deg) translate3D(-50%, 0, 2.975em);
-moz-transform:rotateY(135deg) translate3D(-50%, 0, 2.975em);
-o-transform:rotateY(135deg) translate3D(-50%, 0, 2.975em);
-ms-transform:rotateY(135deg) translate3D(-50%, 0, 2.975em);
transform:rotateY(135deg) translate3D(-50%, 0, 2.975em);
}
.cyl-2 .s8 {
-webkit-transform:rotateY(153deg) translate3D(-50%, 0, 2.975em);
-moz-transform:rotateY(153deg) translate3D(-50%, 0, 2.975em);
-o-transform:rotateY(153deg) translate3D(-50%, 0, 2.975em);
-ms-transform:rotateY(153deg) translate3D(-50%, 0, 2.975em);
transform:rotateY(153deg) translate3D(-50%, 0, 2.975em);
}
.cyl-2 .s9 {
-webkit-transform:rotateY(171deg) translate3D(-50%, 0, 2.975em);
-moz-transform:rotateY(171deg) translate3D(-50%, 0, 2.975em);
-o-transform:rotateY(171deg) translate3D(-50%, 0, 2.975em);
-ms-transform:rotateY(171deg) translate3D(-50%, 0, 2.975em);
transform:rotateY(171deg) translate3D(-50%, 0, 2.975em);
}
.cyl-2 .s10 {
-webkit-transform:rotateY(189deg) translate3D(-50%, 0, 2.975em);
-moz-transform:rotateY(189deg) translate3D(-50%, 0, 2.975em);
-o-transform:rotateY(189deg) translate3D(-50%, 0, 2.975em);
-ms-transform:rotateY(189deg) translate3D(-50%, 0, 2.975em);
transform:rotateY(189deg) translate3D(-50%, 0, 2.975em);
}
.cyl-2 .s11 {
-webkit-transform:rotateY(207deg) translate3D(-50%, 0, 2.975em);
-moz-transform:rotateY(207deg) translate3D(-50%, 0, 2.975em);
-o-transform:rotateY(207deg) translate3D(-50%, 0, 2.975em);
-ms-transform:rotateY(207deg) translate3D(-50%, 0, 2.975em);
transform:rotateY(207deg) translate3D(-50%, 0, 2.975em);
}
.cyl-2 .s12 {
-webkit-transform:rotateY(225deg) translate3D(-50%, 0, 2.975em);
-moz-transform:rotateY(225deg) translate3D(-50%, 0, 2.975em);
-o-transform:rotateY(225deg) translate3D(-50%, 0, 2.975em);
-ms-transform:rotateY(225deg) translate3D(-50%, 0, 2.975em);
transform:rotateY(225deg) translate3D(-50%, 0, 2.975em);
}
.cyl-2 .s13 {
-webkit-transform:rotateY(243deg) translate3D(-50%, 0, 2.975em);
-moz-transform:rotateY(243deg) translate3D(-50%, 0, 2.975em);
-o-transform:rotateY(243deg) translate3D(-50%, 0, 2.975em);
-ms-transform:rotateY(243deg) translate3D(-50%, 0, 2.975em);
transform:rotateY(243deg) translate3D(-50%, 0, 2.975em);
}
.cyl-2 .s14 {
-webkit-transform:rotateY(261deg) translate3D(-50%, 0, 2.975em);
-moz-transform:rotateY(261deg) translate3D(-50%, 0, 2.975em);
-o-transform:rotateY(261deg) translate3D(-50%, 0, 2.975em);
-ms-transform:rotateY(261deg) translate3D(-50%, 0, 2.975em);
transform:rotateY(261deg) translate3D(-50%, 0, 2.975em);
}
.cyl-2 .s15 {
-webkit-transform:rotateY(279deg) translate3D(-50%, 0, 2.975em);
-moz-transform:rotateY(279deg) translate3D(-50%, 0, 2.975em);
-o-transform:rotateY(279deg) translate3D(-50%, 0, 2.975em);
-ms-transform:rotateY(279deg) translate3D(-50%, 0, 2.975em);
transform:rotateY(279deg) translate3D(-50%, 0, 2.975em);
}
.cyl-2 .s16 {
-webkit-transform:rotateY(297deg) translate3D(-50%, 0, 2.975em);
-moz-transform:rotateY(297deg) translate3D(-50%, 0, 2.975em);
-o-transform:rotateY(297deg) translate3D(-50%, 0, 2.975em);
-ms-transform:rotateY(297deg) translate3D(-50%, 0, 2.975em);
transform:rotateY(297deg) translate3D(-50%, 0, 2.975em);
}
.cyl-2 .s17 {
-webkit-transform:rotateY(315deg) translate3D(-50%, 0, 2.975em);
-moz-transform:rotateY(315deg) translate3D(-50%, 0, 2.975em);
-o-transform:rotateY(315deg) translate3D(-50%, 0, 2.975em);
-ms-transform:rotateY(315deg) translate3D(-50%, 0, 2.975em);
transform:rotateY(315deg) translate3D(-50%, 0, 2.975em);
}
.cyl-2 .s18 {
-webkit-transform:rotateY(333deg) translate3D(-50%, 0, 2.975em);
-moz-transform:rotateY(333deg) translate3D(-50%, 0, 2.975em);
-o-transform:rotateY(333deg) translate3D(-50%, 0, 2.975em);
-ms-transform:rotateY(333deg) translate3D(-50%, 0, 2.975em);
transform:rotateY(333deg) translate3D(-50%, 0, 2.975em);
}
.cyl-2 .s19 {
-webkit-transform:rotateY(351deg) translate3D(-50%, 0, 2.975em);
-moz-transform:rotateY(351deg) translate3D(-50%, 0, 2.975em);
-o-transform:rotateY(351deg) translate3D(-50%, 0, 2.975em);
-ms-transform:rotateY(351deg) translate3D(-50%, 0, 2.975em);
transform:rotateY(351deg) translate3D(-50%, 0, 2.975em);
}
/*--Global--*/
#wrapper {
width:100%;
height:100%;
position:fixed;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
transform-style:preserve-3d;
-webkit-transform:translate3d(0.00px,0.00px,-9000.00px);
-moz-transform:translate3d(0.00px,0.00px,-9000.00px);
-o-transform:translate3d(0.00px,0.00px,-9000.00px);
-ms-transform:translate3d(0.00px,0.00px,-9000.00px);
transform:translate3d(0.00px,0.00px,-9000.00px);
}
#outline {
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
transform-style:preserve-3d;
font-size:100%;
}
body {
padding:0;
margin:0;
overflow-x:hidden;
background-color:#c9eafa;
font-family:'Open Sans', sans-serif;
}
.centering {
left:50%;
top:50%;
margin-left:-125px;
margin-top:-125px;
width:250px;
height:250px;
position:absolute;
}
.base {
position:absolute;
width:inherit;
height:inherit;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
transform-style:preserve-3d;
-webkit-transform:translate3d(0.00px,0.00px,0.00px) rotate(0.00deg);
-moz-transform:translate3d(0.00px,0.00px,0.00px) rotate(0.00deg);
-o-transform:translate3d(0.00px,0.00px,0.00px) rotate(0.00deg);
-ms-transform:translate3d(0.00px,0.00px,0.00px) rotate(0.00deg);
transform:translate3d(0.00px,0.00px,0.00px) rotate(0.00deg);
}
.base div {
position:absolute;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
transform-style:preserve-3d;
}
.sphere {
-webkit-transform:translate3d(70px, 68px, 136px);
-moz-transform:translate3d(70px, 68px, 136px);
-o-transform:translate3d(70px, 68px, 136px);
-ms-transform:translate3d(70px, 68px, 136px);
transform:translate3d(70px, 68px, 136px);
width:100px;
height:100px;
}
.sphere svg * {
stroke:none;
}
.sphere svg svg {
-webkit-transform:translate3d(0px, 10px, 0px);
-moz-transform:translate3d(0px, 10px, 0px);
-o-transform:translate3d(0px, 10px, 0px);
-ms-transform:translate3d(0px, 10px, 0px);
transform:translate3d(0px, 10px, 0px);
}
svg {
position:absolute;
}
svg polygon {
stroke:rgba(255, 255, 255, 0.50);
stroke:rgba(0, 0, 0, 0.30);
stroke-width:1;
}
#sp .hemi2 {
-webkit-transform:translate3d(55px, 53px, -58.2px) rotateY(180deg) scale3d(0.28, 0.28, 0.21);
-moz-transform:translate3d(55px, 53px, -58.2px) rotateY(180deg) scale3d(0.28, 0.28, 0.21);
-o-transform:translate3d(55px, 53px, -58.2px) rotateY(180deg) scale3d(0.28, 0.28, 0.21);
-ms-transform:translate3d(55px, 53px, -58.2px) rotateY(180deg) scale3d(0.28, 0.28, 0.21);
transform:translate3d(55px, 53px, -58.2px) rotateY(180deg) scale3d(0.28, 0.28, 0.21);
}
.body-part {
-webkit-transform:translate3d(0px, 60px, -60px) rotateX(20deg);
-moz-transform:translate3d(0px, 60px, -60px) rotateX(20deg);
-o-transform:translate3d(0px, 60px, -60px) rotateX(20deg);
-ms-transform:translate3d(0px, 60px, -60px) rotateX(20deg);
transform:translate3d(0px, 60px, -60px) rotateX(20deg);
-webkit-animation-delay:8s;
-moz-animation-delay:8s;
-o-animation-delay:8s;
-ms-animation-delay:8s;
animation-delay:8s;
}
.body-part .face {
box-shadow:none;
}
.foot-left {
-webkit-transform:translate3d(63px, 116px, 56px) rotate(90deg) rotateX(-90deg) scale3d(0.5, 0.5, 0.5) skew(0deg, 0deg);
-moz-transform:translate3d(63px, 116px, 56px) rotate(90deg) rotateX(-90deg) scale3d(0.5, 0.5, 0.5) skew(0deg, 0deg);
-o-transform:translate3d(63px, 116px, 56px) rotate(90deg) rotateX(-90deg) scale3d(0.5, 0.5, 0.5) skew(0deg, 0deg);
-ms-transform:translate3d(63px, 116px, 56px) rotate(90deg) rotateX(-90deg) scale3d(0.5, 0.5, 0.5) skew(0deg, 0deg);
transform:translate3d(63px, 116px, 56px) rotate(90deg) rotateX(-90deg) scale3d(0.5, 0.5, 0.5) skew(0deg, 0deg);
}
.foot-right {
-webkit-transform:translate3d(176px, 116px, 56px) rotate(90deg) rotateZ(180deg) rotateX(-90deg) scale3d(0.5, 0.5, 0.5) skew(0deg, 0deg);
-moz-transform:translate3d(176px, 116px, 56px) rotate(90deg) rotateZ(180deg) rotateX(-90deg) scale3d(0.5, 0.5, 0.5) skew(0deg, 0deg);
-o-transform:translate3d(176px, 116px, 56px) rotate(90deg) rotateZ(180deg) rotateX(-90deg) scale3d(0.5, 0.5, 0.5) skew(0deg, 0deg);
-ms-transform:translate3d(176px, 116px, 56px) rotate(90deg) rotateZ(180deg) rotateX(-90deg) scale3d(0.5, 0.5, 0.5) skew(0deg, 0deg);
transform:translate3d(176px, 116px, 56px) rotate(90deg) rotateZ(180deg) rotateX(-90deg) scale3d(0.5, 0.5, 0.5) skew(0deg, 0deg);
}
.foot-center {
-webkit-transform:translate3d(118px, 166px, 56px) rotate(90deg) rotateX(-90deg) scale3d(0.5, 0.5, 0.6) skew(0deg, 0deg);
-moz-transform:translate3d(118px, 166px, 56px) rotate(90deg) rotateX(-90deg) scale3d(0.5, 0.5, 0.6) skew(0deg, 0deg);
-o-transform:translate3d(118px, 166px, 56px) rotate(90deg) rotateX(-90deg) scale3d(0.5, 0.5, 0.6) skew(0deg, 0deg);
-ms-transform:translate3d(118px, 166px, 56px) rotate(90deg) rotateX(-90deg) scale3d(0.5, 0.5, 0.6) skew(0deg, 0deg);
transform:translate3d(118px, 166px, 56px) rotate(90deg) rotateX(-90deg) scale3d(0.5, 0.5, 0.6) skew(0deg, 0deg);
-webkit-animation-delay:7.5s;
-moz-animation-delay:7.5s;
-o-animation-delay:7.5s;
-ms-animation-delay:7.5s;
animation-delay:7.5s;
}
.foot-center .foot-top3 {
-webkit-transform:translate3d(0.5px, 45.4px, -12.6px) scale3d(0.56, 0.37, 0.2);
-moz-transform:translate3d(0.5px, 45.4px, -12.6px) scale3d(0.56, 0.37, 0.2);
-o-transform:translate3d(0.5px, 45.4px, -12.6px) scale3d(0.56, 0.37, 0.2);
-ms-transform:translate3d(0.5px, 45.4px, -12.6px) scale3d(0.56, 0.37, 0.2);
transform:translate3d(0.5px, 45.4px, -12.6px) scale3d(0.56, 0.37, 0.2);
}
.foot-center .foot-top2 {
-webkit-transform:translate3d(0.5px, 45.4px, 12.0px) scale3d(0.56, 0.37, 0.2);
-moz-transform:translate3d(0.5px, 45.4px, 12.0px) scale3d(0.56, 0.37, 0.2);
-o-transform:translate3d(0.5px, 45.4px, 12.0px) scale3d(0.56, 0.37, 0.2);
-ms-transform:translate3d(0.5px, 45.4px, 12.0px) scale3d(0.56, 0.37, 0.2);
transform:translate3d(0.5px, 45.4px, 12.0px) scale3d(0.56, 0.37, 0.2);
}
.center-ancle {
-webkit-transform:translate3d(118px, 133px, 68px) rotate(90deg) rotateX(-90deg) scale3d(0.5, 0.5, 0.6) skew(0deg, 0deg);
-moz-transform:translate3d(118px, 133px, 68px) rotate(90deg) rotateX(-90deg) scale3d(0.5, 0.5, 0.6) skew(0deg, 0deg);
-o-transform:translate3d(118px, 133px, 68px) rotate(90deg) rotateX(-90deg) scale3d(0.5, 0.5, 0.6) skew(0deg, 0deg);
-ms-transform:translate3d(118px, 133px, 68px) rotate(90deg) rotateX(-90deg) scale3d(0.5, 0.5, 0.6) skew(0deg, 0deg);
transform:translate3d(118px, 133px, 68px) rotate(90deg) rotateX(-90deg) scale3d(0.5, 0.5, 0.6) skew(0deg, 0deg);
}
.foot-top {
-webkit-transform:translate3d(0px, 65px, 0px) scale3d(1, 0.7, 0.5);
-moz-transform:translate3d(0px, 65px, 0px) scale3d(1, 0.7, 0.5);
-o-transform:translate3d(0px, 65px, 0px) scale3d(1, 0.7, 0.5);
-ms-transform:translate3d(0px, 65px, 0px) scale3d(1, 0.7, 0.5);
transform:translate3d(0px, 65px, 0px) scale3d(1, 0.7, 0.5);
}
.foot-top .cub-1 .tp {
background-color:#363636;
}
.foot-top2 {
-webkit-transform:translate3d(0.5px, 45.4px, 16.5px) scale3d(0.56, 0.37, 0.1);
-moz-transform:translate3d(0.5px, 45.4px, 16.5px) scale3d(0.56, 0.37, 0.1);
-o-transform:translate3d(0.5px, 45.4px, 16.5px) scale3d(0.56, 0.37, 0.1);
-ms-transform:translate3d(0.5px, 45.4px, 16.5px) scale3d(0.56, 0.37, 0.1);
transform:translate3d(0.5px, 45.4px, 16.5px) scale3d(0.56, 0.37, 0.1);
}
.foot-top2 .pri-1 .lt .face,
.foot-top3 .pri-1 .rt .face,
.foot-top2 .cub-1 .bk,
.foot-top2 .pri-2 .rt .face,
.foot-top3 .pri-2 .lt .face,
.foot-top3 .cub-1 .ft,
.foot-top .pri-1 .lt .face,
.foot-top .cub-1 .bk,
.foot-top .pri-2 .rt .face {
background-color:#d9d9d9;
box-shadow:none;
}
.foot-top3 {
-webkit-transform:translate3d(0.5px, 45.6px, -9.9px) scale3d(0.56, 0.37, 0.25);
-moz-transform:translate3d(0.5px, 45.6px, -9.9px) scale3d(0.56, 0.37, 0.25);
-o-transform:translate3d(0.5px, 45.6px, -9.9px) scale3d(0.56, 0.37, 0.25);
-ms-transform:translate3d(0.5px, 45.6px, -9.9px) scale3d(0.56, 0.37, 0.25);
transform:translate3d(0.5px, 45.6px, -9.9px) scale3d(0.56, 0.37, 0.25);
}
.foot-bottom {
-webkit-transform:translate3d(0px, 111.5px, -8.5px) rotate(180deg) scale3d(0.99, 0.1, 0.70);
-moz-transform:translate3d(0px, 111.5px, -8.5px) rotate(180deg) scale3d(0.99, 0.1, 0.70);
-o-transform:translate3d(0px, 111.5px, -8.5px) rotate(180deg) scale3d(0.99, 0.1, 0.70);
-ms-transform:translate3d(0px, 111.5px, -8.5px) rotate(180deg) scale3d(0.99, 0.1, 0.70);
transform:translate3d(0px, 111.5px, -8.5px) rotate(180deg) scale3d(0.99, 0.1, 0.70);
}
.foot-part-1 {
-webkit-transform:translate3d(4px, 34px, 19px) rotate(0deg) scale3d(0.86, 0.9, 0.8);
-moz-transform:translate3d(4px, 34px, 19px) rotate(0deg) scale3d(0.86, 0.9, 0.8);
-o-transform:translate3d(4px, 34px, 19px) rotate(0deg) scale3d(0.86, 0.9, 0.8);
-ms-transform:translate3d(4px, 34px, 19px) rotate(0deg) scale3d(0.86, 0.9, 0.8);
transform:translate3d(4px, 34px, 19px) rotate(0deg) scale3d(0.86, 0.9, 0.8);
}
.foot-bottom .pri-1 {
-webkit-transform:translate3d(2.4em, 0em, 0em) rotateY(90deg) scale3d(1, 1, 0.2);
-moz-transform:translate3d(2.4em, 0em, 0em) rotateY(90deg) scale3d(1, 1, 0.2);
-o-transform:translate3d(2.4em, 0em, 0em) rotateY(90deg) scale3d(1, 1, 0.2);
-ms-transform:translate3d(2.4em, 0em, 0em) rotateY(90deg) scale3d(1, 1, 0.2);
transform:translate3d(2.4em, 0em, 0em) rotateY(90deg) scale3d(1, 1, 0.2);
}
.foot-bottom .pri-2 {
-webkit-transform:translate3d(-7.50em,0em,0px) rotateX(0deg) rotateY(-450deg) rotateZ(0deg) scale3d(1, 1, 0.215);
-moz-transform:translate3d(-7.50em,0em,0px) rotateX(0deg) rotateY(-450deg) rotateZ(0deg) scale3d(1, 1, 0.215);
-o-transform:translate3d(-7.50em,0em,0px) rotateX(0deg) rotateY(-450deg) rotateZ(0deg) scale3d(1, 1, 0.215);
-ms-transform:translate3d(-7.50em,0em,0px) rotateX(0deg) rotateY(-450deg) rotateZ(0deg) scale3d(1, 1, 0.215);
transform:translate3d(-7.50em,0em,0px) rotateX(0deg) rotateY(-450deg) rotateZ(0deg) scale3d(1, 1, 0.215);
}
.foot-bottom .pri-2 .ft,
.foot-bottom .pri-1 .ft {
background-color:#c7c7c7;
}
.foot-top .pri-2 .ft,
.foot-top .pri-1 .ft,
.foot-top2 .pri-2 .ft,
.foot-top2 .pri-1 .ft,
.foot-top3 .pri-2 .ft,
.foot-top3 .pri-1 .ft {
background-color:#f7f7f7;
box-shadow:none;
}
.foot-bottom .pri-2 .bm,
.foot-bottom .cub-1 .bm,
.foot-bottom .pri-1 .bm {
background-color:#ffffff;
box-shadow:none;
}
.foot-bottom .cub-1 {
-webkit-transform:translate3d(-2.95em, 0.8em, 0em) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1.49, 1.5, 1.0);
-moz-transform:translate3d(-2.95em, 0.8em, 0em) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1.49, 1.5, 1.0);
-o-transform:translate3d(-2.95em, 0.8em, 0em) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1.49, 1.5, 1.0);
-ms-transform:translate3d(-2.95em, 0.8em, 0em) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1.49, 1.5, 1.0);
transform:translate3d(-2.95em, 0.8em, 0em) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1.49, 1.5, 1.0);
}
.foot-bottom .cub-1 .bk,
.foot-bottom .pri-2 .rt .face,
.foot-bottom .pri-1 .lt .face {
background-color:#808080;
box-shadow:none;
}
.cub-center {
-webkit-transform:translate3d(2px, 111.1px, 0px) rotate(180deg) scale3d(1, 0.1, 0.50);
-moz-transform:translate3d(2px, 111.1px, 0px) rotate(180deg) scale3d(1, 0.1, 0.50);
-o-transform:translate3d(2px, 111.1px, 0px) rotate(180deg) scale3d(1, 0.1, 0.50);
-ms-transform:translate3d(2px, 111.1px, 0px) rotate(180deg) scale3d(1, 0.1, 0.50);
transform:translate3d(2px, 111.1px, 0px) rotate(180deg) scale3d(1, 0.1, 0.50);
}
.cub-center {
-webkit-transform:translate3d(2px, 111.1px, 0px) rotate(180deg) scale3d(1, 0.1, 0.50);
-moz-transform:translate3d(2px, 111.1px, 0px) rotate(180deg) scale3d(1, 0.1, 0.50);
-o-transform:translate3d(2px, 111.1px, 0px) rotate(180deg) scale3d(1, 0.1, 0.50);
-ms-transform:translate3d(2px, 111.1px, 0px) rotate(180deg) scale3d(1, 0.1, 0.50);
transform:translate3d(2px, 111.1px, 0px) rotate(180deg) scale3d(1, 0.1, 0.50);
}
.cyl-1 svg {
-webkit-transform:translate3d(-20px, -83px, 0px) rotate(180deg) scale3d(0.411, 0.40, 1.0);
-moz-transform:translate3d(-20px, -83px, 0px) rotate(180deg) scale3d(0.411, 0.40, 1.0);
-o-transform:translate3d(-20px, -83px, 0px) rotate(180deg) scale3d(0.411, 0.40, 1.0);
-ms-transform:translate3d(-20px, -83px, 0px) rotate(180deg) scale3d(0.411, 0.40, 1.0);
transform:translate3d(-20px, -83px, 0px) rotate(180deg) scale3d(0.411, 0.40, 1.0);
}
.arm {
-webkit-transform:translate3d(0px, 37px, 0px);
-moz-transform:translate3d(0px, 37px, 0px);
-o-transform:translate3d(0px, 37px, 0px);
-ms-transform:translate3d(0px, 37px, 0px);
transform:translate3d(0px, 37px, 0px);
}
.reservoir-pr2 .bk,
.reservoir-pr2 .lt .face,
.reservoir-pr2 .rt .face {
background-color:#3E5070;
}
.arm-bottom-2 .bk,
.arm-bottom-2 .bm,
.arm-bottom-2 .tp,
.arm-bottom-2 .lt {
background-color:#3E5070;
box-shadow:none;
}
.arm-bottom-2 .bm,
.arm-bottom-2 .tp {
background-image:-webkit-linear-gradient(top, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.30));
background-image:-moz-linear-gradient(top, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.30));
background-image:-o-linear-gradient(top, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.30));
background-image:-ms-linear-gradient(top, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.30));
background-image:linear-gradient(to bottom, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.30));
}
.arm-bottom-2 .rt,
.arm-bottom-2 .lt {
background-image:-webkit-linear-gradient(top, rgba(255, 255, 255, 0.50), rgba(255, 255, 255, 0.50));
background-image:-moz-linear-gradient(top, rgba(255, 255, 255, 0.50), rgba(255, 255, 255, 0.50));
background-image:-o-linear-gradient(top, rgba(255, 255, 255, 0.50), rgba(255, 255, 255, 0.50));
background-image:-ms-linear-gradient(top, rgba(255, 255, 255, 0.50), rgba(255, 255, 255, 0.50));
background-image:linear-gradient(to bottom, rgba(255, 255, 255, 0.50), rgba(255, 255, 255, 0.50));
}
.foot-top .cub-1 .ft,
.foot-top .pri-1 .rt .face,
.foot-top .prism-2 .lt .face,
.foot-top2 .cub-1 .ft,
.foot-top2 .pri-1 .rt .face,
.foot-top2 .prism-2 .lt .face,
.foot-bottom .cub-1 .ft,
.foot-bottom .pri-2 .lt .face,
.foot-bottom .pri-1 .rt .face {
background-color:#ffffff;
box-shadow:none;
}
.arm-pri-1 .ft,
.arm-pri-2 .ft {
background-color:#ebebeb;
box-shadow:none;
}
.foot-center .cub-1 .bk,
.foot-center .pri-1 .lt .face,
.foot-center .pri-2 .rt .face,
.foot-center .cub-1 .ft,
.foot-center .pri-1 .rt .face,
.foot-center .pri-2 .lt .face {
background-color:#ebebeb!important;
box-shadow:none;
}
.arm-bottom {
opacity:1;
width:6.124em;
height:5em;
-webkit-transform:translate3d(-47.2px, -138px, -1.8px) rotate(0deg) rotateX(180deg) rotateZ(90deg) scale3d(1.36, 0.48, 0.26);
-moz-transform:translate3d(-47.2px, -138px, -1.8px) rotate(0deg) rotateX(180deg) rotateZ(90deg) scale3d(1.36, 0.48, 0.26);
-o-transform:translate3d(-47.2px, -138px, -1.8px) rotate(0deg) rotateX(180deg) rotateZ(90deg) scale3d(1.36, 0.48, 0.26);
-ms-transform:translate3d(-47.2px, -138px, -1.8px) rotate(0deg) rotateX(180deg) rotateZ(90deg) scale3d(1.36, 0.48, 0.26);
transform:translate3d(-47.2px, -138px, -1.8px) rotate(0deg) rotateX(180deg) rotateZ(90deg) scale3d(1.36, 0.48, 0.26);
}
.arm-bottom .lt {
background-color:#a3a3a3;
}
.arm-bottom .bm,
.arm-bottom .tp,
.arm-bottom2 .bm,
.arm-bottom2 .tp {
background-color:#f5f5f5;
}
.arm-bottom-2 {
opacity:1;
width:6em;
height:5em;
-webkit-transform:translate3d(-2.94em, -8.58em, 0.794em) rotate(0deg) rotateX(180deg) rotateZ(90deg) scale3d(1.41, 0.35, 0.08);
-moz-transform:translate3d(-2.94em, -8.58em, 0.794em) rotate(0deg) rotateX(180deg) rotateZ(90deg) scale3d(1.41, 0.35, 0.08);
-o-transform:translate3d(-2.94em, -8.58em, 0.794em) rotate(0deg) rotateX(180deg) rotateZ(90deg) scale3d(1.41, 0.35, 0.08);
-ms-transform:translate3d(-2.94em, -8.58em, 0.794em) rotate(0deg) rotateX(180deg) rotateZ(90deg) scale3d(1.41, 0.35, 0.08);
transform:translate3d(-2.94em, -8.58em, 0.794em) rotate(0deg) rotateX(180deg) rotateZ(90deg) scale3d(1.41, 0.35, 0.08);
}
.sholder-1 {
opacity:1;
width:6.124em;
height:5em;
-webkit-transform:translate3d(-18.7px, -201.5px, -1.63px) rotate(0deg) rotateX(180deg) rotateZ(90deg) scale3d(0.48, 0.238, 0.26);
-moz-transform:translate3d(-18.7px, -201.5px, -1.63px) rotate(0deg) rotateX(180deg) rotateZ(90deg) scale3d(0.48, 0.238, 0.26);
-o-transform:translate3d(-18.7px, -201.5px, -1.63px) rotate(0deg) rotateX(180deg) rotateZ(90deg) scale3d(0.48, 0.238, 0.26);
-ms-transform:translate3d(-18.7px, -201.5px, -1.63px) rotate(0deg) rotateX(180deg) rotateZ(90deg) scale3d(0.48, 0.238, 0.26);
transform:translate3d(-18.7px, -201.5px, -1.63px) rotate(0deg) rotateX(180deg) rotateZ(90deg) scale3d(0.48, 0.238, 0.26);
}
.sholder-2 {
opacity:1;
width:6.124em;
height:5em;
-webkit-transform:translate3d(-75.8px, -201.5px, -1.63px) rotate(0deg) rotateX(180deg) rotateZ(90deg) scale3d(0.48, 0.238, 0.26);
-moz-transform:translate3d(-75.8px, -201.5px, -1.63px) rotate(0deg) rotateX(180deg) rotateZ(90deg) scale3d(0.48, 0.238, 0.26);
-o-transform:translate3d(-75.8px, -201.5px, -1.63px) rotate(0deg) rotateX(180deg) rotateZ(90deg) scale3d(0.48, 0.238, 0.26);
-ms-transform:translate3d(-75.8px, -201.5px, -1.63px) rotate(0deg) rotateX(180deg) rotateZ(90deg) scale3d(0.48, 0.238, 0.26);
transform:translate3d(-75.8px, -201.5px, -1.63px) rotate(0deg) rotateX(180deg) rotateZ(90deg) scale3d(0.48, 0.238, 0.26);
}
.sholder-2 .guard1 {
opacity:1;
width:2em;
height:5em;
-webkit-transform:translate3d(3em, -3.1em, 0em) rotate(-50deg) rotateX(90deg) scale3d(1, 1, 1);
-moz-transform:translate3d(3em, -3.1em, 0em) rotate(-50deg) rotateX(90deg) scale3d(1, 1, 1);
-o-transform:translate3d(3em, -3.1em, 0em) rotate(-50deg) rotateX(90deg) scale3d(1, 1, 1);
-ms-transform:translate3d(3em, -3.1em, 0em) rotate(-50deg) rotateX(90deg) scale3d(1, 1, 1);
transform:translate3d(3em, -3.1em, 0em) rotate(-50deg) rotateX(90deg) scale3d(1, 1, 1);
background-color:#808080;
}
.sholder-2 .guard2 {
opacity:1;
width:2em;
height:5em;
-webkit-transform:translate3d(3em, -12.0em, 0em) rotate(50deg) rotateX(90deg) scale3d(1, 1, 1);
-moz-transform:translate3d(3em, -12.0em, 0em) rotate(50deg) rotateX(90deg) scale3d(1, 1, 1);
-o-transform:translate3d(3em, -12.0em, 0em) rotate(50deg) rotateX(90deg) scale3d(1, 1, 1);
-ms-transform:translate3d(3em, -12.0em, 0em) rotate(50deg) rotateX(90deg) scale3d(1, 1, 1);
transform:translate3d(3em, -12.0em, 0em) rotate(50deg) rotateX(90deg) scale3d(1, 1, 1);
background-color:#808080;
}
.sholder-3 {
opacity:1;
width:6.124em;
height:5em;
-webkit-transform:translate3d(-47.1px, -224.6px, -1.84px) rotate(0deg) rotateY(90deg) rotateX(0deg) rotateZ(-90deg) scale3d(0.785, 0.264, 0.785);
-moz-transform:translate3d(-47.1px, -224.6px, -1.84px) rotate(0deg) rotateY(90deg) rotateX(0deg) rotateZ(-90deg) scale3d(0.785, 0.264, 0.785);
-o-transform:translate3d(-47.1px, -224.6px, -1.84px) rotate(0deg) rotateY(90deg) rotateX(0deg) rotateZ(-90deg) scale3d(0.785, 0.264, 0.785);
-ms-transform:translate3d(-47.1px, -224.6px, -1.84px) rotate(0deg) rotateY(90deg) rotateX(0deg) rotateZ(-90deg) scale3d(0.785, 0.264, 0.785);
transform:translate3d(-47.1px, -224.6px, -1.84px) rotate(0deg) rotateY(90deg) rotateX(0deg) rotateZ(-90deg) scale3d(0.785, 0.264, 0.785);
}
.sholder-4 {
opacity:1;
width:6.124em;
height:5em;
-webkit-transform:translate3d(-47.0px, -224.6px, -1.84px) rotate(0deg) rotateY(90deg) rotateX(0deg) rotateZ(-90deg) scale3d(0.368, 0.264, 0.368);
-moz-transform:translate3d(-47.0px, -224.6px, -1.84px) rotate(0deg) rotateY(90deg) rotateX(0deg) rotateZ(-90deg) scale3d(0.368, 0.264, 0.368);
-o-transform:translate3d(-47.0px, -224.6px, -1.84px) rotate(0deg) rotateY(90deg) rotateX(0deg) rotateZ(-90deg) scale3d(0.368, 0.264, 0.368);
-ms-transform:translate3d(-47.0px, -224.6px, -1.84px) rotate(0deg) rotateY(90deg) rotateX(0deg) rotateZ(-90deg) scale3d(0.368, 0.264, 0.368);
transform:translate3d(-47.0px, -224.6px, -1.84px) rotate(0deg) rotateY(90deg) rotateX(0deg) rotateZ(-90deg) scale3d(0.368, 0.264, 0.368);
}
.sholder-2 .bk,
.sholder-2 .bm,
.sholder-1 .tp {
background-color:#f6f6f6;
}
.sholder-3 .face {
background-color:#f9f9f9 !important;
}
.sholder-3 .tp {
-webkit-transform:rotateX(90deg) rotateZ(90deg) translate3d(-48px, -100%, 0px);
-moz-transform:rotateX(90deg) rotateZ(90deg) translate3d(-48px, -100%, 0px);
-o-transform:rotateX(90deg) rotateZ(90deg) translate3d(-48px, -100%, 0px);
-ms-transform:rotateX(90deg) rotateZ(90deg) translate3d(-48px, -100%, 0px);
transform:rotateX(90deg) rotateZ(90deg) translate3d(-48px, -100%, 0px);
background-color:rgba(255, 255, 255, 0.00)!important;
box-shadow:none;
}
.sholder-4 .face {
background-color:#919191 !important;
}
.sholder-1 .bk,
.sholder-2 .bk,
.arm-pri-1 .lt .face,
.arm-pri-2 .rt .face,
.arm-bottom .bk,
.sholder-3 .tp svg * {
box-shadow:none;
background-color:#ffffff;
fill:#ffffff;
}
.arm-pri-1 {
opacity:1;
width:5.125em;
height:5em;
-webkit-transform:translate3d(-11.2px, -170.4px, -1.8px) rotate(0deg) rotateY(-90deg) rotateX(180deg) scale3d(0.26, 0.2, 0.24);
-moz-transform:translate3d(-11.2px, -170.4px, -1.8px) rotate(0deg) rotateY(-90deg) rotateX(180deg) scale3d(0.26, 0.2, 0.24);
-o-transform:translate3d(-11.2px, -170.4px, -1.8px) rotate(0deg) rotateY(-90deg) rotateX(180deg) scale3d(0.26, 0.2, 0.24);
-ms-transform:translate3d(-11.2px, -170.4px, -1.8px) rotate(0deg) rotateY(-90deg) rotateX(180deg) scale3d(0.26, 0.2, 0.24);
transform:translate3d(-11.2px, -170.4px, -1.8px) rotate(0deg) rotateY(-90deg) rotateX(180deg) scale3d(0.26, 0.2, 0.24);
}
.arm-pri-1 .lt .face {
}
.arm-pri-2 {
opacity:1;
width:5.125em;
height:5em;
-webkit-transform:translate3d(-68.4px, -170.4px, -1.8px) rotate(0deg) rotateY(90deg) rotateX(180deg) scale3d(0.26, 0.2, 0.24);
-moz-transform:translate3d(-68.4px, -170.4px, -1.8px) rotate(0deg) rotateY(90deg) rotateX(180deg) scale3d(0.26, 0.2, 0.24);
-o-transform:translate3d(-68.4px, -170.4px, -1.8px) rotate(0deg) rotateY(90deg) rotateX(180deg) scale3d(0.26, 0.2, 0.24);
-ms-transform:translate3d(-68.4px, -170.4px, -1.8px) rotate(0deg) rotateY(90deg) rotateX(180deg) scale3d(0.26, 0.2, 0.24);
transform:translate3d(-68.4px, -170.4px, -1.8px) rotate(0deg) rotateY(90deg) rotateX(180deg) scale3d(0.26, 0.2, 0.24);
}
.inburicant-filter {
-webkit-transform:translate3d(0px, -1.1px, 0px);
-moz-transform:translate3d(0px, -1.1px, 0px);
-o-transform:translate3d(0px, -1.1px, 0px);
-ms-transform:translate3d(0px, -1.1px, 0px);
transform:translate3d(0px, -1.1px, 0px);
}
.reservoir {
opacity:1;
width:6em;
height:5em;
-webkit-transform:translate3d(-22.0px, -34.9px, 15.7px) rotate(0deg) rotateX(180deg) rotateZ(90deg) scale3d(0.04, 0.2, 0.04);
-moz-transform:translate3d(-22.0px, -34.9px, 15.7px) rotate(0deg) rotateX(180deg) rotateZ(90deg) scale3d(0.04, 0.2, 0.04);
-o-transform:translate3d(-22.0px, -34.9px, 15.7px) rotate(0deg) rotateX(180deg) rotateZ(90deg) scale3d(0.04, 0.2, 0.04);
-ms-transform:translate3d(-22.0px, -34.9px, 15.7px) rotate(0deg) rotateX(180deg) rotateZ(90deg) scale3d(0.04, 0.2, 0.04);
transform:translate3d(-22.0px, -34.9px, 15.7px) rotate(0deg) rotateX(180deg) rotateZ(90deg) scale3d(0.04, 0.2, 0.04);
}
.reservoir-box {
opacity:1;
width:6em;
height:5em;
-webkit-transform:translate3d(-47.05px, -3.773em, 0.956em) rotate(0deg) rotateX(180deg) rotateZ(90deg) scale3d(0.203, 0.830, 0.104);
-moz-transform:translate3d(-47.05px, -3.773em, 0.956em) rotate(0deg) rotateX(180deg) rotateZ(90deg) scale3d(0.203, 0.830, 0.104);
-o-transform:translate3d(-47.05px, -3.773em, 0.956em) rotate(0deg) rotateX(180deg) rotateZ(90deg) scale3d(0.203, 0.830, 0.104);
-ms-transform:translate3d(-47.05px, -3.773em, 0.956em) rotate(0deg) rotateX(180deg) rotateZ(90deg) scale3d(0.203, 0.830, 0.104);
transform:translate3d(-47.05px, -3.773em, 0.956em) rotate(0deg) rotateX(180deg) rotateZ(90deg) scale3d(0.203, 0.830, 0.104);
}
.reservoir-box .bm,
.reservoir-box .tp,
.ankle .bk,
.ankle .ft,
.reservoir-pr1 .rt .face,
.reservoir-pr1 .lt .face {
background-color:#f6f6f6;
}
.reservoir-back {
opacity:1;
width:6em;
height:5em;
-webkit-transform:translate3d(-4.39em, -35.2px, 16.3px) rotate(0deg) rotateX(180deg) rotateZ(90deg) scale3d(0.04, 0.2, 0.04);
-moz-transform:translate3d(-4.39em, -35.2px, 16.3px) rotate(0deg) rotateX(180deg) rotateZ(90deg) scale3d(0.04, 0.2, 0.04);
-o-transform:translate3d(-4.39em, -35.2px, 16.3px) rotate(0deg) rotateX(180deg) rotateZ(90deg) scale3d(0.04, 0.2, 0.04);
-ms-transform:translate3d(-4.39em, -35.2px, 16.3px) rotate(0deg) rotateX(180deg) rotateZ(90deg) scale3d(0.04, 0.2, 0.04);
transform:translate3d(-4.39em, -35.2px, 16.3px) rotate(0deg) rotateX(180deg) rotateZ(90deg) scale3d(0.04, 0.2, 0.04);
}
.reservoir-pr1 {
-webkit-transform:translate3d(-2.49em, -2.598em, 0.96em) rotate(0deg) rotateY(180deg) rotateX(180deg) rotateZ(0deg) scale3d(0.81, 0.202, 0.11);
-moz-transform:translate3d(-2.49em, -2.598em, 0.96em) rotate(0deg) rotateY(180deg) rotateX(180deg) rotateZ(0deg) scale3d(0.81, 0.202, 0.11);
-o-transform:translate3d(-2.49em, -2.598em, 0.96em) rotate(0deg) rotateY(180deg) rotateX(180deg) rotateZ(0deg) scale3d(0.81, 0.202, 0.11);
-ms-transform:translate3d(-2.49em, -2.598em, 0.96em) rotate(0deg) rotateY(180deg) rotateX(180deg) rotateZ(0deg) scale3d(0.81, 0.202, 0.11);
transform:translate3d(-2.49em, -2.598em, 0.96em) rotate(0deg) rotateY(180deg) rotateX(180deg) rotateZ(0deg) scale3d(0.81, 0.202, 0.11);
}
.reservoir-pr1 .ft {
background-color:#e2e2e2;
}
.reservoir-pr2 {
-webkit-transform:translate3d(-2.45em, -2.42em, 0.922em ) rotate(0deg) rotateY(180deg) rotateX(0deg) rotateZ(0deg) scale3d(0.39, 0.20, 0.11);
-moz-transform:translate3d(-2.45em, -2.42em, 0.922em ) rotate(0deg) rotateY(180deg) rotateX(0deg) rotateZ(0deg) scale3d(0.39, 0.20, 0.11);
-o-transform:translate3d(-2.45em, -2.42em, 0.922em ) rotate(0deg) rotateY(180deg) rotateX(0deg) rotateZ(0deg) scale3d(0.39, 0.20, 0.11);
-ms-transform:translate3d(-2.45em, -2.42em, 0.922em ) rotate(0deg) rotateY(180deg) rotateX(0deg) rotateZ(0deg) scale3d(0.39, 0.20, 0.11);
transform:translate3d(-2.45em, -2.42em, 0.922em ) rotate(0deg) rotateY(180deg) rotateX(0deg) rotateZ(0deg) scale3d(0.39, 0.20, 0.11);
}
.cyl-2-bottom {
opacity:1;
width:6em;
height:5em;
-webkit-transform:translate3d(-50px,17px,-67px) rotate(0deg) rotateX(0deg) rotateZ(90deg) scale3d(0.4, 1.4, 0.3);
-moz-transform:translate3d(-50px,17px,-67px) rotate(0deg) rotateX(0deg) rotateZ(90deg) scale3d(0.4, 1.4, 0.3);
-o-transform:translate3d(-50px,17px,-67px) rotate(0deg) rotateX(0deg) rotateZ(90deg) scale3d(0.4, 1.4, 0.3);
-ms-transform:translate3d(-50px,17px,-67px) rotate(0deg) rotateX(0deg) rotateZ(90deg) scale3d(0.4, 1.4, 0.3);
transform:translate3d(-50px,17px,-67px) rotate(0deg) rotateX(0deg) rotateZ(90deg) scale3d(0.4, 1.4, 0.3);
}
.cyl-2-indirect {
opacity:1;
width:6em;
height:5em;
-webkit-transform:translate3d(-46px, -32px, 6px) rotate(0deg) rotateX(0deg) rotateY(90deg) rotateZ(90deg) scale3d(0.4, 0.1, 0.4);
-moz-transform:translate3d(-46px, -32px, 6px) rotate(0deg) rotateX(0deg) rotateY(90deg) rotateZ(90deg) scale3d(0.4, 0.1, 0.4);
-o-transform:translate3d(-46px, -32px, 6px) rotate(0deg) rotateX(0deg) rotateY(90deg) rotateZ(90deg) scale3d(0.4, 0.1, 0.4);
-ms-transform:translate3d(-46px, -32px, 6px) rotate(0deg) rotateX(0deg) rotateY(90deg) rotateZ(90deg) scale3d(0.4, 0.1, 0.4);
transform:translate3d(-46px, -32px, 6px) rotate(0deg) rotateX(0deg) rotateY(90deg) rotateZ(90deg) scale3d(0.4, 0.1, 0.4);
}
.cyl-2-indirect .face {
background-color:#a3a3a3 !important;
}
.center-ancle .cyl-2-indirect {
-webkit-transform:translate3d(-46px, -36px, 0px) rotate(0deg) rotateX(0deg) rotateY(90deg) rotateZ(90deg) scale3d(0.7, 0.1, 0.7);
-moz-transform:translate3d(-46px, -36px, 0px) rotate(0deg) rotateX(0deg) rotateY(90deg) rotateZ(90deg) scale3d(0.7, 0.1, 0.7);
-o-transform:translate3d(-46px, -36px, 0px) rotate(0deg) rotateX(0deg) rotateY(90deg) rotateZ(90deg) scale3d(0.7, 0.1, 0.7);
-ms-transform:translate3d(-46px, -36px, 0px) rotate(0deg) rotateX(0deg) rotateY(90deg) rotateZ(90deg) scale3d(0.7, 0.1, 0.7);
transform:translate3d(-46px, -36px, 0px) rotate(0deg) rotateX(0deg) rotateY(90deg) rotateZ(90deg) scale3d(0.7, 0.1, 0.7);
}
.cyl-2-indirect-top {
opacity:1;
width:3em;
height:5em;
-webkit-transform:translate3d(-23px, -226px, -16px) rotate(0deg) rotateX(0deg) rotateY(90deg) rotateZ(90deg) scale3d(0.6, 0.08, 0.6);
-moz-transform:translate3d(-23px, -226px, -16px) rotate(0deg) rotateX(0deg) rotateY(90deg) rotateZ(90deg) scale3d(0.6, 0.08, 0.6);
-o-transform:translate3d(-23px, -226px, -16px) rotate(0deg) rotateX(0deg) rotateY(90deg) rotateZ(90deg) scale3d(0.6, 0.08, 0.6);
-ms-transform:translate3d(-23px, -226px, -16px) rotate(0deg) rotateX(0deg) rotateY(90deg) rotateZ(90deg) scale3d(0.6, 0.08, 0.6);
transform:translate3d(-23px, -226px, -16px) rotate(0deg) rotateX(0deg) rotateY(90deg) rotateZ(90deg) scale3d(0.6, 0.08, 0.6);
}
.ankle {
opacity:1;
width:6em;
height:5em;
-webkit-transform:translate3d(-47px, -52.3px, -1px) rotate(0deg) rotateX(0deg) rotateY(90deg) rotateZ(90deg) scale3d(0.37, 0.3, 0.8);
-moz-transform:translate3d(-47px, -52.3px, -1px) rotate(0deg) rotateX(0deg) rotateY(90deg) rotateZ(90deg) scale3d(0.37, 0.3, 0.8);
-o-transform:translate3d(-47px, -52.3px, -1px) rotate(0deg) rotateX(0deg) rotateY(90deg) rotateZ(90deg) scale3d(0.37, 0.3, 0.8);
-ms-transform:translate3d(-47px, -52.3px, -1px) rotate(0deg) rotateX(0deg) rotateY(90deg) rotateZ(90deg) scale3d(0.37, 0.3, 0.8);
transform:translate3d(-47px, -52.3px, -1px) rotate(0deg) rotateX(0deg) rotateY(90deg) rotateZ(90deg) scale3d(0.37, 0.3, 0.8);
}
.ankle .rt,
.reservoir-box .lt {
background-color:#c7c7c7;
}
.ankle .bm {
background-color:#d9d9d9 !important;
}
.cyl-2 .face,
.cyl-1 .side {
background-color:#ffffff;
}
.cub-2 .rt,
.cyl-2-bottom .bm,
.cyl-2 .bm,
.cub-2 .lt,
.cyl-2-bottom .tp,
.cyl-2 .tp {
background-color:#ebebeb;
}
.cub-2 .bk,
.cub-2 .ft,
.cyl-2-bottom .side,
.cyl-2 .side {
background-color:#6b6b6b;
}
.eye {
-webkit-transform:translate3d(-2em, -12.08em, 0.13em) rotate(180.00deg) rotateY(10deg) rotateZ(2deg) rotateX(191deg) scale3d(0.5, 0.1, 0.5);
-moz-transform:translate3d(-2em, -12.08em, 0.13em) rotate(180.00deg) rotateY(10deg) rotateZ(2deg) rotateX(191deg) scale3d(0.5, 0.1, 0.5);
-o-transform:translate3d(-2em, -12.08em, 0.13em) rotate(180.00deg) rotateY(10deg) rotateZ(2deg) rotateX(191deg) scale3d(0.5, 0.1, 0.5);
-ms-transform:translate3d(-2em, -12.08em, 0.13em) rotate(180.00deg) rotateY(10deg) rotateZ(2deg) rotateX(191deg) scale3d(0.5, 0.1, 0.5);
transform:translate3d(-2em, -12.08em, 0.13em) rotate(180.00deg) rotateY(10deg) rotateZ(2deg) rotateX(191deg) scale3d(0.5, 0.1, 0.5);
}
.eye2 {
-webkit-transform:translate3d(-2em, -12.69em, 0.23em) rotate(180.00deg) rotateY(10deg) rotateZ(2deg) rotateX(191deg) scale3d(0.4, 0.1, 0.4);
-moz-transform:translate3d(-2em, -12.69em, 0.23em) rotate(180.00deg) rotateY(10deg) rotateZ(2deg) rotateX(191deg) scale3d(0.4, 0.1, 0.4);
-o-transform:translate3d(-2em, -12.69em, 0.23em) rotate(180.00deg) rotateY(10deg) rotateZ(2deg) rotateX(191deg) scale3d(0.4, 0.1, 0.4);
-ms-transform:translate3d(-2em, -12.69em, 0.23em) rotate(180.00deg) rotateY(10deg) rotateZ(2deg) rotateX(191deg) scale3d(0.4, 0.1, 0.4);
transform:translate3d(-2em, -12.69em, 0.23em) rotate(180.00deg) rotateY(10deg) rotateZ(2deg) rotateX(191deg) scale3d(0.4, 0.1, 0.4);
}
.eye .tp {
background-color:#2f3e5d;
}
.eye2 .tp {
background-color:#494949;
background-image:-webkit-radial-gradient(center, #000000, #484848);
background-image:-moz-radial-gradient(center, #000000, #484848);
background-image:-o-radial-gradient(center, #000000, #484848);
background-image:-ms-radial-gradient(center, #000000, #484848);
background-image:radial-gradient(at center, #000000, #484848);
}
.head {
-webkit-animation-name:head;
-moz-animation-name:head;
-o-animation-name:head;
-ms-animation-name:head;
animation-name:head;
-webkit-animation-duration:8s;
-moz-animation-duration:8s;
-o-animation-duration:8s;
-ms-animation-duration:8s;
animation-duration:8s;
-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;
-webkit-transform-origin:center;
-moz-transform-origin:center;
-o-transform-origin:center;
-ms-transform-origin:center;
transform-origin:center;
}
.body-anim {
-webkit-animation-name:body;
-moz-animation-name:body;
-o-animation-name:body;
-ms-animation-name:body;
animation-name:body;
-webkit-animation-delay:8.0s;
-moz-animation-delay:8.0s;
-o-animation-delay:8.0s;
-ms-animation-delay:8.0s;
animation-delay:8.0s;
}
.foot-anim {
-webkit-animation-name:foot-anim;
-moz-animation-name:foot-anim;
-o-animation-name:foot-anim;
-ms-animation-name:foot-anim;
animation-name:foot-anim;
-webkit-animation-delay:7.5s;
-moz-animation-delay:7.5s;
-o-animation-delay:7.5s;
-ms-animation-delay:7.5s;
animation-delay:7.5s;
}
.anim-base {
-webkit-animation-duration:0.8s;
-moz-animation-duration:0.8s;
-o-animation-duration:0.8s;
-ms-animation-duration:0.8s;
animation-duration:0.8s;
-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;
-webkit-animation-timing-function:ease-in-out;
-moz-animation-timing-function:ease-in-out;
-o-animation-timing-function:ease-in-out;
-ms-animation-timing-function:ease-in-out;
animation-timing-function:ease-in-out;
}
@-webkit-keyframes body {
0% {
-webkit-transform :translate3d(0px, 60px, -60px) rotateX(20deg);
}
100% {
-webkit-transform :translate3d(0px, 27px, -46px) rotateX(10deg);
}
}
@-moz-keyframes body {
0% {
-moz-transform :translate3d(0px, 60px, -60px) rotateX(20deg);
}
100% {
-moz-transform :translate3d(0px, 27px, -46px) rotateX(10deg);
}
}
@-o-keyframes body {
0% {
-o-transform :translate3d(0px, 60px, -60px) rotateX(20deg);
}
100% {
-o-transform :translate3d(0px, 27px, -46px) rotateX(10deg);
}
}
@-ms-keyframes body {
0% {
-ms-transform :translate3d(0px, 60px, -60px) rotateX(20deg);
}
100% {
-ms-transform :translate3d(0px, 27px, -46px) rotateX(10deg);
}
}
@keyframes body{
0% {
transform :translate3d(0px, 60px, -60px) rotateX(20deg);
}
100% {
transform :translate3d(0px, 27px, -46px) rotateX(10deg);
}
}
@-webkit-keyframes head {
0% {
-webkit-transform :translate3d(45px, 50px, 59.7px) scale3d(0.31, 0.31, 0.31);
}
5% {
-webkit-transform :translate3d(45px, 45px, 59.7px) scale3d(0.31, 0.31, 0.31) rotate(45deg);
}
11% {
-webkit-transform :translate3d(45px, 50px, 59.7px) scale3d(0.31, 0.31, 0.31);
}
19% {
-webkit-transform :translate3d(45px, 45px, 59.7px) scale3d(0.31, 0.31, 0.31) rotate(45deg);
}
28% {
-webkit-transform :translate3d(45px, 50px, 59.7px) scale3d(0.31, 0.31, 0.31);
}
32% {
-webkit-transform :translate3d(45px, 45px, 59.7px) scale3d(0.31, 0.31, 0.31) rotate(45deg);
}
47% {
-webkit-transform :translate3d(45px, 50px, 59.7px) scale3d(0.31, 0.31, 0.31);
}
52% {
-webkit-transform :translate3d(45px, 45px, 59.7px) scale3d(0.31, 0.31, 0.31) rotate(45deg);
}
58% {
-webkit-transform :translate3d(45px, 50px, 59.7px) scale3d(0.31, 0.31, 0.31);
}
64% {
-webkit-transform :translate3d(45px, 45px, 59.7px) scale3d(0.31, 0.31, 0.31) rotate(45deg);
}
70% {
-webkit-transform :translate3d(45px, 50px, 59.7px) scale3d(0.31, 0.31, 0.31);
}
84% {
-webkit-transform :translate3d(45px, 45px, 59.7px) scale3d(0.31, 0.31, 0.31) rotate(45deg);
}
91% {
-webkit-transform :translate3d(45px, 50px, 59.7px) scale3d(0.31, 0.31, 0.31);
}
100% {
-webkit-transform :translate3d(48px, 45px, 59.7px) scale3d(0.31, 0.31, 0.31) rotate(45deg);
}
}
@-moz-keyframes head {
0% {
-moz-transform :translate3d(45px, 50px, 59.7px) scale3d(0.31, 0.31, 0.31);
}
5% {
-moz-transform :translate3d(45px, 45px, 59.7px) scale3d(0.31, 0.31, 0.31) rotate(45deg);
}
11% {
-moz-transform :translate3d(45px, 50px, 59.7px) scale3d(0.31, 0.31, 0.31);
}
19% {
-moz-transform :translate3d(45px, 45px, 59.7px) scale3d(0.31, 0.31, 0.31) rotate(45deg);
}
28% {
-moz-transform :translate3d(45px, 50px, 59.7px) scale3d(0.31, 0.31, 0.31);
}
32% {
-moz-transform :translate3d(45px, 45px, 59.7px) scale3d(0.31, 0.31, 0.31) rotate(45deg);
}
47% {
-moz-transform :translate3d(45px, 50px, 59.7px) scale3d(0.31, 0.31, 0.31);
}
52% {
-moz-transform :translate3d(45px, 45px, 59.7px) scale3d(0.31, 0.31, 0.31) rotate(45deg);
}
58% {
-moz-transform :translate3d(45px, 50px, 59.7px) scale3d(0.31, 0.31, 0.31);
}
64% {
-moz-transform :translate3d(45px, 45px, 59.7px) scale3d(0.31, 0.31, 0.31) rotate(45deg);
}
70% {
-moz-transform :translate3d(45px, 50px, 59.7px) scale3d(0.31, 0.31, 0.31);
}
84% {
-moz-transform :translate3d(45px, 45px, 59.7px) scale3d(0.31, 0.31, 0.31) rotate(45deg);
}
91% {
-moz-transform :translate3d(45px, 50px, 59.7px) scale3d(0.31, 0.31, 0.31);
}
100% {
-moz-transform :translate3d(48px, 45px, 59.7px) scale3d(0.31, 0.31, 0.31) rotate(45deg);
}
}
@-o-keyframes head {
0% {
-o-transform :translate3d(45px, 50px, 59.7px) scale3d(0.31, 0.31, 0.31);
}
5% {
-o-transform :translate3d(45px, 45px, 59.7px) scale3d(0.31, 0.31, 0.31) rotate(45deg);
}
11% {
-o-transform :translate3d(45px, 50px, 59.7px) scale3d(0.31, 0.31, 0.31);
}
19% {
-o-transform :translate3d(45px, 45px, 59.7px) scale3d(0.31, 0.31, 0.31) rotate(45deg);
}
28% {
-o-transform :translate3d(45px, 50px, 59.7px) scale3d(0.31, 0.31, 0.31);
}
32% {
-o-transform :translate3d(45px, 45px, 59.7px) scale3d(0.31, 0.31, 0.31) rotate(45deg);
}
47% {
-o-transform :translate3d(45px, 50px, 59.7px) scale3d(0.31, 0.31, 0.31);
}
52% {
-o-transform :translate3d(45px, 45px, 59.7px) scale3d(0.31, 0.31, 0.31) rotate(45deg);
}
58% {
-o-transform :translate3d(45px, 50px, 59.7px) scale3d(0.31, 0.31, 0.31);
}
64% {
-o-transform :translate3d(45px, 45px, 59.7px) scale3d(0.31, 0.31, 0.31) rotate(45deg);
}
70% {
-o-transform :translate3d(45px, 50px, 59.7px) scale3d(0.31, 0.31, 0.31);
}
84% {
-o-transform :translate3d(45px, 45px, 59.7px) scale3d(0.31, 0.31, 0.31) rotate(45deg);
}
91% {
-o-transform :translate3d(45px, 50px, 59.7px) scale3d(0.31, 0.31, 0.31);
}
100% {
-o-transform :translate3d(48px, 45px, 59.7px) scale3d(0.31, 0.31, 0.31) rotate(45deg);
}
}
@-ms-keyframes head {
0% {
-ms-transform :translate3d(45px, 50px, 59.7px) scale3d(0.31, 0.31, 0.31);
}
5% {
-ms-transform :translate3d(45px, 45px, 59.7px) scale3d(0.31, 0.31, 0.31) rotate(45deg);
}
11% {
-ms-transform :translate3d(45px, 50px, 59.7px) scale3d(0.31, 0.31, 0.31);
}
19% {
-ms-transform :translate3d(45px, 45px, 59.7px) scale3d(0.31, 0.31, 0.31) rotate(45deg);
}
28% {
-ms-transform :translate3d(45px, 50px, 59.7px) scale3d(0.31, 0.31, 0.31);
}
32% {
-ms-transform :translate3d(45px, 45px, 59.7px) scale3d(0.31, 0.31, 0.31) rotate(45deg);
}
47% {
-ms-transform :translate3d(45px, 50px, 59.7px) scale3d(0.31, 0.31, 0.31);
}
52% {
-ms-transform :translate3d(45px, 45px, 59.7px) scale3d(0.31, 0.31, 0.31) rotate(45deg);
}
58% {
-ms-transform :translate3d(45px, 50px, 59.7px) scale3d(0.31, 0.31, 0.31);
}
64% {
-ms-transform :translate3d(45px, 45px, 59.7px) scale3d(0.31, 0.31, 0.31) rotate(45deg);
}
70% {
-ms-transform :translate3d(45px, 50px, 59.7px) scale3d(0.31, 0.31, 0.31);
}
84% {
-ms-transform :translate3d(45px, 45px, 59.7px) scale3d(0.31, 0.31, 0.31) rotate(45deg);
}
91% {
-ms-transform :translate3d(45px, 50px, 59.7px) scale3d(0.31, 0.31, 0.31);
}
100% {
-ms-transform :translate3d(48px, 45px, 59.7px) scale3d(0.31, 0.31, 0.31) rotate(45deg);
}
}
@keyframes head{
0% {
transform :translate3d(45px, 50px, 59.7px) scale3d(0.31, 0.31, 0.31);
}
5% {
transform :translate3d(45px, 45px, 59.7px) scale3d(0.31, 0.31, 0.31) rotate(45deg);
}
11% {
transform :translate3d(45px, 50px, 59.7px) scale3d(0.31, 0.31, 0.31);
}
19% {
transform :translate3d(45px, 45px, 59.7px) scale3d(0.31, 0.31, 0.31) rotate(45deg);
}
28% {
transform :translate3d(45px, 50px, 59.7px) scale3d(0.31, 0.31, 0.31);
}
32% {
transform :translate3d(45px, 45px, 59.7px) scale3d(0.31, 0.31, 0.31) rotate(45deg);
}
47% {
transform :translate3d(45px, 50px, 59.7px) scale3d(0.31, 0.31, 0.31);
}
52% {
transform :translate3d(45px, 45px, 59.7px) scale3d(0.31, 0.31, 0.31) rotate(45deg);
}
58% {
transform :translate3d(45px, 50px, 59.7px) scale3d(0.31, 0.31, 0.31);
}
64% {
transform :translate3d(45px, 45px, 59.7px) scale3d(0.31, 0.31, 0.31) rotate(45deg);
}
70% {
transform :translate3d(45px, 50px, 59.7px) scale3d(0.31, 0.31, 0.31);
}
84% {
transform :translate3d(45px, 45px, 59.7px) scale3d(0.31, 0.31, 0.31) rotate(45deg);
}
91% {
transform :translate3d(45px, 50px, 59.7px) scale3d(0.31, 0.31, 0.31);
}
100% {
transform :translate3d(48px, 45px, 59.7px) scale3d(0.31, 0.31, 0.31) rotate(45deg);
}
}
@-webkit-keyframes foot-anim {
0% {
-webkit-transform :translate3d(118px, 166px, 56px) rotate(90deg) rotateX(-90deg) scale3d(0.5, 0.5, 0.6) skew(0deg, 0deg);
}
100% {
-webkit-transform :translate3d(118px, 146px, 56px) rotate(90deg) rotateX(-90deg) scale3d(0.5, 0.5, 0.6) skew(0deg, 0deg);
}
}
@-moz-keyframes foot-anim {
0% {
-moz-transform :translate3d(118px, 166px, 56px) rotate(90deg) rotateX(-90deg) scale3d(0.5, 0.5, 0.6) skew(0deg, 0deg);
}
100% {
-moz-transform :translate3d(118px, 146px, 56px) rotate(90deg) rotateX(-90deg) scale3d(0.5, 0.5, 0.6) skew(0deg, 0deg);
}
}
@-o-keyframes foot-anim {
0% {
-o-transform :translate3d(118px, 166px, 56px) rotate(90deg) rotateX(-90deg) scale3d(0.5, 0.5, 0.6) skew(0deg, 0deg);
}
100% {
-o-transform :translate3d(118px, 146px, 56px) rotate(90deg) rotateX(-90deg) scale3d(0.5, 0.5, 0.6) skew(0deg, 0deg);
}
}
@-ms-keyframes foot-anim {
0% {
-ms-transform :translate3d(118px, 166px, 56px) rotate(90deg) rotateX(-90deg) scale3d(0.5, 0.5, 0.6) skew(0deg, 0deg);
}
100% {
-ms-transform :translate3d(118px, 146px, 56px) rotate(90deg) rotateX(-90deg) scale3d(0.5, 0.5, 0.6) skew(0deg, 0deg);
}
}
@keyframes foot-anim{
0% {
transform :translate3d(118px, 166px, 56px) rotate(90deg) rotateX(-90deg) scale3d(0.5, 0.5, 0.6) skew(0deg, 0deg);
}
100% {
transform :translate3d(118px, 146px, 56px) rotate(90deg) rotateX(-90deg) scale3d(0.5, 0.5, 0.6) skew(0deg, 0deg);
}
}
#outline {
-webkit-animation-name:outline;
-moz-animation-name:outline;
-o-animation-name:outline;
-ms-animation-name:outline;
animation-name:outline;
-webkit-animation-duration:8s;
-moz-animation-duration:8s;
-o-animation-duration:8s;
-ms-animation-duration:8s;
animation-duration:8s;
-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;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
transform-style:preserve-3d;
-webkit-animation-delay:0s;
-moz-animation-delay:0s;
-o-animation-delay:0s;
-ms-animation-delay:0s;
animation-delay:0s;
}
@-webkit-keyframes outline {
0% {
-webkit-transform :perspective(5000px) translate3d(270px, 35px, 686px) rotateX(83deg) rotateZ(27deg) scale3d(1.01, 1.01, 1.01);
}
20% {
-webkit-transform :perspective(5000px) translate3d(-88px, 63px, 1376px) rotateX(85deg) rotateZ(27deg) scale3d(1.01, 1.01, 1.01);
}
27% {
-webkit-transform :perspective(5000px) translate3d(-88px, 63px, 1376px) rotateX(84deg) rotateZ(-40deg) scale3d(1.01, 1.01, 1.01);
}
53% {
-webkit-transform :perspective(5000px) translate3d(195px, 90px, 1883px) rotateX(83deg) rotateZ(-40deg) scale3d(1.01, 1.01, 1.01);
}
60% {
-webkit-transform :perspective(5000px) translate3d(195px, 90px, 1883px) rotateX(74deg) rotateZ(35deg) scale3d(1.01, 1.01, 1.01);
}
91% {
-webkit-transform :perspective(5000px) translate3d(7px, 99px, 2557px) rotateX(80deg) rotateZ(36deg) scale3d(1.01, 1.01, 1.01);
}
100% {
-webkit-transform :perspective(5000px) translate3d(6px, 95px, 2544px) rotateX(83deg) rotateZ(-31deg) scale3d(1.01, 1.01, 1.01);
}
}
@-moz-keyframes outline {
0% {
-moz-transform :perspective(5000px) translate3d(270px, 35px, 686px) rotateX(83deg) rotateZ(27deg) scale3d(1.01, 1.01, 1.01);
}
20% {
-moz-transform :perspective(5000px) translate3d(-88px, 63px, 1376px) rotateX(85deg) rotateZ(27deg) scale3d(1.01, 1.01, 1.01);
}
27% {
-moz-transform :perspective(5000px) translate3d(-88px, 63px, 1376px) rotateX(84deg) rotateZ(-40deg) scale3d(1.01, 1.01, 1.01);
}
53% {
-moz-transform :perspective(5000px) translate3d(195px, 90px, 1883px) rotateX(83deg) rotateZ(-40deg) scale3d(1.01, 1.01, 1.01);
}
60% {
-moz-transform :perspective(5000px) translate3d(195px, 90px, 1883px) rotateX(74deg) rotateZ(35deg) scale3d(1.01, 1.01, 1.01);
}
91% {
-moz-transform :perspective(5000px) translate3d(7px, 99px, 2557px) rotateX(80deg) rotateZ(36deg) scale3d(1.01, 1.01, 1.01);
}
100% {
-moz-transform :perspective(5000px) translate3d(6px, 95px, 2544px) rotateX(83deg) rotateZ(-31deg) scale3d(1.01, 1.01, 1.01);
}
}
@-o-keyframes outline {
0% {
-o-transform :perspective(5000px) translate3d(270px, 35px, 686px) rotateX(83deg) rotateZ(27deg) scale3d(1.01, 1.01, 1.01);
}
20% {
-o-transform :perspective(5000px) translate3d(-88px, 63px, 1376px) rotateX(85deg) rotateZ(27deg) scale3d(1.01, 1.01, 1.01);
}
27% {
-o-transform :perspective(5000px) translate3d(-88px, 63px, 1376px) rotateX(84deg) rotateZ(-40deg) scale3d(1.01, 1.01, 1.01);
}
53% {
-o-transform :perspective(5000px) translate3d(195px, 90px, 1883px) rotateX(83deg) rotateZ(-40deg) scale3d(1.01, 1.01, 1.01);
}
60% {
-o-transform :perspective(5000px) translate3d(195px, 90px, 1883px) rotateX(74deg) rotateZ(35deg) scale3d(1.01, 1.01, 1.01);
}
91% {
-o-transform :perspective(5000px) translate3d(7px, 99px, 2557px) rotateX(80deg) rotateZ(36deg) scale3d(1.01, 1.01, 1.01);
}
100% {
-o-transform :perspective(5000px) translate3d(6px, 95px, 2544px) rotateX(83deg) rotateZ(-31deg) scale3d(1.01, 1.01, 1.01);
}
}
@-ms-keyframes outline {
0% {
-ms-transform :perspective(5000px) translate3d(270px, 35px, 686px) rotateX(83deg) rotateZ(27deg) scale3d(1.01, 1.01, 1.01);
}
20% {
-ms-transform :perspective(5000px) translate3d(-88px, 63px, 1376px) rotateX(85deg) rotateZ(27deg) scale3d(1.01, 1.01, 1.01);
}
27% {
-ms-transform :perspective(5000px) translate3d(-88px, 63px, 1376px) rotateX(84deg) rotateZ(-40deg) scale3d(1.01, 1.01, 1.01);
}
53% {
-ms-transform :perspective(5000px) translate3d(195px, 90px, 1883px) rotateX(83deg) rotateZ(-40deg) scale3d(1.01, 1.01, 1.01);
}
60% {
-ms-transform :perspective(5000px) translate3d(195px, 90px, 1883px) rotateX(74deg) rotateZ(35deg) scale3d(1.01, 1.01, 1.01);
}
91% {
-ms-transform :perspective(5000px) translate3d(7px, 99px, 2557px) rotateX(80deg) rotateZ(36deg) scale3d(1.01, 1.01, 1.01);
}
100% {
-ms-transform :perspective(5000px) translate3d(6px, 95px, 2544px) rotateX(83deg) rotateZ(-31deg) scale3d(1.01, 1.01, 1.01);
}
}
@keyframes outline{
0% {
transform :perspective(5000px) translate3d(270px, 35px, 686px) rotateX(83deg) rotateZ(27deg) scale3d(1.01, 1.01, 1.01);
}
20% {
transform :perspective(5000px) translate3d(-88px, 63px, 1376px) rotateX(85deg) rotateZ(27deg) scale3d(1.01, 1.01, 1.01);
}
27% {
transform :perspective(5000px) translate3d(-88px, 63px, 1376px) rotateX(84deg) rotateZ(-40deg) scale3d(1.01, 1.01, 1.01);
}
53% {
transform :perspective(5000px) translate3d(195px, 90px, 1883px) rotateX(83deg) rotateZ(-40deg) scale3d(1.01, 1.01, 1.01);
}
60% {
transform :perspective(5000px) translate3d(195px, 90px, 1883px) rotateX(74deg) rotateZ(35deg) scale3d(1.01, 1.01, 1.01);
}
91% {
transform :perspective(5000px) translate3d(7px, 99px, 2557px) rotateX(80deg) rotateZ(36deg) scale3d(1.01, 1.01, 1.01);
}
100% {
transform :perspective(5000px) translate3d(6px, 95px, 2544px) rotateX(83deg) rotateZ(-31deg) scale3d(1.01, 1.01, 1.01);
}
}
Also see: Tab Triggers