@charset "utf-8";
/* CSS Document */
@font-face{
	font-family:"roboto";
	src:url("../webfonts/Roboto-Regular-webfont.woff");
	
	
}
body {
	
	background-image: url("../img/loginimg.png");
	background-color: #ffffff;
	font-family: 'roboto';
	background-size: cover;
	background-repeat: n-repeat;
	background-attachment: fixed;
	background-position: left bottom;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	position: relative;
	overflow-y: hidden;
}
body::before {
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	content: "";
}
h4 {
	margin-top: 20%;
	color: #00198c;
	font-weight: normal;
	font-size: 40px;
	margin-bottom: 30px;
}
.opacitybox {
	position: relative;
	align-items: center;
	width: 100%;
	height: 100vh;
	display: flex;
}
.opacitybox img {
	width: auto;
	padding-bottom: 0px;
	position: fixed;
	top: 2%;
	width: 10%;
}
.loginbox {
	background: rgba(53, 36, 127, 0.30);
	border-radius: 20px;
	padding-top: 0px;
	padding-bottom: 20px;
	top: 0;
	box-shadow: 0px 2.83px 5px rgba(35, 31, 32, 0.75);
	position: relative;
	display: block;
	opacity: 1;
	border: 3px solid rgb(53,36,127);
}
.forgetpassword {
	background: rgba(53, 36, 127, 0.30);
	border-radius: 20px;
	padding-bottom: 20px;
	box-shadow: 0px 2.83px 5px rgba(35, 31, 32, 0.75);
	position: relative;
	display: none;
	border: 3px solid rgb(53,36,127);
}
h3 {
	color: #4f2a78;
	font-size: 35px;
	height: 80px;
	padding-top: 20px;
	margin-bottom: 20px;
	position: relative;
	border-bottom: 5px solid #fff;
	    
}


.input-group > .form-control::placeholder {
	padding-left: 10px;
	color: #fff;
}
input {
	margin-left: 39px;
}
.form-group {
	color: #1c252f;
}
.btn {
	margin-left: 45%;
	margin-right: auto;
	background-color: #42a5f5;
	border: none;
	margin-bottom: 30px;
}
.form-control {
	width: 90%;
	margin-left: 0px;
	background-color: transparent;
	border:2px solid #fff;
	color: #fff;
}
.form-control:focus{
	background-color: transparent;
	outline:#fff;
	color: #fff;
	box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.75);
}
.input-group span {
	padding: 10px;
	background: #fff;
	padding-bottom: 0px;
	padding-top: 8px;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}
.forgetpassword .btn {
	margin-left: 40%;
	margin-right: auto;
	border: none;
	margin-bottom: 30px;
}
label {
	color: #fff;
}
.btn-primary {
	background-color: #4f2a78;
	transition: all 0.5s ease;
}
.btn-primary:hover {
	background-color: rgb(79, 42, 120, 0.50);
	color: #fff;
}
.form-row {
	margin-bottom: -40px;
}
hr {
	margin-top: 10px;
}
a {
	color: #fff;
	transition: all 0.5s ease;
	font-size: 18px;
}
a:hover {
	text-decoration: none;
	color: #1c252f;
}
@media (min-width:320px) and (max-width:768px) {
	body {}
}
@media (min-width:576px) and (max-width:767px) {
	h4 {
		font-size: 36px;
	}
}
@media (min-width:320px) and (max-width:575px) {
	h4 {
		font-size: 26px;
	}
	.btn {
		margin-left: 40%;
	}
}
@media (width:360px) {
	.forgetpassword .btn {
		margin-left: 28%;
	}
}
@media (min-width:361px) and (max-width:575px) {
	.forgetpassword .btn {
		margin-left: 35%;
	}
	.btn {
		margin-left: 40%;
	}
}
@media (width:320px) {
	.btn {
		margin-left: 35%;
	}
	.forgetpassword .btn {
		margin-left: 25%;
	}
}
@media (width:535px) {
	.opacitybox img {
		width: 51%;
	}
}