body {
     margin: 125px 0 0 0;
 }


@-moz-keyframes spinningH {
  from { -moz-transform: rotateX(0deg) rotateY(-45deg);}
  to{ -moz-transform: rotateX(0deg) rotateY(-225deg);}
}

@-webkit-keyframes spinningH {
  from { -webkit-transform: rotateX(0deg) rotateY(-45deg);}
  to{ -webkit-transform: rotateX(0deg) rotateY(-225deg);}
}

@-o-keyframes spinningH {
  from { -o-transform: rotateX(0deg) rotateY(-45deg);}
  to{ -o-transform: rotateX(0deg) rotateY(-2250deg);}
}

@-ms-keyframes spinningH {
  from { -ms-transform: rotateX(0deg) rotateY(-45deg);}
  to{ -ms-transform: rotateX(0deg) rotateY(-225deg);}
}

@keyframes spinningH {
  from { transform: rotateX(0deg) rotateY(-45deg);}
  to{ transform: rotateX(0deg) rotateY(-225deg);}
}

 #hexcontainer {
  position: relative;
  left:0;
	z-index:99;
  -webkit-perspective : 400px;
  -moz-perspective    : 400px;
  -o-perspective      : 400px;
  -ms-perspective     : 400px;
  perspective         : 400px;

  -webkit-perspective-origin  : 50% 20%;
  -moz-perspective-origin     : 50% 20%;
  -moz-transform-origin       : 50% 20%;
  -o-perspective-origin       : 50% 20%;
  -ms-perspective-origin      : 50% 20%;
  perspective-origin          : 50% 20%;
 }

#outerspace:hover #hexcontainer #cube {
  -webkit-animation : spinningH 2s ease-in-out 4s;
  -moz-animation    : spinningH 2s ease-in-out 4s;
  -o-animation      : spinningH 2s ease-in-out 4s;
  -ms-animation     : spinningH 2s ease-in-out 4s;
  animation         : spinningH 2s ease-in-out 4s;
}
#outerspace:hover #hexcontainer #cube>div {
  opacity: 0;
}
#outerspace:hover #hexcontainer #cube2>div {
  opacity: 1;
}

#cube {
  position: absolute;
  top:0;
  right:37px;
  margin: 0 auto;
  height: 240px;
  width: 240px;
    -webkit-transform: rotateX(0deg) rotateY(-45deg);
    -moz-transform: rotateX(0deg) rotateY(-45deg);
    -o-transform: rotateX(0deg) rotateY(-45deg);
    -ms-transform: rotateX(0deg) rotateY(-45deg);

  -webkit-transition  : -webkit-transform 2s linear;
  -moz-transition     : -moz-transform 2s linear;
  -o-transition       : -o-transform 2s linear;
  -ms-transition      : -ms-transform 2s linear;
  transition          : transform 2s linear;

  -webkit-transform-style : preserve-3d;
  -moz-transform-style    : preserve-3d;
  -o-transform-style      : preserve-3d;
  -ms-transform-style     : preserve-3d;
  transform-style         : preserve-3d;
}

#cube>div {
  position: absolute;
  height: 240px;
  width: 240px;
  padding: 0px;
  opacity: 1;
  background-position:center center;
  -webkit-transition  : opacity 0.2s linear 5.8s;
  -moz-transition     : opacity 0.2s linear 5.8s;
  -o-transition       : opacity 0.2s linear 5.8s;
  -ms-transition      : opacity 0.2s linear 5.8s;
  transition          : opacity 0.2s linear 5.8s;
}
#cube2 {
  position: absolute;
  top:0;
  right:37px;
  margin: 0 auto;
  height: 240px;
  width: 240px;
    -webkit-transform: rotateX(0deg) rotateY(-225deg);
    -moz-transform: rotateX(0deg) rotateY(-225deg);
    -o-transform: rotateX(0deg) rotateY(-225deg);
    -ms-transform: rotateX(0deg) rotateY(-225deg);

  -webkit-transition  : -webkit-transform 2s linear;
  -moz-transition     : -moz-transform 2s linear;
  -o-transition       : -o-transform 2s linear;
  -ms-transition      : -ms-transform 2s linear;
  transition          : transform 2s linear;

  -webkit-transform-style : preserve-3d;
  -moz-transform-style    : preserve-3d;
  -o-transform-style      : preserve-3d;
  -ms-transform-style     : preserve-3d;
  transform-style         : preserve-3d;
}

#cube2>div {
  position: absolute;
  height: 240px;
  width: 240px;
  padding: 0px;
  opacity: 0;
  background-position:center center;
  -webkit-transition  : opacity 0.1s linear 5.8s;
  -moz-transition     : opacity 0.1s linear 5.8s;
  -o-transition       : opacity 0.1s linear 5.8s;
  -ms-transition      : opacity 0.1s linear 5.8s;
  transition          : opacity 0.1s linear 5.8s;
}

#cube div:nth-child(1) {
  -webkit-transform : translateZ(120px);
  -moz-transform    : translateZ(120px);
  -o-transform      : translateZ(120px);
  -ms-transform     : translateZ(120px);
  transform         : translateZ(120px);
  background-image: url(img/1.png);
  background-repeat : no-repeat;
}

#cube div:nth-child(2) {
  -webkit-transform : rotateY(90deg) translateZ(120px);
  -moz-transform    : rotateY(90deg) translateZ(120px);
  -o-transform      : rotateY(90deg) translateZ(120px);
  -ms-transform     : rotateY(90deg) translateZ(120px);
  transform         : rotateY(90deg) translateZ(120px);
  background-image: url(img/2.png);
  background-repeat : no-repeat;
}

#cube div:nth-child(3) {
  -webkit-transform : rotateY(180deg) translateZ(120px);
  -moz-transform    : rotateY(180deg) translateZ(120px);
  -o-transform      : rotateY(180deg) translateZ(120px);
  -ms-transform     : rotateY(180deg) translateZ(120px);
  transform         : rotateY(180deg) translateZ(120px);
  background-image: url(img/3.png);
  background-repeat : no-repeat;
}

#cube div:nth-child(4) {
  -webkit-transform : rotateY(-90deg) translateZ(120px);
  -moz-transform    : rotateY(-90deg) translateZ(120px);
  -o-transform      : rotateY(-90deg) translateZ(120px);
  -ms-transform     : rotateY(-90deg) translateZ(120px);
  transform         : rotateY(-90deg) translateZ(120px);
  background-image  : url(img/4.png);
  background-repeat : no-repeat;
}

#cube div:nth-child(5) {
  -webkit-transform : rotateX(-90deg) translateZ(120px) rotate(180deg);
  -moz-transform    : rotateX(-90deg) translateZ(120px) rotate(180deg);
  -o-transform      : rotateX(-90deg) translateZ(120px) rotate(180deg);
  -ms-transform     : rotateX(-90deg) translateZ(120px) rotate(180deg);
  transform         : rotateX(-90deg) translateZ(120px) rotate(180deg);
  background-image  : url();
  background-repeat :no-repeat;
}

#cube div:nth-child(6)  {
  -webkit-transform : rotateX(90deg) translateZ(120px);
  -moz-transform    : rotateX(90deg) translateZ(120px);
  -o-transform      : rotateX(90deg) translateZ(120px);
  -ms-transform     : rotateX(90deg) translateZ(120px);
  transform         : rotateX(90deg) translateZ(120px);
  background-image: url();
  background-repeat :no-repeat;
  text-align:center;  
}
#cube2 div:nth-child(1) {
  -webkit-transform : translateZ(120px);
  -moz-transform    : translateZ(120px);
  -o-transform      : translateZ(120px);
  -ms-transform     : translateZ(120px);
  transform         : translateZ(120px);
  background-repeat : no-repeat;
}

#cube2 div:nth-child(2) {
  -webkit-transform : rotateY(90deg) translateZ(120px);
  -moz-transform    : rotateY(90deg) translateZ(120px);
  -o-transform      : rotateY(90deg) translateZ(120px);
  -ms-transform     : rotateY(90deg) translateZ(120px);
  transform         : rotateY(90deg) translateZ(120px);
  background-repeat : no-repeat;
}

#cube2 div:nth-child(3) {
  -webkit-transform : rotateY(180deg) translateZ(120px);
  -moz-transform    : rotateY(180deg) translateZ(120px);
  -o-transform      : rotateY(180deg) translateZ(120px);
  -ms-transform     : rotateY(180deg) translateZ(120px);
  transform         : rotateY(180deg) translateZ(120px);
  background-image: url(img/3.png);
  background-repeat : no-repeat;
}

#cube2 div:nth-child(4) {
  -webkit-transform : rotateY(-90deg) translateZ(120px);
  -moz-transform    : rotateY(-90deg) translateZ(120px);
  -o-transform      : rotateY(-90deg) translateZ(120px);
  -ms-transform     : rotateY(-90deg) translateZ(120px);
  transform         : rotateY(-90deg) translateZ(120px);
  background-image  : url(img/4.png);
  background-repeat : no-repeat;
}
/*----------------*/


h2{
	color:red;
}

a{
	color:#F7E309;
}

#box {
	margin:0px auto;
	-webkit-perspective: 600px;
	perspective: 600px;
}

a.hex div.box {
	width: 240px;
	height: 240px;
	margin: 0px auto;
	position: absolute;
    right: 37px;
    top: 0;
	color:#111;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.box div {
  	position: absolute;
	text-align:center;
	left: 0;
  	top: 0;
	width: 240px;
	height: 240px;
	line-height:100px;
	font-size:3em;
	font-weight:bold;
	transform-origin: 50% 50% -120px;
	-webkit-transform-origin: 50% 50% -120px;
  /*	-webkit-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
	  backface-visibility: hidden;*/
}

#outerspace:hover #box .box .side1 {
  -webkit-animation : animate1 2s linear 4s;
  -moz-animation    : animate1 2s linear 4s;
  -o-animation      : animate1 2s linear 4s;
  -ms-animation     : animate1 2s linear 4s;
  animation         : animate1 2s linear 4s;
}
.box .side1 {
	background-image: url("img/2.png");
	-webkit-transform : perspective(600px) rotateX(0deg) rotateY(45deg) rotateZ(0deg); opacity:1;
	-webkit-transform : perspective(600px) rotateX(0deg) rotateY(45deg) rotateZ(0deg); opacity:1;
	-moz-transform    : perspective(600px) rotateX(0deg) rotateY(45deg) rotateZ(0deg); opacity:1;
	-o-transform      : perspective(600px) rotateX(0deg) rotateY(45deg) rotateZ(0deg); opacity:1;
	-ms-transform     : perspective(600px) rotateX(0deg) rotateY(45deg) rotateZ(0deg); opacity:1;
	transform         : perspective(600px) rotateX(0deg) rotateY(45deg) rotateZ(0deg); opacity:1;
    background-position: center center;
    height: 240px;
    padding: 0;
    position: absolute;
    width: 240px;
	/*-webkit-animation: animate1 12s infinite linear;
	animation: animate1 12s infinite linear;*/
}
#outerspace:hover #box .box .side1reversed {
  -webkit-animation : animate2 2s linear 4s;
  -moz-animation    : animate2 2s linear 4s;
  -o-animation      : animate2 2s linear 4s;
  -ms-animation     : animate2 2s linear 4s;
  animation         : animate2 2s linear 4s;
}
.box .side1reversed {
	background-image: url("img/4.png");
	-webkit-transform : perspective(600px) rotateX(0deg) rotateY(45deg) rotateZ(0deg); opacity:1;
	-webkit-transform : perspective(600px) rotateX(0deg) rotateY(45deg) rotateZ(0deg); opacity:1;
	-moz-transform    : perspective(600px) rotateX(0deg) rotateY(45deg) rotateZ(0deg); opacity:1;
	-o-transform      : perspective(600px) rotateX(0deg) rotateY(45deg) rotateZ(0deg); opacity:1;
	-ms-transform     : perspective(600px) rotateX(0deg) rotateY(45deg) rotateZ(0deg); opacity:1;
	transform         : perspective(600px) rotateX(0deg) rotateY(45deg) rotateZ(0deg); opacity:1;
    background-position: center center;
    height: 240px;
    padding: 0;
    position: absolute;
    width: 240px;
}

#outerspace:hover #box .box .side2 {
  -webkit-animation : animate2 2s linear 4s;
  -moz-animation    : animate2 2s linear 4s;
  -o-animation      : animate2 2s linear 4s;
  -ms-animation     : animate2 2s linear 4s;
  animation         : animate2 2s linear 4s;
}
.box .side2 {
	background-image: url("img/4.png");
	-webkit-transform : perspective(600px) rotateX(0deg) rotateY(225deg) rotateZ(0deg); opacity:0;
	-webkit-transform : perspective(600px) rotateX(0deg) rotateY(225deg) rotateZ(0deg); opacity:0;
	-moz-transform    : perspective(600px) rotateX(0deg) rotateY(225deg) rotateZ(0deg); opacity:0;
	-o-transform      : perspective(600px) rotateX(0deg) rotateY(225deg) rotateZ(0deg); opacity:0;
	-ms-transform     : perspective(600px) rotateX(0deg) rotateY(225deg) rotateZ(0deg); opacity:0;
	transform         : perspective(600px) rotateX(0deg) rotateY(225deg) rotateZ(0deg); opacity:0;
    background-position: center center;
    height: 240px;
    padding: 0;
    position: absolute;
    width: 240px;
	/*-webkit-animation: animate2 12s infinite linear;
	animation: animate2 12s infinite linear;*/
}

.box .side3 {
	background: hsla( 120, 100%, 50%, 0.1 );
	-webkit-animation: animate3 12s infinite linear;
	animation: animate3 12s infinite linear;
}

.box .side4 {
	background: hsla( 180, 100%, 50%, 0.1 );
	-webkit-animation: animate4 12s infinite linear;
	animation: animate4 12s infinite linear;
}

#outerspace:hover #box .box .side5 {
  -webkit-animation : animate5 2s linear 4s;
  -moz-animation    : animate5 2s linear 4s;
  -o-animation      : animate5 2s linear 4s;
  -ms-animation     : animate5 2s linear 4s;
  animation         : animate5 2s linear 4s;
}
.box .side5 {
	background-image: url("img/1.png");
	-webkit-transform : perspective(600px) rotateX(0deg) rotateY(-45deg) rotateZ(0deg); opacity:1;
	-webkit-transform : perspective(600px) rotateX(0deg) rotateY(-45deg) rotateZ(0deg); opacity:1;
	-moz-transform    : perspective(600px) rotateX(0deg) rotateY(-45deg) rotateZ(0deg); opacity:1;
	-o-transform      : perspective(600px) rotateX(0deg) rotateY(-45deg) rotateZ(0deg); opacity:1;
	-ms-transform     : perspective(600px) rotateX(0deg) rotateY(-45deg) rotateZ(0deg); opacity:1;
	transform         : perspective(600px) rotateX(0deg) rotateY(-45deg) rotateZ(0deg); opacity:1;
    background-position: center center;
    height: 240px;
    padding: 0;
    position: absolute;
    width: 240px;
	/*-webkit-animation: animate5 12s infinite linear;
	animation: animate5 12s infinite linear;*/
}
#outerspace:hover #box .box .side5reversed {
  -webkit-animation : animate6 2s linear 4s;
  -moz-animation    : animate6 2s linear 4s;
  -o-animation      : animate6 2s linear 4s;
  -ms-animation     : animate6 2s linear 4s;
  animation         : animate6 2s linear 4s;
}
.box .side5reversed {
	background-image: url("img/3.png");
	-webkit-transform : perspective(600px) rotateX(0deg) rotateY(-45deg) rotateZ(0deg); opacity:1;
	-webkit-transform : perspective(600px) rotateX(0deg) rotateY(-45deg) rotateZ(0deg); opacity:1;
	-moz-transform    : perspective(600px) rotateX(0deg) rotateY(-45deg) rotateZ(0deg); opacity:1;
	-o-transform      : perspective(600px) rotateX(0deg) rotateY(-45deg) rotateZ(0deg); opacity:1;
	-ms-transform     : perspective(600px) rotateX(0deg) rotateY(-45deg) rotateZ(0deg); opacity:1;
	transform         : perspective(600px) rotateX(0deg) rotateY(-45deg) rotateZ(0deg); opacity:1;
    background-position: center center;
    height: 240px;
    padding: 0;
    position: absolute;
    width: 240px;
}

#outerspace:hover #box .box .side6 {
  -webkit-animation : animate6 2s linear 4s;
  -moz-animation    : animate6 2s linear 4s;
  -o-animation      : animate6 2s linear 4s;
  -ms-animation     : animate6 2s linear 4s;
  animation         : animate6 2s linear 4s;
}
.box .side6 {
	background-image: url("img/3.png");
	-webkit-transform : perspective(600px) rotateX(0deg) rotateY(135deg) rotateZ(0deg); opacity:0;
	-moz-transform    : perspective(600px) rotateX(0deg) rotateY(135deg) rotateZ(0deg); opacity:0;
	-o-transform      : perspective(600px) rotateX(0deg) rotateY(135deg) rotateZ(0deg); opacity:0;
	-ms-transform     : perspective(600px) rotateX(0deg) rotateY(135deg) rotateZ(0deg); opacity:0;
	transform         : perspective(600px) rotateX(0deg) rotateY(135deg) rotateZ(0deg); opacity:0;
    background-position: center center;
    height: 240px;
    padding: 0;
    position: absolute;
    width: 240px;
	/*animation: animate6 12s infinite linear;
	-webkit-animation: animate6 12s infinite linear;*/
}

/* for Firefox and IE10 */
@keyframes animate1 {
0% {transform: perspective(600px) rotateX(0deg) rotateY(45deg) rotateZ(0deg); opacity:1;}
50% {transform: perspective(600px) rotateX(0deg) rotateY(-45deg) rotateZ(0deg); opacity:1;}
100% {transform: perspective(600px) rotateX(0deg) rotateY(-135deg) rotateZ(0deg); opacity:1;}
/*75% {transform: perspective(600px) rotateX(0deg) rotateY(-225deg) rotateZ(0deg); opacity:0;}
100% {transform: perspective(600px) rotateX(0deg) rotateY(-315deg) rotateZ(0deg); opacity:1;}*/
}
@keyframes animate2 {
0% {transform: perspective(600px) rotateX(0deg) rotateY(225deg) rotateZ(0deg); opacity:0;}
50% {transform: perspective(600px) rotateX(0deg) rotateY(135deg) rotateZ(0deg); opacity:0;}
100% {transform: perspective(600px) rotateX(0deg) rotateY(45deg) rotateZ(0deg); opacity:1;}
/*75% {transform: perspective(600px) rotateX(0deg) rotateY(-45deg) rotateZ(0deg); opacity:1;}
100% {transform: perspective(600px) rotateX(0deg) rotateY(-135deg) rotateZ(0deg); opacity:0;}*/
}
@keyframes animate3 {
0% {transform: perspective(600px) rotateX(90deg) rotateY(0deg) rotateZ(0deg);}
100% {transform: perspective(600px) rotateX(90deg) rotateY(0deg) rotateZ(360deg);}
}
@keyframes animate4 {
0% {transform:perspective(600px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);}
100% {transform:perspective(600px) rotateX(-90deg) rotateY(0deg) rotateZ(-360deg);}
}
@keyframes animate5 {
0% {transform: perspective(600px) rotateX(0deg) rotateY(-45deg) rotateZ(0deg); opacity:1;}
50% {transform: perspective(600px) rotateX(0deg) rotateY(-135deg) rotateZ(0deg); opacity:1;}
100% {transform: perspective(600px) rotateX(0deg) rotateY(-225deg) rotateZ(0deg); opacity:1;}
/*75% {transform: perspective(600px) rotateX(0deg) rotateY(-315deg) rotateZ(0deg); opacity:1;}
100% {transform: perspective(600px) rotateX(0deg) rotateY(-405deg) rotateZ(0deg); opacity:1;}*/
}
@keyframes animate6 {
0% {transform: perspective(600px) rotateX(0deg) rotateY(135deg) rotateZ(0deg); opacity:0;}
50% {transform: perspective(600px) rotateX(0deg) rotateY(45deg) rotateZ(0deg); opacity:1;}
100% {transform: perspective(600px) rotateX(0deg) rotateY(-45deg) rotateZ(0deg); opacity:1;}
/*75% {transform: perspective(600px) rotateX(0deg) rotateY(-135deg) rotateZ(0deg); opacity:0;}
100% {transform: perspective(600px) rotateX(0deg) rotateY(-225deg) rotateZ(0deg); opacity:0;}*/
}

/* for Chrome and Chrome */
@-webkit-keyframes animate1 {
0% {-webkit-transform: perspective(600px) rotateX(0deg) rotateY(45deg) rotateZ(0deg); opacity:1;}
50% {-webkit-transform: perspective(600px) rotateX(0deg) rotateY(-45deg) rotateZ(0deg); opacity:1;}
100% {-webkit-transform: perspective(600px) rotateX(0deg) rotateY(-135deg) rotateZ(0deg); opacity:1;}
}

@-webkit-keyframes animate2 {
0% {-webkit-transform: perspective(600px) rotateX(0deg) rotateY(225deg) rotateZ(0deg); opacity:0;}
50% {-webkit-transform: perspective(600px) rotateX(0deg) rotateY(135deg) rotateZ(0deg); opacity:0;}
100% {-webkit-transform: perspective(600px) rotateX(0deg) rotateY(45deg) rotateZ(0deg); opacity:1;}
}

@-webkit-keyframes animate3 {
0% {-webkit-transform: perspective(600px) rotateX(90deg) rotateY(0deg) rotateZ(0deg);}
100% {-webkit-transform: perspective(600px) rotateX(90deg) rotateY(0deg) rotateZ(360deg);}
}

@-webkit-keyframes animate4 {
0% {-webkit-transform:perspective(600px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);}
100% {-webkit-transform:perspective(600px) rotateX(-90deg) rotateY(0deg) rotateZ(-360deg);}
}

@-webkit-keyframes animate5 {
0% {-webkit-transform: perspective(600px) rotateX(0deg) rotateY(-45deg) rotateZ(0deg); opacity:1;}
50% {-webkit-transform: perspective(600px) rotateX(0deg) rotateY(-135deg) rotateZ(0deg); opacity:1;}
100% {-webkit-transform: perspective(600px) rotateX(0deg) rotateY(-225deg) rotateZ(0deg); opacity:1;}
}

@-webkit-keyframes animate6 {
0% {-webkit-transform: perspective(600px) rotateX(0deg) rotateY(135deg) rotateZ(0deg); opacity:0;}
50% {-webkit-transform: perspective(600px) rotateX(0deg) rotateY(45deg) rotateZ(0deg); opacity:1;}
100% {-webkit-transform: perspective(600px) rotateX(0deg) rotateY(-45deg) rotateZ(0deg); opacity:1;}
}