/*-------------------------------------------------------*/
/* When the browser is 768px or wider,below css will be applied.
/*-------------------------------------------------------*/


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

.nav li:hover ul.usa-drop-down {
  left: -40px !important;
  width: 970px !important;
}
.usa-drop-down > li {
  float: left;
  width: 320px;
}



}


@media (max-width: 767px) {
	
.active {
        display: block;
    }
    .nav > li {
  border-bottom: 1px solid #D05613;
  float: none;
  width: 100%;
}

.toggleMenu {
  background: rgba(0, 0, 0, 0) url("../img/mobile-menu-hover.png") no-repeat scroll left center;
  font-size: 18px;
  padding-left: 30px;
}




    .nav > li > .parent {
        background-position: 95% 50%;
    }
	.nav a {
	padding: 7px 0;
	
}

.col-md-9.header-right {
  text-align: center;
}
    
	
	.nav > li > .parent {background:url(../img/downArrow.png) no-repeat 98%; z-index:9999;}
	
    .nav ul {
        display: block;
        width: 100%;
    }
   .nav > li.hover > ul , .nav li li.hover ul {
        position: static;
    }
	.main-head-navigation .resp-menu{ display:block;}
	
	.nav li {position: relative; background-image:none;}
	
	.nav li a:hover {
	background: #F79C1C; color:#fff;
}
.body-wrap .nav > li.hover > ul{
  left:0px; padding:0 0px;
}
.nav {
  background-color: #de6421;
}
.nav a {
  width: 100%;
  color: #fff;
}
.header-phone {border-right: none;display: inline-block;float: left;margin-right: 0;padding-right: 0;text-align: center;width: 100%;}
.header-phone + span + a, .header-phone + span, .header-phone + span + a + a, .header-phone + span + a + a + a {
  display: none;
}
.col-md-9.navigation-right {
  margin-top: 8px;
}
section.c3 {padding: 0;}

.n-about-left h6 {font-size: 28px;}
.n-about-left h2 {font-size: 38px;}
.n-about-right a span {font-size: 12px;}
.sa-home-spec::before {width: 100%;}
.sa-home h2 span {font-size: 27px;}
.sa-home h2 {font-size: 27px;}
.new2-head a i {padding: 3% 0;}
.cus-app {background-size: cover;}
.testimonials-left {text-align: center;width: 100%;}
.img-circle {float: none;}
.brace-sign {float: none;}
.testimonial-right {width: 100%;margin-top: 10px;}
.col-md-3.logo {text-align: center;}
.inner-banner {
  margin-bottom: 0;
  padding: 40px 0;
  text-align: center;
 
  background: rgba(0, 0, 0, 0) url("../img/inner-banner-bg.jpg") no-repeat scroll center top / cover ;
  margin-bottom: 0px;
}
  
  


.title-right li {
  display: inline-block;
  float: none;
  list-style-type: none;
}


.title-left > h1 {

  margin: 0;
  padding: 0;

}
.title-right {
  display: inline-block;
  float: right;
  width: 100%;
}
.title-right > ul { padding:0;}
.ser-left {
  float: left;
  width: 100%;
  margin-bottom: 10px;
}
.ser-right {
  float: right;
  min-height: 230px;
  width: 100%;
}
.ser-left > img {
  width: 100%;
}
.res-menu-display{ display:block !important;}
.home-title {
  font-size: 22px !important;
}

.Mobile-button {
 
  clear: both;
  display: block;
  margin-top:10px;
}
.Mobile-button > a {
  background-color: #de6421;
  color: #ffffff;
  display: inline-block;
  font-size: 22px;
  padding: 16px 11px;
  width: 100%;
}


}


@media (min-width: 768px) {
    .navbar-custom {
        background-color: transparent;
        padding: 25px 0;
        -webkit-transition: padding 0.3s;
        -moz-transition: padding 0.3s;
        transition: padding 0.3s;
        border: none;
    }
    .navbar-custom .navbar-brand {
        font-size: 2em;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        transition: all 0.3s;
    }
    .navbar-custom .navbar-nav > .active > a {} .why-left {
        padding-right: 90px;
    }
    .why-right {
        padding-left: 90px;
    }
}
/*-------------------------------------------------------*/
/* When the browser is 768px or wider,below css will be applied.
/*-------------------------------------------------------*/

@media (min-width: 768px) {
    .navbar-custom.affix {
        background-color: #fff;
        padding: 10px 0;
        box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.29);
        width: 100%;
        z-index: 9999;
        top: 0px;
        border-radius: 0px;
        transition: all 0.5s ease;
    }
    .navbar-custom.affix .navbar-brand {
        font-size: 1.5em;
    }
    .box-last {
        padding-bottom: 0px;
    }
}
/*-------------------------------------------------------*/
/* When the browser is 768px or wider,below css will be applied.
/*-------------------------------------------------------*/

@media (min-width: 768px) {
    .navbar-custom {
        background-color: #fff;
        padding: 12px 0;
        -webkit-transition: bac;
        -moz-transition: padding 0.3s;
        transition: padding 0.3s;
        border: none;
        box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.29);
    }
    .navbar-custom .navbar-brand {
        font-size: 2em;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        transition: all 0.3s;
    }
    .navbar-custom .navbar-nav > .active > a {} .carousel-caption {
        /*right: 20%;
        left: 8%;
		top: 10%;*/
        padding-bottom: 5%;
       
        width: 60%;
    }
}
/*-------------------------------------------------------*/
/* When the browser is 768px or wider,below css will be applied.
/*-------------------------------------------------------*/

@media (min-width: 768px) {
    header .intro-text {
        padding-top: 200px;
        padding-bottom: 50px;
    }
    header .intro-text .intro-lead-in {
        font-family: "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-style: italic;
        font-size: 40px;
        line-height: 40px;
        margin-bottom: 25px;
    }
    header .intro-text .intro-heading {
        font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
        text-transform: uppercase;
        font-weight: 700;
        font-size: 75px;
        line-height: 75px;
        margin-bottom: 50px;
    }
}
/*-------------------------------------------------------*/
/* When the browser is 768px or wider,below css will be applied.
/*-------------------------------------------------------*/

@media (min-width: 768px) {
    section {
        padding: 0 0 50px 0;
    }
    .padd_left {
        padding-left: 0px !important;
    }
    .box-last {
        padding-bottom: 0px;
    }
}
/*-------------------------------------------------------*/
/* When the browser is between 0px to 767px wide,below css will be applied.
/*-------------------------------------------------------*/

@media (max-width: 768px) {
    .navbar-custom .navbar-collapse {
        border-color: rgba(231, 231, 231, 0.94);
        background: #fff;
        width: 100%;
    }
    .home-form form ul li:first-child {
        width: 49%;
    }
    .home-form form ul li:last-child {
        width: 49%;
    }
    .navbar-custom .nav li a {
        border-bottom: 1px solid #f3f3f3;
    }
    .navbar-custom .nav li a:hover {
        color: #0E0E0E !important;
        background: #d1e4ea;
    }
    #filters li span {
        display: block;
        padding: 5px 10px;
        text-decoration: none;
        color: #797979;
        letter-spacing: 0px;
        font-size: 13px;
    }
    section {
        padding: 50px 0;
    }
    .sec-title h2 {
        text-align: center;
        font-size: 42px;
    }
    .sec-title h2 span:before {
        margin-top: -10px;
    }
    .text-right {
        text-align: left;
    }
    .content-left span {
        float: left;
        margin-right: 25px;
        margin-left: 0px;
    }
    .navbar-custom {
        background-color: #FFFFFF;
        border-color: transparent;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.21);
        width: 100%;
        z-index: 99;
        top: 0px;
    }
    .navbar-nav {
        width: 100%;
    }
    header .intro-text {
        padding-bottom: 20px;
    }
    a.arr {
        margin-top: 30px;
    }
    .demo-vid {
        width: 90%;
    }
    .demo-vid p {
        font-size: 16px;
    }
    .footer-call h3 {
        font-size: 24px;
    }
    .box-last-right {
        padding-bottom: 0px;
    }
    .padd_o {
        padding-right: 0px;
        padding-left: 0px;
    }
    .services-offer {
        text-align: center;
    }
    #filters {
        margin: 0 auto;
        padding: 0px 0px 10px 0px;
        display: table;
    }
    .footer-desc {
        text-align: center;
    }
    .footer-part {
        text-align: center;
    }
    .footer-part-social ul {
        margin: 0 auto;
        display: inline-block;
    }
    .footer-help h3 {
        font-size: 24px;
        text-align: center;
    }
    .about-ti-1 {
        display: inline-block;
        margin-top: 8px;
    }
    .about-ti-2 {
        display: inline-block;
        margin-top: 8px;
    }
    .counter-1 {
        padding-bottom: 35px !important;
    }
    .counter-1-2 {
        padding-bottom: 50px !important;
    }
    .counter-all {
        padding: 50px 0 0px 0;
    }
    footer {
        padding: 50px 0 40px 0;
        text-align: center;
    }
    .new2-head {
        text-align: center;
    }
    .carousel-caption {
        padding-top: 5%;
    }
    .n-about-3 a {
        padding: 50% 0% 10% 0%;
    }
    .foot-social ul {
        padding: 0px;
        margin: 0 auto;
        display: table;
    }
    
    #filters li {
        margin-top: 0px;
    }
    footer h4 {
        margin-top: 40px;
    }
}
/*-------------------------------------------------------*/
/* When the browser is between 0px to 991px wide,below css will be applied.
/*-------------------------------------------------------*/

@media only screen and (max-width: 992px) {
    .price-mob {
        margin-bottom: 25px;
    }
    .navbar-nav {
        float: inherit;
        margin: 0 auto;
        display: table;
    }
    .navbar-custom .navbar-nav > .active > a {
        border-radius: 0 !important;
        color: #0E0E0E;
        background: #d1e4ea;
    }
    .navbar-header {
        float: left;
        width: 100%;
    }
    .navbar-brand > img {
        /* display: block; */
        
        display: table;
        margin: 0 auto;
        margin-top: -15px;
        margin-bottom: -15px;
    }
    .navbar-brand {
        float: initial;
        /* display: table; */
        /* margin: 0 auto; */
    }
    .sec-title h2 {
        text-align: center;
    }
    .services-offer-1 {
        margin-bottom: 34px;
    }
    .h-quote:before {
        width: 100%;
    }
    .help-arrow {
        display: none;
    }
    .help-line {
        padding-bottom: 30px;
    }
    .footer-img {
        display: none;
    }
    .footer-help h4 span {
        font-size: 28px;
    }
    .carousel-inner > .item > img {
        display: none;
    }
    .footer-part-form ul li input {
        width: 100%;
    }
    .footer-part-form ul li textarea {
        width: 100%;
    }
    
    
    .n-foot:before {
        width: 100%;
    }
    .n-foot-1 p,
    li,
    h4 {
        color: #9ba6b1;
    }
    .n-foot-1 ul li span {
        color: #ebeef1;
    }
    .n-foot-2 h4 {
        color: #ebeef1;
        padding-top: 25px;
    }
    .n-foot-2 ul li a {
        color: #c4cfd2;
        border: 1px solid #52606d;
    }
    .n-foot-3,
    .n-foot-1 {
        padding-left: 0px;
        padding-right: 0px;
    }
    .n-foot-1 h4 {
        color: #ebeef1;
    }
    .copy-rights1 {} .form-horizontal .control-label {
        color: #fff;
    }
    .cus-app p span {
        font-size: 16px;
        position: inherit;
        margin-bottom: 15px;
    }
    .cus-app p {
        text-align: center;
        margin-bottom: 0px;
    }
    .cus-app p a {
        display: inline-block;
        float: inherit;
        margin-top: 15px;
        /* margin-left: 15px; */
        
        text-align: center;
    }
    .pop-up-left {
        display: none;
    }
    .pop-up-right {
        width: 100%;
    }
}
/*-------------------------------------------------------*/
/* When the browser is between 0px to 991px wide,below css will be applied.
/*-------------------------------------------------------*/

@media only screen and (max-width: 992px) {
    .why-img {
        display: none;
    }
    .n-about-right {
        padding-top: 40px;
    }
    .counter-1 {
        padding-bottom: 60px;
    }
    .sa-home h2 {
        margin-top: 0px;
    }
    .sa-home-list ul {
        margin-bottom: 0px;
    }
    .sa-home-list ul li:last-child {
        padding-bottom: 0px;
    }
    .sa-home-list ul li:last-child p {
        margin-bottom: 0px;
    }
}
/*-------------------------------------------------------*/
/* When the browser is 991px or wider,below css will be applied.
/*-------------------------------------------------------*/

@media (min-width: 992px) {
    .n-about-left {
        padding-left: 0px;
    }
    .n-about-right {
        padding-right: 0px;
    }
    .n-why-left {
        padding-left: 0px;
    }
}
/*-------------------------------------------------------*/
/* When the browser is 1400px or wider,below css will be applied.
/*-------------------------------------------------------*/

@media (min-width: 1400px) {
    .modal-dialog {
        width: 70%;
        max-width: 965px;
    }
}
/*-------------------------------------------------------*/
/* When the browser is between 0px to 767px wide,below css will be applied.
/*-------------------------------------------------------*/

@media only screen and (max-width: 768px) {
    .demo-vid ul li {
        display: block;
    }
}
/*-------------------------------------------------------*/
/* When the browser is between 0px to 767px wide,below css will be applied.
/*-------------------------------------------------------*/

@media only screen and (max-width: 768px) {
    #portfoliolist .portfolio {
        width: 48%;
        margin: 1%;
    }
    #ads {
        display: none;
    }
    #contact-1 {
        padding: 50px 0px 50px 0px;
    }
    .n-about-right a {
        text-align: center;
    }
    .navbar-brand > img {
        display: block;
        display: table;
        margin: 20px;
        margin-top: -10px;
        margin-bottom: -15px;
    }
    .n-about-left h4 {
        font-size: 20px;
    }
    .carousel-control {
        display: none;
    }
    .carousel-caption {
        left: 4%;
        width: 90%;
    }
    .n21-blog {
        width: 100%;
    }
    .n22-blog {
        width: 100%;
        text-align: center;
    }
    .n21-blog img {
        padding: 0px;
        padding-bottom: 25px;
    }
    .counter-1 {
        text-align: center;
    }
    .quote-title h2 {
        font-size: 30px;
    }
    .quote-title h2 span {
        font-size: 30px;
    }
    .help-line span {
        font-size: 32px;
    }
    .price-mob {
        margin-bottom: 35px;
    }
    .price-mob-last {
        margin-bottom: 10px;
    }
    .blog-author {
        margin: 0 auto;
        display: inline-block;
    }
    .blog-auth-img {
        float: initial;
        padding-bottom: 15px;
        padding-top: 0px;
    }
    .footer-call h2 {
        font-size: 26px;
        padding-bottom: 0px;
    }
    .sec-title h2 {
        font-size: 32px;
    }
    .n-about-left {
        text-align: center;
    }
    .sec-title {
        width: 90%;
    }
    .space-bottom {
        padding-bottom: 20px;
    }
    .new-con img {
        padding-top: 35px;
    }
    .carousel-indicators {
        bottom: 0px;
    }
    .n-head-right ul li:nth-child(3) {
        display: none;
    }
    .n-head-right ul li:nth-child(4) {
        display: none;
    }
    .modal-dialog {
        position: relative;
        width: auto;
        margin: 0 auto;
        width: 75%;
        margin-top: 15px;
    }
}
/*-------------------------------------------------------*/
/* When the browser is between 767px and 992px wide,below css will be applied.
/*-------------------------------------------------------*/

@media only screen and (min-width: 768px) and (max-width: 992px) {
    .sec-title h2 {
        font-size: 52px;
    }
    .counter {
        font-size: 56px;
    }
    header .intro-text .intro-heading {
        font-size: 48px;
    }
    .carousel-caption {
        width: 65%;
    }
    .slider-cap h3 {
        padding-top: 20px;
    }
    .n21-blog {
        /* width: 30%; */
        /* float: left; */
    }
    .n22-blog {
        /* width: 70%; */
        /* float: left; */
    }
    .overlay-contact {
        right: 0%;
        width: 50%;
        margin-top: -560px;
    }
    .map-head p {
        font-size: 18px;
    }
    .map-head h2 {
        font-size: 32px;
    }
    .footer-ser-re {
        font-size: 12px !important;
    }
    .footer-part-form ul li {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
    .n-about-all {
        border: 3px solid #fff;
    }
    #filters li span {
        padding: 5px 8px;
        font-size: 14px;
    }
}
/*-------------------------------------------------------*/
/* When the browser is between 480px and 767px wide,below css will be applied.
/*-------------------------------------------------------*/

@media only screen and (min-width: 480px) and (max-width: 768px) {
    #ads {
        display: none;
    }
    .counter {
        font-size: 52px;
    }
    .n-about-left h2 {
        font-size: 36px;
    }
    header .intro-text .intro-heading {
        font-size: 42px;
    }
    .slider-cap h3 {
        font-size: 34px;
    }
    .quote-title h2 {
        font-size: 36px;
    }
    .quote-title h2 span {
        font-size: 36px;
    }
    .footer-help h4 {
        font-size: 30px;
    }
    .footer-help h4 span {
        font-size: 30px;
        display: block;
        padding-top: 15px;
        padding-left: 0px;
    }
    .footer-call h3 span {
        font-size: 30px;
    }
    .map-head p {
        font-size: 16px;
    }
    .map-head h2 {
        font-size: 26px;
    }
    .footer-ser-re {
        font-size: 12px !important;
    }
    .footer-part-form ul li {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
    .overlay-contact {
        width: 100%;
    }
    .overlay-contact {
        margin-top: -545px;
    }
    .footer-part-form ul li {
        margin-bottom: 0px;
    }
    .footer-part-form ul li textarea {
        height: 55px;
    }
}
/*-------------------------------------------------------*/
/* When the browser is between 0px to 481px wide,below css will be applied.
/*-------------------------------------------------------*/

@media (max-width: 480px) {
    .navbar-brand > img {
        width: 50%;
        margin-top: -5px;
    }
    .navbar-brand {
        width: 75%;
    }
    .sec-title h2 {
        font-size: 32px;
    }
    .counter {
        font-size: 42px;
    }
    .n-about-left h2 {
        font-size: 32px;
    }
    header .intro-text .intro-heading {
        font-size: 32px;
    }
    .slider-cap h3 {
        font-size: 24px;
    }
    .slider-cap h5 {
        font-size: 14px;
    }
    
    .counter-1 {
        text-align: center;
    }
    .footer-help h4 {
        font-size: 24px;
    }
    .footer-help h4 span {
        font-size: 24px;
        display: block;
        padding-top: 15px;
        padding-left: 0px;
    }
    .footer-call h3 span {
        font-size: 24px;
    }
    .price-head h4 {
        font-size: 22px;
    }
    .price-head h5 {
        font-size: 50px;
    }
    .text-title {
        font-size: 10px;
    }
    .about-ti-2 {
        margin-top: 5px;
    }
    .map-head p {
        font-size: 14px;
    }
    .map-head h2 {
        font-size: 22px;
    }
    .footer-ser-re {
        font-size: 12px !important;
    }
    .footer-part-form ul li {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
    .overlay-contact {
        width: 100%;
    }
    .footer-part-form ul li {
        margin-bottom: 0px;
    }
    .footer-part-form ul li textarea {
        height: 55px;
    }
    .contact-map iframe {
        height: 800px;
    }
    #filters li span {
        padding: 5px 5px;
        font-size: 12px;
    }
}
/*-------------------------------------------------------*/
/* When the browser is between 0px to 1200px wide,below css will be applied.
/*-------------------------------------------------------*/

@media (max-width: 1200px) {
    .n-head {} .mob-hide {
        display: none;
    }
    .n-head-right {
        width: 100%;
        float: inherit;
    }
    .foot-logo img {
        width: 100%;
    }
    .n-head-right ul {
        float: inherit;
        margin: 0 auto;
        display: table;
    }
    .n-head-left ul li {
        padding-right: 0px;
        padding: 0px 10px;
    }
}

@media only screen and (min-width:480px) and (max-width:767px) {
	.slider-cap h1 {
  font-size: 20px;
 
  margin-bottom: 4px;
  margin-top: 0;
  
}
.slider-cap p {
  font-size: 14.5px;
  line-height: 17px;
  padding-bottom: 5px;
  width: 200px;
}
.slider-cap a {font-size: 8.5px;padding: 4px 6px;}

.slider-cap span {font-size: 14px;line-height: 0;}
	
}

@media only screen and (min-width:320px) and (max-width: 479px) {
.slider-cap h1 {font-weight: 600;margin-top: 0;
  text-transform: uppercase; font-size:11px;
}
.slider-cap p {
  font-size: 8.5px;
  line-height: 12px; padding-bottom:5px;
}
.slider-cap a {font-size: 8.5px;padding: 4px 6px;}	
.title-left > h1 {
  color: #ffffff;
  font-size: 30px;
  margin: 0;
  padding: 0 0; text-align:center;
}


.slider-cap span { font-size: 11px; line-height:0; margin-bottom:8px;}




}