/* GLOBAL */

html, body {
	margin: 0;
	font-size: 100%;
}



.bar {
	width: 100%;
	height: 28px;
	background-color: #f6f6f6;
}

	.bar img {
		float: right;
		width: 28px;
		padding-right: 18px;
	}

header {
	display: inline-block;
	width: 100%;
	height: 70px;
}

.logo {
	float: left;
	width: 396px;
}

	.logo img {
		width: 198px;
		padding: 27px 0 0 20px;
	}

nav div {
	position: relative;
	float: left;
	width: 238px;
	height: 75px;
}

	nav a:link, nav a:visited {
		position: absolute;
		top: 32px;
		left: 14px;
		color: #464646;
		font-family: SackersGothicMedium, Arial;	
		font-size: 10px;
		text-decoration: none;
		text-transform: uppercase;
		letter-spacing: 2px;
	}

	nav div:hover {
		background-color: #f6f6f6;
	}

.topic {
	height: 56px;
	padding-right: 22px;
	background-color: #f6f6f6;
	line-height: 56px;
}

	.topic h1 {
		margin: 0;
		color: #454545;	
		font-family: SackersGothicMedium, Arial;
		font-size: 14px;
		letter-spacing: 5px;
		text-align: right;
		text-transform: uppercase;
	}
	
p {
	color: #6F6F6F;
	font-family: SofiaProLight, Arial;
	font-size: 15px;
	line-height: 32px;
}

footer {
	position: relative;
	display: inline-block;
	width: 100%;
	height: 160px;
	background-color: #f6f6f6;
	background-size: 1000px 160px;
	
	background-image: -webkit-image-set(url(../img/foggy-trees-bg.jpg) 1x, url(../img/foggy-trees-bg-r.jpg) 2x);
	text-align: left;
}

	footer span {
		padding-left: 22px;
		color: #A7A7A7;
		font-family: SackersGothicMedium, Arial;
		font-size: 9px;
		line-height: 75px;
		text-transform: uppercase;	
	}

	footer a:link, footer a:visited {
		text-decoration: none;
		color: #A7A7A7;
	}

.subtopic {
	padding-top: 10px;
	margin: 0;
	color: #636363;
	font-family: SackersGothicMedium, Arial;
	font-size: 13px;
	letter-spacing: 3px;
	text-transform: uppercase;
}


/* INDEX */

#tiles {
	width: 100%;
	max-width: 1920px;
}

.tile {
	position: relative;
	float: left;
	width: 33.3333333333%;
	line-height: 0;
}

	.tile img {
		width: 100%;
		height: auto;
	}

	.tile:hover {
		background-color: #ccc;
		opacity: 0.50;
	}

.tile-title {
	position: absolute;
	z-index: 10;
	bottom: 0;
	width: 100%;
	height: 75px;
	background: rgb(255, 255, 255);
	background: rgba(255, 255, 255, .2);	
}

	.tile-title a {
		position: absolute;
		top: 30px;
		left: 20px;
		display: block;
		color: #ECECEC;
		font-family: SackersGothicMedium, Arial;	
		font-size: 11px;
		font-weight: bold;
		text-decoration: none;
		text-transform: uppercase;
	}

	.tile-title span {
		position: absolute;
		top: 45px;
		left: 20px;
		color: #DCDCDC;
		font-family: SofiaProLight, Arial;		
		font-size: 11px;
	}


/* SECTIONS */

.section {
	width: 35%;
	padding: 0 0 100px 22px;
}

	.section h2 {
		padding-top: 30px;
		color: #636363;
		font-family: SackersGothicMedium, Arial;
		font-size: 13px;
		letter-spacing: 5px;
		line-height: 36px;
		text-transform: uppercase;		
	}

	.section h3 {
		font-size: 15px;
		font-family: SofiaProLight;
		color: #A9A9A9;
		line-height: 25px;	
		font-weight:normal;
	}

#smap a:link, .section a:visited {
	background-color: #FFF;
}	
	
#smap h3 {
	padding: 16px 0 16px 44px;
}	

#smap span {
	display: block;
	padding: 24px 0 0 44px;
	color: #C3C3C3;
	font-family: SackersGothicMedium, Arial;
	font-size: 13px;
	font-weight: bold;
	letter-spacing: 3px;
	text-transform: uppercase;
}
	
/* ALBUMS */

	.album hr {
		clear: both;
		width: 1024px;
		height: 1px;
		margin: 40px auto 40px auto;
		border: none;
		background-color: #ccc;
	}

	.album time {
		display: block;
		padding-top: 9px;
		color: #B3B3B3;
		font-family: SofiaProLight, Arial;
		font-size: 10px;
		letter-spacing: 2px;
	}
	
	.album figcaption {
		width: 600px;
	}
	
	.album a:link, .album a:visited, .section a:link, .section a:visited {
		border-bottom: 3px solid #ECECEC;
		box-shadow: inset 0 -3px 0 #ECECEC;
		color: #6F6F6F;
		text-decoration: none;
	}
	
	.album a:hover, .section a:hover {
		background-color: #ECECEC;
	}
	
.photo-h {
	width: 1024px;
	margin: 0 auto;
}

	.photo-h img {
		clear: both;
		width: 100%;
		height: auto;
	}

.photo-v {
	width: 1024px;
	margin: 0 auto;
}

	.photo-v img {
		float: left;
		width: 50%;
		height: auto;
		padding: 0 40px 40px 0;
	}

	.photo-v figcaption {
		float: left;
		width: 400px;
	}
	
	.photo-v p {
		padding-bottom: 20px;
	}
	
.next {
	width: 1024px;
	margin: 0 auto;
	padding-bottom: 295px;
}

	.next span {
		display: block;
		padding-bottom: 14px;
		color: #636363;
		font-family: SackersGothicMedium, Arial;
		font-size: 12px;
		font-weight: bold;
		letter-spacing: 3px;
		text-transform: uppercase;	
	}

.next-album {
	position: relative;
	float: left;
	padding: 1px;
	padding-top: 13px;
	margin-left: 0;
}

	.next-album img {
		clear: left;
		width: 100px;
		opacity: 1;
	}
		
	.next-album img:hover {
		opacity: .6;
	}

.next-title {
	position: absolute;
	bottom: 0;	
	width: 100%;
	height: 40px;
	background: rgb(255, 255, 255);
	background: rgba(255, 255, 255, .2);
}
	
	.next-title a {
		position: absolute;
		left: 6px;
		top: 13px;
		float: left;
		color: #ECECEC;
		font-family: SackersGothicMedium, Arial;
		font-size: 8px;
		font-weight: bold;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
	}
	
	
/* PORTFOLIO */

.portfolio {
	padding-left: 22px;
}

.portfolio-pic {
	float: left;
	width: 160px;
	padding: 0 5px 20px 0;
}

	.portfolio-pic a {
		color: #5F5F5F;
		font-family: SackersGothicMedium, Arial;
		font-size: 9px;
		font-weight: bold;
		text-decoration: none;
		text-transform: uppercase;
	}

	.portfolio-pic time {
		display: block;
		padding: 2px 0 14px 0;
		color: #B3B3B3;
		font-family: SofiaProLight, Arial;
		font-size: 9px;
		letter-spacing: 2px;
	}

	.portfolio-pic img:hover {
		opacity: .6;
	}

	.portfolio-pic:last-of-type {
		padding-bottom: 100px;
	}
	
.portfolio h2 {
	display: block;
}

.portfolio-year {
	display: inline-block;
	width: 100%;
	padding-top: 15px;
	color: #CECECE;
	font-family: SackersGothicMedium, Arial;
	font-size: 16px;
	letter-spacing: 5px;
	text-transform: uppercase;
}


/* MEDIA QUERIES */

@media only screen and (max-width: 1442px) {
	.logo {padding-right: 59px;}
	nav div {width: 216.5px;}
	nav > div:nth-of-type(1) {padding-right: 23px;}
	.tile-title {height: 64px;}	
	.tile-title a {top: 26px; font-size: 10px;}
	.tile-title span {top: 39px; font-size: 10px;}
	footer {margin-bottom: -5px;}
}

@media only screen and (max-width: 1024px) {
	.logo {width: 238px; padding-right: 103px;}	
	nav div {width: 120px;}
	.tile-title {height: 50px;}
	.tile-title a {top: 19px; font-size: 9px;}
	.tile-title span {top: 32px; font-size: 9px;}
	.album hr {width: 100%;}
	.subtopic {clear: both; padding: 14px 0 0 22px;}
	.album time {padding-left: 22px;}
	.album figcaption {padding: 0 22px 0 22px;}
	.photo-h {width: 100%;}
	.photo-v  img {padding: 0 0 0 22px;}
	.next {width: 100%;}
	.next span {padding-left: 22px;}
	.next div:nth-of-type(1) {padding-left: 22px;}
	.next-title {width: 100%;}
}

@media only screen and (max-width: 769px) {
	header {height: auto;}
	header {margin-bottom: -4px;}
	.logo {padding-bottom: 25px;}
	nav > div:nth-of-type(1) {clear: left;}
	nav div a:link, nav div a:visited {padding-left: 9px; font-size: 9px;}
	.topic h1 {float: left; padding-left: 22px;}
	.tile {width: 100%;}
	.tile img {max-width: 100%;}
	.tile-title {height: 70px;}
	.tile-title a {top: 27px; font-size: 11px;}
	.tile-title span {top: 44px; font-size: 11px;}
	.photo-v {width: 100%;}
	.section {width: 80%;}
}

@media only screen and (max-width: 480px) {
	.bar img {float: left;}
	.bar img:nth-of-type(1) {padding-left: 16px;}
	nav div {width: 98px;}
	.topic h1 {font-size: 10px; letter-spacing: 2px;}
	footer span {float: left; padding-left: 22px;}
	.tile-title {height: 50px;}	
	.tile-title a {top: 19px; font-size: 9px;}
	.tile-title span {top: 32px; font-size: 9px;}	
	.subtopic {font-size: 9px; letter-spacing: 2px;}
	.album time {font-size: 9px;}
	.album figcaption {width: 85%;}
	.next span {font-size: 9px; letter-spacing: 2px;}
	.photo-v img {width: 70%;}
	figcaption p {font-size: 14px;}
	.section h2 {padding-top: 10px; font-size: 10px; letter-spacing: 2px;}
}

@media only screen and (max-width: 320px) {
	nav div {width: 92px;}
	.next > div:nth-of-type(1) {padding-left: 0px;}
	footer > span:nth-of-type(1) {padding-left: 0px;}
}


/* FONTS */

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

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