.artwork
{
  flex-grow: 1;

  /*min-width: 350px;*/
  flex-basis: 390px;

  position: relative;
  padding: 0px 0px;
  margin: 10px 15px;
  box-sizing: border-box;
}

.artworkImage {
  width: 100%;
  object-fit: contain;

  transform: scale(1.0,1.0);
  transform-origin: 0 0;
  /* transition: transform 0.5s; */
  /* TODO: Figure out why Safari needs this in order to not stretch the images crazily */
  height: 100%;
}

.artworkImage:hover {
  /* transform: scale(1.3,1.3); */
  /* animation: 2s pan 2s infinite linear alternate both, zoom 2s infinite linear both; */
}

.artworkImage.bounce {
  transform-origin: 50% 50% !important;
  animation: bounce 0.3s 2 alternate;
}

.artworkImage.fade_out {
  opacity: 0;
  transition: opacity 1.2s;
}

@keyframes bounce
{
  from {transform: scale(1.0,1.0);}
  to   {transform: scale(1.1,1.1);}
}

@keyframes pan
{
  0% { transform-origin: 50% 100%; }
  100% { transform-origin: 50% 0%; }
}

@keyframes zoom {
  0% { transform: scale(1.0,1.0); }
  30% { transform: scale(1.3,1.3); }
}

.artworkText
{
  position: absolute;
  bottom: 4px;
  right: 4px;

  height: 40px;
  max-width: 100%;
  /*width: 300px;*/

  /*-webkit-transform: scaleX(1.5);
  -webkit-transform-origin-x: 100%;

  transform: scaleX(1.5);
  transform-origin: 100% 0%;*/

  font-family: BirthOfAHero;
  color: white;
  font-size: 26pt;
  letter-spacing: 10px;
  font-stretch : ultra-expanded;
}

.artwork .oneliner
{
  z-index: 999;

  position: absolute;
  left: 0px;
  bottom: 2px;

  padding: 3px;

  font-size: 16pt;
  color: white;
}

.artwork .oneliner
{
  border-radius: 5px;
  cursor: pointer;
}

.artwork .artworkHover {
  opacity: 0.0;
  transition : 0.7s;
}

.artwork:hover .artworkHover {
  opacity: 1.0;
}

.artwork-link:hover .artworkHover {
  opacity: 1.0;
}

.artwork-link:focus .artworkHover {
  opacity: 1.0;
}