
.loginBody {
	display: flex;
}

.loginBody .login-background {
    width: 50%;
    position: fixed;
    top: 0;
    left: 0;
    right: 50%;
    bottom: 0;
    background-position: center center;
    background-size: cover;
    background-image: url('../../img/login-background.jpg');
}

.loginBody .login-content {
	margin-left: 50%;
	width: 50%;
	height: 100%;
	padding: 2rem 2rem 2rem 4rem;
	display: flex;
	flex-direction: column;
}

.loginBody .flag-select {
	align-self: flex-end;
}

.loginBody h1 {
	margin-bottom: 1rem;
}

.loginBody form {
	margin-top: 4rem;
}

.loginBody .cta-container {
    /*margin-top: 2rem;*/
    margin-top: 1rem;
}

.loginBody input[type="text"],
.loginBody input[type="password"] {
	margin-bottom: 2rem;
}

/* Footer *******************/

.loginBody footer {
	margin-top: 6rem;
	display: flex;
	align-items: flex-end;
}

.loginBody footer ul {
	list-style-type: none;
	width: 50%;
}

.loginBody footer .app-version {
	display: block;
	width: 50%;
	text-align: right;
	padding-left: 1rem;
	box-sizing: border-box;
}

/* Responsive *******************/

@media (max-width: 1280px) and (min-width: 1025px) {
	
	.loginBody .login-background {
		width: 40%;
	}

	.loginBody .login-content {
		width: 60%;
		margin-left: 40%;
	}
}

@media (max-width: 1024px) and (min-width: 481px) {
	
	.loginBody .login-background {
		width: 25%;
	}
	
	.loginBody .login-content {
		width: 75%;
		margin-left: 25%;
	}
}

@media (max-width: 768px) {
	
	.loginBody .login-content {
		padding: 2rem;
		position: relative;
	}
	
	.loginBody .flag-select {
		position: absolute;
		top: 2rem;
		right: 2rem;
		z-index: 1;
	}
	
	.loginBody form {
		display: flex;
		flex-wrap: wrap;
	}
	
	.loginBody .cta-container {
		text-align: center;
		order: 1;
	}
	
	.loginBody .forgotten-password {
		display: block;
		order: 2;
		width: 100%;
		margin-top: 1rem;
		text-align: center;
	}
	
	.loginBody footer {
		flex-wrap: wrap;
		margin-top: 4rem;
	}
	
	.loginBody footer .footer-options {
		width: 100%;
		text-align: center;
	}
}

@media (max-width: 480px) {
	
	.loginBody .login-background {
		display: none;
	}

	.loginBody .login-content {
		width: 100%;
		margin-left: 0;
		padding: 2rem;
	}
}