/**
 * Customised html5boilerplate.com css reset, itself a customisation of the
 * html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
 * v1.6.1 2010-09-17 | Authors: Eric Meyer & Richard Clark
 * html5doctor.com/html-5-reset-stylesheet/
 */

html, body, div, span, h1, h2, h3, h4, h5, h6, p, em, img, small, strong {
margin:0;
padding:0;
border:0;
font-size:100%;
font:inherit;
vertical-align:baseline;
}
body { display:block; }
html { overflow-y:scroll; }
a:hover, a:active { outline:none; }
small { font-size:85%; }
strong, th { font-weight:bold; }
::-moz-selection{ background:#3b7cbf; color:#fff; text-shadow:none; }
::selection { background:#3b7cbf; color:#fff; text-shadow:none; }
a:link { -webkit-tap-highlight-color:#3b7cbf; }
.ie7 img { -ms-interpolation-mode:bicubic; }
h1, h2, h3, h4, h5, h6 { font-weight:bold; }

/* Primary styles */
  
body {
max-width:1600px;
margin:0 auto;
padding:20px 40px;
font:1em "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", sans-serif;
color:#515047;
background-color:#F2F1DB;
overflow:hidden;
}
.title, .category, a, a:link, a:visited, a:active {
	float:left;
	position:relative;
	width:23.75%; /* 380px / 1600px */
	margin:20px 1.25% 0 0; /* 20px / 1600px */
	text-decoration:none;
	overflow:hidden;
	line-height:0.8;

	/* marcolago begin */
	height: 0;
	padding-bottom: 23.75%; /* same as width */
	/* marcolago end */
}

/* marcolago begin */
a {
	background-color: #edecd6;
	-webkit-transition:background-color .3s linear;
	-moz-transition:background-color .3s linear;
	transition:background-color .3s linear;
}
a.title {
	background-color: #F2F1DB;
}
a:hover {
	background-color: #e5e4cf;
}
/* marcolago end */

h1 {
color:#515047;
line-height:0.8;
letter-spacing:-0.05em;
}
h2 {
position:absolute;
top:0;
padding:10px;
color:#d4d3c0;
line-height:0.9;
letter-spacing:-0.05em;
}
h3 {
color:#3b7cbf;
line-height:0.9;
letter-spacing:-0.05em;
}
h1, h2, h3 { font-size:4em; }
p {
font-size:1.25em; 
line-height:1.15;
margin:0.75em 0;
color:#b9b8a4;
}
small {
font-size:1em; 
color:#3b7cbf;
}

img { max-width:100%; opacity:.4; } /* img preserves proportion */
a:hover img { opacity:1; -webkit-transition:opacity .3s linear; -moz-transition:opacity .3s linear; transition:opacity .3s linear; }
.title img, .category img { opacity:0; }
div { position:absolute; top:0; margin:10px; } /* Position text over img */

/* Media queries */
/* 
screen width less than 1500px: adjust font-size
*/
@media screen and (max-width:1500px) {
h1, h2, h3 { font-size:3em; }
p { font-size:0.98em; }
}
/* 
screen width less than 1200px: make three-columns
*/
@media screen and (max-width:1200px) {
	.title, .category, a, a:link, a:visited, a:hover, a:active {
		width:31.3%; /* 310px at 990px */
		margin:20px 2.02% 0 0; /* 20px at 990px */
		/* marcolago begin */
		padding-bottom: 31.3%; /* same as width */
		/* marcolago end */
	}
}
/* 
screen width less than 1000px: adjust font-size
*/
@media screen and (max-width:1000px) {
h1, h2, h3 { font-size:2.5em; }
}
/* 
screen width less than 800px: make two-columns
*/
@media screen and (max-width:800px) {
	.title, .category, a, a:link, a:visited, a:hover, a:active {
		width:45.5%; /* 380px / 780px */
		margin:20px 2.56% 0 0; /* 20px / 780px */
		/* marcolago begin */
		padding-bottom: 45.5%; /* same as width */
		/* marcolago end */
	}
body { padding-right:0px; }
h1, h2, h3 { font-size:3em; }
}
/* 
screen width less than 700px: adjust font-size
*/
@media screen and (max-width:700px) {
h1, h2, h3 { font-size:3em; }
}
/* 
screen width less than 600px: adjust font-size
*/
@media screen and (max-width:600px) {
h1, h2, h3 { font-size:2.5em; }
p { font-size:.9em; }
small { font-size:.8em; }
}
/* 
screen width less than 500px: make single column
*/
@media screen and (max-width:500px) {
	.title, .category, a, a:link, a:visited, a:hover, a:active {
		width:90%;
		margin:20px 0 0 0;
		/* marcolago begin */
		height: auto;
		padding:0;
		background-color:#F2F1DB;
		/* marcolago end */
	}
	img { display:none; }
	div { position:relative; overflow:hidden; }
	a:hover { background-color:#e5e4cf; }
	body { padding-left:30px; }
	h1, h2, h3 { font-size:3.5em; }
	h2 { position:relative; }
	p { font-size:1.25em; }
	small { line-height:1.2; }
}

/* mobile: portrait */
@media only screen and (max-width: 320px) and (max-device-width: 320px) {
	body { padding:10px;}
	.title, .category, a, a:link, a:visited, a:hover, a:active {
		width:100%;
		/* marcolago begin */
		height:auto;
		padding: auto;
		background-color:#F2F1DB;
		/* marcolago end */
	}
	.title { margin-top:0px; }
	div, .category { position:relative; margin:0px; }
	img { display:none; }
	h1, h2, h3 { font-size:3em; }
	h2 { padding:0px; margin-top:20px; }
}
/* mobile: landscape */
@media only screen and (min-width: 321px) and (max-device-width: 569px) {
	body { padding:10px; }
	.title, .category, a, a:link, a:visited, a:hover, a:active {
		width:100%;
		/* marcolago begin */
		height:auto;
		padding: 0;
		background-color:#F2F1DB;
		/* marcolago end */
	}
	.title { margin:0px; }
	div, .category { position:relative; margin:0px; }
	img { display:none; }
	h1 { font-size:4.5em; line-height:1; }
	h2 { font-size:3em; padding:0px; margin-top:20px; }
	h3 { font-size:3em; margin:0 0 0.35em; }
}