.container-modal-window{
    position: absolute;
    left: 0;
    top: 0;
    height: 100vh;
    width: 100vw;
    background-color: rgba(78,87,84,0.5);
    z-index: 5;
}

.modal-window{
    position: absolute;
    background-color: #fff;
    top: 50%;
    left: 50%;
    width: 60%;
    max-width: 500px;
    transform: translate(-50%,-50%);
    border-radius: 3%;
    padding-left: 2%;
    padding-right: 2%;
    /*transition: left 0.5s ease;*/
    transition: top 0.5s ease;
    z-index: 6;
}

.modal-hidden-1{
    left: -100%;
}

.modal-hidden-2{
    /* left: -100%;*/
    top: -50%;    
}

.modal-window-header{
    border-bottom: 1px solid rgba(78,87,84,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.modal-window-body{
    max-height:  60vh;
    display: flex;
  /*  justify-content:space-around;*/
    /*align-items: center;*/
    flex-direction: column;
    text-align: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 1%;
    padding-right: 1%;
    overflow-y: auto;
    overflow-x: auto;
}

.modal-window-footer{
    border-top: 1px solid rgba(78,87,84,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}


@media (max-width: 800px) {
    /*viewport меньше или равно 800*/
    .modal-window{
        width: 80%;
    }

}

@media (max-width: 600px) {
    /*viewport меньше или равно 600*/
    .modal-window{
        width: 98%;
    }
}