/** COMMON **/
* {
	font-family: 'EB Garamond', "学参 常改教科書ICA L", "GJ Kyoukasho ICA Light", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-weight: 500;
	font-size: 9pt;
  -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-touch-callout: none;
	margin: 0;
	padding: 0;
}

a {
	text-decoration: none;
	background-color: transparent;
	-webkit-text-decoration-skip: objects;
	color: inherit;
}
	
a:active, a:hover {
	outline-width: 0;
}

html, body {
	padding: 0;
	margin: 0;
	border: 0;
	overflow-x: hidden;
}

body {
	-webkit-print-color-adjust: exact;
}

/** CONTENT **/
/* main frame control */
body > div {
	width: 92%;
	max-width: 1000px;
	margin: 4vh auto;	
	min-height: 92vh; /* pc */
}

div.mainContentsContainer{
	position: relative;
	width: calc(100% - 190px);
	height: 92vh;
	margin: 0 0 0 190px;
	opacity: 0;
	transition: opacity 500ms cubic-bezier(0,.2,.8,1);
	display: none;
}

div.mainContentsContainer.shown{
	opacity: 1;
	display: block;
}

div.mainContentsContainer.hiding{
	opacity: 0;
	display: block;
}

/** menu **/
#spMenu{
	display: none;
	color: rgba(35, 24, 21, .25);
	letter-spacing: 1.4px;
	font-size: 11pt;
}

#menu > ul{
	position: fixed;
	width: 140px;
	height: 92vh;
	list-style: none;
}

#menu > ul.hidden{
	display: none;
}


#menu > ul > li{
	color: rgba(35, 24, 21, .25);
	letter-spacing: 1.4px;
	font-size: 11pt;
	cursor: pointer;
	width: 100%;
	position: absolute;
}

#menu > ul > li#menuBack{
	top: 0;
	cursor: auto;
	opacity: 0;
	display: none;
}

div#name{
	color: rgba(0, 86, 52, .43);
	cursor: auto;
	top: calc(50% - 140px);
	letter-spacing: 1.4px;
	font-size: 11pt;
	width: 100%;
	position: absolute;
	opacity: 0;
	transition: opacity 750ms cubic-bezier(0,.2,.9,1) 0ms;	
}

#menu.isTop ~ div#name{
	opacity: 1;
	transition: opacity 750ms cubic-bezier(0,.2,.9,1) 250ms;	
}

#menu.isTop ~ div#name.hidden{
	opacity: 0;
}

#menu.movingToInformation ~ div#name,
#menu.movingToWorksDetails ~ div#name,
#menu.movingToBiography ~ div#name,
#menu.movingToContact ~ div#name{
	opacity: 0;	
}


#menu.isInformation > ul > li#menuInformation,
#menu.isInformationDetails > ul > li#menuInformation,
#menu.isWorksDetails > ul > li#menuWorks,
#menu.isBiography > ul > li#menuBiography,
#menu.isContact > ul > li#menuContact,
#menu > ul > li:not(#menuWorksYears):hover{
	color: rgba(0, 86, 52, .43);
}


/* displaying top*/
div > #menu.movingToTop > ul > li#menuTop,
div > #menu.movingToTop > ul > li#menuInformation,
div > #menu.movingToTop > ul > li#menuWorks,
div > #menu.movingToTop > ul > li#menuBiography,
div > #menu.movingToTop > ul > li#menuContact{
	opacity: 0;
	transition: opacity 750ms cubic-bezier(0,.2,.9,1) 0ms;		
}

#menu.isTop > ul > li:not(#menuTop){
	opacity: 1;
	transition: opacity 750ms cubic-bezier(0,.2,.9,1) 250ms;	
}

#menu.isTop > ul > li#menuTop{
	opacity: 0;
	cursor: auto;
}
#menu.isTop > ul > li#menuInformation{
	top: calc(50% - 25px);
}
#menu.isTop > ul > li#menuWorks{
	top: calc(50%);
}
#menu.isTop > ul > li#menuBiography{
	top: calc(50% + 25px);
}
#menu.isTop > ul > li#menuContact{
	top: calc(50% + 50px);
}

#menu.movingToTop > ul > li{
	opacity: 0;
	transition: opacity 750ms cubic-bezier(0,.2,.9,1) 0ms;	
}

/* displaying information*/
div > #menu.movingToInformation > ul > li#menuTop,
div > #menu.movingToInformation > ul > li#menuWorks,
div > #menu.movingToInformation > ul > li#menuBiography,
div > #menu.movingToInformation > ul > li#menuContact{
	opacity: 0;
	transition: opacity 750ms cubic-bezier(0,.2,.9,1) 0ms;		
}

div > #menu.movingToInformation > ul > li#menuInformation{
 	top: calc(50% - 25px);
	transition: top 750ms cubic-bezier(.09,.69,.45,.96) 0ms;	
}

#menu.isInformation > ul > li#menuTop,
#menu.isInformation > ul > li#menuWorks,
#menu.isInformation > ul > li#menuBiography,
#menu.isInformation > ul > li#menuContact{
	opacity: 1;
	transition: opacity 750ms cubic-bezier(0,.2,.9,1) 250ms;	
}
#menu.isInformation > ul > li#menuTop{
	top: 0;
}
#menu.isInformation > ul > li#menuInformation{
	top: calc(50% - 25px);
}
#menu.isInformation > ul > li#menuWorks{
	top: 30px;
}
#menu.isInformation > ul > li#menuBiography{
	top: 60px;
}
#menu.isInformation > ul > li#menuContact{
	top: 90px;
}

/* displaying informationDetails */
#menu.isInformationDetails > ul > li#menuInformation{
	top: calc(50% - 25px);
}

#menu.isInformationDetails > ul > li#menuTop,
#menu.isInformationDetails > ul > li#menuWorks,
#menu.isInformationDetails > ul > li#menuBiography,
#menu.isInformationDetails > ul > li#menuContact{
	display: none;
	opacity: 0;
	cursor: auto;	
}

#menu.isInformationDetails > ul > li#menuBack{
	display: block;
	opacity: 1;
	cursor: pointer;
}

/* displaying works*/
div > #menu.movingToWorksDetails > ul > li#menuTop,
div > #menu.movingToWorksDetails > ul > li#menuInformation,
div > #menu.movingToWorksDetails > ul > li#menuBiography,
div > #menu.movingToWorksDetails > ul > li#menuContact{
	opacity: 0;
	transition: opacity 750ms cubic-bezier(0,.2,.9,1) 0ms;		
}

div > #menu.movingToWorksDetails > ul > li#menuWorks{
	top: calc(50%);
	transition: top 750ms cubic-bezier(.09,.69,.45,.96) 0ms;	
}

#menu.isWorksDetails > ul > li#menuTop,
#menu.isWorksDetails > ul > li#menuInformation,
#menu.isWorksDetails > ul > li#menuBiography,
#menu.isWorksDetails > ul > li#menuContact{
	opacity: 1;
	transition: opacity 750ms cubic-bezier(0,.2,.9,1) 250ms;
}

#menu.isWorksDetails > ul > li#menuTop{
	top: 0px;
}
#menu.isWorksDetails > ul > li#menuInformation{
	top: 30px;
}
#menu.isWorksDetails > ul > li#menuWorks{
	top: calc(50%);
}
#menu.isWorksDetails > ul > li#menuBiography{
	top: 60px;
}
#menu.isWorksDetails > ul > li#menuContact{
	top: 90px;
}

#menu:not(.isWorksDetails) > ul > li#menuWorksYears{
	display: none;
}

#menu > ul > li#menuWorksYears{
	top: calc(50% + 25px);
}

#menu > ul > li#menuWorksYears > ul{
	line-height: 25px;
	margin: 15px 0 0 5px;
}

#menu > ul > li#menuWorksYears > ul > li{
	list-style: none;
	max-height: 0;
	transition: max-height 200ms cubic-bezier(0,.2,.9,1);
	overflow-y: hidden;
}

#menu > ul > li#menuWorksYears > ul > li.shown{
	max-height: 30px;
	transition: max-height 200ms cubic-bezier(0,.2,.9,1);
}

#menu > ul > li#menuWorksYears > ul > li:hover{
	color: rgba(0, 86, 52, .43);
}

/* displaying biography*/
div > #menu.movingToBiography > ul > li#menuTop,
div > #menu.movingToBiography > ul > li#menuInformation,
div > #menu.movingToBiography > ul > li#menuWorks,
div > #menu.movingToBiography > ul > li#menuContact{
	opacity: 0;
	transition: opacity 750ms cubic-bezier(0,.2,.9,1) 0ms;		
}

div > #menu.movingToBiography > ul > li#menuBiography{
	top: calc(50% + 25px);
	transition: top 750ms cubic-bezier(.09,.69,.45,.96) 0ms;	
}

#menu.isBiography > ul > li#menuTop,
#menu.isBiography > ul > li#menuInformation,
#menu.isBiography > ul > li#menuWorks,
#menu.isBiography > ul > li#menuContact{
	opacity: 1;
	transition: opacity 750ms cubic-bezier(0,.2,.9,1) 250ms;		
}
	
#menu.isBiography > ul > li#menuTop{
	top: 0px;
}
#menu.isBiography > ul > li#menuInformation{
	top: 30px;
}
#menu.isBiography > ul > li#menuWorks{
	top: 60px;
}
#menu.isBiography > ul > li#menuBiography{
	top: calc(50% + 25px);
}
#menu.isBiography > ul > li#menuContact{
	top: 90px;
}

/* displaying contact*/
div > #menu.movingToContact > ul > li#menuTop,
div > #menu.movingToContact > ul > li#menuInformation,
div > #menu.movingToContact > ul > li#menuWorks,
div > #menu.movingToContact > ul > li#menuBiography{
	opacity: 0;
	transition: opacity 750ms cubic-bezier(0,.2,.9,1) 0ms;		
}

div > #menu.movingToContact > ul > li#menuContact{
	top: calc(50% + 50px);
	transition: top 750ms cubic-bezier(.09,.69,.45,.96) 0ms;	
}

#menu.isContact > ul > li#menuTop,
#menu.isContact > ul > li#menuInformation,
#menu.isContact > ul > li#menuWorks,
#menu.isContact > ul > li#menuBiography{
	opacity: 1;
	transition: opacity 750ms cubic-bezier(0,.2,.9,1) 250ms;		
}

#menu.isContact > ul > li#menuTop{
	top: 0px;
}
#menu.isContact > ul > li#menuInformation{
	top: 30px;
}
#menu.isContact > ul > li#menuWorks{
	top: 60px;
}
#menu.isContact > ul > li#menuBiography{
	top: 90px;
}
#menu.isContact > ul > li#menuContact{
	top: calc(50% + 50px);
}

#informationTitle, #biographyTitle, #worksTitle, #contactTitle{
	display: none;
}

/** TOP **/
.topImage{
	opacity: 0;
	transition: opacity 2000ms cubic-bezier(0,.2,.8,1);
}

.topImage.shown{
  opacity: 1;
	transition: opacity 4000ms cubic-bezier(0,.2,.8,1);
}

.typeA, .typeB, .typeC{
  position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.typeA.vertical {
	width: 40%;
	left: 30%;
}

.typeA.horizontal {
	width: 70%;
	left: 15%;
}

.typeB{
	width: 40%;
	left: 30%;
}

.typeB > *{
	width: 100%;
}

.typeB > *:first-child{
  margin-bottom: 10%;
}

.typeC{
	width: 70%;
	left: 15%;
}

.typeC > *{
	width: 48%;
}

.typeC > *:first-child{
  margin-right: 4%;
}

/** INFORMATION **/
#information > #informationList{
	padding: calc(46vh - 25px) 0 0 0;
}

#information > #informationList > li{
	width: 100%;
	display: flex;
	justify-content: space-between;
	list-style: none;
	margin-bottom: 50px;
}

#information > #informationList > li > *{
	letter-spacing: 1.4px;
	color: rgba(35, 24, 21, .40);
	line-height: 24px;
}


#information > #informationList > li > div:first-child{
	width: 20%;
}

#information > #informationList > li > div:nth-child(2){
	width: 30%;
}

#information > #informationList > li > div:nth-child(3){
	width: 40%;
}

#information > #informationList > li > div > span.informationDetailsLink{
	cursor: pointer;
}

#information > #informationList > li > div > span.informationDetailsLink:hover{
	color: rgba(0, 86, 52, .43);
}

#information > #informationList > li > div > span.informationDetailsLink::after{
	content: ">>";
	color: rgba(0, 86, 52, .43);
	font-size: 10.5pt;
	letter-spacing: -0.1em;
	margin-right: 8px;
}

#information > #informationList > li > div > span.informationSpSoloExhibition{
	display: none;
}

#information > #informationList > li > div > a {
	text-decoration: underline;
}

#informationDetails{
	position: relative;
}

#informationDetailsOnePictureContainer{
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
}

#informationDetailsTwoPicturesContainer{
	width: 100%;
	display: flex;
	justify-content: space-around;
	align-items: flex-start;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

#informationDetailsTwoPicturesContainer > img{
	display: block;
}

/** BIOGRAPHY **/
#biography.shown, #biography.hiding{
	display: flex;
	justify-content: space-around;
}

#biography > *{
	width: 45%;
	color: rgba(35, 24, 21, .40);
}

#biography > *:first-child{
	margin-top: calc(46vh + 25px); /* 92/2 */
}

#biography > *:first-child > img{
	width: 90%;
	max-width: 250px;
}

#biography > *:nth-child(2){
	margin-top: calc(46vh - 90px);
}

#biography > *:nth-child(2) > *:first-child{
	width: 90%;
	margin-bottom: 16vh;
}

#biography > *:nth-child(2) > *:nth-child(2){
	width: 90%;
}

/** WORKS **/
#worksDetails.shown, #worksDetails.hiding{
	display: flex;
	justify-content: space-between;
}

#worksCaption{
	color: rgba(35, 24, 21, .40);
	line-height: 2;
	letter-spacing: 0.2em;
	margin-top: 46vh;
	width: 25%;
}

#worksImage{
	width: 50%; /* overriden by JS */
	height: 80vh;
	margin-top: 7vh;
	margin-right: 10%;
	overflow: hidden;
	position: relative;
	perspective: 1000px;
	perspective-origin: 50% 50%;
}

#worksImage > img#works{
	width: 98%;
	max-height: 100%;
	transition: opacity 1700ms cubic-bezier(0,.2,.8,1) 450ms, transform 600ms cubic-bezier(0,.2,.8,1) 0ms;
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;	
	transform: translateX(-50%) translateY(-50%);	
	-ms-interpolation-mode: nearest-neighbor;
  image-rendering: -webkit-optimize-contrast;	
	image-rendering: pixelated;
}

#worksImage > img#works.hidden{
	opacity: 0;
	transform: translateX(-50%) translateY(-50%);
	transition: opacity 300ms cubic-bezier(0,.2,.8,1) 100ms, transform 1ms cubic-bezier(0,.2,.8,1) 1500ms, margin-left 1800ms cubic-bezier(0,.2,.8,1);	
}

#worksImage > img#works.hiddenToLeft{
	margin-left: 500px;
}

#worksImage > img#works.hiddenToRight{
	margin-left: -500px;
}

#worksImage > img#obfuscator{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#worksLeftArrow, #worksRightArrow{
	position: absolute;
	color: rgba(35, 24, 21, .20);
	font-size: 10pt;
	right: 3%;
}

#worksLeftArrow{
	top: 115px;
}

#worksRightArrow{
	top: 90px;
}

#worksLeftArrow.shown, #worksRightArrow.shown{
	color: rgba(35, 24, 21, .45);
	cursor: pointer;
}

#worksSp{
	display: none;
}

/** CONTACT **/
input, textarea{
  border: 0;
  border-bottom: 1px solid rgba(24, 24, 24, .10);
  margin: 3px auto 20px auto;
  padding: 5px;
  font-size: 14pt;
  width: 100%;
}

input:focus, textarea:focus {
  outline: none;
  border-bottom: 1.5px solid rgba(24, 24, 24, .50);
}

label{
  font-size: 10.5pt;
}

#contact > div#contactForm{
  width: 70%;
	margin: 0 auto;
	padding-top: 30vh;
	color: rgba(35, 24, 21, .40);
}

#contact > button{
  background: none;
  border: none;
	color: rgba(35, 24, 21, .40);
  cursor: pointer;
  font-size: 12pt;
  height: 28px;
  margin: 10px auto 30px calc(50% - 15px);
  width: 30px;
	position: relative;
	outline: none;
}

#contact > button::after{
	content: "";
	position: absolute;	
	transition: max-width 150ms ease-out, left 150ms ease-out, opacity 200ms ease-out 200ms;
	height: 0;
	width: 100%;
	border-bottom: 1px solid rgba(0, 86, 52, .43);
	bottom: 0;
	max-width: 0%;
	left: 0;	
}

#contact > button.stage01:after{
	max-width: 95%;
	left: 0;	
}

#contact > button.stage02:after{
	max-width: 90%;
	left: 5%;
}

#contact > button.eraseStage01:after{
	max-width: 90%;
	left: 5%;
	opacity: 0;
}

#contactSendComplete{
	display: none;
	opacity: 0;
	transition: opacity 750ms cubic-bezier(0,.2,.9,1) 1000ms;
	text-align: center;
	color: rgba(35, 24, 21, .40);
	margin-top: calc(46vh + 38px);
}

#contactSendComplete.shown{
	display: block;
	opacity: 1;
}

#copyrightContainer{
	position: absolute;
	width: 80vh;
	transition: opacity 750ms cubic-bezier(0,.2,.9,1) 1000ms;
	top: calc(4vh + 30px);
	left: calc(100vw - 30px);
	transform: rotate(90deg);
	transform-origin: top left;
}
#copyrightContainer.hidden{
	opacity: 0;
	transition: opacity 750ms cubic-bezier(0,.2,.9,1) 50ms
}
#copyright{
	color: rgba(35, 24, 21, .25);
	margin: 0 auto;
	letter-spacing: 0.3px;
}
#photoCredit{
	color: rgba(35, 24, 21, .25);
	position: absolute;
	left: 260px;
  top: 0;
	opacity: 0;
	transition: opacity 750ms cubic-bezier(0,.2,.9,1) 250ms;
}

#photoCredit.shown{
	opacity: 1;
	transition: opacity 750ms cubic-bezier(0,.2,.9,1) 250ms;
}

@media screen and (max-width: 767px){
	body > div {
		width: 90%;
		margin: 4vh auto;
		min-height: auto;
		top: 0;
	}
	
	div.mainContentsContainer{
		position: relative;
		width: 100%;
		height: calc(92vh - 42px);
		margin: 20px 0 0 0;
	}
	
	.isInformationDetails ~ div.mainContentsContainer{
		height: auto;
		min-height: calc(92vh - 42px);
	}
	
	/** menu **/
	#spMenu{		
		display: block;
		margin-top: 0;
		margin-bottom: 10px;
		width: 100%;
		cursor: pointer;
	}
	
	#menu > ul{
		position: relative;
		max-height: 0;
		height: 100px;
		padding-left: 15px;
		border-left: 1px solid rgba(125, 125, 125, .43);
		overflow: hidden;
		transition: max-height 220ms cubic-bezier(0,.2,.9,1);
	}

	#menu.shown > ul{
		max-height: 100px;
	}
		
	div#name{
		width: 90vw;
		text-align: center;
    position: relative;
    margin-top: 10px;
		margin-bottom: 20px;
	}
	
	#menu:not(.isTop) ~ div#name{
		display: none;
	}

	#menu.isTop ~ div#name{
		transition-delay: 0ms;
	}


	/* displaying top*/
	#menu.isTop > ul > li#menuTop{
		opacity: 0;
		cursor: auto;
	}
	#menu.isTop > ul > li#menuInformation{
		top: 0;
	}
	#menu.isTop > ul > li#menuWorks{
		top: 25px;
	}
	#menu.isTop > ul > li#menuBiography{
		top: 50px;
	}
	#menu.isTop > ul > li#menuContact{
		top: 75px;
	}
	
	/* displaying information*/
	#menu.isInformation > ul > li#menuTop{
		top: 0;
	}
	#menu.isInformation > ul > li#menuInformation{
		display: none;
		opacity: 0;
		cursor: auto;	
	}
	#menu.isInformation > ul > li#menuWorks{
		top: 25px;
	}
	#menu.isInformation > ul > li#menuBiography{
		top: 50px;
	}
	#menu.isInformation > ul > li#menuContact{
		top: 75px;
	}
	
	#menu.isInformation.movingToInformationDetails > #spMenu{
		opacity: 0;
	}
	
	/* displaying informationDetails */
	#menu.isInformationDetails > ul{
		max-height: 20px;
		padding-left: 0;
		border-left: none;
		transition: max-height 0ms;
	}
	
	#menu.isInformationDetails.movingToInformation > ul{
		max-height: 0;
		opacity: 0;
		transition: max-height 0ms linear 600ms;
	}
	
	
	#menu.isInformationDetails > ul > li#menuInformation,
	#menu.isInformationDetails > ul > li#menuTop,
	#menu.isInformationDetails > ul > li#menuWorks,
	#menu.isInformationDetails > ul > li#menuBiography,
	#menu.isInformationDetails > ul > li#menuContact,
	#menu.isInformationDetails > #spMenu{
		display: none;
		opacity: 0;
		cursor: auto;	
	}
	
	#menu.isInformationDetails > ul > li#menuBack{
		display: block;
		opacity: 1;
		cursor: pointer;
	}	
	
	/* displaying works*/
	#menu.isWorksDetails > ul > li#menuTop{
		top: 0;
	}
	#menu.isWorksDetails > ul > li#menuInformation{
		top: 25px;
	}
	#menu.isWorksDetails > ul > li#menuWorks{
		display: none;
		opacity: 0;
		cursor: auto;	
	}
	#menu.isWorksDetails > ul > li#menuBiography{
		top: 50px;
	}
	#menu.isWorksDetails > ul > li#menuContact{
		top: 75px;
	}
	
	/* displaying biography*/
	#menu.isBiography > ul > li#menuTop{
		top: 0;
	}
	#menu.isBiography > ul > li#menuInformation{
		top: 25px;
	}
	#menu.isBiography > ul > li#menuWorks{
		top: 50px;
	}
	#menu.isBiography > ul > li#menuBiography{
		display: none;
		opacity: 0;
		cursor: auto;	
	}
	#menu.isBiography > ul > li#menuContact{
		top: 75px;
	}
		
	/* displaying contact*/
	#menu.isContact > ul > li#menuTop{
		top: 0;
	}
	#menu.isContact > ul > li#menuInformation{
		top: 25px;
	}
	#menu.isContact > ul > li#menuWorks{
		top: 50px;
	}
	#menu.isContact > ul > li#menuBiography{
		top: 75px;
	}
	#menu.isContact > ul > li#menuContact{
		display: none;
		opacity: 0;
		cursor: auto;	
	}
	
	#menu.isTop ~ div#name.hidden{
		opacity: 1;
	}


	/* disable vertical movement when each menu is tapped */
	div > #menu.movingToInformation > ul > li#menuInformation,
	div > #menu.movingToWorksDetails > ul > li#menuWorks,
	div > #menu.movingToBiography > ul > li#menuBiography,
	div > #menu.movingToContact > ul > li#menuContact{
		opacity: 0;
		transition: opacity 750ms cubic-bezier(0,.2,.9,1) 250ms, top 750ms linear 2000ms;	/* disabling vertical movement(top) by delay */	
	}
	
	.mainContentsContainer#information.shown > #informationTitle,
	.mainContentsContainer#biography.shown > #biographyTitle,
	.mainContentsContainer#worksDetails.shown > #worksTitle,
	.mainContentsContainer#contact.shown > #contactTitle{
		display: block;
		position: absolute;
		width: 100%;
		left: 0;
		text-align: center;
		letter-spacing: 0.1em;
		color: rgba(0, 86, 52, .43);
		font-size: 11pt;
	}
	
	/** TOP **/
	.mainContentsContainer#top{
		margin: 0 5vw 3vh 5vw;
    height: calc(74vh - 58px);
		width: 80vw;
	}
		
	.typeA.vertical{
		width: 56%;
		left: 22%;
	}

	.typeA.horizontal{
		width: 80%;
		left: 10%;
	}
	
	.typeB{
		width: 60%;
		left: 20%;
	}
	
	.typeC{
		width: 40%;
		left: 30%;
		max-height: 100%;
	}
	
	.typeC > *{
		width: 100%;	
	}
	
	.typeC > *:first-child{
		margin-bottom: 10%;
	}
		
	/** INFORMATION **/
	.mainContentsContainer#information.shown{
		overflow-y: auto;
	}
	
	.mainContentsContainer#information.shown > #informationTitle{
		top: 0;
	}
	
	#information > #informationList{
		padding-top: 15vh;
	}
	
	#information > #informationList > li > div:first-child{
		width: 25%;
	}
	
	#information > #informationList > li > div:nth-child(2){
		display: none;
	}
	
	#information > #informationList > li > div:nth-child(3){
		width: 70%;
	}
	
	#information > #informationList > li > div > span.informationSpSoloExhibition{
		display: inline;		
	}
		
	#informationDetailsOnePictureContainer, #informationDetailsTwoPicturesContainer{
		width: 80%;
		margin-left: auto;
		margin-right: auto;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		transform: translateX(0px) translateY(0px);
	}
	
	#informationDetailsTwoPicturesContainer{
		display: block;
		position: relative;
	}
	
	#informationDetailsTwoPicturesContainer > img{
		width: 100% !important;
		height: auto;
		margin-bottom: 50px;
	}
	
	/** BIOGRAPHY **/
	.mainContentsContainer#biography.shown > #biographyTitle{
		top: -15vh;
	}
	
	div.mainContentsContainer#biography.shown{
    display: block;
		height: auto;
	}
	
	#biography > *{
		width: 80%;
		margin-left: auto;
		margin-right: auto;
	}
	
	#biography > *:first-child{
		margin-top: 20vh;
	}
	
	#biography > *:nth-child(2){
		margin-top: 50px;
	}
	
	#biography > *:nth-child(2) > *:first-child{
		margin-bottom: 50px;
	}

	/** WORKS **/
	.mainContentsContainer#worksDetails.shown{
		height: calc(92vh - 200px);
	}

	.mainContentsContainer#worksDetails.shown > #worksTitle{
		padding-top: 20px;
	}
	
	#worksDetails.shown{
		justify-content: space-around;
	}

	.worksSpCaption{
		transform: rotate(90deg);
		transform-origin: left top;
		position: absolute;
		left: 45px;
    width: 100%;
		text-align: left;
		margin-top: 2px;
		color: rgba(35, 24, 21, .40);
		letter-spacing: 0.15em;
	}
	
	.worksSpCaptionSpacerNoSize{
		width: calc(107px + 2em);
		width: 0px;
		display: inline-block;		
	}
	
	.worksSpCaptionSpacer{
		width: 2em;
		display: inline-block;
	}
	
	#worksCaption, #worksImage, #worksLeftArrow, #worksRightArrow{
		display: none;
	}
	
	#worksSp{
		display: block;
		width: 100vw;
    margin: 15vh -10vw;
    height: calc(100% - 30vh);
	}
	
	#worksSp > div{
		text-align: center;
	}
	
	#worksSp > div.horizontal > * {
		margin-top: 5%;
	}
	
	/** CONTACT **/
	
	input, textarea{
		margin-top: 0;
		margin-bottom: 5px;
	}
	
	div.mainContentsContainer#contact.shown{
    display: block;
		height: calc(92vh - 120px);
	}
	
	#contact > div#contactTitle{
		top: 2vh;
	}
	
	#contact > div#contactForm{
		padding-top: 12vh;
	}
	
	#contact > button{
		margin-top: 0;
	}
	
	#contactSendComplete{
		margin-top: 45%;
	}
	
	#copyrightContainer{
		position: relative;
		transform: none;
		left: 0;
    top: 0;
		margin-bottom: 3vh;
		width: 100%;
	}
	
	#copyrightContainer.positionedAbsolutely{
		top: auto;
		position: absolute;
		bottom: 3vh;
		margin-bottom: 0;
	}
	
	#copyright{
		width: 90%;
		font-size: 8pt;
	}
	
	#photoCredit{
		text-align: right;
    right: 5%;
		left: auto;
		font-size: 8pt;
	}
}