/* 
   ------------------------------------------------------
                                        Responsive Styles
   ------------------------------------------------------
*/
@media (min-width: 992px) {
    .col-lg-3 {
        width: 20% !important;
    }
    .col-md-9 {
         width: 60% !important;
    }
    #intro_description.col-md-9 {
        width: 75% !important;
    }
    #intro_description.col-lg-3 {
        width: 25% !important;
    }
    .img_ads {
        margin-top: 112%;
    }
    /*------------------------------------------*/
    /*	  Intro Section
    /*------------------------------------------*/
    #intro_form {padding-left: 15px;}
    .intro_button {margin-top: 30px;}
    /*	 Progress Bar
    /*------------------------------------------*/
    .progress {margin-bottom: 20px; }
}
@media only screen and (max-width: 991px){
    .img_focus {
        display: none;
        visibility: hidden;
    }
    .img_focus_mobile {
        display: block;
    }
    #product-featured {
        width: 100%;
    }
    .img_ads {
        display: none; 
        visibility: hidden;
        margin-top: 0;
    }
    .col-md-12,
    .col-xs-12 {
        padding-left: 0;
        padding-right: 0;
    }
    .img_ads_2 {
        display: block; 
        visibility: visible;
        max-width: 720px;
    }
    .titlebar h1 { font-size: 32px; }
    .titlebar p {font-size: 16px; }
    /*------------------------------------------*/
    /*	 Header
    /*------------------------------------------*/
    #header { margin-bottom: 40px; }
    /*------------------------------------------*/
    /*	  Intro Section
    /*------------------------------------------*/
    #intro_description h1 {font-size: 32px;}
    .intro_feature p { font-size: 15px; }
    .intro_button {margin-top: 40px;}
}
@media only screen and (max-width: 767px){
    .row-4 ,
    .row-5 {
        display: block;
        columns: auto;
    }
    .row-4 .featured,
    .row-5 .featured {
        width: 33%;
        float: left;
        display: block;
        height: 282px;
    }
    .container {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    .intro-illustration {
        display: none;
        visibility: hidden;
    }
    /*------------------------------------------*/
    /*	 Responsive Menu
    /*------------------------------------------*/
    .navbar-nav { margin: 0 -15px; border-top: 1px solid #ddd; background-color: #f6f6f6;}	
    .navbar-brand {padding: 15px 15px 10px 45px;}
    .navbar-nav > li { text-align: center;}
    .navbar-nav > li > a { line-height: 44px; text-align: center; display: inline-block; text-align: center;}
    .navbar-toggle {margin: 12px 45px 12px 0;}
    .container { overflow: hidden;}
    .breadcrumb { padding: 20px 45px; }
    /*------------------------------------------*/
    /*	 Header
    /*------------------------------------------*/
    #header { margin-bottom: 50px; }
    #header img {padding: 0 15px 0 0;}
    /*------------------------------------------*/
    /*	  Intro Section
    /*------------------------------------------*/
    #intro_description  { margin-bottom: 60px; padding: 0 45px;}
    #intro_description h1 {font-size: 32px;}
    .intro_button {margin-top: 20px;}
    /*------------------------------------------*/
    /*	 Footer
    /*------------------------------------------*/
    #footer_nav { text-align: center; margin-bottom: 30px;}
    .footer-nav {display: inline-block; margin: 0 auto;}
    #footer_copy p {margin-left: 0;}
    .footer-nav li {padding: 5px 10px 5px;}
}
@media (max-width: 500px) {
    .row-4 .featured,
    .row-5 .featured {
        width: 50%;
        float: left;
    }
    .intro_feature {
        text-align: justify;
    }
    .navbar-brand {padding: 15px 15px 10px 20px;}
    .navbar-toggle {margin: 12px 20px 12px 0;}
    #intro_description, #intro_form, #logo_image, #he_social_icons, #about-1, #about-2, #features, #faq, #pricing, #blog, #clients,
    .breadcrumb { padding: 20px; }
    .intro_feature p {font-size: 14px; }	
}
@media (max-width: 420px) { 
    header .btn_old_site {
        padding-left: 10px;
        padding-right: 10px;
    }
    #intro_description p {
        text-align: justify;
    }
}
@media (max-width: 360px) {
    header {
        padding-left: 0; 
        height: auto;
    }
    header #logo_image img {
        margin: auto;
    }
    header .btn_old_site {
        float: none;
        display: block;
        height: auto;
        line-height: 32px;
    }
    #intro_description,
    .intro_feature {
        padding-left: 5px;
        padding-right: 5px;
    }
    .titlebar h1 { font-size: 28px; }
    .breadcrumb { padding: 20px 5px; }
    /*------------------------------------------*/
    /*	  Header
    /*------------------------------------------*/
    #logo_image {width: 100%; text-align: center; margin-bottom: 15px; float: none !important;}
    #logo_image img { padding: 0;}
    /*------------------------------------------*/
    /*	  Intro Section
    /*------------------------------------------*/
    #intro_description { padding-left: 15px; padding-right: 15px;text-align: center;}
    #intro_description h1 {text-align: center;}
    /*------------------------------------------*/
    /*	 Footer Navigation Menu
    /*------------------------------------------*/  
    .footer-nav li {padding: 5px 5px 10px;}
    .footer-nav li a {font-size: 13px;}
}