.ripple-effect .aux-overlay:before {
	-webkit-box-shadow: 0 0 33px blue;
	-moz-box-shadow: 0 0 33px blue;
	box-shadow: 2px 2px 33px 0px blue !important;
}

.ripple-effect-1 .aux-overlay:before {
	-webkit-box-shadow: 0 0 33px blue;
	-moz-box-shadow: 0 0 33px blue;
	box-shadow: 2px 2px 33px 0px blue !important;
}

.ripple-effect-2 .aux-overlay:before {
	-webkit-box-shadow: 0 0 43px blue;
	-moz-box-shadow: 0 0 43px blue;
	box-shadow: 2px 3px 43px 20px blue !important;
}

.ripple-effect-2 .aux-overlay:before {
	-webkit-box-shadow: 0 0 13px blue;
	-moz-box-shadow: 0 0 43px blue;
	box-shadow: 2px 3px 43px 30px blue !important;
}

.ripple-effect-4 .aux-overlay:before {
	-webkit-box-shadow: 0 0 3px blue;
	-moz-box-shadow: 0 0 3px blue;
	box-shadow: 2px 4px 43px 40px blue !important;
}

.aux-modern-button.ripple-effect .aux-text, .aux-modern-button.ripple-effect-1 .aux-text, .aux-modern-button.ripple-effect-2 .aux-text, .aux-modern-button.ripple-effect-3 .aux-text, .aux-modern-button.ripple-effect-4 .aux-text { 
	color: #171717 !important;
}

.aux-modern-button.ripple-effect, .aux-modern-button.ripple-effect-1, .aux-modern-button.ripple-effect-2, .aux-modern-button.ripple-effect-3, .aux-modern-button.ripple-effect-4 { 
	color: #171717 !important;
}	

.aux-modern-button.ripple-effect .aux-overlay:before, .aux-modern-button.ripple-effect-1 .aux-overlay:before, .aux-modern-button.ripple-effect-2 .aux-overlay:before, .aux-modern-button.ripple-effect-3 .aux-overlay:before, .aux-modern-button.ripple-effect-4 .aux-overlay:before { 
	background-image: linear-gradient(90deg, #ffffff 0%, #ffffff 100%) !important; 
}


.vinyl {
  position: relative;
  display: inline-block;
  margin: 0px 0px 0;
  border-radius: 50%;
  background-color: #0e120e;
  box-shadow: 1px 1px 10px #000;
	 -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -ms-transition: all 0.5s;
  transition: all 0.5s;
}

.vinyl.paused, .vinyl.play.paused {
	width: 0px;
	height: 0px;
	opacity: 0;
    transform: scale(1, 0);
}

.vinyl.play {
	width: 400px;
    height: 400px;
	opacity: 1;
    transform: scale(1, 1);
}

.elementor-element.disappear.reappear {
    width: auto !important;
    height: auto !important;
    opacity: 1;
}

.disappear {
    width: 0px;
    height: 0px;
    opacity: 0;
}

.light,
.light-alt {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 5;
  border-radius: 50%;
  animation: reflection 20s infinite ease-in-out;
}
.light {
  background-image: linear-gradient(top, transparent, rgba(255,255,255,0.3), transparent);
}
.light-alt {
  background-image: linear-gradient(-160deg, transparent 40%, rgba(255,255,255,0.1) 50%, transparent 60%);
}

.macaron {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  margin: -16% 0 0 -16%;
  width: 33.33%;
  height: 33.33%;
  border-radius: 50%;
  .cover {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
  &:after {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 6;
    display: block;
    margin: -4% 0 0 -4%;
    width: 8%;
    height: 8%;
    border-radius: 50%;
    background: white;
    box-shadow: inset 0 0 2px #000;
    content: '';
  }
}

.grooves {
  position: absolute;
  top: 2%;
  right: 2%;
  bottom: 2%;
  left: 2%;
  z-index: 5;
  border-radius: 50%;
  background-image: radial-gradient(center center, circle closest-side, transparent 43%, transparent 53%,
    #000 54%, transparent 54%, transparent 64%,
    #000 65%, transparent 65%, transparent 75%,
    #000 76%, transparent 76%, transparent 86%,
    #000 87%, transparent 87%, transparent 97%,
    #000 98%, transparent 98% );
  background-image: -webkit-radial-gradient(center center, circle closest-side, transparent 43%, transparent 53%,
    #000 54%, transparent 54%, transparent 64%,
    #000 65%, transparent 65%, transparent 75%,
    #000 76%, transparent 76%, transparent 86%,
    #000 87%, transparent 87%, transparent 97%,
    #000 98%, transparent 98% );
}

.play .macaron,
.play .grooves,
.play .macaron .cover {
  animation: rotation 4s infinite linear;
}

.paused .macaron,
.paused .grooves,
.paused .macaron .cover {
  animation-play-state: paused;
}

.vinyl-picture-disc .macaron {
  top: 0%;
  left: 0%;
  z-index: 4;
  margin: 0;
  width: 100%;
  height: 100%;
  &:after {
    margin: -1.25% 0 0 -1.25%;
    width: 2.5%;
    height: 2.5%;
    background: white;
  }
}

 
audio {
    display: none;
}



@keyframes rotation {
  0%   { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}

@keyframes reflection {
  0%   { filter: blur(5px); transform: rotate(0); }
  25%  { transform: rotate(5deg); }
  50%  { filter: blur(10px); transform: rotate(0); }
  75%  { transform: rotate(-5deg); }
  100% { filter: blur(5px); transform: rotate(0); }
}

/* Default positioning for larger screens */
.aux-modern-button-wrapper {
    position: relative;
}

.elementor-shortcode .vinyl {
    position: absolute;
    top: 110px;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
	transform-style: preserve-3d; /* Important for the 3D flip effect */
}

.aux-modern-button {
    z-index: 2;
    position: relative;
}

/* Adjustments for medium screens */
@media screen and (max-width: 768px) {
    .elementor-shortcode .vinyl {
        top: 85px; /* Adjust this value as needed for medium screens */

    }
}

/* Adjustments for smaller screens */
@media screen and (max-width: 480px) {
    .elementor-shortcode .vinyl {
        top: 110px; /* Adjust this value as needed for smaller screens */

    }
}