html,body{
    font-family: 'Roboto', sans-serif;
    -webkit-font-smoothing: antialiased;}

/* -- Global -- */

.wrapper{
    width:1280px;
    margin:0 auto;}
.right{
    float:right;}
.left{
    float:left;}
.overflow{
    overflow:hidden;}
b{
    font-weight:700;}
h1{
    font-size:65px;
    font-weight:700;
    color:#fff;
    padding:138px 120px 66px 0;
	line-height:1.2;}
h2{
    font-size:25px;
    font-weight:100;
    color:#fff;
    padding:0 0 93px 0;}
h3{
    font-size:45px;
    color:#fff;
    font-weight:100;
    text-align:center;}
h4{
    font-size:30px;
    color:#333;
    font-weight:300;}
h5{
    font-size:30px;
    font-weight:100;
    color:#3a4148;
    margin-bottom:26px;}
h6{
    font-size:20px;
    font-weight:300;
    color:#5d5454;
    margin:8px 0 0 25px;}
p{
    font-size:24px;
    font-weight:300;
    color:#333;
    line-height:1.2;}
button{
    background:#f7902f;
    color:#fff;
    border:0;
    font-size:22px;
    padding:22px 37px;
    border-radius:5px;}
button:hover{
    background:#d37f2f;}
section{
    padding:80px 0;
    background:#fff;
    background-size:cover;}
.filter{
    background:rgba(0,0,0,0.8);
    height:100%;}
ul.tick li{
    padding:0.5em 0 1.5em 4em;
    background:url('../img/tick.png') no-repeat;
    color:#fff;
    font-weight:500;
    font-size:18px;}

/* -- Header -- */

header{
    background:url('../img/bg-header.png');
    background-size:cover;
    height: 871px;}
header img{
    padding:64px 0 0;}
header img.right{
    padding:50px 170px 0 0;}
header nav li{
    padding:77px 22px 0 22px;}
header nav li a{
    font-size:18px;
    color:#fff;
    font-weight:300;
    text-decoration:none;}
header nav li a:hover{
    color:#f7902f;}
header .hamburger{
    float:right;
    display:none;
    width:40px;
    margin-top:60px;
    cursor:pointer;}
header .hamburger div{
    height:4px;
    background:#fff;
    margin-top:10px;
    transition:all 0.5s ease;}
header .stickyNav .hamburger{
    margin-top:15px;}
header .stickyNav .hamburger div{
    background:#333;}
header .stickyNav{
    position:fixed;
    background:rgba(255,255,255,0.95);
    width:100%;
    left:0;
    top:0;
    display:none;
    border-bottom:2px solid #e5e5e5;}
header .stickyNav img{
    padding:15px 0 10px 0;}
header .stickyNav li{
    padding:30px 22px 14px 22px;}
header .stickyNav li a{
    color:#333;}
header button{
    clear:left;}

/* -- Blocks -- */

section.first{
    text-align:center;}
section.first h4{
    padding:43px 0;}
section .block{
    overflow:hidden;
    text-align:center;
    display:inline-block;}
section .block{
    width:350px;}
section .block:nth-of-type(2){
    width:350px;
    padding:0 88px;}
section .block:nth-of-type(2) h4{
    padding:43px 0 20px 0;}

/* -- Checklist -- */

section.second{
    background:url('../img/bg-checklist.png');
    background-size:cover;
    padding:0;}
section.second .filter{
    padding:80px 0;}
section.second p{
    color:#fff;
    text-align:center;
    font-weight:100;
    padding:38px 0 102px 0;}
section.second .boiler.left{
    width:50%;
    padding:0 0 0 5em;
    box-sizing:border-box;}
section.second .boiler.right{
    width:50%;
    padding:0 0 0 2em;
    box-sizing:border-box;}
section.second .boiler p{
    text-align:left;
    padding:0 0 64px 0;
    font-weight:100;
    line-height:1.3;}

/* -- Halo -- */

section.halo{
    text-align:center;}
section.halo img{
    padding-top:114px;}
section.halo img:nth-of-type(2){
    padding:125px 65px 0 65px;}

/* -- Landlords -- */

section.landlords{
    background:#e5e5e5;
    text-align:center;}
section.landlords h3{
    color:#238fce;}
section.landlords p{
    padding:85px 0 52px 0;}

/* -- Plumbing -- */

section.plumbing{
    padding:0;
    background:url('../img/plumbing.png');}
section.plumbing .filter{
    padding:80px 0;}
section.plumbing p{
    padding-top:80px;
    text-align:center;
    color:#fff;}
section.plumbing ul{
    padding:30px 0 0 160px;}

/* -- About -- */

section.about h3{
    color:#238fce;
    padding-bottom:75px;}
section.about .image{
    width:390px;}
section.about .details{
    width: calc(100% - 390px);
    box-sizing:border-box;
    padding-left:2em;}
section.about .details p{
    clear:both;
    line-height:1.5;}
section.about .info{
    font-size:24px;
    margin-top:50px;}
section.about .info a{
    color:#f7902f;
    text-decoration:none;
    margin-right:38px;}
section.about .info span{
    color:#898989;
    margin-top:10px;
    display:inline-block;}
section.about .info img{
    float:right;
    margin-right:25px;}

/* -- Contact -- */

section.contact{
    background:#e5e5e5;}
section.contact h3{
    color:#238fce;}
section.contact p{
    text-align:center;
    padding-top:45px;}
section.contact form{
    width:960px;
    margin:0 auto;}
section.contact label{
    color:#555;}
section.contact input{
    width:100%;
    font-size:24px;
    box-sizing:border-box;
    padding:0.5em;
    border:0;
    background:#fff;
    border-radius:0.2em;
    margin:30px 0 15px 0;
    color:#555;}
section.contact input.valid{
    outline:2px solid #27ae60;}
section.contact input.invalid{
    outline:2px solid #c0392b;}
section.contact button{
    clear:both;
    display:block;
    margin-top:30px;}

/* -- Footer -- */

footer{
    background:#333;}
footer span{
    font-size:15px;
    color:#fff;
    padding:18px 0;}
footer a{
    color:#f7902f;
    margin-right:40px;}

/* -- Responsive -- */

@media screen and (max-width: 1280px) {
    .wrapper{
        width:1024px;}
    section .block:nth-of-type(2){
        padding:0 20px;}
    section.plumbing ul{
        padding:30px 0px 0px 30px;}
    section .block h4{
        font-size:16px;}
    section .block p{
        font-size:18px;}
    section .block{
        width:300px;}
    section.about .info{
        font-size:18px;}
}

@media screen and (max-width: 1024px) {
    .wrapper{
        width:960px;}
    section.about .info img{
        display:none;}
    section.about .info {
        margin-top: 50px;}
    section .block{
        width:270px;}
    section.about .details p{
        font-size:21px; 
}
@media screen and (max-width: 960px) {
    .wrapper{
        width:768px;}
    h1{
        font-size:55px;
        padding-top:100px;}
    p{
        font-size:20px;}
    button{
        font-size:18px;}
    header ul{
        max-height:0;}
    header ul.open{
        max-height:500px;}
    header .hamburger{
        display:block;}
    header .hamburger.open div:nth-of-type(1){
        transform:rotate(45deg);
        -webkit-transform:rotate(45deg);
        transform-origin:0 50%;
        -webkit-transform-origin:0 50%;}
    header .hamburger.open div:nth-of-type(2){
        opacity:0;}
    header .hamburger.open div:nth-of-type(3){
        transform:rotate(-45deg);
        -webkit-transform:rotate(-45deg);
        transform-origin:0 50%;
        -webkit-transform-origin:0 50%;}
    header nav{
        background:#fff;
        width:100%;
        margin-top:20px;
        float:left;
        width:100%;
        display:block;}
    header nav ul{
        transition: all 0.5s ease;
    }
    header nav li{
        width:100%;
        padding:20px;
        border-bottom:2px solid #ccc;}
    header nav li a{
        color:#333;
        display:block;
        width:100%;
        height:100%;}
    ul.tick li{
        font-size:15px;}
    section.contact form{
        width:100%;}
    section.halo img{
        width:20%;}
    section.first .block{
        width:30%;
        padding:0;}
    section.first .block img{
        width:40%;}
    section.about .image{
        width:320px;}
    section.about .image img{
        width:100%;}
    section.about .details{
        width:calc(100% - 320px);}
    section.about .details p{
        font-size:16px;}
    header img.right {
        padding:50px 0px 0 0;
    }
}
@media screen and (max-width: 768px) {
    .wrapper{
        width:100%;
        padding:0 40px;
        box-sizing:border-box;}
    p{
        font-size:16px;}
    h1{
        font-size:45px;}
    h4{
        font-size:24px;}
    section.second .boiler.left{
        padding:0;}
    section.halo img, section.halo img:nth-of-type(2){
        padding-top:50px;}
    section.about .image{
        display:none;}
    section.about .details{
        width:100%;
        padding-left:0;}
    header img.right{
        display:none;}
}
@media screen and (max-width: 640px) {
    h1{
        padding-right:0;}
    header .stickyNav{
        display:none !important;}
    section.first .block p{
        display:none;}
    footer .wrapper{
        text-align:center;}
    footer span.left, footer span.right{
        float:none;
        display:inline-block;}
}
@media screen and (max-width: 520px) {
    h1{
        font-size:30px;
        padding:40px 0 20px 0;}
    h2{
        padding: 0 0 40px;
        float:none;}
    header{
        height:auto;}
    header .filter, section.about h3{
        padding-bottom:40px;}
    section{
        padding:50px 0;}
    section.first .block h4{
        padding-bottom:0;}
    section.second .filter, section.plumbing .filter{
        padding:40px 0;}
    section.second p{
        padding-bottom:40px;}
    section.landlords p, section.plumbing p{
        padding-top:40px;}
    section.contact p{
        padding-top:25px;}
    section.second .boiler.left, section.second .boiler.right{
        width:100%;}
    section.second .boiler p{
        padding-bottom:30px;
        text-align:center;}
    section.second button{
        margin: 0 auto;
        display: block;
        margin-bottom: 30px;}
    header button.left{
        clear:both;
        float:none;}
}
@media screen and (max-width: 420px) {  
    header img{
        width:60%;}
    header .hamburger{
        margin-top:55px;}
    header .hamburger div{
        margin-top:9px;}
    h5.left{
        text-align: center;
        float:none;}
    h6.left{
        width:100%;
        text-align: center;
        margin: 20px 0px;
        float:none;}
    footer a{
        width: 100%;
        display: inline-block;
        margin-bottom: 15px;}
    section.first .block h4{
        font-size:12px;}
    section.first .block{
        padding:0 1%;}
}

@media screen and (max-width:380px){
    header .hamburger{
        margin-top: 55px;
        width: 35px;}
    header .hamburger div{
        margin-top:8px;}
    h1{
        font-size:25px;
        font-weight:300;
        line-height:1.3;}
    h2{
        font-size:18px;}
    button{
        padding:15px;}
    section.halo{
        display:none;}
    section.second .boiler.right, section.plumbing ul{
        padding-left:0;}
}
@media screen and (max-width:320px){
    h2{
        font-size:16px;}
    section.second .filter > p{
        padding:30px 20px;}
}