* {
	margin: 0; 
	padding: 0;
} 

body {
	background-repeat: no-repeat;
    background-size: cover; 
}

.card-hs {
	position: relative;
	width: 100%;
	height: auto;
	margin: 10px 0;
	cursor: default;
}

.col-xs-2 {
	padding: 0 1%;
}

.container .row { 
	margin-top: 4%;
	margin-bottom: 2%;
}

.container .progress { 
	margin-top: 3%;
	margin-bottom: 1%;
}

.front,.back ,img{
	border-radius: 4%;
}

.card-hs .front {
	transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
	top: 0;
	left: 0;
	width: 100%;
	border-radius: 4%;
}

.card-hs .front {
	position: absolute;
	border-radius: 4%;
	top: 4%;
}

.card-hs.flipped .back{
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	transform: rotateY(180deg);
}
.card-hs.flipped .front{
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	transform: rotateY(0deg);
}

.card-hs .front,.card-hs .back{
	transition: all 0.5s;
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
}

.card-hs img:hover,.flipped.back img {
 -webkit-box-shadow:0 0 3px 3px rgba(200,240,240,.75);
 -moz-box-shadow:0 0 3px 3px rgba(200,240,240,.75);
 box-shadow:0 0 3px 3px rgba(200,240,240,.75)
}

.reward-container {
	margin-bottom: 4%;
}

.reward {
	display: none;
}