.tooltip {
	display: inline;
	position: relative;
	z-index: 4;
	cursor: pointer;
}
.tooltip:hover {
	z-index: 6;
}
/* Gap filler */
.tooltip::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 20px;
	bottom: 100%;
	left: 50%;
	pointer-events: none;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

.tooltip:hover::after {
	pointer-events: auto;
}

/* Tooltip */
.tooltip-content {
	position: absolute;
	z-index: 9999;
	width: 150px;
	left: 50%;
	bottom: 100%;
	font-size: 12px;
	line-height: 1.6;
	font-weight: 400;
	color: #3D4247;
	background: transparent;
	opacity: 0;
	margin: 0 0 10px -75px;
	cursor: default;
	pointer-events: none;
	-webkit-font-smoothing: antialiased;
	-webkit-transition: opacity 0.3s 0.3s;
	transition: opacity 0.3s 0.3s;
}

.tooltipBig .tooltip-content {
	width: 400px;
	margin: 0 0 10px -200px;
}
.tooltipLifeHappens .tooltip-content {
	width: 250px;
	margin: 0 0 10px -200px;
}

.tooltip:hover .tooltip-content {
	opacity: 1;
	pointer-events: auto;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}

.tooltip-content span {
	display: block;
}

.tooltip-text {
	border-bottom: 6px solid #A1A5AB;
	overflow: hidden;
	-webkit-transform: scale3d(0,1,1);
	transform: scale3d(0,1,1);
	-webkit-transition: -webkit-transform 0.3s 0.3s;
	transition: transform 0.3s 0.3s;
}

.tooltip:hover .tooltip-text {
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
}

.tooltip-innerQuantity, .tooltip-innerChildren, .tooltip-innerBabies, .tooltip-innerRatePlan, .tooltip-innerDefault, .tooltip-innerProduct, .tooltip-innerInfo {
	background: #F4F5F7;
	border: 1px solid #F4F5F7;
	padding: 10px;
	text-transform: none;
	-webkit-transform: translate3d(0,100%,0);
	transform: translate3d(0,100%,0);
	webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}

.tooltip:hover .tooltip-innerQuantity, .tooltip:hover .tooltip-innerChildren, .tooltip:hover .tooltip-innerBabies, .tooltip:hover .tooltip-innerRatePlan, .tooltip:hover .tooltip-innerDefault , .tooltip:hover .tooltip-innerProduct, .tooltip:hover .tooltip-innerInfo {
	-webkit-transition-delay: 0.3s;
	transition-delay: 0.3s;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

/* Arrow */
.tooltip-content::after {
	content: '';
	bottom: -20px;
	left: 50%;
	border: solid transparent;
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: transparent;
	border-top-color: #A1A5AB;
	border-width: 10px;
	margin-left: -10px;
}
.tooltipFloatRight {
    float:right;
}
.tooltipFloatLeft {
	float:left;
}
@media only screen and (min-width:768px) and (max-width:992px) {
    .tooltipFloatRight, .tooltipFloatLeft  {
        float:none;
    }
}
@media only screen and (max-width:767px) {
    .tooltipFloatRight, .tooltipFloatLeft {
        float:none;
    }
	.tooltipBig .tooltip-content, .tooltipLifeHappens .tooltip-content {
		width:100%;
		left:200px;
	}
}