#cubeTransition {
	position: relative;
	width: 100%;
	height: 65px;
  }

  .pd{
	  position: relative;
	width: 100%;
	height: 65px;
	transform-style: preserve-3d;
  }

  .pd div {
	height: 65px;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	font-size: 2em;
	color: #fff;
	visibility: hidden;
  }

  h2 {
	margin: 0;
	font-size: 0.5em;
	text-align: left;
	  padding-top: 20px;
	  padding-left: 40px;
	text-shadow: 1px 1px 0px rgba( 0, 0, 0, 0.1 );
  }

  .visible{
	visibility: visible !important;
  }

  .rotateCubeTopOut {
	transform-origin: 50% 100%;
	animation: rotateCubeTopOut .6s;
  }

  .rotateCubeTopIn {
	transform-origin: 50% 0%;
	animation: rotateCubeTopIn .6s;
  }

  .rotateCubeBottomOut {
	transform-origin: 50% 0%;
	animation: rotateCubeBottomOut .6s both ease;
  }

  .rotateCubeBottomIn {
	transform-origin: 50% 100%;
	animation: rotateCubeBottomIn .6s both ease;
  }

  @keyframes rotateCubeTopOut {
	50% {
	  animation-timing-function: ease-in-out;
		transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
	}

	100% {
	  transform: translateY(-100%) rotateX(90deg);
	}

  }


  @keyframes rotateCubeTopIn {
	0% {
	  transform: translateY(100%) rotateX(-90deg);
	}

	50% {

	  transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
	}
  }


  @keyframes rotateCubeBottomOut {
	50% {

			  transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
	}

	100% {
		 animation-timing-function: ease-in-out;
			  transform: translateY(100%) rotateX(-90deg);
	}
  }

  @keyframes rotateCubeBottomIn {
	0% {

			  transform: translateY(-100%) rotateX(90deg);
	}

	50% {
	   animation-timing-function: ease-in-out;
			  transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
	}
  }