@import url("http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600");
@import url("font-awesome.min.css");

	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}

/* Basic */

	body {
		background: #f0f4f4;
		color: #5b5b5b;
		font-size: 15pt;
		line-height: 1.85em;
		font-family: "Yuji Syuku", serif;
		font-weight: 300;
	}

	h1, h2, h3, h4, h5, h6 {
		font-weight: 400;
		color: #483949;
		line-height: 1.25em;
	}

	h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
		color: inherit;
		text-decoration: none;
		border-bottom-color: transparent;
	}

	h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong {
		font-weight: 600;
	}

	h2 {
		font-size: 2.0em;
		margin: 0 0 3em 0;
		text-align: center;
	}

	h3 {
		font-size: 1.5em;
		margin: 0 0 1em 0;
	}

	h4 {
		font-size: 1em;
		margin: 0 0 0.25em 0;
	}

	a {
		color: inherit;
		border-bottom: solid 1px rgba(128, 128, 128, 0.15);
		text-decoration: none;
		-moz-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
		-webkit-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
		-ms-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
		transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
	}

	article {
		position: relative;
		margin: 0 0 3em 0;
	}

		article a {
			color: #04C;
		}

		a:hover {
			color: #bbbbbb;
			border-bottom-color: transparent;
		}

	p, ul, ol, dl, table {
		margin-bottom: 1em;
	}

	p {
		text-align: justify;
	}

	header {
		margin: 0 0 1em 0;
	}

	#filter {
		width:100%;
		height:100%;
		position:absolute;
		background-color:rgba(0,0,0,0.5);
		z-index:1;
	}

		header > p {
			display: block;
			font-size: 1.2em;
			margin: 1em 0 2em 0;
			line-height: 1.5em;
			text-align: inherit;
		}

/* Initial */
	
	.initialLogo {
		position:absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width:200px;
		height:200px;
		background-color:#000000;
		margin:auto;
		display: inline-block;
	}

/* Header */

	#header {
		position: relative;
		background-size: cover;
		background-position: center center;
		background-attachment: fixed;
		color: #fff;
		padding: 0;
		cursor: default;
		overflow: hidden;
	}

		#header .logo {
			position: absolute;
			z-index: 5;
			margin: 0;
			top: 25px;
			display: inline-block;
			vertical-align: middle;
		}

		#header .inner {
			position: absolute;
			z-index: 5;
			margin: 0;
			display: inline-block;
			vertical-align: middle;
			height: 100px;
		}

		#header header {
			display: inline-block;
		}

			#header header > p {
				font-size: 1.25em;
				margin: 0;
			}

		#header h1 {
			color: #fff;
			font-size: 3em;
			line-height: 1em;
		}

			#header h1 a {
				color: inherit;
			}

		#header .bg {
			position:absolute;
			width:100%;
			height:100%;
			background-color:#000000;
			z-index: 0;
		}

		#header .logo_big {
			position:absolute;
			z-index:200;
			top: 0;
			bottom: 0;
			right: 0;
			left: 0;
			margin: auto;
			display:none;
		}

		#header .bgImage {
			position:absolute;
			padding-right:1px;
			top: -10000px;
			left: -10000px;
			right: -10000px;
			bottom: -10000px;
			margin:auto;
		}

		.content-page .bgImage {
			width: 100%;
		}

	body.no-sidebar header {
		margin: 0 0 0 0;
	}

	body.homepage #header {
		height: 100vh;
		min-height: 40em;
	}

		body.homepage #header h1 {
			font-size: 4em;
		}

		body.homepage #header .inner {
			top: 40%;
		}

	body.no-sidebar #header {
		height: 320px;
		/*min-height: 40em;*/
	}

		body.no-sidebar #header h1 {
			font-size: 4em;
		}

		body.no-sidebar #header .inner {
			top: 40%;
		}

		body.no-sidebar article img {
			margin-bottom: 30px;
		}

/* Nav */

	#nav {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		text-align: center;
		padding: 2em 0 2em 0;
		z-index: 4;
		overflow: hidden;
	}

		#nav > ul {
			line-height: 0px;
			position: relative;
			display: inline-block;
			margin: 0;
			height: 21px;
			/*border-left: solid 1px rgba(192, 192, 192, 0.35);*/
			/*border-right: solid 1px rgba(192, 192, 192, 0.35);*/
		}

			#nav > ul > li {
				display: inline-block;
				margin: -9px 0.5em 0 0.5em;
				border-radius: 0.5em;
				padding: 0.85em;
				border: solid 1px transparent;
				-moz-transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out;
				-webkit-transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out;
				-ms-transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out;
				transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out;
			}

				#nav > ul > li.active {
					border-color: rgba(192, 192, 192, 0.35);
				}

				#nav > ul > li > a, #nav > ul > li > span {
					display: block;
					color: inherit;
					text-decoration: none;
					border: 0;
					outline: 0;
				}

				#nav > ul > li > ul {
					display: none;
				}

	.wrapper {
		padding: 6em 0 6em 0;
	}

	#bgLogo {
		position: absolute;
		text-align: center;
		top: -45px;
		width: 100%;
	}

	#line {
		padding: 1em 0 2em 0;
	}

	.inline {
		float: left;
	}

	.title {
		position: relative;
		height: 35px;
		margin-bottom: 30px;
	}

	#gradationBottom{
		z-index: 10;
		position: absolute;
		width: 100%;
		height: 120px;
		bottom: 0;
		background: -webkit-linear-gradient(bottom,rgba(237,241,241,1),rgba(237,241,241,0)); /* Safari,Google Chrome用 */
		background: -moz-linear-gradient(bottom,rgba(237,241,241,1),rgba(237,241,241,0)); /* Firefox用 */  
		background: -ms-linear-gradient(bottom,rgba(237,241,241,1),rgba(237,241,241,0));
		background: linear-gradient(bottom,rgba(237,241,241,1),rgba(237,241,241,0));
	}

	#gradationTop{
		z-index: 10;
		position: absolute;
		width: 100%;
		height: 120px;
		top: 0;
		background: -webkit-linear-gradient(top,rgba(237,241,241,1),rgba(237,241,241,0)); /* Safari,Google Chrome用 */
		background: -moz-linear-gradient(top,rgba(237,241,241,1),rgba(237,241,241,0)); /* Firefox用 */  
		background: -ms-linear-gradient(top,rgba(237,241,241,1),rgba(237,241,241,0));
		background: linear-gradient(top,rgba(237,241,241,1),rgba(237,241,241,0));
	}

	.content {
		position: relative;	
		height: auto;
		width: 100vw;
		left: -1000px; /* adjusted by script in gallery.html*/
	}

	#contact,#biography{
		max-width: 80%;
	}


/* Content */

	.container {
		position: relative;
	}

		.container #contentImage {
			width: 100%;
			padding-right: 1px;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
		}

		.container #bgLogoImage {
			position: relative;
			padding-right: 1px;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			z-index: -1
		}

		.container #titleImage {
			height: 100%;
			width: auto;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
		}

/* Picture */
	.pictures {
		position: relative;	
		height: 455px;
	}

	#gradation_left{
		z-index: 10;
		position: absolute;
		width: 120px;
		height: 100%;
		background: -webkit-linear-gradient(left,rgba(237,241,241,1),rgba(237,241,241,0)); /* Safari,Google Chrome用 */
		background: -moz-linear-gradient(left,rgba(237,241,241,1),rgba(237,241,241,0)); /* Firefox用 */  
		background: -ms-linear-gradient(left,rgba(237,241,241,1),rgba(237,241,241,0));
		background: linear-gradient(left,rgba(237,241,241,1),rgba(237,241,241,0));
	}

	#gradation_right{
		z-index: 10;
		position: absolute;
		right: 0;
		width: 120px;
		height: 100%;
		background: -webkit-linear-gradient(right,rgba(237,241,241,1),rgba(237,241,241,0)); /* Safari,Google Chrome用 */
		background: -moz-linear-gradient(right,rgba(237,241,241,1),rgba(237,241,241,0)); /* Firefox用 */  
		background: -ms-linear-gradient(right,rgba(237,241,241,1),rgba(237,241,241,0));
		background: linear-gradient(right,rgba(237,241,241,1),rgba(237,241,241,0));
	}

	#ul_pics_container {
		overflow: hidden;
		-webkit-overflow-scrolling : touch;
	}

	#ul_thumbs_container {
		overflow: scroll;
		-webkit-overflow-scrolling : touch;
	}

	.pictures ul {
		list-style:none;
		padding-left: 0;
		left: 0;
		width: 10000px;
		margin: auto;
		position: relative;
		float: left;
	}

	.pictures ul li {
		float: left;
		padding: 8px;
		margin: 0px;
	}

	.thumbnails {
		position: relative;	
		height: 50px;
	}

	.thumbnails ul{
		list-style:none;
		padding-left: 0;
		width: 1224px;
		margin: auto;
		position: relative;
	}

	.thumbnails ul li {
		float: left;
		width: 80px;
		padding: 0px;
		margin: 0px;
		text-align: center;
	}

	#ul_thumbs_container {
		position: relative;
		left: 0;
	}

	#hoverBox {
		position: absolute;
		left: 300px;
		width: 72px;
		height: 54px;
		background: rgba(0,0,0,0.5);
	}

/* Footer */
	#footer {
		position: relative;
		background: #21170d;
		width: 100%;
		height: 200px;
		overflow: hidden;
	}

		#footer p {
			position: absolute;
			margin-bottom: 0;
			text-align: center;
			bottom: 0;
			right: 10px;
			margin-bottom: 10px;
		}

		#footer #footerImage {
			position:absolute;
			width:100%;
			padding-right:1px;
			top: -10000px;
			left: -10000px;
			right: -10000px;
			bottom: -10000px;
			margin:auto;
		}

/* Wide */

	@media screen and (min-width: 1281px) {

		/* Basic */

			body, input, textarea, select {
				font-size: 14pt;
				line-height: 1.75em;
			}

		/* Wrapper */

			.wrapper {
				padding-left: 10em;
				padding-right: 10em;
			}

		/* Header */

			#header {
				background-attachment: scroll;
			}

				#header .inner {
					padding-left: 2em;
					padding-right: 2em;
				}

			nav #menuImage {
				height:26px
			}

			#nav > ul > li {
				font-size: 18px;
			}
	}

/* Normal */

	@media screen and (max-width: 1280px) {

		/* Basic */

			body, input, textarea, select {
				font-size: 12pt;
				line-height: 1.5em;
			}

		/* Wrapper */

			.wrapper {
				padding-left: 5em;
				padding-right: 5em;
			}

		/* Header */

			#header {
				background-attachment: scroll;
			}

				#header .inner {
					padding-left: 2em;
					padding-right: 2em;
				}

			nav #menuImage {
				height:23px
			}


			#nav > ul > li {
				padding: 0.85em 0.14em 0.85em 0.14em;
			}

	}


/* Narrower */

	@media screen and (min-width: 840px) {

		/* Basic */

			body, input, textarea, select {
				font-size: 13pt;
				line-height: 1.65em;
			}

			#titleImage {
				width: 400px;
			}

			#header p {
				position: relative;
				left: 18px;
				font-size: 30px;
			}

			#header .logo {
				left: 40px;
			}

			#header .logo_big {
				width:200px;
			}

			.title {
				height: 35px;
			}

			.container #bgLogoImage {
				width: 120px;
			}


		/* Footer */

			#footer {
				padding: 0;
			}

			nav #menuImage {
				height:23px
			}

	}

/* Mobile */

	#navPanel, #titleBar {
		display: none;
	}

	@media screen and (max-width: 840px) {

		/* Basic */

			html, body {
				overflow-x: hidden;
			}

			body, input, textarea, select {
				font-size: 12.5pt;
				line-height: 1.5em;
			}

			h2 {
				font-size: 1.5em;
			}

			h3 {
				font-size: 1.25em;
			}

			.title {
				height: 26px;
			}

			.container {
				font-size: 0.8em;
			}

			.container #bgLogoImage {
				width: 80px;
				margin-top: 15px
			}

			#header .logo {
				left: 21px;
			}

			#header .logo_big {
				width:100px;
			}

			#footer p {
				font-size: 0.8em;
			}

		/* Section/Article */

			header > p {
				font-size: 1.25em;
			}

			#header p {
				position: relative;
				left: 10px;
				font-size: 15px;
			}

		/* List */

			form ul.actions {
				margin-top: 0;
			}

			ul.actions li {
				display: block;
				margin: 0.75em 0 0 0;
			}

				ul.actions li:first-child {
					margin-top: 0;
				}

			ul.menu {
				height: auto;
				text-align: center;
			}

				ul.menu li {
					display: block;
					border: 0;
					padding: 0.75em 0 0 0;
					margin: 0;
				}

					ul.menu li:first-child {
						padding-top: 0;
					}

			ul.icons {
				font-size: 1em;
				padding: 0.35em 0.5em 0.35em 0.5em;
			}

				ul.icons li a {
					width: 2.25em;
				}

			#header .bgImage {
				margin: auto;
			}

		/* Button */

			input[type="button"],
			input[type="submit"],
			input[type="reset"],
			button,
			.button {
				display: block;
				padding: 0;
				line-height: 3em;
				width: 100%;
			}

		/* Off-Canvas Navigation */

			#page-wrapper {
				-moz-backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				backface-visibility: hidden;
				-moz-transition: -moz-transform 0.5s ease;
				-webkit-transition: -webkit-transform 0.5s ease;
				-ms-transition: -ms-transform 0.5s ease;
				transition: transform 0.5s ease;
				padding-bottom: 1px;
			}

			#navButton {
				-moz-backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				backface-visibility: hidden;
				-moz-transition: -moz-transform 0.5s ease;
				-webkit-transition: -webkit-transform 0.5s ease;
				-ms-transition: -ms-transform 0.5s ease;
				transition: transform 0.5s ease;
				display: block;
				height: 44px;
				left: 0;
				position: fixed;
				top: 0;
				width: 100%;
				z-index: 10001;
			}

				#navButton .toggle {
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					border: 0;
					outline: 0;
				}

					#navButton .toggle:before {
						font-family: FontAwesome;
						text-decoration: none;
						font-style: normal;
						font-weight: normal;
						-webkit-font-smoothing: antialiased;
						-moz-osx-font-smoothing: grayscale;
						content: '\f0c9';
						color: #fff;
						color: rgba(255, 255, 255, 0.75);
						text-align: center;
						display: block;
						font-size: 14px;
						width: 80px;
						height: 30px;
						line-height: 30px;
						position: absolute;
						left: 50%;
						margin-left: -40px;
						background: rgba(132, 128, 136, 0.75);
						border-top: 0;
						border-radius: 0 0 0.35em 0.35em;
					}

			#navPanel {
				-moz-backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				backface-visibility: hidden;
				-moz-transform: translateY(-50vh);
				-webkit-transform: translateY(-50vh);
				-ms-transform: translateY(-50vh);
				transform: translateY(-50vh);
				-moz-transition: -moz-transform 0.5s ease;
				-webkit-transition: -webkit-transform 0.5s ease;
				-ms-transition: -ms-transform 0.5s ease;
				transition: transform 0.5s ease;
				display: block;
				height: 50vh;
				left: 0;
				overflow-y: auto;
				position: fixed;
				top: 0;
				width: 100%;
				z-index: 10002;
				background: #1f1920;
				box-shadow: inset 0px -2px 5px 0px rgba(0, 0, 0, 0.25);
				font-size: 1em;
			}

				#navPanel:before {
					content: '';
					display: block;
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					background: url("images/overlay.png");
					background-size: 128px 128px;
				}

				#navPanel .link {
					position: relative;
					z-index: 1;
					display: block;
					text-decoration: none;
					padding: 0.5em;
					color: #ddd;
					border: 0;
					border-top: dotted 1px rgba(255, 255, 255, 0.05);
				}

					#navPanel .link:first-child {
						border-top: 0;
					}

					#navPanel .link.depth-0 {
						color: #fff;
						font-weight: 600;
					}

				#navPanel .indent-1 {
					display: inline-block;
					width: 1em;
				}

				#navPanel .indent-2 {
					display: inline-block;
					width: 2em;
				}

				#navPanel .indent-3 {
					display: inline-block;
					width: 3em;
				}

				#navPanel .indent-4 {
					display: inline-block;
					width: 4em;
				}

				#navPanel .indent-5 {
					display: inline-block;
					width: 5em;
				}

				#navPanel .depth-0 {
					color: #fff;
				}

			body.navPanel-visible #page-wrapper {
				-moz-transform: translateY(50vh);
				-webkit-transform: translateY(50vh);
				-ms-transform: translateY(50vh);
				transform: translateY(50vh);
			}

			body.navPanel-visible #navButton {
				-moz-transform: translateY(50vh);
				-webkit-transform: translateY(50vh);
				-ms-transform: translateY(50vh);
				transform: translateY(50vh);
			}

			body.navPanel-visible #navPanel {
				-moz-transform: translateY(0);
				-webkit-transform: translateY(0);
				-ms-transform: translateY(0);
				transform: translateY(0);
			}

		/* Wrapper */

			.wrapper {
				padding: 3em 1em 3em 1em;
			}

		/* Header */

			#header {
				background-attachment: scroll;
				/*padding: 2.5em 0 0 0;*/
			}

				#header .inner {
					padding-top: 1.5em;
					padding-left: 1em;
					padding-right: 1em;
				}

				#header header > p {
					font-size: 1em;
				}

				#header h1 {
					font-size: 1.75em;
				}

				#header hr {
					top: 1em;
					margin-bottom: 2.5em;
				}

			body.homepage #header {
				min-height: 0;
				padding: 5.5em 0 5em 0;
				height: auto;
			}

				body.homepage #header:before {
					display: none;
				}

				body.homepage #header h1 {
					font-size: 2.5em;
				}


			body.no-sidebar #header {
				min-height: 250px;
				/*padding: 5.5em 0 5em 0;*/
				height: auto;
			}

				body.no-sidebar #header:before {
					display: none;
				}

				body.no-sidebar #header h1 {
					font-size: 2.5em;
				}

			#titleImage {
				width: 200px;
			}


		/* Nav */

			#nav {
				display: none;
			}

		/* Banner */

			#banner {
				padding: 3em 2em 3em 2em;
			}

		/* Sidebar */

			#sidebar > hr:first-of-type {
				display: block;
			}

		/* Main */

			#main > header {
				text-align: center;
			}

		/* Carousel */

			.carousel {
				padding: 0.5em 0 0.5em 0;
			}

				.carousel .reel {
					padding: 0 0.5em 0 0.5em;
				}

				.carousel article {
					width: 14em;
					padding-bottom: 2em;
					margin: 0 0.5em 0 0;
				}

					.carousel article .image {
						margin-bottom: 2em;
					}

	}

	@media screen and (max-width: 600px) {
		#footer {
			height: 150px;
		}
	}