@import url(http://fonts.googleapis.com/css?family=Kalam:700,400);
.tooltip {
	position: relative;
	z-index: 999;
}

/* Trigger text */

.tooltip-item {
	font-weight: bold;
	cursor: pointer;
}

.tooltip-content {
	position: absolute;
	font-size: 16px;
	background: #fed136;
	z-index: 9999;
	width: 280px;
	bottom: 100%;
	left: 50%;
	margin: 0 0 105px -140px;
	padding: 25px;
	text-align: left;
	border-radius: 10px/50%;
	color: #000;
	opacity: 0;
	cursor: default;
	pointer-events: none;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
}

.tooltip-turnright .tooltip-content {
	-webkit-transform: translate3d(0,50px,0) rotate3d(1,1,1,6deg);
	transform: translate3d(0,50px,0) rotate3d(1,1,1,6deg);
}

.tooltip-turnleft .tooltip-content {
	-webkit-transform: translate3d(0,50px,0) rotate3d(1,1,1,-6deg);
	transform: translate3d(0,50px,0) rotate3d(1,1,1,-6deg);
}

.tooltip:hover .tooltip-content {
	opacity: 1;
	pointer-events: auto;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

/* Arrow */

.tooltip-content::after {
	content: '';
	position: absolute;
	width: 60px;
	height: 120px;
	top: 100%;
	background: url(../img/tooltip3.svg) no-repeat center center;
	background-size: 100%;
	-webkit-transform-origin: 50% 0;
	transform-origin: 50% 0;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}

.tooltip-turnright .tooltip-content::after {
	left: 25%;
	-webkit-transform: scale3d(-1,1,1) rotate3d(1,1,1,25deg) translate3d(0,-15px,0);
	transform: scale3d(-1,1,1) rotate3d(1,1,1,25deg) translate3d(0,-15px,0);
}

.tooltip-turnleft .tooltip-content::after {
	right: 25%;
	-webkit-transform: rotate3d(1,1,1,25deg) translate3d(0,-15px,0);
	transform: rotate3d(1,1,1,25deg) translate3d(0,-15px,0);
}

.tooltip-turnright:hover .tooltip-content::after {
	-webkit-transform: scale3d(-1,1,1) rotate3d(1,1,1,0) translate3d(0,-5px,0);
	transform: scale3d(-1,1,1) rotate3d(1,1,1,0) translate3d(0,-5px,0);
}

.tooltip-turnleft:hover .tooltip-content::after {
	-webkit-transform: rotate3d(1,1,1,0) translate3d(0,-5px,0);
	transform: rotate3d(1,1,1,0) translate3d(0,-5px,0);
}