/*-------------------- MOBILE (max-width:575.98px) --------------------*/

@media (max-width:575.98px){
    /****************************** TITLES ******************************/
    h1{ font-size: 25px; }
    /****************************** FORMS & BUTTONS ******************************/
    .input-group-icon input[type="button"],
    .input-group-icon input[type="submit"],
    .input-group-icon input[type="reset"],
    .input-group-icon input.btn,
    .input-group-icon button,
    .input-group-icon button.btn{ padding: 11px 30px 11px 20px; }
    *.btn{ font-size: 12px; }
    .input-group-icon svg{ transform: translate(-70%,80%); }
    .dropdown-menu, .dropdown-menu.show{ max-height: 315px; }
    /****************************** CONTAINERS ******************************/
    .container,
    #section-login.container,
    #section-forgot.container,
    #section-verify.container,
    #section-reset.container,
    #section-change-password.container,
    #section-create.container,
    #section-profile.container,
    #section-edit-profile.container,
    #section-restaurants.container,
    #section-hotels.container,
    .section-payment.container{ padding: 0; }
    #section-menu.container{ padding: 10px 8%; }
    #section-question.container{ padding: 20px 8%; }
    #section-results.container{ padding: 30px 8% 0 8%; }
    #section-order.container,
    #section-subscribe.container,
    #section-contact.container, 
    #section-browse.container,
    #section-map.container,
    #section-footer.container{ padding: 30px 8%; }
    .white-box {
        padding: 30px 8%;
        border-radius: 0;
    }
    .responsive,
    .responsive-x,
    .responsive-y{
        max-width: 100%;
        max-height: 170px;
    }
    /****************************** MODALS ******************************/
    .modal{ margin-top: 96px; }
    .modal-dialog{ padding: 0 6%; }
    .modal-content,.aux-modal-content{ padding: 20px; }
    /****************************** SECTION MENU ******************************/
    #section-menu{ box-shadow: 0 0 10px rgba(0,0,0,.5); }
    #section-menu ul a.nav-link{ padding: 0; }
    .navbar-expand .navbar-nav .dropdown-menu {
        right: 0;
        left: auto;
    }
    /****************************** SECTION FOOTER ******************************/
    #section-footer .col-sm-6{ padding-left: 0; }
}


/*-------------------- MOBILE (min-width:576px) and (max-width:767.98px) --------------------*/

@media (min-width:576px) and (max-width:767.98px){
    /****************************** TITLES ******************************/
    h1{ font-size: 25px; }
    /****************************** FORMS & BUTTONS ******************************/
    .dropdown-menu, .dropdown-menu.show{ max-height: 300px; }
    /****************************** CONTAINERS ******************************/
    .container,
    #section-login.container,
    #section-forgot.container,
    #section-verify.container,
    #section-reset.container,
    #section-change-password.container,
    #section-create.container,
    #section-profile.container,
    #section-edit-profile.container,
    #section-restaurants.container,
    #section-hotels.container,
    .section-payment.container{ padding: 0; }
    #section-menu.container{ padding: 10px 8%; }
    #section-question.container{ padding: 20px 8%; }
    #section-results.container{ padding: 30px 8% 0 8%; }
    #section-order.container,
    #section-subscribe.container,
    #section-contact.container,
    #section-browse.container,
    #section-map.container,
    #section-footer.container{ padding: 30px 8%; }
    .white-box{ 
        padding: 30px 8%;
        border-radius: 0;
    }
    .responsive,
    .responsive-x,
    .responsive-y{
        max-width: 100%;
        max-height: 170px;
    }
    /****************************** MODALS ******************************/
    .modal{ margin-top: 96px; }
    .modal-dialog{ padding: 0 6%; }
    .modal input[type="button"],
    .modal input[type="submit"],
    .modal input[type="reset"],
    .modal input.btn, button,
    .modal button.btn { padding: 11px 20px; }
    .modal *.btn { font-size: 12px; }
    .modal .input-group-icon input { padding-right: 30px; }
    .modal .input-group-icon svg { transform: translate(-70%,80%); }
    /****************************** SECTION MENU ******************************/
    #section-menu{ box-shadow: 0 0 10px rgba(0,0,0,.5); }
    #section-menu ul a.nav-link{ padding: 0; }
    .navbar-expand .navbar-nav .dropdown-menu{
        right: 0;
        left: auto;
    }
    /****************************** SECTION FOOTER ******************************/
    #section-footer .col-sm-6{ padding-left: 0; }
}


/*-------------------- TABLET (min-width:768px) and (max-width:991.98px) --------------------*/

@media (min-width:768px) and (max-width:991.98px){
    /****************************** TITLES ******************************/
    h1{ font-size: 30px; }
    /****************************** CONTAINERS ******************************/
    .container{ padding: 0 9%; }    
    #section-hotels.container{ padding: 0; } 
    .white-box{ padding: 40px; }
    #section-hotels.container .white-box{
        padding: 40px 9%;
        border-radius: 0;
    }
    .responsive,
    .responsive-x,
    .responsive-y{
        max-width: 100%;
        max-height: 200px;
    }
    /****************************** SECTION FOOTER ******************************/
    #section-footer div:not(.row):not(.copy){
        width: fit-content;
        padding: 0 2%;
    }
    #section-footer div.pl-0{ padding-left: 0 !important; }
    #section-footer div.pr-0{ padding-right: 0 !important; }
    #section-footer div.pl-3{ padding-left: 0 !important; }
    #section-footer a+a{ margin-left: 20px; }
    @media (min-width:880px) and (max-width:991.98px){
        #section-footer div:not(.row):not(.copy){ padding: 0 3.5%; }        
        #section-footer div.pl-3{ padding-left: 1.1% !important; }       
    }
}


/*-------------------- TABLET (min-width:992px) and (max-width:1199.98px) --------------------*/

@media (min-width:992px) and (max-width:1199.98px){
    /****************************** TITLES ******************************/
    h1{ font-size: 30px; }
    /****************************** CONTAINERS ******************************/
    .container{ padding: 0 9%; }
    .white-box{ padding: 40px; }
    .responsive,
    .responsive-x,
    .responsive-y{
        max-width: 100%;
        max-height: 200px;
    }
    /****************************** SECTION FOOTER ******************************/
    #section-footer div:not(.row):not(.copy){
        width: fit-content;
        padding: 0 4.5%;
    }
    #section-footer div.pl-0{ padding-left: 0 !important; }
    #section-footer div.pr-0{ padding-right: 0 !important; }
    #section-footer div.pl-3{ padding-left: 2.45% !important; }
    #section-footer a+a{ margin-left: 20px; }
    @media (min-width:1095px) and (max-width:1199.98px){
        #section-footer div:not(.row):not(.copy){ padding: 0 5.25%; }
        #section-footer div.pl-3{ padding-left: 3.4% !important; }
    }
}


/*-------------------- DESKTOP (min-width:1200px) and (max-width:1399.98px) --------------------*/

@media (min-width:1200px) and (max-width:1399.98px){
    /****************************** CONTAINERS ******************************/
    .container{ padding: 0 15%; }
    /****************************** SECTION FOOTER ******************************/
    #section-footer div:not(.row):not(.copy){
        width: fit-content;
        padding: 0.5%;
        letter-spacing: -1.71px;
    }
    #section-footer div.pl-0{ padding-left: 0 !important; }
    #section-footer div.pr-xl-0{ padding-right: 0 !important; }
    #section-footer div.pl-3{ padding-left: 0 !important; }
    @media (min-width:1300px) and (max-width:1399.98px){
        #section-footer div:not(.row):not(.copy) {
            padding: 0.75%;
            letter-spacing: -1.46px;
        }
        #section-footer div.pl-3{ padding-left: 0 !important; }
    }
}


/*-------------------- DESKTOP FULL HD (min-width:1400px) --------------------*/

@media (min-width:1400px){
    #section-footer div:not(.row):not(.copy){ width: fit-content; }
    #section-footer div.pl-0{ padding-left: 0 !important; }
    #section-footer div.pr-xl-0{ padding-right: 0 !important; }
    @media (min-width:1400px) and (max-width:1500.98px){
        /****************************** SECTION FOOTER ******************************/
        #section-footer div:not(.row):not(.copy){
            padding: 0 .5%;
            letter-spacing: -1.16px;
        }
    }
    @media (min-width:1501px) and (max-width:1600.98px){
        /****************************** SECTION FOOTER ******************************/
        #section-footer div:not(.row):not(.copy){
            padding: 0 .5%;
            letter-spacing: -0.66px;
        }
    }
    @media (min-width:1601px) and (max-width:1700.98px){
        /****************************** SECTION FOOTER ******************************/
        #section-footer div:not(.row):not(.copy){
            padding: 0 .5%;
            letter-spacing: -0.18px;
        }
    }
    @media (min-width:1701px) and (max-width:1800.98px){
        /****************************** SECTION FOOTER ******************************/
        #section-footer div:not(.row):not(.copy){ padding: 0 .69%; }
    }
    @media (min-width:1801px) and (max-width:1900.98px){
        /****************************** SECTION FOOTER ******************************/
        #section-footer div:not(.row):not(.copy){ padding: 0 .98%; }
    }
    @media (min-width:1901px) and (max-width:2000.98px){
        /****************************** SECTION FOOTER ******************************/
        #section-footer div:not(.row):not(.copy){ padding: 0 1.24%; }
    }
    @media (min-width:2001px) and (max-width:2100.98px){
        /****************************** SECTION FOOTER ******************************/
        #section-footer div:not(.row):not(.copy){ padding: 0 1.47%; }
    }
    @media (min-width:2101px) and (max-width:2200.98px){
        /****************************** SECTION FOOTER ******************************/
        #section-footer div:not(.row):not(.copy){ padding: 0 1.68%; }
    }
    @media (min-width:2201px) and (max-width:2300.98px){
        /****************************** SECTION FOOTER ******************************/
        #section-footer div:not(.row):not(.copy){ padding: 0 1.86%; }
    }
    @media (min-width:2301px) and (max-width:2400.98px){
        /****************************** SECTION FOOTER ******************************/
        #section-footer div:not(.row):not(.copy){ padding: 0 2.04%; }
    }
    @media (min-width:2401px) and (max-width:2500.98px){
        /****************************** SECTION FOOTER ******************************/
        #section-footer div:not(.row):not(.copy){ padding: 0 2.2%; }
    }
    @media (min-width:2501px) and (max-width:2600.98px){
        /****************************** SECTION FOOTER ******************************/
        #section-footer div:not(.row):not(.copy){ padding: 0 2.35%; }
    }
    @media (min-width:2601px) and (max-width:2700.98px){
        /****************************** SECTION FOOTER ******************************/
        #section-footer div:not(.row):not(.copy){ padding: 0 2.49%; }
    }
    @media (min-width:2701px) and (max-width:2800.98px){
        /****************************** SECTION FOOTER ******************************/
        #section-footer div:not(.row):not(.copy){ padding: 0 2.61%; }
    }
    @media (min-width:2801px) and (max-width:2900.98px){
        /****************************** SECTION FOOTER ******************************/
        #section-footer div:not(.row):not(.copy){  padding: 0 2.73%; }
    }
    @media (min-width:2901px) and (max-width:3000.98px){
        /****************************** SECTION FOOTER ******************************/
        #section-footer div:not(.row):not(.copy){ padding: 0 2.84%; }
    }
}


/*-------------------- STYLE FOR PRINT --------------------*/

@media print and (orientation: portrait){/* FORMATO VERTICAL */
    @page{
        margin: 0 !important;
        padding: 0 !important;
    }

    html,
    body{
        margin: 0 !important;
        padding: 0 !important;
    }
    #section-menu,
    .clearfix{ display: none !important; }
	.text-print-center{ text-align: center !important; }
    .table-responsive{ overflow: auto; }
    #section-question,
    #section-subscribe,
    #section-footer{ display: none; }
}

@media print and (orientation: landscape){/* FORMATO HORIZONTAL */
    @page{
        margin: 0 !important;
        padding: 0 !important;
    }

    html,
    body{
        margin: 0 !important;
        padding: 0 !important;
    }
    #section-menu,
    .clearfix{ display: none !important; }
	.text-print-center{ text-align: center !important; }
    .table-responsive{ overflow: auto; }
    #section-question,
    #section-subscribe,
    #section-footer{ display: none; }
}