body{
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}

.promotions-container{
    width: 100%;
    position: relative;
}

.promotions-container img{
    width: 100%;
}

.hotspot{
    width: 11%;
    height: 5%;
    position: absolute;
    animation: wave 1s infinite;
    cursor: pointer;
}

.spinning{
    left: 40.5%;
    bottom: 36.5%;
}

.reload{
    left: 57.5%;
    top: 77.2%;
}

.freeBie{
    right: 59.5%;
    bottom: 43%;
}

.bonus{
    right: 62%;
    bottom: 17%;
}

.freeSpins{
    right: 23%;
    bottom: 38%;
}

.hotspot::before{
    content: attr(text);
    width: max-content;
    position: absolute;
    background-color: #222222dd;
    color: #fff;
    left: 50%;
    transform: translateX(-50%);
    top: 30px;
    padding: 8px 20px;
    font-size: 14px;
    border-radius: 3px;
    display: none;
}

.hotspot::after{
    content: "";
    border-color: transparent transparent #222222dd;
    border-width: 0 8px 6px;
    border-style: solid;
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
}

.promo-modals-text, .promo-modals-heading {
    font-family: Roboto Condensed;
    letter-spacing: -0.04;
}

.promo-modals-text {
    font-family: Roboto Condensed;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    letter-spacing: -0.038013000041246414px;
    text-align: left;
}

.promo-modals-heading {
    font-size: 18px;
}

@media (max-width: 1439px) {
    body {
        display: block;
    }
}

@media (min-width: 1440px) {
    body {
        display: flex;
    }
}

@media (min-width: 1441px) {
    body {
        display: block;
    }
}