/* ==========================================================================
   #RESET
   ========================================================================== */

/**
 * As well as using normalize.css, it is often advantageous to remove all
 * margins from certain elements.
 */
body,
h1, h2, h3, h4, h5, h6,
p, blockquote, pre,
dl, dd, ol, ul,
form, fieldset, legend,
figure,
table, th, td, caption,
hr {
    margin:  0;
    padding: 0;
}

/**
 * Indicate that certain elements are interactive.
 */
[role="button"],
input[type="submit"],
label,
select {
    cursor: pointer;
}


/* ==========================================================================
   #FONTS
   ========================================================================== */
@font-face {
    font-family: 'MarkOT-Bold';
    src: url('../fonts/MarkOT/MarkOT-Bold.eot');
    src: url('../fonts/MarkOT/MarkOT-Bold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/MarkOT/MarkOT-Bold.woff') format('woff'),
    url('./fonts/MarkOT/MarkOT-Bold.ttf') format('truetype'),
    url('../fonts/MarkOT/MarkOT-Bold.svg#182cf175efd8bc65c01ef837dc1198f2') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MarkOT';
    src: url('../fonts/MarkOT/MarkOT.eot');
    src: url('../fonts/MarkOT/MarkOT.eot?#iefix') format('embedded-opentype'),
    url('../fonts/MarkOT/MarkOT.woff') format('woff'),
    url('../fonts/MarkOT/MarkOT.ttf') format('truetype'),
    url('../fonts/MarkOT/MarkOT.svg#9663b9ebb1d626cf9aad77b2ee2866b5') format('svg');
    font-weight: normal;
    font-style: normal;
}




/* ==========================================================================
   #BOX-SIZING
   ========================================================================== */

/**
 * More sensible default box-sizing:
 * css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice
 */

html {
    box-sizing: border-box;
}

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




/**
 * High-, page-level styling.
 *
 * 1. Set the default `font-size` and `line-height` for the entire project,
 *    sourced from our default variables. The `font-size` is calculated to exist
 *    in ems, the `line-height` is calculated to exist unitlessly.
 * 2. Force scrollbars to always be visible to prevent awkward ‘jumps’ when
 *    navigating between pages that do/do not have enough content to produce
 *    scrollbars naturally.
 * 3. Ensure the page always fills at least the entire height of the viewport.
 * 4. Prevent certain mobile browsers from automatically zooming fonts.
 * 5. Fonts on OSX will look more consistent with other systems that do not
 *    render text using sub-pixel anti-aliasing (use with care!).
 */
html {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-size: 1em; /* [1] */
    line-height: 1.5; /* [1] */
    background-color: #F4F4F4;
    color: #525252;
    overflow-y: scroll; /* [2] */
    min-height: 100%; /* [3] */
    -webkit-text-size-adjust: 100%; /* [4] */
    -ms-text-size-adjust: 100%; /* [4] */
}




/* ==========================================================================
   #SELECTOR STYLING
   ========================================================================== */

body {
    font-family: MarkOT, Helvetica, Arial, sans-serif;
    font-weight: 400;
    margin: 0;
}

label,
input,
select {
    display: block;
}

label {
    color: #aaa;
    font-family: MarkOT-Bold, Helvetica, Arial, sans-serif;
    margin-bottom: .375rem; /* 6px */
}

input, select {
    font-size: 1rem;
    padding: .75rem; /* 12px */
    width: 100%;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    background-position: right 14px center;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2216%22%20height%3D%2210%22%20viewBox%3D%220%200%2016%2010%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ctitle%3ELine%3C%2Ftitle%3E%3Cpath%20stroke%3D%22%23979797%22%20stroke-width%3D%222%22%20d%3D%22M2%202l5.888%206L14%202%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20stroke-linecap%3D%22square%22%2F%3E%3C%2Fsvg%3E");
    border-radius: 0;
    border: 1px solid #fff;
    color: #525252;
    padding: 12px;
    font-family: MarkOT-Bold, Helvetica, Arial, sans-serif;
    font-size: 1rem;
}

input[type="text"],
input[type="password"] {
    background-color: #fff;
    border: 1px solid #fff;
}

input[type="text"]:focus,
input[type="password"]:focus {
    border: 1px solid #aaa;
    outline: none;
}

a {
    color: #5DA5E6;
    font-family: MarkOT-Bold, Helvetica, Arial, sans-serif;
    text-decoration: none;
}



/* ==========================================================================
   #SITE
   ========================================================================== */

.wrapper {
    max-width: 648px;
    margin: 0 auto;
    padding: 12px;
}

.site-header {
    margin-top: 1.5rem;
}

.site-title {
    font-size: 24px;
}

[role="alert"] {
    font-family: MarkOT-Bold, Helvetica, Arial, sans-serif;
}

.error {
    color: #D0021B;
}

.btn {
    background-color: #636363;
    border: 2px solid #636363;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-family: MarkOT-Bold, Helvetica, Arial, sans-serif;
    font-size: 1.25rem;
    height: auto;
    line-height: normal;
    padding-left: 2.5rem; /* 60px */
    padding-right: 2.5rem; /* 60px */
    padding-top: .75rem; /* 12px */
    padding-bottom: .75rem; /* 12px */
    vertical-align: middle;
    width: auto;
}

.btn:hover {
    background-color: #fff;
    border: 2px solid #636363;
    color: #636363;
}

.btn__light {
    background-color: #fff;
    color: #636363;
}

.btn__light:hover {
    background-color: #636363;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2210%22%20height%3D%2216%22%20viewBox%3D%220%200%2010%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ctitle%3ELine%3C%2Ftitle%3E%3Cpath%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%20d%3D%22M8%202L2%207.888%208%2014%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20stroke-linecap%3D%22square%22%2F%3E%3C%2Fsvg%3E");
    border: 2px solid #636363;
    color: #fff;
}

.btn__border-dark {
    border: 2px solid #636363;
}

.btn__back {
    background-position: left 40px center;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2210%22%20height%3D%2216%22%20viewBox%3D%220%200%2010%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ctitle%3ELine%3C%2Ftitle%3E%3Cpath%20stroke%3D%22%23525252%22%20stroke-width%3D%222%22%20d%3D%22M8%202L2%207.888%208%2014%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20stroke-linecap%3D%22square%22%2F%3E%3C%2Fsvg%3E");
    padding-left: 4.5rem;
}

.btn__submit {
    background-position: left 40px center;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Ctitle%3EGroup%3C%2Ftitle%3E%3Cdefs%3E%3Cpath%20id%3D%22a%22%20d%3D%22M10.034%200h9.938v20H10%22%2F%3E%3Cmask%20id%3D%22b%22%20x%3D%220%22%20y%3D%220%22%20width%3D%229.972%22%20height%3D%2220%22%20fill%3D%22%23fff%22%3E%3Cuse%20xlink%3Ahref%3D%22%23a%22%2F%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cuse%20stroke%3D%22%23FFF%22%20mask%3D%22url%28%23b%29%22%20stroke-width%3D%222%22%20xlink%3Ahref%3D%22%23a%22%2F%3E%3Cpath%20d%3D%22M0%206h7v8H0V6zm16.5%203.5L7%2019V0l9.5%209.5z%22%20fill%3D%22%23FFF%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    padding-left: 4.5rem;
}

.btn__submit:hover {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Ctitle%3EGroup%3C%2Ftitle%3E%3Cdefs%3E%3Cpath%20id%3D%22a%22%20d%3D%22M10.034%200h9.938v20H10%22%2F%3E%3Cmask%20id%3D%22b%22%20x%3D%220%22%20y%3D%220%22%20width%3D%229.972%22%20height%3D%2220%22%20fill%3D%22%23636363%22%3E%3Cuse%20xlink%3Ahref%3D%22%23a%22%2F%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cuse%20stroke%3D%22%23636363%22%20mask%3D%22url%28%23b%29%22%20stroke-width%3D%222%22%20xlink%3Ahref%3D%22%23a%22%2F%3E%3Cpath%20d%3D%22M0%206h7v8H0V6zm16.5%203.5L7%2019V0l9.5%209.5z%22%20fill%3D%22%23636363%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}



/* ==========================================================================
   #UTILITIES
   ========================================================================== */
.mb-tiny { margin-bottom: 6px !important; }
.mb-small { margin-bottom: 12px !important; }
.mb-normal { margin-bottom: 24px !important; }
.mb-large { margin-bottom: 48px !important; }

.ml-small { margin-left: 12px !important; }
.ml-normal { margin-left: 24px !important; }

.mt-large { margin-top: 48px !important; }