.btn {
  color: white;
  cursor: pointer;
  font-size: 16px;
  font-weight: 900;
  max-width: 170px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  width: 100%;
  padding-top:10px;
}
@media (min-width: 600px) {
  .btn {
    margin: 0 1em 2em;
  }
}
.btn:hover {
  text-decoration: none;
}

.btn-1 {
  font-weight: 100;
}
.btn-1 svg {
  height: 45px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.btn-1 rect {
  fill: none;
  stroke: white;
  stroke-width: 2;
  stroke-dasharray: 422, 0;
  -webkit-transition: all 0.35s linear;
  transition: all 0.35s linear;
}

.btn-1:hover {
  background: rgba(225, 51, 45, 0);
  font-weight: 900;
  letter-spacing: 1px;
color:white;
}
.btn-1:hover rect {
  stroke-width: 5;
  stroke-dasharray: 15, 310;
  stroke-dashoffset: 48;
  -webkit-transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
}

.property-card
{
  height:25em;
  max-width:15em;
  margin:5% auto;
  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;
  -webkit-box-shadow:  15px 15px 27px #e1e1e3, -15px -15px 27px #ffffff;
  box-shadow:  15px 15px 27px #e1e1e3, -15px -15px 27px #ffffff;
  margin-bottom:3em;
}

.property-card a{
    color:black;
}


/* ^-- The margin bottom is necessary for the drop shadow otherwise it gets clipped in certain cases. */

/* Top Half of card, image. */

.property-image1
{
  height:16em;
  width:15em;
  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-image:url("/imageserver/Reusable/royal2020/cellular-Mega-1-Siding-1-min.jpg");
  background-size:cover;
  background-repeat:no-repeat;
}

.property-image2
{
  height:16em;
  width:15em;
  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-image:url("/imageserver/Reusable/royal2020/vinyl-Mega-2-Siding-2-min.jpg");
  background-size:cover;
  background-repeat:no-repeat;
}

.property-image3
{
  height:16em;
  width:15em;
  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-image:url("/imageserver/Reusable/royal2020/RBP-Mega-3-Siding-3-min.jpg");
  background-size:cover;
  background-repeat:no-repeat;
}

.property-image4
{
  height:16em;
  width:15em;
  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-image:url("/imageserver/Reusable/royal2020/aluminum-Mega-Cedar-Renditions_2-min.jpg");
  background-size:cover;
  background-repeat:no-repeat;
}



/* Bottom Card Section */

.property-description
{
  background-color: #FAFAFC;
  height:12em;
  width:15em;
  position:absolute;
  bottom:0em;
  -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);
  padding: 2em 1em;
  text-align:center;
  color:black;
}



/* Property Cards Hover States */

.property-card:hover .property-description
{
  height:4em;
  padding:20px 1em;
}
.property-card:hover .property-image1
{
  height:22em;
}

.property-card:hover .property-image2
{
  height:22em;
}

.property-card:hover .property-image3
{
  height:22em;
}

.property-card:hover .property-image4
{
  height:22em;
}
@media screen and (max-width:600px){
     body, html{
          text-align:center;
}
}