/*
Icon set
============================================
######Shopware Icon set elements

Accessable with the `i` element and the `icon--` class.

Example: `<i class="icon--cart"></i>`

```
<table style="width: 80%;margin: 20px auto;text-align: center;">
    <tbody>
        <tr>
            <td><i class="icon--percent2"></i><br/>
                icon--percent2
            </td>

            <td><i class="icon--percent"></i><br/>
                icon--percent
            </td>

            <td><i class="icon--coupon"></i><br/>
                icon--coupon
            </td>

            <td><i class="icon--truck"></i><br/>
                icon--truck
            </td>

            <td><i class="icon--logout"></i><br/>
                icon--logout
            </td>

            <td><i class="icon--grid"></i><br/>
                icon--grid
            </td>

            <td><i class="icon--filter"></i><br/>
                icon--filter
            </td>

        </tr>
        <tr>
            <td><i class="icon--clock"></i><br/>
                icon--clock
            </td>

            <td><i class="icon--arrow-up"></i><br/>
                icon--arrow-up
            </td>

            <td><i class="icon--arrow-right"></i><br/>
                icon--arrow-right
            </td>

            <td><i class="icon--arrow-left"></i><br/>
                icon--arrow-left
            </td>

            <td><i class="icon--arrow-down"></i><br/>
                icon--arrow-down
            </td>

            <td><i class="icon--star"></i><br/>
                icon--star
            </td>

            <td><i class="icon--star-half"></i><br/>
                icon--star-half
            </td>
        </tr>

        <tr>
            <td><i class="icon--star-empty"></i><br/>
                icon--star-empty
            </td>

            <td><i class="icon--shopware"></i><br/>
                icon--shopware
            </td>

            <td><i class="icon--service"></i><br/>
                icon--service
            </td>

            <td><i class="icon--search"></i><br/>
                icon--search
            </td>

            <td><i class="icon--numbered-list"></i><br/>
                icon--numbered-list
            </td>

            <td><i class="icon--menu"></i><br/>
                icon--menu
            </td>

            <td><i class="icon--mail"></i><br/>
                icon--mail
            </td>
        </tr>

        <tr>
            <td><i class="icon--list"></i><br/>
                icon--list
            </td>

            <td><i class="icon--layout"></i><br/>
                icon--layout
            </td>

            <td><i class="icon--heart"></i><br/>
                icon--heart
            </td>

            <td><i class="icon--cross"></i><br/>
                icon--cross
            </td>

            <td><i class="icon--compare"></i><br/>
                icon--compare
            </td>

            <td><i class="icon--check"></i><br/>
                icon--check
            </td>

            <td><i class="icon--basket"></i><br/>
                icon--basket
            </td>
        </tr>

        <tr>
            <td><i class="icon--account"></i><br/>
                icon--account
            </td>

            <td><i class="icon--chain"></i><br/>
                icon--chain
            </td>

            <td><i class="icon--delicious"></i><br/>
                icon--delicious
            </td>

            <td><i class="icon--delicious2"></i><br/>
                icon--delicious2
            </td>

            <td><i class="icon--digg"></i><br/>
                icon--digg
            </td>

            <td><i class="icon--phone"></i><br/>
                icon--phone
            </td>

            <td><i class="icon--mobile"></i><br/>
                icon--mobile
            </td>
        </tr>

        <tr>
            <td><i class="icon--mouse"></i><br/>
                icon--mouse
            </td>

            <td><i class="icon--directions"></i><br/>
                icon--directions
            </td>

            <td><i class="icon--paperplane"></i><br/>
                icon--paperplane
            </td>

            <td><i class="icon--pencil"></i><br/>
                icon--pencil
            </td>

            <td><i class="icon--feather"></i><br/>
                icon--feather
            </td>

            <td><i class="icon--paperclip"></i><br/>
                icon--paperclip
            </td>

            <td><i class="icon--drawer"></i><br/>
                icon--drawer
            </td>
        </tr>

        <tr>
            <td><i class="icon--reply"></i><br/>
                icon--reply
            </td>

            <td><i class="icon--reply-all"></i><br/>
                icon--reply-all
            </td>

            <td><i class="icon--forward"></i><br/>
                icon--forward
            </td>

            <td><i class="icon--users"></i><br/>
                icon--users
            </td>

            <td><i class="icon--user-add"></i><br/>
                icon--user-add
            </td>

            <td><i class="icon--vcard"></i><br/>
                icon--vcard
            </td>

            <td><i class="icon--export"></i><br/>
                icon--export
            </td>
        </tr>

        <tr>
            <td><i class="icon--location"></i><br/>
                icon--location
            </td>

            <td><i class="icon--map"></i><br/>
                icon--map
            </td>

            <td><i class="icon--compass"></i><br/>
                icon--compass
            </td>

            <td><i class="icon--location2"></i><br/>
                icon--location2
            </td>

            <td><i class="icon--target"></i><br/>
                icon--target
            </td>

            <td><i class="icon--share"></i><br/>
                icon--share
            </td>

            <td><i class="icon--sharable"></i><br/>
                icon--sharable
            </td>
        </tr>

        <tr>
            <td><i class="icon--thumbsup"></i><br/>
                icon--thumbsup
            </td>

            <td><i class="icon--thumbsdown"></i><br/>
                icon--thumbsdown
            </td>

            <td><i class="icon--chat"></i><br/>
                icon--chat
            </td>

            <td><i class="icon--comment"></i><br/>
                icon--comment
            </td>

            <td><i class="icon--quote"></i><br/>
                icon--quote
            </td>

            <td><i class="icon--house"></i><br/>
                icon--house
            </td>

            <td><i class="icon--popup"></i><br/>
                icon--popup
            </td>
        </tr>

        <tr>
            <td><i class="icon--flashlight"></i><br/>
                icon--flashlight
            </td>

            <td><i class="icon--printer"></i><br/>
                icon--printer
            </td>

            <td><i class="icon--bell"></i><br/>
                icon--bell
            </td>

            <td><i class="icon--link"></i><br/>
                icon--link
            </td>

            <td><i class="icon--cog"></i><br/>
                icon--cog
            </td>

            <td><i class="icon--tools"></i><br/>
                icon--tools
            </td>

            <td><i class="icon--trophy"></i><br/>
                icon--trophy
            </td>
        </tr>

        <tr>
            <td><i class="icon--tag"></i><br/>
                icon--tag
            </td>

            <td><i class="icon--camera"></i><br/>
                icon--camera
            </td>

            <td><i class="icon--megaphone"></i><br/>
                icon--megaphone
            </td>

            <td><i class="icon--moon"></i><br/>
                icon--moon
            </td>

            <td><i class="icon--palette"></i><br/>
                icon--palette
            </td>

            <td><i class="icon--leaf"></i><br/>
                icon--leaf
            </td>

            <td><i class="icon--music"></i><br/>
                icon--music
            </td>
        </tr>

        <tr>
            <td><i class="icon--music2"></i><br/>
                icon--music2
            </td>

            <td><i class="icon--new"></i><br/>
                icon--new
            </td>

            <td><i class="icon--graduation"></i><br/>
                icon--graduation
            </td>

            <td><i class="icon--book"></i><br/>
                icon--book
            </td>

            <td><i class="icon--newspaper"></i><br/>
                icon--newspaper
            </td>

            <td><i class="icon--bag"></i><br/>
                icon--bag
            </td>

            <td><i class="icon--airplane"></i><br/>
                icon--airplane
            </td>
        </tr>

        <tr>
            <td><i class="icon--lifebuoy"></i><br/>
                icon--lifebuoy
            </td>

            <td><i class="icon--eye"></i><br/>
                icon--eye
            </td>

            <td><i class="icon--clock2"></i><br/>
                icon--clock2
            </td>

            <td><i class="icon--microphone"></i><br/>
                icon--microphone
            </td>

            <td><i class="icon--calendar"></i><br/>
                icon--calendar
            </td>

            <td><i class="icon--bolt"></i><br/>
                icon--bolt
            </td>

            <td><i class="icon--thunder"></i><br/>
                icon--thunder
            </td>
        </tr>

        <tr>
            <td><i class="icon--droplet"></i><br/>
                icon--droplet
            </td>

            <td><i class="icon--cd"></i><br/>
                icon--cd
            </td>

            <td><i class="icon--briefcase"></i><br/>
                icon--briefcase
            </td>

            <td><i class="icon--air"></i><br/>
                icon--air
            </td>

            <td><i class="icon--hourglass"></i><br/>
                icon--hourglass
            </td>

            <td><i class="icon--gauge"></i><br/>
                icon--gauge
            </td>

            <td><i class="icon--language"></i><br/>
                icon--language
            </td>
        </tr>

        <tr>
            <td><i class="icon--network"></i><br/>
                icon--network
            </td>

            <td><i class="icon--key"></i><br/>
                icon--key
            </td>

            <td><i class="icon--battery"></i><br/>
                icon--battery
            </td>

            <td><i class="icon--bucket"></i><br/>
                icon--bucket
            </td>

            <td><i class="icon--magnet"></i><br/>
                icon--magnet
            </td>

            <td><i class="icon--drive"></i><br/>
                icon--drive
            </td>

            <td><i class="icon--cup"></i><br/>
                icon--cup
            </td>
        </tr>

        <tr>
            <td><i class="icon--rocket"></i><br/>
                icon--rocket
            </td>

            <td><i class="icon--brush"></i><br/>
                icon--brush
            </td>

            <td><i class="icon--suitcase"></i><br/>
                icon--suitcase
            </td>

            <td><i class="icon--cone"></i><br/>
                icon--cone
            </td>

            <td><i class="icon--earth"></i><br/>
                icon--earth
            </td>

            <td><i class="icon--keyboard"></i><br/>
                icon--keyboard
            </td>

            <td><i class="icon--browser"></i><br/>
                icon--browser
            </td>
        </tr>

        <tr>
            <td><i class="icon--publish"></i><br/>
                icon--publish
            </td>

            <td><i class="icon--progress-3"></i><br/>
                icon--progress-3
            </td>

            <td><i class="icon--progress-2"></i><br/>
                icon--progress-2
            </td>

            <td><i class="icon--progress-1"></i><br/>
                icon--progress-1
            </td>

            <td><i class="icon--progress-0"></i><br/>
                icon--progress-0
            </td>

            <td><i class="icon--sun"></i><br/>
                icon--sun
            </td>

            <td><i class="icon--sun2"></i><br/>
                icon--sun2
            </td>
        </tr>

        <tr>
            <td><i class="icon--adjust"></i><br/>
                icon--adjust
            </td>

            <td><i class="icon--code"></i><br/>
                icon--code
            </td>

            <td><i class="icon--screen"></i><br/>
                icon--screen
            </td>

            <td><i class="icon--infinity"></i><br/>
                icon--infinity
            </td>

            <td><i class="icon--light-bulb"></i><br/>
                icon--light-bulb
            </td>

            <td><i class="icon--creditcard"></i><br/>
                icon--creditcard
            </td>

            <td><i class="icon--database"></i><br/>
                icon--database
            </td>
        </tr>

        <tr>
            <td><i class="icon--voicemail"></i><br/>
                icon--voicemail
            </td>

            <td><i class="icon--clipboard"></i><br/>
                icon--clipboard
            </td>

            <td><i class="icon--box"></i><br/>
                icon--box
            </td>

            <td><i class="icon--ticket"></i><br/>
                icon--ticket
            </td>

            <td><i class="icon--rss"></i><br/>
                icon--rss
            </td>

            <td><i class="icon--signal"></i><br/>
                icon--signal
            </td>

            <td><i class="icon--thermometer"></i><br/>
                icon--thermometer
            </td>
        </tr>

        <tr>
            <td><i class="icon--droplets"></i><br/>
                icon--droplets
            </td>

            <td><i class="icon--uniE680"></i><br/>
                icon--uniE680
            </td>

            <td><i class="icon--statistics"></i><br/>
                icon--statistics
            </td>

            <td><i class="icon--pie"></i><br/>
                icon--pie
            </td>

            <td><i class="icon--bars"></i><br/>
                icon--bars
            </td>

            <td><i class="icon--graph"></i><br/>
                icon--graph
            </td>

            <td><i class="icon--lock"></i><br/>
                icon--lock
            </td>
        </tr>

        <tr>
            <td><i class="icon--lock-open"></i><br/>
                icon--lock-open
            </td>

            <td><i class="icon--login"></i><br/>
                icon--login
            </td>

            <td><i class="icon--minus"></i><br/>
                icon--minus
            </td>

            <td><i class="icon--plus"></i><br/>
                icon--plus
            </td>

            <td><i class="icon--cross2"></i><br/>
                icon--cross2
            </td>

            <td><i class="icon--minus2"></i><br/>
                icon--minus2
            </td>

            <td><i class="icon--cross3"></i><br/>
                icon--cross3
            </td>
        </tr>

        <tr>
            <td><i class="icon--minus3"></i><br/>
                icon--minus3
            </td>

            <td><i class="icon--plus3"></i><br/>
                icon--plus3
            </td>

            <td><i class="icon--erase"></i><br/>
                icon--erase
            </td>

            <td><i class="icon--blocked"></i><br/>
                icon--blocked
            </td>

            <td><i class="icon--info"></i><br/>
                icon--info
            </td>

            <td><i class="icon--info2"></i><br/>
                icon--info2
            </td>

            <td><i class="icon--question"></i><br/>
                icon--question
            </td>
        </tr>

        <tr>
            <td><i class="icon--help"></i><br/>
                icon--help
            </td>

            <td><i class="icon--warning"></i><br/>
                icon--warning
            </td>

            <td><i class="icon--cycle"></i><br/>
                icon--cycle
            </td>

            <td><i class="icon--cw"></i><br/>
                icon--cw
            </td>

            <td><i class="icon--ccw"></i><br/>
                icon--ccw
            </td>

            <td><i class="icon--shuffle"></i><br/>
                icon--shuffle
            </td>

            <td><i class="icon--arrow"></i><br/>
                icon--arrow
            </td>
        </tr>

        <tr>
            <td><i class="icon--arrow2"></i><br/>
                icon--arrow2
            </td>

            <td><i class="icon--retweet"></i><br/>
                icon--retweet
            </td>

            <td><i class="icon--loop"></i><br/>
                icon--loop
            </td>

            <td><i class="icon--history"></i><br/>
                icon--history
            </td>

            <td><i class="icon--back"></i><br/>
                icon--back
            </td>

            <td><i class="icon--list2"></i><br/>
                icon--list2
            </td>

            <td><i class="icon--add-to-list"></i><br/>
                icon--add-to-list
            </td>
        </tr>

        <tr>
            <td><i class="icon--layout2"></i><br/>
                icon--layout2
            </td>

            <td><i class="icon--list3"></i><br/>
                icon--list3
            </td>

            <td><i class="icon--text"></i><br/>
                icon--text
            </td>

            <td><i class="icon--text2"></i><br/>
                icon--text2
            </td>

            <td><i class="icon--document"></i><br/>
                icon--document
            </td>

            <td><i class="icon--docs"></i><br/>
                icon--docs
            </td>

            <td><i class="icon--landscape"></i><br/>
                icon--landscape
            </td>
        </tr>

        <tr>
            <td><i class="icon--pictures"></i><br/>
                icon--pictures
            </td>

            <td><i class="icon--video"></i><br/>
                icon--video
            </td>

            <td><i class="icon--music3"></i><br/>
                icon--music3
            </td>

            <td><i class="icon--folder"></i><br/>
                icon--folder
            </td>

            <td><i class="icon--archive"></i><br/>
                icon--archive
            </td>

            <td><i class="icon--trash"></i><br/>
                icon--trash
            </td>

            <td><i class="icon--upload"></i><br/>
                icon--upload
            </td>
        </tr>

        <tr>
            <td><i class="icon--download"></i><br/>
                icon--download
            </td>

            <td><i class="icon--disk"></i><br/>
                icon--disk
            </td>

            <td><i class="icon--install"></i><br/>
                icon--install
            </td>

            <td><i class="icon--cloud"></i><br/>
                icon--cloud
            </td>

            <td><i class="icon--upload2"></i><br/>
                icon--upload2
            </td>

            <td><i class="icon--bookmark"></i><br/>
                icon--bookmark
            </td>

            <td><i class="icon--bookmarks"></i><br/>
                icon--bookmarks
            </td>
        </tr>

        <tr>
            <td><i class="icon--book2"></i><br/>
                icon--book2
            </td>

            <td><i class="icon--play"></i><br/>
                icon--play
            </td>

            <td><i class="icon--pause"></i><br/>
                icon--pause
            </td>

            <td><i class="icon--record"></i><br/>
                icon--record
            </td>

            <td><i class="icon--stop"></i><br/>
                icon--stop
            </td>

            <td><i class="icon--next"></i><br/>
                icon--next
            </td>

            <td><i class="icon--previous"></i><br/>
                icon--previous
            </td>
        </tr>

        <tr>
            <td><i class="icon--first"></i><br/>
                icon--first
            </td>

            <td><i class="icon--last"></i><br/>
                icon--last
            </td>

            <td><i class="icon--resize-enlarge"></i><br/>
                icon--resize-enlarge
            </td>

            <td><i class="icon--resize-shrink"></i><br/>
                icon--resize-shrink
            </td>

            <td><i class="icon--volume"></i><br/>
                icon--volume
            </td>

            <td><i class="icon--sound"></i><br/>
                icon--sound
            </td>

            <td><i class="icon--mute"></i><br/>
                icon--mute
            </td>
        </tr>


        <tr>
            <td><i class="icon--flow-cascade"></i><br/>
                icon--flow-cascade
            </td>

            <td><i class="icon--flow-branch"></i><br/>
                icon--flow-branch
            </td>

            <td><i class="icon--flow-tree"></i><br/>
                icon--flow-tree
            </td>

            <td><i class="icon--flow-line"></i><br/>
                icon--flow-line
            </td>

            <td><i class="icon--flow-parallel"></i><br/>
                icon--flow-parallel
            </td>

            <td><i class="icon--arrow-left2"></i><br/>
                icon--arrow-left2
            </td>

            <td><i class="icon--arrow-down2"></i><br/>
                icon--arrow-down2
            </td>
        </tr>

        <tr>
            <td><i class="icon--arrow-up-upload"></i><br/>
                icon--arrow-up-upload
            </td>

            <td><i class="icon--arrow-right2"></i><br/>
                icon--arrow-right2
            </td>

            <td><i class="icon--arrow-left3"></i><br/>
                icon--arrow-left3
            </td>

            <td><i class="icon--arrow-down3"></i><br/>
                icon--arrow-down3
            </td>

            <td><i class="icon--arrow-up2"></i><br/>
                icon--arrow-up2
            </td>

            <td><i class="icon--arrow-right3"></i><br/>
                icon--arrow-right3
            </td>

            <td><i class="icon--arrow-left4"></i><br/>
                icon--arrow-left4
            </td>
        </tr>

        <tr>
            <td><i class="icon--arrow-down4"></i><br/>
                icon--arrow-down4
            </td>

            <td><i class="icon--arrow-up3"></i><br/>
                icon--arrow-up3
            </td>

            <td><i class="icon--arrow-right4"></i><br/>
                icon--arrow-right4
            </td>

            <td><i class="icon--arrow-left5"></i><br/>
                icon--arrow-left5
            </td>

            <td><i class="icon--arrow-down5"></i><br/>
                icon--arrow-down5
            </td>

            <td><i class="icon--arrow-up4"></i><br/>
                icon--arrow-up4
            </td>

            <td><i class="icon--arrow-right5"></i><br/>
                icon--arrow-right5
            </td>
        </tr>

        <tr>
            <td><i class="icon--arrow-left6"></i><br/>
                icon--arrow-left6
            </td>

            <td><i class="icon--arrow-down6"></i><br/>
                icon--arrow-down6
            </td>

            <td><i class="icon--arrow-up5"></i><br/>
                icon--arrow-up5
            </td>

            <td><i class="icon--arrow-right6"></i><br/>
                icon--arrow-right6
            </td>

            <td><i class="icon--menu2"></i><br/>
                icon--menu2
            </td>

            <td><i class="icon--ellipsis"></i><br/>
                icon--ellipsis
            </td>

            <td><i class="icon--dots"></i><br/>
                icon--dots
            </td>
        </tr>

        <tr>
            <td><i class="icon--dot"></i><br/>
                icon--dot
            </td>

            <td><i class="icon--cc"></i><br/>
                icon--cc
            </td>

            <td><i class="icon--cc-by"></i><br/>
                icon--cc-by
            </td>

            <td><i class="icon--cc-nc"></i><br/>
                icon--cc-nc
            </td>

            <td><i class="icon--cc-sa"></i><br/>
                icon--cc-sa
            </td>

            <td><i class="icon--cc-nd"></i><br/>
                icon--cc-nd
            </td>

            <td><i class="icon--cc-pd"></i><br/>
                icon--cc-pd
            </td>
        </tr>

        <tr>
            <td><i class="icon--cc-zero"></i><br/>
                icon--cc-zero
            </td>

            <td><i class="icon--cc-share"></i><br/>
                icon--cc-share
            </td>

            <td><i class="icon--cc-share2"></i><br/>
                icon--cc-share2
            </td>

            <td><i class="icon--danielbruce"></i><br/>
                icon--danielbruce
            </td>

            <td><i class="icon--danielbruce2"></i><br/>
                icon--danielbruce2
            </td>

            <td><i class="icon--github"></i><br/>
                icon--github
            </td>

            <td><i class="icon--github2"></i><br/>
                icon--github2
            </td>
        </tr>

        <tr>
            <td><i class="icon--flickr"></i><br/>
                icon--flickr
            </td>

            <td><i class="icon--flickr2"></i><br/>
                icon--flickr2
            </td>

            <td><i class="icon--vimeo"></i><br/>
                icon--vimeo
            </td>

            <td><i class="icon--vimeo2"></i><br/>
                icon--vimeo2
            </td>

            <td><i class="icon--twitter"></i><br/>
                icon--twitter
            </td>

            <td><i class="icon--twitter2"></i><br/>
                icon--twitter2
            </td>

            <td><i class="icon--facebook"></i><br/>
                icon--facebook
            </td>
        </tr>

        <tr>
            <td><i class="icon--facebook2"></i><br/>
                icon--facebook2
            </td>

            <td><i class="icon--facebook3"></i><br/>
                icon--facebook3
            </td>

            <td><i class="icon--googleplus"></i><br/>
                icon--googleplus
            </td>

            <td><i class="icon--googleplus2"></i><br/>
                icon--googleplus2
            </td>

            <td><i class="icon--pinterest"></i><br/>
                icon--pinterest
            </td>

            <td><i class="icon--pinterest2"></i><br/>
                icon--pinterest2
            </td>

            <td><i class="icon--tumblr"></i><br/>
                icon--tumblr
            </td>
        </tr>

        <tr>
            <td><i class="icon--tumblr2"></i><br/>
                icon--tumblr2
            </td>

            <td><i class="icon--linkedin"></i><br/>
                icon--linkedin
            </td>

            <td><i class="icon--linkedin2"></i><br/>
                icon--linkedin2
            </td>

            <td><i class="icon--dribbble"></i><br/>
                icon--dribbble
            </td>

            <td><i class="icon--dribbble2"></i><br/>
                icon--dribbble2
            </td>

            <td><i class="icon--stumbleupon"></i><br/>
                icon--stumbleupon
            </td>

            <td><i class="icon--stumbleupon2"></i><br/>
                icon--stumbleupon2
            </td>
        </tr>

        <tr>
            <td><i class="icon--lastfm"></i><br/>
                icon--lastfm
            </td>

            <td><i class="icon--lastfm2"></i><br/>
                icon--lastfm2
            </td>

            <td><i class="icon--rdio"></i><br/>
                icon--rdio
            </td>

            <td><i class="icon--rdio2"></i><br/>
                icon--rdio2
            </td>

            <td><i class="icon--spotify"></i><br/>
                icon--spotify
            </td>

            <td><i class="icon--spotify2"></i><br/>
                icon--spotify2
            </td>

            <td><i class="icon--qq"></i><br/>
                icon--qq
            </td>
        </tr>

        <tr>
            <td><i class="icon--instagram3"></i><br/>
                icon--instagram3
            </td>

            <td><i class="icon--dropbox"></i><br/>
                icon--dropbox
            </td>

            <td><i class="icon--evernote"></i><br/>
                icon--evernote
            </td>

            <td><i class="icon--flattr"></i><br/>
                icon--flattr
            </td>

            <td><i class="icon--skype"></i><br/>
                icon--skype
            </td>

            <td><i class="icon--skype2"></i><br/>
                icon--skype2
            </td>

            <td><i class="icon--renren"></i><br/>
                icon--renren
            </td>
        </tr>

        <tr>
            <td><i class="icon--sina-weibo"></i><br/>
                icon--sina-weibo
            </td>

            <td><i class="icon--paypal"></i><br/>
                icon--paypal
            </td>

            <td><i class="icon--picasa"></i><br/>
                icon--picasa
            </td>

            <td><i class="icon--soundcloud"></i><br/>
                icon--soundcloud
            </td>

            <td><i class="icon--mixi"></i><br/>
                icon--mixi
            </td>

            <td><i class="icon--behance"></i><br/>
                icon--behance
            </td>

            <td><i class="icon--circles"></i><br/>
                icon--circles
            </td>
        </tr>

        <tr>
            <td><i class="icon--vk"></i><br/>
                icon--vk
            </td>

            <td><i class="icon--smashing"></i><br/>
                icon--smashing
            </td>

            <td><i class="icon--feed"></i><br/>
                icon--feed
            </td>

            <td><i class="icon--feed2"></i><br/>
                icon--feed2
            </td>

            <td><i class="icon--instagram"></i><br/>
                icon--instagram
            </td>

            <td><i class="icon--instagram2"></i><br/>
                icon--instagram2
            </td>

            <td><i class="icon--xing"></i><br/>
                icon--xing
            </td>
        </tr>

        <tr>
            <td><i class="icon--xing2"></i><br/>
                icon--xing2
            </td>

            <td><i class="icon--youtube"></i><br/>
                icon--youtube
            </td>

            <td><i class="icon--youtube2"></i><br/>
                icon--youtube2
            </td>
        </tr>
    </tbody>
</table>
```
*/

@font-face {
    @hash-shopware-woff-2: swhash('@{font-directory}/shopware.woff2');
    @hash-shopware-woff: swhash('@{font-directory}/shopware.woff');
    @hash-shopware-ttf: swhash('@{font-directory}/shopware.ttf');
    @hash-shopware-svg: swhash('@{font-directory}/shopware.svg');

    font-family: @sw-icon-fontname;
    font-display: block;
    src:url('@{font-directory}/shopware.woff2?@{hash-shopware-woff-2}') format('woff2'),
        url('@{font-directory}/shopware.woff?@{hash-shopware-woff}') format('woff'),
        url('@{font-directory}/shopware.ttf?@{hash-shopware-ttf}') format('truetype'),
        url('@{font-directory}/shopware.svg?@{hash-shopware-svg}') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon--"], [class*=" icon--"] {
    font-family: @sw-icon-fontname;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon--percent2:before {
    content: @sw-icon-percent2;
}
.icon--percent:before {
    content: @sw-icon-percent;
}
.icon--coupon:before {
    content: @sw-icon-coupon;
}
.icon--truck:before {
    content: @sw-icon-truck;
}
.icon--logout:before {
    content: @sw-icon-logout;
}
.icon--grid:before {
    content: @sw-icon-grid;
}
.icon--filter:before {
    content: @sw-icon-filter;
}
.icon--clock:before {
    content: @sw-icon-clock;
}
.icon--arrow-up:before {
    content: @sw-icon-arrow-up;
}
.icon--arrow-right:before {
    content: @sw-icon-arrow-right;
}
.icon--arrow-left:before {
    content: @sw-icon-arrow-left;
}
.icon--arrow-down:before {
    content: @sw-icon-arrow-down;
}
.icon--star:before {
    content: @sw-icon-star;
}
.icon--star-half:before {
    content: @sw-icon-star-half;
}
.icon--star-empty:before {
    content: @sw-icon-star-empty;
}
.icon--shopware:before {
    content: @sw-icon-shopware;
}
.icon--service:before {
    content: @sw-icon-service;
}
.icon--search:before {
    content: @sw-icon-search;
}
.icon--numbered-list:before {
    content: @sw-icon-numbered-list;
}
.icon--menu:before {
    content: @sw-icon-menu;
}
.icon--mail:before {
    content: @sw-icon-mail;
}
.icon--list:before {
    content: @sw-icon-list;
}
.icon--layout:before {
    content: @sw-icon-layout;
}
.icon--heart:before {
    content: @sw-icon-heart;
}
.icon--cross:before {
    content: @sw-icon-cross;
}
.icon--compare:before {
    content: @sw-icon-compare;
}
.icon--check:before {
    content: @sw-icon-check;
}
.icon--basket:before {
    content: @sw-icon-basket;
}
.icon--account:before {
    content: @sw-icon-account;
}
.icon--chain:before {
    content: @sw-icon-chain;
}
.icon--delicious:before {
    content: @sw-icon-delicious;
}
.icon--delicious2:before {
    content: @sw-icon-delicious2;
}
.icon--digg:before {
    content: @sw-icon-digg;
}
.icon--phone:before {
    content: @sw-icon-phone;
}
.icon--mobile:before {
    content: @sw-icon-mobile;
}
.icon--mouse:before {
    content: @sw-icon-mouse;
}
.icon--directions:before {
    content: @sw-icon-directions;
}
.icon--paperplane:before {
    content: @sw-icon-paperplane;
}
.icon--pencil:before {
    content: @sw-icon-pencil;
}
.icon--feather:before {
    content: @sw-icon-feather;
}
.icon--paperclip:before {
    content: @sw-icon-paperclip;
}
.icon--drawer:before {
    content: @sw-icon-drawer;
}
.icon--reply:before {
    content: @sw-icon-reply;
}
.icon--reply-all:before {
    content: @sw-icon-reply-all;
}
.icon--forward:before {
    content: @sw-icon-forward;
}
.icon--users:before {
    content: @sw-icon-users;
}
.icon--user-add:before {
    content: @sw-icon-user-add;
}
.icon--vcard:before {
    content: @sw-icon-vcard;
}
.icon--export:before {
    content: @sw-icon-export;
}
.icon--location:before {
    content: @sw-icon-location;
}
.icon--map:before {
    content: @sw-icon-map;
}
.icon--compass:before {
    content: @sw-icon-compass;
}
.icon--location2:before {
    content: @sw-icon-location2;
}
.icon--target:before {
    content: @sw-icon-target;
}
.icon--share:before {
    content: @sw-icon-share;
}
.icon--sharable:before {
    content: @sw-icon-sharable;
}
.icon--thumbsup:before {
    content: @sw-icon-thumbsup;
}
.icon--thumbsdown:before {
    content: @sw-icon-thumbsdown;
}
.icon--chat:before {
    content: @sw-icon-chat;
}
.icon--comment:before {
    content: @sw-icon-comment;
}
.icon--quote:before {
    content: @sw-icon-quote;
}
.icon--house:before {
    content: @sw-icon-house;
}
.icon--popup:before {
    content: @sw-icon-popup;
}
.icon--flashlight:before {
    content: @sw-icon-flashlight;
}
.icon--printer:before {
    content: @sw-icon-printer;
}
.icon--bell:before {
    content: @sw-icon-bell;
}
.icon--link:before {
    content: @sw-icon-link;
}
.icon--flag:before {
    content: @sw-icon-flag;
}
.icon--cog:before {
    content: @sw-icon-cog;
}
.icon--tools:before {
    content: @sw-icon-tools;
}
.icon--trophy:before {
    content: @sw-icon-trophy;
}
.icon--tag:before {
    content: @sw-icon-tag;
}
.icon--camera:before {
    content: @sw-icon-camera;
}
.icon--megaphone:before {
    content: @sw-icon-megaphone;
}
.icon--moon:before {
    content: @sw-icon-moon;
}
.icon--palette:before {
    content: @sw-icon-palette;
}
.icon--leaf:before {
    content: @sw-icon-leaf;
}
.icon--music:before {
    content: @sw-icon-music;
}
.icon--music2:before {
    content: @sw-icon-music2;
}
.icon--new:before {
    content: @sw-icon-new;
}
.icon--graduation:before {
    content: @sw-icon-graduation;
}
.icon--book:before {
    content: @sw-icon-book;
}
.icon--newspaper:before {
    content: @sw-icon-newspaper;
}
.icon--bag:before {
    content: @sw-icon-bag;
}
.icon--airplane:before {
    content: @sw-icon-airplane;
}
.icon--lifebuoy:before {
    content: @sw-icon-lifebuoy;
}
.icon--eye:before {
    content: @sw-icon-eye;
}
.icon--clock2:before {
    content: @sw-icon-clock2;
}
.icon--microphone:before {
    content: @sw-icon-microphone;
}
.icon--calendar:before {
    content: @sw-icon-calendar;
}
.icon--bolt:before {
    content: @sw-icon-bolt;
}
.icon--thunder:before {
    content: @sw-icon-thunder;
}
.icon--droplet:before {
    content: @sw-icon-droplet;
}
.icon--cd:before {
    content: @sw-icon-cd;
}
.icon--briefcase:before {
    content: @sw-icon-briefcase;
}
.icon--air:before {
    content: @sw-icon-air;
}
.icon--hourglass:before {
    content: @sw-icon-hourglass;
}
.icon--gauge:before {
    content: @sw-icon-gauge;
}
.icon--language:before {
    content: @sw-icon-language;
}
.icon--network:before {
    content: @sw-icon-network;
}
.icon--key:before {
    content: @sw-icon-key;
}
.icon--battery:before {
    content: @sw-icon-battery;
}
.icon--bucket:before {
    content: @sw-icon-bucket;
}
.icon--magnet:before {
    content: @sw-icon-magnet;
}
.icon--drive:before {
    content: @sw-icon-drive;
}
.icon--cup:before {
    content: @sw-icon-cup;
}
.icon--rocket:before {
    content: @sw-icon-rocket;
}
.icon--brush:before {
    content: @sw-icon-brush;
}
.icon--suitcase:before {
    content: @sw-icon-suitcase;
}
.icon--cone:before {
    content: @sw-icon-cone;
}
.icon--earth:before {
    content: @sw-icon-earth;
}
.icon--keyboard:before {
    content: @sw-icon-keyboard;
}
.icon--browser:before {
    content: @sw-icon-browser;
}
.icon--publish:before {
    content: @sw-icon-publish;
}
.icon--progress-3:before {
    content: @sw-icon-progress-3;
}
.icon--progress-2:before {
    content: @sw-icon-progress-2;
}
.icon--progress-1:before {
    content: @sw-icon-progress-1;
}
/*
    for backwards-compatibility
    @deprecated
*/
.icon--brogress-1:before {
    content: @sw-icon-progress-1;
}
.icon--progress-0:before {
    content: @sw-icon-progress-0;
}
.icon--sun:before {
    content: @sw-icon-sun;
}
.icon--sun2:before {
    content: @sw-icon-sun2;
}
.icon--adjust:before {
    content: @sw-icon-adjust;
}
.icon--code:before {
    content: @sw-icon-code;
}
.icon--screen:before {
    content: @sw-icon-screen;
}
.icon--infinity:before {
    content: @sw-icon-infinity;
}
.icon--light-bulb:before {
    content: @sw-icon-light-bulb;
}
.icon--creditcard:before {
    content: @sw-icon-creditcard;
}
.icon--database:before {
    content: @sw-icon-database;
}
.icon--voicemail:before {
    content: @sw-icon-voicemail;
}
.icon--clipboard:before {
    content: @sw-icon-clipboard;
}
.icon--box:before {
    content: @sw-icon-box;
}
.icon--ticket:before {
    content: @sw-icon-ticket;
}
.icon--rss:before {
    content: @sw-icon-rss;
}
.icon--signal:before {
    content: @sw-icon-signal;
}
.icon--thermometer:before {
    content: @sw-icon-thermometer;
}
.icon--droplets:before {
    content: @sw-icon-droplets;
}
.icon--uniE680:before {
    content: @sw-icon-uniE680;
}
.icon--statistics:before {
    content: @sw-icon-statistics;
}
.icon--pie:before {
    content: @sw-icon-pie;
}
.icon--bars:before {
    content: @sw-icon-bars;
}
.icon--graph:before {
    content: @sw-icon-graph;
}
.icon--lock:before {
    content: @sw-icon-lock;
}
.icon--lock-open:before {
    content: @sw-icon-lock-open;
}
.icon--login:before {
    content: @sw-icon-login;
}
.icon--minus:before {
    content: @sw-icon-minus;
}
.icon--plus:before {
    content: @sw-icon-plus;
}
.icon--cross2:before {
    content: @sw-icon-cross2;
}
.icon--minus2:before {
    content: @sw-icon-minus2;
}
.icon--plus2:before {
    content: @sw-icon-plus2;
}
.icon--cross3:before {
    content: @sw-icon-cross3;
}
.icon--minus3:before {
    content: @sw-icon-minus3;
}
.icon--plus3:before {
    content: @sw-icon-plus3;
}
.icon--erase:before {
    content: @sw-icon-erase;
}
.icon--blocked:before {
    content: @sw-icon-blocked;
}
.icon--info:before {
    content: @sw-icon-info;
}
.icon--info2:before {
    content: @sw-icon-info2;
}
.icon--question:before {
    content: @sw-icon-question;
}
.icon--help:before {
    content: @sw-icon-help;
}
.icon--warning:before {
    content: @sw-icon-warning;
}
.icon--cycle:before {
    content: @sw-icon-cycle;
}
.icon--cw:before {
    content: @sw-icon-cw;
}
.icon--ccw:before {
    content: @sw-icon-ccw;
}
.icon--shuffle:before {
    content: @sw-icon-shuffle;
}
.icon--arrow:before {
    content: @sw-icon-arrow;
}
.icon--arrow2:before {
    content: @sw-icon-arrow2;
}
.icon--retweet:before {
    content: @sw-icon-retweet;
}
.icon--loop:before {
    content: @sw-icon-loop;
}
.icon--history:before {
    content: @sw-icon-history;
}
.icon--back:before {
    content: @sw-icon-back;
}
.icon--list2:before {
    content: @sw-icon-list2;
}
.icon--add-to-list:before {
    content: @sw-icon-add-to-list;
}
.icon--layout2:before {
    content: @sw-icon-layout2;
}
.icon--list3:before {
    content: @sw-icon-list3;
}
.icon--text:before {
    content: @sw-icon-text;
}
.icon--text2:before {
    content: @sw-icon-text2;
}
.icon--document:before {
    content: @sw-icon-document;
}
.icon--docs:before {
    content: @sw-icon-docs;
}
.icon--landscape:before {
    content: @sw-icon-landscape;
}
.icon--pictures:before {
    content: @sw-icon-pictures;
}
.icon--video:before {
    content: @sw-icon-video;
}
.icon--music3:before {
    content: @sw-icon-music3;
}
.icon--folder:before {
    content: @sw-icon-folder;
}
.icon--archive:before {
    content: @sw-icon-archive;
}
.icon--trash:before {
    content: @sw-icon-trash;
}
.icon--upload:before {
    content: @sw-icon-upload;
}
.icon--download:before {
    content: @sw-icon-download;
}
.icon--disk:before {
    content: @sw-icon-disk;
}
.icon--install:before {
    content: @sw-icon-install;
}
.icon--cloud:before {
    content: @sw-icon-cloud;
}
.icon--upload2:before {
    content: @sw-icon-upload2;
}
.icon--bookmark:before {
    content: @sw-icon-bookmark;
}
.icon--bookmarks:before {
    content: @sw-icon-bookmarks;
}
.icon--book2:before {
    content: @sw-icon-book2;
}
.icon--play:before {
    content: @sw-icon-play;
}
.icon--pause:before {
    content: @sw-icon-pause;
}
.icon--record:before {
    content: @sw-icon-record;
}
.icon--stop:before {
    content: @sw-icon-stop;
}
.icon--next:before {
    content: @sw-icon-next;
}
.icon--previous:before {
    content: @sw-icon-previous;
}
.icon--first:before {
    content: @sw-icon-first;
}
.icon--last:before {
    content: @sw-icon-last;
}
.icon--resize-enlarge:before {
    content: @sw-icon-resize-enlarge;
}
.icon--resize-shrink:before {
    content: @sw-icon-resize-shrink;
}
.icon--volume:before {
    content: @sw-icon-volume;
}
.icon--sound:before {
    content: @sw-icon-sound;
}
.icon--mute:before {
    content: @sw-icon-mute;
}
.icon--flow-cascade:before {
    content: @sw-icon-flow-cascade;
}
.icon--flow-branch:before {
    content: @sw-icon-flow-branch;
}
.icon--flow-tree:before {
    content: @sw-icon-flow-tree;
}
.icon--flow-line:before {
    content: @sw-icon-flow-line;
}
.icon--flow-parallel:before {
    content: @sw-icon-flow-parallel;
}
.icon--arrow-left2:before {
    content: @sw-icon-arrow-left2;
}
.icon--arrow-down2:before {
    content: @sw-icon-arrow-down2;
}
.icon--arrow-up-upload:before {
    content: @sw-icon-arrow-up-upload;
}
.icon--arrow-right2:before {
    content: @sw-icon-arrow-right2;
}
.icon--arrow-left3:before {
    content: @sw-icon-arrow-left3;
}
.icon--arrow-down3:before {
    content: @sw-icon-arrow-down3;
}
.icon--arrow-up2:before {
    content: @sw-icon-arrow-up2;
}
.icon--arrow-right3:before {
    content: @sw-icon-arrow-right3;
}
.icon--arrow-left4:before {
    content: @sw-icon-arrow-left4;
}
.icon--arrow-down4:before {
    content: @sw-icon-arrow-down4;
}
.icon--arrow-up3:before {
    content: @sw-icon-arrow-up3;
}
.icon--arrow-right4:before {
    content: @sw-icon-arrow-right4;
}
.icon--arrow-left5:before {
    content: @sw-icon-arrow-left5;
}
.icon--arrow-down5:before {
    content: @sw-icon-arrow-down5;
}
.icon--arrow-up4:before {
    content: @sw-icon-arrow-up4;
}
.icon--arrow-right5:before {
    content: @sw-icon-arrow-right5;
}
.icon--arrow-left6:before {
    content: @sw-icon-arrow-left6;
}
.icon--arrow-down6:before {
    content: @sw-icon-arrow-down6;
}
.icon--arrow-up5:before {
    content: @sw-icon-arrow-up5;
}
.icon--arrow-right6:before {
    content: @sw-icon-arrow-right6;
}
.icon--menu2:before {
    content: @sw-icon-menu2;
}
.icon--ellipsis:before {
    content: @sw-icon-ellipsis;
}
.icon--dots:before {
    content: @sw-icon-dots;
}
.icon--dot:before {
    content: @sw-icon-dot;
}
.icon--cc:before {
    content: @sw-icon-cc;
}
.icon--cc-by:before {
    content: @sw-icon-cc-by;
}
.icon--cc-nc:before {
    content: @sw-icon-cc-nc;
}
.icon--cc-nc-eu:before {
    content: @sw-icon-cc-nc-eu;
}
.icon--cc-nc-jp:before {
    content: @sw-icon-cc-nc-jp;
}
.icon--cc-sa:before {
    content: @sw-icon-cc-sa;
}
.icon--cc-nd:before {
    content: @sw-icon-cc-nd;
}
.icon--cc-pd:before {
    content: @sw-icon-cc-pd;
}
.icon--cc-zero:before {
    content: @sw-icon-cc-zero;
}
.icon--cc-share:before {
    content: @sw-icon-cc-share;
}
.icon--cc-share2:before {
    content: @sw-icon-cc-share2;
}
.icon--danielbruce:before {
    content: @sw-icon-danielbruce;
}
.icon--danielbruce2:before {
    content: @sw-icon-danielbruce2;
}
.icon--github:before {
    content: @sw-icon-github;
}
.icon--github2:before {
    content: @sw-icon-github2;
}
.icon--flickr:before {
    content: @sw-icon-flickr;
}
.icon--flickr2:before {
    content: @sw-icon-flickr2;
}
.icon--vimeo:before {
    content: @sw-icon-vimeo;
}
.icon--vimeo2:before {
    content: @sw-icon-vimeo2;
}
.icon--twitter:before {
    content: @sw-icon-twitter;
}
.icon--twitter2:before {
    content: @sw-icon-twitter2;
}
.icon--facebook:before {
    content: @sw-icon-facebook;
}
.icon--facebook2:before {
    content: @sw-icon-facebook2;
}
.icon--facebook3:before {
    content: @sw-icon-facebook3;
}
.icon--googleplus:before {
    content: @sw-icon-googleplus;
}
.icon--googleplus2:before {
    content: @sw-icon-googleplus2;
}
.icon--pinterest:before {
    content: @sw-icon-pinterest;
}
.icon--pinterest2:before {
    content: @sw-icon-pinterest2;
}
.icon--tumblr:before {
    content: @sw-icon-tumblr;
}
.icon--tumblr2:before {
    content: @sw-icon-tumblr2;
}
.icon--linkedin:before {
    content: @sw-icon-linkedin;
}
.icon--linkedin2:before {
    content: @sw-icon-linkedin2;
}
.icon--dribbble:before {
    content: @sw-icon-dribbble;
}
.icon--dribbble2:before {
    content: @sw-icon-dribbble2;
}
.icon--stumbleupon:before {
    content: @sw-icon-stumbleupon;
}
.icon--stumbleupon2:before {
    content: @sw-icon-stumbleupon2;
}
.icon--lastfm:before {
    content: @sw-icon-lastfm;
}
.icon--lastfm2:before {
    content: @sw-icon-lastfm2;
}
.icon--rdio:before {
    content: @sw-icon-rdio;
}
.icon--rdio2:before {
    content: @sw-icon-rdio2;
}
.icon--spotify:before {
    content: @sw-icon-spotify;
}
.icon--spotify2:before {
    content: @sw-icon-spotify2;
}
.icon--qq:before {
    content: @sw-icon-qq;
}
.icon--instagram3:before {
    content: @sw-icon-instagram3;
}
.icon--dropbox:before {
    content: @sw-icon-dropbox;
}
.icon--evernote:before {
    content: @sw-icon-evernote;
}
.icon--flattr:before {
    content: @sw-icon-flattr;
}
.icon--skype:before {
    content: @sw-icon-skype;
}
.icon--skype2:before {
    content: @sw-icon-skype2;
}
.icon--renren:before {
    content: @sw-icon-renren;
}
.icon--sina-weibo:before {
    content: @sw-icon-sina-weibo;
}
.icon--paypal:before {
    content: @sw-icon-paypal;
}
.icon--picasa:before {
    content: @sw-icon-picasa;
}
.icon--soundcloud:before {
    content: @sw-icon-soundcloud;
}
.icon--mixi:before {
    content: @sw-icon-mixi;
}
.icon--behance:before {
    content: @sw-icon-behance;
}
.icon--circles:before {
    content: @sw-icon-circles;
}
.icon--vk:before {
    content: @sw-icon-vk;
}
.icon--smashing:before {
    content: @sw-icon-smashing;
}
.icon--feed:before {
    content: @sw-icon-feed;
}
.icon--feed2:before {
    content: @sw-icon-feed2;
}
.icon--instagram:before {
    content: @sw-icon-instagram;
}
.icon--instagram2:before {
    content: @sw-icon-instagram2;
}
.icon--xing:before {
    content: @sw-icon-xing;
}
.icon--xing2:before {
    content: @sw-icon-xing2;
}
.icon--youtube:before {
    content: @sw-icon-youtube;
}
.icon--youtube2:before {
    content: @sw-icon-youtube2;
}
