/*
    Template: Responsive OTS
    Author: M4verick
    Developer by: ETransact Sdn Bhd
    Email : erwanhafizi@gmail.com
    Version :COVID19#STAYATHOME 06042020

*/
/* minimum resolution - 1024x768. according to w3schools (jan 2014) - 99% of visitors have a resolution 1024 x 768 pixels or higher */
@media print {}

@media only screen and (max-width: 320px) {    
    .search-trip-container{position:relative!important}
    .table-trip td.upper-deck{margin-left:0!important}
    .table-trip .trip-item td>div{font-size:.857em!important}
}
@media only screen and (max-width:418px){
    .tabs-title ul li{padding:0 .5em!important}
    .tabs-title svg{width:15px!important}
    .search-trip-container{position:relative!important}
    .header{box-shadow:none}
    .brand-logo{width:120px}
    .seatlayout-container{padding:0}
    .seatlayout-design{padding:1rem}
    .ots-search-button{padding:.5em 1em .5em 1em!important;position:relative!important;right:auto!important;top:auto!important;height:60px}
    .ots-ddate,.ots-rdate{width:100%;float:none}

    .table-trip .trip-logo{height:25px!important;width:63px!important}
    .table-trip .trip-item{height:3em!important}
    .table-trip .trip-price{font-weight:700}
    .table-trip .trip-price,.table-trip .trip-time{font-size:.9em!important;font-weight:700}
    .table-trip .trip-no{font-size:.85em}
    .table-curved tr:last-child td:first-child{margin:0}
    .slider_container{height:151px;min-height:150px}
}

@media only screen and (max-width: 488px) {
    .destination-input,.calendar-input{display:block}
    .destination-arrow{display:none!important}
    .search-from,.search-to,.ots-ddate,.ots-rdate{width:100%!important}
    body .search-trip-wrapper section div.checkbox{top:0;background-color:transparent!important}
    .search-to .select2-selection__rendered,.search-to label{padding-left:0!important}
    div.search-to .select2-selection{border-left:1px solid #dee2ee!important;border-top:none!important}
    .ots-rdate{border:1px solid #dee2ee;border-top:none}
    .container-secondary section .wrapper{padding-top:40px!important}
    .head-wrapper .head p{display:none}
    .imghvr-blur figcaption{/*opacity:1*/}
    [class^='imghvr-'] figcaption{padding:8px!important;font-size: 13px}
}
@media only screen and (min-width:489px){
    .search-to .select2-selection__rendered{padding-left:.9em!important}
    .destination-input,.calendar-input,.destination-label{display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex}
}
@media only screen and (max-width:576px){
    .image-retina-bm,.image-retina-en,.image-retina-contact-bm,.image-retina-contact-en{background:none}
    }
@media only screen and (min-width:576px){    
    .search-trip-container{bottom:25px}
    .table-curved tr:last-child td:first-child{margin-right:1rem}
}
@media only screen and (max-width:699px){
    /*.navbar-logo{margin:0 auto}
    body .brand-logo path{fill:#fff}*/
}
@media only screen and (max-width:754px){
    /*body .brand-logo path{fill:#fff}*/
    /*.navbar.container,*/.slider-wrapper,.spacer-image{background:#fff}
}

@media only screen and (min-width:700px) and (max-width:754px){
    .header{box-shadow:none}
    /*.navbar.container{background:#f37223}*/    
}

@media only screen and (min-width:755px){    
    .header{box-shadow: 0 1px 3px 0 rgba(27,27,27,.1), 0 4px 8px 0 rgba(27,27,27,.1)}
    .slider-wrapper{/*background:url('../images/Main/slider/main_bg.jpg');background-size:cover*/background-color:#ffb900}
    .spacer-image { /*background:url('../images/Main/slider/main_bg.jpg');background-size:cover*/background-color: #de5d66}

}
@media only screen and (max-width: 767px) {
    .slide-search-container .carousel-caption{display:none}
    div.search-to .select2-selection{border-bottom:1px solid #dee2ee}
     /* remove padding / margin. fixed for small device and below*/
    .row-no-padding-margin{margin:0}
    .row-no-padding-margin > [class*="col-"] {padding-left:0 !important;padding-right:0 !important}

    }
@media only screen and (max-width: 768px){
    .links-effect{display:none}
    .navbar-brand{margin:0;padding:0}    
    .top-menu-nav{text-align:center!important;overflow:visible!important;transition: all 2s linear;}
    .top-menu-nav a{font-size:12px!important}
    /* top menu */    
    .responsive-menu-container .checkbox-toggle,.responsive-menu-container .hamburger{right:0}
    .top-menu-nav li{display:none;opacity:0}
    .top-menu-nav .fulscreen-menu li{opacity:1}
    /* heading text*/
    .deals-container h2,.campaign-container h2{text-align:center}
    .payment-partner>div>div>div>div>div{margin:.25em!important}

    .seatlayout-container .seat{width:30px;height:30px;padding:3px 1px 0 0}
    .seatlayout-container .legend-list span::after{background-size: 20px!important}
    .seatlayout-container .legend-list li{margin:0 .5em!important}
}

@media screen and (min-width: 769px){        
    .navbar-logo{padding-left:0}
    .responsive-menu-container{display:none}    
    .seatlayout-container .seat{width:27px;height:27px}
    .seatlayout-container .seat::after{background-size:cover}    
}

@media only screen and (max-width:991px) and (min-width:419px){
    .navbar.container{padding: 0 .5em}
    .container {max-width:100%}

    .search-from,.ots-ddate{width:50%;display:inline-block}
    .search-to,.ots-rdate{width:50%;float:right}
}
@media only screen and (max-width:991px) and (min-width:755px){
}
@media only screen and (max-width:991px) and (min-width:769px) {
    .slide-search-container .carousel-caption{top:15%}
    .slide-search-container .carousel-caption h1{font-size:48px;font-weight:700}
}
@media only screen and (max-width:991px){    
    main .container-fluid{width:auto;margin:0 4%;padding:0}
    div.search-from .select2-selection,div.search-to .select2-selection{border:1px solid #dee2ee}
    div.search-to .select2-selection{border-left:none}
    .ots-ddate,.ots-rdate{border-bottom:1px solid #dee2ee}
    .ots-rdate{border-right:1px solid #dee2ee}
    
    .main-search-bar .checkbox{text-align:left!important}
    .deals-container .content,.campaign-container .content{margin:1em 0}
    .slide-search-container .carousel-caption h1{font-size:48px;font-weight:700}    
}
@media only screen and (min-width: 992px) {
    .ots-search-button{position:relative;margin-top:10px}
    .ots-search-box{box-shadow: 0 2px 6px 0 rgba(0,0,0,.12);border:1px solid #ddd}
    
    .slide-search-container .carousel-caption{top:25%}
    .slide-search-container .carousel-caption h1{font-size:48px;font-weight:700}
    .bookstep-trip .page-container{}  
    .table-trip .trip-time{float:left;margin-right:1rem}   
    .seatlayout-container .seat{padding:3px 3px 0 0}
    .table-curved tr:last-child td:first-child{margin-right:2rem}
    
    #slider1_container{height:400px !important}    
    
}
@media only screen and (min-width: 992px) and (max-width:1199px){    
    .campaign-container .card-body h4.card-title{font-size:.65em!important}
}
@media only screen and (min-width:1004px){}
@media only screen and (min-width:1085px){}
@media only screen and (min-width:1115px){}
@media only screen and (min-width:1135px){}
@media only screen and (min-width: 1195px){}
@media only screen and (min-width:1200px){}
@media only screen and (min-width: 1365px){}
@media only screen and (min-width: 1679px){}

/* retina */
@media only screen and (min-width: 320px) {
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (                min-resolution: 192dpi) and (min-width: 320px),
only screen and (                min-resolution: 2dppx)  and (min-width: 320px) {
}

@media only screen and (min-width: 700px) {
  .image-retina-bm{background-image:url(/Styles/css/images/Main/slider/sliderBM.png)}
  .image-retina-en{background-image:url(/Styles/css/images/Main/slider/sliderEN.png)}
  .image-retina-contact-bm{background-image:url(/Styles/css/images/Main/slider/contactBM.png)}
  .image-retina-contact-en{background-image:url(/Styles/css/images/Main/slider/contactEN.png)}
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 700px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (                min-resolution: 192dpi) and (min-width: 700px),
only screen and (                min-resolution: 2dppx)  and (min-width: 700px) { 
 .image-retina-bm{background-image:url(/Styles/css/images/Main/slider/sliderBM_2x.png)}
 .image-retina-en{background-image:url(/Styles/css/images/Main/slider/sliderEN_2x.png)}
 .image-retina-contact-bm{background-image:url(/Styles/css/images/Main/slider/contactBM_2x.png)}
 .image-retina-contact-en{background-image:url(/Styles/css/images/Main/slider/contactEN_2x.png)}
}

@media only screen and (min-width: 1300px) {
  /* Large screen, non-retina */
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1300px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (                min-resolution: 192dpi) and (min-width: 1300px),
only screen and (                min-resolution: 2dppx)  and (min-width: 1300px) {
  .image-retina-bm{background-image:url(/Styles/css/images/Main/slider/sliderBM_3x.png)}
  .image-retina-en{background-image:url(/Styles/css/images/Main/slider/sliderEN_3x.png)}
  .image-retina-contact-bm{background-image:url(/Styles/css/images/Main/slider/contactBM_3x.png)}
  .image-retina-contact-en{background-image:url(/Styles/css/images/Main/slider/contactEN_3x.png)}
}

/* responsive menu */
.responsive-menu-container{}
.responsive-menu-container .checkbox-toggle{position:absolute;right:0;z-index:2;cursor:pointer;width:35px;height:33px;opacity:0}
.responsive-menu-container .checkbox-toggle:checked + .hamburger > div{-webkit-transform:rotate(135deg);transform:rotate(135deg)}
.responsive-menu-container .checkbox-toggle:checked + .hamburger > div:before,.responsive-menu-container .checkbox-toggle:checked + .hamburger > div:after{top:0;-webkit-transform:rotate(90deg);transform:rotate(90deg)}
.responsive-menu-container .checkbox-toggle:checked + .hamburger > div:after{opacity:0}
.responsive-menu-container .checkbox-toggle:checked ~ .fulscreen-menu{pointer-events:auto;visibility:visible}
.responsive-menu-container .checkbox-toggle:checked ~ .fulscreen-menu > div{-webkit-transform:scale(1);transform:scale(1);transition-duration:.75s}
.responsive-menu-container .checkbox-toggle:checked ~ .fulscreen-menu > div > div{opacity:1;transition:opacity .4s ease .4s}
.responsive-menu-container .checkbox-toggle:checked:hover + .hamburger > div{-webkit-transform:rotate(225deg);transform:rotate(225deg)}
.responsive-menu-container .hamburger{position:absolute;right:0;z-index:1;width:35px;height:33px;padding:.5em;background:#d0312d;border-radius:0 .12em .12em 0;cursor:pointer;transition:box-shadow .4s ease;-webkit-backface-visibility:hidden;backface-visibility:hidden;display:flex;align-items:center;justify-content:center}
.responsive-menu-container .hamburger > div{position:relative;flex:none;width:100%;height:2px;background:#FEFEFE;transition:all .4s ease;display:flex;align-items:center;justify-content:center}
.responsive-menu-container .hamburger > div:before,.responsive-menu-container .hamburger > div:after{content:'';position:absolute;z-index:1;top:-10px;left:0;width:100%;height:2px;background:inherit;transition:all .4s ease}
.responsive-menu-container .hamburger > div:after{top:10px}
.responsive-menu-container .fulscreen-menu{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;visibility:hidden;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;outline:1px solid transparent;display:flex;align-items:center;justify-content:center}
.responsive-menu-container .fulscreen-menu > div{width:400vw;height:400vw;color:#FEFEFE;background:rgba(351,87,87,0.97);border-radius:50%;transition:all .4s ease;flex:none;-webkit-transform:scale(0);transform:scale(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;display:flex;align-items:center;justify-content:center}
.responsive-menu-container .fulscreen-menu > div > div{text-align:center;max-width:90vw;max-height:200vh;opacity:0;transition:opacity .4s ease;overflow-y:auto;flex:none;display:flex;align-items:center;justify-content:center}
.responsive-menu-container .fulscreen-menu > div > div > ul{list-style:none;padding:0 1em;margin:0;display:block;max-height:100vh}
.responsive-menu-container .fulscreen-menu > div > div > ul > li{padding:0;font-size:24px;display:block;overflow:hidden}
.responsive-menu-container .fulscreen-menu > div > div > ul > li > a{position:relative;display:inline;cursor:pointer;transition:color .4s ease;font-size:.75em!important;color:#fff}
.responsive-menu-container .fulscreen-menu > div > div > ul > li > a:hover{color:#e5e5e5}
.responsive-menu-container .fulscreen-menu > div > div > ul > li > a:hover:after{width:100%}
.responsive-menu-container .fulscreen-menu > div > div > ul > li > a:after{content:'';position:absolute;z-index:1;bottom:-.15em;left:0;width:0;height:2px;background:#e5e5e5;transition:width .4s ease}