.wrapper-social {
 	position: fixed;
 	top: 50%;
 	left: 20px;
 	transform: translate(-50%, -50%);
 }

 .wrapper-social ul {
 	list-style: none;
 }

 .wrapper-social ul li {
 	width: 30px;
 	height: 30px;
 	position: relative;
 	background: #2f55d4;
 	margin: 5px 0;
 	cursor: pointer;
 	border-radius: 3px;
 	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 }

 .wrapper-social ul li .fa {
 	position: absolute;
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%, -50%);
 	font-size: 16px;
 	color: #fff;
 }

 .wrapper-social ul li.facebook,
 ul li.facebook div.slider {
 	background: #3b5998;
 }

 ul li.instagram div.twitter,
 .wrapper-social ul li.twitter {
 	background: #00aced;
 }

 ul li.skype div.slider,
 .wrapper-social ul li.skype {
 	background: #00aff0;
 }

 .wrapper-social ul li.instagram,
 ul li.instagram div.slider {
 	background: #bc2a8d;
 }

 .wrapper-social ul li.phone,
 ul li.phone div.slider {
 	background: #dd4b39;
 }

 .wrapper-social ul li.whatsapp,
 ul li.whatsapp div.slider {
 	background: #25d366;
 }

 .wrapper-social ul li.linkedin,
 ul li.linkedin div.slider {
 	background: #0e76a8;
 }


 .slider {
 	content: "";
 	position: absolute;
 	top: 0;
 	left: 31px;
 	width: 0px;
 	background: #dd4b39;
 	height: 30px;
 	border-radius: 3px;
 	transition: all 0.5s 0.3s ease;
 }

 .slider p {
 	font-family: arial;
 	text-transform: uppercase;
 	font-size: 14px;
 	font-weight: 600;
 	color: #fff;
 	text-align: center;
 	line-height: 30px;
 	opacity: 0;
 	transition: all 0.6s ease;
 }

 ul li:hover .slider {
 	width: 160px;
 	transition: all 0.5s ease;
 }

 ul li:hover .slider p {
 	opacity: 1;
 	transition: all 1s 0.2s ease;
 }

 .opacity-6 {
 	position: absolute;
 	width: 100%;
 	height: 100%;
 	background-color: #000000;
 	opacity: 0.6;
 }

 .margin-right50 {
 	margin-right: 50% !important;
 }