/* map container */
#map-grid-container {
  width: 100%;
}
.map-grid {
  display: flex;
}
.map-container {
  width: 33.33333%;
  flex: 0 0 auto;
  overflow: hidden;
}
#map {
  position: relative;
  background-size:cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 800px;
  width: 460px;
}
.access-village-and-emerson-village {
    background-image: url(../images/communities-map/access-village-and-emerson-village.jpg);
}
.oak-center-towers {
  background-image: url(../images/communities-map/market-st.jpg);
}
.fellowship-manor {
  background-image: url(../images/communities-map/fellowship.jpg);
}
.bethany-center {
    background-image: url(../images/communities-map/bethany-center.jpg);
}
.shires-memporial {
  background-image: url(../images/communities-map/shires-memporial.jpg);
}
.lytton-gardens {
  background-image: url(../images/communities-map/lytton-avenue.jpg);
}
.lytton-gardens-university {
  background-image: url(../images/communities-map/lytton-university.jpg);
}
.lytton-gardens-everett {
  background-image: url(../images/communities-map/lytton-everett.jpg);
}
.presidio-gate-apartments {
  background-image: url(../images/communities-map/presidio-gate-apartments.jpg);
}
.jennings-court {
  background-image: url(../images/communities-map/jennings-court.jpg);
}
.casa-de-canoga {
    background-image: url(../images/communities-map/casa-de-canoga.jpg);
}
.cupertino {
    background-image: url(../images/communities-map/cupertino.jpg);
}
.foster-ave-apts {
    background-image: url(../images/communities-map/foster-ave-apts.jpg);
}
.garden-villas {
    background-image: url(../images/communities-map/garden-villas.jpg);
}
.harbor-gateway {
  background-image: url(../images/communities-map/harbor-gateway.jpg);
}
.jacksonville {
    background-image: url(../images/communities-map/jacksonville.jpg);
}
.la-pintoresca-and-ashtabula-homes {
    background-image: url(../images/communities-map/la-pintoresca-and-ashtabula-homes.jpg);
}
.long-beach-lutheran-towers {
    background-image: url(../images/communities-map/long-beach-lutheran-towers.jpg);
}
.los-angeles-east {
    background-image: url(../images/communities-map/los-angeles-east.jpg);
}
.los-angeles-extra-west {
  background-image: url(../images/communities-map/los-angeles-extra-west.jpg);
}
.los-angeles-west {
  background-image: url(../images/communities-map/los-angeles-west.jpg);
}
.louisiana {
  background-image: url(../images/communities-map/louisiana.jpg);
}
.palms-court {
  background-image: url(../images/communities-map/palms-court.jpg);
}
.phoenix {
  background-image: url(../images/communities-map/phoenix.jpg);
}
.seaview-lutheran-plaza {
    background-image: url(../images/communities-map/seaview-lutheran-plaza.jpg);
}
.san-diego {
    background-image: url(../images/communities-map/san-diego.jpg);
}
.santa-barbara {
    background-image: url(../images/communities-map/santa-barbara.jpg);
}
.simpson-arbor {
    background-image: url(../images/communities-map/simpson-arbor.jpg);
}
.van-nuys {
  background-image: url(../images/communities-map/van-nuys.jpg);
}

/* info grid container */
.info-grid-container {
  width: 66.66667%;
  flex: 0 0 auto;
}
.info-grid {
  height: 100%;
  display: flex;
  flex-flow: row wrap;
}
.info-grid h3 {
  margin-top: 0;
}

.community-types {
  width: 33.33333%;
  flex: 0 0 auto;
  padding-right: 30px;
}

.community-details {
  width: 66.66667%;
  flex: 0 0 auto;
}
.community-info h3 {
  margin-bottom: .5rem;
}

.community-type-list {
  font-weight: bold;
  background-color: #f2f7fc;
  text-align: right;
  height: 100%;
}

.community-type-list-item {
  padding: 12px;
  position: relative;
  font-size: 0.66666667em;
}

.community-type-list-item:hover {
  cursor: pointer;
}

.list-type-active {
  background-color: #2caae2;
  color: white;
}

.less-left-padding {
  padding-left: 4px!important;
}

.triangle-marker {
  display: none;
  position: absolute;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right:10px solid white;
  top: 14px;
  left: 96%;
}

.info-card {
  padding: 30px 20px;
  background-color: #f2f7fc;
}
.info-card h3 {
  font-weight: bold;
  color: #919b39;
}
.community-info {
  margin: 0 10px;
  min-height: 140px;
}

.card-buttons {
  font-weight: bold;
  display: flex;
  flex-wrap: wrap;
}

.card-buttons a {
  color: #ffffff;
}

.card-button {
  text-align: center;
  min-width: 100px;
  margin: 5px 10px;
  padding: 6px 10px;
    background-color: #bcd051;
}

.card-button:hover {
  cursor: pointer;
}

#community-phone {
  color:inherit;
}

.community-group {
  margin-top: 40px;
  overflow-y: auto;
  height: 350px;
}

.community-group-item {
  display: none;
  padding: 5px 0 5px 10px;
  border-bottom: 1px solid #d5d4d3;
}

.community-group-item:hover {
  cursor: pointer;
}

.community-group-item-active {
  font-weight: bold;
  color: #bcd051;
  border-bottom: 2px solid #bcd051;
}

.pin {
  height: 32px;
  width: 21px;
  position: absolute;
  background-image: url(../images/communities-map/green-pin.png);
  background-size:contain;
  background-position: center;
  background-repeat: no-repeat;
  display: none;
}
.pin:before {
  content: attr(data-community-name);
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  color: #df5936;
  font-weight: 400;
  text-align: center;
  text-shadow: 0px 0px 5px #E9E2C8, 0.5px 0.5px 0px #E9E2C8;
  width: auto;
  white-space: nowrap;
  background: #E9E2C8;
}

.clicked-pin {
  height: 38px;
  width: 25px;
  position: absolute;
  background-image: url(../images/communities-map/orange-pin.png);
  background-size:contain;
  background-position: center;
  background-repeat: no-repeat;
}

.pin:hover {
  cursor: pointer;
}

.fade-in {
	opacity: 1;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 2s;
}

@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@media(max-width: 640px){

  #map {
    position: relative;
    background-size:cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 626px;
    width: 360px;
    margin: 0 auto;
  }

  .community-type-list {
    font-weight: bold;
    background-color: #f2f7fc;
    text-align: center;
    height: 100%;
  }

  .triangle-marker {
    display: none!important;
  }

  .explore h1 {
    margin: 0;
    font-size: 1.19em;
    color: #bcd051;
    font-weight: bold;
  }

  .community-types {
    margin-bottom: 40px;
  }

  .community-type-list-item {
    border-bottom: 1px solid #959595;
    font-size: 0.95238em;
  }

  .community-types div:last-child {
    border-bottom: none;
  }

  .community-group {
    padding: 20px;
    margin-bottom: 20px;
    margin-top:20px;
  }

  .info-card {
    padding: 10px;
  }

  .card-button {
    min-width: 85px;
    margin: 5px 8px;
  }

  .explore {
    margin-bottom: 20px;
  }
}

@media (min-width:768px) {
  .info-grid-container {
    padding-left: 20px;
  }
}