body {
    overflow: hidden;
    margin: 0;
}

#main-container {
    background-image: url("./img/map.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 1150px;
    height: 647px;
    position: relative;
    background-position: center;
    margin: auto;
}

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

.mark{
    cursor:pointer;
    position: absolute;
    min-width:30px;
    min-height:30px;
    width: 60px;
    height: 60px;
    background-size: cover;
    -webkit-animation-name: dance; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 1.3s; /* Safari 4.0 - 8.0 */
    animation-name: dance;
    animation-direction: alternate;
    animation-duration: 1.3s;
    animation-iteration-count: infinite;
}
.mark-left{
    background-image: url("./img/left.png")
}
.mark-right{
    background-image: url("./img/right.png")
}

#position-1 {
    left: 73%;
    top: 22%;
}

#position-2 {
    left: 45%;
    top: 33%;
}

#position-3 {
    left: 61%;
    top: 9%;
}

#position-4 {
    left: 38%;
    top: 5%;
}

#position-5 {
    left: 24%;
    top: 30%;
}

#position-6 {
    left: 10%;
    top: 65%;
}

#position-7 {
    left: 9%;
    top: 49%;
}

#position-8 {
    left: 28%;
    top: 59%;
}

#position-9 {
    left: 35%;
    top: 77%;
}

#position-10 {
    left: 52%;
    top: 50%;
}

#position-11 {
    left: 49%;
    top: 67%;
}

#position-12 {
    left: 66%;
    top: 66%;
}

#position-13 {
    left: 83%;
    top: 73%;
}

#position-14 {
    left: 68%;
    top: 43%;
}




#close {
    cursor: pointer;
    top:5%;
    right:3%;
    position:absolute;
    font-weight: bold;
    color:#FFF;
}

#close:hover {
    color:#CCC;
}




.modal-1 {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    visibility: hidden;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s,transform 0.5s;
    z-index: 5;
}
.modal-content-1 {
    position: absolute;
    top: 20%;
    left: 20%;
    width: 40%;
    border-radius: 1rem;
    z-index: 5;
    background-color: rgba(0, 0, 0, 0);
    filter: brightness(110%);
}
.show-modal-1 {
    opacity: 1;
    visibility: visible;
    transform: scale(1.0);
    transition: visibility 0s linear 0s, transform 0.5s;
    z-index: 5;
}



.modal-2 {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    visibility: hidden;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s,transform 0.5s;
    z-index: 5;
}
.modal-content-2 {
    position: absolute;
    top: 20%;
    left: 20%;
    width: 40%;
    border-radius: 1rem;
    z-index: 5;
    background-color: rgba(0, 0, 0, 0);
    filter: brightness(110%);
}
.show-modal-2 {
    opacity: 1;
    visibility: visible;
    transform: scale(1.0);
    transition: visibility 0s linear 0s, transform 0.5s;
    z-index: 5;
}


.modal-3 {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    visibility: hidden;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s,transform 0.5s;
    z-index: 5;
}
.modal-content-3 {
    position: absolute;
    top: 20%;
    left: 20%;
    width: 40%;
    border-radius: 1rem;
    z-index: 5;
    background-color: rgba(0, 0, 0, 0);
    filter: brightness(110%);
}
.show-modal-3 {
    opacity: 1;
    visibility: visible;
    transform: scale(1.0);
    transition: visibility 0s linear 0s, transform 0.5s;
    z-index: 5;
}


.modal-4 {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    visibility: hidden;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s,transform 0.5s;
    z-index: 5;
}
.modal-content-4 {
    position: absolute;
    top: 20%;
    left: 20%;
    width: 40%;
    border-radius: 1rem;
    z-index: 5;
    background-color: rgba(0, 0, 0, 0);
    filter: brightness(110%);
}
.show-modal-4 {
    opacity: 1;
    visibility: visible;
    transform: scale(1.0);
    transition: visibility 0s linear 0s, transform 0.5s;
    z-index: 5;
}


.modal-5 {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    visibility: hidden;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s,transform 0.5s;
    z-index: 5;
}
.modal-content-5 {
    position: absolute;
    top: 20%;
    left: 20%;
    width: 40%;
    border-radius: 1rem;
    z-index: 5;
    background-color: rgba(0, 0, 0, 0);
    filter: brightness(110%);
}
.show-modal-5 {
    opacity: 1;
    visibility: visible;
    transform: scale(1.0);
    transition: visibility 0s linear 0s, transform 0.5s;
    z-index: 5;
}


.modal-6 {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    visibility: hidden;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s,transform 0.5s;
    z-index: 5;
}
.modal-content-6 {
    position: absolute;
    top: 20%;
    left: 20%;
    width: 40%;
    border-radius: 1rem;
    z-index: 5;
    background-color: rgba(0, 0, 0, 0);
    filter: brightness(110%);
}
.show-modal-6 {
    opacity: 1;
    visibility: visible;
    transform: scale(1.0);
    transition: visibility 0s linear 0s, transform 0.5s;
    z-index: 5;
}


.modal-7 {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    visibility: hidden;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s,transform 0.5s;
    z-index: 5;
}
.modal-content-7 {
    position: absolute;
    top: 20%;
    left: 20%;
    width: 40%;
    border-radius: 1rem;
    z-index: 5;
    background-color: rgba(0, 0, 0, 0);
    filter: brightness(110%);
}
.show-modal-7 {
    opacity: 1;
    visibility: visible;
    transform: scale(1.0);
    transition: visibility 0s linear 0s, transform 0.5s;
    z-index: 5;
}


.modal-8 {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    visibility: hidden;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s,transform 0.5s;
    z-index: 5;
}
.modal-content-8 {
    position: absolute;
    top: 20%;
    left: 20%;
    width: 40%;
    border-radius: 1rem;
    z-index: 5;
    background-color: rgba(0, 0, 0, 0);
    filter: brightness(110%);
}
.show-modal-8 {
    opacity: 1;
    visibility: visible;
    transform: scale(1.0);
    transition: visibility 0s linear 0s, transform 0.5s;
    z-index: 5;
}


.modal-9 {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    visibility: hidden;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s,transform 0.5s;
    z-index: 5;
}
.modal-content-9 {
    position: absolute;
    top: 20%;
    left: 20%;
    width: 40%;
    border-radius: 1rem;
    z-index: 5;
    background-color: rgba(0, 0, 0, 0);
    filter: brightness(110%);
}
.show-modal-9 {
    opacity: 1;
    visibility: visible;
    transform: scale(1.0);
    transition: visibility 0s linear 0s, transform 0.5s;
    z-index: 5;
}


.modal-9 {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    visibility: hidden;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s,transform 0.5s;
    z-index: 5;
}
.modal-content-9 {
    position: absolute;
    top: 20%;
    left: 20%;
    width: 40%;
    border-radius: 1rem;
    z-index: 5;
    background-color: rgba(0, 0, 0, 0);
    filter: brightness(110%);
}
.show-modal-9 {
    opacity: 1;
    visibility: visible;
    transform: scale(1.0);
    transition: visibility 0s linear 0s, transform 0.5s;
    z-index: 5;
}


.modal-10 {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    visibility: hidden;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s,transform 0.5s;
    z-index: 5;
}
.modal-content-10 {
    position: absolute;
    top: 20%;
    left: 20%;
    width: 40%;
    border-radius: 1rem;
    z-index: 5;
    background-color: rgba(0, 0, 0, 0);
    filter: brightness(110%);
}
.show-modal-10 {
    opacity: 1;
    visibility: visible;
    transform: scale(1.0);
    transition: visibility 0s linear 0s, transform 0.5s;
    z-index: 5;
}


.modal-11 {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    visibility: hidden;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s,transform 0.5s;
    z-index: 5;
}
.modal-content-11 {
    position: absolute;
    top: 20%;
    left: 20%;
    width: 40%;
    border-radius: 1rem;
    z-index: 5;
    background-color: rgba(0, 0, 0, 0);
    filter: brightness(110%);
}
.show-modal-11 {
    opacity: 1;
    visibility: visible;
    transform: scale(1.0);
    transition: visibility 0s linear 0s, transform 0.5s;
    z-index: 5;
}


.modal-12 {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    visibility: hidden;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s,transform 0.5s;
    z-index: 5;
}
.modal-content-12 {
    position: absolute;
    top: 20%;
    left: 20%;
    width: 40%;
    border-radius: 1rem;
    z-index: 5;
    background-color: rgba(0, 0, 0, 0);
    filter: brightness(110%);
}
.show-modal-12 {
    opacity: 1;
    visibility: visible;
    transform: scale(1.0);
    transition: visibility 0s linear 0s, transform 0.5s;
    z-index: 5;
}


.modal-13 {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    visibility: hidden;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s,transform 0.5s;
    z-index: 5;
}
.modal-content-13 {
    position: absolute;
    top: 20%;
    left: 20%;
    width: 40%;
    border-radius: 1rem;
    z-index: 5;
    background-color: rgba(0, 0, 0, 0);
    filter: brightness(110%);
}
.show-modal-13 {
    opacity: 1;
    visibility: visible;
    transform: scale(1.0);
    transition: visibility 0s linear 0s, transform 0.5s;
    z-index: 5;
}


.modal-14 {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    visibility: hidden;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s,transform 0.5s;
    z-index: 5;
}
.modal-content-14 {
    position: absolute;
    top: 20%;
    left: 20%;
    width: 40%;
    border-radius: 1rem;
    z-index: 5;
    background-color: rgba(0, 0, 0, 0);
    filter: brightness(110%);
}
.show-modal-14 {
    opacity: 1;
    visibility: visible;
    transform: scale(1.0);
    transition: visibility 0s linear 0s, transform 0.5s;
    z-index: 5;
}