/* 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,section,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,nav,output,ruby,section,summary,time,mark,audio,video {
margin:0;
padding:0;
border:0;
font-size:100%;
font:inherit;
vertical-align:baseline;
text-decoration:none;
font-family:'apercu_regular_pro-web', sans-serif;
font-size: 16px;
line-height: 32px;
font-style:normal;
color: #383838;
text-align: left;
-webkit-font-smoothing: antialiased;
text-shadow:1px 1px 1px rgba(0,0,0,0.004);
}

section {
animation-name: fade;
animation-duration: .4s;
animation-timing-function: cubic-bezier(.71,.55,.62,1.57);
}

@keyframes fade {

from {
    opacity: 0;
}

to {
    opacity: 1;
}
}

*,:before,:after {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box

}

/* HTML5 display-role reset for older browsers --------------------------------------------------------- */

section,aside,details,figcaption,figure,footer,header,hgroup,nav,section {
display:block
}

ol,ul, li {
list-style:none outside none;
}

blockquote,q {
quotes:none
}

blockquote:before,blockquote:after,q:before,q:after {
content:'';
content:none
}





/* Type and lists --------------------------------------------------------- */

@font-face {
font-family:'apercu_regular_pro-web';
src: url('/fonts/apercu/apercu_regular_pro-web.eot'); 
src: url('/fonts/apercu/apercu_regular_pro-web.eot?#iefix') format('embedded-opentype'), 
	url('/fonts/apercu/apercu_regular_pro-web.woff') format('woff'), 
	url('/fonts/apercu/apercu_regular_pro-web.ttf')  format('truetype'), 
	url('/fonts/apercu/apercu_regular_pro-web.svg#svgFontName') format('svg'); 
font-weight:normal;
font-style:normal;
}

@font-face {
font-family:'apercu_bold_pro-web';
src: url('/fonts/apercu/apercu_bold_pro-web.eot'); 
src: url('/fonts/apercu/apercu_bold_pro-web.eot?#iefix') format('embedded-opentype'), 
	url('/fonts/apercu/apercu_bold_pro-web.woff') format('woff'), 
	url('/fonts/apercu/apercu_bold_pro-web.ttf')  format('truetype'), 
	url('/fonts/apercu/apercu_bold_pro-web.svg#svgFontName') format('svg'); 
font-weight:bold;
font-style:normal;
}

h1, h1 span, h1.intro, h1.intro em{
font-weight:bold;
font-size: 48px;
line-height: 64px;
letter-spacing: 0.1px;
margin-bottom: 48px;
}

h1.intro {
color: white;
margin-bottom: 64px;
width:73.88888%;
transition: opacity 2s;
}

h1.current, h1.overlay, .current {
color:white;
}


.items h1 {
margin-bottom: 0;
padding-bottom: 32px;
}

h1.post {
float: left;
margin-right: 4.44%;
margin-bottom: 8px;
}

h2 {
	font-size: 20px;
	line-height: 32px;
}

.minor a {
	color: #a8bfdc;
	text-decoration: underline;
}

a, a:hover {
	cursor: pointer;
	transition: .2s ease;
}

a[onclick], a:not([name]) { cursor: pointer }

p {
	padding-bottom: 16px;
}

em {
color:#a8bfdc;
}


em.social {
display: block;
padding-bottom: 64px;
}

em.social a {
color:#a8bfdc;
}

em.social a:hover{
color:white;
}

p.date, p.post-date {
float: left;
color: #9e9e9e;
width: 34.7222%;
margin-right: 4.44%;
}

p.post-date {
float: none;
}

p.firm {
float: left;
padding-right: 8px;

}

p.position {
float: left;
color: #9e9e9e;
}

ul.meta {
	float: left;
}

ul.meta em, ul.meta a {
color: #9e9e9e;
}


/* Header --------------------------------------------------------- */

header {
width: 100%;
background:#1A2029;
color: #fff;
background-color: #1A2029;
margin-bottom:64px;
}


.wrap {
max-width: 1160px;
padding:64px 48px 128px 48px;
margin: 0 auto;
}

.id {
font-size: 20px;
color: white;
}


/* Layout --------------------------------------------------------- */

body {
	text-align: center;
}

body.index {
background-color: #1A2029;
}

section.experience, 
section.intro,
section.pagination,
section.work,
section.journal,
section.post,
section.hero {
width:100%;
max-width: 1160px;
margin:0 auto 0px auto;
padding: 0 48px;
}

section.index {
background-color: #1A2029;
}

section.intro {
margin-bottom: 80px;
}

section.project, section.post, section.experience {
margin-bottom: 80px;
}

section.pagination {
	margin-bottom: 32px;
}


section.journal, section.work, section.project, section.post, section.pagination {
display: inline-block;
}

section.hero, section.journal, section.work{
margin-top: -112px;
}

section.project {
width: 100%;
padding-top: 64px;
background: #fdfdfd;}

section.post-preview {
margin:0 auto 48px auto;
height: 400px;
background-clip: content-box;
background-color: #e9e9e9;
}


.minor, .major {
float: left;
}

.minor {
width:34.7222%;
margin-right: 4.44%;
}

.major {
width:60.8333%;
}





.entry {
border-top: 1px solid #E7E7E7;
padding-top:48px;
height:140px;
}

/* Hide overlay on project list --------------------------------------------------------- */



/* Navigation --------------------------------------------------------- */

nav {
float:right;
display: flex;
}

nav a {
font-size: 20px;
float:left;
margin-left: 48px;
color: #a8bfdc;
}

nav a:hover {
	color: white;
}

nav.touch {
display: none;
width: 100%;
height:0;
}

nav.touch a {
float: left;
width:100%;
margin:0;
}



/* Mobile Navigation --------------------------------------------------------- */

.menu, .burger-bg, .burger {
position: absolute;
width: 50px;
height: 50px;
font-size: 32px;
text-align: center;
border-radius: 100%;
right: 24px;
top: 63px;
color: #663399;
}

.burger-bg {
background: #a8bfdc;
opacity: 0;
pointer-events: none;
right: 50px;
top: 80px;
transform: translate3d(50%, -50%, 0);
transform-origin: center center;
transition: .3s;
}

.burger-bg.fs {
transform: translate3d(50%, -50%, 0);
width: 500vw;
height: 500vw;
opacity: 1;
}

.burger {
color:white;
-webkit-user-select: none;
cursor: pointer;
transition: .4s;
transform-origin: center;
font-weight: bold;
}

.burger.fs {
transform: rotate(-180deg) translateY(10px);
transform-origin: center;
color: #1A2029;
top:20px;
}

.items {
width: 100%;
opacity: 0;
transition: .2s;
transform: translateY(-100px);
pointer-events: none;
text-align: center;
position: relative;
top: 50%;
}

.items a h1 {
font-size: 32px;
text-align: center;

}


.items div {
transition: .2s;
opacity: 0;
margin-top: 0px;
}
.items.fs {
transform: translateY(0);
pointer-events: auto;
opacity: 1;

}
.items.fs div {
opacity: 1;
margin-top: 75px;
}


/* Pagination --------------------------------------------------------- */

.pagination-item {
width:47.777%;
padding:48px;
float:left;
margin-right:4.4444%;
text-align: center;
background-color: #383838;

}

.pagination-item h2 {
color: white;
text-align: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

.pagination-item:last-child {
margin-right:0;
margin-left: 0;
}

.pagination-item.pagination-item-full-width
{
width: 100%;
}



/* Layout --------------------------------------------------------- */

.grid--image-list {
position:relative
}

.grid__thumbnail {
margin-bottom:20px;
line-height: 0;
}

a.grid__thumbnail__link:hover
{ 
border:0;
}

img.project-thumb {
display:inline
}

.grid__thumbnail__overlay:hover 
{
	opacity:1;
}

.post-overlay
{
margin: 136px 0 0 80px ;
}

.break
{
border-bottom:1px solid #eee;
width:100%;
}

.media__caption
{
background-color: #fff;
width: 90%;
margin: 30px 5%;
text-align: center;
padding: 20px;
}



/* Project Information --------------------------------------------------------- */

.post-thumb, .project-thumb
{
height:400px;
background-size: cover;
background-position: center center;
overflow: hidden;
}

.project-thumb {
	background-size: initial;
    background-repeat: no-repeat;
}

.post-thumb img
{
	width: 100%;
	margin-top: -20%;
}

.page-media {
line-height:0;
float: left;
width:100%;
}

.page-media img{
background-color:#f9f9f9;
padding:10%;
margin:0 auto 30px
}

.island img {
width:100%;
height:100%;
margin-bottom: 30px;
}


.page-media-constrain img {
margin:0 auto 30px
}


.type-project{
margin-top: 48px;

}

.detail {
width:250px;
float:right
}

.detail ul li {
margin-bottom:16px;
color:#cfcfcf
}

.media-layout--single {
line-height:0;
margin:0 auto;
width:100%;
}

.media-layout--single img {
width:70%;
height:70%;
margin-left:15%;
}

.media-layout--app img {
margin-left:15%;
margin-right: 15%;
float:left;
}

.hero {
margin:0 auto;
width:100%;

}

.hero img {
width:100%;
height:100%;
padding-bottom:32px
}

.media-layout--two-up1 img {
width:35%;
height:35%;
float:left;
line-height:0;
margin-left:15%;
padding-right: 15px;
}

.media-layout--two-up2 img{
width:35%;
height:35%;
float:left;
line-height:0;
padding-left: 15px;


}

.media-layout--two-thirds img {
width:63%;
height:63%;
float:left;
padding-left: 15%;
padding-right: 15px;
}

.media-layout--one-third img {
width:22%;
height:22%;
float:left;
padding-left: 15px;

}

.media-layout--full {
line-height: 0;
}

.media-layout--cancel {
display:none
}

.media-layout--full img, .media-layout--profile img  {
width:100%;
height:100%;
max-width: 6999px;
}

.media-layout--screen, .media-layout--screen-small  {
	margin-left: 48px;
	margin-right: 48px;
}

.media-layout--screen, .media-layout--screen-small, .media-layout--mobile, .media-layout--mobile-1, .media-layout--mobile-2 {
text-align: center;
max-width:1248px;
margin: 0 auto 200px auto;

}

.media-layout--screen img, .media-layout--mobile img, .media-layout--mobile-1 img, .media-layout--mobile-2 img {
width: 100%;
height: 100%;
display: inline-block;
padding: 0 24px;
}

.media-layout--screen-small img {
width:50%;
height:50%;
}



.media-layout--mobile-1, .media-layout--mobile-2 {
float: left;
width: 50%;
}

.media-layout--mobile img, .media-layout--mobile-1 img, .media-layout--mobile-2 img {
max-width: 320px;
width: 100%;
}

.media-layout--mobile-1 img {
	margin-left: 25%;
}
.media-layout--mobile-2 img {
	margin-right: 25%;
}



.next {
width:100%;
height:50px;
background-color:#cfcfcf
}


.post-end-break {
width:50%;
margin:48px auto 64px auto;

}


.clearfix:after {
content: "";
display: table;
clear: both;
}


/* Mobile / Tablet */


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


h1.intro, h1.intro em, .items h1 {
font-weight: bold;
font-size: 32px;
line-height: 48px;
}

h1.intro, h1.post {
	width: 100%;
}

nav {
display: none;	
}

nav.touch, nav ul.touch {
display: block;
}

.minor,.major {
width: 100%;
margin-bottom: 64px;
}
.page-experience .minor h1 {
display: none;
}


.burger.fs {
	top:60px;
}

.minor, .major {
margin-bottom: 16px;
}

.hero img {
padding-bottom: 16px;
}

.pagination-item{
float: left;
margin-bottom: 32px;
width: 100%;
}


section.experience h1{
display: none;
}

.project-thumb {
background-size: 60%;
}

section.post-preview, .project-thumb, .post-thumb, .post-preview {
height: 300px;
}

.post-overlay {
margin-top: 80px;
}


.media-layout--mobile-1, .media-layout--mobile-2 {
padding: 6%;
}

.media-layout--mobile-1 img, .media-layout--mobile-2 img{
	margin: 0;
}

.media-layout--profile {
	display: none;
}

.media-layout--screen, .media-layout--screen-small, .media-layout--mobile, .media-layout--mobile-1, .media-layout--mobile-2 {
margin-bottom: 120px;

}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {

header {
height: 128px;
margin-bottom:48px;
}


.wrap {
padding-top: 32px;
}

.burger{
top: 30px;
}

.burger.fs {
top:28px;
}

.burger-bg {
top: 48px;
}

p.date {
	width: 100%;
}


.entry {
	height:193px;
}

.post-overlay
{
margin: 24px 0 0 24px ;
}



h1.overlay {
font-size: 20px;
line-height: 32px;
}



h1.intro, h1.intro em, .items a h1 {
    font-weight: bold;
    font-size: 24px;
    line-height: 32px;
    }

h1.post {
	font-weight: bold;
    font-size: 32px;
    line-height: 48px
}

section.journal, section.work, section.hero {
margin-top:-80px;
}

section.experience, section.intro, section.pagination, section.work, section.journal, section.post, section.hero {
padding: 0 24px;
}

.wrap {
padding-left: 24px;
padding-right: 24px;

}

section.post-preview {
margin-bottom:32px;

} 
section.post-preview, .project-thumb, .post-thumb, .post-preview {
	height: 200px;

}

.media-layout--profile {
	display: none;

}
.media-layout--screen, .media-layout--screen-small {
    margin-left: 16px;
    margin-right: 16px;
}

.media-layout--screen img, .media-layout--mobile img, .media-layout--mobile-1 img, .media-layout--mobile-2 img {
	padding:0;
}


}