/* For index.html */

body {
	background-image: url("../img/main_img1.jpg");
	background-size: cover;
	height: 100vh;
	background-position: center;
}

.landing-header {
	position: relative;
	width: 100%;
}

.landing-logo {
	position: absolute;
	margin: 5%;
	width: 400px;
}

.landing-logo img {
	width: 100%;
}

.landing-loginBtn {
	position: absolute;
	margin-left: 85%;
	margin-top: 6%;
	width: 10%;
	font-size: 1.2em;
	background-color: #b0bc80;
    color: #404040;
    text-align: center;
    padding: 1%;
    border-radius: 5% / 10%;
    cursor: pointer;
}

.landing-formgroup {
	position: absolute;
	top: 35%;
	left: 50%;
	width: 300px;
	height: 420px;
	text-align: center;
	background-color: rgba(255,255,255,0.5);
    color: #404040;

	transform:translate(-50%, -50%);
	-webkit-transform:translate(-50%, 0%);
	-moz-transform:translate(-50%, 0%);
	
}

.landing-formgroup [type='text'], .landing-formgroup [type='password']{
	width: 250px;
	height: 30px;
	margin: 10px 0px;
}

.landing-formgroup [type='submit'] {
	width: 200px;
	padding: 10px;
	background-color: #b0bc80;
	margin: 10px 0px 20px 0px;
	font-size: 1em;
	border-radius: 5% / 20%;
	cursor: pointer;
}

.close-x {
	text-align: right;
	padding-right: 20px;
}

.login-formgroup {
	position: absolute;
	top: 35%;
	left: 50%;
	width: 350px;
	height: 250px;
	text-align: center;
	background-color: rgba(255,255,255,0.5);
    color: #404040;

	transform:translate(-50%, -50%);
	-webkit-transform:translate(-50%, 0%);
	-moz-transform:translate(-50%, 0%);
}

.login-formgroup [type='text'], .login-formgroup [type='password']{
	width: 300px;
	height: 40px;
	font-size: 1em;
	margin: 10px 0px;
}

.login-formgroup [type='submit'] {
	width: 250px;
	padding: 10px;
	background-color: #b0bc80;
	margin: 10px 0px 20px 0px;
	font-size: 1em;
	border-radius: 5% / 25%;
	cursor: pointer;
}

.error {
	margin: 0px auto; 
	padding: 10px; 
	border: 1px solid #6b9139;; 
	color: #a94442; 
	background: #b0bc80; 
	/*border-radius: 5px; */
	text-align: left;
}

.logout-formgroup {
	position: absolute;
	top: 40%;
	left: 50%;
	width: 400px;
	height: 200px;
	text-align: center;
	background-color: rgba(255,255,255,0.5);
    color: #404040;

	transform:translate(-50%, -50%);
	-webkit-transform:translate(-50%, 0%);
	-moz-transform:translate(-50%, 0%);
}

.logout-formgroup p {
	font-size: 1.6em;
}

.logoutBtn {
	width: 200px;
	font-size: 1.2em;
	background-color: #b0bc80;
    color: #404040;
    text-align: center;
    margin-left: 100px;
    margin-top: 10px;
    padding: 5px 0px;
    cursor: pointer;
}

a:hover {
	color: gray;
}

@media (max-width:700px) {
	.landing-loginBtn {
		margin-left: 80%;
		width: 15%;
		font-size: 1em;
	}

	.landing-logo {
		width: 200px;
	}
}