@font-face {
	font-family: 'HandOfSeanPro-Regular';src: url('../fonts/356CFD_0_0.eot');
	src: url('../fonts/356CFD_0_0.eot?#iefix') format('embedded-opentype'),
	url('../fonts/356CFD_0_0.woff2') format('woff2'),
	url('../fonts/356CFD_0_0.woff') format('woff'),
	url('../fonts/356CFD_0_0.ttf') format('truetype');
	font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Sinkin Sans 400';
    src: url('SinkinSans-400Regular.woff2') format('woff2'),
        url('SinkinSans-400Regular.woff') format('woff'),
        url('SinkinSans-400Regular.otf') format('otf');
    font-weight: normal;
    font-style: normal;
}

body{
	font-family: 'Sinkin Sans 400', Arial;
	font-weight: normal;
    font-style: normal;
	text-align:center;
	background-color: #e0e6ec;
	font-size:18px;
}
#line{
	width:100%;
	height:1px;
	background-color:black;
}
.scrollBox{
	width:550px;
	height:560px;
	color:black;
	text-align:left;
	display:inline-block;
	position:absolute;
	top:120px;
	left:80px;
	/*background-color:pink;
	opacity:.5;*/
	overflow-x:hidden;
	overflow-y:scroll;
}
.infoText{
	margin:10px;
	margin-right:25px;
	font-size: 30px;
	font-family: 'HandOfSeanPro-Regular'; 
	font-weight: 500; 
	font-style: normal;
}
.subjectTitle{
	font-family: 'Sinkin Sans 400', Arial;
	font-size:30px;
	font-weight:bold;
	color: #452b6f;
}
.subTitle{
	font-family: 'Sinkin Sans 400', Arial;
	font-size:25px;
	color: #7093B5;
}
#scroll_warning{
	display:inline-block;
	position:absolute;
	bottom:50px;
	left:90px;
	font-size:14px;
}
.side2{
	width:830px;
	height:540px;
	color:black;
	display:inline-block;
	position:absolute;
	top:160px;
	left:80px;
	font-size:25px;
	/*
	background-color:pink;
	opacity:.5;*/
}
.side2 p{
	margin:20px;
	font-size: 40px;
	font-family: 'HandOfSeanPro-Regular'; 
	font-weight: 500; 
	font-style: normal;
}
.Qtitle{
	font-size:35px;
	font-weight:bold;
	text-align:center;
	color: #452b6f;
}
.Atitle{
	font-size:35px;
	font-weight:bold;
	text-align:center;
	color: #7093B5;
}
#outer_wrap{
	width:1024px;
	height:768px;
	position:relative;
	background-color:#e6e6e6;
	background: url("../images/FlashCards_base.png") no-repeat;
	background-size: 1024px 768px; 
	margin:auto;
}

.folder_button{
	display:inline-block;
	position:absolute;
	width:220px;
	height:150px;
	/*background-color:blue;
	opacity:.5;*/
	cursor:pointer;
}

#flipButton{
	display:inline-block;
	position:absolute;
	bottom:57px;
	right:55px;
	width:80px;
	height:40px;
	/*background-color:purple;
	opacity:.5;*/
	z-index:5;
	cursor:pointer;
}
#closeButton{
	display:inline-block;
	position:absolute;
	top:90px;
	right:45px;
	width:80px;
	height:70px;
	/*background-color:purple;
	opacity:.5;*/
	z-index:5;
	cursor:pointer;
}

.tile-container{
	display:none;
	position:absolute;
	top:0; left:0;
	width:1024px; height:768px;

	transform:perspective(400px);
}

.tile-container, .front, .back{
	width:1024px;
	height:768px;
}

.front, .back{
	position:absolute;
	top:0;
	left:0;
	text-align:center;
}
.front{
	z-index:2;
	transform: perspective(400px) rotateY(0deg);
	backface-visibility: hidden;
	transition: 1.0s;
	opacity:1;
	display:block;
	
	/*background-color:yellow;*/
}
.back{
	transform: perspective(400px) rotateY(-180deg);
	backface-visibility: hidden;
	transition: 1.0s;
	display:block;
	
	/*background-color:red;*/
}
.flip-front{
	opacity:0;
	transform: perspective(400px) rotateY(180deg);
}
.flip-back{
	opacity:1;
	transform: perspective(400px) rotateY(0deg);
}