/* -------------------- START box CONTENT -------------------- */


/* dependant on something */
#stage,#stageB,#stageC{overflow:visible;position:absolute;float:center;width:100%;height:100%;margin:0 auto}/* float:left *//* width:var(--displayAwidth); /* height:var(--displayAheight); z-index:auto */

.oldbrowser-stage,.oldbrowserB-stageB,.oldbrowserC-stageC{overflow:visible}

#cube,#cubeB,#cubeC{overflow:visible;position:relative;z-index:auto}

/* the cube face ... keep in mind that thicker border will cause final shake on turn/flip sequence */
#cube div,#cubeB div,#cubeC div{overflow:visible;position:absolute;padding:0;color:#333;border:0 solid #555;box-shadow:inset 0 0 var(--boxshadow) rgba(0,0,0,0.4);text-align:center;font-size:.85vw;line-height:1.2vw}/* our space between sentences */

#cube div{width:var(--cubedisplaywidth);height:var(--cubedisplayheight)}
#cubeB div{width:var(--cubeBdisplayBwidth);height:var(--cubeBdisplayBheight)}
#cubeC div{width:var(--cubeCdisplayCwidth);height:var(--cubeCdisplayCheight)}

#first,#next,#pre,#firstB,#nextB,#preB,#firstC,#nextC,#preC{display:block;background-color:#fff}

#cube #first.modernbrowser-first{-webkit-transform:translateZ(var(--cubexorigintranslateZ));-moz-transform:translateZ(var(--cubexorigintranslateZ));-ms-transform:translateZ(var(--cubexorigintranslateZ));-o-transform:translateZ(var(--cubexorigintranslateZ));transform:translateZ(var(--cubexorigintranslateZ));z-index:1}
#cubeB #firstB.modernbrowserB-firstB{-webkit-transform:translateZ(var(--cubeBxorigintranslateZ));-moz-transform:translateZ(var(--cubeBxorigintranslateZ));-ms-transform:translateZ(var(--cubeBxorigintranslateZ));-o-transform:translateZ(var(--cubeBxorigintranslateZ));transform:translateZ(var(--cubeBxorigintranslateZ));z-index:1}
#cubeC #firstC.modernbrowserC-firstC{-webkit-transform:translateZ(var(--cubeCxorigintranslateZ));-moz-transform:translateZ(var(--cubeCxorigintranslateZ));-ms-transform:translateZ(var(--cubeCxorigintranslateZ));-o-transform:translateZ(var(--cubeCxorigintranslateZ));transform:translateZ(var(--cubeCxorigintranslateZ));z-index:1}

#cube #next.modernbrowser-next{-webkit-transform:rotateY(90deg) translateZ(var(--cubexorigintranslateZ));-moz-transform:rotateY(90deg) translateZ(var(--cubexorigintranslateZ));-ms-transform:rotateY(90deg) translateZ(var(--cubexorigintranslateZ));-o-transform:rotateY(90deg) translateZ(var(--cubexorigintranslateZ));transform:rotateY(90deg) translateZ(var(--cubexorigintranslateZ))}
#cubeB #nextB.modernbrowserB-nextB{-webkit-transform:rotateY(90deg) translateZ(var(--cubeBxorigintranslateZ));-moz-transform:rotateY(90deg) translateZ(var(--cubeBxorigintranslateZ));-ms-transform:rotateY(90deg) translateZ(var(--cubeBxorigintranslateZ));-o-transform:rotateY(90deg) translateZ(var(--cubeBxorigintranslateZ));transform:rotateY(90deg) translateZ(var(--cubeBxorigintranslateZ))}
#cubeC #nextC.modernbrowserC-nextC{-webkit-transform:rotateY(90deg) translateZ(var(--cubeCxorigintranslateZ));-moz-transform:rotateY(90deg) translateZ(var(--cubeCxorigintranslateZ));-ms-transform:rotateY(90deg) translateZ(var(--cubeCxorigintranslateZ));-o-transform:rotateY(90deg) translateZ(var(--cubeCxorigintranslateZ));transform:rotateY(90deg) translateZ(var(--cubeCxorigintranslateZ))}

#cube #pre.modernbrowser-pre{-webkit-transform:rotateY(-90deg) translateZ(var(--cubexorigintranslateZ));-moz-transform:rotateY(-90deg) translateZ(var(--cubexorigintranslateZ));-ms-transform:rotateY(-90deg) translateZ(var(--cubexorigintranslateZ));-o-transform:rotateY(-90deg) translateZ(var(--cubexorigintranslateZ));transform:rotateY(-90deg) translateZ(var(--cubexorigintranslateZ))}
#cubeB #preB.modernbrowserB-preB{-webkit-transform:rotateY(-90deg) translateZ(var(--cubeBxorigintranslateZ));-moz-transform:rotateY(-90deg) translateZ(var(--cubeBxorigintranslateZ));-ms-transform:rotateY(-90deg) translateZ(var(--cubeBxorigintranslateZ));-o-transform:rotateY(-90deg) translateZ(var(--cubeBxorigintranslateZ));transform:rotateY(-90deg) translateZ(var(--cubeBxorigintranslateZ))}
#cubeC #preC.modernbrowserC-preC{-webkit-transform:rotateY(-90deg) translateZ(var(--cubeCxorigintranslateZ));-moz-transform:rotateY(-90deg) translateZ(var(--cubeCxorigintranslateZ));-ms-transform:rotateY(-90deg) translateZ(var(--cubeCxorigintranslateZ));-o-transform:rotateY(-90deg) translateZ(var(--cubeCxorigintranslateZ));transform:rotateY(-90deg) translateZ(var(--cubeCxorigintranslateZ))}

#cube #first.oldbrowser-first,
#cubeB #firstB.oldbrowserB-firstB,
#cubeC #firstC.oldbrowserC-firstC{}

#cube #next.oldbrowser-next{left:var(--cubedisplaywidth)}
#cubeB #nextB.oldbrowserB-nextB{left:var(--cubeBdisplayBwidth)}
#cubeC #nextC.oldbrowserC-nextC{left:var(--cubeCdisplayCwidth)}

#cube #pre.oldbrowser-pre{left:var(--cubedisplaywidthNeg)}
#cubeB #preB.oldbrowserB-preB{left:var(--cubeBdisplayBwidthNeg)}
#cubeC #preC.oldbrowserC-preC{left:var(--cubeCdisplayCwidthNeg)}

.first{-webkit-animation:anifirst 1000ms ease-out 1 normal;-moz-animation:anifirst 1000ms ease-out 1 normal;-ms-animation:anifirst 1000ms ease-out 1 normal;-o-animation:anifirst 1000ms ease-out 1 normal;animation:anifirst 1000ms ease-out 1 normal}
.firstB{-webkit-animation:anifirstB 875ms ease-out 1 normal;-moz-animation:anifirstB 875ms ease-out 1 normal;-ms-animation:anifirstB 875ms ease-out 1 normal;-o-animation:anifirstB 875ms ease-out 1 normal;animation:anifirstB 875ms ease-out 1 normal}
.firstC{-webkit-animation:anifirstC 750ms ease-out 1 normal;-moz-animation:anifirstC 750ms ease-out 1 normal;-ms-animation:anifirstC 750ms ease-out 1 normal;-o-animation:anifirstC 750ms ease-out 1 normal;animation:anifirstC 750ms ease-out 1 normal}

/* -------------------------------------- keyframes anifirst */
@-webkit-keyframes anifirst{0%{background:#121212;box-shadow:inset 0 0 var(--boxshadow) rgba(0,0,0,0.4)}100%{background:var(--anifirstcolor);box-shadow:inset 0 0 0 rgba(0,0,0,0)}}
@-moz-keyframes anifirst{0%{background:#121212;box-shadow:inset 0 0 var(--boxshadow) rgba(0,0,0,0.4)}100%{background:var(--anifirstcolor);box-shadow:inset 0 0 0 rgba(0,0,0,0)}}
@-ms-keyframes anifirst{0%{background:#121212;box-shadow:inset 0 0 var(--boxshadow) rgba(0,0,0,0.4)}100%{background:var(--anifirstcolor);box-shadow:inset 0 0 0 rgba(0,0,0,0)}}
@-o-keyframes anifirst{0%{background:#121212;box-shadow:inset 0 0 var(--boxshadow) rgba(0,0,0,0.4)}100%{background:var(--anifirstcolor);box-shadow:inset 0 0 0 rgba(0,0,0,0)}}
@keyframes anifirst{0%{background:#121212;box-shadow:inset 0 0 var(--boxshadow) rgba(0,0,0,0.4)}100%{background:var(--anifirstcolor);box-shadow:inset 0 0 0 rgba(0,0,0,0)}}

/* -------------------------------------- keyframes anifirst1 */
@-webkit-keyframes anifirstB{0%{background:#121212;box-shadow:inset 0 0 var(--boxshadow) rgba(0,0,0,0.4)}100%{background:var(--anifirstcolor);box-shadow:inset 0 0 0 rgba(0,0,0,0)}}
@-moz-keyframes anifirstB{0%{background:#121212;box-shadow:inset 0 0 var(--boxshadow) rgba(0,0,0,0.4)}100%{background:var(--anifirstcolor);box-shadow:inset 0 0 0 rgba(0,0,0,0)}}
@-ms-keyframes anifirstB{0%{background:#121212;box-shadow:inset 0 0 var(--boxshadow) rgba(0,0,0,0.4)}100%{background:var(--anifirstcolor);box-shadow:inset 0 0 0 rgba(0,0,0,0)}}
@-o-keyframes anifirstB{0%{background:#121212;box-shadow:inset 0 0 var(--boxshadow) rgba(0,0,0,0.4)}100%{background:var(--anifirstcolor);box-shadow:inset 0 0 0 rgba(0,0,0,0)}}
@keyframes anifirstB{0%{background:#121212;box-shadow:inset 0 0 var(--boxshadow) rgba(0,0,0,0.4)}100%{background:var(--anifirstcolor);box-shadow:inset 0 0 0 rgba(0,0,0,0)}}

/* -------------------------------------- keyframes anifirst2 */
@-webkit-keyframes anifirstC{0%{background:#121212;box-shadow:inset 0 0 var(--boxshadow) rgba(0,0,0,0.4)}100%{background:var(--anifirstcolor);box-shadow:inset 0 0 0 rgba(0,0,0,0)}}
@-moz-keyframes anifirstC{0%{background:#121212;box-shadow:inset 0 0 var(--boxshadow) rgba(0,0,0,0.4)}100%{background:var(--anifirstcolor);box-shadow:inset 0 0 0 rgba(0,0,0,0)}}
@-ms-keyframes anifirstC{0%{background:#121212;box-shadow:inset 0 0 var(--boxshadow) rgba(0,0,0,0.4)}100%{background:var(--anifirstcolor);box-shadow:inset 0 0 0 rgba(0,0,0,0)}}
@-o-keyframes anifirstC{0%{background:#121212;box-shadow:inset 0 0 var(--boxshadow) rgba(0,0,0,0.4)}100%{background:var(--anifirstcolor);box-shadow:inset 0 0 0 rgba(0,0,0,0)}}
@keyframes anifirstC{0%{background:#121212;box-shadow:inset 0 0 var(--boxshadow) rgba(0,0,0,0.4)}100%{background:var(--anifirstcolor);box-shadow:inset 0 0 0 rgba(0,0,0,0)}}

.prenext{-webkit-animation:aniside 1000ms ease 1 normal;-moz-animation:aniside 1000ms ease 1 normal;-ms-animation:aniside 1000ms ease 1 normal;-o-animation:aniside 1000ms ease 1 normal;animation:aniside 1000ms ease 1 normal}
.prenextB{-webkit-animation:anisideB 875ms ease 1 normal;-moz-animation:anisideB 875ms ease 1 normal;-ms-animation:anisideB 875ms ease 1 normal;-o-animation:anisideB 875ms ease 1 normal;animation:anisideB 875ms ease 1 normal}
.prenextC{-webkit-animation:anisideC 750ms ease 1 normal;-moz-animation:anisideC 750ms ease 1 normal;-ms-animation:anisideC 750ms ease 1 normal;-o-animation:anisideC 750ms ease 1 normal;animation:anisideC 750ms ease 1 normal}

/* -------------------------------------- keyframes aniside */
@-webkit-keyframes aniside{0%{background:var(--anisidecolor);box-shadow:inset 0 0 0 rgba(0,0,0,0)}100%{background:#fff;box-shadow:inset 0 0 var(--boxshadow) rgba(0,0,0,0.4)}}
@-moz-keyframes aniside{0%{background:var(--anisidecolor);box-shadow:inset 0 0 0 rgba(0,0,0,0)}100%{background:#fff;box-shadow:inset 0 0 var(--boxshadow) rgba(0,0,0,0.4)}}
@-ms-keyframes aniside{0%{background:var(--anisidecolor);box-shadow:inset 0 0 0 rgba(0,0,0,0)}100%{background:#fff;box-shadow:inset 0 0 var(--boxshadow) rgba(0,0,0,0.4)}}
@-o-keyframes aniside{0%{background:var(--anisidecolor);box-shadow:inset 0 0 0 rgba(0,0,0,0)}100%{background:#fff;box-shadow:inset 0 0 var(--boxshadow) rgba(0,0,0,0.4)}}
@keyframes aniside{0%{background:var(--anisidecolor);box-shadow:inset 0 0 0 rgba(0,0,0,0)}100%{background:#fff;box-shadow:inset 0 0 var(--boxshadow) rgba(0,0,0,0.4)}}

/* -------------------------------------- keyframes aniside1 */
@-webkit-keyframes anisideB{0%{background:var(--anisidecolor);box-shadow:inset 0 0 0 rgba(0,0,0,0)}100%{background:#fff;box-shadow:inset 0 0 var(--boxshadow) rgba(0,0,0,0.4)}}
@-moz-keyframes anisideB{0%{background:var(--anisidecolor);box-shadow:inset 0 0 0 rgba(0,0,0,0)}100%{background:#fff;box-shadow:inset 0 0 var(--boxshadow) rgba(0,0,0,0.4)}}
@-ms-keyframes anisideB{0%{background:var(--anisidecolor);box-shadow:inset 0 0 0 rgba(0,0,0,0)}100%{background:#fff;box-shadow:inset 0 0 var(--boxshadow) rgba(0,0,0,0.4)}}
@-o-keyframes anisideB{0%{background:var(--anisidecolor);box-shadow:inset 0 0 0 rgba(0,0,0,0)}100%{background:#fff;box-shadow:inset 0 0 var(--boxshadow) rgba(0,0,0,0.4)}}
@keyframes anisideB{0%{background:var(--anisidecolor);box-shadow:inset 0 0 0 rgba(0,0,0,0)}100%{background:#fff;box-shadow:inset 0 0 var(--boxshadow) rgba(0,0,0,0.4)}}

/* -------------------------------------- keyframes aniside2 */
@-webkit-keyframes anisideC{0%{background:var(--anisidecolor);box-shadow:inset 0 0 0 rgba(0,0,0,0)}100%{background:#fff;box-shadow:inset 0 0 var(--boxshadow) rgba(0,0,0,0.4)}}
@-moz-keyframes anisideC{0%{background:var(--anisidecolor);box-shadow:inset 0 0 0 rgba(0,0,0,0)}100%{background:#fff;box-shadow:inset 0 0 var(--boxshadow) rgba(0,0,0,0.4)}}
@-ms-keyframes anisideC{0%{background:var(--anisidecolor);box-shadow:inset 0 0 0 rgba(0,0,0,0)}100%{background:#fff;box-shadow:inset 0 0 var(--boxshadow) rgba(0,0,0,0.4)}}
@-o-keyframes anisideC{0%{background:var(--anisidecolor);box-shadow:inset 0 0 0 rgba(0,0,0,0)}100%{background:#fff;box-shadow:inset 0 0 var(--boxshadow) rgba(0,0,0,0.4)}}
@keyframes anisideC{0%{background:var(--anisidecolor);box-shadow:inset 0 0 0 rgba(0,0,0,0)}100%{background:#fff;box-shadow:inset 0 0 var(--boxshadow) rgba(0,0,0,0.4)}}

/* keep these 'animation-llets' seperate no CONGLOMERATES ... e.g. 'animation: var ease-out 1s;' */
.animation,.animation2,.animation-flat,.animation2-flat,
.animationB,.animation2B,.animationB-flatB,.animation2B-flatB,
.animationC,.animation2C,.animationC-flatC,.animation2C-flatC{color:#000;-webkit-animation-timing-function:ease-in;-moz-animation-timing-function:ease-in;-ms-animation-timing-function:ease-in;-o-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-animation-iteration-count:1;-moz-animation-iteration-count:1;-ms-animation-iteration-count:1;-o-animation-iteration-count:1;animation-iteration-count:1;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;-o-transform-style:preserve-3d;transform-style:preserve-3d;color:#000;z-index:-1}

.animation,.animation2,.animation-flat,.animation2-flat{-webkit-animation-duration:1000ms;-moz-animation-duration:1000ms;-ms-animation-duration:1000ms;-o-animation-duration:1000ms;animation-duration:1000ms;-webkit-transform-origin:var(--cubexorigintranslateZ) var(--yorigin) var(--zorigin);-moz-transform-origin:var(--cubexorigintranslateZ) var(--yorigin) var(--zorigin);-ms-transform-origin:var(--cubexorigintranslateZ) var(--yorigin) var(--zorigin);-o-transform-origin:var(--cubexorigintranslateZ) var(--yorigin) var(--zorigin);transform-origin:var(--cubexorigintranslateZ) var(--yorigin) var(--zorigin)}
.animationB,.animation2B,.animationB-flatB,.animation2B-flatB{-webkit-animation-duration:875ms;-moz-animation-duration:875ms;-ms-animation-duration:875ms;-o-animation-duration:875ms;animation-duration:875ms;-webkit-transform-origin:var(--cubeBxorigintranslateZ) var(--yorigin) var(--zorigin);-moz-transform-origin:var(--cubeBxorigintranslateZ) var(--yorigin) var(--zorigin);-ms-transform-origin:var(--cubeBxorigintranslateZ) var(--yorigin) var(--zorigin);-o-transform-origin:var(--cubeBxorigintranslateZ) var(--yorigin) var(--zorigin);transform-origin:var(--cubeBxorigintranslateZ) var(--yorigin) var(--zorigin)}
.animationC,.animation2C,.animationC-flatC,.animation2C-flatC{-webkit-animation-duration:750ms;-moz-animation-duration:750ms;-ms-animation-duration:750ms;-o-animation-duration:750ms;animation-duration:750ms;-webkit-transform-origin:var(--cubeCxorigintranslateZ) var(--yorigin) var(--zorigin);-moz-transform-origin:var(--cubeCxorigintranslateZ) var(--yorigin) var(--zorigin);-ms-transform-origin:var(--cubeCxorigintranslateZ) var(--yorigin) var(--zorigin);-o-transform-origin:var(--cubeCxorigintranslateZ) var(--yorigin) var(--zorigin);transform-origin:var(--cubeCxorigintranslateZ) var(--yorigin) var(--zorigin)}

/* -------------------------------------- animation NONE */
.animation{-webkit-animation-name:nextimg;-moz-animation-name:nextimg;-ms-animation-name:nextimg;-o-animation-name:nextimg;animation-name:nextimg}
.animation2{-webkit-animation-name:preimg;-moz-animation-name:preimg;-ms-animation-name:nextimg;-o-animation-name:preimg;animation-name:preimg}
.animation-flat{-webkit-animation-name:nextimg-flat;-moz-animation-name:nextimg-flat;-ms-animation-name:nextimg-flat;-o-animation-name:nextimg-flat;animation-name:nextimg-flat}
.animation2-flat{-webkit-animation-name:preimg-flat;-moz-animation-name:preimg-flat;-ms-animation-name:preimg-flat;-o-animation-name:preimg-flat;animation-name:preimg-flat}

/* -------------------------------------- animation 2A */
.animationB{-webkit-animation-name:nextimgB;-moz-animation-name:nextimgB;-ms-animation-name:nextimgB;-o-animation-name:nextimgB;animation-name:nextimgB}
.animation2B{-webkit-animation-name:preimgB;-moz-animation-name:preimgB;-ms-animation-name:preimgB;-o-animation-name:preimgB;animation-name:preimgB}
.animationB-flatB{-webkit-animation-name:nextimgB-flatB;-moz-animation-name:nextimgB-flatB;-ms-animation-name:nextimgB-flatB;-o-animation-name:nextimgB-flatB;animation-name:nextimgB-flatB}
.animation2B-flatB{-webkit-animation-name:preimgB-flatB;-moz-animation-name:preimgB-flatB;-ms-animation-name:preimgB-flatB;-o-animation-name:preimgB-flatB;animation-name:preimgB-flatB}

/* -------------------------------------- animation 2B */
.animationC{-webkit-animation-name:nextimgC;-moz-animation-name:nextimgC;-ms-animation-name:nextimgC;-o-animation-name:nextimgC;animation-name:nextimgC}
.animation2C{-webkit-animation-name:preimgC;-moz-animation-name:preimgC;-ms-animation-name:preimgC;-o-animation-name:preimgC;animation-name:preimgC}
.animationC-flatC{-webkit-animation-name:nextimgC-flatC;-moz-animation-name:nextimgC-flatC;-ms-animation-name:nextimgC-flatC;-o-animation-name:nextimgC-flatC;animation-name:nextimgC-flatC}
.animation2C-flatC{-webkit-animation-name:preimgC-flatC;-moz-animation-name:preimgC-flatC;-ms-animation-name:preimgC-flatC;-o-animation-name:preimgC-flatC;animation-name:preimgC-flatC}

/* -------------------------------------- keyframes NEXTIMG *//* NONE -------------------------------------- */
@-webkit-keyframes nextimg{0%{-webkit-transform:rotateY(0);transform:rotateY(0);rgba(0,0,0,0)}100%{-webkit-transform:rotateY(-90deg);transform:rotateY(-90deg);rgba(0,0,0,1)}}
@-moz-keyframes nextimg{0%{-moz-transform:rotateY(0);transform:rotateY(0);rgba(0,0,0,0)}100%{-moz-transform:rotateY(-90deg);transform:rotateY(-90deg);rgba(0,0,0,1)}}
@-ms-keyframes nextimg{0%{-ms-transform:rotateY(0);transform:rotateY(0);rgba(0,0,0,0)}100%{-ms-transform:rotateY(-90deg);transform:rotateY(-90deg);rgba(0,0,0,1)}}
@-o-keyframes nextimg{0%{-o-transform:rotateY(0);transform:rotateY(0);rgba(0,0,0,0)}100%{-o-transform:rotateY(-90deg);transform:rotateY(-90deg);rgba(0,0,0,1)}}
@keyframes nextimg{0%{transform:rotateY(0);rgba(0,0,0,0)}100%{transform:rotateY(-90deg);rgba(0,0,0,1)}}

@-webkit-keyframes nextimgB{0%{-webkit-transform:rotateY(0);transform:rotateY(0);rgba(0,0,0,0)}100%{-webkit-transform:rotateY(-90deg);transform:rotateY(-90deg);rgba(0,0,0,1)}}
@-moz-keyframes nextimgB{0%{-moz-transform:rotateY(0);transform:rotateY(0);rgba(0,0,0,0)}100%{-moz-transform:rotateY(-90deg);transform:rotateY(-90deg);rgba(0,0,0,1)}}
@-ms-keyframes nextimgB{0%{-ms-transform:rotateY(0);transform:rotateY(0);rgba(0,0,0,0)}100%{-ms-transform:rotateY(-90deg);transform:rotateY(-90deg);rgba(0,0,0,1)}}
@-o-keyframes nextimgB{0%{-o-transform:rotateY(0);transform:rotateY(0);rgba(0,0,0,0)}100%{-o-transform:rotateY(-90deg);transform:rotateY(-90deg);rgba(0,0,0,1)}}
@keyframes nextimgB{0%{transform:rotateY(0);rgba(0,0,0,0)}100%{transform:rotateY(-90deg);rgba(0,0,0,1)}}

@-webkit-keyframes nextimgC{0%{-webkit-transform:rotateY(0);transform:rotateY(0);rgba(0,0,0,0)}100%{-webkit-transform:rotateY(-90deg);transform:rotateY(-90deg);rgba(0,0,0,1)}}
@-moz-keyframes nextimgC{0%{-moz-transform:rotateY(0);transform:rotateY(0);rgba(0,0,0,0)}100%{-moz-transform:rotateY(-90deg);transform:rotateY(-90deg);rgba(0,0,0,1)}}
@-ms-keyframes nextimgC{0%{-ms-transform:rotateY(0);transform:rotateY(0);rgba(0,0,0,0)}100%{-ms-transform:rotateY(-90deg);transform:rotateY(-90deg);rgba(0,0,0,1)}}
@-o-keyframes nextimgC{0%{-o-transform:rotateY(0);transform:rotateY(0);rgba(0,0,0,0)}100%{-o-transform:rotateY(-90deg);transform:rotateY(-90deg);rgba(0,0,0,1)}}
@keyframes nextimgC{0%{transform:rotateY(0);rgba(0,0,0,0)}100%{transform:rotateY(-90deg);rgba(0,0,0,1)}}

/* -------------------------------------- keyframes PREIMG *//* NONE -------------------------------------- */
@-webkit-keyframes preimg{0%{-webkit-transform:rotateY(0);transform:rotateY(0)}100%{-webkit-transform:rotateY(90deg);transform:rotateY(90deg)}}
@-moz-keyframes preimg{0%{-moz-transform:rotateY(0);transform:rotateY(0)}100%{-moz-transform:rotateY(90deg);transform:rotateY(90deg)}}
@-ms-keyframes preimg{0%{-ms-transform:rotateY(0);transform:rotateY(0)}100%{-ms-transform:rotateY(90deg);transform:rotateY(90deg)}}
@-o-keyframes preimg{0%{-o-transform:rotateY(0);transform:rotateY(0)}100%{-o-transform:rotateY(90deg);transform:rotateY(90deg)}}
@keyframes preimg{0%{transform:rotateY(0)}100%{transform:rotateY(90deg)}}

@-webkit-keyframes preimgB{0%{-webkit-transform:rotateY(0);transform:rotateY(0)}100%{-webkit-transform:rotateY(90deg);transform:rotateY(90deg)}}
@-moz-keyframes preimgB{0%{-moz-transform:rotateY(0);transform:rotateY(0)}100%{-moz-transform:rotateY(90deg);transform:rotateY(90deg)}}
@-ms-keyframes preimgB{0%{-ms-transform:rotateY(0);transform:rotateY(0)}100%{-ms-transform:rotateY(90deg);transform:rotateY(90deg)}}
@-o-keyframes preimgB{0%{-o-transform:rotateY(0);transform:rotateY(0)}100%{-o-transform:rotateY(90deg);transform:rotateY(90deg)}}
@keyframes preimgB{0%{transform:rotateY(0)}100%{transform:rotateY(90deg)}}

@-webkit-keyframes preimgC{0%{-webkit-transform:rotateY(0);transform:rotateY(0)}100%{-webkit-transform:rotateY(90deg);transform:rotateY(90deg)}}
@-moz-keyframes preimgC{0%{-moz-transform:rotateY(0);transform:rotateY(0)}100%{-moz-transform:rotateY(90deg);transform:rotateY(90deg)}}
@-ms-keyframes preimgC{0%{-ms-transform:rotateY(0);transform:rotateY(0)}100%{-ms-transform:rotateY(90deg);transform:rotateY(90deg)}}
@-o-keyframes preimgC{0%{-o-transform:rotateY(0);transform:rotateY(0)}100%{-o-transform:rotateY(90deg);transform:rotateY(90deg)}}
@keyframes preimgC{0%{transform:rotateY(0)}100%{transform:rotateY(90deg)}}

/* -------------------------------------- keyframes NEXTIMG *//* FLAT -------------------------------------- */
@-webkit-keyframes nextimg-flat{0%{left:0;rgba(0,0,0,0)}100%{left:var(--cubedisplaywidthNeg);rgba(0,0,0,0)}} /* 100% */
@-moz-keyframes nextimg-flat{0%{left:0;rgba(0,0,0,0)}100%{left:var(--cubedisplaywidthNeg);rgba(0,0,0,0)}}
@-ms-keyframes nextimg-flat{0%{left:0;rgba(0,0,0,0)}100%{left:var(--cubedisplaywidthNeg);rgba(0,0,0,0)}}
@-o-keyframes nextimg-flat{0%{left:0;rgba(0,0,0,0)}100%{left:var(--cubedisplaywidthNeg);rgba(0,0,0,0)}}
@keyframes nextimg-flat{0%{left:0;rgba(0,0,0,0)}100%{left:var(--cubedisplaywidthNeg);rgba(0,0,0,0)}}

@-webkit-keyframes nextimgB-flatB{0%{left:0;rgba(0,0,0,0)}100%{left:var(--cubeBdisplayBwidthNeg);rgba(0,0,0,0)}} /* 100% */
@-moz-keyframes nextimgB-flatB{0%{left:0;rgba(0,0,0,0)}100%{left:var(--cubeBdisplayBwidthNeg);rgba(0,0,0,0)}}
@-ms-keyframes nextimgB-flatB{0%{left:0;rgba(0,0,0,0)}100%{left:var(--cubeBdisplayBwidthNeg);rgba(0,0,0,0)}}
@-o-keyframes nextimgB-flatB{0%{left:0;rgba(0,0,0,0)}100%{left:var(--cubeBdisplayBwidthNeg);rgba(0,0,0,0)}}
@keyframes nextimgB-flatB{0%{left:0;rgba(0,0,0,0)}100%{left:var(--cubeBdisplayBwidthNeg);rgba(0,0,0,0)}}

@-webkit-keyframes nextimgC-flatC{0%{left:0;rgba(0,0,0,0)}100%{left:var(--cubeCdisplayCwidthNeg);rgba(0,0,0,0)}} /* 100% */
@-moz-keyframes nextimgC-flatC{0%{left:0;rgba(0,0,0,0)}100%{left:var(--cubeCdisplayCwidthNeg);rgba(0,0,0,0)}}
@-ms-keyframes nextimgC-flatC{0%{left:0;rgba(0,0,0,0)}100%{left:var(--cubeCdisplayCwidthNeg);rgba(0,0,0,0)}}
@-o-keyframes nextimgC-flatC{0%{left:0;rgba(0,0,0,0)}100%{left:var(--cubeCdisplayCwidthNeg);rgba(0,0,0,0)}}
@keyframes nextimgC-flatC{0%{left:0;rgba(0,0,0,0)}100%{left:var(--cubeCdisplayCwidthNeg);rgba(0,0,0,0)}}

/* -------------------------------------- keyframes PREIMG *//* FLAT -------------------------------------- */
@-webkit-keyframes preimg-flat{0%{left:0}100%{left:var(--cubedisplaywidth)}}
@-moz-keyframes preimg-flat{0%{left:0}100%{left:var(--cubedisplaywidth)}}
@-ms-keyframes preimg-flat{0%{left:0}100%{left:var(--cubedisplaywidth)}}
@-o-keyframes preimg-flat{0%{left:0}100%{left:var(--cubedisplaywidth)}}
@keyframes preimg-flat{0%{left:0}100%{left:var(--cubedisplaywidth)}}

@-webkit-keyframes preimgB-flatB{0%{left:0}100%{left:var(--cubeBdisplayBwidth)}}
@-moz-keyframes preimgB-flatB{0%{left:0}100%{left:var(--cubeBdisplayBwidth)}}
@-ms-keyframes preimgB-flatB{0%{left:0}100%{left:var(--cubeBdisplayBwidth)}}
@-o-keyframes preimgB-flatB{0%{left:0}100%{left:var(--cubeBdisplayBwidth)}}
@keyframes preimgB-flatB{0%{left:0}100%{left:var(--cubeBdisplayBwidth)}}

@-webkit-keyframes preimgC-flatC{0%{left:0}100%{left:var(--cubeCdisplayCwidth)}}
@-moz-keyframes preimgC-flatC{0%{left:0}100%{left:var(--cubeCdisplayCwidth)}}
@-ms-keyframes preimgC-flatC{0%{left:0}100%{left:var(--cubeCdisplayCwidth)}}
@-o-keyframes preimgC-flatC{0%{left:0}100%{left:var(--cubeCdisplayCwidth)}}
@keyframes preimgC-flatC{0%{left:0}100%{left:var(--cubeCdisplayCwidth)}}

.contents,.contentsB,.contentsC{display:none}

/* used css for cube */
#browsersupport{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;-o-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-animation-name:test;-moz-animation-name:test;-ms-animation-name:test;-o-animation-name:test;animation-name:test}

/* -------------------- END box CONTENT -------------------- 

IDEA to KEEP for PERSPECTIVE zoom OUT of BOX turns

#1cube:target{
  -webkit-animation: animationSqueeze 900ms 1 ease-out;
  -moz-animation: animationSqueeze 900ms 1 ease-out;
  -ms-animation: animationSqueeze 900ms 1 ease-out;
  -o-animation: animationSqueeze 900ms 1 ease-out;
  animation: animationSqueeze 900ms 1 ease-out;
  
}

.animationSqueeze{
  -webkit-animation: animationSqueeze 900ms 1 ease-out;
  -moz-animation: animationSqueeze 900ms 1 ease-out;
  -ms-animation: animationSqueeze 900ms 1 ease-out;
  -o-animation: animationSqueeze 900ms 1 ease-out;
  animation: animationSqueeze 900ms 1 ease-out;

}

@-webkit-keyframes animationSqueeze {
  0%{width: 100%; height: 100%;}
  50%{width: 25%; height: 25%;}
  100%{width: 100%; height: 100%;}

}

@-moz-keyframes animationSqueeze {
  0%{width: 100%; height: 100%;}
  50%{width: 25%; height: 25%;}
  100%{width: 100%; height: 100%;}

}

@-ms-keyframes animationSqueeze {
  0%{width: 100%; height: 100%;}
  50%{width: 25%; height: 25%;}
  100%{width: 100%; height: 100%;}

}

@-o-keyframes animationSqueeze {
  0%{width: 100%; height: 100%;}
  50%{width: 25%; height: 25%;}
  100%{width: 100%; height: 100%;}

}

@keyframes animationSqueeze {
  0%{width: 100%; height: 100%;}
  50%{width: 25%; height: 25%;}
  100%{width: 100%; height: 100%;}

}*/