html, body {
	height: 100%;
	margin: 0;
	width: 100%;
	overflow: hidden;
}

@font-face {
	font-family: roboto;
	src: url("./roboto/roboto-regular.ttf") format("truetype");
}

table {
	position: relative;
	height: 98%;
	border-spacing: 0;
	width: 98%;
	margin: 0;
}

tr {
	resize: both;
}

head {
	height: 0% !important;
}

.non_fading {
	opacity: 1;
}

.fading {
	-webkit-animation: fadein 0.5s; /* Safari, Chrome and Opera > 12.1 */
	-moz-animation: fadein 0.5s; /* Firefox < 16 */
	-ms-animation: fadein 0.5s; /* Internet Explorer */
	-o-animation: fadein 0.5s; /* Opera < 12.1 */
	animation: fadein 0.5s;
}

/*
 *
 *
 * Main screen
 *
 *
 */

#memo_frame_background {
	background-image: url("./gui/backgrounds/background2.jpg");
	background-size: 100% 100%;
}

.memo_frame {
	width: 100%;
	height: 100%;
}

#memo_menu_instructions {
	display: none;
}

#memo_intro_screen {
	width: 100%;
	height: 50.0vw;
}

#instruction_cloud {
	position: absolute;
	display: none;
	margin-top: 3%;
	margin-left: 60%;
	vertical-align: middle;
	text-align: center;
	width: 26%;
	height: 20.0vw;
	padding-top: 1%;
	background: url("./gui/instr_bg.png") 0 0 no-repeat;
	background-size: 100% 100%;
}

#instr {
	margin-top: 20%;
	font-family: roboto;
	font-size: 2.0vw;
}

#memo_intro_box {
	position: absolute;
	margin-left: 24%;
	margin-left: 24.0vw;
	margin-top: 6%;
	margin-top: 4.0vw;
	width: 54%;
	height: 47%; /*47 */
	height: 26.0vw;
}

#memo_intro_guide {
	position: absolute;
	z-index: 1;
	width: 25%;
	height: auto;
	margin-left: 64%;
	margin-top: 18.5%;
}

#memo_play {
	position: absolute;
	background: url("./gui/play_btn.png") 0 0;
	background-size: 300% 100%;
	outline: none;
	border: none;
	width: 10%;
	height: 18.5%;
	height: 9.5vw;
	margin-left: 24.7%;
	margin-top: 30.2%;
	margin-top: 30.2vw;
}

#memo_play:hover {
	background: url("./gui/play_btn.png") 50% 0;
	background-size: 300% 100%;
}

#memo_play:active {
	background: url("./gui/play_btn.png") 100% 0;
	background-size: 300% 100%;
}

#memo_intro_logo_box {
	position: absolute;
	width: 100%;
	height: 25%;
	margin-top: 40.4%;
	background: #FFFFFF;
}

#memo_logo_image1 {
	position: absolute;
	height: 40%;
	width: auto;
	margin-left: 10%;
	margin-top: 2%;
}

#memo_logo_image2 {
	position: absolute;
	height: 40%;
	width: auto;
	margin-top: 2%;
	margin-left: 36%;
}

#memo_logo_image3 {
	position: absolute;
	height: 40%;
	width: auto;
	margin-top: 2%;
	margin-left: 61%;
}

#memo_logo_image4 {
	position: absolute;
	height: 40%;
	width: auto;
	margin-top: 2%;
	margin-left: 77%;
}

#memo_undersign {
	position: absolute;
	height: 1%;
	width: auto;
	margin-top: 10%;
	margin-left: 50%;
	text-align: center;
    transform: translate(-50%, -50%);
	font-family: roboto;
	font-size: 1.2vw;
}

#leaves {
	position: absolute;
	margin-top: 3.5%;
	margin-left: 22%;
	width: 70%;
	height: 85%;
	height: 46.0vw;
}

.leafDiv {
	display: inline-block;
	text-align: center;
	font-size: 1.0vw;
}

.leafImg {
	width: 80%;
	height: auto;
}

.leafDesc {
	text-align: center;
	font-family: roboto;
	font-size: 2.0vw;
}

/*
 *
 * Intro Screen
 *
 *
 *
 *  */

#memo_menu {
	width: 100%;
	height: 100%;
	display: none;
}

#memo_help {
	position: absolute;
	margin-left: 90%;
	margin-top: 2%;
	width: 8%;
	height: 15%;
	height: 8.0vw;
	outline: none;
	border: none;
	background: url("./gui/help.png") no-repeat 0 0;
	background-size: 200% 100%;
}

#memo_help:active {
	background: url("./gui/help.png") no-repeat 100% 0;
	background-size: 200% 100%;
}

#memo_easy_mode {
	position: absolute;
	margin-left: 10%;  /* 10% */
	margin-top: 3%;
	width: 22%;
	height: 39%;
	height: 22.0vw;
	border: none;
	outline: none;
	background: url("./gui/easy.png") no-repeat 0 0;
	background-size: 300% 100%;
}

#memo_easy_mode:hover {
	background: url("./gui/easy.png") no-repeat 50% 0;
	background-size: 300% 100%;
}

#memo_easy_mode:active {
	background: url("./gui/easy.png") no-repeat 100% 0;
	background-size: 300% 100%;
}

#memo_medium_mode {
	position: absolute;
	margin-left: 32%; /* 32% */
	margin-top: 20%;
	width: 21%;
	height: 38%;
	height: 21.0vw;
	border: none;
	outline: none;
	background: url("./gui/medium.png") no-repeat 0 0;
	background-size: 300% 100%;
}

#memo_medium_mode:hover {
	background: url("./gui/medium.png") no-repeat 50% 0;
	background-size: 300% 100%;
}

#memo_medium_mode:active {
	background: url("./gui/medium.png") no-repeat 100% 0;
	background-size: 300% 100%;
}

#memo_hard_mode {
	position: absolute;
	margin-left: 8%; /* 6% */
	margin-top: 31%;
	width: 18%;
	height: 32%;
	height: 18.0vw;
	border: none;
	outline: none;
	background: url("./gui/hard.png") no-repeat 0 0;
	background-size: 300% 100%;
}

#memo_hard_mode:hover {
	background: url("./gui/hard.png") no-repeat 50% 0;
	background-size: 300% 100%;
}

#memo_hard_mode:active {
	background: url("./gui/hard.png") no-repeat 100% 0;
	background-size: 300% 100%;
}

#memo_guide {
	position: absolute;
	margin-left: 60%; /* 60% */
	bottom: 0%;
	width: 40%;
	height: auto;
}

/*

 GAME

 *
 * */

#memo_back_button {
	display: none;
	position: absolute;
	width: 5%;
	height: 10%;
	height: 5.0vw;
	margin-left: 3%;
	margin-top: 3%;
	border: none;
	outline: none;
	background: url("./gui/go_back.png") no-repeat 0 0;
	background-size: 200% 100%;
}

#memo_back_button:active {
	background: url("./gui/go_back.png") no-repeat 100% 0;
	background-size: 200% 100%;
}

.memory_background {
	width: 100%;
	height: 100%;
	background-image: url("./gui/background.jpg");
	background-size: 100% 100%;
}

#leaf_memo_leaves {
	margin-left: 13%;
	margin-top: 2%;
	width: 80%;
	height: 50%;
	vertical-align: middle;
	text-align: center;
}

.leaf_memo_leaf_element {
	width: 10%;
	height: 10%;
	display: inline-block;
	font-family: roboto;
	font-size: 1.5vw;
	text-align: center;
	padding-top: 10px;
}

#memory_frame_1 {
	height: 100%;
}

.memo_layout_easy {
	position: absolute;
	margin-top: 3.5%;
	margin-left: 22%;
	width: 59%;
	height: 85%;
	height: 46.0vw;
}

.memo_layout_medium {
	position: absolute;
	margin-top: 3.5%;
	margin-left: 22%;
	width: 56%;
	height: 85%;
	height: 46.0vw;
}

.memo_layout_hard {
	position: absolute;
	margin-top: 3.5%;
	margin-left: 19%;
	width: 62%;
	height: 90%;
	height: 46.0vw;
}

.card {
	height: auto;
	-webkit-animation: img_anim 0.3s;
	animation: img_anim 0.3s;
	resize: both;
}

.card_out {
	height: auto;
	-webkit-animation: out_anim 0.3s;
	animation: out_anim 0.3s;
	resize: both;
}

.in_card {
	height: auto;
	resize: both;
}