* {
vertical-align: baseline;
border: 0 none;
outline: 0;
padding: 0;
margin: 0;
}
body {
font-family: "Montserrat", sans-serif;
font-size: 0.9em;
color: #202020;
background: #fff;
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
}


/* Globals
....................................................................... */
h1 {
font-family: "Lora", serif;
color: #fff;
font-size: 3.5em;
font-weight: 300;
margin: 0 0 20px 0;
}
h2 {
font-family: "Lora", serif;
font-size: 2em;
font-weight: 400;
margin: 0 0 20px 0;
}
h3 {
font-family: "Lora", serif;
font-size: 2em;
font-weight: 400;
text-transform: lowercase;
margin: 0 0 20px 0;
}
h3 strong {
display: inline-block;
margin: 0 0 0 -5px;
}
p {
font-size: 1.1em;
line-height: 1.5em;
margin: 0 0 20px 0;
}
p.small {
opacity: 0.65;
font-size: 0.75em;
padding: 10px 0 0 0;
margin: 0;
}
a {
color: #202020;
}
a:hover {
}
strong {
font-weight: 700;
}
img {
max-width: 100%;
height: auto !important;
}
img, img a {
border: 0;
text-decoration: none;
}
.fa {
display: inline-block;
font-family: FontAwesome;
font-feature-settings: normal;
font-kerning: auto;
font-language-override: normal;
font-size: inherit;
font-size-adjust: none;
font-stretch: normal;
font-style: normal;
font-synthesis: weight style;
font-variant: normal;
font-weight: normal;
line-height: 1;
text-rendering: auto;
}


/* Forms
....................................................................... */
form {
padding: 0;
margin: 0;
}
label {
position: absolute;
left: -9999px;
top: -9999px;
}
input {
display: block;
color: #202020;
width: 100%;
font-size: 1.1em;
font-weight: normal;
font-family: "Montserrat", sans-serif;
background: #fff;
border: 1px solid #ddd;
box-shadow: inset 2px 2px 2px rgba(0,0,0,0.05);
border-radius: 3px;
padding: 20px 10px;
margin: 0 5px 20px 0;
box-sizing: border-box;
}
input:focus {
color: #202020;
border-color: #aaa;
box-shadow: 0 0 4px rgba(255,255,255,0.75);
}
::-webkit-input-placeholder {
color: #666;
opacity: 1;
}
:-moz-placeholder { /* Firefox 18- */
color: #666;
opacity: 1;
}
::-moz-placeholder {  /* Firefox 19+ */
color: #666;
opacity: 1;
}
:-ms-input-placeholder {
color: #666;
opacity: 1;
}
button,
input.submit, 
input[type=submit] {
width: 100%;
display: block;
text-decoration: none;
font-family: "Montserrat", sans-serif;
font-size: 1.25em;
font-weight: 600;
line-height: 1.2em;
text-shadow: -1px -1px 1px rgba(0,0,0,0.2);
color: #fff;
background: #202020;
border-radius: 3px;
border: 0;
padding: 20px 15px;
margin: 5px 0 20px 0;
box-shadow: 0 0 5px rgba(0,0,0,0);
transition: all 0.3s;
-webkit-appearance: none;
cursor: pointer;
}
button:hover,
input.submit:hover, 
input[type=submit]:hover,
button:focus,
input.submit:focus, 
input[type=submit]:focus {
color: #fff;
box-shadow: 0 0 5px rgba(0,0,0,0.75);
}


/* Layout
....................................................................... */
.login {
position: relative;
background: #fff;
}
.promo {
position: relative;
color: #fff;
background: #202020;
background: linear-gradient(135deg,rgba(32, 32, 32, 1) 50%, rgba(231, 60, 126, 1) 67%, rgba(238, 119, 82, 1) 85%);
background-size: 400% 400%;
animation: gradient 30s ease infinite;
}
@keyframes gradient {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}
p.forgot {
	font-size: 0.9em;
}
@media screen and (min-width: 1023px) {
	.container {
	display: flex;
	}
	.promo {
	display: flex;
	height: 100vh;
	width: 40%;
	min-height: 500px;
	}
	.login {
	display: flex;
	height: 100vh;
	width: 60%;
	min-height: 500px;
	}
}


/* Promo section
....................................................................... */
.promo_box {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 50px;
margin: auto;
}
.promo_box figure {
width: 105px;
height: 105px;
border-radius: 50%;
overflow: hidden;
margin: 0 0 20px 0;
}


/* Login section
....................................................................... */
.login_box {
width: 100%;
max-width: 600px;
box-sizing: border-box;
padding: 50px;
margin: auto;
}
.login_box p.error {
color: #F50C65;
font-size: 1.1em;
font-weight: 600;
}
.login_box p:last-of-type:not(.error) {
margin: 0;
}
.login_box .form_row {
margin: 0 0 20px 0;
}