#branding {
	position: relative;
}
@keyframes vinyl-disc-spin-fade {
	0% {
		transform: scale(1.25) rotate(0deg);
		opacity: 1;
	}

	100% {
		transform: scale(1.25) rotate(3deg);
		opacity: 0;
	}
}

@keyframes album-art-spin {
	0% {transform: scale(1.25) rotate(0deg);}
	100% {transform: scale(1.25) rotate(360deg);}
}
#vinyl-flex {
	overflow-x:hidden;
	overflow-y: hidden;
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 325px;
	background: none;
	align-content: end;
	padding-bottom: 8px;
}

#vinyl-flex .vinyl {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	transform-origin: 100% 0;
	transform: scale(calc(130 / 256));
}
#vinyl-flex .vinyl img[vinyl],
#vinyl-flex .vinyl img[vinyl-fade] {
	position: absolute;
	transform-origin: 318px 129px;
	transform: scale(1.25);
	right: 0;
	bottom: 0;
	top: 0;
}

#vinyl-flex .vinyl img[vinyl-fade] {
	animation-name: vinyl-disc-spin-fade;
	animation-duration: 0.2s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
#vinyl-flex .vinyl img[albumart] {
	position: absolute;
	width: 204px;
	height: 204px;
	right: 22px;
	top: 25px;
	bottom: 0;

	animation-name: album-art-spin;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

#vinyl-flex h5, 
#vinyl-flex p {
	position: relative;

    text-shadow: 0px 0px 2px black;
    background-color: #0008;
    width: max-content;
    padding: 4px;
    border:  1px solid #444;
    border-radius: 4px;
	margin: 4px;
}

#vinyl-flex h5 {
	color: var(--brand-color-3);
}
#vinyl-flex p[name] {
	translate: 5px 0px;
}

#vinyl-flex p[artist] {
	translate: 10px 0px;
}

#vinyl-flex {
	display: block;
	max-width: 550px;
	flex: 10000;
}
#vinyl-flex .bottomlinks {
	display: block;
	width: 100%;
	text-align: right;
}

@media (max-width:560px) {
	#vinyl-flex h5, 
	#vinyl-flex p {
		display: none;
	}
}