body {
  font-family: 'Raleway', sans-serif;
  background-color: #f5f5f5;
  font-size: 16px;
  line-height: 28px;
  text-align: justify; }
  body .loader {
    left: calc(50% - 60px);
    top: calc(50% - 30px);
    position: absolute; }
    body .loader .loader-pic {
      width: 60px;
      display: inline;
      -webkit-transform-origin: bottom;
              transform-origin: bottom; }
      body .loader .loader-pic:nth-child(1) {
        -webkit-animation: wave1 2s ease-in-out infinite;
                animation: wave1 2s ease-in-out infinite; }

@-webkit-keyframes wave1 {
  0% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg); }
  50% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg); }
  100% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg); } }

@keyframes wave1 {
  0% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg); }
  50% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg); }
  100% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg); } }
      body .loader .loader-pic:nth-child(2) {
        -webkit-animation: wave2 2s ease-in-out infinite;
                animation: wave2 2s ease-in-out infinite; }

@-webkit-keyframes wave2 {
  0% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg); }
  50% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg); }
  100% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg); } }

@keyframes wave2 {
  0% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg); }
  50% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg); }
  100% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg); } }
  body .loader-text {
    text-align: center;
    margin-top: calc(50vh + 60px);
    display: block; }
  body .whole-page {
    display: none; }
  body .button {
    text-align: center;
    text-decoration: none;
    display: block;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
    margin-top: 10px;
    padding: 6px 0px;
    border-radius: 5px;
    color: white;
    width: 40vw; }
    body .button:hover {
      box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.4); }
  body .scrollToTop {
    background-color: #4eb9b9;
    clear: both;
    float: left;
    margin-left: 5vw; }
  body .backHome {
    background-color: #4eb9b9;
    float: right;
    margin-right: 5vw; }
  body #footer {
    text-align: center;
    clear: both;
    display: block;
    text-decoration: none;
    color: gray;
    padding-top: 10px; }
    body #footer:hover {
      color: #B6b6b6; }
  body .bodycontainer {
    max-width: 940px;
    background-color: white;
    margin-left: auto;
    margin-right: auto; }
    body .bodycontainer .picturepage .parallax-w {
      height: 100vh;
      background-position: 50% 50%;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover; }
      @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
        body .bodycontainer .picturepage .parallax-w {
          background-attachment: scroll;
          height: 70vh;
          background-size: contain; } }
      @media only screen and (min-device-width: 320px) and (max-device-width: 667px) {
        body .bodycontainer .picturepage .parallax-w {
          background-attachment: scroll;
          height: 70vh;
          background-size: contain; } }
    body .bodycontainer .picturepage .parallax-1-word {
      background-image: url("bouquet.jpg"); }
    body .bodycontainer .picturepage .parallax-2-word {
      background-image: url("word-bg-pics/downstairs.jpg"); }
    body .bodycontainer .picturepage .parallax-3-word {
      background-image: url("word-bg-pics/flowers.JPG"); }
    body .bodycontainer .picturepage .parallax-4-word {
      background-image: url("word-bg-pics/kidstable.jpg"); }
    body .bodycontainer .picturepage .parallax-5-word {
      background-image: url("word-bg-pics/signboard.JPG"); }
    body .bodycontainer .picturepage .parallax-6-word {
      background-image: url("word-bg-pics/lola.JPG"); }
    body .bodycontainer .picturepage .parallax-7-word {
      background-image: url("word-bg-pics/dadpic.JPG"); }
    body .bodycontainer .picturepage .parallax-8-word {
      background-image: url("word-bg-pics/downstairs2.JPG"); }
    body .bodycontainer .picturepage .parallax-9-word {
      background-image: url("word-bg-pics/movie.jpg"); }
    body .bodycontainer .picturepage .parallax-10-word {
      background-image: url("word-bg-pics/toast.JPG"); }
    body .bodycontainer .picturepage .parallax-11-word {
      background-image: url("word-bg-pics/laughing.jpg"); }
    body .bodycontainer .picturepage .parallax-12-word {
      background-image: url("word-bg-pics/shacho.jpg"); }
    body .bodycontainer .picturepage .parallax-13-word {
      background-image: url("portrait-JC.jpg"); }
    body .bodycontainer .picturepage .content {
      max-width: 620px;
      text-align: justify;
      margin-left: auto;
      margin-right: auto;
      padding: 20px 20px; }
      @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
        body .bodycontainer .picturepage .content {
          max-width: 100%;
          padding: 20px 7%; } }
      @media only screen and (min-device-width: 320px) and (max-device-width: 667px) {
        body .bodycontainer .picturepage .content {
          max-width: 100%;
          padding: 20px 30px; } }
      body .bodycontainer .picturepage .content .letterimage {
        height: 6em;
        float: left;
        padding-right: 10px;
        vertical-align: text-top; }
      body .bodycontainer .picturepage .content .paragraph {
        display: inline; }
      body .bodycontainer .picturepage .content .emphasis {
        font-size: 26px; }
      body .bodycontainer .picturepage .content .paragraphcenter {
        text-align: center; }
      body .bodycontainer .picturepage .content .weddingmovie {
        text-align: center;
        display: block;
        text-align: none;
        font-size: 20px;
        color: grey;
        text-decoration: none; }
    body .bodycontainer .picturepage #heartcontent #heartdrawing {
      text-align: center;
      margin-left: auto;
      margin-right: auto;
      display: none; }
      @media only screen and (min-width: 550px) {
        body .bodycontainer .picturepage #heartcontent #heartdrawing {
          display: block; } }
    body .bodycontainer .picturepage .flex {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      background-image: url("marriedbg.png");
      background-size: cover;
      background-repeat: no-repeat;
      border-radius: 20px;
      height: 20vh;
      margin: 20px auto; }
    body .bodycontainer .arrowword {
      position: relative;
      bottom: 20vh;
      text-align: center;
      -webkit-animation: bounce 2s infinite;
              animation: bounce 2s infinite;
      -webkit-animation-delay: 3s;
              animation-delay: 3s;
      display: none;
      background-position: 50% 50%; }

@-webkit-keyframes bounce {
  20%, 53%, 80% {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(-5px, -30px, 0);
            transform: translate3d(-5px, -30px, 0); }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(5px, -15px, 0);
            transform: translate3d(5px, -15px, 0); }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
            transform: translate3d(0, -4px, 0); } }

@keyframes bounce {
  20%, 53%, 80% {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(-5px, -30px, 0);
            transform: translate3d(-5px, -30px, 0); }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(5px, -15px, 0);
            transform: translate3d(5px, -15px, 0); }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
            transform: translate3d(0, -4px, 0); } }
    body .bodycontainer .textwrap {
      height: 100vh;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      font-size: 50px; }
      @media (max-width: 700px) {
        body .bodycontainer .textwrap {
          font-size: 30px; } }
      @media (max-width: 500px) {
        body .bodycontainer .textwrap {
          font-size: 20px; } }
    body .bodycontainer .typed-cursor {
      opacity: 1;
      -webkit-animation: blink 0.7s infinite;
              animation: blink 0.7s infinite; }

@-webkit-keyframes blink {
  0% {
    opacity: 1; }
  50% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes blink {
  0% {
    opacity: 1; }
  50% {
    opacity: 0; }
  100% {
    opacity: 1; } }

#heartdrawing path {
  fill: transparent;
  stroke: black;
  stroke-width: 4px;
  stroke-dasharray: 1413.606201171875px;
  stroke-dashoffset: -1413.606201171875;
  -webkit-transition: stroke-dashoffset 0.5s linear, fill 0.4s ease 0.5s;
  transition: stroke-dashoffset 0.5s linear, fill 0.4s ease 0.5s; }

#heartdrawing.checked path {
  fill: #fed7d7;
  stroke-dashoffset: 0px; }