.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-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*=icon-] {
      padding: 2px 5px;
      position: absolute;
      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;

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

    a:hover {
      text-decoration: none;

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

&:hover .tile-moderate {
  background: rgba(0,0,0,0.7);
  @include opacity(100);
}
&:hover .tile-labels i[class*=icon-] {
  @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::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;

}