/*!
  ImageLinks - jQuery Interactive Image
  @name imagelinks.css
  @description A jQuery plugin for creating an interactive image for news, posters, albums and etc
  @version 1.3.1
  @author Max Lawrence
  @site http://www.avirtum.com
  @copyright (c) 2016 Max Lawrence (http://www.avirtum.com)
*/

.force_z-index {
    z-index: 3 !important;
}

.imgl {
    display: inline-block;
    position: relative;
    width: 100%;
}

.imgl .imgl-img {
    -webkit-animation: imagelinks-animation-trigger 0.001s;
    animation: imagelinks-animation-trigger 0.001s;
}

.imgl .imgl-img img {
    width: 100%;
}

.imgl .imgl-view {
    font-family: sans-serif;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.2;
    line-break: auto;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    white-space: normal;
    word-break: normal;
    word-spacing: normal;
    word-wrap: normal;
    position: absolute;
    outline: none;
}

.imgl .imgl-view embed,
.imgl .imgl-view iframe,
.imgl .imgl-view object,
.imgl .imgl-view video {
    margin: 0;
}

.imgl .imgl-view .imgl-hotspots {
    position: relative;
    width: 100%;
    height: 100%;
}

.imgl .imgl-view .imgl-hotspots .imgl-hotspot-custom {
    position: absolute;
    z-index: 2;
}

.imgl .imgl-view .imgl-hotspots .imgl-hotspot {
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
    z-index: 2;
}

.imgl .imgl-view .imgl-popover {
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
    position: absolute;
    top: 0px;
    left: -99999px;
    z-index: 2;
}

.imgl .imgl-view .imgl-popover.imgl-active {
    opacity: 1;
    visibility: visible;
}

.imgl .imgl-view .imgl-popover.imgl-trans {
    -webkit-transition: opacity .3s, left .3s, top .3s;
    transition: opacity .3s, left .3s, top .3s;
}

.imgl .imgl-view.imgl-hotspot-setup {
    cursor: crosshair;
}

.imgl .imgl-view.imgl-default .imgl-hotspots .imgl-hotspot {
    -webkit-animation: imagelinks-hotspot-pulse 0.7s steps(7) infinite alternate;
    animation: imagelinks-hotspot-pulse 0.7s steps(7) infinite alternate;
    width: 48px;
    height: 48px;
    background-image: url('../img/cerchi.png');
}

.imgl .imgl-view.imgl-default .imgl-popover {
    font-family: sans-serif;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.2;
    line-break: auto;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    white-space: normal;
    word-break: normal;
    word-spacing: normal;
    word-wrap: normal;
    max-width: 276px;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    font-size: 14px;
}

.imgl .imgl-view.imgl-default .imgl-popover.imgl-close .imgl-close {
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
    position: absolute;
    right: 0px;
    top: 0px;
    width: 16px;
    height: 16px;
    background-image: url('../img/close.svg');
    cursor: pointer;
    opacity: 0.4;
}

.imgl .imgl-view.imgl-default .imgl-popover.imgl-close .imgl-close:hover {
    opacity: 0.8;
}

.imgl .imgl-view.imgl-default .imgl-popover .imgl-content {
    padding: 10px;
}

.imgl .imgl-view.imgl-default .imgl-popover.imgl-close .imgl-content {
    padding: 15px;
}

.imgl .imgl-view.imgl-default .imgl-popover.imgl-popover-top {
    margin-top: -11px;
}

.imgl .imgl-view.imgl-default .imgl-popover.imgl-popover-right {
    margin-left: 11px;
}

.imgl .imgl-view.imgl-default .imgl-popover.imgl-popover-bottom {
    margin-top: 11px;
}

.imgl .imgl-view.imgl-default .imgl-popover.imgl-popover-left {
    margin-left: -11px;
}

.imgl .imgl-view.imgl-default .imgl-popover>.imgl-arrow,
.imgl .imgl-view.imgl-default .imgl-popover>.imgl-arrow:after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}

.imgl .imgl-view.imgl-default .imgl-popover>.imgl-arrow {
    border-width: 11px;
}

.imgl .imgl-view.imgl-default .imgl-popover>.imgl-arrow:after {
    content: "";
    border-width: 11px;
}

.imgl .imgl-view.imgl-default .imgl-popover.imgl-popover-top>.imgl-arrow {
    left: 50%;
    margin-left: -11px;
    border-bottom-width: 0;
    border-top-color: rgba(0, 0, 0, 0.2);
    bottom: -11px;
}

.imgl .imgl-view.imgl-default .imgl-popover.imgl-popover-top>.imgl-arrow:after {
    content: "";
    bottom: 1px;
    margin-left: -11px;
    border-bottom-width: 0;
    border-top-color: #ffffff;
}

.imgl .imgl-view.imgl-default .imgl-popover.imgl-popover-right>.imgl-arrow {
    top: 50%;
    left: -11px;
    margin-top: -11px;
    border-left-width: 0;
    border-right-color: rgba(0, 0, 0, 0.2);
}

.imgl .imgl-view.imgl-default .imgl-popover.imgl-popover-right>.imgl-arrow:after {
    content: "";
    left: 1px;
    bottom: -11px;
    border-left-width: 0;
    border-right-color: #ffffff;
}

.imgl .imgl-view.imgl-default .imgl-popover.imgl-popover-bottom>.imgl-arrow {
    left: 50%;
    margin-left: -11px;
    border-top-width: 0;
    border-bottom-color: rgba(0, 0, 0, 0.2);
    top: -11px;
}

.imgl .imgl-view.imgl-default .imgl-popover.imgl-popover-bottom>.imgl-arrow:after {
    content: "";
    top: 1px;
    margin-left: -11px;
    border-top-width: 0;
    border-bottom-color: #ffffff;
}

.imgl .imgl-view.imgl-default .imgl-popover.imgl-popover-left>.imgl-arrow {
    top: 50%;
    right: -11px;
    margin-top: -11px;
    border-right-width: 0;
    border-left-color: rgba(0, 0, 0, 0.2);
}

.imgl .imgl-view.imgl-default .imgl-popover.imgl-popover-left>.imgl-arrow:after {
    content: "";
    right: 1px;
    border-right-width: 0;
    border-left-color: #ffffff;
    bottom: -11px;
}

@-webkit-keyframes imagelinks-hotspot-pulse {
    0% {
        background-position: 0px;
    }
    100% {
        background-position: -336px;
    }
}

@keyframes imagelinks-hotspot-pulse {
    0% {
        background-position: 0px;
    }
    100% {
        background-position: -336px;
    }
}

@-webkit-keyframes imagelinks-animation-trigger {
    from {
        opacity: 0.99;
    }
    to {
        opacity: 1;
    }
}

@keyframes imagelinks-animation-trigger {
    from {
        opacity: 0.99;
    }
    to {
        opacity: 1;
    }
}