*{
	margin:0;
	padding:0;
}

body{
	font-size:100%;
	background:#fff;
	font-family:helvetica;
	color:#946B45;
	-webkit-font-smoothing: antialiased;
	padding:0 36px;
}

a {
    color:#946B45;
    text-decoration:underline;
    position:relative;
}
a:hover {
	color:#FF7F83;
	text-decoration:none;
}

h1 {
	font-size:1.5em;
	line-height:2em;
}
h2 {
	font-size:1.2em;
	line-height:2em;
}
section {
	line-height: 2em;
}
.diff_im {
	max-width:960px;
	margin:0 auto;
	position: relative;
	padding:128px 0;
}
nav {
	position:fixed;
	width:72px;
	top:128px;
	right:5%;
	z-index: 100000;
}
nav a.logo {
	width:32px;
	height:32px;
	display:block;
	float: right;
	text-indent:-100000px;
	background:url(../images/logo.svg) no-repeat;
	margin-bottom:64px;
}
nav ul {
	display: block;
	clear:both;
}
nav li{
	margin:0;
	padding:0;
	list-style: none;
	position:relative;
	text-align: right;
}
nav li span{
	width:4px;
	height:4px;
	border-radius:8px;
	background:#ff7f83;
	display:none;
	overflow: hidden;
	position: absolute;
	top:45%;
	right:-12px;
}
	nav li.active span {
		display: block;
	}

nav li a:link,
nav li a:visited{
	color:#FF7F83;
	font-size:1em;
	font-weight:bold;
	padding:10px 0;
	display:block;
	text-decoration:none;
}
main {
	line-height:2em;
	overflow: hidden;
}


main .column-2{
	width:60%;
}

main .column-1 {
	width:30%;
}
.left {
	float: left;
}
.right {
	float:right;
}

/* about page */

.portrait{
	width:100%;
	height:auto;
}


.timeline li{
	margin-left:24px;
	list-style-position:outside;
}
.contact li {
	list-style:none;
}


/* homepage **/
#homepage {
	display: block;
	height:100vh;
	padding:0;
}

/* blog */

.post-list{
	margin-bottom: 36px;
	clear:both;
	overflow: hidden;
}
.post-list li{
	border-bottom:1px solid #eee;
	text-align: right;
}
.post-list li a{
	display: block;
	clear: both;
	overflow: hidden;
	line-height:3em;
	text-decoration:none;
}
.post-list li span{
float:left;
font-weight:bold;
}

/* art & design */
#art main,
#design main {
	display:block;
	height:600px;
	text-align: center;
	line-height:600px;
	border:2px dotted #ccc;
}

#art .tip,
#design .tip {
}
.work-list {
	display:none;
}
.work-list li{
	width:45%;
	height:217px;
	float: left;
	display: block;
	background: #f9f9f9;
	margin:0 36px 36px 0;
}

main section{
	padding-bottom:48px;
}




.diff_home{
	max-width:1260px;
	margin:0 auto;
	overflow:hidden;
	line-height:2;
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    }
.diff_home .avatar img{
	width:140px;
	height: 140px;
	border-radius:140px;
}
.diff_home h1{
	font-size:2em;
	font-family:helvetica;
	font-weight:bold;
	margin:64px 0 24px 0;
}


.description {
	margin-bottom:16px;
}
.contact a{
	margin-right:10px;
}
.contact a:link,.contact a:visited{
}
.contact a:hover{
	text-decoration:none;
	background:none;
}
.copyright{
	margin-top:64px;
}

/* homepage */
#homepage main {
	width: 100%;
	position:absolute;
	top:50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

#homepage main img {
	width:100%;
}

/* responsive */
@media only screen and (max-width:1920px) {
	body {
	}
	.diff_im{
	width:70%;
	#homepage main {

	}
	}
}
@media only screen and (max-width:1024px) {
	body {
		padding:0 48px;
	}
	.diff_im{
	width:calc(100% - 88px);
	float:left;
	clear:both;
	}
}
/* responsive */
@media only screen and (max-width:768px) {
	body{
	}
	.diff_im{
		width:calc(100% - 88px);
		float:left;
	}
	main .column-1,
	main .column-2 {
		width:100%;
		float:none;
		display:block;
	}
}
@media only screen and (max-width:480px) {
	body{
		padding:0 20px;
	}
	.diff_im{
		width:calc(100% - 0px);
		float:left;
		padding-top:320px;
	}
	nav {
		top:36px;
		right:0px;
		position:absolute;
	}
	nav a.logo {
		margin-bottom:18px;
	}
	main .column-1,
	main .column-2 {
		width:100%;
		float:none;
		display:block;
	}
}