.tile {  /* container */
  display: block;
  float: left;
  background-color: lighten($grayLighter, 5%);
  width: 202px;
  height: 202px;
  cursor: pointer;
  box-shadow: inset 0px 0px 1px #FFFFCC;
  text-decoration: none;
  color: $white;
  margin: 0 10px 10px 0;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;

  &.tile-child {
    .tile-content {
      border-top-left-radius: 5px;
    }
  }

  .tile-content {
    width: 200px;
    height: 200px;
    display: block;
    padding: 0;
    padding-bottom: 30px;
    vertical-align: top;
    padding: 10px 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    color: $black;
    line-height: 16px;
    padding: 0;
    border: solid 1px darken($grayLighter, 5%);

    &, * { @include transition(0.1s all linear); }

    & > img {
      width: 100%;
      height : auto;
      max-width: 100%;
    }

    &:hover {
      color: $linkColorHover;
      text-decoration: none;
      background: $concerto-blue-5;
      border-color: $concerto-blue-4;
      @include opacity(90);
    }

    .tile-labels {
      position: absolute;
      bottom: 0;
      right: 0;
      min-height: 30px;
      background-color: transparent;
      @include clearfix();

      i[class*=fa-] {
        padding: 2px 5px;
        /*position: absolute; dont overlay icons when more than one*/
        bottom: 0;
        right: 0;
        @include opacity(70);
        z-index: 2;
        color: $white;
        font-size: 25px;
        @include transition(0.1s linear all);
      }
    }

    .default-padding { padding: 6px; }

    h1 {
      font-size: 150%;
      text-align: center;
    }

    h2 {
      font-size: 125%;
    }

    p {
      color: $gray;
      line-height: 16px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .tile-info {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    min-height: 30px;
    @include clearfix();
    @include transition(0.1s all linear);

    .tile-moderate {
      @include opacity(0);
      text-align: center;
      min-height: 30px;

      .fa-check {
        color: lighten($linkColor, 40%);
        font-size: 3em;
        @include transition(0.1s all linear);
      }
      .fa-remove-sign {
        color: lighten($linkColor, 40%);
        font-size: 3em;
        @include transition(0.1s all linear);
      }

      a:hover {
        text-decoration: none;

        .fa-check, .fa-remove-sign { color: #FFF !important; }
      }
    }
  }

  &:hover .tile-moderate {
    background: rgba(0,0,0,0.7);
    @include opacity(100);
  }
  &:hover .tile-labels i[class*=fa-] {
    @include opacity(0);
  }

  .tile-overlay {
    width: 202px;
    height: 202px;
    z-index: $zindexPopover;
    position: absolute;
    top: 202px; /* start the overlay so that it is hidden at the bottom of its tile container */
    left: 0px;
    display: none;

    &.black {
      background: rgba(0,0,0,0.7);
    }
  }

  &.tile-stack {
    overflow: visible;
  }
}


.tile-stack::before,
.tile-stack::after {
  box-sizing: border-box;
  -moz-box-sizing: border-box;

  position: absolute;
  content: '';

  border: 1px solid darken($grayLighter, 5%);
  background: $grayLightest;

  height: 4px;
}
.tile-stack::before {
  width: 196px;

  left: 1px;
  bottom: -4px;
}
.tile-stack::after {
  width: 192px;

  left: 3px;
  bottom: -7px;
}
