.tws-list .dropdown-menu {
  display: block;
}

.tws-list--pagination {
  display: inline-block;
}

.tws-list--controls {
  display: inline-block;
  margin: 20px;
}

.tws-list--type-list,
.tws-list--type-grid {
  position: relative;
}

.tws-list--loading-overlay {
  background-color: rgba(255, 255, 255, 0.5);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.tws-list--type-list .row.row .tws-list-repeat {
  display: table;
}

.tws-list--type-list .tws-list-repeat > * {
  display: table-cell;
  width: auto;
  vertical-align: middle;
}

.tws-list--type-list .tws-list-repeat > *:first-child {
  width: 0;
}

/*
.tws-list-type-grid {
  display: inline-block;
  list-style: none;
  margin: 15px;
  padding: 0;
  width: 100%;
  position: relative;
}

.tws-list-type-grid > li {
  display: inline-block;
  width: 200px;
  min-height: 200px;
  height: 300px;
  float: left;
  margin: 15px;
  background-size: cover;
}
*/

/*
  proportions scaling
  ====================

  HTML Structure:

  .proportions-hack
    img.proportions-hack--proportions-image
    .proportions-hack--content-wrapper

  RESERVING THE PROPORTIONS
  The <img> is an invisible gif with a width of 100%. Unlike any other HTML element images are
  scaled proportionsly. This forces the height of the parent (.proportions-hack) to scale
  proportionsly.

  FILLING THE SPACE
  To use the space that the invisible image has reserved .tws-content-box must be set to
  `position: relative;`. This allows .tws-content-box--inner-wrapper to be stretched to cover the
  area of its parent.
*/

.tws-list--proportions-hack {
  position: relative;
  width: 100%;
}

.tws-list--proportions-hack--proportional-image {
  width: 100%;
}

.tws-list--proportions-hack--content-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}

/* Fix for Bootstrap */
.thumbnail .tws-list--proportions-hack--content-wrapper > img {
  width: 100%;
}