@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700,900);
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);

* {
  box-sizing: border-box;
}

body {
  background: #E8E8E8;
  font-family: lato;
  color: #10222B;
}

h4 {
  font-family: lato;
  font-size: 1.6rem;
  font-weight: 700;
}

.card-wrapper {
  padding: 0 15px;
}

.card {
  max-width: 450px;
  height: 450px;
  background: #ffffff;
  margin: 50px auto;
  box-shadow: 0 3px 5px rgba(0,0,0,0.1);
  position: relative;
  overflow: hidden;
  .image-wrapper {
    height: 70%;
    width: 100%;
    overflow: hidden;
    transition: height 100ms ease-out;
    &.shrink {
      height: 40%;
    }
  }
  .content-wrapper {
    padding: 15px;
    .price {
      margin: 10px 0;
      font-weight: 300;
    }
    .description {
      margin: 25px 0 0 0;
      font-size: 1.1rem;
      line-height: 1.5rem;
      display: none;
      opacity: 0;
      transition: opacity 200ms ease-out;
      &.show {
        display: block;
        opacity: 1;
      }
    }
    .actions {
      position: absolute;
      bottom: 0;
      left: 0;
      padding: 10px;
      width: 100%;
      background: #fff;
      .button {
        width: 48%;
        margin: 0 1% 0 1%;
        float: left;
      }
    }
  }
}

//Button Styling

.button {
  padding: 10px 15px;
  border: none;
  background: none;
  font-size: 1rem;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: all 100ms linear;
  &.flip {
    perspective: 1000;
  &.flipped {
    transform: rotateX(180deg);
  }
  &.flipper {
  transition: 0.6s;
	transform-style: preserve-3d;
	position: relative;
  }
  }
  &.green-solid {
  border: solid 2px #95AB63;
  color: #fff;
  background: #95AB63;
    &:hover {
      background: #BDD684;
      border: solid 2px #BDD684;
    }
  }
  .backside {
    display: none;
    &.show {
      display: inline-block;
      transform: rotateX(180deg);
    }
  }
  .front.hide {
    display: none;
  }
  &.black-simple {
    border: solid 2px #10222B;
    &:hover {
     background: #10222B;
     color: #fff; 
    }
  }
  &.cart {
    &:before {
      display: inline-block;
      content: '\f07a';
      font-family: fontawesome;
      padding: 0 10px 0 0;
    }
    &.added:before {
      content: '\f058';
      transform: rotateX(180deg);
    }
  }
  &.more {
    &:before {
      content: '\f067';
      font-family: fontawesome;
      padding: 0 10px 0 0;
    }
  }
}

.image {
  max-width: 100%;
  height: auto;
}

// Media Queries

@media (max-width: 768px) {
  .card .image-wrapper {
  height: 55%;  
  }
 .card .content-wrapper .actions .button {
    width: 100%;
    float: none;
    margin: 0 0 2% 0;
  }
}

vw = $(window).outerWidth();

$('#cart').click(flip);

if (vw > 768) {
 $('.card').hover(
function() {
  $('.description').toggleClass('show');
  $('.image-wrapper').toggleClass('shrink');
}
) 
}

function flip() {
  $('#cart').addClass('flipped');
  $('#cart').addClass('added');
  $('.backside').addClass('show');
  $('.front').addClass('hide');
}

// Image taken from 1924 - http://www.1924.us/post/110067977427