:root{
    --slider-width: calc( 27 * var(--col) );
    --content-width: calc( 15 * var(--col) );
}

h1{
    background-color: transparent;
	width: 378px;
	height: 95px;
    margin: 0;
}

h2{
	margin: 5em 0 2em;
	font: 24px 'Nunito', sans-serif;
}

main{
    flex: 1;
    padding: 0;
}

header,
footer,
form > div{
    width: var(--content-width);
    margin: 0 auto;
}

header{
    background: none;
    padding: 0;
    height: 28vh;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-right: none;
}

form > div{
    position: relative;
    margin: auto;
}

form > div > div{
	margin-bottom: 26px;
}

form input[type=submit]{
    text-align: center;
	display: block;
	width: 100%;
	font: 14px 'Nunito', sans-serif;
	border: none;
	cursor: pointer;
}

form a{
	display: block;
	margin-top: 7px;
    margin-bottom: 3em;
	font: 14px 'Nunito', sans-serif;
	color: var(--blue);
	float: right;
	text-decoration: underline;
    text-decoration: none;
}

form .volver a{
    color: var(--white);
    padding: 0 0 0 1.5em;
    background: url('/assets/icons/arrow-left.svg') left center/auto 90% no-repeat;
}

form > div .error{
    position: absolute;
    top: -6em;
    left: 0;
    right: 0;
}

footer{
	color: var(--white);
	font: 14px 'Nunito', sans-serif;
    margin-bottom: 6em;
}

#login{
	display: flex;
	flex-direction: column;
    flex: 1;
}

#login div span{
    display: none;
}

#login .input{
    padding-left: 4em;
    background-position: 1.2em center;
    background-repeat: no-repeat;
    background-size: 1.5em auto; 
}

#login #usuario{
    background-image: url(/assets/icons/email.svg);
}

#login #clave{
    background-image: url(/assets/icons/pass.svg);
}

#slider{
	width: var(--slider-width);
    background: var(--bg, url('/assets/client/login.png') ) center center/cover no-repeat;
}

#slider:not(.static){
	background: center center no-repeat, center center no-repeat;
	background-size: cover, cover;
	transition: 0.5s background;
}

@media ( max-width: 90em ){
    header{ height: 20vh; }
    footer{ margin-bottom:  2em; }
}