.cube-container {
  width: 100%;
  height: 550px;
  position: relative;
  perspective: 2000px;
  background: #222;
	overflow: hidden;
}

#cube {
  width: 100%;
  height: 550px;
  position: absolute;
  transform-style: preserve-3d;
}

#cube figure {
  margin: 0;
  width:  100%;
  height: 550px;
  display: flex;
  position: absolute;
  background: #222;
  color: white;
	overflow: hidden;

}
#cube figure div {
	position:absolute;
	z-index: 10;
right: 0;
  height: inherit;
  background-size: cover;
  background-position: center;
}

#cube .front {
  transform: rotateY(0deg) translateZ(50vw);
}

#cube .back {
  transform: rotateY(180deg) translateZ(50vw);
  background: gold;
}

#cube .right {
  transform: rotateY(90deg) translateZ(50vw);
  background: dodgerblue;
}

#cube .left {
  transform: rotateY(-90deg) translateZ(50vw);
  background: cadetblue;
}

#cube .top {
  transform: rotateX(90deg) translateZ(50vw);
  background: mintgreen;
}

#cube .bottom {
  transform: rotateX(-90deg) translateZ(50vw);
  background: lavender;
}

#cube {
  transform: translateZ(-50vw);
}

#cube {
  transition: transform 1.5s ease-in-out;
}

.button-wrap {
  position: absolute;
  bottom: 8%;
  right:5%;
padding: 5px 15px 5px;
	background: rgba(255,255,255,0.6);
  transform: translateX(0%);
}
article .xwt2{
	    font-size: 26px;
    color: #fff;
	text-align: left;
	
}article .text-center{
	    font-size: 16px;
    color: #fff;
	text-align: left;
	
}
article {
  position: absolute;
  top: 70%;
  transform: translateY(-50%);
}
article img {
  max-height: 150px;
}

.button-wrap button {
 background: rgba(0,0,0,0);
	padding: 5px;
  cursor: pointer;
}.button-wrap button:nth-child(1){
	margin-right: 20px;
}

.button-wrap button:hover {
background: rgba(255,255,255,0.8);
}

.button-wrap button:focus {

  outline: none;
}
@media screen and (max-width: 900px){
	.cube-container {
    width: 100%;
		height: 400px;}
	#cube {
    width: 100%;
		height:400px;}
	#cube figure{
    width: 100%;
		height:400px;}
	article {
    position: absolute;
		top: 60%;}
}

@media screen and (max-width: 600px){
	
	.cube-container {
    width: 100%;
		height: 320px;}
	#cube {
    width: 100%;
		height:320px;}
	#cube figure{
    width: 100%;
		height:320px;}
	.button-wrap {
    position: absolute;
    bottom: 5%;
		right: 5%;}
	
	
	
	
}