.nav-sqr {
	text-shadow: 0 -1px 0 rgba(0,0,0,0.2);	
	display: inline-block;
	margin: 8px 2px 0px 2px;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
	color: #fff;
	text-decoration: none;
	text-shadow: 1px 1px 0px #154e0f;
	width: 240px;
	height: 240px;
	background-repeat: repeat-x;
	position: relative;	
}

.nav-sqr .front, .nav-sqr .back {
	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.15),0 1px 1px rgba(0,0,0,0.075);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.15),0 1px 1px rgba(0,0,0,0.075);
	box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.nav-sqr .back {
	background-image: none !important;
	background: #000 !important;
}

.nav-sqr-cyan .front { 
	background: #339EF0;
	background-image: -webkit-gradient(
		linear,
		left top,
		right bottom,
		color-stop(0, #0F5D99),
		color-stop(0.8, #339EF0)
	);
	background-image: -o-linear-gradient(right bottom, #0F5D99 0%, #339EF0 80%);
	background-image: -moz-linear-gradient(right bottom, #0F5D99 0%, #339EF0 80%);
	background-image: -webkit-linear-gradient(right bottom, #0F5D99 0%, #339EF0 80%);
	background-image: -ms-linear-gradient(right bottom, #0F5D99 0%, #339EF0 80%);
	background-image: linear-gradient(to right bottom, #0F5D99 0%, #339EF0 80%);
}

.nav-sqr-teal .front { 
	background: #B1E6E5;
	background-image: -webkit-gradient(
		linear,
		left top,
		right bottom,
		color-stop(0, #65BAB7),
		color-stop(0.8, #B1E6E5)
	);
	background-image: -o-linear-gradient(right bottom, #65BAB7 0%, #B1E6E5 80%);
	background-image: -moz-linear-gradient(right bottom, #65BAB7 0%, #B1E6E5 80%);
	background-image: -webkit-linear-gradient(right bottom, #65BAB7 0%, #B1E6E5 80%);
	background-image: -ms-linear-gradient(right bottom, #65BAB7 0%, #B1E6E5 80%);
	background-image: linear-gradient(to right bottom, #65BAB7 0%, #B1E6E5 80%);
}

.nav-sqr-blue .front {
	background: #222FE3;
	background-image: -webkit-gradient(
		linear,
		left top,
		right bottom,
		color-stop(0, #0B168C),
		color-stop(0.8, #222FE3)
	);
	background-image: -o-linear-gradient(right bottom, #0B168C 0%, #222FE3 80%);
	background-image: -moz-linear-gradient(right bottom, #0B168C 0%, #222FE3 80%);
	background-image: -webkit-linear-gradient(right bottom, #0B168C 0%, #222FE3 80%);
	background-image: -ms-linear-gradient(right bottom, #0B168C 0%, #222FE3 80%);
	background-image: linear-gradient(to right bottom, #0B168C 0%, #222FE3 80%);
}

.nav-sqr-green .front {
	background: #37C73C;
	background-image: -webkit-gradient(
		linear,
		left top,
		right bottom,
		color-stop(0, #1D871E),
		color-stop(1, #20C422)
	);
	background-image: -o-linear-gradient(right bottom, #1D871E 0%, #20C422 80%);
	background-image: -moz-linear-gradient(right bottom, #1D871E 0%, #20C422 80%);
	background-image: -webkit-linear-gradient(right bottom, #1D871E 0%, #20C422 80%);
	background-image: -ms-linear-gradient(right bottom, #1D871E 0%, #20C422 80%);
	background-image: linear-gradient(to right bottom, #1D871E 0%, #20C422 80%);	
}

.nav-sqr-yellow .front {
	background: #F0D124;
	background-image: -webkit-gradient(
		linear,
		left top,
		right bottom,
		color-stop(0, #B89F23),
		color-stop(0.8, #F0D124)
	);
	background-image: -o-linear-gradient(right bottom, #B89F23 0%, #F0D124 80%);
	background-image: -moz-linear-gradient(right bottom, #B89F23 0%, #F0D124 80%);
	background-image: -webkit-linear-gradient(right bottom, #B89F23 0%, #F0D124 80%);
	background-image: -ms-linear-gradient(right bottom, #B89F23 0%, #F0D124 80%);
	background-image: linear-gradient(to right bottom, #B89F23 0%, #F0D124 80%);
}

.nav-sqr-red .front {
	background: #F04C33;
	background-image: -webkit-gradient(
		linear,
		left top,
		right bottom,
		color-stop(0, #9C1A3C),
		color-stop(0.8, #E32259)
	);
	background-image: -o-linear-gradient(right bottom, #9C1A3C 0%, #E32259 80%);
	background-image: -moz-linear-gradient(right bottom, #9C1A3C 0%, #E32259 80%);
	background-image: -webkit-linear-gradient(right bottom, #9C1A3C 0%, #E32259 80%);
	background-image: -ms-linear-gradient(right bottom, #9C1A3C 0%, #E32259 80%);
	background-image: linear-gradient(to right bottom, #9C1A3C 0%, #E32259 80%);
}

.nav-sqr-violet .front {
	background: #D93BEB;
	background-image: -webkit-gradient(
		linear,
		left top,
		right bottom,
		color-stop(0, #801268),
		color-stop(0.8, #CC29A9)
	);
	background-image: -o-linear-gradient(right bottom, #801268 0%, #CC29A9 80%);
	background-image: -moz-linear-gradient(right bottom, #801268 0%, #CC29A9 80%);
	background-image: -webkit-linear-gradient(right bottom, #801268 0%, #CC29A9 80%);
	background-image: -ms-linear-gradient(right bottom, #801268 0%, #CC29A9 80%);
	background-image: linear-gradient(to right bottom, #801268 0%, #CC29A9 80%);
}

.nav-sqr-orange .front {
	background: #F7710A;
	background-image: -webkit-gradient(
		linear,
		left top,
		right bottom,
		color-stop(0, #B5540B),
		color-stop(0.8, #F7710A)
	);
	background-image: -o-linear-gradient(right bottom, #B5540B 0%, #F7710A 80%);
	background-image: -moz-linear-gradient(right bottom, #B5540B 0%, #F7710A 80%);
	background-image: -webkit-linear-gradient(right bottom, #B5540B 0%, #F7710A 80%);
	background-image: -ms-linear-gradient(right bottom, #B5540B 0%, #F7710A 80%);
	background-image: linear-gradient(to right bottom, #B5540B 0%, #F7710A 80%);
}

.nav-sqr-brown .front {
	background: #845724;
	background-image: -webkit-gradient(
		linear,
		left top,
		right bottom,
		color-stop(0, #563f22),
		color-stop(0.8, #845724)
	);
	background-image: -o-linear-gradient(right bottom, #563f22 0%, #845724 80%);
	background-image: -moz-linear-gradient(right bottom, #563f22 0%, #845724 80%);
	background-image: -webkit-linear-gradient(right bottom, #563f22 0%, #845724 80%);
	background-image: -ms-linear-gradient(right bottom, #563f22 0%, #845724 80%);
	background-image: linear-gradient(to right bottom, #563f22 0%, #845724 80%);
}

.nav-sqr-grey .front {
	background: #C7C7C7; 
	background-image: -webkit-gradient(
		linear,
		left top,
		right bottom,
		color-stop(0, #949494),
		color-stop(0.8, #C7C7C7)
	);
	background-image: -o-linear-gradient(right bottom, #949494 0%, #C7C7C7 80%);
	background-image: -moz-linear-gradient(right bottom, #949494 0%, #C7C7C7 80%);
	background-image: -webkit-linear-gradient(right bottom, #949494 0%, #C7C7C7 80%);
	background-image: -ms-linear-gradient(right bottom, #949494 0%, #C7C7C7 80%);
	background-image: linear-gradient(to right bottom, #949494 0%, #C7C7C7 80%);
}

.nav-sqr-pink .front {
	background: #E6D1B5; 
	background-image: -webkit-gradient(
		linear,
		left top,
		right bottom,
		color-stop(0, #C9B295),
		color-stop(0.8, #E6D1B5)
	);
	background-image: -o-linear-gradient(right bottom, #C9B295 0%, #E6D1B5 80%);
	background-image: -moz-linear-gradient(right bottom, #C9B295 0%, #E6D1B5 80%);
	background-image: -webkit-linear-gradient(right bottom, #C9B295 0%, #E6D1B5 80%);
	background-image: -ms-linear-gradient(right bottom, #C9B295 0%, #E6D1B5 80%);
	background-image: linear-gradient(to right bottom, #C9B295 0%, #E6D1B5 80%);
}

.nav-inner { 
	display: block; 
/* 	height: 240px;*/
	padding-right: 10px;
	padding-left: 10px;
	color: #fff; 
	text-decoration: none; 
	text-align: center;
	width: 220px;
}

.back .nav-inner {
	text-align: left;
}

.front, .back { height: 100%; }

.dart-arrow:before, .nav-inner { 
  /* these are the important styles for the centered element: */ 
  display: inline-block; 
  vertical-align: middle;
} 
.dart-arrow:before { 
  /* this is the important part */ 
  content: ''; 
  display: inline-block; 
  width: 0; 
  height: 100%; 
  vertical-align: middle; 
  /* this just takes care of whitespace added by having display:inline-block (there are other methods) */ 
  /*margin-left: -0.25em; */
}

.dart-arrow { background: url('../img/arrow.png') no-repeat 195px 195px; height: 100%; display: block;}
/*.dart-arrow.back { background-color: #000; }*/

/* entire container, keeps perspective */
.nav-sqr {
	-webkit-perspective: 1000;
	-moz-perspective: 1000;
	-ms-perspective: 1000;
	perspective: 1000;
	-ms-transform: perspective(1000px);
	-moz-transform: perspective(1000px);
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
}

/* flip the pane when hovered */
.nav-sqr:hover .front, .nav-sqr.hover .front {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	transform: rotateY(180deg);
}

.nav-sqr:hover .back, .nav-sqr.hover .back {
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-o-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	transform: rotateY(0deg);
}

/* flip speed goes here */
.fliper {
	-webkit-transition: 0.6s;
	-webkit-transform-style: preserve-3d;
	-ms-transition: 0.6s;
	-moz-transition: 0.6s;
	-moz-transform: perspective(1000px);
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transition: 0.6s;
	transform-style: preserve-3d;
	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition: 0.6s;
	-webkit-transform-style: preserve-3d;
	-moz-transition: 0.6s;
	-moz-transform-style: preserve-3d;
	-o-transition: 0.6s;
	-o-transform-style: preserve-3d;
	-ms-transition: 0.6s;
	-ms-transform-style: preserve-3d;
	transition: 0.6s;
	transform-style: preserve-3d;
	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	-webkit-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	z-index: 2;
}

/* back, initially hidden pane */
.back {
	-webkit-transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	-o-transform: rotateY(-180deg);
	-ms-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
}