body {
	margin:0;
	padding:0;
	display:flex;
	justify-content:center;
	flex-direction:column;
	width: 100%;
	max-width:100%;
	align-items:center;
	border:none;
	font-family:arial;
}

#banner {
	background-image: url("/banner");
	width: 100%;
	max-width:100%;
	height: calc( 945px - 2px );
	background-repeat: no-repeat;
	background-size: 100% 100%;
	margin:0;
	padding:0;
	cursor:pointer;
	border:solid 1px;
}

#wholePage {
	margin:0;
	padding:0;
	display:flex;
	justify-content:center;
	flex-direction:column;
	width: calc( 100% - 2px );
	max-width: calc( 100% - 2px );
	height:auto;
	align-items:center;
	border:none;
	flex-wrap:nowrap;
}

#header {
	text-align:center;
	font-size:50px;
	font-weight:bold;
	text-decoration: underline;
	padding:20px 0;
	border:solid 1px rgba(0, 0, 0,1);
	border-top:none;
	max-width:100%;
	width: 100%;
	height:auto;
	color:rgba(71, 126, 198,1);
}

.header {
	text-align:center;
	font-size:45px;
	font-weight:bold;
	padding:10px 0;
	border:none;
	max-width:100%;
	width:100%;
	height:auto;
	color:rgba(0,0,0,1);
}

.inputText {
	text-align:center;
	font-size:20px;
	padding:10px 0;
	border:none;
	max-width:100%;
	width:100%;
	height:auto;
	color:rgba(0,0,0,1);
}

.errorBody {
	display:flex;
	flex-direction:row;
	border:none;
	width:auto;
	align-items:center;
	justify-content:center;
	width:300px;
	height:auto;
	position:relative;
}

.errorMain {
	color:red;
	width:50px;
	border:none;
	text-align:center;
	position:absolute;
	right:0;
	display:none;
}

.errorPassword {
	color:red;
	width:50px;
	border:none;
	text-align:center;
	position:absolute;
	right:0;
	display:none;
}

#membership {
	margin:0;
	padding:0;
	display:flex;
	justify-content:center;
	flex-direction:row;
	width: 100%;
	max-width: 100%;
	height:auto;
	align-items:center;
	border:solid 1px;
	border-top:none;
}

#membershipContainer {
	margin:0;
	padding:0;
	display:flex;
	justify-content:center;
	flex-direction:column;
	width: calc( 50% - 2px );
	max-width:100%;
	height:1000px;
	align-items:center;
	border:none;
}

#membershipContainer2 {
	margin:0;
	padding:0;
	display:flex;
	justify-content:center;
	flex-direction:column;
	width: calc( 50% - 2px );
	max-width:100%;
	height:1000px;
	align-items:center;
	border:none;
	border-left:solid 1px;
}

.containerInput {
	width:200px;
	text-align:center;
	max-width:100%;
	margin:10px 0;
}

.submitButton {
	border: solid 1px rgba(0,0,0,1);
	padding:20px 0;
	font-size:30px;
	width:200px;
	margin:10px 0;
	text-align:center;
	font-weight:bold;
	color:rgba(0, 0, 0,1);
	cursor:pointer;
}

#filler {
	opacity: 0.25; 
	background: #000000; 
	width: 100vw;
	height: 100vh; 
	max-width: 100vw;
	max-height: 100vh; 
	z-index: 10;
	position: fixed;
	bottom: 0;
	left: 0;
	display:none;
}

#bubble3 {
	opacity: 1; 
	background: #fff; 
	width: 1000px;
	height: 500px;
	z-index: 11;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display:none;
	max-width: 95%;
	max-height: 90%;
	font-size:25px;
	border-radius:20px;
	border: solid 1px;
	word-wrap: break-word;
	overflow-y:scroll;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

#bubble2 {
	opacity: 1; 
	background: #fff; 
	width: 1000px;
	height: 500px;
	z-index: 11;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display:none;
	max-width: 95%;
	max-height: 90%;
	font-size:25px;
	border-radius:20px;
	border: solid 1px;
	word-wrap: break-word;
	overflow-y:scroll;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

#bubble {
	opacity: 1; 
	background: #fff; 
	width: 1000px;
	height: 500px;
	z-index: 11;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display:none;
	max-width: 95%;
	max-height: 90%;
	font-size:25px;
	border-radius:20px;
	border: solid 1px;
	word-wrap: break-word;
	overflow-y:scroll;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

#content {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: auto;
	max-height: calc( 100% - 40px );
	width:auto;
	max-width:100%;
	overflow-y:scroll;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding:20px 0;
}

#ex {
	position: sticky;
	top: 0;
	right: 15px;
	float: right;
	font-size:50px;
	cursor:pointer;
	border:none;
	z-index:100;
}

#ex2 {
	position: sticky;
	top: 0;
	right: 15px;
	float: right;
	font-size:50px;
	cursor:pointer;
	border:none;
	z-index:100;
}

#ex3 {
	position: sticky;
	top: 0;
	right: 15px;
	float: right;
	font-size:50px;
	cursor:pointer;
	border:none;
	z-index:100;
}

.bubbleHeader {
	text-align:center;
	font-size:50px;
	font-weight:bold;
	text-decoration: underline;
	margin:0 0 10px 0;
	max-width:100%;
	width:auto;
	color:rgba(71, 126, 198,1);
}

.bubbleInfo {
	text-align:center;
	font-size:20px;
	margin:10px 0 0 0;
	border:none;
	max-width:100%;
	width:500px;
	color:rgba(0,0,0,1);
}

#forgot {
	text-align:center;
	font-size:20px;
	padding:10px 0;
	border:none;
	max-width:100%;
	width:100%;
	height:auto;
	color:rgba(0,0,0,1);
}

#footer {
	padding:20px 0;
	font-weight:bold;
	width:100%;
	max-width:100%;
	color:rgba(71, 126, 198,1);
	text-align:center;
}

#resetPasswordContainer {
	margin:0;
	padding:0;
	display:flex;
	justify-content:center;
	flex-direction:column;
	width: 100%;
	max-width: 100%;
	height:auto;
	align-items:center;
	border:none;
}

@media only screen and (min-width:1921px) {
	body {
		margin:0;
		padding:0;
		display:flex;
		justify-content:center;
		flex-direction:column;
		width:100%;
		max-width:100%;
		min-height:100vh;
		align-items:center;
		border:none;
		font-family:arial;
	}

	#banner {
		background-image: url("/banner");
		width: calc( 100% - 1px );
		max-width:100%;
		height: calc( 945px - 2px );
		background-repeat: no-repeat;
		background-size: 100% 100%;
		margin:0;
		padding:0;
		cursor:pointer;
		border:solid 1px;
	}
	#wholePage {
		margin:0;
		padding:0;
		display:flex;
		justify-content:center;
		align-items:center;
		flex-direction:column;
		max-width:1920px;
		height:auto;
		align-items:center;
	}
	
	#membership {
		margin:0;
		padding:0;
		display:flex;
		justify-content:center;
		flex-direction:row;
		width: 100%;
		max-width: 100%;
		height:auto;
		align-items:center;
		border:solid 1px;
		border-top:none;
	}

	#membershipContainer {
		margin:0;
		padding:0;
		display:flex;
		justify-content:center;
		flex-direction:column;
		width: calc( 50% );
		max-width:100%;
		height:1000px;
		align-items:center;
		border:none;
	}

	#membershipContainer2 {
		margin:0;
		padding:0;
		display:flex;
		justify-content:center;
		flex-direction:column;
		width: 50%;
		max-width:100%;
		height:1000px;
		align-items:center;
		border:none;
		border-left:solid 1px;
	}

	.containerInput {
		width:200px;
		text-align:center;
		max-width:100%;
	}

	.submitButton {
		border: solid 1px rgba(0,0,0,1);
		padding:20px 0;
		font-size:30px;
		width:200px;
		margin:10px 0;
		text-align:center;
		font-weight:bold;
		color:rgba(0, 0, 0,1);
		cursor:pointer;
	}
}
@media only screen and (max-width:600px) {
	#wholePage {
		margin:0;
		padding:0;
		display:flex;
		justify-content:center;
		flex-direction:column;
		width: calc( 100% - 2px );
		max-width: calc( 100% - 2px );
		height:auto;
		align-items:center;
		border:none;
		flex-wrap:nowrap;		
	}
	#banner {
		background-image: url("/bannerPhone");
		width: 100%;
		max-width:100%;
		height: calc( 945px - 2px );
		background-repeat: no-repeat;
		background-size: 100% 100%;
		margin:0;
		padding:0;
		cursor:pointer;
		border:solid 1px;
	}
	#membership {
		margin:0;
		padding:0;
		display:flex;
		justify-content:center;
		flex-direction:column;
		width: 100%;
		max-width: 100%;
		height:auto;
		align-items:center;
		border:solid 1px;
		flex-wrap:wrap;
		border-top:none;
	}
	#membershipContainer {
		margin:0;
		padding:0;
		display:flex;
		justify-content:center;
		flex-direction:column;
		width: 100%;
		max-width:100%;
		height:1000px;
		align-items:center;
		border:none;
	}

	#membershipContainer2 {
		margin:0;
		padding:0;
		display:flex;
		justify-content:center;
		flex-direction:column;
		width: 100%;
		max-width:100%;
		height:1000px;
		align-items:center;
		border:none;
		border-top:solid 1px;
		
	}
	
}