body {
    background: #ececed;
}
.flex {
    display: -webkit-flex;
    align-items: center;
    justify-content: center;
}

.map {
    height:1024px;
    width:1024px;
    margin-left:auto;
    margin-right:auto;
    justify-content: center;
}

.frame {
    position: absolute;
    display: -webkit-flex;
    width:1024px;
    height:1024px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.relFrame {
    position: relative; 
    align-items: center;
    justify-content: center;
    height:1024px;
    width:1024px;
    left:50%;
    transform: translate(-50%,0);
    height:1024px;
}

p {
    height:5.5vw;
}

.loc {
    height:26px;
    width:17px;
    cursor: pointer;
    position: absolute;
    left: 48px; /* (113 - 17) / 2 "will be substracted from given left distances" */
}

.ny {
    position: absolute;
    left: 189.5px; /* 237.5 - 48     237.5 is a distance of the small image: 230 + ((Big - Small) / 2) */
    top: 393px; /* 373 + 21 "21 is a difference from small and big image - given on inVision"  */
    width: 113px;
}

.london {
    position: absolute;
    left: 384px; /* 432 - 48 */
    top:352px;
    width:113px;
}

.bg {
    position: absolute;
    left: 446px; /* 494 - 48 */
    top: 379px;
    width:113px;
}

.tokyo {
    position: absolute;
    left: 788px; /* 836 - 48 */
    top: 402px;
    width:113px;
}

.sydney {
    position: absolute;
    left: 820px; /* 868 - 48 */
    top:621px;
    width:113px;
}

.display {
    text-align: center;
    height:66px;
    width:113px;
    background:rgba(35,35,35,0.95);
    border-radius: 0.3rem;
    transform: translateY(13px); /* 5 + 8 "8px is a space between location image and time display" */
    margin-right:auto;
    display: none;
}

.display>p:nth-child(1) {
    text-align: center;
    height: 23px;
    width: 88px;
    color: #F8F8F8;
    font-family: Helvetica Neue, sans-serif;
    font-size: 20px;
    line-height: 24px;
    padding-top:6px;
    margin-left:auto;
    margin-right:auto;
}

.time {
    color: #B3FBEE;
    font-family: Helvetica Neue, sans-serif;
    font-size: 28px;
    line-height: 34px;
    height: 33px;
    width: 71px;
    margin-left:auto;
    margin-right:auto;
    margin-top:0px;
    transform: translate(0%,-20px);
}

.bigger {
    transition:0.1s;
    height:47px;
    width:32px;
    transform: translate(-7px,-21px);
}

.bigger2 {
    transition:0.1s;
    height:47px;
    width:32px;
    transform: translate(-7px,-21px);
}

.ny, .london, .bg, .tokyo, .sydney {
    display: none;
    -webkit-animation: show 2s;
}

@-webkit-keyframes show {
	0% {
        opacity: 0;
	}
	50%{
        opacity: 0.5;
    }
    50%{
        opacity: 1
	}
}