.dotdotdot, .post-title, .blog-title, .blog-url, .blog-followers, .item .blog-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.separator-bullet, .item time:before, .error li:after {
  content: "·";
  display: inline-block;
  height: 5px;
  line-height: 1px;
  margin-right: 5px;
  text-align: center;
  width: 3px; }

[data-hook="overlay"] {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  overflow: scroll;
  background: rgba(255, 255, 255, 0.5);
  z-index: 10000; }

.modal-body {
  background: #fff;
  max-width: 500px;
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.1);
  color: #484848;
  padding: 15px;
  margin: auto; }
  .modal-body h1 {
    font-size: 28px;
    font-weight: 300;
    line-height: 30px; }
  .modal-body .close {
    font-size: 30px;
    font-weight: 300;
    position: absolute;
    right: 10px;
    top: 10px; }

.screenreader {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); }

.single-item-list {
  padding: 0;
  margin: 0;
  list-style: none;
  overflow: scroll;
  max-height: 100%;
  width: 100%;
  position: absolute;
  top: 120px;
  bottom: 0; }
  .single-item-list li {
    display: block;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid #eee; }
  .single-item-list .pick {
    padding: 7px 14px;
    border: 0;
    margin: 0;
    background: transparent;
    width: 100%;
    cursor: pointer; }
    .single-item-list .pick:hover {
      background: #f5f5f5; }
    .single-item-list .pick:focus {
      background: #2faaee;
      outline: none; }
    .single-item-list .pick img {
      float: left;
      background: #eee; }
    .single-item-list .pick span {
      float: left;
      display: block;
      margin-left: 10px;
      line-height: 60px;
      font: normal 17px 'Open Sans', Tahoma, Verdana, Arial, sans-serif;
      height: 60px;
      line-height: 60px;
      max-width: 80%; }

.new-collection {
  background: #fff;
  border-bottom: 1px solid #ededed;
  position: absolute;
  top: 60;
  width: 100%;
  height: 60px;
  padding: 10px 12px;
  box-sizing: border-box; }
  .new-collection > div {
    width: 100%;
    border: 0;
    margin: 0;
    display: flex;
    display: -webkit-flex; }
  .new-collection label {
    position: absolute;
    left: -999999px;
    box-sizing: border-box; }
  .new-collection input[type="text"] {
    width: 100%;
    border: 1px solid #ededed;
    border-radius: 0;
    box-sizing: border-box;
    float: none;
    height: 40px;
    font-size: 18px;
    padding: 0 10px;
    transition: all 0.1s ease-in;
    flex: 1 100%; }
    .new-collection input[type="text"]:focus {
      z-index: 10000;
      outline: none; }
  .new-collection input[type="submit"] {
    flex-shrink: 0;
    background: #429bff;
    border: none;
    color: #fff;
    font-size: 17px;
    font-weight: bold;
    height: 40px;
    margin: 0 0 0 14px;
    padding: 0 20px;
    cursor: pointer;
    float: right;
    transition: background 80ms ease-out; }
    .new-collection input[type="submit"]:disabled {
      background: #ededed; }

[data-hook="overlay"] {
  background: rgba(255, 255, 255, 0.9);
  z-index: 5000;
  margin: 0;
  border: 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%; }
  [data-hook="overlay"] .modal-body {
    background: #fff;
    border-radius: 0;
    width: 100%;
    margin: auto;
    padding: 0;
    position: relative;
    height: 100%;
    top: 50%;
    height: 90vh;
    max-height: 600px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
    max-width: 460px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%); }
    [data-hook="overlay"] .modal-body:focus {
      outline: none; }
  [data-hook="overlay"] [data-hook="description"] {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px); }
  [data-hook="overlay"] .close {
    line-height: 40px;
    font: 300 40px 'Open Sans', Tahoma, Verdana, Arial, sans-serif;
    width: 40px;
    height: 60px;
    position: absolute;
    text-align: center;
    top: -3px;
    right: 10px;
    background: none;
    border: none;
    margin: 0;
    -webkit-font-smoothing: antialiased; }
  [data-hook="overlay"] h1 {
    width: 100%;
    font: 300 24px 'Open Sans', Tahoma, Verdana, Arial, sans-serif;
    text-align: center;
    line-height: 40px;
    border-bottom: 1px solid #ededed;
    padding: 10px;
    box-sizing: border-box;
    margin: 0;
    text-align: center; }
  [data-hook="overlay"] .error {
    text-align: center;
    border-bottom: 1px solid #ff4444;
    border-top: 1px solid #ff4444;
    margin: 0;
    padding: 20px 10px;
    background: #ee5555;
    color: #fff;
    font: bold 16px 'Open Sans', Tahoma, Verdana, Arial, sans-serif;
    position: absolute;
    top: 0;
    width: 100%;
    box-sizing: border-box; }

.popover {
  position: absolute;
  background: #2faaee;
  color: #fff;
  z-index: 1000;
  top: 44px;
  width: 180px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
  padding: 20px;
  transition: all 200ms ease-out; }
  .popover h5 {
    margin: 0;
    font-weight: bold; }
  .popover h5, .popover p {
    font-size: 14px; }
  .popover p {
    margin-bottom: 0; }
  .popover:after {
    content: "";
    border: 10px solid transparent;
    border-bottom: 10px solid #2faaee;
    position: absolute;
    top: -20px;
    left: 30px; }
  .popover .close {
    width: 32px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    position: absolute;
    right: 10px;
    top: -10px;
    border: none;
    color: #eee;
    background: none;
    font-family: 'Open Sans', Tahoma, Verdana, Arial, sans-serif;
    opacity: 1; }
  .popover.hidden {
    -webkit-transform: translateY(10px);
    -moz-transform: translateY(10px);
    -ms-transform: translateY(10px);
    -o-transform: translateY(10px);
    transform: translateY(10px);
    opacity: 0; }

.empty-state {
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  left: 50%; }
  .empty-state h5 {
    color: #999;
    font-size: 16px; }
  .empty-state p {
    max-width: 80%;
    margin: auto;
    color: #999;
    font-size: 16px; }

@font-face {
  font-family: 'Open Sans';
  src: url('/assets/fonts/OpenSans/opensans-light-705e3e04.eot');
  src: url('/assets/fonts/OpenSans/opensans-light-705e3e04.eot?#iefix') format('embedded-opentype'), url('/assets/fonts/OpenSans/opensans-light-1a021477.woff') format('woff'), url('/assets/fonts/OpenSans/opensans-light-66b55d29.ttf') format('truetype');
  font-weight: 300;
  font-style: normal; }

@font-face {
  font-family: 'Open Sans';
  src: url('/assets/fonts/OpenSans/opensans-regular-eb08c853.eot');
  src: url('/assets/fonts/OpenSans/opensans-regular-eb08c853.eot?#iefix') format('embedded-opentype'), url('/assets/fonts/OpenSans/opensans-regular-500b0ea9.woff') format('woff'), url('/assets/fonts/OpenSans/opensans-regular-a9f016ea.ttf') format('truetype');
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'Open Sans';
  src: url('/assets/fonts/OpenSans/opensans-bold-fa7b5d74.eot');
  src: url('/fonts/OpenSans/opensans-bold.eot?#iefix') format('embedded-opentype'), url('/assets/fonts/OpenSans/opensans-bold-cea2ebb1.woff') format('woff'), url('/assets/fonts/OpenSans/opensans-bold-d57cee93.ttf') format('truetype');
  font-weight: 700;
  font-style: normal; }

@font-face {
  font-family: 'Open Sans';
  src: url('/assets/fonts/OpenSans/opensans-light-705e3e04.eot');
  src: url('/assets/fonts/OpenSans/opensans-light-705e3e04.eot?#iefix') format('embedded-opentype'), url('/assets/fonts/OpenSans/opensans-light-1a021477.woff') format('woff'), url('/assets/fonts/OpenSans/opensans-light-66b55d29.ttf') format('truetype');
  font-weight: 300;
  font-style: normal; }

@font-face {
  font-family: 'Open Sans';
  src: url('/assets/fonts/OpenSans/opensans-regular-eb08c853.eot');
  src: url('/assets/fonts/OpenSans/opensans-regular-eb08c853.eot?#iefix') format('embedded-opentype'), url('/assets/fonts/OpenSans/opensans-regular-500b0ea9.woff') format('woff'), url('/assets/fonts/OpenSans/opensans-regular-a9f016ea.ttf') format('truetype');
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'Open Sans';
  src: url('/assets/fonts/OpenSans/opensans-bold-fa7b5d74.eot');
  src: url('/fonts/OpenSans/opensans-bold.eot?#iefix') format('embedded-opentype'), url('/assets/fonts/OpenSans/opensans-bold-cea2ebb1.woff') format('woff'), url('/assets/fonts/OpenSans/opensans-bold-d57cee93.ttf') format('truetype');
  font-weight: 700;
  font-style: normal; }

.icon, .email-icon, .facebook-icon, .twitter-icon, .pinterest-icon, .save-icon, .unsave-icon, .next-icon, .back-icon {
  background-image: url('/assets/gfx/icon-sprite-f9f31399.png');
  background-size: 120px 180px;
  background-repeat: no-repeat;
  display: inline-block;
  height: 16px;
  vertical-align: middle;
  width: 16px; }

@media (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
  .email-icon, .facebook-icon, .twitter-icon, .pinterest-icon, .save-icon, .unsave-icon, .next-icon, .back-icon {
    background-image: url('/assets/gfx/icon-sprite@2x-07167d0f.png'); } }

.email-icon {
  background-position: -62px -60px; }

.facebook-icon {
  background-position: -64px 0px; }

.twitter-icon {
  background-position: -62px -20px; }

.pinterest-icon {
  background-position: -62px -40px; }

.save-icon {
  background-position: -2px -43px; }

.unsave-icon {
  background-position: -22px -43px; }

.next-icon {
  background-position: -1px -22px; }

.back-icon {
  background-position: -3px -2px; }

.dotdotdot, .post-title, .blog-title, .blog-url, .blog-followers, .item .blog-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.separator-bullet, .item time:before, .error li:after {
  content: "·";
  display: inline-block;
  height: 5px;
  line-height: 1px;
  margin-right: 5px;
  text-align: center;
  width: 3px; }

[data-hook="overlay"] {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  overflow: scroll;
  background: rgba(255, 255, 255, 0.5);
  z-index: 10000; }

.modal-body {
  background: #fff;
  max-width: 500px;
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.1);
  color: #484848;
  padding: 15px;
  margin: auto; }
  .modal-body h1 {
    font-size: 28px;
    font-weight: 300;
    line-height: 30px; }
  .modal-body .close {
    font-size: 30px;
    font-weight: 300;
    position: absolute;
    right: 10px;
    top: 10px; }

.screenreader {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); }

.single-item-list {
  padding: 0;
  margin: 0;
  list-style: none;
  overflow: scroll;
  max-height: 100%;
  width: 100%;
  position: absolute;
  top: 120px;
  bottom: 0; }
  .single-item-list li {
    display: block;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid #eee; }
  .single-item-list .pick {
    padding: 7px 14px;
    border: 0;
    margin: 0;
    background: transparent;
    width: 100%;
    cursor: pointer; }
    .single-item-list .pick:hover {
      background: #f5f5f5; }
    .single-item-list .pick:focus {
      background: #2faaee;
      outline: none; }
    .single-item-list .pick img {
      float: left;
      background: #eee; }
    .single-item-list .pick span {
      float: left;
      display: block;
      margin-left: 10px;
      line-height: 60px;
      font: normal 17px 'Open Sans', Tahoma, Verdana, Arial, sans-serif;
      height: 60px;
      line-height: 60px;
      max-width: 80%; }

.new-collection {
  background: #fff;
  border-bottom: 1px solid #ededed;
  position: absolute;
  top: 60;
  width: 100%;
  height: 60px;
  padding: 10px 12px;
  box-sizing: border-box; }
  .new-collection > div {
    width: 100%;
    border: 0;
    margin: 0;
    display: flex;
    display: -webkit-flex; }
  .new-collection label {
    position: absolute;
    left: -999999px;
    box-sizing: border-box; }
  .new-collection input[type="text"] {
    width: 100%;
    border: 1px solid #ededed;
    border-radius: 0;
    box-sizing: border-box;
    float: none;
    height: 40px;
    font-size: 18px;
    padding: 0 10px;
    transition: all 0.1s ease-in;
    flex: 1 100%; }
    .new-collection input[type="text"]:focus {
      z-index: 10000;
      outline: none; }
  .new-collection input[type="submit"] {
    flex-shrink: 0;
    background: #429bff;
    border: none;
    color: #fff;
    font-size: 17px;
    font-weight: bold;
    height: 40px;
    margin: 0 0 0 14px;
    padding: 0 20px;
    cursor: pointer;
    float: right;
    transition: background 80ms ease-out; }
    .new-collection input[type="submit"]:disabled {
      background: #ededed; }

[data-hook="overlay"] {
  background: rgba(255, 255, 255, 0.9);
  z-index: 5000;
  margin: 0;
  border: 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%; }
  [data-hook="overlay"] .modal-body {
    background: #fff;
    border-radius: 0;
    width: 100%;
    margin: auto;
    padding: 0;
    position: relative;
    height: 100%;
    top: 50%;
    height: 90vh;
    max-height: 600px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
    max-width: 460px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%); }
    [data-hook="overlay"] .modal-body:focus {
      outline: none; }
  [data-hook="overlay"] [data-hook="description"] {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px); }
  [data-hook="overlay"] .close {
    line-height: 40px;
    font: 300 40px 'Open Sans', Tahoma, Verdana, Arial, sans-serif;
    width: 40px;
    height: 60px;
    position: absolute;
    text-align: center;
    top: -3px;
    right: 10px;
    background: none;
    border: none;
    margin: 0;
    -webkit-font-smoothing: antialiased; }
  [data-hook="overlay"] h1 {
    width: 100%;
    font: 300 24px 'Open Sans', Tahoma, Verdana, Arial, sans-serif;
    text-align: center;
    line-height: 40px;
    border-bottom: 1px solid #ededed;
    padding: 10px;
    box-sizing: border-box;
    margin: 0;
    text-align: center; }
  [data-hook="overlay"] .error {
    text-align: center;
    border-bottom: 1px solid #ff4444;
    border-top: 1px solid #ff4444;
    margin: 0;
    padding: 20px 10px;
    background: #ee5555;
    color: #fff;
    font: bold 16px 'Open Sans', Tahoma, Verdana, Arial, sans-serif;
    position: absolute;
    top: 0;
    width: 100%;
    box-sizing: border-box; }

.popover {
  position: absolute;
  background: #2faaee;
  color: #fff;
  z-index: 1000;
  top: 44px;
  width: 180px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
  padding: 20px;
  transition: all 200ms ease-out; }
  .popover h5 {
    margin: 0;
    font-weight: bold; }
  .popover h5, .popover p {
    font-size: 14px; }
  .popover p {
    margin-bottom: 0; }
  .popover:after {
    content: "";
    border: 10px solid transparent;
    border-bottom: 10px solid #2faaee;
    position: absolute;
    top: -20px;
    left: 30px; }
  .popover .close {
    width: 32px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    position: absolute;
    right: 10px;
    top: -10px;
    border: none;
    color: #eee;
    background: none;
    font-family: 'Open Sans', Tahoma, Verdana, Arial, sans-serif;
    opacity: 1; }
  .popover.hidden {
    -webkit-transform: translateY(10px);
    -moz-transform: translateY(10px);
    -ms-transform: translateY(10px);
    -o-transform: translateY(10px);
    transform: translateY(10px);
    opacity: 0; }

.empty-state {
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  left: 50%; }
  .empty-state h5 {
    color: #999;
    font-size: 16px; }
  .empty-state p {
    max-width: 80%;
    margin: auto;
    color: #999;
    font-size: 16px; }

.toolbar {
  background: #fff;
  border-bottom: 1px solid #e1e1e1;
  float: left;
  width: 100%; }

.logo {
  border-right: 1px solid #e1e1e1;
  display: block;
  float: left;
  height: 25px;
  margin: 10px 0;
  padding: 5px 15px;
  width: 140px; }
  .logo span {
    background: url('https://static.blovcdn.com/assets/gfx/logo-web.png') no-repeat center center;
    display: block;
    height: 100%;
    overflow: hidden;
    text-indent: 100%;
    width: 100%; }
    @media (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
      .logo span {
        background-image: url('https://static.blovcdn.com/assets/gfx/logo-web@2x.png');
        background-size: 100%; } }

.post-info {
  float: left;
  height: 35px;
  padding: 10px 15px;
  position: relative;
  width: 300px; }

.feed .post-info {
  cursor: pointer; }
  .feed .post-info:hover {
    background: #f5f5f5; }

.blog-info {
  border-right: 1px solid #e1e1e1;
  display: none;
  float: left;
  height: 35px;
  margin: 10px 0;
  padding: 0 15px;
  position: relative;
  width: 320px; }

.blog .blog-info, .post .blog-info {
  display: block; }

.blog .post-info {
  display: none; }

.blog-profile-link {
  color: #222;
  text-decoration: none; }
  .blog-profile-link:hover {
    text-decoration: underline; }

.post-title, .blog-title {
  color: #222;
  display: block;
  font-size: 13px;
  font-weight: 400;
  margin: 0; }

.blog-url, .blog-followers {
  color: #aaa;
  display: block;
  font-size: 12px;
  font-weight: 400;
  margin: 0;
  -webkit-font-smoothing: antialiased; }

.blog-title, .blog-followers {
  width: 200px; }

.navigation {
  display: none;
  float: left;
  padding: 12px 15px 10px 15px; }
  .navigation a {
    border: 1px solid #d0d0d0;
    border-radius: 50%;
    display: inline-block;
    filter: alpha(opacity=70);
    float: left;
    height: 30px;
    opacity: 0.7;
    text-align: center;
    width: 30px; }
    .navigation a:hover {
      filter: alpha(opacity=100);
      opacity: 1; }

.feed .navigation {
  display: block; }

.back {
  margin-right: 5px; }

.back-icon, .next-icon {
  margin-top: 4px; }

.first .back, .last .next {
  filter: alpha(opacity=30);
  opacity: 0.2;
  cursor: default;
  pointer-events: none; }

.post-actions {
  border-right: 1px solid #e1e1e1;
  filter: alpha(opacity=100);
  float: right;
  margin: 10px 0 0 0;
  opacity: 1;
  padding: 2px 15px 0 0; }
  .post-actions a, .post-actions .save-wrapper {
    cursor: pointer;
    float: left;
    text-decoration: none; }

.loading .post-actions, .loading .navigation, .loading .post-info {
  filter: alpha(opacity=30);
  opacity: 0.3;
  cursor: default;
  pointer-events: none; }

.save, .unsave, .follow, .unfollow {
  border: 1px solid #2faaee;
  border-radius: 20px;
  color: #2faaee;
  display: none;
  filter: alpha(opacity=80);
  font-size: 14px;
  margin: 0 15px 0 0;
  opacity: 0.8;
  padding: 5px 20px; }
  .save:hover, .unsave:hover, .follow:hover, .unfollow:hover {
    filter: alpha(opacity=100);
    opacity: 1; }

.post .save, .feed .save {
  display: inline-block; }
.post .unsave, .feed .unsave {
  background: #2faaee;
  color: #fff;
  display: none; }

.unfollow, .follow {
  cursor: pointer;
  margin: 2px 0 0 0;
  position: absolute;
  right: 15px;
  top: 0px; }

.post .follow, .blog .follow {
  display: inline-block; }
.post .unfollow, .blog .unfollow {
  background: #2faaee;
  color: #fff;
  display: none; }

.save-icon, .unsave-icon {
  margin: 0 5px 0 0; }

.saved .save {
  display: none; }
.saved .unsave {
  display: inline-block; }

.following .follow {
  display: none; }
.following .unfollow {
  display: inline-block; }

.share {
  border-radius: 50%;
  display: inline-block;
  height: 30px;
  margin-right: 5px;
  text-align: center;
  width: 30px; }

.blog .pin {
  display: none; }

.pin {
  background-color: #cc2127; }

.facebook {
  background-color: #3b599c; }

.tweet {
  background-color: #2baeec; }

.email {
  background-color: #b9b9b9; }

.close {
  color: #000;
  cursor: pointer;
  filter: alpha(opacity=20);
  font-size: 30px;
  font-weight: 300;
  float: right;
  line-height: 25px;
  margin: 10px 0;
  opacity: 0.2;
  padding: 5px 15px;
  text-shadow: 0 1px 0 #fff;
  text-decoration: none; }

.close:hover {
  filter: alpha(opacity=40);
  opacity: 0.4; }

.viewer-container {
  bottom: 0;
  left: 0;
  overflow: scroll;
  position: absolute;
  right: 0;
  top: 56px;
  -webkit-overflow-scrolling: touch; }

.has-postbar .feed ~ .viewer-container {
  top: 136px; }
.has-postbar .feed .frame-drop {
  display: block; }

.viewer {
  border: 0;
  height: 100%;
  width: 100%; }

.save-wrapper {
  position: relative; }

.dotdotdot, .post-title, .blog-title, .blog-url, .blog-followers, .item .blog-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.separator-bullet, .item time:before, .error li:after {
  content: "·";
  display: inline-block;
  height: 5px;
  line-height: 1px;
  margin-right: 5px;
  text-align: center;
  width: 3px; }

[data-hook="overlay"] {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  overflow: scroll;
  background: rgba(255, 255, 255, 0.5);
  z-index: 10000; }

.modal-body {
  background: #fff;
  max-width: 500px;
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.1);
  color: #484848;
  padding: 15px;
  margin: auto; }
  .modal-body h1 {
    font-size: 28px;
    font-weight: 300;
    line-height: 30px; }
  .modal-body .close {
    font-size: 30px;
    font-weight: 300;
    position: absolute;
    right: 10px;
    top: 10px; }

.screenreader {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); }

.single-item-list {
  padding: 0;
  margin: 0;
  list-style: none;
  overflow: scroll;
  max-height: 100%;
  width: 100%;
  position: absolute;
  top: 120px;
  bottom: 0; }
  .single-item-list li {
    display: block;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid #eee; }
  .single-item-list .pick {
    padding: 7px 14px;
    border: 0;
    margin: 0;
    background: transparent;
    width: 100%;
    cursor: pointer; }
    .single-item-list .pick:hover {
      background: #f5f5f5; }
    .single-item-list .pick:focus {
      background: #2faaee;
      outline: none; }
    .single-item-list .pick img {
      float: left;
      background: #eee; }
    .single-item-list .pick span {
      float: left;
      display: block;
      margin-left: 10px;
      line-height: 60px;
      font: normal 17px 'Open Sans', Tahoma, Verdana, Arial, sans-serif;
      height: 60px;
      line-height: 60px;
      max-width: 80%; }

.new-collection {
  background: #fff;
  border-bottom: 1px solid #ededed;
  position: absolute;
  top: 60;
  width: 100%;
  height: 60px;
  padding: 10px 12px;
  box-sizing: border-box; }
  .new-collection > div {
    width: 100%;
    border: 0;
    margin: 0;
    display: flex;
    display: -webkit-flex; }
  .new-collection label {
    position: absolute;
    left: -999999px;
    box-sizing: border-box; }
  .new-collection input[type="text"] {
    width: 100%;
    border: 1px solid #ededed;
    border-radius: 0;
    box-sizing: border-box;
    float: none;
    height: 40px;
    font-size: 18px;
    padding: 0 10px;
    transition: all 0.1s ease-in;
    flex: 1 100%; }
    .new-collection input[type="text"]:focus {
      z-index: 10000;
      outline: none; }
  .new-collection input[type="submit"] {
    flex-shrink: 0;
    background: #429bff;
    border: none;
    color: #fff;
    font-size: 17px;
    font-weight: bold;
    height: 40px;
    margin: 0 0 0 14px;
    padding: 0 20px;
    cursor: pointer;
    float: right;
    transition: background 80ms ease-out; }
    .new-collection input[type="submit"]:disabled {
      background: #ededed; }

[data-hook="overlay"] {
  background: rgba(255, 255, 255, 0.9);
  z-index: 5000;
  margin: 0;
  border: 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%; }
  [data-hook="overlay"] .modal-body {
    background: #fff;
    border-radius: 0;
    width: 100%;
    margin: auto;
    padding: 0;
    position: relative;
    height: 100%;
    top: 50%;
    height: 90vh;
    max-height: 600px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
    max-width: 460px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%); }
    [data-hook="overlay"] .modal-body:focus {
      outline: none; }
  [data-hook="overlay"] [data-hook="description"] {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px); }
  [data-hook="overlay"] .close {
    line-height: 40px;
    font: 300 40px 'Open Sans', Tahoma, Verdana, Arial, sans-serif;
    width: 40px;
    height: 60px;
    position: absolute;
    text-align: center;
    top: -3px;
    right: 10px;
    background: none;
    border: none;
    margin: 0;
    -webkit-font-smoothing: antialiased; }
  [data-hook="overlay"] h1 {
    width: 100%;
    font: 300 24px 'Open Sans', Tahoma, Verdana, Arial, sans-serif;
    text-align: center;
    line-height: 40px;
    border-bottom: 1px solid #ededed;
    padding: 10px;
    box-sizing: border-box;
    margin: 0;
    text-align: center; }
  [data-hook="overlay"] .error {
    text-align: center;
    border-bottom: 1px solid #ff4444;
    border-top: 1px solid #ff4444;
    margin: 0;
    padding: 20px 10px;
    background: #ee5555;
    color: #fff;
    font: bold 16px 'Open Sans', Tahoma, Verdana, Arial, sans-serif;
    position: absolute;
    top: 0;
    width: 100%;
    box-sizing: border-box; }

.popover {
  position: absolute;
  background: #2faaee;
  color: #fff;
  z-index: 1000;
  top: 44px;
  width: 180px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
  padding: 20px;
  transition: all 200ms ease-out; }
  .popover h5 {
    margin: 0;
    font-weight: bold; }
  .popover h5, .popover p {
    font-size: 14px; }
  .popover p {
    margin-bottom: 0; }
  .popover:after {
    content: "";
    border: 10px solid transparent;
    border-bottom: 10px solid #2faaee;
    position: absolute;
    top: -20px;
    left: 30px; }
  .popover .close {
    width: 32px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    position: absolute;
    right: 10px;
    top: -10px;
    border: none;
    color: #eee;
    background: none;
    font-family: 'Open Sans', Tahoma, Verdana, Arial, sans-serif;
    opacity: 1; }
  .popover.hidden {
    -webkit-transform: translateY(10px);
    -moz-transform: translateY(10px);
    -ms-transform: translateY(10px);
    -o-transform: translateY(10px);
    transform: translateY(10px);
    opacity: 0; }

.empty-state {
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  left: 50%; }
  .empty-state h5 {
    color: #999;
    font-size: 16px; }
  .empty-state p {
    max-width: 80%;
    margin: auto;
    color: #999;
    font-size: 16px; }

.drop-container {
  height: 100px;
  display: none;
  left: 240px;
  position: absolute;
  top: 55px;
  width: 328px; }

.frame-drop {
  background: #fff;
  border: 1px solid #cecece;
  box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.1);
  display: none;
  left: 0;
  margin: 0;
  overflow-y: auto;
  padding: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 10; }

.feed .drop-show, .feed .drop-container {
  display: block; }

.frame-drop li {
  border-left: 1px solid #e1e1e1;
  box-sizing: border-box;
  display: block;
  height: 80px;
  padding: 5px 10px 5px 5px; }
.frame-drop .more {
  color: #aaa;
  cursor: pointer;
  height: 35px;
  font-size: 12px;
  padding: 10px 15px;
  text-align: center; }
  .frame-drop .more:hover {
    background: #f5f5f5; }
.frame-drop.no-previous-posts .more {
  display: none; }
.frame-drop .spinner-container {
  height: 80px; }
.frame-drop .spinner {
  height: 20px;
  margin: -10px 0 0 -10px;
  position: relative;
  width: 20px; }

.has-postbar .drop-container {
  left: 0;
  width: 100%; }
.has-postbar .frame-drop {
  border-color: #e1e1e1;
  box-shadow: none;
  transition: 0.2s all;
  width: 100%; }
  .has-postbar .frame-drop li {
    float: left;
    width: 320px; }

.item {
  cursor: pointer; }
  .item time {
    color: #aaa;
    display: inline;
    font-size: 12px;
    -webkit-font-smoothing: antialiased; }
  .item .thumb {
    background-position: center center;
    background-size: cover;
    float: left;
    height: 70px;
    margin-right: 5px;
    width: 70px; }
  .item .post-title {
    font-weight: 400;
    margin: 0;
    max-height: 53px;
    overflow-y: hidden;
    white-space: normal; }
  .item .blog-name {
    display: inline-block;
    height: 18px;
    max-width: 126px;
    vertical-align: bottom;
    color: #aaa;
    font-size: 12px;
    -webkit-font-smoothing: antialiased; }
  .item:hover {
    background: #f5f5f5; }

.highlight {
  background: #439afc; }
  .highlight .post-title, .highlight .blog-name, .highlight time {
    color: #fff; }
  .highlight:hover {
    background: #439afc; }

.postbar-nav-button {
  background-color: #fff;
  border: 1px solid #e1e1e1;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  display: none;
  height: 60px;
  opacity: 0.9;
  position: absolute;
  top: 10px;
  transition: 0.1s all;
  width: 25px;
  z-index: 20; }
  .postbar-nav-button:hover {
    opacity: 1; }
  .postbar-nav-button .back-icon, .postbar-nav-button .next-icon {
    margin: 21px 0 0 4px; }

.previous-page {
  left: 0; }

.next-page {
  right: 0; }

.has-postbar .drop-container:hover .postbar-nav-button {
  display: block; }
.has-postbar .no-previous-page:hover .previous-page, .has-postbar .no-next-page:hover .next-page {
  display: none; }

html {
  bottom: 0;
  height: 100%;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0; }

body {
  font-family: 'Open Sans', Tahoma, Verdana, Arial, sans-serif;
  height: 100%;
  margin: 0;
  pointer-events: all; }

.spinner {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  background-color: #333;
  text-indent: 100%;
  overflow: hidden;
  display: block;
  border-radius: 100%;
  -webkit-animation: scaleout 1s infinite ease-in-out;
  animation: scaleout 1s infinite ease-in-out; }

.error {
  color: #222;
  margin: 200px auto;
  text-align: center; }
  .error h1 {
    font-weight: 300; }
  .error ul, .error ol {
    list-style-type: none;
    margin: 0;
    padding: 0; }
  .error li {
    display: inline; }
    .error li:after {
      margin: 0 5px; }
    .error li.last-child:after {
      content: ""; }
  .error a {
    color: #2faaee;
    text-decoration: none; }
    .error a:hover {
      text-decoration: underline; }
  .error p {
    margin: 20px 0 3px 0; }

@-webkit-keyframes scaleout {
  0% {
    -webkit-transform: scale(0); }

  100% {
    -webkit-transform: scale(1);
    opacity: 0; } }

@keyframes scaleout {
  0% {
    transform: scale(0);
    -webkit-transform: scale(0); }

  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    opacity: 0; } }