/* Member */
#wrapper.MemberUI { background-color:#f2f2f2; }
#wrapper.MemberUI .content { padding:50px 70px 600px 70px; }
#wrapper.MemberUI .wrap-box { width:850px; margin:auto; }

#wrapper.MemberUI ul.step {
  margin-bottom:50px;
  width:100%;
  height:120px;
  overflow:hidden;
  text-align:center;
}
#wrapper.MemberUI ul.step li {
  display:inline-block;
  margin:0 20px;
  vertical-align:middle;
}

#wrapper.MemberUI .wrap-column {
	width:820px;
	margin:auto;
	overflow:hidden;
}
#wrapper.MemberUI .wrap-column .wrap-box {
	float:left;
	width:360px;
	margin:inherit;
	background-color:#fff;
}
#wrapper.MemberUI .wrap-column .wrap-box {
	padding:20px;
	text-align:center;
}
#wrapper.MemberUI .wrap-column .wrap-box.social {
	margin-right:20px;
}
#wrapper.MemberUI .wrap-column .wrap-box .title {
	font-size:1.5em; font-weight:bold;
	color:#1b3374;
	margin-bottom:25px;
}
#wrapper.MemberUI .wrap-column .wrap-box .func {
	margin-top:20px; padding-top:20px;
	border-top:solid 1px #BEBEBE;
}
#wrapper.MemberUI .wrap-column .wrap-box .func a {
	display:inline-block;
}
#wrapper.MemberUI .wrap-column .wrap-box.social .func a {
	background-position:10px center;
	padding-left:45px; margin-right:10px;
	background-color:#f7f7f7;
	background-repeat:no-repeat;
	border:solid 1px #bebebe;
	color:#000;
}
#wrapper.MemberUI .wrap-column .wrap-box .func a.btn-facebook {
	background-image:url(images/LOGO-facebook.jpg);
}
#wrapper.MemberUI .wrap-column .wrap-box .func a.btn-google {
	background-image:url(images/LOGO-google.jpg);
}

/* LOGIN */
#wrapper.LoginUI {
	background:url(images/loginIMG.jpg) no-repeat left center;
	background-size:cover;
	width:100%;
	max-width:100%;
	margin:0;
}
.LoginUI h1 { margin-top:10px; margin-bottom:30px; }
.LoginUI .content {
	position:absolute;
	top:40%;
	right:5%;
	padding:0;
	width:400px;
}
.LoginUI .wrap-box {
	padding:20px;
	-webkit-box-shadow:1px 1px 5px rgba(0,0,0,0.3);
	-moz-box-shadow:1px 1px 5px rgba(0,0,0,0.3);
	box-shadow:1px 1px 5px rgba(0,0,0,0.3);
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	border-radius:6px;
	border:solid 1px #fff;
	box-sizing:border-box;
	background-color:rgba(220,220,220,0.9);
	background: -moz-linear-gradient(top,  #eeeeee 0%, #eeeeee 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #eeeeee 0%,#eeeeee 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #eeeeee 0%,#eeeeee 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #eeeeee 0%,#eeeeee 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #eeeeee 0%,#eeeeee 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
}
.LoginUI .wrap-box a { display:inline-block; margin:10px 5px; }
.LoginUI .btn-default { width:100%; font-size:1.3em; line-height:45px; }
.LoginUI .field { font-size:18px; }
.LoginUI .field .label { width:20%; color:#000; }
.LoginUI .field .setting { width:calc(80% - 10px); }
.LoginUI .field .setting .tip { font-size:12px; line-height:normal; margin:0; padding:0; }

.LoginUI hr { margin:20px 0; }




/* entire container, keeps perspective */
.flip-container {
	position: relative;
	max-width:1366px;
	min-height: 560px;
	margin:auto;
}
.front, .back {
	width:400px;
}
.flip-container.hover .back { display:block; }
.flip-container.hover .front { display:none; }

/* flip speed goes here */
.flipper { position:relative; }

/* hide back of pane during swap */
.front, .back {
	position:absolute; top:0; left:0;
}

/*  UPDATED! front pane, placed above back */
.front { display:block; }

/* back, initially hidden pane */
.back { display:none; }