.tooltip {
    position: relative;
    display: inline-block;
}
.tooltip_top {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width:100%;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    /*z-index: 1;*/
    top:  50%;
    left: 50%;
 
    /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
    opacity: 0;
    transition: opacity 1s;
}

#tip_text{
	border: solid  #fff;
	border-width:12px; 
	margin-left:-100px;
	z-index:9999;
	position: relative; 
	width:400px;
	/*max-width:400px;*/
}

.tooltip .tooltiptext img {
	max-width:300px;
	min-width:200px;

}
.tooltip_top .tooltiptext {
    visibility: hidden;
   /* width:100%;*/
   
	max-width:100px;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top:  50%;
    left: 50%;
 
    /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
    opacity: 0;
    transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
    position: relative;
    z-index: 1;
	max-width:100px;
	z-index:9999999999;
}

.tooltip_top:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
    position: absolute;
	top:  10%;
	left: 10%;	
	z-index:999999;
}
.tooltip_top .tooltiptext img {
	max-width:100%;
	z-index:999999;
}
@media screen and (max-width:1024px) {
.tooltip_top:hover .tooltiptext {
visibility: hidden;
}	

.tooltip .tooltiptext {
    top:  10%;
    left: 10%;
}	

}
@media screen and (max-width:767px) {
#tip_text{
	margin-left:-30px;	
}
.tooltip_top:hover .tooltiptext {
visibility: hidden;
}	
}
/*@media screen and (min-width:767px) and (max-width:1440px) {
	.tooltip:hover .tooltiptext {
		position: fixed;
		top:  40%;
		left: 27%;
		max-width:500px;
	}
		
}

@media screen and (max-width:767px) {
	.tooltip:hover .tooltiptext {
	position: fixed;
    top:  50%;
    left: 7%;
	max-width:300px;
	}	
}*/