.left {
	float: left;
}
.right {
	float: right;
}

body,html{
	height: 100%;
}

html {
	background: rgba(32, 35, 37, 1);
	-webkit-font-smoothing: antialiased;
}

body {
	color: #fff;
	font-family: 'Raleway', Helvetica, Arial, sans-serif;
	font-weight: 400;
	font-size: 15px;
}

h1 {
	font-size: 100px;
	font-weight: 100;
	line-height: 1;
}

h2 {
	font-size: 20px;
	font-weight: 400;
	opacity: 0.6;
}

h3 {
	font-size: 20px;
	font-weight: 400;
	opacity: 0.6;
}

a {
	color: #fff;
	transition: all 0.5s cubic-bezier(0.5,0,0,1);
	-webkit-transition: all 0.5s cubic-bezier(0.5,0,0,1);
	-moz-transition: all 0.5s cubic-bezier(0.5,0,0,1);
}
	a:hover {
		color: #fff;
	}

#background, 
#tempbackground {
	position: fixed;
	width: 100%;
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	z-index: -1000;
	opacity: 0.2;
}
	#background.homebg,
	#tempbackground.homebg {
		opacity: 0.4;
	}
	#background.hidden,
	#tempbackground.hidden {
		opacity: 0;
	}

#background {
	z-index: -1;
}

header {
	position: fixed;
	width: 100%;
	min-height: 24px;
	padding: 10px 0;
	line-height: 1.5;
	z-index: 0;
	background-color: rgba(0, 0, 0, 0);
	border-bottom: 1px solid rgba(223, 220, 218, 0.1);
	transition: all 0.5s cubic-bezier(0.5,0,0,1);
	-webkit-transition: all 0.5s cubic-bezier(0.5,0,0,1);
	-moz-transition: all 0.5s cubic-bezier(0.5,0,0,1);
}
	header.opaque {
		background-color: rgba(0, 0, 0, 1) !important;
	}
	header.hidden {
		margin-top: -200px;
	}
	header ul {
		margin: 0 5px;
	}
	header li {
		display: inline;
		margin: 0 5px;
	}
		header .selected a {
			opacity: 1;
		}
		header li a {
			opacity: 0.6;
		}
		#headertitle a {
			opacity: 0.8;
		}

main {
	height: 100%;
}

footer {
	
}

#titlecard {
	position: fixed;
	width: 100%;
	top: 33%;
	text-align: center;
	perspective: 1000px;
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
}
	#titlecard > * {
		transition: all 0.5s cubic-bezier(0.5,0,0,1);
		-webkit-transition: all 0.5s cubic-bezier(0.5,0,0,1);
		-moz-transition: all 0.5s cubic-bezier(0.5,0,0,1);
	}
	#titlecard .offscreen {
		opacity: 0;
		transform: translateZ(400px);
		-webkit-transform: translateZ(400px);
		-moz-transform: translateZ(400px);
	}
	#titlecard .logo {
		max-height: 100px;
		margin-top: -100px; 
		margin-bottom: 20px;
	}
	#titlecard h2 {
		margin-top: 20px;
	}

#collections {
	position: fixed;
	bottom: 0;
	width: 100%;
	padding: 20px 1% 40px 1%;
	text-align: center;
	font-size: 0;
	background-color: rgba(223, 220, 218, 0.1);
	border-top: 1px solid rgba(223, 220, 218, 0.2);
	overflow-y: hidden;
	box-sizing: border-box;
	
	perspective: 1000px;
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	
	overflow-x: scroll;
	-webkit-overflow-scrolling: touch;
	white-space:nowrap;
	
	transition: opacity 1s cubic-bezier(0.5,0,0,1);
	-webkit-transition: opacity 1s cubic-bezier(0.5,0,0,1);
	-moz-transition: opacity 1s cubic-bezier(0.5,0,0,1);

}
	#collections.hidden {
		opacity: 0;
	}
	
	.collection {
		position: relative;
		display: inline-block;
		margin: 0 5px;
		
		transition: all 0.5s cubic-bezier(0.5,0,0,1);
		-webkit-transition: all 0.5s cubic-bezier(0.5,0,0,1);
		-moz-transition: all 0.5s cubic-bezier(0.5,0,0,1);
		
		transform-style: preserve-3d;
		-webkit-transform-style: preserve-3d;
	}
		.collection.offscreen {
			opacity: 0;
			transform: translateZ(400px);
			-webkit-transform: translateZ(400px);
			-moz-transform: translateZ(400px);
		}
		.collection a {
			display: block;
			height: 100%;
		}
		.collection p {
			opacity: 0.4; 
			position: absolute;
			width: auto;
			font-size: 20px;
			
			text-overflow: ellipsis;
			width: 100%;
			white-space: nowrap;
			overflow: hidden;
			
			transform-origin: bottom center;
			-webkit-transform-origin: bottom center;
			-moz-transform-origin: bottom center;
			
			transform: translateY(5px);
			-webkit-transform: translateY(5px);
			-moz-transform: translateY(5px);
			
			transition: all 0.5s cubic-bezier(0.5,0,0,1);
			-webkit-transition: all 0.5s cubic-bezier(0.5,0,0,1);
			-moz-transition: all 0.5s cubic-bezier(0.5,0,0,1);
		}
			.collection:hover p {
				opacity: 1;
				transform: rotateX(0);
				-webkit-transform: rotateX(0);
				-moz-transform: rotateX(0);
			}
		.collection img {
			height: 200px;
			box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
			border-radius: 2px;
			-webkit-backface-visibility: hidden;
			
			transform-origin: bottom center;
			-webkit-transform-origin: bottom center;
			-moz-transform-origin: bottom center;
			
			transition: all 0.5s cubic-bezier(0.5,0,0,1);
			-webkit-transition: all 0.5s cubic-bezier(0.5,0,0,1);
			-moz-transition: all 0.5s cubic-bezier(0.5,0,0,1);
		}
			.collection:hover img {
				box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
				transform: rotateX(-5deg) translateY(-15px);
				-webkit-transform: rotateX(-5deg) translateY(-15px);
				-moz-transform: rotateX(-5deg) translateY(-15px);
			}

#photogrid {
	position: absolute;
	top: 45px;
	margin: 0.5%;
	padding-bottom: 0.5%;
	font-size: 0;
	width: 99%;
	perspective: 1000px;
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
}
	.thumbnail {
		position: relative;
		float: left;		
		margin: 0.1%;
		text-align: center;
		
		transition: transform 0.5s cubic-bezier(0.5,0,0,1), opacity 0.5s cubic-bezier(0.5,0,0,1);
		-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.5,0,0,1), opacity 0.5s cubic-bezier(0.5,0,0,1);
		-moz-transition: -moz-transform 0.5s cubic-bezier(0.5,0,0,1), opacity 0.5s cubic-bezier(0.5,0,0,1);
		
		
				width: 14.085%; /* 7-across */
		
	}
		.thumbnail:hover {
			cursor: pointer;
		}
		.thumbnail.background {
			opacity: 0;
			transform: translateZ(-1000px);
			-webkit-transform: translateZ(-1000px);
			-moz-transform:  translateZ(-1000px);
		}
		.thumbnail.selected {
			z-index: 1000;
			opacity: 0;
			transition: transform 0.5s cubic-bezier(0.5,0,0,1), opacity 0.75s cubic-bezier(1,0,0,1);
			-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.5,0,0,1), opacity 0.75s cubic-bezier(1,0,0,1);
			-moz-transition: -moz-transform 0.5s cubic-bezier(0.5,0,0,1), opacity 0.75s cubic-bezier(1,0,0,1);
		}
			.thumbnail.selected .thumbimage {
				opacity: 0;
				box-shadow: none;
				transform: translateY(0);
				-webkit-transform: translateY(0);
				-moz-transform: translateY(0);
			}
				.thumbnail.selected:hover .thumbimage {
					opacity: 0;
					box-shadow: none;
					
					transform: translateY(0);
					-webkit-transform: translateY(0);
					-moz-transform: translateY(0);
				}
			.thumbnail.selected p {
				opacity: 0;
			}
		.thumbnail.hidden {
			opacity: 0;
			transform: translateZ(400px);
			-webkit-transform: translateZ(400px);
			-moz-transform: translateZ(400px);
		}
		.thumbnail .thumbimage {
			width: 100%;
			box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
			border-radius: 2px;
			transform-origin: bottom center;
			-webkit-transform-origin: bottom center;
			-moz-transform-origin: bottom center;
			
			transition: all 0.5s cubic-bezier(0.5,0,0,1);
			-webkit-transition: all 0.5s cubic-bezier(0.5,0,0,1);
			-moz-transition: all 0.5s cubic-bezier(0.5,0,0,1);
		}
			.thumbnail:hover .thumbimage {
				box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
				
				transform: translateY(-25px);
				-webkit-transform: translateY(-25px);
				-moz-transform: translateY(-25px);
			}
		.thumbnail p {
			opacity: 0;
			position: absolute;
			bottom: 3px;
			text-overflow: ellipsis;
			width: 100%;
			white-space: nowrap;
			overflow: hidden;
			font-size: 15px;
			z-index: -100;
			
			transition: all 0.5s cubic-bezier(0.5,0,0,1);
			-webkit-transition: all 0.5s cubic-bezier(0.5,0,0,1);
			-moz-transition: all 0.5s cubic-bezier(0.5,0,0,1);
			
			transform: rotateX(45deg) translateY(-10px) translateZ(-10px);
			-webkit-transform: rotateX(45deg) translateY(-10px) translateZ(-10px);
			-moz-transform: rotateX(45deg) translateY(-10px) translateZ(-10px);
		}
			.thumbnail:hover p {
				opacity: 1;
				
				transform: rotateX(0) translateY(0) translateZ(0);
				-webkit-transform: rotateX(0) translateY(0) translateZ(0);
				-moz-transform: rotateX(0) translateY(0) translateZ(0);
			}

#mainimage {
	opacity: 0;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 100%;
	user-select: none;
	-webkit-user-select: none;
	-mox-user-select: none;
	z-index: 1000;
	
	transition: background-color 0.5s cubic-bezier(0.5,0,0,1), opacity 0.5s cubic-bezier(0.5,0,0,1);
	-webkit-transition: background-color 0.5s cubic-bezier(0.5,0,0,1), opacity 0.5s cubic-bezier(0.5,0,0,1);
	-moz-transition: background-color 0.5s cubic-bezier(0.5,0,0,1), opacity 0.5s cubic-bezier(0.5,0,0,1);
}
	#mainimage.visible {
		opacity: 1;
	}
		#mainimage.visible .ui {
			z-index: 500;
		}
	#mainimage.black {
		background-color: #000;
	}
	#mainimage > div {
		position: absolute;
	}
	#photos {
		width: 100%;
		height: 100%;
	}
		#photos .img {
			height: 100%;
			display: block;
			background-repeat: no-repeat;
			background-position: center;
			background-size: contain;
		}
			.photoinfo {
				background-color: rgba(32, 35, 37, 0.8);
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				min-height: 44px;
				padding: 10px 0;
				text-align: center;
				line-height: 1.5;
				box-sizing: border-box;
				transition: all 0.5s cubic-bezier(0.5,0,0,1);
				-webkit-transition: all 0.5s cubic-bezier(0.5,0,0,1);
				-moz-transition: all 0.5s cubic-bezier(0.5,0,0,1);
				font-size: 1em;
				overflow-x: hidden;
				overflow-y: auto;
				transform: translate(0,0);
				-webkit-transform: translate(0,0);
				-moz-transform: translate(0,0);
			}
				.photoinfo.hidden {
					transform: translate(0,5000px);
					-webkit-transform: translate(0,5000px);
					-moz-transform: translate(0,5000px);
				}
				.photoinfo > * {
					margin: 0;
					margin-bottom: 0px;
					padding: 0 44px;
				}
				.photoinfo p {
					margin: 0;
					color: rgba(255, 255, 255, 0.6);
					font-weight: 400;
				}
				.photoinfo h2 {
					color: rgba(255, 255, 255, 1);
					opacity: 1;
					font-size: 1.2em;
				}
				.photoinfo .photodescription {
					margin: 0;
				}
				.photoinfo .metadata {
				}
					.photoinfo .metadata li {
						display: inline-block;
						color: rgba(255, 255, 255, 0.5);
						font-style: italic;
						font-weight: normal;
						display: inline;
						padding: 0 5px;
					}
				.photoinfo .map {
					display: inline;
					margin-top: 10px;
				}
				.store_links a {
					margin: 0 10px;
				}
	#mainimage .ui {
		transition: all 0.5s cubic-bezier(0.5,0,0,1);
		-webkit-transition: all 0.5s cubic-bezier(0.5,0,0,1);
		-moz-transition: all 0.5s cubic-bezier(0.5,0,0,1);
	}	
	.chevron {
		position: absolute;
		width: 16px;
		height: 16px;
		top: 50%;
		left: 50%;
		margin-top: -8px;
		margin-left: -8px;
	}
		.chevron > div {
			position: absolute;
			background-color: rgba(223, 220, 218, 1);
		}
		.chevron .upper {
			width: 15px;
			height: 3px;
		}
		.chevron .lower {
			width: 3px;
			height: 15px;
		}
	.backbutton {
		top: 10px;
		background-color: rgba(32, 35, 37, 0.95);
		border-top-right-radius: 2px;
		border-bottom-right-radius: 2px;
	}
		.backbutton p {
			margin-left: 44px;
			margin-right: 14px;
			text-align: left;
			margin-top: 13px;
			color: rgba(255, 255, 255, 0.6);
		}
		.backbutton .chevron {
			left: 22px;
			margin-top: 2px;
			margin-left: -8px;
			transform: rotate(45deg);
			-webkit-transform: rotate(45deg);
			-moz-transform: rotate(45deg);
		}
			.backbutton .chevron .upper {
				margin-left: -11px;
				margin-top: -1px;
				width: 23px;
				height: 3px;
			}
			.backbutton .chevron .lower {
				margin-top: -11px;
				margin-left: -1px;
				width: 3px;
				height: 23px; 
			}
			.backbutton.hidden {
				margin-left: -200px; 
			}
	.photonav {
		top: 10px;
		background-color: rgba(32, 35, 37, 0.95);
	}
		.photonav.prev {
			position: absolute;
			right: 59px;
			bottom: 0;
			border-top-right-radius: 2px;
			border-bottom-right-radius: 2px;
		}
			.photonav.prev .chevron {
				transform: translateX(4px) rotate(315deg);
				-webkit-transform: translateX(4px) rotate(315deg);
				-moz-transform: translateX(4px) rotate(315deg);
			}
			.photonav.prev.hidden {
				margin-right: -200px; 
			}
		.photonav.next {
			position: absolute;
			right: 10px;
			bottom: 0;
			border-top-right-radius: 2px;
			border-bottom-right-radius: 2px;
		}
			.photonav.next .chevron {
				transform: translateX(4px) rotate(135deg);
				-webkit-transform: translateX(-4px) rotate(135deg);
				-moz-transform: translateX(4px) rotate(135deg);
			}
			.photonav.next.hidden {
				margin-right: -200px; 
			}

.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.5s cubic-bezier(0.5,0,0,1);
	-webkit-transition: all 0.5s cubic-bezier(0.5,0,0,1);
	-moz-transition: all 0.5s cubic-bezier(0.5,0,0,1);
}
	.button a {
		display: block;
		width: 100%;
		height: 100%;
	}
	.button:hover {
		cursor: pointer;
	}

/* 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 */

.infopage {
	position: absolute;	
}
	.infopage p,
	.infopage li {
		line-height: 1.5;
		margin-bottom: 0.5em;
	}
	.infopage h3 {
		margin-bottom: 0.5em;
		margin-top: 1em;
	}
		.infopage h3:first-child {
			margin-top: 0;
		}

#contact {
	left: 50%;
	width: 320px;
	margin-left: -160px;
}
	#contact h2 {
		line-height: 1;
		padding: 1em 0;
		padding-left: 10px;
	}
	
	#contact_error,
	#contact_success {
		display: none;
		padding: 1em 0;
		padding-left: 10px;
		width: 310px;
	}
	
	#contact_success {
		border-top: 1px solid rgba(223, 220, 218, 0.1);
		border-bottom: 1px solid rgba(223, 220, 218, 0.1);
		color: color: rgba(223, 220, 218, 1);
		background-color: rgba(223, 220, 218, 0.05);
	}
	
	#contact_error {
		border-top: 1px solid rgba(223, 220, 218, 0.1);
		border-bottom: 1px solid rgba(223, 220, 218, 0.1);
		background-color: rgba(255, 0, 0, 0.1);
	}
	
	#contact #inputcontainer {
		padding-left: 10px;
		border-top: 1px solid rgba(223, 220, 218, 0.1);
		border-bottom: 1px solid rgba(223, 220, 218, 0.1);
		margin-bottom: 20px;
		width: 310px;
	}
		#inputcontainer .inputline {
			border-top: 1px solid rgba(223, 220, 218, 0.1);
			line-height: 1.5;
		}
			#inputcontainer .inputline > * {
				padding: 1em 0;
			}
			#inputcontainer .inputline:first-child {
				border-top: 0;
			}
			#inputcontainer .inputline:after {
				visibility: hidden;
				display: block;
				font-size: 0;
				content: " ";
				clear: both;
				height: 0; 
			}
		#inputcontainer label {
			display: block;
			float: left;
			width: 100px;
			color: rgba(223, 220, 218, 1);
		}
		
		#inputcontainer input,
		#inputcontainer textarea {
			background: none;
			border: 2px solid rgba(0,0,0,0);
			color: #fff;
			-webkit-font-smoothing: antialiased;
		}
			input::-webkit-input-placeholder,
			textarea::-webkit-input-placeholder { /* WebKit browsers */
			    color: rgba(223, 220, 218, 0.4);
			}
			input:-moz-placeholder,
			textarea:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
			    color: rgba(223, 220, 218, 1);
			}
			input::-moz-placeholder,
			textarea::-moz-placeholder { /* Mozilla Firefox 19+ */
			    color: rgba(223, 220, 218, 1);
			}
			input:-ms-input-placeholder,
			textarea:-ms-input-placeholder { /* Internet Explorer 10+ */
			    color: rgba(223, 220, 218, 1);
			}
		
		#inputcontainer input {
			display: inline-block;
			width: 200px;
		}
		#inputcontainer textarea {
			width: 200px;
			max-width: 200px;
			min-height: 100px;
		}
	#contact #rc {
		padding: 0 0 20px 0;
	}
		#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: 320px;
		height: 44px;
		margin: 10px 0;
		border: 0;
		font-family: 'Raleway', Helvetica, Arial, sans-serif;
		font-weight: 400;
		font-size: 15px;
		color: rgba(223, 220, 218, 1);
		background-color: rgba(223, 220, 218, 0.2);
		border-radius: 2px;
	}
		#contact button:hover {
			cursor: pointer;
		}

#about {
	min-height: 200px;
	width: 960px;
	left: 50%;
	padding-bottom: 50px;
	margin-left: -480px;
}
	#about #titlecard {
		position: static;
		width: 100%;
		top: 0;
		text-align: center;
		padding: 50px 0;
		margin-bottom: 50px;
		border-bottom: 1px solid rgba(223, 220, 218, 0.1);
	}
		#titlecard .avatar {
			margin-bottom: 20px;
			height: 200px;
			border-radius: 100px;
		}
	
	.leftcolumn {
		float: left;
		width: 61.8%;
	}
		#about .contactinfo img {
			vertical-align: -0.3em;
			padding-right: 0.5em;
		}
	
	.rightcolumn {
		float: left;
		width: 38.1%;
	}
		.map {
			border-radius: 2px;
			filter: grayscale(50%);
			-webkit-filter: grayscale(50%);
			-moz-filter: grayscale(50%);
		}

/* styles for touch devices */
.touchdevice header {
	position: absolute;
}

.touchdevice .collection p {
	opacity: 1;
	font-size: 15px;
	margin-top: 5px; 
	transform: rotateX(0);
	-webkit-transform: rotateX(0);
	-moz-transform: rotateX(0);
}

.touchdevice .collection:hover img {
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
	transform: rotateX(0) translateY(0);
	-webkit-transform: rotateX(0) translateY(0);
	-moz-transform: rotateX(0) translateY(0);
}

/* style for non-fullscreen photos */

	@media screen and (min-height: 1170px) and (min-width: 1170px) {
		#photos .img {
			background-size: contain;
		}
	}


/* ipad */
@media screen and (max-width: 960px) {
	#about {
		width: 720px;
		margin-left: -360px;
	}
		.collection p {
			opacity: 1;
			font-size: 15px;
			margin-top: 5px;
			transform: rotateX(0);
			-webkit-transform: rotateX(0);
			-moz-transform: rotateX(0);
		}
}

/* phones */
@media screen and (max-width: 767px) {
	h1 {
		font-size: 50px;
	}
	
	h2 {
		font-size: 15px;
	}
	
	header .headercollection, .selected {
		display: none;
	}
	
	#titlecard {
		top: 30%;
	}
		#titlecard .logo {
			max-height: 50px;
			margin-bottom: 10px;
		}
		#titlecard h2 {
			margin-top: 10px;
		}
		#titlecard .avatar {
			margin-bottom: 10px;
			height: 100px;
			border-radius: 50px;
		}
	
	#collections {
		padding-bottom: 40px;
	}
		#collections img {
			height: 75px;
		}

	#about {
		width: 100%;
		left: 0;
		margin-left: 0;
	}
		#about #titlecard {
			margin-bottom: 20px;
		}
		#about > * {
			float: none;
			width: 90%;
			padding: 0 5%;
			margin-bottom: 20px;
		}
		
	.thumbnail {
		width: 33.133%; /* 3-across */
	}
	.backbutton {
		top: 0;
	}
	.photonav {
		display: none;
	}
}

@media screen and (max-height: 320px) {
	#titlecard {
		top: 20%;
	}
}