html {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 62.5%;
	font-variant-ligatures: common-ligatures;
	font-weight: 300;
}

body {
	background-color: #fff;
	color:#333;
	font-size: 1.8rem;
  min-width: 300px;
  margin: 0;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  overflow-x:hidden;
}

*, :after, :before {
	box-sizing: inherit;
}

input:focus {
 outline:none;
}

.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  width: 100%;
  margin: auto;
}

#maindiv {
	position:fixed;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	overflow-x:hidden;
	overflow-x:auto;
	background-color:#fcfaf5!important;
}

#mainarea {
	position:fixed;
	width:450px;
	height:800px;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	background-color:#fff!important;
	overflow-x:none;
	overflow-y:auto;
}

#logoarea {
	position:relative;
	height:270px;
	width:100%;
	background-color:#FFFFFF	!important;
}

#toparea {
	position:absolute;
	top:0px;
	left:0px;
	height:110px;
	width:100%;
	overflow:hidden;
	background-color:#ff6900!important;
}

#middlearea {
	position:absolute;
	top:110px;
	left:0px;
	width:100%;
	background-color:#fff!important;
	overflow-x:hidden;
	overflow-y:auto;
}

#middlearea1 {
	position:absolute;
	top:110px;
	left:0px;
	width:100%;
	box-sizing: border-box;
	background-color:#000!important;
	overflow-x:hidden;
	overflow-y:auto;
}

#bottomarea {
	position:absolute;
	bottom:0px;
	left:0px;
	height:60px;
	width:100%;
	overflow:hidden;
	background-color:#ff6900!important;
}

#photoaccountbox {
	position:absolute;
	right:10px;
	top:10px;
	width:50px;
	height:50px;
	border-radius:25px;
	overflow:hidden;
	background-color:#fff;
}

.chatbox {
	position:absolute;
	right:75px;
	bottom:0px;
	width:40px;
	height:40px;
	line-height:30px;
	text-align:center;
	color:#fcfcfc;
	cursor:pointer;
	font-size:40px;
}
.chatbox:hover {
	color:#fff;
}

.cardbox {
	position:absolute;
	right:25px;
	bottom:5px;
	width:30px;
	height:40px;
	line-height:40px;
	text-align:center;
	color:#fcfcfc;
	cursor:pointer;
	font-size:40px;
}
.cardbox:hover {
	color:#fff;
}

.setupbox {
	position:absolute;
	right:30px;
	bottom:10px;
	width:40px;
	height:40px;
	line-height:40px;
	text-align:center;
	color:#fcfcfc;
	cursor:pointer;
	font-size:40px;
}
.setupbox:hover {
	color:#fff;
}

.invitebox {
	position:absolute;
	right:80px;
	bottom:10px;
	width:40px;
	height:40px;
	line-height:40px;
	text-align:center;
	color:#fcfcfc;
	cursor:pointer;
	font-size:40px;
}
.setupbox:hover {
	color:#fff;
}

.calendarbox {
	position:absolute;
	left:30px;
	bottom:10px;
	width:40px;
	height:40px;
	line-height:40px;
	text-align:center;
	color:#fcfcfc;
	cursor:pointer;
	font-size:40px;
}
.calendarbox:hover {
	color:#fff;
}

.listbox {
	position:absolute;
	left:50%;
	transform: translateX(-100%);
	bottom:10px;
	width:60px;
	height:40px;
	line-height:40px;
	text-align:center;
	cursor:pointer;
	font-size:35px;
	border:1px solid #fff;
	border-radius:10px 0px 0px 10px;
}

.mapbox {
	position:absolute;
	left:50%;
	bottom:10px;
	width:60px;
	height:40px;
	line-height:40px;
	text-align:center;
	cursor:pointer;
	font-size:35px;
	border:1px solid #fff;
	border-radius:0px 10px 10px 0px;
}

.maplistoff {
	color:#fcfcfc;
	background-color:#E15A00;
}
.maplistoff:hover {
	color:#fff;
	background-color:#ff6900;
}

.mapliston {
	color:#E15A00;
	background-color:#fcfcfc;
}
.mapliston:hover {
	color:#ff6900;
	background-color:#fff;
}

.bottomzero {
	bottom:0px;
}
.bottom60 {
	bottom:60px;
}

.opearea {
	position:relative;
	height:530px;
	width:100%;
	background-color:#ff6900!important;
}

#logoimage {
	position:absolute;
	left:50%;
	top:50%;
	transform: translate(-50%, -50%);
	width:80%;
	height:auto;
}

#logoimagemin {
	position:absolute;
	left:10px;;
	top:10px;
	width:132.5px;
	height:90px;
}

.QRcodelogo {
	position:absolute;
	right:10px;;
	bottom:0px;
	width:50px;
	height:50px;
	line-height:50px;
	text-align:center;
	cursor:pointer;
	font-size:40px;
}

.containerqrr {
	position:absolute;
	left:10px;
	right:10px;
	top:10px;
}

.blockqrreader {
	display: inline-block;
	position: relative;
	padding: 0px;
	border: 1px solid silver;
	width:100%;
	height:100%;
	box-sizing: border-box;
}

.trademarklogo {
	position:absolute;
	right:20%;
	top:15%;
	width:30px;
	height:30px;
	line-height:30px;
	color:#888;
	font-size:30px;
	text-align:center;
	cursor:pointer;
}
.trademarklogo:hover {
	color:#00d;
}

.trademarklogo1 {
	position:absolute;
	left:122.5px;
	top:10px;
	width:20px;
	height:20px;
	line-height:20px;
	color:#888;
	font-size:20px;
	text-align:center;
	cursor:pointer;
}
.trademarklogo1:hover {
	color:#00d;
}

#titlepage {
	position:absolute;
	right:10px;
	bottom:10px;
	height:20px;
	line-height:20px;
	color:#fff;
	font-size:20px;
	text-align:center;
	cursor:pointer;
}

.logoimagedim {
	width:100%;
	height:100%;
	cursor:pointer;
}

.messagedisclaimer {
	display:none;
	position:fixed;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	width:400px;
	height:400px;
	border:1px solid #444;
	background-color:#fff;
	z-index:999999999;
	overflow:hidden;
}

.closemessage {
	position:absolute;
	top:10px;
	right:10px;
	font-size:25px;
	width:30px;
	height:30px;
	line-height:30px;
	cursor:pointer;
	color:#666;
}
.closemessage:hover {
	color:#333;
}

.messahedisclaimertext {
	position:absolute;
	top:50%;
	left:50%;
	width:90%;
	max-height:80%
	line-height:22px;
	font-size:20px;	
	color:#333;
	text-align:center;
	transform: translate(-50%, -50%);
}

.iconote {
	cursor:pointer;
	position:absolute;
	top:50%;
	right:5%;
	width:20px;
	height:20px;
	line-height:100%;
	font-size:20px;	
	color:#333;
	text-align:center;
	transform: translateY(-50%);
}
.iconote:hover {
	color:#F3D03E;
}

#sfondo {
	display:none;
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background-color:#000;
	opacity: 0.3;
  filter: alpha(opacity=30);
	z-index:999999998;
}

.fieldtxt {
	position:absolute;
	left:5%;
	width:90%;
	height:46px;
	border-radius:5px;
	background-color:#fff;
}

.clearboth {
	clear:both;
}
.mtop10 {
	margin-top:10px;
}

#qrcodebox1 {
	position:absolute;
	top:320px;
	left:50%;
	color:#fff;
	width:130px;
	height:130px;
	transform: translateX(-50%);
}

#qrcodebox2 {
	position:absolute;
	top:20%;
	left:50%;
	color:#fff;
	width:70%;
	height:auto;
	transform: translateX(-50%);
}

.photoutebox {
	position:absolute;
	top:40px;
	left:50%;
	width:160px;
	line-height:160px;
	height:160px;
	font-size:130px;
	transform: translateX(-50%);
	border-radius:80px;
	overflow:hidden;
	background-color:#ccc;
	color:#999;
	text-align:center;
}

#nameutebox {
	position:absolute;
	top:240px;
	left:50%;
	color:#333;
	font-size:17px;
	font-weight:bold;
	width:90%;
	text-align:center;
	transform: translateX(-50%);
}

#cmdutebox {
	position:absolute;
	bottom:20px;
	left:50%;
	color:#333;
	font-size:13px;
	font-style:italic;
	width:80%;
	text-align:center;
	transform: translateX(-50%);
	cursor:pointer;
	color:#ff6900;
}
#cmdutebox:hover {
	color:#E15A00;
}

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

#qrcodetext {
	position:absolute;
	top:10%;
	left:50%;
	color:#333;
	font-size:14px;
	font-style: italic;
	width:90%;
	height:auto;
	text-align:center;
	transform: translateX(-50%);
}

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

#cwarningbox {
	display:none;
	position:fixed;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	width:360px;
	height:250px;
	border:1px solid #444;
	background-color:#fff;
	z-index:999999999;
	overflow:hidden;
}

.friendshead {
	position:relative;
	width:70%;
	height:100%;
	line-height:50px;
	text-align:left;
	font-family: Arial, Helvetica, sans-serif;
	font-size:16px;
	color:#ff6900;
	float:left;
}

.friendsbtnarea {
	position:relative;
	width:30%;
	height:100%;
	line-height:50px;
	float:left;
}

.friendsbtn {
	position:absolute;
	top:0px;
	width:20px;
	text-align:center;
	height:50px;
	line-height:50px;
	font-family: Arial, Helvetica, sans-serif;
	font-size:20px;
}

.friendsbtnup {
	color:#ff6900;
	cursor:pointer;
}

.friendsbtndn {
	color:#ddd;
}

.friendsbtn1 {
	right:90px;
}

.friendsbtn2 {
	right:60px;
}

.friendsbtn3 {
	right:30px;
}

.friendsbtn4 {
	right:0px;
}

#warningtext {
	position:absolute;
	top:40px;
	left:10%;
	width:80%;
	height:130px;
	line-height:18px;
	font-size:17px;
	color:#000;
	text-align:center;
}

#warnbuttbox {
	position:absolute;
	bottom:40px;
	left:10%;
	width:80%;
	height:46px;
	text-align:center;
}

.warnbutt {
	position:relative;
	width:42.5%;
	height:46px;
	line-height:46px;
	border-radius:5px;
	background-color:#F3D03E;
	color:#fcfaf5;
	text-align:center;
  font-size:20px;
  cursor:pointer;
  float:left;
}
.warnbutt:hover {
	color:#ff6900;
} 

.ml5 {
	margin-left:5%;
}

@media (max-width: 450px) {
	#mainarea {
		width:100%;
	}
	.messagedisclaimer {
		width:90%;
	}
	#cwarningbox {
		width:80%;
	}
}

@media (max-height: 800px) {
	#mainarea {
		height:100%;
	}
}