.center
{
  width:100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* End Non-Essential  */

.property-card
{
  background: #ecf9ff;
  height:26em;
  width:100%;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -ms-flex-direction:column;
  flex-direction:column;
  position:relative;
  -webkit-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  border-radius:16px;
  overflow:hidden;
}
/* ^-- The margin bottom is necessary for the drop shadow otherwise it gets clipped in certain cases. */

/* Top Half of card, image. */

.property-image
{
  background: linear-gradient(0deg, black, #497c96);
  height:10em;
  width:100%;
  padding:1em 2em;
  position:Absolute;
  top:0px;
  -webkit-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  background-size:cover;
  background-repeat:no-repeat;
}

/* Bottom Card Section */

.property-social-icons
{
  width:91%;
  position:absolute;
  top:11em;
  left:1em;
  -webkit-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.property-social-icons h5
{
    font-size: 18px;
    line-height: 1.8rem;
    color:rgb(0, 0, 0);
	position:relative;
}

/* Property Cards Hover States */

.property-card:hover .property-image
{
  height:26em;
}

.property-card:hover .property-social-icons
{
  cursor:pointer;
  top:9rem;
}

.property-card:hover .property-social-icons h5
{
	color: #ffffff;
	padding-bottom: 4px;
	margin-bottom: 12px;
}
.property-card .property-social-icons h5:before
{
	position: absolute;
    bottom: -6px;
    left: 0;
    content: "";
    width: 0%;
    height: 3px;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.property-card:hover .property-social-icons h5:before
{
	width: 60%;
    opacity: 1;
    visibility: visible;
}
	
.property-card:hover .property-social-icons h5 + p
{
  color: #ffffff;
}
.property-image-title
{
position:Relative;
top:18%;
opacity:1;
transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1) 0.2s;
color:black;
font-size:1.2em;
display: flex;
align-items: center;
}

.property-card:hover .property-image-title
{
opacity:1;
top:5%;
}

.property-image-title img
{
    height: 70px;
    width: 70px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-right: 1.5em;
}

.profile-content
{
    display: grid;
}
.profile-content h4
{
    font-size: 20px;
    color:#ffffff;
}
.profile-content h6
{
    font-size: 16px;
    color: #ffffff;
}

.learn-more
{
    border-bottom: solid 3px #ffffff;
    padding-bottom: 5px;
    margin-top: 10px;
    color:rgb(255, 255, 255);
}


.property-learnmore
{
    position: absolute;
    bottom: 5%;
	opacity:0;
	transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1) 0.2s;
	color:black;
	font-size:1em;
	align-self: center;
}

.property-card:hover .property-learnmore
{
opacity:1;
}