.player-container #play-pause {
	position: sticky;
	display:block;
	cursor: pointer;
	height:36px;
	width:36px;
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMiAyNHYtMjRsMjAgMTItMjAgMTJ6Ii8+PC9zdmc+);
	background-repeat: no-repeat!important;
	background-position:center;
	background-size:20px;
	background-color: var(--main-color);
	border-radius:50px;
	margin-top:-15px;
	margin-left:313px;
	margin-bottom:85px;
	border: solid 4px brown;
  animation: spin-2 1s infinite linear;
    /* Rotate div */
    -ms-transform: rotate(360deg); /* IE 9 */
    -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
    transform: rotate(360deg);

    -webkit-transition: transform 2s; /* For Safari 3.1 to 6.0 */
    transition: transform 2s;
  }
@keyframes spin-2 {
  to {
    filter: hue-rotate(360deg);
  }
}
@keyframes rot {
  0% {
    transform: rotateX(60deg) rotate(45deg);
  }
  100% {
    transform: rotateX(60deg) rotate(405deg);
  }
}


.rotate player{
-webkit-transition: -webkit-transform 1.1s ease-in-out;
transition: transform 1.1s ease-in-out;
}
.rotate player:hover{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
  
  @keyframes melayang {
  0% {
	transform: translateY(-8px);
  }
  
  50% {
	transform: translateY(-4px);
  }
  
  100% {
	transform: translateY(-8px);
  }
  }
  
  .player-container #play-pause:hover {
	display: fixed;
	  cursor: pointer;
	  height:36px;
	  width:36px;
	  background-repeat: no-repeat!important;
	  background-position:center;
	  background-size:20px;
	  background-color: goldenrod;
	  border-radius:50px;
	  border: solid 4px black;
	  animation: circle 1s infinite;
    /* Rotate div */
    -ms-transform: rotate(0deg); /* IE 9 */
    -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
    transform: rotate(0deg);
  }
  
  .play {
	  background-image: url(age/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMiAyNHYtMjRsMjAgMTItMjAgMTJ6Ii8+PC9zdmc+);
  }
  .pause {
	  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTAgMjRoLTZ2LTI0aDZ2MjR6bTEwLTI0aC02djI0aDZ2LTI0eiIvPjwvc3ZnPg==)!important;
  }