.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  max-width: 100%;
  height: auto;
}
.btn-group-lg > .btn {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 6px;
}
.btn-group-sm > .btn {
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}
.btn-group-xs > .btn {
  padding: 1px 5px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}
.dl-horizontal dd:before,
.dl-horizontal dd:after,
.container:before,
.container:after,
.container-fluid:before,
.container-fluid:after,
.row:before,
.row:after,
.form-horizontal .form-group:before,
.form-horizontal .form-group:after,
.btn-toolbar:before,
.btn-toolbar:after,
.btn-group-vertical > .btn-group:before,
.btn-group-vertical > .btn-group:after,
.nav:before,
.nav:after,
.navbar:before,
.navbar:after,
.navbar-header:before,
.navbar-header:after,
.navbar-collapse:before,
.navbar-collapse:after,
.pager:before,
.pager:after,
.panel-body:before,
.panel-body:after,
.modal-footer:before,
.modal-footer:after {
  content: " ";
  display: table;
}
.dl-horizontal dd:after,
.container:after,
.container-fluid:after,
.row:after,
.form-horizontal .form-group:after,
.btn-toolbar:after,
.btn-group-vertical > .btn-group:after,
.nav:after,
.navbar:after,
.navbar-header:after,
.navbar-collapse:after,
.pager:after,
.panel-body:after,
.modal-footer:after {
  clear: both;
}
.dl-horizontal dd:before,
.dl-horizontal dd:after,
.container:before,
.container:after,
.container-fluid:before,
.container-fluid:after,
.row:before,
.row:after,
.form-horizontal .form-group:before,
.form-horizontal .form-group:after,
.btn-toolbar:before,
.btn-toolbar:after,
.btn-group-vertical > .btn-group:before,
.btn-group-vertical > .btn-group:after,
.nav:before,
.nav:after,
.navbar:before,
.navbar:after,
.navbar-header:before,
.navbar-header:after,
.navbar-collapse:before,
.navbar-collapse:after,
.pager:before,
.pager:after,
.panel-body:before,
.panel-body:after,
.modal-footer:before,
.modal-footer:after {
  content: " ";
  display: table;
}
.dl-horizontal dd:after,
.container:after,
.container-fluid:after,
.row:after,
.form-horizontal .form-group:after,
.btn-toolbar:after,
.btn-group-vertical > .btn-group:after,
.nav:after,
.navbar:after,
.navbar-header:after,
.navbar-collapse:after,
.pager:after,
.panel-body:after,
.modal-footer:after {
  clear: both;
}
.directory-listing__item {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  padding: 3px;
  border: 1px solid #ddd;
  -o-transition: border-color 0.5s;
  -webkit-transition: border-color 0.5s;
  transition: border-color 0.5s;
}
.directory-listing__item > h3 {
  position: absolute;
  font-size: 20px;
  top: 15px;
  left: 0;
  background: #712062;
  color: white;
  padding: 8px 14px;
  font-family: 'section', helvetica, arial;
  text-transform: uppercase;
  -o-transition: padding-left 0.5s;
  -webkit-transition: padding-left 0.5s;
  transition: padding-left 0.5s;
}
.directory-listing__item > div > img {
  width: 100%;
  filter: gray;
  /* IE6-9 */
  filter: grayscale(1);
  /* Firefox 35+ */
  -webkit-filter: grayscale(1);
  /* Google Chrome, Safari 6+ & Opera 15+ */
}
@media (min-width: 768px) {
  .directory-listing__item > div {
    overflow: hidden;
    height: 200px;
  }
}
@media (min-width: 992px) {
  .directory-listing__item > div {
    height: 200px;
  }
}
@media (min-width: 1200px) {
  .directory-listing__item > div {
    height: 240px;
  }
}
@media (min-width: 992px) {
  .directory-listing__item:hover {
    border: 1px solid #712062;
  }
  .directory-listing__item:hover > h3 {
    padding-left: 30px;
  }
  .directory-listing__item:hover > div > img {
    filter: none;
    /* IE6-9 */
    -webkit-filter: grayscale(0);
    /* Google Chrome, Safari 6+ & Opera 15+ */
  }
}