@import url('https://fonts.googleapis.com/css?family=Cinzel:400,700|Raleway:400,600,700&display=swap');

.tooltip {
	position: relative;
	width: 220px;
	margin: 0 auto;
	font-family: 'Raleway', sans-serif;
}
.tooltip a h4 {
	font-family: 'Cinzel', sans-serif;
	font-weight: 400;
	letter-spacing: -1px;
	text-shadow: 0 1px 0 #000;
}
.tooltip-content {
	position: absolute;
	line-height: 1.1;
	pointer-events: none;
	text-align: center;
	z-index: 100;
	opacity: 0;
	padding: 1.75em;
	font-size: 1em;
	bottom: 100%;
}
.effect-1 .tooltip-content {
	width: 210px;
	right: 80%;
	margin: 0 0 20px 0;
	-webkit-transform: scale3d(0,0,1);
	transform: scale3d(0,0,1);
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
}
.effect-2 .tooltip-content {
	width: 236px;
	left: 50%;
	margin: 0 0 55px -118px;
	-webkit-transform: translate3d(0,-10px,0);
	transform: translate3d(0,-10px,0);
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
}
.effect-1:hover .tooltip-content {
	opacity: 1;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
	-webkit-transition-delay: 0.15s;
	transition-delay: 0.15s;
}
.effect-2:hover .tooltip-content {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	-webkit-transition-delay: 0.2s;
	transition-delay: 0.2s;
}

/* Shape */
.tooltip-shape {
	position: absolute;
	width: 240px;
	height: 185px;
	pointer-events: none;
}
.effect-1 .tooltip-shape {
	top: 0;
	right: 65%;
	-webkit-transform: translate3d(0,-90%,0);
	transform: translate3d(0,-90%,0);
}
.effect-2 .tooltip-shape {
	bottom: 100%;
	left: 50%;
	margin: 0 0 0 -118px;
}
.tooltip:hover .tooltip-shape {
	pointer-events: auto;
	overflow: visible;
}
.tooltip-shape svg {
	stroke: #2fa0ec;
	stroke-width: 2;
	overflow: visible;
}
.effect-1 .tooltip-shape svg path {
	fill: #01058e;
	opacity: 0;
	-webkit-transform: scale3d(0,0,1);
	transform: scale3d(0,0,1);
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
}
.effect-1:hover .tooltip-shape svg path {
	opacity: 1;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
}
.effect-1:hover .tooltip-shape svg path#path2 {
	-webkit-transition-delay: 0.07s;
	transition-delay: 0.07s;
}
.effect-1:hover .tooltip-shape svg path#path3 {
	-webkit-transition-delay: 0.14s;
	transition-delay: 0.14s;
}
.effect-1:hover .tooltip-shape svg path#path4 {
	-webkit-transition-delay: 0.21s;
	transition-delay: 0.21s;
}
.effect-2 .tooltip-shape svg polygon {
	fill: transparent;
	stroke-dasharray: 580;
	stroke-dashoffset: 580;
}
.effect-2:hover .tooltip-shape svg polygon {
	stroke-dashoffset: 0;
	fill: #0e0f13;
	-webkit-transition: stroke-dashoffset 0.8s, fill 0.8s;
	transition: stroke-dashoffset 0.8s, fill 0.8s;
}

@media screen and (max-width: 767px) {
	.effect-1 .tooltip-content {
		right: 30%;
		margin: 0 0 60px 0;
	}
	.effect-1 .tooltip-shape {
		right: 15%;
		-webkit-transform: translate3d(0,-110%,0);
    transform: translate3d(0,-110%,0);
	}
	.effect-1:hover .tooltip-shape svg path#path1 {
		display: none;
	}
	.effect-1:hover .tooltip-shape svg path#path2 {
    transform: translate(-22px, 11px);
	}
}