* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    background: #29c9a5;
}

/*
 * -- BASE STYLES --
 */
body {
    line-height: 1.7em;
    color: #000;
    font-size: 13px;
}

h1,
h2,
h3,
h4,
h5,
h6,
label {
    font-family: "Open Sans", sans-serif;
    font-weight: 600;
    color: #111;
}


/*
 * -- LAYOUT STYLES --
 */
.l-box {
    padding: 1em;
}

.center {
    text-align: center;
}


/*
 * -- HEADER STYLES --
 */

.header {
    position: absolute;
    top: 18%;
    left: 40%;
    right: 2em;
    margin-left: -1em;
    max-width: 40em;
}

.header h1 {
    height: 0;
    width: 100%;
    padding-top: 14.184%;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    background: url(../img/header.svg) no-repeat;
    background-size: 100%;
}

/*
 * -- SPLASH STYLES --
 */

.splash-container {
    position: relative;
    width: 100%;
    background: #000;
    text-align: left;
}

.splash-head {
    position: absolute;
    color: red;
    top: 45%;
    left: 40%;
    text-align: left;
}

.splash-head h1 {
    display: inline;
    box-shadow: 0.4em 0 0 white, -0.4em 0 0 white;
    background: white;
    font-size: 4vw;
    line-height: 1.7em;
}


/*
 * -- CONTENT STYLES --
 */

.content {
    margin: 0 auto;
    max-width: 960px;
}

.content-head,
.content-subhead {
    letter-spacing: 0.05em;
    margin: 0 0 0.8em;
    padding: 1em 0 0.2em;
    /*padding-bottom: 0.5em;*/
    line-height: 1.4em;
}

.content-subhead {
    color: #444;
    border-bottom: 3px solid #af2489;
}

/* Responsive YouTube video embeds */
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #555;
}

.footer {
    background: #383838;
    color: #aaa;
}

.pure-button-primary,
.pure-button-selected,
a.pure-button-primary,
a.pure-button-selected {
    background-color: #af2489;
}

/*
 * -- TABLET (AND UP) MEDIA QUERIES --
 * On tablets and other medium-sized devices, we want to customize some
 * of the mobile styles.
 */
@media (min-width: 48em) {
    /* We increase the body font size */
    body {
        font-size: 16px;
    }

    /* We want to give the content area some more padding */
    .content {
        padding: 1em;
    }

}

/*
 * -- DESKTOP (AND UP) MEDIA QUERIES --
 * On desktops and other large devices, we want to over-ride some
 * of the mobile and tablet styles.
 */
@media (min-width: 78em) {
    /* We increase the header font size even more */
}