@media (max-width:1520px) {
    #ff #popup {
        right: 0;
    }
    }

@media (max-width: 1100px) {
    /*#nav a.tlvl {padding:20px 5px 3px 5px; margin-right:5px;font-size:22px; line-height:22px;}
#nav li.sfhover ul#m12 {
   left: 33% !important;   
}
    */
    #islexpresslogo img, #isllogo img, #islexpresslogo2 img, #isllogo2 img, #tofinoexpresslogo2 img {
        width: 95%;
        height: auto;
    }

    #ipointsicon {
        width: 90%;
        height: auto;
    }

    .saveipoints {
        display: none;
    }

    #feeblurb {
        width: 55%;
        display: inline-block;
        position: relative;
        text-align: left;
        top: 5px;
        font-size: 11px;
    }

    .numseats, .boxbike, .reservefront {
        width: 50%;
        display: inline-block;
        vertical-align: top;
    }

    #reservebuttonholder {
        width: 20%;
        position: relative;
        bottom: 20px;
        left: 80%;
    }

    .reservecheck {
        width: 75px;
        display: inline-block;
        vertical-align: top;
    }

    .boxbike {
        float: right;
    }

    #opt1holder {
        box-sizing: border-box;
        width: 70%;
        padding-left: 85px;
    }

    #opt2holder {
        box-sizing: border-box;
        position: static;
        width: 100%;
        padding: 10px 0 10px 85px;
    }

    #routesheader {
        display: none;
        width: 0;
    }
}

@media (max-width: 1000px) {
    #loginwrapperouter {
        overflow: initial;
    }

    .newuserwrapper, .existinguserwrapper {
        width: 100%;
        max-width: 475px;
        margin: 0 auto 10px;
        float: none;
    }

    #nav a.tlvl {
        padding: 10px 6px 3px 17px;
        font-size: 21px;
        margin-right: 0;
    }
}

@media (max-width: 800px) {
    #nav, #nav ul {
        padding: 0 0 0 0px;
        width: 100%;
        box-sizing: border-box;
    }

    .headerblock2 #freewifi {
    }
    #ff #popup {
        top: 38px;height:75px;
    }
    .headerblock2 {
        order: 1;
        width: 100%;
        padding: 5px 10px 0 0;
        font-family: "Inter", sans-serif;
        font-weight: 600;text-align:center;
    }

    .headerblock1 {
        order: 2;
        text-align: center;
        width: 100%;
    }

    .headerwifi {
        padding-top: 5px;
        display: block;
    }

    .h1heading {
        font-size: 34px;
    }

    #stholder {
        width: 60%;
        max-width: 600px;
        border-radius: 20px;
        background: #fff;
    }

    .wnbookinfo {
        padding: 10px;
    }

    .faqtop {
        padding: 25px 0;
    }

    #twentythanniv {
        position: absolute;
        left: 5px;
        bottom: 19px;
    }

        #twentythanniv img {
            width: 90%;
            height: auto;
        }

    .yourprice {
        font-size: 1em;
    }

    #footerinner .tblflex .tblflexitem:nth-child(1), #footerinner .tblflex .tblflexitem:nth-child(2),, #footerinner .tblflex .tblflexitem:nth-child(3) {
        width: 95%;
        margin: 0 auto;
    }

    #bookingstepsouter, #accountstepsouter {
        height: 175px;
    }

    #footercontactinfo {
        width: 100%;
        text-align: center;
    }

    .order1 {
        order: 1;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .order2 {
        order: 2;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .order3 {
        order: 3;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .jumpto {
        min-width: 250px;
        padding: 10px 0;
        text-align: center;
    }

    .locationicon {
        padding-right: 15px;
        float: none;
    }

    #routeholder {
        font-size: 13px;
    }

    .newslink a {
        font: 800 25px / 50px 'Inter', sans-serif !important;
    }

    .newslinkholder {
        padding-bottom: 40px;
    }

    .readmore a {
        padding: 5px 20px;
        font: 14px / 25px 'Inter', sans-serif !important;
        margin-bottom: 40px;
    }

    .wnroutelink, .wnroutelinkactive, .wnroutelink:hover {
        height: 70px;
        padding: 10px !important;
        margin-bottom: 10px;
    }

    .cr {
        width: 280px !important;
    }

    .schedholder {
        padding: 5px 5px 20px;
    }

    .schedhead {
        padding: 10px 0;
    }

    .twentyyearblurb {
        padding: 0px;
    }

    .tblbookingroutes .routes_pickupdropoff {
        width: 100%;
        display: block;
    }

    .reservefs {
        width: 100%;
        position: relative;
        bottom: 0;
        left: 46px;
        ;
        padding-top: 0px !important;
    }

    .reservebuttontd {
        width: 99.9%;
        display: block;
        clear: both;
    }

    .pickupnode, .dropoffnode {
        width: 95%;
    }

    #routenumberholder, #ticketnumberholder {
        width: 100%;
    }

    #ticketnumber, #routenumber {
        width: 100%;
        margin-right: 5px;
    }

    #conf {
        width: 95%;
        padding-top: 0;
    }

    .bookingheadertype-l {
        top: 42px;
    }

    .headerouter {
        margin-top: 50px;
        border-bottom: 5px solid #035296;
    }

    #headerinner {
        position: absolute;
        top: -50px;
        height: 50px;
        background-color: #000;
        z-index: 1005;
        display: inherit;
    }

    .headerinner {
        display: grid;
    }

    #mobilemenubtn {
        display: block;
        /*top: -90px;*/
    }

    #navholder {
        padding: 0;
        /*right: 0;*/
        bottom: 300%;
        z-index: 1001;
        position: absolute;
        /*top:53px;*/
        width: 100%;
        transition: all 900ms ease-in-out;
    }

    #navgradient {
        left: 0;
    }

    nav {
        top: 0px;
        position: absolute;
        bottom: auto;
        width: 100%;
        /*padding: 5px 4%;*/
        margin: 0;
        left: 0;
        /*background: rgba(255,255,255,0.98);*/
        background: #000;
        /*-webkit-box-shadow: 0 8px 8px -8px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 8px 8px -8px rgba(0,0,0,0.5);
    box-shadow: 9px 8px 8px -8px rgba(0,0,0,0.5);
	transition: all 900ms ease-in-out;
    */
        box-shadow: none;
    }

    #nav {
        transition: all 900ms ease-in-out;
        background: #000;
        color: #fff;
    }

        #nav li {
            background: #031222;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

    nav li {
        float: none;
        width: 100%;
    }

    nav a.tlvl {
        padding: 15px 30px;
        margin-bottom: 1px;
        font-size: 30px;
        line-height: 30px;
        margin-right: 0;
        display: block;
        background: none;
    }

    #nav a.tlvl {
        color: #fff;
    }

        #nav a.tlvl:hover {
            color: #fff;
            background-color: #035296;
        }

    nav ul#m12, nav li.sfhover ul#m12, nav ul#m32, nav li.sfhover ul#m32, nav ul#m10, nav li.sfhover ul#m10 {
        /*
border:0;
    position: relative;
    left: auto;
    opacity: 1;
    padding: 0;
    z-index: 500;
    overflow: hidden;
    max-width: 1280px;
    width: 100%;
    top: auto;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    -webkit-transition: all 500ms cubic-bezier(.22,.61,.36,1);
    transition: all 500ms cubic-bezier(.22,.61,.36,1);
*/
    }

        nav ul#m12 a {
            color: #fff;
        }

    #nav li a {
        color: #fff;
        font-weight: 500;
    }

        #nav li a:hover.tlvl.hc {
            background: url(/vimages/g-triangle-down.png) no-repeat right 17px top 17px, #035296;
            margin-right: 0px;
        }

    #nav li.sfhover a.tlvl.hc {
        background: url(/vimages/g-triangle-up.png) no-repeat right 17px top 17px, #035296;
        color: #fff !important;
        margin-right: 0px;
    }

    #nav li a.tlvl.hc {
        background: url(/vimages/g-triangle-down.png) no-repeat right 17px top 17px, #000;
        margin-right: 0px;
    }

    #nav li ul {
        position: absolute;
        opacity: 0;
        left: -999em;
        width: 95%;
        z-index: 1000;
        background: #fff;
        padding: 0px 0px;
        font-weight: normal;
        border-top: 0;
        box-shadow: none;
        /*    -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
    -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
    box-shadow: 3px 3px 3px rgba(0,0,0,0.3);*/
    }

    nav li.sfhover ul#m12, nav li.sfhover ul#m10 {
        position: relative;
        opacity: 1;
        left: 0em;
        /*overflow: auto;*/
        -webkit-transition: opacity 325ms ease-out;
        transition: opacity 325ms ease-out;
    }

    nav li.sfhover ul#m32 {
        position: relative;
        opacity: 1;
        left: 0 !important;
        overflow: auto;
        -webkit-transition: opacity 325ms ease-out;
        transition: opacity 325ms ease-out;
    }

    #highlightrowinner a {
        padding: 20px 2%;
        text-decoration: none;
        font-size: 30px;
        display: -webkit-flex;
        display: flex;
        width: 96%;
        height: 100px;
    }

    .saveipoints {
        display: block;
    }


    .bcol {
        position: relative;
        float: left;
        margin-right: 20px;
        padding-bottom: 20px;
        vertical-align: top;
        width: 46%;
    }

    .twentyyearblurb {
        padding: 10px;
        width: 95%;
        float: right;
    }

    .twentyyearimg {
        width: 100%;
        margin: 0 auto;
    }

    .teblogo {
        width: 95%;
        margin: 0 auto;
        float: none;
    }

        .teblogo img {
            width: 100%;
            min-width: 250px;
            max-height: 555px;
        }

    .tebblurb {
        padding: 0px 0 20px 10px;
        width: 95%;
        float: none;
    }

    .whatsnewblurb1 {
        float: none;
        vertical-align: middle;
        width: 100%;
        padding: 0 1%;
    }

        .whatsnewblurb1 img {
            display: block;
            max-width: 280px;
            width: 100%;
            margin: 20px auto;
        }

    .whatsnewblurb2 {
        float: none;
        width: 100%;
    }

    .bookingstepdesc {
        font-size: 16px;
    }

    #reservebuttonholder {
        width: 100%;
        position: static;
        margin: 10px 0;
    }

    .reservebutton {
        position: relative;
        right: 10%;
        left: 0;
        margin-bottom: 10px;
    }

    #feeblurb {
        width: 100%;
    }

    .optionfont, .optionnodepricing {
        font-size: 18px;
        padding: 0;
    }

    .optionfont {
        width: 50% !important;
        text-align: center;
    }

    .optionnodepricing {
        width: 60% !important;
    }

    #pricingimgnoticket {
        padding-left: 5px;
    }

    .optionnodepricingtoday {
        width: 25%;
    }

    .pickupdropoff_select {
        max-width: 250px;
    }

    #ana {
        top: 0;
        margin-top: 0;
    }

    #logobar {
        margin-top: 100px;
    }

    #topbar {
        position: relative;
        z-index: 330;
        top: -80px;
    }

    #topbarlt {
        top: 2px;
        left: 5px;
    }

    #topbarrt {
        left: 5px;
        top: 35px;
        text-align: left;
        width: 95%;
    }

        #topbarrt a {
            font-size: 14px;
        }

    .tblbookingroutes td table td {
        padding-bottom: 20px;
    }

    #loginbuttonholder {
        bottom: 0px;
    }

    #conflrg {
    }

    #tnlabel {
        width: 90%;
        padding: 5px;
        text-align: left;
        margin-left: 5%;
    }

    #tnarea {
        width: 90%;
        margin: 0 5%;
    }

    #mytickets, #myprofile, #myipoints {
        width: 50%;
        height: 200px;
        float: none;
        margin: 0 auto 20px;
    }

    .ipointrow65, .ipointrow35 {
    }

    #accountstepsouter {
        height: 350px;
    }

    #accountstep1, #accountstep2 {
        width: 45%;
    }

    #accountstep3, #accountstep4, #accountstep5 {
        width: 30%;
    }

    #hoverbox {
        width: 100%;
        max-width: 525px;
    }

    #hoverboxtop {
        width: 100%;
        max-width: 525px;
    }

    #hoverboxdesc {
        width: 100%;
        max-width: 505px;
    }

    #hoverboxbot {
        width: 100%;
        max-width: 525px;
    }

    .islholder {
        width: 70%;
    }

    .bookingheader {
        top: -93px;
        left: 0px;
    }

    .ticketheadertype {
        float: left;
    }

    #contentouter {
        box-sizing: border-box;
        padding: 0 10px;
        background: #f0f3f7;
    }
}

@media (max-width: 555px) {
    #nextdayform {
        display: inline-block;
        margin: 10px 0;
    }

    #bookingstepsouter {
        height: 280px;
        box-sizing: border-box;
    }

    .bookingstepsholder {
        box-sizing: border-box;
    }

    #bkgstep1, #bkgstep2 {
        width: 45%;
        box-sizing: border-box;
    }

    #bkgstep1 {
        padding-left: 35px;
    }

    #bkgstep2 {
        padding-right: 35px;
    }

    #bkgstep3, #bkgstep4, #bkgstep5 {
        width: 30%;
    }

    .headerblock2 a {
        font-size: 15px;
    }

    #stholder {
        width: 95%;
        margin: 0 auto;
        right: 1%;
    }

    #contactinfoside {
        padding-top: 25px;
    }

    #contactformside {
        padding: 0px;
    }

    #contactform {
        margin: 0;
        max-width: unset;
        padding: 11px;
    }

    #twentythanniv {
        top: 20px;
        width: 15%;
    }

    .bookingstepdesc {
        font-size: 14px;
    }

    .tblflexitem.grow3 {
        width: 100%;
    }

    #ilb, #celebrates {
        width: 95%;
    }

    #pricingimg {
        padding-left: 10px;
    }

    #nodesholder {
        display: block;
    }

    #routeavailholder {
        width: 100%;
        display: block;
    }

    #nodeholder {
        width: 100%;
    }


    #conflabel {
        padding: 5px;
        width: 25%;
    }

    #confinput {
        padding: 5px;
        width: 70%;
    }

    #tnlabel {
        width: 90%;
        padding: 5px;
        text-align: left;
    }

    #tnarea {
        width: 90%;
        margin: 0 5%;
    }


    #bookingbuttonholder {
        bottom: 0px;
        margin-top: 0px;
    }

    #ana {
        display: none;
        width: 0px;
    }

    #ipointdateheading, #ipointdescheading, #ipointtransheading, #ipointamountheading {
        font-size: 13px;
    }

    #ipointdate, #ipointdesc, #ipointtrans, #ipointamount, #ipointamountred {
        font-size: 13px;
    }

    #hoverbox {
        width: 100%;
        max-width: 425px;
    }

    #hoverboxtop {
        width: 100%;
        max-width: 425px;
    }

    #hoverboxdesc {
        width: 100%;
        max-width: 405px;
    }

    #hoverboxbot {
        width: 100%;
        max-width: 425px;
    }

    #loginusernamelabel, #loginusername, #loginpassword, #loginpasswordlabel {
        width: 100%;
        text-align: center;
        margin: 0 0 10px 0;
    }

    #newuserlabel, #newuserfield {
        width: 100%;
        text-align: center;
        margin: 0 0 10px 0;
    }
    /*header{height:160px;}*/
    #loginusername {
        padding-top: 10px;
    }

    #logobargradlt, #logobargradrt {
        width: 100%;
    }

    #logobargradrt {
        top: 60px;
    }

    #logobargradlt2, #logobargradrt2, #logobargradcnt2 {
        width: 100%;
        right: 0px;
    }

    #logobargradcnt2 {
        top: 60px;
        left: 0;
        right: 0px;
    }

    #logobargradrt2 {
        top: 120px;
        right: 0px;
        height: 57px;
    }

    #islexpresslogo2, #isllogo2, #tofinoexpresslogo2 {
        top: 10px;
        left: 0px;
        right: 0px;
    }

        #islexpresslogo2 img, #isllogo2 img {
            width: 75%;
            padding-left: 5px;
        }

        #islexpresslogo2 img {
            width: 92%;
        }

    #logobardivider, #logobarrightdivider, #logobarleftdivider {
        display: none;
    }

    #mobilemenubtn {
        top: -90px;
    }

    .islholder {
        width: 50%;
    }

    #navholder {
        /*top: 0px;*/
    }

    nav {
        width: 100%;
    }
}

@media (max-width: 462px) {
    #mobilemenubtn {
        top: -70px;
    }

    .newuserwrapper, .existinguserwrapper {
        max-width: 350px;
    }

    #content {
        padding: 0px 5px;
    }

    #contentinner {
        padding-left: 5px;
    }

    .tblbookingroutes .routes_rname {
        width: 100%;
        display: block;
        position: relative;
        padding: 5px 5px 0 0;
        float: left;
    }

    .routeavail {
        height: 30px;
        width: 100px;
        border-radius: 5px;
        padding: 5px;
        margin: 0;
    }

    .routeavailtoday {
    }

    #bookingstepsouter {
        height: 450px;
    }

    .bookingheader {
        top: -126px;
        left: 0px;
    }

    #bkgstep3, #bkgstep4, #bkgstep5 {
        width: 33%;
        height: 85px;
        float: left;
    }

    .bookingstepbackground {
        margin: 10px;
        display: inline-block;
        height: 58px;
        width: 58px;
        vertical-align: middle;
    }

    .headerblock1, .headerblock2 { /*width: 48%;*/
        padding-bottom: 10px;
    }

        .headerblock2 #freewifi, .headerblock2 #fragrancefree {
            width: 150px;
        }

    #footerlogo {
        width: 100%;
        max-width: unset;
        min-width: unset;
    }

    .accountheader {
        display: inline-block;
        text-align: left;
        padding-right: 22px
    }

    .headerblock2 a {
        font-size: 15px;
    }

    header { /* height: 130px;*/
    }

    #bkgstep1, #bkgstep2, #bkgstep3, #bkgstep4, #bkgstep5 {
        width: 100%;
        display: inline-block;
        height: 80px;
        position: relative;
        padding: 5px;
        box-sizing: border-box;
    }

    .bookingstepdesc {
        vertical-align: middle;
        width: 50%;
        font-size: 18px;
        display: inline-block;
    }

    .bookingheader h2 {
        font-size: 35px;
        margin: auto;
    }

    .bookingheader h3 {
        font-size: 30px;
    }

    #opt1holder {
        width: 100%;
    }

    #policy {
        font-size: 18px !important;
    }

    .formlabel {
        font-size: 17px;
    }

    .reservefront {
        width: 100%;
    }

    #opt1holder, #opt2holder {
        padding-left: 10px;
    }

    .tblbookingroutes .routes_pickupdropoff {
        width: 100%;
        padding: 10px 0 10px 0;
    }

    .isl {
    }

    #footercontactinfo {
        width: 100%;
    }

    .stepheading {
        width: 100%;
    }

    #wifi {
    }

    #twentythanniv {
        top: 20px;
        width: 20%;
    }

    .optionfont, .optionnodepricing {
        font-size: 16px;
        padding: 0;
    }

    .bookingheadertype-l {
        top: 72px;
    }

    .nodesheader {
        font-size: 22px;
    }

    .traveldate {
        display: inline-block;
    }

    .routeoptions {
        font-size: 18px;
    }

    #ticketoptionholder {
        width: 100%;
        text-align: center;
    }

    .ticketoption {
        width: 100%;
        max-width: 250px;
    }

    #accountstep1, #accountstep2, #accountstep3, #accountstep4, #accountstep5 {
        width: 100%;
        display: inline-block;
        height: 100px;
        position: relative;
    }
    /*#accountstep1::after{content:'Buy iPOINTS';}
#accountstep2::after{content:'My Tickets';}
#accountstep3::after{content:'My Profile';}
#accountstep4::after{content:'My iPOINTS';}
#accountstep5::after{content:'Submit Comments';}*/
    .accountstepdesc {
        width: 50%;
        position: absolute;
        bottom: 25px;
        left: 90px;
        font-size: 20px;
    }

    .accountstepbackground {
        margin: 10px;
        display: inline-block;
        height: 80px;
        width: 80px;
    }

    .accountstepactive1, .accountstepactive2, .accountstepactive3, .accountstepactive4, .accountstepactive5 {
        width: 72px;
        height: 72px;
        font-size: 16px;
    }

    .ipointsimg_buy, .ipointsimg_history, .accountimg {
        max-width: 78px;
        vertical-align: middle;
    }

    #stepspan {
        top: 8px;
    }

    #accountstepsouter {
        height: 575px;
    }

    #hoverbox {
        width: 100%;
        max-width: 275px;
    }

    #hoverboxtop {
        width: 100%;
        max-width: 275px;
    }

    #hoverboxdesc {
        width: 100%;
        max-width: 255px;
    }

    #hoverboxbot {
        width: 100%;
        max-width: 275px;
    }

    .contactlabel {
        width: 100%;
        text-align: center;
        margin: 0 0 5px;
    }

    .contactfield {
        width: 100%;
        text-align: center;
    }

    .optionnodepricingtoday {
        width: 10%;
    }
}

@media (max-width: 385px) {
    #topbar {
        top: -100px;
    }

    #topbarlt {
        top: 0;
    }

    #logobar {
        margin-top: 120px;
    }

    .newuserwrapper, .existinguserwrapper {
        max-width: 250px;
    }

    #newuserlabel, #newuserfield {
        width: 100%;
        text-align: center;
    }

    #loginusernamelabel, #loginusername, #loginpassword, #loginpasswordlabel {
        width: 100%;
        text-align: center;
        margin: 0 0 10px 0;
    }
}