* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; position:relative; }
.chromeframe {position: absolute; top: 0;}

body {font: 16px 'proximanova-regular', serif; overflow:hidden;-webkit-font-smoothing:antialiased;}
body, select, input, textarea {color:#999; font-weight:normal;}

a, a:hover {color: #e50053; font-weight:normal; text-decoration:none;}

img {width:100%; height:100%;}

::-moz-selection{background:transparent; color: #e50053; text-shadow: none;}
::selection {background:transparent; color: #e50053; text-shadow: none;} 

a:link {-webkit-tap-highlight-color: transparent;} 

ins {background-color: #fcd700; color: #000; text-decoration: none;}
mark {background-color: #fcd700; color: #000; font-style: italic; font-weight: bold;}

input:-moz-placeholder { color:#a9a9a9; }
textarea:-moz-placeholder { color:#a9a9a9; }

h1, h2, h3 { font-family:'proximanova-bold', serif; color:#464646; font-weight:400; line-height:normal; }
h2 { font-size:40px; }
p { line-height:1.8em; margin:0; font-family:'proximanova-regular', serif; font-weight:400; }

#intro, #workintro, #item { width:100%; padding:6em 1.4em 2em 1.4em; margin:0; }
#intro span, #workintro span { color:#ccc; font-style:italic; }
#intro h1, #workintro h1 { width:60px;height:62px;margin-bottom:50px;text-indent:-9999px; }
#intro h1 a, #workintro h1 a { width:60px; height:62px; display:block; background-image:url(../img/logo.svg); background-position:50% 50%; background-repeat:no-repeat; opacity:0.8; }
.no-svg #intro h1 a, .no-svg #workintro h1 a { background-image:url(../img/logo.png); }
#intro h2, #workintro h2 {font-size:20px;}

#workintro h1, #workintro h1 a {width:60px; height:62px;}

#work, #work ul { width:100%; overflow:hidden; background:#000; }
#work ul li { display:inline; float:left; margin:0; background:#000; line-height:0; }
#work ul li a { -webkit-backface-visibility: hidden; display:block; }

#item p, #cv p { font-size:20px; margin-bottom:2em; }
#item a, #cv a { font-style:italic; }

#cv h3 { text-transform:uppercase; font-size:16px; margin:2em 0; }
 
#attr, footer { background:#fff; width:100%; overflow:hidden; }
#attr ul { margin: 50px auto; max-width:900px; overflow:hidden; }
#attr ul li { display:inline; float:left; width:100%; margin: 30px 0; }
#attr ul li h3 { margin-bottom:1.6em; font-size:18px; font-style:italic;  }
#attr p, footer p { font-size:18px; }
#attr a { color:#464646; font-weight:200; }

.bt { border-top:1px solid #eee; }

footer { background:#1d1d1d; color:#464646; }
footer .container { max-width:900px; overflow:hidden; margin: 50px auto; }
footer p { margin:0; }
footer .social { width:66%; float:left; display:inline; }
footer .copyright { width:34%; float:left; display:inline; margin-top:10px; }
footer ul { width:100%; }
footer ul li { display:inline; float:left; width:25%; }
footer a.icon{color:#464646;font-family:entyposocial;font-size:3em;margin:0 auto;}

body>nav {
position:fixed;
top:0;
left:0;
width:100%;
height:80px;
font-size:60px;
font-family:'proximanova-regular', serif;
font-weight:400;
font-style:italic;
color:#fff;
padding-top:0;
background:none;
z-index:1000;
overflow:hidden;
backface-visibility:hidden;
-webkit-transition:background-color .6s cubic-bezier(0.7,0.01,0.3,1),padding-top .6s cubic-bezier(0.7,0.01,0.3,1);
-moz-transition:background-color .6s cubic-bezier(0.7,0.01,0.3,1),padding-top .6s cubic-bezier(0.7,0.01,0.3,1);
-o-transition:background-color .6s cubic-bezier(0.7,0.01,0.3,1),padding-top .6s cubic-bezier(0.7,0.01,0.3,1);
transition:background-color .6s cubic-bezier(0.7,0.01,0.3,1),padding-top .6s cubic-bezier(0.7,0.01,0.3,1);
}

body>nav .bar {
z-index:2000;
margin-top:0;
width:100%;
height:100px;
background:none;
-webkit-transition:background-color .6s cubic-bezier(0.7,0.01,0.3,1),margin-top .6s cubic-bezier(0.7,0.01,0.3,1);
-moz-transition:background-color .6s cubic-bezier(0.7,0.01,0.3,1),margin-top .6s cubic-bezier(0.7,0.01,0.3,1);
-o-transition:background-color .6s cubic-bezier(0.7,0.01,0.3,1),margin-top .6s cubic-bezier(0.7,0.01,0.3,1);
transition:background-color .6s cubic-bezier(0.7,0.01,0.3,1),margin-top .6s cubic-bezier(0.7,0.01,0.3,1);
}

body>nav a { color:#fff; }

body>nav .nav-background {
z-index:1500;
position:absolute;
top:0;
width:100%;
height:100%;
background:none;
display:table;
-webkit-transition:background-color .6s cubic-bezier(0.7,0.01,0.3,1);
-moz-transition:background-color .6s cubic-bezier(0.7,0.01,0.3,1);
-o-transition:background-color .6s cubic-bezier(0.7,0.01,0.3,1);
transition:background-color .6s cubic-bezier(0.7,0.01,0.3,1);
}

body>nav h1
{
width:30px;height:32px;text-indent:-9999px;
display:block;
left:0;
position:absolute;
top:0;
transition:padding-top .6s cubic-bezier(0.7,0.01,0.3,1);
z-index:1000;
}

body>nav h1 a
{
	width:30px; height:32px; display:block; background-image:url(../img/logo.svg);background-position:50% 50%; background-repeat: no-repeat; -moz-transition:padding-top .6s cubic-bezier(0.7,0.01,0.3,1);
-o-transition:padding-top .6s cubic-bezier(0.7,0.01,0.3,1);
-webkit-transition:padding-top .6s cubic-bezier(0.7,0.01,0.3,1);
}

body>nav #toggle {
width:104px;
height:74px;
padding:45px 40px;
z-index:1000;
background-position:50% 50%;
background-repeat:no-repeat;
cursor:pointer;
position:absolute;
top:0;
right:0;
-webkit-transition:padding-top .6s cubic-bezier(0.7,0.01,0.3,1);
-moz-transition:padding-top .6s cubic-bezier(0.7,0.01,0.3,1);
-o-transition:padding-top .6s cubic-bezier(0.7,0.01,0.3,1);
transition:padding-top .6s cubic-bezier(0.7,0.01,0.3,1);
}

body>nav #toggle .menu {
width:24px;
height:4px;
margin:10px 0;
background:#e50053;
-webkit-transition:all .3s;
-moz-transition:all .3s;
-o-transition:all .3s;
transition:all .3s;
}

body>nav #toggle .menu:after,body>nav #toggle .menu:before {
content:'';
display:block;
width:24px;
height:4px;
background:#e50053;
position:absolute;
z-index:-1;
-webkit-transition:all .3s;
-moz-transition:all .3s;
-o-transition:all .3s;
transition:all .3s;
}

body>nav #toggle .menu:before {
top:-8px;
}

body>nav #toggle .menu:after {
top:8px;
}

body>nav #toggle:hover {
-webkit-transition:top .4s;
-moz-transition:top .4s;
-o-transition:top .4s;
transition:top .4s;
}

body>nav #toggle:hover .menu:before {
top:-9px;
}

body>nav #toggle:hover .menu:after {
top:9px;
}

body>nav ul {
visibility:hidden;
top:-10%;
width:100%;
padding:0;
opacity:0;
display:table-cell;
vertical-align:middle;
-webkit-transform:perspective(600px) rotateX(10deg);
-moz-transform:perspective(600px) rotateX(10deg);
-ms-transform:perspective(600px) rotateX(10deg);
-o-transform:perspective(600px) rotateX(10deg);
transform:perspective(600px) rotateX(10deg);
-webkit-transition:all .5s cubic-bezier(0.7,0,0.36,0.63);
-moz-transition:all .5s cubic-bezier(0.7,0,0.36,0.63);
-o-transition:all .5s cubic-bezier(0.7,0,0.36,0.63);
transition:all .5s cubic-bezier(0.7,0,0.36,0.63);
}

body>nav li {
list-style:none;
text-align:center;
}

body>nav li a {
padding:8px 0 0;
width:100%;
display:block;
}

body>nav li a:hover {
background:#fff;
}

body>nav li a:focus {
outline:0;
}

body>nav.solid {
padding-top:0;
}

body>nav.solid .bar {
margin-top:-18px;
}

body>nav.solid #logo {
background-image:url(../img/logo.svg);
}

body>nav.solid #toggle .menu {
background:#e50053;
}

body>nav.solid #toggle .menu:before {
background:#e50053;
}

body>nav.solid #toggle .menu:after {
background:#e50053;
}

body>nav.open {
height:100%;
}

body>nav.open .bar {
margin-top:0;
background:none;
}

body>nav.open #logo {
background-image:url(../img/logo_white.svg) !important;
}

body>nav.open .menu {
background:none!important;
}

body>nav.open .menu:after {
top:0!important;
background:#fff!important;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}

body>nav.open .menu:before {
top:0!important;
background:#fff!important;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}

body>nav.open .nav-background {
background-color:#e50053!important;
background-color:rgba(229,0,83,0.95)!important;
}

body>nav.open ul {
top:0;
visibility:visible;
opacity:1;
margin-top:0;
-webkit-transform:perspective(600px) rotateX(0deg);
-moz-transform:perspective(600px) rotateX(0deg);
-ms-transform:perspective(600px) rotateX(0deg);
-o-transform:perspective(600px) rotateX(0deg);
transform:perspective(600px) rotateX(0deg);
}

body>nav.closing {
height:100%;
}

body>nav.closing ul {
top:10%;
visibility:visible;
opacity:0;
-webkit-transform:perspective(600px) rotateX(-10deg);
-moz-transform:perspective(600px) rotateX(-10deg);
-ms-transform:perspective(600px) rotateX(-10deg);
-o-transform:perspective(600px) rotateX(-10deg);
transform:perspective(600px) rotateX(-10deg);
-webkit-transition:all .5s cubic-bezier(0.63,0.64,0.3,1);
-moz-transition:all .5s cubic-bezier(0.63,0.64,0.3,1);
-o-transition:all .5s cubic-bezier(0.63,0.64,0.3,1);
transition:all .5s cubic-bezier(0.63,0.64,0.3,1);
}


/* Media queries
-------------------------------------------------------------------------------*/



@media only screen and (max-width:479px) {	
#work ul li, #attr ul li { width:100%; }
#attr, footer { padding: 0 2em; }
#intro h2, #workintro h2 { font-size:22px; line-height:1.4em; }
#intro h1, #workintro h1 { margin:0 auto 50px auto; }
#item p, #cv p { font-size:20px; line-height:1.5em; margin-bottom:1em; color:#464646; }
}

@media only screen and (max-width:700px) {	
footer .social, footer .copyright {width:100%; text-align:center;}
#item, #cv { padding:2em 1.4em; }
#item p, #cv p { font-size:20px; line-height:1.5em; margin-bottom:1em; color:#464646; }
#attr ul li h3 { margin-bottom:5px; }
#attr ul li { margin:10px 0; }
}

@media only screen and (min-width:480px) and (max-width:700px) {
footer .social, footer .copyright { width:100%; text-align:center; }
}

@media only screen and (min-width:480px) and (max-width:959px) {
#work ul li { width:50%; }
#attr, #cv, footer { padding: 0 1.4em; }
#intro h2, #workintro h2 { font-size:26px; }
}

@media only screen and (min-width:700px) and (max-width:959px) {
#attr ul li { width:33.33333%; }
}

@media only screen and (min-width:960px) {
a {-moz-transition:all 0.2s ease-in-out;-ms-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}
#work ul li, #attr ul li { width:33.33333%; }
#work ul li a {opacity:0.7;}
#work ul li a:hover { opacity:1; }
#attr ul { margin: 100px auto; }
footer a.twitter:hover{color:#009edf;}
footer a.dribbble:hover{color:#ea4c89;}
footer a.instagram:hover{color:#447297;}
footer a.linkedin:hover{color:#4875B4;}
#attr a:hover { color:#e50053; }
#intro { margin:130px auto; max-width:740px; padding:0; }
#workintro, #item, #cv { margin:100px auto; max-width:740px; padding:0;}
.cv { margin-bottom:0 !important;}
#cv { margin:60px auto 100px auto; }
#intro h2 { font-size:40px; }
#workintro h2 { font-size:30px; }
#item a:hover, #intro a:hover, #cv a:hover { color:#464646; }
#intro h1 a:hover, #workintro h1 a:hover { opacity:1; }
}

@media only screen and (min-width:1700px) {
#work ul li { width:20%; }
}