/* --------------- Sensational Fix Flat Social Icons Author: Jorge Calvo GarcĂ­a Please read the license agreement. --------------- */ @charset "UTF-8"; /* CSS Document */ /* --------------- TWITTER */ .twitter_light { display: inline-block; position: relative; text-indent: -9999px; width: 30px; height: 30px; background:url(icons/social_icons_light.svg) no-repeat; } .twitter_light span { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background:url(icons/social_icons_light.svg) no-repeat; background-position: -30px 0; opacity: 0; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; } .twitter_light:hover span { opacity: 1; } /* --------------- LINKEDIN */ .linkedin_light { display: inline-block; position: relative; text-indent: -9999px; width: 30px; height: 30px; background:url(icons/social_icons_light.svg) no-repeat; background-position:0 -30px; } .linkedin_light span { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background:url(icons/social_icons_light.svg) no-repeat; background-position: -30px -30px; opacity: 0; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; } .linkedin_light:hover span { opacity: 1; } /* --------------- DROPBOX */ .dropbox_light { display: inline-block; position: relative; text-indent: -9999px; width: 30px; height: 30px; background:url(icons/social_icons_light.svg) no-repeat; background-position:0 -60px; } .dropbox_light span { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background:url(icons/social_icons_light.svg) no-repeat; background-position: -30px -60px; opacity: 0; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; } .dropbox_light:hover span { opacity: 1; } /* --------------- Pinterest */ .pinterest_light { display: inline-block; position: relative; text-indent: -9999px; width: 30px; height: 30px; background:url(icons/social_icons_light.svg) no-repeat; background-position:0 -90px; } .pinterest_light span { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background:url(icons/social_icons_light.svg) no-repeat; background-position: -30px -90px; opacity: 0; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; } .pinterest_light:hover span { opacity: 1; } /* --------------- Blogger */ .blogger_light { display: inline-block; position: relative; text-indent: -9999px; width: 30px; height: 30px; background:url(icons/social_icons_light.svg) no-repeat; background-position:0 -120px; } .blogger_light span { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background:url(icons/social_icons_light.svg) no-repeat; background-position: -30px -120px; opacity: 0; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; } .blogger_light:hover span { opacity: 1; } /* --------------- Lastfm */ .lastfm_light { display: inline-block; position: relative; text-indent: -9999px; width: 30px; height: 30px; background:url(icons/social_icons_light.svg) no-repeat; background-position:0 -150px; } .lastfm_light span { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background:url(icons/social_icons_light.svg) no-repeat; background-position: -30px -150px; opacity: 0; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; } .lastfm_light:hover span { opacity: 1; } /* --------------- Facebook */ .facebook_light { display: inline-block; position: relative; text-indent: -9999px; width: 30px; height: 30px; background:url(icons/social_icons_light.svg) no-repeat; background-position:0 -180px; } .facebook_light span { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background:url(icons/social_icons_light.svg) no-repeat; background-position: -30px -180px; opacity: 0; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; } .facebook_light:hover span { opacity: 1; } /* --------------- Dribbble */ .dribbble_light{ display: inline-block; position: relative; text-indent: -9999px; width: 30px; height: 30px; background:url(icons/social_icons_light.svg) no-repeat; background-position:0 -210px; } .dribbble_light span { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background:url(icons/social_icons_light.svg) no-repeat; background-position: -30px -210px; opacity: 0; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; } .dribbble_light:hover span { opacity: 1; } /* --------------- Soundcloud */ .soundcloud_light{ display: inline-block; position: relative; text-indent: -9999px; width: 30px; height: 30px; background:url(icons/social_icons_light.svg) no-repeat; background-position:0 -240px; } .soundcloud_light span { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background:url(icons/social_icons_light.svg) no-repeat; background-position: -30px -240px; opacity: 0; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; } .soundcloud_light:hover span { opacity: 1; } /* --------------- Google plus */ .googleplus_light{ display: inline-block; position: relative; text-indent: -9999px; width: 30px; height: 30px; background:url(icons/social_icons_light.svg) no-repeat; background-position:0 -270px; } .googleplus_light span { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background:url(icons/social_icons_light.svg) no-repeat; background-position: -30px -270px; opacity: 0; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; } .googleplus_light:hover span { opacity: 1; } /* --------------- Google plus */ .skype_light{ display: inline-block; position: relative; text-indent: -9999px; width: 30px; height: 30px; background:url(icons/social_icons_light.svg) no-repeat; background-position:0 -300px; } .skype_light span { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background:url(icons/social_icons_light.svg) no-repeat; background-position: -30px -300px; opacity: 0; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; } .skype_light:hover span { opacity: 1; } /* --------------- Wordpress */ .wordpress_light{ display: inline-block; position: relative; text-indent: -9999px; width: 30px; height: 30px; background:url(icons/social_icons_light.svg) no-repeat; background-position:0 -330px; } .wordpress_light span { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background:url(icons/social_icons_light.svg) no-repeat; background-position: -30px -330px; opacity: 0; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; } .wordpress_light:hover span { opacity: 1; } /* --------------- Youtube */ .youtube_light{ display: inline-block; position: relative; text-indent: -9999px; width: 30px; height: 30px; background:url(icons/social_icons_light.svg) no-repeat; background-position:0 -360px; } .youtube_light span { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background:url(icons/social_icons_light.svg) no-repeat; background-position: -30px -360px; opacity: 0; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; } .youtube_light:hover span { opacity: 1; } /* --------------- yahoo */ .yahoo_light{ display: inline-block; position: relative; text-indent: -9999px; width: 30px; height: 30px; background:url(icons/social_icons_light.svg) no-repeat; background-position:0 -390px; } .yahoo_light span { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background:url(icons/social_icons_light.svg) no-repeat; background-position: -30px -390px; opacity: 0; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; } .yahoo_light:hover span { opacity: 1; } /* --------------- Digg */ .digg_light{ display: inline-block; position: relative; text-indent: -9999px; width: 30px; height: 30px; background:url(icons/social_icons_light.svg) no-repeat; background-position:0 -420px; } .digg_light span { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background:url(icons/social_icons_light.svg) no-repeat; background-position: -30px -420px; opacity: 0; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; } .digg_light:hover span { opacity: 1; } /* --------------- Youtube Classic */ .youtubeclassic_light{ display: inline-block; position: relative; text-indent: -9999px; width: 30px; height: 30px; background:url(icons/social_icons_light.svg) no-repeat; background-position:0 -450px; } .youtubeclassic_light span { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background:url(icons/social_icons_light.svg) no-repeat; background-position: -30px -450px; opacity: 0; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; } .youtubeclassic_light:hover span { opacity: 1; } /* --------------- windowslive */ .windowslive_light{ display: inline-block; position: relative; text-indent: -9999px; width: 30px; height: 30px; background:url(icons/social_icons_light.svg) no-repeat; background-position:0 -480px; } .windowslive_light span { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background:url(icons/social_icons_light.svg) no-repeat; background-position: -30px -480px; opacity: 0; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; } .windowslive_light:hover span { opacity: 1; } /* --------------- stumbleupon */ .stumbleupon_light{ display: inline-block; position: relative; text-indent: -9999px; width: 30px; height: 30px; background:url(icons/social_icons_light.svg) no-repeat; background-position:0 -510px; } .stumbleupon_light span { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background:url(icons/social_icons_light.svg) no-repeat; background-position: -30px -510px; opacity: 0; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; } .stumbleupon_light:hover span { opacity: 1; } /* --------------- tumblr */ .tumblr_light{ display: inline-block; position: relative; text-indent: -9999px; width: 30px; height: 30px; background:url(icons/social_icons_light.svg) no-repeat; background-position:0 -540px; } .tumblr_light span { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background:url(icons/social_icons_light.svg) no-repeat; background-position: -30px -540px; opacity: 0; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; } .tumblr_light:hover span { opacity: 1; } /* --------------- appdev */ .appdev_light{ display: inline-block; position: relative; text-indent: -9999px; width: 30px; height: 30px; background:url(icons/social_icons_light.svg) no-repeat; background-position:0 -570px; } .appdev_light span { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background:url(icons/social_icons_light.svg) no-repeat; background-position: -30px -570px; opacity: 0; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; } .appdev_light:hover span { opacity: 1; } /* --------------- ebay */ .ebay_light{ display: inline-block; position: relative; text-indent: -9999px; width: 30px; height: 30px; background:url(icons/social_icons_light.svg) no-repeat; background-position:0 -600px; } .ebay_light span { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background:url(icons/social_icons_light.svg) no-repeat; background-position: -30px -600px; opacity: 0; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; } .ebay_light:hover span { opacity: 1; } /* --------------- apple */ .apple_light{ display: inline-block; position: relative; text-indent: -9999px; width: 30px; height: 30px; background:url(icons/social_icons_light.svg) no-repeat; background-position:0 -630px; } .apple_light span { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background:url(icons/social_icons_light.svg) no-repeat; background-position: -30px -630px; opacity: 0; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; } .apple_light:hover span { opacity: 1; } /* --------------- amazon */ .amazon_light{ display: inline-block; position: relative; text-indent: -9999px; width: 30px; height: 30px; background:url(icons/social_icons_light.svg) no-repeat; background-position:0 -660px; } .amazon_light span { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background:url(icons/social_icons_light.svg) no-repeat; background-position: -30px -660px; opacity: 0; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; } .amazon_light:hover span { opacity: 1; } /* --------------- picassa */ .picassa_light{ display: inline-block; position: relative; text-indent: -9999px; width: 30px; height: 30px; background:url(icons/social_icons_light.svg) no-repeat; background-position:0 -690px; } .picassa_light span { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background:url(icons/social_icons_light.svg) no-repeat; background-position: -30px -690px; opacity: 0; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; } .picassa_light:hover span { opacity: 1; } /* --------------- Behance */ .behance_light{ display: inline-block; position: relative; text-indent: -9999px; width: 30px; height: 30px; background:url(icons/social_icons_light.svg) no-repeat; background-position:0 -720px; } .behance_light span { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background:url(icons/social_icons_light.svg) no-repeat; background-position: -30px -720px; opacity: 0; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; } .behance_light:hover span { opacity: 1; } /* --------------- Android */ .android_light{ display: inline-block; position: relative; text-indent: -9999px; width: 30px; height: 30px; background:url(icons/social_icons_light.svg) no-repeat; background-position:0 -750px; } .android_light span { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background:url(icons/social_icons_light.svg) no-repeat; background-position: -30px -750px; opacity: 0; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; } .android:hover span { opacity: 1; } /* --------------- Paypal */ .paypal_light{ display: inline-block; position: relative; text-indent: -9999px; width: 30px; height: 30px; background:url(icons/social_icons_light.svg) no-repeat; background-position:0 -780px; } .paypal_light span { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background:url(icons/social_icons_light.svg) no-repeat; background-position: -30px -780px; opacity: 0; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; } .paypal_light:hover span { opacity: 1; } /* --------------- Vimeo */ .vimeo_light{ display: inline-block; position: relative; text-indent: -9999px; width: 30px; height: 30px; background:url(icons/social_icons_light.svg) no-repeat; background-position:0 -810px; } .vimeo_light span { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background:url(icons/social_icons_light.svg) no-repeat; background-position: -30px -810px; opacity: 0; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; } .vimeo_light:hover span { opacity: 1; } /* --------------- Instagram */ .instagram_light{ display: inline-block; position: relative; text-indent: -9999px; width: 30px; height: 30px; background:url(icons/social_icons_light.svg) no-repeat; background-position:0 -840px; } .instagram_light span { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background:url(icons/social_icons_light.svg) no-repeat; background-position: -30px -840px; opacity: 0; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; } .instagram_light:hover span { opacity: 1; } /* --------------- deviantart */ .deviantart_light{ display: inline-block; position: relative; text-indent: -9999px; width: 30px; height: 30px; background:url(icons/social_icons_light.svg) no-repeat; background-position:0 -870px; } .deviantart_light span { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background:url(icons/social_icons_light.svg) no-repeat; background-position: -30px -870px; opacity: 0; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; } .deviantart_light:hover span { opacity: 1; } /* --------------- Flickr */ .flickr_light{ display: inline-block; position: relative; text-indent: -9999px; width: 30px; height: 30px; background:url(icons/social_icons_light.svg) no-repeat; background-position:0 -900px; } .flickr_light span { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background:url(icons/social_icons_light.svg) no-repeat; background-position: -30px -900px; opacity: 0; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; } .flickr_light:hover span { opacity: 1; } /* --------------- Myspace */ .myspace_light{ display: inline-block; position: relative; text-indent: -9999px; width: 30px; height: 30px; background:url(icons/social_icons_light.svg) no-repeat; background-position:0 -930px; } .myspace_light span { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background:url(icons/social_icons_light.svg) no-repeat; background-position: -30px -930px; opacity: 0; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; } .myspace_light:hover span { opacity: 1; } /* --------------- Google Drive */ .googledrive_light{ display: inline-block; position: relative; text-indent: -9999px; width: 30px; height: 30px; background:url(icons/social_icons_light.svg) no-repeat; background-position:0 -960px; } .googledrive_light span { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background:url(icons/social_icons_light.svg) no-repeat; background-position: -30px -960px; opacity: 0; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; } .googledrive_light:hover span { opacity: 1; } /* --------------- RSS */ .rss_light{ display: inline-block; position: relative; text-indent: -9999px; width: 30px; height: 30px; background:url(icons/social_icons_light.svg) no-repeat; background-position:0 -990px; } .rss_light span { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background:url(icons/social_icons_light.svg) no-repeat; background-position: -30px -990px; opacity: 0; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; } .rss_light:hover span { opacity: 1; } /* --------------- themeforest */ .themeforest_light{ display: inline-block; position: relative; text-indent: -9999px; width: 30px; height: 30px; background:url(icons/social_icons_light.svg) no-repeat; background-position:0 -1020px; } .themeforest_light span { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background:url(icons/social_icons_light.svg) no-repeat; background-position: -30px -1020px; opacity: 0; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; } .themeforest_light:hover span { opacity: 1; } /* --------------- Delicio.us */ .delicious_light{ display: inline-block; position: relative; text-indent: -9999px; width: 30px; height: 30px; background:url(icons/social_icons_light.svg) no-repeat; background-position:0 -1050px; } .delicious_light span { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background:url(icons/social_icons_light.svg) no-repeat; background-position: -30px -1050px; opacity: 0; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; } .delicious_light:hover span { opacity: 1; }