@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Noto+Serif+JP:wght@200..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,300i,400i");
/* Ethereal by HTML5 UP	html5up.net | @ajlkn Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) */
/* Reset */
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;
}
*, *:before, *:after {
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
html {
		width: 100%;
		height: 100%;
		font-size:100%;
	}
body {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-align-items: center;
		-webkit-align-items: center;
		-ms-align-items: center;
		align-items: center;
		-moz-justify-content: -moz-flex-start;
		-webkit-justify-content: -webkit-flex-start;
		-ms-justify-content: -ms-flex-start;
		justify-content: flex-start;
		-ms-overflow-style: scrollbar;
		width: 100%;
		height: 100%;
		min-height: 30rem;
		overflow: hidden;
	}
body:before {
			-moz-animation: load-spinner 1s infinite linear;
			-webkit-animation: load-spinner 1s infinite linear;
			-ms-animation: load-spinner 1s infinite linear;
			animation: load-spinner 1s infinite linear;
			-moz-transition: opacity 0.25s ease;
			-webkit-transition: opacity 0.25s ease;
			-ms-transition: opacity 0.25s ease;
			transition: opacity 0.25s ease;
			-moz-transition-delay: 0s;
			-webkit-transition-delay: 0s;
			-ms-transition-delay: 0s;
			transition-delay: 0s;
			-moz-pointer-events: none;
			-webkit-pointer-events: none;
			-ms-pointer-events: none;
			pointer-events: none;
			content: '';
			display: block;
			position: absolute;
			top: 50%;
			left: 50%;
			width: 4rem;
			height: 4rem;
			margin: -2rem 0 0 -2rem;
			background-position: center;
			background-repeat: no-repeat;
			background-size: 4rem;
			opacity: 0;
		}
body:after {
			-moz-pointer-events: none;
			-webkit-pointer-events: none;
			-ms-pointer-events: none;
			pointer-events: none;
			content: '';
			display: block;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: -1;
			background-attachment: fixed;
			background-color: #f8f8f8;
		}
body.is-loading *, body.is-loading *:before, body.is-loading *:after {
			-moz-animation: none !important;
			-webkit-animation: none !important;
			-ms-animation: none !important;
			animation: none !important;
			-moz-transition: none !important;
			-webkit-transition: none !important;
			-ms-transition: none !important;
			transition: none !important;
		}
body.is-loading:before {
			-moz-transition: opacity 1s ease;
			-webkit-transition: opacity 1s ease;
			-ms-transition: opacity 1s ease;
			transition: opacity 1s ease;
			-moz-transition-delay: 0.75s;
			-webkit-transition-delay: 0.75s;
			-ms-transition-delay: 0.75s;
			transition-delay: 0.75s;
			opacity: 0.25;
		}

@media screen and (max-width: 768px) {
	html {
		height: auto;
		}
	body {
		height: auto;
		overflow-x: hidden;
		overflow-y: auto;
		scroll-behavior: auto;
}}

@media screen and (max-width: 1680px) {
	html {
		font-size: 12pt;
	}}
@media screen and (max-width: 1280px) {

	html {
		font-size: 11pt;
	}}


	a {
		text-decoration: none;
	}

	a:hover {
		color:;
		}

	strong, b {
		color: rgba(255, 255, 255, 1);
		font-weight: 400;
	}

	em, i {
		font-style: italic;
	}

	p {
		font-size: .9em;
		margin: 0;
		color:#fff;
		line-height:2;
	}
	span{
		font-size:.9em;
		line-height:2;
	}

	body.is-ie p {
			width: 100%;
	}

	h1, h2, h3, h4, h5, h6 {
		color: rgba(255, 255, 255, 0.875);
		font-family: Arial, Helvetica, sans-serif;

		line-height: 1.3;
		margin: 0 0 0.75rem 0;
		letter-spacing: 1px;
	}

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

	h1.major, h2.major, h3.major {
		position: relative;
	}

	h1.major:after, h2.major:after, h3.major:after {

	}

	h1 {
		font-size: 2rem;
		font-weight:300;
		line-height: 1.2;
	}

	h1.major {
			margin: 0 0 2.625rem 0;
		}

	h1.major:after {
			bottom: -1.325rem;
		}

	h2 {
		font-size: 1.75rem;
		line-height: 1.2;
	}

		h2.major {
			margin: 0 0 1.9875rem 0;
		}

			h2.major:after {
				bottom: -1.2rem;
			}

	h3 {
		font-size: 1.325rem;
	}

		h3.major {
			margin: 0 0 1.875rem 0;
		}

			h3.major:after {
				bottom: -0.75rem;
			}
	h4 {
		font-size: 1rem;
	}

	h5 {
		font-size: 0.9rem;
	}

	h6 {
		font-size: 0.7rem;
	}

	sub {
		font-size: 0.8rem;
		position: relative;
		top: 0.5rem;
	}

	sup {
		font-size: 0.8rem;
		position: relative;
		top: -0.5rem;
	}

	blockquote {
		border-left: solid 0.25rem rgba(255, 255, 255, 0.25);
		font-style: italic;
		margin: 0 0 1.5rem 0;
		padding: 0.375rem 0 0.375rem 1.5rem;
	}


	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav{
		display: block;
	}
	body {
		-webkit-text-size-adjust: none;
		line-height: 1;
	}
	ol, ul {
		list-style: none;
	}

	blockquote, q {
		quotes: none;
	}
	blockquote:before, blockquote:after, q:before, q:after {
		content: '';
		content: none;
	}
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}

hr {
		border: 0;
		border-bottom: solid 2px rgba(255, 255, 255, 0.25);
		margin: 1.875rem 0;
	}

.align-left {
		text-align: left;
	}

.align-center {
		text-align: center;
	}

.align-right {
		text-align: right;
	}

@media screen and (max-width: 736px) {
		html {
			font-size: .9em;
		}
		h1 {
			font-size: 2.25rem;
			line-height: 1.2;
		}

			h1.major {
				margin: 0 0 2.625rem 0;
			}

				h1.major:after {
					bottom: -1.325rem;
				}

		h2 {
			font-size: 1.5rem;
			line-height: 1.2;
		}

			h2.major {
				margin: 0 0 1.9875rem 0;
			}

				h2.major:after {
					bottom: -1.2rem;
				}

		h3 {
			font-size: 1rem;
		}

			h3.major {
				margin: 0 0 1.875rem 0;
			}

				h3.major:after {
					bottom: -0.75rem;
				}

		h4 {
			font-size: 1rem;
		}

		h5 {
			font-size: 0.9rem;
		}

		h6 {
			font-size: 0.7rem;
		}

		h1 br, h2 br, h3 br, h4 br, h5 br, h6 br {
			display: none;
		}

	}


.howto{
	position:absolute;
	right:20px;
	bottom:20px;
	font-size:.8em;
}

/* Fonts */

	.open-sans {
		font-family: "Open Sans", sans-serif;
		font-optical-sizing: auto;
		font-weight: 300;
		font-style: normal;
		font-variation-settings:
		width:100%;
	}
	.noto-serif-jp-mincho {
		font-family: "Noto Serif JP", serif;
		font-optical-sizing: auto;
		font-weight: 300;
		font-style: normal;
	}
	.noto-serif-jp-gothic {
		font-family: "Noto Serif JP", serif;
		font-optical-sizing: auto;
		font-weight: 300;
		font-style: normal;
	}




/* Panel */

.panel {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-grow: 0;
		-webkit-flex-grow: 0;
		-ms-flex-grow: 0;
		flex-grow: 0;
		-moz-flex-shrink: 0;
		-webkit-flex-shrink: 0;
		-ms-flex-shrink: 0;
		flex-shrink: 0;

		-moz-justify-content: center;
		-webkit-justify-content: center;
		-ms-justify-content: center;
		justify-content: center;

		-moz-align-items: stretch;
		-webkit-align-items: stretch;
		-ms-align-items: stretch;
		align-items: stretch;

		height: 100%;
		overflow-x: hidden;
		overflow-y: auto;

	}

	.panel > * {
			position: relative;
			min-width: 10rem;
		}

			.panel > *.color0 {
				background-color:#f3f3f3;
			}

			.panel > *.color1 {
				background-color: #726193;
			}

			.panel > *.color2 {
				background-color: #e37b7c;
			}

			.panel > *.color3 {
				background-color: #ffe4b4;
			}

			.panel > *.color4 {
				background-color: #353865;
			}

	.panel > .intro {
			padding: 3.5rem 3.5rem 2rem 3.5rem ;
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-flex-grow: 0;
			-webkit-flex-grow: 0;
			-ms-flex-grow: 0;
			flex-grow: 0;
			-moz-flex-shrink: 0;
			-webkit-flex-shrink: 0;
			-ms-flex-shrink: 0;
			flex-shrink: 0;

			-moz-justify-content: center;
			-webkit-justify-content: center;
			-ms-justify-content: center;
			justify-content: center;

			-moz-align-items: -moz-flex-start;
			-webkit-align-items: -webkit-flex-start;
			-ms-align-items: -ms-flex-start;
			align-items: flex-start;

			-moz-flex-direction: column;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
			width: 98%;
		}

	.panel > .intro.joined {
			width: 98%;
			padding-right: 0;
		}

	.panel > .intro.joined + .inner {
			padding-left: 2.625rem;
		}

	.panel > .inner {
			padding: 3.5rem 3.5rem 2rem 3.5rem ;
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-flex-grow: 1;
			-webkit-flex-grow: 1;
			-ms-flex-grow: 1;
			flex-grow: 1;
			-moz-flex-shrink: 1;
			-webkit-flex-shrink: 1;
			-ms-flex-shrink: 1;
			flex-shrink: 1;
			-moz-justify-content: center;
			-webkit-justify-content: center;
			-ms-justify-content: center;
			justify-content: center;
			-moz-align-items: -moz-flex-start;
			-webkit-align-items: -webkit-flex-start;
			-ms-align-items: -ms-flex-start;
			align-items: flex-start;
			-moz-flex-direction: column;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
			position: relative;
			width: 100%;
			max-width:100%;
		}

	.panel > .inner.columns {
				display: -moz-flex;
				display: -webkit-flex;
				display: -ms-flex;
				display: flex;
				-moz-justify-content: center;
				-webkit-justify-content: center;
				-ms-justify-content: center;
				justify-content: center;
				-moz-align-items: center;
				-webkit-align-items: center;
				-ms-align-items: center;
				align-items: center;
				-moz-flex-direction: row;
				-webkit-flex-direction: row;
				-ms-flex-direction: row;
				flex-direction: row;
			}

	.panel > .inner.columns > * {
					-moz-flex-grow: 0;
					-webkit-flex-grow: 0;
					-ms-flex-grow: 0;
					flex-grow: 0;
					-moz-flex-shrink: 0;
					-webkit-flex-shrink: 0;
					-ms-flex-shrink: 0;
					flex-shrink: 0;
					margin-left: 3.5rem;
				}

	.panel > .inner.columns > :first-child {
					margin-left: 0;
				}

	.panel > .inner.columns.divided > * {
					margin-left: 7rem;
				}

	.panel > .inner.columns.divided > *:before {
					content: '';
					position: absolute;
					top: 3.5rem;
					width: 2px;
					height: calc(100% - 7rem);
					margin-left: -3.5rem;
					background-color: rgba(255, 255, 255, 0.25);
					}

	.panel > .inner.columns.divided > :first-child {
					margin-left: 0;
				}

	.panel > .inner.columns.divided > :first-child:before {
						display: none;
					}

	.panel > .inner.columns.aligned {
					-moz-align-items: -moz-flex-start;
					-webkit-align-items: -webkit-flex-start;
					-ms-align-items: -ms-flex-start;
					align-items: flex-start;
				}


	.panel .span-1 {
			width: 10rem;
		}

	.panel .span-5 {
			width: 50rem;
		}
		
	.panel .span-7 {
			width: 70rem;
		}
	.panel .span-10 {
			width: 100rem;
		}




	.panel.small {
			width: 35rem;
		}

	.panel.medium {
			width: 50rem;
		}

	.panel.large {
			width: 65rem;
		}



	.panel.small .span-1, .panel.medium .span-1, .panel.large .span-1 {
			width: 10%;
		}

	.panel.small .span-5, .panel.medium .span-5, .panel.large .span-5 {
			width: 50%;
		}

	.panel.small .span-7, .panel.medium .span-7, .panel.large .span-7 {
			width: 70%;
		}

	.panel.small .span-10, .panel.medium .span-10, .panel.large .span-10 {
			width: 100%;
		}


	.panel.color0 {
			background-size: 128px 128px, auto;
		}

	.panel.color1 {
			background-size: 128px 128px, auto;
			background-color: #726193;
		}

	.panel.color2 {
			background-size: 128px 128px, auto;
			background-color: #e37b7c;
		}

	.panel.color3 {
			background-size: 128px 128px, auto;
			background-color: #ffe4b4;
		}

	.panel.color4 {
			background-size: 128px 128px, auto;
			background-color: #353865;
		}



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

		.panel {
			-moz-flex-direction: column;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
			min-height: 36vh;
		}

			.panel > *.color1 {
				background-size: 128px 128px, auto;
				background-color: #726193;
			}

			.panel > *.color2 {
				background-size: 128px 128px, auto;
				background-color: #e37b7c;
			}

			.panel > *.color3 {
				background-size: 128px 128px, auto;
				background-color: #ffe4b4;
			}

			.panel > *.color4 {
				background-size: 128px 128px, auto;
				background-color: #353865;
			}


			.panel > .intro {
				padding: 2.8875rem 1.75rem 1.3875rem 1.75rem ;
				width: 100% !important;
			}

			.panel > .intro.joined {
					padding-bottom: 0;
					padding-right: 1.75rem;
				}

			.panel > .intro.joined + .inner {
						padding-top: 0;
						padding-left: 1.75rem;
					}

			.panel > .inner {
				padding: 2.8875rem 1.75rem 1.3875rem 1.75rem ;
			}

				.panel > .inner.columns {
					-moz-flex-direction: column;
					-webkit-flex-direction: column;
					-ms-flex-direction: column;
					flex-direction: column;
				}

			.panel > .inner.columns > * {
						margin-left: 0;
						margin-top: 0;
					}

			.panel > .inner.columns > :first-child {
						margin-top: 0;
					}

			.panel > .inner.columns.divided > * {
						margin-left: 0;
						margin-top: 3.5rem;
					}

			.panel > .inner.columns.divided > *:before {
							content: '';
							position: absolute;
							top: auto;
							left: 1.75rem;
							width: calc(100% - 3.5rem);
							height: 2px;
							margin-left: 0;
							margin-top: -1.75rem;
						}

	.panel > .inner.columns.divided > :first-child {
		margin-top: 0;
		}

			

			.panel .span-5 {
				width: 100%;
			}

			.panel .span-7 {
				width: 100%;
			}

			.panel .span-10 {
				width: 100%;
			}


			.panel.small, .panel.medium, .panel.large {
				width: 100% !important;
			}


.panel.small .span-5, .panel.medium .span-5, .panel.large .span-5 {
					width: 100%;
				}

.panel.small .span-7, .panel.medium .span-7, .panel.large .span-7 {
					width: 100%;
				}

				
.panel.small .span-8, .panel.medium .span-8, .panel.large .span-8 {
					width: 100%;
				}

.panel.small .span-10, .panel.medium .span-10, .panel.large .span-10 {
					width: 100%;
				}






.panel.color1 {
				background-size: 128px 128px, auto;
				background-color: #726193;
			}

.panel.color2 {
				background-size: 128px 128px, auto;
				background-color: #e37b7c;
			}

.panel.color3 {
				background-size: 128px 128px, auto;
				background-color: #ffe4b4;
			}

.panel.color4 {
				background-size: 128px 128px, auto;
				background-color: #353865;
			}



	}





/* Panel (Banner) */

	.panel.banner {
		-moz-align-items: stretch;
		-webkit-align-items: stretch;
		-ms-align-items: stretch;
		align-items: stretch;



	}
		.panel.banner .content {
			padding: 3.5rem 3.5rem 2rem 3.5rem ;
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-flex-direction: column;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
			-moz-justify-content: center;
			-webkit-justify-content: center;
			-ms-justify-content: center;
			justify-content: center;
			-moz-flex-grow: 0;
			-webkit-flex-grow: 0;
			-ms-flex-grow: 0;
			flex-grow: 0;
			-moz-flex-shrink: 0;
			-webkit-flex-shrink: 0;
			-ms-flex-shrink: 0;
			flex-shrink: 0;

			background-image:url(../images/moyou.png);
			background-repeat:no-repeat;
			background-position: bottom 0 right 0;

		}

		.panel.banner .content > .actions:last-child {
			margin-bottom: 0;
			}

		.panel.banner .image {
			-moz-flex-grow: 0;
			-webkit-flex-grow: 0;
			-ms-flex-grow: 0;
			flex-grow: 0;
			-moz-flex-shrink: 0;
			-webkit-flex-shrink: 0;
			-ms-flex-shrink: 0;
			flex-shrink: 0;
			position: relative;
		}

		.banner h1{
			color:#333;
			}

		.banner p{
			color:#111;
			}

		.panel.banner .image img {
				-moz-object-fit: cover;
				-webkit-object-fit: cover;
				-ms-object-fit: cover;
				object-fit: cover;
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}

		.panel.banner.left {
			-moz-flex-direction: row;
			-webkit-flex-direction: row;
			-ms-flex-direction: row;
			flex-direction: row;
		}

		.panel.banner.right {
			-moz-flex-direction: row-reverse;
			-webkit-flex-direction: row-reverse;
			-ms-flex-direction: row-reverse;
			flex-direction: row-reverse;
		}




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

		.panel.banner .content {
			padding: 2.8875rem 1.75rem 1.3875rem 1.75rem ;
			-moz-flex-basis: 60%;
			-webkit-flex-basis: 60%;
			-ms-flex-basis: 60%;
			flex-basis: 60%;
			min-height:77vh;
			background-size:70%;
		}

		.panel.banner .content > .actions:last-child {
				margin-bottom: 1.5rem;
			}

		.panel.banner .image {
			-moz-flex-basis: 40%;
			-webkit-flex-basis: 40%;
			-ms-flex-basis: 40%;
			flex-basis: 40%;
		}

	}




@media screen and (max-width: 768px) and (orientation: portrait) {

		.panel.banner .content {
			-moz-flex-basis: auto;
			-webkit-flex-basis: auto;
			-ms-flex-basis: auto;
			flex-basis: auto;
		}

		.panel.banner .image {
			-moz-flex-basis: auto;
			-webkit-flex-basis: auto;
			-ms-flex-basis: auto;
			flex-basis: auto;
			height: 33rem;
		}

		.panel.banner.left {
			-moz-flex-direction: column;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
		}

		.panel.banner.right {
			-moz-flex-direction: column-reverse;
			-webkit-flex-direction: column-reverse;
			-ms-flex-direction: column-reverse;
			flex-direction: column-reverse;
		}

	}





/* Panel (Spotlight) */

	.panel.spotlight {
		-moz-align-items: stretch;
		-webkit-align-items: stretch;
		-ms-align-items: stretch;
		align-items: stretch;
		position: relative;
	}

		.panel.spotlight > * {
			z-index: 1;
		}

		.panel.spotlight .content {
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-flex-direction: column;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
			-moz-justify-content: center;
			-webkit-justify-content: center;
			-ms-justify-content: center;
			justify-content: center;
			padding: 3.5rem 3.5rem 2rem 3.5rem ;
		}

		.panel.spotlight .image {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 0;
		}

			.panel.spotlight .image img {
				-moz-object-fit: cover;
				-webkit-object-fit: cover;
				-ms-object-fit: cover;
				object-fit: cover;
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}

		.panel.spotlight.left {
			-moz-justify-content: -moz-flex-start;
			-webkit-justify-content: -webkit-flex-start;
			-ms-justify-content: -ms-flex-start;
			justify-content: flex-start;
		}

			.panel.spotlight.left .content {
			}

		.panel.spotlight.right {
			-moz-justify-content: -moz-flex-end;
			-webkit-justify-content: -webkit-flex-end;
			-ms-justify-content: -ms-flex-end;
			justify-content: flex-end;
		}

			.panel.spotlight.right .content {
			}

	@media screen and (max-width: 768px) {
		.panel.spotlight .content {
			padding: 2.8875rem 1.75rem 1.3875rem 1.75rem ;
			-moz-flex-direction: column !important;
			-webkit-flex-direction: column !important;
			-ms-flex-direction: column !important;
			flex-direction: column !important;
			min-height: 25rem;
		}

	}

	@media screen and (max-width: 480px) {
		.panel.spotlight .content {
			min-height: 30rem;
		}

	}







/* Page Wrapper */

	#page-wrapper {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-align-items: center;
		-webkit-align-items: center;
		-ms-align-items: center;
		align-items: center;
		-moz-justify-content: -moz-flex-start;
		-webkit-justify-content: -webkit-flex-start;
		-ms-justify-content: -ms-flex-start;
		justify-content: flex-start;
		-moz-flex-grow: 1;
		-webkit-flex-grow: 1;
		-ms-flex-grow: 1;
		flex-grow: 1;
		-moz-flex-shrink: 1;
		-webkit-flex-shrink: 1;
		-ms-flex-shrink: 1;
		flex-shrink: 1;
		height: 100%;
		padding: 2rem 0;

	}



@media screen and (orientation: portrait) {

		#page-wrapper {
				padding-left: 2rem;
				padding-right: 2rem;
			}

		}

@media screen and (min-aspect-ratio: 16 / 7) {

			#page-wrapper {
				padding: 6vh;
			}

		}

@media screen and (min-aspect-ratio: 16 / 6) {

			#page-wrapper {
				padding: 0;
			}

		}

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

		#page-wrapper {
			height: auto;
			padding: 1rem;
		}
	}






/* Wrapper */

	#wrapper {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-direction: row;
		-webkit-flex-direction: row;
		-ms-flex-direction: row;
		flex-direction: row;
		-moz-transition: opacity 1s ease-out, -moz-transform 0.75s ease-out;
		-webkit-transition: opacity 1s ease-out, -webkit-transform 0.75s ease-out;
		-ms-transition: opacity 1s ease-out, -ms-transform 0.75s ease-out;
		transition: opacity 1s ease-out, transform 0.75s ease-out;
		-moz-transition-delay: 0.25s;
		-webkit-transition-delay: 0.25s;
		-ms-transition-delay: 0.25s;
		transition-delay: 0.25s;
		cursor: default;
		position: relative;
		height: 98%;
		scroll-behavior: smooth;
		
	}

	#wrapper > .scrollZone {
			position: fixed;
			width: 6rem;
			height: inherit;
			cursor: -moz-grab;
			cursor: -webkit-grab;
			cursor: -ms-grab;
			cursor: grab;
			z-index: 10100;
		}

	#wrapper > .scrollZone.left {
				left: 0;
			}

	#wrapper > .scrollZone.right {
				right: 0;
			}

	#wrapper > .copyright {
			position: absolute;
			bottom: -3rem;
			right: 0;
			font-size: 0.8rem;
			color: rgba(46, 43, 55, 0.3);
			margin-bottom: 0;
		}

	#wrapper > .copyright a:hover {
				color: inherit;
			}

	#wrapper.is-dragging {
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			user-select: none;
			cursor: -moz-grab;
			cursor: -webkit-grab;
			cursor: -ms-grab;
			cursor: grab;
		}

	#wrapper.is-dragging * {
				-moz-user-select: none;
				-webkit-user-select: none;
				-ms-user-select: none;
				user-select: none;
			}

	#wrapper.is-dragging *:not(a, .image) {
				cursor: -moz-grab;
				cursor: -webkit-grab;
				cursor: -ms-grab;
				cursor: grab;
			}

	#wrapper.is-dragged * {
			-moz-pointer-events: none;
			-webkit-pointer-events: none;
			-ms-pointer-events: none;
			pointer-events: none;
		}

	body.is-loading #wrapper {
			-moz-transform: translateX(2rem);
			-webkit-transform: translateX(2rem);
			-ms-transform: translateX(2rem);
			transform: translateX(2rem);
			opacity: 0;
		}

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

		#wrapper {
			-moz-flex-direction: column;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
			height: auto;
			margin: 0 0 5rem 0;
		}

			#wrapper > .scrollZone {
				display: none;
			}

			#wrapper > .copyright {
				display: block;
				width: 100%;
				text-align: center;
			}

			body.is-loading #wrapper {
				-moz-transform: translateY(1rem);
				-webkit-transform: translateY(1rem);
				-ms-transform: translateY(1rem);
				transform: translateY(1rem);
			}

	}

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

		#wrapper {
			box-shadow: none;
		}

			body.is-loading #wrapper {
				-moz-transform: none;
				-webkit-transform: none;
				-ms-transform: none;
				transform: none;
			}

	}








/* Image */

	.image {
		display: inline-block;
		position: relative;
		border: 0;
	}

		.image.filtered:after {
			background-size: 128px 128px, auto;
			-moz-pointer-events: none;
			-webkit-pointer-events: none;
			-ms-pointer-events: none;
			pointer-events: none;
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 1;
			z-index: 1;
		}

		.image.filtered.tinted:after {
			background-size: 128px 128px, auto, auto;
		}

		.image[data-position] img {
			-moz-object-fit: cover;
			-webkit-object-fit: cover;
			-ms-object-fit: cover;
			object-fit: cover;
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}

		.image[data-position="top left"] img {
			-moz-object-position: top left;
			-webkit-object-position: top left;
			-ms-object-position: top left;
			object-position: top left;
		}

		.image[data-position="top"] img {
			-moz-object-position: top;
			-webkit-object-position: top;
			-ms-object-position: top;
			object-position: top;
		}

		.image[data-position="top right"] img {
			-moz-object-position: top right;
			-webkit-object-position: top right;
			-ms-object-position: top right;
			object-position: top right;
		}

		.image[data-position="right"] img {
			-moz-object-position: right;
			-webkit-object-position: right;
			-ms-object-position: right;
			object-position: right;
		}

		.image[data-position="bottom right"] img {
			-moz-object-position: bottom right;
			-webkit-object-position: bottom right;
			-ms-object-position: bottom right;
			object-position: bottom right;
		}

		.image[data-position="bottom"] img {
			-moz-object-position: bottom;
			-webkit-object-position: bottom;
			-ms-object-position: bottom;
			object-position: bottom;
		}

		.image[data-position="bottom left"] img {
			-moz-object-position: bottom left;
			-webkit-object-position: bottom left;
			-ms-object-position: bottom left;
			object-position: bottom left;
		}

		.image[data-position="left"] img {
			-moz-object-position: left;
			-webkit-object-position: left;
			-ms-object-position: left;
			object-position: left;
		}

		.image[data-position="center"] img {
			-moz-object-position: center;
			-webkit-object-position: center;
			-ms-object-position: center;
			object-position: center;
		}

		.image[data-position="25% 25%"] img {
			-moz-object-position: 25% 25%;
			-webkit-object-position: 25% 25%;
			-ms-object-position: 25% 25%;
			object-position: 25% 25%;
		}

		.image[data-position="75% 25%"] img {
			-moz-object-position: 75% 25%;
			-webkit-object-position: 75% 25%;
			-ms-object-position: 75% 25%;
			object-position: 75% 25%;
		}

		.image[data-position="75% 75%"] img {
			-moz-object-position: 75% 75%;
			-webkit-object-position: 75% 75%;
			-ms-object-position: 75% 75%;
			object-position: 75% 75%;
		}

		.image[data-position="25% 75%"] img {
			-moz-object-position: 25% 75%;
			-webkit-object-position: 25% 75%;
			-ms-object-position: 25% 75%;
			object-position: 25% 75%;
		}

		.image img {
			display: block;
		}

		.image.left, .image.right {
			max-width: 40%;
		}

			.image.left img, .image.right img {
				width: 100%;
			}

		.image.left {
			float: left;
			padding: 0 1.5rem 1rem 0;
			top: 0.25rem;
		}

		.image.right {
			float: right;
			padding: 0 0 1rem 1.5rem;
			top: 0.25rem;
		}

		.image.fit {
			display: block;
			margin: 0 0 1.5rem 0;
			width: 100%;
		}

			.image.fit img {
				width: 100%;
			}

		.image.main {
			display: block;
			margin: 0 0 2.25rem 0;
			width: 100%;
		}

			.image.main img {
				width: 100%;
			}