@font-face {
	font-family: 'perpetua';
	src: url('../fonts/perpetua.ttf') format('truetype'),
		url('../fonts/webfont.woff2') format('woff2'),
       url('../fonts/webfont.woff') format('woff');
}
html, body {
  overflow-x: hidden;
}
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
	background-color:black;
}
.bottom-button {
	height:200px;
	width:670px;
	background:url('../images/button_big_1.png');
	cursor:pointer;
	background-position:center;
	opacity:0.9
}
.bottom-button:hover {
	opacity:1
}
.nonactive-link {
	opacity:0.25
}
.nonactive-link:hover {
	opacity:0.5
}
.top_login {
	position:relative;
	left:0px;
	top:0px;
	height:100%;
	width:100%;
	background:url('../images/bg0.jpg');
	background-position:center;
}
.top_place {
	position:relative;
	left:0px;
	top:0px;
	height:1080px;
	width:100%;
	background:url('../images/bg1.jpg');
	background-position:center;
}
.top_place_midpage {
	position:relative;
	left:0px;
	top:0px;
	height:400px;
	width:100%;
	background:url('../images/bg2.jpg');
	background-position:center;
}
.top_bar {
	height:110px;
	width:100%;
	background:url('../images/top.png');
	background-repeat:repeat;
	background-position:center;
}
.middle_bar {
	position:absolute;
	top:301px;
	height:100px;
	width:100%;
	background:url('../images/bottom.png');
	background-repeat:repeat-x;
	background-position:center;
}
.top_menu {
	position:absolute;
	font-family:perpetua;
	font-size:32px;
	color:white;
	left:50%;
	margin-left:-755px;
	top:80px;
	height:255px;
	width:1550px;
	background:url('../images/top_bg.png');
	background-position:center;
}
.menubtn_home {
	position:absolute;
	top:115px;
	height:80px;
	left:50%;
	margin-left:-600px;
	width:200px;
	text-align:center;
}
.menubtn_leaderboard {
	position:absolute;
	top:115px;
	height:80px;
	left:50%;
	margin-left:-400px;
	width:200px;
	text-align:center;
	cursor:pointer;
}
.menubtn_trade {
	position:absolute;
	top:115px;
	height:80px;
	left:50%;
	margin-left:200px;
	width:200px;
	text-align:center;
	cursor:pointer;
}
.menubtn_shop {
	position:absolute;
	top:115px;
	height:80px;
	left:50%;
	margin-left:400px;
	width:200px;
	text-align:center;
	cursor:pointer;
}
.early_access_text {
	position:absolute;
	left:50%;
	margin-left:-261px;
	width:522px;
	height:122px;
	top:100%;
	margin-top:-440px;
	background:url('../images/early_access.png');
}
.btn_top {
	position:absolute;
	left:50%;
	margin-left:-335px;
	top:100%;
	margin-top:-350px;
}
.btn_btm {
	position:relative;
	left:-40px;
	width:580px;
	height:170px;
	background-size:100%;
}
.dialog-button {
	left:50%;
	margin-left:-167px;
	height:100px;
	width:335px;
	background:url('../images/button_ok.png');
	cursor:pointer;
	background-position:center;
	background-size:100% 100%;
	opacity:0.9;
	position:absolute;
	top:100%;
	margin-top:-100px;
}
.dialog-button:hover {opacity:1}
.separator_2 {
	position:relative;
	top:0px;
	height:160px;
	width:100%;
	background:url('../images/middle.png');
	background-position:center;
	background-repeat:repeat;
	z-index:100;
}
.separator_3 {
	position:relative;
	top:0px;
	height:160px;
	width:100%;
	background:url('../images/middle.png');
	background-position:center;
	background-repeat:repeat;
	z-index:100;
}
.separator_4 {
	position:relative;
	top:0px;
	height:160px;
	width:100%;
	background:url('../images/middle.png');
	background-position:center;
	background-repeat:repeat;
	z-index:100;
}
.separator_5 {
	position:relative;
	top:0px;
	height:160px;
	width:100%;
	background:url('../images/middle.png');
	background-position:center;
	background-repeat:repeat;
	z-index:100;
}
.place_footer {
	position:relative;
	top:0px;
	height:580px;
	width:100%;
	background:url('../images/bg5.jpg');
	background-position:center bottom;
	z-index:0;
	background-repeat:no-repeat;
	background-color:black;
	font-family:perpetua;
}
.bottom_bar_top {
	height:100px;
	width:100%;
	background:url('../images/top.png');
	background-repeat:repeat-x;
	background-position:center;
}
.bottom_bar {
	position:absolute;
	top:100%;
	margin-top:-100px;
	height:100px;
	width:100%;
	background:url('../images/bottom.png');
	background-repeat:repeat-x;
	background-position:center;
}
.content_footer {
	position:absolute;
	left:50%;
	margin-left:-700px;
	width:600px;
	top:90px;
	height:400px;
}
.place_2 {
	position:relative;
	top:0px;
	height:820px;
	width:100%;
	background:url('../images/bg2.jpg');
	background-position:center bottom;
	z-index:0;
	background-attachment:fixed;
	background-repeat:no-repeat;
	background-color:black;
}
.dialog {
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-530px;
	width:1060px;
	margin-top:-200px;
	height:400px;
	background:url('../images/window.png');
	background-position:center;
	background-size:80% 100%;
	background-repeat:no-repeat;
}
.dialog_title {
	position:absolute;
	left:50%;
	margin-left:-150px;
	width:300px;
	top:25px;
	height:30px;
	text-align:center;
	font-family:perpetua;
	font-size:28px;
	color:#ffc000;
}
.dialog_content {
	position:absolute;
	left:50%;
	margin-left:-300px;
	width:600px;
	top:130px;
	height:300px;
	text-align:center;
	font-family:perpetua;
	font-size:24px;
	color:white;
}
.window {
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-530px;
	width:1060px;
	margin-top:-364px;
	height:728px;
	background:url('../images/window.png');
	background-position:center;
}
.window_title {
	position:absolute;
	left:50%;
	margin-left:-150px;
	width:300px;
	top:55px;
	height:30px;
	text-align:center;
	font-family:perpetua;
	font-size:32px;
	color:#ffc000;
}
.window_content {
	position:absolute;
	left:50%;
	margin-left:-380px;
	width:760px;
	top:230px;
	height:300px;
	text-align:center;
	font-family:perpetua;
	font-size:28px;
	color:white;
}
.place_3 {
	position:relative;
	top:0px;
	height:580px;
	width:100%;
	background:url('../images/bg3.jpg');
	background-position:center bottom;
	z-index:0;
	background-repeat:no-repeat;
	background-color:black;
	font-family:perpetua;
}
.content_3 {
	position:absolute;
	left:50%;
	margin-left:-700px;
	width:600px;
	top:120px;
	height:400px;
}
.place_4 {
	position:relative;
	top:0px;
	height:580px;
	width:100%;
	background:url('../images/bg4.jpg');
	background-position:center bottom;
	z-index:0;
	background-repeat:no-repeat;
	background-color:black;
	font-family:perpetua;
}
.content_4 {
	position:absolute;
	left:50%;
	margin-left:100px;
	width:600px;
	top:120px;
	height:400px;
}
.title_left {
	font-size:36px;
	color:#ffc000;
}
.content_left {
	position:relative;
	top:20px;
	left:0px;
	font-size:26px;
	color:white;
	text-shadow:0px 0px 5px black;
	line-height:133%;
}
.title_right {
	font-size:36px;
	color:#ffc000;
	text-align:right;
	width:600px;
}
.content_right {
	position:relative;
	top:20px;
	left:0px;
	font-size:26px;
	width:600px;
	color:white;
	text-shadow:0px 0px 5px black;
	line-height:133%;
	text-align:right;
}
.mid_place_content_long {
	display:inline-block;
	position:relative;
	top:0px;
	left:0px;
	width:100%;
	height:2200px;
	background:url('../images/bg0.jpg');
	background-size:auto 100%;
	background-position:cover;
}
.mid_place_content {
	display:inline-block;
	position:relative;
	top:0px;
	left:0px;
	width:100%;
	height:1000px;
	background:url('../images/bg0.jpg');
	background-size:auto 100%;
	background-position:cover;
}
.mid_place_title {
	width:100%;
	position:relative;
	left:50%;
	width:1200px;
	margin-left:-600px;
	height:63px;
	background-color:black;
	top:50px;
}
.mid_place_second {
	width:100%;
	position:relative;
	left:50%;
	width:1200px;
	margin-left:-600px;
	height:50px;
	background-color:black;
	top:50px;
}
.mid_place_left {
	position:absolute;
	width:40px;
	height:63px;
	background:url('../images/darkbg_left.png');
	background-size:100% 100%;
}
.mid_place_right {
	position:absolute;
	left:100%;
	top:0px;
	margin-left:-40px;
	width:40px;
	height:63px;
	background:url('../images/darkbg_right.png');
	background-size:100% 100%;
}
.mid_place_middle {
	top:0px;
	position:absolute;
	left:40px;
	width:calc(100% - 80px);
	height:63px;
	background:url('../images/darkbg_mid.png');
	background-size:100% 100%;
	text-align:center;
	color:yellow;
	font-family:perpetua;
	font-size:32px;
}
.thr_place_left {
	position:absolute;
	width:40px;
	height:50px;
}
.sec_place_left {
	position:absolute;
	width:40px;
	height:50px;
	background:url('../images/midbg_left.png');
	background-size:100% 100%;
}
.sec_place_right {
	position:absolute;
	left:100%;
	top:0px;
	margin-left:-40px;
	width:40px;
	height:50px;
	background:url('../images/midbg_right.png');
	background-size:100% 100%;
}
.thr_place_right {
	position:absolute;
	left:100%;
	top:0px;
	margin-left:-40px;
	width:40px;
	height:50px;
}
.thr_place_middle {
	top:0px;
	position:absolute;
	left:40px;
	width:calc(100% - 80px);
	height:50px;
	text-align:center;
}
.sec_place_middle {
	top:0px;
	position:absolute;
	left:40px;
	width:calc(100% - 80px);
	height:50px;
	background:url('../images/midbg_mid.png');
	background-size:100% 100%;
	text-align:center;
	color:yellow;
	font-family:perpetua;
	font-size:28px;
}
.mid_place_line {
	position:relative;
	left:50%;
	margin-left:-600px;
	width:1200px;
	top:50px;
	height:40px;
	background-color:black;
	color:white;
	text-align:center;
	opacity:0.8;
}
.handle {display:none;}
.close_menu {display:none;}
.mid_place_title {margin-left:0px;left:5%;width:90%;}
.mid_place_second {margin-left:0px;left:5%;width:90%;}
.mid_place_line {margin-left:0px;left:5%;width:90%;}
#mobile_menu {display:none;}
.login_input_1 {position:absolute;left:50%;margin-left:-350px;width:700px;top:0px;height:40px;background-color:black;border:1px solid #66582f;color:white;font-family:perpetua;font-size:24px;}
.login_input_2 {position:absolute;left:50%;margin-left:-350px;width:700px;top:60px;height:40px;background-color:black;border:1px solid #66582f;color:white;font-family:perpetua;font-size:24px;}
.login_input_3 {position:absolute;left:50%;margin-left:-350px;width:700px;top:120px;height:40px;background-color:black;border:1px solid #66582f;color:white;font-family:perpetua;font-size:24px;}
.signup_input_1 {position:absolute;left:50%;margin-left:-350px;width:700px;top:0px;height:40px;background-color:black;border:1px solid #66582f;color:white;font-family:perpetua;font-size:24px;}
.signup_input_2 {position:absolute;left:50%;margin-left:-350px;width:700px;top:50px;height:40px;background-color:black;border:1px solid #66582f;color:white;font-family:perpetua;font-size:24px;}
.signup_input_3 {position:absolute;left:50%;margin-left:-350px;width:700px;top:100px;height:40px;background-color:black;border:1px solid #66582f;color:white;font-family:perpetua;font-size:24px;}
.login_button {position:absolute;top:120px;left:50%;margin-left:-187px;height:110px;width:374px;background:url('../images/button_login.png');cursor:pointer;background-position:center;opacity:0.9;background-size:100%;}
.login_button:hover {opacity:1}
.forgot_button {position:absolute;top:120px;left:50%;margin-left:-187px;height:110px;width:374px;background:url('../images/button_reset.png');cursor:pointer;background-position:center;opacity:0.9;background-size:100%;}
.forgot_button:hover {opacity:1}
.signup_button {position:absolute;top:140px;left:50%;margin-left:-187px;height:110px;width:374px;background:url('../images/button_signup.png');cursor:pointer;background-position:center;opacity:0.9;background-size:100%;}
.signup_button:hover {opacity:1}
.login_desc_1 {position:absolute;left:50%;margin-left:-350px;width:700px;top:235px;height:40px;font-family:perpetua;font-size:24px;text-align:center;color:yellow;opacity:0.25;cursor:pointer;}
.login_desc_1:hover {opacity:1}
.login_desc_2 {position:absolute;left:50%;margin-left:-350px;width:700px;top:275px;height:40px;font-family:perpetua;font-size:24px;text-align:center;color:yellow;opacity:0.25;cursor:pointer;}
.login_desc_2:hover {opacity:1}
.signup_desc_1 {position:absolute;left:50%;margin-left:-350px;width:700px;top:240px;height:40px;font-family:perpetua;font-size:24px;text-align:center;color:yellow;opacity:0.25;cursor:pointer;}
.signup_desc_1:hover {opacity:1}
.signup_desc_2 {position:absolute;left:50%;margin-left:-350px;width:700px;top:275px;height:40px;font-family:perpetua;font-size:24px;text-align:center;color:yellow;opacity:0.25;cursor:pointer;}
.signup_desc_2:hover {opacity:1}
.dialog_bg {z-index:2001;position:fixed;left:0px;top:0px;width:100%;height:100%;background-color:rgba(0,0,0,0.5);display:none;}
.slide-container {width:90%;padding:10px;left:5%;top:20px;position:relative;}
.grid-container {display:grid;grid-template-columns:repeat(auto-fit, minmax(350px, 1fr));gap:20px;width:90%;padding:10px;left:5%;top:20px;position:relative;}
.grid-item {width:350px;height:175px;background:url('../images/product_bg.png');background-size:100% 100%;position:relative;}
.grid-avatar {position:absolute;left:28px;top:45px;width:80px;height:80px;background-size:100% 100%;}
.grid-title {position:absolute;left:120px;top:25px;width:210px;height:30px;color:yellow;font-family:perpetua;font-size:24px;}
.grid-type {position:absolute;left:120px;top:55px;width:210px;height:30px;color:silver;font-family:perpetua;font-size:18px;}
.grid-seller {position:absolute;left:120px;top:85px;width:210px;height:30px;color:white;font-family:perpetua;font-size:20px;color:gray;}
.grid-price {position:absolute;left:120px;top:120px;width:210px;height:30px;color:white;font-family:perpetua;font-size:25px;color:orange;}
.grid-button-sell {position:absolute;left:100%;margin-left:-120px;width:100px;top:100%;height:40px;margin-top:-60px;text-align:center;vertical-align:middle;color:white;font-family:perpetua;font-size:20px;background:url('../images/button_small.png');background-size:100% 100%;}

@media (max-width: 768px) {
.handle {display:block;position:absolute;width:32px;height:32px;left:16px;top:32px;background:url('../images/handle.png');background-size:100%;}
#mobile_menu {display:none;position:fixed;z-index:1001;left:0px;top:0px;width:100vw;height:100vh;background-color:#6e0105;}
.close_menu {display:block;position:absolute;width:32px;height:32px;left:100%;margin-left:-48px;top:32px;background:url('../images/close.png');background-size:100%;}

.mid_place_content {overflow-x: auto;-webkit-overflow-scrolling:touch;white-space:nowrap;touch-action: pan-x;}
.sec_place_middle {font-size:24px;}
.title_right {text-align:center;width:100%;}
.content_left {left:0%;width:100%;margin-left:0px;text-align:center;}
.content_right {left:0%;width:100%;margin-left:0px;text-align:center;}
.content_footer {left:5%;width:90%;margin-left:0px;text-align:center;}
.content_4 {left:10%;width:80%;margin-left:0px;text-align:center;top:40px;height:500px;}
.content_3 {left:10%;width:80%;margin-left:0px;text-align:center;top:40px;height:500px;}
.early_access_text {left:10%;width:80%;margin-left:0px;margin-left:0px;background-size:100%;background-repeat:no-repeat;top:90vh;}
.btn_top {left:10%;width:80%;margin-left:0px;background-size:100%;background-repeat:no-repeat;top:90vh;margin-top:-420px;}
.top_place {height:70vh;background-size:auto 50vh;background-repeat:no-repeat;background-color:black;}
.top_menu {left:5%;margin-left:0px;height:255px;width:90%;background:url('../images/top_bg_logo.png');background-size:100%;background-repeat:no-repeat;top:50px;}
.top_bar {height:50px;background-size:960px 50px;}
.separator_2 {height:100px;background-size:auto 100px;}
.separator_3 {height:100px;background-size:auto 100px;}
.separator_4 {height:100px;background-size:auto 100px;}
.separator_5 {height:100px;background-size:auto 100px;}
.btn_btm {left:0%;width:100%;margin-left:0px;background-size:100%;background-repeat:no-repeat;}
.dialog {left:5%;width:90%;margin-left:0px;background-size:100% 100%;}
.window {left:5%;width:90%;margin-left:0px;background-size:100% 100%;}
.window_title {font-size:24px;}
.window_content {left:15%;width:70%;margin-left:0px;font-size:20px;top:190px;}
.dialog_content {left:15%;width:70%;margin-left:0px;font-size:20px;top:150px;}
.place_2 {background-attachment:scroll;background-size:auto 100%;}
.place_footer {background-attachment:scroll;background-size:auto 100%;}
.menubtn_mobile_home {position:absolute;top:205px;height:40px;margin-left:0px;left:5%;width:90%;text-align:center;color:white;font-family:perpetua;font-size:32px;}
.menubtn_mobile_leaderboard {position:absolute;top:260px;height:40px;margin-left:0px;left:5%;width:90%;text-align:center;color:white;font-family:perpetua;font-size:32px;}
.menubtn_mobile_trade {position:absolute;top:325px;height:40px;margin-left:0px;left:5%;width:90%;text-align:center;color:white;font-family:perpetua;font-size:32px;}
.menubtn_mobile_shop {position:absolute;top:390px;height:40px;margin-left:0px;left:5%;width:90%;text-align:center;color:white;font-family:perpetua;font-size:32px;}
.login_input_1 {left:5%;margin-left:0px;width:90%;top:20px;}
.login_input_2 {left:5%;margin-left:0px;width:90%;top:80px;}
.login_input_3 {left:5%;margin-left:0px;width:90%;top:140px;}
.signup_input_1 {left:5%;margin-left:0px;width:90%;top:20px;}
.signup_input_2 {left:5%;margin-left:0px;width:90%;top:80px;}
.signup_input_3 {left:5%;margin-left:0px;width:90%;top:140px;}
.login_button {left:5%;margin-left:0px;width:90%;background-repeat:no-repeat;}
.forgot_button {left:5%;margin-left:0px;width:90%;background-repeat:no-repeat;}
.signup_button {left:5%;margin-left:0px;width:90%;background-repeat:no-repeat;top:160px;}
.login_desc_1 {left:5%;margin-left:0px;width:90%;}
.login_desc_2 {left:5%;margin-left:0px;width:90%;}
.signup_desc_1 {left:5%;margin-left:0px;width:90%;top:260px;}
.signup_desc_2 {left:5%;margin-left:0px;width:90%;top:320px;}
}
