@media only screen and (max-width: 960px) and (min-width:640px){
    body .center-page{
        width: 640px;
    }
    
    nav ul {
        width: 360px;
    }
    
    .service {
        width: auto;
        margin: 0 auto;
         margin-bottom: 20px;
    }
    
    .reservation_form h3 {
        text-align: center;
    }
    
    form .form_section {
       width: 640px !important; 
    }
    
    form .form_group label {
        display: block;
        width: 100%;
    }

    form .time_icon {
        display: none !important;    
    }
    
    .card-resp {
        margin: 0 auto !important;;
        box-sizing: border-box;
        height: auto;
        width: 640px;
    }
    
    #sumery {
        width: 640px;
        height: 295px;   
    }
    
    #map {
        display: none;
    }
    #sumery .form_colum:first-child {
        margin-right: 125px;
    }
    #travel_data, #travel_data {
        height: auto;
        width: 640px; 
    }
    #travel_data .form_nav {
        width: 600px;
    }
    
    .page-right-side .card {
        margin:  0 auto;
          margin-left: 20px;
          margin-bottom: 20px;
        width: 300px;
        float: none;
    }
    .page-body header {
        background-position-x: 36%;
    }
    
    
}
@media only screen and (max-width: 640px){
    /*body {background-color: orange !important;}*/
    
    body .center-page {
        width: 320px;
        margin: 0 auto;
    }
    
    label[class='title']{
        margin-top: 10px;
    }
    
    header a,
    header img {
        width: 80% !important;;
        margin: 0 auto !important;
        display: block;
    }
    header {
        text-align: center;
    }
   .header-info {
       float: none;
       width: auto;
    }
    
    .middle-bar .phone {
        border: none !important;
    }
        
    nav .center-page {
        width: 355px;
    }
    .page-body header {
        height: auto;
        margin: 0 auto !important;
        margin-bottom: 20px !important;
    }
    .card,
    .service {
        width: 100% !important;
        margin: 0 auto;
          margin-bottom: 20px;
        box-sizing: border-box;
    }
    .reservation_form {
        margin-top: 20px;
    }
    .form_section {
        width: 320px !important;
    }
    
    .form_row > .form_group, form label, .form_colum {
        width: 100% !important;
    }
     .context {
        width: 100% !important;
    }
    .form_button {
        left: 20%;
    }
    .form_nav {
        width: 290px;
    }
    
    .form_section textarea {
        max-width: 85%;
        min-width: 85%;
    }
    
    .card-resp {
        width: 100% !important;;
        box-sizing: border-box;
        margin: 0 auto !important;;
        height: auto !important;
    }
    
    #mobile {
        display: block !important;
        margin-bottom: 20px !important;;
    }
    
    .middle-bar .sub-info, 
    .time_icon,
    .page-right-side,
    #map, #travel_data, #pc_buttons {
        display: none !important;
    }
    
    .page-left-side {
        width: 100% !important;
    }
    
    .info {
        width: 100%;
        margin-top: 20px;
        padding: 0 !important;;
    }
    
    .form-row textarea {
        min-width: 265px;
        max-width: 265px;
    }
    
    .page-body > .center-page > .card {
        margin-top: 20px;
    }
    
    .page-body header {
       background-position-x: 42%;

    }
    .context .from_button {
        margin: 0 auto !important;
    }
    
    .reservation_form .alert {
       font-weight: bolder;
    }

}