/*CHANGE FLASHCARD SIZE */
.flip-container, .front, .back {
    width: 520px;
    height: 300px;
}

/* CHANGE BACKGROUND COLOR FRONT SIDE */
.front {
background-color:#78D9FA;
}

/* CHANGE BACKGROUND COLOR BACK SIDE */
.back {
background-color:#87FA78;
}

/*Hide paging numbers for flashcards.  Delete the line below if you want to show the flashcard numbering*/
.paging {display:none;}




/* DO NOT CHANGE BELOW HERE UNLESS YOU KNOW WHAT YOU ARE DOING */
.front {overflow: auto;}
.back {overflow: auto;}

/* entire container, keeps perspective */
.flip-container {
	perspective: 1000;
}
.flip-container, .front, .back {
    margin: auto;
padding:10px;
margin-bottom:125px;
}

/* flip the pane when hovered */
.flip-container.hover .flipper {transform: rotateY(180deg);}

/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
clear:both;
}

/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
border: 1px solid;
border-radius: 5px;
}

/* front pane, placed above back */
.front {
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {transform: rotateY(180deg);
}

.btn-togglecard h1{
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 5;
  -moz-border-radius: 5;
  border-radius: 5px;
  font-family: Arial;
  color: #ffffff;
  font-size: 14px;
  padding: 2px;
  text-decoration: none;
text-align:center;
width: 125px;
margin-bottom:5px;
float:left;
margin:5px;
display:inline-block;
}

.btn-togglecard:hover h1{
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

.btn-togglecard {display:inline-block;}

.button-container{
text-align:center;
}

.button-holder{
max-width:800px;
margin:auto;
}