/********************************************
	Tag Resets
********************************************/
body,
div,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
th,
td,
article,
aside,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
	margin: 0;
	padding: 0;
	border: 0;
	text-decoration:none;
}
	
/********************************************
	Normalize CSS
********************************************/
html {
	height: 100%;
}

body {
	min-height: 100%;
}


/* ******************************************
	Web Fonts
****************************************** */
@font-face {
    font-family: 'museo_sans_rounded100';
    src: url('../_fonts/museosansrounded-100-webfont.eot');
    src: url('../_fonts/museosansrounded-100-webfont.eot?#iefix') format('embedded-opentype'),
         url('../_fonts/museosansrounded-100-webfont.woff') format('woff'),
         url('../_fonts/museosansrounded-100-webfont.ttf') format('truetype'),
         url('../_fonts/museosansrounded-100-webfont.svg#museo_sans_rounded100') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'museo_sans_rounded300';
    src: url('../_fonts/museosansrounded-300-webfont.eot');
    src: url('../_fonts/museosansrounded-300-webfont.eot?#iefix') format('embedded-opentype'),
         url('../_fonts/museosansrounded-300-webfont.woff') format('woff'),
         url('../_fonts/museosansrounded-300-webfont.ttf') format('truetype'),
         url('../_fonts/museosansrounded-300-webfont.svg#museo_sans_rounded300') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'museo_sans_rounded700';
    src: url('../_fonts/museosansrounded-700-webfont.eot');
    src: url('../_fonts/museosansrounded-700-webfont.eot?#iefix') format('embedded-opentype'),
         url('../_fonts/museosansrounded-700-webfont.woff') format('woff'),
         url('../_fonts/museosansrounded-700-webfont.ttf') format('truetype'),
         url('../_fonts/museosansrounded-700-webfont.svg#museo_sans_rounded700') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* ******************************************
	Typography
	Design based at 14/18 body text 
    Type scale: 1.1 (0.875x1.286 = 1.125)
****************************************** */
html {
	font-size: 100%;
	line-height: 1;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

body {
	font-family: "museo_sans_rounded300", "Helvetica Neue", Helvetica, sans-serif;
	color: #3a3a3b;
}

h1,h2,h3,h4,h5,h6 {
	font-weight: normal;
}

p {
	font-size: 0.875em; /* 14/16 */
	line-height: 1.257; /* 1.1 / .875 */
	margin: 0 0 1.1em;
}

h1 {
	font-family: "museo_sans_rounded100", "Helvetica Neue", Helvetica, sans-serif;
	font-size: 1.313em; /* 1.5x body */
	line-height: 1.257;
	margin: 0 0 .55em;
}

h2 {
	font-family: "museo_sans_rounded700", "Helvetica Neue", Helvetica, sans-serif;
	font-size: 1.059em; /* 2x scale x body */
	line-height: 1.257;
	margin: 0 0 .55em;
}

h3 {
	font-family: "museo_sans_rounded700", "Helvetica Neue", Helvetica, sans-serif;
	font-size: .963em;  /* 1x scale x body */
	line-height: 1.257;
}

h4 {
	font-family: "museo_sans_rounded100", "Helvetica Neue", Helvetica, sans-serif;
	font-size: .875em;
	line-height: 1.257;
}

strong {
	font-family: "museo_sans_rounded700", "Helvetica Neue", Helvetica, sans-serif;
	font-weight: normal;
}

small {
	font-size: .722em; /* body x 3/4 scale */
	line-height: 1.257;
}

/* ******************************************
	BUTTON STYLES
****************************************** */
.btn {
	border-radius: 1.1em;
	cursor: pointer;
	display: inline-block;
	padding: .55em 1.1em;
	text-decoration: none;
}

.btn-default {
	background-color: #635560;
	color: #fff; 
}

.btn-default:hover  { 
	background-color: rgba(99, 85, 96, .8); 
}
	
.btn-default:active { 
	background-color: #544852; 
}

#sidebar .btn-default {
	background-color: #fff;
	color: #635560; 
}
	
#sidebar .btn-default:hover  { 
	background-color: rgba(255, 255, 255, .8); 
}

#sidebar .btn-default:active { 
	background-color: rgba(255, 255, 255, .6); 
}

.btn-link {
	border-radius: 0;
	color: #D7C34A;
	font-family: "museo_sans_rounded700", "Helvetica Neue", Helvetica, sans-serif;
	padding: 0;
}

#greybox .btn-link:after {
	content: " »";
}

#page-contact #greybox .btn-link:after {
	content: "";
}

.btn-link:hover  { 
	color: rgba(207, 196, 65, .8); 
}

.btn-link:active { 
	color: #B2A33B; 
}

#colophon .btn-link {
	color: #635560;
	font-family: "museo_sans_rounded300", "Helvetica Neue", Helvetica, sans-serif;
}

#colophon .btn-link:hover  { 
	color: #3a3a3b; 
}

#colophon .btn-link:active {
	color: #544852; 
}

/* ******************************************
	Custom styles - MOBILE FIRST
****************************************** */
#masthead, 
#content, 
#sidebar, 
#colophon {
	margin: 0 1.1em;
}

#container-content {
	padding: .825em 0 .55em;
}

/* ******************************************
	HEADER
****************************************** */
#container-header {
	background-color: #a4a59a;
}

#masthead {
	position: relative;
}

#artword-logo {
	display: inline-block;
	height: 54px;
	margin: 0 0 0 -85px;
	padding: 6px 6px 12px 6px;
	position: absolute;
	left: 50%;
	width: 182px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
		
#artword-logo a {
	background-image: url(../_png/aw-sprite.png);
	background-image: url(../_svg/aw-sprite.svg), none;
	background-position:0px 0px;	
	display: block;
	height: 36px;
	text-align: left;
	text-indent: -9999em;
	width: 170px; 
}

#artword-logo a:hover { 
	background-position: 0 -36px; 
}	

/* ******************************************
	MAIN NAV
****************************************** */
a.menu-link {
	background-image: url(../_png/aw-sprite.png);
	background-image: url(../_svg/aw-sprite.svg), none;
	background-position:-78px -160px;
	display: block;
	float: right;
	height: 28px;
	margin: 14px 0 12px 0;
	text-decoration: none;
	text-indent: -9999em;
	width: 28px;
}

nav[role=navigation] {
	clear: both;
	-webkit-transition: all 0.3s ease-out;  
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
	display: none;
}

.js nav[role=navigation] {
	overflow: hidden;
	max-height: 0;
	display: inherit;
}

nav[role=navigation].active {
	max-height: 20em;
}

nav[role=navigation] ul {
	margin: 0;
	padding: 0;
	border-top: 1px dotted #fff;
}

nav[role=navigation] li a {
	display: block;
	padding: .825em;
	border-bottom: 1px dotted #fff;
}

nav[role=navigation] li:last-child a {
	border-bottom: none;
}

nav[role=navigation] span {
	display: none;
}

nav ul {
	list-style: none;
}

nav ul li {
	font-family: "museo_sans_rounded300", Helvetica, Arial, sans-serif;
	font-size: .963em;  /* 1x scale x body */
	line-height: 1; /*1.257;*/
	text-align: center;
	text-transform: uppercase;
}

nav ul li a,
nav ul li a:hover {
	color: #fff;
	text-decoration:none;
}

#page-about .section-about, 
#page-diary .section-diary, 
#page-projects .section-projects, 
#page-clients .section-clients, 
#page-testimonials .section-testimonials, 
#page-contact .section-contact {
	font-family: "museo_sans_rounded700", Helvetica, Arial, sans-serif;
}
	
#secondary-nav {
	border-top: none;
	margin: 0 auto;
	width: 114px;
}

#secondary-nav li {
	float: left;
	margin: 12px 6px;
}

#facebook, #twitter, #linkedin {
	background-image: url(../_png/aw-sprite.png);
	background-image: url(../_svg/aw-sprite.svg), none;
	display: block;
	height: 26px;
	padding: 0;
	text-align: left;
	text-indent: -9999em;
	width: 26px;
}

#facebook 		{ background-position: 0 -72px; }
#facebook:hover { background-position: 0 -98px; }
#twitter 		{ background-position:-26px -72px; }
#twitter:hover 	{ background-position:-26px -98px; }
#linkedin 		{ background-position:-52px -72px; }
#linkedin:hover { background-position:-52px -98px; }

/* ******************************************
	FOOTER
****************************************** */
#container-footer {
	padding: .825em 0;
	color:rgba(0, 0, 0, .55);
}

small {
	display: block;
	text-align: center;
}

#designers-credit {
	display: block;
}

/* ******************************************
	HOMEPAGE
****************************************** */
#container-carousel {
	background-color: #e1e6e0;
	height: auto;
	width: 100%;
}

#container-carousel {
	display: none;
}

.js #container-carousel {
	display: inherit;
}

#container-photo, 
.container-photo {
	background-color: #e1e6e0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	height: 216px;
	width: 100%;
}

.container-photo {
	height: 180px;
}

#featuredProjects {
	display: none;
}

.pattern {
	background: #fff;
	overflow: hidden;
}

.c {
	position: relative;
	margin: 0 auto;
}

.c h2, 
.c p {
   margin-bottom: 0;
}

.c-list-container {
	overflow: hidden;
	position: relative;
	z-index: 0;
}

.c-list {
	width: 99999em;
	position: relative;
	left: 0;
}

.c-list.animating {
	 -webkit-transition: left 0.25s ease-out; 
	-moz-transition: left 0.25s ease-out;  
	-o-transition: left 0.25s ease-out; 
	transition: left 0.25s ease-out;
}

.c ul {
	list-style: none;
}

.c li {
	float: left;
	position: relative;
}

.c li a {
	display: block;
	text-decoration: none;
	color: #808080;
}

.c img {
	display: block;
	width: 100%;
}

.c h2 {
	margin-top: 0;
}

.summary {
	background:#d1c141;
	color: #fff;
	padding: .825em 1.375em;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.c-nav {
	clear: both;
	overflow: hidden;
}

.c-nav a {
	position: absolute;
	top: 20%;
	left: .275em;
	padding: 0;
	-webkit-transition: opacity 0.5s ease-out; 
	-moz-transition: opacity 0.5s ease-out;  
	-o-transition: opacity 0.5s ease-out; 
	transition: opacity 0.5s ease-out;
	text-decoration: none;
	color: #fff;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 3em;
	line-height: 0;
	background-color: rgba(0, 0, 0, .3);
	padding: 15px 10px 10px 10px;
	border-radius: 50px;
	width: 36px;
	height: 36px;
	box-shadow: 0 0 5px 3px rgba(255, 255, 255, .6);
}

.c-nav a.next {
	text-align: right;
	left: auto;
	right: .275em;
}

.c-nav a.inactive {
	opacity: 0.2;
	
}
#container-sidebar {
	background-color: #635560;	
	color: rgba(255,255,255,.75);
	margin: 0 -1.1em;
	padding: .825em 0 .55em;
}

#container-sidebar h2, 
#container-sidebar h3 {
	color: #fff;
}

#sidebar article {
	height: 4.4em;
	margin-bottom: 1.1em;
	overflow: hidden;
	text-overflow: ellipsis;
}

#sidebar figure {
	float: left;
	margin-right: 1.1em;
}

#sidebar img {
	height: 72px;
	width: 72px;
}
#sidebar article div div {
	float: left;
	margin-right: 1.1em;
	height: 72px;
	width: 72px;
	background-size: cover;
}

#sidebar article p {
	overflow : hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* ******************************************
	DIARY + FILM AND RADIO
****************************************** */
#page-diary article,
#page-projects-film-radio article {
	border-bottom:1px dotted #3a3a3b;
	margin-bottom: 1.1em;
	padding: 0 0 .55em;
}

#page-diary ul > li:first-child article,
#page-projects-film-radio ul > li:first-child article {
	border-top: 1px dotted #3a3a3b;
	padding-top: 1.1em;
}

#page-diary article div p:first-of-type {
	margin-top: 1.1em;
}

#page-diary figure {
	float: right;
	margin-left: 1.1em;
}

#page-diary img {
	height: 72px;
	width: 72px;
}

/* ******************************************
	PROJECTS
****************************************** */
#projects-list, 
#projects-list ul {
	list-style: none;
}

#projects-list {
	margin: 1.1em 0;
}

#projects-list li li {
	font-size: .963em;  /* same as h3 */
	line-height: 1.257;
}

#projects-list a {
	color: #3a3a3b;
	text-decoration: none;
}

#projects-list a:hover {
	color: rgba(58, 58, 58, .77);
}

.column {
	float: left;
	width:50%;
}

.year {
	border-bottom: 1px dotted #3a3a3b;
}

.section-projects ul > li:first-child .year {
	border-top: 1px dotted #3a3a3b;
}

.year > h2 {
	margin: .55em 0;
	cursor: pointer;
}

.year article h2 {
	margin-top: 1.1em;
}

.year article:last-child {
	padding-bottom: .55em;
}

.year h4 {
	font-family: "museo_sans_rounded700", "Helvetica Neue", Helvetica, sans-serif;
	margin: 0 1.1em;
}

.year p {
	margin: 0 1.1em 1.1em;
}

#back {
	margin-top: 1.1em;
}

#page-projects-film-radio h2,
#page-projects-books h2 {
	margin: 0;
}

#page-projects-film-radio iframe {
	max-width: 100%;
	margin-bottom: .55em;
}

/* ******************************************
	PROJECTS OVERVIEW
****************************************** */

/*.grid-item {
	width: 33.33333%;
	margin-bottom: 1em;
	min-height: 220px;
	float: left;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display: block;
}*/

/*.grid-item:nth-of-type(3n+1) {padding-right:1%;}
.grid-item:nth-of-type(3n+2) {padding:0 .5%;}
.grid-item:nth-of-type(3n+3) {padding-left:1%;}
.grid-item img {width:100%; height:auto; margin:0;}
.grid-item:nth-of-type(3n+4) {clear:left;}*/

.grid-item {
	width: 49%;
	margin-bottom: 1em;
	min-height: 220px;
	float: left;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display: block;
}
.grid-item:nth-of-type(2n+1) {padding-right:1%;}
.grid-item:nth-of-type(2n+2) {padding-left:1%;}
.grid-item img {width:100%; height:auto; margin:0;}
.grid-item:nth-of-type(2n+3) {clear:left;}

/*div.grid-item-last {
	clear: right;
}*/

#page-projects #greybox {
	padding: 0;
}

/*#page-projects #greybox img {
    width: 100%;
    height: auto;
}*/

/* ******************************************
	CLIENTS
****************************************** */
.clients ul ul {
	list-style: none;
	margin-bottom: 1.1em;
}
.clients li li {
	font-size: 0.875em; /* same as p */
	line-height: 1.257;
	margin: .275em 0;
}

/* ******************************************
	TESTIMONIALS
****************************************** */
#page-testimonials section {
	padding-bottom: 1.1em;
}

#page-testimonials h2 + p {
	padding-top: .55em;
}

#page-testimonials p { /*quotes same as h3 size*/
	margin: 0 1.1em 1.1em;
}

/* ******************************************
	CONTACT
****************************************** */
ol {
	font-size: 0.875em; /* 14/16 */
	line-height: 1.286; /* 18/14 */
}

form, fieldset {
	border: 0;
	padding: 0;
	margin: 0;
}

form ol {
	list-style: none;
	margin: 1.1em 0;
	padding: 0;
}

form li {
	margin: 0 0 1.1em;
}

input, textarea {
	background: #e1e6e0;
	width: 100%;
	padding: .55em;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border: none;
}

button {
	border: none;
}

textarea {
	height: 5.5em;
}

input:focus, textarea:focus {
	background: #e1e6e0;
}

/* ******************************************
	UTILITIES
****************************************** */
.hidden, 
.autohide,
.desktop-only,
.tablet-landscape-only { 
	display: none; 
}

.success {
	color: #635560;
	font-family: "museo_sans_rounded700", "Helvetica Neue", Helvetica, sans-serif;
}

/* Float Clearing http://nicolasgallagher.com/micro-clearfix-hack */
.group:after {
    content: " "; /* 1 */
    display: table; /* 2 */
    clear: both;
}

.group {
	*zoom: 1; /* 3 */
}

/*Cushy fixes*/
ul.cushycms {
	list-style: none;
}
	
/* ******************************************
	IMAGES
****************************************** */
/*NON RETINA SMARTPHONE IMAGES*/
@media only screen and (max-width: 48em) and (-webkit-min-device-pixel-ratio: 1),
	only screen and (max-width: 48em) and (min-resolution: 96dpi), 
	only screen and (max-device-width: 320px) and (-webkit-min-device-pixel-ratio: 1),
	only screen and (max-device-width: 320px) and (min-resolution: 96dpi) {
	
	#slide-1 { background-image:url(../_jpg/header-home-audio@1x.jpg); background-position: right; }
	#slide-2 { background-image:url(../_jpg/header-home-multimedia@1x.jpg); }
	#slide-3 { background-image:url(../_jpg/header-home-films@1x.jpg); background-position: left; }
	#slide-4 { background-image:url(../_jpg/header-home-books@1x.jpg); }
	#slide-new { background-image:url(../_jpg/header-home-magnum@1x.jpg); }
	
	#page-about #container-photo { background-image:url(../_jpg/header-about@1x.jpg); }
	#page-projects #container-photo { background-image:url(../_jpg/header-projects@1x.jpg); }
	#page-clients #container-photo { background-image:url(../_jpg/header-clients@1x.jpg); }
	
	#page-projects-audio-uk #container-photo { background-image:url(../_jpg/header-audio-uk@1x.jpg); background-position: left; }
	#page-projects-audio-abu-dhabi #container-photo { background-image:url(../_jpg/header-audio-abu-dhabi@1x.jpg); background-position: left; }
	#page-projects-audio-benelux #container-photo { background-image:url(../_jpg/header-audio-benelux@1x.jpg); }
	#page-projects-audio-italy #container-photo { background-image:url(../_jpg/header-audio-italy@1x.jpg); background-position: left;}
	#page-projects-audio-singapore #container-photo { background-image:url(../_jpg/header-audio-singapore@1x.jpg); background-position: right; }
	#page-projects-audio-other #container-photo { background-image:url(../_jpg/header-audio-other@1x.jpg); }
	
	#page-projects-multimedia #container-photo { background-image:url(../_jpg/header-multimedia@1x.jpg); }
	#page-projects-books #container-photo { background-image:url(../_jpg/header-books@1x.jpg); }
	#page-projects-other #container-photo { background-image:url(../_jpg/header-other-projects@1x.jpg); }
	
}

/*RETINA SMARTPHONE IMAGES*/
@media only screen and (max-width: 48em) and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (max-width: 48em) and (min-resolution: 144dpi), 
	only screen and (max-device-width: 320px) and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (max-device-width: 320px) and (min-resolution: 144dpi) {
		
	#slide-1 { background-image:url(../_jpg/header-home-audio@2x.jpg); background-position: right; }
	#slide-2 { background-image:url(../_jpg/header-home-multimedia@2x.jpg); }
	#slide-3 { background-image:url(../_jpg/header-home-films@2x.jpg); background-position: left; }
	#slide-4 { background-image:url(../_jpg/header-home-books@2x.jpg); }
	#slide-new { background-image:url(../_jpg/header-home-magnum@2x.jpg); }
	
	#page-about #container-photo { background-image:url(../_jpg/header-about@2x.jpg); }
	#page-projects #container-photo { background-image:url(../_jpg/header-projects@2x.jpg); }
	#page-clients #container-photo { background-image:url(../_jpg/header-clients@2x.jpg); }
	
	#page-projects-audio-uk #container-photo { background-image:url(../_jpg/header-audio-uk@2x.jpg); background-position: left; }
	#page-projects-audio-abu-dhabi #container-photo { background-image:url(../_jpg/header-audio-abu-dhabi@2x.jpg); background-position: left; }
	#page-projects-audio-benelux #container-photo { background-image:url(../_jpg/header-audio-benelux@2x.jpg); }
	#page-projects-audio-italy #container-photo { background-image:url(../_jpg/header-audio-italy@2x.jpg); background-position: left;}
	#page-projects-audio-singapore #container-photo { background-image:url(../_jpg/header-audio-singapore@2x.jpg); background-position: right; }
	#page-projects-audio-other #container-photo { background-image:url(../_jpg/header-audio-other@2x.jpg); }
	
	#page-projects-multimedia #container-photo { background-image:url(../_jpg/header-multimedia@2x.jpg); }
	#page-projects-books #container-photo { background-image:url(../_jpg/header-books@2x.jpg); }
	#page-projects-other #container-photo { background-image:url(../_jpg/header-other-projects@2x.jpg); }
}

/*NON RETINA TABLET IMAGES*/
@media only screen and (min-width: 48em) and (-webkit-min-device-pixel-ratio: 1),
	   only screen and (min-width: 48em) and (min-resolution: 96dpi) {
	
	#slide-1 { background-image:url(../_jpg/slide-home-audio@1x.jpg); }
	#slide-2 { background-image:url(../_jpg/slide-home-multimedia@1x.jpg); }
	#slide-3 { background-image:url(../_jpg/slide-home-films@1x.jpg); }
	#slide-4 { background-image:url(../_jpg/slide-home-books@1x.jpg);}
	#slide-new { background-image:url(../_jpg/slide-home-magnum@1x.jpg); }
	
	#page-about .sidebar-pic { background-image:url(../_jpg/sidepic-about@1x.jpg); }
	#page-clients .sidebar-pic { background-image:url(../_jpg/sidepic-clients@1x.jpg); }
	#page-projects .sidebar-pic { background-image:url(../_jpg/sidepic-projects@1x.jpg); }
	
	#page-projects-audio-uk .sidebar-pic 		{ background-image:url(../_jpg/sidepic-audio-uk@1x.jpg); }
	#page-projects-audio-abu-dhabi .sidebar-pic { background-image:url(../_jpg/sidepic-audio-abu-dhabi@1x.jpg); }
	#page-projects-audio-benelux .sidebar-pic 	{ background-image:url(../_jpg/sidepic-audio-benelux@1x.jpg); }
	#page-projects-audio-italy .sidebar-pic 	{ background-image:url(../_jpg/sidepic-audio-italy@1x.jpg); }
	#page-projects-audio-singapore .sidebar-pic { background-image:url(../_jpg/sidepic-audio-singapore@1x.jpg); }
	#page-projects-audio-other .sidebar-pic 	{ background-image:url(../_jpg/sidepic-audio-other@1x.jpg); }
	
	#page-projects-multimedia .sidebar-pic { background-image:url(../_jpg/sidepic-multimedia@1x.jpg); }
	#page-projects-books .sidebar-pic { background-image:url(../_jpg/sidepic-books@1x.jpg); }
	#page-projects-other .sidebar-pic { background-image:url(../_jpg/sidepic-other-projects@1x.jpg);}
	
	.first  { background-image: url(../_jpg/header-thumb-1@1x.jpg); }
	.second { background-image: url(../_jpg/header-thumb-2@1x.jpg); }
	.third  { background-image: url(../_jpg/header-thumb-3@1x.jpg); }
	.fourth { background-image: url(../_jpg/header-thumb-4@1x.jpg); }
}

/*RETINA TABLET IMAGES*/
@media only screen and (min-width: 48em) and (-webkit-min-device-pixel-ratio: 1.5),
	   only screen and (min-width: 48em) and (min-resolution: 144dpi) {
	
	#slide-1 { background-image:url(../_jpg/slide-home-audio@2x.jpg); }
	#slide-2 { background-image:url(../_jpg/slide-home-multimedia@2x.jpg); }
	#slide-3 { background-image:url(../_jpg/slide-home-films@1x.jpg); }
	#slide-4 { background-image:url(../_jpg/slide-home-books@2x.jpg);}
	#slide-new { background-image:url(../_jpg/slide-home-magnum@2x.jpg); }
	
	#page-about .sidebar-pic { background-image:url(../_jpg/sidepic-about@2x.jpg); }
	#page-clients .sidebar-pic { background-image:url(../_jpg/sidepic-clients@2x.jpg); }
	#page-projects .sidebar-pic { background-image:url(../_jpg/sidepic-projects@2x.jpg); }
	
	#page-projects-audio-uk .sidebar-pic 		{ background-image:url(../_jpg/sidepic-audio-uk@2x.jpg); }
	#page-projects-audio-abu-dhabi .sidebar-pic { background-image:url(../_jpg/sidepic-audio-abu-dhabi@2x.jpg); }
	#page-projects-audio-benelux .sidebar-pic 	{ background-image:url(../_jpg/sidepic-audio-benelux@2x.jpg); }
	#page-projects-audio-italy .sidebar-pic 	{ background-image:url(../_jpg/sidepic-audio-italy@2x.jpg); }
	#page-projects-audio-singapore .sidebar-pic { background-image:url(../_jpg/sidepic-audio-singapore@2x.jpg); }
	#page-projects-audio-other .sidebar-pic 	{ background-image:url(../_jpg/sidepic-audio-other@2x.jpg); }
	
	#page-projects-multimedia .sidebar-pic { background-image:url(../_jpg/sidepic-multimedia@2x.jpg); }
	#page-projects-books .sidebar-pic { background-image:url(../_jpg/sidepic-books@2x.jpg); }
	#page-projects-other .sidebar-pic { background-image:url(../_jpg/sidepic-other-projects@2x.jpg);}
	
	.first  { background-image: url(../_jpg/header-thumb-1@2x.jpg); }
	.second { background-image: url(../_jpg/header-thumb-2@2x.jpg); }
	.third  { background-image: url(../_jpg/header-thumb-3@2x.jpg); }
	.fourth { background-image: url(../_jpg/header-thumb-4@2x.jpg); }
}

/* Medium */
/* Conditional CSS http://adactio.com/journal/5429/ */
/*@media screen and (min-width: 35em) {
	body:after { 
		content: 'medium';
		display: none;
	}
}*/


/* Large */
/* Conditional CSS http://adactio.com/journal/5429/ */
/*@media screen and (min-width: 64em) {
	body:after { 
		content: 'large';
		display: none;
	}
}*/

/* ******************************************
	Media Queries for screen wider than 48em (768px) - STYLES CASCADE {I DON'T REPEAT DECLARATIONS THAT REMAIN THE SAME}
****************************************** */

@media screen and (min-width: 48em) {

	#content, 
	#colophon {
		margin: 0 1.1em;
	}
	
	#carousel {
		margin: 0 auto;
		width: 100%;
	}
	
	#sidebar { 
		margin: 0 .55em; 
	}
	
	#container-content {
		padding: 0 0 .55em;
	}
	
	.wrapper {
		padding: 0 .55em;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	/* IE 7 and below, legacy browser style fixes */
	.ie .wrapper {
		*behavior: url("http://artword.co.uk/_javascript/boxsizing.htc");
	}
	
	/* ******************************************
	 PORTRAIT IPAD HEADER + MAIN NAV
	****************************************** */
	#masthead {
		margin: 0 auto;
		padding: 0;
		max-width: 624px;
		width: 89.453%; /* 687 / 768 */
	}
	
	#header-thumbs {
		height: 63px;
		list-style: none;
		margin: 0 auto;
		max-width: 624px;
		width: 100%;
	}
	
	#header-thumbs div {
		float: left;
		margin-right: 1%;
		width: 24.25%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	#header-thumbs div:last-child {
		margin-right: 0;
	}
	
	.thumb {
		background-position: center;
		background-size: cover;
		height: 63px;
		width: 100%;
		position: relative;
	}
	
	#header-thumbs .stripe {
		background-color: #D7C34A;
		width: 25px;
		height: 100%;
		position: absolute;
		right: 0;
	}
	
	#artword-logo {
		display: block;
		margin: 0 auto;
		padding: 6px 0 12px .55em;
		position: relative;
		left: 0%;
		max-width: 687px;
		width: 100%;
	}
	
	a.menu-link {
	   display: none;
	}
	
	nav[role=navigation] {
		float: none;
		-webkit-transition-property: none;
		-moz-transition-property: none;
		-ms-transition-property: none;
		-o-transition-property: none;
		transition-property: none;
		padding: 0;
		width: 100%;
		display: inherit;
	}
	
	.js nav[role=navigation] {
		max-height: none;
	}
	
	nav[role=navigation] ul {
		margin: 0 0 0 0.275em;
		border: 0;
	}
	
	nav[role=navigation]  li {
		display: inline-block;
		margin: 0 0.4em 0 0;
	}
	
	nav[role=navigation] li a {
		border: 0;
	}
	
	nav[role=navigation] > ul > li:last-child {
		margin: 0 0.25em;
		position: absolute;
		top: 78px;
		right: 0;
		width: 114px;
	}
	
	#secondary-nav {
		width: auto;
		margin: 0 .55em;
	}
	
	#secondary-nav li {
		margin: 0 0 0 6px;
	}
	
	nav ul li a:hover {
		color: rgba(255, 255, 255, .77);
	}
	
	/*** FOOTER ***/
	#container-footer {
		padding: .275em 0 .825em;
	}
	
	small {
		margin: 0 auto;
		max-width: 624px;
		width: 100%;
		padding: 0 1.1em;
		text-align: left;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	#designers-credit {
		float: right;
	}
	
	/*** HOMEPAGE ***/
	#page-homepage .container-photo {
		background-color: #e1e6e0;
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		height: 250px;
		width: 100%;
		margin: 0;
		position: static;
	}
	
	.c li a {
		width: inherit;
		display: block;
	}
	
	.summary {
		display: block;
		position: absolute;
		bottom: .825em;
		left: -50%;
		z-index: 2;
		width: 624px;
		margin-left: -312px;
	}
	
	.c-nav a {
		top: 50%;
		margin-top: -1em;
	}
	
	.c-nav a.next {
		border: 0;
	}
	
	#container-services {
		float: left;
		width: 100%;
	}
	
	#greybox {
		background-color: #E1E6E0;
		margin:0 auto;
		width: 100%; /*89.453%; /* 687 / 768 */
		max-width: 624px; /*687px; */
		padding: 1.1em 217px 1.1em 1.1em;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		position: relative;
		min-height: 414px;
	}
	
	#projects #greybox {
		padding: 1.1em; 
	}
	
	.grid-item {
		/*width: 30%;*/
		min-height: 320px;
	}
	
	#container-sidebar {
		width: 220px; /*22.222%;*/
		float: left;
		margin: 1.1em 0;
		margin-left: -32%;/*-314px; /*314/1110*/
		position: relative;
		z-index: 1;
	}
	
	#sidebar article {
		height: auto;
		margin-bottom: 1.1em;
		overflow: visible;
	}
	
	#sidebar figure {
		display: none;
	}

	#sidebar article div div {
		display: none;
	}
	
	#sidebar article p {	
		-webkit-line-clamp: 4;
	}
	
	/*** INTERNAL PAGES ***/
	.sidebar-pic {
		height: 368px;
		width: 218px;
		position: absolute;
		background-size: cover;
		top: 18px;
		left: 72.635%; /*499/687*/
	}
	
	#page-diary #greybox {
		padding: 1.1em;
	}
	
	#page-diary img {
		height: 152px;
		width: 152px;
	}
	
	.year {
		padding: 0 .55em;
	}
	
	.year > h2:hover {
		color: rgba(58, 58, 58, .77);
	}
	
	#page-projects-film-radio iframe {
		max-width: none;
	}
	
	input, textarea,
	input:focus, textarea:focus {
		background: #fff;
	}
	
	/*** UTILITIES ***/
	.hidden 				{ display: inherit; }
	.smartphone-only 		{ display: none; }
	.desktop-only 			{ display: inherit; }
	.tablet-portrait-only 	{ display: inline-block; }
	
	.grid-item {
		width: 33.33333%;
		margin-bottom: 1em;
		min-height: 220px;
		float: left;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		display: block;
	}

	/*reset mobile styles*/
	.grid-item:nth-of-type(2n+1) {padding:0;}
	.grid-item:nth-of-type(2n+2) {padding:0;}
	.grid-item:nth-of-type(2n+3) {clear:none;}
	
	.grid-item:nth-of-type(3n+1) {padding-right:1%;}
	.grid-item:nth-of-type(3n+2) {padding:0 .5%;}
	.grid-item:nth-of-type(3n+3) {padding-left:1%;}
	.grid-item img {width:100%; height:auto; margin:0;}
	.grid-item:nth-of-type(3n+4) {clear:left;}
	
}



/* ******************************************
	Media Queries for screen wider than 64em (1024px)
****************************************** */

@media screen and (min-width: 64em) {
	
	#masthead, 
	#carousel, 
	#content,
	#colophon {
		margin: 0 auto;
		max-width: 70em;
	}
	
	/* ******************************************
	 DESKTOP IPAD HEADER + MAIN NAV + SIDENAV
	****************************************** */
	
	#masthead {
		width: auto;
	}
	
	#header-thumbs {
		height: 72px;
		margin-left: 25.405%; /* 282 / 1110*/
		width: 61.892%; /* 687 / 1110 */
		max-width: none;
	}
	
	.thumb {
		height: 72px;
	}
	
	#artword-logo {
		display: inline-block;
		margin: 0;
		margin-top: -10px;
		position: absolute;
		left: 0%;
		width: 23.784%; /* 264 / 1110 */
	}
	
	#artword-logo a {
		float: right;
	}
	
	nav[role=navigation] {
		float: right;
		margin-top: -10px;
		padding-top: .825em;
		width: 74.595%; /* 828 / 1110 */
	}
	
	nav[role=navigation]  li {
		margin: 0 0.25em 0;
	}
	
	nav[role=navigation] > ul > li:last-child {
		top: 78px;
	}
	
	#secondary-nav li {
		float: left;
	}
	
	#secondary-nav {
		float: right;
	}
	
	.section-projects .section-projects {
		font-family: "museo_sans_rounded700", "Helvetica Neue", Helvetica, sans-serif;
	}
	
	#sidenav {
		float: left;
		width: 23.784%; /* 264 / 1110 */
		text-align: right;
	}
	
	#sidenav > ul {
		width: 50%; /*66.666%; /*176 / 264*/
		float: right;
		padding-right: .275em;
	}
	
	#sidenav ul ul ul {
		padding-left: .55em;
		padding-bottom: 1.1em;
	}
	
	#sidenav .fixed {
		position: fixed;
		width: 130px;
	}
	
	.section-projects-audio-uk .section-projects-audio-uk,
	.section-projects-audio-uk .section-projects-audio-uk:hover,
	.section-projects-audio-italy .section-projects-audio-italy,
	.section-projects-audio-italy .section-projects-audio-italy:hover,
	.section-projects-audio-benelux .section-projects-audio-benelux,
	.section-projects-audio-benelux .section-projects-audio-benelux:hover,
	.section-projects-audio-singapore .section-projects-audio-singapore,
	.section-projects-audio-singapore .section-projects-audio-singapore:hover,
	.section-projects-audio-abu-dhabi .section-projects-audio-abu-dhabi,
	.section-projects-audio-abu-dhabi .section-projects-audio-abu-dhabi:hover,
	.section-projects-audio-other .section-projects-audio-other,
	.section-projects-audio-other .section-projects-audio-other:hover,
	.section-projects-multimedia .section-projects-multimedia,
	.section-projects-multimedia .section-projects-multimedia:hover,
	.section-projects-film-radio .section-projects-film-radio,
	.section-projects-film-radio .section-projects-film-radio:hover,
	.section-projects-books .section-projects-books,
	.section-projects-books .section-projects-books:hover,
	.section-projects-other .section-projects-other,
	.section-projects-other .section-projects-other:hover {
		color: #D7C34A !important;
		font-family: "museo_sans_rounded700", "Helvetica Neue", Helvetica, sans-serif;
	}
	
	/*** HOMEPAGE ***/
	#container-carousel {
		/*height: 300px;*/
	}
	
	#page-homepage .container-photo {
		height: 300px;
		background-size: cover;
	}
	
	.summary {
		left: 25.405%; /* 282 / 1110*/
		width: 61.892%; /* 687 / 1110 */
		max-width: 687px;
		margin-left: 0;
	}
	
	#greybox {
		margin-left: 25.405%; /* 282 / 1110*/
		width: 61.892%; /* 687 / 1110 */
		max-width: 687px;
		padding: 1.1em 19.550% 1.1em 1.1em; /* 217 /1110 */
	}
	
	#page-projects #greybox {
		padding: 1.1em;
	}
	
	/*div.grid-item {
		width: 30%;
	}*/
	
	#services h1 {
		width: 240px;
		text-align: right;
		position: absolute;
		left: -258px;
	}
	
	#container-sidebar {
		margin-left: -28.288%;/*-314px; /*314/1110*/
	}	
	
	small {
		margin-left: 25.405%; /* 282 / 1110*/
		max-width: 687px;
		width: 61.892%; /* 687 / 1110 */
	}
	
	#sidebar article p {
		display: inherit;
	}
	
	/*** INTERNAL PAGES ***/
	.sidebar-pic {
		left: 75.255%; /*517/687*/
	}
	
	/*** UTILITIES ***/
	.hidden 				{ display: inherit; }
	.smartphone-only 		{ display: none; }
	.tablet-portrait-only 	{ display: none; }
	.tablet-landscape-only 	{ display: inherit; }

}

@media screen and (min-width: 1110px) {
	#page-homepage .container-photo {
		background-size: contain;
	}
}

/* ******************************************
	Print style sheet
****************************************** */

@media print and (max-width: 8.5in){
	
	body {      
		color: #000;
		background: #fff;   
	}
	
	#container-header {
		background-color: #fff;
		height: 100px; 
	}
	
	#artword-logo {
		left: 0;
		margin: 0;
		padding: 0;
		width: 100%;
	}
	
	#artword-logo a {
		background-image: none;
		text-indent: 0;
		font-size: 2.626em;
		margin: 0;
		text-decoration: none;
		color: #000;
	}
	
	#artword-logo:after {      
		content:url(https://chart.googleapis.com/chart?cht=qr&chs=100x100&chl=http://artword.co.uk&choe=UTF-8);      
		position: absolute;      
		right: 0;      
		top: 0;   
	}
	
	a.menu-link {
		height: auto;
		margin: 0;
	}
	
	#pattern, #container-photo {
		display: none;
	}
	
	#greybox {
		float: left;
		width: 70%;
	}
	
	.btn-link {
		color: #000;
	}
	
	#sidebar {
		display: none;
	}
	#read-more, #back {
		display: none;
	}
	
	.hidden {
		display: inherit;
	}
	
	footer {
		clear: both;
		padding-top: 2em;
	}
	
	small {
		text-align: left;
	}
	
	a[href^=http]:after {      
		content:" <" attr(href) "> ";   
	}
	
}