#cube-container {
    width: 100%;
    position: absolute;
    top: 30%;
    left: 100px;
    right:0;
}

#cube-viewport {
    -webkit-perspective: 600px;
    -webkit-perspective-origin: 150px 150px;
    transform: rotate(2deg);
    -webkit-transform-origin-y: 1px;
}

#cube {
    position: relative;
    height: 300px;
    width: 300px;
    max-width: 600px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-tap-highlight-color: transparent;
    margin-left: auto;
    margin-right: auto;
    float: none;
}

.row {
    -webkit-transform-style: preserve-3d;
    -webkit-transform-origin: 50% 50% -150px;
    height: auto;
}

#cube .cubie {
    box-sizing: border-box;
    position: absolute;
    border: 1px solid #161616;
    border-radius: 15px;
    width: 90px;
    height: 90px;
    background-size: 100px;
    opacity: 1;
    z-index: -1;
    text-align: center;
    font-size: 30px;
    transition: 0.2s;
    -webkit-tap-highlight-color: transparent;
    -webkit-transform-origin: 0 0;
}

#cube .cubie.right {
    opacity: 0.5;
}

#cube .cubie.back {
    opacity: 0.5;
}

#cube .cubie.down {
    opacity: 0.5;
}

#cube .cubie>div {
    line-height: 100px;
    border-radius: 8px;
}

#cube .cubie>div span {
    opacity: 0.25;
}

#cube .cubie.right>div span {
    display: none;
}

#cube .cubie.down>div span {
    display: none;
}

#cube .cubie.back>div span {
    display: none;
}

/* CUBIE COLORS*/

#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)));
}

.ftl {
    -webkit-transform: rotateX(0) translate3d(0, 0, 0);
}

.fcl {
    -webkit-transform: rotateX(0) translate3d(0, 100px, 0);
}

.fbl {
    -webkit-transform: rotateX(0) translate3d(0, 200px, 0);
}

.ftc {
    -webkit-transform: rotateX(0) translate3d(100px, 0, 0);
}

.fcc {
    -webkit-transform: rotateX(0) translate3d(100px, 100px, 0);
}

.fbc {
    -webkit-transform: rotateX(0) translate3d(100px, 200px, 0);
}

.ftr {
    -webkit-transform: rotateX(0) translate3d(200px, 0, 0);
}

.fcr {
    -webkit-transform: rotateX(0) translate3d(200px, 100px, 0);
}

.fbr {
    -webkit-transform: rotateX(0) translate3d(200px, 200px, 0);
}

.btl {
    -webkit-transform: rotateY(180deg) translate3d(-300px, 0, 300px);
}

.bcl {
    -webkit-transform: rotateY(180deg) translate3d(-300px, 100px, 300px);
}

.bbl {
    -webkit-transform: rotateY(180deg) translate3d(-300px, 200px, 300px);
}

.btc {
    -webkit-transform: rotateY(180deg) translate3d(-200px, 0, 300px);
}

.bcc {
    -webkit-transform: rotateY(180deg) translate3d(-200px, 100px, 300px);
}

.bbc {
    -webkit-transform: rotateY(180deg) translate3d(-200px, 200px, 300px);
}

.btr {
    -webkit-transform: rotateY(180deg) translate3d(-100px, 0, 300px);
}

.bcr {
    -webkit-transform: rotateY(180deg) translate3d(-100px, 100px, 300px);
}

.bbr {
    -webkit-transform: rotateY(180deg) translate3d(-100px, 200px, 300px);
}

.rtl {
    -webkit-transform: rotateY(90deg) translate3d(0, 0, 300px);
}

.rcl {
    -webkit-transform: rotateY(90deg) translate3d(0, 100px, 300px);
}

.rbl {
    -webkit-transform: rotateY(90deg) translate3d(0, 200px, 300px);
}

.rtc {
    -webkit-transform: rotateY(90deg) translate3d(100px, 0, 300px);
}

.rcc {
    -webkit-transform: rotateY(90deg) translate3d(100px, 100px, 300px);
}

.rbc {
    -webkit-transform: rotateY(90deg) translate3d(100px, 200px, 300px);
}

.rtr {
    -webkit-transform: rotateY(90deg) translate3d(200px, 0, 300px);
}

.rcr {
    -webkit-transform: rotateY(90deg) translate3d(200px, 100px, 300px);
}

.rbr {
    -webkit-transform: rotateY(90deg) translate3d(200px, 200px, 300px);
}

.ltl {
    -webkit-transform: rotateY(-90deg) translate3d(-300px, 0, 0);
}

.lcl {
    -webkit-transform: rotateY(-90deg) translate3d(-300px, 100px, 0);
}

.lbl {
    -webkit-transform: rotateY(-90deg) translate3d(-300px, 200px, 0);
}

.ltc {
    -webkit-transform: rotateY(-90deg) translate3d(-200px, 0, 0);
}

.lcc {
    -webkit-transform: rotateY(-90deg) translate3d(-200px, 100px, 0);
}

.lbc {
    -webkit-transform: rotateY(-90deg) translate3d(-200px, 200px, 0);
}

.ltr {
    -webkit-transform: rotateY(-90deg) translate3d(-100px, 0, 0);
}

.lcr {
    -webkit-transform: rotateY(-90deg) translate3d(-100px, 100px, 0);
}

.lbr {
    -webkit-transform: rotateY(-90deg) translate3d(-100px, 200px, 0);
}

.utl {
    -webkit-transform: rotateX(90deg) translate3d(0, -300px, 0);
}

.ucl {
    -webkit-transform: rotateX(90deg) translate3d(0, -200px, 0);
}

.ubl {
    -webkit-transform: rotateX(90deg) translate3d(0, -100px, 0);
}

.utc {
    -webkit-transform: rotateX(90deg) translate3d(100px, -300px, 0);
}

.ucc {
    -webkit-transform: rotateX(90deg) translate3d(100px, -200px, 0);
}

.ubc {
    -webkit-transform: rotateX(90deg) translate3d(100px, -100px, 0);
}

.utr {
    -webkit-transform: rotateX(90deg) translate3d(200px, -300px, 0);
}

.ucr {
    -webkit-transform: rotateX(90deg) translate3d(200px, -200px, 0);
}

.ubr {
    -webkit-transform: rotateX(90deg) translate3d(200px, -100px, 0);
}

.dtl {
    -webkit-transform: rotateX(-90deg) translate3d(0, 0, 300px);
}

.dcl {
    -webkit-transform: rotateX(-90deg) translate3d(0, 100px, 300px);
}

.dbl {
    -webkit-transform: rotateX(-90deg) translate3d(0, 200px, 300px);
}

.dtc {
    -webkit-transform: rotateX(-90deg) translate3d(100px, 0, 300px);
}

.dcc {
    -webkit-transform: rotateX(-90deg) translate3d(100px, 100px, 300px);
}

.dbc {
    -webkit-transform: rotateX(-90deg) translate3d(100px, 200px, 300px);
}

.dtr {
    -webkit-transform: rotateX(-90deg) translate3d(200px, 0, 300px);
}

.dcr {
    -webkit-transform: rotateX(-90deg) translate3d(200px, 100px, 300px);
}

.dbr {
    -webkit-transform: rotateX(-90deg) translate3d(200px, 200px, 300px);
}

#cube .cubie.use.active, #cube .cubie.active.hover {
    background: rgba(255, 255, 255, 0.75);
}

#cube .cubie.hover {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

#cube .cubie svg {
    transition: 0.2s;
    width: 100%;
    height: 100%;
}

#cube .cubie.hover svg {
    fill: rgba(255, 255, 255, 0.75);
}