#tooltip
{
    text-align: center;
    color: #fff;
    background: #005EB8;
    /* background: rgba(0,0,0,0.8); */
    font-size:1.2rem;
    line-height: 1.8rem;
    position: absolute;
    z-index: 100;
    padding: 15px;
    border-radius: 5px;
    box-sizing: border-box;
}

@media only screen and (max-width: 800px){
    #tooltip:before{
        content: 'x';
        position: absolute;
        color: #fff;
        right: 8px;
        top: 3px;
        font-size: 12px;
    }
}

#tooltip:after /* triangle decoration */
{
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #005EB8;
    content: '';
    position: absolute;
    left: 50%;
    bottom: -10px;
    margin-left: -10px;
}

#tooltip.top:after
{
    border-top-color: transparent;
    border-bottom: 10px solid #005EB8;
    top: -20px;
    bottom: auto;
}


#tooltip.left:after
{
    left: 10px;
    margin: 0;
}

#tooltip.right:after
{
    right: 10px;
    left: auto;
    margin: 0;
}