/*----------------------------------------Pricing Page Mobile----------------------------------------*/
/*----------------------------------------Pricing Page Mobile----------------------------------------*/
/*----------------------------------------Pricing Page Mobile----------------------------------------*/

/* General */
@media only screen and (max-width: 800px){
    main{
        max-width:100vw;
    }

    main section{
        max-width:100%;
    }

    .hiddenMobileBr{
        display:none !important;
    }

    .mobileCenteredText{
        text-align:center !important;
    }
}

/* Testimonial Section */
@media only screen and (max-width: 800px){
    .testimonial section{
        padding:20px;
        width:calc(100% - 40px);
    }

    .testimonial section .titleWithIcon h3{
        bottom:unset;
        right:unset;
        border-bottom:none;
        padding:10px 0px;
        padding-top:0px;
        font-size:25px;
        display:block;
    }

    .titleWithIcon .underHeaderLine{
        display:block;
        border:3.5px solid #0081ff;
        border-radius:20px;
        margin:0px;
        width:60%;
        max-width:177px;
    }

    .testimonial section .testimony{
        bottom:unset;
        left:unset;
    }

    .testimonial section .testimony .paragraph{
        font-size:18px;
        text-align:left;
    }

    .testimonial section .testimony .paragraph br{
        display:none;
    }

    .testimonial section .testimony .signature{
        padding:20px 0px;
    }
}

@media only screen and (max-width: 800px) and (min-width: 500px){
    .testimonial{
        padding-top:130px;
    }

    .titleWithIcon .underHeaderLine{
        max-width:60%;
    }
}

@media only screen and (max-width: 420px){
    .testimonial{
        padding-top:60px;
    }
}

/* Main Pricing Page */
@media only screen and (max-width: 800px){
    .mainPricingPageHeader{
        font-size:40px;
    }
    
    .mainPricingPageSubHeader{
        font-size:20px;
    }
    img.floating-img {
        display: none !important;
    }
    .pricingOptionBoxes{
        padding:20px;
        width:calc(100vw - 40px - 30px - 4px);
    }
    
    .pricingOptionBoxes .title{
        font-size:70px;
    }

    #content.pricingPage section{
        padding-bottom:0px;
        margin-top: 0px;
    padding-top: 40px;
    }
}


@media only screen and (max-width: 320px){
    .mainPricingPageHeader{
        font-size:25px;
    }
    
    .mainPricingPageSubHeader{
        font-size:15px;
    }

    .pricingOptionBoxes .title{
        font-size:60px;
    }
    .collapsingDiv .title{
        font-size: 13px;
    }
}

/* Addons Section */
@media only screen and (max-width: 800px){
    .addonTitle{
        text-align:center !important;
        padding:0px 15px !important;
    }

    .addonBoxes{
        width:calc(100%/2 - 8px - 10px);
        height:176px;
    }

    .addonBoxes div{
        height:40px;
    }

    .addonsContainer{
        width:calc(100% - 30px);
        padding:0px;
    }

    .addonsContainer .addonBoxes:nth-child(odd){
        margin-right:20px !important
    }

    .addonsContainer .addonBoxes:nth-child(even){
        margin-right:0px !important
    }

    .addonBoxes .whiteCheck{
        bottom:24px;
        height:120px;
    }

    .packagesHeader{
        text-align:center;
        padding-top:30px !important;
        padding-bottom:0px !important;
    }
}

@media only screen and (max-width: 320px){
    .addonBoxes{
        width:calc(100%/2 - 8px - 10px - 10px);
        height:190px;
    }

    .addonBoxes div{
        height:60px;
    }

    .addonBoxes .whiteCheck{
        bottom:220px;
        height:120px;
    }
}

/* Kick Start Page */
@media only screen and (max-width: 800px){
    .pricingPage.brownBg{
        background-color:white;
    }

    .pricingPage.brownBg.kickStart,
    .pricingPage.brownBg.kickStart section{
        background:white;
    }

    .pricingPage.brownBg.kickStart{
        display:inline-block;
    }

    .pricingPage.brownBg.kickStart section{
        text-align:center;
    }

    .pricingPage.brownBg.kickStart .leftSide,
    .pricingPage.brownBg.kickStart .rightSide{
        float:unset;
        width:calc(100% - 40px);
        margin:auto
    }

    .pricingPage.brownBg.kickStart .leftSide{
        padding-top:0px;
    }

    .pricingPage.brownBg.kickStart .leftSide table{
        padding:0px !important;
    }

    .pricingPage.brownBg.kickStart .leftSide h3{
        font-size:35px;
    }

    .pricingPage.brownBg.kickStart .rightSide{
        max-height:434px !important;
        padding:20px;
        padding-bottom:0px;
        margin:0px;
        right:unset;
    }

    .packageTable th{
        padding:10px !important;
    }

    .packageTable td{
        padding:10px !important;
        padding-top:15px !important;
    }
}

/* Pricing Orders Page */
@media only screen and (max-width: 800px){
    /* User Number Section */
    .userNumberLabel{
        display:block;
        width:100%;
        margin:0px;
    }

    .basicPricingSettings{
        width:calc(100% - 40px - 40px);
        margin:0px 20px;
        text-align:left;
    }

    .basicPricingSettings .userNumber,
    .basicPricingSettings .options,
    .basicPricingSettings > .defaultCheckbox{
        margin-top:20px;
        margin-bottom:10px;
    }

    .basicPricingSettings .userNumber,
    .basicPricingSettings .options{
        margin-right:15px;
    }
    
    .basicPricingSettings .userNumber{
        width:10px;
    }

    /* Order Table */
    .orderDetails{
        width:calc(100% - 40px);
    }

    .orderDetails .title:first-child{
        padding:20px 10px;
    }

    .orderDetails .title:first-child h3{
        font-size:20px;
        font-weight:bold;
    }

    .orderDetails .title:first-child .button{
        font-size:13px;
        width:70px;
    }

    .orderDetails .features{
        padding:10px;
    }
    .orderDetails .collapsingDiv {
        padding: 2px 0px 6px 12px;
    }
    .orderDetails .features .collapsingDiv .collapser{
        top:unset;
        bottom: -4px;
        left: 32px;
    }

    .orderDetails .features .collapsingDiv .title{
        padding:10px;
    }

    .orderDetails .features .collapsingDiv .title span span:first-child{
        width:50%;
    }

    .orderDetails .features .collapsingDiv .title span span:first-child .userCount{
        width:auto !important;
    }

    .orderDetails .features .collapsingDiv .title span > span:last-child{
        width:calc(18% + 8px) !important;
    }
    .basicPricingSettings .userNumber{padding: 10px 12px;}

    .features .whiteContent{
        margin-top:28px;
    }

    .desktopTable{
        display:none;
    }

    .mobileTable{
        display:table;
    }

    .mobileTable:not(.totalPrice) td{
        position:relative;
        right:3px;
    }

    .features hr{
        position:relative;
        right:10px;
        width:calc(100% + 20px);
    }

    .features .addOnOrPackage .name{
        width:60%;
    }

    .features .addOnOrPackage .price{
        width:calc(40% - 20px);
    }

    .features .addOnOrPackage .remove{
        width:20px;
    }

    .orderDetails .totalPrice.mobileTable{
        padding:10px;
    }

    .orderDetails .totalPrice .addOnOrPackage .name{
        width:60%;
    }

    .orderDetails .totalPrice .addOnOrPackage .total{
        width:40%;
    }

    .pricingBlueButton{
        margin-top:10px;
        padding:10px 20px;
    }
}

@media only screen and (max-width: 800px) and (min-width: 500px){
    .orderDetails .features .collapsingDiv .collapser{
        top:unset;
        bottom:unset;
    }
}

@media only screen and (max-width: 320px){
    /* User Number Section */
    .basicPricingSettings{
        width: calc(100% - 40px - 20px);
        padding: 10px;
    }
    
    .basicPricingSettings .userNumber,
    .basicPricingSettings .options,
    .basicPricingSettings > .defaultCheckbox{
        margin-right:5px;
    }
}

/* Packages Table  */
@media only screen and (max-width: 800px){
    .defaultTable.centeringPadding.packageTable.threeColumn .collapsingDiv .title .collapser{
        margin:0px;
    }

    .hiddenForMobile{
        display:none !important;
    }
}

@media only screen and (max-width: 425px){
    .packageTable tr .collapsingDiv .title span:last-child,
    .packageTable tr td:nth-child(2),
    .defaultTable.centeringPadding.packageTable .collapsingDiv .content ul{
        font-size:13px;
    }
    .collapsingDiv .title span {
        display: unset;
        font-size: 14px;
    }
    .pricing_p{
        padding-right: 13px;
        padding-left: 15px;
    }

    .defaultTable.centeringPadding.packageTable .collapsingDiv .collapser{
        font-size:25px;
    }

    .defaultTable.centeringPadding.packageTable tr td:nth-child(2){
        min-width:60px;
        padding-top:17px !important;
    }

    .pricingPage.brownBg.kickStart .rightSide{
        padding-bottom:0px;
    }
}

@media only screen and (max-width: 320px){
    .defaultTable.centeringPadding.packageTable .collapsingDiv .content ul{
        margin-left:0px;
        width:100px;
    }

    .defaultTable.centeringPadding.packageTable.threeColumn .collapsingDiv .content ul{
        padding:0px;
        position:relative;
        left:20px;
    }

    .defaultTable.centeringPadding.packageTable.threeColumn td > .defaultCheckbox{
        width:14px;
        height:14px;
        padding:3px;
    }

    .defaultTable.centeringPadding.packageTable.threeColumn td > .defaultCheckbox > .defaultCheckbox{
        top:1px;
        width:10px;
        height:10px;
    }

    .pricingPage.brownBg.kickStart .rightSide{
        padding-bottom:80px;
    }
}

/* Checkout Page */
@media only screen and (max-width: 800px){
    .checkoutMain section > h3:first-child{
        padding:0px 15px !important;
        text-align:left;
    }

    .checkoutMain #skyForm form{
        padding:0px 15px;
        width:calc(100% - 30px);
    }

    .halfGrayBackground{
        display:none;
    }

    .checkoutMain .halfWhite,
    .checkoutMain .halfGray{
        float:unset;
        padding:0px;
        width:100%;
    }

    .checkoutMain .halfWhite input,
    .checkoutMain .halfGray input{
        margin-left:0px !important;
        margin-right:0px !important;
    }

    .checkoutMain .halfWhite input{
        width:calc(100% - 30px) !important;
    }

    .checkoutMain .websiteDiv .mainInput{
        border-radius:5px 0px 0px 5px;
        width:calc(97% - 25px - 130px) !important;
        right:unset;
    }

    .checkoutMain .websiteDiv .example{
        padding-right:10px;
    }

    .checkoutMain .halfGray{
        width:calc(100% + 30px);
        position:relative;
        right:15px;
        padding:15px;
        padding-top:30px;
        padding-bottom:60px;
        margin-top:15px;
    }

    .checkoutMain .halfGray input{
        width:calc(100% - 30px - 30px) !important;
    }

    .checkoutMain .pricingBlueButton{
        width:calc(100% - 40px) !important;
    }
}