.page-celebrate-with-us-130-years-of-trucking .row.my-5.align-items-center {
    margin-top: 0 !important;
}

.hotspotcontainer {
    position: relative;
    overflow: hidden;
}

.hotspot-image {
    position: relative;
    height: auto;
}

.hotspotcontainer img {
    width: 100%;
    height: auto;
}

.hotspot-con {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}

.hotspot-modal-con {
    position: absolute;
    top: 0;
    left: 0;
    width: 35%;
    height: 100%;
    opacity: 2.2;
    background: rgba(255, 255, 255, 0.85);
    z-index: 10;
    box-shadow: 0 2px 10px rgba(18 16 16 / 20%);
    transition: opacity 0.3s ease;
    overflow: auto;
    max-height: 100%;
    backdrop-filter: blur(10px);
    scrollbar-width: thin;
    transform: translateX(-150%);
    transition: transform 0.4s ease-in-out;
    z-index: 1000;
}
    /* Active state */
    .hotspot-modal-con.active {
        transform: translateX(0);
    }

.hotspot-modal {
    display: none;
    padding: 65px;
}

button.wb-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    width: 35px;
    height: 35px;
    padding: 0;
    cursor: pointer;
}

.wb-button svg {
    width: 35px;
    height: 35px;
    padding: 0;
}

.hotspot-modal h3 {
    font-family: "MBCorpo Title", "arial", sans-serif;
    font-size: 4.25rem;
    line-height: 4.125rem;
    font-style: normal;
    font-weight: 700;
    margin: 0 0 30px 0;
    color: #000000;
}

.hotspot-modal p {
    color: #000000;
    font-size: 1.125rem;
    line-height: 2rem;
    font-style: normal;
    font-weight: 400;
}

.hotspot-sml-video {
    display: block;
    background: #cecece;
    height: auto;
    margin-bottom: 30px;
}

div#modal-01 {
    /**display: block;**/
}

.hotspot {
    position: absolute;
    width: 32px;
    height: 32px;
    opacity: 1;
    background: none !important;
    border: 10px solid transparent;
    border-radius: 50%;
    cursor: pointer;
}

    .hotspot::before {
        content: "";
        width: 14px;
        height: 14px;
        background-color: #0078d6;
        display: inline-block;
        position: absolute;
        border-radius: 50px;
        top: -1px;
        left: calc(50% - 7px);
    }

    .hotspot::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(1);
        border-radius: 50%;
        border: 4px solid #0078d6;
        width: 28px;
        height: 28px;
        animation: ringPulse 1.2s ease-in-out 0.4s infinite;
        z-index: 0;
    }

div#hotspot-01 {
    top: 258px;
    left: 230px;
}

div#hotspot-02 {
    top: 510px;
    left: 355px;
}

div#hotspot-03 {
    top: 745px;
    left: 312px;
}

div#hotspot-04 {
    top: 133px;
    left: 369px;
}

div#hotspot-05 {
    top: 399px;
    left: 684px;
}

div#hotspot-06 {
    top: 661px;
    left: 521px;
}

div#hotspot-07 {
    top: 32px;
    left: 855px;
}

div#hotspot-08 {
    top: 254px;
    left: 968px;
}

div#hotspot-09 {
    top: 511px;
    left: 788px;
}

div#hotspot-10 {
    top: 296px;
    left: 1218px;
}

div#hotspot-11 {
    top: 560px;
    left: 1120px;
}

div#hotspot-12 {
    top: 636px;
    left: 1377px;
}

div#hotspot-13 {
    top: 83px;
    left: 1265px;
}

.hotspot-modal.open {
    display: block;
}

@keyframes ringPulse {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(0.9);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@media (min-width:768px) {
    .hotspot::before {
        content: "";
        width: 12px;
        height: 12px;
        top: 0px;
        left: calc(50% - 6px);
    }

    .hotspot::after {
        content: '';
        width: 25px;
        height: 25px;
    }

    .hotspot-modal {
        padding: 15px;
    }

        .hotspot-modal h3 {
            font-size: 24px;
            line-height: 24px;
            margin: 0 0 15px 0;
        }

    .hotspot-sml-video {
        margin-bottom: 17px;
    }

    div#hotspot-01 {
        top: 25px;
        left: 21px;
    }

    div#hotspot-02 {
        top: 136px;
        left: 76px;
    }

    div#hotspot-03 {
        top: 256px;
        left: 136px;
    }

    div#hotspot-04 {
        top: 48px;
        left: 255px;
    }

    div#hotspot-05 {
        top: 170px;
        left: 293px;
    }

    div#hotspot-06 {
        top: 285px;
        left: 221px;
    }

    div#hotspot-07 {
        top: 6px;
        left: 369px;
    }

    div#hotspot-08 {
        top: 179px;
        left: 419px;
    }

    div#hotspot-09 {
        top: 298px;
        left: 431px;
    }

    div#hotspot-10 {
        top: 123px;
        left: 529px;
    }

    div#hotspot-11 {
        top: 240px;
        left: 489px;
    }

    div#hotspot-12 {
        top: 273px;
        left: 601px;
    }

    div#hotspot-13 {
        top: 29px;
        left: 648px;
    }
}

@media (min-width:1025px) {
    .hotspot-modal {
        padding: 20px;
    }

    .hotspot::before {
        content: "";
        width: 14px;
        height: 14px;
        top: -1px;
        left: calc(50% - 7px);
    }

    .hotspot::after {
        content: '';
        width: 28px;
        height: 28px;
    }

    div#hotspot-01 {
        top: 36px;
        left: 32px;
    }

    div#hotspot-02 {
        top: 188px;
        left: 210px;
    }

    div#hotspot-03 {
        top: 349px;
        left: 188px;
    }

    div#hotspot-04 {
        top: 68px;
        left: 347px;
    }

    div#hotspot-05 {
        top: 234px;
        left: 401px;
    }

    div#hotspot-06 {
        top: 387px;
        left: 304px;
    }

    div#hotspot-07 {
        top: 14px;
        left: 501px;
    }

    div#hotspot-08 {
        top: 146px;
        left: 570px;
    }

    div#hotspot-09 {
        top: 298px;
        left: 463px;
    }

    div#hotspot-10 {
        top: 169px;
        left: 719px;
    }

    div#hotspot-11 {
        top: 327px;
        left: 807px;
    }

    div#hotspot-12 {
        top: 377px;
        left: 678px;
    }

    div#hotspot-13 {
        top: 43px;
        left: 867px;
    }
}

@media (min-width:1281px) {
    .hotspot-modal {
        padding: 30px;
    }

        .hotspot-modal h3 {
            font-size: 26px;
            line-height: 26px;
            margin: 0 0 15px 0;
        }

    .hotspot::before {
        content: "";
        width: 14px;
        height: 14px;
        top: -1px;
        left: calc(50% - 7px);
    }

    .hotspot::after {
        content: '';
        width: 28px;
        height: 28px;
    }

    div#hotspot-01 {
        top: 47px;
        left: 41px;
    }

    div#hotspot-02 {
        top: 225px;
        left: 253px;
    }

    div#hotspot-03 {
        top: 419px;
        left: 226px;
    }

    div#hotspot-04 {
        top: 86px;
        left: 418px;
    }

    div#hotspot-05 {
        top: 279px;
        left: 480px;
    }

    div#hotspot-06 {
        top: 463px;
        left: 365px;
    }

    div#hotspot-07 {
        top: 20px;
        left: 601px;
    }

    div#hotspot-08 {
        top: 178px;
        left: 682px;
    }

    div#hotspot-09 {
        top: 356px;
        left: 556px;
    }

    div#hotspot-10 {
        top: 205px;
        left: 860px;
    }

    div#hotspot-11 {
        top: 277px;
        left: 961px;
    }

    div#hotspot-12 {
        top: 447px;
        left: 972px;
    }

    div#hotspot-13 {
        top: 56px;
        left: 891px;
    }
}

@media (min-width:1400px) {
    .hotspot-modal {
        padding: 30px;
    }

        .hotspot-modal h3 {
            font-size: 4.25rem;
            line-height: 4.125rem;
            font-style: normal;
            font-weight: 700;
            margin: 0 0 15px 0;
        }

    .hotspot-sml-video {
        margin-bottom: 25px;
    }

    .hotspot::before {
        content: "";
        width: 14px;
        height: 14px;
        top: -1px;
        left: calc(50% - 7px);
    }

    .hotspot::after {
        content: '';
        width: 28px;
        height: 28px;
    }

    div#hotspot-01 {
        top: 222px;
        left: 199px;
    }

    div#hotspot-02 {
        top: 443px;
        left: 305px;
    }

    div#hotspot-03 {
        top: 650px;
        left: 271px;
    }

    div#hotspot-04 {
        top: 107px;
        left: 517px;
    }

    div#hotspot-05 {
        top: 347px;
        left: 596px;
    }

    div#hotspot-06 {
        top: 575px;
        left: 453px;
    }

    div#hotspot-07 {
        top: 27px;
        left: 743px;
    }

    div#hotspot-08 {
        top: 218px;
        left: 844px;
    }

    div#hotspot-09 {
        top: 444px;
        left: 687px;
    }

    div#hotspot-10 {
        top: 256px;
        left: 1060px;
    }

    div#hotspot-11 {
        top: 346px;
        left: 1188px;
    }

    div#hotspot-12 {
        top: 554px;
        left: 1201px;
    }

    div#hotspot-13 {
        top: 70px;
        left: 1102px;
    }
}

@media screen and (min-width: 1525px) {
    .hotspot-modal {
        padding: 30px;
    }

        .hotspot-modal h3 {
            font-size: 26px;
            line-height: 26px;
            margin: 0 0 15px 0;
        }

    .hotspot::before {
        content: "";
        width: 14px;
        height: 14px;
        top: -1px;
        left: calc(50% - 7px);
    }

    .hotspot::after {
        content: '';
        width: 28px;
        height: 28px;
    }

    div#hotspot-01 {
        top: 70px;
        left: 61px;
    }

    div#hotspot-02 {
        top: 307px;
        left: 194px;
    }

    div#hotspot-03 {
        top: 568px;
        left: 310px;
    }

    div#hotspot-04 {
        top: 118px;
        left: 568px;
    }

    div#hotspot-05 {
        top: 380px;
        left: 651px;
    }

    div#hotspot-06 {
        top: 629px;
        left: 497px;
    }

    div#hotspot-07 {
        top: 30px;
        left: 814px;
    }

    div#hotspot-08 {
        top: 241px;
        left: 923px;
    }

    div#hotspot-09 {
        top: 486px;
        left: 751px;
    }

    div#hotspot-10 {
        top: 139px;
        left: 968px;
    }

    div#hotspot-11 {
        top: 535px;
        left: 1069px;
    }

    div#hotspot-12 {
        top: 605px;
        left: 1313px;
    }

    div#hotspot-13 {
        top: 78px;
        left: 1206px;
    }
}

@media (min-width:1600px) {
    .hotspot-modal {
        padding: 40px;
    }

        .hotspot-modal h3 {
            font-size: 4.25rem;
            line-height: 4.125rem;
            font-style: normal;
            font-weight: 700;
            margin: 0 0 15px 0;
        }

    .hotspot-sml-video {
        margin-bottom: 25px;
    }

    .hotspot::before {
        content: "";
        width: 14px;
        height: 14px;
        top: -1px;
        left: calc(50% - 7px);
    }

    .hotspot::after {
        content: '';
        width: 28px;
        height: 28px;
    }


    div#hotspot-01 {
        top: 258px;
        left: 230px;
    }

    div#hotspot-02 {
        top: 510px;
        left: 355px;
    }

    div#hotspot-03 {
        top: 745px;
        left: 312px;
    }

    div#hotspot-04 {
        top: 133px;
        left: 369px;
    }

    div#hotspot-05 {
        top: 399px;
        left: 684px;
    }

    div#hotspot-06 {
        top: 661px;
        left: 521px;
    }

    div#hotspot-07 {
        top: 32px;
        left: 855px;
    }

    div#hotspot-08 {
        top: 254px;
        left: 968px;
    }

    div#hotspot-09 {
        top: 511px;
        left: 788px;
    }

    div#hotspot-10 {
        top: 296px;
        left: 1218px;
    }

    div#hotspot-11 {
        top: 560px;
        left: 1120px;
    }

    div#hotspot-12 {
        top: 636px;
        left: 1377px;
    }

    div#hotspot-13 {
        top: 83px;
        left: 1265px;
    }
}

@media (min-width:1700px) {
    .hotspot-modal {
        padding: 40px;
    }

        .hotspot-modal h3 {
            font-size: 4.25rem;
            line-height: 4.125rem;
            font-style: normal;
            font-weight: 700;
            margin: 0 0 15px 0;
        }

    .hotspot-sml-video {
        margin-bottom: 25px;
    }

    .hotspot::before {
        content: "";
        width: 14px;
        height: 14px;
        top: -1px;
        left: calc(50% - 7px);
    }

    .hotspot::after {
        content: '';
        width: 28px;
        height: 28px;
    }

    div#hotspot-01 {
        top: 258px;
        left: 230px;
    }

    div#hotspot-02 {
        top: 510px;
        left: 355px;
    }

    div#hotspot-03 {
        top: 745px;
        left: 312px;
    }

    div#hotspot-04 {
        top: 133px;
        left: 369px;
    }

    div#hotspot-05 {
        top: 399px;
        left: 684px;
    }

    div#hotspot-06 {
        top: 661px;
        left: 521px;
    }

    div#hotspot-07 {
        top: 32px;
        left: 855px;
    }

    div#hotspot-08 {
        top: 254px;
        left: 968px;
    }

    div#hotspot-09 {
        top: 511px;
        left: 788px;
    }

    div#hotspot-10 {
        top: 296px;
        left: 1218px;
    }

    div#hotspot-11 {
        top: 560px;
        left: 1120px;
    }

    div#hotspot-12 {
        top: 636px;
        left: 1377px;
    }

    div#hotspot-13 {
        top: 83px;
        left: 1265px;
    }
}

@media (max-width:577px) {
    .hotspot-modal-con {
        width: 46%;
    }

    .hotspot::before {
        content: "";
        width: 10px;
        height: 10px;
        top: 1px;
        left: calc(50% - 5px);
    }

    .hotspot::after {
        content: '';
        width: 21px;
        height: 21px;
    }

    .hotspot-modal {
        padding: 15px;
    }

        .hotspot-modal h3 {
            font-size: 18px;
            line-height: 20px;
            margin: 0 0 10px 0;
        }

    .hotspot-sml-video {
        margin-bottom: 17px;
    }

    div#hotspot-01 {
        top: 8px;
        left: 6px;
    }

    div#hotspot-02 {
        top: 70px;
        left: 36px;
    }

    div#hotspot-03 {
        top: 140px;
        left: 69px;
    }

    div#hotspot-04 {
        top: 27px;
        left: 137px;
    }

    div#hotspot-05 {
        top: 129px;
        left: 155px;
    }

    div#hotspot-06 {
        top: 155px;
        left: 119px;
    }

    div#hotspot-07 {
        top: -2px;
        left: 200px;
    }

    div#hotspot-08 {
        top: 93px;
        left: 227px;
    }

    div#hotspot-09 {
        top: 160px;
        left: 233px;
    }

    div#hotspot-10 {
        top: 62px;
        left: 288px;
    }

    div#hotspot-11 {
        top: 128px;
        left: 326px;
    }

    div#hotspot-12 {
        top: 188px;
        left: 276px;
    }

    div#hotspot-13 {
        top: 10px;
        left: 355px;
    }
}

@media (max-width:400px) {
}

@media (max-width:360px) {
}

@media (max-width:320px) {
}