@TitleTipZIndex: 199;
@TitleTipDelay: 1s;

.title-tip {
    position: absolute;
    padding: 10px;
    font: 700 @12px/1 @fontContent;
    color: @colorWhite;
    background: @colorRedBrown;
    border-radius: 0.4rem;
    box-shadow: 0 0 50px rgba(0,0,0,0.33);
    transition: opacity @TitleTipDelay;
    z-index: @TitleTipZIndex;
    opacity: 0;

    @media (min-width: @responsiveDesktop) and (max-width: @responsiveDesktopM) {
        font-size: @15px;
    }

    &:after {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: transparent;
    }

    &:hover {
        cursor: pointer;
    }

    &.is-visible { opacity: 1 }
}