body {
    font: 14px "Open Sans", sans-serif, Helvetica, Arial, "Lucida Grande";
    margin: 0px auto;
    padding-bottom: 240px;
}

a {
    color: black;
    text-decoration: none;
}


h1.site-title {
    font-size: 80px;
    font-weight: lighter;
    margin: 8px;
    text-align: center;
    line-height: 1;
}

h2.site-subtitle {
    font-size: 24px;
    font-weight: lighter;
    margin: 8px;
    text-align: center;
}

div.banner {
    background-image: url("/images/boulder.jpg");
    background-size: cover;
    height: 640px;
    /*
    background-repeat:
    background-attachment:
    background-position:
    */
}

div.banner-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
}

div.banner-title-fade {
    background-image: linear-gradient(to top, #000000dd, #00000000);
    display: flex;
    flex-flow: column;
    justify-content: flex-end;
    height: 500px;
}

div.banner-title {
    color: white;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    height: 300px;
}

div.section-fade {
    background-image: linear-gradient(to bottom, #000000dd, #00000000);
    height: 16px;
    width: 100%;
    margin-bottom: 64px;
}

div.section {
    display: flex;
    flex-flow: column;
    align-items: center;
}

div.section-content {
    display: flex;
    padding: 0 16px;
    max-width: 400px;
    flex-flow: column;
    align-items: center;
}

div.contact {
    margin-top: 40px;
    font-size: 16px;
}

.text-center {
    text-align: center;
}

.text {
    font-size: 24px;
}



/** BEGIN 900px */
@media only screen and (max-width: 900px) {

div.banner {
    height: 480px;
}

h1.site-title {
    font-size: 64px;
}

h2.site-subtitle {
    font-size: 24px;
}

}
/** END 900px */


/** BEGIN 700px */
@media only screen and (max-width: 700px) {

div.banner {
    height: 480px;
}

h1.site-title {
    font-size: 48px;
}

h2.site-subtitle {
    font-size: 20px;
    margin: 4px;
}

}
/** END 700px */


/** BEGIN 500px */
@media only screen and (max-width: 500px) {

div.banner {
    height: 480px;
}

h1.site-title {
    font-size: 32px;
}

h2.site-subtitle {
    font-size: 16px;
}

.text {
    font-size: 16px;
}


}
/** END 500px */


/**
 * iPhone SE: 320 x 568
 * iPhone 6,7,8: 375 x 667
 * iPhone 8 Plus: 414 x 736
 * iPhone X: 375 x 812, 
 * iPad Pro: 768 x 1024, 1024 x 1366
 * 
 *
 */