.social {
  position: fixed;
  bottom: 0%;
  left:0%!important;
  width: 4%;
  z-index: 9999;
}
.social ul {
  padding: 0px;
  -webkit-transform: translate(-270px, 0);
  -moz-transform: translate(-270px, 0);
  -ms-transform: translate(-270px, 0);
  -o-transform: translate(-270px, 0);
  transform: translate(-270px, 0);
}
.social ul li {
  display: block;
  margin: 5px;
  width: 310px;
  text-align: right;
  padding: 10px;
  -webkit-border-radius: 0 30px 30px 0;
  -moz-border-radius: 0 30px 30px 0;
  border-radius: 0 30px 30px 0;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}
.w3_twitter{
	background:#1da1f2;
}
.w3_facebook{
	background:#3b5998;
}
.w3_facebook i{
	color:#3b5998!important;
}
.w3_youtube{
	background:#bb0000;	
}
.w3_youtube i{
	color:#bb0000!important;
}
.w3_instagram{
	background:#815dc7;
}
.w3_instagram i{
	color:#815dc7!important;
}
.w3_pinterest{
	background:#e12027;
}
.w3_pinterest i{
	color:#e12027!important;
}
.w3_rss{
	background:#ffc338;
}
.w3_rss i{
	color:#ffc338!important;
}
.w3_foursquare{
	background:#e84974;
}
.w3_foursquare i{
	color:#e84974!important;
}
.w3_dribbble{
	background:#ea4c89;
}
.w3_g_plus{
	background:#dd4b39;
}
.w3_twitter:hover{
	background:#54BAF2;
}
.w3_facebook:hover{
	background:#6187D5;
}
.w3_dribbble:hover{
	background:#EC6D9E;
}
.w3_g_plus:hover{
	background:#EA6A5B;
}
.social ul li:hover {
  -webkit-transform: translate(110px, 0);
  -moz-transform: translate(110px, 0);
  -ms-transform: translate(110px, 0);
  -o-transform: translate(110px, 0);
  transform: translate(110px, 0);
}
.social ul li a{
	color:#212121;
}
.social ul li:hover a {
  color: #fff;
  text-decoration: none;
}
.social ul li:hover i {
  color: #fff!important;
  background: rgba(0, 0, 0, 0.36);
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}
.social ul li i {
	margin-left: 10px;
	color: #212121;
	padding: 10px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	width: 35px;
	height: 35px;
	font-size: 15px;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	text-align: center;
	background: #fff;
}