@charset "UTF-8";
/*---------------------------------------------*/
/* Variables                                   */
/*---------------------------------------------*/
/*---------------------------------------------*/
/* Fonts                                       */
/*---------------------------------------------*/
@font-face {
  font-family: "Inter";
  src: url(https://assets.feedbin.com/assets-site/inter-semibold-c7c3befe28a2fe45fb772f93cc52c828a71ccebc4b9fa5c971db452f712f3e78.woff2) format("woff2"), url(https://assets.feedbin.com/assets-site/inter-semibold-04cd699f58167430d9957c305f172f64fb009754ce2ee97a9d0ba8f4f32b96ef.woff) format("woff");
  font-weight: 600;
  font-style: normal; }
@font-face {
  font-family: "Inter";
  src: url(https://assets.feedbin.com/assets-site/inter-italic-bab4e8083d05d9694dc183fd63806f140c733e7f07f483bd8d01e7b0429d7dc0.woff2) format("woff2"), url(https://assets.feedbin.com/assets-site/inter-italic-7b187d5753fdaf16b581765b242d5ae6765c3d20e8fd8aa3197626f043a776b9.woff) format("woff");
  font-weight: normal;
  font-style: italic; }
@font-face {
  font-family: "Inter";
  src: url(https://assets.feedbin.com/assets-site/inter-regular-89d406b02758799cff68155930829b69a9fb49c39de3e264de966466d8cc7814.woff2) format("woff2"), url(https://assets.feedbin.com/assets-site/inter-regular-5b3a854b562c2fa71b12024bfdaa81722a4fbcd6c01214e8930d028d6f7ed1ae.woff) format("woff");
  font-weight: normal;
  font-style: normal; }
/*---------------------------------------------*/
/* Reset                                       */
/*---------------------------------------------*/
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%;
  vertical-align: baseline; }

body {
  line-height: 1; }

ol, ul {
  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; }

* {
  box-sizing: border-box; }

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

/*---------------------------------------------*/
/* Elements                                    */
/*---------------------------------------------*/
*, *:before, *:after {
  box-sizing: border-box; }

body, html {
  overflow-x: hidden; }

.invert {
  color: #4A4A4A;
  background-color: white; }

body {
  background: black !important;
  font-family: "Inter", sans-serif;
  -webkit-text-size-adjust: none;
     -moz-text-size-adjust: none;
      -ms-text-size-adjust: none;
          text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  color: #FFFFFF; }

h1, h2, h3, h4, h5, h6 {
  line-height: 1.1;
  color: #FFFFFF; }
  .invert h1, .invert h2, .invert h3, .invert h4, .invert h5, .invert h6 {
    color: #000000; }

strong {
  font-weight: 600; }

em {
  font-style: italic; }

a {
  color: #FFFFFF; }
  .invert a {
    color: #4A4A4A; }

h1 {
  font-size: 2.5rem;
  font-weight: 600;
  margin-bottom: 1rem; }
  @media (min-width: 520px) {
    h1 {
      font-size: 3.5rem; } }
  @media (min-width: 1204px) {
    h1 {
      font-size: 5.5rem; } }

.with-accent {
  position: relative;
  padding-top: 3.5rem; }
  .with-accent:before {
    content: "";
    display: block;
    width: 66px;
    height: 9px;
    background-color: #D0021B;
    position: absolute;
    top: 0;
    left: 2px; }

h2 {
  font-weight: 600;
  font-size: 3rem;
  margin-bottom: 1rem;
  position: relative; }
  @media (min-width: 520px) {
    h2 {
      font-size: 3rem; } }

h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem; }

h4 {
  font-size: 1rem;
  font-weight: normal;
  color: #9B9B9B; }
  h4 strong {
    font-weight: 600;
    color: #FFF; }

p {
  font-size: 18px;
  line-height: 28px; }

table {
  border-left: 1px solid #dfdfdf;
  border-top: 1px solid #dfdfdf;
  margin-bottom: 1.4rem;
  width: 100%; }

th, td {
  padding: 8px;
  font-size: 1rem;
  border-bottom: 1px solid #dfdfdf;
  border-right: 1px solid #dfdfdf;
  text-align: left !important; }

th {
  text-align: center !important;
  font-weight: 600; }

th code, td code {
  display: inline-block;
  overflow: visible;
  border: none !important;
  white-space: normal !important;
  padding: 0 !important;
  max-width: 100%; }

img.screenshot {
  width: 100vw;
  height: auto;
  margin-left: -16px;
  box-shadow: 0px 0 5px 1px rgba(0, 0, 0, 0.3);
  border-radius: 4px; }
  @media (min-width: 768px) {
    img.screenshot {
      margin-left: 0;
      max-width: 100%; } }
  @media (min-width: 1024px) {
    img.screenshot {
      max-width: 100%; } }

.subhead-1 {
  font-weight: normal;
  font-size: 1.5rem;
  margin-bottom: 2.5rem;
  line-height: 1.4; }
  @media (min-width: 520px) {
    .subhead-1 {
      font-size: 2rem;
      margin-bottom: 5rem; } }

.subhead-2 {
  font-weight: normal;
  font-size: 1.5rem;
  margin-bottom: 4rem;
  line-height: 1.5; }

.subhead-3 {
  font-weight: normal;
  font-size: 1rem;
  margin-bottom: 1rem; }

.content {
  color: #111;
  font-weight: normal;
  font-size: 18px;
  margin-bottom: 1.5rem;
  line-height: 1.5; }
  .invert .content {
    color: #111; }
  @media (min-width: 768px) {
    .content {
      font-size: 1.5rem; } }

/*---------------------------------------------*/
/* Layout                                      */
/*---------------------------------------------*/
.grid {
  display: grid;
  grid-template-columns: repeat(12, [start-at-column-number] 1fr);
  grid-gap: 5px; }
  .grid .span-1 {
    grid-column: span 1; }
  .grid .span-2 {
    grid-column: span 2; }
  .grid .span-3 {
    grid-column: span 3; }
  .grid .span-4 {
    grid-column: span 4; }
  .grid .span-5 {
    grid-column: span 5; }
  .grid .span-6 {
    grid-column: span 6; }
  .grid .span-7 {
    grid-column: span 7; }
  .grid .span-8 {
    grid-column: span 8; }
  .grid .span-9 {
    grid-column: span 9; }
  .grid .span-10 {
    grid-column: span 10; }
  .grid .span-11 {
    grid-column: span 11; }
  .grid .span-12 {
    grid-column: span 12; }
  @media (min-width: 520px) {
    .grid {
      grid-gap: 10px; }
      .grid .span-1-break-small {
        grid-column: span 1; }
      .grid .span-2-break-small {
        grid-column: span 2; }
      .grid .span-3-break-small {
        grid-column: span 3; }
      .grid .span-4-break-small {
        grid-column: span 4; }
      .grid .span-5-break-small {
        grid-column: span 5; }
      .grid .span-6-break-small {
        grid-column: span 6; }
      .grid .span-7-break-small {
        grid-column: span 7; }
      .grid .span-8-break-small {
        grid-column: span 8; }
      .grid .span-9-break-small {
        grid-column: span 9; }
      .grid .span-10-break-small {
        grid-column: span 10; }
      .grid .span-11-break-small {
        grid-column: span 11; }
      .grid .span-12-break-small {
        grid-column: span 12; } }
  @media (min-width: 768px) {
    .grid {
      grid-gap: 20px; }
      .grid .span-1-break-medium {
        grid-column: span 1; }
      .grid .span-2-break-medium {
        grid-column: span 2; }
      .grid .span-3-break-medium {
        grid-column: span 3; }
      .grid .span-4-break-medium {
        grid-column: span 4; }
      .grid .span-5-break-medium {
        grid-column: span 5; }
      .grid .span-6-break-medium {
        grid-column: span 6; }
      .grid .span-7-break-medium {
        grid-column: span 7; }
      .grid .span-8-break-medium {
        grid-column: span 8; }
      .grid .span-9-break-medium {
        grid-column: span 9; }
      .grid .span-10-break-medium {
        grid-column: span 10; }
      .grid .span-11-break-medium {
        grid-column: span 11; }
      .grid .span-12-break-medium {
        grid-column: span 12; } }
  @media (min-width: 1204px) {
    .grid {
      grid-gap: 44px; }
      .grid .span-1-break-large {
        grid-column: span 1; }
      .grid .span-2-break-large {
        grid-column: span 2; }
      .grid .span-3-break-large {
        grid-column: span 3; }
      .grid .span-4-break-large {
        grid-column: span 4; }
      .grid .span-5-break-large {
        grid-column: span 5; }
      .grid .span-6-break-large {
        grid-column: span 6; }
      .grid .span-7-break-large {
        grid-column: span 7; }
      .grid .span-8-break-large {
        grid-column: span 8; }
      .grid .span-9-break-large {
        grid-column: span 9; }
      .grid .span-10-break-large {
        grid-column: span 10; }
      .grid .span-11-break-large {
        grid-column: span 11; }
      .grid .span-12-break-large {
        grid-column: span 12; } }

.container {
  max-width: 1204px;
  margin-left: auto;
  margin-right: auto; }

section {
  padding-left: 16px;
  padding-right: 16px; }
  @media (min-width: 768px) {
    section {
      padding-left: 44px;
      padding-right: 44px; } }
  @media (min-width: 1292px) {
    section {
      padding-left: 0;
      padding-right: 0; } }
  section.panel {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem; }
    @media (min-width: 768px) {
      section.panel {
        padding-top: 5.5rem;
        padding-bottom: 5.5rem; } }
    @media (min-width: 1204px) {
      section.panel {
        padding-top: 9rem;
        padding-bottom: 9rem; } }
    section.panel.consecutive-panel {
      padding-top: 0; }
    section.panel.footer {
      padding-top: 3.5rem;
      padding-bottom: 3.5rem; }
  section.promo {
    background-color: #1C1C1C; }

/*---------------------------------------------*/
/* Header                                      */
/*---------------------------------------------*/
.header {
  padding-top: 1rem;
  background-color: transparent; }
  .invert .header {
    background-color: white; }
  @media (min-width: 768px) {
    .header {
      padding-top: 3rem; } }

nav.main {
  justify-content: space-between;
  display: flex;
  align-items: stretch; }
  nav.main a {
    color: #FFFFFF; }
    .invert nav.main a {
      color: #000000; }
  nav.main ul {
    display: flex;
    justify-content: left; }
    nav.main ul li {
      display: none;
      align-items: baseline; }
      nav.main ul li a {
        font-size: 1rem;
        padding: 0 1rem;
        margin-top: 3px;
        text-decoration: none;
        font-weight: 600;
        white-space: nowrap;
        flex: 0 0 auto;
        border: 1px solid transparent;
        border-radius: 6px; }
        @media (min-width: 768px) {
          nav.main ul li a {
            padding: 0 1.5rem;
            margin-top: 1px; } }
      nav.main ul li span {
        display: block;
        padding: 14px 0; }
        @media (min-width: 768px) {
          nav.main ul li span {
            padding: 1rem 0; } }
      @media (min-width: 520px) {
        nav.main ul li {
          display: flex; } }
    nav.main ul .nav-signup a {
      background-color: #D0021B;
      color: #fff; }
    @media (min-width: 768px) {
      nav.main ul .nav-login {
        margin-left: 2.5rem; } }
    .home nav.main ul .nav-login {
      margin-left: 0; }
    nav.main ul .nav-login a {
      border-color: #FFFFFF; }
      @media (min-width: 520px) {
        nav.main ul .nav-login a {
          border-color: transparent; }
          .home nav.main ul .nav-login a {
            border-color: #FFFFFF; } }
  .home nav.main .nav-signup {
    display: none; }
  nav.main button {
    margin: auto 0 4px 0;
    position: relative;
    margin-left: auto;
    height: 40px;
    width: 40px;
    padding: 0;
    cursor: pointer;
    background: none;
    border: none;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none; }
    nav.main button:focus {
      outline: 0; }
    @media (min-width: 520px) {
      nav.main button {
        display: none; } }
    nav.main button .hamburger-menu {
      bottom: 0px; }
      nav.main button .hamburger-menu:before {
        top: -14px; }
      nav.main button .hamburger-menu:after {
        bottom: 7px; }
    nav.main button .hamburger-menu, nav.main button .hamburger-menu:before, nav.main button .hamburger-menu:after {
      right: 0;
      width: 20px;
      height: 2px;
      position: absolute;
      content: "";
      display: inline-block;
      background-color: #FFFFFF; }
      .invert nav.main button .hamburger-menu, .invert nav.main button .hamburger-menu:before, .invert nav.main button .hamburger-menu:after {
        background-color: #000000; }
    nav.main button .hamburger-menu {
      left: 11px;
      bottom: 10px; }

.notifier-page .main .nav-notifier span {
  border-bottom: 4px solid #D0021B; }

.apps-page .main .nav-apps span {
  border-bottom: 4px solid #D0021B; }

.blog .main .nav-blog span {
  border-bottom: 4px solid #D0021B; }

#main_nav ul {
  display: flex;
  flex-direction: column; }
  #main_nav ul a {
    color: #FFFFFF; }
    .invert #main_nav ul a {
      color: #000000; }
  #main_nav ul a {
    text-decoration: none;
    font-size: 1rem;
    display: block;
    padding: 1rem 0;
    border-bottom: 1px solid #4A4A4A; }
  @media (min-width: 768px) {
    #main_nav ul {
      display: none !important; } }

.logo-wrap {
  display: block;
  width: 163px; }
  .logo-wrap svg {
    max-width: 100%;
    fill: #FFFFFF; }
    .invert .logo-wrap svg {
      fill: #000000; }
    .logo-wrap svg #logo_background {
      fill: #FFFFFF; }
      .invert .logo-wrap svg #logo_background {
        fill: transparent; }
    .logo-wrap svg #logo_foreground {
      fill: #000000; }
      .invert .logo-wrap svg #logo_foreground {
        fill: #000000; }

/*---------------------------------------------*/
/* Sections                                    */
/*---------------------------------------------*/
.hero-signup {
  display: flex;
  flex-direction: column;
  align-items: flex-start; }
  .hero-signup .button, .hero-signup .signup-promo a:after, .signup-promo .hero-signup a:after {
    margin: 0 0 0.5rem 0; }
  @media (min-width: 520px) {
    .hero-signup {
      align-items: center;
      flex-direction: row; }
      .hero-signup .button, .hero-signup .signup-promo a:after, .signup-promo .hero-signup a:after {
        margin: 0 1rem 0 0; } }

.experience .features {
  grid-column: start-at-column-number 1 / span 12;
  grid-row: 2; }
.experience .screenshot {
  grid-column: start-at-column-number 1 / span 12;
  grid-row: 1;
  margin-bottom: 1rem; }
@media (min-width: 1024px) {
  .experience .features {
    grid-column: start-at-column-number 1 / span 4;
    grid-row: 1; }
  .experience .screenshot {
    grid-column: start-at-column-number 5 / span 8;
    grid-row: 1;
    margin-bottom: 0; } }

.features {
  display: flex;
  flex-direction: column;
  justify-content: center; }

.feature p {
  margin-bottom: 2rem; }
.feature:last-child :last-child {
  margin-bottom: 0; }

.app-wrap {
  display: flex;
  flex-direction: column;
  border-top: 1px solid #9B9B9B;
  margin-bottom: 1rem; }
  @media (min-width: 768px) {
    .app-wrap {
      flex-direction: row;
      border-top: none; } }

.app {
  display: flex;
  align-items: center;
  text-decoration: none;
  padding: 0.5rem 0;
  color: #4A4A4A;
  border-bottom: 1px solid #9B9B9B; }
  .app p {
    font-size: 14px; }
  .app .icon {
    width: 40px;
    margin: 0 10px 0 0; }
  .app .subhead {
    font-weight: 600;
    margin-bottom: 0;
    white-space: pre-wrap; }
  @media (min-width: 768px) {
    .app {
      flex-direction: column;
      text-align: center;
      margin-right: 80px;
      border-bottom: none; }
      .app .icon {
        width: 80px;
        margin: 0; }
      .app p:not(.subhead) {
        display: none; } }

.rounded-icon {
  -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill-rule%3D%22evenodd%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%221.41%22%20clip-rule%3D%22evenodd%22%20version%3D%221.1%22%20viewBox%3D%220%200%20460%20460%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20d%3D%22M460%20316.1c0%205.5%200%2010.99-.04%2016.48-.03%204.63-.08%209.26-.2%2013.88a201.73%20201.73%200%200%201-2.66%2030.21c-1.71%2010-4.9%2019.68-9.47%2028.73a96.6%2096.6%200%200%201-42.23%2042.23%20101.86%20101.86%200%200%201-28.71%209.46c-10%201.65-20.1%202.54-30.22%202.66a649%20649%200%200%201-13.88.21c-5.5.03-10.99.03-16.48.03H143.89c-5.49%200-10.98%200-16.48-.03a648.8%20648.8%200%200%201-13.88-.2%20201.46%20201.46%200%200%201-30.22-2.67c-9.99-1.7-19.67-4.9-28.71-9.46a96.61%2096.61%200%200%201-42.23-42.22%20101.96%20101.96%200%200%201-9.47-28.74%20201.6%20201.6%200%200%201-2.66-30.2c-.12-4.63-.18-9.26-.2-13.89C0%20327.08%200%20321.6%200%20316.1V143.9c0-5.5%200-11%20.04-16.5.02-4.62.08-9.25.2-13.87a201.64%20201.64%200%200%201%202.66-30.2c1.71-10%204.9-19.68%209.47-28.74A96.6%2096.6%200%200%201%2054.6%2012.36%20101.96%20101.96%200%200%201%2083.3%202.9c10-1.64%2020.1-2.53%2030.22-2.66%204.63-.12%209.26-.18%2013.88-.2%205.5-.03%2011-.03%2016.48-.03H316.1c5.5%200%2011%200%2016.49.03a649%20649%200%200%201%2013.88.2c10.12.13%2020.22%201.02%2030.21%202.66%2010%201.71%2019.67%204.9%2028.72%209.46a96.58%2096.58%200%200%201%2042.24%2042.23%20101.92%20101.92%200%200%201%209.46%2028.73%20201.7%20201.7%200%200%201%202.66%2030.21c.12%204.63.18%209.26.2%2013.88.04%205.5.04%2010.99.04%2016.48V316.1z%22%2F%3E%3C%2Fsvg%3E%0A") center/100% 100% no-repeat;
          mask: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill-rule%3D%22evenodd%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%221.41%22%20clip-rule%3D%22evenodd%22%20version%3D%221.1%22%20viewBox%3D%220%200%20460%20460%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20d%3D%22M460%20316.1c0%205.5%200%2010.99-.04%2016.48-.03%204.63-.08%209.26-.2%2013.88a201.73%20201.73%200%200%201-2.66%2030.21c-1.71%2010-4.9%2019.68-9.47%2028.73a96.6%2096.6%200%200%201-42.23%2042.23%20101.86%20101.86%200%200%201-28.71%209.46c-10%201.65-20.1%202.54-30.22%202.66a649%20649%200%200%201-13.88.21c-5.5.03-10.99.03-16.48.03H143.89c-5.49%200-10.98%200-16.48-.03a648.8%20648.8%200%200%201-13.88-.2%20201.46%20201.46%200%200%201-30.22-2.67c-9.99-1.7-19.67-4.9-28.71-9.46a96.61%2096.61%200%200%201-42.23-42.22%20101.96%20101.96%200%200%201-9.47-28.74%20201.6%20201.6%200%200%201-2.66-30.2c-.12-4.63-.18-9.26-.2-13.89C0%20327.08%200%20321.6%200%20316.1V143.9c0-5.5%200-11%20.04-16.5.02-4.62.08-9.25.2-13.87a201.64%20201.64%200%200%201%202.66-30.2c1.71-10%204.9-19.68%209.47-28.74A96.6%2096.6%200%200%201%2054.6%2012.36%20101.96%20101.96%200%200%201%2083.3%202.9c10-1.64%2020.1-2.53%2030.22-2.66%204.63-.12%209.26-.18%2013.88-.2%205.5-.03%2011-.03%2016.48-.03H316.1c5.5%200%2011%200%2016.49.03a649%20649%200%200%201%2013.88.2c10.12.13%2020.22%201.02%2030.21%202.66%2010%201.71%2019.67%204.9%2028.72%209.46a96.58%2096.58%200%200%201%2042.24%2042.23%20101.92%20101.92%200%200%201%209.46%2028.73%20201.7%20201.7%200%200%201%202.66%2030.21c.12%204.63.18%209.26.2%2013.88.04%205.5.04%2010.99.04%2016.48V316.1z%22%2F%3E%3C%2Fsvg%3E%0A") center/100% 100% no-repeat; }

.feature-grab-bag .feature {
  padding-left: 60px;
  grid-column: span 12;
  position: relative; }
  @media (min-width: 768px) {
    .feature-grab-bag .feature {
      grid-column: span 6; } }
  @media (min-width: 1204px) {
    .feature-grab-bag .feature {
      grid-column: span 4; } }
.feature-grab-bag .feature:before {
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: contain;
  width: 29px;
  height: 32px;
  content: "";
  display: block;
  position: absolute;
  top: -4px;
  left: 0; }
.feature-grab-bag .icon-actions:before {
  background-image: url(https://assets.feedbin.com/assets-site/icon-actions-ee6cd5f622a6bafbb95d1d5c23131368cf93b281eb00f442fe46703a023463c4.svg); }
.feature-grab-bag .icon-search:before {
  background-image: url(https://assets.feedbin.com/assets-site/icon-search-051db01e147ff44c1564d57510f8a3d41e2a0673cf01380d0fe6e28a60cef641.svg); }
.feature-grab-bag .icon-newsletters:before {
  background-image: url(https://assets.feedbin.com/assets-site/icon-newsletters-9dd0fb8f58b794b89415cd29762b54ed29bfb42130912b07020ebcd609714b0b.svg); }
.feature-grab-bag .icon-share:before {
  background-image: url(https://assets.feedbin.com/assets-site/icon-share-bb113b91bd1dcff63768f4207b6e12065c0ef3b70c96c4cf97faccdef5b2f281.svg); }
.feature-grab-bag .icon-full-text:before {
  background-image: url(https://assets.feedbin.com/assets-site/icon-full-text-6dcd2eabc2e2829f711d37e1b3e673667aba117d6c76a6518c55b2c0f8826399.svg); }
.feature-grab-bag .icon-podcasts:before {
  background-image: url(https://assets.feedbin.com/assets-site/icon-podcasts-3653b3c056721464c7d971f04825b6c96d1650ce9a64fe16a10c6ec0605a6eec.svg); }
.feature-grab-bag .icon-tag:before {
  background-image: url(https://assets.feedbin.com/assets-site/icon-tags-41ad4d0dc5545a79c249520816e1b0ec7796be181edfd2826af2eacca5528194.svg); }
.feature-grab-bag .icon-saved-search:before {
  background-image: url(https://assets.feedbin.com/assets-site/icon-saved-search-705e34ddd453879acc0bbcf45c13bf83d821e6e9241adb689b37a06c961e71d9.svg); }
.feature-grab-bag .icon-recently-read:before {
  background-image: url(https://assets.feedbin.com/assets-site/icon-recently-read-d1e4129105732213fabbb950d2e59be28b5f7fbc36b5323e3c2f2fe08cf8e5fa.svg); }
.feature-grab-bag .icon-updated:before {
  background-image: url(https://assets.feedbin.com/assets-site/icon-updated-ad3dc4c35623e69211dd067a513108b8f4ecda0a5d23556204fcd17978840418.svg); }
.feature-grab-bag .icon-format-toolbar:before {
  background-image: url(https://assets.feedbin.com/assets-site/icon-format-toolbar-d80ad8cd4bc8fbd23fb8692d0c28ca61a9ac7dbbc72d971b13b938e4aa384a51.svg); }
.feature-grab-bag .icon-image-preview:before {
  background-image: url(https://assets.feedbin.com/assets-site/icon-image-preview-8000853ed2a560a12412903fcfdaf16523bdfdd44a32b7f970a48ece18902eeb.svg); }

.twitter-screenshot-media {
  padding-left: 95px;
  position: relative; }
  .twitter-screenshot-media .label {
    width: 117px;
    height: 36px;
    position: absolute;
    left: 0;
    color: #FFF;
    font-weight: 600;
    display: flex;
    background: url(https://assets.feedbin.com/assets-site/icon-label-95aafa2da4ff15eccdfcb434b1fb6ac62880f9eb5ec57c6dcffd087cbd754e67.svg) 0 0 no-repeat;
    background-size: cover;
    padding-left: 15px;
    align-items: center; }
    .twitter-screenshot-media .label.tweet {
      top: 16%; }
    .twitter-screenshot-media .label.article {
      top: 68%; }

.panel.customers {
  padding-bottom: 0; }

.panel.customers-continued {
  padding-top: 0; }

.tweets-wrap {
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 2rem; }
  .tweets-wrap .tweets-list {
    display: flex; }
  .tweets-wrap .tweet {
    background-color: #1C1C1C;
    border-radius: 6px;
    min-width: 80vw;
    margin-right: 20px;
    padding: 15px 20px;
    display: flex;
    flex-direction: column; }
    @media (min-width: 520px) {
      .tweets-wrap .tweet {
        min-width: 500px;
        padding: 30px 40px;
        margin-right: 27px; } }
    .tweets-wrap .tweet header {
      display: flex;
      align-items: center;
      margin-bottom: 1rem; }
      .tweets-wrap .tweet header h4 {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-right: 10px; }
        .tweets-wrap .tweet header h4 a {
          color: inherit;
          text-decoration: none; }
      .tweets-wrap .tweet header img {
        border: 2px solid white;
        flex-shrink: 0;
        margin-right: 10px;
        height: 36px;
        width: 36px;
        border-radius: 36px; }
      .tweets-wrap .tweet header .tweet-link {
        background: url(https://assets.feedbin.com/assets-site/icon-logo-twitter-cae6ca4fa1dd196e4730ead5026e4f3966b8fadeae44046bdb84f7f4ead22723.svg) 0 0 no-repeat;
        width: 18px;
        height: 15px;
        margin-left: auto;
        flex-shrink: 0;
        position: relative;
        top: -3px; }
    .tweets-wrap .tweet time {
      margin-top: auto;
      font-size: 16px;
      color: #4A4A4A; }

/*---------------------------------------------*/
/* Apps                                        */
/*---------------------------------------------*/
.sub-nav {
  display: flex;
  justify-content: center;
  position: relative;
  margin-bottom: 5rem; }
  @media (max-width: 768px) {
    .sub-nav {
      padding: 0 15px;
      margin-bottom: 2.5rem; } }
  .sub-nav li {
    display: flex;
    margin: 0;
    flex-grow: 1;
    text-align: center; }
    @media (min-width: 520px) {
      .sub-nav li {
        margin: 0 1rem; } }
    @media (min-width: 768px) {
      .sub-nav li {
        flex-grow: 0;
        margin: 0 2rem; } }
    .sub-nav li a, .sub-nav li span {
      text-align: center;
      border-bottom: 4px solid transparent;
      cursor: pointer;
      color: #9B9B9B;
      padding: 1rem 0;
      font-size: 1rem;
      font-weight: 600; }
      @media (min-width: 520px) {
        .sub-nav li a, .sub-nav li span {
          font-size: 1.5rem; } }
    .sub-nav li a:hover, .sub-nav li span:hover {
      text-decoration: none; }
    .sub-nav li.active a, .sub-nav li.active span {
      border-color: #D0021B;
      color: #FFF; }

section.apps-wrap {
  padding-top: 0; }

.apps-grid .app-tile {
  background-color: #1C1C1C;
  padding: 2.5rem 2rem;
  border-radius: 12px;
  grid-column: span 12;
  display: flex;
  flex-direction: column;
  position: relative;
  margin-top: 1rem; }
  .apps-grid .app-tile:after {
    width: 20px;
    height: 27px;
    display: block;
    content: "";
    position: absolute;
    top: 2.5rem;
    right: 2rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 0 0; }
  .apps-grid .app-tile.hide {
    display: none; }
  .apps-grid .app-tile a {
    color: #fff; }
  @media (min-width: 768px) {
    .apps-grid .app-tile {
      grid-column: span 6;
      margin-top: 0; } }
  @media (min-width: 1204px) {
    .apps-grid .app-tile {
      grid-column: span 4; } }
.apps-grid [data-platforms~=mac]:after, .apps-grid [data-platforms~=iphone]:after, .apps-grid [data-platforms~=ipad]:after {
  background-image: url(https://assets.feedbin.com/assets-site/logo-apple-3417795e022b150e758f72130a0488f94f8b24d66409361a7328b54d7563d2aa.svg); }
.apps-grid [data-platforms~=android]:after {
  background-image: url(https://assets.feedbin.com/assets-site/logo-android-c6ec959ba414bb9ad0f51c69c1dc281a7872ac55b0459ee8a768f2ec938e09f6.svg); }
.apps-grid .details-wrap {
  width: 100%;
  display: flex;
  align-items: flex-start; }
  .apps-grid .details-wrap .icon-wrap {
    margin: 0 1.4rem 0 0; }
    .apps-grid .details-wrap .icon-wrap img {
      max-width: 60px;
      max-height: 60px; }
  .apps-grid .details-wrap .details {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; }
    @media (max-width: 520px) {
      .apps-grid .details-wrap .details {
        justify-content: center; } }
  .apps-grid .details-wrap h3 {
    margin: 0 0 5px 0; }
  .apps-grid .details-wrap p {
    font-size: 14px;
    margin: 0;
    color: #9B9B9B; }
    .apps-grid .details-wrap p a {
      text-decoration: none;
      color: #9B9B9B; }
.apps-grid .description-wrap {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-left: calc(60px + 1.4rem); }
.apps-grid .description {
  margin-bottom: 4rem; }
  @media (max-width: 520px) {
    .apps-grid .description {
      margin-bottom: 1rem; } }
.apps-grid .downloads-wrap {
  padding-top: 2rem;
  align-self: flex-start;
  width: 100%; }
  @media (max-width: 520px) {
    .apps-grid .downloads-wrap {
      padding-top: 1rem; } }
.apps-grid .downloads {
  display: block;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #D0021B; }
.apps-grid .download {
  margin-bottom: .5rem;
  display: block; }

/*---------------------------------------------*/
/* Notifier                                    */
/*---------------------------------------------*/
.notifier-page .notifier-intro {
  padding-top: 22rem; }
  @media (max-width: 768px) {
    .notifier-page .notifier-intro {
      padding-top: 0; } }
.notifier-page .tagline {
  font-weight: 600;
  color: #33577d;
  text-align: center;
  position: relative;
  top: -34px; }

.notifier-configure {
  padding-top: 1rem;
  position: relative; }
  .notifier-configure .step-one {
    padding-top: 15rem; }
    @media (max-width: 768px) {
      .notifier-configure .step-one {
        padding-top: 4rem;
        margin-bottom: 3rem; } }
  .notifier-configure .mask {
    background-color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 150px; }

.notifier-notification {
  padding-top: 1rem;
  padding-bottom: 10rem; }
  @media (max-width: 768px) {
    .notifier-notification .divider {
      visibility: hidden; } }
  .notifier-notification .step-two {
    padding-top: 5rem;
    text-align: right;
    margin-bottom: 3rem; }
    @media (max-width: 768px) {
      .notifier-notification .step-two {
        text-align: center; } }

.notification-wrap {
  position: relative;
  width: 242px;
  height: 427.5px;
  margin: 0 auto; }

.play-again {
  text-align: center;
  margin: 10px 0 0 -10px;
  cursor: pointer;
  color: #3399ff; }
  .play-again span {
    position: relative;
    display: inline-block;
    padding-right: 18px; }
    .play-again span:after {
      width: 0;
      height: 0;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 6px 0 6px 11px;
      border-color: transparent transparent transparent #3399ff;
      content: "";
      position: absolute;
      right: 0;
      top: 6px; }
  .play-again.animation-active {
    color: #bbb; }
    .play-again.animation-active span:after {
      border-color: transparent transparent transparent #bbb; }

.step {
  display: inline-block;
  color: #353535;
  border-bottom: 4px solid #b5c9dd;
  padding-bottom: 5px;
  font-size: 1.6rem;
  font-weight: 600; }

.iphone-screenshot-wrap {
  max-width: 340px;
  margin: 0 auto; }
  @media (min-width: 520px) {
    .iphone-screenshot-wrap {
      position: relative; } }

.iphone-container {
  position: relative;
  padding-bottom: 175.498%; }
  .iphone-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
  .iphone-container img:first-child {
    z-index: 0; }
  .iphone-container img:last-child {
    z-index: 1; }

.watches-promo {
  margin-top: 3.5rem;
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
  background-color: #F2F2F2; }
  .watches-promo h3 {
    margin-bottom: 2rem; }

.watches {
  margin: -3rem 0 0 -3rem;
  display: flex;
  justify-content: center;
  flex-direction: column; }
  @media (min-width: 712px) {
    .watches {
      flex-direction: row; } }

.watch {
  padding: 3rem 0 0 3rem; }
  .watch p {
    padding: 1rem 0 0 0;
    font-size: 1.5rem;
    text-align: center; }

.watch-inner {
  margin: 0 auto;
  height: 270px;
  width: 242.5px;
  background: url(https://assets.feedbin.com/assets-site/notifier/apple-watch-bezel-42mm-0abc0c82a4fc20723b75ebac2db3a61e1267f191c62013a8a31d1e8b3919aaf7.png) 0 0 no-repeat;
  background-size: contain; }

.notifier-read {
  position: relative;
  padding-top: 5rem; }
  .notifier-read .step-three {
    margin-bottom: 5rem; }
  .notifier-read .mask {
    background-color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 125px; }

.notifier-download {
  padding-bottom: 5rem;
  padding-top: 1rem; }

/*---------------------------------------------*/
/* Blog                                        */
/*---------------------------------------------*/
article {
  max-width: 800px;
  margin: 0 auto;
  font-size: 19px;
  margin-bottom: 3.5rem;
  color: #111;
  /*----------------------------------------------
    Post 2013-03-20-feedbin-mobile.md
  ----------------------------------------------*/
  /*----------------------------------------------
    Post year-zero.md
  ----------------------------------------------*/
  /*----------------------------------------------
    Post notifier.md
  ----------------------------------------------*/ }
  article a {
    color: #111; }
    .invert article a {
      color: #111; }
  @media (min-width: 768px) {
    article {
      margin-bottom: 5.5rem; } }
  @media (min-width: 1204px) {
    article {
      margin-bottom: 9rem; } }
  article a {
    color: #4A4A4A; }
  article p,
  article li {
    line-height: 1.6; }
  article p {
    font-size: 19px; }
  article p, article ul, article ol {
    margin-bottom: 1.5rem; }
  article h1 {
    font-weight: 600;
    font-size: 2rem;
    margin-bottom: 0.5rem;
    position: relative;
    padding-top: 3.5rem; }
    article h1 a {
      color: #000;
      text-decoration: none; }
      .invert article h1 a {
        color: #000; }
    article h1:before {
      content: "";
      display: block;
      width: 66px;
      height: 9px;
      background-color: #D0021B;
      position: absolute;
      top: 0;
      left: 2px; }
    @media (min-width: 520px) {
      article h1 {
        margin-bottom: 1rem;
        font-size: 3rem; } }
    .help-page article h1, article h1.no-accent {
      padding-top: 0; }
      .help-page article h1:before, article h1.no-accent:before {
        display: none; }
  article h2 {
    font-size: 1.8rem;
    text-rendering: optimizeLegibility;
    color: inherit;
    margin-bottom: .8rem;
    margin-top: 3rem;
    font-weight: 600; }
    article h2:before {
      display: none; }
  article img:not(.unstyled) {
    display: block;
    width: 100%;
    height: auto !important;
    max-width: 800px; }
  article img.float {
    float: left;
    margin: 0 10px 3px 0; }
  article img.no-border {
    border: none; }
  article img.shadow {
    box-shadow: 0px 0 7px 1px rgba(0, 0, 0, 0.15); }
  article img.rounded {
    border: 1px solid #E9E9EB;
    border-radius: 8px; }
  article img.wide {
    box-shadow: 0px 0 7px 1px rgba(0, 0, 0, 0.15); }
    article img.wide.no-shadow {
      box-shadow: none; }
    article img.wide.rounded {
      border-radius: 8px;
      border: none; }
  article video {
    max-width: 100%;
    box-shadow: 0px 0 7px 1px rgba(0, 0, 0, 0.15);
    margin-bottom: 1.5rem; }
  @media (min-width: 1204px) {
    article img.wide, article video {
      width: 1000px;
      max-width: none !important;
      margin-left: -100px; } }
  article figure {
    margin: 0 0 1.5rem 0; }
  article figure img {
    margin: 0 0 5px 0 !important; }
  article figcaption {
    font-style: italic;
    line-height: 1.5em;
    font-size: 1rem;
    color: #4A4A4A; }
    .invert article figcaption {
      color: #9B9B9B; }
  article .inner-content > figure {
    padding-top: 0; }
  article ul, article ol {
    margin-left: 20px; }
  article li {
    margin-left: 20px; }
  article ul li {
    list-style-type: disc; }
  article ol li {
    list-style-type: decimal; }
  article code {
    font-family: Consolas, monospace;
    margin: 0 2px;
    padding: 1px 5px;
    border: 1px solid #e2e2e2;
    border-radius: 6px;
    white-space: nowrap;
    color: #333;
    font-size: 1rem; }
  article pre code {
    display: block;
    overflow-x: scroll;
    white-space: pre;
    word-wrap: normal;
    margin-bottom: 1.5rem;
    line-height: 1.5; }
  article code, article pre {
    font-family: Consolas, Monaco, monospace; }
  article blockquote {
    padding: 0 0 0 15px;
    border-left: 4px solid transparent;
    border-color: #dcdee0; }
  article .page-meta {
    color: #9B9B9B;
    margin-bottom: 1.5rem; }
    @media (min-width: 768px) {
      article .page-meta {
        margin-bottom: 3rem; } }
  article .archive-group {
    margin-bottom: 3rem; }
    article .archive-group .page-meta {
      margin-bottom: 0; }
  article .feedbin-mobile-screenshot {
    max-width: 320px; }
  article .wallpaper {
    margin: 0 0 16px 0;
    height: 443px;
    background: #3399FF url(https://assets.feedbin.com/assets-site/blog/2014-03-11/wallpaper-b53a0c069bd3e97a889fb7758325c843a58250626dde8bbe425c595db77129b7.svg); }
  article .wallpaper-logo {
    height: 100%;
    background: url(https://assets.feedbin.com/assets-site/blog/2014-03-11/message-1a0f4d16ab2e315f114fdd18d0d6445bc9c9595be13417c4c7ce4007abfa82c2.svg) 50% 50% no-repeat; }
  article .wallpaper-logo img {
    display: none; }
  article .image-notifier {
    border: none;
    max-width: 100%;
    padding: 0; }

.pagination {
  display: flex;
  background-color: #FFF; }
  .pagination .page-button {
    color: #9B9B9B;
    border-top: 1px solid #dfdfdf;
    flex: 1;
    text-align: center; }
    .pagination .page-button:first-child {
      border-right: 1px solid #dfdfdf; }
    .pagination .page-button a {
      color: #4A4A4A;
      text-decoration: none; }
    .pagination .page-button span, .pagination .page-button a {
      display: block;
      text-align: center;
      padding: 4rem 0;
      font-size: 1.8rem; }
      .pagination .page-button span:hover, .pagination .page-button a:hover {
        text-decoration: none; }

/*---------------------------------------------*/
/* Footer                                      */
/*---------------------------------------------*/
footer ul {
  display: flex;
  flex-direction: column;
  border-top: 1px solid #4A4A4A; }
  footer ul a {
    text-decoration: none;
    color: #FFF;
    font-size: 1rem;
    display: block;
    padding: 1rem 0;
    border-bottom: 1px solid #4A4A4A; }
    .invert footer ul a {
      color: #FFF; }
    footer ul a:hover {
      color: #fff; }
  @media (min-width: 768px) {
    footer ul {
      flex-direction: row;
      border: none; }
      footer ul li:nth-last-child(3) {
        margin-left: auto; }
      footer ul li:last-child a {
        padding-right: 0; }
      footer ul a {
        border: none;
        padding-right: 20px; } }
  @media (min-width: 1204px) {
    footer ul a {
      padding-right: 45px; } }

.no-trial-promo .trial-promo {
  display: none; }

.signup-promo {
  font-weight: 600;
  font-size: 2rem;
  margin-bottom: 1rem; }
  .signup-promo a {
    color: #fff;
    text-decoration: none;
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center; }
    .signup-promo a:after {
      margin-top: 1rem;
      content: "Free Trial";
      font-size: 1rem; }
  @media (min-width: 520px) {
    .signup-promo {
      font-size: 3rem; } }
  @media (min-width: 768px) {
    .signup-promo a {
      flex-direction: row; }
      .signup-promo a:after {
        margin-top: 0;
        margin-left: auto; } }

/*---------------------------------------------*/
/* Sidebar                                     */
/*---------------------------------------------*/
.sidebar-nav {
  border: 1px solid #dfdfdf;
  border-radius: 4px;
  padding: 2rem 2rem 0 2rem; }
  .sidebar-nav ul {
    margin: 0 0 2rem 0;
    padding: 0; }
    .sidebar-nav ul li {
      font-size: 18px; }
      .sidebar-nav ul li a {
        display: block;
        padding: 6px 10px; }
      .sidebar-nav ul li.active a {
        background-color: #000;
        color: #fff;
        border-radius: 4px;
        text-decoration: none; }
  .sidebar-nav h2 {
    padding: 0 10px;
    font-size: 1.5rem;
    margin-bottom: .5rem; }

/*---------------------------------------------*/
/* Utilties                                    */
/*---------------------------------------------*/
.hide {
  display: none; }

a.arrow {
  color: #fff;
  text-decoration: none; }
  .invert a.arrow {
    color: #4A4A4A; }
  a.arrow:after {
    content: "→";
    color: #D0021B; }

.button, .signup-promo a:after {
  display: inline-block;
  text-decoration: none;
  font-weight: 600;
  background-color: #D0021B;
  padding: 20px 65px;
  color: #FFF;
  border-radius: 6px;
  font-size: 1.5rem; }

.vertical-center {
  display: flex;
  flex-direction: column;
  justify-content: center; }

.center {
  display: block;
  margin-left: auto;
  margin-right: auto; }

.download-button {
  margin-bottom: 2rem; }
  @media (min-width: 768px) {
    .download-button {
      margin-bottom: 0; } }

.download-button span {
  padding-left: 35px;
  background: url(https://assets.feedbin.com/assets-site/icon-apple-28e4f797dc6a35a38f4537771ee43ea31449e1ebef1e1bf49929e1b7093602c0.svg) 0 0 no-repeat;
  background-size: 21px 25px;
  overflow: visible;
  line-height: 1; }

.notifier-screenshot {
  margin-bottom: 2rem; }
  @media (min-width: 768px) {
    .notifier-screenshot {
      margin-bottom: 0; } }

.top-button {
  display: none; }
  @media (min-width: 768px) {
    .top-button {
      display: inline-block; } }

.bottom-button {
  text-align: center;
  display: block; }
  @media (min-width: 768px) {
    .bottom-button {
      display: none; } }

.dropup,
.dropdown {
  position: relative; }

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 10rem;
  padding: 0.5rem 0;
  margin: 0.125rem 0 0;
  font-size: 1rem;
  color: #212529;
  text-align: left;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.25rem; }

.dropup .dropdown-menu {
  margin-top: 0;
  margin-bottom: 0.125rem; }

.dropright .dropdown-menu {
  margin-top: 0;
  margin-left: 0.125rem; }

.dropleft .dropdown-menu {
  margin-top: 0;
  margin-right: 0.125rem; }

.dropdown-item {
  display: block;
  width: 100%;
  padding: 0.25rem 1.5rem;
  clear: both;
  font-weight: normal;
  color: #212529;
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0; }

.dropdown-item:hover, .dropdown-item:focus {
  color: #16181b;
  text-decoration: none;
  background-color: #f8f9fa; }

.dropdown-item.active, .dropdown-item:active {
  color: #fff;
  text-decoration: none;
  background-color: #007bff; }

.dropdown-item.disabled, .dropdown-item:disabled {
  color: #6c757d;
  background-color: transparent; }

.dropdown-menu.show {
  display: block; }

.collapse {
  display: none; }

.collapse.show {
  display: block; }

.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease; }

.inline-subhead {
  display: flex;
  align-items: baseline; }
  .inline-subhead div span {
    display: inline-block; }
  .inline-subhead div:last-child {
    font-weight: normal;
    font-style: italic;
    margin-left: auto; }

h1.inline-subhead div:last-child {
  font-size: 1.5rem; }

.img-responsive {
  max-width: 100%;
  height: auto; }

.icon-location {
  background: url(https://assets.feedbin.com/assets-site/icon-location-8d59229405cfb7728d59444ae25a24d2754c55ff17dedf4a75649629e24fb75b.svg) 3px 50% no-repeat;
  padding-left: 25px; }

.icon-twitter-logo {
  background: url(https://assets.feedbin.com/assets-site/icon-red-twitter-7017be34ac03efee962c975cc7a8638485435f8b02e63ab0fbeeb815a94c3906.svg) 0 50% no-repeat;
  padding-left: 25px;
  background-size: 16px 13px; }
  .icon-twitter-logo a {
    text-decoration: none; }

.icon-email {
  background: url(https://assets.feedbin.com/assets-site/icon-email-filled-69393d82a0fc5f09f668f1cd0d4494723e64d172f4f10cf76eec8cff4bab6e23.svg) 0 50% no-repeat;
  padding-left: 25px;
  background-size: 15px 13px; }
  .icon-email a {
    text-decoration: none; }

.about {
  margin-bottom: 6rem; }
  .about img {
    margin-bottom: 1rem; }

.key-group {
  display: flex;
  justify-content: flex-end;
  align-items: center; }

.key-group + .key-group {
  margin-top: 8px; }

.key {
  margin-left: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 32px;
  width: 32px;
  background-color: #F5F5F7;
  font-style: normal;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
  border-radius: 4px;
  line-height: 1;
  font-size: 16px;
  text-transform: capitalize; }
  .key.wide {
    width: 72px; }

.spacer {
  margin-left: base-units(1); }

/*---------------------------------------------*/
/* Highlight                                   */
/*---------------------------------------------*/
.highlight {
  background: #ffffff; }

.highlight .c {
  color: #999988;
  font-style: italic; }

/* Comment */
.highlight .err {
  color: #a61717;
  background-color: #e3d2d2; }

/* Error */
.highlight .k {
  font-weight: 600; }

/* Keyword */
.highlight .o {
  font-weight: 600; }

/* Operator */
.highlight .cm {
  color: #999988;
  font-style: italic; }

/* Comment.Multiline */
.highlight .cp {
  color: #999999;
  font-weight: 600; }

/* Comment.Preproc */
.highlight .c1 {
  color: #999988;
  font-style: italic; }

/* Comment.Single */
.highlight .cs {
  color: #999999;
  font-weight: 600;
  font-style: italic; }

/* Comment.Special */
.highlight .gd {
  color: #000000;
  background-color: #ffdddd; }

/* Generic.Deleted */
.highlight .gd .x {
  color: #000000;
  background-color: #ffaaaa; }

/* Generic.Deleted.Specific */
.highlight .ge {
  font-style: italic; }

/* Generic.Emph */
.highlight .gr {
  color: #aa0000; }

/* Generic.Error */
.highlight .gh {
  color: #999999; }

/* Generic.Heading */
.highlight .gi {
  color: #000000;
  background-color: #ddffdd; }

/* Generic.Inserted */
.highlight .gi .x {
  color: #000000;
  background-color: #aaffaa; }

/* Generic.Inserted.Specific */
.highlight .go {
  color: #888888; }

/* Generic.Output */
.highlight .gp {
  color: #555555; }

/* Generic.Prompt */
.highlight .gs {
  font-weight: 600; }

/* Generic.Strong */
.highlight .gu {
  color: #aaaaaa; }

/* Generic.Subheading */
.highlight .gt {
  color: #aa0000; }

/* Generic.Traceback */
.highlight .kc {
  font-weight: 600; }

/* Keyword.Constant */
.highlight .kd {
  font-weight: 600; }

/* Keyword.Declaration */
.highlight .kp {
  font-weight: 600; }

/* Keyword.Pseudo */
.highlight .kr {
  font-weight: 600; }

/* Keyword.Reserved */
.highlight .kt {
  color: #445588;
  font-weight: 600; }

/* Keyword.Type */
.highlight .m {
  color: #009999; }

/* Literal.Number */
.highlight .s {
  color: #d14; }

/* Literal.String */
.highlight .na {
  color: #008080; }

/* Name.Attribute */
.highlight .nb {
  color: #0086B3; }

/* Name.Builtin */
.highlight .nc {
  color: #445588;
  font-weight: 600; }

/* Name.Class */
.highlight .no {
  color: #008080; }

/* Name.Constant */
.highlight .ni {
  color: #800080; }

/* Name.Entity */
.highlight .ne {
  color: #990000;
  font-weight: 600; }

/* Name.Exception */
.highlight .nf {
  color: #990000;
  font-weight: 600; }

/* Name.Function */
.highlight .nn {
  color: #555555; }

/* Name.Namespace */
.highlight .nt {
  color: #000080; }

/* Name.Tag */
.highlight .nv {
  color: #008080; }

/* Name.Variable */
.highlight .ow {
  font-weight: 600; }

/* Operator.Word */
.highlight .w {
  color: #bbbbbb; }

/* Text.Whitespace */
.highlight .mf {
  color: #009999; }

/* Literal.Number.Float */
.highlight .mh {
  color: #009999; }

/* Literal.Number.Hex */
.highlight .mi {
  color: #009999; }

/* Literal.Number.Integer */
.highlight .mo {
  color: #009999; }

/* Literal.Number.Oct */
.highlight .sb {
  color: #d14; }

/* Literal.String.Backtick */
.highlight .sc {
  color: #d14; }

/* Literal.String.Char */
.highlight .sd {
  color: #d14; }

/* Literal.String.Doc */
.highlight .s2 {
  color: #d14; }

/* Literal.String.Double */
.highlight .se {
  color: #d14; }

/* Literal.String.Escape */
.highlight .sh {
  color: #d14; }

/* Literal.String.Heredoc */
.highlight .si {
  color: #d14; }

/* Literal.String.Interpol */
.highlight .sx {
  color: #d14; }

/* Literal.String.Other */
.highlight .sr {
  color: #009926; }

/* Literal.String.Regex */
.highlight .s1 {
  color: #d14; }

/* Literal.String.Single */
.highlight .ss {
  color: #990073; }

/* Literal.String.Symbol */
.highlight .bp {
  color: #999999; }

/* Name.Builtin.Pseudo */
.highlight .vc {
  color: #008080; }

/* Name.Variable.Class */
.highlight .vg {
  color: #008080; }

/* Name.Variable.Global */
.highlight .vi {
  color: #008080; }

/* Name.Variable.Instance */
.highlight .il {
  color: #009999; }

/* Literal.Number.Integer.Long */
@-webkit-keyframes show-container {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
@keyframes show-container {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
@-webkit-keyframes hide-container {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }
@keyframes hide-container {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }
@-webkit-keyframes slide-notification-short-look {
  from {
    opacity: 0;
    -webkit-transform: translateY(390px);
            transform: translateY(390px); }
  to {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px); } }
@keyframes slide-notification-short-look {
  from {
    opacity: 0;
    -webkit-transform: translateY(390px);
            transform: translateY(390px); }
  to {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px); } }
@-webkit-keyframes slide-notification-long-look {
  from {
    opacity: 0;
    -webkit-transform: translateY(390px);
            transform: translateY(390px); }
  to {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px); } }
@keyframes slide-notification-long-look {
  from {
    opacity: 0;
    -webkit-transform: translateY(390px);
            transform: translateY(390px); }
  to {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px); } }
@-webkit-keyframes show-notification-time {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
@keyframes show-notification-time {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
@-webkit-keyframes slide-out-notification-short-look {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px); }
  30% {
    opacity: 0; }
  100% {
    -webkit-transform: translateY(-200px);
            transform: translateY(-200px); } }
@keyframes slide-out-notification-short-look {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px); }
  30% {
    opacity: 0; }
  100% {
    -webkit-transform: translateY(-200px);
            transform: translateY(-200px); } }
@-webkit-keyframes slide-notification-logo {
  from {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1); }
  to {
    -webkit-transform: scale(0.459, 0.459);
            transform: scale(0.459, 0.459); } }
@keyframes slide-notification-logo {
  from {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1); }
  to {
    -webkit-transform: scale(0.459, 0.459);
            transform: scale(0.459, 0.459); } }
@-webkit-keyframes scroll-notification-long-look {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px); }
  to {
    -webkit-transform: translateY(-266px);
            transform: translateY(-266px); } }
@keyframes scroll-notification-long-look {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px); }
  to {
    -webkit-transform: translateY(-266px);
            transform: translateY(-266px); } }
@-webkit-keyframes scroll-notification-logo {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-transform: scale(0.459, 0.459);
            transform: scale(0.459, 0.459); }
  to {
    -webkit-transform: translateY(-266px);
            transform: translateY(-266px);
    -webkit-transform: scale(0.459, 0.459);
            transform: scale(0.459, 0.459); } }
@keyframes scroll-notification-logo {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-transform: scale(0.459, 0.459);
            transform: scale(0.459, 0.459); }
  to {
    -webkit-transform: translateY(-266px);
            transform: translateY(-266px);
    -webkit-transform: scale(0.459, 0.459);
            transform: scale(0.459, 0.459); } }
@-webkit-keyframes scroll-inner {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px); }
  to {
    -webkit-transform: translateY(27px);
            transform: translateY(27px); } }
@keyframes scroll-inner {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px); }
  to {
    -webkit-transform: translateY(27px);
            transform: translateY(27px); } }
.final-duration {
  transition-delay: 5700ms;
  display: none; }

.animate .notification-background {
  -webkit-animation: show-container 0s 600ms forwards, hide-container 1000ms 4700ms forwards ease-out;
          animation: show-container 0s 600ms forwards, hide-container 1000ms 4700ms forwards ease-out; }
.animate .notification-short-look {
  -webkit-animation: slide-notification-short-look 300ms 600ms forwards ease-out, slide-out-notification-short-look 250ms 1900ms forwards ease-out;
          animation: slide-notification-short-look 300ms 600ms forwards ease-out, slide-out-notification-short-look 250ms 1900ms forwards ease-out; }
.animate .notification-logo-main {
  -webkit-animation: slide-notification-short-look 300ms 600ms forwards ease-out, slide-notification-logo 500ms 1900ms forwards ease-out, hide-container 0ms 3400ms forwards;
          animation: slide-notification-short-look 300ms 600ms forwards ease-out, slide-notification-logo 500ms 1900ms forwards ease-out, hide-container 0ms 3400ms forwards; }
.animate .notification-logo-scroll {
  -webkit-animation: show-container 0ms 3400ms forwards;
          animation: show-container 0ms 3400ms forwards; }
.animate .notification-long-look {
  -webkit-animation: slide-notification-long-look 500ms 1900ms forwards ease-out, scroll-notification-long-look 800ms 3400ms forwards ease-out, hide-container 500ms 4700ms forwards ease-out;
          animation: slide-notification-long-look 500ms 1900ms forwards ease-out, scroll-notification-long-look 800ms 3400ms forwards ease-out, hide-container 500ms 4700ms forwards ease-out; }
.animate .notification-time {
  -webkit-animation: show-notification-time 250ms 1900ms forwards linear, hide-container 0ms 3400ms forwards;
          animation: show-notification-time 250ms 1900ms forwards linear, hide-container 0ms 3400ms forwards; }
.animate .notification-scroll-bar {
  -webkit-animation: show-container 0ms 3400ms forwards, hide-container 200ms 4200ms forwards ease-out;
          animation: show-container 0ms 3400ms forwards, hide-container 200ms 4200ms forwards ease-out; }
.animate .notification-scroll-bar-inner {
  -webkit-animation: scroll-inner 800ms 3400ms forwards ease-out;
          animation: scroll-inner 800ms 3400ms forwards ease-out; }

.notification-container {
  -webkit-transform: scale(0.5, 0.5);
          transform: scale(0.5, 0.5);
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  position: absolute;
  top: 0;
  left: 0;
  background: url(https://assets.feedbin.com/assets-site/notifier/apple-watch-black-steel-42mm-1f2210b630dda728862a55236c8946869d8c6cd5dcbc24207b45b08ad90c648b.png) no-repeat scroll top left;
  background-size: 100%;
  width: 484px;
  height: 855px;
  position: relative; }
  .notification-container .notification-background-mask {
    width: 314px;
    height: 392px;
    position: absolute;
    top: 230px;
    left: 74px;
    background-color: #000;
    overflow: hidden;
    z-index: 0; }
  .notification-container .viewport {
    width: 312px;
    height: 390px;
    position: absolute;
    top: 231px;
    left: 75px;
    background-color: #000;
    overflow: hidden; }
  .notification-container .notification-face {
    background: url(https://assets.feedbin.com/assets-site/notifier/notification-face-4117962a2e483d239fdace6768020c1e8f1dbb7838e3f78891261b9622ddaa56.png) no-repeat scroll top left;
    width: 312px;
    height: 390px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1; }
  .notification-container .notification-background {
    will-change: opacity;
    background: url(https://assets.feedbin.com/assets-site/notifier/notification-background-a4a1d6adf2e1a5db3f9fd7c344997191faa5d017d6dc456a4c24f94868a2179c.png) no-repeat scroll top left;
    width: 312px;
    height: 390px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    opacity: 0; }
  .notification-container .notification-short-look {
    will-change: transform, opacity;
    background: url(https://assets.feedbin.com/assets-site/notifier/notification-short-look-25dba091863b4ffef6b33aef4cb9dfe2966d1dec0efcf4b3630cbe458d6b39ee.png) no-repeat scroll top left;
    width: 312px;
    height: 390px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    opacity: 0; }
  .notification-container .notification-logo {
    background: url(https://assets.feedbin.com/assets-site/notifier/notification-logo-3fae1263ffa9a7f1f3b3e15ffa600c691d679cb133746f4b4e37d289fd28357a.png) no-repeat scroll top left;
    width: 196px;
    height: 196px;
    position: absolute;
    top: 41px;
    left: 58px;
    z-index: 5;
    border-radius: 98px; }
  .notification-container .notification-logo-scroll {
    will-change: transform, opacity;
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    opacity: 0; }
  .notification-container .notification-logo-main {
    will-change: transform, opacity;
    -webkit-transform-origin: -72px -63px;
            transform-origin: -72px -63px;
    opacity: 0; }
  .notification-container .notification-long-look {
    will-change: transform, opacity;
    background: url(https://assets.feedbin.com/assets-site/notifier/notification-long-look-51353e8fd7b1d5d6aa4c78e7aa77aa176293344e2ffe476542d44091819ce026.png) no-repeat scroll top left;
    width: 312px;
    height: 656px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    -webkit-transform: translateY(390px);
            transform: translateY(390px); }
    .notification-container .notification-long-look .notification-logo {
      opacity: 0;
      top: 4px;
      left: 19px;
      -webkit-transform: scale(0.459, 0.459);
              transform: scale(0.459, 0.459); }
  .notification-container .notification-time {
    will-change: opacity;
    background: url(https://assets.feedbin.com/assets-site/notifier/notification-time-a018752761613bc106f28e47b4f8c9d280504b82c87c08c96ac1648d4000a812.png) no-repeat scroll top left;
    width: 57px;
    height: 23px;
    right: 8px;
    top: 7px;
    position: absolute;
    opacity: 0;
    z-index: 5; }
  .notification-container .notification-scroll-bar {
    will-change: opacity, transform;
    width: 12px;
    height: 75px;
    background-color: rgba(255, 255, 255, 0.27);
    position: absolute;
    right: 4px;
    top: 50px;
    border-radius: 12px;
    position: absolute;
    z-index: 6;
    opacity: 0; }
    .notification-container .notification-scroll-bar .notification-scroll-bar-inner {
      will-change: opacity, transform;
      position: absolute;
      border-radius: 8px;
      width: 8px;
      background-color: #04de71;
      height: 44px;
      top: 2px;
      left: 2px; }