/* MEDIA QUERIES */
@media screen and (max-width: 1566px) {
    #start_steps { margin: 10px 30px; }
    #modal.small { top: 25%; left: 20%; right: 20%; bottom: 25%; }
}
@media screen and (max-width: 1366px) {
    .meal_box { width: 29.5%; }
    #cart_sidebar { width: 24%; top: 145px; right: 10px; bottom: 10px; margin: 20px 0 0 30px; }
    #checkout_items { width: initial; }
    #modal.small {left: 20%; right: 20%; }
}
@media screen and (max-width: 1300px) {
    #start_steps { font-size: .9em; margin: 10px; }
    #modal.small {left: 10%; right: 10%; }
    .store_builder_step { flex: 0 0 28%; }
    .store_builder_step a { font-size: 14px; }
}
@media screen and (max-width: 1024px) {
    #date_switcher span, #date_switcher select { display: block; }
    #start_steps { font-size: .8em; margin: 10px 0; }
    .store_builder_step { flex: 0 0 26.25%; }
    .store_builder_step a { font-size: 13px; }
    #builder_wrapper h2 { font-size: 22px; }
    #nav a { padding: 4px 8px; font-size: 14px; }
}
@media only screen and (max-width: 768px) {

    #page_content { padding-top: 0; }

    #welcome { background-size: unset; }
    #welcome #page_content { max-width: 90vw; }
    #welcome #page_content #actions { padding: 0; }
    #welcome #page_content #actions .button { float: none; width: 100%; border-radius: 0; }
    #welcome #page_content #logo { min-height: 140px; background-size: contain; margin-top: 20px; }
    #meal_preview { display: block; }
    #meal_preview .meal_preview_item { max-width: 100%; }
    #meal_preview_title p { padding: 20px 10px 0 10px; }
    #meal_preview { padding: 0 10px 20px 10px; }

    #login { background-size: unset; }
    #login_form { width: 76vw; padding: 20px; }
    #forgot { background-size: unset; }
    #register_form { width: 80vw; padding: 20px; }

    #top_nav { position: unset; }
    #top_menu { display: block; }
    #top_menu a { font-size: .9em; }
    #nav_left { text-align: center; }
    #nav_right { text-align: center; }

    #page_nav { position: unset; padding: 10px; height: auto; width: auto; }
    #page_menu { display: unset; position: unset; }
    #page_menu .logo { width: 60vw; margin: 0 auto; background-position: center center; }
    #nav { margin: 0 auto; display: block; min-height: unset; text-align: center; }
    #nav a { font-size: 1.2em; padding: 4px 8px; margin-bottom: 0.5em; }
    #nav a:first-child { margin-left: 0; }
    #nav a:last-child { margin-right: 0; }

    #order_dashboard { position: unset; padding: 0 10px; }
    #order_wrapper { width: auto; display: unset; }
    #cart_sidebar { position: unset; width: auto; }

    #page_block { padding-top: 0; }
    #page_content h1 { text-align: center; }
    #date_switcher { display: unset; }
    #date_switcher h2 { text-align: center; }
    #delivery_toggle { display: block; }

    #meals_grid { display: unset; }
    #meals_grid .meal_box { width: 86vw; margin: 0 auto 20px auto; }
    #cart_sidebar { width: auto; margin: 20px 0 0 0; bottom: 40px; }
    #cart h2 { font-size: .8em; text-align: center; }
    .spacer { display: none; }
    #totals_section { flex-direction: column; }
    #totals_section .cart_totals { display: block; width: 100vw; margin: 0 auto; order: -1; margin-bottom: 30px; }

    #success_block { display: unset; }
    #order h2, #order h3, #order h4 { text-align: center; }
    #order h3 { font-size: .9em; }

    #summary_table th, #summary_table td { font-size: .75rem; }
    table.dataTable tbody th, table.dataTable tbody td { padding: 4px 5px !important; }
    table.dataTable thead th, table.dataTable thead td { padding: 4px 5px !important; }
    .actions a { display: block; margin: 0 auto; width: 24px; }
    .actions a:last-child { margin-right: auto; }

    #profile h2, #profile h3, #profile h4 { text-align: center; }
    #profile_block { display: unset; }
    #profile_settings { flex-direction: column; }
    #profile_settings .profile_settings_item { margin: 0 10px 20px 10px; }
    #profile_settings .profile_settings_item img { margin: 0 auto; }

    .form_item { flex-direction: column; }
    .form_item label { width: 100vw; text-align: left; }
    .form_item input[type=text], .form_item input[type=password], .form_item select, .form_item input[type=email] { width: unset !important; font-size: 1.1em; }
    .form_item label.mobile_hide { display: none; }
    #profile_actions { margin: 0 10px; }

    #meal_modal_content { display: unset; }
    #modal_images .modal_image { min-height: 200px; margin-bottom: 20px; margin-top: 30px; }

    #start_here { padding: 0; }
    #start_here_image { margin-top: -37px; }
    #start_steps { flex-direction: column; font-size: 1em; }
    #start_steps span { display: block; text-align: center; margin-bottom: 5px; }

    #date_switcher select { margin: 0 auto; }

    #referal_form { max-width: 90vw; padding: 10px 0 20px 0; margin: 10px auto; }

    .meal_box { width: 45%; }
    #modal.small { top: 20%; left: 10%; right: 10%; bottom:20%; }
    #date_type_form_container h1 { font-size: 28px; }
    #date_type_items, #date_type_buttons { flex-direction: column; }
    #date_type_items .date_type_item { width: auto; margin: 0 0 20px 0; }
    #date_type_buttons .button { width: auto; margin: 0 0 20px 0; }
    .store_builder_step { flex: 0 0 43%; }
    .store_builder_step a { font-size: 14px; }
    #builder_next_step .button { padding: 0 5px; }
    #builder_totals_cart { margin-left: 20px; }
}
@media screen and (max-width: 500px) {
    .meal_box { width: 100%; }
    #modal,#modal.small { top: 15%; left: 2%; right: 2%; bottom: 15%; }
    #date_type_form_container h1 { font-size: 22px; }
    .store_builder_step { flex: 1 1 100%; }
    .store_builder_choice { flex-direction: column; }
    #builder_choices_section { margin-bottom: 20px; }
    #builder_choices_section h2 { font-size: 20px; }
    #builder_totals_cart { margin-left: 0; }
    #order_for h2 { font-size: 18px; }
    #steps_indicator { gap: 1rem; }
    .steps_marker { width: 10px; height: 10px; }
    #builder_next_step .button i,#builder_next_step_bottom .button i { font-size: 28px; }
    #nav { margin: 1rem auto 0 auto; }
}
@media screen and (max-width: 414px) {
    .date_type_item h2 { font-size: 18px; }
    #date_type_items { margin: 20px 0 10px 0; }
    #cart_sidebar h3 { font-size: .95em; }
    #cart_order_date_display h3 { font-size: .8em; }
    #cart_items table td { font-size: .8em; }
    #cart_order_date_display { padding: 10px; }
    #build_another a { font-size: .9em; }
    body { font-size: .85rem; }
    #order_for h2 { font-size: 14px; }
    #order_for i { font-size: 18px; }
}
@media screen and (max-width: 360px) {
    #modal,#modal.small { top: 12%; left: 2%; right: 2%; bottom: 12%; }
    #date_type_form_container h1 { font-size: 18px; }
    .date_type_item h2 { font-size: 14px; }
    .order_type_select_item label { font-size: 14px; }
    .order_date_select_item select { font-size: 14px; padding: 10px 0 10px 10px; }
    #order_for h2 { font-size: 12px; }
    #order_for i { font-size: 16px; }
}
@media screen and (max-width: 320px) {
    #modal,#modal.small { top: 8%; left: 2%; right: 2%; bottom: 8%; }
    #date_type_form_container { padding: 20px; }
    #cart_order_date_display h3 { font-size: .7em; }
    #cart_items table td { font-size: .7em; }
    #cart_order_date_display { padding: 6px; }
    #order_for h2 { font-size: 10px; }
    #order_for i { font-size: 14px; }
}