.timelineContainer{
    position: relative;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    font-size: 18px;
}

.timelineLine{
    top:10px;
    position: absolute;
    width: 9px;
    height: 100%;
    background-color: #FFF;
    left: 94%;
    transform: translateX(-50%);
}

.timelineDottedLine{
    position: absolute;
    width:9px;
    height: 100%;
    background-color: #000;
    background-image: url('https://artancient.com/frieze2024/images/common/linedot-01.svg');
    background-repeat: repeat-y;
    background-size: 100%;
    left: 94%;
    transform: translateX(-50%);
}

.timeline-header{
    position: relative;
}

.timeline-header::before{
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: #fff;
    border-radius: 50%;
    right: -22px;
    top: 7px;
    transform: translateX(-50%);
}

.timeline-headerLine{
    height: 2px;
    background-color: #fff;
    width: 0%;
    margin-top: 10px;
    margin-left: 16px;
    margin-right: -10px;
}


.point-container{
    padding-bottom:100%;
    position: relative;
    width: 100%;
}

.point-container img{
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    width: 100%;
}

.point-circle{
    width:9%;
    height:9%;
    cursor: pointer !important;
}

.pc-1{ top:33%; left:4%; }
.pc-2{ top:48%; left:68%; }
.pc-3{ top:73%; left:42%; }


.pc-4{ top:53%; left:10%; }
.pc-5{ top:55%; left:83%; }
.pc-6{ top:68%; left:86%; }

.pc-7{ top:26%; left:6%; }
.pc-8{ top:35%; left:20%; }
.pc-9{ top:63%; left:43%; }

.label-container{
    cursor: pointer !important;
}

.animating{
    pointer-events: none !important;
}

.main-banner-title{
    padding-top: 20% !important;
}


#primary-banner .row.h-100 .col-12{
    justify-content: start !important;
}