.rubiknoscript, .rubiknoscript span {
	white-space: pre;
	unicode-bidi: embed;
	font-family: monospace;
}

#cube-container{
	cursor: -webkit-grab;
	cursor: grab;
	display: inline-block;
}
#cube-viewport{
	display: none;
	height: 480px;
	padding: 32px;
	margin: 32px 16px;
	
	-webkit-perspective: 800px;
	-moz-perspective: 800px;
	-o-perspective: 800px;

	-webkit-perspective-origin: 50% 200px;
	-moz-perspective-origin: 50% 200px;
	-o-perspective-origin: 800px;
}

#cube{
	position: relative;
	height: 400px;
	width: 400px;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
}

#cube-controls{
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

#cube .cubie{
	position:absolute;
	margin: 1px;
	border: 3px solid black;
	border-radius: 8px;
	width:  100px;
	height: 100px;
	background-size:100px;
	opacity: 1;
	z-index: -1;
	text-align: center;
	font-size:30px;
}

#cube .cubie > div{
	line-height: 100px;
	border-radius: 8px;
}
#cube .cubie > div span{
	visibility: hidden;
}
#cube .cubie > div {
	background-color: white;
}
#cube .cubie > div.purple {
	background-color: purple;
}
#cube .cubie > div.lightblue {
	background-color: lightblue;
}
#cube .cubie > div.lightgreen {
	background-color: lightgreen;
}

/* CUBIE COLORS*/
#cube .cubie > div.yellow {
background-image: linear-gradient(top, rgb(255,232,54) 30%, rgb(214,214,34) 65%, rgb(184,184,24) 83%);
background-image: -o-linear-gradient(top, rgb(255,232,54) 30%, rgb(214,214,34) 65%, rgb(184,184,24) 83%);
background-image: -moz-linear-gradient(top, rgb(255,232,54) 30%, rgb(214,214,34) 65%, rgb(184,184,24) 83%);
background-image: -webkit-linear-gradient(top, rgb(255,232,54) 30%, rgb(214,214,34) 65%, rgb(184,184,24) 83%);
background-image: -ms-linear-gradient(top, rgb(255,232,54) 30%, rgb(214,214,34) 65%, rgb(184,184,24) 83%);

background-image: -webkit-gradient(
	linear,
	left top,
	left bottom,
	color-stop(0.3, rgb(255,232,54)),
	color-stop(0.65, rgb(214,214,34)),
	color-stop(0.83, rgb(184,184,24))
);

}

#cube .cubie > div.red {
background-image: linear-gradient(top, rgb(255,56,56) 30%, rgb(212,36,36) 65%, rgb(161,27,27) 83%);
background-image: -o-linear-gradient(top, rgb(255,56,56) 30%, rgb(212,36,36) 65%, rgb(161,27,27) 83%);
background-image: -moz-linear-gradient(top, rgb(255,56,56) 30%, rgb(212,36,36) 65%, rgb(161,27,27) 83%);
background-image: -webkit-linear-gradient(top, rgb(255,56,56) 30%, rgb(212,36,36) 65%, rgb(161,27,27) 83%);
background-image: -ms-linear-gradient(top, rgb(255,56,56) 30%, rgb(212,36,36) 65%, rgb(161,27,27) 83%);
background-image: -webkit-gradient(
	linear,
	left top,
	left bottom,
	color-stop(0.3, rgb(255,56,56)),
	color-stop(0.65, rgb(212,36,36)),
	color-stop(0.83, rgb(161,27,27))
);
background-color: red;
}
#cube .cubie > div.orange {
background-image: linear-gradient(top, rgb(255,159,56) 30%, rgb(212,141,36) 65%, rgb(161,111,26) 83%);
background-image: -o-linear-gradient(top, rgb(255,159,56) 30%, rgb(212,141,36) 65%, rgb(161,111,26) 83%);
background-image: -moz-linear-gradient(top, rgb(255,159,56) 30%, rgb(212,141,36) 65%, rgb(161,111,26) 83%);
background-image: -webkit-linear-gradient(top, rgb(255,159,56) 30%, rgb(212,141,36) 65%, rgb(161,111,26) 83%);
background-image: -ms-linear-gradient(top, rgb(255,159,56) 30%, rgb(212,141,36) 65%, rgb(161,111,26) 83%);
background-image: -webkit-gradient(
	linear,
	left top,
	left bottom,
	color-stop(0.3, rgb(255,159,56)),
	color-stop(0.65, rgb(212,141,36)),
	color-stop(0.83, rgb(161,111,26))
);
}
#cube .cubie > div.green {
background-image: linear-gradient(top, rgb(16,122,9) 11%, rgb(71,204,41) 56%, rgb(87,255,61) 78%);
background-image: -o-linear-gradient(top, rgb(16,122,9) 11%, rgb(71,204,41) 56%, rgb(87,255,61) 78%);
background-image: -moz-linear-gradient(top, rgb(16,122,9) 11%, rgb(71,204,41) 56%, rgb(87,255,61) 78%);
background-image: -webkit-linear-gradient(top, rgb(16,122,9) 11%, rgb(71,204,41) 56%, rgb(87,255,61) 78%);
background-image: -ms-linear-gradient(top, rgb(16,122,9) 11%, rgb(71,204,41) 56%, rgb(87,255,61) 78%);

background-image: -webkit-gradient(
	linear,
	left top,
	left bottom,
	color-stop(0.11, rgb(16,122,9)),
	color-stop(0.56, rgb(71,204,41)),
	color-stop(0.78, rgb(87,255,61))
);

}
#cube .cubie > div.blue {
background-image: linear-gradient(top, rgb(86,56,255) 30%, rgb(62,36,212) 65%, rgb(42,26,163) 83%);
background-image: -o-linear-gradient(top, rgb(86,56,255) 30%, rgb(62,36,212) 65%, rgb(42,26,163) 83%);
background-image: -moz-linear-gradient(top, rgb(86,56,255) 30%, rgb(62,36,212) 65%, rgb(42,26,163) 83%);
background-image: -webkit-linear-gradient(top, rgb(86,56,255) 30%, rgb(62,36,212) 65%, rgb(42,26,163) 83%);
background-image: -ms-linear-gradient(top, rgb(86,56,255) 30%, rgb(62,36,212) 65%, rgb(42,26,163) 83%);

background-image: -webkit-gradient(
	linear,
	left top,
	left bottom,
	color-stop(0.3, rgb(86,56,255)),
	color-stop(0.65, rgb(62,36,212)),
	color-stop(0.83, rgb(42,26,163))
);
}
#cube .cubie > div.white {
	background-image: linear-gradient(top, rgb(143,143,143) 11%, rgb(255,255,255) 56%, rgb(255,255,255) 78%);
background-image: -o-linear-gradient(top, rgb(143,143,143) 11%, rgb(255,255,255) 56%, rgb(255,255,255) 78%);
background-image: -moz-linear-gradient(top, rgb(143,143,143) 11%, rgb(255,255,255) 56%, rgb(255,255,255) 78%);
background-image: -webkit-linear-gradient(top, rgb(143,143,143) 11%, rgb(255,255,255) 56%, rgb(255,255,255) 78%);
background-image: -ms-linear-gradient(top, rgb(143,143,143) 11%, rgb(255,255,255) 56%, rgb(255,255,255) 78%);

background-image: -webkit-gradient(
	linear,
	left top,
	left bottom,
	color-stop(0.11, rgb(143,143,143)),
	color-stop(0.56, rgb(255,255,255)),
	color-stop(0.78, rgb(255,255,255))
);
}
/* TEXT ROTATIONS */
.textLeft{-webkit-transform: rotate(-90deg)}
.textDown{-webkit-transform: rotate(-180deg)}
.textRight{-webkit-transform: rotate(90deg)}


/* PLANES & ROTATIONS */

#plane{
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
.moving {
	-webkit-transition: all .2s linear;
	-moz-transition: all .2s linear;
}

/*PLANE M */
.M-left {
	-webkit-transform-origin: 0px 200px;
	-webkit-transform:rotateX(90deg);
	-moz-transform-origin: 0px 200px;
	-moz-transform:rotateX(90deg);
}
.M-right {
	-webkit-transform-origin: 0px 200px;
	-webkit-transform:rotateX(-90deg);
	-moz-transform-origin: 0px 200px;
	-moz-transform:rotateX(-90deg);
}

/*PLANE E */
.E-right {
	-webkit-transform:rotateY(90deg);
	-moz-transform:rotateY(90deg)
	}
.E-left {
	-webkit-transform:rotateY(-90deg);
	-moz-transform:rotateY(-90deg)
}

/*PLANE S */
.S-left {
	-webkit-transform-origin: 200px 200px;
	-webkit-transform:rotateZ(-90deg);
	-moz-transform-origin: 200px 200px;
	-moz-transform:rotateZ(-90deg);
}
.S-right {
	-webkit-transform-origin: 200px 200px;
	-webkit-transform:rotateZ(90deg);
	-moz-transform-origin: 200px 200px;
	-moz-transform:rotateZ(90deg);
}

/* CUBIES POSITIONS*/

/*UP FACE CUBIES*/
.utl {
	-webkit-transform:rotateX(90deg) translate3d(50px,-100px,0);
	-moz-transform:rotateX(90deg) translate3d(50px,-100px,0);
}
.ucl {
	-webkit-transform:rotateX(90deg) translate3d(50px,0,0);
	-moz-transform:rotateX(90deg) translate3d(50px,0,0);
}
.ubl {
	-webkit-transform:rotateX(90deg) translate3d(50px,100px,0px);
	-moz-transform:rotateX(90deg) translate3d(50px,100px,0px);
}
.utc {
	-webkit-transform:rotateX(90deg) translate3d(150px,-100px,0);
	-moz-transform:rotateX(90deg) translate3d(150px,-100px,0);
}
.ucc {
	-webkit-transform:rotateX(90deg) translate3d(150px,0,0);
	-moz-transform:rotateX(90deg) translate3d(150px,0,0);
}
.ubc {
	-webkit-transform:rotateX(90deg) translate3d(150px,100px,0);
	-moz-transform:rotateX(90deg) translate3d(150px,100px,0);
}
.utr {
	-webkit-transform:rotateX(90deg) translate3d(250px,-100px,0);
	-moz-transform:rotateX(90deg) translate3d(250px,-100px,0);
}
.ucr {
	-webkit-transform:rotateX(90deg) translate3d(250px,0,0);
	-moz-transform:rotateX(90deg) translate3d(250px,0,0);
}
.ubr {
	-webkit-transform:rotateX(90deg) translate3d(250px,100px,0);
	-moz-transform:rotateX(90deg) translate3d(250px,100px,0);
}

/*FRONT FACE CUBIES*/
.ftl {
	-webkit-transform:translate3d(50px,50px,150px);
	-moz-transform:translate3d(50px,50px,150px);
}
.fcl {
	-webkit-transform:translate3d(50px,150px,150px);
	-moz-transform:translate3d(50px,150px,150px);

}
.fbl {
	-webkit-transform:translate3d(50px,250px,150px);
	-moz-transform:translate3d(50px,250px,150px);
}
.ftc {
	-webkit-transform:translate3d(150px,50px,150px);
	-moz-transform:translate3d(150px,50px,150px);
}
.fcc {
	-webkit-transform:translate3d(150px,150px,150px);
	-moz-transform:translate3d(150px,150px,150px);
}
.fbc {
	-webkit-transform:translate3d(150px,250px,150px);
	-moz-transform:translate3d(150px,250px,150px);
}
.ftr {
	-webkit-transform:translate3d(250px,50px,150px);
	-moz-transform:translate3d(250px,50px,150px);
}
.fcr {
	-webkit-transform:translate3d(250px,150px,150px);
	-moz-transform:translate3d(250px,150px,150px);
}
.fbr {
	-webkit-transform:translate3d(250px,250px,150px);
	-moz-transform:translate3d(250px,250px,150px);
}

/*DOWN FACE CUBIES*/
.dtl {
	-webkit-transform:rotateX(-90deg) translate3d(50px,-100px,300px);
	-moz-transform:rotateX(-90deg) translate3d(50px,-100px,300px);
}
.dcl {
	-webkit-transform:rotateX(-90deg) translate3d(50px,0,300px);
	-moz-transform:rotateX(-90deg) translate3d(50px,0,300px);
}
.dbl {
	-webkit-transform:rotateX(-90deg) translate3d(50px,100px,300px);
	-moz-transform:rotateX(-90deg) translate3d(50px,100px,300px);
}
.dtc {
	-webkit-transform:rotateX(-90deg) translate3d(150px,-100px,300px);
	-moz-transform:rotateX(-90deg) translate3d(150px,-100px,300px);
}
.dcc {
	-webkit-transform:rotateX(-90deg) translate3d(150px,0px,300px);
	-moz-transform:rotateX(-90deg) translate3d(150px,0px,300px);
}
.dbc {
	-webkit-transform:rotateX(-90deg) translate3d(150px,100px,300px);
	-moz-transform:rotateX(-90deg) translate3d(150px,100px,300px);
}
.dtr {
	-webkit-transform:rotateX(-90deg) translate3d(250px,-100px,300px);
	-moz-transform:rotateX(-90deg) translate3d(250px,-100px,300px);
}
.dcr {
	-webkit-transform:rotateX(-90deg) translate3d(250px,0px,300px);
	-moz-transform:rotateX(-90deg) translate3d(250px,0px,300px);
}
.dbr {
	-webkit-transform:rotateX(-90deg) translate3d(250px,100px,300px);
	-moz-transform:rotateX(-90deg) translate3d(250px,100px,300px);
}

/*BACK FACE CUBIES*/
.btl {
	-webkit-transform:rotateX(-180deg) translate3d(50px,-250px,150px);
	-moz-transform:rotateX(-180deg) translate3d(50px,-250px,150px);
}
.bcl {
	-webkit-transform:rotateX(-180deg) translate3d(50px,-150px,150px);
	-moz-transform:rotateX(-180deg) translate3d(50px,-150px,150px);
}
.bbl {
	-webkit-transform:rotateX(-180deg) translate3d(50px,-50px,150px);
	-moz-transform:rotateX(-180deg) translate3d(50px,-50px,150px);
}
.btc {
	-webkit-transform:rotateX(-180deg) translate3d(150px,-250px,150px);
	-moz-transform:rotateX(-180deg) translate3d(150px,-250px,150px);
}
.bcc {
	-webkit-transform:rotateX(-180deg) translate3d(150px,-150px,150px);
	-moz-transform:rotateX(-180deg) translate3d(150px,-150px,150px);
}
.bbc {
	-webkit-transform:rotateX(-180deg) translate3d(150px,-50px,150px);
	-moz-transform:rotateX(-180deg) translate3d(150px,-50px,150px);
}
.btr {
	-webkit-transform:rotateX(-180deg) translate3d(250px,-250px,150px);
	-moz-transform:rotateX(-180deg) translate3d(250px,-250px,150px);
}
.bcr {
	-webkit-transform:rotateX(-180deg) translate3d(250px,-150px,150px);
	-moz-transform:rotateX(-180deg) translate3d(250px,-150px,150px)

}
.bbr {
	-webkit-transform:rotateX(-180deg) translate3d(250px,-50px,150px);
	-moz-transform:rotateX(-180deg) translate3d(250px,-50px,150px);
}

/*LEFT FACE CUBIES*/
.ltl {
	-webkit-transform:rotateY(-90deg) translate3d(-100px,50px,0px);
	-moz-transform:rotateY(-90deg) translate3d(-100px,50px,0px);
}
.lcl {
	-webkit-transform:rotateY(-90deg) translate3d(-100px,150px,0px);
	-moz-transform:rotateY(-90deg) translate3d(-100px,150px,0px);
}
.lbl {
	-webkit-transform:rotateY(-90deg) translate3d(-100px,250px,0px);
	-moz-transform:rotateY(-90deg) translate3d(-100px,250px,0px);
}
.ltc {
	-webkit-transform:rotateY(-90deg) translate3d(0px,50px,0px);
	-moz-transform:rotateY(-90deg) translate3d(0px,50px,0px);
}
.lcc {
	-webkit-transform:rotateY(-90deg) translate3d(0px,150px,0px);
	-moz-transform:rotateY(-90deg) translate3d(0px,150px,0px);
}
.lbc {
	-webkit-transform:rotateY(-90deg) translate3d(0px,250px,0px);
	-moz-transform:rotateY(-90deg) translate3d(0px,250px,0px);
}
.ltr {
	-webkit-transform:rotateY(-90deg) translate3d(100px,50px,0px);
	-moz-transform:rotateY(-90deg) translate3d(100px,50px,0px);
}
.lcr {
	-webkit-transform:rotateY(-90deg) translate3d(100px,150px,0px);
	-moz-transform:rotateY(-90deg) translate3d(100px,150px,0px);
}
.lbr {
	-webkit-transform:rotateY(-90deg) translate3d(100px,250px,0px);
	-moz-transform:rotateY(-90deg) translate3d(100px,250px,0px);
}

/*RIGHT FACE CUBIES*/
.rtl {
	-webkit-transform:rotateY(90deg) translate3d(-100px,50px,300px);
	-moz-transform:rotateY(90deg) translate3d(-100px,50px,300px);
}
.rcl {
	-webkit-transform:rotateY(90deg) translate3d(-100px,150px,300px);
	-moz-transform:rotateY(90deg) translate3d(-100px,150px,300px);
}
.rbl {
	-webkit-transform:rotateY(90deg) translate3d(-100px,250px,300px);
	-moz-transform:rotateY(90deg) translate3d(-100px,250px,300px);
}
.rtc {
	-webkit-transform:rotateY(90deg) translate3d(0px,50px,300px);
	-moz-transform:rotateY(90deg) translate3d(0px,50px,300px);;
}
.rcc {
	-webkit-transform:rotateY(90deg) translate3d(0px,150px,300px);
	-moz-transform:rotateY(90deg) translate3d(0px,150px,300px);
}
.rbc {
	-webkit-transform:rotateY(90deg) translate3d(0px,250px,300px);
	-moz-transform:rotateY(90deg) translate3d(0px,250px,300px);
}
.rtr {
	-webkit-transform:rotateY(90deg) translate3d(100px,50px,300px);
	-moz-transform:rotateY(90deg) translate3d(100px,50px,300px);
}
.rcr {
	-webkit-transform:rotateY(90deg) translate3d(100px,150px,300px);
	-moz-transform:rotateY(90deg) translate3d(100px,150px,300px);
}
.rbr {
	-webkit-transform:rotateY(90deg) translate3d(100px,250px,300px);
	-moz-transform:rotateY(90deg) translate3d(100px,250px,300px);
}