@media (min-width: 576px) { 
    .modadialogs01 { min-height: 100vh; display: flex; justify-content: center;
        align-items: center; margin: 0 auto; width: 100%; max-width: 450px !important;}

    .myplanpost01 { min-height: 100vh; display: flex; justify-content: center;
        align-items: center; margin: 0 auto; width: 100%;  max-width: 615px;}

    } 

/*
    Max width before this PARTICULAR table gets nasty. This query will take effect for any screen smaller than 760px and also iPads specifically.
    */
@media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {

    /* Force table to not be like tables anymore */
    table,
    thead,
    tbody,
    th,
    td,
    tr {
        display: block;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    tr {
        margin: 0 0 1rem 0;
    }

    tr:nth-child(odd) {}

    td {
        /* Behave  like a "row" */

        position: relative;
        padding-left: 50%;
    }

    td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 0;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
    }

    /*
        Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
        */
    #my-trvl td:nth-of-type(1):before {
        content: "Sl";
    }

    #my-trvl td:nth-of-type(2):before {
        content: "Date";
    }

    #my-trvl td:nth-of-type(3):before {
        content: "travel id";
    }

    #my-trvl td:nth-of-type(4):before {
        content: "Traveling destination";
    }

    #my-trvl td:nth-of-type(5):before {
        content: "package (if any)";
    }

    #my-trvl td:nth-of-type(6):before {
        content: "Travel agent";
    }

    #my-trvl td:nth-of-type(7):before {
        content: "Budget estimates";
    }

    #bid td:nth-of-type(1):before {
        content: "Sl";
    }

    #bid td:nth-of-type(2):before {
        content: "PUBLISH Date";
    }

    #bid td:nth-of-type(3):before {
        content: "travel id";
    }

    #bid td:nth-of-type(4):before {
        content: "TRAVELING LOCATION";
    }

    #bid td:nth-of-type(5):before {
        content: "DATE OF TRAVEL";
    }

    #bid td:nth-of-type(6):before {
        content: "PAX";
    }

    #bid td:nth-of-type(7):before {
        content: "BUDGET";
    }

    #bid td:nth-of-type(8):before {
        content: "PACKAGE TYPE";
    }

    #bid td:nth-of-type(9):before {
        content: "ACTIVITY";
    }

    /*GALLERY*/
    
   #glry.owl-carousel .owl-nav button.owl-prev{
       color: #ff4e00 !importent;
    } 
 
    
     
/*===================------------------------- Media Query -----------------------------------------==============*/
/*===================------------------------- Media Query -----------------------------------------==============*/
@media (max-width: 767px) {
    #myTable.table-responsive { display: block;}
    html, body { width: 100%;}
    .tobanners01 .container { max-width: 100%;}
    .topbanners02 { margin-bottom: 0;}
    .topbanners02 .owl-nav { display: none;}
    .abovebans { position: inherit; top: inherit; left: inherit; width: 100%;
        min-height: inherit; z-index: inherit; flex-direction: column; transform: inherit;}
    .abovebans h2 { color: #000; align-self: flex-start; font-size: 23px;}
    .abovebans p { color: #000; font-size: 14px;}
    .abovebans .abepackages01 .abepacboxes01 p { color: #fff;}

    .abovebans .abvoforms01 { flex-direction: column; width: 100%; padding: 0px 0px 10px; margin: 0px;}
    .abovebans .abvoforms01 form { width: 100%; flex-direction: column;}
    .abovebans .abvoforms01 input { margin-bottom: 10px;}
    .abovebans .abvoforms01 input:nth-child(1) { width: 100%;}
    .abovebans .abvoforms01 input:nth-child(2) { width: 100%;}

    .abovebans .abepackages01 { flex-direction: row; justify-content: space-between; width: 100%;}

    .topsideformicon01 { position: inherit; z-index: 99999999; top: inherit; right: inherit;}

    .abovebans .abepackages01 .abepacboxes01 { background: #ff4e00; padding: 4px 5px 5px 5px;
        width: 100px; margin: 0px;}

    .events table tr td a { display: inherit;}

    .topsideformicon02 button { width: 100%;}

    .flex-1 { width: 100%;}
    .flex-1 h3 { font-size: 16px;}

    .main-footer { padding: 0px 0px 0px 0px;}

    footer.dark-footer { margin-top: 10px;}

    .packoverviews01 .packlinkalls01 { flex-direction: column;}

    .packoverviews01 .packlinkalls01 .packleftlinks01 { margin-bottom: 10px;}
    .packoverviews01 .packlinkalls01 .packleftlinks01 a { padding: 2px 5px; margin-right: 5px; font-size: 10px;}
    .packoverviews01 .packlinkalls01 .packrightlinks01 a { padding: 2px 5px; margin-right: 5px; font-size: 10px;}

    .packbookformrights01 .pacdatepickers01::after { right: 10px;}

    .packinnbans01 { height: auto;}
    .packinnbans01 .packabeboxes01 h2 { font-size: 23px;}

    .packinnbans01 .packabeboxes01 { width: 100%; position: inherit; top: inherit; left: inherit; transform: inherit; 
        background: rgba(0,0,0,1); padding: 5px 5px 10px;}

    .packlefttablinks01.fixed01 { position: inherit; width: auto; left: inherit; top: inherit;}

    .allwrappagintations01 .pagination { justify-content: center;}
    
} 

@media only screen and (max-width: 1199px) {}



@media only screen and (max-width: 991px) {

    .tesimonial-item {
        margin: 0 0 1px;
    }
}
/* ============================================= Media part start here ========================= */