.floatnav{
	position: fixed;
	left: 22px;
	bottom: 0px;
	z-index: 99;
}

.floatnav ul {
	transform: rotate(20deg) skew(20deg, -10deg) scale(0.7);
	list-style-type: none;
}

.floatnav .list-item {
	background: #000;
	color: #979797;
	text-align: center;
	height: 2.5em;
	width: 4em;
	vertical-align: middle;
	line-height: 2.5em;
	border-bottom: 1px solid #060606;
	position: relative;
	display: block;
	text-decoration: none;
	box-shadow: -1.5em 1.5em 10px 5px #33333377;
	transition: all 0.25s linear;
}
.floatnav .list-item:hover {
	background: #ff6e42;
	color: #fffcfb;
	transform: translate(0.9em, -0.9em);
	transition: all 0.25s linear;
	box-shadow: -2em 2em 3px #e1e1e1;
}
.floatnav .list-item:hover:before, .floatnav .list-item:hover:after {
	transition: all 0.25s linear;
}
.floatnav .list-item:hover:before {
	background: #b65234;
	width: 1em;
	top: 0.5em;
	left: -1em;
}
.floatnav .list-item:hover:after {
	background: #b65234;
	width: 1em;
	bottom: -2.5em;
	left: 1em;
	height: 4em;
}
.floatnav .list-item:before, .floatnav .list-item:after {
	content: "";
	position: absolute;
	transition: all 0.25s linear;
	width: 0.5em;
}
.floatnav .list-item:after {
	height: 4em;
	background: #181818;
	bottom: -2.25em;
	left: 1.5em;
	transform: rotate(90deg) skew(0, 45deg);
}
.floatnav .list-item:before {
	height: 2.5em;
	background: #121212;
	top: 0.25em;
	left: -0.5em;
	transform: skewY(-45deg);
}
.floatnav .list-item span{
	font-size: 0.85em;
}

.floatnav{
	transform: scale(3.9) translate(2.2em, -35em);
}

@media (max-height: 4000px){
	.floatnav{
		transform: scale(3.4) translate(1.8em, -30em);
	}
}

@media (max-height: 3000px){
	.floatnav{
		transform: scale(2.7) translate(1.4em, -26em);
	}
}

@media (max-height: 2100px){
	.floatnav{
		transform: scale(2.2) translate(1.4em, -21em);
	}
}

@media (max-height: 1900px){
	.floatnav{
		transform: scale(2.2) translate(1.4em, -18em);
	}
}

@media (max-height: 1700px){
	.floatnav{
		transform: scale(2.2) translate(1.4em, -15em);
	}
}

@media (max-height: 1500px){
	.floatnav{
		transform: scale(2.1) translate(1.4em, -14em);
	}
}

@media (max-height: 1300px){
	.floatnav{
		transform: scale(2.0) translate(1em, -10em);
	}
}

@media (max-height: 1100px){
	.floatnav{
		transform: scale(1.9) translate(1em, -10em);
	}
}

@media (max-height: 1000px){
	.floatnav{
		transform: scale(1.8) translate(1em, -9em);
	}
}

@media (max-height: 900px){
	.floatnav{
		transform: scale(1.7) translate(1em, -8em);
	}
}

@media (max-height: 800px){
	.floatnav{
		transform: scale(1.5) translate(0.5em, -7em);
	}
}

@media (max-height: 700px){
	.floatnav{
		transform: scale(1.2) translate(0.5em, -5em);
	}
}

@media (max-height: 600px){
	.floatnav{
		transform: scale(1.2) translate(0.5em, -3em);
	}
}

@media (max-height: 500px){
	.floatnav{
		transform: scale(1.1) translate(0.4em, -1em);
	}
}

@media (max-height: 400px){
	.floatnav{
		transform: scale(0.9) translate(0em, 1em);
	}
}

@media (max-height: 350px){
	.floatnav{
		transform: scale(0.8) translate(-0.4em, 4em);
	}
}

@media (max-height: 300px){
	.floatnav{
		transform: scale(0.7) translate(-0.8em, 8em);
	}
}

@media (max-height: 250px){
	.floatnav{
		transform: scale(0.6) translate(-1.2em, 10em);
	}
}

@media (max-height: 200px){
	.floatnav{
		transform: scale(0.5) translate(-2em, 15em);
	}
}