html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn,
em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header,
hgroup, menu, section, summary, time, mark, audio, video {
margin:0; padding:0; border:0; outline:0; font-size:100%;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display:block;}
input, button, a:focus {outline: none;}
input {border: 0; margin: 0; padding: 0; outline: 0; font-family: 'Montserrat', sans-serif; font-weight: 400;}
.box {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

::-webkit-input-placeholder {color: #555;}
     :-ms-input-placeholder {color: #555;}
         ::-moz-placeholder {color: #555; opacity: 1;}
          :-moz-placeholder {color: #555; opacity: 1;}

html, body  {height: 100%; min-height: 750px; min-width: 320px;}
body {position: relative; font-family: 'Montserrat', sans-serif; font-weight: 400; background-color: #94d3eb;}

.hide, .hidden {display: none;}
.alert {position: absolute; bottom: 105%; left: 0; font: bold 11px/10px Arial, sans-serif; color: #f00;}
.code-result {position: absolute; top: 45px; left: 100px; font: bold 12px Arial, sans-serif;}
.bad-code {color: #f00;}
.good-code {color: #468847;}

.header {height: 125px; background-color: #1d2755;}
.header .centered {position: relative; max-width: 1280px; margin: 0 auto;}
.logo {float: left; margin: 30px 0 0 30px;}
.manager-login {float: right; padding-top: 40px; margin-right: 280px;}
.manager-login-label {float: left; margin-right: 12px; font-size: 14px; line-height: 30px; color: #fff;}
.login-form {float: left; position: relative; width: 330px; padding-right: 75px;}
.input-text {float: left; width: 49%; height: 30px; padding: 0 10px; font-size: 12px; border-radius: 0; color: #ccc;}
.username {margin-right: 2%;}
.login-btn {position: absolute; right: 0; top: 0; width: 70px; height: 30px; font-size: 14px; text-align: center; line-height: 30px; color: #fff; background-color: #eb1c2d; cursor: pointer;}
.login-btn:hover {opacity: .9;}

.keep-block {clear: left; float: left; min-width: 120px; margin: 5px 2% 0 0;}
.keep-block label, .forgot {float: right; font-size: 9px; line-height: 16px; text-transform: uppercase;}
.keep-block label {float: left; cursor: pointer; color: #fff;}
.keep-block .keep-signed-in  {float: left; height: 14px; width: 14px; padding: 0; margin: 0 5px 0 0; background-color: #fff; border: none;}
.forgot {margin-top: 5px; color: #eb1c2d;}
.forgot:hover {text-decoration: none;}

.banner {display: none; width: 100%;}
.banner-background {height: 360px; background: url('https://hirevue-landing.s3.amazonaws.com/tmxfinance/corporate/banner.jpg') no-repeat center top; background-size: cover;}

.content {max-width: 720px; margin: 0 auto; padding-bottom: 100px;}
.content-title {font-size: 24px; padding: 30px 0 15px; color: #00529b;}
.candidate-title {padding: 10px 75px 5px; font-size: 24px; border-bottom:  1px solid #686f8e; color: #fff; background-color: #1d2755;}
.candidate-content {padding: 30px 75px 60px; background: #fff;}
.enter-code {font-size: 12px; padding-bottom: 15px; color: #00529b;}
.candidate-landing-form {position: relative;  width: 100%; padding: 0 120px 0 100px;}
.interview-code-label {position: absolute; top: 0; left: 0; font-size: 12px; line-height: 40px; color: #333;}
.interview-code {width: 100%; height: 40px; padding: 0 10px; font-size: 16px; border: 1px solid #87888c; border-radius: 0; color: #111;}

.btn-t {display: block; position: absolute; top: 0; right: 0; width: 110px; height: 40px; font-size: 18px; line-height: 40px; text-align: center; cursor: pointer; color: #fff; background-color: #eb1c2d;}
.btn-t:hover {opacity: .9;}
.btn-t.disabled  {cursor: default; opacity: 1;}

.banner-background {display: none;}
.desktop-banner {display: block;}

@media screen and  (max-width: 1280px) {
    .manager-login {margin-right: 30px;}
    
}

@media screen and (max-width: 800px) {
    html, body {min-height: auto;}
    .alert {position: static; clear: both; font-size: 11px; padding-top: 5px;}
    .header {height: auto; padding-bottom: 15px;}
    .logo {float: none; display: block; margin: 0 auto; padding-top: 30px;}
    .login-form:after, .candidate-landing-form:after {content: ""; display: block; height: 0; clear: both;}
    .header .centered {width: 85%; max-width: 500px;}

    .desktop-banner {display: none;}
    .mobile-banner {display: block;}

    .manager-login {float: none; clear: left; width: 80%; margin: 0; padding: 25px 0 0 20%;}
    .manager-login-label {float: none; margin: 0 0 5px; line-height: 1;}
    .input-text {float: none; width: 100%; margin: 2px 0 0;}
    .login-form {float: none; width: 100%; padding-right: 75px;}
    .login-btn {top: 34px;}
    .forgot {clear: left; float: left; text-indent: 20px; margin-top: 0;}

    .content {width: 85%; max-width: 720px;}
    .candidate-title, .candidate-content {padding-left: 30px; padding-right: 30px;}
    .candidate-content {padding-bottom: 10px;}
    .candidate-landing-form {padding-right: 0;}
    .btn-t {position: static; float: right; margin-top: 10px;}
}

@media screen and (max-width: 500px) {
    .code-result {left: 85px; top: 35px;}
    .content-title {font-size: 22px; padding-top: 50px;}
    .candidate-title, .candidate-content {padding-left: 20px; padding-right: 20px;}
    .candidate-title {font-size: 20px;}
    .enter-code, .interview-code-label {font-size: 10px;}
    .enter-code {padding-bottom: 8px;}
    .candidate-landing-form {padding-left: 85px;}
    .interview-code-label {line-height: 30px;}
    .interview-code {height: 30px; font-size: 13px;}
    .btn-t {width: 80px; height: 30px; margin-top: 5px; font-size: 16px; line-height: 30px;}
}


@media screen and (max-width: 400px) {
    .code-result {font-size: 10px;}
    .input-text {font-size: 10px; padding: 0 12px;}
    .login-btn {font-size: 12px;} 
}