body {
font:400 16px/1.5 Oswald, "Helvetica Neue", Helvetica, Arial, sans-serif;
color:#000;
background-color:#f5f9f8;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
}

a {
color:#000;
text-decoration:none;
}

a:hover {
text-decoration:none;
}

h1,h2,h3,h4,p,ul,ol {
margin:0;
}

ul,ol {
list-style:none;
padding:0;
}

.header .logo {
background:url(/img/loading.gif) no-repeat center center;
background-size:cover;
width:60px;
height:60px;
position:fixed;
left:30px;
top:30px;
z-index:20;
color:transparent;
font:0/0 a;
text-shadow:none;
}

.header .logo.loaded {
background:url(/img/websitelogo.png) no-repeat center center;
background-size:cover}

/***** HIRE ME HEADER ****/
/*.header .hire-me { 
    position:fixed; 
    right:30px; 
    bottom:30px; 
    z-index:100; 
    text-transform:uppercase; 
    font-size:.75em; 
    font-weight:700; 
    letter-spacing:2px; 
    border-bottom:1px solid #000; 
    -webkit-transition:color 0.2s,border-color .2s; 
    -moz-transition:color 0.2s,border-color .2s; 
    transition:color 0.2s,border-color .2s 
} 
	 
.header .hire-me:hover { 
    color:rgba(0,0,0,0.5); 
    border-color:rgba(0,0,0,0.5) 

*/
.header .menu {
position:fixed;
right:30px;
top:30px;
z-index:40;
width:60px;
text-align:right;
white-space:nowrap
}

.header .menu.dark a {
color:#FFF;
border-color:#FFF;
}

.header .menu.dark a:hover {
color:rgba(255,255,255,0.5);
border-color:rgba(255,255,255,0.5);
}

.header .menu li {
display:block;
margin:0 0 5px;
}

.header .menu li.hidden {
display:none;
}

.header .menu a {
text-transform:uppercase;
font-size:.75em;
font-weight:700;
letter-spacing:2px;
border-bottom:1px solid #000;
-webkit-transition:color .2s border-color .2s;
-moz-transition:color .2s border-color .2s;
transition:color .2s border-color .2s;
}

/***.header .menu a:hover {
color:rgba(0,0,0,0.5);
border-color:rgba(0,0,0,0.5);
}
****/
/*****************OLD CONTENT BOX
.content {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
position:absolute;
left:0;
top:0;
width:100%;
min-height:100%;
-webkit-transition:all .8s cubic-bezier(0.645,0.045,0.355,1);
-moz-transition:all .8s cubic-bezier(0.645,0.045,0.355,1);
transition:all .8s cubic-bezier(0.645,0.045,0.355,1);
padding:0 120px;
}
**************************/


.content {
        -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
        box-sizing:border-box;
        position:absolute;
        left:0;
        top:0;
        width:100%;
        min-height:100%;
        padding:0 70px;
        -webkit-transition:all .8s cubic-bezier(0.645,0.045,0.355,1);
        -moz-transition:all .8s cubic-bezier(0.645,0.045,0.355,1);
        transition:all .8s cubic-bezier(0.645,0.045,0.355,1)
    }


.content.hidden {
-webkit-transform:translate(-100%,0);
-moz-transform:translate(-100%,0);
-ms-transform:translate(-100%,0);
-o-transform:translate(-100%,0);
transform:translate(-100%,0);
position:fixed;
overflow:hidden;
}

.about {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    position:absolute;
    left:120px;
    top:0;
    width:100%;
    min-height:100%;
    padding:0 120px 0 0;
    background-color:#fff;
    -webkit-transition:all .8s cubic-bezier(0.645,0.045,0.355,1);
    -moz-transition:all .8s cubic-bezier(0.645,0.045,0.355,1);
    transition:all .8s cubic-bezier(0.645,0.045,0.355,1)
}

.about.hidden {
-webkit-transform:translate(100%,0);
-moz-transform:translate(100%,0);
-ms-transform:translate(100%,0);
-o-transform:translate(100%,0);
transform:translate(100%,0);
position:fixed;
overflow:hidden;
}



.about .close-about {
position:absolute;
left:-120px;
top:0;
z-index:50;
width:120px;
height:100%;
}

.about-content {
zoom:1;
padding:0 0 30px;
}

.about-content:before,.about-content:after {
content:" ";
display:table;
}

.about-content:after {
clear:both;
}

.about-content:before {
content:'';
display:block;
background:#000 url(/img/websiteheader.jpg) no-repeat center center;
background-size:cover;
width:100%;
height:400px;
}

.about-content section {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
float:left;
max-width:320px;
margin:60px 0 0 60px;
}

.about-content h2 {
font-size:.75em;
letter-spacing:2px;
text-transform:uppercase;
margin:0 0 1em;
}

.about-content p {
margin:0 0 1em;
font-size:.80em;
font-family: Helvetica;
}

.about-content p:last-child {
margin-bottom:0;
}

.about-content a {
-webkit-transition:all .2s;
-moz-transition:all .2s;
transition:all .2s;
}

.about-content a:hover {
color:#7f7f7f;
}

.about-content .button {
display:inline-block;
border:2px solid #000;
font-weight:500;
padding:.5em 1em;
}

.about-content .button:hover {
border-color:#7f7f7f;
}

.about-content .social-icons {
margin:0 0 1.5em;

}

.about-content .social-icons li {
display:inline-block;
}

.about-content .social-icons li:after {
content:'/';
display:inline-block;
margin:0 .5em;
}

.about-content .social-icons li:last-child:after {
content:'';
}

.navigation {
position:fixed;
left:57px;
top:120px;
z-index:20;
}

.navigation li {
display:block;
margin:0 0 6px;
}

.navigation a {
display:block;
position:relative;
width:4px;
height:4px;
border-radius:50%;
color:transparent;
font:0/0 a;
text-shadow:none;
-webkit-transition:all .2s;
-moz-transition:all .2s;
transition:all .2s;
padding:1px;
}

.navigation a:before {
content:'';
width:100%;
height:100%;
display:block;
border-radius:50%;
-webkit-transform:scale(0);
-moz-transform:scale(0);
-ms-transform:scale(0);
-o-transform:scale(0);
transform:scale(0);
-webkit-transition:all .2s;
-moz-transition:all .2s;
transition:all .2s;
}

.navigation a:hover,.navigation a.active {
-webkit-transform:scale(2);
-moz-transform:scale(2);
-ms-transform:scale(2);
-o-transform:scale(2);
transform:scale(2);
}

.navigation a:hover:before,.navigation a.active:before {
-webkit-transform:scale(1);
-moz-transform:scale(1);
-ms-transform:scale(1);
-o-transform:scale(1);
transform:scale(1);
background-color:#f5f9f8;
}

.navigation a.active {
margin:8px 0;
}

.project-list {
opacity:0;
margin:0 auto;
}

.project-list.loaded {
opacity:1;
-webkit-transition:opacity .4s;
-moz-transition:opacity .4s;
transition:opacity .4s;
}

.project-item {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
position:relative;
float:left;
text-align:center;
cursor:pointer;
color:rgba(0,0,0,0.6);
width:320px;
border:10px solid #FFF;
box-shadow:0 1px 1px rgba(0,0,0,0.1);
margin:30px;
}

.project-item:hover .project-item-overlay {
opacity:1;
}

.project-item:hover .project-item-meta {
-webkit-transform:scale(1);
-moz-transform:scale(1);
-ms-transform:scale(1);
-o-transform:scale(1);
transform:scale(1);
}

.project-item:nth-child(3n+1) {
clear:left;
}

.project-item.dark {
color:rgba(255,255,255,0.8);
}

.project-item.unframed {
box-shadow:none;
border:0;
}

.project-item.unframed .project-item-image {
border:0;
}

.project-item.unframed .project-item-overlay {
width:240px;
height:240px;
left:50%;
top:50%;
border-radius:50%;
margin:-120px 0 0 -120px;
}

.project-item.transition {
opacity:0;
-webkit-transition:all .4s;
-moz-transition:all .4s;
transition:all .4s;
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-ms-transform:scale(0.8);
-o-transform:scale(0.8);
transform:scale(0.8);
}

.project-item-image {
display:block;
width:100%;
}

.project-item-overlay {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
text-align:center;
background-color:#dce0df;
opacity:0;
-webkit-transition:all .3s;
-moz-transition:all .3s;
transition:all .3s;
}

.project-item-meta {
position:absolute;
left:0;
top:50%;
width:100%;
-webkit-transform:scale(0.6);
-moz-transform:scale(0.6);
-ms-transform:scale(0.6);
-o-transform:scale(0.6);
transform:scale(0.6);
-webkit-transition:all .3s;
-moz-transition:all .3s;
transition:all .3s;
margin:-20px 0 0;
}

.project-item-meta h3 {
font-size:.875em;
font-weight:700;
text-transform:uppercase;
letter-spacing:2px;
}

.project-item-meta span {
font-size:.6875em;
letter-spacing:2px;
text-transform:lowercase;
}

.project {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
text-align:center;
opacity:0;
-webkit-transform:translate(0,30px);
-moz-transform:translate(0,30px);
-ms-transform:translate(0,30px);
-o-transform:translate(0,30px);
transform:translate(0,30px);
-webkit-transition:all .4s;
-moz-transition:all .4s;
transition:all .4s;
padding:30px 120px 70px;
}

.project.loaded {
opacity:1;
-webkit-transform:translate(0,0);
-moz-transform:translate(0,0);
-ms-transform:translate(0,0);
-o-transform:translate(0,0);
transform:translate(0,0);
}

.project:before {
content:'';
display:inline-block;
height:100%;
vertical-align:middle;
}

.project-image {
display:inline-block;
vertical-align:middle;
max-width:100%;
max-height:100%;
margin:0 0 30px;
}

.project-title {
position:absolute;
left:0;
bottom:30px;
width:100%;
font-size:.625em;
text-transform:uppercase;
letter-spacing:2px;
color:#7f7f7f;
}

.project-nav {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
position:absolute;
left:0;
top:0;
z-index:10;
width:100%;
height:100%;
padding:0 120px;
}

.project-nav a {
float:left;
position:relative;
width:50%;
height:100%;
}

.project-nav a:before {
content:'';
background:url(/assets/arrows.png?cb=075106714e2f4d548ae3f9e384842737) no-repeat left top;
position:absolute;
top:50%;
width:20px;
height:40px;
opacity:0;
-webkit-transition:all .2s;
-moz-transition:all .2s;
transition:all .2s;
margin:-20px 0 0;
}

.project-nav a.next:before {
left:60px;
}

.project-nav a.next:hover:before {
opacity:1;
left:30px;
}

.project-nav a.previous {
float:right;
}

.project-nav a.previous:before {
background-position:right top;
right:60px;
}

.project-nav a.previous:hover:before {
opacity:1;
right:30px;
}

@media screen and (max-width: 1024px) {
.header .logo,.header .menu {
position:absolute;
}

.header .menu.dark a:hover {
color:#FFF;
border-color:#FFF;
}

.header .menu a:hover {
color:#000;
border-color:#000;
}

.about {
left:0;
padding:0;
}

.about .close-about {
left:0;
height:120px;
}

.about-content {
border:0;
}

.about-content section {
width:260px;
margin:30px 0 0 30px;
}

.content {
padding:120px 0 0;
}

.project-list {
width:320px;
}

.project-item {
width:280px;
margin:0 20px 20px;
}

.project {
height:auto;
padding:120px 20px 40px;
}

.project-nav,.navigation { 
display:none;

	
}
}