body {
	background-image:;
	
	height: 100%;
	width: 100%;
	background-position:;
  background:;
	overflow: hidden;
}

.box-back {
  width: 50px;
  height: 58px;
  right: 7px;
	top: 0px;
	border-bottom-left-radius:25px;
	border-bottom-right-radius:25px;
	background-color: #fff;
	opacity: 0.8;
  position: absolute;
	
  
}

@media screen and (min-width: 753px) {
  .box-back {
    visibility:hidden;
  }
	#Box-nav
{
width: 100%;
height: 80px;
	top: 0px;
background:#0066FF;

	position: absolute;

	transform:scale(1);
	opacity: 0.4;
border: ;
	z-index:3445;
}
	
	
	
}

#box-over{
  width: 100%;
  height: 100%;
  padding-top: 190px;
	padding-left: 100px;
	
	background-color: ;
	
  position: absolute;
	opacity: 1;
  
}


.box3d {
  width: 100%;
  height: 100%;
  position:relative;
	margin-right:auto;
	margin-left:auto;
	transform: scale(1);
  padding-left:auto;
	  padding-top:auto;
  -webkit-transform-style: preserve-3d;
	background: ;
}

@media screen and (max-width: 600px) {
  .box3d {
    transform:translateX(-100px) ;
  }
}



.box3d div {
  position: absolute;
  left: 0;
  top: 0;
  width: 200px;
  height: 200px;
	
  opacity: 0.8;
  transform-origin: 50% 50% -100px;
}

.p1 {
  background-image: url(../b-1-sw-empty-logo.png);
	background-size: cover;
  transform: perspective(600px) rotateX(0deg) rotateY(90deg) rotateZ(0deg);
  animation: spin1 10s infinite linear;
}

.p2 {
  background-image: url(../b-1-sw-empty-logo.png);
	background-size: cover;
  animation: spin2 10s infinite linear;
	
}

.p3 {
  background-image: url(../b-1-sw-empty.png);
	background-size: cover;
  animation: spin3 10s infinite linear;
}

.p4 {
  background-image: url(../b-1-sw-empty.png);
	background-size: cover;
  animation: spin4 10s infinite linear;
}

.p5 {
  background-image: url(../b-1-sw-empty-logo.png);
	background-size: cover;
  animation: spin5 10s infinite linear;
}

.p6 {
  background-image: url(../b-1-sw-empty-logo.png);
	background-size: cover;
  animation: spin6 10s infinite linear;
}

/* for Safari and Chrome */
/* for IE10 and Firefox */
@keyframes spin1 {
  to {
    transform: perspective(600px) rotateX(360deg) rotateY(450deg) rotateZ(0deg);
  }
}
@keyframes spin2 {
  0% {
    transform: perspective(600px) rotateX(0deg) rotateY(270deg) rotateZ(0deg);
  }
  100% {
    transform: perspective(600px) rotateX(360deg) rotateY(630deg) rotateZ(0deg);
  }
}
@keyframes spin3 {
  0% {
    transform: perspective(600px) rotateX(90deg) rotateY(0deg) rotateZ(0deg);
  }
  100% {
    transform: perspective(600px) rotateX(450deg) rotateY(0deg) rotateZ(-360deg);
  }
}
@keyframes spin4 {
  0% {
    transform: perspective(600px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
  }
  100% {
    transform: perspective(600px) rotateX(270deg) rotateY(0deg) rotateZ(360deg);
  }
}
@keyframes spin5 {
  0% {
    transform: perspective(600px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  100% {
    transform: perspective(600px) rotateX(360deg) rotateY(360deg) rotateZ(0deg);
  }
}
@keyframes spin6 {
  0% {
    transform: perspective(600px) rotateX(0deg) rotateY(180deg) rotateZ(0deg);
  }
  100% {
    transform: perspective(600px) rotateX(360deg) rotateY(540deg) rotateZ(0deg);
  }
}