/* 

Table of Contents
=========================
1.0 GLOBAL
2.0 HEADER
3.0 FOOTER
4.0 REG
5.0 LOOKUP
=========================

===========
1.0 GLOBAL
===========
*/
body, html {
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
}

body {
    background: #222;
    color: #fff;
    font-family: 'Raleway', sans-serif;
    letter-spacing: 1px;
}

.container {
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 920px;
    padding: 20px;
    width: 100%;
}

a {
    color: #f44a11;
    text-decoration: none;
    border-bottom: solid 1px #f44a11;
    margin-right: 2px;
    transition: all .3s;
    padding: 1px 2px 3px;
}

a:hover {
    background: #f44a11;
    color: #fff;
}

p {
    line-height: 1.6em;
}

/*
===========
2.0 HEADER
===========
*/

header {
    background: #000;
    height: 100px;
}

.logo {
    display: block;
    height: 80px;
    margin: 0 auto;
    padding-top: 10px;
}

/*
===========
3.0 FOOTER
===========
*/

footer {
    clear: both;
    padding-top: 10px;
}

footer .container {
    border-top: solid 1px #999;
    padding-top: 30px;
}

footer p {
    margin: 0;
    text-align: center;
    padding-bottom: 20px;
}

/*
===========
4.0 REG 
===========
*/

.notice {
    font-size: 20px;
    text-align: center;    
}

form {
}

form h2 {
    clear: both;
    padding-top: 20px;
}

.field {
    float: left;
    overflow: hidden;
    padding-bottom: 20px;
    width: 50%;
}

.field-half {
    width: 25%;
}

.field-third {
    width: 16.6666%;
}

.field-twothird {
    width: 33.3333%;
}

.field label {
    display: block;
    padding-bottom: 5px;
    width: 95%;
}

.field label span {
    color: red;
    display: inline-block;
    font-size: 1.5em;
    padding-left: 5px;
    position: relative;
        top: 5px;
}

.field input[type="text"],
.field input[type="email"],
.field select {
    border: none;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 9px 10px;
    width: 95%;
}

.field select {
    padding-bottom: 11px;
}

.field select[name="exp_m"],
.field select[name="exp_y"] {
    float: left;
    width: 45%;
}

[name="exp_m"] {
    margin-right: 5%;
}

input[type="submit"] {
    background: #f44a11;
    border: none;
    border-radius: 4px;
    box-sizing: border-box;
    clear: both;
    color: #fff;
    float: right;
    padding: 7px 10px;
    margin-right: 1%;
    margin-bottom: 20px;
}
input[type="reset"] {
    background: #f44a11;
    border: none;
    border-radius: 4px;
    box-sizing: border-box;
    clear: both;
    color: #fff;
    float: right;
    padding: 7px 10px;
    margin-right: 1%;
    margin-bottom: 20px;
}


.total {
    clear: both;
    padding-right: 1%;
    text-align: right;
}

.field input[type="text"].err,
.field input[type="email"].err,
.field select.err {
    border: solid 2px #721c24;
    color: #721c24;
    background-color: #f8d7da;
}

.error {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: .25rem;
    clear: both;
    color: #721c24;
    display: none;
    padding: .75rem 1.25rem;
    margin-bottom: 0;
}

@media(max-width:600px) {
    .field {
        float: none;
        width: 100%;
    }

    .field select,
    .field input[type="text"] {
        width: 100%;
    }

    .field select[name="exp_m"],
    .field select[name="exp_y"] {
        width: 47.5%;
    }

    .total {
        padding-right: 0;
    }

    input[type="submit"] {
        margin-right: 0;
    }
}

/*
===========
5.0 LOOKUP
===========
*/

.lookup .field [type="email"] {
    margin-right: 1%;
    width: 71%;
}

.lookup .field [type="submit"] {
    margin-top: -1px;
    padding: 10px 2px;
    width: 25%;
}