/* ==========================================================================
   Shared styles
   ========================================================================== */

body {
    font-family: 'Open Sans', sans-serif;
}

h1 { 
    text-transform: uppercase;
    font-weight: 300;

    margin: 0.9em auto;

    color: rgba(255, 255, 255, 1);
}

@media screen and (max-width: 480px) {
    h1 {
        font-size: 28px;
    }
}

/* ==========================================================================
   Colours
   ========================================================================== */

.color--important { 
    color:rgba(13, 124, 135, 1) ;
}

/* ==========================================================================
   Images
   ========================================================================== */

.img-responsive {
    margin: 0 auto;
}

.heading-image {
    margin-bottom: 20px;
}

.cta img {
    margin: 1.5em auto;
}

/* ==========================================================================
   Typography and Content
   ========================================================================== */

.title {
    background: linear-gradient(to bottom, #f0bd4e 0%, #f0bd4e 49%, #f0ae1f 49%, #f0ae1f 100%);
}

.introduction {
    padding-top: 1em;
}

hr.stub {
    width: 15%;

    border-top: 0.25em solid rgba(13, 124, 135, 1);

    margin: 5px auto;
}

.survey { 
    margin: 0.75em auto 1.5em;
}

#question-2, #question-3, #question-4,
.loading, #check1, #check2, #check3,
.cta {
   display: none;
}

.btn {
    white-space: normal;
}

.btn--cta {
    color: rgba(255, 255, 255, 1);
    background: rgba(13, 124, 135, 1);
}

.checks {
    margin: 2em auto 1em;
}

.cta p {
    margin-bottom: 0;
}