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

    * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .desktop{ display: none; }
    .d-hide{ display: block; }

    .container {
        min-width: initial;
        margin: 0;
        width: 100%;
    }

    select{
        /*background: #f7faff;*/
        /*background: -webkit-gradient(linear,center top,center bottom,from(#fff),to(#f6fbfd));*/
        /*background: -moz-linear-gradient(top,#fff 0,#f6fbfd 100%);*/
        /*background: linear-gradient(top,#fff,#f6fbfd);*/
        -webkit-box-shadow: 0 1px 3px 0 #AAA;
        -moz-box-shadow: 0 1px 3px 0 #AAA;
        box-shadow: 0 1px 3px 0 #AAA;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
        font-size: 26px;
        min-width: 60px;
        margin:0;
        margin: 4px 0;
    }
    .bdayField select{ min-width: 120px; margin-right: 7px; }
    .bdayField select.short{ min-width: 68px; }
    .fullWidthMobile select{ width: 100%; }


    .menuIcon{ font-size: 34px; padding: 10px; float: left; }
    .searchIcon{ font-size: 34px; padding: 10px; float: right; }

    nav .d-hide{ display: block; }

    .pageWrapper, .separateWrapper{ width: auto; padding: 0; }
    .pageWrapper .pageContent, .separateWrapper .pageContent{ margin: 25px 0px 25px 0px; }
    .separateWrapper .pageContent{ padding: 20px 10px; }
    .pageHeader{ padding-bottom: 25px; }
    .pageHeader h1{ font-size: 20px; padding-bottom: 20px; }

    .pageContent nav ul li{
        font-size: 10px;
        font-weight: bold;
        line-height: 12px;
        padding: 10px 12px;
    }
    .pageContent nav ul li a:hover{ text-decoration: none; }

    .pageContent section.main{ padding: 25px 0 0 0; }
    .pageContent section.main .titleWrapper { padding: 0px 10px 25px 10px; }
    .pageContent section.main .titleWrapper .title{ width: 100%; }
    .pageContent section.main .titleWrapper .title h1{ font-size: 20px; line-height: 24px; }
    .pageContent section.main .titleWrapper .icon{ display: none; }
    .pageContent section.main .titleWrapper p{ font-size: 12px; line-height: 16px; padding-top: 12px; }

    .pageErrorTxt{ width: 88%; }

    .centerLogo{ width: 180px; margin-top: 20px; margin-bottom: 0; }
    .centerLogo img{ width: 180px; height: auto; }

    .additionalInfo { padding: 20px 10px 15px 10px; }
    .additionalInfo > .mdxIcon{ padding-left: 0; padding-right: 6px; }
    .additionalInfo > span{ width: 87%; font-size: 12px; line-height: 16px; padding-top: 0; }

    .titleCat{ font-size: 16px; padding: 15px 10px 15px 10px; }

    .itemList{ padding: 20px 10px 25px 10px; }
    .itemList img{ width: 100%; padding-top: 0; }
    .itemCon h3{ font-size: 16px; line-height: 20px; }
    .itemCon{ width: 100%; padding: 10px 0 25px 0; }
    .itemCon p{ font-size: 12px; line-height: 20px; padding-top: 10px; }
    .itemPrice{ width: 100%; padding: 0 0 0 10px; }

    .priceType{ width: 120px; padding: 10px 0 0 0; }
    .amt { font-size: 24px; }
    .notAva{ margin: 0; padding: 0 20px; line-height: 18px; }

    .sectionTitle{ font-size: 24px; padding-left: 10px; }

    #ticketBuilderWrapper{ width: 100%; padding-bottom: 15px; }
    .mainContent{ display: block; }
    .ticketColumn{ display: block; }
    #leftSection{ width: 100%; }
    #leftConSection{ width: 100%; }

    #ticketBuilderSubTotalContainer{ padding: 0 0 5px 0; }
    .ticketColumn p{ font-size: 12px; /*color: #768aa0;*/ }

    .ticketInfo{ width: 100%; }
    .ticketCheckOutMobile{ height: 120px; }

    .reviewLine{ display: block; }

    .bookingInfoSection{ padding: 25px 10px 30px 10px; }
    .bookingInfoSection legend{ font-size: 44px; padding-right: 12px; }
    .bookingInfoSection h2{ padding-bottom: 0; vertical-align: inherit; }
    .bookingInfoSection .titleDesc{ padding-top: 15px; padding-left: 0px; }
    .bookingStepSection .titleDesc{ padding-top: 15px; padding-left: 0px; }

    .bookingStepSection{ padding: 20px 15px 25px 15px; }
    .bookingStepSection legend{ font-size: 44px; padding-right: 8px; }
    .bookingStepSection .ticketOptions, .bookingStepSection .optionContent{
        margin-left: 0;
        width: 100%;
    }
    .bookingStepSection.fpo h2{ padding-left: 0; padding-bottom: 0; }

    .rightConColumn{ padding: 25px 15px; }

    .sectionHead{ display: table; }
    .subflowInstructionsWrapper{ padding-left: 0; }

    .pageContent h2{ line-height: 22px; }
    .pageContent .sginLeft h2{ font-size: 24px; font-weight: 200; }
    .pageContent section.main .titleWrapper .title h1{ margin-bottom: 0; }
    .ageGroup{ margin-left: 0; }
    .ageGroup .ageGroupPart{ width: 100%; margin-top: 15px; }

    .warningWrapper{ display: none; width: 100%; }

    .longDesc{ padding: 15px 0 0 0; }
    .longDesc .header{ padding-bottom: 0; }
    .longDesc .header .title{ width:75%; font-size: 12px; line-height: 16px; }
    .longDesc .header .mdxIcon{ font-size: 40px; line-height: 32px; padding-right: 10px; }

    .photoPassOption .optionInfo{ display: block; }
    .photoPassOption .optionInfo label{ width: 50%; }
    .photoPassOption .optionInfo p{ width: 92%; }
    .photoPassOption .optionInfo label, .photoPassOption .price{ font-size: 12px; line-height: 20px; }
    .photoPassOption{ padding-top: 12px;}
    .photoPassOption .price{ padding-top: 3px; }

    .mealPart label{ font-size: 12px; width: 40%; display: inline-block; }
    .mealPart select{ min-width: 50px; }
    .optionContent .details .subtotal{ font-size: 12px; margin-top: -2px; }

    .fieldRow, .purchaseInfo{ padding: 15px 0 0 0; }
    .accordionWrapper .fieldRow{ padding: 5px 0 0 0; }
    .accordionWrapper .sameAddr{ padding: 20px 0 10px 0; }
    .accordionWrapper.last { padding-bottom: 0; }
    .fieldRow .longInputText label{ width:82%; line-height: 25px; }

    span.hitTxt.specialSpace{ width: 100%; display: block; }
    .separateTerms{ padding-top: 25px; }
    .buttonRow{ float: none; padding: 25px 0; }
    .button.whiteCancel{ width: 110px; }

    .viewDetail{
        width: 100%;
        display: inline-block;
        padding-top: 25px;
    }
    .viewDetail .mdxIcon{ font-size: 18px; line-height: 18px; display: inline-block; }
    .viewDetail a{ font-style: italic; }

    input, select{ font-size: 14px; padding: 5px 0px 4px 6px; }
    .sumWrapper{ padding: 20px 0 0 8px; }
    .sumWrapper h2{ font-size: 20px; }
    .sumWrapper h3{ font-size: 14px; }
    .sumList{ padding: 0 10px 30px 10px; }
    #leftSection .sumList .icon{ font-size: 24px; padding-top: 20px; }
    #leftConSection .sumList .icon{ font-size: 24px; padding-top: 20px; }
    .sumInfo{ font-size: 14px; line-height: 20px; }
    .sumBox .sumInfo{ font-size: 14px; width: 50%; }
    .requiredTxt{ padding-left: 5px; }

    .inputBox{ display: block; padding-top: 10px; padding-bottom: 10px; }
    .inputBox input.inputElement, .sms .inputBox input.inputElement, .emailRadio .inputBox input.inputElement{ width: 100%; }
    .fpo input.inputElement{ width: 100%; }

    .passwordInfo .rightPad{ padding-right: 0; }
    .fieldRow .rightPad{ padding-right: 0; padding-bottom: 10px; }

    .inputBox .ui-button{ margin-right: 0; width: 100%; }
    .fpotitle .ui-button{ width: 100%; }
    .fporesid .ui-button{ width: 100%; }

    .inputBox input[type="text"].short{ width: 100%; }
    .inputBox input[type="text"].medium{ width: 100%; }
    .inputBox input[type="text"].long{ width: 100%; }

    .checkboxWrapper .fieldRow, .checkboxWrapper .purchaseInfo{ padding: 25px 0 0 0; }
    .checkboxWrapper .inputBox input.inputElement{ width: 100%; }

    .conQR{ float: left; padding-right: 15px; }
    .conLeftList{ width: 100%; float: inherit; padding: 25px 15px 20px 15px; }
    .conLeftList h2{ font-size: 20px; font-weight: 200; line-height: 24px; }
    .conList span{ font-size: 12px; }
    .conList h4{ font-size: 12px; }
    .conList li{ font-size: 12px; }
    .conRightList{ width: 100%; float: inherit; }
    .conNumber{ font-size: 16px; padding-bottom: 0; }
    .conList .sumRemark, .conList .sumRemarkTxt{ font-size: 12px; }

    .conNorList{ padding: 25px 15px; }
    .conNorList h2{ font-size: 20px; font-weight: 200; line-height: 24px; }
    .conNorList p{ font-size: 12px; line-height: 20px; }
    .calendarImg{ display: none; }
    .whatsnext{ padding: 3px 3px 0 3px; }
    .whatsHeader{ padding: 7px; padding-bottom: 10px; }
    .whatsHeader h2{ font-size: 20px; font-weight: bold; padding-bottom: 0; }
    .whatsHeader p{ font-size: 12px; line-height: 16px; padding-top: 12px; }
    .whatsList{ padding: 30px 10px 0 10px; }
    .whatsList .icon{ font-size: 25px; line-height: 26px; margin-top: 0; }
    .whatsCon{ width: 80%; padding: 0 0 30px 10px; }
    .whatsCon h3{ font-size: 20px; font-weight: normal; line-height: 26px; padding-bottom: 10px; }
    .whatsCon p{ font-size: 12px; line-height: 16px; }

    .conMainTitle{ font-size: 12px; }
    .barcode2D .conMainTitle{ padding-top: 8px; }

    .radioBottomPad{ padding-bottom: 30px; }
    .fourSelect{ padding-top: 20px; }
    .fourSelect label{ padding-bottom: 12px; }
    .fourSelect .childAge label{ font-size: 12px; padding-bottom: 0; }
    .fourSelect .childAge select{ margin-right: 5px; }

    .accordionWrapper .fieldGroupTitle{ padding-top: 20px; }
    .selectedTime{ width: 100%; }

    .ticketBuilderTitle{ font-size: 14px; }
    .reviewTicketDetails{ padding: 15px 0 0 0; }
    .reviewTickets{ padding-bottom: 15px; }
    #reviewTicketBuilderTotalContainer{ font-size: 12px; padding: 15px 0 0 0; }

    .TNCWrapper{ padding: 20px 10px; }
    .TermCond{ padding: 20px 0 20px 10px; line-height: 18px; }
    .TermCond .errorMessage{ padding-right: 10px; }
    .agreeTxt{ width: 85%; }
    .sumRemark{ padding-top: 10px; }
    .sumRemarkTxt{ color: #1994d7; }
    .TermUse .useTxt{ width: 92%; }
    .TNCWrapper p{ padding-bottom: 0; }

    .number .ui-button.ui-selectmenu-button .ui-selectmenu-text, .bookingStepSection .number .ui-button.ui-selectmenu-button .ui-selectmenu-text{ width: 40px; }

    .footerMore{ padding: 10px 7px; }
    a div.footerMore{ color: #253b56; }
    a div.footerMore:hover{ color: #1994d7; text-decoration: none; }
    .pageContent .footerIcon{ display: inline-block; }
    .footerMoreTxt{ font-size: 12px; font-weight: bold; display: inline-block; }

    .importantDetails{ padding: 10px; padding-bottom: 15px; }
    .importantDetails .item{ width: 100%; }
    .warningDetails{ padding-left: 0; padding-top:5px; }

    /* Theme Ticket section*/
    .arrowPrev, .arrowNext { display: none;}
    .packageContainer { padding: 10px;}
    .packageContainer .packageWrapper { margin: 0; width: 100%; height: auto; overflow: visible;}
    .packageWrapper .packageInner { position: relative; padding-bottom: 10px; }
    .packageContainer .package { padding: 15px 10px 5px 10px; width:auto; min-height: 0px; }
    .packageContainer .packageWrapper li { width: 100%; display: block;}
    .package .desc{ font-size: 14px; }
    .package .details { width: 80%; }
    .packageContainer.collapse .package { display: none; }
    .packageContainer.collapse .package.selected { display: block; }

    .packageContainer .toggle{ display: block; }
    .bookingStepSection .ticketOption{ float:none; padding: 10px 0px 0px 45px; width: 100%; display: inline-block;}
    .ticketOptions .invalidDate label { font-size: 14px; }
    .ticketOption .item { margin-bottom: 0px;}
    .ticketOptions .ticketOption .ageScope span { display: inline; }
    .ticketOptions .ticketOption .price { padding-top: 0px; margin-bottom: 0px; }
    .ticketOptions .horizontalSeparator { display: none; }
    .ui-dialog{ border-radius: 0; top:0; }


    /*---popup---*/
    .ui-dialog .ui-dialog-titlebar{ padding: 20px 20px 30px 20px; }
    .modalContent h2{ font-size: 14px; }

    .ui-dialog{ width: 100%;    !important }
    .ui-dialog.ELM{ width: 100%; !important }
    .popImgHeader img{ width: 100%; }
    #enhancedLearnMoreContent{ padding: 30px 10px; min-height: 468px; }
    .popImgContent h1{
        font-size: 20px;
        font-weight: normal;
        padding-bottom: 8px;
    }
    .popImgContent p{ font-size: 12px; }
    #enhancedLearnMoreContent .disclaimer p{ line-height: 18px; }
    .mobileLearnMoreContent{
        margin-top: 15px;
    }
    .mobileContentBlock{ padding: 10px 0; }
    .mobileContentBlock .mdxIcon{ display: inline-block; font-size: 17px; line-height: 28px; }
    .mobileLearnMoreContent .headerWrapper h2{ display: inline-block; font-size: 18px; width: 90%; }
    .mobileContentBlock .headerWrapper h2:before{  display: inline-block;
        font-weight: normal;
        padding-right: 8px;
        content: "\E316";
        font-family: "pepmdx";  }
    .mobileContentBlock.collapse .headerWrapper h2:before { content: "\E30E"; }
    .mobileContentBlock p, .mobileContentBlock h3{ padding-left: 24px; padding-right: 20px; }
    .mobileContentBlock h3{ padding-top: 20px; font-weight: bold; }
    .mobileContentBlock p{ padding-top: 5px; padding-bottom: 5px; }
    .mobileContentBlock.collapse .details {display: none;}
    .mobileContentBlock .details {display: block;}

    .ui-dialog.tnc { height: 100%;}
    .ui-dialog.tnc .modalOverlay.ui-dialog-content{
        display: block; width: 100%; min-height: 0px; max-height: none; height: 71%;
    }

    .ui-dialog.tnc .closeButtonContainer{
        position: fixed;
        bottom: 0px;
        width: 100%;
    }

    .ui-dialog.tnc .modalContent { max-height: none; height: 100%;}

    .closeButtonContainer button > span{ min-width: 90px; }

    .mobileImportantDetails{ padding: 0 20px; }
    .mobileImportantDetails .item .mdxIcon{
        font-size: 20px;
        line-height: 20px;
        display: inline-block;
    }
    .mobileImportantDetails .item .warningHead{
        font-size: 12px;
        font-weight: bold;
        padding-bottom: 20px;
    }

    .mobileImportantDetails .item .warningDetails{
        padding-bottom: 25px;
    }

    .sginLeft{ width: 100%; padding-right: 0; padding-bottom: 30px; }
    .sginLeft .inputBox input.inputElement{ width: 100%; }
    .sginLeft .checkBlock .forgetText{ float: right; display: inline-block; }
    .sginLeft .checkBlock .checkText{ display: inline-block; }

    .sginLeft .button.primary{ width: 110px; }

    .sginRight{ width: 100%; padding-left: 0; }
    .remindItem.first{ padding-top: 30px; padding-bottom: 30px; }

    .ui-dialog.waitBox{ width: 100%; height: 100%; }
    .waitContainer{ padding: 75px 20px 30px 20px; text-align: center; }
    .waitImg{ padding-right: 0; }
    .waitContent{ width: 100%; padding-right: 0; }
    .waitContent h2{ padding-bottom: 10px; }
    .waitText{ font-size: 12px; padding-top: 0; }

    /*---end popup---*/
}