body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
    border-bottom: 1px solid #BBBBBB;
    background: url(../images/bg-gradient-pattern.png) repeat-x #fff;
    padding-top: 50px;
    padding: 50px 20px 0;
}

.footer {
    background: #bb1c15;
    padding: 25px 0;
    text-align: center;
}
    .footer a {
        color: #fff;
        text-decoration: none;
        position: relative;
        font-weight: 200;
        font-size: 20px;
    }
    .footer a:before {
        content: "»";
        color: #bb1c15;
        background: #fff;
        border-radius: 100%;
        display: block;
        position: absolute;
        font-size: 1.5em;
        width: 35px;
        height: 35px;
        line-height: 32px;
        left: -50px;
        top: -5px;
        text-align: center;
    }

h1 {
    font-family: 'Ubuntu Condensed', Helvetica, sans-serif;
    margin: 0;
    color: #FFF;
    padding: 30px 0;
    font-size: 30px;
    font-weight: 200;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    background: #bb1c15 url(../images/astrup_logo.png) no-repeat 10px 15px;
}

p {
    margin-top: 0;
}

hr {
    border: 0;
    height: 2px;
    background: #ccc;
    margin: 0 0 1em;
}

select {
    font-size: 14px;
    width: 100%;
}

label {}
    label input {
        padding: 3px;
        border-radius: 2px;
        border: 1px solid #BBBBBB;
        box-shadow: inset 1px 1px 1px 1px rgba(0, 0, 0, .1);
        width: 60%;
    }
    label .before {
        display: inline-block;
        min-width: 20%;
        text-align: right;
        padding-right: 5px;
        vertical-align: middle;
    }
    label .after {
        padding-left: 5px;
        width: 10%;
    }

.select-materials {
    margin-bottom: 30px;
}

.calculation {}
    .calculation > h2 {
        display: none;
    }

.material-weight {
    display: none;
}

.help-text {
    margin-top: 20px;
    text-align: center;
    margin-bottom: 1em;
    font-size: 1.5em;
    font-family: 'Ubuntu Condensed', Helvetica, sans-serif;
}

@media only screen and (max-width: 767px) {
    .help-text {
        margin: 0 0 2em 0;
        text-align: center;
    }
}

.disclaimer {
    background: url(../images/bg-gradient-pattern-light.png) repeat-x top #EFEFEF;
    font-size: 13px;
    text-align: center;
    line-height: 1.5em;
    padding: 30px;
    margin: 0;
}

@media only screen and (max-width: 843px) {
    .disclaimer {
        bottom: -60px;
    }
}

@media only screen and (max-width: 438px) {
    body {
        padding: 10px;
    }
    .disclaimer {
        bottom: -80px;
    }
    h1 {
        font-size: 1.5em;
    }
    h1 span {
        top: -16px;
    }
    .select-materials {
        margin-bottom: 10px;
    }
    label .before {
        display: block;
        text-align: left;
        margin-bottom: 5px;
    }
    label input {
        width: 80%;
    }
}