@charset "utf-8";
/* CSS Document */

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

@media screen and (max-width:1366px) {
    .resp-tabs-list li {padding: 13px 3.3%;}
    .contact_info_bg ul.contact-list li {width: 100%; float: left; display: inline-block; margin: 0 0 10px;}
    .slider_content .slider_box.slide_2 {left: 55%!important;}
    
   
}


@media screen and (max-width:1200px) {
    
    .contactinfo .infodiv.phone {margin: 50px 1%; width: 20%;}
    .contactinfo .infodiv.email {width: 40%;}	
    .resp-tabs-list li {padding: 13px 2.9%;}
    .contactinfobox ul:before {margin: 20px 0 10px;}
    #menu ul li > a {padding: 18px 13px;}
    .col-3 ul.contact-list li:first-child {min-height:inherit!important; height:auto!important}
        
    
}

@media screen and (max-width:1100px) {
	.headerlinks ul .service-text{ position: absolute; top: -15px; right: 3px;}
	.headerlinks {width: 528px; }
    .headerlinks {margin:28px 0 0;}
    #menu ul li > a {padding: 18px 10px; font-size: 14px;}
    .clientname {background: url(../images/testimonial-image.jpg) no-repeat 20px 11px; background-size: 12%;}
    .aboutimagecontent {padding: 30px;}
    .aboutimagecontent img {margin: 0 40px 60px 0;}
    .resp-tabs-list li {padding: 13px 2.5%;}
    .contactpg_div {padding: 30px 30px 100px 30px;}
    .contactinfobox p {margin: 10px 0;} 
    .contactinfobox ul li {margin: 8px 0;}
    
    .proj_mgmt {width: 450px;}
    .proj_mgmt img{width:100%}
    .projectsection {background-size: 90%;}
    ul.default-list-in {width: 90%;}
    .slider_innercontent p {font-size: 16px!important;}
    .slider_content .slider_box.slide_2 div span {margin: -20px 0 0 0;}
    
    .servicepg h3:before, .servicepg h3:after, section.innerpg_section .wrapper > h1:before, section.innerpg_section .wrapper > h1:after{display: none!important} 

    .servicepg h3, section.innerpg_section .wrapper > h1{border:0px solid }


    
}

@media screen and (max-width:1024px) {
    
    
.processdiv.enquiry .icondiv:after 
.processdiv.quote .icondiv:after   
.processdiv.planning .icondiv:after
.processdiv.design .icondiv:after
{background-size: 61%!important; background-position: 50%!important;}
    
.resp-tabs-list li {padding: 13px 2.3%;}
.ourservice{min-height: 750px}
.contactinfobox {width: calc(100% - 440px);}
.formdiv {width: 400px;}
	
    
}

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

#menu ul li ul li a{background: #fff !important; color: #252525 !important; padding: 6px 15px 6px 30px; font-size: 13px;}
#menu ul li ul li a:hover{background: #a21d21 !important; color: #fff !important; }
/* 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:#fff;
  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%; border: 0px; }
#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(0, 0, 0, 0.3); }*/
#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(0,0,0,0.2);width: 40px;height: 40px;margin: 2px 0 0 0;text-align: center;color: #ffffff;padding: 11px 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); left: 0; }
html.open-menu nav#menu {z-index: 10; transform: translateX(0);}

#menu ul li:before, #menu ul li:first-child:after {display:none}    
    
.logo {margin: 0 0 0 50px;}
.clientname {background: url(../images/testimonial-image.jpg) no-repeat 20px 20px; background-size: 10%;}
.aboutimagecontent img {width: 40%;}
.resp-tabs-list li {padding: 13px 1.3%;}
.ourservice{min-height: 800px}
.detailpg_imgbox img {min-height: 300px;}
    
.div_tilted {display: none;}
.product_text{background: rgba(0,0,0,0.9); padding: 20px 50px;}
.pro_img2:after{display: none}  
.pro_img2 img{width:100%}
.productdetail h5 {padding: 0 20px;}
.contactinfobox {width: 100%; margin: 0 0 30px 0;}
.contactinfobox ul {padding: 0 0 70px 0;}
.formdiv {box-shadow: 1px 1px 10px rgba(0,0,0,0.3); margin: 0 auto; float: none; clear: both;}
.formdiv:after {display:none}
.contactpg_div {background: url(../images/contact-bg-flat.jpg)no-repeat 0 0; margin:0 0 30px 0}
.socialicons {padding: 0 0 10px; background: #ffffff}
.proj_mgmt {width: 450px; float: none; margin: -40px auto 0;}
.beforeafter {float: none; width:80%; margin: 30px auto; max-width: 500px;}
    
    
    .productbox .hoverdiv {background: url(../images/quote-icon.png) no-repeat 20px 20px rgba(153,0,0,0.9); padding: 20px 20px 0 70px;}
    .contactinfobox ul {padding: 0;}
    .othercontent_div.home-more-content {padding: 15px 40px;}
ul.default-list-in {width: 100%;}
    .slider_content .slider_box.slide_2 {left: 50%!important;top: 0px;}
    
.img_left_block:before {left: 50%; max-width: 646px; margin: 0 0 0 -323px;}
    
    
    
}

@media screen and (max-width:860px) {
    .productcontainer .productbox{width: 100%;}
    header {height: 120px;}
    .headerright ul li:first-child {margin: 0 00px 0 0; width: 100%;}
    .headerright ul li {float: right;}
    .contactinfo .infodiv.address, .contactinfo .infodiv.phone, .contactinfo .infodiv.email {width: 80%; margin: 20px auto; float: none;}
    .footerlinksection .map {width: 80%; float: none; margin: 0 auto 20px;}
    .footerlinksection .productlinks {width: 39%;}
    .footerlinksection .quicklinks {width: 55%;}
    .productbox {width: 43%;}
    .aboutimagecontent img {width: 28%;}
    .percent30 {padding: 0 0 30px 0;} 
    .ourservice{min-height: 950px}
    .twocolumn_content {column-gap: 20px;}
     h3:after, h3:before{display:none!important; }
    h3{border:0px!important}
    ul.default-list-in {width: 90%;}
    
    
    .innerpg_section h1:before, .innerpg_section h1:after{display: none}
    .innerpg_section h1{border:0!important}
    .servicepg h3, section.innerpg_section .wrapper > h1{font-size: 30px} 



    
}



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

}

@media screen and (max-width:767px) {
    .headerlinks ul li.fb a, .headerlinks ul li.freequote{border-radius: 0px;}
    .headerlinks ul li{float: none; margin-left: 10px;}
    .headerlinks ul li.callnow dl dd a i{display: inline-block; margin-right: 5px;}
    .headerlinks ul li.callnow dl dd{padding: 0px;}
    .headerlinks ul li.callnow dl dd a{ line-height: normal; display: inline-block; padding: 6px 10px 8px;}
    .headerlinks{margin: 25px 0px 0px; padding-right: 50px}
    .headerlinks ul li.callnow dl dt{display: none;}
    .headerlinks ul li.callnow dl, .headerlinks ul li.callnow dl dd{width: inherit; float: inherit;}
    .headerlinks{width: auto;}
    .logo{margin: 0px;}
    a#toggle{left: inherit; right: 10px; top: 33px;}
    .headerright ul li {font-size: 20px; font-weight:bold}
    .headerright ul li:first-child i {width: 30px; height: 30px; margin: 0 10px 0 0;}
    .aboutsection .sixtydiv {float: left; width: 100%; text-align: center!important;}
    .aboutsection p {text-align: center;}
    .aboutsection a {display: inline; margin: 0px auto 30px; display: inline-block;}
    .aboutsection .fourtydiv {float: none; width: 80%; margin: 0 auto;}
    .testimonialbox {width: 98%;}
    .clientname {background: url(../images/testimonial-image.jpg) no-repeat 20px -1px; background-size: 10%;}
    .testimonialbox .tilt-box {bottom: -22px;}
    .aboutimagecontent img {width: 100%; padding: 0 15% 0; margin: 0 0 15px;}
    .percent70 {width: 100%;}
    .side_ourservice, .feelfree_div{float:left}
    .productdetail h5 {padding: 0 20px;}
    .productdetail .feelfree_div, .productdetail .side_ourservice{width:100%}
    .contactpg_div {padding: 30px 30px 00px 30px;}
    .innerpg_section.servicepg.servicelistpg h1, .innerpg_section.servicepg.servicelistpg h1{font-size: 23px; line-height: 32px;}
    .breadcrumb ul li a:after{top: 11px}
    
        
}

@media screen and (max-width:700px) {
    
    header {height: auto;}
    
    .headerright {margin: 0; width: 100%;}
    .headerright ul li:first-child {width: auto; float: left;}
     .twocolumn_content {
    -webkit-column-gap: 40px;
    -moz-column-gap: 40px;
    -ms-column-gap: 40px;
    column-gap: 40px;}
    
    .img_left_block:before {left: 0; max-width: 100%; margin: 0;}

    
}


@media screen and (max-width:640px) {
    
    .footerlinksection .quicklinks{width: 94%; margin: 0 3% 30px;}
    .footerlinksection .productlinks  {width: 94%;  margin: 0 3%;}
    .product_text {padding: 20px;}
   .brandleft h5 {width: 100%;text-align: center;margin: -10px 0 10px;border: 0px solid red!important;padding: 0;}
   .brandleft h5:before, .brandleft h5:after {display: none}
    .slider_content .slider_box {display: none;}
    


}

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

    #innerbanner{min-height: 242px;}
    .headerlinks ul li{margin-left: 0px}
    /*.headerlinks ul li.fb a{font-size: 14px; padding: 6px 14px 9px;}*/
    .headerlinks ul li.fb a {font-size: 14px;padding: 6px 14px 9px;margin: 0 9px 0 0;}
  .headerlinks ul li.callnow dl dd a {font-size: 14px; padding: 6px 4px 8px;}
    .headerlinks ul li.freequote { background: #a21d21 url("../images/freequote-bg.png") no-repeat scroll 0 6px; font-size: 14px;  font-weight: normal; padding: 6px 4px 9px 27px;}
    .headerlinks{padding: 0px; margin: 70px 0 0 0}
    .logo img{max-width: 100px;}
    .logo {margin: 0 auto; position: static; float: left;}
    .serviceprocess_div .processdiv {width: 50%; margin: 0 0 50px 0;}
    .ourservice {min-height: 1550px;}
    .processdiv.enquiry .icondiv:after, 
    .processdiv.quote .icondiv:after, 
    .processdiv.planning .icondiv:after, 
    .processdiv.design .icondiv:after
    {background: url(../images/service-arrow-down.png)no-repeat 0 0; top: 200px; right: 0%; transform: rotate(90deg);}
    
}


@media screen and (max-width:500px) {
    header {height: 205px;}
    .headerright ul li:first-child {width: 100%; float: left; text-align: center;}	
    .headerright ul {text-align: center;}
    .headerright ul li {float: none; display: inline-block;}
    .footerlinksection .map, .contactinfo .infodiv.address, .contactinfo .infodiv.phone, .contactinfo .infodiv.email {width: 96%;}
    .productbox {width: 98%; max-width: 360px;}
    .aboutimagecontent img {padding: 0 2% 0;}
    
    .twocolumn_content {
    -webkit-column-count:1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    -ms-column-count: 1; /* IE */
    column-count: 1;
}
    .beforeafter {width: 96%;}

    

	
}

@media screen and (max-width:480px) {
	a#toggle{top: 43px;}
	header { height: 205px; padding-top: 30px; }
	
	.headerlinks ul .service-text{ font-size: 15px; position: absolute;
    background: #a21d21;
    color: #fff;
    padding: 4px 10px;
    left: -10px;
    right: 0;
    width: calc(100% + 20px);
    text-align: center;
    margin: 0px;
    top: -30px; font-weight:normal;}
	
    .product_slider.regular.slider{padding: 30px 40px 17px;}
 .testimonialbox .tilt-box {
    -webkit-transform: skewY(0deg);
    -moz-transform: skewY(0deg);
    -ms-transform: skewY(0deg);
    -o-transform: skewY(0deg);
        transform: skewY(0deg);
        bottom: -10px;
    }
    .clientname {padding: 22px 20px 0 100px;}
    .percent30 {width: 100%;}
    .product_text {display: none;}
    .detailpg_imgbox {height: auto;}
    .detailpg_imgbox img {min-height: inherit; margin:0}
    .formdiv {width: 100%;}
    .formdiv ul li.wid50 {width: 100%; margin: 0;}
    .proj_mgmt {max-width: 98%;}
    
.headerlinks{width: 130px!important; margin: 5px 0 0 !important;}
.headerlinks ul li:last-child {margin:8px 0 0 0}

.headerlinks ul li.freequote {width:130px}
.headerlinks ul li.fb {margin:0 0 0 45px}
    .headerlinks ul li.fb a{font-size: 14px; padding: 9px 14px 9px; margin-top: 8px }
     #innerbanner{min-height: 260px;}
    .contactinfodiv .contactdetails h5 {width: calc(100% - 40px);border-bottom: 1px solid #4c4c4c!important;text-align: left;margin: 48px 0 36px 0;padding: 0;text-align: left;border: 0px solid red!important;}
    .contactinfodiv .contactdetails h5:before {display: none}
    .footerlinkdiv h5 {border: 0px solid red!important;}
    .footerlinkdiv h5:before, .footerlinkdiv h5:after {display: none!important;}
    
    .call_panel i.fa.fa-phone, .call_panel i.fa.fa-envelope {line-height: 32px;display: block;text-align: center;clear: both;margin: 0 auto;}
    .call_panel strong {clear: both; display: block; margin: 0 0 10px 0;}
    .call_panel div, .call_panel div.right_br {margin: 10px 0 0 0; }
    .othercontent_div.home-more-content {padding: 15px 20px;}
    .innerpg_section.servicepg.servicelistpg h1, .innerpg_section.servicepg.servicelistpg h1{padding: 0 20px 0;}
    .innerpg_section h1{font-size: 30px!important; padding: 0 20px!important;} 
}


@media screen and (max-width:400px) {
    
    .headerright ul {text-align: center;}
    .headerright ul li a {display: block;}
    .headerright ul li:first-child {line-height: 30px; text-align: center;}
    header {height: 225px;}
    .clientname {padding: 22px 20px 0 20px; background: none;}
    .side_ourservice, .feelfree_div{width:100%}
    .wid50.fright.enquirybox .buttonbar {width: 100%;}
    .wid50.fright.enquirybox .buttonbar .btn-submit {clear: both}
    
   
    
}


@media screen and (max-width:360px) {
    .footerlinksection ul li {width: 100%;}
    .contactinfo .infodiv.address, .contactinfo .infodiv.phone, .contactinfo .infodiv.email {margin: 10px auto; float: none; background: none; padding: 10px;}
    
    
}