@font-face {
  font-family: Magic;
  src: url(font/magic.ttf);

}

.fullscreencontainer
{
	display: none;
	position: absolute;
	top: 0px;
	left:0px;
	/*right:0px;
	bottom: 0px;*/
	
	transition: opacity 1s ease;
}

#listview
{
	width:100%;
	height:100%;
}

.card_button
{
	vertical-align:middle;
	position:absolute;
	text-align:center;
	color:white;
}

.card_button div
{
	position:absolute;
}

#button_top
{
	width:100%;
	height:20%;
	top:0px;
	left:0px;
}

#button_top div
{
	top:0px;
	left:50%;
	transform:translateX(-50%);
}

#button_bottom
{
	width:100%;
	height:20%;
	bottom:0px;
	left:0px;
}

#button_bottom div
{
	bottom:0px;
	left:50%;
	transform:translateX(-50%);
}

#button_left
{
	width:20%;
	height:100%;
	top:0px;
	left:0px;
}

#button_left div
{
	text-align:left;
	top:50%;
	transform:translateY(-50%);
}

#button_right
{
	width:20%;
	height:100%;
	top:0px;
	right:0px;
}

#button_right div
{
	right:0px;
	top:50%;
	transform:translateY(-50%);
}


#card
{
	position:absolute;
	border:none;
	width:100%;
	height:100%;
}


body
{
	background-color: #383838;
	font-size: 3.9vw;
	font-family: Magic;
}

input
{
    font-size:3.9vw;
}

#cardview
{
	font-family:Arial;
}

.ftg_online_button
{
	position:relative;
	width:70%;
	height:13%;
	left:50%;
	transform:translateX(-50%);
	vertical-align:middle;
	text-align:center;
	background-color:#e2e2e2;
	border:3px solid black;
	margin-top:10px;
}

.ftg_online_button div
{
	position:relative;
	top:50%;
	transform:translateY(-50%);
}

.ftg_online_button_image {
	position: absolute;
	left: 10px;
	top: 10%;
	height: 80%;
}

.ftg_online_input
{
	position:relative;
	width:70%;
	height:13%;
	left:50%;
	transform:translateX(-50%);
	vertical-align:middle;
	text-align:center;
	background-color:#e2e2e2;
	border:3px solid black;
	margin-top:10px;
}

.ftg_online_text
{
	position:relative;
	width:70%;
	left:50%;
	transform:translateX(-50%);
	vertical-align:middle;
	text-align:center;
	color:#e2e2e2;
	margin-top:10px;
}
.ftg_online_cardstack
{
	position:relative;
	width:100%;
	left:50%;
	transform:translateX(-50%);
	vertical-align:middle;
	margin-top:0px;
	border-top:solid: 1px solid white;
    box-shadow: 0px -2px 4px #000000;
}

.ftg_img_loading
{
	position:relative;
	left:50%;
	top:50%;
	transform:translateX(-50%);
	transform:translateY(-50%);
	vertical-align:middle;
}
#loading_screen
{
	height:100%;
	width:100%;
	left:0px;
	top:0px;
}

.hide {
	opacity: 0;
}
}