.clear {
	clear: both;
	height: 0px;
	visibility: hidden; 
}

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0; 
}

.clearfix {
	display: inline-block; 
}

* html .clearfix {
	height: 1%; 
}

.clearfix {
	display: block;
}

@font-face {
    font-family: Proxima Nova;
    src: url(https://pxportfolios.s3.amazonaws.com/themes/14/main/assets/517837f6ae3ddb4a71000004/proximanova-regular-webfont.ttf);
    font-weight: normal;
}

@font-face {
    font-family: Proxima Nova;
    src: url(https://pxportfolios.s3.amazonaws.com/themes/14/main/assets/517837f6ae3ddb10cf000003/proximanova-regitalic-webfont.ttf);
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: Proxima Nova;
    src: url(https://pxportfolios.s3.amazonaws.com/themes/14/main/assets/517837f6ae3ddb6100000001/proximanova-bold-webfont.ttf);
    font-weight: bold;
}

@font-face {
    font-family: Proxima Nova;
    src: url(https://pxportfolios.s3.amazonaws.com/themes/14/main/assets/517837f6ae3ddbb1eb000002/proximanova-boldit-webfont.ttf);
    font-weight: bold;
    font-style: italic;
}

html {
	background-color: #000; 
	font-size: 14px;
}

body {
	font-family: 'Proxima Nova', Helvetica, Arial, sans-serif;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.8);
	background-color: #000;
}

p {
	color: rgba(255, 255, 255, 0.6);
	line-height: 1.4;
}

h1 {
	font-size: 1.5em;
	font-weight: bold;
	text-transform: uppercase; 
}

h2 {
	font-size: 1.5em;
	font-weight: bold;
	line-height: 1.2;
	text-transform: uppercase; 
}

h3 {
	font-size: 1em;
	line-height: 2em;
	font-weight: bold;
	text-transform: uppercase; 
}

a {
	color: rgba(255, 255, 255, 0.8);
	transition: all 0.3s ease-in-out;
}
	a:hover {
		color: rgba(255, 255, 255, 1);
	}

#background {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: black no-repeat center center;
	background-size: cover;
	
}

main {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.5);
	overflow: hidden;
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	perspective: 2000;
	-webkit-perspective: 2000;
	-moz-perspective: 2000;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
}
	main.blackout {
		background: rgba(0, 0, 0, 1.0);
	}

header {
	position: absolute;
	left: 0;
	right: 0;
	padding: 15px;
	z-index: 100;
	background: rgba(0, 0, 0, 0.6); 
}
	header img {
		display: inline-block;
		margin: 4px 15px 0 0;
		max-height: 50px;
	}
	header h1 {
		display: inline-block;
		margin-right: 1em; 
	}
	header nav {
		display: inline-block; 
	}
		header nav li {
			text-transform: uppercase;
			margin-right: 1em;
			display: inline-block;
			margin-top: 4px;
		}
			nav li a {
				padding-bottom: 2px;
			}
			nav li.selected a {
				color: rgba(255, 255, 255, 1);
				border-bottom: 2px solid rgba(255, 255, 255, 1);
			}
	.fullscreen {
		right: 0;
		top: 0;
		position: absolute;
	}
		.fullscreen.hidden {
			display: none;
		}

#maingrid {
}

.gridcontainer {
	position: absolute;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	transform: translate3d(0,0,0);
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	transform-style: preserve-3d; 
	-webkit-transform-style: preserve-3d; 
	-moz-transform-style: preserve-3d; 
}
	.gridcontainer ul {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		font-size: 0;
	}
		.gridcontainer ul li {
			position: relative;
			display: inline-block;
			z-index: 500;
			
				width: 25%;
				height: 25%;
				
			transform-origin: bottom;
			-webkit-transform-origin: bottom;
			-moz-transform-origin: bottom;
			transform: translate3d(0,0,0);
			-webkit-transform: translate3d(0,0,0);
			-moz-transform: translate3d(0,0,0);
			box-sizing: border-box;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			transition: all 0.3s ease-in-out;
			-webkit-transition: all 0.3s ease-in-out;
			-moz-transition: all 0.3s ease-in-out;
			backface-visibility: hidden;
			-webkit-backface-visibility: hidden;
			-moz-backface-visibility: hidden;
		}
			.gridcontainer ul li.flutter {
				opacity: 0;
				transform: translate3d(0, 20px, -400px) rotate3d(1, 0, 0, 30deg);
				-webkit-transform: translate3d(0, 20px, -400px) rotate3d(1, 0, 0, 30deg);
				-moz-transform: translate3d(0, 20px, -400px) rotate3d(1, 0, 0, 30deg);;
			}
			.gridcontainer ul li .img:hover {
				cursor: pointer;
				opacity: 0.8;
			}
			.gridcontainer ul li .img {
				position: absolute;
				top: 2%;
				bottom: 2%;
				left: 2%;
				right: 2%;
				background-repeat: no-repeat;
				background-size: 101%;
				background-position: center;
				box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.5);
				backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				-moz-backface-visibility: hidden;
				transition: all 0.3s ease-in-out;
				-webkit-transition: all 0.3s ease-in-out;
				-moz-transition: all 0.3s ease-in-out;
			}
				.gridcontainer ul li .img a {
					display: block;
					width: 100%;
					height: 100%;
				}
				
#mainimage {
	opacity: 0;
	position: absolute;
	top: 100%;
	bottom: 0;
	left: 0;
	right: 0;
	user-select: none;
	-webkit-user-select: none;
	-mox-user-select: none;
	transition: opacity 0.3s ease-in-out;
	-webkit-transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
}
	#mainimage > div {
		position: absolute;
	}
	#photos {
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}
		#photos .img {
			display:block;
			background-repeat: no-repeat;
			background-position: center;
			background-size: contain;
		}
			.photoinfo {
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				min-height: 44px;
				padding-top: 5px 44px;
				text-align: center;
				background: rgba(0, 0, 0, 0.8);
				box-sizing: border-box;
				transition: all 0.3s ease-in-out;
				-webkit-transition: all 0.3s ease-in-out;
				-moz-transition: all 0.3s ease-in-out;
			}
				.photoinfo.hidden {
					opacity: 0;
					bottom: -100px;
				}
				.photoinfo h2 {
					margin-top: 10px;
					padding: 0 44px;
				}
				.photoinfo .photodescription {
					margin: 0;
					padding: 0 44px;
				}
				.photoinfo .metadata {
					padding: 0 44px;
					margin-bottom: 5px;
				}
					.photoinfo .metadata li {
						display: inline-block;
						color: rgba(255, 255, 255, 0.4);
						font-style: italic;
						display: inline;
						padding: 0 5px;
					}
				.photoinfo .map {
					width: 230px;
				}
				.store_links {
					margin-bottom: 5px;
				}
					.store_links a {
						margin: 0 10px;
					}
	#mainimage .ui {
		transition: all 0.3s ease-in-out;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		transform: translate3d(0, 0, 800px);
		-webkit-transform: translate3d(0, 0, 800px);
		-moz-transform: translate3d(0, 0, 800px);
	}	
	#mainimage .backbutton {
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.6);
	}
	.photonav {
		-moz-user-select: none;
	}
	.photonav.prev {
		position: absolute;
		left: 0;
		bottom: 0;
	}
	.photonav.next {
		position: absolute;
		right: 0;
		bottom: 0;
	}
	#mainimage.visible {
		opacity: 1;
		top: 0;
	}
		#mainimage.visible .img {
			transform: translate3d(0, 0, -1px);
			-webkit-transform: translate3d(0, 0, -1px);
			-moz-transform: translate3d(0, 0, -1px);
		}	
		#mainimage.visible .ui {
			transform: translate3d(0, 0, 0);
			-webkit-transform: translate3d(0, 0, 0);
			-moz-transform: translate3d(0, 0, 0);
		}
#navbar {
	position: absolute;
	bottom: 30px;
	width: 100%;
	height: 44px;
	text-align: center;
	color: rgba(255, 255, 255, 0.6);
	background: rgba(0, 0, 0, 0.4);
}
	#navbar #collectioninfo {
		display: inline-block;
	}
		#navbar #collectioninfo h3 {
			display: inline-block;
			font-weight: bold;
			margin: 0 10px;
		}
	#navbar .button {
		display: inline-block;
		width: 44px;
		vertical-align: -1.2em;
	}

footer {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0 5px;
	z-index: 100;
	color: rgba(255, 255, 255, 0.6);
	background: rgba(0, 0, 0, 0.6);
	text-align: left;
}
	footer ul {
		float: left;
	}
	footer li, .copyright {
		display: block;
		float: left;
		height: 100%;
	}
		footer li a, .copyright {
			display: block;
			height: 20px;
			padding: 5px 10px;
			transition: all 0.3s ease-in-out;
			-webkit-transition: all 0.3s ease-in-out;
			-moz-transition: all 0.3s ease-in-out;
		}
			footer li a:hover {
				color: rgba(0, 0, 0, 1);
				background: rgba(255, 255, 255, 0.8);
			}

header, #navbar, footer {
	transition: margin 0.3s ease-in-out, opacity 0.3s ease-in-out;
	-webkit-transition: margin 0.3s ease-in-out, opacity 0.3s ease-in-out;
	-moz-transition: margin 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

#about, 
#contact {
	padding: 20px 15px;
	box-sizing: border-box;
}
	#about p {
		margin-bottom: 1em;
	}
	#about .avatar {
		float: left;
		width: 50px;
		margin: 0 1em 0 0;
	}
	#about li {
		line-height: 2;
	}
	#about h3 {
		margin-top: 1em;
	}
	#about .contactinfo img {
		vertical-align: -0.4em;
		padding-right: 0.5em;
	}
	#about .map {
		width: 290px;
		margin-top: 0.4em;
		filter: grayscale(50%);
		-webkit-filter: grayscale(50%);
		-moz-filter: grayscale(50%);
	}
	
	#contact form {
		margin-top: 20px;
	}
	#contact input,
	#contact textarea {
		border: 0;
		padding: 10px 8px;
		color: rgba(0, 0, 0, 0.8);
		background: rgba(255, 255, 255, 0.8);
		border: 1px solid rgba(255, 255, 255, 0.4);
		margin: 0 0 20px;
		width: 270px;
	}

	#contact #rc {
		margin: 0 0 20px -15px;
	}
		#contact table {
			border: none;
		}
			#contact .recaptchatable .recaptcha_image_cell {
				padding: 0 !important;
			}
				#contact .recaptchatable #recaptcha_image {
					border: none !important;
				}
			#recaptcha_input_area {
				padding: 0;
			}
			.recaptchatable #recaptcha_response_field {
				margin-top: 10px;
				margin-bottom: 0;
			}
	#contact button {
		width: 290px;
		margin: 10px 0;
		border: 0;
		color: rgba(255, 255, 255, 0.8);
		background: rgba(0, 0, 0, 0.6);
		font-family: 'Proxima Nova', Helvetica, Arial, sans-serif;
	}
	
#home {
	background-repeat: no-repeat;
	background-position: left;
	background-size: contain;
}
	#home .homeavatar {
		float: left;
		width: 5em;
	}
	#home .homecontent {
		float: left;
		padding: 1em 1em 1em 1em;
		max-width: 480px;
	}
		#home .homecontent h3 {
			margin: 0;
			line-height: 0.8;
		}
		#home .homecontent p {
			line-height: 1.4;
			margin-top: 0.8em;
		}
	
.strip {
	position: absolute;
	background: rgba(0, 0, 0, 0.4);
	top: 61px;
	left: 0;
	right: 0;
	overflow-x: hidden;
	overflow-y: auto;
}
	.strip > p,
	.strip > h3 {
		padding-left: 15px;
		width: 75%;
	}
	.strip .content {
		width: 290px;
		margin-left: auto;
		margin-right: auto;
		padding-bottom: 60px;
	}
	.strip p {
		line-height: 1.2;
	}

.button {
	height: 44px;
	min-width: 44px;
	text-align: center;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 50%;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
}
	.button.prev {
		background-image: url(https://pxportfolios.s3.amazonaws.com/themes/14/main/assets/517ae52fae3ddb76cb000001/icon_prev.png);
	}
	.button.next {
		background-image: url(https://pxportfolios.s3.amazonaws.com/themes/14/main/assets/517ae537ae3ddb4373000002/icon_next.png);
	}
	.button.backbutton {
		background-image: url(https://pxportfolios.s3.amazonaws.com/themes/14/main/assets/517aebe8ae3ddbe71c000281/icon_x.png);	
	}
	.button.fullscreen {
		background-image: url(https://pxportfolios.s3.amazonaws.com/themes/14/main/assets/51c8bb1fc030b769e2000369/icon_fullscreen.png);
	}
		.button.fullscreen:hover {
			background-color: rgba(255, 255, 255, 0) !important;
		}
	.button a {
		display: block;
		width: 100%;
		height: 100%;
	}
	.button:hover {
		cursor: pointer;
		color: rgba(0, 0, 0, 1) !important;
		background-color: rgba(255, 255, 255, 0.4) !important;
	}
.truncate {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.scrollable {
	-webkit-overflow-scroll: touch;
}

.map {
	border-radius: 3px;
}

#error {
	padding: 20px 0;
}

/* Swipe 2 required styles */

.swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative;
}
.swipe-wrap {
  overflow: hidden;
  position: relative;
}
.swipe-wrap > div {
  float:left;
  width:100%;
  position: relative;
}

/* END required styles */

@media only screen and (max-width: 480px), only screen and (max-height: 480px) {
	.homeavatar {
		display: none;
	}
}