@CHARSET "ISO-8859-1";

.tooltip .tooltiptext {
	display:none;
}

@media only screen and (min-width: 964px) {
	
	.tooltip {
	    position: relative;
	    display: inline-block;
	    cursor:pointer;
	}
	
	.tooltip .tooltiptext {
		display:block;
	    visibility: hidden;
	    width: 350px;
	    background-color: black;
	    color: #fff;
	    text-align: center;
	    border-radius: 6px;
	    padding: 5px 0;
	    text-transform:none;
	
	    /* Position the tooltip */
	    position: absolute;
	    z-index: 1;
	}
	
	.tooltip:hover .tooltiptext {
	    visibility: visible;
	}
	
	/* Bubble message */
	.bubble {
		position: relative;
		width: 110px;
		height: 90px;
		padding: 0px;
		background: #FFFFFF;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
		border: #F99131 solid 8px;
		right:150px;
	}
	
	
	.bubble:after {
		content: '';
		position: absolute;
		border-style: solid;
		border-width: 15px 0 15px 15px;
		border-color: transparent #FFFFFF;
		display: block;
		width: 0;
		z-index: 1;
		right: -15px;
		top: 30px;
	}
	
	.bubble:before {
		content: '';
		position: absolute;
		border-style: solid;
		border-width: 22px 0 22px 22px;
		border-color: transparent #F99131;
		display: block;
		width: 0;
		z-index: 0;
		right: -30px;
		top: 23px;
	}
}

@media only screen and (max-width: 963px) {
	.bubble {
		position: relative;
		width: 110px;
		height: 90px;
		padding: 0px;
		background: #FFFFFF;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
		border: #F99131 solid 8px;
		left:150px;
		bottom:20px;
	}
	
	.bubble:after {
		content: '';
		position: absolute;
		border-style: solid;
		border-width: 15px 15px 0;
		border-color: #FFFFFF transparent;
		display: block;
		width: 0;
		z-index: 1;
		bottom: -15px;
		left: 40px;
	}
	
	.bubble:before {
		content: '';
		position: absolute;
		border-style: solid;
		border-width: 22px 22px 0;
		border-color: #F99131 transparent;
		display: block;
		width: 0;
		z-index: 0;
		bottom: -30px;
		left: 33px;
	}
}