figure.quadron { margin-top:49px; margin-bottom: 5em; box-sizing: content-box; white-space:normal; }

.quadron q {
    text-align: center;
	display: inline-block;
    width: 116px;
    height: 113px;
    padding: 4px 0 0 1px;
	margin-left: -35px;
    overflow:visible;

	line-height: 2px;
	font-size:0;

	transform: rotateZ(45deg) translateY(58px) rotate3D(1,1,0,-30deg);
	transform-origin:100% 100%;								
	transition: all 300ms linear;
	perspective: 1000px;
}
.quadron q:hover { transform: rotateZ(45deg) translateY(58px) rotate3D(1,1,0,0deg); }

.quadron q a:before, .quadron q a:after,
.quadron q:after, .quadron q:before {
	content:'';
	display:block; 
	position:absolute;
	top:0; bottom:0;
	left:0; right:0;
	z-index:-1;
}
.quadron q:after {
	background:white;
	border: 3px #ddd solid;
	opacity:.7;
}
.quadron q:before {
	box-shadow: 6px 6px 20px 5px gray;
	background: rgba(0,0,0,.5);
	background: linear-gradient(315deg, gray, #fff);
	-webkit-filter: blur(20px);
	filter: blur(20px);

	transform: rotate3D(-1,1,0,-70deg) skew(-12deg,0) scale(.55,.6);
	transition: transform 300ms linear;
	transform-origin:100% 100%;
}
.quadron q:hover:before { transform: rotate3D(-1,1,0,-70deg) skew(0,0) scale(.6); }

.quadron q s, .quadron q a, .quadron q b {
	display:inline-block;
	position:relative;
	margin-right:1px;
	width: 10px;
	height: 10px;
	background: #cecece;
}
.quadron q a { cursor:pointer; background: red; }
.quadron q b { background: darkred; }

.quadron q s:nth-child(9n+5) { background:#dedede; }
.quadron q s:nth-child(7n+1),
.quadron q s:nth-child(7n+3) { background:#ddd; }
.quadron q s:nth-child(3n+1) { background:#eee; }
.quadron q a:hover { outline:#000 solid thin; }
.quadron q b:hover { outline:red solid thin; }
		
.quadron q a:nth-child(1):before, .quadron q a:nth-child(2):before, .quadron q a:nth-child(3):before, .quadron q a:nth-child(4):before, .quadron q a:nth-child(5):before,
.quadron q a:nth-child(6):before, .quadron q a:nth-child(7):before, .quadron q a:nth-child(8):before, .quadron q a:nth-child(9):before, .quadron q a:nth-child(10):before {
	top:-4px; left:-1px; right:-1px; 
	border-top:3px black solid; 
}
.quadron q a:nth-child(10):before { right:-4px; }
.quadron q a:nth-child(10n):after {
	top:-1px; bottom:-1px; right:-4px; 
	border-right:3px black solid; 
}