* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.img-container {
    background: url(pexels-pedro-figueras-202443-681467.jpg);
    height: 100%;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
}

.img-container img {
    position: absolute;
    bottom: 10%;
    right: 8%;
    width: 100px;
    cursor: pointer;
    animation-name: bounce;
    animation-duration: 0.8s;
    animation-timing-function: cubic-bezier(0.9, 0.35, 1, 1);
    animation-iteration-count: infinite;
}

@keyframes bounce {
    0% {
        transform: translatey(0);
        animation-timing-function: ease-out;
    }

    50% {
        transform: translateY(-20px);
        animation-timing-function: ease-in;
    }

    100% {
        transform: translateY(0);
        animation-timing-function: ease-out;
    }
}

.trailer {
    background: #000;
    align-items: center;
}

.trailer video {
    position: absolute;
    outline: none;
    width: 50%;
    height: 60%;
    top: 20%;
    left: 25%;
    border-radius: 10px;
    box-shadow: 10px 8px 20px 3px #f81010;
}

.close-icon {
    position: absolute;
    top: 10%;
    right: 10%;
    color: #d1d1d1;
    font-size: 55px;
    font-family: sans-serif;
    cursor: pointer;
}

@media (max-width:990px) {
    .trailer .video {
        max-width: 90%;
    }
}

/* javaScript */
.active.trailer {
    visibility: hidden;
    opacity: 0;
}