@charset "utf-8";
/* CSS Document */
.logo_box
{
	width: 25%;
	-webkit-perspective: 100px;
	-moz-perspective: 100px;
	-ms-perspective: 100px;
	perspective: 100px;
}
.box {
	display: block;
	width: 50px;
	height: 50px;
	margin: 0%;
	-webkit-transform-style: preserve-3d;
	-webkit-transition: transform 350ms;
	-webkit-animation: spin 8s infinite linear;
	-moz-transform-style: preserve-3d;
	-moz-transition: transform 350ms;
	-moz-animation: spin 8s infinite linear;
	-ms-transform-style: preserve-3d;
	-ms-transition: transform 350ms;
	-ms-animation: spin 8s infinite linear;
	transform-style: preserve-3d;
	transition: transform 350ms;
	animation: spin 8s infinite linear;
}
.box:before, .box:after, .box i, .box i:before, .box i:after {
	display: block;
	width: 50px;
	height: 50px;
	position: absolute;
}
.box:before {
	-webkit-transform: rotateY(90deg) translate3D(-25px,0,25px);
	-moz-transform: rotateY(90deg) translate3D(-25px,0,25px);
	-ms-transform: rotateY(90deg) translate3D(-25px,0,25px);
	transform: rotateY(90deg) translate3D(-25px,0,25px);
	content:url("../Images/m3Logo50x50.png");
}
.box:after {
	-webkit-transform: rotateY(90deg) rotateZ(180deg) translate3D(25px,0,-25px);
	-moz-transform: rotateY(90deg) rotateZ(180deg) translate3D(25px,0,-25px);
	-ms-transform: rotateY(90deg) rotateZ(180deg) translate3D(25px,0,-25px);
	transform: rotateY(90deg) rotateZ(180deg) translate3D(25px,0,-25px);
	content:url("../Images/m3Logo50x50-180.png");
}
.box i {
	-webkit-transform-style: preserve-3d;
	-webkit-transform: translate3D(0,0,50px);
	-webkit-animation-delay: 2s;
	-moz-transform-style: preserve-3d;
	-moz-transform: translate3D(0,0,50px);
	-moz-animation-delay: 2s;
	-ms-transform-style: preserve-3d;
	-ms-transform: translate3D(0,0,50px);
	-ms-animation-delay: 2s;
	transform-style: preserve-3d;
	transform: translate3D(0,0,50px);
	animation-delay: 2s;
}
.box i:before {
	-webkit-transform: rotate(180deg) translate3D(0,0,-50px);
	-webkit-animation-delay: 2s;
	-moz-transform: rotate(180deg) translate3D(0,0,-50px);
	-moz-animation-delay: 2s;
	-ms-transform: rotate(180deg) translate3D(0,0,-50px);
	-ms-animation-delay: 2s;
	transform: rotate(180deg) translate3D(0,0,-50px);
	animation-delay: 2s;
	content:url("../Images/m3Logo50x50-180.png");
}
.box i:after {
	-webkit-transform: rotateX(270deg) translate3D(0,-25px,-30px);
	-webkit-filter: blur(7px);
	-webkit-animation: none;
	-moz-transform: rotateX(270deg) translate3D(0,-25px,-30px);
	-moz-filter: blur(7px);
	-moz-animation: none;
	-ms-transform: rotateX(270deg) translate3D(0,-25px,-30px);
	-ms-filter: blur(7px);
	-ms-animation: none;
	transform: rotateX(270deg) translate3D(0,25px,-30px);
	filter: blur(7px);
	animation: none;
}
@-webkit-keyframes spin {
  0% { -webkit-transform: rotateY(0deg) translateZ(-25px); }
  100% { -webkit-transform: rotateY(360deg) translateZ(-25px); }
}
@-moz-keyframes spin {
  0% { -moz-transform: rotateY(0deg) translateZ(-25px); }
  100% { -moz-transform: rotateY(360deg) translateZ(-25px); }
}
@-ms-keyframes spin {
  0% { -ms-transform: rotateY(0deg) translateZ(-25px); }
  100% { -ms-transform: rotateY(360deg) translateZ(-25px); }
}
@keyframes spin {
  0% {transform: rotateY(0deg) translateZ(-25px); }
  100% {transform: rotateY(360deg) translateZ(-25px); }
}