@charset "UTF-8";

/* brand & typography styles */
body {
    padding: 0;
    margin: 0;
    color: #303030;
    background-color: #fff;
    font-family: 'Merriweather', serif; }

h1, h2, h3, h4, h5, h6 {
    color: #c93f3f;
    font-family: 'Lato', sans-serif; }

h1 {
    font-size: 30px;
    line-height: 120%;
    margin-bottom: 30px; }

@media only screen and (min-width: 720px) {
    h1 { font-size: 4vw; } }

p {
    font-size: 18px;
    line-height: 150%;
    margin-bottom: 18px; }

li { font-size: 18px; line-height: 140%; }
li + li { margin-top: 6px; }

p.lead { font-size: 24px; }

.pull-quote {
    border-left: 0;
    padding: 2em;
    color: #F1E3E3;
    font-size: 24px;
    margin: 18px 0;
    border-top: 3px solid #c93f3f;
    border-bottom: 3px solid #c93f3f; }

.first-section { padding: 50px 0 20px 0; }

.text-header {
    font-size: 50px;
    text-align: center; }

.tutorial-link {
    color: #5a95ca;
    font-size: 18px;
    text-decoration: underline; }

.tutorial-link:hover { color: #e55342; }


/* Parallax effect styles
 *
 * Created by @patrykzabielski
 * Modified by @cballenar
 *
 */
#hero {
    overflow: hidden;
    position: relative;
    z-index: -2;
    background-size: cover;
    background-repeat: no-repeat;
}

.layer {
    background-position: bottom center;
    background-size: 110%;
    background-repeat: no-repeat;
    width: 100%;
    position: fixed;
    z-index: -1; }

    /* Adjustments to background size based on size of screen */
    @media only screen and (min-width: 840px) {
        .layer { background-size: 90%; } }

    @media only screen and (min-width: 960px) {
        .layer { background-size: 80%; } }

    @media only screen and (min-width: 1200px) {
        .layer { background-size: 70%; } }

/* set ratio of image to 16:9 by default */
#hero, .layer { padding-bottom: 56.25%; }

#content {
    position: relative;
    z-index: 1;
    /* Match body background color to hide illustrations */
    background-color: #fff;
}

/* change ratio to 1:1 on portrait devices */
@media screen and (orientation:portrait) {
    #hero, .layer { padding-bottom: 100%; } }