body { padding: 0; margin: 0;}

.footer-outer { margin-top: 175px; height: 2px; background: yellow; position: relative; bottom:0px; }

.footer-arrow { width: 0; height: 0; border-style: solid; border-width: 0 200px 100px 200px; border-color: transparent transparent black transparent; position: fixed; bottom:0; left: 0; font-size: 0; line-height: 0; text-indent: -4000px; z-index:1}

.circle-container a {
    display: block;
    position: absolute;
    top: 45%; left: 50%;
    width: 5%; height: 5%;
    margin: -2em;
}
.circle-container img { display: block; width: 100%; }
.deg30 { transform: rotate(30deg) translate(340%) rotate(-30deg); }
.deg90 { transform: rotate(90deg) translate(340%) rotate(-90deg)}
.deg150 { transform: rotate(150deg) translate(340%) rotate(-150deg); }
.deg210 { transform: rotate(210deg) translate(340%) rotate(-210deg); }
.deg270 { transform: rotate(270deg) translate(340%) rotate(-270deg)}
.deg330{ transform: rotate(330deg) translate(340%) rotate(-330deg)}

.tooltip{
	position:relative;
	display:inline-block;
}

.tooltip .tooltiptext{
	visibility:hidden;
	width: 120px;
	background-color: black;
	color: #fff;
	text-align: center;
	padding: 5px 0;
	border-radius: 6px;
	top:100%;
	left:50%;
	margin-left: -60px;
	position: absolute;
	z-index:1;
}

.tooltip:hover .tooltiptext{
	visibility: visible;
}