@font-face {
    font-family: 'spiw';
    src: url('../font/spiw.eot?21992650');
    src: url('../font/spiw.eot?21992650#iefix') format('embedded-opentype'),
         url('../font/spiw.woff2?21992650') format('woff2'),
         url('../font/spiw.woff?21992650') format('woff'),
         url('../font/spiw.ttf?21992650') format('truetype'),
         url('../font/spiw.svg?21992650#spiw') format('svg');
    font-weight: normal;
    font-style: normal;
}
[class^="spiw-icon-"]:before {
    font-family: "spiw";
    font-style: normal;
    font-weight: normal;
    speak: none;

    display: inline-block;
    text-decoration: inherit;
    text-align: center;
    width: 102%;

    /* For safety - reset parent styles, that can break glyph codes*/
    font-variant: normal;
    text-transform: none;

    /* fix buttons height, for twitter bootstrap */
    line-height: 1em;

    /* Font smoothing. That was taken from TWBS */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.spiw-icon-xing:before { content: '\e800'; } /* '' */
.spiw-icon-youtube:before { content: '\e801'; } /* '' */
.spiw-icon-wordpress:before { content: '\e802'; } /* '' */
.spiw-icon-whatsapp:before { content: '\e803'; } /* '' */
.spiw-icon-vine:before { content: '\e804'; } /* '' */
.spiw-icon-twitter:before { content: '\e805'; } /* '' */
.spiw-icon-twitch:before { content: '\e806'; } /* '' */
.spiw-icon-tumblr:before { content: '\e807'; } /* '' */
.spiw-icon-steam:before { content: '\e808'; } /* '' */
.spiw-icon-skype:before { content: '\e809'; } /* '' */
.spiw-icon-reddit:before { content: '\e80a'; } /* '' */
.spiw-icon-pinterest:before { content: '\e80b'; } /* '' */
.spiw-icon-linkedin:before { content: '\e80c'; } /* '' */
.spiw-icon-facebook:before { content: '\e80d'; } /* '' */
.spiw-icon-behance:before { content: '\e80e'; } /* '' */
.spiw-icon-codeopen:before { content: '\e80f'; } /* '' */
.spiw-icon-gplus:before { content: '\e810'; } /* '' */
.spiw-icon-instagram:before { content: '\e811'; } /* '' */
.spiw-icon-jsfiddle:before { content: '\e812'; } /* '' */
.spiw-icon-github-circled:before { content: '\e813'; } /* '' */
.spiw-icon-dropbox:before { content: '\e814'; } /* '' */

/* Widget Syle
/*************
*/
.spiw {
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
    font-size: 50px;
}
.spiw > li {
    width: 1.5em;
    height: 1.5em;
    display: inline-block;
	margin: 0 5px 5px 0;
    padding: 5px;
    list-style: none;
    background-color: #f5f5f5;
}
.spiw > li > a {
    display: block;
    color: #fff;
}
.spiw > li {
    -webkit-transition: all .3s ease-in-out;
  	-moz-transition: all .3s ease-in-out; 	
  	-o-transition: all .3s ease-in-out;
 	transition: all .3s ease-in-out;
}
.spiw > li > i {
    display: block;
}
.spiw > mono:hover > a {
    color: #fff;
}
.spiw > .non-mono:hover > a {
    color: #fff;
    /* Fade effect */
    opacity: 0.75;
}

/* Icon hover colors (brand colors)
/* branding colors from: http://brandcolors.net/
/*************
*/
.spiw-facebook:hover {
	background-color: #3b5998 !important;
}
.spiw-twitter:hover {
	background-color: #00aced !important;
}
.spiw-gplus:hover {
	background-color: #dd4b39 !important;
}
.spiw-pinterest:hover {
	background-color: #cb2027 !important;
}
.spiw-instagram:hover {
	background-color: #517fa4 !important;
}
.spiw-youtube:hover {
	background-color: #bb0000 !important;
}
.spiw-github-circled:hover {
    background-color: #333333 !important;
}
.spiw-linkedin:hover {
    background-color: #0077b5 !important;
}
.spiw-xing:hover {
    background-color: #026466 !important;
}
.spiw-twitch:hover {
    background-color: #6441a5 !important;
}
.spiw-vine:hover {
    background-color: #00b488 !important;
}