@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(http://fonts.googleapis.com/css?family=Antic+Slab);
@import url(http://fonts.googleapis.com/css?family=Trocchi);

#header, #footer { background-color: #0088B7; }
#footer { margin-top: 100px; }

#body_content { height: 0; }

#intro { width: 100%; }
#intro .container { background-repeat: no-repeat; background-position: 45% top; min-height: 560px; }

#intro p, #false-content p {
    margin-top: 10px;
    margin-bottom: 10px;
    font-family: 'Theano Modern', Georgia, serif;
    font-size: 15px;
    line-height: 23px;
}
#intro p.indent, #false-content p.indent { text-indent: 10px; }
#false-content .cite {
    font-style: italic;
}

#heading h2 {
    margin-top: 110px;
    font-family: 'Montserrat', sans-serif;
    font-style: italic;
    font-size: 60px;
    font-weight: 700;
    line-height: 55px;
    color: #0088B7;
    text-align: center;
}

#sub-heading {
    margin-top: 15px;
    font-family: 'Theano Modern', Georgia, serif;
}

#sub-heading h3 {
    text-align: center;
    font-size: 20px;
    line-height: 25px;
    font-style: italic;
    font-weight: normal;
    margin-left: 15px;
    margin-right: 15px;
}

#intro-blurb p#intro-first-p { margin-top: 45px; }
#intro-blurb p { padding-left: 20px; }

#false-content {
    padding-top: 25px;
    margin-bottom: 25px;
}

.in-2013 {
    display: block;
    width: 130px;
    height: 120px;
    padding-left: 25px;
    padding-top: 35px;
    border-radius: 80px;
    background-color: #0088B7;
    text-align: left;
    color: #fff;
    font-size: 50px;
    line-height: 40px;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    margin-left: -10px;
}

.note-black, .note-blue {
    margin-top: 10px;
    margin-bottom: 10px;
    font-family: 'Trocchi', serif;
    line-height: 25px;
}

.note-blue {
    color: #0088B7;
}

.note-heading {
    color: #FFD503;
    font-weight: bolder;
    margin-top: 30px;
    font-size: 18px;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
}

.note-emphasize {
    font-size: 25px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    line-height: 25px;
}

.note-source {
    font-family: 'Trocchi', serif;
    font-style: italic;
    font-size: 11px;
}

.first-letter {
    color: #0088B7;
    font-family: 'Antic Slab', serif;
    font-size: 40px;
}

.false-content-heading {
    color: #0088B7;
    font-size: 21px;
    margin-top: 25px;
    font-family: 'Montserrat', sans-serif;
}

#cancer-large {
    width: 80%; margin: auto;
}

.cancer-quote {
    font-size: 32px;
    color: #AAA;
    line-height: 40px;
    font-family: Georgia, serif;
    font-style: italic;
}

@media (min-width: 768px) and (max-width: 979px) {
    #intro, #intro .container {
        background-size: auto 500px;
    }
    #intro .container { height: 500px; min-height: 0; }

    #heading,
    #sub-heading { margin-right: 0; margin-left: 60px; }
    #heading h2 { margin-top: 92px; }
    #sub-heading { margin-top: 20px; }
    #sub-heading h3 { margin-left: 0; margin-right: 0; line-height: 28px; }

    #false-content { padding-top: 0; }

    .cancer-quote { margin-top: 20px; }

    #cancer-large { margin-top: 20px; }
}

@media (max-width: 767px) {    
    #intro { margin-left: -20px; background-image: none !important; }
    #intro .container { padding: 0 20px; background-position: 18% top; background-size: 211% auto; min-height: 0; }

    #heading h2 {
        font-size: 50px;
        line-height: 50px;
        margin-top: 55px;
    }
    #sub-heading { margin-top: 10px; }
    #sub-heading h3 { 
        font-size: 16px;
        line-height: 20px; 
        
        text-shadow: 0 0 7px #fff, 0 0 15px #fff, 0 0 15px #fff, 0 1px 0 #fff;
    
        padding-bottom: 68%; /* push .container to contain bg img */ 
    }

    #false-content { padding-top: 0; }

    .cancer-quote { font-size: 28px; line-height: 34px; margin-top: 20px; }

    #cancer-large { width: 100%; }
    .in-2013 { margin-left: 0; margin-top: 30px; }
}

@media (max-width: 480px) {
    #heading h2 {
        font-size: 40px;
        line-height: 40px;
        margin-top: 45px;
    }
    #sub-heading h3 { padding-bottom: 64%; /* push .container to contain bg img */ }
}
@media (max-width: 400px) {
    #heading h2 {
        font-size: 36px;
        margin-top: 30px;
    }
    #sub-heading h3 { padding-bottom: 52%; /* push .container to contain bg img */ }
}