﻿.sharebuttons-wrapper {
	position: relative;
	cursor: pointer;
	overflow: hidden;
}

.sharebuttons-wrapper:hover {
	overflow: visible;
}

.sharebuttons-wrapper .sb-Container {
	display: inline-flex;
    position: absolute;
    opacity: 0;
    padding-top: 87px;
    top: -2px;
    left: -5px;
	transition: all 0.5s;
 }

.sharebuttons-wrapper:hover .sb-Container {
	opacity: 1;
}

/***** Overrides ******/
.sharebuttons-wrapper .sb-Container .liStyle {
	float: none;
}

/***** All Share Buttons ******/
.sb-Container .ulStyle {
	display: inline-block;
	position: relative;
	margin: 0;
	padding: 0;
}

.sb-Container .liStyle {
	display: block;
	width: 40px;
	height: 40px;
	margin: 3px;
	border-radius: 7px;
	float: left;	/* none für Vertikal*/
	transition: background-color 0.4s ease-in-out 0s;
}

.sb-Container .spani {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}

.sb-Container .iconStyle {
	position: absolute;
	font-size: 25px;
	color: #fff;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
}

.sb-Container .facebook			{ background-color: #4a6ea9 }
.sb-Container .facebook:hover	{ background-color: #385a97 }
.sb-Container .twitter			{ background-color: #2aaae0 }
.sb-Container .twitter:hover	{ background-color: #197bbd }
.sb-Container .pinterest		{ background-color: #e30b2c }
.sb-Container .pinterest:hover	{ background-color: #d3132a }
.sb-Container .linkedin			{ background-color: #007bb6 }
.sb-Container .linkedin:hover	{ background-color: #0e67b0 }
.sb-Container .vk				{ background-color: #5b88bd; display: none }
.sb-Container .vk:hover			{ background-color: #688fb2 }
.sb-Container .wa				{ background-color: #37d350 }
.sb-Container .wa:hover			{ background-color: #25e47a }
.sb-Container .viber			{ background-color: #665eaa }
.sb-Container .viber:hover		{ background-color: #675fa7 }
.sb-Container .email			{ background-color: #888888 }
.sb-Container .email:hover		{ background-color: #7a7a7a }
.sb-Container .print			{ background-color: #888888 }
.sb-Container .print:hover		{ background-color: #7a7a7a }

.sb-Container a,
.sb-Container a:active,
.sb-Container a:focus {
	outline: none;
}