.neighbors-layout.page-content-main .container {
  width: 760px;
}
.neighbors-listing {
  margin: 50px 0;
}
.neighbors-layout.page-content-main .neighbors-listing .container {
  width: 1218px;
}
.neighbors-list {
  margin: 52px 0;
  position: relative;
}
.neighbors-list li {
  display: block;
  float: left;
  width: 168px;
  height: 168px;
  margin: 3px;
  text-align: center;
  transition: margin .5s;
}
.neighbors-list li .plant-icon {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  background: #eff0eb no-repeat center 10%;
  z-index: 3;
}
.load-ready .neighbors-list li .plant-icon {
  background-image: url(../img/neighbors-bg.svg);
}
.neighbors-list li img {
  height: 120px;
  width: auto;
}
.np-title {
  font-size: 20px;
  color: #262627;
  line-height: 20px;
  display: block;
  font-weight: 900;
  position: absolute;
  left: 10px;
  right: 10px;
  top: 110px;
  text-align: center;
  font-style: normal;
  font-family: 'Futura PT', sans-serif;
}
.neighbors-list .detailed-content {
  text-align: left;
  position: absolute;
  left: 3px;
  right: 3px;
  top: 0;
  width: auto;
  z-index: 5;
  height: 0;
  overflow: hidden;
  transition: height .5s;
  color: #262627;
}
.neighbors-list li.active .detailed-content {
  box-shadow: 0px 6px 20px 0px rgba(33, 53, 41, 0.16);
}
.neighbors-list .detailed-content-wrap {
  background: #fff;
  padding: 38px;
}
.neighbors-list li.active > .plant-icon,.neighbors-list li:hover > .plant-icon {
  background: #fff;
  z-index: 15;
}
.neighbors-list li .shadow {
  width: 100%;
  height: 100%;
  margin-top: -100%;
  position: relative;
}
.neighbors-list li:hover .shadow,.neighbors-list li.active .shadow {
  box-shadow: 0px 6px 20px 0px rgba(33, 53, 41, 0.16);
}
.neighbors-list li:nth-child(7n+1) {
  clear: left;
}
.no-animate,.neighbors-list .no-animate {
  transition: none!important;
}
.neighbors-list .detail-column {
  width: 27%;
  float: left;
  margin: 0 4.7% 0 0;
}
.neighbors-widget-column .detail-column h6,.neighbors-list .detailed-content h6 {
  font-size: 16px;
  color: #262627;
  font-family: 'Futura PT', sans-serif;
  font-weight: 900;
  line-height: 24px;
  margin: 9px 0 27px;
}
.neighbors-list .detailed-content .good-neighbors,.neighbors-list .detailed-content .bad-neighbors {
  font-family: 'Futura PT', sans-serif;
}
.neighbors-list .detailed-content .good-neighbors span,.neighbors-list .detailed-content .bad-neighbors span {
  display: block;
  line-height: 26px;
  padding: 0 10px;
  margin: 0 6px 6px 0;
  white-space: nowrap;
  float: left;
  color: #fff;
}
.neighbors-list .detailed-content .good-neighbors span {
  background: #80ca8e;
}
.neighbors-widget-column .detail-column.good-neighbors h6,.neighbors-list .detailed-content .good-neighbors h6 {
  color: #80ca8e;
}
.neighbors-widget-column .detail-column.good-neighbors svg,.neighbors-list .detailed-content .good-neighbors h6 svg {
  fill: #80ca8e;
}
.neighbors-list .detailed-content .bad-neighbors span {
  background: #ff5e71;
}
.neighbors-widget-column .detail-column.bad-neighbors h6,.neighbors-list .detailed-content .bad-neighbors h6 {
  color: #ff5e71;
}
.neighbors-widget-column .detail-column.bad-neighbors svg,.neighbors-list .detailed-content .bad-neighbors h6 svg {
  fill: #ff5e71;
}
.neighbors-list .detailed-content .neighbors-notes h6 {
  margin-bottom: 18px;
}
.neighbors-list .detailed-content .neighbors-notes h6 svg {
  fill: #262627;
}
.neighbors-notes p {
  font-style: italic;
  line-height: 24px;
  color: #5b5c5e;
}
.neighbors-outro {
  margin: 52px 0 75px;
}
.neighbors-widget-column h6 {
  position: relative;
  padding-left: 33px;
  margin: 0!important;
  line-height: 48px!important;
}
.neighbors-widget-column ul {
  margin: 0 0 0 33px;
}
.neighbors-widget-column h6 .icon-circle {
  position: absolute;
  left: -26px;
  top: 0;
}
.icon-circle .icon-good-neighbors {
  margin: 12px auto;
  display: block;
}
.icon-circle .icon-bad-neighbors {
  margin: 13px auto;
  display: block;
}

@media screen and (max-width: 1335px) { 
  .neighbors-layout.page-content-main .neighbors-listing .container {
    width: 870px;
  }
  .neighbors-list li:nth-child(7n+1) {
    clear: none;
  }
  .neighbors-list li:nth-child(5n+1) {
    clear: left;
  }
}

@media screen and (max-width: 1023px) {
  .neighbors-layout.page-content-main .neighbors-listing .container {
    width: 696px;
  }
  .neighbors-layout.page-content-main .container,.plantfinder-archive .container {
    width: 748px;
  }
  .neighbors-list li:nth-child(5n+1) {
    clear: none;
  }
  .neighbors-list li:nth-child(4n+1) {
    clear: left;
  }
  .neighbors-list .detail-column {
    width: 45%;
    margin-bottom: 35px;
  }
  .neighbors-list .detail-column.neighbors-notes {
    float: none;
    width: auto;
    clear: both;
    margin-right: 4.7%;
    margin-bottom: 5px;
  }
}

@media screen and (max-width: 767px) {
  .neighbors-layout.page-content-main .container,.plantfinder-archive .container {
    width: 580px;
    margin: 0 auto;
  }
  .neighbors-layout.page-content-main .neighbors-listing .container {
    width: 522px;
  }
  .neighbors-list li:nth-child(4n+1) {
    clear: none;
  }
  .neighbors-list li:nth-child(3n+1) {
    clear: left;
  }
}

@media screen and (max-width: 599px) {
  .neighbors-layout.page-content-main .container,.plantfinder-archive .container {
    max-width: 348px;
  }
  .neighbors-list li:nth-child(3n+1) {
    clear: none;
  }
  .neighbors-list li:nth-child(2n+1) {
    clear: left;
  }
  .neighbors-list .detail-column {
    width: auto;
    float: none;
    margin-right: 0;
  }
}