@charset "utf-8";
/* CSS Document */

body{
    margin: 0;
    padding: 0;
}
html, body {
    background-color: #010b1f;
}


*{
    box-sizing: border-box;
}

.main-wrapper{
    position: relative;
    opacity: 0;
}
.main-wrapper:before{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 12%;
    content: '';
    display: block;
    background: #010B1F;
    background: linear-gradient(180deg, rgba(1, 11, 31, 1) 0%, rgba(1, 11, 31, 0) 100%);
    pointer-events: none;
    z-index: 1;
}
.main-wrapper:after{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 12%;
    content: '';
    display: block;
    background: #010B1F;
    background: linear-gradient(0deg, rgba(1, 11, 31, 1) 0%, rgba(1, 11, 31, 0) 100%);
    pointer-events: none;
    z-index: 1;
}
body.mobile-active .main-wrapper:before, body.mobile-active .main-wrapper:after{
    position: absolute;
    height: 75px;
}

#map{
    position: relative;
    overflow: hidden;
}
#map .map-image{
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
}

.card-button, .map-link{
    position: absolute;
    left: 50%;
    top: 50%;
    height: 10%;
    width: 15%;
    z-index: 2;
    cursor: pointer;
    display: block;
}

/* Desktop card buttons */
.desktop-map .card-button.card_crypt-of-consistency{
    left: 55.5%;
    top: 51.25%;
    width: 30%;
    height: 8.2%;
}
.desktop-map .card-button.card_dungeon-of-data{
    left: 66.5%;
    top: 41.5%;
    width: 23%;
    height: 6.2%;
}
.desktop-map .card-button.card_graveyard-of-lost-leads{
    left: 51.5%;
    top: 63.25%;
    width: 30%;
    height: 7.2%;
}
.desktop-map .card-button.card_hall-of-invisible-buyers{
    left: 25.5%;
    top: 54.25%;
    width: 26%;
    height: 8.4%;
}
.desktop-map .card-button.card_laboratory-of-experiments{
    left: 45.5%;
    top: 33.25%;
    width: 25%;
    height: 7.5%;
}
.desktop-map .card-button.card_library-of-lost-leads{
    left: 5.5%;
    top: 37.25%;
    width: 28%;
    height: 10.6%;
}
.desktop-map .card-button.card_mirror-of-positioning{
    left: 12.5%;
    top: 64.25%;
    width: 21%;
    height: 9.2%;
}
.desktop-map .card-button.card_relection-roundtable{
    left: 9.5%;
    top: 26.25%;
    width: 31%;
    height: 8.2%;
}
.desktop-map .card-button.card_tower-of-the-time-vampires{
    left: 57.5%;
    top: 25.25%;
    width: 30%;
    height: 6.75%;
}
/* map links */
.desktop-map .map-link_join-the-gma{
    left: 37.5%;
    top: 15.25%;
    width: 11.5%;
    height: 6%;
}
.desktop-map .map-link_cs1{
    left: 45.5%;
    top: 44.5%;
    width: 6.5%;
    height: 7%;
}
.desktop-map .map-link_cs2{
    left: 43.75%;
    top: 63.75%;
    width: 4.75%;
    height: 7%;
}




/* Mobile card buttons */
.mobile-map .card-button.card_crypt-of-consistency{
    left: 5.5%;
    top: 55.25%;
    width: 80%;
    height: 4.2%;
}
.mobile-map .card-button.card_dungeon-of-data{
    left: 10.5%;
    top: 35.5%;
    width: 83%;
    height: 4.2%;
}
.mobile-map .card-button.card_graveyard-of-lost-leads{
    left: 1.5%;
    top: 72.25%;
    width: 90%;
    height: 5.2%;
}
.mobile-map .card-button.card_hall-of-invisible-buyers{
    left: 3.5%;
    top: 64.25%;
    width: 89%;
    height: 4.4%;
}
.mobile-map .card-button.card_laboratory-of-experiments{
    left: 4.5%;
    top: 27.25%;
    width: 86%;
    height: 5.5%;
}
.mobile-map .card-button.card_library-of-lost-leads{
    left: 18.5%;
    top: 45.25%;
    width: 76%;
    height: 6%;
}
.mobile-map .card-button.card_mirror-of-positioning{
    left: 29.5%;
    top: 80.25%;
    width: 65%;
    height: 5.5%;
}
.mobile-map .card-button.card_relection-roundtable{
    left: 20.5%;
    top: 10.25%;
    width: 74%;
    height: 5.5%;
}
.mobile-map .card-button.card_tower-of-the-time-vampires{
    left: 17.5%;
    top: 18.25%;
    width: 75%;
    height: 5.75%;
}
/* map links */
.mobile-map .map-link_join-the-gma{
    left: 13.5%;
    top: 4.25%;
    width: 31.5%;
    height: 4%;
}
.mobile-map .map-link_cs1{
    left: 67.5%;
    top: 17.5%;
    width: 14%;
    height: 2.5%;
}
.mobile-map .map-link_cs2{
    left: 46.5%;
    top: 40.25%;
    width: 9.75%;
    height: 3%;
}



.card-popup{
    display: none;
    width: 500px;
    max-width: 100%;
}
.card-popup > img{
    max-width: 100%;
    width: 100%;
    height: auto;
}

.card-popup .action-button{
    position: absolute;
    left: 40%;
    bottom: 0%;
    width: 24%;
    height: 17%;
    z-index: 1;
}
.card-popup#card_crypt-of-consistency .action-button{
    
}

@keyframes floatUpDown {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes floatUpDown2 {
  0% {
    transform: translateY(-20px);
  }
  50% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-20px);
  }
}


#map .animation{
    border-width: 0;
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10%;
    height: 10%;
    background-color: transparent;
    background: none;
    pointer-events: none;
}
#map .animation.floating{
    animation: floatUpDown 4s ease-in-out infinite;
}
#map .animation.floating2{
    animation: floatUpDown2 4s ease-in-out infinite;
}

/* desktop animations */
#map.desktop-map .animation.torture-wheel{
    left: 69%;
    top: 38.8%;
    width: 8.2%;
    height: 6%;
}
#map.desktop-map .animation.torch1{
    left: 37.7%;
    top: 27.85%;
    width: 7.2%;
    height: 6%;
    transform: rotate(-15deg);
}
#map.desktop-map .animation.torch2{
    left: 59.9%;
    top: 27.85%;
    width: 7.2%;
    height: 6%;
    transform: rotate(26deg);
}
#map.desktop-map .animation.torch3{
    left: 70.6%;
    top: 33.85%;
    width: 7.2%;
    height: 6%;
    transform: rotate(-15deg);
}
#map.desktop-map .animation.torch4{
    left: 74.7%;
    top: 46.2%;
    width: 7.2%;
    height: 6%;
}
#map.desktop-map .animation.torch5{
    left: 7.2%;
    top: 63.4%;
    width: 7.2%;
    height: 6%;
    transform: rotate(-8deg);
}
#map.desktop-map .animation.torch6{
    left: 18.8%;
    top: 61.8%;
    width: 7.2%;
    height: 6%;
    transform: rotate(1deg);
}
#map.desktop-map .animation.torch7{
    left: 61.4%;
    top: 58.8%;
    width: 7.2%;
    height: 6%;
    transform: rotate(1deg);
}
#map.desktop-map .animation.bat1{
    left: 23.7%;
    top: 2.85%;
    width: 6.2%;
    height: 3%;
    transform: rotate(-15deg);
}
#map.desktop-map .animation.bat2{
    left: 26.7%;
    top: 5.5%;
    width: 5.2%;
    height: 2%;
    transform: rotate(4deg);
}
#map.desktop-map .animation.bat3{
    left: 85.2%;
    top: 4.3%;
    width: 5.2%;
    height: 2%;
    transform: rotate(13deg);
}
#map.desktop-map .animation.tree-bat1{
    left: 72.2%;
    top: 79.6%;
    width: 1%;
    height: 1%;
}
#map.desktop-map .animation.tree-bat2{
    left: 88.2%;
    top: 28.7%;
    width: 1%;
    height: 1%;
}
#map.desktop-map .animation.gate{
    left: 38.7%;
    top: 65.6%;
    width: 22%;
    height: 27%;
}
#map.desktop-map .animation.silhouettes{
    left: 25.5%;
    top: 53.5%;
    width: 13.3%;
    height: 7%;
    opacity: 0.7;
}
#map.desktop-map .animation.fumes{
    left: 59.25%;
    top: 24.5%;
    width: 2.3%;
    height: 9%;
}
#map.desktop-map .animation.vampire-eyes{
    left: 75.9%;
    top: 18.9%;
    width: 2%;
    height: 1.62%;
}


/* mobile animations */
#map.mobile-map .animation.torture-wheel{
    left: 11%;
    top: 35.95%;
    width: 26.2%;
    height: 3.5%;
}
#map.mobile-map .animation.torch1{
    left: 25.6%;
    top: 23.65%;
    width: 16.2%;
    height: 9%;
    transform: rotate(-15deg);
}
#map.mobile-map .animation.torch2{
    left: 81.3%;
    top: 24.1%;
    width: 17.2%;
    height: 8%;
    transform: rotate(26deg);
}
#map.mobile-map .animation.torch3{
    left: 19.6%;
    top: 32.75%;
    width: 18.2%;
    height: 6%;
    transform: rotate(-15deg);
}
#map.mobile-map .animation.torch4{
    display: none !important;
}
#map.mobile-map .animation.torch5{
    left: 79%;
    top: 69.1%;
    width: 20.2%;
    height: 6%;
    transform: rotate(4deg);
}
#map.mobile-map .animation.torch6{
    left: 18.8%;
    top: 78.8%;
    width: 21.2%;
    height: 6%;
    transform: rotate(-6deg);
}
#map.mobile-map .animation.torch7{
    left: 48.4%;
    top: 78.5%;
    width: 21.2%;
    height: 6%;
    transform: rotate(5deg);
}
#map.mobile-map .animation.bat1{
    left: 21.7%;
    top: 0.8%;
    width: 17.2%;
    height: 1%;
}
#map.mobile-map .animation.bat2{
    left: 31.7%;
    top: 1.35%;
    width: 12.2%;
    height: 1%;
}
#map.mobile-map .animation.bat3{
    left: 75.2%;
    top: 2%;
    width: 13.2%;
    height: 1%;
}
#map.mobile-map .animation.tree-bat1,
#map.mobile-map .animation.tree-bat2{
    display: none !important;
}
#map.mobile-map .animation.gate{
    left: 25.7%;
    top: 79.3%;
    width: 49%;
    height: 27%;
}
#map.mobile-map .animation.silhouettes{
    left: 54.1%;
    top: 62.8%;
    width: 34%;
    height: 7%;
    opacity: 0.7;
}
#map.mobile-map .animation.fumes{
    left: 80.25%;
    top: 25.1%;
    width: 3.3%;
    height: 5%;
}
#map.mobile-map .animation.vampire-eyes{
    left: 36.2%;
    top: 17.8%;
    width: 4%;
    height: 2.62%;
    transform: rotate(9deg);
}



.f-html {
    padding: 0;
    background: none;
}



@media (max-width:480px){
    #map {
        margin-top: 40px;
    }
    body.mobile-active .main-wrapper:before {
        position: absolute;
        height: 50px;
    }
}