/* 
author: Kotaro Abe
https://kotaroabe.com/ 
*/

.FrutigerLTStd-Bold { font-family: FrutigerLTStd-Bold; }
.FrutigerLTStd-Italic { font-family: FrutigerLTStd-Italic; }
.FrutigerLTStd-Light { font-family: FrutigerLTStd-Light; }
.FrutigerLTStd-Black { font-family: FrutigerLTStd-Black; }
.FrutigerLTStd-Roman { font-family: FrutigerLTStd-Roman; }

html {
	font-size: 62.5%;
}
body {
	background-color: #fff;
	  transition: background-color .2s ease-in-out;
   -moz-transition: background-color .2s ease-in-out;
   -webkit-transition: background-color .2s ease-in-out; 
  -o-transition: background-color .2s ease-in-out;
}
a {
	color: #000;
	text-decoration: none;
	line-height: 0px;
}
body {
	margin: 0% 0% 0% 0%;
	line-height: 0px;
}
#bgimage {
	position: fixed;
	top: 20vh;
	height: 60vh;
	max-width: 60vw;
	z-index: -10;
	background-color: transparent;
	overflow: hidden;
}

.centralised {
	padding-left: 5vw;
	margin: 0 auto;
	width: 50vw;
	
	-webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -ms-transition: opacity .5 ease-in-out;
    -o-transition: opacity .5s ease-in-out;
}

.sunfrapol, .dearLondon, .liminallight, .spin, .lines, .energygiftmini, .unsettled, .madeintenryu, .ambientcamera {
	display: none;
}

#main {
	width: 60vw;
	margin: auto;
}
#projects {
	
}
p {
	color: #000;
}
.iframe {
	height: 500px;
	width: 500px;
}
div#header {
	z-index: 2;
	position: fixed;
	top: 5%;
	left: 20%;
}
@media screen {
body>div#header {
	position: fixed;
}
}
* html body {
	overflow: hidden;
}
* html div#content {
	height: 100%;
	overflow: auto;
}
div#headerR {
	z-index: 2;
	position: fixed;
	top: 5%;
	right: 20%;
}
@media screen {
body>div#headerR {
	position: fixed;
}
}
* html body {
	overflow: hidden;
}
* html div#content {
	height: 100%;
	overflow: auto;
}
p.title {
	font-family: FrutigerLTStd-Black, 'Times New Roman', serif;
	font-size: 1.8rem;
	text-align: left;
	font-style: none;
	line-height: 1.0rem;
	letter-spacing: 0.01rem;
	/*text-shadow: 1px 1px 3px #fff;*/
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-webkit-animation:dip 1s linear infinite;
    -moz-animation:dip 1s linear infinite;
    animation:dip 1s linear infinite;
	
	display: inline-block;
}
@-moz-keyframes dip {
	25% { -moz-transform: rotate(3deg); }
	50% { -moz-transform: rotate(0deg); }
	75% { -moz-transform: rotate(-3deg); }
	100% { -moz-transform: rotate(0deg); }
}
@-webkit-keyframes dip {
	25% { -webkit-transform: rotate(3deg); }
	50% { -webkit-transform: rotate(0deg); }
	75% { -webkit-transform: rotate(-3deg); }
	100% { -webkit-transform: rotate(0deg); }
}
@keyframes dip {
	25% { -webkit-transform: rotate(3deg); transform:rotate(3deg); }
	50% { -webkit-transform: rotate(0deg); transform:rotate(0deg)}
	75% { -webkit-transform: rotate(-3deg); transform:rotate(-3deg); }
	100% { -webkit-transform: rotate(0deg); transform:rotate(0deg);  }
}
p.title a {
	display: inline-block;
}
p.title a:hover {
	/*text-shadow: 0 0 7px #fff;*/
	transform: rotate(3deg);
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	-ms-transition: 0.5s;
	transition: 0.5s;
}
p.space {
	line-height: 2rem;
}
p.menu {
	font-family: FrutigerLTStd-Roman, FrutigerLTStd-Roman, serif;
	font-size: 1.4rem;
	text-align: left;
	line-height: 2.8rem;
	letter-spacing: 0.04rem;
}
p.menu a {
	/*text-shadow: 0 0 7px #fff;*/
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	-ms-transition: 0.3s;
	transition: 0.3s;
}
p.menu a:hover {
	background-color: transparent;
	border-bottom: 2px solid #fff;
}
p.nameLarge {
	font-family: FrutigerLTStd-Light, sans-serif;
	text-align: center;
	padding-right: 5%;
	padding-left: 5%;
	font-weight: 300;
	font-size: 6.8vw;
	line-height: 8vw;
	letter-spacing: 0.044vw;
	text-decoration: none;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	
	word-wrap: normal;
}
p.nameLarge a {
}
p.nameLarge :hover {
	opacity: 0.1;s
	
	transition-timing-function: ease;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	-ms-transition: 0.3s;
	transition: 0.3s;
}
p.nameLarge span {
	font-family: FrutigerLTStd-Roman, sans-serif;
	text-align: center;
	padding-right: 5%;
	font-weight: 300;
	font-size: 1.1vw;
	letter-spacing: 0.004vw;
	line-height: 10vw;
}

p.footer {
	font-family: FrutigerLTStd-Roman, Monospace;
	font-size: 1.1rem;
	text-align: right;
	letter-spacing: 0.07rem;

	padding-right: 5%;
}
p.image {
	align: center;
	width: 50%;
	margin-left: auto;
	margin-right: auto;
}
p.image1 {
	align: center;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}
p.cap {
	font-family: FrutigerLTStd-Light, sans-serif;
	font-size: 1.4rem;
	text-align: left;
	padding-right: 20%;
	padding-left: 20%;
	line-height: 2rem;
	letter-spacing: 0.05rem;
	margin-left: auto;
	margin-right: auto;
}
img {
	width: 100%;
	margin: 0;
	padding: 0;
	vertical-align: bottom;
}
div#footer {
	z-index: 3;
	position: absolute;
	bottom: 1%;
	left: 0;
	width: 100%;
}
p.refM {
	margin: 0;
	width: 100%;
	font-family: FrutigerLTStd-Light, sans-serif;
	font-size: 1.4em;
	font-weight: 200;
	text-align: left;
	line-height: 2rem;
	letter-spacing: 0.05rem;
}
p.refM span {
	font-family: FrutigerLTStd-Bold;
}
p.ref {
	/*width: 100%;*/
	font-family: FrutigerLTStd-Light, sans-serif;
	font-size: 1.4em;
	font-weight: 200;
	text-align: left;
	padding-right: 20%;
	padding-left: 20%;
	line-height: 2rem;
	letter-spacing: 0.05rem;
	margin-left: auto;
	margin-right: auto;
	-webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}

@media screen {
body>div#footer {
	position: fixed;
}
}
* html body {
	overflow: hidden;
}
* html div#content {
	height: 100%;
	overflow: auto;
}

#bio {
	position: relative;
	z-index: 3;
	background-color: #ffffff;
	width: 100%;
	min-height: 100vh;
	padding-top: 40px;
}

#bio .left {
	position: absolute;
	width: 49%;
	height: auto;
}

#bio .right {
	position: absolute;
	width: 49%;
	height: auto;
	margin-left: 51%;
}

#bio .below {
	transform: translateY(calc(60vw * 49.5 / 100));
}

#bio .back {
	positoin: absolute;
	margin: 0;
	width: 10%;
	font-family: FrutigerLTStd-Light, sans-serif;
	font-size: 1.4em;
	font-weight: 200;
	text-align: left;
	line-height: 2rem;
	letter-spacing: 0.05rem;
	
	margin-left: calc(100% + 20px);
}









/*
	MEDIA QUERY
*/

@media only screen and (max-width : 640px) {
	#main {
		width: 100vw;
	}
div#header {
	z-index: 1;
	position: static;
	top: -1px;
	padding-top: 3%;
	left: -1px;
	padding-left: 5%;
	width: 95%;
	background: transparent;
}
div#headerR {
	z-index: 1;
	position: static;
	top: -1px;
	padding-top: 3%;
	right: -1px;
	padding-right: 5%;
}

img {
	max-width: 100%;
	height: auto;
	width /***/: auto;
}
	
#bgimage {
	position: fixed;
	top: 40vh;
	height: 30vh;
	max-width: 90vw;
	z-index: -10;
	background-color: transparent;
	overflow: hidden;
}
	
.centralised {
	padding-left: 10vw;
	margin: 0 auto;
	width: 80vw;
	
	-webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -ms-transition: opacity .5 ease-in-out;
    -o-transition: opacity .5s ease-in-out;
}

p.image {
	align: center;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}
p.image1 {
	align: center;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}
.name {
	font-size: 3.6rem;
	text-align: center;
	font-style: normal;
	line-height: 0rem;
	text-decoration: none;
	letter-spacing: 0.2rem;
}
.trimming {
	color: #FFFFFF;
	width: 100%;
	height: 1rem;
	overflow: hidden;
	line-height: 0;
	text-decoration: none;
	display: block;
	margin: 0 auto;
}
.alpha1 {
	line-height: 0;
	font-size: 0;
	display: block;
	margin: 0 auto;
	padding: 0;
}
.alpha1 a {
	line-height: 0px;
	text-decoration: none;
	opacity: 1.0;
	color: #FFFFFF;
	filter: alpha(opacity=100);
	-ms-filter: "alpha(opacity=100)";
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	-ms-transition: 0.3s;
	transition: 0.3s;
}
.alpha1 a:hover {
	line-height: 0rem;
	color: #FFFFFF;
	text-decoration: none;
	opacity: 0.3;
	filter: alpha(opacity=30);
	-ms-filter: "alpha(opacity=30)";
}
p.title {
	font-size: 1.6rem;
	line-height: 1.6rem;
	letter-spacing: 0.01rem;
	
	width: auto;

	-webkit-animation:dip 1s linear infinite;
    -moz-animation:dip 1s linear infinite;
    animation:dip 1s linear infinite;
	
	display: inline-block;
}
@-moz-keyframes dip {
	25% { -moz-transform: rotate(1.5deg); }
	50% { -moz-transform: rotate(0deg); }
	75% { -moz-transform: rotate(-1.5deg); }
	100% { -moz-transform: rotate(0deg); }
}
@-webkit-keyframes dip {
	25% { -webkit-transform: rotate(1.5deg); }
	50% { -webkit-transform: rotate(0deg); }
	75% { -webkit-transform: rotate(-1.5deg); }
	100% { -webkit-transform: rotate(0deg); }
}
@keyframes dip {
	25% { -webkit-transform: rotate(1.5deg); transform:rotate(1.5deg); }
	50% { -webkit-transform: rotate(0deg); transform:rotate(0deg)}
	75% { -webkit-transform: rotate(-1deg); transform:rotate(-1deg); }
	100% { -webkit-transform: rotate(0deg); transform:rotate(0deg);  }
}
	
p.menu {
	font-size: 1.3rem;
	line-height: 2.5rem;
	letter-spacing: 0.05rem;
	padding-left: 5%;
}
p.name {
	font-size: 1.6rem;
	text-align: center;
	font-style: normal;
	line-height: 0px;
	text-decoration: none;
	letter-spacing: 2px;
}
p.nameLarge {
	font-family: FrutigerLTStd-Light, sans-serif;
	text-align: left;
	padding-right: 5%;
	padding-left: 5%;
	font-weight: 300;
	font-size: 11.475vw;
	line-height: 13.5vw;
	letter-spacing: 0.075vw;
	text-decoration: none;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	
	word-wrap: break-word;
}
p.nameLarge span {
	font-size: 3vw;		
}
p.nameLarge span:after {
	content: ' \A ';	
	white-space: pre;
}
p.footer {
	font-size: 0.8rem;
	letter-spacing: 0.02rem;
}

p.space {
	line-height: 2rem;
}
	
p.ref {
	text-align: left;
	line-height: 2rem;
	letter-spacing: 0.05rem;
	-webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;
}
	
p.refl, p.refl1, p.refl2 {
	line-height: 2.8rem;
}
	

#bio {
	position: relative;
	z-index: 3;
	background-color: #ffffff;
	width: 90%;
	min-height: 100vh;
	height: 310vh;
	padding-left: 5%;
	padding-top: 40px;
}

#bio .left {
	position: relative;
	width: 90%;
	height: auto;
	margin-left: 0%;
}

#bio .right {
	position: relative;
	width: 90%;
	height: auto;
	margin-left: 0%;
}
	
#bio .below {
	transform: translateY(0);
}

#bio .back {
	positoin: absolute;
	margin: 0;
	width: 30%;
	font-family: FrutigerLTStd-Light, sans-serif;
	font-size: 1.4em;
	font-weight: 200;
	text-align: left;
	line-height: 2rem;
	letter-spacing: 0.05rem;
	
	transform: translateY(-40px);
}