html, body {font-family: 'Open Sans', sans-serif; height: 100%; margin: 0}
.container {display: flex; justify-content: center; height: 100%; align-items: center;}
h1 {font-weight: 300; line-height: 1; margin: 0}
h4 {font-color: #555; font-weight: 300;  margin: 1em 0}
a {color: #2d4373; text-decoration: none}
a:hover {color: #226791}
p {margin-bottom: 0}
.info {
  display: flex;
  flex-direction: column;
  align-content: center;
}
/* Cubes */
.cube-con {
	width: 150px;
}

.cube-wrap {
  min-height: 100px;
  margin: 0 auto;
  perspective: 400px;
  perspective-origin: 50px 50px;
  width: 100px;
  display: inline-block; }
  .cube-wrap + .cube-wrap {
    margin-left: 50px; }

.cube {
  position: relative;
  transform-style: preserve-3d;
  transform-origin: 50px 50px;
  transition: all 5s;
  width: 100px; }
  .cube i {
    color: #fff;
    font-size: 28px; }

.cube div {
	color: #fff;
  height: 100px;
  line-height: 5;
  font-size: 20px;
  position: absolute;
  text-align: center;
  transition: all 5s;
  width: 100px;
  }

  .cube .content {
	    color: #000;
	    font-weight: 700;
  }

.cube.spin {
  transform: rotateX(360deg) rotateY(360deg); }

.cube .content i {
  color: #e74c3c;
  font-size: 40px; }

.back {
  background-color: #c0392b;
  transform: translateZ(-50px) rotateY(180deg);
  transform-origin: bottom center; }

.right {
  background-color: #d65548;
  transform: rotateY(-270deg) translateZ(50px);
  transform-origin: bottom center; }

.left {
  background-color: #d65548;
  transform: rotateY(270deg) translateX(0) translateZ(50px);
  transform-origin: bottom center; }

.top {
  background-color: #962d22;
  transform: rotateX(90deg) translateY(-50px);
  transform-origin: top center; }

.bottom {
  background-color: #962d22;
  transform: rotateX(-90deg) translateY(50px);
  transform-origin: bottom center; }

.front {
  background-color: #c0392b;
  transform: translateZ(50px);
  transform-origin: bottom center; }


.cube.angle {
  transform: rotateX(-12.5deg) rotateY(65deg); }
  .cube.angle, .cube.angle > div {
    transition: all .25s; }

.cube.explode,
.cube-wrap:hover .cube {
  transform: rotateX(0deg) rotateY(35deg); }
  .cube.explode .left,
  .cube-wrap:hover .cube .left {
    transform: rotateY(270deg) translateX(0) translateZ(100px); }
  .cube.explode .right,
  .cube-wrap:hover .cube .right {
    transform: rotateY(-270deg) translateZ(100px) translateX(0); }
  .cube.explode .front,
  .cube-wrap:hover .cube .front {
    transform: translateZ(100px); }
  .cube.explode .back,
  .cube-wrap:hover .cube .back {
    transform: translateZ(-100px) rotateY(180deg); }
  .cube.explode .top,
  .cube-wrap:hover .cube .top {
    transform: rotateX(90deg) translateZ(50px) translateY(-50px); }
  .cube.explode .bottom,
  .cube-wrap:hover .cube .bottom {
    transform: rotateX(-90deg) translateY(50px) translateZ(50px); }

.cube.open .front {
  background-color: #8e44ad;
  transform: translateZ(50px) translateY(0) rotateX(-90deg); }

.cube.open .left {
  background-color: #8e44ad !important;
  transform: rotateX(-90deg) rotateZ(-90deg) translateY(-50px); }

.cube.open .right {
  background-color: #8e44ad !important;
  transform: rotateY(-90deg) rotateX(-90deg) rotateZ(180deg) translateX(0px) translateY(-50px) translateZ(0px); }

.cube.open .bottom {
  background-color: #8e44ad !important; }

.cube.open .back {
  transform: rotateX(-90deg) rotateZ(180deg) translateZ(0) translateY(-50px); }

.cube.open .top {
  transform: rotateZ(-180deg) rotateY(180deg) translateY(-100px) translateZ(150px); }

.cube.youtube .front, .cube.youtube .back {
  background-color: #E72D28; }

.cube.youtube .right, .cube.youtube .left {
  background-color: #ec5a56; }

.cube.youtube .top, .cube.youtube .bottom {
  background-color: #c61b16; }

.cube.github .front, .cube.github .back {
  background-color: #8e44ad; }

.cube.github .right, .cube.github .left {
  background-color: #a563c1; }

.cube.github .top, .cube.github .bottom {
  background-color: #703688; }

.cube.blue .front, .cube.blue .back {
  background-color: #3B5998; }

.cube.blue .right, .cube.blue .left {
  background-color: #4c70ba; }

.cube.blue .top, .cube.blue .bottom {
  background-color: #2d4373; }

.cube.twitter .front, .cube.twitter .back {
  background-color: #1DA1F3; }

.cube.twitter .right, .cube.twitter .left {
  background-color: #4db5f6; }

.cube.twitter .top, .cube.twitter .bottom {
  background-color: #0b86d2; }

@media (max-width: 480px) {

	.container {
	    flex-direction: column;
        align-content: center;
		align-items: center;
	    margin-top: 0;
		height: 100%;
	}

	.cube-con {
		margin-bottom: 40px;
		text-align: center;
	}

 }