/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *


 */

@font-face {
  font-family: 'MuseoSlabFree';
  font-style: normal;
  font-weight: 500;
  src:
    url('museo-slab-500.woff') format('woff'),
    url('museo-slab-500.ttf') format('truetype');
}

@font-face {
  font-family: 'MetropolisFree';
  font-style: normal;
  font-weight: 400;
  src:
    url('metropolis-regular.woff') format('woff'),
    url('metropolis-regular.ttf') format('truetype');
}

@font-face {
  font-family: 'MetropolisFree';
  font-style: normal;
  font-weight: 500;
  src:
    url('metropolis-medium.woff') format('woff'),
    url('metropolis-medium.ttf') format('truetype');
}
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, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
ins {
  text-decoration: none;
}
del {
  text-decoration: line-through;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/*
  COLORS:
  deep-wine: #4F1228;
  wine: #631A35;
  plum: #A61C49;
  orange: #F9A61F;
  yellow: #FFEE77;
  turquoise: #29CFC3;
*/


html, body {
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: 'MetropolisFree', sans-serif;
  background: #4F1228;
  font-size: 16px;
}

p {
  padding-bottom: 1em;
  line-height: 1.4;
}

a {
  color: inherit;
  text-decoration: none;
}


/* Generic layout classes */

.bars {
  width: 100%;
  overflow: hidden;
}

.column {
  max-width: 768px;
  margin: 0 auto;
  padding: 40px 0;
  box-sizing: border-box;
}


/* App Store badges */

.app-badge {
  display: none;
  background: #000;
  border: 1px solid #BBB;
  border-radius: 8px;
  width: 192px;
  height: 57px;
  overflow: hidden;
}

.app-badge[href] {
  display: block;
}

.app-badge-caveat {
  display: inline-block;
  padding: 10px 0 0 55px;
  color: #999;
  font-size: 12px;
}


/* The Libby Mascot */

.mascot {
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
  width: 100px;
  height: 100px;
  bottom: -50px;
}

.mascot svg {
  border-radius: 50%;
  border: 6px solid #FFF;
}

.mascot svg .eye-closed,
.mascot svg .book {
  display: none;
}


/* Skin tones */

.skin-tone-a .mascot-icon .face { fill: #FED; }

.skin-tone-b .mascot-icon .face { fill: #E6C3B0; }
.skin-tone-b .mascot-icon .eye,
.skin-tone-b .mascot-icon .smile { fill: #4D0F26; }

.skin-tone-c .mascot-icon .face { fill: #BB7777; }
.skin-tone-c .mascot-icon .eye,
.skin-tone-c .mascot-icon .smile { fill: #310616; }

.skin-tone-d .mascot-icon .face { fill: #824358; }
.skin-tone-d .mascot-icon .eye,
.skin-tone-d .mascot-icon .smile { fill: #000; }


/* BAR: INTRO */

.bar-intro {
  background: #631A35;
  background: linear-gradient(to bottom, #4F1228, #631A35);
  position: relative;
}

.bar-intro h1 {
  font-family: 'MuseoSlabFree', sans-serif;
  font-size: 50px;
  padding: 250px 0 20px;
  margin: 0;
  text-align: center;
  color: #FFF;
}

.bar-intro h2 {
  position: absolute;
  right: 8px;
  top: 8px;
  font-size: 12px;
  color: #FFF;
  filter: saturate(0) brightness(3) opacity(0.3);
}

.bar-intro h2 img {
  width: 89px;
  height: 14px;
  padding-left: 2px;
  transform: translateY(1px);
}


/* ANIMATED LIBBY: */

.hello-libby {
  width: 60%;
  max-width: 270px;
  margin: 0 auto;
}

.hello-libby svg {
  display: block;
  background: none !important;
}

.hello-libby svg .eye-closed {
  display: none;
}

.hello-libby svg .libby,
.hello-libby svg .book {
  transition: transform 500ms ease-out;
}

.hello-libby.hiding svg .libby,
.hello-libby.hiding svg .book {
  transition: transform 300ms ease-in;
}

.hello-libby.hiding svg .libby {
  transform: translateY(330px);
}
.hello-libby.hiding svg .book {
  transform: translateY(-70px);
}


/* BAR: GREETING */

.bar-greeting {
  background: #FFF;
  position: relative;
}

.bar-greeting .column:after {
  content: '';
  display: table;
  clear: both;
}

.greeting-phone {
  position: relative;
}

.phone-scale {
  position: absolute;
  z-index: 1;
  transform-origin: top;
  transform: scale(0.8);
  transition: transform 200ms ease-out;
  -webkit-user-select: none;
  user-select: none;
}

[data-mode="demo"] .phone-scale {
  transform: none;
}

.phone-case {
  position: relative;
  width: 400px;
  height: 832px;
  border-radius: 60px;
  box-sizing: border-box;
  border: 2px solid #DDD;
  background: linear-gradient(to bottom left, #F8F8F8 50%, #FFF);
  box-shadow: 0 30px 48px rgba(0,0,0,0.035);
}

[data-mode="demo"] .phone-case {
  box-shadow: 0 30px 300px rgba(0,0,0,0.25);
}

.phone-silence,
.phone-volume-up,
.phone-volume-down,
.phone-lock {
  background: #DDD;
  position: absolute;
  width: 5px;
  height: 65px;
  border-radius: 3px 0 0 3px;
}

.phone-silence {
  height: 32px;
  top: 90px;
  left: -5px;
}

.phone-volume-up {
  top: 160px;
  left: -5px;
}

.phone-volume-down {
  top: 240px;
  left: -5px;
}

.phone-lock {
  top: 160px;
  right: -5px;
  border-radius: 0 3px 3px 0;
}

.phone-speaker {
  position: absolute;
  left: 0;
  right: 0;
  top: 40px;
  text-align: center;
}

.phone-speaker > div {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: #DDD;
  border-radius: 50%;
  margin: 0 2px;
  position: relative;
}

.phone-speaker > div:before {
  content: '';
  position: absolute;
  left: -2px;
  right: -2px;
  top: -10px;
  bottom: -10px;
}



.phone-case[data-cursor="1"] .phone-speaker > div:nth-child(1),
.phone-case[data-cursor="2"] .phone-speaker > div:nth-child(2),
.phone-case[data-cursor="3"] .phone-speaker > div:nth-child(3),
.phone-case[data-cursor="4"] .phone-speaker > div:nth-child(4),
.phone-case[data-cursor="5"] .phone-speaker > div:nth-child(5),
.phone-case[data-cursor="6"] .phone-speaker > div:nth-child(6),
.phone-case[data-cursor="7"] .phone-speaker > div:nth-child(7),
.phone-case[data-cursor="8"] .phone-speaker > div:nth-child(8),
.phone-case[data-cursor="9"] .phone-speaker > div:nth-child(9) {
  background: #777;
}

[data-mode="demo"] .phone-speaker {
  margin: 8px auto 0;
  width: 78px;
  height: 7px;
  border-radius: 7px;
  background: #DDD;
}

[data-mode="demo"] .phone-speaker > div {
  display: none;
}

.phone-screen {
  position: absolute;
  background: linear-gradient(to bottom, #A61C49 15%, #640423 75%);
  border-radius: 2px;
  border: 1px solid #DDD;
  width: 365px;
  bottom: 94px;
  top: 86px;
  left: 0;
  right: 0;
  margin: 0 auto;
  overflow: hidden;
}

.phone-screenshots {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0px;
  overflow: hidden;
  transform-origin: bottom;
  transform: scale(1.112);
  transition: transform 300ms ease-out;
}

.phone-screenshots-rail {
  width: 100%;
  white-space: nowrap;
	cursor: pointer;
  overflow-y: hidden;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -webkit-scroll-snap-type: mandatory;
  scroll-snap-type: mandatory;
  -webkit-scroll-snap-destination: 0% 100%;
  scroll-snap-destination: 0% 100%;
  -webkit-scroll-snap-points-x: repeat(100%);
  scroll-snap-points-x: repeat(100%);
}

.phone-screenshots-rail > div {
  display: inline-block;
  position: relative;
  -webkit-scroll-snap-align: start;
  scroll-snap-align: start;
}

.phone-screenshots-rail img {
  width: 100%;
  opacity: 0;
  transition: opacity 500ms;
  transform: scale(0.9);
  transform-origin: bottom;
}

.phone-screenshots-rail .loaded img {
  opacity: 1;
}

.phone-screenshots-rail > div p {
  position: absolute;
  bottom: 88%;
  right: 32%;
  width: 50%;
  text-align: right;
  font-family: 'MuseoSlabFree', sans-serif;
  font-size: 16px;
  color: #FFF;
  opacity: 0;
  transition: opacity 200ms;
}

.phone-screenshots-mascot {
  position: absolute;
  top: 10px;
  right: 40px;
  width: 68px;
  height: 68px;
  opacity: 0;
  transition: opacity 200ms;
}

.phone-screenshots-mascot svg {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 4px solid #A61C49;
}

.phone-screenshots-mascot svg .eye-closed,
.phone-screenshots-mascot svg .book {
  display: none;
}

[data-mode="screenshots"] .phone-screenshots {
  transform: scale(1);
  transition: transform 300ms ease-in;
}

[data-mode="screenshots"] .phone-screenshots-mascot,
[data-mode="screenshots"] .phone-screenshots-rail > div p {
  opacity: 1;
}

[data-mode="screenshots"] .phone-screenshots-rail img {
  border-radius: 3px 3px 0 0;
}

.phone-case[data-cursor="9"] .phone-screenshots-mascot,
.phone-case[data-cursor="10"] .phone-screenshots-mascot {
  opacity: 0;
}

iframe#demo-frame {
  border: none;
  width: 100%;
  height: 100%;
  display: none;
  background: #000;
}

[data-mode="demo"] .phone-screenshots {
  display: none;
}

[data-mode="demo"] iframe#demo-frame {
  display: block;
}

.phone-home-button {
  position: absolute;
  width: 60px;
  height: 60px;
  bottom: 17px;
  left: 0;
  right: 0;
  margin: 0 auto;
  border-radius: 50%;
  color: #29CFC3;
  border: 3px solid;
  box-sizing: border-box;
  cursor: pointer;
  text-align: center;
  line-height: 56px;
  font-size: 18px;
}

.phone-home-button:after {
  content: 'Try';
  text-transform: uppercase;
}

[data-mode="demo"] .phone-home-button:after {
  content: '×';
  font-size: 32px;
}

.phone-home-button .ring {
  position: absolute;
  top: -7px;
  right: -7px;
  bottom: -7px;
  left: -7px;
  border-radius: 50%;
  opacity: 0.2;
  background-color: #29CFC3;
  animation: phone-home-pulse 1000ms infinite alternate;
}

.phone-home-button .ring + .ring {
  opacity: 0.1;
  top: -14px;
  right: -14px;
  bottom: -14px;
  left: -14px;
}


[data-mode="demo"] .phone-home-button .ring,
[data-mode="video"] .phone-home-button .ring {
  display: none;
}

@keyframes phone-home-pulse {
  from { transform: scale(0.8); }
  to { transform: scale(1.05); }
}


/* BAR: APPS 1 */

.bar-apps-1 {
  background: #F7F7F7;
}

.apps-1-text {
  font-weight: 500;
  margin-bottom: 20px;
}

.apps-1-badges .app-badge {
  margin-top: 24px;
}


/* BAR: VIDEO */

.bar-video {
  background: #A61C49;
  color: #FFF;
}

.bar-video .column {
  padding: 0;
}

.video-theatre {
  position: relative;
  height: 16em;
}

.video-theatre iframe {
  border: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-curtain {
  background: #A61C49;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  opacity: 1;
  transition: opacity 300ms linear 500ms;
}

[data-mode="video"] .video-curtain {
  transition: opacity 300ms;
  opacity: 0;
}

.video-curtain-text {
  text-align: center;
  position: absolute;
  height: 6em;
  width: 100%;
  top: 0;
  bottom: 0;
  margin: auto;
  font-weight: 500;
  transition: opacity 1000ms;
}

[data-mode="demo"] .video-curtain-text {
  opacity: 0.1;
}

.video-curtain a {
  text-decoration: none;
  color: #FFF;
}

.video-curtain a img {
  width: 1.5em;
  height: 1.5em;
  vertical-align: bottom;
}


/* BAR: FEATURES */

.bar-features {
  background: #FFF;
  padding: 100px 0;
  overflow: hidden;
}

.bar-features .screenshot {
  height: 260px;
  overflow: hidden;
}

.bar-features .screenshot-clip {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 280px;
  margin: 0 auto;
}

.bar-features .screenshot-clip img {
  width: 100%;
  border-radius: 40px;
  background: rgb(42,64,100);
  border: 2px solid rgba(42,64,100,0.9);
}

.bar-features .screenshot-2 img {
  position: absolute;
  bottom: 0;
}

.features-list li {
  text-align: left;
  font-weight: 500;
  font-size: 17px;
}

.features-list li p {
  max-width: 280px;
  position: relative;
}

.features-list li p:before {
  content: '';
  border-radius: 50%;
  border: 0.38em solid;
  display: block;
  position: absolute;
  left: -1.7em;
  top: 0.3em;
}

.features-list li p small {
  font-size: 10px;
  display: block;
}


/* BAR: APPS 2 */

.bar-apps-2 {
  background: #222;
  border-top: 2px solid #000;
  position: relative;
}

.apps-2-badges {
  margin-bottom: 50px;
}


/* BAR: ABOUT */

.bar-about {
  background: #F7F7F7;
  padding: 200px 0;
  text-align: center;
}

.colophon h1 {
  font-family: 'MuseoSlabFree', sans-serif;
  font-size: 48px;
  color: #29CFC3;
  margin-bottom: 40px;
}

.colophon h1 span {
  letter-spacing: -0.11em;
}

.colophon .od-link a {
  font-size: 70%;
  color: #A61C49;
  text-decoration: none;
}



/* RESPONSIVE: WIDE */

@media all and (min-width: 685px) {
  body {
    font-size: 20px;
  }

  .bar-greeting {
    padding-top: 40px;
  }

  .greeting-text,
  .apps-1-text,
  .apps-1-badges {
    max-width: 280px;
    padding-left: 40px;
  }

  .apps-1-badges {
    min-height: 220px;
  }

  /* Shift the phone over to the right of the greeting text */
  .greeting-text {
    float: left;
  }

  .greeting-phone {
    float: right;
  }

  .phone-scale {
    right: 40px;
    top: -20px;
    transform-origin: top right;
  }

  [data-mode="demo"] .phone-scale {
    transform: translate3d(30px,-15px,0);
  }

  /* Two columns of features: */
  .bar-features .column {
    padding: 40px 0px;
  }

  .bar-features .screenshot,
  .features-list li {
    width: 50%;
    float: left;
  }

  .bar-features .screenshot .screenshot-clip {
    margin: 0 0 0 14%;
  }

  .bar-features .screenshot-1 {
    margin-top: -40px;
  }

  .features-list li {
    background: #29CFC3;
    color: white;
    box-sizing: border-box;
    height: 110px;
    padding: 25px 3% 0 10%;
  }

  /* First two and last two features are white-bg black-text turquoise-dot */
  .features-list li:nth-child(1),
  .features-list li:nth-child(2),
  .features-list li:nth-last-child(2),
  .features-list li:nth-last-child(1) {
    background: #FFF;
    color: #000;
  }
  .features-list li:nth-child(1) p:before,
  .features-list li:nth-child(2) p:before,
  .features-list li:nth-last-child(2) p:before,
  .features-list li:nth-last-child(1) p:before {
    color: #29CFC3;
  }

  /* a hack to float the second Features screenshot to right. */
  .features-list li:last-child {
    clear: left;
  }
  .bar-features .screenshot-2 {
    margin-top: -110px;
    float: right;
  }

  /* put the app badges side-by-side */
  .apps-2-badges {
    display: flex;
    justify-content: space-between;
    max-width: 686px;
    margin-left: auto;
    margin-right: auto;
  }
  .apps-2-badges .app-badge {
    margin: 10px;
  }
}


/* RESPONSIVE: NARROW */

@media all and (max-width: 684px) {
  .column {
    padding: 40px 0px;
  }

  .bar-intro h1 {
    font-size: 30px;
    padding-top: 180px;
  }

  .greeting-text,
  .apps-1-text {
    max-width: 230px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .greeting-phone {
    height: 370px;
  }

  [data-mode="demo"] .greeting-phone {
    height: 700px;
  }

  .phone-scale {
    width: 400px;
    left: 50%;
    top: 20px;
    margin-left: -200px;
    transform: scale(0.6);
  }

  .bar-apps-1 .column {
    padding-top: 140px;
  }

  .app-badge {
    margin: 0 auto 20px;
  }

  .app-badge-caveat {
    display: block;
    padding: 0;
    text-align: center;
  }

  .features-list {
    background: #29CFC3;
    color: white;
    padding: 10px 0;
  }

  .features-list li {
    max-width: 280px;
    margin: 0 auto;
    padding: 20px 0 10px;
  }
}


@media all and (max-width: 450px) {
  [data-mode="demo"] .greeting-phone {
    height: 580px;
  }
  [data-mode="demo"] .phone-scale {
    transform: scale(0.85);
  }
}

@media all and (max-width: 400px) {
  [data-mode="demo"] .greeting-phone {
    height: 520px;
  }
  [data-mode="demo"] .phone-scale {
    transform: scale(0.78);
  }
}


/* RESPONSIVE: REALLY NARROW */

@media all and (max-width: 360px) {
  .greeting-phone {
    height: 270px;
  }

  [data-mode="demo"] .greeting-phone {
    height: 480px;
  }

  .phone-scale {
    transform: scale(0.5);
  }

  [data-mode="demo"] .phone-scale {
    transform: scale(0.75);
  }

  .bar-features li p:before {
    display: none;
  }
}


@media all and (min-width: 800px) {
  .features-list li:nth-child(3) {
    border-top-left-radius: 40px;
  }
  .features-list li:nth-child(4) {
    border-top-right-radius: 40px;
  }
  .features-list li:nth-last-child(3) {
    border-bottom-right-radius: 40px;
  }
  .features-list li:nth-last-child(4) {
    border-bottom-left-radius: 40px;
  }
}