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

/*Basic Vinyl Style*/
.album {
  margin: 10vw auto;
  box-shadow: 0 7px 10px #aaa;
}

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

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

.album .cover {
  z-index: 2;
}

.album .vinyl {
  background-color: #c9e6f5;
  z-index: 1;
  transition: all 0.3s ease;
}

.album .vinyl .label {
  background-color: #AF8F80;
  width: 50%;
  height: 50%;
  left: 25%;
  top: 25%;
}

.album .vinyl .hole {
  background-color: #fff;
  width: 5%;
  height: 5%;
  margin: 45% auto 0 auto;
}

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

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

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


/*Vinyl Style*/

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

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

.albumVinyl .vinyl:hover,
.albumVinyl .cover:hover + .vinyl {
  transform: translate(200px, 0) rotate(0deg);
}


/*CD Style*/

.albumCd .vinyl {
  transform: translate(0px, 0)
}

.albumCd .vinyl:hover,
.albumCd .cover:hover + .vinyl {
  transform: translate(373px, 0);
}