html{color:#000;background:#FFF}
body,img,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td, figure {margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}span {text-decoration: none;}

html {overflow-y: scroll;}
body {color: rgb(0,0,0); font-family: Verdana, sans-serif; font-size: 100%; line-height: 1.3em; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

section#bio, section#work {animation: fadeInAnimation ease 2s; animation-iteration-count: 1; animation-fill-mode: forwards;}
section#work {animation-delay: 0.4s; opacity: 0;}

@keyframes fadeInAnimation {0% {opacity: 0;} 100% {opacity: 1;}}

section#bio {width: 350px; height: 100vh; position: fixed; z-index: 999; padding-left: 2em;}
section#bio div {margin: 0;position: absolute;top: 50%;-ms-transform: translateY(-50%);transform: translateY(-50%); padding-bottom: 4em;}
section#bio div p {font-size: 0.8em; line-height: 125%;}
section#bio div p+p {padding-top: 1em;}

section#bio div a {text-decoration: none; color: rgb(0,0,0); background: transparent; padding: 0.25em 0.5em; margin: -0.25em -0.5em -0.25em -0.5em; display: inline-block; transition: background-color 0.3s ease;}
section#bio div a:hover {text-decoration: none; color: rgb(0,0,0); background: #FCFF62;}


section#work {opacity: 0;width: calc(100% - 350px - 4em); padding-left: calc(350px + 4em); }
section#work article {width:100%; height: 100vh; padding: 12em 12em 16em ; box-sizing: border-box; text-align: center;}

section#work article figure {opacity: 0; display: none; display: flex; align-items: center; justify-content: center;}
section#work article figure:first-child {opacity: 1; height: 100%; width: 100%;}

section#work article figure figcaption {font-size: 0; line-height: 0; opacity: 0; width: 0; height: 0; display: none; padding: 0;margin: 0;flex: none;}

section#work article figure img {display: inline-block;	width: 100%; height: auto; max-height: 100%; object-fit: contain; cursor: pointer;}

/*

display: flex; flex-direction: column; justify-content: space-around; align-content: space-around;

*/

@media only screen and (max-width: 1200px) {
	section#bio p {font-size: 0.8em; line-height: 125%;}
	section#work article {padding: 10em 10em 14em ; box-sizing: border-box; text-align: center;}
}

@media only screen and (max-width: 1100px) {
	section#bio p {font-size: 0.7em; line-height: 125%;}
	section#work article {padding: 8em 8em 12em ; box-sizing: border-box; text-align: center;}
}

@media only screen and (max-width: 1000px) {
	section#bio p {font-size: 0.7em; line-height: 125%;}
	section#work article {padding: 7em 7em 11em ; box-sizing: border-box; text-align: center;}
}

@media only screen and (max-width: 900px) {
	section#bio p {font-size: 0.65em; line-height: 125%;}
	section#work article {padding: 6em 6em 10em ; box-sizing: border-box; text-align: center;}
}

@media only screen and (max-width: 900px) {
	section#bio {height: 100vh; position: relative; z-index: 999; padding-left: 2em;}
	section#bio div {margin: 0;position: absolute;top: 50%;-ms-transform: translateY(-50%);transform: translateY(-50%); padding-bottom: 4em; width: 350px;}
	section#work {width: 100%; padding-left: 0; }
	section#work article {padding: 6em 2em 10em 7em; box-sizing: border-box; text-align: center;}
}
@media only screen and (max-width: 600px) {
	section#bio {padding-left: 1.5em;}
	section#bio div {width: 80%;}
	section#work article {padding: 6em 1.5em 10em 7em; box-sizing: border-box; text-align: center;}
}
@media only screen and (max-width: 350px) {
	section#bio {padding-left: 1em;}
	section#bio div {width: 80%;}
	section#work article {padding: 3em 1em 7em 4em; box-sizing: border-box; text-align: center;}
}