body {
	background:#053;
	font-family:"Calibri";
}

.not-supported {
	color: white;
	z-index: 2;
	text-align: center;
	background-color: red;
	font-style: bold;
	font-size: 1.4em;
	width: 100%;
}

.csstransforms3d .not-supported {
	display: none;
}
.cardHeader {
	clear: both;
	position: absolute;
	top: 0px;
	text-align: center;
	font-size: 40px;
	font-family: "Calibri";
	margin-left:-5px;
	padding:0px;
	width:320px;
	height:50px;
	background:#f94;
	color:#a62;
	border-radius:7px 7px 0px 0px;
	#border-bottom: #55f 2px solid;
}
.backCardHeader {
	clear: both;
	position: absolute;
	top: 0px;
	text-align: center;
	font-size: 40px;
	font-family: "Calibri";
	margin-left:-5px;
	padding:0px;
	width:320px;
	height:50px;
	background:#69f;
	color:#24f;
	border-radius:7px 7px 0px 0px;
	#border-bottom: #55f 2px solid;
}
#flipButton {
	clear:both;
	position:absolute;
	bottom:0px;

	text-align:center;
	font-size:50px;
	font-family:"Calibri";
	margin-left:-5px;
	padding:0px;
	width:320px;
	height:70px;
	background:#ddd;
	color:#fff;
	border-radius:0px 0px 6px 6px;
	
	background-image:url("rotate_icon.svg");
	background-repeat:no-repeat;
	background-size: inherit;
	background-position:center;
	
	/* Prevents from highlighting the button accidentally */
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	
	cursor:pointer; /*forces the cursor to change to a hand when the button is hovered*/
	
	}
#flipButton2 {
	clear:both;
	position:absolute;
	bottom:0px;

	text-align:center;
	font-size:50px;
	font-family:"Calibri";
	margin-left:-20px;
	padding:0px;
	width:320px;
	height:70px;
	background:#0ac;
	color:#fff;
	border-radius:0px 0px 9px 9px;
	
	/* Prevents from highlighting the button accidentally */
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	}
#flipButton3 {
	clear:both;
	position:absolute;
	bottom:0px;

	text-align:center;
	font-size:50px;
	font-family:"Calibri";
	margin-left:-5px;
	padding:0px;
	width:320px;
	height:70px;
	background:#ddd;
	color:#fff;
	border-radius:0px 0px 6px 6px;
	
	background-image:url("rotate_icon.svg");
	background-repeat:no-repeat;
	background-size: inherit;
	background-position:center;
	
	/* Prevents from highlighting the button accidentally */
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	
	cursor:pointer; /*forces the cursor to change to a hand when the button is hovered*/
	
	}
.page {
	position:relative;
	margin:auto;
	width:480px;
}
.randomize {
	font-size: 1.4em;
	font-family: "Calibri";
	text-align: center;
	width:30%;
	position:absolute;
	top:525px;
	left:80px;
	height: 45px;
	color: #fff;
	cursor:pointer; /*forces the cursor to change to a hand when the button is hovered*/
	background:#000; /*the colour of the button*/
	border:1px solid #000; /*required or the default border for the browser will appear*/
	/*give the button curved corners, alter the size as required*/
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	/*give the button a drop shadow*/
	-webkit-box-shadow: 0 0 6px rgba(0,0,0, .75);
	-moz-box-shadow: 0 0 6px rgba(0,0,0, .75);
	box-shadow: 0 0 6px rgba(0,0,0, .75);
}
.randomize:hover{
background-color :#000; /*make the background a little darker*/
/*reduce the drop shadow size to give a pushed button effect*/
-webkit-box-shadow: 0 0 1px rgba(0,0,0, .75);
-moz-box-shadow: 0 0 1px rgba(0,0,0, .75);
box-shadow: 0 0 1px rgba(0,0,0, .75);
}
.sequential {
	font-size: 1.4em;
	font-family: "Calibri";
	text-align: center;
	width:30%;
	position:absolute;
	top:525px;
	left:80px;
	height: 45px;
	color: #fff;
	cursor:pointer; /*forces the cursor to change to a hand when the button is hovered*/
	background:#000; /*the colour of the button*/
	border:1px solid #000; /*required or the default border for the browser will appear*/
	/*give the button curved corners, alter the size as required*/
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	/*give the button a drop shadow*/
	-webkit-box-shadow: 0 0 6px rgba(0,0,0, .75);
	-moz-box-shadow: 0 0 6px rgba(0,0,0, .75);
	box-shadow: 0 0 6px rgba(0,0,0, .75);
}
.sequential:hover{
background-color :#000; /*make the background a little darker*/
/*reduce the drop shadow size to give a pushed button effect*/
-webkit-box-shadow: 0 0 1px rgba(0,0,0, .75);
-moz-box-shadow: 0 0 1px rgba(0,0,0, .75);
box-shadow: 0 0 1px rgba(0,0,0, .75);
}
.Afirst
{
	font-size: 1.4em;
	font-family: "Calibri";
	text-align: center;
	width: 30%;
	height: 15px;
	
	position:absolute;
	top:525px;
	right:80px;
	color: #fff;
	cursor:pointer; /*forces the cursor to change to a hand when the button is hovered*/
	#padding:11px 70px; /*add some padding to the inside of the button*/
	height: 47px;
	background:#000; /*the colour of the button*/
	background-position: center;
	border:1px solid #000; /*required or the default border for the browser will appear*/
	/*give the button curved corners, alter the size as required*/
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	/*give the button a drop shadow*/
	-webkit-box-shadow: 0 0 6px rgba(0,0,0, .75);
	-moz-box-shadow: 0 0 6px rgba(0,0,0, .75);
	box-shadow: 0 0 6px rgba(0,0,0, .75);
}
.Afirst:hover{
background-color :#000; /*make the background a little darker*/
/*reduce the drop shadow size to give a pushed button effect*/
-webkit-box-shadow: 0 0 1px rgba(0,0,0, .75);
-moz-box-shadow: 0 0 1px rgba(0,0,0, .75);
box-shadow: 0 0 1px rgba(0,0,0, .75);
}
.card {
	background-color: #fff;
	position:absolute;
	top:0px;
	left:80px;
	width:320px;
	max-width:320px;
	height:512px;
	max-height:512px;
	border-radius:10px;
	display:table;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	z-index:1;
	border: black 2px solid;
}
.cardContent {
	display:table-cell;
	vertical-align:middle;
	padding:5px;
	max-width:320px;
	max-height:310px;
}
.cardText {
	font-size:25px;
}
.clickForAnswer {
	position: absolute;
	bottom:0px;
	right:5px;
}
.backOfcard {
	position:absolute;
	top:0px;
	left:80px;
	width:320px;
	max-width:320px;
	height:512px;
	max-height:512px;
	border-radius:10px;
	background:#fff;
	display:table;
	transform:rotateY(180deg);
	-webkit-transform:rotateY(180deg);
	-o-transform:rotateY(180deg);
	-moz-transform:rotateY(180deg);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	z-index:0;
	border: black 2px solid;
}
.backOfcardContent {
	display:table-cell;
	vertical-align:middle;
	padding:5px;
	max-width:320px;
	max-height:310px;
}
.answer {
	font-size:25px;
}
#audio {
	max-width:310px;
}
.next {
	position:absolute;
	top:231px;
	right:0px;
	margin-left:30px;
	float: right;
	cursor:pointer; /*forces the cursor to change to a hand when the button is hovered*/
	/* Prevents from highlighting the button accidentally */
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.previous {
	position:absolute;
	top:231px;
	left:0px;
	margin-right:30px;
	float:left;
	cursor:pointer; /*forces the cursor to change to a hand when the button is hovered*/
	/* Prevents from highlighting the button accidentally */
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#img {
	max-width:310px;
	max-height:502px;
	display:none;
}