.tooltip {
    padding: 10px 15px;
    background: #f1f1f1;
    border-radius: 3.5px;
    opacity: 0.0;
    -webkit-transition: -webkit-transform 200ms;
    transition: transform 200ms;
    max-width: 33%;
    z-index: 50; /* must be higher than nav z-index */
}

@media all and (max-width: 733px)
{
    .tooltip
    {
        max-width: 300px;
    }
}

.tooltip-top {
    -webkit-transform: translate( 0, 5px );
    -ms-transform: translate( 0, 5px );
    transform: translate( 0, 5px );
}

.tooltip-right {
    -webkit-transform: translate( -5px, 0 );
    -ms-transform: translate( -5px, 0 );
    transform: translate( -5px, 0 );
}

.tooltip-bottom {
    -webkit-transform: translate( 0, -5px );
    -ms-transform: translate( 0, -5px );
    transform: translate( 0, -5px );
}

.tooltip-left {
    -webkit-transform: translate( 5px, 0 );
    -ms-transform: translate( 5px, 0 );
    transform: translate( 5px, 0 );
}

.tooltip.visible {
    opacity: 1;
    -webkit-transform: translate( 0, 0 );
    -ms-transform: translate( 0, 0 );
    transform: translate( 0, 0 );
}

.tooltip-accent {
    position: absolute;
    box-sizing: border-box;
}

.tooltip-top .tooltip-accent,
.tooltip-bottom .tooltip-accent {
    width: 12px;
    height: 6px;
}

.tooltip-right .tooltip-accent,
.tooltip-left .tooltip-accent {
    width: 6px;
    height: 12px;
}

.tooltip-top .tooltip-accent {
    bottom: -6px;
    border-top: 6px solid #f1f1f1;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
}

.tooltip-right .tooltip-accent {
    left: -6px;
    border-top: 6px solid transparent;
    border-right: 6px solid #f1f1f1;
    border-bottom: 6px solid transparent;
}

.tooltip-bottom .tooltip-accent {
    top: -6px;
    border-bottom: 6px solid #f1f1f1;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
}

.tooltip-left .tooltip-accent {
    right: -6px;
    border-top: 6px solid transparent;
    border-left: 6px solid #f1f1f1;
    border-bottom: 6px solid transparent;
}

.tooltip-content {
    margin: 0;
    color: #696969;
}

.tooltip a {
    color: #292929;
}

.tooltip-click,
.tooltip-hover,
.tooltip-focus {
    /*cursor: pointer;*/
}