/* GENERAL
--------------------- */
body {
	/* -webkit-font-smoothing: antialiased !important; */
	font-family: Helvetica, Helvetica Neue, Arial, sans-serif;
	margin: 0;
	padding: 0;
	color: #000;
	font-size: 20px;
	letter-spacing: 0.5px;
	box-sizing: border-box;
}
a {
	color: #000;
	text-decoration: none;
}
a:hover {
	color: #00f;
}
ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

h1, h2, h3 {
	font-weight: normal;
	margin-top: 0;
}
.clear {
	clear: both;
}
.hidden {
	display: none;
}

header,
main {
	left: 15px;
	right: 15px;
}
	
/* HEADER
--------------------- */
header {
	position: fixed;
	top: 0px;
	font-size: 0.875em;
	background-color: white;
	z-index: 1000;
	
}
.header-container {
	max-width: 1200px;
	/* padding-top: 20px; */
	display: table;
	border-collapse: collapse;
	border-spacing: 0;
  width: 100%;
}
header ul {
}
header ul li {
	display: inline-block;
}
header ul li.full-name {
	display:none;
}

header .sitename,
header nav {
	display: table-cell;
	padding: 10px 0 10px 0;
	vertical-align: top;
}
header .sitename li {
	margin-right: 20px;
}
header .sitename li:first-child {
	margin-right:30px
}
header nav {
	text-align: right;
}


/* MAIN
--------------------- */
main {
	position: absolute;
	top: 60px;
	max-width: 1200px;
}
.main-container {
	margin: 0 auto;
}


/* THUMBS
--------------------- */
.thumbs {
	margin: 0 -20px;
}
.thumb {
	float: left;
}
.sizer { width:100%; }
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9 { width:100%; }
.thumb-container {
	margin: 20px;
	position: relative;
}
.thumb-media {
	position: relative;
	width: 100%;
	height: 0;
	overflow: hidden;
}
.thumb .slideshow {
}
.thumb .view {
	overflow: hidden;
	position:absolute;
	width: 100%;
	height: 100%;
	left:0%;
	top:0%;
	
    transition-property: left, top, width, height;
    transition-duration: 1s;
	transition-timing-function: linear;
}

/* ZOOM EFFECT */
.thumb:hover .view {
	left:-10%;
	top:-10%;
	width: 120%;
	height: 120%;
}

.thumb .view img {
	position: absolute;
	width:100%;
	height: auto;
}
.thumb .library {
	display: none;
}

/* 
.thumb-media:hover:after {
	content:"";
	position:absolute;
	left:0px;
	right:0px;
	height:10px;
	bottom:-9px;
	background-color:black;
}
 */






/* Thumb Title */

.thumb-title {
	position: absolute;
	width:100%;
	height:100%;
	z-index: 30;
	-webkit-transition: opacity 250ms;
    transition: opacity 250ms;
	opacity: 0;
}
.thumb-title:hover {
	
}
.thumb-media a:hover .thumb-title {
	opacity: 1;
}

.thumb-title:after {
	content:"";
	z-index: -1;
	position:absolute;
	left:0px;
	right:0px;
	top:0px;
	bottom: -10px;
	
	box-sizing: border-box;
	/* background-color:white; */
	/* opacity: 0.2; */
	
	border-bottom: 10px solid #000;
	
}

.thumb-title-container {
	display: table;
	width:100%;
	height:100%;
}
.thumb-title h2 {
	margin: 0;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	padding: 0 20px;
	display: none;
}


/* SINGLE
--------------------- */
.single-content {
	font-size: 0.875em;
}
.single-content p {
	width:100%;
	position: relative;
	margin:0 0 3px 0;
}
.single-content img {
	width: 100%;
	height:auto;
}


/* PAGE
--------------------- */
.page {
	width: 100%;
	max-width: 400px;
	float: right;
	
}



/* FOOTER
--------------------- */



/* MEDIA QUERIES
--------------------- */

@media (min-width: 440px) {
	main {
		top: 40px;
	}
}

@media (min-width: 600px) {
	.sizer { width:20%; }
	.col-1, .col-2, .col-3, .col-4 { width:20%; }
	.col-5, .col-6, .col-7, .col-8 { width:40%; }
	.col-9, .col-10, .col-11, .col-12 { width:60%; }
	.col-13, .col-14, .col-15, .col-16 { width:80%; }
	.col-17, .col-18, .col-19, .col-20 { width:100%; }
	
	header {
		/* height: 67px */
	}
	.header-container {
		/* padding-top: 20px; */
	}
	header ul li.full-name {
		display:inline-block;
	}
	header,
	main {
		left: 30px;
		right:30px;
	}
	main {
		top: 60px;
	}
	header .sitename,
	header nav {
		padding: 20px 0 20px 0;
	}
	.single-content p {
		margin:0 0 15px 0;
	}
	
}

@media (min-width: 900px) {
	
	.sizer { width:10%; }
	.col-1, .col-2 { width:10%; }
	.col-3, .col-4 { width:20%; }
	.col-5, .col-6 { width:30%; }
	.col-7, .col-8 { width:40%; }
	.col-9, .col-10 { width:50%; }
	.col-11, .col-12 { width:60%; }
	.col-13, .col-14 { width:70%; }
	.col-15, .col-16 { width:80%; }
	.col-17, .col-18 { width:90%; }
	.col-19, .col-20 { width:100%; }
	
	
	
}

@media (min-width: 1200px) {
	.sizer { width:5%; }
	.col-1 { width:5%; }
	.col-2 { width:10%; }
	.col-3 { width:15%; }
	.col-4 { width:20%; }
	.col-5 { width:25%; }
	.col-6 { width:30%; }
	.col-7 { width:35%; }
	.col-8 { width:40%; }
	.col-9 { width:45%; }
	.col-10 { width:50%; }
	.col-11 { width:55%; }
	.col-12 { width:60%; }
	.col-13 { width:65%; }
	.col-14 { width:70%; }
	.col-15 { width:75%; }
	.col-16 { width:80%; }
	.col-17 { width:85%; }
	.col-18 { width:90%; }
	.col-19 { width:95%; }
	.col-20 { width:100%; }
}