@import url(https://fonts.googleapis.com/css?family=Raleway);
body {
  background-color: #fff;
  font-family: 'Raleway', sans-serif;
}

/*Basic Vinyl Style*/
.album {
  margin: 5vw auto;
 /* box-shadow: 0 7px 10px #aaa;*/
  perspective: 1200px;
  transition: transform 0.6s ease;
}

.album:hover {
  transform: translateX(-200px);
}

.album,
.album .cover,
.album .shadowcover,
.album .cover img,
.album .vinyl {
  width: 300px;
  height: 300px;
}

/*
.album .discshadow {
  width:100px;
  height:100px;
}*/

.album > div,
.album .vinyl > div {
  position: absolute;
}

.album .cover {
  z-index: 3;
  transition: all 0.8s ease;
}

.albumVinyl .cover {
  z-index: 200;
  background-size:cover;
  background-position: bottom;  
  transform: perspective(400px) rotateY(0deg);

}

.shadowcover {
   transition: transform 0.8s ease, opacity 0.5s ease;
   opacity: 1;
}

.albumVinyl .cover:hover, .albumVinyl .cover:hover ~ .shadowcover   {
  transform: perspective(400px) rotateY(20deg) scale(1.5);
}

.albumFlip {
  perspective: 1200px;
}



.albumFlip .cover-flip {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 300px;
  transform-style: preserve-3d;
  transition: transform 0.8s ease;
  cursor: pointer;
  z-index: 5;
  transform: perspective(800px) rotateY(0deg);
  /* Anchor scaling to the base so the zoom grows upward into empty space and
     the mirrored reflection stays put instead of sliding down the page. */
  transform-origin: 50% 100%;
}

.albumFlip .cover-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  background-size: cover;
  background-position: bottom;
}

.albumFlip .cover-front {
  z-index: 2;
}

.albumFlip .cover-front::after,
.albumFlip .cover-front::before,
.albumFlip .cover-back::after,
.albumFlip .cover-back::before {
  content:"";
  background-image: inherit;
  width:inherit;
  position: absolute;
}

.albumFlip .cover-front::after,
.albumFlip .cover-back::after {
  height:40%;
  bottom:-40%;
  transform: scaleY(-1);
  background-size:cover;
  background-position: bottom;
  /* Fade the reflection to transparent so it blends into any background
     (the element is scaleY(-1), so "to top" fades downward on screen). */
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0) 40%);
  mask-image: linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0) 40%);
}

.albumFlip .cover-front::before,
.albumFlip .cover-back::before {
  display: none;
}

.albumFlip .cover-back {
  transform: rotateY(180deg);
}

.albumFlip .cover-flip.is-flipped {
  transform: perspective(800px) rotateY(180deg);
}

.albumFlip .cover {
  transform: none;
}

.albumFlip .cover:hover {
  transform: none;
}

/* Trigger the reveal on hovering the album (not just the cover) so the effect
   persists while the pointer is over the slid-out disc too. */
.albumFlip:hover .cover-flip {
  transform: perspective(800px) rotateY(15deg) scale(1.2);
}

.albumFlip:hover .cover-flip.is-flipped {
  transform: perspective(800px) rotateY(195deg) scale(1.2);
}

.albumFlip .vinyl {
  z-index: 1;
}

.albumFlip .shadowcover {
  z-index: 2;
}

.albumFlip:hover .shadowcover {
  transform: perspective(400px) rotateY(10deg) scale(1.5);
}

.albumFlip .shadowcover.is-fading {
  opacity: 0.35;
}

/* Slide far enough to reveal the disc but keep it overlapping the cover, so
   there is no gap to cross (which would drop the hover and retract it). */
.albumFlip:hover .vinyl {
  transform: translate(290px, 0) rotate(0deg) scale(1.1);
}

.albumFlip:hover .discshadow {
  transform: translate(290px, 30px) scale(1.1);
  opacity: 0.5;
}

.albumFlip.vinyl-flipped:hover .discshadow {
  transform: translate(290px, 30px) scale(1.1) rotateY(180deg);
}


.album .cover::after {
  content:"";
  background-image: inherit;
  width:inherit;
  height:40%;
  position: absolute;
  bottom:-40%;
  transform: scaleY(-1);
  background-size:cover;
  background-position: bottom;
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0) 40%);
  mask-image: linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0) 40%);
}

.album .vinyl {
  /*background-color: #202020;*/
  z-index: 1;
  transition: all 0.8s ease;
  transform-style: preserve-3d;
  /*box-shadow: 0 7px 10px #aaa;*/
}

.album .vinyl .vinyl-flip {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.8s ease;
  cursor: pointer;
  transform: perspective(800px) rotateY(0deg);
}

.album .vinyl .vinyl-spin {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.album .vinyl .vinyl-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  background-image: url("/images/12inch.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.album .vinyl .vinyl-face::after,
.album .vinyl .vinyl-face::before {
  content:"";
  background-image: inherit;
  width:inherit;
  position: absolute;
}

.album .vinyl .vinyl-face::after,
.album .vinyl .vinyl-face::before {
  display: none;
}

/* Mirror reflection of the disc, anchored just below the (non-spinning) vinyl
   so it stays put instead of orbiting with the spin. Same recipe as the cover:
   a short strip, scaleY(-1), faded to transparent with a mask. Hidden by
   default and only revealed on hover, i.e. when the disc has slid into view. */
.album .vinyl::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -45%;
  width: 100%;
  height: 45%;
  background-image: url("/images/12inch.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
  transform: scaleY(-1);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0) 40%);
  mask-image: linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0) 40%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.albumFlip:hover .vinyl::after {
  opacity: 1;
  /* Wait for the disc to finish sliding in (0.8s) before fading the reflection
     in, so it doesn't appear to move/rotate into place with the disc. */
  transition: opacity 0.3s ease 0.85s;
}

.album .vinyl .vinyl-back {
  transform: rotateY(180deg);
}

.album .vinyl .vinyl-flip.is-flipped {
  transform: perspective(800px) rotateY(180deg);
}

.albumVinyl .vinyl .vinyl-spin {
  animation: vinyl-spin 1.818s linear infinite;
}

.album.vinyl-flipped .vinyl-spin {
  animation-direction: reverse;
}

@keyframes vinyl-spin {
  to {
    transform: rotateZ(360deg);
  }
}


.album .discshadow {
  display: none;
}

.album.vinyl-flipped .discshadow {
  transform: translateY(100%) rotateY(180deg);
}

.album .vinyl .label {
  background-color: #fff;
  position: absolute;
  width: 33.33%;
  height: 33.33%;
  left: 33.33%;
  top: 33.33%;
  background-size: cover;
  background-position: center;
}



.album .vinyl .hole {
  position: absolute;
  left:50%;
  transform: translateX(-50%);  
  background-color: #000;
  width: 5%;
  height: 5%;
  margin: 45% auto 0 auto;
}

.album .textCon {
  margin-top: 20px;
}

.album .textCon h1,
.album .textCon h3 {
  color: #000;
  font-size: 0.7rem;
  text-align: center;
  letter-spacing: 3px;
  margin: 5px 0;
}

.album .textCon h4 {
    position: absolute;
    color: #000;
    font-size: 0.4rem;
    text-align: center;
    letter-spacing: 0px;
    left:50%;
    top:120px;
    transform: translateX(-50%);  
  }

.album .textCon h3 {
  font-size: 0.5em;
}


/*Vinyl Style*/

.albumVinyl .round {
  border-radius: 9999px;
}

.albumVinyl .vinyl {
  transform: translate(0px, 0) rotate(-180deg);
}

.albumVinyl .vinyl:hover,
.albumVinyl .cover:hover ~ .vinyl {
  transform: translate(400px, 0) rotate(0deg) scale(1.2);
}

.albumVinyl .cover:hover ~ .discshadow, .vinyl:hover ~ .discshadow { 
  transform: translate(390px, 360px) scale(1.2);
  opacity:1;
}

.album.vinyl-flipped .cover:hover ~ .discshadow,
.album.vinyl-flipped .vinyl:hover ~ .discshadow {
  transform: translate(390px, 360px) scale(1.2) rotateY(180deg);
}




.LeftPerspectiveShadow {
	position: relative;
/*	-moz-box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
	box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);*/
}

.LeftPerspectiveShadow:before {
	content: '';
	position: absolute;
	z-index: -1;
	bottom: 15px;
	width: 90px;
	-moz-transform: skewX(50deg);
	-webkit-transform: skewX(50deg);
	-o-transform: skewX(50deg);
	-ms-transform: skewX(50deg);
	transform: skewX(50deg);
  transform-style: preserve-3d;
}


/*** SHADOW PROJECTION LENGTH ***/

.LPSmall:before {
	left: 114px;
	height: 20px;
}

.LPMedium:before {
	left: 102px;
	height: 40px;
}

.LPLarge:before {
	left: 90px;
	height: 60px;
}


/*** SHADOW INTENSITY ***/

.LPLight:before {
	-moz-box-shadow: -130px 0 8px 14px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: -130px 0 8px 14px rgba(0, 0, 0, 0.2);
	box-shadow: -130px 0 8px 14px rgba(0, 0, 0, 0.2);
  transform-style: preserve-3d;
}

.LPNormal:before {
	-moz-box-shadow: -130px 0 8px 14px rgba(0, 0, 0, 0.35);
	-webkit-box-shadow: -130px 0 8px 14px rgba(0, 0, 0, 0.35);
	box-shadow: -130px 0 8px 14px rgba(0, 0, 0, 0.35);
}

.LPDark:before {
	-moz-box-shadow: -130px 0 8px 14px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: -130px 0 8px 14px rgba(0, 0, 0, 0.5);
	box-shadow: -130px 0 8px 14px rgba(0, 0, 0, 0.5);
}


/*CD Style — shown for CD / CD maxi releases via the .albumCd modifier.
  Same spin/flip/reflection machinery as the vinyl, but uses the cd.png artwork
  in place of the 12inch.png record. cd.png already includes the disc centre, so
  the vinyl label/hole/text overlays are hidden. */

.albumCd .vinyl .vinyl-face {
  background-image: url("/images/cd.png");
}

.albumCd .vinyl::after {
  background-image: url("/images/cd.png");
}

.albumCd .vinyl .label,
.albumCd .vinyl .hole,
.albumCd .textCon {
  display: none;
}