/*

To Do:

	- Add Facebook graph image/meta
	- Fix Photoshop PNG export and re-export all images
	- Replace with JPGs where it makes sense
	- Cleanup (remove files, cruft etc.)
	- Make a better favicon
	- Optimize video better
	- **REMOVE** indexing blocks from <meta> and robots.txt
	- VIDEO does not work in IE 10
	- Volume slider is jerky on iOS/fullscreen
	- Downscale oversized JPGs/PNGs for .screens

*/
body, html, #page {
  min-height: 4508px; }

body {
  margin: 0 auto;
  background-color: white;
  width: 1242px; }
  body.loading * {
    animation-name: none !important; }

.no-pointer-events, #page-overlay, #preview-video .video-wrapper {
  pointer-events: none; }

a.image-block {
  display: block; }
  a.image-block > img {
    display: block; }

img, video {
  display: block; }

img {
  user-select: none;
  -webkit-user-drag: none; }

#preload {
  display: none; }

#page {
  background-color: #cae6f9;
  background-image: url("../img/stickers_background.jpg");
  background-position: 50% 0%;
  background-repeat: no-repeat;
  position: relative; }

.horizontal-center, #mojis-group, #mojis-logo, #moji-photos, #app-store, #smallmedium-logo {
  left: 50%;
  transform: translateX(-50%); }

.vertical-center {
  top: 50%;
  transform: translateY(-50%); }

@keyframes sway {
  0% {
    transform: rotate(0.3deg); }
  100% {
    transform: rotate(-0.3deg); } }

.sway {
  transform-origin: 50% 50%;
  animation-name: sway;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out; }

#page {
  animation-duration: 1s;
  animation-delay: 0.95s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }

@keyframes background-contract {
  100% {
    background-size: 100%; } }

#page-overlay {
  position: absolute;
  z-index: 5;
  width: 100%;
  height: 100%;
  background-color: white;
  opacity: 1;
  animation-name: page-reveal;
  animation-duration: 0.75s;
  animation-delay: 0.95s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-timing-function: ease-out; }

@keyframes page-reveal {
  100% {
    opacity: 0; } }

#mojis-group {
  position: absolute;
  top: 191px;
  z-index: 6;
  transform-style: preserve-3d;
  perspective: 500px; }
  #mojis-group > img {
    animation-name: mojis-in, mojis-loop;
    animation-duration: 0.6s, 1s;
    animation-delay: 0.35s, 0.95s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1, infinite;
    animation-direction: normal, alternate;
    animation-timing-function: cubic-bezier(0.06, 1.23, 0.78, 1.1), ease-in-out;
    visibility: hidden;
    transform: scale(0.25) translateY(75%);
    filter: brightness(25%);
    transform-origin: 50% 60%; }

@keyframes mojis-in {
  0% {
    visibility: visible; }
  100% {
    visibility: visible;
    transform: scale(0.99) translateY(0%);
    filter: brightness(100%); } }

@keyframes mojis-loop {
  0% {
    transform: scale(0.99) translateY(0%); }
  100% {
    transform: scale(1) translateY(-0.5%); } }

#mojis-logo {
  position: absolute;
  top: 404px;
  z-index: 7; }
  #mojis-logo > img {
    animation-name: logo-in;
    animation-duration: 0.7s;
    animation-delay: 0.25s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-timing-function: cubic-bezier(0.06, 1.23, 0.78, 1.1);
    transform: scale(0);
    transform-origin: 50% 50%; }

@keyframes logo-in {
  100% {
    transform: scale(1); } }

/*
#photo-strip {

	position: absolute;

	animation-name: photo-strip-fall;
	animation-duration: $photo-strip-duration;
	animation-delay: $photo-strip-delay;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-timing-function: linear;

	transform-origin: 50% -50%;

	z-index: 8;

	visibility: hidden;

}

@keyframes photo-strip-fall {

	0% {
		visibility: visible;
		transform: translateX(600px) translateY(315px) rotate(120deg);
	}

	99.99% {
		visibility: visible;
		transform: translateX(-45px) translateY(1981px) rotate(0);
	}


}
*/
#moji-photos {
  position: absolute;
  top: 1981px;
  z-index: 2;
  opacity: 0;
  animation-name: moji-photos-in;
  animation-duration: 0.75s;
  animation-delay: 0.95s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-timing-function: ease-out; }

@keyframes moji-photos-in {
  100% {
    opacity: 1; } }

#app-store {
  position: absolute;
  top: 4034px;
  z-index: 1; }

.wiggle, #app-store > img {
  transform-origin: 50% 50%;
  animation-name: wiggle-loop;
  animation-fill-mode: forwards;
  animation-delay: 0.5s;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out; }

@keyframes wiggle-loop {
  0% {
    transform: rotate(1deg); }
  100% {
    transform: rotate(-1deg); } }

#smallmedium-logo {
  position: absolute;
  top: 4290px;
  z-index: 1; }

.screen {
  position: absolute;
  z-index: 1; }
  .screen.top {
    top: 1125px; }
  .screen.bottom {
    top: 3017px; }
  .screen.left {
    left: 85px; }
  .screen.right {
    right: 85px; }
  .screen img, .screen video {
    display: block;
    width: 530px;
    height: auto; }
  .screen > .outline {
    outline: 1px solid rgba(0, 0, 0, 0.25);
    outline-offset: -1px; }

#preview-video {
  z-index: 3;
  cursor: pointer;
  /*
	transition-property: transform;

	// On hover properties
	transition-delay: 1s;
	transition-duration: 0.5s;
	transition-timing-function: ease-in;

	&:hover {

		transform: scale(1.1);

		// On blur properties
		transition-delay: 0s;
		transition-duration: 0.25s;
		transition-timing-function: ease-out;

	}
	*/ }
  #preview-video .video-wrapper {
    position: absolute;
    z-index: 4; }
    #preview-video .video-wrapper img.autosize {
      visibility: hidden;
      width: 530px;
      height: auto; }
  #preview-video video {
    background-color: #fefefe; }

video::-webkit-media-controls-panel {
  display: flex !important;
  /*opacity: 1 !important;*/ }

/*video::-webkit-media-controls-overlay-play-button {
    display: none !important;
}*/
.ui-dialog {
  font-size: 150% !important; }

.ui-dialog .ui-dialog-buttonpane {
  text-align: center !important; }

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
  float: none !important; }

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button {
  margin-right: 0px !important; }

.ui-dialog .ui-dialog-titlebar {
  text-align: center !important; }

.ui-dialog-title {
  width: 100% !important; }

.ui-dialog-titlebar-close {
  display: none !important; }

.ui-dialog-titlebar {
  color: white !important;
  background-color: #bd1f6a !important; }

.color-magenta {
  color: #bd1f6a !important; }

.ui-widget-overlay.override {
  width: 100%;
  height: 100%;
  z-index: 10;
  background-color: black;
  opacity: 0.75; }

#rebrand {
  display: none; }
  #rebrand p {
    text-align: center; }