@charset "utf-8";
@media screen and (min-width:1367px){
    .leftcontent,.rightcontent{
        width:500px
    }
    .blackone,.blue{
        max-width:590px
    }
    .productbox{
        margin:0 3.8%
    }
}
@media screen and (max-width:1366px){
    .leftcontent,.rightcontent{
        width:100%;
        margin:30px 0;
        padding:0 40px
    }
    .resi_half .rightcontent{
        padding:0 2% 0 0
    }
    .productbox{
        margin:0 3.4%
    }
}
@media screen and (max-width:1200px){
    .productbox{
        margin:0 2.1%
    }
    .sys_install{
        overflow:hidden
    }
    .sys_install .texturedbox{
        display:none
    }
    .sys_install img{
        width:initial
    }
    .installationdiv{
        min-width:100%
    }
    .servicename{
        padding:10px 5px
    }
}
@media screen and (max-width:1100px){
    .aboutinfodiv{
        width:100%
    }
    .footerlinks{
        width:60%
    }
    .footerinfobox{
        width:30%
    }
    .productbox{
        margin:0 1.1%
    }
    #menu ul li{
        margin:0 0 0 5px
    }
    .servicelistbox{
        margin:0 3% 30px;
        width:40%
    }
    .servicename{
        padding:10px 15px;
        width:105%
    }
}
@media screen and (max-width:1024px){
    #menu ul li{
        margin:0 0 0 10px
    }
    .productbox{
        border:15px solid #fff
    }
    #menu ul li>a{
        font-size:16px
    }
	.service_areas .arealisting{width:40%}
}
@media screen and (max-width:992px){
    #menu{
        margin:30px 0 0
    }
    #menu ul li>a{
        padding:10px;
        font-size:17px
    }
    #menu ul li{
        margin:0
    }
    .logo{
        width:150px
    }
    .logo img{
        width:100%
    }
    .servicebox{
        width:50%
    }
    .footerinfobox{
        width:40%
    }
    .blue_black .half,.comm_half,.resi_half{
        width:100%
    }
    .resi_half .rightcontent{
        width:100%;
        margin:0;
        position:inherit
    }
    #triangle-bottomleft,#triangle-topleft{
        display:none!important
    }
    .rgt_sec_mrgn{
        margin-left:15px!important
    }
    .leftcontent,.rightcontent{
        margin:0
    }
    .leftcontent{
        padding:0 20px
    }
    .resi_cont_height{
        max-height:170px;
        height:inherit
    }
    .testimonialbox{
        width:47%
    }
    .installationdiv img,.productbox img{
        width:100%
    }
    .toprightbox{
        min-width:394px
    }
    .callusdiv{
        margin:0 10px 0 3px
    }
    .service_areas ul{
        margin:30px 0
    }
    .blue_black .half.fright{
        height:inherit!important
    }
    .productbox{
        border-width:5px;
        width:30%;
        margin:0 1.6%
    }
    .servicename{
        padding:10px 5px
    }
    .servicelistbox{
        margin:0 1% 30px;
        width:46%
    }
    .blue_black .half .blue {
        text-align: center;
    }
    .half.fleft.sameheight .logodiv {
        float: none;
    }
	.service_areas .arealisting{width:50%}
}
@media screen and (max-width:850px){
    .toplinks{
        min-width:330px
    }
    .toplinks a{
        padding:0 15px
    }
    .productbox{
        position:relative
    }
    .productrow{
        position:inherit
    }
    .texturedbox{
        display:none
    }
    #menu ul li,#menu ul li a,a#toggle{
        display:block
    }
    .projectwork a.allproject{
        margin:30px auto
    }
    .navmenudiv{
        position:absolute
    }
    #menu,div#overlay{
        position:fixed;
        left:0;
        top:0;
        height:100%
    }
    a#toggle{
        z-index:1002
    }
    main#content{
        margin-top:65px;
        transition:all ease-out .3s
    }
    #menu{
        width:290px;
        overflow:hidden;
        overflow-y:auto;
        background-color:#333;
        border-right:1px solid #424242;
        margin:0;
        -moz-transform:translateX(-290px);
        -webkit-transform:translateX(-290px);
        -ms-transform:translateX(-290px);
        transform:translateX(-290px)
    }
    #menu ul{
        text-align:left;
        background-color:transparent
    }
    #menu ul li{
        border-radius:0!important;
        border:1px solid #ccc
    }
    #menu ul li a>i{
        float:right
    }
    #menu ul li ul{
        display:none;
        position:static;
        width:100%;
        background-color:rgba(255,255,255,1)
    }
    #menu ul li:hover>ul{
        display:none
    }
    #menu ul li:hover>a>i{
        transform:rotateZ(0)
    }
    #menu ul li.open>a{
        background-color:#0456A3
    }
    #menu ul li.open>a>i{
        transform:rotateZ(90deg)
    }
    #menu ul li.open>ul{
        display:block;
        margin:0
    }
    div#overlay{
        display:block;
        visibility:hidden;
        width:100%;
        background-color:rgba(0,0,0,.8);
        z-index:1;
        opacity:0;
        -moz-transition:all ease-out .3s;
        -webkit-transition:all ease-out .3s;
        -ms-transition:all ease-out .3s;
        transition:all ease-out .3s
    }
    html.open-menu{
        overflow:hidden
    }
    html.open-menu div#overlay{
        visibility:visible;
        opacity:1;
        left:290px;
        width:100%;
        z-index:1001
    }
    html.open-menu a#toggle,html.open-menu main#content{
        transform:translateX(0)
    }
    html.open-menu nav#menu{
        z-index:3;
        -moz-transform:translateX(0);
        -webkit-transform:translateX(0);
        -ms-transform:translateX(0);
        transform:translateX(0)
    }
    #menu ul li.open ul li a{
        color:#666!important
    }
    #menu ul li.open ul li a:hover{
        color:#0456A3!important
    }
    html.open-menu a#toggle .fa-bars:before,html.open-menu main#content .fa-bars:before{
        content:"X";
        font-size:23px;
        font-weight:700
    }
    html.open-menu a#toggle i{
        top:47%;
        font-family:arial
    }
    .menu-item.last-item{
        background-image:none
    }
    #menu .menu-item.last-item a{
        display:block;
        width:100%;
        float:left;
        text-align:left;
        padding-left:10px
    }
    #menu ul li>a{
        padding:10px 5px 10px 10px;
        border-radius:0!important;
        font-size:16px
    }
    .menuservices.open .fa-sort-desc:before,.menuservices.open .fa-sort-down:before{
        content:"-";
        margin:9px 0 0 11px;
        font-weight:400;
        float:left;
        padding:0;
        font-size:60px;
        line-height:10px;
        color:#fff
    }
    .fa.fa-sort-desc{
        position:absolute;
        top:0;
        right:0;
        background:#9bc340;
        width:42px;
        height:42px
    }
    .fa-sort-desc:before,.fa-sort-down:before{
        content:"+";
        font-size:40px;
        font-weight:700;
        padding:0 0 0 9px;
        cursor:context-menu;
        color:#fff
    }
    .contactleft,.contactright{
        width:100%
    }
    input[type=text],input[type=email],input[type=tel],textarea{
        width:94%;
        margin-bottom:10px
    }
    .contactform ul li{
        margin:0
    }
    .service_areas ul li:first-child{
        margin:20px 0
    }
    .installation-content{
        min-height:380px;
        left:20%;
        background-size:60%
    }
	.suburb-list-block-1,.suburb-list-block-2{width:100%;display:block;margin-bottom:30px}
	.service_areas .arealisting ul>li{margin: 0 0 12px}
}
@media screen and (max-width:768px){
    a#toggle{
        top:127px
    }
    .topheader .wrapper{
        border-left:0 solid #4d4d4d;
        width:100%;
        text-align:center;
        height:97px
    }
    .toplinks{
        min-width:100%;
        text-align:center;
        border-bottom:1px solid #4d4d4d
    }
    .toplinks a:first-child{
        border-left:1px solid #4d4d4d
    }
    .toprightbox{
        float:none;
        min-width:408px;
        text-align:center;
        margin:0 auto;
        display:inline-block
    }
    #banner{
        margin:97px 0 0
    }
    .footerinfobox{
        width:100%
    }
    .footerinfobox .contactinfobox{
        margin:6px;
        width:47%;
        text-align:left;
        display:inline-block;
        min-height:82px;
        float:left
    }
    .airconditionpg .innercontentdiv,.commer_content,.heating .innercontentdiv,.row_onethird{
        text-align:center
    }
    .footerlinks{
        width:100%
    }
    .contactbanner,.pagetitle,.service_areas{
        margin:200px 0 30px
    }
    .airconditionpg p,heating p{
        clear:both
    }
    .airconditionpg .innercontentdiv img,.heating .innercontentdiv img{
        margin:0 auto;
        float:none!important;
        width:100%
    }
    .commer_content{
        background-size:80%
    }
    .commer_content img{
        float:none;
        margin:0 auto;
        text-align:center
    }
    .commer_content p{
        margin:15px 0 10px
    }
    .commer_content p:last-child{
        margin:15px 0 100px
    }
    .servicelistbox{
        max-width:94%;
        width:70%
    }
    .heat_pg_content .half,.heat_pg_content .half img{
        width:100%
    }
    .sys_install_content{
        margin:30px;
        max-height:330px
    }
    .installation-content{
        position:static;
        width:100%;
        float:none;
        margin:10px auto
    }
    .onethird_div{
        width:46%;
        float:none;
        display:inline-block
    }
    .mid-margin{
        margin:0
    }
}
@media screen and (max-width:640px){
    .testimonialbox{
        width:97%
    }
    .innercontentdiv.clearfix .half{
        width:100%
    }
    .commercialtype{
        width:100%;
        margin:0 0 20px
    }
    .productbox{
        width:46%;
        margin:0 1.6% 20px;
        text-align:center;
        display:inline-block;
        float:none
    }
    .servicelistbox{
        width:80%
    }
}
@media screen and (max-width:600px){
    .servicebox{
        width:100%;
        height:inherit!important
    }
    .footerinfobox .contactinfobox{
        width:52%;
        min-height:inherit;
        float:none
    }
    .commer_content{
        background-size:100%
    }
	.service_areas .arealisting{width:100%}
	.service_areas .arealisting ul>li{float:left;width:50%}
	.service_areas .arealisting ul>li{font-size:20px}
}
@media screen and (max-width:480px){
    .callusdiv span,.service_areas ul li:last-child span.phone{
        display:none
    }
    .toplinks a{
        padding:0 10px
    }
    .callusdiv{
        font-size:15px;
        margin:0 10px 0 3px;
        line-height:46px
    }
    .toprightbox{
        min-width:322px
    }
    .enquirybox a{
        padding:13px 5px;
        font-size:14px
    }
    .overviewdiv ul li a,.testimonial_content{
        padding:0
    }
    .footerinfobox .contactinfobox{
        width:250px
    }
    .onethird_div,.onethird_div img,.overviewdiv,.service_areas ul li:last-child a{
        width:100%
    }
    .overviewdiv{
        text-align:center
    }
    .overviewdiv ul li{
        background:0 0
    }
    .pagetitle h3{
        font-size:22px
    }
    .sys_install_content{
        margin:10px;
        max-height:380px
    }
    .service_areas ul li{
        background:0 0;
        text-align:center;
        min-width:90%;
        padding:0
    }
    .service_areas ul li:first-child span.arrow{
        background:0 0;
        width:100%
    }
    .installation-content{
        background:#0454A3!important
    }
    .productbox{
        width:90%
    }
    .testimonial_title{
        background-size:40px auto;
        font-size:23px;
        height:55px;
        padding:0 0 0 50px
    }
    .servicelistbox{
        width:95%
    }
	.sb-list {
    padding-left: 25px;
}
	.sb-list li {
    width: 50%;
    float: left;
}
}
@media screen and (max-width:360px){
    #menu{
        width:270px
    }
    html.open-menu div#overlay{
        left:270px
    }
    .servicename{
        font-size:12px;
        font-weight:700;
        width:111%
    }
	.sb-list li a{
 font-size:15px;
}
}