@charset "utf-8";
/* CSS Document */
@media screen and (min-width:1367px) {   
    
}

@media screen and (max-width:1366px) {
      .processcontainer .step {width: 230px;}
	  .caption-text {width: 550px!important;}
	  .caption-text h3, .caption-text h4 {font-size: 26px!important;}
	  .n2-ss-layer {margin-top: 250px!important;}
	  
}


@media screen and (max-width:1200px) {
    
    #menu ul li > a {padding: 18px 14px;}
    .promo_content {padding: 25px;}
    .promo_right h5 {margin: 0 0 30px;}
    
    ul.bxslider li p {padding: 0 30px;}
    .bx-pager.bx-default-pager {margin: 20px 0 10px;}
	.caption-text {padding: 20px 0!important;}
	.n2-ss-layer {margin-top: 280px!important;}
	.caption-text {width: 450px!important;}
	.caption-text h3, .caption-text h4 {font-size: 22px!important;}
    
    
}

@media screen and (max-width:1100px) {
    
#menu ul li > a {padding: 18px 7px;}
.phone_number {padding: 0px 010px!important;}
    .promo_right h5 {margin: 0 0 29px;}
    
    .testimonials_container h4 {font-size: 30px; margin: 15px 0 5px;}
    ul.bxslider li p {padding: 0 30px; font-size: 15px;}
	.caption-text {padding: 10px 0!important;}
	.n2-ss-layer {margin-top: 320px!important;}

    
}

@media screen and (max-width:1024px) {
    
    #menu ul li > a {font-size: 15px;}
    .headerright ul li {padding: 15px 10px;}
    .testimonials_container h4 {font-size:22px; margin: 10px 0 5px;}
    

	
    
}

@media screen and (max-width:992px) {


/* for responsive menu */    
a#toggle { display: block; }
main#content {margin-top: 65px; transition: all ease-out 0.3s;}
#menu {
  position: fixed;
  width: 250px;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  overflow-y: auto;
  background:rgba(0, 0, 0, 0.92);
  transform: translateX(-250px);
  border-right: 1px solid rgba(255,255,255,0.2);
}
#menu ul {text-align: left; background-color: transparent; border:0px solid #ffffff}
#menu ul li { display: block; width: 100%; }
#menu ul li a { display: block; padding: 12px 15px; border-right: 0px solid #666666; }
#menu ul li a > i { float: right; display: none; }
#menu ul li ul {display: none; position: static; width: 100%; background-color: rgba(255,255,255, 0.1);}
#menu ul li:hover > ul { display: none; }
#menu ul li:hover > a > i { transform: rotateZ(0); }
#menu ul li.open > a {background-color: rgba(255,255,255, 0.1);}
#menu ul li.open > a > i { transform: rotateZ(90deg); }
#menu ul li.open > ul { display: block; }

div#overlay {
  display: block;
  visibility: hidden;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  transition: all ease-out 0.3s;
  z-index: 10;
  opacity: 0;
}

#menu ul li i.fa.fa-caret-down.mysubmenu {
	display: block;
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(255,255,255,0.2);
    width: 30px;
    height: 30px;
    margin: 7px 0 0 0;
    text-align: center;
    color: #ffffff;
padding: 8px 0 0; cursor:pointer}
	
#menu ul li i.fa.fa-caret-down.mysubmenu:before {content: "\f067"; }
#menu ul li.open i.fa.fa-caret-down.mysubmenu:before {content: "\f068";}
.open-menu a#toggle .fa-bars:before {content:"\f00d"}	

html.open-menu { overflow: hidden; }

html.open-menu div#overlay {
  visibility: visible;
  opacity: 1;
  width: calc(150%);
  left: 250px;
}

html.open-menu a#toggle,
html.open-menu main#content { transform: translateX(250px); }
html.open-menu nav#menu {z-index: 10; transform: translateX(0);}

#menu ul li:before, #menu ul li:first-child:after {display:none} 
#menu ul li ul li ul {display: block!important; position: static; top: 0!important; right: -100%!important; background: rgba(0,0,0,0.1);}
#menu ul li ul li ul li a {color:rgba(255,255,255,0.9)!important; text-transform: capitalize!important; padding:10px 10px 10px 45px!important;}
    
    #menu ul li ul li i{display: none!important}
    #menu ul li ul li > a {padding-left: 30px!important;}
    
.easyinstallation {width: 98%; border-top: 1px solid #333333; padding: 20px 0 0 0;}
    .contactinfo {width: 33%;}
    .overview_footer, .areasweserve {width: 28%;}
    
    
.phone_number {float: right!important; clear: both;}
.logo {left: 50px; transition: 0.5s ease all;}
    
    
    #innerbanner {height: 100px;}
    #innerbanner h3 {margin: 35px 0 25px 0;}
       #innerbanner h1 {margin: 35px 0 25px 0;}
.request_formbox {background-size: 70%;}
    
    .productsection {float: left; width: 100%; position: static; z-index: 0; margin: 0;}
    .processcontainer .step .processicon_div:after{display: none!important}
.beforeafter_container, .testimonials_container {max-width: 630px; margin: 0 auto; float: none; width:100%}
    .beforafter_section .sameheight {height:auto!important}    
    .beforeafter_container {margin-bottom:30px}
    
    .testimonials_container {padding: 30px 0 60px !important;}
    
    .promotion_div .promo_left {max-width: 500px;}
    .promo_right {width: calc(100% - 500px);}
    
    .promo_right {padding: 20px;}
    .promo_right h5 {font-size: 33px;}
    
    .promo_content {min-height: 265px; padding: 10px;}    
    .promo_right span {font-size: 20px;}
	.n2-ss-layer {margin-top: 280px!important;}
    
    .captcha_div {width: 100%!important;}
    #sitecontent p {float: left;}
    .btn-block-div {float: left; width: 100%;}
    #html5-close { right: 0px !important;}
    
    
}


@media screen and (max-width:860px) {
    
    .phone_number a i {display: none}
    .phone_number a{font-size:22px}
    .phone_number {clear: inherit;}
    .request_quote {clear: both;}
    .request_quote a img{display: none}
    .headerright ul li:first-child, .headerright ul li:nth-child(2){width:50%; text-align:center}
    .phone_number {padding: 0px 21px!important;}
    
    .promotion_div .promo_left {max-width: 100%;}
    .promotion_div {max-width: 637px; float: none; margin: 0 auto;}
    .promo_right {max-width: 637px; width: 100%;}
    .promo_right h5 {margin: 35px 0 29px;   }
    
    #horizontalTab {width: 96%!important; margin: 0px auto!important;}
    .resp-tab-content {padding: 40px 0px 20px!important;}
    .wonderplugin-gridgallery-list {padding: 10px!important}
    .resp-tab-content {border: 0px solid #c1c1c1; padding: 20px 0!important;}
	.n2-ss-layer {margin-top: 300px!important;}
    .wrapper {width: 94%;}


    
    
}


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

}

@media screen and (max-width:767px) {
    
    .contact_left, .contact_right {float: left; width: 100%; margin: 0 0 20px}
    /*.form div {width: 33%;}*/
    .resi_com_section .fleft, .resi_com_section .fright{width:100%; margin:0 0 2px}
    .phone_number {padding: 0px 19px!important;}
	.n2-ss-layer {display:none!important}
    
    
    
    /*.wonderplugin-gridgallery-tags{width:50%!important}
    .wonderplugin-gridgallery-list{width:100%!important}*/
    .area-ul li
{
width:50% !important;
}
    .wpcf7-form-control-wrap {
    margin:0px;
}
  
        
}

@media screen and (max-width:730px) {
    .logo {left: 0;transition: 0.5s ease all;width: 100%;float: left;text-align: center;}
    .headerright {float: none;width: 338px;margin: 0px auto 0;padding: 118px 0 0;}
    .headerright ul {width: 99%;float: none;list-style: none;margin: 0 auto;}
    .headerright ul li {padding: 15px 0;text-align: center;width: 167px;}
    
    

    
}


@media screen and (max-width:640px) {
    
.contactinfo {width: 96%; border-top: 1px solid #333333; padding: 20px 0 0 0; margin-top: 30px;}
.overview_footer, .areasweserve {width: 48%;}
.contactinfo dl dd {line-height: 38px;}
    
    #sitecontent .content_left {width: 100%;}
    #sitecontent .content_right {float: left;}
    #sitecontent .content_right img {width:100%}
    .testimonial_container .testimonialbox {width: 98%;}
    .request_formbox {background:#ebe6e6;}
    /*.form div {width: 50%;}*/
    .form .chkboxrq {width: 33%;}
    
    .request_quote a{font-size: 15px;}
    .phone_number a{font-size: 22px;}
    

}

@media screen and (max-width:580px) {

    .productcontainer .productbox {width: 100%;}
    .request_content {padding: 0 10px;}
     .cont-col2
          {
              width: 100%;
              float: none;
              margin-right: 0 !important;
          }
          .captch-left, .submit-right, .submit_part
          {
              float: none;
          }

	 
}

@media screen and (max-width:480px) {
    .wrapper {width: 92%;}
    .footerlinks {padding: 20px 0;} 
    .overview_footer, .areasweserve {width: 96%; text-align: center;}
    .areasweserve {border-top: 1px solid #333333; padding: 20px 0 0 0;}
    .footerlinks ul li {background: none}
    .contactinfo dl dt {width: 100%; text-align: center;}
    .contactinfo dl dd {width: 100%; line-height: 26px;}
    .contactinfo{text-align: center;}
    .contactinfo a  {text-align: center; width:100%; float:left}
    .contactinfo a img {margin: 0 auto 20px auto; float: none;} 
    
    #sitecontent .content_right {width: 100%;}
    
    .cta_bar span {width: auto; background: none}  
    
    .request_formbox {background-size: 55%;}
    .request_formbox {padding: 30px 10px;}
    
    .request_formbox input[type="text"], .request_formbox input[type="tel"], .request_formbox input[type="email"], .request_formbox textarea {width: 84%;}
    
    .contact_left .formbox input[type="text"], .contact_left .formbox input[type="email"], .contact_left .formbox textarea{width:100%!important}    
    
    .wid50 {width: 84%!important; float: left!important;}
    .wid50.fright {width: 84%!important; float: left!important; margin: 0 4% 15px 0!important;}
    .contact_left .formbox {width: 100%;}
    
    .logo a img{width: 250px;}
    .headerright {padding: 98px 0 0; max-width: 300px;}
    
    .headerright ul li a {font-size: 13px;}
    .phone_number {padding: 0px 5px!important;float: left!important;}
    .headerright ul {float: none; margin: 0 auto; width: 90%;}
    li.phone_number a{font-size: 17px!important;}
    .form .chkboxrq {width: 50%;}
    .headerright ul li {width: 135px;}
    .headerright ul li a {text-align: center!important; float: none;}
    .footerlinks .wrapper div{margin-right: 0;
    width: 100%;}
    
        
    
}

@media screen and (max-width:360px) {
    
.form div {width: 100%;} 
    .form .chkboxrq {width: 100%;}
    .headerright {max-width: 280px;}
    .headerright ul li {width: 125px;}
	.headerright ul {width: 100%;}
	.headerright ul li {width: 138px;}
    
}