/* --------------------------------
Primary style

  dark-red: #8C4646;
  light-red: #D96459;
  orange: #F2AE72;
  yellow: #F2E394;
  green: #588C7E;

-------------------------------- */
@font-face {
  font-family: SpringTime;
  src: url('springtime_personal_use-webfont.woff2') format('woff2'),
       url('springtime_personal_use-webfont.woff') format('woff'),
       url('springtime_personal_use.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.handwriting {
  font-family: SpringTime;
}

html * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  width: 100vw;
  overflow-x: hidden;
  
  font-size: 100%;
  font-family: "Droid Serif", serif;
  color: #7f8c97;
}

body, document, window {
  touch-action: none;
}

i {
  font-style: italic;
}

/**
  Debugging
  */

#debugger {
  position: fixed;
  bottom: 15px;
  left: 15px;
  margin: 10px;
  width: 350px;
  height: 50px;
  z-index: 100;
  cursor: pointer;
  padding-top: 10px;
  padding-left: 50px;
  color: #1b1b2d;
  transition: 1s;
  -webkit-transition: 1s;
  background: url(../img/reload_dark.png) no-repeat 0 50%;
}

#debugger.white {
  color: #7f8c97;
  background: url(../img/reload_light.png) no-repeat;
}

/**
  Navigation bar
 */
#navbar {
  position: fixed;
  top: 15px;
  z-index: 100;

  left: -160px;
  width: 210px;
  transition: left 250ms ease-out, background-color 500ms ease-out;
  -webkit-transition: left 250ms ease-out, background-color 500ms ease-out;
}

#navbar .content {
  opacity: 0;
  width: 85%;
  padding: 10px;
  padding-right: 0;
  color: #8C4646;
  /*overflow: hidden;*/
  background-color: rgba(0,0,0,.25);
  transition: opacity 250ms ease, width 1s ease;
  -webkit-transition: opacity 250ms ease, width 1s ease;
}

#navbar h1 {
  width: 75%;
  margin: 5px;
  padding: 5px;
  color: #D96459;
  border-bottom: 1px solid #D96459;
}
/*
#navbar ul {
  overflow: hidden;
}*/

#navbar ul li a {
  display: block;
  margin: 5px;
  padding: 5px;
  color: #8C4646;
  transition: color 250ms;
  -webkit-transition: color 250ms;
  user-select: none;
  -webkit-user-select: none;
}
#navbar ul li a:hover {
  color: #D96459;
}

#navbar a.open-nav,
#navbar a.close-nav {
  float: right;
  cursor: pointer;
  padding: 15px;
}

#navbar a .nav-icon {
  width: 24px;
  height: 2px;
  position: absolute;
  transform: translate(-50%);
  -webkit-transform: translate(-50%);
  background-color: #8C4646 !important;
  transition: background-color 250ms;
  -webkit-transition: background-color 250ms;
}

#navbar a .nav-icon::after,
#navbar a .nav-icon::before,
#to-top a .nav-icon::after,
#to-top a .nav-icon::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  height: 2px !important;
  background-color: inherit;
  backface-visibility: hidden;
  transition: transform 250ms ease;
  -webkit-transition: transform 250ms ease;
}

#navbar a.open-nav .nav-icon::before { transform: translateY(-7px); -webkit-transform: translateY(-7px); }
#navbar a.open-nav .nav-icon::after  {  transform: translateY(7px); -webkit-transform: translateY(7px); }
 
#navbar a.open-nav:hover .nav-icon { background-color: #D96459 !important; }
#navbar a.open-nav:hover .nav-icon::before { transform: translateY(-9px); -webkit-transform: translateY(-9px); }
#navbar a.open-nav:hover .nav-icon::after  { transform: translateY(9px); -webkit-transform: translateY(9px); }

#navbar a.close-nav .nav-icon { background-color: #D96459 !important; height: 0px; }
#navbar a.close-nav .nav-icon::before { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); }
#navbar a.close-nav .nav-icon::after  {  transform: rotate(45deg); -webkit-transform: rotate(45deg); }

.cssanimations #navbar a.hidden {
  visibility: hidden;
}
.cssanimations #navbar a.bounce-in {
  visibility: visible;
  animation: navbar-bounce 0.6s;
  -webkit-animation: navbar-bounce 0.6s;
}

@media only screen and (max-width: 1200px) {
  #navbar { width: 350px; left: -220px; }
  #navbar .content { width: 250px; }
  #navbar a.open-nav .nav-icon,
  #navbar a .nav-icon::before,
  #navbar a .nav-icon::after {
    width: 85px;
    border-radius: 5px;
    height: 10px !important;
  }
  #navbar ul li a { margin: 10px; }
  #navbar a.open-nav, #navbar a.close-nav { padding: 50px; }
  #navbar a.open-nav .nav-icon::before { transform: translateY(-26px); -webkit-transform: translateY(-26px);}
  #navbar a.open-nav .nav-icon::after  {  transform: translateY(26px);  -webkit-transform: translateY(26px);}
  #navbar a.open-nav:hover .nav-icon::before { transform: translateY(-30px); -webkit-transform: translateY(-30px); }
  #navbar a.open-nav:hover .nav-icon::after  { transform: translateY(30px);  -webkit-transform: translateY(30px);}
}


@keyframes navbar-bounce {
  0% {
    opacity: 0;
    transform: scale(0.5) translateX(-50px);
    -webkit-transform: scale(0.5) translateX(-50px);
  }
  60% {
    opacity: 1;
    transform: scale(1.1) translateX(50px);
    -webkit-transform: scale(1.1) translateX(50px);
  }
  100% {
    transform: scale(1) translateX(0px);
    -webkit-transform: scale(1) translateX(0px);
  }
}

/**
 Back to top
 */
#to-top {
  position: fixed;
  bottom: 25px;
  right: 50px;
  z-index: 100;
  transition: transform 250ms ease;
  -webkit-transition: transform 250ms ease;
}

#to-top a {
  cursor: pointer;
  padding: 15px;
  margin-left: 15px;
}

#to-top:hover {
  transform: translateY(-5px);
  -webkit-transform: translateY(-5px);
}

#to-top a .nav-icon {
  transition: background-color 350ms ease;
  -webkit-transition: background-color 350ms ease;
  background-color: #8C4646 !important;
}
#to-top a:hover .nav-icon {
  background-color: #D96459 !important;
}

#to-top a .nav-icon::after,
#to-top a .nav-icon::before {
  width: 50%;
  height: 3px;
}

#to-top a .nav-icon::before {
  transform: rotate(35deg) translateX(45%);
  -webkit-transform: rotate(35deg) translateX(45%);
}
#to-top a .nav-icon::after {
  transform: rotate(-35deg) translateX(-45%);
  -webkit-transform: rotate(-35deg) translateX(-45%);
}

/* http://keithclark.co.uk/articles/pure-css-parallax-websites/ */

.flex-center {
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  display: -webkit-flex;
  -webkit-justify-content: center;
  -webkit-align-items: center;
  -webkit-flex-direction: column;

}

#loading-box,
.loading-box {
    transition: 1s;
    -webkit-transition: 1s;
}

.loading-box {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    z-index: 100000;
    background: rgba(0,0,0,.9);

    font-size: 1.5em;
    font-weight: bold;
}

#gallery {
  z-index: 10;
  position: fixed;

  top: 75px;
  width: 85vw;
  height: 85vh;
  transition: 1s;
}
/*
@media only screen and (max-width: 600px) {
  #gallery {
    top: 0;
    width: 100vw;
    height: 100vh;
  }
}*/

[class*='close-'] {
  color: #777;
  font: 32px/100% arial, sans-serif;
  text-decoration: none;
  text-shadow: 0 1px 0 #fff;
  
  position: absolute;
  right: 15px;
  top: 15px;
}

.close-thik:after {
  content: '✖'; /* UTF-8 symbol */
}

.close-thin:after {
  content: '×'; /* UTF-8 symbol */
}

.cssanimations .fade-out {
  opacity: 0;
}

.cssanimations .fade-in {
  opacity: 1;
}

.cssanimations .zoom-out {
  opacity: 0;
  transform: scale(0);
  -webkit-transform: scale(0);
}

.cssanimations .zoomed {
  opacity: 0;
  transform: scale(2);
  transition: 1s;
  -webkit-transform: scale(2);
  -webkit-transition: 1s;
}
.cssanimations .zoom-in {
  opacity: 1;
  transform: scale(1);
  -webkit-transform: scale(1);
}

/* The Music Box */
#music-box {
  cursor: pointer;
  position: fixed;
  right: 20px;
  top: 15px;
  z-index: 10;

  height: 35px;
  width: 55px;
  border-radius: 10px;
  border: 3px solid #8C4646; /* dark red */

  background-position: 50%;
  background-repeat: no-repeat;
  background-image: url(../img/pause.png);

  transform: scale(1);
  transform-origin: top right;
  transition: all 250ms;

  -webkit-transform: scale(1);
  -webkit-transform-origin: top right;
  -webkit-transition: all 250ms;

  /* Slide & fade in */
  opacity: 0;
  animation: side-bounce 1s 2s forwards;
  -webkit-animation: side-bounce 1s 2s forwards;
}

/* #music-box:active */

#music-box.paused {
  background-image: url(../img/play.png);
}

#music-box.paused:hover {
  background-image: url(../img/play_bright.png);
}

#music-box:hover {
  transform: scale(1.3);
  -webkit-transform: scale(1.3);
  border-color: #D96459;
  background-image: url(../img/pause_bright.png);
}

#music-box .bar {
  position: absolute;
  bottom: -1px;
  background: #8C4646;
  height: 3px;
  width: 0%;
  transition: background 250ms, height 500ms;
  -webkit-transition: background 250ms, height 500ms;
}

#music-box:hover .bar {
  height: 4px;
  background: #D96459;
}

@keyframes side-bounce {
  0%, 5% {
    opacity: 0;
    right: -150px;
  }
  35% {
    opacity: 1;
    right: 50px;
  }
  75% {
    right: 35px;
  }
  100% {
    opacity: 1;
    right: 20px;
  }
}


/**
 *  Header
 */
header {
  width: 100%;
  text-align: center;
  background-color: #000007;
}

header * {
  opacity: 0;
  z-index: 3;
  transition: opacity 1s, transform 1s;
  transform: scale(0.1);
  -webkit-transition: opacity 1s, transform 1s;
  -webkit-transform: scale(0.1);
}

header img {
  position: relative;
  margin-top: 25px;
  background: #000007;
  background: radial-gradient(#000007 55%, transparent 70%);
}

header p {
  color: white;
  font-size: 0.8em;
}

header h1 {
  font-size: 7em;
  text-shadow: 1px 1px 2px gray;
  font-family: 'Romanesco', cursive;

      opacity: 0;
      transform: scale(2);
      transition: 1s;
      -webkit-transform: scale(2);
      -webkit-transition: 1s;
}

/* Background image, filling out entire page */
/*
#background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;

  background-image: url(../img/background.svg);
  background-size: cover;
}
*/
.bg_box {
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    width: 100%;
    /* height: 100%;
    z-index: 0;*/

    height: 3500px;
    z-index: 1;

    background: url(../img/stars_1.svg) repeat 50% 0;
}
#stars2 {
    background-image: url(../img/stars_2.svg);
}
#stars3 {
    background-image: url(../img/stars_3.svg);
}

.hidden {
  visibility: hidden;
}

.centerH {
  left: 50%; right: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}

.centerV {
  top: 50%; bottom: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

img {
  z-index: 3;
  position: absolute;
  user-select: none;
  pointer-events: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}
/*
.boy-girl {
  position: absolute;
  width: 150px;
  height: 120px;
  top: 310px;
  right: 300px;
  z-index: 11;
}*/

img.moon {
  width: 15%;
  top: 10%;
  right: 5%;
  opacity: 1;
  z-index: 10;

  opacity: 0;
  pointer-events: visible;
  animation-delay: 1.5s;
  animation-duration: 2s;
  animation-fill-mode: both;
  -webkit-animation-delay: 1.5s;
  -webkit-animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  /* animation-name: moon-bounce; */
}

img.moon:hover,
img.moon:active {
  opacity: 1;
  perspective: 1000px;
  backface-visibility: hidden;

  animation: wiggle 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  transform-origin: 75% 25%;
  -webkit-animation: wiggle 0.82s cubic-bezier(.36,.07,.19,.97) both;
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-transform-origin: 75% 25%;
}

@keyframes wiggle {
  10%, 90% {
    transform: rotate3d(0, 0, 1, -2deg);
    -webkit-transform: rotate3d(0, 0, 1, -2deg);
  }
  
  20%, 80% {
    transform: rotate3d(0, 0, 1, 2deg);
    -webkit-transform: rotate3d(0, 0, 1, 2deg);
  }

  30%, 50%, 70% {
    transform: rotate3d(0, 0, 1, -1deg);
    -webkit-transform: rotate3d(0, 0, 1, -1deg);
  }

  40%, 60% {
    transform: rotate3d(0, 0, 1, 1deg);
    -webkit-transform: rotate3d(0, 0, 1, 1deg);
  }
}

img.moon:active {
  animation-name: moon-jump;
  animation-duration: 250ms;
  -webkit-animation-name: moon-jump;
  -webkit-animation-duration: 250ms;
}
@keyframes moon-jump {
  20% {
    transform: translateY(-15px);
    -webkit-transform: translateY(-15px);
  }
  35% {
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
  }
}

@keyframes moon-bounce {
  0% {
    opacity: 0;
    transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
  }
  5% {
    opacity: 0;
    transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
  }
  35% {
    opacity: 1;
    transform: translateY(25%);
    -webkit-transform: translateY(25%);
  }
  75% {
    transform: translateY(-5%);
    -webkit-transform: translateY(-5%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
    -webkit-transform: translateY(0%);
  }
}

a {
  color: #acb7c0;
  text-decoration: none;
  font-weight: bolder;
  font-family: "Open Sans", sans-serif;
}


h1, h2 {
  font-family: "Open Sans", sans-serif;
  font-weight: bold;
}


/**
 *  Twinkly stars
 */
/*
@keyframes move-twink-back {
  from {background-position:0 0;}
  to {background-position:-10000px 5000px;}
}

.stars, .twinkling, .clouds {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.stars {
    background: transparent url(../img/stars.png) repeat top center;
    z-index: -1;
}
.twinkling {
    background: transparent url(../img/twinkling.png) repeat top center;
    animation: move-twink-back 500s linear infinite;
}*/

.speak_bubble {
  position: absolute;
  top: 50px; 
  width: 150px;
}

.speak_bubble img {
  width: 100%;
}

.speak_bubble p {
  position: absolute;
  margin-top: 20px;
  width: 130px;
  color: black;
  font-size: 13pt;
  font-style: italic;
  text-align: center !important;
}

.letter {
  position: absolute;
  width: 550px;
  bottom: 175px;
  left: 300px;
  padding: 50px;
  transform: skewX(-10deg);
  -webkit-transform: skewX(-10deg);
  background-color: #EEE;
  border-radius: 10px;
  border: 4px solid gray;

  font-size: 30pt;
  font-weight: normal;
  line-height: normal;
  color: #333;
}

.letter .handwriting {
  font-family: initial;
}

.letter span.stamp {
  opacity: 0.4;
  width: 210px;
  height: 100px;
  float: right;
  position: absolute;
  top: 10px;
  right: 10px;
  background: transparent url(../img/4_letters/stamp_small.gif) no-repeat;
}

.letter img.stamp {
  opacity: 0.5;
  width: 75px;
  position: absolute;
  top: 10px;
  right: 135px;
}

.map_pin {
  top: -75px;
  width: 40px;
}

.rotate_pin {
  top: -75px;
  width: 40px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.marry_me {
  position: absolute;
  color: white;
  font-size: 2em;
  font-family: SpringTime;
}

/* --------------------------------
   Re-implementing timeline
   ...With flexboxes
----------------------------------- */

.timeline-block {

}

.timeline-img {
  width: 32px;
  height: 32px;
  left: 50%;
  padding: 4px;

  border-radius: 50%;
  border: 4px solid #8C4646;
  background-color: white;

  /* Force Hardware Acceleration in WebKit */
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;

}

.timeline-img img {
  width: 16px;
  height: 16px;/*
  margin-top: 6px;
  margin-left: 6px;*/
}
img.heart {
  position: relative;
  width: 75px;
  /* height: 75px; */
  margin-top: -66px;
  background-color: transparent;
}

.cssanimations .timeline-img.is-hidden {
  visibility: hidden;
}
.cssanimations .timeline-img.bounce-in {
  visibility: visible;
  animation: small-bounce 0.6s;
  -webkit-animation: small-bounce 0.6s;
}

.timeline .date {
  font-size: 13px;
  font-size: 0.8125rem;
  font-weight: bold;
  font-family: 'Indie Flower', cursive;
}

.timeline-scene {
  width: 100%;
  min-height: 650px;
  overflow: hidden;
  position: relative;

  display: inline;
  color: white;
  font-size: 18pt;
  transition: 600ms;
  -webkit-transition: 600ms;
}

.timeline-scene .timeline-background {
  padding: 40px;
  height: 646px;
  border-radius: 5px;
  z-index: 1;
}

.timeline-scene:before {
  content: "";
  width: 45%;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border: 2px solid #8C4646;
  border-right: 0px;
}

.timeline-scene:after {
  content: "";
  width: 45%;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border: 2px solid #8C4646;
  border-left: 0px;
  z-index: 0;
}


.timeline-scene img {
  position: absolute;
  /* width: 100%; */
}

.full-screen {
  position: absolute;
  top:0; bottom: 0; right: 0; left: 0;
}

svg {
  width: 100%;
  height: 100%;
}

.cd-timeline-block.info div[svg] {
  width: 500px;
  margin-right: 18px;
}

.cd-timeline-block.info > img {
  width: 50%;
  margin-left: -10px;
}

.timeline-textbox {
  display: inline;
  position: relative;
  color: white;
  font-size: 18pt;
  background-color: transparent;
  max-width: 500px;

  overflow: hidden;
  transition: 600ms;
  -webkit-transition: 600ms;
}

.timeline-background {
  position: relative;
  overflow: hidden;
  height: 100%;
  margin: 2px;
  padding: 20px;
  border-top-right-radius: 25px;
  border-bottom-left-radius: 25px;
  background-color: black;
}

.timeline-background * {
  z-index: 3;
}

.timeline-textbox:before {
  content: "";
  position: absolute;
  left: 0;
  right: 50%;
  top: 0;
  bottom: 0;
  margin-right: 60px;
  /* border-top-left-radius: 25px; */
  border-bottom-left-radius: 25px;
  border: 2px solid #8C4646;
  border-right: 0px;
}

.timeline-textbox:after {
  content: "";
  position: absolute;
  left: 50%;
  right: 0;
  top: 0;
  bottom: 0;
  margin-left: 60px;
  border-top-right-radius: 25px;
  /* border-bottom-right-radius: 25px; */
  border: 2px solid #8C4646;
  border-left: 0px;
}

.timeline-background p {
  margin-left: 10px;
  text-align: justify;
}

.first-char {
    float: left;
    font-family: SpringTime;
    font-size: 60px;
    padding-right: 10px;
    line-height: 89px;
    color: #8C4646;
    font-weight: 700;
}

.rest-of-line {
  margin-top: 30px;
  margin-left: 10px;
  margin-bottom: 15px;
  min-height: 50px;
}

/*
@media only screen and (min-width: 1170px) {
  .cssanimations .timeline-textbox.is-hidden {
    visibility: hidden;
  }
  .cssanimations .timeline-textbox.bounce-in {
    visibility: visible;
    animation: small-bounce 0.6s;
  }
}*/



/* --------------------------------
   Re-implementing animations
----------------------------------- */

@keyframes small-bounce {
  0% {
    opacity: 0;
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
  }
  60% {
    opacity: 1;
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
}

/* --------------------------------
Modules - reusable parts of our design
-------------------------------- */
.timeline-wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
  margin-top: -1px;

  /* The entire page color gradient */
  background-image: linear-gradient(to bottom, #000007 0%,
                                               #000007 25%,
                                               #588C7E 35%,
                                               #93BBB1 60%,
                                               white 100%);

  background-image: -webkit-linear-gradient(to bottom, #000007 0%,
                                                       #000007 25%,
                                                       #588C7E 35%,
                                                       #93BBB1 60%,
                                                       white 100%);
}


footer {
    position: relative;
    width: 2048px;
    height: 835px;
    margin-top: -25px;
}

#show-gallery {
  z-index: 10;
  cursor: pointer;
  font-size: 1.175em;
  margin-top: -75px;
  width: auto;
  border-radius: 4px;
  transform: rotate(-15deg) translateY(125px) translateX(-35px);

  background: white;
  border: 3px solid darkred;
  -webkit-box-shadow: 0px 0px 25px 5px rgba(0,0,0,0.25);
  -moz-box-shadow: 0px 0px 25px 5px rgba(0,0,0,0.25);
  box-shadow: 0px 0px 25px 5px rgba(0,0,0,0.25);
}

#show-gallery p {
  margin: 10px;
  color: #1b1b2d;
}

#show-gallery p b {
  font-weight: bold;
}

footer svg {
    padding-bottom: 64px;
}

footer img {
  width: 100px;
}

footer p {
  margin: 10px;
}

footer a {
  font-size: 15px;
  color: #8C4646;
  font-weight: bolder;
}
footer .note {
  text-align:left;
  font-size: 15px;
  font-style: italic;
  color:#8C4646;
}

.foot-letter {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 500px;
  font-size: 24pt;
  text-align: center;
  margin: 0 auto;
  padding: 0px 100px;
  overflow: hidden;
}

.foot-center {
  width: 880px;
  /* width: 1024px; */
  margin: 0 auto;
}

/* Subscribe for the wedding - form*/
input[type=text], select {
	padding: 12px 20px;
	margin: 8px 0;
	display: inline-block;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
}

input[name=name] {
	width: 100%;
}

input[name=amount] {
  width: 90px;
	height: 40px;
	margin: 8px 0;
	display: inline-block;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
  padding-left: 10px;
}

input[name=note],
input[type=submit],
textarea {
	width: 100%;
}

textarea {
  height: 128px;
	padding: 14px 20px;
	margin: 8px 0;
  border: 1px solid #ccc;
	border-radius: 4px;
  overflow: auto;
}

.hasPlaceholder {
  color: lightgray;
}

input[type=submit] {
	background-color: #8C4646;
	color: white;
	padding: 14px 20px;
	margin: 8px 0;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}

input[type=submit]:hover {
	background-color: #8C4646;
}

.cd-container {
  width: 90%;
  max-width: 1170px;
  margin: 0 auto;
}
.cd-container::after {
  /* clearfix */
  content: '';
  display: table;
  clear: both;
}

/* --------------------------------

Main components

-------------------------------- */
#cd-timeline {
  display: flex;
  align-items: center;
  flex-direction: column;

 display: -webkit-flex;
 -webkit-align-items: center;
 -webkit-flex-direction: column;
}

@media only screen and (max-width: 1200px) {
  #cd-timeline {
    width: 100%;
  }
  img.moon {
    top: 50px;
  }
}

.cd-timeline-block {
  position: relative;

  margin: -2px 0;
  line-height: 30px;
  padding: 198px 0;
  background-image: url(../img/box_start.svg), url(../img/box_end.svg);
  background-repeat: no-repeat, no-repeat;
  background-position: top center, bottom center;
}

.cd-timeline-block.scene {
  width: 100%;
  background-image: url(../img/box_start2.svg),
                    url(../img/box_end2.svg);
}

.cd-timeline-block:after {
  content: "";
  display: table;
  clear: both;
}
.cd-timeline-block:first-child {
  margin-top: 0;
}
.cd-timeline-block:last-child {
  margin-bottom: 0;
}





.cd-timeline-img {
  position: absolute;
  top: 15px;
  left: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px white,
              inset 0 2px 0 rgba(0, 0, 0, 0.08),
               0 3px 0 4px rgba(0, 0, 0, 0.05);
}
.cd-timeline-img img {
  display: block;
  width: 24px;
  height: 24px;
  position: relative;
  left: 50%;
  top: 50%;
  margin-left: -12px;
  margin-top: -12px;
}
.cd-timeline-img.cd-heart {
  background: #8A0707 url(../img/heart_curl.svg) 50% 50% no-repeat;
    background-size: 20px;
}
.cd-timeline-img.cd-picture {
  background: #75ce66;
}
.cd-timeline-img.cd-movie {
  background: #c03b44;
}
.cd-timeline-img.cd-location {
  background: #f0ca45;
}
@media only screen and (min-width: 1170px) {
  .cd-timeline-img {
    width: 32px;
    height: 32px;
    left: 50%;
    margin-left: -16px;
    /* Force Hardware Acceleration in WebKit */
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
  }
  .cssanimations .cd-timeline-img.is-hidden {
    visibility: hidden;
  }
  .cssanimations .cd-timeline-img.bounce-in {
    visibility: visible;
    -webkit-animation: cd-bounce-1 0.6s;
    -moz-animation: cd-bounce-1 0.6s;
    animation: cd-bounce-1 0.6s;
  }
}

@-webkit-keyframes cd-bounce-1 {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale(1.2);
  }

  100% {
    -webkit-transform: scale(1);
  }
}
@-moz-keyframes cd-bounce-1 {
  0% {
    opacity: 0;
    -moz-transform: scale(0.5);
  }

  60% {
    opacity: 1;
    -moz-transform: scale(1.2);
  }

  100% {
    -moz-transform: scale(1);
  }
}
@keyframes cd-bounce-1 {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
  }

  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}

.event {
  width: 100%;
  min-height: 50px;
  /* font-size: 12pt; */
  font-style: italic;
}

.event .date {
  font-size: 12pt;
  font-weight: bold;
  font-style: normal;
  /* font-family: 'Indie Flower', cursive; */
  position: relative;
  margin-bottom: 3px;
}
.date:after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  bottom: -1px;
  height: 2px;
}
.dennis .date:after {
  background-image: linear-gradient(90deg, transparent 15%, #8C4646);
}
.marta .date:after {
  background-image: linear-gradient(90deg, #8C4646, transparent 50%);
}

.dennis {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    flex-direction: column;

    display: -webkit-flex;
    -webkit-justify-content: flex-end;
    -webkit-align-items: flex-end;
    -webkit-flex-direction: column;


    text-align: right;
    margin-right: 440px;
    width: 375px;
}
.dennis > div {
  position: relative;
}
.dennis > div:before {
  content: "";
  display: block;
  position: absolute;
  top: 12px;
  right: -16px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #8C4646;
}

.marta {
  position: relative;
  margin-left: 440px;
  width: 375px;
}

.marta:before {
  content: "";
  display: block;
  position: absolute;
  margin-top: 12px;
  margin-left: -16px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #8C4646;
}

.timeline-filler {
  min-height: 50px;

  width: 44px;
  height: 100%;
  border-left: 2px solid #8C4646;
  border-right: 2px solid #8C4646;
}

.timeline-filler.black {
  color: #1b1b2d;
}

/*
  Cool animations
*/
.hinge {
  animation-name: hinge;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  -webkit-animation-name: hinge;
  -webkit-animation-duration: 2s;
  -webkit-animation-fill-mode: forwards;
}

@keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  20%, 60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  40%, 80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, -300px, 0) rotate3d(0, 0, 1, 160deg);
    transform: translate3d(0, -300px, 0) rotate3d(0, 0, 1, 160deg);
    opacity: 0;
  }
}

/* Mobile device screens */
@media only screen and (max-width: 1200px) {
  body {
    font-size: 150%;
  }
  .loading-box {
      font-size: 2em;
  }
  .speak_bubble p {
    width: 200px;
    font-size: 18pt !important;
    margin-left: -30px;
  }
  .speak_bubble img {
    width: 200px;
    margin-top: -15px;
    margin-left: -30px;
  }
  .event .date {
    font-size: 20px !important;
  }
  .timeline-scene {
    font-size: 24pt;
  }
  .timeline-textbox {
    max-width: 750px !important;
  }
  .timeline-textbox.special {
    width: 340px !important;
  }

  .timeline-background p,
  .rest-of-line {
    font-size: 24pt;
  }
}