.zoom-image .container::after {
   display: block;
   content: "";
   clear: both;
}
 .hover-container {
   max-width: 100%;
   width: fit-content;
   cursor: none;
}
 .hover-container.align-center {
   margin: 0 auto;
}
 .hover-container.align-right {
   float: right;
}
 .hover-container a {
   cursor: none;
}
 .hover-container img {
   max-width: 100%;
   vertical-align: middle;
   z-index: 1;
   -webkit-filter: brightness(1.5);
   filter: brightness(1.5);
   opacity: 0.5;
}
 .hover-container .icon {
   right: 0;
   position: absolute;
}
 .zoom-container {
   border: 1px dotted #00487b;
   width: 14rem;
   height: 14rem;
   background: #fff;
   border-radius: 50%;
   position: absolute;
   pointer-events: none;
   transition: transform 0.25s ease, opacity 0s linear 0.25s, background 0.25s ease;
   opacity: 0;
   transform: scale(0);
   transform-origin: 50% 50%;
   overflow: hidden;
}
 .zoom-container:before {
   content: '';
   position: absolute;
   margin: auto;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   width: 100%;
   height: 100%;
   border-radius: 50%;
   display: none;
}
 .zoom-container.show {
   transform: scale(1);
   opacity: 1;
   transition: transform 0.25s ease, opacity 0s linear;
}
 .zoom-container.loading {
   background: transparent;
}
 .zoom-container.loading:before {
   display: block;
   animation: loading 0.5s ease infinite alternate;
}
 @keyframes loading {
   0% {
     transform: scale(0.1);
     box-shadow: inset 0 0 0 150px #00487b;
  }
   50% {
     transform: scale(1);
     box-shadow: inset 0 0 0 140px #00487b;
  }
   100% {
     box-shadow: inset 0 0 0 0 #00487b;
  }
}
 .zoom-container.loading .zoom-image {
   opacity: 0;
}
 .zoom-container img {
   position: absolute;
   left: 0;
   top: 0;
   transition: opacity 0.25s ease;
   max-width: fit-content !important;
}
 .initialised .hover-container img {
   -webkit-filter: none;
   filter: none;
   opacity: 1;
}
 .initialised .zoom-container img {
   -webkit-filter: none;
   filter: none;
   opacity: 1;
}