/*-----------------------------------------------------
-------------------------------------------------------
FUGU POPUP
-------------------------------------------------------
-----------------------------------------------------*/

.fugu-popup {
    /* display: none; */
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 100;
    visibility: hidden;
    opacity: 0;
    font-size: 16px;
}
.fugu-popup.active {
    /* display: block; */
    visibility: visible;
    opacity: 1;
}
.fugu-popup .fugu-popup-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,.7);
}
.fugu-popup .fugu-popup-window {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 600px;
    padding: 30px;
    max-height: 100%;
    background-color: #1E2023;
    overflow-y: scroll;
    transition: all .5s;
}
.fugu-popup.active .fugu-popup-window {
    top: 50%;
}
.fugu-popup .fugu-popup-close {
    position: absolute;
    display: block;
    top: -15px;
    right: -15px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    transition: all .5s;
}
.fugu-popup .fugu-popup-close:hover {
    transform: rotate(180deg);
}
.fugu-popup .fugu-popup-close span:before, .fugu-popup .fugu-popup-close span:after {
    content: "";
    display: block;
    position: absolute;
    height: 1px;
    width: 100%;
    background-color: #fff;
    top: 50%;
}
.fugu-popup .fugu-popup-close span:before {
    transform: translateY(-50%) rotate(45deg);
}
.fugu-popup .fugu-popup-close span:after {
    transform: translateY(-50%) rotate(-45deg);
}
.fugu-popup-content {
    text-align: center;
}
.fugu-popup .fugu-popup-close:hover span:before , .fugu-popup .fugu-popup-close:hover span:after {
    background-color: #d9cc91;
}


/*ASC ZONE*/

#asc-zone .asc-zone-window {
    height: 100%;
    max-height: 600px;
}
#asc-zone .asc-zone-close {
    top: -20px;
    right: -15px;
}
#asc-zone .asc-zone-content {
    text-align: center;
    max-height: 100%;
}
#asc-zone .zone-img {
    width: 90%;
}

/*Map*/

.map-hotspots {
    position: relative;
}
.hotspot-link {
    position: absolute;
    width: 25px;
    height: 25px;
    background-color: #000;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
#link-fugu {
    top: 38%;
    left: 44%;
}
#link-fugu-to-go {
    top: 71%;
    left: 44%;
}
.pulse-dark {
    animation: shadow-pulse-dark 1s infinite;
}

@keyframes shadow-pulse-dark {
    0% {
        box-shadow: 0 0 0 0px rgba(0,0,0,0.3);
    }

    100% {
        box-shadow: 0 0 0 20px rgba(0,0,0,0);
    }
}

/*REDIRECT POPUP*/

#redirect {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,.9);
    z-index: 100;
}
#redirect.active {
    display: block;
}
.redirect-content {
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
}
.redirect-loader span {
    width: 100px;
    height: 100px;
    border: 10px solid rgba(243, 228, 161, 0.2);
    border-top-color: #f3e4a1;
    display: inline-block;
    border-radius: 50%;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}
  
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}