@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"; 


.main-container {
	font-family:arial;
	padding-bottom:100px;

}

body {
	background-color: #f1f1f1;
}

#button-bar {
	margin-top:50px;
	text-align: center;
	font-size:24px;
	font-weight: bold;
	color:#888;

}
.main-container button {
	font-size:32px;
	border-radius: 50%;
	padding:10px;
	color:#999;
	border:2px solid #999;
	background-color: #fff;
  cursor: pointer;
  margin:0 20px;
}
.main-container button:hover {
	background-color: #e9e9e9;
}
.main-container button:active {
	background-color: #ccc;
	color:#888;
	border:2px solid #888;
}
.progress-bar-outer {
	margin:50px auto;
	height:4px;
	border:1px solid #999;
	border-radius: 3px;
	width:620px;
}
#progress-bar-inner {
	background-color:#999;
	height:4px;
	width:33%;
	border-radius: 3px;
}

.flip-card {
	font-size:32px;
}


.flip-card {
  background-color: transparent;
  width: 600px;
  height: 400px;
  perspective: 1000px;
  margin:0 auto;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.4s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(-180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 80%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  padding-left:10%;
  padding-right:10%;
}

.flip-card-front {
  background-color: #fff;
  color: black;
}

.flip-card-back {
  background-color: #fff;
  color: black;
  transform: rotateY(-180deg);
}

.flip-card-front, .flip-card-back {
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width:992px){
	h1 {font-size:1.2em;}
	.flip-card {
		width:90%;
		height:300px;
	}
	.progress-bar-outer { 
		width:90%;
	}
	.flip-card:focus .flip-card-inner {
  transform: rotateY(-180deg);
}
}