/* Fonts */
@font-face { font-family: 'Futura Light BT'; src: url('fonts/Futura Light BT.ttf') format('truetype'); }
@font-face { font-family: 'Comfortaa-Regular'; src: url('fonts/Comfortaa-Regular.ttf') format('truetype'); }
@font-face { font-family: 'OpenSans-Regular'; src: url('fonts/OpenSans-Regular.ttf') format('truetype'); }

/* General styles */
body { position: relative; margin: 0; padding: 0; font-size: 18.5px; font-family: 'Futura Light BT', Arial, sans-serif; color: #333333; line-height: 1.25; }
h1, h2, h3, h4 { font-family: 'Comfortaa-Regular', 'Futura Light BT', Arial, sans-serif; margin-top: 1.75em; margin-bottom: 0.75rem; font-weight: normal; }
h1, h1 > a { font-size: 2.6rem; }
h2, h2 > a { font-size: 2rem; }
h3, h3 > a { font-size: 1.6rem; }
h4, h4 > a { font-size: 1.4rem; }
p { margin: 1rem 0; }
a { color: #b70000; text-decoration: none; }
a:hover { text-decoration: underline; }
a.button { color: white; background: #b70000; padding: 0.75em 1.5em; font-family: 'Comfortaa-Regular', sans-serif; }
a.button:hover { color: white; background: #d70000; }
a.button.primary { float: left; }
a.button.secondary { float: right; }

h1:first-child, h2:first-child, h3:first-child { margin-top: 0; }
input, button, textarea, select { font-family: 'Futura Light BT', Arial, sans-serif; color: #333333; font-size: 1rem; }

/* Avoid our header when scrolling to a #fragment target. */
:target { padding-top: 223px; margin-top: -223px; position: relative; }
h1:target, h2:target, h3:target { margin-top: calc(1.75rem + -223px); }
h1.target, h2.target, h3.target { color: #b70000; }

h1 > a, h2 > a, h3 > a { color: #333333; }
ul { padding-left: 2rem; }
.clear:after { content: " "; visibility: hidden; display: block; height: 0; clear: both; }

body > header { width: 100%; }
.mobile { display: none; }
header.desktop { height: 173px; background: url('images/header-background-page.jpg') center; position: fixed; top: 0; z-index: 50; }
header.desktop.minimised { height: 60px; transition: height 0.25s; }
header.desktop.minimised .logo { width: 134px; height: 29px; background-size: 80%; padding: 15px 25px; }
header.desktop.minimised nav { padding-top: 10px; }
header.desktop > .logo { padding: 25px; display: block; position: absolute; top: 0; left: 0; width: 210px; height: 44px; background: url('images/brush-logo.png') center no-repeat; transition: height 0.25s, width 0.25s, padding 0.25s; }
header.desktop > nav { padding: 25px 25px 0 0; display: block; position: absolute; top: 0; right: 0; transition: padding 0.25s; }
header.desktop > nav > a { font-size: 15px; font-family: 'Comfortaa-Regular', 'Futura Light BT', Arial, sans-serif; display: inline-block; padding: 0.6rem 1.4rem; margin: 0 0.1rem; color: white; text-decoration: none; }
header.desktop > nav > a { }
header.desktop > nav > a:hover, header.desktop > nav > a.current { color: rgba(255,255,255,0.5); }
header.desktop > nav > a[name=contact] { color: #add91c; border: 2px solid #add91c; margin-left: 1.4rem; }
header.desktop > nav > a[name=contact]:hover, header.desktop > nav > a[name=contact].current { color: white; background: #add91c; }

#page_wrapper { padding-top: 223px; }
.content-wrapper { margin: 0 auto; max-width: 1100px; min-height: 400px; padding: 0 1rem; }
.main_column { max-width: 800px; width: calc(100% - 300px); float: left; padding-top: 0.5rem; }
.sidebar + .main_column { float: right; padding-top: 0.5rem; margin-left: 300px; }
.sidebar + .main_column img { max-width: 100%; } /* Prevent wide images from breaking the layout on narrower screens. */

.sidebar { width: 280px; float: left; position: fixed; font-family: 'Comfortaa-Regular', sans-serif; font-weight: normal; }
.sidebar > nav { }
.sidebar > nav > a { color: #333; display: block; padding: 1rem 1.5rem; font-size: 1.2rem; line-height: 1.1; background-size: 200px 100%; background-position: right; background-repeat: no-repeat; }
.sidebar > nav > a:hover { background-image: url('images/sidemenu-hover.png'); background-color: #dfdfdf; text-decoration: none; }
.sidebar > nav > a.current { color: white; background-image: url('images/sidemenu-current.png'); background-color: #b70000; }

#newsletter-signup .content-wrapper { min-height: 0; }
#newsletter-signup { padding: 1rem 0; background: hsla(0, 0%, 0%, 0.07); margin-top: 2rem; text-align: center; vertical-align: middle; }
#newsletter-signup input { height: 2rem; line-height: 2rem; padding: 0 0.5rem; border: none; }
#newsletter-signup input[name=cm-name] { width: 5rem; }
#newsletter-signup input[type=email] { width: 10rem; }
#newsletter-signup .subscribe { color: white; background: #add91c; border: none; height: 2rem; line-height: 2rem; display: inline-block; font-size: 1rem; padding: 0 1rem; }
#newsletter-signup .subscribe:hover { cursor: pointer; background: #9dc90c; }
#newsletter-signup a.sample { color: #333333; text-decoration: underline; }

footer { width: 100%; text-align: center; padding: 1rem 0; }
footer .snippet { padding: 0 1rem; }
footer:not(:hover) .snippet, footer:not(:hover) a { color: hsla(0, 0%, 0%, 0.5); }

.left { float:left; }
.right { float:right; }

.rightimage { float: right; margin: 0 0 1rem 1rem; }
.rightimage > .caption, .rightimage > .caption > a { font-size: 0.8rem; }

/* Prevent pre-formatted code (on the blog, particularly) from breaking the layout on smaller screens. */
pre { overflow-x: auto; }
@media (max-width: 1120px) { pre { max-width: 65vw; } }
@media (max-width: 1050px) { pre { max-width: 60vw; } }
@media (max-width: 960px) { pre { max-width: 55vw; } }

code { background: #f7f7f7; border: 1px solid #e5e5e5;  padding: 0 0.2rem; font-family: monospace; display:inline-block; font-size: 0.75em; }
pre code { padding: 20px; width: calc(100% - 40px); font-size: 0.7em; border-left: none; border-right: none; }
img.right { float: right; }

/* Forms */
p.form-field > label { display: inline-block; width: 7rem; }

/* Pages */
/* Home */
#home > header.desktop { height: 704px; background-image: url('images/header-background-home.jpg'); position: relative; }
#home .page_marker { position: relative; top: -30px; height: 20px; width: 100%; background: url('images/page-marker-home.png') bottom center no-repeat; }
#home #page_wrapper { padding-top: 30px; }
/* Home -> Connected product design for innovators */
#home .hoverbox { display: none; position: absolute; background: rgba(0,0,0,0.55); font-size: 0.9rem; line-height: 1.5; padding: 0 30px; white-space: normal; box-sizing: border-box; }
#home .hoverbox a { color: #add91c; }
#home .word { cursor: pointer; }
#connected_design_text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);  white-space: nowrap; font-family: 'OpenSans-Regular', sans-serif; font-size: 3.5rem; color: white; height: 1.5em; line-height: 1.5; }
#connected_design_text > .word { display: inline-block; position: relative; height: 1.5em; vertical-align: baseline; }
#connected_design_text > .word > .pointer { height: 20px; width: 100%; position: absolute; }
#connected_design_text .full_pointer { display: none; }
#connected_design_text > .word:last-child { color: #add91c; font-style: italic; }
#connected_design_text > .word[name=connected] > .pointer { border: 1px solid hsla(0, 0%, 100%, 0.6); border-bottom: none; top: 0; left: 0; }
#connected_design_text > .word[name=connected] > .pointer:before { content: " "; width: 100%; height: 11px; margin-top: -12px; background: url('images/triangle-up-white.png') center no-repeat; display: block; }
#connected_design_text > .word[name=connected] > .full_pointer { position: absolute; bottom: calc(100% + 11px); left: calc(50% + 1px); height: 50px; border-left: 1px solid hsla(0, 0%, 100%, 0.6); }
#home .hoverbox[name=connected] { border-bottom: 1px solid hsla(0, 0%, 100%, 0.6); width: 600px; bottom: calc(100% + 11px + 50px); left: calc(50% - 300px + 15px); cursor: auto; }

#connected_design_text > .word[name=product_design] > .pointer { position: absolute; top: 100%; border: 1px solid hsla(0, 0%, 100%, 0.6); border-top: none; }
#connected_design_text > .word[name=product_design] > .pointer:after { content: " "; width: 100%; height: 11px; margin-top: 21px; background: url('images/triangle-down-white.png') center no-repeat; display: block; }
#connected_design_text > .word[name=product_design] > .full_pointer { position: absolute; width: 100%; height: 50px; left: calc(50% + 1px); top: calc(100% + 11px + 20px); border-left: 1px solid hsla(0, 0%, 100%, 0.6); }
#home .hoverbox[name=product_design] { position: absolute; top: calc(100% + 11px + 20px + 50px); border-top: 1px solid hsla(0, 0%, 100%, 0.6); width: 600px; left: calc(50% - 300px + 15px); cursor: auto;}

#connected_design_text > .word[name=innovators] > .pointer { top: 0px; border: 1px solid hsla(72, 77%, 47%, 0.6); border-bottom: none; }
#connected_design_text > .word[name=innovators] > .pointer:before { content: " "; width: 100%; height: 11px; margin-top: -12px; background: url('images/triangle-up-green.png') center no-repeat; display: block; }
#connected_design_text > .word[name=innovators] > .full_pointer { position: absolute; bottom: calc(100% + 11px); left: calc(50% + 1px); height: 50px; border-left: 1px solid hsla(72, 77%, 47%, 0.6); }
#home .hoverbox[name=innovators] { border-bottom: 1px solid hsla(72, 77%, 47%, 0.6); color: #add91c; width: 600px; bottom: calc(100% + 11px + 50px); left: calc(50% - 300px + 15px); font-style: normal; cursor: auto; }
#home .hoverbox[name=innovators] a { color: white; text-decoration: underline; }

/* Contact+People */
#company_contact_details > .location { width: 50%; float: left; }
#company_contact_details > .phone_number { text-align: right; width: 50%; float: right; }
#company_contact_details > .location > .address { width: 275px; float: left; }
#contact .our_people { padding-top: 2rem; }
#contact .person { padding-bottom: 100px; }
#contact .person > .picture { float: left; margin-right: 2em; }
#contact .person .details { }
#contact .person .name { margin: 0; }
#contact .person .picture img { width: 225px; height: 225px; border-radius: 50%; }
#contact .person .contact_method { width: 24%; display: inline-block; }


/* Popups */
.popup { background: white; display: none; position: absolute; width: 505px; padding: 1rem; z-index: 1; text-align: left; box-shadow: 2px 2px 7px #888; }
.popup .close { position: absolute; right: 5px; top: 5px; cursor: pointer; display: block; width: 20px; height: 20px; border-radius: 10px; background: white url('images/buttons/red-x.png') center no-repeat; }
.popup .close:hover { background: #b70000 url('images/buttons/white-x.png') center no-repeat; }

/* Puzzle */
#puzpic { float: right; text-align: center; }
#puzpic > img { display: block; }

ul.skills { list-style: none; margin: 2rem 0 4rem 0; padding: 0; }
ul.skills li { margin: 0 3rem 0 0; padding: 0; display: inline-block; font-family: 'Comfortaa-Regular', sans-serif; font-size: 1.1rem; padding: 0.5em; }
ul.skills li img { display: inline-block; width: auto; height: 2rem; margin-right: 0.75rem; vertical-align: middle; opacity: 0.6; }

@media (max-width: 1600px) {
    #connected_design_text > .word[name=connected] > .full_pointer { height: 45px; }
    #home .hoverbox[name=connected] { bottom: calc(100% + 11px + 45px); }
    #home .hoverbox[name=connected] { width: 700px; left: calc(50% - 350px); }
}

@media (max-width: 1280px) {
  #connected_design_text { font-size: 4.5vw; }
}


/* Wordpress blog-only styles: */
#blog .sidebar h2, #blog .sidebar h3 { margin: 1rem 0; }
#blog h1 > a { color: #b70000; }
.alignright { float: right; }
#commentform .element label { display: block; margin-top: 1em; }
.post { padding-top: 2rem; margin-top: 2rem; border-top: 1px solid #ddd; }
.post:first-of-type { padding-top: 0; border-top: none; }
.post h2 { font-size: 1.6rem; }
.post h2:first-of-type { font-size: 2rem; }