/*------Start of Top-------*/.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 5rem; 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;}/*a:active{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 ul{list-style-type: none;}*/ .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--*/ /*ul li{list-style-type: square;}*/.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-------*/ /*MAIN HEADING START*//*.box1 h2{text-align: center;padding-left: 20px;}.box2 h2{text-align: center;}.box3 h2{text-align: center;}*//*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;}.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 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 */@media (max-width: 700px){.box{grid-template-areas: 'box' 'box1' 'box2' 'box3'}}.main-nav ul{grid-template-columns: 1fr;}@media (max-width: 500px){.box{grid-template-areas: 'box' 'box1' 'box2' 'box3'}}