/**
 * Simple Video Light-box
 *
 * https://wp-tutorials.tech/add-functionality/responsive-video-light-box/
 */

.svl-container {
   position:  relative;
   margin-bottom:  1em;
}

.svl-container > a {
   display:  block;
/*   border:  1px solid lightgrey;*/
   box-shadow: 0 0 1.00em rgba( 0, 0, 0, 0.20 );
   border-radius:  25px;
   overflow: hidden;
}

.svl-container > a:hover {
   box-shadow: 0 0 1.00em rgba( 0, 0, 0, 0.40 );
}

.svl-container > a img {
   display:  block;
   width:  100%;
   object-fit:  cover;
}

.svl-container > a::before {
   content: url( 'standard-play-button.svg' );
   position:  absolute;
   left:  50%;
   top:  50%;
   width:  25%;
   max-width:  5em;
   transform: translate(-50%, -50%);
   transition: 0.3s;
   opacity: 0.85;
   z-index:  10;
}

.svl-container.youtube > a::before {
   content: url( 'youtube-play-button.svg' );
}

.svl-container > a:hover::before {
   opacity: 1.00;
}

.svl-container figcaption {
   text-align: center;
   position:  absolute;
   bottom:  0;
   width:  100%;
   padding: 0.5em 0;
   color:  white;
   background-color:  #444444c0;
   pointer-events: none;
}