@charset "utf-8";
/* CSS Document */

/* Setting the 3D space area with CSS3 perspective */
.space {
  width: 300px; height: 300px;
  margin-left: 120px;
  -webkit-perspective: 1600px;
  -webkit-perspective-origin: 50% -240px;
}

/* Setting the cube display, size, color, and transform origin  */
figure {
  display: block; position: absolute;
  width: 300px; height: 300px;
  background-color: #60c2ef;
  -webkit-transform-origin: 50% 50% 0; 
  -webkit-box-reflect: below 0 -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent), to(RGBA(0, 0, 0, 0.1)));
}

/*  CSS3 Transforms style, Z, X, Y degree and translate for each side of the cube */
.cube { -webkit-transform-style: preserve-3d; }
.front { -webkit-transform: translateZ(150px); }
.back { -webkit-transform: rotateY(180deg) translateZ(150px); }
.top { -webkit-transform: rotateX(90deg) translateZ(150px); text-align:center; font-weight:bold; }
.bottom { 
	-webkit-transform: rotateX(-90deg) translateZ(150px); 
	-webkit-box-shadow: 1px 5px 50px rgba(0, 0, 0, 0.7);
	background-color: rgba(0, 0, 0, 0);
}

.left { -webkit-transform: rotateY(-90deg) translateZ(150px); }
.right { -webkit-transform: rotateY(90deg) translateZ(150px); }

/* CSS3 Keyframes rotate Y degrees */
@-webkit-keyframes rotate {
  0% { -webkit-transform: rotateY(0); }
  100% { -webkit-transform: rotateY(360deg); }
}

/* Animation rotate sets the cube in motion  */
.cube { -webkit-animation: rotate 20s infinite linear; }
 
.cube:hover {
  -webkit-transform: rotateY(-50deg);
  -webkit-transition: all 0.4s ease;
}
.cube:hover figure.right:before, .cube:hover figure.front:before {
  opacity: 0.2;
  -webkit-transition: all 0.4s ease;
}

/* Pseudo Selectors set gradient for each side of the cubes surface   */
figure:before, figure:after {
  content: ""; display: block; position: absolute;
  width: 100%; height: 100%; opacity: 0;
}
figure:before {
  background: -webkit-radial-gradient(top left, rgba(0, 0, 0, 0.5), #000000);
}
figure:after {
  background: -webkit-radial-gradient(top right, rgba(0, 0, 0, 0.5), #000000);
}

.front:before { -webkit-animation: frontShading1 10s infinite linear; }
.front:after { -webkit-animation: frontShading1 10s infinite linear; }


/*  Front shading  */
@-webkit-keyframes frontShading1 {
  2% { opacity: 0; }
  25% { opacity: 0.8; }
  35% { opacity: 0.8; }
  50% { opacity: 0; }
}

@-webkit-keyframes backShading1 {
  2% { opacity: 0; }
  25% { opacity: 0.8; }
  35% { opacity: 0.8; }
  50% { opacity: 0; }
}

.left:before { opacity: 0.4; -webkit-transition: all 0.4s ease; }
.left:after { display: none; }
.left:before { opacity: 0.1; -webkit-transition: all 0.4s ease; }
.left:after { display: none; }

.bottom {
  -webkit-box-shadow: 0 10px 100px rgba(0, 0, 0, 0.7);
  background-color: rgba(0, 0, 0, 0);
}

.content {
	padding: 20px;
	margin-left:auto;
	margin-right:auto;
}

.clock {
	overflow:hidden; 
	border:0; width:250px; 
	height:250px;
}

.overLayer {
	z-index: 100;
	position: absolute;
}

a {
	text-decoration: none;
}