/* ------------------------
+ Marketing Suite
+ Author : Marcus Briggs
+ © Viral Effect LTD
------------------------- */

* { font-family: 'Montserrat', sans-serif; 	font-size: 100%; text-rendering: optimizeLegibility;  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
h1,h2,h3,p{ margin:0; padding: 0; }
html, body { width: 100%; height: 100%;	margin:0; padding:0; }
html { background: white url('../images/login_background.jpg') center; }
input, button { border:none; transition: all 0.2s ease-in-out; }
input::placeholder { color:#b9b9b9; }
#outer-wrapper { position:relative; margin: 0 auto; padding:0; height: 100%; width: 460px; }
#inner-wrapper { position:absolute; width:100%; top:50%; } 
.inner-login { height:480px; margin-top:-240px; }
.inner-forgot { height:440px; margin-top:-220px; }
.container { float: left; width: 100%; }
header {float: left; width: 100%; padding: 0; }
header h1 { float: left; width: 100%; text-align: center; font-size: 0; }
header h1 img { width: 100%; max-width: 150px; }
.row { float: left; width: 100%; margin-bottom: 30px; }
.row.bottom { border-top: 1px solid #d5d4d4; padding-top: 16px; margin-bottom: 0; }
main { float: left; width: 100%; padding: 30px; background:white; }
main h1 { float: left; width: 100%; text-align: center; font-size: 24px; font-weight: 600; line-height: 1; color:black; padding: 0 0 16px 0; }
main h2 { float: left; width: 100%; text-align: center; font-size: 18px; font-weight: 400; line-height: 1; color:#6b7082; }
main h3 { float: left; width: 100%; text-align: center; font-size: 12px; font-weight: 400; line-height: 1; color:#2c375c; padding: 0 0 15px 0;   }
main p { float: left; width: 100%; text-align: center; font-size: 14px; padding: 0; color:#6b7082; }
main p a { color:#5d60ad; text-decoration:none; }
main .error { float: left; width: 100%; font-size: 13px; text-align:center; background: #d9534f; padding: 8px 12px; color: #ffe1e1; margin: 0 0 10px 0; border-radius: 5px; }
main .error p { color:white; font-size: 13px; }
main .success { float: left; width: 100%; font-size: 13px; text-align:center; background: #39ca60; padding: 8px 12px; color: #dcffdf; margin: 0 0 10px 0; border-radius: 5px; }
input[type="text"], input[type="password"] { float: left; width: 100%; margin: 0 0 16px 0; padding: 14px 20px; border-radius: 5px; border: 1px solid #C1C1C1; font-size:18px; color:#3A3A3A; }
input[type="text"]:focus, input[type="password"]:focus { border: 1px solid purple; outline: none; }
button { float: left; width: 100%; margin-top:16px; background:#5d60ad; font-size:18px; border-radius: 5px; cursor:pointer; }
button span { float: left; width: 100%; padding:14px 20px; color:white; }

@media (min-width: 100px) and (max-width: 780px) {
    #outer-wrapper { width: 100%; }
}