/* DO NOT EDIT */
html,
body {
    margin: 0;
    background-color: #000000;
}


@font-face {
    font-family: Mr Eaves;
    src: url(../font/mr_eaves.otf);
}

main {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 1920px;
    height: 1080px;
    overflow: hidden;
}

#image-sequence  {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
}

#stop-point-container, #highlight-container {
    position: absolute;
    top: 0;
    left: 1920px;
    display: flex;
}

#highlight-container {
    /* z-index: 99999; */
}

#screen-saver {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10000;
}

img,
video {
    width: 1920px;
    height: 1080px;
}

#logo {
    position: absolute;
    width: 459px;
    height: 218px;
    /* top: 50px;
    right: 50px; */
    z-index: 20000;
}

#swiping-error {
    width: 1920px;
    height: 1080px;
    /* display: flex;
    align-items: center;
    justify-content: center; */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20000;
}

#swiping-error img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 1920px;
    height: 1080px;
    /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); */
    display: none;
}

/* idle timer warning */
#warning {
    width: 1920px;
    height: 1080px;
    z-index: 9900;
    display: none;
}

#content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-block;
    font-family: Arial;
    color: #FFF;
    font-size: 1.5em;
    padding: 80px;
    text-align: center;
    background-color: #FF8D6B;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    font-family: Mr Eaves;
}

#content h2 {
    margin-top: 0;
}

#content h3 {
    margin-bottom: 0;
}