/* -----------------------------------------------------------------------RESET -------*/
/* Reset from: http://meyerweb.com/eric/tools/css/reset/ */
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 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
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 {
  content: "";
  content: none; }

q:before, q:after {
  content: "";
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

strong {
  font-weight: bold; }

/*#e1e2fa;*/
/* -----------------------------------------------------------------------TABLE OF CONTENTS -------*/
/* 

UNIQUE ELEMENTS 					:	html, body, header, footer, nav...
LAYOUT BLOCKS						:	large constructs for wrapping sub areas

RESPONSIVE GRID						: 	Generated grid
RESPONSIVE MEDIA					:	Images that scale to 100% etc
FLOATS & CLEARS						:	Says on the tin...

NAVIGATION							:	navColumn, navColumn a...
CONTENT CONTAINERS & SUB STYLING	:	sections & articles and the styling of the specific elements within

ATMOSTPHERE							:	Thinks like lines and borders (non specific)

TYPOGRAPGHY							:	The typographical elements that are not described above
COLOURS								:	Colours for backgrounds of elements

MISC								:	Other things that may appear (via CMS)

THEME								:	Colour schemes
*/
/* -----------------------------------------------------------------------END TABLE OF CONTENTS -------*/
/* -----------------------------------------------------------------------UNIQUE ELEMENTS -------*/
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

html {
  /* Prevent font scaling in landscape */
  -webkit-text-size-adjust: none;
  font-size: 16px; }
  @media (min-width: 480px) {
    html {
      font-size: 16px; } }
  @media (min-width: 720px) {
    html {
      font-size: 17px; } }
  @media (min-width: 960px) {
    html {
      font-size: 18px; } }
  @media (min-width: 1380px) {
    html {
      font-size: 20px; } }

body {
  font-family: "proxima-nova", Helvetica, Arial, Verdana, sans-serif;
  font-style: normal;
  font-weight: 400;
  overflow-y: scroll;
  position: relative; }

/* wrapper for the whole content */
#wrapper {
  position: relative;
  background: white;
  overflow: hidden;
  /* CSS 3 */
  /* non reponsive size */
  width: 960px;
  margin: 22px auto;
  /* responsive sizes */
  /* breakpoint specific */ }
  @media (min-width: 0px) {
    #wrapper {
      width: auto;
      margin: 22px 10px; } }
  @media (min-width: 480px) {
    #wrapper {
      margin: 22px 20px; } }
  @media (min-width: 720px) {
    #wrapper {
      margin: 22px 30px; } }
  @media (min-width: 960px) {
    #wrapper {
      margin: 22px 40px; } }
  @media (min-width: 1380px) {
    #wrapper {
      width: 1380px;
      margin: 22px auto; } }

#headerLogo {
  height: 180px;
  width: 180px;
  display: block;
  background-position: 0 0;
  -o-background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  direction: ltr;
  overflow: hidden;
  text-indent: -999px;
  /*background-image: url(../images/logo.svg);*/
  background-image: url(../images/logo.png);
  margin-left: auto;
  margin-right: auto; }
  @media (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2 / 1), (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
    #headerLogo {
      /* Size of retina sprite image is 400px ✕ 400px */
      background-image: url(../images/logo-2x.png);
      /* Bring down size to 1x size */
      background-size: 180px 180px; } }

/*
.no-svg  #headerLogo {
	background-image: url(../images/logo.png);
}
*/
/* -----------------------------------------------------------------------END UNIQUE ELEMENTS -------*/
/* -----------------------------------------------------------------------LAYOUT BLOCKS --------*/
/* site constructs */
.fullWidth {
  width: 100%;
  margin: 0; }

.gridContainer {
  margin-left: 20px;
  margin-right: 20px; }

/* Content containers */
/* big borders */
.frame {
  padding: 4px; }
  @media (min-width: 720px) {
    .frame {
      padding: 10px; } }
  @media (min-width: 960px) {
    .frame {
      padding: 20px; } }

/* big images at top of page */
.mediaArea {
  margin-top: 24px; }

.panel {
  margin-top: 24px; }

/* -----------------------------------------------------------------------END LAYOUT BLOCKS --------*/
/* -----------------------------------------------------------------------RESPONSIVE GRID-----*/
/* GENERATED GRID  */
/* ----------------------------------------------------------------------- END RESPONSIVE GRID -------*/
/* -----------------------------------------------------------------------RESPONSIVE MEDIA -------*/
.media,
img {
  display: block;
  max-width: 100%;
  height: auto;
  width: auto;
  /* Fix for IE */ }

/* -----------------------------------------------------------------------END RESPONSIVE MEDIA -------*/
/* -----------------------------------------------------------------------FLOATS & CLEARS -------*/
.cf {
  zoom: 1; }
  .cf:before, .cf:after {
    content: ".";
    display: block;
    overflow: hidden;
    visibility: hidden;
    font-size: 0;
    line-height: 0;
    width: 0;
    height: 0; }
  .cf:after {
    clear: both; }

.left {
  float: left; }

.right {
  float: right; }

/* -----------------------------------------------------------------------END FLOATS & CLEARS -------*/
/* ----------------------------------------------------------------------- NAVIGATION -------*/
nav {
  text-align: center; }

.menu {
  font-family: "atrament-web",sans-serif;
  font-style: normal;
  font-weight: 400;
  text-transform: uppercase; }

.menu li {
  border-bottom: 1px solid #b2b2b2;
  font-size: 22px;
  line-height: 24px; }
  @media (min-width: 720px) {
    .menu li {
      border-bottom: none;
      font-size: 30px;
      line-height: 48px;
      margin-top: 0px;
      margin-bottom: 0px; } }

.menu li a {
  display: block;
  font-weight: 400;
  margin-bottom: 0px;
  padding-bottom: 0px;
  color: #00010a;
  text-decoration: none; }
  .menu li a:hover {
    color: #98a3b4; }

/*
nav {
	text-align: center;
	@include breakpoint($mobile) {}
	@include breakpoint($tablet) {}
	@include breakpoint($desktop) {}
	@include breakpoint($widescreen) {}	
	font-family: $fontStackSerif;
	font-family: "atrament-web",sans-serif;
	font-style: normal;
	font-weight: 400;
	text-transform:uppercase;
}

.navColumn a {
	display: block;
	float: none;
	
}

.navColumn a.columnTitle {
	border-bottom: 1px solid #b2b2b2;
	font-weight: 400;
	font-size: 22px;
	line-height: 24px;
	margin-bottom: 0px;
	padding-bottom: 0px;
	color: $colourDarkest;
	@include breakpoint($mobile) {
		float: left;
		border-bottom: none;
		padding-right: 20px;
		font-size: 30px;
		line-height: 48px;
	}
	
	
}

.navColumn a {
	font-size: 13px;
	line-height: 24px;
	color: $colourDarkest;
	text-decoration: none;
	-webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
	-ms-transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;

}

.navColumn a:hover {
	color: $colourLighter;
	
}
*/
/*
nav {
	//Global nav links behavior
	a {
		padding: $navPadding;
		display: block;
		padding:10px;
		color: #fff;
		text-decoration: none;
		background: #000;
		&:hover {
			background:#ccc;
		}
	}
	> ul {
		display: block;
		@media only screen and (min-width : 480px) { // medium size
			display: table;
		}
		
		
		width: 100%;
		color: #fff;
		> li {
			position: relative;
			display: block;
			padding: 0 0;
			@media only screen and (min-width : 480px) { // medium size
				display: table-cell;
				width: 33.33333%;
			}
			text-align: center;
			> ul {
				position: absolute;
				display: none;
				width: 100%;
				z-index: 300;
				top: 30px;
				li {
					text-align: left;
					a {
					}
				}
			}
			&.subVisible {
				ul {
					display: block;
				}
			}
			
			a {
			}
		}	
	}
}


#subNav {
	position: relative;
	ul.menu {
	position: absolute;
	display: none;
	left: 0;
	right: 0;
	top: 0;
	z-index: 300;
	background: #444;	
	&.menuHover {
		display: block;
		}
	}
}
*/
/* ----------------------------------------------------------------------- END NAVIGATION -------*/
/* ----------------------------------------------------------------------- CONTENT CONTAINERS & SUB STYLING -------*/
/* CONTENT */
.content a {
  color: #98a3b4;
  text-decoration: none; }

.content a:hover {
  text-decoration: underline; }

.sidebar {
  background: #f7f7f7; }

.sidebar a {
  color: #f3340e;
  text-decoration: none; }

.sideBar a:hover {
  text-decoration: underline; }

.padEdges h1, .padEdges > ul, .padEdges > p, .padEdges > a {
  margin-left: 1em;
  margin-right: 1em; }

.padTop {
  padding-top: 24px;
  padding-top: 1.5rem; }

li.portfolioListItem {
  min-height: 120px;
  display: block; }

/* END CONTENT */
/* PANEL */
.panelHeading {
  color: #00010a;
  font-style: italic;
  font-family: "jubilat", sans-serif;
  font-weight: 500;
  font-size: 38px;
  line-height: 48px;
  text-align: center;
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 23px;
  padding-bottom: 24px; }

.panelSubHeading {
  color: #00010a;
  font-style: italic;
  font-family: "jubilat", sans-serif;
  font-weight: 500;
  font-size: 28px;
  line-height: 48px;
  text-align: center;
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 23px;
  padding-bottom: 24px; }

.panelHeading a,
.panelSubHeading a {
  text-decoration: none;
  color: #00010a; }

.panelHeading a:hover,
.panelSubHeading a:hover {
  text-decoration: underline; }

.panelPadOutVertical {
  padding-bottom: 24px; }

/* END PANEL */
/* FOOTER LISTS */
.footerList {
  color: #fff;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 24px; }

.footerList li {
  line-height: 24px; }

.footerList a {
  color: #e1e2fa;
  text-decoration: none; }

.footerList a:hover {
  text-decoration: underline; }

/* END FOOTER LISTS */
/* COPYRIGHT */
.copyright {
  color: #424455;
  font-size: 12px;
  line-height: 24px;
  text-align: center; }

.copyright a {
  color: #98a3b4; }

.copyright a:hover {
  text-decoration: underline; }

/* END COPYRIGHT */
/* BLOG FEED ON HOME PAGE */
.blogFeedItem {
  border-bottom: 1px dashed #e5e5e5;
  margin-bottom: 23px; }

/* END BLOG FEED ON HOME PAGE */
/* OVERLAY STYLES */
.overlayContainer {
  position: relative; }
  .overlayContainer .overlayContent {
    position: absolute;
    display: block; }
    .overlayContainer .overlayContent.atop {
      top: 0; }
    .overlayContainer .overlayContent.abottom {
      bottom: 11px; }
    .overlayContainer .overlayContent.aleft {
      left: 11px; }
    .overlayContainer .overlayContent.aright {
      right: 11px; }
    .overlayContainer .overlayContent.transOverlay {
      background: black;
      background: rgba(0, 0, 0, 0.75); }
  .overlayContainer a:hover .overlayHighlight {
    background: #f3340e;
    text-decoration: none; }

.borderedPanel {
  padding: 10px;
  display: block;
  border: 1px solid #D5DCE6;
  background: #F9FCFE; }

/* END OVERLAY STYLES */
/* ----------------------------------------------------------------------- END CONTENT CONTAINERS & SUB STYLING -------*/
/* ----------------------------------------------------------------------- ATMOSPHERE -------*/
.borderTopThick {
  border-top: 10px solid #00010a; }

.borderBottomThick {
  border-bottom: 10px solid #00010a; }

.borderTopThin {
  border-top: 1px solid #00010a; }

.borderBottomThin {
  border-bottom: 1px solid #00010a; }

.bumpTop {
  margin-top: 24px; }

.bumpBottom {
  margin-bottom: 24px; }

.padTop {
  padding-top: 24px; }

.padBottom {
  padding-bottom: 24px; }

.bulletList,
.blogPost ul,
.blogPost ol {
  list-style: none; }
  .bulletList li,
  .blogPost ul li,
  .blogPost ol li {
    margin-bottom: 24px;
    line-height: 24px;
    font-style: normal;
    font-weight: 400;
    font-family: "proxima-nova", Helvetica, Arial, Verdana, sans-serif;
    margin-top: 0px;
    font-size: 16px;
    padding-left: 45px; }
    .bulletList li:before,
    .blogPost ul li:before,
    .blogPost ol li:before {
      content: '*';
      font-family: 'Times New Roman',Times,Georgia,'Liberation Serif',serif,sans-serif,'Lucida Sans Unicode';
      font-size: 32px;
      font-weight: normal;
      float: left;
      margin-left: -38px;
      margin-top: 5px; }

/* ----------------------------------------------------------------------- END ATMOSPHERE -------*/
/* ----------------------------------------------------------------------- TYPOGRAPGHY -------*/
/* Note: Specific containers typograpghy is styled more locally */
/* Headings */
.pageHeading {
  color: #00010a;
  font-family: "jubilat", sans-serif;
  font-style: italic;
  font-weight: 500;
  text-align: center;
  font-style: italic;
  margin-top: 0;
  /* 32px; */
  border-bottom: 1px solid #e5e5e5;
  border-top: 3px solid black;
  padding-top: 24px;
  padding-top: 1.5rem;
  line-height: 48px;
  line-height: 3rem;
  font-size: 50px;
  font-size: 3.125rem;
  padding-bottom: 14px;
  padding-bottom: 0.875rem;
  margin-bottom: 16px;
  margin-bottom: 1rem; }

.subHeading {
  font-style: italic;
  font-weight: 500;
  font-family: jubilat;
  font-size: 22px;
  line-height: 24px;
  margin-bottom: 24px;
  margin-top: 0px; }

.subHeading a {
  text-decoration: none;
  color: #00010a; }

.subHeading a:hover {
  text-decoration: underline; }

.overlayHeading {
  font-style: italic;
  font-weight: 300;
  font-family: jubilat;
  padding-bottom: 12px;
  padding-top: 12px;
  padding-left: 12px;
  padding-right: 12px;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
  overflow: hidden;
  font-size: 14px;
  line-height: 18px;
  /* breakpoint specific */ }
  @media (min-width: 480px) {
    .overlayHeading {
      font-size: 16px;
      line-height: 24px; } }

h4 {
  font-style: normal;
  font-weight: 400;
  font-family: jubilat;
  font-size: 24px;
  line-height: 25px;
  margin-bottom: 23px; }

h5 {
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  font-family: jubilat;
  line-height: 24px;
  margin-bottom: 24px; }

h6 {
  font-style: normal;
  font-weight: 400;
  font-family: jubilat;
  line-height: 24px;
  margin-bottom: 24px; }

.light {
  font-family: "raleway","Helvetica Neue","Helvetica","Arial",sans-serif;
  font-style: normal;
  font-weight: 100; }

p {
  font-style: normal;
  font-weight: 400;
  font-family: "proxima-nova", Helvetica, Arial, Verdana, sans-serif;
  margin-top: 0px;
  color: #363a40;
  margin-bottom: 24px;
  line-height: 24px;
  margin-bottom: 24px;
  margin-bottom: 1.5rem;
  line-height: 24px;
  line-height: 1.5rem;
  font-size: 16px;
  font-size: 1rem; }

.centerText {
  text-align: center; }

.whiteText {
  color: #fff; }

.primaryFont {
  font-family: "jubilat", sans-serif;
  font-style: italic;
  font-weight: 500;
  text-align: center;
  font-style: italic;
  line-height: 24px;
  line-height: 1.5rem;
  font-size: 20px;
  font-size: 1.25rem; }

/* ----------------------------------------------------------------------- END TYPOGRAPGHY -------*/
/* ----------------------------------------------------------------------- COLOURS -------*/
/* colours - Background*/
.colKeyDark {
  background-color: #00010a; }

/* NOTE: colours - Foreground are set using context of parents */
/* ----------------------------------------------------------------------- END COLOURS -------*/
/* ----------------------------------------------------------------------- MISC -------*/
.block {
  display: block; }

.centered {
  text-align: center; }

.centerMargin {
  margin: 0 auto; }

.horizontalList li {
  display: inline-block; }
  .horizontalList li a,
  .horizontalList li span {
    display: block;
    padding: 0.5em 0.8em;
    line-height: 1;
    margin-bottom: 0.5em;
    text-decoration: none; }

.pagination {
  font-size: 16px; }

pre {
  font-family: "sax-mono", "Lucida Console", Monaco, monospace;
  background: #00010a;
  color: #fff;
  text-shadow: 0px 0px 10px #fff;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  line-height: 24px;
  padding: 24px 10px;
  margin-bottom: 24px;
  overflow: auto; }

.list li {
  font-size: 16px;
  line-height: 20px;
  margin-bottom: 4px; }

.bigList li {
  font-size: 20px;
  line-height: 24px;
  margin-top: 24px; }

.bigList li a {
  text-decoration: none;
  color: #00010a; }

.bigList li a:hover {
  text-decoration: underline; }

::selection {
  background: #f3340e;
  /* Safari */ }

::-moz-selection {
  background: #f3340e;
  /* Firefox */ }

a::selection {
  color: #fff;
  /* Safari */ }

a::-moz-selection {
  color: #fff;
  /* Firefox */ }

/* ----------------------------------------------------------------------- END MISC -------*/
/* ----------------------------------------------------------------------- THEME -------*/
.brand {
  color: #98a3b4; }

.brandAlt {
  color: #f3340e; }

.brandBorder {
  border-color: #98a3b4; }

.brandAltBorder {
  border-color: #f3340e; }

.roundedCorners {
  border-radius: 5px; }