@font-face {font-display:swap;font-family:'Nunito';font-style:normal;font-weight:400;src:url("/fonts/nunito-400.woff2") format('woff2')}
@font-face {font-display:swap;font-family:'Nunito';font-style:normal;font-weight:700;src:url("/fonts/nunito-700.woff2") format('woff2')}
@font-face {font-display:swap;font-family:'Montserrat';font-style:normal;font-weight:700;src:url("/fonts/montserrat-700.woff2") format('woff2')}

/* Reset */
html,body,div,img,ul,li,header,footer,form,fieldset,legend{margin:0;padding:0;border:0;outline:0}
img{vertical-align:bottom;width:inherit}
a{outline:0;text-decoration:none;color:inherit}
a:hover{opacity:0.6}
/* Layout */
html{font-size:62.5%}
body{position:relative;text-align:center}
#main{margin:auto;max-width:1680px;min-width:320px}
.wrap{position:relative;max-width:960px;text-align:left;margin:0 auto}
.wrap>div{margin:0 10px}
.group:after,.wrap:after{content:"";display:table;clear:both}
.centre{text-align:center}
/* Fonts */
body{font-family:"Nunito",arial,verdana,sans-serif;font-size:16px;font-size:1.6rem;line-height:26px;line-height:2.6rem;color:#65656a}
h1,h2,h3,h4{font-family:"Montserrat";text-transform:capitalize;font-size:28px;font-size:2.8rem;line-height:40px;line-height:4rem;text-align:center;color:#65656a}
/* Header */
header p.logo{text-align:center;width:100%}
header p.logo svg{width:100%;max-width:700px}
header:after{content:"";display:block;width:100%;background:url(/img/header.jpg) no-repeat 0/cover;height:0;padding-bottom:41.67%}
/* Nav */
nav{text-align:center;position:relative;margin-bottom:10px}
nav a{color:#66778A;margin:5px 20px;text-transform:uppercase;display:inline-block}
/* Section */
section{padding:40px 0;background-color:#fff}
/* Welcome */
#welcome{text-align:center}
/* Responsive */
@media only screen and (max-width:960px){header:after{background-image:url("/img/header-960.jpg")}}
@media only screen and (max-width:800px){nav a span{display:none}header p.logo svg{max-width:95%}}
@media only screen and (max-width:640px){header:after{background-image:url("/img/header-640.jpg")}}
@media only screen and (max-width:480px){header:after{background-image:url("/img/header-480.jpg")}}
@media only screen and (max-width:320px){header:after{background-image:url("/img/header-320.jpg")}}

/* Below */
.deferimage{background-color:#666 !important}

/* Icons */
#msg-response ul:after,#arrow a,a.tel:before,a.email:before,.kitchen .cols div:not(:last-child):before,a.quote:before,a.contact:before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='800' height='100'%3E%3Cpath opacity='.4' d='M0 50a50 50 0 1 0 100 0A50 50 0 0 0 0 50'/%3E%3Cdefs%3E%3Ccircle id='a' cx='250' cy='50' r='46'/%3E%3C/defs%3E%3Cg style='stroke-width:8;stroke:white'%3E%3Cg fill='none'%3E%3Cuse xlink:href='%23a'/%3E%3Cuse xlink:href='%23a' x='100'/%3E%3C/g%3E%3Cg fill='%2365656A'%3E%3Cuse xlink:href='%23a' x='200'/%3E%3Cuse xlink:href='%23a' x='300'/%3E%3Cuse xlink:href='%23a' x='400'/%3E%3Cuse xlink:href='%23a' x='500'/%3E%3C/g%3E%3C/g%3E%3Cpath fill='white' d='M32.5 52.5L25 45l25-25 25 25-7.5 7.5L55 40v40H45V32.5v20V25v15m75-30.7L190.6 80 180 90.6 109.3 20m70.8-10.7l10.6 10.6L120 90.7l-10.6-10.6 70.7-70.8m82 45.7c-3.5 3.5-3.5 6.8-6.8 6.8-3.5 0-6.8-3.5-10.3-6.8-3.5-3.5-6.8-6.8-6.8-10.3s3.5-3.5 6.8-6.8c3.5-3.5-6.8-13.6-10.3-13.6s-10.3 10.3-10.3 10.3c0 6.8 7 20.8 13.6 27.4a52.9 52.9 0 0 0 27.4 13.6s10.3-6.8 10.3-10.3c0-3.2-10.3-13.5-13.6-10.3m110.7-24.5h-45.6a3.3 3.3 0 0 0-3.3 3.3v32.7c0 1.8 1.5 3.3 3.3 3.3h45.6c1.8 0 3.3-1.5 3.3-3.3V33.8c0-2-1.5-3.3-3.3-3.3m-3.3 6.3v2.4L350 50.9l-19.5-11.6v-2.4h39v-.1m-39 26.1V45L350 56.6 369.5 45v18l-39-.1m125-38.4v6c0 1.5-1.3 2.3-4.5 2.3h-2c-3 0-4.5-.8-4.5-2.3v-6c0-1.5 1.3-2.3 4.5-2.3h2c3.3.1 4.5.8 4.5 2.3m0 17v34.3c0 1.5-1.3 2.3-4.5 2.3h-2c-3 0-4.5-.7-4.5-2.3V41.5c0-1.5 1.3-2.3 4.5-2.3h2c3.3-.2 4.5.8 4.5 2.3m108.8-15c-6.3 0-11.8 3.5-14.5 8.8a16.3 16.3 0 0 0-22.1-7.1c-5.6 2.8-9 8.6-8.9 14.8 0 22.2 30.8 37.5 30.8 37.5S580.3 65 580.3 43a16 16 0 0 0-15.5-16.5h-.5m99.2-2.2c0 2.8-1.8 6-3.3 6-.5 0-2.5-.8-5-.8-4.7 0-7.2 2-7.2 7v6h8.5c1.8 0 2.5 1.3 2.5 4v1.3c0 2.8-.7 4-2.5 4H648v4.7c0 5-1 8.5-3.2 10.8h17.7c1.8 0 2.5 1.3 2.5 4v1.3c0 2.7-.8 4-2.5 4h-28.8c-2.3 0-3.3-1-3.3-3.2V72c0-3.3 6-3.8 6-9.3V52h-2.7c-1.8 0-2.5-1.3-2.5-4v-1.3c0-2.8.8-4 2.5-4h2.7v-6c0-11 6.3-16.5 18.3-16.5 2.1.3 8.8.3 8.8 4.1m71.7 11.5c-3 2.5-4.5 5.5-4.5 8.8 0 1.8.5 3.5 1.5 5.3 1 1.7 2.5 3.2 4.5 4.5 1.3.9 2.2 2.4 2.5 4 0 .5.3 1 .3 1.8.3-.2.7-.5 1-1 1-1 2.5-1.7 4-1.7h.7l2.8.2v5.8c-1.3 0-2.5 0-3.5-.3-5 5-10.8 5.8-16.5 6v-1.3c3-1.5 5.8-4.2 5.8-7.5V59a17.7 17.7 0 0 1-8.5-14.5c0-10.3 10.3-18.8 22.8-18.8S770.5 34 770.8 44c-1.8-.8-3.8-1.3-6-1.5-.5-2.5-2-5-4.5-6.8a20.4 20.4 0 0 0-25.1.1m38.3 30.5c0 2 1.3 3.8 3 4.8v.7H775a11 11 0 0 1-7.7-3.2c-1.3.2-2.5.5-3.8.5-7.3 0-13-5.2-13-11.5s5.8-11.5 13-11.5 13 5.3 13 11.5c0 2.5-1 4.8-2.5 6.8-.2.4-.5 1.1-.5 1.9'/%3E%3C/svg%3E") no-repeat 0/cover}

/* Message */
#msg-response{display:none;position:absolute;width:60%;left:10px;background:#C99;border-radius:5px;margin-top:40px;padding:2%;border:3px #fff solid;color:#fff;box-shadow:2px 2px 4px 5px #ccc;z-index:9999;box-sizing:border-box}
#msg-response ul{position:relative;width:100%;list-style-type:none;text-align:left}
#msg-response ul:after{position:absolute;right:0;top:0;width:20px;height:20px;content:"";background-position:-20px 0}
#msg-response ul:hover{cursor:pointer}
#msg-response li:first-child{margin-right:25px}

/* Floating Nav */
#arrow{margin:0;position:fixed;top:5px;right:5px;text-align:right;display:none;z-index:9999}
#arrow a{float:right;width:40px;height:40px;background-position:0 0}

/* Cols */
section.grey{background:#d8d8d8}
section .cols{display:flex;flex-wrap:wrap;justify-content:space-between}
section .cols>div,section .cols>li {flex: 0 1 48%;margin-bottom:20px}
section .cols img{width:100%}

/* About */
#about .cols div{flex: 0 1 64%}
#about .cols div p:first-child{margin-top:0}
#about .cols div:last-child{flex: 0 1 34%}


/* Kitchens */
.kitchen{background:#ebebeb}
.kitchen .deferimage,.kitchen p:first-child{position:relative;margin:0;width:100%;height:0;padding-bottom:64.37%;background-size:cover}
.kitchen .deferimage strong,.kitchen p:first-child strong {position:absolute;top:8%;left:0;background:#5F5E64;color:#fff;padding:15px 15px 15px 4%;font-weight:normal;font-size:30px;font-size:3rem}
.kitchen .cols div{flex: 0 1 33.33%;max-width:33.33%;padding:20px 10px 0 60px;position:relative;box-sizing:border-box}
.kitchen .cols div:not(:last-child):before{content:"";position:absolute;top:10px;left:0px;width:40px;height:40px;margin:10px;background-position:-160px 0}
.kitchen .cols div:nth-child(2):before{background-position:-200px 0}
.kitchen .cols div strong{display:block}
.kitchen .cols div:last-child{line-height:40px;padding-left:10px}
.kitchen .cols div a{position:relative;display:inline-block;margin-bottom:20px;font-weight:700;padding-left:50px}
a.quote:before,a.contact:before{position:absolute;top:0;left:0;content:"";width:40px;height:40px;background-position:-240px 0}
a.contact:before{background-position:-280px 0}

/* Worksurfaces */
#worksurfaces strong{display:block}
#worksurfaces .cols li{list-style-type:none;flex: 0 1 48%}

/* Projects */
#projects li {list-style-position:inside}

/* Footer */
#contact {background:#65656a;color:#fff}
#contact svg{width:100%;max-width:400px}
#contact p.contact{font-size:36px;font-size:3.6rem;line-height:50px}
.contact a{margin:20px 0;display:inline-block;position:relative;padding-left:60px}
.contact a:first-child{margin-right:40px}
.contact a:before{content:"";position:absolute;top:0;left:0;width:50px;height:50px;background-position:-150px 0}
.contact a.tel:before{background-position:-100px 0}
form{width:100%;margin-bottom:40px;position:relative}
form label,form div.send p{display:none}
form input,form textarea{width:100%;margin-bottom:10px;border:1px #fff solid;font:inherit;color:#65656a;padding:1%;box-sizing:border-box;font-family:inherit}
form div.send p{margin:10px 0;background:#3C6;color:#fff;border:1px #fff solid;padding:5px}
form button{font-family:inherit;color:#65656a;background:#fff;text-transform:uppercase;width:160px;padding:10px;border:0}
form button:hover{background:#efefef;cursor:pointer}

/* Footer */
footer p{font-size:14px;font-size:1.4rem;padding:0 0 20px 0;text-align:left}
footer a{color:inherit}


/* Colorbox  2018/07/13 */
#colorbox,#cboxOverlay,#cboxWrapper{position:absolute;top:0;left:0;z-index:9998;overflow:hidden;transform: translate3d(0,0,0)}
#cboxWrapper {max-width:none}
#cboxOverlay{position:fixed;width:100%;height:100%}
#cboxMiddleLeft,#cboxBottomLeft{clear:left}
#cboxContent{position:relative}
#cboxLoadedContent{overflow:auto;-webkit-overflow-scrolling: touch}
#cboxTitle{margin:0}
#cboxLoadingOverlay,#cboxLoadingGraphic{position:absolute;top:0;left:0;width:100%;height:100%}
#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{cursor:pointer}
.cboxPhoto{float:left;margin:auto;border:0;display:block;max-width:none;-ms-interpolation-mode:bicubic}
.cboxIframe{width:100%;height:100%;display:block;border:0;padding:0;margin:0}
#colorbox,#cboxContent,#cboxLoadedContent{box-sizing:content-box}
#cboxOverlay{background:#000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9999' height='9999'%3E%3Cpattern id='p' patternTransform='rotate(45 0 0)' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Cline x1='0' y1='0' x2='0' y2='8' style='stroke:%23111;stroke-width:4'/%3E%3C/pattern%3E%3Crect x='0' y='0' width='9999' height='999' fill='url(%23p)'/%3E%3C/svg%3E")}
#colorbox{outline:0}
#cboxTopLeft,#cboxTopRight,#cboxBottomLeft,#cboxBottomRight,#cboxMiddleLeft,#cboxMiddleRight,#cboxPrevious,#cboxNext,#cboxClose{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='176' height='50'%3E%3Cdefs%3E%3Cpath id='s' d='M30.9,18.5l3.7-5.6l-3.3-5.1h2.5l2.2,3.4l2.1-3.4h2.5L37.2,13l3.7,5.5h-2.6l-2.4-3.7l-2.4,3.7H30.9M59.7,17.3v-2.1l5.1-2l-5.1-2v-2l7.4,3.2v1.8L59.7,17.3M90.8,17.3l-7.4-3.2v-1.8l7.4-3.2v2.1l-5.1,2 l5.1,2V17.3'/%3E%3C/defs%3E%3Crect id='r' opacity='.5' width='14' height='50'/%3E%3Crect id='r2' fill='white' x='14' width='11' height='50'/%3E%3Cpath id='c' fill='%23B3B3B3' d='M36,24c-6.1,0-11-4.9-11-11S29.9,2,36,2s11,4.9,11,11S42.1,24,36,24M36,3c-5.5,0-10,4.5-10,10s4.5,10,10,10s10-4.5,10-10S41.5,3,36,3M62,24c-6.1,0-11-4.9-11-11S55.9,2,62,2s11,4.9,11,11S68.1,24,62,24M62,3c-5.5,0-10,4.5-10,10s4.5,10,10,10s10-4.5,10-10S67.5,3,62,3M88,24c-6.1,0-11-4.9-11-11S81.9,2,88,2s11,4.9,11,11S94.1,24,88,24M88,3c-5.5,0-10,4.5-10,10s4.5,10,10,10c5.5,0,10-4.5,10-10S93.5,3,88,3'/%3E%3Cuse xlink:href='%23s' fill='%23B3B3B3'/%3E%3Cuse xlink:href='%23c' y='25.5'/%3E%3Cuse xlink:href='%23s' fill='%232E3192' y='24.6'/%3E%3Cpath opacity='.5' d='M131 50h-12a19 19 0 0 1-19-19V19a19 19 0 0 1 19-19h12a19 19 0 0 1 19 19v12a19 19 0 0 1-19 19m-12-36a5 5 0 0 0-5 5v12a5 5 0 0 0 5 5h12a5 5 0 0 0 5-5V19a5 5 0 0 0-5-5h-12'/%3E%3Cpath fill='white' d='M136 32a4 4 0 0 1-4 4h-14a4 4 0 0 1-4-4V18a4 4 0 0 1 4-4h14a4 4 0 0 1 4 4v14'/%3E%3Cuse xlink:href='%23r2' x='137'/%3E%3Cuse xlink:href='%23r' x='162'/%3E%3C/svg%3E") !important}
#cboxTopCenter,#cboxBottomCenter{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='21'%3E%3Crect opacity='.5' width='1' height='14'/%3E%3Crect y='14' fill='white' width='1' height='7'/%3E%3C/svg%3E") !important}
#cboxTopLeft,#cboxTopRight,#cboxBottomLeft,#cboxBottomRight{width:21px;height:21px;background-repeat:no-repeat;background-position:-100px 0}
#cboxTopRight{background-position:-129px 0}
#cboxBottomLeft{background-position:-100px -29px}
#cboxBottomRight{background-position:-129px -29px}
#cboxMiddleLeft,#cboxMiddleRight{width:21px;background-position:0 0;background-repeat:repeat-y}
#cboxMiddleRight,#cboxBottomCenter{transform:rotate(180deg)}
#cboxTopCenter,#cboxBottomCenter{height:21px;background-position:-60px 0;background-repeat:repeat-x}
#cboxContent{background:#fff;overflow:hidden}
.cboxIframe{background:#fff}
#cboxError{padding:50px;border:1px solid #ccc}
#cboxLoadedContent{margin-bottom:28px}
#cboxTitle{position:absolute;bottom:4px;left:0;text-align:center;width:100%;color:#949494}
#cboxCurrent{position:absolute;bottom:4px;left:58px;color:#949494}
#cboxLoadingOverlay{background:#fff}
#cboxLoadingGraphic{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath opacity='.2' d='M20.2 5.2a14.9 14.9 0 1 0 0 29.8 14.9 14.9 0 1 0 0-29.8m0 26.6a11.6 11.6 0 1 1 11.6-11.6c0 6.3-5.2 11.5-11.6 11.6'/%3E%3Cpath d='M26 10l1.7-2.9c-2.2-1.3-4.7-2-7.5-2v3.3c2.1.1 4.1.7 5.8 1.6'/%3E%3C/svg%3E") no-repeat center center;animation:spin 1s infinite}
@keyframes spin {100% {transform:rotate(360deg)}}
#cboxPrevious,#cboxNext,#cboxSlideshow,#cboxClose{border:0;padding:0;margin:0;overflow:visible;width:auto;background:none}
#cboxPrevious:active,#cboxNext:active,#cboxSlideshow:active,#cboxClose:active {outline:0}
#cboxSlideshow{position:absolute;bottom:4px;right:30px;color:#0092ef}
#cboxNext,#cboxPrevious,#cboxClose{position:absolute;bottom:0;left:0;background-repeat:no-repeat;background-position:-75px 0;width:25px;height:25px;text-indent:-9999px}
#cboxClose{left:auto;right:0;background-position:-25px 0;}
#cboxNext{left:27px;background-position:-50px 0}
#cboxPrevious:hover{background-position:-75px -25px}
#cboxNext:hover{background-position:-50px -25px}
#cboxClose:hover{background-position:-25px -25px}
.cboxIE #cboxTopLeft,.cboxIE #cboxTopCenter,.cboxIE #cboxTopRight,.cboxIE #cboxBottomLeft,.cboxIE #cboxBottomCenter,.cboxIE #cboxBottomRight,.cboxIE #cboxMiddleLeft,.cboxIE #cboxMiddleRight {filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)}

/* Responsive Below Fold*/
@media only screen and (max-width:760px)
{
form,.kitchen .cols div{flex: 0 1 100%!important;max-width:100%}
.kitchen .cols div{padding-right:10px}
a.quote{margin-right:20px}
}
@media only screen and (max-width:640px)
{
section .cols>div,section .cols>li,#about .cols>div{flex: 0 1 100% !important}
#worksurfaces .cols div {padding-bottom:56.25%}
#msg-response{width:96%}
}
@media only screen and (max-width:480px)
{
#contact p.contact{font-size:24px;font-size:2.4rem}
#contact svg{max-width:300px}
}
@media only screen and (min-width:560px)
{
.alignright {display:block;float:right; margin:0 20px 20px 20px;}
}