.flashcard_main {
	padding:0;
	margin:0;
	text-align:right;
	display:none;
	padding-bottom:1em;
}

/* HEADER and FOOTER*/
.flashcard_header, .flashcard_footer{
	margin:0;
	font-size:0.8em;
	padding:0px 0em 0px 0em;
	text-align:right;
	display:inline;
}

.flashcard_header {vertical-align:bottom;}
.flashcard_footer {vertical-align:top;}

/* CONTENT */
.flashcard_content {
	font-size:300%;
	border:1px solid #ddd;
	text-align:center;
	height:130px;
	overflow:hidden;
	overflow-x:auto;
	
	
	display: flex;
    justify-content: center;
    align-items: center;
}

.flashcard_content img {max-height:90%;}

.ul, li, ol li {margin-left:1em;}

.flashcard_content p{
	padding-bottom:0;
	margin-bottom:0;
}

/* BUTTONS */

.flashcard_btn_reset{
  display: inline-block;
  vertical-align: middle;
  border-radius: 4px;
  background-color: #011ef4;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 24px;
  padding: 10px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  line-height: unset;
}

.flashcard_btn_correct{
  display:none;
  background-color:#89e82d;
  vertical-align: middle;
  border-radius: 4px;
  border: none;
  color: #000;
  text-align: center;
  font-size: 24px;
  padding: 10px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  line-height: unset;
}

.flashcard_btn_yes{
  background-color:#89e82d;
  vertical-align: middle;
  border-radius: 4px;
  border: none;
  color: #000;
  text-align: center;
  font-size: 24px;
  padding: 10px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  line-height: unset;
}

.flashcard_btn_wrong{
  display:none;
  background-color:#fa7373;
  vertical-align: middle;
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 24px;
  padding: 10px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  line-height: unset;
}

.flashcard_btn_no{
  background-color:#fa7373;
  vertical-align: middle;
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 24px;
  padding: 10px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  line-height: unset;
}
.flashcart_btn_start{
  display: inline-block;
  vertical-align: middle;
  border-radius: 4px;
  background-color: #4cb69f;
  border: none;
  text-align: center;
  font-size: 20px;
  padding: 0px;
  width: 100%;
  height: 100px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 1px;
  text-transform:initial;
  line-height: unset;
}

.flashcart_btn_start span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
  color: black;
}

.flashcart_btn_start span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}
.flashcart_btn_start:hover {
	webkit-box-shadow: initial;
    -moz-box-shadow: initial;
    -ms-box-shadow: initial;
    -o-box-shadow: initial;
	box-shadow: initial;
}

.flashcart_btn_start:hover span {
  padding-right: 25px;
}

.flashcart_btn_start:hover span:after {
  opacity: 1;
  /*right: 0;*/
}

.flashcard_buttons {
	padding-top:10px;
	text-align:right;
	vertical-align:top;
}

.flashcard_start{
	border:0px solid #ddd;
	padding:0em 0em 0em 0em;
	margin-bottom:0em;
}

.flashcard_finish{
	border:1px solid #ddd;
	padding:1em 1em 1em 1em;
	margin-bottom:1em;
}


/* flip */

.flipCard {
  -webkit-perspective: 800;
  -ms-perspective: 800;
  -moz-perspective: 800;
  -o-perspective: 800;
   width: 100%;
   height: 200px;
   position: relative;
   margin: 10px auto;
}
.flipCard .card.flipped {
  transform:rotatey(-180deg);
  -ms-transform:rotatey(-180deg); /* IE 9 */
  -moz-transform:rotatey(-180deg); /* Firefox */
  -webkit-transform:rotatey(-180deg); /* Safari and Chrome */
  -o-transform:rotatey(-180deg); /* Opera */
}
.flipCard .card {
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: 0.5s;
  -moz-transform-style: preserve-3d;
  -moz-transition: 0.5s;
  -ms-transform-style: preserve-3d;
  -ms-transition: 0.5s;
  -o-transform-style: preserve-3d;
  -o-transition: 0.5s;
  transform-style: preserve-3d;
  transition: 0.5s;
}
.flipCard .card .side {
  width: 100%;
  height: 100%;
  padding: 10px;
  cursor: pointer;
  position: absolute;
  box-sizing: border-box;
  z-index: 2;
  backface-visibility: hidden;  /* W3C */
  -webkit-backface-visibility: hidden; /* Safari & Chrome */
  -moz-backface-visibility: hidden; /* Firefox */
  -ms-backface-visibility: hidden; /* Internet Explorer */
  -o-backface-visibility: hidden; /* Opera */
  box-shadow: 0 0 10px rgba(0,0,0,0.6);
  overflow: auto;
}
.flipCard .card .back {
  background: white;
  color: black;
  transform:rotatey(-180deg);
  -ms-transform:rotatey(-180deg); /* IE 9 */
  -moz-transform:rotatey(-180deg); /* Firefox */
  -webkit-transform:rotatey(-180deg); /* Safari and Chrome */
  -o-transform:rotatey(-180deg); /* Opera */
}

.flipCard .card .front {
  font-family: Georgia;
  font-size:300%;
  text-align: center;
  background-color: #7030a0;
  border: 3px solid white;
  color: white;
  overflow:hidden;
  overflow-x:auto;
  justify-content: center;
  align-items: center;
  display: flex;
}

.flipCard .card .back {
  background-color: #dbb2f9;
  border: 3px solid white;
  text-align: center;
  color: black;
  padding-top: 0px;
  font-family: Georgia;
  font-size:130%;
  overflow:hidden;
  overflow-x:auto;
  justify-content: center;
  align-items: center;
  display: flex;
}