.flashcard-html5 {
    margin: 10px;
    background: rgba(255, 255, 255, 0.8) none repeat scroll 0% 0%;
    padding: 1em;
    border-radius: 1em;
    position:relative;
}
.flashcard-html5 .blockLock {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
}
.flashcard-html5 .blockBegin {
    text-align: center;
}
.flashcard-html5 .blockBegin h3 {
    margin-bottom:30px;
}
.flashcard-html5 .blockBegin p img {
    max-width: 150px;
    margin-bottom:30px;
    cursor:pointer;
}
.flashcard-html5 .blockBegin ~ * {
    display:none;
}
#cardDiv {
  -webkit-transform-style: preserve-3d;
	 -moz-transform-style: preserve-3d;
	   -o-transform-style: preserve-3d;
		  transform-style: preserve-3d;
  -webkit-perspective: 900px;
	 -moz-perspective: 900px;
	   -o-perspective: 900px;
		  perspective: 900px;
		  position:relative;
		  max-width:400px;
		  margin-left:auto;
		  margin-right:auto;
		  height:200px;
}
#cardDiv > h3 {
	position:absolute;
	max-width:400px;
	width:100%;
}
#cardEnglish,
#cardSpanish {
	background-color:#fff;
	height: 200px;
	text-align: center;
	margin:0px;
	-moz-box-shadow: 2px 2px 4px #cfcbc3,0 0 0 1px #cfcbc3;/*FF 3.5+*/
	-webkit-box-shadow: 2px 2px 4px #cfcbc3,0 0 0 1px #cfcbc3;/*Saf3-4, Chrome, iOS 4.0.2-4.2, Android 2.3+*/
	box-shadow: 3px 3px 5px #cfcbc3,0 0 0 1px #cfcbc3;/* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
	border-radius:6px;
}
#cardEnglish {
    background-color:#f4f4f4;
}
#cardEnglish span,
#cardSpanish span {
	position:absolute;
    -moz-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	display:inline-block;
	left:50%;
	top:50%;
}
#cardSpanish {
	z-index:2;
	opacity:1;
}
#cardEnglish {
	z-index:1;
	opacity:0;
}
div.showEnglish #cardSpanish {
	z-index:1;
	opacity:0;
}
div.showEnglish #cardEnglish {
	z-index:2;
	opacity:1;
}
.progress-game {
    
}
.progress-game h4 {
    font-size: 13px;
}
.progress-game div.progress {
    margin-left: auto;
    margin-right: auto;
    max-width: 400px;
    height: 5px;
}
.flashcard-html5 div.top-bar {
    text-align: center;
    padding-bottom: 10px;
}
.flashcard-html5 div.top-bar label {
    display:block;
}
.flashcard-html5 div.top-bar .icheckbox_polaris {
    display: block;
    margin: 0 auto;
}
.flashcard-html5 .button-bar {
    
}

.flashcard-html5 .button-bar .btn {
    border-radius: 5em;
    padding: .1em 1.2em !important;
    border-width: 0;
    margin-bottom: 5px;
}
@media (min-width: 1087px) {
    .flashcard-html5 .button-bar label{
        font-size: 10px;
        margin: 0 1%;
    }
}