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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, figure {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-family: inherit;
	vertical-align: baseline; 
}
img {
	float: left;
	max-width: 100%;
	height: auto;
}	
/* remember to define focus styles! */
:focus {
	outline: 0; 
}
body {
 	background-color: #FFF;
 	color: #5E7782; 
 	font-family: 'Roboto', helvetica, arial, sans-serif;
 	font-weight: 300;
 	font-size: 13px;
 }
.wrapper {
 	margin: 0px auto;
 	width: 1080px;
 	clear: both;
 }
.hidden {
	position:absolute;
	left:0px;
	top:-500px;
	width:1px;
	height:1px;
	overflow:hidden; 
}
h1, h2, h3 {
	font-weight: 400;
	padding-bottom: 10px;
	font-size: 17px;
}
h1 {
	text-transform: uppercase;
	padding-bottom: 20px;
}
p {
	padding-bottom: 10px;
	line-height: 24px;
}
strong {
	font-weight: 600;
}
em {
	font-style: italic;
}
a:link,
a:visited {
	color: #5E7782;
}
a:hover,
a:active {
	color: #637983;
}

/* ---------------- general --------------- */

header {
	width: 100%;
	height: 74px;
	position: fixed;
	z-index: 10000;
	padding-top: 25px;
	background-color: #fff;
	border: 1px solid #C0C0C0;
}
img#logo {
	position: absolute;
	margin-top: 4px;
}
#content {
	width: 100%;
	float: left;
	margin: 100px 0 50px;
	background: #fff url('resources/grad.png') top left repeat-x;
}
#reflection {
	width: 1080px;
	height: 48px;
	padding: 10px 0 0;
	margin: 0 auto;
	background: url('resources/navref.png') top right no-repeat;
}
ul#breadcrumb {
	list-style: none;
	font-size: 12px;
	width: 100%;
	float: left;
	margin-bottom: 20px;
}
ul#breadcrumb li {
	width: auto;
	display: inline;
	padding-right: 20px;
	margin-right: 8px;
	background: url('resources/breadcrumb.png') center right no-repeat;
}
ul#breadcrumb li:last-of-type {
	background: none;
}
.lefttwothirds {
	width: 705px;
	float: left;
}
.righttwothirds {
	width: 705px;
	float: right;
}

.righttwothirds h1 {
	font-size: 28px;
	line-height: 32px;
	margin: 24px 0 12px;
}

.righttwothirds ul {
	margin-left: 20px;
	margin-bottom: 10px;
}

.righttwothirds li {
	list-style: disc;
	font-size: 14px;
	line-height: 24px;
}

.rightthird {
	width: 330px;
	float: right;
}
.leftthird {
	width: 330px;
	float: left;
	margin-right: 45px;
}
a:link.button,
a:visited.button {
	width: auto;
	float: right;
	color: #FFF;
	text-transform: uppercase;
	text-decoration: none;
	height: 32px;
	line-height: 32px;
	padding: 0 40px 0 10px;
	background: #5E7782 url('resources/right-arrow.png') bottom right no-repeat;
	margin-bottom: 15px;
}
a:hover.button,
a:active.button {
	background-color: #637983;
}
ul.info,
ul.info li ul {
	padding: 5px 0 15px 20px;
	line-height: 20px;
}
ul.info li {
	padding-bottom: 5px;
}
div.cookie_banner{width:100%;position:fixed;bottom:0;left: 0;z-index:20000;background-color:#f5f5f5;text-align: center;padding:10px 0;}div.cookie_banner #cookie_text{width:980px;font-size:13px;margin:0 auto;padding:10px 0;}button.consent{width:100px;border: 0;padding: 5px;background-color:#637983;margin: 0 auto;display:block;color:#fff;}div.cookie_banner a{color:#637983;text-decoration:underline}
.learn_more {
	cursor: pointer;
	outline: 0;
	border: 0;
	color: #FFF;
	padding: 3px 5px !important;
	background-color: #637983;
	text-decoration: underline;
	padding: 0;
	font-size: 14px;
	line-height: 18px;
	font-weight: bold;
	
}

/* ---------------- navigation --------------- */

nav {
	width: auto;
	float: right;
}
nav ul#nav {
	text-align: right;
	list-style: none;
	text-transform: uppercase;
	font-size: 15px;
	height: 65px;
	line-height: 37px;
	width: 750px;
	margin-top: 35px;
	float: right;
}
nav ul#nav li {
	display: inline-block;
	padding-left: 19px;
}
nav ul#nav li a:link,
nav ul#nav li a:visited {
	color: #5E7782;
	text-decoration: none;
	padding: 7px 0;
	height: 37px;
}
nav ul#nav li a:hover,
nav ul#nav li a:active,
nav ul#nav li a#current {
	background: url('resources/pye.png') center center no-repeat;
}
nav ul#nav li:first-of-type {
	padding: 0;
}
nav ul#nav li ul {
	margin: 5px 0 0 0;
	padding: 0 10px;
	width: 110px;
	text-align: left;
	position: absolute;
	z-index: 2000;
	visibility: hidden;
	background-color: #FFF;
	color: #5E7782;
	border: 1px solid #d2dce1;}

nav ul#nav li ul li {
	float: none;
	width: 90px;
	height: auto;
	display: block;
	line-height: 16px;
	padding: 8px 10px;
	margin: 0;
	border-bottom: 1px solid #d2dce1;
}
nav ul#nav li ul li:first-of-type {
	padding: 8px 10px;
}
nav ul#nav li ul li a:link,
nav ul#nav li ul li a:visited {
	background-image: none;
	padding: 5px 0;
	line-height: 16px;
	height: auto;
}	
nav ul#nav li ul li:last-of-type {
	border: 0;
}
img#nav {
	float: right;
	margin-top: 10px;
}

/* ---------------- slideshow --------------- */

#slideshow {
	width: 100%;
	height: 650px;
	position: static;
	float: left;
	left: 0;
	padding-bottom: 75px;
}
/* ul.bxslider {
	width: 100%;
	float: left;	
}
ul.bxslider li {
	width: 100%;
	float: left;
	height: 650px;
} */
ul.bxslider li p {
	line-height: 22px;
}
p.stitle {
	font-size: 18px;
	padding-top: 15px;
	width: 100%;
	float: left;
}
p.stitle a {
	text-decoration: none;
} 

/* ---------------- about --------------- */

#bio {
	width: 540px;
	float: right;
}
a:link#insp,
a:visited#insp {
	background: url('resources/inspiration.jpg') top left no-repeat,
	#f7f8f9 url('resources/right-arrow.png') bottom right no-repeat;
}
a:link#rev,
a:visited#rev {
	background: url('resources/reviews.jpg') top left no-repeat,
	#f7f8f9 url('resources/right-arrow.png') bottom right no-repeat;
}
a:link#ess,
a:visited#ess {
	background: url('resources/essays.jpg') top left no-repeat,
	#f7f8f9 url('resources/right-arrow.png') bottom right no-repeat;
}
a:link.ab,
a:visited.ab{
	width: 280px;
	height: 32px;
	line-height: 32px;
	padding: 185px 40px 0 10px;
	float: left;
	color: #5E7782;
	text-align: right;
	text-transform: uppercase;
	text-decoration: none;
	margin-bottom: 45px;
}
a:hover.ab,
a:active.ab {
	background-color: #637983;
}

/* ---------------- gallery --------------- */

ul.gal {
	width: 100%;
	float: left;
	list-style: none;
}
ul.gal li {
	width: auto;
	float: left;
	margin-right: 20px;
	margin-bottom: 20px;
}
ul.gal li img {
	height: 100px;
}
li#top {
	margin-right: 0;
	margin-bottom: 45px;
	width: 100%;
}
li#top img {
	height: auto;
}
ul.work li {
	height: 220px;
}
ul.work li img {
	height: auto;
}
ul.work li a:link {
	text-decoration: none;
}
.comp {
	padding-top: 20px;
	border-top: 1px solid #d9dfe2;
}
.wip {
	width: 100%;
	float: left;
	border-bottom: 1px solid #d9dfe2;
	clear: both;
	padding: 20px 0 0;
}
.wip:first-of-type {
	border-top: 1px solid #d9dfe2;
}
.wip:last-of-type {
	border: 0;
}

/* ---------------- videos, reviews --------------- */
ul#details {
	width: 100%;
	float: left;
	list-style: none;
}
ul#details li {
	width: 517px;
	float: left;
	margin-bottom: 45px;
}
ul#details li:nth-of-type(odd) {
	margin-right: 45px;
}
.det {
	width: 285px;
	float: right;
}
p.title {
	font-weight: 400;
}
p.title a:link {
	text-decoration: none;
}
.det p {
	padding-bottom: 5px;
	line-height: 20px;
}
p.date {
	font-size: 12px;
	text-align: right;
}
p.wtitle {
	font-weight: 400;
	line-height: 18px;
	padding: 0;
	clear: both;
	width: auto;
	float: left;
}
p.wdate {
	width: auto;
	float: left;
	line-height: 18px;
	padding: 0 0 0 8px;
}
p.work {
	font-size: 13px;
	line-height: 18px;
	max-width: 160px;
	clear: both;
}
iframe {
	width: 100%;
	height: 397px;
	float: left;
}

/* Media queries
------------------------------------------------*/

@media screen and (min-width:525px) {
	p.reveal {
		display:none;
	}	
	.nav_hidden {
		display:block;
	}
}

/* ---------------- news page --------------- */
ul.page-numbers {
	list-style: none;
	float: right;
	margin: 20px 0px;
}
ul.page-numbers li {
	display: inline;
	padding: 0px 5px;
}

/* ---------------- book --------------- */

#note {
	width: 330px;
	float: left;
}
#note p {
	font-size: 11px;
}
#price {
	width: 288px;
	float: right;
	border: 1px solid #d2dce1;
	padding: 19px;
}
#price p {
	font-weight: 400;
	font-size: 15px;
	line-height: 30px;
	width: 100px;
	float: left;
}
#price p span {
	font-size: 20px;
}
ul#book {
	width: 100%;
	float: left;
	margin-top: 45px;
	list-style: none;
}
ul#sample {
	display: none;
}
ul#book li {
	width: 328px;
	float: left;
	border: 1px solid #d2dce1;
	margin-right: 45px;
}
ul#book li:nth-of-type(3) {
	margin: 0;
}

/* ---------------- categories --------------- */

ul#categories {
	width: 100%;
	float: left;
	list-style: none;
}
ul#categories li {
	width: 330px;
	float: left;
	margin-right: 45px;
	margin-bottom: 45px;
}
ul#categories li:nth-of-type(3n) {
	margin-right: 0;
}
ul#categories li p a:link,
ul#categories li p a:visited {
	background: url("resources/right-arrow.png") no-repeat right bottom #f7f8f9;
	color: #5E7782;
	float: left;
	height: 32px;
	line-height: 32px;
	padding: 0 40px 0 10px;
	text-align: right;
	text-decoration: none;
	text-transform: uppercase;
	width: 280px;
}

/*--------------------- search ------------------------*/

form#search {
	width: 100%;
	float: left;
	clear: both;
	margin-bottom: 45px;
}

form#search button {
	display: inline-block;
	background-color: #5E7782;
	color: #FFF;
	border: none;
	outline: 0;
	padding: 5px 8px;
	margin-left: 5px;
	cursor: pointer;
}

/*--------------------- contact ------------------------*/

dl#page {
	width: 100%;
	float: left;
	line-height: 20px;
}
dl#page dt {
	font-weight: 400;
}
dl#page dd {
	padding-bottom: 10px;
}
form {
	width: 280px;
	float: left;
}
label {
	font-weight: 400;
	width: 80px;
	float: left;
}
label,
textarea,
input {
	margin-top: 10px;
}
textarea,
input {
	width: 170px;
	border: 1px solid #C0C0C0;
	font-family: 'Roboto', helvetica, arial, sans-serif;
	padding: 3px 5px;
	font-size: 13px;
}
.submit {
	float: right;
	background-color: #5E7782;
	color: #FFF;
	border: 0;
	padding: 3px 8px;
	width: auto;
}
p.message {
	border: 1px solid #C0C0C0;
	padding: 10px;
}
p.required {
	border: 1px solid #C0C0C0;
	padding: 10px;
	color: #d9161b;
}

/*--------------------- footer ------------------------*/
footer {
	clear: both;
	width: 100%;
	float: left;
	font-size: 11px;
	line-height: 20px;
	padding: 50px 0;
	text-transform: uppercase;
	background: url('resources/grad.png') top left repeat-x;
}
p#copy {
	width: 330px;
	float: left;
}
img#yt {
	clear: left;
}
footer ul#links {
	width: 330px;
	float: right;
	text-align: right;
	list-style: none;
}
footer ul#links li {
	width: 100%;
	float: left;
}

/*--------------------------------------- < 980px ------------------------------------- */

@media screen and (max-width: 1080px) {
	.wrapper,
	#pageinfo,
	.wip,
	#reflection {
		width: 768px;
	}
	div.cookie_banner #cookie_text{
		width:90%;
		margin: 0 5%;
	}
	img#logo,
	img#logoref {
		width: 180px;
	}
	header {
		height: 56px;
	}
	nav ul#nav {
		width: 540px;
		font-size: 13px;
		height: 55px;
		margin-top: 18px;
	}
	nav ul#nav li {
    padding-left: 10px;
	}
	#reflection {
		background: url('resources/navref2.png') top right no-repeat;
	}
	#content {
		margin: 78px 0 30px;
	}
	#slideshow,
	ul.bxslider li {
		height: 462px;
	}
	.lefttwothirds,
	.righttwothirds {
		width: 504px;
	}
	.rightthird {
		width: 240px;
	}
	.leftthird {
		width: 240px;
		margin-right: 24px;
	}
	#bio {
		width: 350px;
	}
	a:link.ab,
	a:visited.ab{
		width: 190px;
		margin-bottom: 24px;
	}
	ul#details li {
		width: 372px;
		margin-bottom: 24px;
	}
	ul#details li:nth-of-type(odd) {
		margin-right: 24px;
	}
	ul#details li img {
		width: 120px;
	}
	.det {
		width: 230px;
	}
	#note {
		width: 150px;
	}
	#price {
		width: 280px;
		padding: 14px;
	}
	#price p {
		width: 100%;
	}
	ul#book li {
		width: 238px;
		margin-right: 24px;
	}
	ul#categories li {
		width: 240px;
		margin-right: 24px;
		margin-bottom: 24px;
	}
	ul#categories li p a:link,
	ul#categories li p a:visited {
		width: 190px;
	}
	ul.gal li {
		margin-bottom: 14px;
		margin-right: 14px;
	}
	footer {
		padding: 24px 0;
	}
}

/*--------------------------------------- < 758px ------------------------------------- */

@media screen and (max-width: 768px) {
	.wrapper,
	#pageinfo,
	.wip,
	#reflection {
		width: 524px;
	}
	img#logoref {
		display: none;
	}
	#slideshow,
	ul.bxslider li {
		height: 365px;
	}
	.bx-controls {
		margin-top: -100px;
	}
	ul.bxslider li p.stitle {
		font-size: 15px;
		padding-top: 12px;
	}
	ul.bxslider li p {
		font-size: 13px;
		line-height: 20px;
		padding-bottom: 5px;
	}
	header {
		height: 102px;
		padding-bottom: 8px;
	}
	nav ul#nav {
		margin-top: 70px;
	}
	#content {
		margin-top: 135px;
		margin-bottom: 24px;
	}
	.lefttwothirds,
	.righttwothirds {
		width: 100%;
		margin-left: 0;
		margin-bottom: 24px;
	}
	.rightthird,
	.leftthird {
		width: 100%;
		margin-right: 0;
	}
	#bio {
		width: 370px;
	}
	a:link.ab,
	a:visited.ab {
		width: 190px;
	}
	a:link#insp,
	a:visited#insp {
		margin-right: 24px;
	}
	ul#details li {
		width: 100%;
	}
	ul#details li:nth-of-type(odd) {
		margin-right: 0;
	}
	ul#details li img {
		width: 200px;
	}
	.det {
		width: 300px;
	}
	ul#book {
		display: none;
	}
	ul#sample {
		display: inline;
		list-style: none;
		margin-top: 20px;
		width: 100%;
		float: left;
	}
	ul#sample li {
		width: 100%;
		float: left;
		border: 1px solid #d2dce1;
		margin-bottom: 20px;
	}
	ul#categories li {
		margin-right: 20px;
		margin-bottom: 20px;
	}
	ul#categories li:nth-of-type(3n) {
		margin-right: 20px;
	}
	ul#categories li:nth-of-type(even) {
		margin-right: 0;
	}
}

/*--------------------------------------- < 524px ------------------------------------- */

@media screen and (max-width: 524px) {
	.wrapper,
	#pageinfo,
	.wip {
		width: 292px;
	}
	#pageinfo {
		margin: -30px auto 15px; 
	}
	header {
		padding: 0;
		height: 67px;
	}
	#reflection {
		display: none;
	}
	nav {
		width: auto;
		position: absolute;
		margin: 10px 0 0 210px;
		z-index: 100;
	}
	p.reveal {
		padding:0;
		float: left;
		width:50px;
		display:block;
		z-index: 1000;
	}
	p.reveal a:link,
	p.reveal a:visited {
		padding: 8px 0 8px 20px;
		display: block;
		background: url('resources/menu_icon.png') center left no-repeat;
		font-size: 13px;
		text-decoration:none;
	}
	p.reveal a:hover,
	p.reveal a:active {
		color: #EFEFEF;
		text-decoration:underline;
	}
	.nav_hidden {
		display:none;
	}
	nav ul#nav {
		position: absolute;
		z-index: 100;
		width: 100px;
		margin-top: 35px;
		margin-left: -75px;
		font-size: 13px;
		line-height: 22px;
		padding: 5px 5px 0 5px;
		background-color: rgba(255,255,255,0.85);
		border: 1px solid #d2dce1;
		background-image: none;
		height: auto;
	}
	nav ul#nav li {
		float: none;
		width: 80px;
		text-align: left;
		display: block;
		margin: 0;
		line-height: 16px;
		padding: 5px 10px 5px;
		border-bottom: 1px solid #d2dce1;
	}
	nav ul#nav li:first-of-type {
		padding: 5px 10px 5px;
	}
	nav ul#nav li:last-of-type {
		border-bottom: 0;
	}
	nav ul#nav li a:link,
	nav ul#nav li a:visited {
		width: auto;
		line-height: 16px;
		height: auto;
		float: none;
		margin: 0;
		padding: 0;
		color: #5E7782;
		display: block;
	}
	nav ul#nav li a:hover,
	nav ul#nav li a:active,
	nav ul#nav li a#current {
		background-image: none;
	}
	nav ul#nav li ul {
		margin: -20px 0 0 80px;
		font-size: 13px;
		background-color: rgba(255,255,255,0.85);
	}
	nav ul#nav li ul li {
		width: 80px;
		height: auto;
		padding: 0;
	}
	nav ul#nav li ul li:first-of-type {
		padding: 0;
	}
	nav ul#nav li ul li a {	
		width: auto;
		padding: 0;
	}
	nav ul#nav li ul li a:link,
	nav ul#nav li ul li a:visited {
		line-height: 16px;
		height: auto;
	}
	nav ul#nav li ul li a:hover,
	nav ul#nav li ul li a:active {
		color: #5E7782;
		text-decoration: underline;
	}
	#content {
		margin-top: 65px;
	}
	h1 {
		margin-top: 30px;
	}
	ul#breadcrumb {
		margin-bottom: 20px;
	}
	#slideshow {
		margin-top: 30px;
		padding-bottom: 0;
	}
	#slideshow,
	ul.bxslider li {
		height: 190px;
	}
	ul.bxslider li p.stitle {
		font-size: 13px;
		padding-top: 8px;
	}
	ul.bxslider li p {
		font-size: 11px;
		line-height: 16px;
		padding-bottom: 3px;
	}
	.bx-controls {
		display: none;
	}
	#bio {
		width: 100%;
	}
	a:link.ab,
	a:visited.ab {
		width: 242px;
	}
	a:link#insp,
	a:visited#insp {
		margin-right: 0;
	}
	ul#details li img {
		width: 100%;
		padding-bottom: 5px;
	}
	.det {
		width: 100%;
	}
	ul#categories li {
		margin-right: 0;
		width: 100%;
	}
	ul#categories li:nth-of-type(3n) {
		margin-right: 0;
	}
	ul#categories li p a:link,
	ul#categories li p a:visited {
		width: 242px;
	}
}