body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 14px;
  font-family: 'Open Sans', sans-serif;
}
/* Utility Classes */
.pull-right {
  float: right;
}
.pull-left {
  float: left;
}
.align-table {
  display: table;
}
.align-middle {
  display: table-cell;
  vertical-align: middle;
  float: inherit;
}
.u-remove-a-styles {
  text-decoration: none;
  color: #000;
}
.widget-title {
  margin: 0;
  max-width: 100%;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-size: 1.11111em;
  line-height: 25px;
  color: #396b63;
}
.widget-creation-timestamp {
  font-size: 0.7em;
  color: #ccc;
  position: absolute;
  bottom: 9px;
  left: 25px;
  display: inline-block;
  max-width: 150px;
  overflow: hidden;
}
.widget-content {
  position: relative;
}
.widget-footer {
  font-weight: lighter;
  position: absolute;
  font-size: 12px;
  line-height: 12px;
  text-align: right;
}
.widget-footer a {
  color: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  vertical-align: top;
  line-height: 30px;
}
.widget-footer a img {
  border: 0;
  padding: 0;
  margin: 0;
}
.network-icon {
  position: absolute;
  color: #a7aaac;
  font-size: 0.8em;
  opacity: 0.5;
  text-decoration: none;
}
.record {
  position: absolute;
  display: inline-block;
  padding: 8px;
}
.graph-content {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.graph-content .graph-footer {
  overflow: hidden;
  color: #fff;
  opacity: 0.8;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
}
.graph-content:hover {
  cursor: pointer;
}
.text-content {
  width: 90%;
  height: 90%;
  padding: 5%;
  background-color: #fff;
  border: 1px solid #D5D5D5;
  border-radius: 3px;
}
.graph-content:hover,
.text-content:hover,
.fake-content:hover {
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
}
.text-body {
  margin: 0;
  height: 90px;
  font-size: 12px;
  line-height: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.text-body a {
  color: #0daddd;
  text-decoration: none;
}
.text-body:hover {
  cursor: pointer;
}
.record-caption {
  height: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 5px;
}
.record-caption a {
  color: #000000;
  text-decoration: none;
}
.graphic-caption.small {
  font-size: 12px;
  line-height: 14px;
}
.graphic-caption.medium {
  font-size: 16px;
  line-height: 20px;
}
.graphic-caption.large {
  font-size: 18px;
  line-height: 21px;
}
.graphic-caption.super-large {
  font-size: 32px;
  line-height: 38px;
}
.text-caption.small {
  font-size: 18px;
  line-height: 22px;
}
.text-caption.medium {
  font-size: 21px;
  line-height: 26px;
}
.text-caption.large {
  font-size: 24px;
  line-height: 30px;
}
.text-caption.super-large {
  font-size: 48px;
  line-height: 65px;
}
.fadeout {
  position: absolute;
  bottom: 25px;
  left: 5%;
  height: 30px;
  width: 90%;
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #ffffff 70%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(70%, #ffffff));
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #ffffff 70%);
  background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #ffffff 70%);
  background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #ffffff 70%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
}
.grid-fadeout {
  position: absolute;
  bottom: 0;
  height: 20px;
  width: 100%;
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #ffffff 70%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(70%, #ffffff));
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #ffffff 70%);
  background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #ffffff 70%);
  background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #ffffff 70%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
}
.twitter-icon {
  position: absolute;
  font-size: 0.9em;
  text-decoration: none;
  bottom: 6px;
  opacity: 0.5;
  color: #a4a199;
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
}
.twitter-icon.reply {
  right: 45px;
}
.twitter-icon.retweet {
  right: 27px;
}
.twitter-icon.star {
  right: 10px;
}
.twitter-icon:hover {
  opacity: 0.8;
}
.record-tile.record-small {
  width: 64px;
  height: 64px;
}
.record-tile.record-small .network-icon {
  bottom: 8px;
  left: 10px;
  font-size: 7px;
  max-width: 54px;
}
.record-tile.record-medium {
  width: 144px;
  height: 144px;
}
.record-tile.record-medium .network-icon {
  bottom: 8px;
  left: 10px;
  max-width: 134px;
}
.record-tile.record-large {
  width: 304px;
  height: 304px;
}
.record-tile.record-large .network-icon {
  bottom: 8px;
  left: 10px;
  max-width: 294px;
}
.record-tile.record-large .text-content .text-body {
  font-size: 24px;
  line-height: 32px;
  height: 225px;
}
.record-tile.record-super-large {
  width: 624px;
  height: 624px;
}
.record-tile.record-super-large .network-icon {
  bottom: 8px;
  left: 10px;
  max-width: 294px;
}
.record-tile.record-super-large .text-content .text-body {
  font-size: 48px;
  line-height: 56px;
  height: 550px;
}
.pic-profile {
  width: 25px;
  height: 25px;
  border: 0;
}
.info-profile {
  max-width: 100px;
  margin-left: 5px;
  position: absolute;
  display: inline-block;
}
.btn-profile {
  text-decoration: none;
  color: #000;
}
.btn-profile .glyphicons.social-icon {
  font-size: 25px;
  color: #a7aaac;
}
.btn-profile.name-profile:hover {
  text-decoration: underline;
}
.name-profile {
  font-size: 12px;
  line-height: 12px;
  display: block;
  vertical-align: top;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}
.name-profile small {
  font-size: 0.8em;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: lighter;
}
.record-grid.portrait.record-small,
.flip-container.portrait.record-small {
  width: 184px;
  height: 384px;
}
.record-grid.portrait.record-medium,
.flip-container.portrait.record-medium {
  width: 234px;
  height: 484px;
}
.record-grid.portrait.record-large,
.flip-container.portrait.record-large {
  width: 284px;
  height: 584px;
}
.record-grid.portrait.record-super-large,
.flip-container.portrait.record-super-large {
  width: 584px;
  height: 1184px;
}
.record-grid.landscape.record-small,
.flip-container.landscape.record-small {
  height: 184px;
  width: 384px;
}
.record-grid.landscape.record-medium,
.flip-container.landscape.record-medium {
  height: 234px;
  width: 484px;
}
.record-grid.landscape.record-large,
.flip-container.landscape.record-large {
  height: 284px;
  width: 584px;
}
.record-grid.landscape.record-super-large,
.flip-container.landscape.record-super-large {
  height: 584px;
  width: 1184px;
}
.record-header.portrait {
  width: 100%;
  height: 50%;
}
.record-header.landscape {
  display: inline-block;
  height: 100%;
  width: 50%;
}
.record-header-inner {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.record-body-inner {
  overflow-y: hidden;
  width: 100%;
  height: 100%;
}
.record-profile {
  margin-bottom: 10px;
}
.fake-content {
  border: 1px solid #ccc;
  width: 100%;
  height: 100%;
  border-radius: 4px;
}
.fake-content.filler-0 {
  background-color: #EAEAEA;
}
.fake-content.filler-1 {
  background-color: #C0C0C0;
}
.fake-content.filler-2 {
  background-color: #7A7A7A;
}
.fake-content.filler-3 {
  background-color: #A8A8A8;
}
.fake-content.filler-4 {
  background-color: #FCFCFC;
}
.record-container {
  position: relative;
  width: 100%;
  height: 100%;
  border: 1px solid #D5D5D5;
}
.record-container:hover {
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
}
.record-inner {
  height: 100%;
  width: 100%;
  background: #fff;
}
.record-meta.small {
  height: 30px;
}
.record-meta.medium {
  height: 55px;
}
.record-meta.large {
  height: 60px;
}
.record-meta.super-large {
  height: 80px;
}
.record-meta.landscape {
  margin: 5px;
}
.record-meta.portrait {
  margin: 5px;
}
.record-meta-pic-img,
.record-meta-social-icon {
  border: 0;
}
.record-meta-pic-img.small,
.record-meta-social-icon.small {
  width: 25px;
  height: 25px;
}
.record-meta-pic-img.medium,
.record-meta-social-icon.medium {
  width: 50px;
  height: 50px;
}
.record-meta-pic-img.large,
.record-meta-social-icon.large {
  width: 60px;
  height: 60px;
}
.record-meta-pic-img.super-large,
.record-meta-social-icon.super-large {
  width: 80px;
  height: 80px;
}
.record-meta-social-icon {
  border: 0;
  color: #000;
}
.record-meta-social-icon.small {
  font-size: 25px;
}
.record-meta-social-icon.medium {
  font-size: 50px;
}
.record-meta-social-icon.large {
  font-size: 60px;
}
.record-meta-social-icon.super-large {
  font-size: 80px;
}
.record-meta-block {
  display: inline-block;
  height: 100%;
}
.record-meta-name h1,
.record-meta-name h2 {
  margin: 0;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.record-meta-name h1.small {
  font-size: 12px;
  line-height: 12px;
  max-width: 75px;
}
.record-meta-name h1.medium {
  font-size: 15px;
  line-height: 15px;
  max-width: 130px;
}
.record-meta-name h1.large {
  font-size: 20px;
  line-height: 20px;
  max-width: 180px;
}
.record-meta-name h2 {
  font-weight: lighter;
}
.record-meta-name h2.small {
  font-size: 0.8em;
  max-width: 75px;
}
.record-meta-name h2.medium {
  font-size: 1em;
}
.record-meta-name h2.large {
  font-size: 1.2em;
}
.record-caption-container {
  position: relative;
}
.record-caption-container.small {
  height: calc(100% - 100px);
}
.record-caption-container.medium {
  height: calc(100% - 100px);
}
.record-caption-container.large {
  height: calc(100% - 100px);
}
.social-btn {
  text-decoration: none;
  bottom: 6px;
  opacity: 0.5;
  color: #a4a199;
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
}
.social-btn.small {
  font-size: 0.8em;
}
.social-btn.medium {
  font-size: 0.9em;
}
.social-btn.large {
  font-size: 1em;
}
.record-body.portrait {
  position: relative;
  height: 45%;
  width: 100%;
}
.record-body.landscape {
  display: inline-block;
  vertical-align: top;
  position: relative;
  width: 48%;
  height: 100%;
}
.record-footer {
  height: 20px;
  width: 100%;
}
.record-footer-inner {
  margin-top: 5px;
  position: absolute;
  bottom: 10px;
  width: 100%;
}
.record-footer-text {
  color: #000;
}
.record-footer-text.small {
  font-size: 0.8em;
}
.record-footer-text.medium {
  font-size: 1.0em;
}
.record-footer-text.large {
  font-size: 1.2em;
}
.record-footer-icon {
  margin-top: 5px;
  margin-right: 5px;
}
.flip-container {
  perspective: 1000px;
  -webkit-perspective: 1000px;
}
/* flip the pane when hovered */
.flip-container .is-flipped {
  transform: rotateY(180deg);
}
/* flip speed goes here */
.flipper {
  position: relative;
  transition: 0.6s;
  transform-style: preserve-3d;
  height: 100%;
  width: 100%;
}
.flipper,
.front,
.back {
  width: 100%;
  height: 100%;
}
/* hide back of pane during swap */
.front,
.back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}
/* front pane, placed above back */
.front {
  z-index: 2;
  /* for firefox 31 */
  transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
  transform: rotateY(180deg);
}