body {
	 font-family: officinasansmediumoscregular,sans-serif;
	 height: 100vh;
	 background: url("/images/tomorrow_2014_075203.jpg") 50% fixed;
	 background-size: cover;
	 margin: 0px;
    padding: 0px;
}
 @keyframes spinner {
	 0% {
		 transform: rotateZ(0deg);
	}
	 100% {
		 transform: rotateZ(359deg);
	}
}
 * {
	 box-sizing: border-box;
}
 .wrapper {
	 display: flex;
	 align-items: center;
	 flex-direction: column;
	 justify-content: center;
	 width: 100%;
	 min-height: 100%;
	 padding: 20px;
	 background: rgb(18 18 18 / 65%);
}
 .login {
	 border-radius: 2px 2px 5px 5px;
	 padding: 10px 20px 20px 20px;
	 /*width: 90%;*/
	 min-width: 340px;
	 background: #fff;
	 position: relative;
	 padding-bottom: 80px;
	 box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.3);
}
 .login.loading button {
	 max-height: 100%;
	 padding-top: 50px;
}
 .login.loading button .spinner {
	 opacity: 1;
	 top: 40%;
}
 .login.ok button {
	 background-color: #8bc34a;
}
 .login.ok button .spinner {
	 border-radius: 0;
	 border-top-color: transparent;
	 border-right-color: transparent;
	 height: 20px;
	 animation: none;
	 transform: rotateZ(-45deg);
}
 .login input {
	 display: block;
	 padding: 15px 10px;
	 margin-bottom: 10px;
	 width: 100%;
	 border: 1px solid #ddd;
	 transition: border-width 0.2s ease;
	 border-radius: 2px;
	 color: #ccc;
}
.agree { font-size: 0.8em; }
.login .checkbox { width: auto; margin: 5px 0px; }
 .login input + i.fa {
	 color: #fff;
	 font-size: 1em;
	 position: absolute;
	 margin-top: -47px;
	 opacity: 0;
	 left: 0;
	 transition: all 0.1s ease-in;
}
 .login input:focus {
	 outline: none;
	 color: #444;
	 border-color: rgba(17,22,27,.87);
	 border-left-width: 35px;
}
 .login input:focus + i.fa {
	 opacity: 1;
	 left: 30px;
	 transition: all 0.25s ease-out;
}
 .login a {
	 font-size: 0.8em;
	 color: rgba(17,22,27,.87);
	 text-decoration: none;

}
 .login .title {
	 color: #444;
	 font-size: 1.2em;
	 font-weight: bold;
	 margin: 10px 0 15px 0;
	 border-bottom: 1px solid #eee;
	 padding-bottom: 20px;
}
 .login button {
	 width: 100%;
	 height: 100%;
	 padding: 10px 10px;
	 background: rgba(17,22,27,.87);
	 color: #fff;
	 display: block;
	 border: none;
	 margin-top: 20px;
	 position: absolute;
	 left: 0;
	 bottom: 0;
	 max-height: 60px;
	 border: 0px solid rgba(0, 0, 0, 0.1);
	 border-radius: 0 0 2px 2px;
	 transform: rotateZ(0deg);
	 transition: all 0.1s ease-out;
	 border-bottom-width: 7px;
	 cursor: pointer;
	 text-transform: uppercase;
}

 .login button .spinner {
	 display: block;
	 width: 40px;
	 height: 40px;
	 position: absolute;
	 border: 4px solid #fff;
	 border-top-color: rgba(255, 255, 255, 0.3);
	 border-radius: 100%;
	 left: 50%;
	 top: 0;
	 opacity: 0;
	 margin-left: -20px;
	 margin-top: -20px;
	 animation: spinner 0.6s infinite linear;
	 transition: top 0.3s 0.3s ease, opacity 0.3s 0.3s ease, border-radius 0.3s ease;
	 box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
}
 .login:not(.loading) button:hover {
 	background: rgb(41 46 52 / 87%);
	 box-shadow: 0px 1px 3px rgba(17,22,27,.87);
}
 .login:not(.loading) button:focus {
	 border-bottom-width: 4px;
}
 footer {
	 display: block;
	 padding-top: 50px;
	 text-align: center;
	 color: #ddd;
	 font-weight: normal;
	 text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2);
	 font-size: 0.8em;
}
 footer a, footer a:link {
	 color: #fff;
	 text-decoration: none;
}