/* ------------( custom fonts ) ----------- */
@font-face {
    font-family : 'Malleable Grotesque';
    src         : url('/fonts/MalleableGrotesque-SemiBold.eot');
    src         : url('/fonts/MalleableGrotesque-SemiBold.eot?#iefix') format('embedded-opentype'),
    url('/fonts/MalleableGrotesque-SemiBold.woff') format('woff'),
    url('/fonts/MalleableGrotesque-SemiBold.ttf') format('truetype');
    font-weight : 600;
    font-style  : normal;
}

/* ------------( general settings ) ----------- */
html {
    background-color  : #fafafa;
    background-image  : url('/images/parking_background.jpg');
    background-size   : cover;
    background-repeat : no-repeat;
}

body {
    color       : #FFF;
    margin      : 0;
    padding     : 0;
    font-family : "Lato", sans-serif;
    text-align  : center;
    font-size   : 14px;
}

html > body {
    font-size : 15px;
}

a {
    color           : #a9d40c;
    text-decoration : none;
    font-weight     : bold;
}

a:hover {
    color           : #FFFFFF;
    text-decoration : underline;
}

p {
    margin      : 0 0 1em 0;
    padding     : 0;
    line-height : 1.6em;
}

p.error {
    color            : #C80000;
    font-weight      : bold;
    width            : 400px;
    padding          : 15px 10px;
    background-color : #EDEDED;
    border           : dashed #aaa 1px;
}

p.message {
    color            : #666;
    width            : 400px;
    padding          : 15px 10px;
    background-color : #EDEDED;
    border           : dashed #aaa 1px;
}

h1 {
    font-family : "Malleable Grotesque", sans-serif;
    font-size   : 20px;
    font-weight : normal;
    color       : #a9d40c;
    padding     : 0;
    margin      : 0 0 1em 0;
    line-height : 1.5em;
}

h2 {
    font-family    : "Malleable Grotesque", sans-serif;
    font-size      : 27px;
    font-weight    : bold;
    color          : #a9d40c;
    padding        : 0;
    margin         : 0;
    line-height    : 1.3;
    letter-spacing : .7px;
}

h3 {
    font-family : "Malleable Grotesque", sans-serif;
    font-size   : 100%;
    font-weight : bold;
    color       : #a9d40c;
    padding     : 0;
    margin      : 0;
}

/* ------------( images ) ----------- */
img {
    display : block;
}

img.inline {
    display : inline;
}

img#header {
    border : 1px solid #000;
}

img#signature {
    border : none;
    float  : right;
}

/* ------------( box ) ----------- */
div#box {
    margin     : 0 auto;
    padding    : 0;
    text-align : left;
    margin-top : 100px;
}

/* Box logo */
div.box--logo {
    display  : block;
    position : relative;
}

div.box--logo a {
    width   : 250px;
    display : block;
}

div.box--logo a img {
    max-height : 250px;
    margin     : auto;
}

div#box_body {
    text-align   : left;
    width        : 475px;
    padding      : 0 30px;
    margin-left  : auto;
    margin-right : 0;
}

div#box_body .body--title {
    background    : rgba(0, 0, 0, .5);
    padding       : 15px 40px 15px 20px;
    max-width     : 350px;
    margin-bottom : 20px;
}

div#box_body .body--description {
    background : rgba(0, 0, 0, .5);
    padding    : 15px 20px 15px 20px;
    max-width  : 450px;
}

div#box_body .body--description .website-cta {
    font-family    : "Malleable Grotesque", sans-serif;
    font-size      : 25px;
    font-weight    : bold;
    color          : #a9d40c;
    line-height    : 1.3;
    letter-spacing : .7px;
    margin-top     : 30px;
    display        : block;
    position       : relative;
    text-align     : right;
    text-transform : uppercase;
}

div#box_body .body--description .website-cta:hover {
    color : #FFF;
}

@media (max-width : 800px) {
    html {
        background-image : none;
    }

    div#box {
        margin-top : 50px;
    }

    div.box--logo a {
        margin : 0 auto 20px auto;
    }

    div#box_body {
        margin : 0 auto;
    }

    div#box_body .body--title {
        background : rgb(58, 27, 92);
    }

    div#box_body .body--description {
        background : rgb(58, 27, 92);
    }
}

@media (max-width : 530px) {
    div#box {
        width: 300px;
    }
    div#box_body {
        width: 290px;
        padding: 0;
    }
}

@media (min-width : 1000px) {
    div#box {
        width : 1000px;
    }
}

/* ------------( contactform ) ----------- */
div#contactform {
    padding         : 15px 10px;
    border-collapse : collapse;
}

div#contactform td {
    padding        : 5px 10px;
    margin         : 0px;
    vertical-align : top;
}

.formitem {
    color       : #111;
    font-family : "trebuchet ms", verdana, sans-serif;
}

.formitem_required {
    color            : #111;
    font-family      : "trebuchet ms", verdana, sans-serif;
    background-color : #EFEFEF;
}

input.gobutton {
    font-family : "trebuchet ms", verdana, sans-serif;
    display     : inline;
    width       : 25px;
}

.domainname {
    color : #8cb9e4;
}

span.large {
    font-size : 13px;
}