/* The version of Bourbon used in this Pen was 4.* */
@import "bourbon";

@mixin no-touchy {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

* { @include box-sizing(border-box); }

body, html {
  height: 100%;
  width: 100%;
}

.card-table {
  background: burlywood;
  width: 100%;
  padding: 1rem 0.5rem 0.5rem 1rem;
  margin: 0 auto;
  list-style: none;
  overflow: hidden;
  text-align: center;
  height: 300px
}

.card {
  width: 200px;
  height: 125px;
  background: #fff;
  display: inline-block;
  margin: 0 0.5rem 0.5rem 0;
  @include transform(translateY(-125%));
  transition: transform .5s cubic-bezier(.25,0,.28,1.43);
}

.card:nth-child(1) {
  @include transition-delay(0);
}

.card:nth-child(2) {
  @include transition-delay(.30s);
}

.card:nth-child(3) {
  @include transition-delay(.45s);
}

.card:nth-child(4) {
  @include transition-delay(.15s);
}

.load-cards {
  width: 100%;
  float: left;
  padding: 1rem;
  cursor: pointer;
  @include no-touchy;
  &:hover {
    background: #ddd;
  }
}

.animated {
  .card {
    @include transform(translateY(0));
    transition: transform .5s cubic-bezier(.25,-1.42,.28,1.43);
  }
  .card:nth-child(1) {
    @include transition-delay(0);
  }

  .card:nth-child(2) {
    @include transition-delay(.15s);
  }

  .card:nth-child(3) {
    @include transition-delay(.30s);
  }

  .card:nth-child(4) {
    @include transition-delay(.45s);
  }
}