body {
	background: radial-gradient(#E74C3C,#CF000F);
	font-family: "helvetica neue";
}

.wrapper {
	width:200px;
	height:200px;
	/*border:1px solid red;*/
	margin: 0 auto;
	margin-top: 10%;
	position: relative;
}

.compass {
	width:200px;
	height:200px;
	border-radius: 50%;
	position: absolute;
	background: radial-gradient(#00C1AB,#0A6FD9);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border:4px solid #EEEEEE;
	border-style: dotted;
	box-shadow: 0 0 0 5px #4C77BE, 0 0 0 10px #EEEEEE;
}


.needleHolder {
	width:200px;
	height:200px;
	position: absolute;
	top: 0;
	left: 0;
	transition:all 2s;
	-webkit-transform:rotate(45deg);
}

.needleHolder:hover {
	-webkit-transform:rotate(360deg);

}

.north {
	width: 0;
	height: 0;
	border-left: 18px solid transparent;
	border-right: 18px solid transparent;
	border-bottom: 100px solid #D91E18;
	position: absolute;
	left:50%;
	top:0;
	transform: translateX(-50%);
}

.north::before {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-bottom: 100px solid #962A1B;
	border-right: 18px solid transparent;
}

.north::after {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-bottom: 100px solid #CF000F;
	border-right: 6px solid transparent;
}

.south {
	width: 0;
	height: 0;
	border-left: 18px solid transparent;
	border-right: 18px solid transparent;
	border-top: 100px solid #EEEEEE;
	position: absolute;
	left:50%;
	top:50%;
	transform: translateX(-50%);
}

.south::before {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	top:-100px;
	border-top: 100px solid #95A5A6;
	border-right: 18px solid transparent;
}

.south::after {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	top:-100px;
	border-top: 100px solid #DADFE1;
	border-right: 6px solid transparent;
}

h2 {
	text-align: center;
	color:#EEEEEE;
	margin-top: 5%;
}