/* ------------------------------------------------------------ *\
	Reset
\* ------------------------------------------------------------ */

* { padding: 0; margin: 0; outline: 0; box-sizing: border-box; }

*:before, 
*:after { box-sizing: border-box; }

article,
aside,
figcaption,
figure,
footer,
header,
main,
nav,
section { display: block; }

html,
body { height: 100%; font-family: 'EJBook';}

html { overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; }

body { font-smoothing: antialiased; }

img { border: 0; vertical-align: middle; }
strong { font-weight: bold; }
small { font-size: 80%; }

button,
input,
select,
textarea { font-family: inherit; font-size: inherit; color: inherit; font-smoothing: antialiased; }

button,
input[type="button"],
input[type="reset"],
input[type="submit"] { cursor: pointer; }

button::-moz-focus-inner,
input::-moz-focus-inner { padding: 0; border: 0; }

button { overflow: visible; }
textarea { overflow: auto; resize: none; }

table { border-collapse: collapse; border-spacing: 0; }
th,
td { padding: 0; }

/* ------------------------------------------------------------ *\
	Base
\* ------------------------------------------------------------ */

body { background: #292929; font-family: 'AG Book Rounded', sans-serif; font-size: 16px; line-height: 1.38; color: #333; }

a { color: #333; text-decoration: none; }
a:hover { color: #333; }

h1 {}
h2 {}
h3 {}
h4 {}
h5 {}
h6 {}

/* ------------------------------------------------------------ *\
	Helpers
\* ------------------------------------------------------------ */

/*  Clear  */
.main:after,
.clear:after { content: ''; line-height: 0; display: table; clear: both; }


/*  Notext  */
.notext { font-size: 0; line-height: 0; text-indent: -4000px; }

/*  columns  */

.col { float: left; }
.col-size1 { width: 61.1%; }
.col-size2 { width: 38.7%; position: relative; }
.col-size2:before { content:''; position: absolute; top: 10px; bottom: 0; left: 0; background-color: #1c1c1c; width: 1px; }

/* ------------------------------------------------------------ *\
	Wrapper
\* ------------------------------------------------------------ */

.wrapper { background-color: #292929; padding: 50px 0; }

/* ------------------------------------------------------------ *\
	Shell
\* ------------------------------------------------------------ */

.shell { max-width: 1195px; margin: auto; padding: 0 15px; }

/* ------------------------------------------------------------ *\
	Header
\* ------------------------------------------------------------ */

.header { padding-bottom: 97px; }

/* ------------------------------------------------------------ *\
	Forms Styling
\* ------------------------------------------------------------ */

.ico-x { background: url(images/ico-close.png) no-repeat 0 0; width: 11px; height: 11px; display: inline-block; vertical-align: middle; }

.form-label { display: none; }

.field { background-color: #232323; color: #999999; border: none; border-bottom: 1px solid #383838; margin-bottom: 37px; height: 42px; vertical-align: middle; padding: 5px 12px; width: 100%; font-weight: 300; font-size: 18px; border-radius: 0; 
-webkit-appearance: none; 
   -moz-appearance: none; 
        appearance: none; }

.field:focus { border-color: #4e7a74; }
.error .field { border-color: #d06444; }

.field::-webkit-input-placeholder { color: #5e5957; opacity: 1; }
.field::-moz-placeholder { color: #5e5957; opacity: 1; }
.field:-moz-placeholder { color: #5e5957; opacity: 1; }
.field:-ms-input-placeholder { color: #5e5957; opacity: 1; }

.form-btn { border-radius: 0; border: none;
-webkit-appearance: none; 
   -moz-appearance: none; 
        appearance: none; }

.error-state { color: #e76c48; font-size: 15px; display: none; }
.error-state.visible { display: block; }
.error-state i { vertical-align: middle; margin-right: 7px; margin-top: -2px; }
.error-state a { color: #e5e5e5; }
.error-state a:hover { color: #e76c48; }

/*  login-form/reset-password-form */

.reset-password-form { font-size: 18px; line-height: 1.33; color: #999999; }
.reset-password-form p { padding-bottom: 20px; padding-top: 20px; }

.reset-password-form,
.login-form { max-width: 380px; margin: 0 auto; }

.reset-password-form h3,
.login-form h3 { color: #e5e5e5; font-weight: normal; font-size: 28px; line-height: 1; padding-bottom: 13px;  }

.reset-password-form .form-head,
.login-form .form-head { padding-bottom: 30px; font-family: 'EJLight';}

.become-super-user {padding-bottom: 30px; font-family: 'EJHeadline';}

.reset-password-form .form-actions,
.login-form .form-actions { padding-top: 16px; padding-bottom: 35px; }

.reset-password-form .form-btn,
.login-form .form-btn { background-color: #39605D; color: #ccf2ff; font-size: 21px; line-height: 1; text-align: center; padding: 20px 10px; width: 100%; }

.reset-password-form .form-btn:hover,
.login-form .form-btn:hover { background-color: #36d2c6; }

.login-form .form-foot { font-size: 15px; color: #877757; line-height: 1.2; }
.login-form .form-foot a { color: inherit; display: inline-block; padding-right: 15px; }
.login-form .form-foot a:hover { color: #fff; }

/*  super-user-form  */

.super-user-form { color: #999999; font-size: 18px; line-height: 1.33; max-width: 380px; margin: 0 0 0 auto; }
.super-user-form p { padding-bottom: 20px; }
.super-user-form h2 { color: #e5e5e5; font-size: 43px; line-height: 1.1; padding-bottom: 24px; font-weight: normal; }
.super-user-form .form-btn { background-color: #1a1a1a; color: #877757; font-size: 16px; text-align: center; padding: 15px 10px; width: 100%; max-width: 275px; line-height: 1; }
.super-user-form .form-btn:hover { color: #fff; background-color: #3f3f3f; }

/* ------------------------------------------------------------ *\
	Logo
\* ------------------------------------------------------------ */

.logo { background: url(images/NW-Logo-Horizontal.png) no-repeat 0 0; width: 180px; height: 57px; display: block; font-size: 0; line-height: 0; text-indent: -4004px; }

.logo-analytics { background: url(images/grey-logo-analytics.png) no-repeat 0 0; width: 180px; height: 57px; display: block; font-size: 0; line-height: 0; text-indent: -4004px; }

@media(max-width: 1060px){
	.col { float: none; width: 100%; padding-bottom: 40px; }
	.col:before { display: none; }

	.super-user-form { margin: 0 auto; }
}

@media(max-width: 767px){
	.wrapper { padding: 25px 0; }
	.header { padding-bottom: 40px; }
}