@charset "UTF-8";
* {
  box-sizing: border-box; }

.ssContain {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%; }

.ssRow {
  overflow: auto;
  width: 100%; }

.ssRow__inner {
  transition: 450ms transform;
  font-size: 0;
  white-space: nowrap;
  margin: 125px 0;
  padding-bottom: 10px;
  padding-left: 60px; }

.ssTile {
  position: relative;
  display: inline-block;
  width: 250px;
  height: 250px;
  margin-right: 10px;
  font-size: 20px;
  cursor: pointer;
  transition: 450ms all;
  transform-origin: center left; }

.ssTile__img {
  width: 250px;
  height: 250px;
  object-fit: cover; }

.ssTile__details {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  font-size: 10px;
  opacity: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
  transition: 450ms opacity; }
  .ssTile__details:after
  .ssTile__details:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    display: black; }
  .ssTile__details:after {
    margin-top: -25px;
    margin-left: -25px;
    width: 50px;
    height: 50px;
    border: 3px solid #ecf0f1;
    line-height: 50px;
    text-align: center;
    border-radius: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1; }
  .ssTile__details:before {
    content: '▶';
    left: 0;
    width: 100%;
    font-size: 30px;
    margin-left: 7px;
    margin-top: -18px;
    text-align: center;
    z-index: 2;
    color: Yellow; }
  .ssTile:hover .ssTile__details {
    opacity: 1; }

.ssTile__title {
  position: absolute;
  bottom: 0;
  bottom: -25px;
  padding: 0px;
  padding: 10px;
  color: blue;
  width: 100%;
  text-align: center;
  margin: 0 auto; }

.ssRow__inner:hover {
  transform: translate3d(-62.5px, 0, 0); }

.ssRow__inner:hover .ssTile {
  /* Fade out every tile */
  opacity: .3;
  /* And then grow the current tile and make it opaque again */ }
  .ssRow__inner:hover .ssTile:hover {
    transform: scale(1.5);
    opacity: 1; }

/* And finally move all tiles right of the current tile to the right,
// so its flush against the hovered tile */
.ssTile:hover ~ .ssTile {
  transform: translate3d(125px, 0, 0); }

/*# sourceMappingURL=slideShow.css.map */