div.backdrop {
	position:fixed;
	left:0px;
	top:0px;
	bottom:0px;
	right:0px;
	background-color: #c8e3fa;
	z-index:-1;
}

div.loginScreen {
	display:flex;
	border:1px solid #aaaaaa;
	margin:5% auto;
	max-width:888px;
	height: 550px;
	box-shadow: 10px 10px 20px rgba(0,0,0,0.3);
	border-radius: 10px;
}

div.login-left {
	flex:50%;
	/* border:1px solid red; */
	padding:70px;
	background-color: #c8eef0;
	border-radius: 10px 0px 0px 10px;
	max-width:310px;
	width:100%;
	line-height:1.6em;
}

div.login-right {
	position:relative;
	background-color: white;;
	flex:50%;
	max-width:440px;
	width:100%;
	padding-top:30px;
	border-radius: 0px 10px 10px 0px;
	line-height:1.6em;
}

.login-form .logo {
	height:60px;
	text-align: right;
}

.login-form .logo img {
	height:60px;
}

.login-form {
	position:absolute;
	left:70px;
	max-width:300px;
	width:100%;
	/* border:1px solid blue; */
	overflow:hidden;
}

.login-form h1 {
	padding-bottom:15px;
	font-size:1.5em;
}

.login-form input[type=text],
.login-form input[type=password] {
	margin-top:5px;
	margin-bottom:20px;
	border:0px;
	border-bottom:1px solid black;
	font-size:1.2em;
	width:100%;
	box-sizing: border-box;
	padding:10px;
}

.login-form button.login {
	display: inline-block;
	margin: 20px 10px 20px 0px;
	width:120px;
	padding:10px;
	font-size:1.2em;
	font-weight: bold;
	border-radius: 4px;
	background-color: #00b0bd;
	color: white;
	border:1px solid #00b0bd;
	transition: all .05s ease-in-out;
	box-shadow:  0px 2px 6px 0px rgba(0,0,0,0.4);
}

.login-form  button.login.full {
	width:inherit;
}


.login-form button.login:hover {
	box-shadow:inset 0 0 0 99999px rgba(0,0,0,0.1), 2px 4px 12px 0px rgba(0,0,0,0.4);
}

.login-form button.login:active {
	/* padding:16px 14px 16px 18px;  */
	box-shadow: inset 0 0 0 99999px rgba(0,0,0,0.1), 0px 0px 0px 0px rgba(0,0,0,0.4);
	transform: translateY(1px);
}

#slider {
	margin-top:30px;
	white-space: nowrap;
	transition-duration: 600ms;
	height:250px;
}

#slider .notify {
	font-size:0.8em;
	color:#d93025;
	white-space: normal;
	line-height: 1.2em;
}

#panel1,
#panel2 {
	width:300px;
	display:inline-block;
	vertical-align: top;
}

.slideLeft {
	transform: translate(-100%);
}

div.registration .notify p {
	display: table-cell;
	font-weight: 700;
	color: #dd6868;
	vertical-align: middle;
	min-height: 50px;
	line-height: 1em;
	padding: 20px 5px 20px 30px;
}

div.registration #regbutton,
div.registration #password {
	display: block;
	box-sizing: border-box;
	padding:10px;
	font-size:1.2em;
	margin:20px auto;
	line-height: 1.2em;
	width:100%;
	max-width:300px;
	border:1px solid black;
	border-radius: 5px;
}

div.registration {
	margin:50px auto 0px;
	max-width:400px;
	border:1px solid #aaaaaa;
	border-radius: 10px;
	padding:20px;
	box-shadow: 10px 10px 20px rgba(0,0,0,0.3);
	background-color: white;
	line-height: 1.4em;
}


@media (max-width: 900px) {
	div.login-left {
		display:none;
	}
	div.registration,
	div.loginScreen {
		position: fixed;
		margin:0px;
		border-radius: 0px;
		max-width:none;
		top:0px;
		left:0px;
		right:0px;
		bottom:0px;
		box-shadow: 0px 0px 0px;
		height: auto;
	}
	div.login-right {
		width:auto;
		flex:auto;
		max-width: unset;
		border-radius: 0px;;
	}
	.login-form {
		position: initial;
		max-width:300px;
		margin:0 auto;
		padding:20px;
	}
}