/*-------------------------
 Video
 -----------------------*/
#video-container {
    position: fixed;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(16 / 9 * 100vh);
    height: 100vh;
    background-image: url(../img/video_placeholder.webp?v=4);
    background-size: cover;
    background-position: center center;
}

#video-container video {
    width: 100%;
    height: 100%;
}

body.ultra-wide #video-container {
    height: calc(9 / 16 * 100vw);
    width: 100vw;
}

p.video-container {
    padding-top: 60px;
    padding-bottom: 30px;
}

#ahven-video {
    max-height: 50vh;
    width: auto;
    max-width: 90%;
    width: 100%;
    background-color: black;

    transition-duration: 1.1s;
    transition-property: all;
    transition-timing-function: ease-in-out;

    box-shadow: 0px 0px 40px rgba(110, 247, 123, 0.3), 0px 0px 20px rgba(110, 247, 123, 0.3);
}

.on-red #ahven-video {

    transition-duration: 1.1s;
    transition-property: all;
    transition-timing-function: ease-in-out;

    box-shadow: 0px 0px 40px rgba(255, 0, 0, 0.3), 0px 0px 20px rgba(255, 0, 0, 0.3);
}