/* TOOLTIPS - SCRITTE AL CLICK DEL MOUSE */

/* QUADRATINO ex-LI */
.livemusic::before, 
.composition::before, 
.arranger::before, 
.producer::before, 
.sideman::before, 
.recmix::before 
{	content: "\25A0 ";
	font-size: 73%;
	margin-right: 10px;
	margin-left: -22px;
	position: relative; 
	bottom: 2px;
}
/* COLORE LISTA HOVER */
.livemusic:hover, 
.composition:hover, 
.arranger:hover, 
.producer:hover, 
.sideman:hover, 
.recmix:hover 
{
	color: #E6AC27;
}

/* ID to CALL the JAVASCRIPT*/
#tooltip1, 
#tooltip2, 
#tooltip3, 
#tooltip4, 
#tooltip5, 
#tooltip6 
{
  	background-color: FFD90B;
}

/* NECESSARIO PER POSIZIONARE TOOLTIP-TEXT */
.livemusic, 
.composition, 
.arranger, 
.producer, 
.sideman, 
.recmix 
{
	position: relative;
    display: inline-block;
    cursor: pointer;
} 

/* ATTRIBUTI COMUNI TOOLTIP-TEXT */
.livemusic .tooltip-text1, 
.composition .tooltip-text2, 
.arranger .tooltip-text3, 
.producer .tooltip-text4,
.sideman .tooltip-text5, 
.recmix .tooltip-text6 
{
	visibility: hidden;
	background-color: #FFD90B;
  	color: #163f75;
  	font-size: 70% !important;
	font-style: normal;
	text-align: center;
	position: absolute;
  	border-radius: 4px;
  	padding: 1px 1px 1px 1px;
    /* opacity: 1; /* occhio, IF 0, allora SPARISCONO i box! */
    transition: opacity 0.7s;
    z-index: 1;
}

/* POSIZIONI INDIVIDUALI TOOLTIP-TEXT */
.livemusic .tooltip-text1 {
	bottom: -10px;
  	left: 108%;
  	width: 344px !important;
}
.composition .tooltip-text2 {
	bottom: -36px;
  	left: 114%;
  	width: 420px !important;
}
.arranger .tooltip-text3 {
	bottom: -53px;
  	left: 114%;
  	width: 420px !important;
}
.producer .tooltip-text4 {
	bottom: -74px;
  	left: 102.8%;
  	width: 300px !important;
}
.sideman .tooltip-text5 {
	bottom: -70px;
  	left: 107%;
  	width: 380px !important;
}
.recmix .tooltip-text6 {
	bottom: -53px;
  	left: 104%;
  	width: 365px !important;
}

/* VISIBILITÀ per JScript */
.livemusic .show, 
.composition .show, 
.arranger .show, 
.producer .show, 
.sideman .show, 
.recmix .show
{	
	visibility: visible;
}

/* Le due nuove CLASSI AGGIUNTE per implementare nuovo js di tipo toggle !!!!! */	
.popuptext.show {
	display: block; 
}
.popuptext {
  	display: none;
}

/* ARROW (triangolo) - COMMON */
.tooltip-text1::before, 
.tooltip-text2::before, 
.tooltip-text3::before, 
.tooltip-text4::before, 
.tooltip-text5::before, 
.tooltip-text6::before 
{
    content: '';
    position: absolute;
    left: -8.9px; /* Horizontal shift triangle */
    transform: translateY(-50%);
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #FFD90B; 
		rotate: 180deg;
}

/* ARROW (triangolo) - INDIVID. */
.tooltip-text1::before {
    top: 20%;
}
.tooltip-text2::before {
    top: 36%;
}
.tooltip-text3::before {
    top: 35%;
}
.tooltip-text4::before {
    top: 42%;
}
.tooltip-text5::before {
    top: 37%;
}
.tooltip-text6::before {
    top: 36%;
}

/* TOOLTIPS - COMPARSA CON MOUSE HOVER, con codice CSS ONLY, in pratica potrebbe sostituire JScript */
/*.livemusic:hover .tooltip-text1, 
.composition:hover .tooltip-text2, 
.arranger:hover .tooltip-text3, 
.producer:hover .tooltip-text4, 
.sideman:hover .tooltip-text5, 
.recmix:hover .tooltip-text6
{
	visibility: visible;
	opacity: 1;
} */
/* affinchè sia visibile, bisogna eliminare class: popuptext dallo span del tip */



/* ----------------------------------------------------------------------- */


/* VARIABILI PER SMARTPHONE - 
On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */

@media (max-width: 640px) 

{

/* DIMENSIONE + POSIZIONE FISSA su Smartph. TOOLTIP-TEXT gruppo A */
.livemusic .tooltip-text1 {
	position: absolute;
	width: 300px !important;
	bottom: 30px;
  	left: -48px;
	}
.composition .tooltip-text2 {
	position: absolute;
	width: 300px !important;
	bottom: 13px;
  	left: -48px;
	}
.arranger .tooltip-text3 {
	position: absolute;
	width: 300px !important;
	bottom: -5px;
  	left: -48px;
	}
/* DIMENSIONE + POSIZIONE FISSA su Smartph. TOOLTIP-TEXT gruppo B */
.producer .tooltip-text4 {
	position: absolute;
	width: 300px !important;
	bottom: 96px;
  	left: -48px;
	}
.sideman .tooltip-text5 {
	position: absolute;
	width: 300px !important;
	bottom: 28px;
  	left: -48px;
	}
.recmix .tooltip-text6 {
	position: absolute;
	width: 300px !important;
	bottom: 73px;
  	left: -48px;
	}
/* ARROW (triangolo) su Smartphone, attualmente non usato, HIDDEN */
.tooltip-text1::before, 
.tooltip-text2::before, 
.tooltip-text3::before, 
.tooltip-text4::before, 
.tooltip-text5::before, 
.tooltip-text6::before {
    content: '';
    position: absolute;
    top: 200%;
    left: 100%; /* Sposta il triangolo */
    transform: translateX(-50%);
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #FFD90B; 
		rotate: 270deg;
		display: none;
}


	
}

/* FINE */