@media only screen and (max-width :960px) {
.menu {
    width:400px;
	left: 0;
    right:0;
    margin:150px auto;
    line-height:1.2;
}
.menu li {
    display:inline-block;
	margin:0 20px 10px 20px;
}
#overflow {
    padding-top:50px;
}
#cubes .container_cube {
	width: 180px;
	height: 180px;
}
#cubes .cube .face {
	width: 180px;
	height: 180px;
	line-height: 180px;
	font-size: 12px;
}
#cubes .cube .front {
	transform: rotateY(0deg) translateZ(90px);
	-webkit-transform: rotateY(0deg) translateZ(90px);
	-moz-transform: rotateY(0deg) translateZ(90px);
	-ms-transform: rotateY(0deg) translateZ(90px);
	-o-transform: rotateY(0deg) translateZ(90px);
}
#cubes .cube .back {
	transform: rotateX(180deg) translateZ(90px);
	-webkit-transform: rotateX(180deg) translateZ(90px);
	-moz-transform: rotateX(180deg) translateZ(90px);
	-ms-transform: rotateX(180deg) translateZ(90px);
	-o-transform: rotateX(180deg) translateZ(90px);
}
#cubes .cube .right {
	transform: rotateY(90deg) translateZ(90px);
	-webkit-transform: rotateY(90deg) translateZ(90px);
	-moz-transform: rotateY(90deg) translateZ(90px);
	-ms-transform: rotateY(90deg) translateZ(90px);
	-o-transform: rotateY(90deg) translateZ(90px);
}
#cubes .cube .left {
	transform: rotateY(-90deg) translateZ(90px);
	-webkit-transform: rotateY(-90deg) translateZ(90px);
	-moz-transform: rotateY(-90deg) translateZ(90px);
	-ms-transform: rotateY(-90deg) translateZ(90px);
	-o-transform: rotateY(-90deg) translateZ(90px);
}
#cubes .cube .top {
	transform: rotateX(90deg) translateZ(90px);
	-webkit-transform: rotateX(90deg) translateZ(90px);
	-moz-transform: rotateX(90deg) translateZ(90px);
	-ms-transform: rotateX(90deg) translateZ(90px);
	-o-transform: rotateX(90deg) translateZ(90px);
}
#cubes .cube .bottom {
	transform: rotateX(-90deg) translateZ(90px);
	-webkit-transform: rotateX(-90deg) translateZ(90px);
	-moz-transform: rotateX(-90deg) translateZ(90px);
	-ms-transform: rotateX(-90deg) translateZ(90px);
	-o-transform: rotateX(-90deg) translateZ(90px);
}
}

@media only screen and (max-width :720px) {
.menu {
        width:auto;
    }
.menu li {
	margin:0 10px 10px 10px;
}
.container_box {
	position: relative;
}
#box .face {
	font-size: 10px;
}
#cubes .container_cube {
	width: 160px;
	height: 160px;
}
#cubes .cube .face {
	width: 160px;
	height: 160px;
	line-height: 160px;
	font-size: 12px;
}
#cubes .cube .front {
	transform: rotateY(0deg) translateZ(80px);
	-webkit-transform: rotateY(0deg) translateZ(80px);
	-moz-transform: rotateY(0deg) translateZ(80px);
	-ms-transform: rotateY(0deg) translateZ(80px);
	-o-transform: rotateY(0deg) translateZ(80px);
}
#cubes .cube .back {
	transform: rotateX(180deg) translateZ(80px);
	-webkit-transform: rotateX(180deg) translateZ(80px);
	-moz-transform: rotateX(180deg) translateZ(80px);
	-ms-transform: rotateX(180deg) translateZ(80px);
	-o-transform: rotateX(180deg) translateZ(80px);
}
#cubes .cube .right {
	transform: rotateY(90deg) translateZ(80px);
	-webkit-transform: rotateY(90deg) translateZ(80px);
	-moz-transform: rotateY(90deg) translateZ(80px);
	-ms-transform: rotateY(90deg) translateZ(80px);
	-o-transform: rotateY(90deg) translateZ(80px);
}
#cubes .cube .left {
	transform: rotateY(-90deg) translateZ(80px);
	-webkit-transform: rotateY(-90deg) translateZ(80px);
	-moz-transform: rotateY(-90deg) translateZ(80px);
	-ms-transform: rotateY(-90deg) translateZ(80px);
	-o-transform: rotateY(-90deg) translateZ(80px);
}
#cubes .cube .top {
	transform: rotateX(90deg) translateZ(80px);
	-webkit-transform: rotateX(90deg) translateZ(80px);
	-moz-transform: rotateX(90deg) translateZ(80px);
	-ms-transform: rotateX(90deg) translateZ(80px);
	-o-transform: rotateX(90deg) translateZ(80px);
}
#cubes .cube .bottom {
	transform: rotateX(-90deg) translateZ(80px);
	-webkit-transform: rotateX(-90deg) translateZ(80px);
	-moz-transform: rotateX(-90deg) translateZ(80px);
	-ms-transform: rotateX(-90deg) translateZ(80px);
	-o-transform: rotateX(-90deg) translateZ(80px);
}
/*   keyframes margin cube   */
	
@-webkit-keyframes margin_cube {
 0%, 100% {
margin:10px;
}
 50% {
margin:50px;
}
}
@-moz-keyframes margin_cube {
 0%, 100% {
margin:10px;
}
 50% {
margin:50px;
}
}
@-ms-keyframes margin_cube {
 0%, 100% {
margin:10px;
}
 50% {
margin:50px;
}
}
@-o-keyframes margin_cube {
 0%, 100% {
margin:10px;
}
 50% {
margin:50px;
}
}
@keyframes margin_cube {
 0%, 100% {
margin:10px;
}
 50% {
margin:50px;
}
}
}

@media only screen and (max-width :480px) {
.menu {
    top:0;bottom:0;right:0;left:0;
    position:absolute;
    margin:140px auto auto auto;
    width:400px;
    height:100px;
	left: 0em;
}
#overflow {
    padding-top:100px;
}
#cubes .container_cube {
	width: 120px;
	height: 120px;
}
#cubes .cube .face {
	width: 120px;
	height: 120px;
	line-height: 120px;
	font-size: 12px;
}
#cubes .cube .front {
	transform: rotateY(0deg) translateZ(60px);
	-webkit-transform: rotateY(0deg) translateZ(60px);
	-moz-transform: rotateY(0deg) translateZ(60px);
	-ms-transform: rotateY(0deg) translateZ(60px);
	-o-transform: rotateY(0deg) translateZ(60px);
}
#cubes .cube .back {
	transform: rotateX(180deg) translateZ(60px);
	-webkit-transform: rotateX(180deg) translateZ(60px);
	-moz-transform: rotateX(180deg) translateZ(60px);
	-ms-transform: rotateX(180deg) translateZ(60px);
	-o-transform: rotateX(180deg) translateZ(60px);
}
#cubes .cube .right {
	transform: rotateY(90deg) translateZ(60px);
	-webkit-transform: rotateY(90deg) translateZ(60px);
	-moz-transform: rotateY(90deg) translateZ(60px);
	-ms-transform: rotateY(90deg) translateZ(60px);
	-o-transform: rotateY(90deg) translateZ(60px);
}
#cubes .cube .left {
	transform: rotateY(-90deg) translateZ(60px);
	-webkit-transform: rotateY(-90deg) translateZ(60px);
	-moz-transform: rotateY(-90deg) translateZ(60px);
	-ms-transform: rotateY(-90deg) translateZ(60px);
	-o-transform: rotateY(-90deg) translateZ(60px);
}
#cubes .cube .top {
	transform: rotateX(90deg) translateZ(60px);
	-webkit-transform: rotateX(90deg) translateZ(60px);
	-moz-transform: rotateX(90deg) translateZ(60px);
	-ms-transform: rotateX(90deg) translateZ(60px);
	-o-transform: rotateX(90deg) translateZ(60px);
}
#cubes .cube .bottom {
	transform: rotateX(-90deg) translateZ(60px);
	-webkit-transform: rotateX(-90deg) translateZ(60px);
	-moz-transform: rotateX(-90deg) translateZ(60px);
	-ms-transform: rotateX(-90deg) translateZ(60px);
	-o-transform: rotateX(-90deg) translateZ(60px);
}
}