@import url(gears.css);
@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon/icomoon.eot?ygxk8x');
  src:  url('../fonts/icomoon/icomoon.eot?ygxk8x#iefix') format('embedded-opentype'),
    url('../fonts/icomoon/icomoon.ttf?ygxk8x') format('truetype'),
    url('../fonts/icomoon/icomoon.woff?ygxk8x') format('woff'),
    url('../fonts/icomoon/icomoon.svg?ygxk8x#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

.pos1 { position: absolute; top: 40.2%; bottom: 0; left: 11%; right: 0;}
.pos2 { position: absolute; top: 40.2%; bottom: 0; left: 69%; right: 0;}
.pos3 { position: absolute; top: 11%; bottom: 0; left: 40.3%; right: 0;}
.pos4 { position: absolute; top: 69%; bottom: 0; left: 40.3%; right: 0;}


.icon-home:before {
  content: "\e900";
}

.icon-coin-dollar:before {
  content: "\e93b";
}

.icon-location2:before {
  content: "\e948";
}

.icon-compass2:before {
  content: "\e94a";
}

.icon-steam:before {
  content: "\eaac";
}

.icon {
	cursor: pointer;
	width: 19.79%;
	height: 19.79%;
	border-radius: 50%;
	color: #fff;
        text-align: center;
        background: rgba(51,51,51,0.75);
        transition-duration: 2s;
        text-decoration: none;
}
.icon:before {
	font-family: 'icomoon';
	speak: none;
	font-size: 3.375em;
        line-height: 1.75em;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
}
.icon:hover {
	background: rgba(255,255,255,0);
	transform: rotate(360deg);
        transition-duration: 2s;
	color: #333;
}

@media screen and (max-height: 768px) {
	.icon:hover {background: rgba(51,51,51,0.75); color: #fff; transform: rotate(0deg);}
}