
/* -----------------------------------------
Item: Social Sprites
Author: The Fireworks Police
Version: 2.4
Bought by dydwn600/Codecanyon
----------------------------------------- */

/* Browser Reset
================================================== */

/* Social Bar
================================================== */

.socialbar {
width: 100%;
min-height: 40px;
background-color: #FFFFFF;
padding: 0;
font-size: 0;
z-index: 999;
}

.socialbar:after {
clear: left;
content: " ";
}

.socialbar_transparent {
width: 100%;
min-height: 40px;
padding: 0;
font-size: 0;
z-index: 999;
}

.socialbar_transparent:after {
clear: left;
content: " ";
}

.borderless .ss li { border: none; }
.borderless .ss li:first-child { border: none; }

.borderless li { border: none; }
.borderless li:first-child { border: none; }

/* Social Sprites: Shapes
================================================== */

.sssquare { border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; }
.sscircle { overflow: visible !important; }
.sscircle li { border-radius: 100%; -moz-border-radius: 100%; -webkit-border-radius: 100%; background-color: #FFF;
-webkit-box-shadow:0 2px rgba(0,0,0,0.3);
-moz-box-shadow: 0 2px rgba(0,0,0,0.3);
box-shadow:0 2px rgba(0,0,0,0.3);

margin-right: 5px !important;

-webkit-transition: background-color 0.2s linear;
-moz-transition: background-color 0.2s linear;
-o-transition: background-color all 0.2s linear;
-ms-transition: background-color all 0.2s linear;
transition: background-color all 0.2s linear; }

.sscircle li:active, .sscircle li a:active { border-radius: 100% !important; -moz-border-radius: 100% !important; -webkit-border-radius: 100% !important; }

/* Social Sprites: General Listing
================================================== */

.ss {
width: auto;
margin: 0;
padding: 0;
text-align: center;
overflow: hidden;
}

.ss li {
display: inline-block;
padding: 0;
border-right: 1px solid rgba(0,0,0,0.2);
background-image:url("http://static.tumblr.com/22rx6wh/cmLmtr3ni/socialsprite.png");
background-size: 40px ;

-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}

.ss li:hover {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}

.ss li:first-child {
border-left: 1px solid rgba(0,0,0,0.2);
}

.ss li a {
display: block;
text-indent: -9999;
height: 40px;
width: 40px;
}

.ss li a:active {
box-shadow: inset 0 0 10px rgba(0,0,0,0.3), inset 0 0 10px rgba(0,0,0,0.3);
-webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.3), inset 0 0 10px rgba(0,0,0,0.3);
-moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.3), inset 0 0 10px rgba(0,0,0,0.3);
}

/* Social Sprites: Icon Classes
================================================== */

.ss li.digg { background-position: 0 0; }
.ss li.digg:hover { background-position: 0 -40px; }
.ss li.dribbble { background-position: 0 -80px; }
.ss li.dribbble:hover { background-position: 0 -120px; }
.ss li.facebook { background-position: 0 -160px; }
.ss li.facebook:hover { background-position: 0 -200px; }
.ss li.flickr { background-position: 0 -240px; }
.ss li.flickr:hover { background-position: 0 -280px; }
.ss li.forrst { background-position: 0 -320px; }
.ss li.forrst:hover { background-position: 0 -360px; }
.ss li.googleplus { background-position: 0 -400px; }
.ss li.googleplus:hover { background-position: 0 -440px; }
.ss li.html5 { background-position: 0 -480px; }
.ss li.html5:hover { background-position: 0 -520px; }
.ss li.icloud { background-position: 0 -560px; }
.ss li.icloud:hover { background-position: 0 -600px; }
.ss li.lastfm { background-position: 0 -640px; }
.ss li.lastfm:hover { background-position: 0 -680px; }
.ss li.linkedin { background-position: 0 -720px; }
.ss li.linkedin:hover { background-position: 0 -760px; }
.ss li.myspace { background-position: 0 -800px; }
.ss li.myspace:hover { background-position: 0 -840px; }
.ss li.paypal { background-position: 0 -880px; }
.ss li.paypal:hover { background-position: 0 -920px; }
.ss li.picasa { background-position: 0 -960px; }
.ss li.picasa:hover { background-position: 0 -1000px; }
.ss li.pinterest { background-position: 0 -1040px; }
.ss li.pinterest:hover { background-position: 0 -1080px; }
.ss li.reddit { background-position: 0 -1120px; }
.ss li.reddit:hover { background-position: 0 -1160px; }
.ss li.rss { background-position: 0 -1200px; }
.ss li.rss:hover { background-position: 0 -1240px; }
.ss li.skype { background-position: 0 -1280px; }
.ss li.skype:hover { background-position: 0 -1320px; }
.ss li.stumbleupon { background-position: 0 -1360px; }
.ss li.stumbleupon:hover { background-position: 0 -1400px; }
.ss li.tumblr { background-position: 0 -1440px; }
.ss li.tumblr:hover { background-position: 0 -1480px; }
.ss li.twitter { background-position: 0 -1520px; }
.ss li.twitter:hover { background-position: 0 -1560px; }
.ss li.vimeo { background-position: 0 -1600px; }
.ss li.vimeo:hover { background-position: 0 -1640px; }
.ss li.wordpress { background-position: 0 -1680px; }
.ss li.wordpress:hover { background-position: 0 -1720px; }
.ss li.yahoo { background-position: 0 -1760px; }
.ss li.yahoo:hover { background-position: 0 -1800px; }
.ss li.youtube { background-position: 0 -1840px; }
.ss li.youtube:hover { background-position: 0 -1880px; }

.ss li.github { background-position: 0 -1920px; }
.ss li.github:hover { background-position: 0 -1960px; }
.ss li.behance { background-position: 0 -2000px; }
.ss li.behance:hover { background-position: 0 -2040px; }
.ss li.yelp { background-position: 0 -2080px; }
.ss li.yelp:hover { background-position: 0 -2120px; }
.ss li.mail { background-position: 0 -2160px; }
.ss li.mail:hover { background-position: 0 -2200px; }
.ss li.instagram { background-position: 0 -2240px; }
.ss li.instagram:hover { background-position: 0 -2280px; }
.ss li.foursquare { background-position: 0 -2320px; }
.ss li.foursquare:hover { background-position: 0 -2360px; }
.ss li.zerply { background-position: 0 -2400px; }
.ss li.zerply:hover { background-position: 0 -2440px; }
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700|Open+Sans:300,600,700);
 body{font-family:lato;}