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


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

}


.oldbrowser-stage{
  overflow:visible;

}

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

/* the cube face */
#cube div{
  overflow:visible;
  position:absolute;
  width: var(--displayAwidth);
  height:var(--displayAheight);
  padding:0;
  color:#333;
  border:0 solid #555; /* keep in mind that thicker border will cause final shake on turn/flip sequence */
  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 #first.modernbrowser-first{
  -webkit-transform:translateZ(var(--xorigintranslateZ));
  -moz-transform:translateZ(var(--xorigintranslateZ));
  -ms-transform:translateZ(var(--xorigintranslateZ));
  -o-transform:translateZ(var(--xorigintranslateZ));
  transform:translateZ(var(--xorigintranslateZ));
  z-index:1;

}

#cube #next.modernbrowser-next{
  -webkit-transform:rotateY(90deg) translateZ(var(--xorigintranslateZ));
  -moz-transform:rotateY(90deg) translateZ(var(--xorigintranslateZ));
  -ms-transform:rotateY(90deg) translateZ(var(--xorigintranslateZ));
  -o-transform:rotateY(90deg) translateZ(var(--xorigintranslateZ));
  transform:rotateY(90deg) translateZ(var(--xorigintranslateZ));

}

#cube #pre.modernbrowser-pre{
  -webkit-transform:rotateY(-90deg) translateZ(var(--xorigintranslateZ));
  -moz-transform:rotateY(-90deg) translateZ(var(--xorigintranslateZ));
  -ms-transform:rotateY(-90deg) translateZ(var(--xorigintranslateZ));
  -o-transform:rotateY(-90deg) translateZ(var(--xorigintranslateZ));
  transform:rotateY(-90deg) translateZ(var(--xorigintranslateZ));

}

#cube #first.oldbrowser-first{}

#cube #next.oldbrowser-next{
  left:var(--displayAwidth);

}

#cube #pre.oldbrowser-pre{
  left:var(--displayAwidthNeg);

}

#pre,#next,#first{
  display:block;
  background-color:#fff;

}

.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;

}

@-webkit-keyframes anifirst{
  0%{background:#fff;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:#fff;box-shadow:inset 0 0 var(--boxshadow) rgba(0,0,0,0.4);}
  100%{background:var(--anifirst_color);box-shadow:inset 0 0 0 rgba(0,0,0,0);}

}

@-ms-keyframes anifirst{
  0%{background:#fff;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:#fff;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:#fff;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;

}

@-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(--aniside_color);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);}

}

/* keep these 'animation-llets' seperate no CONGLOMERATES ... e.g. 'animation: var ease-out 1s;' */
.animation,.animation2,.animation-flat,.animation2-flat{
  -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-animation-duration:1000ms;
  -moz-animation-duration:1000ms;  
  -ms-animation-duration:1000ms;
  -o-animation-duration:1000ms;
  animation-duration:1000ms;
  -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-transform-origin:var(--xorigintranslateZ) var(--yorigin) var(--zorigin);
 -moz-transform-origin:var(--xorigintranslateZ) var(--yorigin) var(--zorigin);
 -ms-transform-origin:var(--xorigintranslateZ) var(--yorigin) var(--zorigin);
 -o-transform-origin:var(--xorigintranslateZ) var(--yorigin) var(--zorigin);
 transform-origin:var(--xorigintranslateZ) var(--yorigin) var(--zorigin);
 color:#000;
 z-index:-1;

}

.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:preimg;
  -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;

}

/* -------------------------------------- *//* -------------------------------------- */
@-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 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 nextimg-flat{
  0%{left:0; rgba(0,0,0,0);}
  100%{left:var(--displayAwidthNeg); rgba(0,0,0,0);}

}

@-moz-keyframes nextimg-flat{
  0%{left:0; rgba(0,0,0,0);}
  100%{left:var(--displayAwidthNeg); rgba(0,0,0,0);}

}

@-ms-keyframes nextimg-flat{
  0%{left:0; rgba(0,0,0,0);}
  100%{left:var(--displayAwidthNeg); rgba(0,0,0,0);}

}

@-o-keyframes nextimg-flat{
  0%{left:0; rgba(0,0,0,0);}
  100%{left:var(--displayAwidthNeg); rgba(0,0,0,0);}

}

@keyframes nextimg-flat{
  0%{left:0; rgba(0,0,0,0);}
  100%{left:var(--displayAwidthNeg); rgba(0,0,0,0);}

}

/* -------------------------------------- *//* -------------------------------------- */
@-webkit-keyframes preimg-flat{
  0%{left:0;}
  100%{left:var(--displayAwidth);}

}

@-moz-keyframes preimg-flat{
  0%{left:0;}
  100%{left:var(--displayAwidth);}

}

@-ms-keyframes preimg-flat{
  0%{left:0;}
  100%{left:var(--displayAwidth);}

}

@-o-keyframes preimg-flat{
  0%{left:0;}
  100%{left:var(--displayAwidth);}

}

@keyframes preimg-flat{
  0%{left:0;}
  100%{left:var(--displayAwidth);}

}

.contents{
  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 -------------------- 

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

}*/