@import url(http://fonts.googleapis.com/earlyaccess/jejuhallasan.css);
/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box; }

*, *:before, *:after {
  box-sizing: inherit; }

/* mixins */
.versetext {
  font-size: 1.2em;
  line-height: 1.8em;
  font-family: 'Open Sans', serif;
  width: 50%; }

.verse {
  float: right;
  margin-top: .5em; }

section.feature {
  background: url(../img/cloud5.jpg) no-repeat center center fixed;
  background-size: cover;
  height: 85vh;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center; }
  section.feature .hero {
    text-align: center;
    color: #51616e;
    line-height: 5em; }
  section.feature .korean {
    font-family: 'Jeju Hallasan', sans-serif;
    font-size: 5em; }
  section.feature .english {
    font-family: 'Permanent Marker', sans-serif;
    font-size: 5em; }
  section.feature .date {
    font-size: 1.75em;
    font-weight: bold; }

section.toheaven {
  height: 70em;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center; }
  section.toheaven .sidebyside {
    width: 1280px;
    margin: 0 auto;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center; }
    section.toheaven .sidebyside .sideimage {
      width: 120em;
      height: 50em;
      background: url(../img/52.jpg) no-repeat center center;
      background-size: cover; }
    section.toheaven .sidebyside .description {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: center;
      justify-content: center; }
      section.toheaven .sidebyside .description .annotation {
        width: 55%;
        margin-left: 10em;
        font-family: 'Open Sans', serif; }
        section.toheaven .sidebyside .description .annotation .tagline {
          font-size: 2em;
          margin-bottom: .5em; }
        section.toheaven .sidebyside .description .annotation .versetext {
          width: 100%; }

section.growingup {
  background: #ededed;
  background-size: cover;
  height: 120em; }
  section.growingup .layout {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
    position: relative; }
    section.growingup .layout .parallax {
      z-index: 100;
      width: 780px;
      font-size: 1.5em;
      background-color: #f4f4f4;
      box-shadow: 0 0 1.2em #c5c5c5;
      font-family: 'Open Sans', serif;
      padding: 2em;
      border: 1em solid #fff;
      text-align: center; }
      section.growingup .layout .parallax .tagline {
        font-size: 1.5em;
        margin-bottom: .5em; }
  section.growingup .floatingVerse {
    position: absolute;
    width: 40em;
    right: 5em;
    top: 100em;
    padding: 2em;
    background-color: #fff; }
  section.growingup .oldpics {
    position: absolute;
    background-color: white;
    padding: 2em;
    box-shadow: 0 0 1.2em #c5c5c5; }
    section.growingup .oldpics.pic1 {
      right: 8%;
      top: 84em;
      height: 30em; }
    section.growingup .oldpics.pic2 {
      left: 15%;
      top: 75em;
      height: 30em; }
    section.growingup .oldpics.pic3 {
      left: 2%;
      top: 41em;
      height: 30em; }
    section.growingup .oldpics.pic4 {
      left: 66%;
      top: 6em;
      height: 40em; }
    section.growingup .oldpics.pic5 {
      left: 4%;
      top: 7em;
      height: 30em; }
    section.growingup .oldpics.pic6 {
      left: 32%;
      top: 15em;
      height: 30em; }
    section.growingup .oldpics.pic7 {
      right: 2%;
      top: 50em;
      height: 30em; }

section.verseBreak {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 2em;
  height: 30em;
  color: #fff;
  background-color: #a179a9;
  background: linear-gradient(to left, #42275a, #734b6d);
  font-size: 1.2em;
  line-height: 1.8em; }

section.america {
  height: 150em;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center; }
  section.america .layout {
    position: relative;
    width: 1280px; }
    section.america .layout .part1 {
      position: absolute;
      top: -35em;
      left: 0em;
      width: 32%;
      font-size: 1.2em;
      line-height: 1.8em;
      font-family: 'Open Sans', serif; }
      section.america .layout .part1 .tagline {
        font-size: 2em;
        margin-bottom: .5em; }
    section.america .layout .part2 {
      position: absolute;
      top: 3em;
      left: 57em;
      width: 26%;
      font-size: 1.2em;
      line-height: 1.8em;
      font-family: 'Open Sans', serif; }
      section.america .layout .part2 .tagline {
        font-size: 2em;
        margin-bottom: .5em; }
    section.america .layout .pics {
      position: absolute;
      box-shadow: 0 0 10em #969696; }
      section.america .layout .pics.pic0 {
        height: 50em;
        top: -66em;
        left: 38.55em; }
      section.america .layout .pics.pic1 {
        top: -40em;
        left: 56em;
        height: 30em; }
      section.america .layout .pics.pic2 {
        top: -16em;
        left: 5em;
        height: 40em; }
      section.america .layout .pics.pic3 {
        top: 24em;
        left: 22.2em;
        height: 40em; }

.test {
  position: fixed;
  top: 0;
  background-color: black;
  color: white;
  padding: 1em;
  z-index: 1; }

section.passing {
  height: 100vh;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center; }
  section.passing .remarks {
    display: -ms-flexbox;
    display: flex; }
    section.passing .remarks .obi {
      margin-right: 3em; }
      section.passing .remarks .obi .side-image {
        height: 20em; }
  section.passing .excerpt {
    width: 640px;
    border-top: 3px solid #000;
    border-bottom: 3px solid #000;
    padding: 2em .5em;
    font-size: 1.2em;
    line-height: 1.8em; }

section.bible {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }
  section.bible div {
    margin: 2em;
    font-size: 1.5em;
    width: 20em;
    padding: 1em;
    background-color: #ededed; }

section.heart {
  background: url(../img/cloud3.jpg) no-repeat center center fixed;
  color: #624c4c;
  height: 95em;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative; }
  section.heart .overlaypic {
    height: 35em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-75%, 10%);
    box-shadow: 0 0 3em 2px #9d9d96; }
  section.heart .summary {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: -25em; }
    section.heart .summary .grid {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -ms-flex-direction: column;
      flex-direction: column; }
    section.heart .summary .text {
      padding-right: 8em;
      width: 30em;
      font-size: 1.2em;
      line-height: 1.8em;
      font-family: 'Open Sans', serif; }
      section.heart .summary .text .title {
        font-size: 2em;
        margin-bottom: .5em; }
    section.heart .summary .pics {
      height: 47em;
      box-shadow: 0 0 3em 2px #9d9d96; }

section.cta {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #e2e6e7;
  height: 12em; }
  section.cta div.content {
    border-left: solid 6px #6f8bae;
    padding-left: 1em; }

section.eulogy {
  background: url(../img/background.jpg) no-repeat center center;
  height: 80vh;
  background-size: cover;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center; }
  section.eulogy .text {
    font-size: 1.2em;
    line-height: 1.8em;
    font-family: 'Open Sans', serif;
    background-color: #fff;
    padding: 3em;
    border-radius: 10px; }

footer {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  height: 4em;
  color: #fff;
  background-color: #2e2e2e; }

@media only screen and (min-width: 768px) and (max-width: 1410px) {
  section.verseBreak {
    height: 20em; }
    section.verseBreak .versetext {
      width: 75%; }
  section.toheaven {
    height: 50em; }
    section.toheaven .sidebyside {
      width: 100%;
      padding: 2em; }
      section.toheaven .sidebyside .description .annotation {
        margin-left: 2em;
        width: 61%; }
      section.toheaven .sidebyside .sideimage {
        width: 97em;
        height: 42em;
        background: url(../img/52.jpg) no-repeat center center;
        background-size: cover; }
  section.growingup {
    height: 100em; }
    section.growingup .layout .parallax {
      padding: 1em;
      width: 700px;
      text-align: justify; }
    section.growingup .oldpics {
      padding: 1em; }
      section.growingup .oldpics.pic1 {
        right: 8%;
        top: 70em;
        height: 26em; }
      section.growingup .oldpics.pic2 {
        left: 5%;
        top: 66em;
        height: 26em;
        z-index: 50; }
      section.growingup .oldpics.pic3 {
        left: 1%;
        top: 40em;
        height: 28em; }
      section.growingup .oldpics.pic4 {
        right: 5%;
        left: auto;
        top: 5em;
        height: 30em; }
      section.growingup .oldpics.pic5 {
        left: 3%;
        top: 3em;
        height: 28em; }
      section.growingup .oldpics.pic6 {
        left: 35%;
        top: 15em;
        height: 28em; }
      section.growingup .oldpics.pic7 {
        right: 2%;
        top: 40em;
        height: 33em; }
  section.america {
    height: 90em; }
    section.america .layout {
      width: 940px; }
      section.america .layout .part0 .pics {
        box-shadow: 0 0 2em #969696; }
        section.america .layout .part0 .pics.pic0 {
          left: 43.6em;
          height: 35em;
          top: -39em; }
        section.america .layout .part0 .pics.pic1 {
          left: 39.7em;
          height: 21.8em;
          top: -4.1em; }
        section.america .layout .part0 .pics.pic2 {
          left: 4em;
          height: 31em;
          top: -13.3em; }
        section.america .layout .part0 .pics.pic3 {
          left: 4em;
          height: 20em;
          top: 17.7em;
          z-index: 300; }
      section.america .layout .part1 {
        left: 14%;
        top: -30em;
        max-width: 30em;
        width: 37%; }
      section.america .layout .part2 {
        top: 22em;
        left: 36em;
        width: 30%; }
  section.heart {
    height: 58em; }
    section.heart .summary {
      margin-top: -19em; }
      section.heart .summary .text {
        width: 22em;
        padding-right: 1em; }
      section.heart .summary .pics {
        height: 30em; }
    section.heart .overlaypic {
      height: 25em;
      top: 45%; }
  section.passing .remarks {
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center; }
    section.passing .remarks .obi {
      margin: 0;
      margin-bottom: 5em;
      padding: 1em; }
      section.passing .remarks .obi .side-image {
        height: 25em; } }

@media only screen and (min-width: 768px) and (max-width: 1000px) {
  section.growingup {
    height: 100em; }
    section.growingup .layout .parallax {
      padding: 1em;
      width: 440px;
      text-align: justify; }
    section.growingup .oldpics {
      padding: 1em; }
      section.growingup .oldpics.pic1 {
        right: 8%;
        top: 74em;
        height: 22em; }
      section.growingup .oldpics.pic2 {
        left: 5%;
        top: 64em;
        height: 22em;
        z-index: 50; }
      section.growingup .oldpics.pic3 {
        left: 1%;
        top: 30em;
        height: 25em; }
      section.growingup .oldpics.pic4 {
        right: 5%;
        left: auto;
        top: 5em;
        height: 26em; }
      section.growingup .oldpics.pic5 {
        left: 3%;
        top: 3em;
        height: 24em; }
      section.growingup .oldpics.pic6 {
        left: 35%;
        top: 15em;
        height: 23em; }
      section.growingup .oldpics.pic7 {
        right: 2%;
        top: 40em;
        height: 30em; }
  section.america {
    height: 90em; }
    section.america .layout .part0 {
      position: absolute;
      left: 10%;
      transform: translateX(6em); }
      section.america .layout .part0 .pics {
        box-shadow: 0 0 2em #969696; }
        section.america .layout .part0 .pics.pic0 {
          left: 26em;
          height: 35em;
          top: -39em; }
        section.america .layout .part0 .pics.pic1 {
          left: -4.3em;
          height: 23em;
          top: -9em; }
        section.america .layout .part0 .pics.pic2 {
          left: 16.5em;
          height: 20em;
          top: -4em;
          z-index: 500; }
        section.america .layout .part0 .pics.pic3 {
          left: -7em;
          height: 20em;
          top: 13.9em; }
    section.america .layout .part1 {
      left: 13%;
      top: -30em;
      max-width: 30em;
      width: 37%; }
    section.america .layout .part2 {
      top: 19em;
      right: 1em;
      width: 30%;
      left: auto; } }

@media only screen and (max-width: 768px) {
  .versetext {
    width: 90%;
    padding: 1em; }
  section.verseBreak {
    padding: 2em 1em;
    height: auto;
    color: #fff;
    background-color: #a179a9;
    background: linear-gradient(to left, #42275a, #734b6d);
    font-size: 1em;
    line-height: 1.8em; }
  section.heart {
    height: auto;
    background: none;
    background-color: #d9dfdf;
    display: block;
    padding: 0;
    padding-bottom: 1em; }
    section.heart .overlaypic {
      position: relative;
      top: auto;
      left: auto;
      transform: none;
      height: auto;
      width: 100%;
      box-shadow: none;
      padding: 1em; }
    section.heart .summary {
      margin-top: 0; }
      section.heart .summary .pics {
        height: auto;
        width: 100%;
        padding: 1em;
        box-shadow: none; }
      section.heart .summary .text {
        color: #000;
        width: 100%;
        padding-right: 0em;
        padding: 2em 1em 1em; }
  section.passing {
    height: auto;
    padding: 2em 0; }
    section.passing .remarks {
      -ms-flex-direction: column;
      flex-direction: column; }
      section.passing .remarks .obi {
        margin-right: 0em;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: center;
        justify-content: center; }
        section.passing .remarks .obi .side-image {
          height: 20em; }
    section.passing .excerpt {
      width: 100%;
      border: none;
      padding: 2em 1em 0em;
      font-size: 1.2em;
      line-height: 1.8em; }
  section.america {
    height: auto;
    position: relative; }
    section.america .layout {
      width: 100%;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-direction: column;
      flex-direction: column; }
      section.america .layout .part0 {
        -ms-flex-order: 2;
        order: 2; }
      section.america .layout .part1 {
        -ms-flex-order: 1;
        order: 1;
        position: relative;
        background-color: #fff;
        padding: 2em 1em 1em;
        top: 0;
        left: 0;
        width: 100%;
        font-size: 1.2em;
        line-height: 1.8em;
        font-family: 'Open Sans', serif; }
        section.america .layout .part1 .tagline {
          font-size: 2em;
          margin-bottom: .5em; }
      section.america .layout .part2 {
        -ms-flex-order: 3;
        order: 3;
        position: relative;
        top: 0;
        left: 0;
        padding: 2em 1em;
        width: 100%;
        font-size: 1.2em;
        line-height: 1.8em;
        font-family: 'Open Sans', serif; }
        section.america .layout .part2 .tagline {
          font-size: 2em;
          margin-bottom: .5em; }
      section.america .layout .pics {
        position: inherit;
        box-shadow: none; }
        section.america .layout .pics.pic0 {
          height: auto;
          width: 100%;
          top: 0;
          left: 0;
          padding: 1em; }
        section.america .layout .pics.pic1 {
          top: 0;
          left: 0;
          height: auto;
          width: 100%;
          padding: 1em; }
        section.america .layout .pics.pic2 {
          top: 0;
          left: 0;
          height: auto;
          width: 100%;
          padding: 1em; }
        section.america .layout .pics.pic3 {
          top: 0;
          left: 0;
          height: auto;
          width: 100%;
          padding: 1em; }
  section.toheaven {
    padding: 0em; }
  section.toheaven {
    height: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center; }
    section.toheaven .sidebyside {
      width: 100%;
      margin: 0 auto;
      display: block;
      -ms-flex-direction: column;
      flex-direction: column; }
      section.toheaven .sidebyside .sideimage {
        height: 30em;
        width: 100%;
        background: url(../img/52.jpg) no-repeat center center;
        background-position-y: 25%; }
      section.toheaven .sidebyside .description {
        padding: 1em; }
        section.toheaven .sidebyside .description .annotation {
          width: 100%;
          margin-left: 0em; }
          section.toheaven .sidebyside .description .annotation .tagline {
            font-size: 1.75em;
            text-align: center; }
  section.growingup {
    height: auto; }
    section.growingup .layout {
      position: relative;
      -ms-flex-direction: column-reverse;
      flex-direction: column-reverse; }
      section.growingup .layout .parallax {
        z-index: 100;
        width: 100%;
        font-size: 1.2em;
        line-height: 2em;
        padding: 1em;
        text-align: center; }
    section.growingup .floatingVerse {
      position: relative;
      width: 100%;
      height: auto;
      top: 0;
      left: 0;
      background: #3c3c3c;
      color: white; }
    section.growingup .oldpics {
      position: relative;
      width: 100%;
      height: auto;
      box-shadow: none;
      border-top: 1px solid #c0c0c0; }
      section.growingup .oldpics:last-child {
        border-bottom: 1px solid #c0c0c0; }
      section.growingup .oldpics.pic1 {
        left: 0;
        top: 0;
        height: auto;
        width: 100%;
        transform: none; }
      section.growingup .oldpics.pic2 {
        left: 0;
        top: 0;
        height: auto;
        width: 100%;
        transform: none; }
      section.growingup .oldpics.pic3 {
        left: 0;
        top: 0;
        height: auto;
        width: 100%;
        transform: none; }
      section.growingup .oldpics.pic4 {
        left: 0;
        top: 0;
        height: auto;
        width: 100%;
        transform: none; }
      section.growingup .oldpics.pic5 {
        left: 0;
        top: 0;
        height: auto;
        width: 100%;
        transform: none; }
      section.growingup .oldpics.pic6 {
        left: 0;
        top: 0;
        height: auto;
        width: 100%;
        transform: none; }
      section.growingup .oldpics.pic7 {
        left: 0;
        top: 0;
        height: auto;
        width: 100%;
        transform: none; } }