/* outer wrapper */
#share-wrapper {
	position: fixed;
	right: 215px;
	z-index: 0;
	top: 15%;
}

/* the list */
#share-wrapper li.button-wrap {
	display: block;
	width: 40px;
}

/* share link */
#share-wrapper li.button-wrap > a {
	padding-left: 25px; 
	height: 40px;
	display: block;
	line-height: 40px;
	font-weight: bold;
	color: #444;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
}

/* background image for each link */
#share-wrapper .facebook > a{
	background: url(buttons/facebook.jpg) no-repeat right;
}
#share-wrapper .line-social > a{
	background: url(buttons/line.jpg) no-repeat right;
}
#share-wrapper .instagram > a{
	background: url(buttons/instagram.jpg) no-repeat right;
}
#share-wrapper .weixin > a{
	background: url(buttons/weixin.jpg) no-repeat right;
}
#share-wrapper .facebook > a:hover{
	background: url(buttons/facebook-hover.jpg) no-repeat right;
}
#share-wrapper .line-social > a:hover{
	background: url(buttons/line-hover.jpg) no-repeat right;
}
#share-wrapper .instagram > a:hover{
	background: url(buttons/instagram-hover.jpg) no-repeat right;
}
#share-wrapper .weixin > a:hover{
	background: url(buttons/weixin-hover.jpg) no-repeat right;
}


/* small screen */
@media all and (max-width: 767px) {
	#share-wrapper {
		/*bottom: 0;*/
		bottom: 0;
		top: 90%;
		left: 0;
		position: fixed;
		padding: 5px 5px 0px 5px;
		background: #000000;
		width: 100%;
		margin: 0px;
		-webkit-box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.15);
		-moz-box-shadow: 0 -1px 4px rgba(0,0,0,0.15);
		-o-box-shadow: 0 -1px 4px rgba(0,0,0,0.15);
		box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.15);
		text-align: center;
	}
	#share-wrapper li.button-wrap {
		display: inline-block;
		width: 40px!important;
		margin: 0px;
		padding: 0px;
		margin-left:0px!important;
	}
	#share-wrapper li.button-wrap > a {
		height: 40px;
		display: inline-block;
		text-indent: -10000px;
		width: 40px;
		padding-right: 0;
		float: left;
	}
}









@media screen and (min-width: 767px){
#share-wrapper {
	right: 0;
}
}