How to center Perspective and menu, in different screen sizes

[itsavius]

How to center Perspective and menu, in different screen sizes. thanks

[itsavius]

/* Media Queries /
/ Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
.effect-rotateleft.animate .container {
-webkit-transform: translateZ(-1800px) translateX(-50%) rotateY(45deg);
transform: translateZ(-1800px) translateX(-34%) rotateY(45deg);
}

.outer-nav.vertical {
	font-size: 1em;
	width: 6.8em;
}

.outer-nav.right {
	right: 18%;
}

}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
.effect-rotateleft.animate .container {
-webkit-transform: translateZ(-1800px) translateX(-50%) rotateY(45deg);
transform: translateZ(-680px) translateX(-8%) rotateY(45deg);
}

.outer-nav.vertical {
	font-size: 0.6em;
	width: 6.8em;
}

.outer-nav.right {
	right: 25%;
}

}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
.effect-rotateleft.animate .container {
-webkit-transform: translateZ(-1800px) translateX(-50%) rotateY(45deg);
transform: translateZ(-1100px) translateX(-18%) rotateY(45deg);
}

.outer-nav.vertical {
	font-size: 1.8em;
	width: 6.8em;
}

.outer-nav.right {
	right: 19%;
}

}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
.effect-rotateleft.animate .container {
-webkit-transform: translateZ(-1800px) translateX(-50%) rotateY(45deg);
transform: translateZ(-1100px) translateX(-12%) rotateY(45deg);
}

.outer-nav.vertical {
	font-size: 1.6em;
	width: 6.8em;
}

.outer-nav.right {
	right: 33%;
}

}