.facility { width: calc(33.3% - 20px); padding: 10px; float: left; text-align: center; }
.facility:hover { background: #F6F6F6; }
.facility h3 { margin: 10px 0 -5px; }
.facility p { margin: 10px 0 0; font-size: 14px; line-height: 20px; }
.facility3x { clear: both; }
.facilityDetail h2 { margin: 0 0 1em; color: #009AAB; }
.facilityDetail { font-size: 15px; line-height: 22px; }
.facilityDetailDivider { margin: 0 0 20px; }
a.facilityDetailLink { width: 125px; border-radius: 5px; margin: 10px auto 0; background: #DFB158; color: #FFF; padding: 5px 0; text-align: center; text-decoration: none; font-weight: 700; display: block; text-transform: uppercase; }
a.facilityDetailLink.large { width: 230px; }
.facilityDetailImage { float: right; width: 400px; margin-left: 22px; }
.facilityDetailImage img { width: 100%; height: auto; }
.facilityDetailInfo { float: left; width: calc(100% - 422px); }
.facilityDetail { width: calc(100% - 88px); }

.facilityPhoto { width: 100%; background-size: cover; background-position: center center; }
.facilityPhoto a { display: block; width: 100%; padding-bottom: calc(200% / 3); height: 0; }

#facilityButtons, #facilityButtons2 { text-align: center; padding: 15px 0 0; }
#facilityButtons.park { padding: 0 0 15px; }

#facilityAmenities {  }
.facilityIcon { width: calc(100% / 3); float: left; line-height: 30px; margin: 0 0 15px; font-size: 14px; }
.facilityIcon img { width: 30px; height: 30px; display: inline-block; margin: 0 15px 0 0; }

.facilityNote { margin: 0 0 -30px; background:rgba(192,0,0,.8); font-weight: 700; line-height: 30px; color: #FFF; }

.facilityGallery a, .registerNow, .parkGallery a { background: rgba(0,0,0,.6); display: inline-block; color: #FFF; padding: 2px 10px; border-radius: 10px; font-size: 18px; font-weight: 700; color: #FFF; margin: 0 0 0 -2px; }
.facilityGallery a i, .parkGallery a i { margin: 0 !important; }
.facilityGallery a:hover, .parkGallery a:hover { background: rgba(0,0,0,.8); text-decoration: none; }

@media screen and (max-width: 1200px) {
  .facilityIcon { width: 50%; }
}
@media screen and (max-width: 1000px) {
  .facility { width: 50%; }
  .facility3x { display: none; }
  .facility2x { clear: both; border-bottom: 1px dotted #CCC; }
}
@media screen and (max-width: 640px) {
  .facility { width: 100%; max-width: 500px; float: none; margin: 0 auto; border-bottom: 1px dotted #CCC; }
  .facility2x { display: none; }
  .facilityDetail { width: 100%; }
  .facilityDetailImage { float: none; width: 100%; margin: 0 0 22px; }
  .facilityDetailImage img { width: 300px; max-width: 100%; height: auto; display: block; margin: 0 auto; }
  .facilityDetailInfo { float: none; width: 100%; }
}