/*https://freefrontend.com/css-cards/*/

*
{
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.stamp-text h5
{
  margin: 0;
  font-size:1.4em;
  font-weight:700;
}

/*p*/
/*{*/
/*  font-size:12px;*/
/*}*/

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

/* End Non-Essential  */

.property-card
{
  height:18em;
  width:14em;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  margin: 15px 25px 15px 25px;
  -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;
}
/* ^-- The margin bottom is necessary for the drop shadow otherwise it gets clipped in certain cases. */


/* Top Half of card, image. */

.property-image
{
  height:6em;
  width:14em;
  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('https://cdn.photographylife.com/wp-content/uploads/2017/01/What-is-landscape-photography.jpg');
  background-size:cover;
  background-repeat:no-repeat;
}

/* Bottom Card Section */

.property-description
{
  background-color: #FAFAFC;
  height:12em;
  width:14em;
  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: 0.5em 1em;
  text-align:center;
}

/* Social Icons */

.property-social-icons
{
  width:1em;
  height:1em;
  /*background-color:black;*/
  position:absolute;
  bottom:1em;
  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 Cards Hover States */

.property-card:hover .property-description
{
  height:0em;
  padding:0px 1em;
}
.property-card:hover .property-image
{
  height:18em;
}

.property-card:hover
{
  background-color:white;
}

.property-card:hover
{
  background-color:blue;
  cursor:pointer;
}

/*.property-social-icons*/
/*{*/
/*  background-color:white;*/
/*}*/

/*.property-social-icons:hover*/
/*{*/
/*  background-color:blue;*/
/*  cursor:pointer;*/
/*}*/


/*.property-card a {*/
/*  text-decoration: none;*/
/*  background-color: transparent;*/
/*}*/

/* Optional

.property-image-title
{
text-align:center;
position:Relative;
top:30%;
opacity:0;
transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1) 0.2s;
color:black;
font-size:1.2em;
}

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

*/
/* Big card */

.big-card
{
  height:30em;
  width:20em;
  display:flex;
  margin: 15px 25px 15px 25px;
  flex-direction:column;
  position:relative;
  overflow:hidden;
  background-color: #FFFFFF;
  box-shadow:  15px 15px 27px #e1e1e3, -15px -15px 27px #e1e1e3;
}

.big-card-header {
  flex: 0 1 4em;
  width: 100%;
  height: 4em;
  background-color: #F6AA1C;
  text-align: center;
  line-height: 4em;
  font-weight: bold;
  border-bottom: 2px solid #D68F09;
}

.big-card-body {
  flex: 1 1;
  width: 100%;
  height: 4em;
  padding: 5px 10px 5px 10px;
}

.big-card-footer {
  flex: 0 1 4em;
  width: 100%;
  height: 4em;
  text-align: center;
  line-height: 4em;
  border-top: 2px solid #D68F09;
  background-color: #F6AA1C;
}

.big-card-footer a {
  text-decoration: none;
}

.big-card-button {
  background-color: #D68F09;
  color: #EEEEEE;
  font-weight: bold;
  text-transform: uppercase;
  display: inline;
  padding: 5px 5px 5px 5px;
  border-radius: 5px;
}


/* Stamp card */
.stamp-bounds {
  width: 18em;
  height: 14em;
  position: relative;
  margin: 15px 25px 15px 25px;
}

.stamp-card {
  width: 18em;
  height: 14em;
  display: flex;
  flex-direction:row;
  position:relative;
  transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  border-radius:16px;
  overflow:hidden;
  box-shadow:  15px 15px 27px #e1e1e3, -15px -15px 27px #ffffff;
}

.stamp-image {
    height:14em;
    width:6em;
    padding: 1em 2em;
    position:Absolute;
    left: 0;
    transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    background-image:url('/images/stonks.png');
    background-size: 700%;
    background-position: 40% 0%;
    background-repeat:no-repeat;
}

.stamp-text{
    background-color: #FAFAFC;
    width: 12em;
    height: 14em;
    position: absolute;
    right: 0;
    transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    padding: 1em 0.5em;
    text-align: center;
    color: black;
}

.stamp-card:hover .stamp-text
{
  right: -12em;
  width: 12em;
  /*padding: 1px 0em;*/
}

.stamp-card:hover .stamp-image
{
  width:18em;
  background-size: 110%;
  background-position: 50% 50%;
}

.stamp-card:hover
{
  /*background-color:blue;*/
  cursor:pointer;
}

.stamp-social-icons {
  width:1em;
  height:1em;
  position:absolute;
  bottom:1em;
  left:1em;
  z-index: 5;
  -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);
}

.toronto-stamp {
  background-image:url('/images/mwangi-gatheca-qlKaN7eqay8-unsplash.jpg');
  background-size: 400%;
  background-position: 74% 0;
}

.stamp-card:hover .toronto-stamp{
  background-size: 100%;
  background-position: 74% 10%;
}

.taxes-stamp {
  background-image:url('/images/Taxes.png');
  background-size: 300%;
  background-position: 0 75%;
}

.stamp-card:hover .taxes-stamp{
  background-size: 100%;
  background-position: 0 0;
}

.hans-island-stamp {
  background-image:url('/images/HansIsland.png');
  background-size: 800%;
  background-position: 0 0;
}

.stamp-card:hover .hans-island-stamp{
  background-size: 100%;
  background-position: 0 0;
}


.electoral-reform {
  background-image:url('/images/elections.jpg');
  background-size: 500%;
  background-position: 35% 40%;
}

.stamp-card:hover .electoral-reform{
  background-size: 150%;
  background-position: 50% 50%;
}