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

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

    main section{
        max-width:100%;
    }

    .hiddenMobileBr{
        display:none !important;
    }
    .hiddenDesktop{
        display: block !important;
    }
    .mobileCenteredText{
        text-align:center !important;
    }
    .pricingPage.brownBg.kickStart {
        padding-bottom: 50px;
    }
}

/* 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:27px;
    }
    
    .mainPricingPageSubHeader{
        font-size:14px;
        height: 70px;
        line-height: 32px;
    }
    img.floating-img {
        display: none !important;
    }
    .pricingOptionBoxes.col-lg-4 {
        width: 92%;
    }
    .plus_option_img {
        margin: 0px 0px 0px 0px;
        width: 60%;
    }
    img.plus_option_img.forsalemobile{
        width: 83% !important;
    }
    h2.accr_kickpkg {
        font-size: 20px;
    }
    .pricingPage .col-lg-3.col-md-6 {
        width: 50%;
        margin-bottom: 15px;
    }
    .plus_option_text_below{
        padding: 0 60px;
    }
    .col-md-4.textLeft.professionalServices {
        max-width: 98%;
        flex: 0 0 100%;
    }
    .professionalServices{
        margin-left: 4px;
    margin-top: 26px;
    padding: 35px 2px 25px 40px;
    }
    .sky_why {
        font-size: 24px;
        letter-spacing: 1px;
        line-height: 32px;
    }
    .pricingPage .card-body.plus_option{
        padding: 1rem 2rem;
    }
    .card.why_crm_card {
        margin-top: 22px;
    }
    #accordion .accordion-title{
        padding: 12px 86px 12px 60px !important;
        line-height: 20px !important;
    }
    #accordion .accordion-title i{
        top: -5px !important;
    }
    #accordion .accordion-title span {
        margin-right: 16px !important;
        line-height: 30px !important;
        top: 10px;
        position: absolute;
        right: 0px;
    }
      [data-toggle="collapse"] i:before {  
            margin-top: 10px;
    }
    .plus_option_text {
        font-size: 16px;
        letter-spacing: 0px;
        line-height: 21px;
     }  
     p.plus_star {
        font-size: 13px;
        padding-top: 5px;
    }

    .pricingOptionBoxes{
        padding:0px;
        width:calc(110vw - 40px - 30px - 4px);
        margin: 16px 15px !important;
    }
    
    .pricingOptionBoxes .title{
        font-size:70px;
    }

    #content.pricingPage section{
        padding-bottom:0px;
        margin-top: 0px;
    padding-top: 40px;
    }
    .why_crm_card .card-body {
        padding: 25px 20px 18px 20px;
    }
}


@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;
    }
    .top_price{
        padding: 30px 30px 40px !important;
    }
    .pricingPage .card-body.plus_option {
        padding: 1rem 1rem !important;
    }
    #accordion .accordion-title {
        padding: 12px 66px 12px 45px !important;
    }
    #accordion .accordion-title i{left: 3px !important;}
    #accordion .accordion-title small {
        text-transform: uppercase;
        font-weight: 400 !important;
        font-size: 11px !important;
    }
    #accordion .accordion-title span{
        margin-right: 14px !important;
        font-weight: 500 !important;
    }
    #accordion .accordion-body {
        padding: 0px 30px !important;
    }
    h2.accr_kickpkg {
        font-size: 18px !important;
    }
    .professionalServices {
        padding: 24px 2px 24px 5px !important;
    }
    .pro_text{font-size: 33px;line-height: 40px;}
    .why_crm_card .card-body {
        padding: 24px 15px 15px 15px !important;
    }
        .quotation_img1 {
        font-size: 80px !important;
        line-height: 26px !important;
        padding-top: 18px !important;
    }
    .quotation_img2{
        font-size: 80px !important;
       line-height: 24px !important;
    }
    .card-title {
        font-size: 28px !important;
        line-height: 15px !important;
    }
    p.card-text.description_text_why_crm{padding-right: 0px !important;}
    .sky_why {
        font-size: 20px !important;
        line-height: 28px !important;
    }
}

/* 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;
    }
    .plus_option_text_below {
        padding: 0 15px !important;
    }
}

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

    /*.pricingPage.brownBg.kickStart,
    .pricingPage.brownBg.kickStart section{
        background:white;
    }*/
    .kickStart {
        background: url(../img/plus-bgimg.png) center -30px no-repeat;
    }
    .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 (min-width: 385px) and (max-width: 395px)  {
    p.plus_star.firstgame {
        padding-bottom: 9px;
    }
    .plus_option_img {
        width: 44%;
    }
}
@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;
    }
}
@media only screen and (min-width:410px) and (max-width:416px) {
    .plus_option_img{width: 44% !important;}
    p.plus_star.firstgame{padding-bottom: 8px;}
}