/*
    The "product-demo" class for videos or figures containing videos.
    It is used in conjuction with 'shared/js/product-demo.js' to give 
    product demo videos the desired behaviours.
*/
.product-demo {
  position: relative;
}

.product-demo video {
  width: 100%;
  height: auto;
  display: block;
}

.product-demo .play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 50px;
  color: rgba(255, 255, 255, 0.8);
  background-color: rgba(0, 0, 0, 0.5); /* Dark transparent circle */
  border-radius: 50%; /* Make it a circle */
  width: 80px; /* Set a fixed width */
  height: 80px; /* Set a fixed height */
  line-height: 78px; /* Center the "play" icon vertically */
  text-align: center; /* Center the "play" icon horizontally */
  padding-left: 8px; /* Adjustment to make it look visually centered */
  pointer-events: none;
}