/* Common for Mobile & Tablet */
@media screen and (min-width: 320px) and (max-width: 1000px){

    .bundles-banner-content,
    .bundles-page-content,
    .bundles-plans
    {  margin: 0 auto; display: block;  width: 100%;  }

    .bundles-plans .bundles-plan-heading
    { border-left: 2px solid #9bcb44; border-radius: 2px 2px 0 2px; -moz-border-radius:  2px 2px 0 2px; -webkit-border-radius:  2px 2px 0 2px; }

    .bundles-plans .bundles-price span.bundle-currency .WebRupee { font-weight: bold; }

    .bundles-plans-two-cols, .bundles-plans-three-cols
    { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }

    .search-form-container .validation-error-message
    { position: relative;  bottom: 0;  margin: 5px 0; }

}

/* Mobile View (above 320px and below 768px) */

@media screen and (min-width: 320px) and (max-width: 767px)
{

    .bundles-blocks.col1 p,
    .bundles-blocks.col3 p,
    .bundles-blocks.col2 ul li,
    .bundles-blocks.col3 ul li,
    .bundles-banner-content span.sub-text,
    .bundles-plans .bundles-plans-arrow,
    .bundles-page-content span.sub-text
    { display: none; }



    /* Plans */

    /* Select Bundle */

    .bundles-page-content h1 { font-size: 20px; margin:26px auto -4px auto; }

    .bundles-plans-two-cols, .bundles-plans-three-cols
    { margin:30px auto 0 auto; width: 87.5%; }

    .bundles-plans div.bundles-blocks,
    .bundles-plans .plus-icon
    { display: block; }

    .bundles-blocks.col1,
    .bundles-blocks.col2,
    .bundles-blocks.col3,
    .bundles-plans-three-cols .bundles-blocks.col1,
    .bundles-plans-three-cols .bundles-blocks.col2,
    .bundles-plans-three-cols .bundles-blocks.col3,
    .bundles-plans-two-cols .plus-icon,
    .bundles-plans .plus-icon
    { padding: 0 4.7%; width: 90.6%; }


    .bundles-plans .bundles-plan-heading h2,
    .bundles-plans .bundles-step-one h2,
    .bundles-plans .bundles-step-two h2,
    .bundles-plans .bundles-step-three h2,
    .bundles-plans .bundles-step-four h2
    { font-size: 16px; line-height: 21px; }

    .bundles-plans .bundles-plan-heading span.plans-sub-text
    { font-size: 13px; margin: 0 0 11px 0; padding: 0 0 0 4.7%; }

    .bundles-plans .bundles-plan-heading h2,
    .bundles-plans .bundles-step-one h2,
    .bundles-plans .bundles-step-two h2,
    .bundles-plans .bundles-step-three h2,
    .bundles-plans .bundles-step-four h2
    { padding: 12px 0 0 4.7%; }

    .bundles-plans .plus-icon { height: auto; }

    .bundles-plans .bundles-blocks h3,
    .bundles-dsearch-result h3
    { font-size: 14px; margin: 12px 0 9px 0; }

    .bundles-plans h3 span.bundles-product-subt { font-size: 12px; top: 20px; }

    .bundles-page-note { font-size: 12px; line-height: 16px; margin: 8px auto 0 auto; width: 87.5%; }

    .bundles-page-note a { display: block; }

    .bundles-plans .vertical-sep
    { background: #e7e7e7; height: 1px; top:15px; width: 90.6%;  z-index: 1000; }

    .bundles-plans .bundles-plans-two-cols .vertical-sep,
    .bundles-plans .bundles-plans-three-cols .vertical-sep
    { left:4.7%;   }

    .bundles-plans .plus-icon .plus-sign
    { height: 20px; margin: 0 auto -2px auto; padding: 0 6px; width: 20px; z-index: 1001; }

    .bundles-plans .plus-icon { font-size: 40px; }

    .bundles-plans .bundles-plans-two-cols .bundles-price,
    .bundles-plans .bundles-plans-three-cols .bundles-price
    { width: 90.6%; margin: 20px auto 15px auto; padding: 5px 0 0 0; border-top:1px solid #e7e7e7; text-align: left; }

    .bundles-plans .bundles-price span, .bundles-plans .bundles-price input
    { display: inline-block !important; }

    .bundles-plans .bundles-price .bundle-price-value { padding: 20px 0 0 0; font-size: 22px; }

    .bundles-plans .bundles-price .bundle-currency,
    .bundles-plans .bundles-price .bundle-validity
    { font-size: 12px; }


    .bundles-plans .bundles-price .bundle-price-value,
    .bundles-plans .bundles-price .bundle-validity
    { vertical-align: bottom; }

    .bundles-plans .bundles-price .bundle-validity
    { margin: 0 0 5px 0; }

    .bundles-plans div.bundles-price{ display: block; position: relative; }

    .bundles-plans .bundles-price .bundles-green-button
    { position: absolute; right: 0; padding: 0; font-size: 15px; width: 112px; height: 36px; line-height: 34px;
      border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;
    }

    .bundles-plans .bundles-price .price-note
    { display: block !important; margin: 0; text-align: right; }

    .bundles-plans .bundles-price .bundle-currency { margin: 24px 0 0 0; }


    /* Step - 1 */

    .bundles-plans .bundles-step-one .search-form-container
    { margin: 20px auto 10px auto; width: 97.5%; padding: 0.6%; text-align: center;  }

    .bundles-plans .bundles-step-one .search-form-container input[type="text"]
    {  height: auto; line-height: normal; padding: 13.5px 0 13.5px 12px; width: 61.5%; }

    .bundles-plans .bundles-step-one .search-form-container .bundles-green-button
    {  height: auto; line-height: normal; padding: 13px 0; width: 31.5%; font-size: 15px;
       border-radius: 0 2px 2px 0; -moz-border-radius: 0 2px 2px 0; -webkit-border-radius: 0 2px 2px 0;
    }

    .bundles-step-one, .bundles-step-two, .bundles-step-three, .bundles-step-four
    { border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0;
      margin: -3px auto 0 auto; padding: 20px 4.5%; position: relative; width:100%;
    }

    .search-form-container { position: static; }

    .bundles-searchform-uparrow { top:-13px; left: auto; right: 25%; }

    .bundles-more-plans, .bundles-back-link, .change-choosen-domain { font-size: 12px; bottom: -20px; }

    .bundles-more-plans { right: 6.25%; }

    .bundles-back-link { left: 6.25%; }

    .bundles-package-selected.step-one
    { padding-bottom: 20px; }


    .bundles-green-button.bundles-selected-button
    {  background: url(../../../../css/hosting/../../images/bundles-selected-button.png) no-repeat var(--color-primary) 16px center;
       text-align: right;  padding: 0 19px 0 0 !important;
    }

    .search-form-container .validation-error-message
    { font-size: 11px; line-height: 14px; position: relative;  bottom: 0;  margin: 5px 0; }

    /* Step - 2 */

    .dsearch-wrapper
    { width: 87.5%; margin: 20px auto 0 auto; padding: 5px 4% 5px 4%; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; }

    .domainname-value, .domain-status-message { font-size: 14px; line-height: 18px; }

    .domain-found-icon, .domain-notfound-icon
    { height: 16px; margin: 5px 2px 0 0; width: 16px; }

    .domain-found-icon
    { background: url('../../../../css/hosting/../../bundles-domain-avail-mobile.png') no-repeat; }

    .domain-notfound-icon
    { background: url('../../../../css/hosting/../../bundles-domain-not-avail-mobile.png') no-repeat; }

    .dsearch-wrapper .bundles-green-button
    { margin: 3px 0 0 0; }

    .bundles-choosen-domain { padding: 7px 10px; width: auto; }

    .change-choosen-domain {  bottom: -20px;  right: 4.7%;  left: auto; z-index: 99;  }

    .dsearch-wrapper .bundles-green-button
    {
        border-radius: 26px;  -moz-border-radius: 26px;  -webkit-border-radius: 26px;
        font-size: 14px;  height: 28px;  line-height: 26px;  padding: 0;  text-align: center;  width: 64px;
    }


    /* Step - 3 */

    .bundles-plans .bundles-step-four .bundles-green-button
    {  font-size: 15px; margin: 6px auto 0 auto; width: 100%; padding: 8.5px 0;  }

    /* Show/Hide Bundle Features */

    .bundles-plan-heading
    { position: relative; }

    .toggle-bundle-details
    { position: absolute; right: 4.7%; background:url('../../../../css/hosting/../../show-hide-bundle-contents.png') no-repeat 0 0;
      height: 11px; top:25px; cursor: pointer; width: 20px;
    }

    .toggle-bundle-details.up-arrow
    { background-position: -35px 0; }


    .bundles-blocks.col2 ul li,
    .bundles-blocks.col3 ul li,
    .bundles-blocks.col2 ul li span,
    .bundles-blocks.col3 ul li span,
    .bundles-blocks.col1 p,
    .bundles-blocks.col3 p
    { padding: 0; font-size: 12px; line-height: normal;  }


    .bundles-blocks.col2 ul li span,
    .bundles-blocks.col3 ul li span
    { margin:  0 0 0 -4px; }

    .bundles-blocks.col2 ul li,
    .bundles-blocks.col3 ul li,
    .bundles-blocks.col1 p,
    .bundles-blocks.col3 p { padding: 0 0 3px 0; }


    .bundles-blocks.col1 p em { font-size: 11px; margin: 1px 0 0 0;  }

    .bundles-plans .bundles-step-one h2
    { padding: 0 0 0 4.7%; margin: -3px 0 -4px 0; }

    .bundles-plans .bundles-step-four h2
    { padding: 0 0 0 4.7%; margin: -3px 0 0 0; }

    /* Banner */

    .bundles-banner-wrapper
    { height: auto; background: url('../../../../css/hosting/../../bundles-banner-bg-mobile.png') repeat-x center top #9bcb44; }

    .bundles-banner-content h1 { padding: 25px 0; font-size: 20px; line-height: 26px; }

    .bundles-banner-img {  background-size: 280px 113px; margin: 0 auto; height: 113px; width: 280px;  }

    /* Small fixes */

    .dsearch-wrapper .lfloat,
    .dsearch-wrapper .rfloat
    { display: inline-block; vertical-align: top; float: none; }

    .dsearch-wrapper .lfloat { width: 57%; }

    .dsearch-wrapper .lfloat .domainname-value { word-wrap: break-word; width: 75%; }

    .dsearch-wrapper .rfloat { width: 41%; text-align: right; }



}


/* Mobile & High Resolution Display @2x */

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx)  and (min-width: 320px) and (max-width: 767px)
{
    .bundles-banner-wrapper
    { height: auto; background: url('../../../../css/hosting/../../bundles-banner-bg-mobile.png') repeat-x center top #9bcb44; }

    .bundles-blocks ul { width: auto; }
}



/* Tablet View (above 768px and below 1000px) */

@media screen and (min-width: 768px) and (max-width: 1000px) {


    .bundles-blocks.col1,
    .bundles-blocks.col2,
    .bundles-blocks.col3,
    .bundles-plans-three-cols .bundles-blocks.col1,
    .bundles-plans-three-cols .bundles-blocks.col2,
    .bundles-plans-three-cols .bundles-blocks.col3
    { width: auto; }

    .bundles-plans-three-cols .bundles-blocks.col1,
    .bundles-plans-three-cols .bundles-blocks.col2,
    .bundles-plans-three-cols .bundles-blocks.col3
    { max-width: 205px; }

    .bundles-plans .bundles-plans-arrow { display: none; }

    .bundles-plans-two-cols, .bundles-plans-three-cols
    { margin: 30px auto 0 auto; width: 95%; }

    .bundles-plans .bundles-plans-two-cols .bundles-price,
    .bundles-plans .bundles-plans-three-cols .bundles-price
    { display: block; width: 96%; border-top:1px solid #e9e9e9; padding: 0; margin: 0 2%; }

    .bundles-blocks ul { margin:0 0 0 58px; width: auto; }

    .bundles-page-note { margin: 10px auto; width: 95%; }


    /* Banner */

    .bundles-banner-content h1 { font-size: 26px; line-height: 21px; padding: 50px 0 0 0; }

    .bundles-banner-content span.sub-text
    { font-size: 15px; line-height: 21px; }

    .bundles-banner-img { margin: 28px auto 0 auto; background-size: 585px 232px; height: 232px; width: 585px; }

    /* Page content */

    .bundles-page-content h1
    { font-size: 22px; margin: 46px 0 0 0; }

    .bundles-page-content span.sub-text
    { margin: 10px 0 -3px 0; }


    /* Select Bundle */

    .bundles-plans .bundles-plan-heading h2,
    .bundles-plans .bundles-step-one h2,
    .bundles-plans .bundles-step-two h2,
    .bundles-plans .bundles-step-three h2,
    .bundles-plans .bundles-step-four h2
    { font-size: 18px; padding: 15px 0 0 2.5%; }

    .bundles-plans .bundles-plan-heading span.plans-sub-text
    { font-size: 14px; padding: 0 0 0 12px }

    .bundles-blocks.col1 { padding: 15px 0 0 15px; }

    .bundles-plans-three-cols .bundles-blocks.col2,
    .bundles-blocks.col3
    { padding: 15px 0 0 0; }

    .bundle-currency,
    .bundle-price-value,
    .bundle-validity
    { float: left; }

    .bundles-plans .bundles-price .bundles-green-button { margin: 15px 0 0 0; }

    .bundles-plans .bundles-price .price-note { margin: 5px 6px 14px 0; }

    .bundles-plans .bundles-price .bundle-price-value { font-size: 34px; margin: 22px 0 0 0; }

    .bundles-plans .bundles-price .bundle-currency,
    .bundles-plans .bundles-price .bundle-validity
    { font-size: 14px; }

    .bundles-plans .bundles-price .bundle-validity {  margin: 39px 0 0 0;  }

    .bundles-plans .bundles-price .bundle-currency {  margin: 27px 3px 0 0;  }


    /* Step - 1 */

    .bundles-step-one
    { width: 95%; padding: 0; margin: -2px auto 0 auto; border-radius: 0; position: relative; }

    .bundles-plans .bundles-step-one .search-form-container
    { text-align: center;  width: 95%; position: static;  margin: 20px auto; }

    .bundles-plans .bundles-step-one .search-form-container input[type="text"]
    { height: 40px; line-height: 40px; width: 75%; }

    .bundles-plans .bundles-step-one .search-form-container .bundles-green-button
    { height: 42px; line-height: 40px; width: 21%; }

    .bundles-searchform-uparrow { left: auto; right: 10.5%; top:-13px; }

    .bundles-more-plans, .bundles-back-link, .change-choosen-domain
    { right: 2.5%; bottom: -30px; }

    .bundles-back-link
    { left: 2.5%; right: auto; }

    .bundles-page-content .step-one h1 { margin: 46px 0; }

    .search-form-container .validation-error-message { text-align: left; margin: 5px auto; width: 99%; }


    /* Step - 2 */

    .dsearch-wrapper { margin: 0 auto 20px auto; padding: 18px 2.5% 15px 2.5%; width: 90%; }

    .domain-found-icon, .domain-notfound-icon
    { width: 30px; height: 30px; }

    .domain-found-icon 
    { background: url('../../../../css/hosting/../../bundle-domain-found-tab.png') no-repeat; }
    
    .domain-notfound-icon
    { background: url('../../../../css/hosting/../../bundle-domain-notfound-tab.png') no-repeat; }

    .domainname-value, .domain-status-message { font-size: 16px; margin: -5px 0 0 -4px; }

    .dsearch-wrapper .bundles-green-button { margin: 0; }

    /* Step - 4 */

    .bundles-plans .bundles-step-four
    { width: 95%; padding: 0 0 20px 0; margin: -2px auto 0px auto; border-radius: 0; }

    .bundles-plans .bundles-step-four .bundles-green-button
    { margin: -12px 0 0 0; }

    .bundles-dsearch-result #preLoader { margin: 0 auto 20px 25% !important; }

    .bundles-choosen-domain { margin: 8px 0 28px 40px;  }

    .change-choosen-domain { right:0; bottom: 12px; left: auto; }

    .bundles-package-selected.step-four {  min-height: 40px; }

    .bundles-package-selected.step-four .bundles-back-link,
    .bundles-package-selected.step-four .bundles-more-plans
    { bottom: -20px }

}