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

}

@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: 60%;
    top: 10%;
}

#position-2 {
    left: 54%;
    top: 29%;
}

#position-3 {
    left: 25%;
    top: 59%;
}

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

#position-5 {
    left: 34%;
    top: 44%;
}

#position-6 {
    left: 20%;
    top: 71%;
}

#position-7 {
    left: 4%;
    top: 48%;
}

#position-8 {
    left: 8%;
    top: 65%;
}

#position-9 {
    left: 36%;
    top: 75%;
}

#position-10 {
    left: 51%;
    top: 48%;
}

#position-11 {
    left: 59%;
    top: 73%;
}

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

#position-13 {
    left: 79%;
    top: 35%;
}

#position-14 {
    left: 88%;
    top: 80%;
}

#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;
}