/*------Start of Top-------*//*HEADERS*//*Close HEADERS*/.top{max-width: 100%; margin: 0; display: grid; grid-gap: 10px; grid-template-areas: 'logo';}.top img{padding-bottom: 0px;}.responsive{width: 100%; max-width: 100%; height: auto;}/*Image in Kitchen Exhaust Section*/.breadcrumb{display: grid; grid-gap: 0px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));}.breadcrumb,.breadcrumb li{display: inline-block; margin-bottom: 0px;}.breadcrumb>*:before{content: "/"; font-family: 'FontAwesome'; color: #555; font-size: 20px; margin: 0px 15px;}.breadcrumb>*:first-child:before{content: " "; margin: 0;}.breadcrumb>*:after,.breadcrumb li:not(:last-child):after{content: ' '; margin: 0;}.breadcrumb>*:last-child:after{content: ' ';}.breadcrumb>* a{color: #555; font-size: 14px; line-height: 30px; text-transform: capitalize;}.breadcrumb>* a:hover,.breadcrumb>* a:focus{color: #000084;}.breadcrumb>*:hover a,.breadcrumb>*:focus a{text-decoration: none;}.breadcrumb>*.current a{color: #000084;}.breadcrumb li em{font-size: 18px; line-height: 30px;}html{box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; color: #555;}body{background-color: #eaeaea; font-size: 17px; margin: 0 0 15px; color: #555; font-weight: 300; line-height: 1.5; padding: 2em 2em 4em; margin: 0 auto;}.page{display: grid; grid-gap: 0px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));}.pageContent{line-height: 24px; background-color: #ffffff; color: #ffffff; text-align: left; padding: 2rem 4rem; margin-top: 10px; box-shadow: 0 1px 5px rgba(104, 104, 104, 0.8); border-radius: 5px;}.pageContent ul li::before{content: "\2022"; /* Add content: \2022 is the CSS Code/unicode for a bullet */ color: #4ed443; font-weight: bold; /* If you want it to be bold */ display: inline-block; /* Needed to add space between the bullet and the text */ width: 1em; /* Also needed for space (tweak if needed) */ margin-left: -1em; /* Also needed for space (tweak if needed) */ margin-top: 10px;}/*--START LIST LINK COLOUR--*/a:link{color: #055a98; background-color: transparent; text-decoration: none;}a:visited{color: blue; background-color: transparent; text-decoration: none;}a:hover{color: red; background-color: transparent; text-decoration: underline;}/*--END LIST LINK COLOUR--*//* START SUBURBS LIST */.suburbs{display: grid; grid-gap: 25px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));}.suburbs ul li{padding-bottom: 20px;}.list1{background: #a42300; color: #ffffff; text-align: left; font-size: 20px; color: #ffffff; padding: .3rem .5rem; margin-top: 10px; box-shadow: 0 1px 5px rgba(104, 104, 104, 0.8); border-radius: 5px; margin-bottom: 10px;}.list2{background: #a42300; color: #ffffff; font-size: 20px; text-align: left; padding: .3rem .5rem; margin-top: 10px; box-shadow: 0 1px 5px rgba(104, 104, 104, 0.8); border-radius: 5px; margin-bottom: 10px;}.list3{background: #a42300; text-align: left; font-size: 20px; color: #ffffff; padding: .3rem .5rem; margin-top: 10px; box-shadow: 0 1px 5px rgba(104, 104, 104, 0.8); border-radius: 5px; margin-bottom: 10px;}/* END OF SUBURBS LIST *//*--START SUBURB LIST LINK COLOUR--*/.suburbs a:link{color: white; background-color: transparent; text-decoration: none;}.suburbs a:visited{color: orange; background-color: transparent; text-decoration: none;}.suburbs a:hover{color: #17b046; background-color: transparent; text-decoration: none;}.suburbs a:active{color: white; background-color: transparent; text-decoration: none;}/*--END SUBURB LIST LINK COLOUR--*/.img{max-width: 100%;}.container{width: 100%; margin: auto;}/*-------Navigation------*/.topnav{overflow: hidden; background-color: #35424a;}.topnav a{float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 56px; text-decoration: none; font-size: 17px;}.active{background-color: #000084; color: white;}.topnav .icon{display: none;}.dropdown{float: left; overflow: hidden;}.dropdown .dropbtn{font-size: 17px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin-top: 3px;}.dropdown-content{display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1;}.dropdown-content a{float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left;}.topnav a:hover,.dropdown:hover .dropbtn{background-color: #555; color: white;}.dropdown-content a:hover{background-color: #ddd; color: black;}.dropdown:hover .dropdown-content{display: block;}@media screen and (max-width: 600px){.topnav a:not(:first-child), .dropdown .dropbtn{display: none;}.topnav a.icon{float: right; display: block;}}@media screen and (max-width: 600px){.topnav.responsive{position: relative;}.topnav.responsive .icon{position: absolute; right: 0; top: 0;}.topnav.responsive a{float: none; display: block; text-align: left;}.topnav.responsive .dropdown{float: none;}.topnav.responsive .dropdown-content{position: relative;}.topnav.responsive .dropdown .dropbtn{display: block; width: 100%; text-align: left;}}/*-------END OF NAV-------*//*-------start photo box----------*//*-------BOXES START-------*/.boxA img{margin-left: auto; margin-right: auto; display: block;}/*Exhaust BOX Start*/.boxB img{margin-left: auto; margin-right: auto; display: block;}/* Electrician BOX image Start*/.boxC img{margin-left: auto; margin-right: auto; display: block;}.boxes{display: grid; grid-gap: 35px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));}.boxes ul li{line-height: 23px;}ul{list-style: none; /* Remove default bullets */}.boxes ul li::before{content: "\2022"; /* Add content: \2022 is the CSS Code/unicode for a bullet */ color: #4ed443; /* Change the color */ font-weight: bold; /* If you want it to be bold */ display: inline-block; /* Needed to add space between the bullet and the text */ width: 1em; /* Also needed for space (tweak if needed) */ margin-left: -1em; /* Also needed for space (tweak if needed) */ margin-top: 10px;}.boxA{background: #ffffff; text-align: left; padding: 1.0rem 1.0rem; margin-top: 10px; margin-bottom: 10px; box-shadow: 0 1px 5px rgba(104, 104, 104, 0.8); border-radius: 5px;}.boxB{background: #ffffff; text-align: left; padding: 1.0rem 1.0rem; margin-top: 10px; margin-bottom: 10px; box-shadow: 0 1px 5px rgba(104, 104, 104, 0.8); border-radius: 5px;}.boxC{background: #ffffff; text-align: left; padding: 1.0rem 1.0rem; margin-top: 10px; margin-bottom: 10px; box-shadow: 0 1px 5px rgba(104, 104, 104, 0.8); border-radius: 5px;}.boxD{background: #ffffff; text-align: left; padding: 1.0rem 1.0rem; margin-top: 10px; margin-bottom: 10px; box-shadow: 0 1px 5px rgba(104, 104, 104, 0.8); border-radius: 5px;}.boxA a:link{color: #ffffff; background-color: transparent; text-decoration: none;}/*-------BOXES ENDS-------*/.boxB a:link{color: #ffffff; background-color: transparent; text-decoration: none;}/*-------BOXES ENDS-------*/.boxC a:link{color: #ffffff; background-color: transparent; text-decoration: none;}/*-------BOXES ENDS-------*/.boxD a:link{color: #ffffff; background-color: transparent; text-decoration: none;}/*-------BOXES ENDS-------*//*-------BOX START-------*/.box1 img{margin-left: auto; margin-right: auto; display: block;}/*Exhaust BOX Start*/.box2 img{margin-left: auto; margin-right: auto; display: block;}/* Electrician BOX image Start*/.box3 img{margin-left: auto; margin-right: auto; display: block;}.box{display: grid; grid-gap: 35px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));}.box ul li{line-height: 23px;}ul{list-style: none; /* Remove default bullets */}.box ul li::before{content: "\2022"; /* Add content: \2022 is the CSS Code/unicode for a bullet */ color: #4ed443; /* Change the color */ font-weight: bold; /* If you want it to be bold */ display: inline-block; /* Needed to add space between the bullet and the text */ width: 1em; /* Also needed for space (tweak if needed) */ margin-left: -1em; /* Also needed for space (tweak if needed) */ margin-top: 10px;}.box1{background: #ffffff; text-align: left; padding: 1.5rem 2rem; margin-top: 10px; margin-bottom: 40px; box-shadow: 0 1px 5px rgba(104, 104, 104, 0.8); border-radius: 5px;}.box2{background: #ffffff; text-align: left; padding: 1.5rem 2rem; margin-top: 10px; margin-bottom: 40px; box-shadow: 0 1px 5px rgba(104, 104, 104, 0.8); border-radius: 5px;}.box3{background: #ffffff; text-align: left; padding: 1.5rem 2rem; margin-top: 10px; margin-bottom: 40px; box-shadow: 0 1px 5px rgba(104, 104, 104, 0.8); border-radius: 5px;}/*----------IMAGES INLINE IMAGEs START-------------*/.photoA img{margin-left: auto; margin-right: auto; display: block;}.photoB img{margin-left: auto; margin-right: auto; display: block;}.photoC img{margin-left: auto; margin-right: auto; display: block;}.photoC img{margin-left: auto; margin-right: auto; display: block;}.photoC img{margin-left: auto; margin-right: auto; display: block;}.photos{display: grid; grid-gap: 35px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));}/*----------IMAGES INLINE IMAGEs END-------------*//*-------BOX COLOR START-------*/.boxcolor{display: grid; grid-gap: 0px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));}.boxcolor ul li{line-height: 23px;}ul{list-style: none; /* Remove default bullets */}.boxcolor ul li::before{content: "\2022"; /* Add content: \2022 is the CSS Code/unicode for a bullet */ color: #4ed443; /* Change the color */ font-weight: bold; /* If you want it to be bold */ display: inline-block; /* Needed to add space between the bullet and the text */ width: 1em; /* Also needed for space (tweak if needed) */ margin-left: -1em; /* Also needed for space (tweak if needed) */ margin-top: 10px;}.boxpcolor1{background: #ffffff; text-align: left; padding: 1.5rem 2rem; margin-top: 10px; margin-bottom: 10px;}.boxpcolor2{background: #86cced; text-align: left; padding: 1.5rem 2rem; margin-top: 10px; margin-bottom: 10px;}.boxcolor3{background: #ffffff; text-align: left; padding: 1.5rem 2rem; margin-top: 10px; margin-bottom: 10px;}.boxcolor4{background: #ffffff; text-align: left; padding: 1.5rem 2rem; margin-top: 10px; margin-bottom: 10px;}/*-------BOXPRINT END-------*//*-------BOX PRINT START-------*/.boxprint{display: grid; grid-gap: 10px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));}.boxprint ul li{line-height: 23px;}ul{list-style: none; /* Remove default bullets */}.boxprint ul li::before{content: "\2022"; /* Add content: \2022 is the CSS Code/unicode for a bullet */ color: #4ed443; /* Change the color */ font-weight: bold; /* If you want it to be bold */ display: inline-block; /* Needed to add space between the bullet and the text */ width: 1em; /* Also needed for space (tweak if needed) */ margin-left: -1em; /* Also needed for space (tweak if needed) */ margin-top: 10px;}.boxprint1{background: #ffffff; text-align: left; padding: 1.5rem 2rem; margin-top: 10px; margin-bottom: 10px;}.boxprint2{background: #ffffff; text-align: left; padding: 1.5rem 2rem; margin-top: 10px; margin-bottom: 10px;}.boxprint3{background: #ffffff; text-align: left; padding: 1.5rem 2rem; margin-top: 10px; margin-bottom: 10px;}.boxprint4{background: #ffffff; text-align: left; padding: 1.5rem 2rem; margin-top: 10px; margin-bottom: 10px;}/*-------BOXPRINT END-------*//*-------BOX BANNER START-------*/.boxbanner{background: #d1d9de; display: grid; grid-gap: 0px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));}.boxbanner ul li{line-height: 23px;}ul{list-style: none; /* Remove default bullets */}.boxbanner ul li::before{content: "\2022"; /* Add content: \2022 is the CSS Code/unicode for a bullet */ color: #4ed443; /* Change the color */ font-weight: bold; /* If you want it to be bold */ display: inline-block; /* Needed to add space between the bullet and the text */ width: 1em; /* Also needed for space (tweak if needed) */ margin-left: -1em; /* Also needed for space (tweak if needed) */ margin-top: 10px;}.boxbanner1{background: #d1d9de; text-align: left; padding: 1.5rem 2rem; margin-top: 10px; margin-bottom: 10px;}.boxbanner2{background: #d1d9de; text-align: left; padding: 1.5rem 2rem; margin-top: 10px; margin-bottom: 10px;}.boxbanner3{background: #d1d9de; text-align: left; padding: 1.5rem 2rem; margin-top: 10px; margin-bottom: 10px;}.boxbanner4{background: #c3c3c3; text-align: left; padding: 1.5rem 2rem; margin-top: 10px; margin-bottom: 10px;}/*-------BOX BANNER END-------*//*-------BOX REVIEWS START-------*/.boxreview1 img{margin-left: auto; margin-right: auto; display: block;}.boxreview2 img{margin-left: auto; margin-right: auto; display: block;}.boxreview3 img{margin-left: auto; margin-right: auto; display: block;}.boxreview{display: grid; grid-gap: 35px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));}.boxreview ul li{line-height: 23px;}ul{list-style: none; /* Remove default bullets */}.boxreview ul li::before{content: "\2022"; /* Add content: \2022 is the CSS Code/unicode for a bullet */ color: #4ed443; /* Change the color */ font-weight: bold; /* If you want it to be bold */ display: inline-block; /* Needed to add space between the bullet and the text */ width: 1em; /* Also needed for space (tweak if needed) */ margin-left: -1em; /* Also needed for space (tweak if needed) */ margin-top: 10px;}.boxreview1{background: #35424a; text-align: left; color: #fff; padding: 2rem 2rem; margin-top: 0px; margin-bottom: 30px; box-shadow: 0 1px 5px rgba(104, 104, 104, 0.8); border-radius: 5px;}.boxreview2{background: #35424a; text-align: left; color: #fff; padding: 2rem 2rem; margin-top: 0px; margin-bottom: 30px; box-shadow: 0 1px 5px rgba(104, 104, 104, 0.8); border-radius: 5px;}.boxreview3{background: #35424a; text-align: left; color: #fff; padding: 2rem 2rem; margin-top: 0px; margin-bottom: 30px; box-shadow: 0 1px 5px rgba(104, 104, 104, 0.8); border-radius: 5px;}.boxreview4{background: #35424a; text-align: left; color: #fff; padding: 2rem 2rem; margin-top: 0px; margin-bottom: 30px; box-shadow: 0 1px 5px rgba(104, 104, 104, 0.8); border-radius: 5px;}/*-------BOX REVIEWS END-------*/.pageContent{color: #555; margin-left: 0px; margin-right: 0px; margin-top: 50px; margin-bottom: 50px;}/*-----STAR RATING------*/.checked{color: orange}/*-----REVIEWS------*/.reviews{display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));}.review{background: #35424a; text-align: left; color: #fff; padding: 2rem 2rem; margin-top: 10px; margin-bottom: 30px; box-shadow: 0 1px 5px rgba(104, 104, 104, 0.8); border-radius: 5px;}/*-----REVIEW END-------*//*-----START PHOTO BOX-------*//*-----END PHOTO BOX-------*//* START OF FOOTER COLUMN */.info{display: grid; grid-gap: 0px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))}.footerbox1{background: #35424a; text-align: left; color: #ffffff; font-size: 14px; list-style: none; padding: 1rem 2rem; margin-top: 10px;}.footerbox1 ul li{list-style-type: none;}.footerbox2{background: #35424a; text-align: left; color: #ffffff; font-size: 14px; list-style: none; padding: 1rem 2rem; margin-top: 10px;}.footerbox2 ul li{list-style-type: none;}.footerbox3{background: #35424a; text-align: left; color: #ffffff; font-size: 14px; list-style: none; padding: 1rem 2rem; margin-top: 10px;}.footerbox3 ul li{list-style-type: none;}/*--Footer Box 4 START LIST LINK COLOUR--*/.footerbox4 a:link{color: #ffffff; background-color: transparent; text-decoration: none;}.footerbox4 a:visited{color: yellow; background-color: transparent; text-decoration: none;}.footerbox4 a:hover{color: red; background-color: transparent; text-decoration: underline;}.footerbox4{background: #35424a; text-align: left; color: #ffffff; font-size: 14px; list-style: none; padding: 1rem 2rem; margin-top: 10px;}.footerbox4 ul li{list-style-type: none;}/* END OF FOOTER COLUMN *//* Start Mob box */@media (max-width: 700px){.box{grid-template-areas: 'box' 'box1' 'box2' 'box3'}}/* End Mob box *//* Start Mob boxes */@media (max-width: 700px){.boxes{grid-template-areas: 'boxes' 'boxesA' 'boxesB' 'boxesC' 'boxesD'}}/* End Mob boxes */.main-nav ul{grid-template-columns: 1fr;}@media (max-width: 500px){.box{grid-template-areas: 'box' 'box1' 'box2' 'box3'}}@media (max-width: 500px){.boxes{grid-template-areas: 'boxes' 'boxesA' 'boxesB' 'boxesC' 'boxesD'}}