.gtip{position: relative;}

.gtip:before, .gtip:after{display: block; opacity: 0; pointer-events: none; position: absolute;}

/* LEFT */
.gtip.left:after{border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 6px solid rgba(0,0,0,1); content: ''; height: 0; right: 35px; top: 7px; width: 0;}
.gtip.left:before{background: rgba(0,0,0,1); border-radius: 2px; color: #fff; content: attr(data-title); font-size: 14px; padding: 6px 10px; right: 40px; white-space: nowrap;}

/* TOP */
.gtip.top:after{border-right: 6px solid transparent; border-top: 6px solid rgba(0,0,0,1); border-left: 6px solid transparent; content: ''; height: 0; bottom: 34px; left: 7px; width: 0;}
.gtip.top:before{background: rgba(0,0,0,1); border-radius: 2px; color: #fff; content: attr(data-title); font-size: 14px; padding: 6px 10px; bottom: 40px; white-space: nowrap;}

/* RIGHT */
.gtip.right:after{border-right: 6px solid rgba(0,0,0,1); border-top: 6px solid transparent; border-bottom: 6px solid transparent; content: ''; height: 0; left: 31px; top: 7px; width: 0;}
.gtip.right:before{background: rgba(0,0,0,1); border-radius: 2px; color: #fff; content: attr(data-title); font-size: 14px; padding: 6px 10px; left: 37px; white-space: nowrap;}

/* BOTTOM */
.gtip.bottom:after{border-right: 6px solid transparent; border-bottom: 6px solid rgba(0,0,0,1); border-left: 6px solid transparent; content: ''; height: 0; top: 40px; left: 7px; width: 0;}
.gtip.bottom:before{background: rgba(0,0,0,1); border-radius: 2px; color: #fff; content: attr(data-title); font-size: 14px; padding: 6px 10px; top: 46px; white-space: nowrap;}

/* LEFT EXPANDIR */
.gtip.left.expand:before{transform: scale3d(.2,.2,1); transition: all .2s ease-in-out;}
.gtip.left.expand:after{transform: translate3d(0,6px,0); transition: all .1s ease-in-out;}
.gtip.left.expand:hover:before, .gtip.left.expand:hover:after{opacity: 1; transform: scale3d(1,1,1);}
.gtip.left.expand:hover:after{transition: all .2s .1s ease-in-out;}

/* TOP EXPANDIR */
.gtip.top.expand:before{transform: scale3d(.2,.2,1); transition: all .2s ease-in-out;}
.gtip.top.expand:after{transform: translate3d(0,6px,0); transition: all .1s ease-in-out;}
.gtip.top.expand:hover:before, .gtip.top.expand:hover:after{opacity: 1; transform: scale3d(1,1,1);}
.gtip.top.expand:hover:after{transition: all .2s .1s ease-in-out;}

/* RIGHT EXPANDIR */
.gtip.right.expand:before{transform: scale3d(.2,.2,1); transition: all .2s ease-in-out;}
.gtip.right.expand:after{transform: translate3d(0,6px,0); transition: all .1s ease-in-out;}
.gtip.right.expand:hover:before, .gtip.right.expand:hover:after{opacity: 1; transform: scale3d(1,1,1);}
.gtip.right.expand:hover:after{transition: all .2s .1s ease-in-out;}

/* BOTTOM EXPANDIR */
.gtip.bottom.expand:before{transform: scale3d(.2,.2,1); transition: all .2s ease-in-out;}
.gtip.bottom.expand:after{transform: translate3d(0,6px,0); transition: all .1s ease-in-out;}
.gtip.bottom.expand:hover:before, .gtip.bottom.expand:hover:after{opacity: 1; transform: scale3d(1,1,1);}
.gtip.bottom.expand:hover:after{transition: all .2s .1s ease-in-out;}

.gtip.left.expand:hover, .gtip.top.expand:hover, .gtip.right.expand:hover, .gtip.bottom.expand:hover,
.gtip.left.expand:hover i, .gtip.top.expand:hover i, .gtip.right.expand:hover i, .gtip.bottom.expand:hover i,
.gtip.left.expand:hover i, .gtip.top.expand:hover i, .gtip.right.expand:hover i, .gtip.bottom.expand:hover i::before{color: #CD201F;}

/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* OUTRO STYLE-02 */
/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.gtip2{position: relative; display: inline-block; margin-left: 0.5em; color: #FBA919;}

.gtip2 .gtip2_icon{background: #4169E1; border-radius: 10px; cursor: pointer; display: inline-block; font-style: italic; font-family: times new roman; font-size: 0.875em; height: 17px; line-height: 1.4em; text-align: center; width: 17px; color: #fff;}

/*.gtip2 .gtip2_info{display: none; background: #262626; border: 1px solid #27b1f0; border-radius: 3px; font-size: 0.875em; padding: 1em; position: absolute; left: 30px; top: -5px; letter-spacing: 0.5px; width: 240px; z-index: 2;}*/
.gtip2 .gtip2_info{display: none; background: #262626; border: 1px solid #27b1f0; border-radius: 3px; font-size: 0.875em; padding: 1em; position: absolute; right: 30px; top: -80px; letter-spacing: 0.5px; width: 240px; z-index: 2;}

/*.gtip2 .gtip2_info:before, .gtip2 .gtip2_info:after{content: ""; position: absolute; left: -10px; top: 7px; border-style: solid; border-width: 10px 10px 10px 0; border-color: transparent #27b1f0;}*/
.gtip2 .gtip2_info:before, .gtip2 .gtip2_info:after{content: ""; position: absolute; right: -10px; top: 82px; border-style: solid; 
	border-width: 10px 0 10px 10px; border-color: transparent #222222;}

/*.gtip2 .gtip2_info:after{left: -8px; border-right-color: #262626;}*/
.gtip2 .gtip2_info:after{right: -10px; border-right-color: #262626;}

.gtip2 .gtip2_info .info {display: block;}

.gtip2 .gtip2_info .info_title {color: #FFF;}

.gtip2:hover .gtip2_info, .gtip2:focus .gtip2_info{display: inline-block;}

/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* OUTRO STYLE-03 */
/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*
.tooltip{position: relative; display: inline-block;}
.tooltip:hover .tooltipTexto{visibility: visible;}

.tooltipMargin{width: 463px; height: 205px; letter-spacing: 0.4px;}

.tooltipTexto{position: absolute; visibility: hidden; font: 400 16px Oswald; background: black; color:#fff; text-align: center; padding: 4px 4px; border-radius: 6px; bottom: 100%; left: 50%; margin-left: -100px; margin-bottom: 5px;}
.tooltipTexto:after{content: " "; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #000 transparent transparent transparent;}
*/