.show-time-item {
	position:absolute;
	left:0px;
	top:0px;
	opacity:0.2;
	visibility:hidden;
	transition:opacity 1s ease-in-out;
	transform-origin:center;
}

.show-time-item.editor {
	opacity:1;
	visibility:visible;
}

.show-time-item.thumbnail {
	opacity:1;
	visibility:visible;
	animation:none;
}

.show-time-item.show-in {
	opacity:1;
	visibility:visible;
	animation: zoonKeyframe 20s normal forwards;
	animation-delay: 4s;
}

.show-time-item.editor.show-in {
	animation:none;
}

.show-time-item.thumbnail.show-in {
	animation:none;
}

.show-time-item.show-in.zoomWide {
	animation: zoonWideKeyframe 20s ease-in-out forwards;
	transition:left 20s;
	animation-delay: 0s;
}

.show-time-item.thumbnail.zoomWide {
    transform: scale(1.5);
	left:200px;
}


.show-time-item.show-in.fastZoom {
	animation: fastZoonKeyframe 20s ease-out forwards;
	animation-delay: 0s;
}

.show-time-item.thumbnail.fastZoom {
    transform: scale(1);
}

.show-time-item.show-in.fastZoom-out {
	animation: fastZoonOutKeyframe 20s ease-in forwards;
	animation-delay: 0s;
}

.show-time-item.thumbnail.fastZoom-out {
	transform: scale(3);
}

.show-time-item.show-in.perspective {
	transform: scale(1.4);
	animation: perspectKeyframe 20s normal forwards;
	animation-delay: 2s;
}

.show-time-item.thumbnail.perspective {
	transform: perspective(100px) rotateY(0deg) scale(1.4);
}



@keyframes zoonWideKeyframe {
  from {
	visibility:visible;
    transform: scale(1.5);
	left:200px;
  }
  50% {
	transform:scale(2);
  }
  to {
	transform:scale(1.5);
	left:-200px;
  }
}


@media (max-width:600px) {
	@keyframes zoonWideKeyframe {
	  from {
		visibility:visible;
		transform: scale(1.5);
		left:50px;
	  }
	  50% {
		transform:scale(2);
	  }
	  to {
		transform:scale(1.5);
		left:-50px;
	  }
	}
} 

@keyframes fastZoonKeyframe {
  from {
	visibility:visible;
    transform: scale(1);
  }
  to {
	transform:scale(3);
  }
}

@keyframes fastZoonOutKeyframe {
  from {
	visibility:visible;
    transform: scale(3);
  }
  to {
	transform:scale(1);
  }
}


@keyframes zoonKeyframe {
  from {
	visibility:visible;
    transform: scale(1);
  }
  to {
	transform:scale(1.3);
  }
}

@keyframes perspectKeyframe {
  from {
	visibility:visible;
    transform: perspective(100px) rotateY(0deg) scale(1.4);
  }
  to {
	transform:perspective(100px) rotateY(3deg) scale(1.8);
  }
}


.show-time-item.show-in .artwork.zoom {
	visibility:hidden;
	animation: attachKeyframe 1.5s ease-in-out forwards;
}

.show-time-item.show-in .artwork.zoom.fast {
	visibility:hidden;
	animation: attachKeyframe 1s ease-in-out forwards;
}

.show-time-item.show-in .artwork.opac {
	visibility:hidden;
	animation: opacKeyframe 1.5s ease-in-out forwards;
}

.show-time-item.show-in .artwork.skew1 {
	visibility:hidden;
	animation: skew1Keyframe 3s ease-in-out forwards;
	animation-delay: 0s;
}

.show-time-item.show-in .artwork.skew9 {
	transform:perspective(100px) rotateY(2deg) scale(1);
}

.show-time-item.show-in .artwork.skew2 {
	visibility:hidden;
	animation: skew2Keyframe 3s ease-in-out forwards;
	animation-delay: 0s;
}

.show-time-item.show-in .artwork.skew3 {
	visibility:hidden;
	animation: skew3Keyframe 3s ease-in-out forwards;
	animation-delay: 0s;
}

.show-time-item.show-in .artwork.zoom:nth-child(1) {
    animation-delay: 2s;
}

.show-time-item.show-in .artwork.zoom:nth-child(2) {
    animation-delay: 2s;
}

@keyframes skew1Keyframe {
  from {
    opacity:0;
	visibility:visible;
    transform: perspective(100px) rotateY(-4.5deg) scale(0);
  }
  to {
    opacity:1;
	visibility:visible;
	transform:perspective(100px) rotateY(-4.5deg) scale(1);
  }
}

@keyframes skew2Keyframe {
  from {
    opacity:0;
	visibility:visible;
    transform:perspective(100px) rotateY(-3deg) scale(0);
  }
  to {
    opacity:1;
	visibility:visible;
	transform:perspective(100px) rotateY(-3deg) scale(1);
  }
}

@keyframes skew3Keyframe {
  from {
    opacity:0;
	visibility:visible;
    transform:perspective(100px) rotateY(7deg) scale(0);
  }
  to {
    opacity:1;
	visibility:visible;
	transform:perspective(100px) rotateY(7deg) scale(1);
  }
}


@keyframes attachKeyframe {
  from {
    opacity:0;
	visibility:visible;
    transform: scale(0) rotate(0);
  }
  to {
    opacity:1;
	visibility:visible;
	transform:scale(1) rotate(0);
  }
}


@keyframes opacKeyframe {
  from {
    opacity:0;
	visibility:visible;
    transform: scale(1) rotate(0);
  }
  to {
    opacity:1;
	visibility:visible;
	transform:scale(1) rotate(0);
  }
}