.content-wrapper {
	width: 100%;
	height: 90%;
	perspective: 1000px;
}

/* This container is needed to position the front and back side */
.flip-card-inner-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	transition: transform 0.8s;
	transform-style: preserve-3d;
	background: black;
}

@media only screen and (min-device-width: 1023px) {
	.content-wrapper {
		backface-visibility: hidden;
	}
	.flip-card-inner-wrapper {
		box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.6);
	}
	.top-border-round {
		border-top-right-radius: 10px;
		border-top-left-radius: 10px;
	}
	.bottom-border-round {
		border-bottom-right-radius: 10px;
		border-bottom-left-radius: 10px;
	}
}

/* Do an horizontal flip when you move the mouse over the flip box container */
/* .content-wrapper:hover .flip-card-inner-wrapper {
  transform: rotateY(180deg);
  background: grey;
} */
.hideControl {
	visibility: hidden;
	opacity: 0;
	transition: visibility 0s 0.3s, opacity 0.3s linear;
}

.showControl {
	visibility: visible;
	opacity: 1;
	transition: opacity 0.3s linear;
	z-index: 1;
}