/*custom*/

.wrap {
	background: url(images/bg.jpg) no-repeat;
	background-size: 860px;
	width: 900px;
	height: 600px;
	position: relative;
	overflow: hidden;
	margin: auto;
}

.box {
	width: 225px;
	height: 225px;
	background: rgba(255,255,255,0);
	border-radius: 120px;
	cursor: pointer;
	position: absolute;
}

.box:hover {
	background: rgba(255,255,255,.4);
}

/*fin custom*/



[data-tips] {
	position: relative;
	text-decoration: none;
}

	[data-tips]:after,
	[data-tips]:before {
	    position: absolute;
	    z-index: 100;
		opacity: 0;
	}

		[data-tips]:after {
			width: 300px;
			content: attr(data-tips);
			padding: 20px 20px;
			font-family: 'Open Sans', sans-serif;
			font-size: 12px;
			text-align: left;
			color: #333;
			background: white;
			-moz-box-shadow: 0 0 5px rgba(0,0,0,0.3);
			-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);
			box-shadow: 0 0 5px rgba(0,0,0,0.3);
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
		}

		[data-tips]:before {
			content: "";
			width: 0;
			height: 0;
			border-width: 6px;
			border-style: solid;
		}

			[data-tips]:hover:after,
			[data-tips]:hover:before {
				opacity: 1;
			}

/* Top tips */
[data-tips].top-tip:after,
[data-tips].top-tip:before {
    -webkit-transition: bottom 0.25s ease-in-out, opacity 0.25s ease-in-out;
    -moz-transition: bottom 0.25s ease-in-out, opacity 0.25s ease-in-out;
    transition: bottom 0.25s ease-in-out, opacity 0.25s ease-in-out;
	bottom: 90%;
	left: -9999px;
	margin-bottom: 12px;
}
	[data-tips].top-tip:before {
		border-color: #fff transparent transparent transparent;
		margin-bottom: 0;
		z-index: 200;
	}
	[data-tips].top-tip:hover:after,
	[data-tips].top-tip:hover:before {
		bottom: 100%;
		left: -33px;
	}
	[data-tips].top-tip:hover:before {
		left: 15px;
	}

/* Bottom tip */
[data-tips].bottom-tip:after,
[data-tips].bottom-tip:before {
    -webkit-transition: top 0.25s ease-in-out, opacity 0.25s ease-in-out;
    -moz-transition: top 0.25s ease-in-out, opacity 0.25s ease-in-out;
    transition: top 0.25s ease-in-out, opacity 0.25s ease-in-out;
	top: 90%;
	left: -9999px;
	margin-top: 12px;
}

	[data-tips].bottom-tip:before {
		border-color: transparent transparent #fff transparent;
		margin-top: 0;
		z-index: 200;
	}

	[data-tips].bottom-tip:hover:after,
	[data-tips].bottom-tip:hover:before {

		top: 100%;
		left: 0;
	}

	[data-tips].bottom-tip:hover:before {
		left: 15px;
	}

/* Right tip */
[data-tips].right-tip:after,
[data-tips].right-tip:before {
    -webkit-transition: left 0.25s ease-in-out, opacity 0.25s ease-in-out;
    -moz-transition: left 0.25s ease-in-out, opacity 0.25s ease-in-out;
    transition: left 0.25s ease-in-out, opacity 0.25s ease-in-out;
	top: -9999px;
	left: 96%;
	margin-left: 12px;
}

	[data-tips].right-tip:before {
		border-color: transparent #fff transparent transparent;
		margin-left: 0;
		z-index: 200;
	}

	[data-tips].right-tip:hover:after,
	[data-tips].right-tip:hover:before {
		left: 100%;
		top: 0;
	}

	[data-tips].right-tip:hover:before {
		top: 7px;
	}

/* Left tip */
[data-tips].left-tip:after,
[data-tips].left-tip:before {
    -webkit-transition: right 0.25s ease-in-out, opacity 0.25s ease-in-out;
    -moz-transition: right 0.25s ease-in-out, opacity 0.25s ease-in-out;
    transition: right 0.25s ease-in-out, opacity 0.25s ease-in-out;
	top: -9999px;
	right: 96%;
	margin-right: 12px;
}

	[data-tips].left-tip:before {
		border-color: transparent transparent transparent #fff;
		margin-right: 0;
		z-index: 200
	}

	[data-tips].left-tip:hover:after,
	[data-tips].left-tip:hover:before {
		right: 100%;
		top: 0;
	}

	[data-tips].left-tip:hover:before {
		top: 7px;
	}