:root {
  --mxcolor-main: #222;
}

.logo-thumbnail-3d {
	cursor: pointer;
	position: absolute;
	width: 100%;
	height: 100%;
	color: #fff;
	text-align: center;
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
}

.logo-thumbnail-3d a {
	color: #fff;
}

.logo-thumbnail-3d a:hover {
	color: #ccc;
}

.logo-thumbnail-front,
.logo-thumbnail-back {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
}

.logo-thumbnail-back {
	background-color: var(--mxcolor-main);
}

.logo-thumbnail-link {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
}

.logo-info {
	position: absolute;
	top: 50%;
	width: 100%;
	margin-top: -15px;
}

.logo-title {
	text-transform: uppercase;
}

.logo-categories {
	font-family: font2, serif;
	font-size: 13px;
	letter-spacing: 1px;
}

.logo-thumbnail-front {
	-webkit-transition: all .6s ease-out;
	-moz-transition: all .6s ease-out;
	transition: all .6s ease-out;
	-webkit-transform: rotateX(0deg) rotateY(360deg);
	-moz-transform: rotateX(0deg) rotateY(360deg);
	-ms-transform: perspective(1000px) rotateY(360deg);
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
}

.logo-thumbnail-back {
	-webkit-transition: all .6s ease-out;
	-moz-transition: all .6s ease-out;
	transition: all .6s ease-out;
	-webkit-transform: rotateX(0deg) rotateY(180deg);
	-moz-transform: rotateX(0deg) rotateY(180deg);
	-ms-transform: perspective(1000px) rotateY(180deg);
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
}
.logo-thumbnail-back::before {
  content: "";
  background: 0 0;
  position: absolute;
  left: 3px;
  top: 3px;
  right: 3px;
  bottom: 3px;
  border: 1px solid rgba(245, 245, 245, .8);
}
.logo-thumbnail-back::after {
  content: "";
  background: 0 0;
  position: absolute;
  left: 6px;
  top: 6px;
  right: 6px;
  bottom: 6px;
  border: 1px solid rgba(245, 245, 245, .8);
}
.logo-thumbnail-3d:hover .logo-thumbnail-front {
	-webkit-transform: rotateX(0deg) rotateY(180deg);
	-moz-transform: rotateX(0deg) rotateY(180deg);
	-ms-transform: perspective(1000px) rotateY(180deg);
}

.logo-thumbnail-3d:hover .logo-thumbnail-back {
	-webkit-transform: rotateX(0deg) rotateY(0deg);
	-moz-transform: rotateX(0deg) rotateY(0deg);
	-ms-transform: perspective(1000px) rotateY(0deg);
}

noindex:-o-prefocus, .logo-thumbnail-back {
	opacity: 0;
}

noindex:-o-prefocus, .logo-thumbnail-3d:hover .logo-thumbnail-back {
	opacity: 1;
}