body {
	background-color: #fff
}

#wrapper {
	height: 100vh;
	overflow-x: hidden;
	background: linear-gradient(45deg, #57aee0, #044ba9);
}

#wrapper #login-form {
margin: 4% auto 2%;
    width: 29%;
    padding: 5em 4em;
    background: #fff;
    border-radius: 8px;position: relative;
}

#wrapper #login-form .wrapper-title {
	font-size: 4rem;
	margin-bottom: 1rem
}

#wrapper #login-form .wrapper-subtitle {
	color: #a8aebb;
	font-size: 1.7rem;
	line-height: 2.5rem
}

#wrapper #login-form .wrapper-logo {
	margin-bottom: 4rem;text-align: center;
}

#wrapper #login-form .wrapper-logo img {
	width: 10rem;
}

input.logintype{width: 25px;height: 25px}
.type{display: inline-flex;margin: 0 auto;justify-content: center;}
input.logintype.stdnt {margin-left: 14%;}

.labelname{padding-left: 12px;font-size: 20px;font-weight: 600;color: #000;}


@media screen and (max-width:768px) {
	#wrapper {
	height: 100vh;
	overflow-x: hidden;
	background: #fff;border: 4px solid #afcb1f;
}
	#wrapper #login-form {
		margin: 4% auto 2%;
		padding: 5rem 9rem;
		width: 100%;
		
	}
}
@media screen and (max-width: 500px){
#wrapper #login-form {
		margin: 4% auto 2%;
		padding: 5rem 2rem;
		width: 100%;
		
	}
}


@media screen and (min-width:768px) and (max-width: 1000px){
	#wrapper #login-form {
		padding: 3rem 5rem;
		width: 50%;
	}
}

@media screen and (min-width:1000px) and (max-width: 1500px){
	#wrapper #login-form {
		padding: 3rem 5rem;
		width: 40%;
	}
}

.fields{
	display:none;
	padding:10px;
}