#mystery-8-container .mockup .characters {
    position: absolute;
    left: 67%;
    top: 34%;
    width: 21%;
	z-index: 1;
}

#mystery-8-container .mockup .legend {
    position: absolute;
    left: 16%;
    top: 8%;
    width: 21%;
}

#mystery-8-container .mockup .reviews {
    position: absolute;
    left: 59%;
    top: 2%;
    width: 17%;
}

#mystery-8-container .mockup .synopsis {
	position: absolute;
    left: 15%;
    top: 74%;
    width: 19%;
}

#mystery-8-container .mockup .legend-tooltip {
    position: absolute;
    left: 16%;
    top: 8%;
    z-index: 2;
}


#mystery-8-container .synopsis .synopsis-legend {
    position: absolute;
    top: 16%;
    left: 12%;
    width: 22%;
    transform: rotateZ(-20deg);
}

#mystery-8-container .synopsis .synopsis-legend-tooltip {
    position: absolute;
    top: 55%;
    left: 31%;
    z-index: 2;
}

#mystery-8-container .synopsis .trailer-button-container {
    display: none;
	position: absolute;
    left: 71%;
    top: 58%;
    width: 16%;
}

/* TODO: should be removed when the trailer will be done */
.mobile #mystery-8-container.mystery-container .trailer-button-container {
    display: none;
}

/* MOBILE */
.mobile #mystery-8-container .surround-1-mobile {
    position: absolute;
    top: 15%;
    right: -9%;
    width: 50%;
    transform: rotateZ(-27deg);
}

.mobile #mystery-8-container .surround-2-mobile {
    display: none;
    position: absolute;
    top: -6%;
    left: -7%;
    width: 32%;
    transform: rotateZ(35deg);
}
/* END MOBILE */