/*---------------------*/
/*------standaard------*/
/*---------------------*/

#video-placeholder {
    width: 80vw;
    max-width: 1900px;
    height: 90vh;
    margin: 0em auto;
    margin-top: 3.5em;
    display: block;
}

body {
    background-color: black;
    overflow: hidden;
}

/*------------------------------------------------*/
/*------styling voor de verschillende voices------*/
/*------------------------------------------------*/

.voice1 {
    font-family: "Brenner Mono Medium";
    color: springgreen;
    font-size: 27.5px;
    position: absolute;
    margin: 0 0 0 19em;
}

.voice2 {
    font-family: "Brenner Sans Medium";
    color: white;
    font-size: 30px;
    margin: 0 0 0 16.8em;
}

.voice3 {
    font-family: "Brenner Sans Condensed Bold";
    color: red;
    font-size: 35px;
    margin: 0 0 0 13.2em;
}

/*-------------------------------*/
/*------styling voor elke p------*/
/*-------------------------------*/

p {
    margin-top: -1em;
    padding-left: 2em;
    max-width: 900px;
}

/*------------------------------------------------------*/
/*------positionering van de kopjes onder de video------*/
/*------------------------------------------------------*/

.titel1 {
    position: absolute;
    top: 68vh;
    left: 13.5em;
}

.titel2 {
    position: absolute;
    top: 68vh;
    left: 45em;
}

/*------------------------------------------------*/
/*------styling van de kopjes onder de video------*/
/*------------------------------------------------*/

.voices {
    font-family: "Brenner Sans";
    color: gray;
    font-size: 20px;
    margin: 0;
}

.sounds {
    font-family: "Brenner Sans";
    color: gray;
    font-size: 20px;
    margin: 0;
}

/*----------------------------------------------------------------------------*/
/*------styling van de closed captions van alle geluiden in het fragment------*/
/*----------------------------------------------------------------------------*/

.soundcaption0 {
    font-family: "Brenner Sans";
    color: white;
    font-size: 30px;
    margin: 0 0 0 0;
}

.soundcaption1 {
    font-family: "Brenner Sans";
    color: red;
    font-size: 30px;
    margin: 1.5em 0 0 0;
}

.soundcaption2 {
    font-family: "Brenner Sans";
    color: yellow;
    font-size: 30px;
    margin: 1.5em 0 0 0;
}

.soundcaption3 {
    font-family: "Brenner Sans";
    color: lawngreen;
    font-size: 30px;
    margin: 1.5em 0 0 0;
}

.soundcaption4 {
    font-family: "Brenner Sans";
    color: lawngreen;
    font-size: 30px;
    margin: 1.5em 0 0 0;
}

.soundcaption5 {
    font-family: "Brenner Sans";
    color: lawngreen;
    font-size: 30px;
    margin: 1.5em 0 0 0;
}

.soundcaption6 {
    font-family: "Brenner Sans";
    color: lawngreen;
    font-size: 30px;
    margin: 1.5em 0 0 0;
}

.soundcaption7 {
    font-family: "Brenner Sans";
    color: lawngreen;
    font-size: 30px;
    margin: 1.5em 0 0 0;
}

.soundcaption8 {
    font-family: "Brenner Sans";
    color: lawngreen;
    font-size: 30px;
    margin: 1.5em 0 0 0;
}

.soundcaption9 {
    font-family: "Brenner Sans";
    color: white;
    font-size: 30px;
    margin: 0;
    max-width: 400px;
}

.soundcaption10 {
    font-family: "Brenner Sans";
    color: white;
    font-size: 30px;
    margin: 0;
}

.soundcaption11 {
    font-family: "Brenner Sans";
    color: white;
    font-size: 30px;
    margin: 0;
}

.soundcaption12 {
    font-family: "Brenner Sans";
    color: red;
    font-size: 30px;
    margin: 1.5em 0 0 0;
}

.soundcaption13 {
    font-family: "Brenner Sans";
    color: white;
    font-size: 30px;
    margin: 0;
}

.soundcaption14 {
    font-family: "Brenner Sans";
    color: white;
    font-size: 30px;
    margin: 0;
}

/*-----------------------------------------------------*/
/*------styling van hoe de ondertiteling reageerd------*/
/*-----------------------------------------------------*/

#closed-captions p {
    opacity: 0;
    transition: .05s;
    position: absolute;
    top: 70.75vh;
    left: 6.5em;
}

#closed-captions .on {
    opacity: 1;
}

#closed-captions .off {
    transition: .2s;
    opacity: 0;
}

/*-----------------------------------------------------*/
/*------Styling van de eerste zin in het fragment------*/
/*-----------------------------------------------------*/

.p0 span {
    opacity: 0;
}

.p0.on span:first-of-type {
    opacity: 1;
}

.p0.on span:nth-of-type(2) {
    opacity: 1;
}

.p0.on span:nth-of-type(3) {
    opacity: 1;
}

.p0.on span:nth-of-type(4) {
    opacity: 1;
    transition: 0s .4s;
    margin-right: -.25em;
}

.p0.on span:nth-of-type(5) {
    opacity: 1;
    transition: 0s .5s;
    margin-right: -.25em;
}

.p0.on span:nth-of-type(6) {
    opacity: 1;
    transition: 0s .7s;
    margin-right: -.25em;
}

.p0.on span:nth-of-type(7) {
    opacity: 1;
    transition: 0s 1.1s;
    margin-right: -.25em;
}

.p0.on span:nth-of-type(8) {
    opacity: 1;
    transition: 0s 1.4s;
    margin-right: -.25em;
}

.p0.on span:nth-of-type(9) {
    opacity: 1;
    transition: 0s 1.7s;
    margin-right: -.25em;
}

.p0.on span:nth-of-type(10) {
    opacity: 1;
    transition: 0s 2s;
}

.p0.on span:nth-of-type(11) {
    opacity: 1;
    transition: 0s 3s;
}

.p0.on span:nth-of-type(12) {
    opacity: 1;
    transition: 0s 3.2s;
}

.p0.on span:nth-of-type(13) {
    opacity: 1;
    transition: 0s 3.7s;
}

/*-----------------------------------------------------------------------------*/
/*------Styling van "within cells interlinked", wat 3x wordt uitgesproken------*/
/*-----------------------------------------------------------------------------*/

.p42.on span {
    font-size: 35px;
}

.p43.on span {
    font-size: 40px;
}

/*---------------------------------------*/
/*------Javascript Sound Visualizer------*/
/*---------------------------------------*/


#soundvisualizer {
    z-index: -1;
}

#thefile {
    padding-top: 0.2em;
    position: absolute;
    top: 1em;
    left: 10em;
    z-index: 100;
    margin: 0;
}

#canvas {
    position: absolute;
    left: 12em;
    bottom: 5.1em;
    width: 80vw;
    height: 5.3em;
    background-color: black;
}

audio {
    position: absolute;
    right: 0.5em;
    top: 0.5em;
    width: 20em;
    height: 1.75em;
}

.downloadknop {
    position: absolute;
    top: 1em;
    left: 1em;
    z-index: 100;
    margin: 0;
}

/*------------------------------------------------*/
/*------Styling classes die op de body komen------*/
/*------------------------------------------------*/

.sound0 #trommeldiv {
    animation-name: trommel;
    animation-duration: 1.85s;
    animation-iteration-count: 10;
}

.sound1 #alarmbuzzerlinks {
    animation: alarmbuzzer 1s linear;
    background-color: red;
    box-shadow: 0.5em 0 3em 3em red;
}

.sound1 #alarmbuzzerrechts {
    animation: alarmbuzzer 1s linear;
    background-color: red;
    box-shadow: 0.5em 0 3em 3em red;
}

.sound2 #siren {
    animation: siren 1s linear;
}

.sound3 #lowbuzzerlinks1 {
    animation: lowbuzzer 1.25s linear;
    background-color: lawngreen;
    box-shadow: 0.5em 0 3em 3em lawngreen;
}

.sound3 #lowbuzzerrechts1 {
    animation: lowbuzzer 1.25s linear;
    background-color: lawngreen;
    box-shadow: 0.5em 0 3em 3em lawngreen;
}

.sound4 #highbuzzerlinks2 {
    animation: highbuzzer 0.5s linear;
    background-color: lawngreen;
    box-shadow: 0.5em 0 3em 3em lawngreen;
}

.sound4 #highbuzzerrechts2 {
    animation: highbuzzer 0.5s linear;
    background-color: lawngreen;
    box-shadow: 0.5em 0 3em 3em lawngreen;
}

.sound5 {}

.sound6 #lowbuzzerlinks3 {
    animation: lowbuzzer 1.25s linear;
    background-color: lawngreen;
    box-shadow: 0.5em 0 3em 3em lawngreen;
}

.sound6 #lowbuzzerrechts3 {
    animation: lowbuzzer 1.25s linear;
    background-color: lawngreen;
    box-shadow: 0.5em 0 3em 3em lawngreen;
}

.sound7 #highbuzzerlinks4 {
    animation: highbuzzer 0.5s linear;
    background-color: lawngreen;
    box-shadow: 0.5em 0 3em 3em lawngreen;
}

.sound7 #highbuzzerrechts4 {
    animation: highbuzzer 0.5s linear;
    background-color: lawngreen;
    box-shadow: 0.5em 0 3em 3em lawngreen;
}

.sound8 #lowbuzzerlinks5 {
    animation: lowbuzzer 1.1s linear;
    background-color: lawngreen;
    box-shadow: 0.5em 0 3em 3em lawngreen;
}

.sound8 #lowbuzzerrechts5 {
    animation: lowbuzzer 1.1s linear;
    background-color: lawngreen;
    box-shadow: 0.5em 0 3em 3em lawngreen;
}

.sound9 #highbuzzerlinks6 {
    animation: highbuzzer 0.7s linear;
    background-color: lawngreen;
    box-shadow: 0.5em 0 3em 3em lawngreen;
}

.sound9 #highbuzzerrechts6 {
    animation: highbuzzer 0.7s linear;
    background-color: lawngreen;
    box-shadow: 0.5em 0 3em 3em lawngreen;
}

.sound10 {
    animation: highfrequencytone 0.1s cubic-bezier(.36, .07, .19, .97) both infinite;
    animation-iteration-count: 418;
    backface-visibility: hidden;
}

.sound11 #tauntingmusiclinks {
    animation-name: tauntingmusic;
    animation-duration: 50s;
    animation-iteration-count: 1;
    background: url(images/tauntingmusic.gif);
    transform: scale(1.54);
    transform-origin: top left;
    background-repeat: no-repeat;
    visibility: visible;
    z-index: -1;
    position: absolute;
    width: 120em;
    height: 60.5em;
    top: 0;
    left: -21em;
    opacity: 0;
}

.sound11 #tauntingmusicrechts {
    animation-name: tauntingmusic;
    animation-duration: 50s;
    animation-iteration-count: 1;
    background: url(images/tauntingmusic.gif);
    transform: scale(1.54);
    transform-origin: top right;
    background-repeat: no-repeat;
    visibility: visible;
    z-index: -1;
    position: absolute;
    width: 120em;
    height: 60.5em;
    top: 0;
    left: 152.5em;
    opacity: 0;
}

.sound12 #computerbeepscircle {
    animation-name: computerbeeps;
    animation-duration: 0.1s;
    animation-iteration-count: 8;
}

/*----------------------------------*/
/*------Stylen van de Effecten------*/
/*----------------------------------*/

#trommeldiv {
    width: 106em;
    height: 2.5em;
    position: absolute;
    background-color: transparent;
    left: 7em;
    bottom: 0;
    z-index: -1;
    opacity: 0;
}

#trommel {
    width: 106em;
    height: 0.5em;
    position: absolute;
    background-color: white;
    opacity: 1;
    left: 0;
    bottom: 0;
    box-shadow: 0.5em 0 3em 3em white;
}

.drum {
    position: absolute;
    top: 0em;
    left: 27em;
    color: black;
    text-shadow: 0px 0px 5px black, 0px 0px 25px black, 0px 0px 25px black;
    font-family: "Brenner Sans Bold";
    font-size: 30px;
    padding: 0;
}

#siren {
    width: 106em;
    height: 0.5em;
    position: absolute;
    background-color: yellow;
    opacity: 0;
    left: 7em;
    bottom: 0;
    z-index: -1;
    box-shadow: 0.5em 0 3em 3em yellow;
}

#alarmbuzzerlinks {
    width: 0.5em;
    height: 48em;
    position: absolute;
    opacity: 0;
    left: 0em;
    top: 7em;
}

#alarmbuzzerrechts {
    width: 0.5em;
    height: 48em;
    position: absolute;
    opacity: 0;
    right: 0em;
    top: 7em;
}

#lowbuzzerlinks1 {
    width: 0.5em;
    height: 48em;
    position: absolute;
    opacity: 0;
    left: 0em;
    top: 7em;
}

#lowbuzzerrechts1 {
    width: 0.5em;
    height: 48em;
    position: absolute;
    opacity: 0;
    right: 0em;
    top: 7em;
}

#highbuzzerlinks2 {
    width: 0.5em;
    height: 48em;
    position: absolute;
    opacity: 0;
    left: 0em;
    top: 7em;
}

#highbuzzerrechts2 {
    width: 0.5em;
    height: 48em;
    position: absolute;
    opacity: 0;
    right: 0em;
    top: 7em;
}

#lowbuzzerlinks3 {
    width: 0.5em;
    height: 48em;
    position: absolute;
    opacity: 0;
    left: 0em;
    top: 7em;
}

#lowbuzzerrechts3 {
    width: 0.5em;
    height: 48em;
    position: absolute;
    opacity: 0;
    right: 0em;
    top: 7em;
}

#highbuzzerlinks4 {
    width: 0.5em;
    height: 48em;
    position: absolute;
    opacity: 0;
    left: 0em;
    top: 7em;
}

#highbuzzerrechts4 {
    width: 0.5em;
    height: 48em;
    position: absolute;
    opacity: 0;
    right: 0em;
    top: 7em;
}

#lowbuzzerlinks5 {
    width: 0.5em;
    height: 48em;
    position: absolute;
    opacity: 0;
    left: 0em;
    top: 7em;
}

#lowbuzzerrechts5 {
    width: 0.5em;
    height: 48em;
    position: absolute;
    opacity: 0;
    right: 0em;
    top: 7em;
}

#highbuzzerlinks6 {
    width: 0.5em;
    height: 48em;
    position: absolute;
    opacity: 0;
    left: 0em;
    top: 7em;
}

#highbuzzerrechts6 {
    width: 0.5em;
    height: 48em;
    position: absolute;
    opacity: 0;
    right: 0em;
    top: 7em;
}

#tauntingmusic {
    width: 120em;
    height: 60.5em;
    position: absolute;
    z-index: 1;
    background-color: transparent;
    top: 0;
    left: 0;
}

#computerbeepscircle {
    width: 120em;
    position: absolute;
    height: 60.5em;
    margin: 0;
    background-color: red;
    top: 0;
    left: 0;
    clip-path: ellipse(50% 50% at 50% 50%);
    z-index: -1;
    opacity: 0;
}

/*---------------------*/
/*------Keyframes------*/
/*---------------------*/

@-webkit-keyframes trommel {
    0% {
        opacity: 0;
    }

    1% {
        opacity: 1;
    }

    30% {
        opacity: 1;
    }

    31% {
        opacity: 0;
    }

    99% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes siren {
    0% {
        opacity: 0;
        height: 0.5em;
    }

    1% {
        opacity: 1;
        height: 0.5em;

    }

    50% {
        opacity: 1;
        height: 40em;
    }

    99% {
        opacity: 1;
        height: 0.5em;
    }

    100% {
        opacity: 0;
        height: 0.5em;
    }
}

@-webkit-keyframes alarmbuzzer {
    0% {
        opacity: 0;
        width: 0.1em;
    }

    1% {
        opacity: 0.75;
        width: 0.25em;
    }

    50% {
        width: 2.25em;
    }

    99% {
        opacity: 0.75;
        width: 0.25em;
    }

    100% {
        opacity: 0;
        width: 0.1em;
    }
}

@-webkit-keyframes lowbuzzer {
    0% {
        top: 7em;
        opacity: 0;
        width: 0;
    }

    1% {
        top: 7em;
        opacity: 0.75;
        width: 0;
    }

    10% {
        top: 7.5em;
    }

    20% {
        top: 7em;
    }

    30% {
        top: 7.5em;
    }

    40% {
        top: 7em;
    }

    50% {
        top: 7.5em;
        width: 3em;
    }

    60% {
        top: 7em;
    }

    70% {
        top: 7.5em;
    }

    80% {
        top: 7em;
    }

    90% {
        top: 7.5em;
    }

    99% {
        top: 7em;
        opacity: 0.75;
        width: 0;
    }

    100% {
        top: 7em;
        opacity: 0;
        width: 0;
    }
}

@-webkit-keyframes highbuzzer {
    0% {
        opacity: 0;
        width: 0;
    }

    1% {
        opacity: 0.75;
        width: 0;
    }

    50% {
        width: 7em;
    }

    99% {
        opacity: 0.75;
        width: 0;
    }

    100% {
        opacity: 0;
        width: 0;
    }
}

@-webkit-keyframes highfrequencytone {

    0% {
        background-color: black;
    }

    100% {
        background-color: rgba(0, 0, 0, 0.9);
    }
}

@-webkit-keyframes computerbeeps {
    0% {
        opacity: 0;
    }

    1% {
        opacity: 0.1;
    }

    50% {
        opacity: 0.35;
    }

    99% {
        opacity: 0.1;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes tauntingmusic {
    0% {
        opacity: 0;
    }

    1% {
        opacity: 0.3;
    }

    99% {
        opacity: 0.3;
    }

    100% {
        opacity: 0;
    }
}