@import 'https://fonts.googleapis.com/css?family=Roboto:300,400,600';

* { margin:0; padding:0; text-decoration:none; list-style:none; border:none; outline:none; }
html, body { width:100%; height:100%; min-height:100%; }
body { padding-top:100px; }
body.scroll { padding-top:70px; }
body.home { padding:0; }
img { display:block; }
.centre { width:100%; max-width:1100px; padding:0 50px; margin:auto; box-sizing:border-box; position:relative; }

/* -------------------- Header -------------------- */

header { width:100%; height:100%; }
header .logo { width:150px; height:auto; margin-left:-75px; position:absolute; top:70px; left:50%; z-index:2; }
header p.title { width:100%; font:400 26px/38px "Roboto"; color:#252525; text-align:center; position:absolute; top:255px; z-index:4; }
header #hero { width:100%; height:100%; background:url(system/images/desk-back.jpg); background-size:cover; background-position:center; }
header #hero .overflow { width:100%; height:100%; overflow:hidden; position:absolute; }
header #hero img { width:auto; height:10%; position:absolute; top:50%; left:50%; transform:translate(-50%, -25%); -webkit-transform:translate(-50%, -25%); z-index:3; opacity:0; }
header #nav ul ul { display:none !important; }
header #nav li.active a { color:#000; background:none; }
header .float.holder { position:absolute; top:100px; left:7%; }
header .float.pantone { position:absolute; top:80px; right:3%; }
header .float.pantone img { float:right; }

@media only screen and (max-width:1366px) {
header .float img { width:80%; height:auto; }
header .float.holder { left:4%; }
header .float.pantone { right:1%; }
}

@media only screen and (max-width:1100px) {
header p.title { display:none; }
}

@media only screen and (max-width:768px) {
header .float { display:none; }
}

@media only screen and (max-height:800px) {
header .logo { top:40px; }
header p.title { display:none; }
header .float.holder { top:50px; }
header .float.pantone { top:30px; }
header #hero img { transform:translate(-50%, -35%); -webkit-transform:translate(-50%, -35%); }
}

nav { width:100%; background:rgba(255,255,255,.4); position:absolute; bottom:0; left:0; box-shadow:0 0 15px rgba(0,0,0,.1),0 0 1px rgba(0,0,0,.2); z-index:2; }
nav ul { margin:auto; display:table; }
nav li { float:left; position:relative; }
nav li a { padding:0 25px; font:400 16px/100px "Roboto"; color:#252525; text-transform:uppercase; display:block; cursor:pointer; }
nav li:hover a { color:#000 !important; background:rgba(255,255,255,.3) !important; }
nav li.active a { color:#FFF; background:rgba(255,255,255,.05); }
nav ul:hover li.active a { color:rgba(255,255,255,.4); background:none; }
.home header nav li a:hover { padding:0 35px; color:#FFF; background:rgba(255,255,255,.1); }

nav ul ul { position:absolute; top:100px; left:0; display:none; }
nav ul ul li { margin:0; float:none !important; white-space:nowrap; }
nav li ul li a, nav li:hover ul li a { padding:0 20px !important; font:300 13px/40px "Roboto" !important; color:rgba(255,255,255,.4) !important; letter-spacing:.8px; text-transform:none; background:#444 !important; border-top:1px solid #505050; }
nav li:hover ul li:hover a { font-weight:200 !important; background:#505050 !important; color:#FFF !important; }
.page-id-46 .menu-item-29 { display: none; }

#fixed { width:100%; height:100px; position:fixed; top:0; left:0; background:#353535 url(system/images/header-fade.png) bottom center; overflow:hidden; z-index:99999; }
#fixed .centre { height:100%; }
#fixed .logo { content:""; width:86px; height:86px; background:url(system/images/logo2.png); background-size:100%; position:absolute; top:50%; left:50px; transform:translate(0, -50%); -webkit-transform:translate(0, -50%); z-index:2; }
#fixed nav { position:absolute; top:0; left:0; bottom:auto; background:none; box-shadow:none; z-index:1; }
#fixed nav ul { margin-right:25px; float:right; }
#fixed nav li a { font:300 14px/100px "Roboto"; color:#FFF !important; letter-spacing:.7px; }
#fixed nav li.contact a, .ninja-forms-response-msg p { color:#f26c4f !important; font-weight:600 !important; }
#fixed #top { padding:15px; margin-top:-25px; font-size:16px; color:rgba(255,255,255,.3); position:absolute; top:50%; right:10px; cursor:pointer; opacity:0; }
#fixed #top:hover { color:#FFF; }
#fixed.scroll nav ul ul { top:70px; }
#fixed nav li a:hover, #fixed nav li.active a, #fixed nav ul:hover li a:hover { background:rgba(255,255,255,.05) !important; }

#pull { padding:20px; font-size:25px; color:#FFF; cursor:pointer; position:absolute; top:18px; right:30px; display:none; z-index:9999999999999; }
.home #pull { color:#222; }
#mobilenav { width:100%; position:absolute; top:190px; left:0; background:#454545; z-index:999999; display:none; }
#mobilenav a { width:100%; font:300 15px/55px "Roboto"; color:#FFF; text-transform:uppercase; letter-spacing:1.5px; text-align:center; display:block; border-bottom:1px solid rgba(255,255,255,.08); }
#mobilenav li:last-child a { border:none; }
#mobilenav ul ul { background:#505050; }
#mobilenav ul ul a { font:300 13px/45px "Roboto"; text-transform:none; letter-spacing:.8px; }
.page-template-default, .single-products #pull { top:19px; z-index:999999; }
.page-template-default #mobilenav, .single-products #mobilenav { top:100px; }

/* -------------------- Scroll -------------------- */

.home #fixed { display:none; }
#fixed nav ul:hover li a { background:none !important; }

/* -------------------- Content -------------------- */

main { font:300 17px/27px "Roboto"; color:#666; background:#FFF; position:relative; z-index:2; }
main h1, main h2, main p.heading { margin:-7px 0 35px; font:30px/40px "Roboto"; color:#252525; }
main h3, main h4 { margin:0 0 30px; font:26px/32px "Roboto"; color:#666; }
h2 a { color:#252525; }
h2 a:hover { color:#f26c4f; }
main p { margin-bottom:35px; }
main p a { color:#f26c4f; border-bottom:1px solid #EEE; }
main ul { margin-bottom:35px; }
main ul li { margin-left:20px; list-style:disc !important; }
main .button { margin:7px 0; padding:0 25px; font:16px/55px "Roboto"; color:#FFF; letter-spacing:.5px; background:#009BE6; border-radius:5px; display:inline-block; }
main .button i { margin-left:10px; }
main .button:hover { background:#444; }
.block { position:relative; }
.block .centre { padding-top:100px !important; padding-bottom:60px !important; background-size:auto 100%; background-position:right; background-repeat:no-repeat; position:relative; overflow:hidden; }
.block .centre:after, #gallery .centre:after { content:""; clear:both; display:block; }
.block .col { width:50%; }
.block .col.img { width:100%; }
.block .text { width:50%; position:relative; z-index:1; }
.block .back { width:calc(50% - 100px); height:calc(100% - 200px); position:absolute; top:100px; right:50px; background-position:center; background-size:cover; background-repeat:no-repeat; }
.block .back img { width:auto; height:100%; max-height:600px; }
.block .col.img .back { width:50%; }
.block.noimage .col { width:100%; }
main p a:hover { color:#333; }

.single-products .block img { width:60%; height:auto; position:absolute; top:100px; right:-50px; }
.single-products .block .col.img h1 { width:50%; position:relative; z-index:1; }
.single-products .block .col.img p { width:50%; position:relative; z-index:1; }

.block:nth-child(even) .col { float:right; }
.block:nth-child(even) .back { left:50px; right:auto; }
.block:nth-child(even) { background:url(system/images/desk-back.jpg); }
.block:nth-child(even):before { content:""; width:100%; height:100%; background:rgba(255,255,255,.5); position:absolute; top:0; left:0; }
.home #sections .block:nth-child(odd) { background:#FFF; }
.home #sections .block:nth-child(even) .col { float:none; }
.home #sections .block:nth-child(even) .back { right:50px; left:auto; }
.home #sections .block:nth-child(even) { background:#F0F0F0; }

.page-id-21 #sections h3 { margin-bottom:2px; }
.page-id-21 #sections ul ul { margin-bottom:0; }
.page-id-21 #sections ul { font:300 15px/25px "Roboto"; }

.clients { margin-bottom:80px; }
.clients .centre { padding:0 30px; display:table; }
.clients .centre:after { content:""; clear:both; display:block; }
.clients .item { display:table-cell; padding:0 20px; text-align:center; box-sizing:border-box; }
.clients .item img { width:auto; height:60px; display:inline-block; }

/* -------------------- Blog -------------------- */

.single-post .featured { margin-bottom:50px; }
.single-post .featured img { width:100%; height:auto; }
.date { margin-top:-40px; font-size:14px; font-weight:600; }
.single-post hr { margin:50px 0; border-top:1px solid #E5E5E5; }
img.alignleft { margin:9px 30px 20px 0 !important; float:left !important; }
img.alignright { margin:9px 0 20px 30px !important; float:right !important; }
img.aligncenter { width:100% !important; margin:0 0 30px !important; float:none !important; }

/* -------------------- Products -------------------- */

#products { width:100%; padding:85px 0 95px; text-align:center; background:#F0F0F0; position:relative; }
#products:after { content:""; clear:both; display:block; }
#products .item { float:left; }
#products .item a { display:block; color:#666; text-align:center; }
#products .item img { width:auto; height:230px; margin-bottom:10px; }
#products .item span { padding:10px 15px; font:23px/23px "Roboto"; border-radius:4px; border-right:1px solid #F0F0F0; border-bottom:1px solid #F0F0F0; }
#products .item a:hover { margin-top:-10px; }
#products .item a:hover span { background:#FFF; border-color:#DDD; }

#products .nav { width:48px; height:50px; font-size:18px; line-height:52px; color:rgba(0,0,0,.3); border-radius:4px; display:block; cursor:pointer; background:rgba(0,0,0,.08); position:absolute; top:50%; margin-top:-25px; }
#products .nav.prev { left:70px; padding-right:2px; }
#products .nav.next { right:70px; padding-left:2px; }
#products .nav:hover { background:rgba(0,0,0,.12); }

/* -------------------- Video -------------------- */

#video { width:100%; height:800px; background:#E69F0F; background-size:cover; position:relative; overflow:hidden; }
#video .details { width:100%; color:#FFF; text-align:center; position:absolute; top:50%; transform:translate(0, -50%); -webkit-transform:translate(0, -50%); z-index:1; }
#video p { width:100%; font:300 40px/50px "Roboto"; color:#FFF; }
#video i { font-size:80px; color:#FFF; }
#video a:hover { opacity:.6; }
#embed { width:100%; height:100%; /*background:url(../images/video-back.jpg) no-repeat; background-position:center; background-size:cover;*/ z-index:-100; }
#embed video { position:absolute; top:0; left:0; min-width:100%; min-height:100%; width:auto; height:auto; transition:1s opacity; opacity:.15; }

/* -------------------- Gallery -------------------- */

#gallery .centre { max-width:1390px; padding:60px 50px; }
#gallery .item { width:25%; padding:10px; float:left; box-sizing:border-box; }
#gallery .item a { background:#EEE; display:block; overflow:hidden; }
#gallery .item img { width:100%; height:auto; }
#gallery .item a:hover .img { opacity:.7; }
#gallery .item .details { display:none; }

#filters { margin:0 12px 50px; font:20px/30px "Roboto"; background:#E5E5E5; box-sizing:border-box; border-radius:4px; box-shadow:1px 1px 0 #D8D8D8; overflow:hidden; }
#filters:after { content:""; clear:both; display:block; }
#filters .filter { width:50%; padding:20px 10px; text-align:center; float:left; box-sizing:border-box; }
#filters .filter:first-child { border-right:1px solid #D8D8D8; }
#filters select { margin:0 10px; padding:7px; font:300 16px/30px "Roboto"; color:#888; letter-spacing:.2px; border-radius:4px; box-shadow:-1px -1px 0 #D8D8D8; }

.pop { height:400px; padding:50px 50px 50px 550px; font:300 16px/26px "Roboto"; color:#888; position:relative; }
.pop h3 { margin-bottom:25px; font:22px/28px "Roboto"; color:#f26c4f; }
.pop p { margin-bottom:25px; }
.pop img { position:absolute; top:0; left:0; }
.pop .button { margin-top:10px; padding:0 30px; font:17px/50px "Roboto"; color:#FFF; letter-spacing:.3px; border-radius:4px; background:#888; display:inline-block; cursor:pointer; }
.pop .button:hover { background:#f26c4f; }

/* -------------------- Form -------------------- */

#form { padding:95px 0 90px; text-align:center; background:#353535 url(system/images/header-fade.png) center no-repeat; background-size:cover; position:relative; }
#form p.heading { margin-bottom:2px; padding:0 30px; color:#FFF; font-size:33px; }
#form p.sub { padding:0 30px; color:rgba(255,255,255,.6); letter-spacing:.3px; font-size:20px; }
#form form { width:100%; max-width:560px; margin:0 auto; padding:0 30px; box-sizing:border-box }
#form input, #form textarea { width:100%; height:45px; padding:0 12px; margin-bottom:10px; font:15px "Roboto"; color:#666; letter-spacing:.2px; border-radius:3px; box-sizing:border-box; }
#form textarea { height:100px; padding:12px; margin-bottom:35px; }
#form .col { width:50%; padding:0 5px 0 0; float:left; box-sizing:border-box; }
#form .col.right { padding:0 0 0 5px; }
#form input[type=submit] { height:50px; margin-top:35px; padding:0 50px; background:#f26c4f; font:20px "Roboto"; color:#FFF; border-radius:4px; cursor:pointer; }
#form #enquire { position:absolute; top:-70px; }
#form .field-wrap { margin-bottom:0; padding:0 5px;  }
#form .text-wrap { width:50%; float:left; }
#form .text-wrap:nth-child(n+6) { width:33%;  }
#form .text-wrap:nth-child(n+6) input { height:40px; background:#D5D5D5; font-size:13px; }
.ninja-forms-required-items { display:none; }
.ninja-forms-field-description { font-size: 11px; }
.ninja-forms-field-description p { margin-bottom: 0; }
#form input[type=submit]:hover { background:rgba(0,0,0,.4); }

.page-id-52 #form { background-color:#E69F0F; }
.single-products #form { background-color:#009BE6; }
.page-id-46 #form { padding:0 0 30px; background:none; }
.page-id-37 #form, .page-id-87 #form { background-color:#30B4A7; }

/* -------------------- Upload -------------------- */

.upload { background:#353535 url(system/images/header-fade.png) center no-repeat; background-size:cover; }
.upload h1 { max-width:500px; margin-left:auto; margin-right:auto; color:#FFF; }
.upload p { max-width:500px; margin-left:auto; margin-right:auto; color:#BBB; }
.upload #form .text-wrap { width:100%; }
.upload #ninja_forms_field_18_label { display:none; }
.upload #ninja_forms_field_18 { height:auto; padding:15px; background:rgba(0,0,0,.15); color:#FFF; border-radius:3px; font-size:13px; }

/* -------------------- Colorbox -------------------- */

#colorbox, #cboxOverlay, #cboxWrapper { position:absolute; top:0; left:0; z-index:999999; overflow:hidden; }
#cboxWrapper { max-width:none; }
#cboxOverlay { position:fixed; width:100%; height:100%; }
#cboxMiddleLeft, #cboxBottomLeft { clear:left; }
#cboxContent { position:relative; }
#cboxLoadedContent { -webkit-overflow-scrolling:touch; }
#cboxTitle { display:none; }
#cboxLoadingOverlay, #cboxLoadingGraphic { position:absolute; top:0; left:0; width:100%; height:100%; }
.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; }
#colorbox, #cboxContent, #cboxLoadedContent { box-sizing:content-box; }
#cboxOverlay { background:#444; }
#colorbox { outline:0; }
.cboxIframe { background:#000; }
#cboxError { padding:50px; border:1px solid #ccc; }
#cboxLoadedContent { border:none; background:#FFF; }
#cboxTitle { width:100%; position:absolute; top:-45px; left:0; font:italic 14px/17px 'Roboto'; color:#FFF; }
#cboxTitle strong { font-size:16px; }
#cboxLoadingGraphic { display:none; }
#cboxClose { width:40px; height:40px; color:#CCC; position:absolute; top:0; right:0; text-indent:-99999px; background:none; z-index:99; cursor:pointer; }
#cboxClose:after { width:100%; height:100%; text-align:center; content:'\f00d'; font-family:FontAwesome; font-size:20px; line-height:40px; text-indent:0 !important; position:absolute; top:10px; right:10px; }
#cboxPrevious, #cboxNext { display:none; }
#cboxClose:hover { color:#888; }

/* -------------------- Footer -------------------- */

footer .col { width:50%; float:left; }
footer .details { margin:auto; padding:100px 30px 70px; display:table; }
footer .details p.heading { margin-bottom:35px; font:33px/40px "Roboto"; color:#666; }
footer .details p { margin-bottom:30px; font:300 18px/25px "Roboto"; color:#888; }
footer .details p a { color:#888; }
footer .details span { width:25px; height:25px; margin:0 10px 3px 0; font:15px/25px "Roboto"; color:#FFF; text-align:center; border-radius:100px; background:#666; display:inline-block; position:relative; top:-2px; }
footer .details span:first-of-type { line-height:22px; }
footer .details p a:hover { color:#000; }
footer .social a { width:36px; height:36px; margin-right:3px; background:#CCC; color:#FFF !important; font-size:18px; line-height:36px; text-align:center; display:inline-block; border-radius:100px; }
footer .social a:hover { background:#888; }
footer p.copyright { font-size:13px; }
footer p.copyright a { margin-left:10px; }
footer #map { width:100%; height:530px; }

/* -------------------- Transitions -------------------- */

a, body, header .logo, #fixed, #fixed .logo, header p.title, button, input[type=submit], #fixed #top, #products .item span, #pull, #gallery .item .img { transition:.2s ease; }
nav ul ul { transition:.2s ease; transition-property:top; }

/* -------------------- Responsive -------------------- */

@media only screen and (max-height:900px) {
header #hero img { top:50%; }
#video { height:600px; }
}

@media only screen and (max-width:1250px) {
#products .item img { height:180px; }
#products .nav.prev { left:50px; }
#products .nav.next { right:50px; }
#top { display:none; }
#gallery .item { width:25%; }
}

@media only screen and (max-width:1000px) {
#fixed { position:absolute; }
#pull.fixed, .page-template-default #pull, .single-products #pull { display:block; }
#fixed nav { display:none; }
#gallery .item { width:33.33%; }
.pop { height:auto; padding-left:450px; }
.pop img { width:400px; height:400px; }
.single-products .block img { width:50%; height:auto; margin-bottom:40px; position:relative; top:auto; right:auto; float:right; }
.single-products .block .col.img h1, .single-products .block .col.img p { width:100%; }
.clients .item img { height:40px; }
}

@media only screen and (max-width:750px) {
nav { display:none; }
#pull { display:block; }
header p.title { width:auto; margin:0 30px; }
header p.title br { display:none; }
header #hero img { top:60%; }
#products { padding-bottom:150px; }
#products .nav { margin:0; top:auto; bottom:50px; }
footer .col { width:100%; }
footer #map { height:300px; }
.block .col { width:100%; float:none !important; }
.block .back { width:100%; height:350px; margin-bottom:50px; position:relative; top:auto; right:auto !important; left:auto !important; }
#video p { padding:0 30px; font:300 30px/40px "Roboto"; box-sizing:border-box; }
#video p br { display:none; }
.block .text { width:100%; }
.block .back img { width:100%; height:auto; }
.block .col.img .back { width:100%; padding-right:50px; height:auto; box-sizing:border-box; }
}

@media only screen and (max-width:650px) {
#pull { right:15px; }
.centre { padding:0 30px; }
#gallery .centre { padding:50px 25px 25px; }
#fixed .logo { left:30px; }
#gallery .item { width:50%; padding:5px; }
#filters .filter { width:100%; border:none !important; }
#filters .filter:first-of-type { width:100%; border-bottom:1px solid #D8D8D8 !important; }
.pop { padding:0; }
.pop h3, .pop p, .pop .button { display:none; }
.pop img { width:100%; height:auto; position:relative; }
header, header #hero, header #hero .overflow { min-height:600px; }

.upload form { padding:0 !important; }
.clients { display:none; }
}

@media only screen and (max-width:460px) {
#pull { right:10px; }
#form .col { width:100%; padding:0 !important; }
.block .back { height:250px; }
.single-products .block img { width:100%; height:auto; float:none; }
footer .details p { font:300 14px/22px "Roboto"; }
}

@media only screen and (max-width:340px) {
header #hero img { display:none; }
header, header #hero, header #hero .overflow { min-height:none; }
}