Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

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

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

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

+ add another resource

Behavior

Save Automatically?

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

Auto-Updating Preview

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

Format on Save

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

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

HTML

              
                <div class="wrap">
  <div class="facebook goof icon"><a href="https://www.facebook.com" target="_blank"></a></div>
  <div class="twitter icon"><a href="https://www.twitter.com" target="_blank"></a></div>
  <div class="linkedin icon"><a href="https://www.linkedin.com" target="_blank"></a></div>
  <div class="pinterest icon"><a href="http://www.pintrest.com" target="_blank"></a></div>
  <div class="instagram icon"><a href="http://www.pintrest.com" target="_blank"></a></div>
  <div class="github icon"><a href="https://www.github.com" target="_blank"></a></div>
  <div class="codepen icon"><a href="https://www.codepen.io" target="_blank"></a></div>
  <div class="dribbble icon"><a href="http://www.dribbble.com" target="_blank"></a></div>
  <div class="plus icon"><a href="https://www.plus.google.com" target="_blank"></a></div>
  <div class="spotify icon"><a href="http://www.spotify.com" target="_blank"></a></div>
  <div class="vimeo icon"><a href="https://www.vimeo.com" target="_blank"></a></div>
  <div class="flickr icon"><a href="http://www.flickr.com" target="_blank"></a></div>
</div>
              
            
!

CSS

              
                .wrap{
  margin: 0 auto;
  padding: 2%;
  width: 20em;
}

.wrap div{
  display: inline-block;
}

.icon{
  background-color:#222;
  background-repeat:no-repeat;
  background-position:center center;
  height: 5em;
  width: 5em;
  -webkit-transition: background-color 0.4s ease;
  -moz-transition: background-color 0.4s ease;
  -ms-transition: background-color 0.4s ease;
  -o-transition: background-color 0.4s ease;
  transition: background-color 0.4s ease;
}

.goof{
  -webkit-transition: all 0.4s cubic-bezier(0,2,0,2);
  -moz-transition: all 0.4s cubic-bezier(0,2,0,2);
  -ms-transition: all 0.4s cubic-bezier(0,2,0,2);
  -o-transition: all 0.4s cubic-bezier(0,2,0,2);
  transition: all 0.4s cubic-bezier(0,2,0,2);
}

.goof:hover{
  background-size:35%;
}

.icon a{
  display: block;
  height: 100%;
  width: 100%;
}

.facebook{
  background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iLTAuNyAtMC42IDEzNCAyNzgiPjxzdHlsZT4uc3R5bGUwe2ZpbGw6CSNGRkZGRkY7fTwvc3R5bGU+PHBhdGggZD0iTTgyLjYgNThjMCAwLTAuNy01LjUgNC40LTkuNmM1LjEtNCA5LjktMy43IDkuOS0zLjdjMTIuOS0xLjYgMjkuOCAyLjYgMjkuOCAyLjZsNS45LTQyLjdjMCAwLTU5LjctMTQuMy04NS45IDcuMkMyOS41IDI0LjUgMjkuMyA0My43IDI5LjMgNDMuN3Y0Ny43SDAuMmwtMC4yIDQyaDI5LjRsLTEuMSAxNDMuMWw1Mi44IDAuM2wwLjMtMTQzLjRoNDMuMWwyLjktNDEuOWwtNDUuMS0wLjJMODIuNiA1OHoiIGNsYXNzPSJzdHlsZTAiLz48L3N2Zz4=);
  background-size:25%;  
}

.facebook:hover{
  background-color:#3664A2;
}

.twitter{
  background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iLTAuNyAtMC40IDE4NCAyNDUiID48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTgyLjcsMjEzLjVjMCw4LjQtMywxNS42LTksMjEuNWMtNiw2LTEzLjIsOS0yMS42LDlIOTEuNWMtMjUuMiwwLTQ2LjgtOC45LTY0LjctMjYuOEM4LjksMTk5LjQsMCwxNzcuOSwwLDE1Mi44VjMwLjVjMC04LjYsMy0xNS45LDguOS0yMS43QzE0LjksMi45LDIyLjIsMCwzMC44LDBjOC4zLDAsMTUuNSwzLDIxLjUsOWM2LDYsOSwxMy4xLDksMjEuNXY0NC4zaDg2LjJjNy44LDAsMTQuNSwyLjgsMjAuMSw4LjNjNS42LDUuNSw4LjQsMTIuMiw4LjQsMjBjMCw3LjgtMi44LDE0LjQtOC40LDIwYy01LjYsNS41LTEyLjMsOC4zLTIwLDguM0g2MS4ydjIxLjRjMCw4LjQsMi45LDE1LjUsOC44LDIxLjRjNS45LDUuOSwxMyw4LjgsMjEuNSw4LjhIMTUyYzguNCwwLDE1LjYsMywyMS42LDlDMTc5LjcsMTk4LDE4Mi43LDIwNS4xLDE4Mi43LDIxMy41eiIvPjwvc3ZnPg==);
  background-size:40%;
}

.twitter:hover{
  background-color:#44C8F5;
}

.linkedin{
  background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAtMC4zIDEwNSAxMDUiPjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0xLjcsMzQuNmgyMS43djY5LjdIMS43VjM0LjZ6IE0xMi42LDBjNi45LDAsMTIuNiw1LjYsMTIuNiwxMi42YzAsNi45LTUuNiwxMi42LTEyLjYsMTIuNkM1LjYsMjUuMSwwLDE5LjUsMCwxMi42QzAsNS42LDUuNiwwLDEyLjYsMCIvPjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0zNywzNC42aDIwLjh2OS41aDAuM2MyLjktNS41LDEwLTExLjMsMjAuNS0xMS4zYzIxLjksMCwyNiwxNC40LDI2LDMzLjJ2MzguMkg4Mi45VjcwLjRjMC04LjEtMC4yLTE4LjUtMTEuMy0xOC41Yy0xMS4zLDAtMTMsOC44LTEzLDE3Ljl2MzQuNUgzN1YzNC42eiIvPjwvc3ZnPg==);
  background-size:50%; 
}

.linkedin:hover{
  background-color:#007BB6;
}

.pinterest{
  background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiCSB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0wLjEgLTAuNiAxODUgMjIyIj48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNOTguMSwwQzMyLjksMCwwLDQ2LjcsMCw4NS43YzAsMjMuNiw4LjksNDQuNiwyOC4xLDUyLjRjMy4xLDEuMyw2LDAsNi45LTMuNGMwLjYtMi40LDIuMS04LjUsMi44LTExYzAuOS0zLjQsMC42LTQuNi0yLTcuNmMtNS41LTYuNS05LTE1LTktMjYuOWMwLTM0LjcsMjUuOS02NS43LDY3LjUtNjUuN2MzNi44LDAsNTcuMSwyMi41LDU3LjEsNTIuNmMwLDM5LjYtMTcuNSw3Mi45LTQzLjUsNzIuOWMtMTQuNCwwLTI1LjEtMTEuOS0yMS43LTI2LjRjNC4xLTE3LjQsMTIuMS0zNi4xLDEyLjEtNDguN2MwLTExLjItNi0yMC42LTE4LjUtMjAuNmMtMTQuNywwLTI2LjUsMTUuMi0yNi41LDM1LjVjMCwxMi45LDQuNCwyMS43LDQuNCwyMS43cy0xNSw2My42LTE3LjcsNzQuOGMtMi4yLDkuNS02LjEsMjguMiwzLjgsMzQuNmMwLjksMC42LDIsMS4xLDMuMiwxLjVjOC45LTIuOCwxNy43LTE3LjQsMjAuNi0yOGMxLjctNi4xLDkuNy0zNy43LDkuNy0zNy43YzQuOCw5LjEsMTguNywxNy4xLDMzLjUsMTcuMWM0NC4xLDAsNzQtNDAuMiw3NC05NEMxODQuOSwzNy45LDE1MC40LDAsOTguMSwweiIvPjwvc3ZnPg==);
  background-size:50%; 
}

.pinterest:hover{
  background-color:#CB2027;
}

.instagram{
  background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iLTAuOSAtMC44IDYxIDYxIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iI0ZGRkZGRiIgZD0iTTcuNywwaDQ0LjVjNC4yLDAsNy43LDMuNSw3LjcsNy43djQ0LjVjMCw0LjItMy41LDcuNy03LjcsNy43SDcuN2MtNC4yLDAtNy43LTMuNS03LjctNy43VjcuN0MwLDMuNSwzLjUsMCw3LjcsMEw3LjcsMHogTTQzLjYsNi43Yy0xLjUsMC0yLjcsMS4yLTIuNywyLjd2Ni41YzAsMS41LDEuMiwyLjcsMi43LDIuN2g2LjhjMS41LDAsMi43LTEuMiwyLjctMi43VjkuNGMwLTEuNS0xLjItMi43LTIuNy0yLjdINDMuNkw0My42LDYuN3ogTTUzLjEsMjUuM2gtNS4zYzAuNSwxLjYsMC44LDMuNCwwLjgsNS4xYzAsMTAtOC4zLDE4LTE4LjYsMThzLTE4LjYtOC4xLTE4LjYtMThjMC0xLjgsMC4zLTMuNSwwLjgtNS4xSDYuN3YyNS4zQzYuNyw1Miw3LjcsNTMsOSw1M2g0MS43YzEuMywwLDIuNC0xLjEsMi40LTIuNFYyNS4zTDUzLjEsMjUuM3ogTTMwLDE4LjJjLTYuNiwwLTEyLDUuMi0xMiwxMS43YzAsNi40LDUuNCwxMS43LDEyLDExLjdzMTItNS4yLDEyLTExLjdDNDIsMjMuNCwzNi43LDE4LjIsMzAsMTguMnoiLz48L3N2Zz4=);
  background-size:55%; 
}

.instagram:hover{
  background-color:#3F729B;
}

.github{
  background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAtMC40IDMyIDMzIj48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMzIsMTZjMCw4LjgtNy4yLDE2LTE2LDE2QzcuMiwzMiwwLDI0LjgsMCwxNkMwLDcuMiw3LjIsMCwxNiwwQzI0LjgsMCwzMiw3LjIsMzIsMTYgTTIwLDI5YzUuNS0xLjgsOS41LTYuOSw5LjUtMTNjMC03LjUtNi0xMy41LTEzLjUtMTMuNUM4LjUsMi41LDIuNSw4LjUsMi41LDE2YzAsNi4xLDQsMTEuMiw5LjUsMTN2LTIuNWMtMy45LDAuOS00LjgtMS44LTQuOC0xLjhjLTAuNi0xLjYtMS41LTItMS41LTJjLTEuMy0wLjksMC4xLTAuOCwwLjEtMC44YzEuNCwwLjEsMi4xLDEuNCwyLjEsMS40YzEuMywyLjMsMy41LDEuNCw0LjIsMS4xYzAuMi0xLDEtMS4yLDEuMi0xLjNDOS44LDIyLjYsNiwyMS4zLDYsMTUuMmMwLTEuNywwLjYtMy4xLDEuNi00LjJjLTAuMi0wLjQtMC43LTIsMC4yLTQuMmMwLDAsMS4zLTAuNCw0LjMsMS42YzEuMy0wLjMsMi42LTAuNSwzLjktMC41YzEuMywwLDIuNywwLjIsMy45LDAuNWMzLTIsNC4zLTEuNiw0LjMtMS42YzAuOSwyLjIsMC4zLDMuOCwwLjIsNC4yYzEsMS4xLDEuNiwyLjUsMS42LDQuMmMwLDYuMS0zLjgsNy40LTcuMyw3LjhjMC42LDAuNCwxLjMsMS4zLDEuMywyLjhWMjl6Ii8+PC9zdmc+);
  background-size:60%; 
}

.github:hover{
  background-color:#6CC644;
}

.codepen{
  background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iLTEuMiAtMS4yIDQwIDQwIj48cG9seWdvbiBmaWxsPSJub25lIiBwb2ludHM9IjkuMiwxNy4xIDkuMiwyMC40IDExLjcsMTguOCAiLz48cG9seWdvbiBmaWxsPSJub25lIiBwb2ludHM9IjEwLDIyLjMgMTcuOCwyNy41IDE3LjgsMjIuOSAxMy40LDIwICIvPjxwb2x5Z29uIGZpbGw9Im5vbmUiIHBvaW50cz0iMTguOCwxNi40IDE1LjIsMTguOCAxOC44LDIxLjEgMjIuMywxOC44ICIvPjxwb2x5Z29uIGZpbGw9Im5vbmUiIHBvaW50cz0iMTcuOCwxNC43IDE3LjgsMTAgMTAsMTUuMiAxMy40LDE3LjYgIi8+PHBvbHlnb24gZmlsbD0ibm9uZSIgcG9pbnRzPSIyNy42LDE1LjIgMTkuOCwxMCAxOS44LDE0LjcgMjQuMSwxNy42ICIvPjxwb2x5Z29uIGZpbGw9Im5vbmUiIHBvaW50cz0iMTkuOCwyMi45IDE5LjgsMjcuNSAyNy42LDIyLjMgMjQuMSwyMCAiLz48cGF0aCBmaWxsPSJub25lIiBkPSJNMTguOCwzLjFjLTguNiwwLTE1LjcsNy0xNS43LDE1LjdjMCw4LjYsNywxNS43LDE1LjcsMTUuN2M4LjYsMCwxNS43LTcsMTUuNy0xNS43QzM0LjQsMTAuMSwyNy40LDMuMSwxOC44LDMuMXogTTMwLjQsMjIuNEMzMC40LDIyLjQsMzAuNCwyMi41LDMwLjQsMjIuNGMwLDAuMSwwLDAuMSwwLDAuMWMwLDAsMCwwLDAsMGMwLDAsMCwwLDAsMC4xYzAsMCwwLDAsMCwwYzAsMCwwLDAsMCwwLjFjMCwwLDAsMCwwLDBjMCwwLDAsMCwwLDAuMWMwLDAsMCwwLDAsMGMwLDAsMCwwLDAsMC4xYzAsMCwwLDAsMCwwYzAsMCwwLDAtMC4xLDBjMCwwLDAsMCwwLDBjMCwwLDAsMCwwLDBsLTEwLjYsNy4xYy0wLjIsMC4xLTAuNCwwLjItMC42LDAuMmMtMC4yLDAtMC40LTAuMS0wLjYtMC4yTDcuNiwyMy4xYzAsMCwwLDAsMCwwYzAsMCwwLDAsMCwwYzAsMCwwLDAtMC4xLDBjMCwwLDAsMCwwLDBjMCwwLDAsMCwwLTAuMWMwLDAsMCwwLDAsMGMwLDAsMCwwLDAtMC4xYzAsMCwwLDAsMCwwYzAsMCwwLDAsMC0wLjFjMCwwLDAsMCwwLDBjMCwwLDAsMCwwLTAuMWMwLDAsMCwwLDAsMGMwLDAsMC0wLjEsMC0wLjFjMCwwLDAsMCwwLDBjMCwwLDAtMC4xLDAtMC4xdi03LjFjMCwwLDAtMC4xLDAtMC4xYzAsMCwwLDAsMCwwYzAsMCwwLTAuMSwwLTAuMWMwLDAsMCwwLDAsMGMwLDAsMCwwLDAtMC4xYzAsMCwwLDAsMCwwYzAsMCwwLDAsMC0wLjFjMCwwLDAsMCwwLDBjMCwwLDAsMCwwLTAuMWMwLDAsMCwwLDAsMGMwLDAsMCwwLDAtMC4xYzAsMCwwLDAsMCwwYzAsMCwwLDAsMC4xLDBjMCwwLDAsMCwwLDBjMCwwLDAsMCwwLDBsMTAuNi03LjFjMC4zLTAuMiwwLjgtMC4yLDEuMSwwbDEwLjYsNy4xYzAsMCwwLDAsMCwwYzAsMCwwLDAsMCwwYzAsMCwwLDAsMC4xLDBjMCwwLDAsMCwwLDBjMCwwLDAsMCwwLDAuMWMwLDAsMCwwLDAsMGMwLDAsMCwwLDAsMC4xYzAsMCwwLDAsMCwwYzAsMCwwLDAsMCwwLjFjMCwwLDAsMCwwLDBjMCwwLDAsMCwwLDAuMWMwLDAsMCwwLDAsMGMwLDAsMCwwLjEsMCwwLjFjMCwwLDAsMCwwLDBjMCwwLDAsMC4xLDAsMC4xdjcuMUMzMC40LDIyLjMsMzAuNCwyMi40LDMwLjQsMjIuNHoiLz48cG9seWdvbiBmaWxsPSJub25lIiBwb2ludHM9IjI4LjQsMjAuNCAyOC40LDE3LjEgMjUuOSwxOC44ICIvPjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0xOC44LDBDOC40LDAsMCw4LjQsMCwxOC44czguNCwxOC44LDE4LjgsMTguOHMxOC44LTguNCwxOC44LTE4LjhTMjkuMSwwLDE4LjgsMHogTTE4LjgsMzQuNGMtOC42LDAtMTUuNy03LTE1LjctMTUuN2MwLTguNiw3LTE1LjcsMTUuNy0xNS43YzguNiwwLDE1LjcsNywxNS43LDE1LjdDMzQuNCwyNy40LDI3LjQsMzQuNCwxOC44LDM0LjR6Ii8+PHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTMwLjQsMTUuMUMzMC40LDE1LjEsMzAuNCwxNS4xLDMwLjQsMTUuMWMwLTAuMSwwLTAuMSwwLTAuMWMwLDAsMCwwLDAsMGMwLDAsMCwwLDAtMC4xYzAsMCwwLDAsMCwwYzAsMCwwLDAsMC0wLjFjMCwwLDAsMCwwLDBjMCwwLDAsMCwwLTAuMWMwLDAsMCwwLDAsMGMwLDAsMCwwLDAtMC4xYzAsMCwwLDAsMCwwYzAsMCwwLDAtMC4xLDBjMCwwLDAsMCwwLDBjMCwwLDAsMCwwLDBMMTkuMyw3LjNjLTAuMy0wLjItMC44LTAuMi0xLjEsMEw3LjYsMTQuNGMwLDAsMCwwLDAsMGMwLDAsMCwwLDAsMGMwLDAsMCwwLTAuMSwwYzAsMCwwLDAsMCwwYzAsMCwwLDAsMCwwLjFjMCwwLDAsMCwwLDBjMCwwLDAsMCwwLDAuMWMwLDAsMCwwLDAsMGMwLDAsMCwwLDAsMC4xYzAsMCwwLDAsMCwwYzAsMCwwLDAsMCwwLjFjMCwwLDAsMCwwLDBjMCwwLDAsMC4xLDAsMC4xYzAsMCwwLDAsMCwwYzAsMCwwLDAuMSwwLDAuMXY3LjFjMCwwLDAsMC4xLDAsMC4xYzAsMCwwLDAsMCwwYzAsMCwwLDAuMSwwLDAuMWMwLDAsMCwwLDAsMGMwLDAsMCwwLDAsMC4xYzAsMCwwLDAsMCwwYzAsMCwwLDAsMCwwLjFjMCwwLDAsMCwwLDBjMCwwLDAsMCwwLDAuMWMwLDAsMCwwLDAsMGMwLDAsMCwwLDAsMC4xYzAsMCwwLDAsMCwwYzAsMCwwLDAsMC4xLDBjMCwwLDAsMCwwLDBjMCwwLDAsMCwwLDBsMTAuNiw3LjFjMC4yLDAuMSwwLjQsMC4yLDAuNiwwLjJjMC4yLDAsMC40LTAuMSwwLjYtMC4ybDEwLjYtNy4xYzAsMCwwLDAsMCwwYzAsMCwwLDAsMCwwYzAsMCwwLDAsMC4xLDBjMCwwLDAsMCwwLDBjMCwwLDAsMCwwLTAuMWMwLDAsMCwwLDAsMGMwLDAsMCwwLDAtMC4xYzAsMCwwLDAsMCwwYzAsMCwwLDAsMC0wLjFjMCwwLDAsMCwwLDBjMCwwLDAsMCwwLTAuMWMwLDAsMCwwLDAsMGMwLDAsMC0wLjEsMC0wLjFjMCwwLDAsMCwwLDBjMCwwLDAtMC4xLDAtMC4xdi03LjFDMzAuNCwxNS4yLDMwLjQsMTUuMSwzMC40LDE1LjF6IE0xOS44LDEwbDcuOCw1LjJsLTMuNSwyLjNsLTQuMy0yLjlWMTB6IE0xNy44LDEwdjQuN2wtNC4zLDIuOUwxMCwxNS4yTDE3LjgsMTB6IE05LjIsMTcuMWwyLjUsMS43bC0yLjUsMS43VjE3LjF6IE0xNy44LDI3LjVMMTAsMjIuM2wzLjUtMi4zbDQuMywyLjlWMjcuNXogTTE4LjgsMjEuMWwtMy41LTIuNGwzLjUtMi40bDMuNSwyLjRMMTguOCwyMS4xeiBNMTkuOCwyNy41di00LjdsNC4zLTIuOWwzLjUsMi4zTDE5LjgsMjcuNXogTTI4LjQsMjAuNGwtMi41LTEuN2wyLjUtMS43VjIwLjR6Ii8+PC9zdmc+);
  background-size:70%;
}

.codepen:hover{
  background-color:#76DAFF;
}

.dribbble{
  background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgd2lkdGg9IjQxcHgiIGhlaWdodD0iNDFweCIgdmlld0JveD0iLTAuMDIyIC0wLjk0IDQxIDQxIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IC0wLjAyMiAtMC45NCA0MSA0MSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PGcgaWQ9ImJhbGxfMl8iPjxnPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjRkZGRkZGIiBkPSJNMjAsMEM4Ljk3MiwwLDAsOC45NzIsMCwyMHM4Ljk3MiwyMCwyMCwyMGMxMS4wMjgsMCwyMC04Ljk3MiwyMC0yMFMzMS4wMjgsMCwyMCwweiBNMzMuMjI0LDkuMjIzYzIuMzc5LDIuOTA3LDMuODIsNi42MDksMy44NTcsMTAuNjQyYy0wLjU2My0wLjExOS02LjIxMS0xLjI2NS0xMS44OTYtMC41NWMtMC4xMTktMC4yOTItMC4yNDItMC41ODYtMC4zNjctMC44ODJjLTAuMzU1LTAuODMzLTAuNzM2LTEuNjYxLTEuMTM0LTIuNDc0QzMwLjAwMSwxMy4zOCwzMi44NjMsOS43MSwzMy4yMjQsOS4yMjN6IE0yMCwyLjk0M2M0LjM0MSwwLDguMzA4LDEuNjI4LDExLjMyNCw0LjMwNWMtMC4zMDgsMC40MzgtMi44NzksMy44OTQtOC45NTMsNi4xNzFjLTIuNzk5LTUuMTQzLTUuOTAyLTkuMzY4LTYuMzc0LTEwQzE3LjI4MiwzLjEwOCwxOC42MjIsMi45NDMsMjAsMi45NDN6IE0xMi43MzcsNC41NjZjMC40NTEsMC42MTcsMy41MDMsNC44NDgsNi4zMzQsOS44NzljLTcuOTkxLDIuMTIyLTE1LjAyOSwyLjA5Mi0xNS43OTMsMi4wODJDNC4zODYsMTEuMjI2LDcuOTU4LDYuODIsMTIuNzM3LDQuNTY2eiBNMi45MTcsMjAuMDI2YzAtMC4xNzQsMC4wMDMtMC4zNDgsMC4wMDktMC41MjJjMC43NDgsMC4wMTYsOS4wMjYsMC4xMjIsMTcuNTU3LTIuNDMxYzAuNDg5LDAuOTU4LDAuOTU2LDEuOTI5LDEuMzg2LDIuODk5Yy0wLjIyNywwLjA2My0wLjQ1MSwwLjEzMS0wLjY3NCwwLjIwM2MtOC44MSwyLjg0OC0xMy40OTksMTAuNjEtMTMuODg2LDExLjI3M0M0LjU4MSwyOC40MTksMi45MTcsMjQuNDE0LDIuOTE3LDIwLjAyNnogTTIwLDM3LjEwOWMtMy45NDksMC03LjU4OS0xLjM0OC0xMC40ODUtMy42MDZjMC4zMDctMC42MjgsMy43NjYtNy4zMSwxMy40MDEtMTAuNjY4YzAuMDM4LTAuMDEzLDAuMDc1LTAuMDI1LDAuMTEyLTAuMDM4YzIuMzk5LDYuMjMyLDMuMzkxLDExLjQ1NiwzLjY0NSwxMi45NTVDMjQuNjIyLDM2LjYyNSwyMi4zNjYsMzcuMTA5LDIwLDM3LjEwOXogTTI5LjU0NSwzNC4xODhjLTAuMTc1LTEuMDQtMS4wODQtNi4wNDEtMy4zMTgtMTIuMTgxYzUuMzUzLTAuODU2LDEwLjA1NiwwLjU0NiwxMC42NDEsMC43M0MzNi4xMDUsMjcuNDkxLDMzLjM3NywzMS41OTYsMjkuNTQ1LDM0LjE4OHoiLz48L2c+PC9nPjwvc3ZnPg==);
  background-size:65%; 
}

.dribbble:hover{
  background-color:#ea4c89;
}

.plus{
  background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjQxcHgiIGhlaWdodD0iMzlweCIgdmlld0JveD0iLTAuMDQxIC0wLjIwNyA0MSAzOSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAtMC4wNDEgLTAuMjA3IDQxIDM5IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTE4LjM4LDIuMjg5YzAuMjkzLDAuMjI5LDAuNjQxLDAuNTM2LDEuMDM1LDAuOTE1czAuNzcyLDAuODM3LDEuMTMzLDEuMzgKCWMwLjM2MSwwLjU0MywwLjY3NCwxLjE3OCwwLjkzNywxLjg5OWMwLjI2MiwwLjcyNSwwLjM5NCwxLjU0OSwwLjM5NCwyLjQ2OWMwLDAuOTE5LTAuMTE1LDEuNzI1LTAuMzQ1LDIuNDE3CgljLTAuMjI5LDAuNjktMC41NDEsMS4zMDgtMC45MzUsMS44NWMtMC4zOTYsMC41NDMtMC44MzYsMS4wMzYtMS4zMzIsMS40OGMtMC40OTQsMC40NDQtMS4wMDIsMC44NjQtMS41MjksMS4yNTkKCWMtMC4zMjgsMC4zMjYtMC42MzksMC42NzMtMC45MzcsMS4wMzRjLTAuMjk1LDAuMzY0LTAuNDQxLDAuODI1LTAuNDQxLDEuMzgyYzAsMC41NiwwLjE0NiwwLjk5NywwLjQ0MSwxLjMxCgljMC4yOTcsMC4zMTIsMC41NzYsMC41ODIsMC44MzgsMC44MTNsMS43NzQsMS4zNzljMC41MjUsMC40NjMsMS4wNDIsMC45MjYsMS41NTMsMS4zODVjMC41MDgsMC40NTksMC45NTIsMC45NTEsMS4zMywxLjQ3OQoJYzAuMzc5LDAuNTI2LDAuNjgxLDEuMTE5LDAuOTExLDEuNzc4YzAuMjI5LDAuNjU0LDAuMzQ2LDEuNDE0LDAuMzQ2LDIuMjY3YzAsMS4xNTEtMC4yOCwyLjI4Ni0wLjg0LDMuNDA3CgljLTAuNTU2LDEuMTE1LTEuMzc4LDIuMTEzLTIuNDYxLDIuOTg0Yy0xLjA4NCwwLjg3MS0yLjQ0LDEuNTc4LTQuMDY5LDIuMTIyYy0xLjYyMywwLjU0Mi0zLjQ4OSwwLjgxNC01LjU5LDAuODE0CgljLTEuNzc0LDAtMy4zMjctMC4xOTgtNC42NTctMC41OTJjLTEuMzM0LTAuMzk2LTIuNDQtMC45Mi0zLjMyNS0xLjU4Yy0wLjg4OS0wLjY1NS0xLjU0NS0xLjQwMi0xLjk3My0yLjIzOQoJQzAuMjE1LDMyLjg2NiwwLDMxLjk4NiwwLDMxLjA2OGMwLTAuODg2LDAuMjctMS44OTgsMC44MTMtMy4wMzJjMC41NDMtMS4xMzMsMS41MzYtMi4xMjQsMi45ODEtMi45OAoJYzAuNzU2LTAuNDYzLDEuNTctMC44MzEsMi40NDMtMS4xMDljMC44NjctMC4yNzksMS43MjktMC41MDEsMi41ODMtMC42NjVzMS42Ni0wLjI3OSwyLjQxNC0wLjM0NQoJYzAuNzU2LTAuMDYzLDEuNDE0LTAuMTE0LDEuOTcyLTAuMTQ3Yy0wLjM2My0wLjQ1OS0wLjY5OC0wLjk0My0xLjAxLTEuNDU0Yy0wLjMxMy0wLjUwOC0wLjQ2OC0xLjE0MS0wLjQ2OC0xLjg5NgoJYzAtMC40MjYsMC4wNDktMC43OCwwLjE0OC0xLjA2MmMwLjA5OC0wLjI3OCwwLjIxMy0wLjU2NCwwLjM0NC0wLjg2Yy0wLjI2MywwLjAzMi0wLjUyNSwwLjA1OC0wLjc4OSwwLjA3NQoJYy0wLjI2MiwwLjAxNS0wLjUyNSwwLjAyMy0wLjc4NywwLjAyM2MtMS4zMTUsMC0yLjQ4MS0wLjIyMy0zLjQ5OC0wLjY2NWMtMS4wMjEtMC40NDQtMS44NzMtMS4wMjYtMi41NjMtMS43NQoJYy0wLjY5MS0wLjcyMi0xLjIxNS0xLjU1Mi0xLjU3Ni0yLjQ4OWMtMC4zNjMtMC45MzctMC41NDMtMS44NzktMC41NDMtMi44MzJjMC0xLjE1LDAuMjYyLTIuMzExLDAuNzg5LTMuNDc3CgljMC41MjQtMS4xNjYsMS4zMTMtMi4yMDcsMi4zNjUtMy4xMjZjMS40MTItMS4xNDksMi44OTktMS44OSw0LjQ2LTIuMjJjMS41Ni0wLjMyOSwzLjAxMy0wLjQ5MSw0LjM2LTAuNDkxSDI0LjU5bC0zLjE1NCwxLjcyNAoJSDE4LjM4eiBNMjAuMjUzLDMwLjcyMWMwLTAuNjIzLTAuMTA4LTEuMTg5LTAuMzIxLTEuNjk4Yy0wLjIxNS0wLjUxLTAuNTM0LTEuMDEzLTAuOTYtMS41MDVjLTAuNDI4LTAuNDkxLTAuOTg2LTEuMDAyLTEuNjc2LTEuNTI2CgljLTAuNjkxLTAuNTI2LTEuNDk4LTEuMTE3LTIuNDE1LTEuNzc0Yy0wLjE5Ny0wLjAzMy0wLjM3LTAuMDUtMC41MTctMC4wNWgtMC42MTZjLTAuMDk4LDAtMC4zMjgsMC4wMDgtMC42OSwwLjAyNwoJYy0wLjM2MiwwLjAxNS0wLjc4OSwwLjA0OC0xLjI4MSwwLjA5NWMtMC40OTIsMC4wNTItMS4wMTksMC4xMzUtMS41NzYsMC4yNDhjLTAuNTU5LDAuMTE2LTEuMTAyLDAuMjU1LTEuNjI3LDAuNDE5CgljLTAuMjYyLDAuMDk5LTAuNjM0LDAuMjU1LTEuMTA4LDAuNDcxYy0wLjQ3NywwLjIxMS0wLjk0NSwwLjUxNi0xLjQwNiwwLjkwOWMtMC40NTksMC4zOTUtMC44NiwwLjg4Ny0xLjIwNiwxLjQ3OQoJYy0wLjM0NiwwLjU4OS0wLjUxOCwxLjMzLTAuNTE4LDIuMjE4YzAsMS43NzQsMC43OCwzLjIyLDIuMzM5LDQuMzM3YzEuNTYyLDEuMTE0LDMuNjczLDEuNjc0LDYuMzMzLDEuNjc0CgljMi4zNjUsMCw0LjE2Ni0wLjUwMSw1LjM5Ny0xLjUwM1MyMC4yNTMsMzIuMjY2LDIwLjI1MywzMC43MjEgTTEyLjk2LDE2LjIzNWMwLjYyNSwwLDEuMjQxLTAuMTMyLDEuODQ5LTAuMzk2CgljMC42MDctMC4yNjUsMS4xMDgtMC41OTMsMS41MDEtMC45ODljMC41NTgtMC41NjEsMC45MDQtMS4xODYsMS4wMzUtMS44OGMwLjEzMS0wLjY5MiwwLjE5Ny0xLjI2OSwwLjE5Ny0xLjczMQoJYzAtMC44ODgtMC4xMzEtMS44NjItMC4zOTQtMi45MTdjLTAuMjY0LTEuMDU2LTAuNjU4LTIuMDQyLTEuMTgyLTIuOTY2Yy0wLjUyNy0wLjkyNC0xLjE3Ny0xLjY5LTEuOTQ4LTIuMjk5CgljLTAuNzcyLTAuNjEyLTEuNjY3LTAuOTE4LTIuNjg2LTAuOTE4Yy0wLjY1NiwwLTEuMjk3LDAuMTQ5LTEuOTIsMC40NDhDOC43ODgsMi44ODQsOC4yNzksMy4yOCw3Ljg4NiwzLjc3MQoJYy0wLjQyOCwwLjUzLTAuNzE2LDEuMTA1LTAuODY0LDEuNzMyQzYuODc1LDYuMTMsNi44LDYuNzc0LDYuOCw3LjQzM2MwLDAuODI1LDAuMTI0LDEuNzQ5LDAuMzcsMi43NzEKCWMwLjI0NiwxLjAyMSwwLjYyMywxLjk3NiwxLjEzMywyLjg2OGMwLjUwOCwwLjg4OCwxLjE1LDEuNjQsMS45MjIsMi4yNUMxMC45OTgsMTUuOTI5LDExLjkwOSwxNi4yMzUsMTIuOTYsMTYuMjM1Ii8+Cjxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iNDAsOS4wNiAzMy4wNjUsOS4wNiAzMy4wNjUsMTYuMDI4IDMwLjg2NCwxNi4wMjggMzAuODY0LDkuMDYgMjMuODk2LDkuMDYgMjMuODk2LDYuODU4IAoJMzAuODY0LDYuODU4IDMwLjg2NCwwIDMzLjA2NSwwIDMzLjA2NSw2Ljg1OCA0MCw2Ljg1OCAiLz4KPC9zdmc+);
  background-size:60%; 
}

.plus:hover{
  background-color:#dd4b39;
}

.spotify{
  background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE1LjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIxMDAwcHgiIGhlaWdodD0iMTAwMHB4IiB2aWV3Qm94PSIwIDAgMTAwMCAxMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAwIDEwMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMCw1MDBjMC05MC42NjcsMjIuMzMzLTE3NC4zMzMsNjctMjUxUzE3Mi4zMzMsMTExLjY2NywyNDksNjdDMzI1LjY2NywyMi4zMzMsNDA5LjMzMywwLDUwMCwwCglzMTc0LjMzMywyMi4zMzMsMjUxLDY3czEzNy4zMzMsMTA1LjMzMywxODIsMTgyczY3LDE2MC4zMzMsNjcsMjUxYzAsNjcuMzMzLTEyLjY2NywxMzEuMzMzLTM4LDE5MnMtNjEsMTE0LTEwNywxNjAKCWMtNDAtNDguNjY3LTg4LjUtODYuNjY3LTE0NS41LTExNFM1OTEuNjY3LDY5Nyw1MjcsNjk3Yy03MS4zMzMsMC0xMzcuNjY3LDE2LjUtMTk5LDQ5LjVjLTYxLjMzMywzMy0xMTEuNjY3LDc3LjgzMy0xNTEsMTM0LjUKCWMtNTUuMzMzLTQ3LjMzMy05OC42NjctMTA0LTEzMC0xNzBTMCw1NzQuNjY3LDAsNTAweiBNMTY0LDM1NmMwLDExLjMzMyw0LDIxLjE2NywxMiwyOS41czE4LDEyLjUsMzAsMTIuNWM0LDAsNy0wLjMzMyw5LTEKCWM5Ni0zOC42NjcsMTk1LjMzMy01OCwyOTgtNThzMjAyLDE5LjMzMywyOTgsNThjMC42NjcsMCwyLDAuMTY3LDQsMC41czMuNjY3LDAuNSw1LDAuNWMxMS4zMzMsMCwyMS4xNjctNC4xNjcsMjkuNS0xMi41CglTODYyLDM2Ny4zMzMsODYyLDM1NmMwLTE2LjY2Ny03LjY2Ny0yOS0yMy0zN2MtMTA2LTQyLTIxNC42NjctNjMtMzI2LTYzYy0xMTMuMzMzLDAtMjIzLDIxLjMzMy0zMjksNjQKCUMxNzAuNjY3LDMyOC42NjcsMTY0LDM0MC42NjcsMTY0LDM1NnogTTIxMCw1MDVsNiwxNmM1LjMzMyw4LjY2NywxMywxMywyMywxM2MyLDAsNS0wLjY2Nyw5LTJjODQuNjY3LTM2LjY2NywxNzMtNTUsMjY1LTU1CgljOTIuNjY3LDAsMTgxLjY2NywxOC42NjcsMjY3LDU2YzIuNjY3LDEuMzMzLDUsMiw3LDJjMTAsMCwxNy42NjctNC4zMzMsMjMtMTNsNS0xN2MwLTguNjY3LTMuMzMzLTE1LjY2Ny0xMC0yMQoJYy05Mi00MS4zMzMtMTg5LjMzMy02Mi0yOTItNjJjLTEwMiwwLTE5OS42NjcsMjAuNjY3LTI5Myw2MkMyMTMuMzMzLDQ5MC42NjcsMjEwLDQ5Ny42NjcsMjEwLDUwNXogTTI1OCw2NDkKCWM2LjY2NywxNi42NjcsMTcsMjIsMzEsMTZjNzItMzQsMTQ2LjY2Ny01MSwyMjQtNTFjNzQuNjY3LDAsMTQ3LjY2NywxNiwyMTksNDhjMTYsOC42NjcsMjcuNjY3LDQuNjY3LDM1LTEyCgljMy4zMzMtOC42NjcsMy4zMzMtMTYuMzMzLDAtMjNzLTgtMTEuNjY3LTE0LTE1Yy03MC42NjctMzUuMzMzLTE1MC42NjctNTMtMjQwLTUzYy04NS4zMzMsMC0xNjYuNjY3LDE4LjMzMy0yNDQsNTUKCUMyNTYuMzMzLDYyMC42NjcsMjUyLjY2Nyw2MzIuMzMzLDI1OCw2NDl6IE0zMTksOTY2YzI0LjY2Ny0zMiw1NS4xNjctNTcuMzMzLDkxLjUtNzZzNzUuMTY3LTI4LDExNi41LTI4CgljNzYsMCwxNDAuMzMzLDI4LjY2NywxOTMsODZjLTY5LjMzMywzNC42NjctMTQyLjY2Nyw1Mi0yMjAsNTJDNDM3LjMzMywxMDAwLDM3Nyw5ODguNjY3LDMxOSw5NjZ6Ii8+Cjwvc3ZnPg==);
  background-size:65%; 
}

.spotify:hover{
  background-color:#7AB800;
}

.vimeo{
  background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjQxcHgiIGhlaWdodD0iMzZweCIgdmlld0JveD0iLTAuNzM4IC0wLjU2NiA0MSAzNiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAtMC43MzggLTAuNTY2IDQxIDM2IiB4bWw6c3BhY2U9InByZXNlcnZlIj48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMzkuOTgsNy45ODNjLTAuMTc4LDMuODg2LTIuODk3LDkuMjA1LTguMTU3LDE1Ljk2Yy01LjQzOCw3LjA1LTEwLjA0LDEwLjU3NS0xMy44MDMsMTAuNTc1Yy0yLjMzMywwLTQuMzA3LTIuMTUtNS45MTctNi40NTJjLTEuMDc3LTMuOTQ5LTIuMTUxLTcuODktMy4yMjgtMTEuODM1Yy0xLjE5Ni00LjMwNC0yLjQ4MS02LjQ1NS0zLjg1Ni02LjQ1NWMtMC4yOTcsMC0xLjM0NSwwLjYyOC0zLjEzNSwxLjg4M0wwLDkuMjM5YzEuOTczLTEuNzMzLDMuOTE2LTMuNDY2LDUuODI5LTUuMTk5YzIuNjI2LTIuMjcyLDQuNTk5LTMuNDY3LDUuOTE0LTMuNTg2YzMuMTA5LTAuMjk5LDUuMDIyLDEuODI0LDUuNzM5LDYuMzY2YzAuNzc2LDQuOTAxLDEuMzE1LDcuOTQ4LDEuNjEyLDkuMTQyYzAuODk5LDQuMDY3LDEuODgzLDYuMDk0LDIuOTYsNi4wOTRjMC44MzYsMCwyLjA5Mi0xLjMxMSwzLjc2NC0zLjk0MmMxLjY3NS0yLjYyOSwyLjU3LTQuNjMsMi42ODgtNi4wMDVjMC4yMzgtMi4yNzEtMC42NTctMy40MDgtMi42ODgtMy40MDhjLTAuOTU1LDAtMS45NDMsMC4yMS0yLjk1NywwLjYyN2MxLjk3My02LjM5Miw1LjczNS05LjUwMiwxMS4yOTQtOS4zMjFDMzguMjc3LDAuMTI3LDQwLjIxOSwyLjc4NiwzOS45OCw3Ljk4MyIvPjwvc3ZnPg==);
  background-size:65%; 
}

.vimeo:hover{
  background-color:#1ab7ea;
}

.flickr{
  background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI0MnB4IiBoZWlnaHQ9IjIwcHgiIHZpZXdCb3g9Ii0wLjM4OCAtMC45NzUgNDIgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTAuMzg4IC0wLjk3NSA0MiAyMCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTE4LjU4Nyw5LjI5M2MwLDUuMTMyLTQuMTU5LDkuMjkyLTkuMjkzLDkuMjkyQzQuMTYyLDE4LjU4NSwwLDE0LjQyNSwwLDkuMjkzQzAsNC4xNjEsNC4xNjIsMCw5LjI5NCwwQzE0LjQyOSwwLDE4LjU4Nyw0LjE2MSwxOC41ODcsOS4yOTMiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNDAuOTY3LDkuMjkzYzAsNS4xMzItNC4xNTksOS4yOTItOS4yOTQsOS4yOTJjLTUuMTMyLDAtOS4yOTQtNC4xNi05LjI5NC05LjI5MkMyMi4zNzksNC4xNjEsMjYuNTQxLDAsMzEuNjczLDBDMzYuODA4LDAsNDAuOTY3LDQuMTYxLDQwLjk2Nyw5LjI5MyIvPjwvc3ZnPg==);
  background-size:65%; 
}

.flickr:hover{
  background-color:#FF0084;
}
              
            
!

JS

              
                
              
            
!
999px

Console