@charset "utf-8";
/* CSS Document */
a:hover img.rotate{
  transform: rotateY(360deg);
  transition: transform .5s;
}

.item {
  width: 300px;margin-bottom:20px;
}
.item img {
  width: 100%;
}.sort01 {
  margin: 0 auto;
}.tiles .tile {
  display: inline-block;
  /*margin: 10px;*/
  /*text-align: center;*/
  opacity: .99;
  overflow: hidden;
  position: relative;
  /*border-radius: 3px;*/
  /*box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.05);*/
}
.tiles .tile:before {
  content: '';
  background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
  width: 100%;
  height: 50%;
  opacity: 0;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 2;
  -webkit-transition-property: top, opacity;
          transition-property: top, opacity;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
.tiles .tile img {
  /*display: block;*/
  max-width: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.tiles .tile .details {
  font-size: 16px;
  padding: 20px;
  color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 3;
}
.tiles .tile .details span {
  display: block;
  opacity: 0;
  position: relative;
  /*top: 100px;*/
  -webkit-transition-property: top, opacity;
          transition-property: top, opacity;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.tiles .tile .details .title {
  line-height: 1.2;
  font-size: 1em; 
}
/*.tiles .tile .details .info {
  line-height: 1.2;
  margin-top: 5px;
  font-size: 12px;
}*/
.tiles .tile:hover:before,
.tiles .tile:hover span {
  opacity: 1;
}
.tiles .tile:hover:before {
  top: 50%;
}
.tiles .tile:hover span {
  top: 0;
}
.tiles .tile:hover .title {
  -webkit-transition-delay: 0.15s;
          transition-delay: 0.15s;
}
.tiles .tile:hover .info {
  -webkit-transition-delay: 0.25s;
          transition-delay: 0.25s;
}