/* ===================================================== */
/* Icons
/* ===================================================== */

/* Layout icons, keep at the top */
.bigBtn i:before,
.projectBtn i:before,
.categories li:before,
.pagination .prev:before,
.pagination .next:before,
.alert-button:before,
.tweet_list li:before,
.search-btn:before {
    font-family: 'icomoon';
    content: attr(data-icon);
    speak: none;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

.social-icons {
    overflow: visible;
}

.social-icons .section-title {
    margin-right: 20px
}

.social-icons .column {
    font-size: 16px;
    margin: .5em 1em .5em 0;
}

/* Icons for buttons */
.button i,
button i,
input[type="submit"] i,
input[type="reset"] i,
input[type="button"] i {
    display: inline;
    margin-right: 10px;
}

li {
    position: relative;
}

li i {
    display: inline;
    padding-right: 10px;
    margin-bottom: 5px;
}


/* Icons .color-bg */

.social {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    color: white;
    display: inline-block;
    float: left;    
    padding: 12px;
    margin: 0 5px 5px 0;
    -webkit-transition: 0.5s linear;
    -moz-transition: 0.5s linear;
    -ms-transition: 0.5s linear;
    -o-transition: 0.5s linear;
    transition:  0.5s linear;
    cursor: pointer;
}

.social-icons {
    margin: 0
}

.social-icons i {
    float: left;
}

.social-icons .social.gray {
    padding: 12px;
    margin: 0 0 4px 0;
}

.social.gray {
    color: gray;
    font-size: 15px;
    margin: 0;
}

.social.opaque {
    background: none;
}

.social.opaque:hover {
    color: #fff;
}

.social.opaque:hover {
    color: white;
}

.social.gray-bg {
    background: rgb(204, 204, 204);
}

.social.white:hover {
    color: gray;
}

.social.gray:hover {
    color: #555;
}

.social.opaque.icon-mail:hover,
.social.color-bg.icon-mail,
.social.gray-bg.icon-mail:hover {
    background: purple; 
}

.social.opaque.icon-share:hover,
.social.color-bg.icon-share,
.social.gray-bg.icon-share:hover {
    background: rgb(60,144,56);
}

.social.opaque.icon-html5:hover,
.social.color-bg.icon-html5,
.social.gray-bg.icon-html5:hover {
    background: orange;
}

.social.opaque.icon-twitter:hover,
.social.color-bg.icon-twitter,
.social.gray-bg.icon-twitter:hover {
    background: #00cafb;
}

.social.opaque.icon-flickr:hover,
.social.color-bg.icon-flickr,
.social.gray-bg.icon-flickr:hover {
    background: #ff0084;
}

.social.opaque.icon-paypal:hover,
.social.color-bg.icon-paypal,
.social.gray-bg.icon-paypal:hover {
    background: #336699;
}

.social.opaque.icon-google:hover,
.social.color-bg.icon-google,
.social.gray-bg.icon-google:hover {
    background: #df4224;
}

.social.opaque.icon-google-plus:hover,
.social.color-bg.icon-google-plus,
.social.gray-bg.icon-google-plus:hover {
    background: #df4224;
}

.social.opaque.icon-vimeo:hover,
.social.color-bg.icon-vimeo,
.social.gray-bg.icon-vimeo:hover {
    background: #59a4c9; 
}

.social.opaque.icon-wordpress:hover,
.social.color-bg.icon-wordpress,
.social.gray-bg.icon-wordpress:hover {
    background: #04a4cc; 
}

.social.opaque.icon-github:hover,
.social.color-bg.icon-github,
.social.gray-bg.icon-github:hover {
    background: rgb(84,169,189); 
}

.social.opaque.icon-github-2:hover,
.social.color-bg.icon-github-2,
.social.gray-bg.icon-github-2:hover {
    background: rgb(84,169,189); 
}

.social.opaque.icon-github-3:hover,
.social.color-bg.icon-github-3,
.social.gray-bg.icon-github-3:hover {
    background: rgb(84,169,189); 
}

.social.opaque.icon-google-drive:hover,
.social.color-bg.icon-google-drive,
.social.gray-bg.icon-google-drive:hover {
    background: purple; 
}

.social.opaque.icon-steam:hover,
.social.color-bg.icon-steam,
.social.gray-bg.icon-steam:hover {
    background: gray; 
}

.social.opaque.icon-forrst:hover,
.social.color-bg.icon-forrst,
.social.gray-bg.icon-forrst:hover {
    background: rgb(86,152,104); 
}

.social.opaque.icon-dribbble:hover,
.social.color-bg.icon-dribbble,
.social.gray-bg.icon-dribbble:hover {
    background: #e3558b; 
}

.social.opaque.icon-picassa:hover,
.social.color-bg.icon-picassa,
.social.gray-bg.icon-picassa:hover {
    background: #9864AE; 
}

.social.opaque.icon-blogger:hover,
.social.color-bg.icon-blogger,
.social.gray-bg.icon-blogger:hover {
    background: rgb(251,145,18); 
}

.social.opaque.icon-facebook:hover,
.social.color-bg.icon-facebook,
.social.gray-bg.icon-facebook:hover {
    background: rgb(59,89,194); 
}

.social.opaque.icon-feed:hover,
.social.color-bg.icon-feed,
.social.gray-bg.icon-feed:hover {
    background: rgb(247,149,56); 
}

.social.opaque.icon-youtube:hover,
.social.color-bg.icon-youtube,
.social.gray-bg.icon-youtube:hover {
    background: rgb(196,48,43); 
}

.social.opaque.icon-deviantart:hover,
.social.color-bg.icon-deviantart,
.social.gray-bg.icon-deviantart:hover {
    background: rgb(97,117,102); 
}

.social.opaque.icon-apple:hover,
.social.color-bg.icon-apple,
.social.gray-bg.icon-apple:hover {
    background: rgb(165,165,165); 
}

.social.opaque.icon-tumblr:hover,
.social.color-bg.icon-tumblr,
.social.gray-bg.icon-tumblr:hover {
    background: #425F7D; 
}

.social.opaque.icon-yahoo:hover,
.social.color-bg.icon-yahoo,
.social.gray-bg.icon-yahoo:hover {
    background: #703285; 
}

.social.opaque.icon-android:hover,
.social.color-bg.icon-android,
.social.gray-bg.icon-android:hover {
    background: rgb(151,204,0); 
}


.social.opaque.icon-soundcloud:hover,
.social.color-bg.icon-soundcloud,
.social.gray-bg.icon-soundcloud:hover {
    background: #FC8531; 
}

.social.opaque.icon-skype:hover,
.social.color-bg.icon-skype,
.social.gray-bg.icon-skype:hover {
    background: rgb(0,175,240); 
}

.social.opaque.icon-reddit:hover,
.social.color-bg.icon-reddit,
.social.gray-bg.icon-reddit:hover {
    background: #F85507; 
}

.social.opaque.icon-linkedin:hover,
.social.color-bg.icon-linkedin,
.social.gray-bg.icon-linkedin:hover {
    background: rgb(89,164,201); 
}

.social.opaque.icon-lastfm:hover,
.social.color-bg.icon-lastfm,
.social.gray-bg.icon-lastfm:hover {
    background: rgb(200,14,20); 
}

.social.opaque.icon-delicious:hover,
.social.color-bg.icon-delicious,
.social.gray-bg.icon-delicious:hover {
    background: #3373D4; 
}

.social.opaque.icon-stumbleupon:hover,
.social.color-bg.icon-stumbleupon,
.social.gray-bg.icon-stumbleupon:hover {
    background: #5ACF60; 
}

.social.opaque.icon-pinterest:hover,
.social.color-bg.icon-pinterest,
.social.gray-bg.icon-pinterest:hover {
    background: #CE2A2B; 
}

.social.opaque.icon-stackoverflow:hover,
.social.color-bg.icon-stackoverflow,
.social.gray-bg.icon-stackoverflow:hover {
    background: #FF8A32; 
}

.social.opaque.icon-xing:hover,
.social.color-bg.icon-xing,
.social.gray-bg.icon-xing:hover {
    background: #D6D00A; 
}

.social.color-bg:hover {
    background: gray;
}