@import url('https://fonts.googleapis.com/css?family=Hind:300,400|Didact+Gothic&display=swap');
*{box-sizing:border-box}
body{font-family:'Didact Gothic',sans-serif;font-size:18px;color:#333;padding:0;margin:0;text-align:center;margin-top:140px}
img{display:block;max-width:100%}
a{color:#fe6519}
p{line-height:1.6}
h1,h2{font-family:'Didact Gothic',sans-serif;font-weight:normal}
header{background:#000;width:100%;position:fixed;top:0;z-index:9999}
.full{width:1024px;max-width:100%;margin:0 auto;position:relative;text-align:left}
#logo{float:left;width:283px;margin-top:15px}
#logo:hover{cursor:pointer}
#dulux{height:85px;max-width:100%;margin-top:10px}
nav{margin-top:35px;float:left}
nav ul{float:right;list-style:none;margin:0;padding:0}
nav li{float:left;position:relative}
nav ul a{color:#fff;display:block;padding:17px 24px;text-decoration:none;font-size:15px;white-space:nowrap;text-transform:uppercase}
nav ul a:hover,.current{color:#bada55}
nav ul ul{visibility:hidden;opacity:0;transition:opacity .25s ease .2s;position:absolute;z-index:9999;background:#000;left:-75px;right:-75px;padding:15px 0 10px}
nav li:hover ul{visibility:visible;opacity:1}
nav li li{float:none}
nav ul ul li a{text-align:center;padding:7px 0}
footer{float:left;width:100%;padding:38px 10px;background:#333;color:#fff;}
.phone{float:left;font-size:24px;color:#fff;margin:0 0 14px 10px}
.phone a{text-decoration:none;color:#fff}
.right{float:right;width:200px}
section{float:left;width:100%}
#callout{background:url("/img/ladder-1977946_1920.jpg");background-attachment:fixed;background-size:cover;height:calc(100vh - 140px)}
#callout{color:#fff;text-align:center;text-shadow:0 0 6px #444}
#callout h1{font-size:45px;margin:140px 0 0 0}
#callout p{font-size:24px;font-weight:300;font-family:'Hind',sans-serif;margin-bottom:100px}
#services{background:rgb(71, 110, 25);color:#fff;text-align:center}
.title{text-transform:uppercase;font-size:45px;text-align:center}
.btn{background:rgba(255,255,255,.1);display:inline-block;color:#fff;text-decoration:none;padding:15px 45px;transition:.25s all}
.btn:hover{background:rgba(255,255,255,.2)}
.btn-white{background:#fff;color:#444;}
.btn-white:hover{background:#888;color:#fff}
#services .full{text-align:center}
.service{width:33.3333%;float:left;text-align:center;margin-bottom:40px}
.service img{display:inline-block;width:75px;margin-bottom:25px}
.service .btn{background:none;width:145px;padding:15px 0;border:1px solid #fff;font-size:14px}
.service .btn:hover{background:rgba(255,255,255,.25)}
.button{display:inline-block}
#about{background:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)),url("/img/about.jpg");background-attachment:fixed;background-size:cover;}
#about .full{width:600px;color:#fff}
#about .btn{background:#444;color:#fff}
#reviews{padding-bottom:100px}
#reviews .title{color:rgb(71, 110, 25)}
.review{float:left;width:59%}
.review:last-of-type{width:39%;margin-left:2%}
.review p{text-align:justify}
.review p:first-of-type:before{color:rgb(71, 110, 25);content:'“';font-size:80px;line-height: 60px;top:0;}
.review p:last-of-type{text-align:right;color:rgb(43,108,163)}
#about-us .full{width:700px}
#paint{padding:100px 0}
.product{float:left;text-align:center;width:25%}
.product img{display:inline-block;width:150px;transition:.25s all}
.product .btn{color:#fff;padding:15px 15px;background:#444;text-decoration:none;font-size:12px;display:inline-block;margin-top:25px}
.product .btn:hover{background:#666}
.product a{display:inline-block;background-size:100%;background-repeat:no-repeat;transition:.5s all}

#wash{background-image:url('/img/wash&wear.png');width:150px;height:160px;}
#wash:hover{background-image:url('/img/wash&wear-hover.png')}
#weather{background-image:url('/img/weathershield-4L.png');width:150px;height:160px;}
#weather:hover{background-image:url('/img/weathershield-hoverL.png')}
#lux{background-image:url('/img/dulux.png');width:275px;height:150px}
#lux:hover{background-image:url('/img/accredited-painter-hover.png')}
#warranty{background-image:url('/img/warranty.png');width:165px;height:232px}
#warranty:hover{background-image:url('/img/5-year-warranty.png')}

#environment{background:rgb(71, 110, 25);position:relative;color:#fff;padding-bottom:100px}
#environment .full{width:768px;display:block;margin-left:calc((100% - 1024px) / 2 + 256px);margin-right:calc((100% - 1024px) / 2)}
#tree{position:absolute;width:calc((100% - 1024px) / 2 + 256px);left:0;top:0}

#standards{background:url('/img/inverted-ladder.jpg');background-attachment:fixed;background-size:cover;padding-bottom:100px;color:#fff}
#standards li{margin:15px 0}
#standards .full{width:768px;margin-left:calc((100% - 1024px) / 2);margin-right:calc((100% - 768px) / 2 + 256px)}

#work{background:rgb(71, 110, 25);padding-bottom:100px;color:#fff}

.thumb{width:24.25%;float:left;margin:0 1% 1% 0;position:relative;font-weight:600}
.thumb img{width:100%;transition:opacity .4s ease;box-shadow:2px 2px 5px #111;border-radius:5px}
.thumb div{opacity:0;transition:opacity 0.4s ease;position:absolute;left:0;right:0;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;
webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.thumb:nth-of-type(4n){margin-right:0}
.thumb:hover{cursor:pointer}
.thumb:hover img{opacity:0.55}
.thumb:hover div{opacity:1}
.thumb:hover div{}
.gallery{margin-top:65px}
.image,.overlay{position:fixed;display:none;z-index:9999}
.overlay{background-color:rgba(255,255,255,.9);left:0;right:0;top:0;bottom:0}
.image{left:10%;right:10%;top:0;bottom:0;justify-content:center;flex-direction:column}
.next,.prev{position:fixed;top:0;right:0;width:10%;display:flex;flex-direction:column;justify-content:center;height:100%;font-size:100px}
.next{right:0}
.prev{left:0}
.prev:hover,.next:hover{background:rgba(0,0,0,0.25);cursor:pointer}
#upper,#lower{width:40px;border-top:3px solid #444;margin:0 auto}
.prev #upper{transform:translateY(-15px) rotate(-60deg)}
.prev #lower{transform:translateY(15px) rotate(60deg)}
.next #upper{transform:translateY(-15px) rotate(-120deg)}
.next #lower{transform:translateY(15px) rotate(120deg)}
.close #upper,.close #lower{width:80px}
.close #upper{transform:translateY(30px) rotate(-45deg);position:absolute}
.close #lower{transform:translateY(30px) rotate(45deg);position:absolute}
.close{position:fixed;right:10%;top:0;width:80px;height:80px}
.close:hover{cursor:pointer}
.close > div{position:relative}

.back{width:256px;float:left;padding-top:50px}
.service-detail{width:512px;max-width:100%;float:left}
.service-detail .title{text-align:left}
.green{background:rgb(71,110,25);padding-bottom:100px;color:#fff}
.showcase .full{width:768px}
.trio{float:left;width:33.3333%;text-align:center}
.trio img{display:inline-block}

.contact{text-align:center}
.contact-part{width:25%;text-align:center;float:left}
.contact-part h3{display:inline-block}
.contact form{margin:0 auto;width:600px;max-width:100%}
input,textarea{padding:5px;width:100%;float:left;margin-bottom:5px}
.contact button{float:right}
.g-recaptcha{float:left}

.hamburger{display:none;position:fixed;top:0;left:4px;width:51px;height:51px;padding:10px}
.hamburger div:first-of-type,.hamburger div:nth-of-type(2),.hamburger div:last-of-type{position:absolute;width:30px;border-top:2px solid #fff;}
.hamburger div:first-of-type{top:15px}
.hamburger div:nth-of-type(2){top:25px}
.hamburger div:last-of-type{top:35px}
nav.open .hamburger div:first-of-type{transform:rotate(45deg);top:25px}
nav.open .hamburger div:nth-of-type(2){display:none}
nav.open .hamburger div:last-of-type{transform:rotate(-45deg);top:25px}
#mobile-menu{display:none}

@media only screen and (max-width:1024px){
	#mobile-menu{display:block;position:fixed;top:0;height:51px}
	body{margin-top:51px}
	nav{z-index:9999}
	#logo{width:100px;float:right;margin:6px}
	.right{display:none}
	header{height:51px}
	nav li{visibility:hidden;width:100%;opacity:0;background:#444;border:none;transition:visibility 0s,opacity 1s ease}
	nav li a{padding:25px 40px;font-size:21px}
	nav{margin:0;position:fixed;top:0;bottom:0;left:0;width:0}
	nav.open{right:0;width:100%}
	nav ul{float:left;height:calc(100% - 51px);width:0;margin-top:51px;padding-top:25px;background:#444;transition:width 0.4s ease;}
	.hamburger{display:block}
	.hamburger:hover{cursor:pointer}
	nav.open{background:rgba(0,0,0,0.25)}
	nav.open ul{width:80%}
	nav.open li{visibility:visible;opacity:1}
	.thumb{width:49.5%;margin:0 1% 1% 0;}
	.thumb:nth-of-type(2n){margin-right:0}
	.full{padding:0 5px}
	.review{width:100% !important;margin:0 !important}
	.service{width:50%}
	.product{width:50%;margin-bottom:20px}
	#tree{display:none}
	#environment .full{width:100%;margin:0}
	#standards .full{width:100%;margin:0}
	.contact-part{width:100%}
	nav ul ul{display:none}
}