@charset "utf-8";
/* CSS Document
Author  : We Sort | Ben Edmonds | wesort.co.uk */
/*  Typography  */
/** @license © 2014 MyFonts Inc | MyFonts Webfont Build ID 2787808, 2014-04-03T07:47:33-0400 */
@font-face {font-family: 'BasicCommercialLTCom-Lt';src: url('../webfonts/2AC0F8_0_0.eot');src: url('../webfonts/2AC0F8_0_0-q.eot') format('embedded-opentype'),url('../webfonts/2AC0F8_0_0.woff') format('woff'),url('../webfonts/2AC0F8_0_0.ttf') format('truetype');}

html {
  overflow-y: scroll;
  scroll-behavior: smooth;
}
body {
	text-align: left;
  color: #2E2E33;
  background: #333333;
  line-height: 1;
  font-family: BasicCommercialLTCom-Lt, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  letter-spacing: 0.01em;
  /*background: url('http://baselinebg.keyes.ie?h=16&r=245&g=245&b=245&s=1') repeat;*/
}
img {
  max-width: 100%;
  height: auto;
}
::selection, mark { background: #FFDD57; color: #2E2E33; }

/*  Containers  */
#page {
	background-color: #F7F7F5;
	padding-bottom: 1em;
}
#page, header, nav, #content, footer {
    display: block;
    position: relative;
}
header, #content, footer {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 1em;
}
header {
	padding-top: 1em;
}


/* Type sizes */
h1, h2, .pagination a, h3, nav li a, .logotype, #hero p, h3.journal-tags-heading, .journal-search form input, .journal-tags li, .info-header h3, .info-header li, blockquote {
	font-size: 1.5em;
  line-height: 1.5;
}
h2.thumbnail-title, h3, .project-blocks dt, .project-blocks p, #content p, .project-blocks .tags, .project-blocks .client, .post-blocks dt, .post-blocks p, .post-blocks .tags, .post-blocks .date, footer li {
	font-size: 1.15em;
	line-height: 1.5;
}
p {
	padding-bottom: 1em;
}
p:last-child {
	padding-bottom: 0;
}
a {
	cursor: pointer;
	color: #2E2E33;
	text-decoration: none;
}
p a {
	text-decoration: underline;
	word-wrap: break-word;
}
a:hover, .gray a.current, .gray a:hover {
	color: #EC565A;			/* Colour */
}
.gray a {
	color: #707070;
}
.red {
	color: #EC565A !important;
}
blockquote {
  margin: 0 auto;
  padding: 1em 0 0 1em;
  color: #999999;
}
.logotype {
	margin-bottom: 1em;
	display: none;
	}
.logomark {
	display:block;
	margin-top: 0.25em;
	margin-bottom: 0.9em;
	max-width: 5em;
	opacity: 0.9;
}
#hero, .journal-header {
	float: right;
}
#content-header {
	margin-bottom: 1em;
}
#hero {
	margin-bottom: 1em;
}
#hero p {
	padding: 0;
}
.featured-text {
	margin-top: -0.75em;
	margin-bottom: 1em;
}
.caption {
  margin-top: 0.25em;
}
.border-top {
	border-top: 1px solid #1C1C1C;
	padding-top: 0.5em;
}
footer {
	padding-top: 1em;
}
footer, footer li, footer a {
	color: #F7F7F5;
}
.footer-inner {
  margin-top: 0.25em;
}
footer li {
	padding-bottom: 1em;
	overflow: hidden;
	line-height: 1;
}
footer li.right {
	float: right;
}
.mailto {
  font-size: 1.06em;
}
#contact:target div, #contact:target a {
  color: #EC565A;
	-webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

/*  Site Navigations
---------------------------*/
#main-nav {
	margin-bottom: 0.5em;
}
#main-nav li, .info-header li {
	display: inline-block;
	margin-bottom: 0;
}
#main-nav a {
	display: block;
}
#main-nav li {
	width: auto;
	min-width: 0;
	padding-right: 1em;
}
#main-nav ul li:last-child {
	padding-right: 0;
}


/*  Project Index Navigation
---------------------------*/
.feature, .project-thumbs .grid-col , .project-blocks .grid-col, .post-thumbs .grid-col, .post-blocks .grid-col {
	margin-bottom: 1em;
}

.project-thumbs a, .post-thumbs a {
  display: block;
	position: relative;
	z-index: 1;
}
.project-thumbs a:hover, .post-thumbs a:hover {
    background: #000000;
}
.project-thumbs a img, .post-thumbs a img {
  display: block;
	position: relative;
	z-index: 5;
}
.post-thumbs a h2, .post-thumbs a p {
  background-color: #F7F7F5;
}
.project-thumbs a:hover img, .post-thumbs a:hover img, .feature a:hover img {
  opacity: 0.7;
}
.thumbnail-title-container {
	bottom: 0;
	width: 100%;
	text-align: center;
	position: absolute;
	z-index: 10;
	background: #EC565A;
	opacity: 1;
}
.project-thumbs a:hover .thumbnail-title-container {
  background: #A84138;
}
h2.thumbnail-title {
	text-align: center;
	color: #FFFFFF;
	width: 100%;
	padding: 0.4em 0.5em 0.25em 0.5em;
	line-height: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	opacity: 1;
	/*display: none;*/
}
.thumbnail-title-none .thumbnail-title {
	display: none;
}


/*  Project & Journal
---------------------------*/
.project-blocks img, .post-blocks img, .feature img, .post-thumbs img {
	width: 100%;
}
.text:nth-child(2n+2):nth-child(-n+12), .post-thumbs .grid-col.post-container:nth-child(odd) {
  clear: both;
}
.text.empty {
  margin-bottom: -1.5em !important;
}
.project-blocks dt, .post-blocks dt {
	font-weight: bold;
	color: #707070;
	letter-spacing: 0.02em;
}
.project-blocks h2, .post-blocks h2 {
	color: #999999;
	color: #2E2E33;
	margin-bottom: 0.5em;
}
.description, .materials-finishes, .client, .tags, .date {
	margin-bottom: 1em;
}
.materials-finishes li {
	display: inline-block;
}
.tags a {
	padding-right: 0.75em;
	text-decoration: underline;
}
.tags a:last-child {
	padding-right: 0;
}
.tags a span {
  white-space: nowrap;
}

/* Journal
---------------------------*/
.journal-header {
	margin-bottom: 1em;
}
.journal-search, .journal-tags {
	display: block;
}
form {
	display: inline-block;
	width: 100%;
}
form input {
	position: relative;
	display: inline-block;
	cursor: url('../img/icon_find.png'), auto;
	color: #EC565A;
	background: none;
	width: 100%;
	padding: 0; border: 0; outline: 0; margin: 0;
	overflow: hidden;
}
form input::-webkit-input-placeholder {
  text-indent: 0;
}
form input::-webkit-input-placeholder::after {
  content: ' ';
  position: absolute;
  top: 0; /* adjust icon position */
  left: 4em;
  width: 2em;
  background-image: url('../img/icon_find-red.png');
  background-repeat: no-repeat;
  background-position: 0 0;
}
form button { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px;
	overflow: hidden; padding: 0; position: absolute; width: 1px; }
::-webkit-input-placeholder {   		color: #EC565A; }
:-moz-placeholder { /* Firefox 18- */   color: #EC565A; }
::-moz-placeholder {  /* Firefox 19+ */ color: #EC565A; }
:-ms-input-placeholder {				color: #EC565A; }
form input:focus {
	background: #E8E8E8;
}
.journal-tags .search, h2.all-projects {
  margin-bottom: 0.5em;
}
.journal-tags li {
	display: inline-block;
	color: #707070;
	padding-right: 0.5em;
}
.journal-tags .tags-list li {
	display: block;
}
.tags-list .count {
  font-size: 0.75em;
  bottom: 0.25em;
}
.post-thumbs h2 {
  line-height: 1;
  margin-bottom: 0.25em;
}
.pagination-separator {
	display: block;
	margin: 0.5em 0;
}

/* Info
---------------------------*/
.info-header, .info-header h3 {
	margin-bottom: 1em;
}
ul.contact-details li {
	display: block;
}
.contact-details .email, .journal-tags {
	text-transform: none;
}


/* -------------------------------------------------------------
   -------------------------------------------------------------
   							BREAKPOINTS
   ---------------- Set here AND reset-n-grid.css  ------------------
   -------------------------------------------------------------
   ------------------------------------------------------------- */
/* -- Breakpoint (.bp1)
-- Same as above, but each class has ".bp1-" prefix
------------------------------------------------------------- */
@media all and (min-width: 20em) {
/* Styles */
/*h1, h3, nav li a, .logotype, #hero p, h3.journal-tags-heading, .journal-search form input, .journal-tags li, .info-header h3, .info-header li  {*/
/*	font-size: 1.5em;*/
/*}*/
/*h2, h3, .project-blocks dt, .project-blocks .description, .project-blocks .materials-finishes, .project-blocks .client, .post-blocks dt, .post-blocks .description p, .post-blocks .tags, .post-blocks .date, footer li {*/
/*	font-size: 1.15em;*/
/*}*/

}


/* -- Breakpoint 2 (.bp2)
~ iPad Portrait
------------------------------------------------------------- */
@media all and (min-width: 35.5em) {
/* Styles */
header, #content, footer {
	padding: 0 2em;
}
header, footer {
	padding-top: 1.5em;
}

#logo {
	min-height: 1em;
}
.logomark-wrap {
	position: absolute;
	bottom: 0.75em;
	margin-top: 0;
	margin-bottom: 0;
}
.logomark {
	max-width: 7em;
}
#main-nav {
	min-height: 5em;
	margin-bottom: 2em;
}
#main-nav li {
	padding-right: 1.5em;
}
#hero p, #hero h1 {
	font-size: 2em;
	line-height: 1.15;
}
.journal-hero {
  margin-top: -1.9em;
}
.info-header h3.border-top {
	border: none;
	padding-top: 0;
}
.project-blocks dd:last-child {
	margin-bottom: 0;
}
.pagination-separator {
	display: inline-block;
}
.pagination-separator:before {
	margin: 0 2em;
	content: "\2014";
}
ul.tags-list {
  -webkit-column-count: 2;
  -webkit-column-gap: 1em;
     -moz-column-count: 2;
     -moz-column-gap: 1em;
       -o-column-count: 2;
       -o-column-gap: 1em;
          column-count: 2;
          column-gap: 1em;
}
}


/* -- Breakpoint 3 (.bp3)
~ Over 1280px
------------------------------------------------------------- */
@media all and (min-width: 60em) {
/* Styles */
header, #content, footer {
	padding: 0 3em;
}
header, footer {
	padding-top: 1.5em;
}
footer {
	padding-bottom: 1.5em;
}
#hero p, #hero h1 {
	font-size: 2.25em;
	line-height: 1.15;
	bottom: 0;
}

.feature, .project-thumbs .grid-col, .project-blocks .grid-col, .post-thumbs .grid-col, .post-blocks .grid-col {
	margin-bottom: 1.5em;
}
.project-info .description {
  margin-top: -0.25rem;
}
footer li.right {
	float: left;
}
blockquote {
  margin: 0 auto;
  padding: 2em 0 0 2em;
  max-width: 960px;
}
ul.tags-list {
  -webkit-column-count: 3;
  -webkit-column-gap: 1em;
     -moz-column-count: 3;
     -moz-column-gap: 1em;
       -o-column-count: 3;
       -o-column-gap: 1em;
          column-count: 3;
          column-gap: 1em;
}
}



/* Print specific styles
------------------------------------------------------------- */
@media print {
/* Styles */
.print-only {
  display: block;
}
.print-none {
  display: none;
}
.print-header {
  margin-bottom: 2em;
}
* {
	background: transparent !important;
	color: #2E2E33 !important;
}
header, #content, footer {
	padding-left: 0;
	padding-right: 0;
}
#main-nav, .media-container, footer {
  display: none;
}
img {
  max-width: 100%;
}
ul .project-blocks {
  list-style: none;
}
h1, h2, .pagination a, h3, nav li a, .logotype, #hero p, h3.journal-tags-heading, .journal-search form input, .journal-tags li, .info-header h3, .info-header li, blockquote {
	font-size: 18pt;
  line-height: 1.5;
}
h2.thumbnail-title, h3, .project-blocks dt, .project-blocks p, #content p, .project-blocks .tags, .project-blocks .client, .post-blocks dt, .post-blocks p, .post-blocks .tags, .post-blocks .date, footer li {
	font-size: 11pt;
	line-height: 1.5;
}
a {
	color: #666666 !important;
  text-decoration: none !important;
}
p a[href^="http://"]:after {
  font-size: 10pt;
  content: " [" attr(href) "]";
  font-family: monospace;
  word-wrap: break-word;
}
footer a {
	color: #2E2E33 !important;
}
pre {
  font-size: 10pt;
  border: 1pt dashed #666666;
}
}

/*  END  */