.asptt-video{
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
}
.asptt-video iframe {
    margin: 0 !important;
    height: 100% !important;
}
.asptt-video-thumbnail{
    width:100%;
    height:100%;
    cursor:pointer;
    background: var(--asptt-color-5);
    position: relative;
    z-index:10;
}
.asptt-video-play{
    position:absolute;
    top:50%;
    left:50%;
    transform:translateY(-50%) translateX(-50%);
}
.asptt-video-embed{
    width:100%;
    height:100%;
    border:none;
    position: absolute;
    top: 0;
    left: 0;
    z-index:20;
    background: black;
    opacity:0;
    transition: opacity 0.3s;
}
.asptt-video-embed.displayed{
    opacity:1;
}
.asptt-video-link{
    position:absolute;
    z-index:22;
    left:0;
    bottom:0;
    transition:transform 0.4s;
}
.asptt-video-link.translated{
    transform: translateY(100%);
}
.asptt-video-container{
    position:relative;
}
.asptt-video-thumbnail-img{
    width: 100%;
    height: 100%;
    background-repeat:no-repeat;
    background-size: cover;
    background-position: center;
}
    
.asptt-video .ws-asptt__cta.ws-asptt__cta--play-video,
.asptt-video .ws-asptt__cta.ws-asptt__cta--loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: transparent;
    color: #fff;
    font-size: 40px;
    appearance: none;
    border: none;
    cursor: pointer;
}
.asptt-video .ws-asptt__cta.ws-asptt__cta--play-video i,
.asptt-video .ws-asptt__cta.ws-asptt__cta--loading i {
    font-weight: 400;
}

.asptt-video.loading .ws-asptt__cta.ws-asptt__cta--play-video,
.asptt-video:not(.loading) .ws-asptt__cta.ws-asptt__cta--loading {
    display: none;
}