/*
body.login {
	display: flex;
}*/

body.login .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')
}

body.login .login-content {
    margin-left: 50%;
    width: 50%;
    height: 100%;
    padding: 2rem 2rem 2rem 4rem;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

body.login .flag-select {
	align-self: flex-end;
    float: right;
    z-index: 1;
}

body.login h1 {
	margin-bottom: 1rem;
}

body.login .form-content {
    margin-top: 4rem;
    border: none;
}
body.login fieldset {
    border: none;
}

body.login .cta-container {
    /*margin-top: 2rem;*/
    margin-top: 1rem;
}

body.login input[type="text"],
body.login input[type="password"] {
	margin-bottom: 2rem;
}

/* Footer *******************/

body.login footer {
	margin-top: 6rem;
	display: flex;
	align-items: flex-end;
}

body.login footer ul {
	list-style-type: none;
	width: 50%;
}

body.login 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) {
	
	body.login .login-background {
		width: 40%;
	}

	body.login .login-content {
		width: 60%;
		margin-left: 40%;
	}
}

@media (max-width: 1024px) and (min-width: 481px) {
	
	body.login .login-background {
		width: 25%;
	}
	
	body.login .login-content {
		width: 75%;
		margin-left: 25%;
	}
}

@media (max-width: 768px) {
	
	body.login .login-content {
		padding: 2rem;
		position: relative;
	}
	
	body.login .flag-select {
		position: absolute;
		top: 2rem;
		right: 2rem;
		z-index: 1;
	}
	
	body.login fieldset {
		display: flex;
		flex-wrap: wrap;
	}
	
	body.login .cta-container {
		text-align: center;
		order: 1;
	}
	
	body.login .forgotten-password {
		display: block;
		order: 2;
		width: 100%;
		margin-top: 1rem;
		text-align: center;
	}
	
	body.login footer {
		flex-wrap: wrap;
		margin-top: 4rem;
	}
	
	body.login footer .footer-options {
		width: 100%;
		text-align: center;
	}
}

@media (max-width: 480px) {
	
	body.login .login-background {
		display: none;
	}

	body.login .login-content {
		width: 100%;
		margin-left: 0;
		padding: 2rem;
	}
}

.flag-select li img {
    width: 30px;
}
.flag-select .placeholder img {
    padding-top: 0;
}