@import "https://fonts.googleapis.com/css?family=Roboto:100,300,400";
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

article,
aside,
details,
figcaption,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block; }

figure {
  display: inline-block; }

html {
  box-sizing: border-box; }

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

body {
  line-height: 1; }

ol,
ul,
li {
  list-style: none; }

blockquote,
q {
  quotes: none; }

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

a {
  text-decoration: none; }

input {
  line-height: normal; }

/*
SCSS variables are information about icon's compiled state, stored under its original file name

.icon-home {
  width: $icon-home-width;
}

The large array-like variables contain all information about a single icon
$icon-home: x y offset_x offset_y width height total_width total_height image_path;

At the bottom of this section, we provide information about the spritesheet itself
$spritesheet: width height image $spritesheet-sprites;
*/
/*
These "retina group" variables are mappings for the naming and pairing of normal and retina sprites.

The list formatted variables are intended for mixins like `retina-sprite` and `retina-sprites`.
*/
/*
The provided mixins are intended to be used with the array-like variables

.icon-home {
  @include sprite-width($icon-home);
}

.icon-email {
  @include sprite($icon-email);
}

Example usage in HTML:

`display: block` sprite:
<div class="icon-home"></div>

To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:

// CSS
.icon {
  display: inline-block;
}

// HTML
<i class="icon icon-home"></i>
*/
/*
The `retina-sprite` mixin sets up rules and a media query for a sprite/retina sprite.
  It should be used with a "retina group" variable.

The media query is from CSS Tricks: https://css-tricks.com/snippets/css/retina-display-media-query/

$icon-home-group: ('icon-home', $icon-home, $icon-home-2x, );

.icon-home {
  @include retina-sprite($icon-home-group);
}
*/
/*
The `sprites` mixin generates identical output to the CSS template
  but can be overridden inside of SCSS

@include sprites($spritesheet-sprites);
*/
/*
The `retina-sprites` mixin generates a CSS rule and media query for retina groups
  This yields the same output as CSS retina template but can be overridden in SCSS

@include retina-sprites($retina-groups);
*/
.icon-autodownload {
  background-image: url(../sprites/features.png);
  background-position: 0px 0px;
  width: 48px;
  height: 48px; }

.icon-autorename {
  background-image: url(../sprites/features.png);
  background-position: -48px 0px;
  width: 48px;
  height: 48px; }

.icon-dragdrop {
  background-image: url(../sprites/features.png);
  background-position: 0px -48px;
  width: 48px;
  height: 48px; }

.icon-languages {
  background-image: url(../sprites/features.png);
  background-position: -48px -48px;
  width: 48px;
  height: 48px; }

.icon-textsearch {
  background-image: url(../sprites/features.png);
  background-position: -96px 0px;
  width: 48px;
  height: 48px; }

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .icon-autodownload {
    background-image: url(../sprites/features.png);
    background-position: 0px 0px;
    width: 48px;
    height: 48px; } }
  @media (-webkit-min-device-pixel-ratio: 2) and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) and (-webkit-min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi), (min-resolution: 192dpi) and (min-resolution: 192dpi) {
    .icon-autodownload {
      background-image: url(../sprites/features@2x.png);
      background-size: 144px 96px; } }

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .icon-autorename {
    background-image: url(../sprites/features.png);
    background-position: -48px 0px;
    width: 48px;
    height: 48px; } }
  @media (-webkit-min-device-pixel-ratio: 2) and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) and (-webkit-min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi), (min-resolution: 192dpi) and (min-resolution: 192dpi) {
    .icon-autorename {
      background-image: url(../sprites/features@2x.png);
      background-size: 144px 96px; } }

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .icon-dragdrop {
    background-image: url(../sprites/features.png);
    background-position: 0px -48px;
    width: 48px;
    height: 48px; } }
  @media (-webkit-min-device-pixel-ratio: 2) and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) and (-webkit-min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi), (min-resolution: 192dpi) and (min-resolution: 192dpi) {
    .icon-dragdrop {
      background-image: url(../sprites/features@2x.png);
      background-size: 144px 96px; } }

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .icon-languages {
    background-image: url(../sprites/features.png);
    background-position: -48px -48px;
    width: 48px;
    height: 48px; } }
  @media (-webkit-min-device-pixel-ratio: 2) and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) and (-webkit-min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi), (min-resolution: 192dpi) and (min-resolution: 192dpi) {
    .icon-languages {
      background-image: url(../sprites/features@2x.png);
      background-size: 144px 96px; } }

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .icon-textsearch {
    background-image: url(../sprites/features.png);
    background-position: -96px 0px;
    width: 48px;
    height: 48px; } }
  @media (-webkit-min-device-pixel-ratio: 2) and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) and (-webkit-min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi), (min-resolution: 192dpi) and (min-resolution: 192dpi) {
    .icon-textsearch {
      background-image: url(../sprites/features@2x.png);
      background-size: 144px 96px; } }

body {
  font: 14px/1 Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: #fff;
  background: #000 url("/assets/static/images/bg.jpg") center center;
  background-size: cover;
  overflow: hidden; }

h1 {
  font-size: 80px;
  font-weight: 100; }

p {
  font-size: 24px;
  font-weight: 300;
  line-height: 1.3;
  max-width: 400px;
  margin: 25px auto;
  color: rgba(255, 255, 255, 0.7); }

a {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: all .2s ease-out; }
  a:hover {
    color: white; }

small {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  margin-left: 10px; }

ul {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0 auto 20px auto;
  max-width: 350px; }

li {
  width: 48px;
  height: 48px; }

header {
  position: absolute;
  padding: 32px;
  width: 100%;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  display: flex;
  justify-content: space-between;
  z-index: 999; }
  header span {
    display: inline-block;
    vertical-align: middle; }

.logo {
  position: absolute;
  left: 50%;
  width: 46px;
  height: 46px;
  background: url("/assets/static/images/icon.png") no-repeat;
  margin: -10px 0 0 -23px; }
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo {
      background: url("/assets/static/images/icon@2x.png") no-repeat;
      background-size: 100% 100%; } }

.fb-like.fb_iframe_widget span {
  vertical-align: initial !important; }

@media (max-width: 760px) {
  header span {
    display: none; }
  header .logo {
    display: block; } }

#wrapper {
  position: relative;
  margin: 0 auto;
  width: 100vw;
  height: 100vh;
  max-width: 1024px; }

.content {
  height: 100%;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: center; }

.icon {
  border-radius: 6px;
  cursor: pointer;
  transition: background .2s ease-out; }
  .icon:hover {
    background-color: rgba(255, 255, 255, 0.2); }

.half {
  width: 50%; }

.download {
  padding: 25px 0;
  margin: 5px auto 0 auto; }

.button {
  background: #007aff;
  color: #fff;
  padding: 10px 15px;
  border-radius: 3px; }
  .button:hover {
    background: #fff;
    color: #007aff; }

@media (max-width: 760px) {
  .half {
    width: 100%; }
  .video {
    display: none; } }

.ticker {
  width: 100%;
  display: block;
  font-size: 13px; }

.features {
  position: relative;
  display: block;
  width: 100%;
  height: 15px;
  margin-bottom: 0; }
  .features li {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    opacity: 0;
    filter: blur(8px);
    transform: translate3d(0, -100%, 0);
    transition: transform .2s ease-out, filter .2s ease-out, opacity .4s ease-out; }
    .features li.show {
      opacity: .5;
      filter: blur(0);
      transform: translate3d(0, 0, 0); }

@media (max-width: 760px) {
  .info ul,
  .ticker {
    display: none; } }

.app {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  width: 356px;
  height: 438px;
  margin: 0 auto;
  box-shadow: 0 30px 60px 0 rgba(0, 0, 0, 0.5); }

video {
  margin: -2px 0 0 -2px;
  width: 359px;
  height: 440px; }

footer {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 32px;
  width: 100%;
  font-size: 12px; }

.changelog {
  float: right; }

/*# sourceMappingURL=style.css.map */