* {
    max-width: 100%;
    overflow-x: none;
}

.trigger {
    /*background: green;*/
    height: 1px;
    margin-top: -350px;
    position: relative;
    width: 100%;
    z-index: 100;
}

.h1 {
    margin: 0;
    padding: 0;
    background: none;
}

.window-wrapper {
    width: 100%;
    height: 800px;
}
@media(max-width: 414px) {
    .window-wrapper{
        height: 500px;
    }
}
.window {
    height: 800px;
    max-height: 800px;
    overflow: hidden;
    width: 100%;
    z-index: 1;
    background: #000000;
}
@media(max-width: 414px) {
    .window{
        height: 500px;
    }
}
.window__canvas {
    position: relative;
    width: 100%;
}


.window__background-image {
    height: 800px;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0;
}

#window-video {
    height: 100%;
    width: 100%;
}
video.loading {
    background: url(images/video-still.png) center center no-repeat;
    background-size: 100%;
  }
@media(max-width: 414px) {
    #window-video {
        height: 500px;
    }
}

.window__text-flex {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: absolute;
    height: 800px;
    z-index: 1;
}
@media only screen and (max-width: 768px) {
    .window__text-flex {
        width: 50%;
    }
}
@media only screen and (max-width: 414px) {
    .window__text-flex {
        height: 257px;
        width: 100%;
    }
}
.window__text-flex--video {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: absolute;
    height: 800px;
    z-index: 1;
}
@media only screen and (max-width: 414px) {
    .window__text-flex--video {
        height: 640px;
    }
}
.window__text-child {
    font-size: 35px;
    font-weight: 500;
    max-width: 1200px;
    text-transform: uppercase;
    text-align: left;
    width: 100%;
    z-index: 1;
}

@media(max-width: 1550px) {
    .window__text-child {
        padding: 0px 150px;
    }
}

.window__text {
    width: 500px;
    text-shadow: 0px 0px 20px rgba(0, 0, 0, 1);
    opacity: 0;
}

@media(max-width: 769px) {
    .window__text-child {
        padding: 0px 25px;
        width: 100%;
    }
    .window__text {
        font-size: 22px;
        line-height: 25px;
        width: 100%;
        font-weight: 500;
    }
}

.window__text--1-animate {
    animation: inLeft 1s forwards;
    animation-timing-function: cubic-bezier(0.6, 0.2, 0.1, 1);
}


@keyframes inLeft {
    from {
        margin-left: -60px;
        opacity: 0;
    }
    to {
        margin-right: 0px;
        opacity: 1;
    }
}

@keyframes inRight {
    from {
        margin-left: 30px;
        opacity: 0;
    }
    to {
        margin-left: 0px;
        opacity: 1;
    }
}