/* the Social Icon's Tooltip
--------------------------------------------------------- */
ul.si li span { 
	visibility: hidden;
	position: absolute;
}

ul.si-tt li { position: relative;}
ul.si-tt li span.si-tt,
ul.si-tt li span {
	visibility: hidden;
	width: auto;
	min-width: 70px;
	height: 20px;
	position: absolute;
		top: -45px;		/* for the default position of tooltip (above right)  */
		left: -15px;	/* for the default position of tooltip (above right)  */
		z-index: 102;
	padding:5px 10px;
	text-align: center;	
	font-size: 16px;
	font-family: "Helvetica", sans-serif;
	letter-spacing: 1px;
	white-space: nowrap;	
	color: #333;
	cursor: default;
	background-color: rgba(255,255,255,0.8);  /* default transparent white */
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
}
ul.si-tt li span {
	opacity: 0;
	transition: visibility 0.5s ease-in 0.5s ;
	-moz-transition: visibility 0.5s ease-in 0.5s ;
	-webkit-transition: visibility 0.5s ease-in 0.5s ;
	-o-transition: visibility 0.5s ease-in 0.5s ;
}
ul.si-tt li:hover span {
	visibility: visible;
	display: inline;
	opacity: 1;
}

/* Tooltip position: ABOVE RIGHT of icon ( is default )
---------------------------------------------------------- */

/* the small triangle */
ul.si-tt li span.si-tt:after,
ul.si-tt li span:after {
	content: '';
	position:absolute;
	bottom: -10px;
	left: 20px;
	border-width:10px 5px 0;
	border-style:solid;
	border-color:rgba(255,255,255,0.8) transparent;
	display:block; 
	width:0;
}


/* Tooltip position: ABOVE CENTER of icon
---------------------------------------------------------- */
ul.si-tt.si-tt-above-center li span,
ul.si-tt li span.si-tt-above-center {
	width: 120px; 		/* set the width to any value you want */
	left: -60px; 		/* must be = width/2 */
	margin-left: 50%;
	padding-left:0;
	padding-right:0;
}
ul.si-tt.si-tt-above-center li:hover span,
ul.si-tt li:hover span.si-tt-above-center {display: block;}

/* the small triangle */
ul.si-tt li span.si-tt-above-center:after, 
ul.si-tt.si-tt-above-center li span:after {
	bottom: -10px;
	left: 50%;
	margin-left: -5px;
	border-width:10px 5px 0;
	border-color:rgba(255,255,255,0.8) transparent;
   display:block;
   width:0;
}

/* Tooltip position: ABOVE LEFT of icon
---------------------------------------------------------- */
ul.si-tt li span.si-tt-above-left, 
ul.si-tt.si-tt-above-left li span {
	left: auto;
	right: -15px;
}
/* the small triangle */
ul.si-tt li span.si-tt-above-left:after, 
ul.si-tt.si-tt-above-left li span:after {
	bottom: -10px;
	left: auto;
	right: 20px;
	border-width:10px 5px 0;
	border-color:rgba(255,255,255,0.8) transparent;
   display:block;
   width:0;
}

/* Tooltip position: BELOW RIGHT of icon
------------------------------------------ */
ul.si-tt li span.si-tt-below-right,
ul.si-tt.si-tt-below-right li span {
	top: auto;
	bottom: -45px;
	left: -15px;	
}

/* the small triangle */
ul.si-tt li span.si-tt-below-right:after,
ul.si-tt.si-tt-below-right li span:after {
	top:-10px;
	bottom:auto;
	left: 20px;
   border-width:0 5px 10px;
   border-color:rgba(255,255,255,0.8) transparent;
}

/* Tooltip position: BELOW CENTER of icon
---------------------------------------------------------- */
ul.si-tt.si-tt-below-center li span,
ul.si-tt li span.si-tt-below-center {
	width: 120px;		/* set the width to any value you want */
	top: auto;
	bottom: -45px;
	left: -60px; 		/* must be = width/2 */
	margin-left: 50%;
	padding-left:0;
	padding-right:0;
}
ul.si-tt.si-tt-below-center li:hover span,
ul.si-tt li:hover span.si-tt-below-center {display: block;}

/* the small triangle */
ul.si-tt li span.si-tt-below-center:after, 
ul.si-tt.si-tt-below-center li span:after {
	top: -10px;
	bottom: auto;
	left: 50%;
	margin-left: -5px;
	border-width:0 5px 10px;
	border-color:rgba(255,255,255,0.8) transparent;
   display:block;
   width:0;
}

/* Tooltip position: BELOW LEFT of icon
------------------------------------------ */
ul.si-tt li span.si-tt-below-left,
ul.si-tt.si-tt-below-left li span {
	top: auto;
	bottom: -45px;
	left: auto;
	right: -15px;	
}

/* the small triangle */
ul.si-tt li span.si-tt-below-left:after,
ul.si-tt.si-tt-below-left li span:after {
	top:-10px;
	bottom:auto;
	left: auto;
	right: 20px;
   border-width:0 5px 10px;
   border-color:rgba(255,255,255,0.8) transparent;
}

/* Tooltip position: RIGHT side of icon
------------------------------------------ */
ul.si-tt.si-tt-right li span {
	top: -15px; /* value must be = (tooltip height + padding top + padding bottom)/2 */
	margin-top: 50%;
	left:120%;
}

/* the small triangle */
ul.si-tt.si-tt-right li span:after {
	top:10px; 
	bottom:auto;
	left:-10px;
	border-width:5px 10px 5px 0;
	border-color:transparent rgba(255,255,255,0.8);
}

/* Tooltip position: LEFT side of icon
------------------------------------------ */
ul.si-tt.si-tt-left li span {
	top: -15px; /* value must be = (tooltip height + padding top + padding bottom)/2 */
	margin-top: 50%;
	left: auto;
	right: 120%;		
}

/* the small triangle */
ul.si-tt.si-tt-left li span:after {
	top:10px; 
	bottom:auto;
   left:auto;
	right:-10px;
	border-width:5px 0 5px 10px;
	border-color:transparent rgba(255,255,255,0.8);
}


/* Tooltip COLORS
------------------------------------------------------------------------------------*/

/* the BLACK tooltip ------------------ */ 

ul.si-tt.si-tt-black li span {
	color: #DDD;
	background-color: rgba(0,0,0,0.8);
}
ul.si-tt.si-tt-black li span:after,
ul.si-tt-below.si-tt-black li span:after { border-color:rgba(0,0,0,0.8) transparent;}
ul.si-tt-right.si-tt-black li span:after,
ul.si-tt-left.si-tt-black li span:after {	border-color:transparent rgba(0,0,0,0.8);}

/* the WHITE GRADIENT tooltip ---------------- */	

ul.si-tt.si-tt-white-grad li span {
	color: #333;
	background: -moz-linear-gradient(top,  rgba(255,255,255,0.6) 0%, rgba(255,255,255,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.6)), color-stop(100%,rgba(255,255,255,1)));
	background: -webkit-linear-gradient(top,  rgba(255,255,255,0.6) 0%,rgba(255,255,255,1) 100%);
	background: -o-linear-gradient(top,  rgba(255,255,255,0.6) 0%,rgba(255,255,255,1) 100%);
	background: -ms-linear-gradient(top,  rgba(255,255,255,0.6) 0%,rgba(255,255,255,1) 100%);
	background: linear-gradient(to bottom,  rgba(255,255,255,0.6) 0%,rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99ffffff', endColorstr='#ffffff',GradientType=0 );
}
ul.si-tt-below-left.si-tt-white-grad li span,
ul.si-tt-below-center.si-tt-white-grad li span,
ul.si-tt-below-right.si-tt-white-grad li span {
	background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,0.6) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0.6)));
	background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.6) 100%);
	background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.6) 100%);
	background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.6) 100%);
	background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.6) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#99ffffff',GradientType=0 );
}
ul.si-tt-right.si-tt-white-grad li span {
	background: -moz-linear-gradient(left,  rgba(255,255,255,1) 0%, rgba(255,255,255,0.6) 100%);
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0.6)));
	background: -webkit-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.6) 100%);
	background: -o-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.6) 100%);
	background: -ms-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.6) 100%);
	background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.6) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#99ffffff',GradientType=1 );
}
ul.si-tt-left.si-tt-white-grad li span {
	background: -moz-linear-gradient(left,  rgba(255,255,255,0.6) 0%, rgba(255,255,255,1) 100%);
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0.6)), color-stop(100%,rgba(255,255,255,1)));
	background: -webkit-linear-gradient(left,  rgba(255,255,255,0.6) 0%,rgba(255,255,255,1) 100%);
	background: -o-linear-gradient(left,  rgba(255,255,255,0.6) 0%,rgba(255,255,255,1) 100%);
	background: -ms-linear-gradient(left,  rgba(255,255,255,0.6) 0%,rgba(255,255,255,1) 100%);
	background: linear-gradient(to right,  rgba(255,255,255,0.6) 0%,rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99ffffff', endColorstr='#ffffff',GradientType=1 );
}
ul.si-tt.si-tt-white-grad li span:after,
ul.si-tt-below-right.si-tt-white-grad li span:after,
ul.si-tt-below-center.si-tt-white-grad li span:after,
ul.si-tt-below-left.si-tt-white-grad li span:after {border-color:#FFF transparent;}
ul.si-tt-right.si-tt-white-grad li span:after,
ul.si-tt-left.si-tt-white-grad li span:after {border-color:transparent #FFF;}

/* the BLACK GRADIENT tooltip ------------------------------- */	

ul.si-tt.si-tt-black-grad li span {
	color: #DDD;
	background: -moz-linear-gradient(top,  rgba(0,0,0,0.6) 0%, rgba(0,0,0,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.6)), color-stop(100%,rgba(0,0,0,1)));
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0.6) 0%,rgba(0,0,0,1) 100%);
	background: -o-linear-gradient(top,  rgba(0,0,0,0.6) 0%,rgba(0,0,0,1) 100%);
	background: -ms-linear-gradient(top,  rgba(0,0,0,0.6) 0%,rgba(0,0,0,1) 100%);
	background: linear-gradient(to bottom,  rgba(0,0,0,0.6) 0%,rgba(0,0,0,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99000000', endColorstr='#000000',GradientType=0 );
}
ul.si-tt-below-right.si-tt-black-grad li span,
ul.si-tt-below-center.si-tt-black-grad li span,
ul.si-tt-below-left.si-tt-black-grad li span {
	background: -moz-linear-gradient(top,  rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,0.6)));
	background: -webkit-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(0,0,0,0.6) 100%);
	background: -o-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(0,0,0,0.6) 100%);
	background: -ms-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(0,0,0,0.6) 100%);
	background: linear-gradient(to bottom,  rgba(0,0,0,1) 0%,rgba(0,0,0,0.6) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#99000000',GradientType=0 );
}
ul.si-tt-right.si-tt-black-grad li span {
	background: -moz-linear-gradient(left,  rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 100%);
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,0.6)));
	background: -webkit-linear-gradient(left,  rgba(0,0,0,1) 0%,rgba(0,0,0,0.6) 100%);
	background: -o-linear-gradient(left,  rgba(0,0,0,1) 0%,rgba(0,0,0,0.6) 100%);
	background: -ms-linear-gradient(left,  rgba(0,0,0,1) 0%,rgba(0,0,0,0.6) 100%);
	background: linear-gradient(to right,  rgba(0,0,0,1) 0%,rgba(0,0,0,0.6) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#99000000',GradientType=1 );
}
ul.si-tt-left.si-tt-black-grad li span {
	background: -moz-linear-gradient(left,  rgba(0,0,0,0.6) 0%, rgba(0,0,0,1) 100%);
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0.6)), color-stop(100%,rgba(0,0,0,1)));
	background: -webkit-linear-gradient(left,  rgba(0,0,0,0.6) 0%,rgba(0,0,0,1) 100%);
	background: -o-linear-gradient(left,  rgba(0,0,0,0.6) 0%,rgba(0,0,0,1) 100%);
	background: -ms-linear-gradient(left,  rgba(0,0,0,0.6) 0%,rgba(0,0,0,1) 100%);
	background: linear-gradient(to right,  rgba(0,0,0,0.6) 0%,rgba(0,0,0,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99000000', endColorstr='#000000',GradientType=1 );
}
ul.si-tt.si-tt-black-grad li span:after,
ul.si-tt-below-right.si-tt-black-grad li span:after,
ul.si-tt-below-center.si-tt-black-grad li span:after,
ul.si-tt-below-left.si-tt-black-grad li span:after {border-color:#000 transparent;}
ul.si-tt-right.si-tt-black-grad li span:after,
ul.si-tt-left.si-tt-black-grad li span:after {	border-color:transparent #000;}

/* Tooltip EFFECT 
------------------------------------------------------------------------------------------- */

/* Tooltip FADE Effect -------- */
ul.si-tt.si-tt-fade li span {
	transition: opacity 0.2s ease-in 0.5s, visibility 0.5s ease-in 0.5s ;
	-moz-transition: opacity 0.2s ease-in 0.5s, visibility 0.5s ease-in 0.5s ;
	-webkit-transition: opacity 0.2s ease-in 0.5s, visibility 0.5s ease-in 0.5s ;
	-o-transition: opacity 0.2s ease-in 0.5s, visibility 0.5s ease-in 0.5s ;
	}

/* Tooltip FADE with ZOOM Effect -------- */
ul.si-tt.si-tt-fadezoom li span {
	transform: scale(0.5);
	-moz-transform: scale(0.5);
	-webkit-transform: scale(0.5);
	-o-transform: scale(0.5);
	transition: opacity 0.2s ease-in 0.5s, visibility 0.5s ease-in 0.5s, transform 0.2s ease-in-out 0.5s ;
	-moz-transition: opacity 0.2s ease-in 0.5s, visibility 0.5s ease-in 0.5s, -moz-transform 0.2s ease-in-out 0.5s ;
	-webkit-transition: opacity 0.2s ease-in 0.5s, visibility 0.5s ease-in 0.5s, -webkit-transform 0.2s ease-in-out 0.5s ;
	-o-transition: opacity 0.2s ease-in 0.5s, visibility 0.5s ease-in 0.5s, -o-transform 0.2s ease-in-out 0.5s ;
	}
ul.si-tt.si-tt-fadezoom li:hover span {
	transform: scale(1);
	-moz-transform: scale(1);	
	-webkit-transform: scale(1);
	-o-transform: scale(1);
	}