@charset 'utf-8';

@import url(//hello.myfonts.net/count/2adc49);
@font-face{
	font-family:'Restructure-BrandonGrotesque';
	font-weight:500;
	font-style:normal;
	src:url(../fonts/2ADC49_0_0.eot);
	src:url(../fonts/2ADC49_0_0.eot?#iefix) format('embedded-opentype'),
		url(../fonts/2ADC49_0_0.woff) format('woff'),
		url(../fonts/2ADC49_0_0.ttf) format('truetype');
}
@font-face{
	font-family:'Restructure-BrandonGrotesque';
	font-weight:700;
	font-style:normal;
	src:url(../fonts/2ADC49_1_0.eot);
	src:url(../fonts/2ADC49_1_0.eot?#iefix) format('embedded-opentype'),
		url(../fonts/2ADC49_1_0.woff) format('woff'),
		url(../fonts/2ADC49_1_0.ttf) format('truetype');
}

@font-face {
	font-family:'Restructure-Icons';
	src:url(../fonts/restructure.eot?db1i4p);
	src:url(../fonts/restructure.eot?#iefixdb1i4p) format('embedded-opentype'),
		url(../fonts/restructure.woff?db1i4p) format('woff'),
		url(../fonts/restructure.ttf?db1i4p) format('truetype'),
		url(../fonts/restructure.svg?db1i4p#restructure) format('svg');
	font-weight:normal;
	font-style:normal;
}

/* Eric Meyer's Reset CSS v2.0 + Extras */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,button{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}button{background:none;cursor:pointer;}

/*
Global CSS Document
Restructure
http://www.ten4design.co.uk

Grey #1 - #f8f8f8
Blue-Grey #1 (dark) - #333e49
Blue-Grey #2 (medium) - #596470
Blue-Grey #3 (light) - #8b96a0
*/

html,button,input{color:#596470; font-family:'Restructure-BrandonGrotesque',sans-serif; -webkit-font-smoothing:antialiased; -webkit-font-variant-ligatures:common-ligatures; -moz-font-variant-ligatures:common-ligatures; -o-font-variant-ligatures:common-ligatures; -ms-font-variant-ligatures:common-ligatures; font-variant-ligatures:common-ligatures;}
input[type=submit],
input[type=button],
button{-webkit-appearance:none; -moz-appearance:none; appearance:none; border-radius:0;}
button:focus{outline:none;}
body{font-size:20px; font-weight:500; line-height:1.4; background-color:#fff; background-repeat:no-repeat; background-position:center; background-attachment:fixed; -webkit-background-size:cover; background-size:cover;}


/* --- UTILITY --- */

.invisible{position:absolute; left:-999em;}
.removed{display:none;}
.relative{position:relative;}


/* --- TYPOGRAPHY --- */

strong,
b{font-weight:700;}
em,
i{font-style:italic;}

a{color:#333e49; text-decoration:none; font-weight:700; -webkit-transition:color 0.2s; -moz-transition:color 0.2s; -o-transition:color 0.2s; -ms-transition:color 0.2s; transition:color 0.2s;}
a:focus,
a:hover{color:#596470;}

.h,
.wysiwyg p.h,
.wysiwyg h2,
.wysiwyg h3{font-weight:500; margin:0 0 0.6em; line-height:1.4;}

.h.huge{font-size:170%; text-align:center; margin:0 0 1.6em;}
.h.large,
.wysiwyg h2{font-size:150%;}

.p.large{font-size:140%; margin:0 0 0.6em;}

.p,
.wysiwyg p,
.wysiwyg ul,
.wysiwyg ol,
.wysiwyg img,
.wysiwyg figure{margin:0 0 1.2em;}
.wysiwyg figure{display:block; width:100%;}
.wysiwyg figure figcaption{font-size:90%; font-style:italic;}

.wysiwyg blockquote{font-size:0.85em; line-height:1.8; padding-left:1.4em; border-left:1px solid #596470;}
.wysiwyg blockquote.big-quote{font-size:1em; line-height:1.4;}

.l,
.wysiwyg ul,
.wysiwyg ol{padding-left:1.6em;}
ul.l li,
.wysiwyg ul li{list-style:disc outside; margin-bottom:0.2em;}
ol.l li,
.wysiwyg ol li{list-style:decimal outside; margin-bottom:0.2em;}


/* --- CONTENT --- */

.container{background-color:#fff;}
.padded{padding:3em 70px; display:block;}
.gap-below{margin-bottom:8em;}
.m-show{display:none;}
.m-hide{display:block;}
.limit-width{max-width:800px; margin:0 auto;}

#header,
#footer,
.padded.grey{background-color:#f8f8f8;}
#header{background-image:url(../images/logo.svg); background-repeat:no-repeat; background-position:center;}
#header .w12,
#footer .w12{margin:3em 0;}
#header-tagline{position:absolute; right:0; top:0; color:#8b96a0;}

#nav-primary{text-transform:uppercase; letter-spacing:0.08em;}
#nav-primary li{display:inline-block; margin-right:0.4em;}
#nav-primary a{color:#8b96a0;}
#nav-primary a:hover,
#nav-primary a:focus{color:#596470;}
#nav-primary .selected a{color:#333e49;}

.nav-footer li{display:inline; margin-right:0.4em;}
.nav-footer.right{position:absolute; right:0; top:0;}
.nav-footer.right li{margin-right:0; margin-left:0.4em;}

#cookie-notice{padding:0.4em 1em; text-align:center;}

#feature-landscape{display:block;}
#feature-square{display:none;}

.img-block{margin-bottom:1.8em;}

.box-effect{position:relative; display:block;}
.box-effect:before{content:''; display:block; position:absolute; opacity:0; z-index:1; top:0; bottom:0; left:0; right:0; margin:0; border:4px solid #fff; -webkit-transition:margin 0.2s, opacity 0.2s; -moz-transition:margin 0.2s, opacity 0.2s; -ms-transition:margin 0.2s, opacity 0.2s; -o-transition:margin 0.2s, opacity 0.2s; transition:margin 0.2s, opacity 0.2s;}
.box-effect:hover:before,
.box-effect:focus:before{margin:2em; opacity:1; -webkit-transition:margin 0.2s, opacity 0.2s; -moz-transition:margin 0.2s, opacity 0.2s; -ms-transition:margin 0.2s, opacity 0.2s; -o-transition:margin 0.2s, opacity 0.2s; transition:margin 0.2s, opacity 0.2s;}

.icon{padding-left:44px; position:relative;}
.icon:before{font-family:'Restructure-Icons'; font-size:18px; position:absolute; top:0; left:0; line-height:1;}
.icon.phone:before{content:'\f095'; font-size:150%;}
.icon.email:before{content:'\f0e0'; font-size:110%;}
.icon.address:before{content:'\f041'; font-size:240%;}


/* --- SMALLER SCREENS --- */

@media only screen and (max-width:1489px){

#header .w12{margin:3.6em 0 2.4em;}

#feature-landscape{display:none;}
#feature-square{display:block;}

}

@media only screen and (max-width:1189px){

#header-tagline-design-and{display:none;}
.p.large{font-size:120%;}

.padded{padding-left:60px; padding-right:60px;}

}


@media only screen and (max-width:1023px){

body{font-size:0.8em;}
#header{background-image:url(../images/logo-small.svg);}
#header-tagline-design-and{display:inline;}

.padded{padding-left:40px; padding-right:40px;}

}

@media screen and (max-width:849px){

#header-tagline-design-and{display:none;}

}

/* --- MOBILE --- */

@media only handheld, screen and (max-width:767px){ /* 768 = iPad screen */

body{font-size:1em;}
.padded{padding-left:1.4em; padding-right:1.4em;}
.gap-below{margin-bottom:0;}
.m-show{display:block;}
.m-hide{display:none;}

#header,
#footer{text-align:center;}
#header{background-position:center 20px;}
#header .w12{margin:3.2em 0 1.1em;}
#nav-primary{margin-top:1em;}
#nav-primary li{margin:0 0.2em;}

#header-tagline,
.nav-footer.right{position:static;}
.nav-footer{margin-bottom:1em;}
.nav-footer li{display:block;}

#feature-landscape{display:block;}
#feature-square{display:none;}

#header-tagline-design-and{display:inline;}

.img-block{margin-bottom:0;}
.m-img-block{margin-bottom:1.8em;}

}
