.offices-modal {
    width: 25%;
    position: fixed;
    background-color: white;
    top: 0;
    right: 0;
    z-index: 100;
    height: 100%;
    box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */
    transition: 0.5s;
    transform: translateX(100%);
}

.offices-list {
    width: 100%;
    height: 100%;
    padding: 0 0 0 20px;
}

.offices-modal-active {
    transform: translateX(0%);
}

/*.phone-button {*/
/*    position: absolute;*/
/*    top: 50%;*/
/*    background-color: #FF5B55;*/
/*    z-index: 101;*/
/*    width: 60px;*/
/*    height: 60px;*/
/*    left: -60px;*/
/*    border-radius: 5px 0 0 5px;*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    font-size: 26pt;*/
/*    color: white;*/
/*    box-shadow: -3px 0px 5px rgba(0,0,0,0.5);*/
/*    cursor: pointer;*/
/*}*/

@media screen and (max-width: 769px) {
    .offices-modal {
        width: 50%;
    }
}

@media screen and (max-width: 660px) {
    .offices-modal {
        width: 75%;
    }
}