.hint--bottom:before{margin-top:-12px}

[data-hint]{position:relative;display:inline-block; width:80%; left:5%;}

[data-hint]:after,
[data-hint]:before{
position:absolute;
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
visibility:hidden;opacity:0;
z-index:1000000;
pointer-events:none;
-webkit-transition:.3s ease;-moz-transition:.3s ease;
transition:.3s ease;-webkit-transition-delay:0ms;
-moz-transition-delay:0ms;
transition-delay:0ms


}


[data-hint]:hover:after,
[data-hint]:hover:before{
visibility:visible;opacity:1;
-webkit-transition-delay:100ms;
-moz-transition-delay:100ms;
transition-delay:100ms;
}

[data-hint]:before{
content:'';
position:absolute;background:0 0;
border:6px solid transparent;
z-index:1000001;
}


[data-hint]:after{
content:attr(data-hint);background:#383838;color:#fff;
padding:8px 10px;
font-size:12px;
line-height:15px;
white-space:pre-wrap;
box-shadow:4px 4px 8px rgba(0,0,0,.3)}

[data-hint='']:after,[data-hint='']:before{display:none!important;}


.hint--bottom:before{border-bottom-color:#383838}

.hint--bottom:after,
.hint--bottom:before{
top:100%;
left:50%;
-webkit-transform:translateX(-50%);
-moz-transform:translateX(-50%);
transform:translateX(-50%)
}

.hint--bottom:focus:after,
.hint--bottom:focus:before,
.hint--bottom:hover:after,
.hint--bottom:hover:before{
-webkit-transform:translateX(-50%) translateY(8px);
-moz-transform:translateX(-50%) translateY(8px);
transform:translateX(-50%) translateY(8px)}


.hint--success:after{background-color:#00bfff;width:100%;}
.hint--success.hint--bottom:before{border-bottom-color:#00bfff}