
@import url(//fonts.googleapis.com/css?family=PT+Sans);


/*Tip styles*/
.jqeasytooltip{ cursor: pointer; }
img.jqeasytooltip{transition:all 0.5s; -webkit-transition:all 0.5s;}
img.jqeasytooltip:hover{ opacity: 0.3;}
.jqeasytooltip:hover{ }


/*Tip Positions*/
*[class*="tiptheme"]{  color:#000 !important; font-family: 'PT Sans' !important; font-size: 19px !important; text-shadow:1px 1px 0 #ccc !important;  box-shadow: 0 0 5px rgba(0,0,0,0.5), 0 1px 0 #ededed inset;   padding:15px !important; border-radius: 5px;  display: inline-block; position: absolute; z-index: 9999;}
*[class*="tiptheme"] *:not(i){ color:#000 !important; font-family: 'PT Sans' !important;  font-size: 12px !important;}
*[class*="tiptheme"] h1{ font-size:19px !important;}

/*Tip themes*/


/*Color themes*/


/*scuare*/
*[class*="tipthemesquare"]{  box-shadow: none !important; text-shadow:none !important; border-radius: 0 !important; }
.tipthemesquareblack{color:#fff !important; background: #333; border:1px solid #fff;}
.tipthemesquareblack:before{border-color: #fff !important; }
.tipthemesquareblack:after{border-color: #333 !important; }
.tipthemesquarewhite{color:#000 !important;  background: #fff; border:1px solid #000;}
.tipthemesquarewhite:before{border-color: #000 !important; }
.tipthemesquarewhite:after{border-color: #fff !important; }
.tipthemesquaregreen{color:#000 !important;  background: #22E087; border:1px solid #000;}
.tipthemesquaregreen:before{border-color: #000 !important; }
.tipthemesquaregreen:after{border-color: #22E087 !important; }
.tipthemesquarered{color:#fff !important;  background: #F62550; border:1px solid #000;}
.tipthemesquarered:before{border-color: #000 !important; }
.tipthemesquarered:after{border-color: #F62550 !important; }
.tipthemesquareblue{color:#fff !important;  background: #2294E0; border:1px solid #000;}
.tipthemesquareblue:before{border-color: #000 !important; }
.tipthemesquareblue:after{border-color: #2294E0 !important; }
.tipthemesquareorange{color:#000 !important;  background: #FF9127; border:1px solid #000;}
.tipthemesquareorange:before{border-color: #000 !important; }
.tipthemesquareorange:after{border-color: #FF9127 !important; }
.tipthemesquareyellow{color:#000 !important;  background: #FFE727; border:1px solid #000;}
.tipthemesquareyellow:before{border-color: #000 !important; }
.tipthemesquareyellow:after{border-color: #FFE727 !important; }
.tipthemesquarepurple{color:#fff !important;  background: #D321CE; border:1px solid #000;}
.tipthemesquarepurple:before{border-color: #000 !important; }
.tipthemesquarepurple:after{border-color: #D321CE !important; }

/*Solid*/
.thipthemeblue,.tipthemeorange,.tipthemered,.tipthemeblue,.tipthemepurple{color:#fff !important;text-shadow:1px 1px 0 #666 !important; }
.tipthemegreen{ background: #8CC354; border: 1px solid #4B7026;}
.tipthemegreen:before{border-color: #4B7026 !important; }
.tipthemegreen:after{border-color: #8CC354 !important; }
.tipthemeyellow{ background: #C8CF59; border: 1px solid #737829;}
.tipthemeyellow:before{border-color: #737829 !important; }
.tipthemeyellow:after{border-color: #C8CF59 !important; }
.tipthemeblue{ background: #506ABB; border: 1px solid #24346A;}
.tipthemeblue:before{border-color: #24346A !important; }
.tipthemeblue:after{border-color: #506ABB !important; }
.tipthemeorange{ background: #D3915A; border: 1px solid #7A4F29;}
.tipthemeorange:before{border-color: #7A4F29 !important;}
.tipthemeorange:after{border-color: #D3915A !important;}
.tipthemepurple{ background: #7050BB; border: 1px solid #3B246A;}
.tipthemepurple:before{border-color: #3B246A !important;}
.tipthemepurple:after{border-color: #7050BB !important;}
.tipthemered{ background: #D3675A; border: 1px solid #7A3429;}
.tipthemered:before{border-color: #7A3429 !important;}
.tipthemered:after{border-color: #D3675A !important;}
.tipthemeblack{ background: #333333; border: 1px solid #000000; color: #fff !important; text-shadow:1px 1px 0 #000 !important;}
.tipthemeblack:before{border-color: #000000 !important;}
.tipthemeblack:after{border-color: #333333 !important;}
.tipthemewhite{ background: #fff; border: 1px solid #000;}
.tipthemewhite:before{border-color: #000 !important; }
.tipthemewhite:after{border-color: #fff !important; }


/*Comic*/
.tipthemecomicwhite{ font-style: italic; border-radius: 100% / 99%; padding: 15px;  background: #fff; border: 4px solid #000; box-shadow: -10px -10px 10px #ccc inset, 0 0 5px rgba(0,0,0,0.5);}
.tipthemecomicwhite:before{border-color: #000 !important; border-width: 10px !important; }
.tipthemecomicblue{ color:#fff !important; text-shadow:1px 1px 0 #000 !important;  border-radius: 100% / 99%; padding: 15px;  background: #3674FF; border: 4px solid #fff; box-shadow: -10px -10px 10px #2756BA inset, 0 0 5px rgba(0,0,0,0.5);}
.tipthemecomicblue:before{border-color: #fff !important;}
.tipthemecomicyellow{ color:#000 !important;   border-radius: 100% / 99%; padding: 15px;  background: #F1F489; border: 4px solid #fff; box-shadow: -10px -10px 10px #D6D979 inset, 0 0 5px rgba(0,0,0,0.5);}
.tipthemecomicyellow:before{border-color: #fff !important;}



/*defaulttheme*/
.tiptheme{ color:#fff !important; text-shadow:1px 1px 0 #666 !important; border: 1px solid #000; border-radius: 0; background: #29A9FF; box-shadow: none !important;}
.tiptheme:before{border-color: #000 !important; }
.tiptheme:after{border-color: #29A9FF !important; }

/*tip arrows*/
.tiptop:before, .tiptop:after { content: ''; border-width: 10px; display: inline-block; border-style: solid; border-color:inherit; border-right-color: transparent !important; border-bottom-color: transparent !important; border-left-color: transparent !important; position: absolute; right: 50%;transform:translateX(10px); -webkit-transform:translateX(10px); top:100%; margin-left: 20px;}
.tiptop:after{ margin-top: -1px;}
.tipright:before, .tipright:after 	{ content: ''; border-width: 10px; display: inline-block; border-style: solid; border-color:inherit; border-top-color: transparent !important; border-bottom-color: transparent !important; border-left-color: transparent !important; position: absolute; right: 100%; bottom: 50%; transform:translateY(10px); -webkit-transform:translateY(10px);}
.tipright:after{ margin-right: -1px; }
.tipbottom:before, .tipbottom:after 	{ content: ''; border-width: 10px; display: inline-block; border-style: solid; border-color:inherit; border-top-color: transparent !important; border-right-color: transparent !important; border-left-color: transparent !important; position: absolute; right: 50%; transform:translateX(10px); -webkit-transform:translateX(10px); bottom: 100%; margin-left: 20px;}
.tipbottom:after{ margin-bottom: -1px;}
.tipleft:before, .tipleft:after 		{ content: ''; border-width: 10px; display: inline-block; border-style: solid; border-color:inherit; border-top-color: transparent !important; border-right-color: transparent !important; border-bottom-color: transparent !important; position: absolute; left: 100%; bottom: 50%; transform:translateY(10px); -webkit-transform:translateY(10px);}
.tipleft:after{ margin-left: -1px; }




/*Animations for open close*/

.swingX{animation:swingX 0.8s; opacity:1; -webkit-animation:swingX 0.8s; opacity:1; }
@keyframes swingX{
	0%{ transform: perspective(4000px) rotateX(-80deg); }
	40%{ transform: perspective(4000px) rotateX(80deg); }
	60%{ transform: perspective(4000px) rotateX(-45deg); }
	85%{ transform: perspective(4000px) rotateX(25deg); }
	100%{ transform: perspective(4000px) rotateX(0deg); }
}
@-webkit-keyframes swingX{
	0%{ -webkit-transform: perspective(4000px) rotateX(-80deg); }
	40%{ -webkit-transform: perspective(4000px) rotateX(80deg); }
	60%{ -webkit-transform: perspective(4000px) rotateX(-45deg); }
	85%{ -webkit-transform: perspective(4000px) rotateX(25deg); }
	100%{ -webkit-transform: perspective(4000px) rotateX(0deg); }
}


.swingXclose{animation:swingXclose 0.5s; opacity:0; -webkit-animation:swingXclose 0.5s; opacity:0;}
@keyframes swingXclose{
	0%{ transform: perspective(4000px) rotateX(0deg);opacity:1;  }
	100%{ transform: perspective(4000px) rotateX(80deg); }
}
@-webkit-keyframes swingXclose{
	0%{ -webkit-transform: perspective(4000px) rotateX(0deg);opacity:1;  }
	100%{ -webkit-transform: perspective(4000px) rotateX(80deg); }
}
.swingY{animation:swingY 0.8s; opacity:1; -webkit-animation:swingY 0.8s; opacity:1; }
@keyframes swingY{
	0%{ transform: perspective(4000px) rotateY(-80deg); }
	40%{ transform: perspective(4000px) rotateY(80deg); }
	60%{ transform: perspective(4000px) rotateY(-45deg); }
	85%{ transform: perspective(4000px) rotateY(25deg); }
	100%{ transform: perspective(4000px) rotateY(0deg); }
}
@-webkit-keyframes swingY{
	0%{ -webkit-transform: perspective(4000px) rotateY(-80deg); }
	40%{ -webkit-transform: perspective(4000px) rotateY(80deg); }
	60%{ -webkit-transform: perspective(4000px) rotateY(-45deg); }
	85%{ -webkit-transform: perspective(4000px) rotateY(25deg); }
	100%{ -webkit-transform: perspective(4000px) rotateY(0deg); }
}
.swingYclose{animation:swingYclose 0.5s; opacity:0; -webkit-animation:swingYclose 0.5s; opacity:0;}
@keyframes swingYclose{
	0%{ transform: perspective(4000px) rotateY(0deg);opacity:1;  }
	100%{ transform: perspective(4000px) rotateY(80deg); }
}
@-webkit-keyframes swingYclose{
	0%{ -webkit-transform: perspective(4000px) rotateY(0deg); opacity:1;  }
	100%{ -webkit-transform: perspective(4000px) rotateY(80deg); }
}

.tiptop.swingX, .tiptop.swingXclose{ transform-origin:50% 100%; -webkit-transform-origin:50% 100%;}
.tipbottom.swingX, .tipbottom.swingXclose{ transform-origin:50% 0%; -webkit-transform-origin:50% 0%;}
.tipright.swingY, .tipright.swingYclose{ transform-origin:0% 50%; -webkit-transform-origin:0% 50%;}
.tipleft.swingY, .tipleft.swingYclose{ transform-origin:100% 50%; -webkit-transform-origin:100% 50%;}



.glow{ animation:glow 0.5s; opacity:1;  -webkit-animation:glow 0.5s;}
@keyframes glow{
	0%{ transform:scale(0.3,0.3); opacity:0;}
	50%{ transform:scale(0.95,0.95); }
	75%{ transform:scale(0.90,0.90); }
	100%{transform:scale(1.0,1.0);  opacity:1;}
}
@-webkit-keyframes glow{
	0%{-webkit-transform:scale(0.3,0.3); opacity:0;}
	50%{ -webkit-transform:scale(0.95,0.95); }
	75%{ -webkit-transform:scale(0.90,0.90); }
	100%{-webkit-transform:scale(1.0,1.0);  opacity:1;}
}
.glowclose{ animation:glowclose 0.3s; opacity:0;-webkit-animation:glowclose 0.3s;}
@keyframes glowclose{
	0%{transform:scale(1,1);opacity:1; }
	50%{ transform:scale(1.1,1.1); opacity:1; }
	100%{transform:scale(0.5,0.5);opacity:0; }
}
@-webkit-keyframes glowclose{
	0%{-webkit-transform:scale(1,1);opacity:1; }
	50%{ -webkit-transform:scale(1.1,1.1); opacity:1; }
	100%{-webkit-transform:scale(0.5,0.5);opacity:0; }
}


.swingZ{ animation:swingZ 0.8s; opacity: 1; -webkit-animation:swingZ 0.8s; }
@keyframes swingZ{
	0%{ opacity: 0;  transform: scale(0.8,0.8) rotateZ(-45deg); opacity: 0.5; }
	60%{ opacity: 1; transform: scale(1,1) rotateZ(20deg); }
	80%{ opacity: 1; transform: scale(1,1) rotateZ(-20deg); }
	100%{ opacity: 1; transform: scale(1,1) rotateZ(10deg); }
}
@-webkit-keyframes swingZ{
	0%{ opacity: 0;  -webkit-transform: scale(0.8,0.8) rotateZ(-45deg); opacity: 0.5; }
	60%{ opacity: 1; -webkit-transform: scale(1,1) rotateZ(20deg); }
	80%{ opacity: 1; -webkit-transform: scale(1,1) rotateZ(-20deg); }
	100%{ opacity: 1; -webkit-transform: scale(1,1) rotateZ(10deg); }
}
.swingZclose{ animation:swingZclose 0.8s; opacity: 0; -webkit-animation:swingZclose 0.8s;  }
@keyframes swingZclose{
	0%{ opacity: 1;  transform: scale(1,1) rotateZ(0deg); }
	60%{ opacity: 1; transform: scale(1,1) rotateZ(-20deg); }
	100%{ opacity: 0; transform: scale(0.8,0.8)rotateZ(45deg);  }
}
@-webkit-keyframes swingZclose{
	0%{ opacity: 1;  -webkit-transform: scale(1,1) rotateZ(0deg); }
	60%{ opacity: 1; -webkit-transform: scale(1,1) rotateZ(-20deg); }
	100%{ opacity: 0; -webkit-transform: scale(0.8,0.8) rotateZ(45deg);  }
}
.tiptop.swingZ, .tiptop.swingZclose{ transform-origin:50% 105%; -webkit-transform-origin:50% 105%;}
.tipright.swingZ, .tipright.swingZclose{ transform-origin:-5% 50%; -webkit-transform-origin:-5% 50%;}
.tipbottom.swingZ, .tipbottom.swingZclose{ transform-origin:50% -5%; -webkit-origin:50% -5%;}
.tipleft.swingZ, .tipleft.swingZclose{ transform-origin:105% 50%; -webkit-transform-origin:105% 50%;}

/*Default*/
.tipopen{-webkit-animation:appear 0.5s; animation:appear 0.5s;}
@keyframes appear{
	0%{ opacity: 0; transform-origin:50% 100%; transform: scale(0.5,0.5) perspective(4000px) rotateX(90deg);}
	100%{ opacity: 1; transform: scale(1,1) perspective(4000px) rotateX(0deg);}
}
@-webkit-keyframes appear{
	0%{ opacity: 0; -webkit-transform: scale(0,0);}
	100%{ opacity: 1; -webkit-transform: scale(1,1);}
}


.tipclose{-webkit-animation:disappear 0.5s; animation:disappear 0.5s; opacity: 0;}
@keyframes disappear{
	0%{ opacity: 1;  transform: scale(1,1) }
	100%{ opacity: 0; transform: scale(0,0) }
}
@-webkit-keyframes disappear{
	0%{ opacity: 1; -webkit-transform: scale(1,1);}
	100%{  opacity: 0; -webkit-transform: scale(0,0);}
}




/*tip icons*/

/**[class*="tipicon"]{ background-repeat: no-repeat !important; background-position: 15px center; padding-left: 45px !important;}*/
*[class*="tipicon"] i{margin:0 15px 0px 0;vertical-align: middle;position: relative;}

.tipthemesquarewhite{font-size: 13px !important;}
