/* https://www.w3schools.com/css/css_tooltip.asp */
/* Tooltip container */
.img-tooltip {
    position: relative;
    display: inline-block;
}

/* Tooltip text */
.img-tooltip .tooltiptext {
	visibility: hidden;
	width: 85vw;
	max-width: 310px;
	min-height: 100px;
    background-color: rgba(0,0,0,.8);
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    opacity: 0;
    transition: opacity .5s ease;
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 100;
}

/* Show the tooltip text when you mouse over the tooltip container */
.img-tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
.img-tooltip:hover .tooltiptext img {
	display: inline;
}

/* Tooltip on the left */
.img-tooltip .tooltiptext {
    top: -5px;
    right: 140%;
}

.img-tooltip .tooltiptext img {
	display: none;
	width: 80vw;
	max-width: 300px;
	z-index: 1;
    position: relative;
}

/* Arrow */
.img-tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 21px;
    left: 100%;
    /* To the right of the tooltip */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent rgba(0,0,0,.8);
}


@keyframes spinner {
  to {transform: rotate(360deg);}
}

.spinner:before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  margin-left: -15px;
  border-radius: 50%;
  border: 1px solid #aaa;
  border-top-color: #fff;
  animation: spinner .6s linear infinite;
}