@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800);

/* html5doctor.com Reset Stylesheet v1.4 2009-07-27 Author: Richard Clark - http://richclarkdesign.com */
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
menu,
time,
mark,
audio,
video {
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  margin: 0;
  padding: 0;
}
body {
  line-height: 1;
  margin: 0;
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}
nav ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: none;
}
a {
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  outline: 0;
  margin: 0;
  padding: 0;
}
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}
del {
  text-decoration: line-through;
}
abbr[title],
dfn[title] {
  border-bottom: 1px dotted #000;
  cursor: help;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}
input,
select {
  vertical-align: middle;
}

body {
  background-color: #f1f2f3;
  padding: 0;
  margin: 0;
  font-family: "Open Sans", "Helvetica Neue UltraLight", "Helvetica Neue",
    Helvetica, Arial, sans-serif;
}

img,
iframe {
  border: none;
  margin: 0;
  padding: 0;
}

iframe {
  display: block;
}

ul {
  list-style-type: none;
}

.x-banner {
  height: 100px;
  background-position-x: left;
  background-position-y: top;
  background-repeat: no-repeat;
}

.x-container-body {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.x-container-main {
  margin: 0 auto;
  padding: 10px 20px;
}

@media only screen and (max-width: 767px) {
  .x-container-main {
    padding: 10px;
  }
}

.x-anchor-footer-tab {
  display: none;

  position: fixed;
  z-index: 30;

  bottom: 0;
  right: 5%;

  width: 180px;

  background-color: rgba(189, 54, 47, 0.95);
  color: #fff;
  border: 1px solid #1f1f1f;
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;

  padding: 5px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  text-align: center;
  font-size: 12px;
  font-weight: 200;

  cursor: pointer;
}

@media only screen and (min-width: 768px) {
  .x-anchor-footer-tab {
    width: 200px;
    font-size: 14px;
    padding: 10px;
  }
}

.x-container-card {
  position: relative;
  background-color: #fefefe;
  padding: 10px;

  word-wrap: break-word;

  -webkit-border-radius: 5px;
  border-radius: 5px;

  -webkit-box-shadow: 0 2px 0 #ddd;
  box-shadow: 0 2px 0 #ddd;

  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/************************************
 * Footer Container
 ************************************/

.x-container-footer {
  margin: 0 auto;
  height: 20px;
  padding: 5px 20px 0 20px;
  color: #666;
  font-size: 12px;
  text-align: center;
}

.x-container-footer a {
  color: #666;
}

@media only screen and (max-width: 767px) {
  .x-container-footer {
    padding: 5px 10px 0 10px;
  }
}

.x-container-footer .x-logo-grabyo {
  display: inline-block;
  background: transparent
    url(https://dwo3ckksxlb0v.cloudfront.net/static/img/logo-grabyo-logoandtext-grey-120x44.png)
    no-repeat top right;
  background-size: auto 25px;
  height: 25px;
  width: 75px;
  vertical-align: middle;
  margin-top: 0;
}

/************************************
 * Card - Media Viewer
 ************************************/

.x-card-media-viewer {
  padding: 0;
}

.x-card-media-viewer .x-media-placeholder {
  position: relative;
  background-color: #000;

  -webkit-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;

  overflow: hidden;

  cursor: pointer;

  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.x-card-media-viewer .x-media-placeholder.bottom-banner {
  -webkit-border-radius: 0px 0px 0 0;
  border-radius: 0px 0px 0 0;
}

.x-card-media-viewer .x-media-placeholder .x-dummy {
  padding-top: 56%;
}

.x-card-media-viewer .x-media-placeholder.bottom-banner .x-dummy {
  padding-top: 9.3%;
}

.x-card-media-viewer .x-media-placeholder .x-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center left;
}

.x-card-media-viewer .x-info {
  padding: 8px;
  font-size: 14px;

  -webkit-border-radius: 0 0 5px 5px;
  border-radius: 0 0 5px 5px;
}

.x-card-media-viewer .x-info .x-grab-view-count {
  text-align: right;
  font-size: 12px;
  font-weight: 400;
  color: #999;
  margin-left: 10px;
}

.x-card-media-viewer .x-info .x-button-cta {
  margin-top: 5px;
}

.x-card-media-viewer .x-info .x-grab-type {
  color: #666;
}

.x-card-media-viewer .x-info .x-grab-user-avatar {
  width: 35px;
  height: 35px;

  -webkit-border-radius: 50%;
  border-radius: 50%;

  margin-right: 8px;
  overflow: hidden;
}

.x-card-media-viewer .x-info .x-grab-user-name {
  font-weight: 600;
}

.x-card-media-viewer .x-info .x-grab-user-name .x-grab-others {
  font-size: 12px;
}

.x-card-media-viewer .x-info .x-grab-user-handle {
  font-size: 12px;
  font-weight: 400;
  color: #666;
}

.x-card-media-viewer .x-info .x-grab-description {
  white-space: pre-wrap;
  padding: 10px;
  font-size: 14px;
  font-weight: 200;
}

.x-card-media-viewer .x-info .x-grab-time {
  font-size: 10px;
  font-weight: 200;
  color: #666;
  min-height: 20px;
}

.x-card-media-viewer .x-container-share-widgets {
  padding: 10px;
}

.x-card-media-viewer .x-container-share-widgets.x-render-config-option {
  padding: 0 10px;
}

.x-card-media-viewer .x-container-share-widgets .x-label-share-widgets {
  padding-right: 10px;
}

.x-card-media-viewer
  .x-container-share-widgets.x-render-config-option
  .x-label-share-widgets {
  padding: 10px 10px 10px 0;
}

@media only screen and (max-width: 480px) {
  .x-card-media-viewer .x-container-share-widgets .x-label-share-widgets {
    display: none;
  }
}

.x-card-media-viewer .x-container-share-widgets .x-share-widget {
  min-width: 100px;
  height: 20px;
}

.x-card-media-viewer
  .x-container-share-widgets.x-render-config-option
  .x-share-widget {
  padding: 10px 0;
}

.x-card-media-viewer
  .x-container-share-widgets.x-render-config-option
  .x-report-widget {
  padding: 10px 0;
}

.x-card-media-viewer .x-container-external-links {
  padding: 0 10px 10px 10px;
}

.x-card-media-viewer .x-container-external-links .x-external-link {
  font-size: 12px;
}

.x-card-media-viewer .x-comments {
  padding: 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  max-height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
}

.x-card-media-viewer .bottom-bar-actions {
  margin: 15px -8px -8px;
  background-color: #ececec;
  border-top: 1px solid #c4c4c4;
}

.x-card-media-viewer .bottom-bar-actions .action:hover {
  background-color: #e2e2e2;
}

.x-card-media-viewer .action {
  width: 33.33%;
  border-left: 1px solid #bdbdbd;
  text-align: center;
  box-sizing: border-box;
  float: left;
}

.x-card-media-viewer .action:first-of-type {
  border-left: none;
}

.x-card-media-viewer .action button {
  width: 100%;
  background: transparent;
  border: none;
  padding: 10px 0px;
}

.center-in-timeline {
  height: 25%;
  width: 25%;
  margin: 10% auto;
}

/************************************
 * Card - Timeline Item
 ************************************/
.x-label-loading-timeline {
  margin-top: 20px;
  text-align: center;
}

/************************************
 * Embed page style
 ************************************/

/* Iframe */
#embed-iframe-container {
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  min-width: 250px;
}
#embed-iframe-container.normal {
  bottom: 32px;
}
#embed-iframe-container.large {
  bottom: 60px;
}

/* Player Bottom Banner*/
#player-bottom-banner {
  background: none repeat scroll 0% 0% rgb(52, 52, 52);
  width: 100%;
  position: absolute;
  bottom: 0;
  min-width: 250px;
  height: 50px;
  overflow: hidden;
}

#player-bottom-banner-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.x-media-placeholder.bottom-banner.embed {
  -webkit-border-radius: 0px 0px 0 0;
  border-radius: 0px 0px 0 0;
  position: absolute;
  bottom: 0;
  width: 100%;
}

.x-media-placeholder .x-dummy {
  padding-top: 56%;
}

.x-media-placeholder.bottom-banner .x-dummy {
  padding-top: 9.3%;
}

.x-media-placeholder .x-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center left;
}

/* Banner */
#embed-banner {
  background: none repeat scroll 0% 0% rgb(52, 52, 52);
  width: 100%;
  position: absolute;
  bottom: 0;
  min-width: 250px;
}
#embed-banner.normal {
  height: 32px;
}

#embed-banner-container {
  padding: 5px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-sizing: border-box;
}

#embed-banner-container #logo {
  position: relative;
  float: left;
  margin-right: 10px;
  padding: 0px;
}

/* Share container basic style */
#share-container {
  display: inline-block;
  position: relative;
  top: 1px;
}
#share-container .facebook-share {
  float: left;
  height: 21px;
  overflow: hidden;
  margin-right: 15px;
}
#share-container .twitter-share {
  float: left;
  height: 21px;
  overflow: hidden;
  margin-right: 15px;
}

#embed-banner #id-selected-share-view-count {
  color: white;
  font-size: 12px;
  position: relative;
  float: right;
  top: 1px;
}

/* 
 * Large Style
 * Used when there is not enough space to display all widgets in the banner horizontally next to each other
 * This defaults to displaying the logo and views at the bottom
 */
#embed-banner.large {
  height: 60px;
}
#embed-banner.large #share-container {
  margin-bottom: 5px;
}
#embed-banner.large #logo {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 5px 0px 3px 5px;
}

#embed-banner.large #id-selected-share-view-count {
  position: absolute;
  top: initial;
  right: 0;
  bottom: 0;
  padding: 5px 5px 3px 5px;
}

/************************************
 * Misc objects
 ************************************/

.x-see-more-below-divider {
  height: 50px;
  margin-bottom: 50px;
  border-bottom: 1px solid #ddd;

  text-align: center;
  line-height: 100px;
}

.x-see-more-below-divider span {
  padding: 0 10px;
  background-color: #f1f2f3;
  color: #666;
  font-size: 18px;
}

/************************************
 * Global Overrides
 ************************************/

.x-no-margin {
  margin: 0;
}

/************************************ 
 * !!! WARNING !!!
 * Below is a PATCH for Bootstrap Android 4.X HTML5 Video Controls Bug: (https://github.com/twitter/bootstrap/issues/7104) and (https://code.google.com/p/android/issues/detail?id=34301)
 * Caution: if this patch is enabled, you have to stop using <input type="button">. Use <button> instead
 *				 	 Alternatively - test when Bootstrap3 is out (http://getbootstrap.com)
 ************************************/

input[type="button"] {
  width: 50px;
}

/************************************
 * Facebook Plugins Overrides
 ************************************/

/* Make the comments box 100% instead of fixed width to make it responsive like the site */
.fb-comments,
.fb-comments span,
.fb-comments.fb_iframe_widget span iframe {
  width: 100% !important;
}

/* Hide the fly out of the like button, because its fixed at 480px width and cuts off in iPhone / mobile devices */
@media only screen and (max-width: 540px) {
  .fb-share-button span {
    overflow: hidden !important;
  }
}

/************************************
 * jQuery.Masonry Overrides
 ************************************/

.masonry,
.masonry .masonry-brick {
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -ms-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s;
}

.masonry {
  -webkit-transition-property: height, width;
  -moz-transition-property: height, width;
  -ms-transition-property: height, width;
  -o-transition-property: height, width;
  transition-property: height, width;
}

.masonry .masonry-brick {
  -webkit-transition-property: left, right, top;
  -moz-transition-property: left, right, top;
  -ms-transition-property: left, right, top;
  -o-transition-property: left, right, top;
  transition-property: left, right, top;
}

/************************************
 * jQuery.Packery Overrides
 ************************************/

.packery {
  position: relative;
}

.x-display-on-selected {
  display: none !important;
}
.selected .x-display-on-selected {
  display: block !important;
}
.x-hide-on-selected {
  display: block !important;
}
.selected .x-hide-on-selected {
  display: none !important;
}

.column-sizer {
  width: 23%;
}
.gutter-sizer {
  width: 2%;
}
.item-packery,
.stamp-packery {
  width: 24%;
}
.item-packery.selected,
.stamp-packery.selected {
  width: 49%;
}

@media only screen and (min-width: 1900px) {
  .column-sizer {
    width: 19%;
  }
  .gutter-sizer {
    width: 1%;
  }
  .item-packery,
  .stamp-packery {
    width: 19%;
  }
  .item-packery.selected,
  .stamp-packery.selected {
    width: 39%;
  }
}

@media only screen and (max-width: 1280px) {
  .column-sizer {
    width: 32%;
  }
  .gutter-sizer {
    width: 2%;
  }
  .item-packery,
  .stamp-packery {
    width: 32%;
  }
  .item-packery.selected,
  .stamp-packery.selected {
    width: 66%;
  }
}

@media only screen and (max-width: 768px) {
  .column-sizer {
    width: 48.5%;
  }
  .gutter-sizer {
    width: 2%;
  }
  .item-packery,
  .stamp-packery {
    width: 48.5%;
  }
  .item-packery.selected,
  .stamp-packery.selected {
    width: 100%;
  }
}

@media only screen and (max-width: 400px) {
  .column-sizer {
    width: 100%;
  }
  .gutter-sizer {
    width: 4%;
  }
  .item-packery,
  .stamp-packery {
    width: 100%;
  }
  .item-packery.selected,
  .stamp-packery.selected {
    width: 100%;
  }
}
