.bokeh {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

#c1 {
  opacity: 0;
}

#c2 {
  opacity: 0.15;
}

#spinner {
  display: inline-block;
  position: absolute;
  width: 80px;
  height: 80px;
  left: 50%;
  top: 50%;
  margin-left: -40px;
  margin-top: -40px;
  z-index: 10;
}
#spinner div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 8px solid #fff;
  border-radius: 50%;
  animation: spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #fff transparent transparent transparent;
}
#spinner div:nth-child(1) {
  animation-delay: -0.45s;
}
#spinner div:nth-child(2) {
  animation-delay: -0.3s;
}
#spinner div:nth-child(3) {
  animation-delay: -0.15s;
}

@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
#ogimage {
  width: 1200px;
  height: 630px;
  position: absolute;
  left: 0;
  top: 0;
  background: #6430ff;
  overflow: hidden;
  z-index: -1;
  display: none;
}
#ogimage .reactions_cloud {
  position: absolute;
  left: 0;
  height: 630px;
  width: 300px;
  bottom: 10%;
  background: url(../images/reactions_blurred.png) no-repeat center center;
  background-size: 100% auto;
  background-position: bottom center;
  z-index: -1;
}
#ogimage .btn_play {
  position: absolute;
  width: 100%;
  left: 0;
  z-index: 10;
  height: 100%;
  background: rgba(0, 0, 0, 0.2) url(../images/play.png) no-repeat center center;
  background-size: auto 60%;
}
#ogimage .title {
  position: absolute;
  color: #fff;
  font-size: 60px;
  font-weight: 200;
  line-height: 125%;
  top: 120px;
  right: 0;
  margin-top: -100px;
  width: 100%;
  height: 200px;
  z-index: 11;
}
#ogimage .title b {
  font-weight: 800;
}
#ogimage .table_book {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: url(../images/book_spread.png) no-repeat center center;
  background-size: 100% auto;
  z-index: -1;
}
#ogimage .table_book::before {
  content: "";
  display: block;
  padding: 7%;
}
#ogimage .photo {
  position: absolute;
  vertical-align: middle;
  top: 21%;
  right: 35%;
  transform: translate3d(0, 50vw, 0) rotateX(0) scale(0);
  width: 360px;
  height: 360px;
}
#ogimage .photo.static:nth-child(1) {
  transform: translate3d(50%, 0, 0) rotate(10deg) scale(0.7);
  filter: blur(4px);
}
#ogimage .photo.static:nth-child(2) {
  transform: translate3d(-50%, 0, 0) rotate(-5deg) scale(0.7);
  filter: blur(4px);
}
#ogimage .photo.static:nth-child(3) {
  transform: rotate(5deg);
}
#ogimage .photo::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 360px;
  width: 0;
}
#ogimage .photo img {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  max-height: 100%;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.3);
  border: 10px solid #fff;
  margin: -10vw;
  border-width: 12px;
}
#ogimage .place {
  position: absolute;
  width: 630px;
  left: 0;
  bottom: 13%;
  height: 10%;
  transform-origin: center bottom;
  background: url(../images/marker.png) no-repeat center center;
  background-size: contain;
}
#ogimage .place span {
  position: absolute;
  width: 100%;
  left: 0;
  color: #fff;
  font-weight: 800;
  z-index: 10;
  line-height: 125%;
  font-size: 24px;
  margin-top: 24px;
}

#video {
  display: inline-block;
  position: relative;
  width: 100vw;
  height: 100vw;
  background: #6430ff;
  overflow: hidden;
  box-shadow: 0 5px 40px rgba(0, 0, 0, 0.3);
}
#video #mute_toggle {
  position: absolute;
  right: 5%;
  bottom: 5%;
  width: 5%;
  height: 5%;
  background: url(../images/icon-unmuted.png) no-repeat center center;
  background-size: contain;
  cursor: pointer;
}
#video #mute_toggle.muted {
  background-image: url(../images/icon-muted.png);
}
#video #error_message {
  color: #fff;
  font-size: 24px;
  padding: 30px;
}
#video #error_message b {
  font-weight: 800;
  font-size: 40px;
  line-height: 125%;
}
#video #title_message {
  color: #fff;
  padding: 30px;
  margin-top: 23vw;
  font-size: 5vw;
}
@media only screen and (min-width: 600px) {
  #video #title_message {
    margin-top: 170px;
    font-size: 30px;
  }
}
#video #title_message b {
  font-weight: 800;
  font-size: 200%;
  line-height: 125%;
}
#video #logo {
  position: absolute;
  display: none;
  width: 100%;
  top: 0;
  bottom: 0;
  background: url(../images/pastbook_logo_white.png) no-repeat center center;
  background-size: 40% auto;
  opacity: 0;
  animation: fadeinout 5s ease-in-out 1;
}
#video #btn_play {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2) url(../images/play.png) no-repeat center center;
  background-size: 40% 40%;
  cursor: pointer;
  display: none;
}
#video #spinner {
  display: none;
}
#video.init, #video.loading {
  background: #6430ff url(../images/reactions_blurred.png) no-repeat center center;
  background-size: contain;
  background-position: center -10vw;
}
#video.init #table_book, #video.loading #table_book {
  filter: blur(3px);
}
#video.init #mute_toggle,
#video.init #message_container,
#video.init #like_counter,
#video.init #place_container,
#video.init #photo_container, #video.loading #mute_toggle,
#video.loading #message_container,
#video.loading #like_counter,
#video.loading #place_container,
#video.loading #photo_container {
  display: none;
}
#video.init #btn_play {
  display: block;
}
#video.loading #spinner {
  display: inline-block;
}
@media only screen and (min-width: 600px) {
  #video {
    width: 600px;
    height: 600px;
  }
}
#video #table_book {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: url(../images/book_spread.png) no-repeat center center;
  background-size: 100% auto;
}
#video #table_book::before {
  content: "";
  display: block;
  padding: 7%;
}
#video #like_counter {
  position: absolute;
  text-align: center;
  z-index: 10;
  color: #fff;
  bottom: 11vw;
  width: 20vw;
  height: 10vw;
  font-weight: 200;
  font-size: 5vw;
}
@media only screen and (min-width: 600px) {
  #video #like_counter {
    font-size: 30px;
    bottom: 66px;
    width: 120px;
    height: 60px;
  }
}
#video #like_counter div.reaction {
  position: absolute;
  width: 10vw;
  height: 10vw;
  left: 5vw;
  top: -2vw;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transform: scale(0);
}
@media only screen and (min-width: 600px) {
  #video #like_counter div.reaction {
    width: 60px;
    height: 60px;
    left: 30px;
    top: -12px;
  }
}
#video #like_counter div.reaction-like {
  background-image: url(../images/reaction_like.png);
}
#video #like_counter div.reaction-love {
  background-image: url(../images/reaction_love.png);
}
#video #like_counter div.reaction-1 {
  animation: bubblesideways1 2s ease-in-out 1, bubbleup 2s ease-in 1;
}
#video #like_counter div.reaction-2 {
  animation: bubblesideways2 2s ease-in-out 1, bubbleup 2s ease-in 1;
}
#video #like_counter div.reaction-3 {
  animation: bubblesideways3 2s ease-in-out 1, bubbleup 2s ease-in 1;
}
#video #like_counter div.reaction-4 {
  animation: bubblesideways4 2s ease-in-out 1, bubbleup 2s ease-in 1;
}
#video #like_counter div.reaction-5 {
  animation: bubblesideways5 2s ease-in-out 1, bubbleup 2s ease-in 1;
}
#video #like_counter div.reaction-6 {
  animation: bubblesideways6 2s ease-in-out 1, bubbleup 2s ease-in 1;
}
#video #like_counter div.reaction-7 {
  animation: bubblesideways7 2s ease-in-out 1, bubbleup 2s ease-in 1;
}
#video #like_counter div.reaction-8 {
  animation: bubblesideways8 2s ease-in-out 1, bubbleup 2s ease-in 1;
}
#video #like_counter div.reaction-9 {
  animation: bubblesideways9 2s ease-in-out 1, bubbleup 2s ease-in 1;
}
#video #like_counter div.reaction-10 {
  animation: bubblesideways10 2s ease-in-out 1, bubbleup 2s ease-in 1;
}
#video .photo {
  position: absolute;
  vertical-align: middle;
  width: 60vw;
  height: 60vw;
  top: 50%;
  left: 50%;
  margin-top: -37.5vw;
  margin-left: -30vw;
  transform: translate3d(0, 50vw, 0) rotateX(0) scale(0);
  animation: flybyphoto 3s ease-in-out 1;
}
#video .photo.static {
  top: 55%;
  animation: none;
}
#video .photo.static:nth-child(1) {
  transform: translate3d(30%, 0, 0) rotate(10deg) scale(0.7);
  filter: blur(4px);
}
#video .photo.static:nth-child(2) {
  transform: translate3d(-30%, 0, 0) rotate(-5deg) scale(0.7);
  filter: blur(4px);
}
#video .photo.static:nth-child(3) {
  transform: rotate(5deg);
}
@media only screen and (min-width: 600px) {
  #video .photo {
    width: 360px;
    height: 360px;
    margin-top: -225px;
    margin-left: -180px;
  }
}
#video .photo .date {
  position: absolute;
  width: 100%;
  color: rgb(255, 255, 255);
  top: -12%;
  font-weight: 200;
  font-size: 3vw;
}
@media only screen and (min-width: 600px) {
  #video .photo .date {
    font-size: 18px;
  }
}
#video .photo::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 60vw;
  width: 0;
}
@media only screen and (min-width: 600px) {
  #video .photo::before {
    height: 360px;
  }
}
#video .photo img {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  max-height: 100%;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.3);
  border: 10px solid #fff;
  border-width: 1vw;
  margin: -10vw;
}
@media only screen and (min-width: 600px) {
  #video .photo img {
    border-width: 6px;
  }
}
#video #place {
  position: absolute;
  width: 60%;
  left: 20%;
  bottom: 10%;
  height: 15%;
  transform-origin: center bottom;
  animation: showplace 0.8s ease-in 1;
  transition: transform 0.2s ease-out;
}
#video #place.static, #video #place.static::before, #video #place.static span {
  animation: none;
  transition: none;
}
#video #place.static {
  background: url(../images/marker.png) no-repeat center center;
  background-size: contain;
}
#video #place.hide {
  transform: translate3d(0, 3vw, 0) scale(0);
  z-index: 10;
}
@media only screen and (min-width: 600px) {
  #video #place.hide {
    transform: translate3d(0, 18px, 0) scale(0);
  }
}
#video #place::before {
  content: "";
  position: absolute;
  background: url(../images/marker.png) no-repeat center center;
  left: 35%;
  width: 30%;
  height: 100%;
  background-size: contain;
  transform-origin: center bottom;
  z-index: 9;
  animation: showplacemarker 1.5s ease-out 1;
}
#video #place span {
  position: absolute;
  width: 100%;
  left: 0;
  color: #fff;
  font-weight: 800;
  font-size: 4vw;
  z-index: 10;
  margin-top: 4vw;
  line-height: 125%;
  animation: showplacetext 1s ease-out 1;
}
@media only screen and (min-width: 600px) {
  #video #place span {
    font-size: 24px;
    margin-top: 24px;
  }
}
#video #message_container {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  vertical-align: middle;
}
#video #message_container .message {
  display: block;
  color: #fff;
  font-size: 9vw;
  line-height: 150%;
  font-weight: 200;
  text-shadow: 0 0 5vw rgba(0, 0, 0, 0.5);
  text-align: center;
  animation: fadein 0.5s ease-in 1;
}
@media only screen and (min-width: 600px) {
  #video #message_container .message {
    font-size: 54px;
  }
}
#video #message_container .message::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  height: 100vw;
  width: 0;
}
@media only screen and (min-width: 600px) {
  #video #message_container .message::before {
    height: 600px;
  }
}
#video #message_container .message.big {
  font-weight: 800;
  font-size: 20vw;
}
@media only screen and (min-width: 600px) {
  #video #message_container .message.big {
    font-size: 120px;
  }
}
#video #message_container .message.boom {
  opacity: 0;
  animation: boom 1.5s ease-in 1;
}
#video #message_container .message.fadeInOut {
  opacity: 0;
  animation: fadeinout 2s ease-in 1;
}

@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeinout {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes boom {
  0% {
    transform: scale(20);
    opacity: 0;
  }
  35% {
    transform: scale(1);
    opacity: 1;
  }
  70% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes showplace {
  0% {
    transform: rotate(180deg);
  }
  40% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes showplacetext {
  0% {
    transform: translate3d(0, 10vw, 0) scale(0);
  }
  50% {
    transform: translate3d(0, 10vw, 0) scale(0);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}
@keyframes showplacemarker {
  0% {
    transform: rotate(20deg) scale(1);
  }
  30% {
    transform: rotate(20deg) scale(1);
  }
  50% {
    transform: rotate(-30deg) scale(1);
  }
  70% {
    transform: rotate(20deg) scale(1);
  }
  85% {
    transform: rotate(-5deg) scale(1);
  }
  100% {
    transform: rotate(0) scale(1);
  }
}
@keyframes flybyphoto {
  0% {
    transform: translate3d(0, 50vw, 0) scale(0) rotate(0);
  }
  10% {
    transform: translate3d(20vw, 25vw, 0) scale(0.5) rotate(30deg);
  }
  25% {
    transform: translate3d(1vw, 0, 0) rotate(2deg) scale(1);
  }
  75% {
    transform: translate3d(-1vw, 0, 0) rotate(-2deg) scale(1);
  }
  90% {
    transform: translate3d(-20vw, 25vw, 0) rotate(-150deg) scale(0.5);
  }
  100% {
    transform: translate3d(0, 50vw, 0) rotate(0) scale(0);
  }
}
@keyframes bubbleup {
  0% {
    top: -2vw;
    @media only screen and (min-width: 600px) {
      top: -12px;
    }
  }
  100% {
    top: -100vw;
    @media only screen and (min-width: 600px) {
      top: -600px;
    }
  }
}
@keyframes showpoup {
  0% {
    transform: scale(0);
  }
  95% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bubblesideways1 {
  0% {
    transform: scale(0) translate3d(0vw, 0, 0) rotate(31deg);
  }
  20% {
    transform: scale(0.4) translate3d(10vw, 0, 0) rotate(17deg);
  }
  40% {
    transform: scale(0.6) translate3d(16vw, 0, 0) rotate(46deg);
  }
  60% {
    transform: scale(0.8) translate3d(24vw, 0, 0) rotate(33deg);
  }
  80% {
    transform: scale(0.9) translate3d(8vw, 0, 0) rotate(9deg);
  }
  100% {
    transform: scale(1) translate3d(24vw, 0, 0) rotate(23deg);
  }
}
@keyframes bubblesideways2 {
  0% {
    transform: scale(0) translate3d(0vw, 0, 0) rotate(11deg);
  }
  20% {
    transform: scale(0.4) translate3d(9vw, 0, 0) rotate(17deg);
  }
  40% {
    transform: scale(0.6) translate3d(16vw, 0, 0) rotate(6deg);
  }
  60% {
    transform: scale(0.8) translate3d(21vw, 0, 0) rotate(18deg);
  }
  80% {
    transform: scale(0.9) translate3d(16vw, 0, 0) rotate(2deg);
  }
  100% {
    transform: scale(1) translate3d(40vw, 0, 0) rotate(23deg);
  }
}
@keyframes bubblesideways3 {
  0% {
    transform: scale(0) translate3d(0vw, 0, 0) rotate(6deg);
  }
  20% {
    transform: scale(0.4) translate3d(3vw, 0, 0) rotate(47deg);
  }
  40% {
    transform: scale(0.6) translate3d(10vw, 0, 0) rotate(43deg);
  }
  60% {
    transform: scale(0.8) translate3d(27vw, 0, 0) rotate(20deg);
  }
  80% {
    transform: scale(0.9) translate3d(32vw, 0, 0) rotate(5deg);
  }
  100% {
    transform: scale(1) translate3d(4vw, 0, 0) rotate(8deg);
  }
}
@keyframes bubblesideways4 {
  0% {
    transform: scale(0) translate3d(0vw, 0, 0) rotate(40deg);
  }
  20% {
    transform: scale(0.4) translate3d(10vw, 0, 0) rotate(45deg);
  }
  40% {
    transform: scale(0.6) translate3d(12vw, 0, 0) rotate(13deg);
  }
  60% {
    transform: scale(0.8) translate3d(27vw, 0, 0) rotate(11deg);
  }
  80% {
    transform: scale(0.9) translate3d(40vw, 0, 0) rotate(50deg);
  }
  100% {
    transform: scale(1) translate3d(28vw, 0, 0) rotate(10deg);
  }
}
@keyframes bubblesideways5 {
  0% {
    transform: scale(0) translate3d(0vw, 0, 0) rotate(36deg);
  }
  20% {
    transform: scale(0.4) translate3d(2vw, 0, 0) rotate(33deg);
  }
  40% {
    transform: scale(0.6) translate3d(4vw, 0, 0) rotate(5deg);
  }
  60% {
    transform: scale(0.8) translate3d(27vw, 0, 0) rotate(17deg);
  }
  80% {
    transform: scale(0.9) translate3d(20vw, 0, 0) rotate(2deg);
  }
  100% {
    transform: scale(1) translate3d(4vw, 0, 0) rotate(32deg);
  }
}
@keyframes bubblesideways6 {
  0% {
    transform: scale(0) translate3d(0vw, 0, 0) rotate(10deg);
  }
  20% {
    transform: scale(0.4) translate3d(9vw, 0, 0) rotate(23deg);
  }
  40% {
    transform: scale(0.6) translate3d(2vw, 0, 0) rotate(30deg);
  }
  60% {
    transform: scale(0.8) translate3d(30vw, 0, 0) rotate(15deg);
  }
  80% {
    transform: scale(0.9) translate3d(32vw, 0, 0) rotate(34deg);
  }
  100% {
    transform: scale(1) translate3d(8vw, 0, 0) rotate(50deg);
  }
}
@keyframes bubblesideways7 {
  0% {
    transform: scale(0) translate3d(0vw, 0, 0) rotate(49deg);
  }
  20% {
    transform: scale(0.4) translate3d(10vw, 0, 0) rotate(46deg);
  }
  40% {
    transform: scale(0.6) translate3d(8vw, 0, 0) rotate(23deg);
  }
  60% {
    transform: scale(0.8) translate3d(6vw, 0, 0) rotate(28deg);
  }
  80% {
    transform: scale(0.9) translate3d(36vw, 0, 0) rotate(38deg);
  }
  100% {
    transform: scale(1) translate3d(36vw, 0, 0) rotate(42deg);
  }
}
@keyframes bubblesideways8 {
  0% {
    transform: scale(0) translate3d(0vw, 0, 0) rotate(9deg);
  }
  20% {
    transform: scale(0.4) translate3d(8vw, 0, 0) rotate(39deg);
  }
  40% {
    transform: scale(0.6) translate3d(6vw, 0, 0) rotate(5deg);
  }
  60% {
    transform: scale(0.8) translate3d(30vw, 0, 0) rotate(42deg);
  }
  80% {
    transform: scale(0.9) translate3d(16vw, 0, 0) rotate(37deg);
  }
  100% {
    transform: scale(1) translate3d(24vw, 0, 0) rotate(37deg);
  }
}
@keyframes bubblesideways9 {
  0% {
    transform: scale(0) translate3d(0vw, 0, 0) rotate(46deg);
  }
  20% {
    transform: scale(0.4) translate3d(8vw, 0, 0) rotate(12deg);
  }
  40% {
    transform: scale(0.6) translate3d(6vw, 0, 0) rotate(35deg);
  }
  60% {
    transform: scale(0.8) translate3d(9vw, 0, 0) rotate(19deg);
  }
  80% {
    transform: scale(0.9) translate3d(16vw, 0, 0) rotate(41deg);
  }
  100% {
    transform: scale(1) translate3d(36vw, 0, 0) rotate(31deg);
  }
}
@keyframes bubblesideways10 {
  0% {
    transform: scale(0) translate3d(0vw, 0, 0) rotate(9deg);
  }
  20% {
    transform: scale(0.4) translate3d(6vw, 0, 0) rotate(7deg);
  }
  40% {
    transform: scale(0.6) translate3d(4vw, 0, 0) rotate(28deg);
  }
  60% {
    transform: scale(0.8) translate3d(9vw, 0, 0) rotate(28deg);
  }
  80% {
    transform: scale(0.9) translate3d(40vw, 0, 0) rotate(21deg);
  }
  100% {
    transform: scale(1) translate3d(12vw, 0, 0) rotate(10deg);
  }
}/*# sourceMappingURL=video.css.map */