/* Your responsive custom styles */

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

  .hide-on-large-screen { display: block !important;}
  .nav-brochure, a.nav_id, a.nav_call{ display: none;}


}


@media screen and (min-width:768px) and (max-width:992px) {

  .h2, h2 { font-size: 1.5rem;}
  .h5, h5 { font-size: 1rem;}
  .mdb-lightbox figure a { display: block; overflow: hidden; height: 140px; margin-bottom: 5px;}

}

@media screen and (min-width:577px) and (max-width:767px) {

  .copyright-wrap { margin-top: 0px;}  
  section#index-about, #Itinerary, section#yourtrain, section#guest_speaks, footer, .visit_wrap{ display: none;}
  .mdb-lightbox figure a { display: block; overflow: hidden; height: 120px; margin-bottom: 5px;}

}

@media screen and (min-width:320px) and (max-width:576px) {

  #intro { background: url("../img/intro-form-banner-xs.jpg")no-repeat 57% 60px fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 94%;}
.book-now-btn .btn{ padding: .84rem 1rem; }
  .table-responsive::after { content: "Please Scroll The Table"; color: #f00; width: 100px; font-size: 14px;}
  .table{ margin-bottom: 0;}
  .add_img_ads{ padding: 5px; margin: 0;}
  .mat-select-panel .mat-optgroup-label, .mat-select-panel .mat-option span { font-size: 14px;}
  .modal-header, .modal-dialog.modal-notify .modal-body{ padding: 0.5rem;}
  .modal-dialog.modal-notify .heading{ padding: 0; font-size: 1rem;}
  table td{ font-size: .8rem;}
  table.table td, table.table th { padding-top: .3rem; padding-bottom: .3rem;}
  .Login_Wrap p { margin-bottom: 0;}

  section#index-about, #Itinerary, section#yourtrain, section#guest_speaks, footer, .visit_wrap{ display: block;}
  .callback_btn{ left: -60px;}
  .callback_btn a{ line-height: 15px; padding: 5px 0px 5px 5px; width: 50px; height: 50px;}
  .callback_btn a i{ top:-12px;}
  .callback_btn a span{ top: 27px; font-size: 10px; padding-left: 4px;}

  .about-section p.white-text{ font-size: 14px; margin-bottom: 10px;}
  figure.effect-julia h2{ font-size: 1rem; padding: 0;}
  figure.effect-julia p{ padding: 0.1em 0.5em;}
  
  .package_price-wrap h4, #yourtrain h2 { font-size: 1.2rem;}
  .package_price-wrap strong, #yourtrain figure figcaption h2, #guest_speaks .carousel-item p, .social-icons-wrap a { font-size: 14px;}
  .font-small, footer.page-footer .footer-copyright { font-size: .8rem;}
  .h6, h6 { font-size: 0.9rem;}
  .package_price-wrap span { font-size: 13px;}
  .mat-form-field{ width:100%;}
  .navbar.scrolling-navbar.top-nav-collapse{ padding-bottom: 6px; padding-top: 6px;}
  #intro { height: 100%;}
  .navbar { padding-right: 0 !important;}
  .top-nav-collapse a.navbar-brand, .navbar-brand { padding-top: 2px; padding-bottom: 2px;}
  .navbar .nav-flex-icons{ flex-direction: column;}
  ul.nav-icon-custom li, ul.nav-icon-custom li.border-sepreter { border-left: none; padding-left: 0; margin-left: 0; width: 33%; float: left; text-align: center;}
  .navbar-nav.nav-icon-custom.nav-login li.nav-item.dropdown { width: auto;}
  ul.nav-icon-custom.nav-login li { width: auto; min-width: 30px;}
  .nav-icon-custom { flex-direction: row;}
  .banner-form-wrap, .banner-form-wrap .card.card-image{ width:100% !important; margin-top: 70px;}
  .h-75.Home-banner-Section { padding-top: 220px;}
  .top-form-days { display: inline-block; margin: 0 0 7px 0; width: 23%; vertical-align: top;}
  .top-form-days strong{ font-size: 11px; margin: 0;}
  .top-form-days span{ font-size: 10px; margin: 0;}
  .bottom-form-wrap { margin-top: 10px;}
  .bottom-form-wrap .md-form { margin: 0;}
  .bottom-form-wrap .md-form label { font-size: 0.8rem;}
  .about-section p.grey-text, .about-section p.info-text{ font-size: 14px; margin: 10px 0;}
  .h2, h2 { font-size: 1.5rem;}
  .h4, h4 { font-size: 1.2rem;}
  .h5, h5 { font-size: 1rem;}
  .sub-heading { margin-bottom: 1rem !important;}
  .Itinerary_wrap_box { margin-bottom: 0 !important;}
  .package_price-wrap .float-left, .package_price-wrap .float-right { float: none !important;}
  .replan_wrap p{ font-size: 14px;}
  .copyright-wrap { margin-top: 0px;}
  .mdb-lightbox figure a { display: block; overflow: hidden; height: 90px; margin-bottom: 5px;}
  
}