/* general */
body, html{
	margin:0;padding:0;
	clear: both;
}
html{
	height:100%;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box;box-sizing: border-box;
	-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}
body{
	min-height:100%;
}
a{
	color:#000;
	font-family: 'cubanoregular';font-size:1.4em;
	text-decoration:none;
}
a.square, .square{
	border:solid 3px;
	padding:.3em 0;
	text-align:center;letter-spacing:.02em;
	transition:.25s ease-in;-o-transition:.25s ease-in;-ms-transition:.25s ease-in;-moz-transition:.25s ease-in;-webkit-transition:.25s ease-in;
}

h1, h2, h3, h4, h5{
	font-family: 'cubanoregular';
}
h2{
	font-size:3em;
}
h3{
	font-size:2.5em;
}
p{
	padding:.8em 0;
	color:#fff;
	font-family: 'Open Sans', sans-serif;font-weight:400;font-size:1.3em;
	line-height:1.45em;
}


/* header */
header{
	height:100%;
	background:#f4ede7;
}
header img{
	position:absolute;
	top:0;right:0;bottom:0;left:0;
	margin:auto auto;padding-bottom:2%;
	width:90%;	
}
.larasportfolio{
	background:url(/gfx/larasportfolio.svg)no-repeat center center;
	background-size:90%;
	width:100%;height:90%;
}
header a{
	position:absolute;
	bottom:4.5%;right:0;left:0;
	margin:auto auto;
	max-width:220px;
	color:#0bb9b3;border-color:#0bb9b3;
}
header a:hover{
	border-color:#0bb9b3;color:#fff;
	box-shadow:inset 0 0 0 23px rgba(11,185,179,1);
}
.email-plane{
	position:fixed;
	top:3%;left:2%;
	width:auto;height:50px;
	overflow:visible;
	z-index:1000;
}
.paperplane{
	display:inline-block;
	margin:0 .8em 0 0;
	width:auto;height:100%;
}
.email-field{
	display:inline-block;
	width:0px;height:100%;
	background:#fff;
	border-radius:3px;
	vertical-align:top;
	visibility:none;
	overflow:hidden;
	transition:.8s;-webkit-transition:.8s;-moz-transition:.8s;
}
.email-plane a{
	display:block;
	padding:.5em 0 0 1.1em;
	width:100%;
	transition:.2s ease-in-out;-webkit-transition:.2s ease-in-out;-moz-transition:.2s ease-in-out;
}
.email-plane a:hover{
	color:#ec1c24;
}
.email-plane:hover .email-field{
	width:320px;
}

/* skills */
#skills{
	height:81em;
}
.step{
	position:relative;
	min-height:34em; 
    overflow:hidden;
}
.step:nth-child(2){
	min-height:43em;
	overflow:visible;
}
.step:last-child{
	top:-30em;
}
.step h2{
	position:absolute;
	bottom:53%;left:5%;
	max-width:50%;
	color:#fff;
	z-index:999;
}
.step h2.designtitle{
	right:5%;bottom:70%;left:auto;
	text-align:right;
}
.step h2.buildtitle{
	bottom:17%;
}
.content{
	height:34em;
	-ms-transform:skew(0deg,-6deg);-webkit-transform:skew(0deg,-6deg);transform:skew(0deg,-6deg);
}
.workthing{
	position:absolute;
	width:100%;min-height:34em;
	 -ms-transform:skew(0deg,6deg);-webkit-transform:skew(0deg,6deg);transform:skew(0deg,6deg);
}
.concept{
	top:-5em;
	background:#efc300;
}
.design{
	top:-7em;
	min-height:40em;
    background:#0bb9b3;
}
.design .illustration{
	left:5%;bottom:32%;right:auto;
}
.design .illustration-canvas{
	padding:2.8em 0 0 1.5em;
}
.build{
	bottom:-7em;
	background:#ec1c24;
    -ms-transform:skew(0deg,-6deg);-webkit-transform:skew(0deg,-6deg);transform:skew(0deg,-6deg);
}
.build .content{
	-ms-transform:skew(0deg,6deg);-webkit-transform:skew(0deg,6deg);transform:skew(0deg,6deg);
}
.build .illustration{
	bottom:31%;
}
.illustration{
	position:absolute;
	right:5%;bottom:12%;
	height:20em;
}
.illustration-canvas{
	position:relative;
	width:auto;height:auto;
}
.sublime, .design-illustrated{
	height:100%;
}
.head-image{
	height:100%;width:16em;
	background:url(/gfx/head.svg) no-repeat;background-size:100%;
}
.design-image{
	height:100%;width:14em;
	background:url(/gfx/design.svg) no-repeat;background-size:100%;
}
.sublime-image{
	height:100%;width:18.5em;
	background:url(/gfx/build.svg) no-repeat;background-size:100%;
}

.screw{
	position:absolute;
	width:35%;height:auto;
	z-index:99;
	-webkit-animation:spin 7s linear infinite;-moz-animation:spin 7s linear infinite;animation:spin 7s linear infinite;
}
.screw1{
	top:5%;right:34%;
}
.screw2{
	width:30%;height:auto;
	top:22%;right:7%;
	-webkit-animation:spin-turn 7s linear infinite;-moz-animation:spin-turn 7s linear infinite;animation:spin-turn 7s linear infinite;
}
.screw3{
	width:27%;height:auto;
	top:36.5%;right:35%;
}

.codebar{
	position:absolute;
	border-radius:2px;
	z-index:99;
	height:1.6%;
}
.codebar1{
	bottom:35.9%;left:7%;
	width:40%;
	background:#A2C051;
	-webkit-animation:codefirst 7s linear infinite;-moz-animation:codefirst 7s linear infinite;animation:codefirst 7s linear infinite;
}
.codebar2{
	bottom:32%;left:13.3%;
	width:0%;
	background:#AB2770;
	-webkit-animation:codesecond 3s linear infinite;-moz-animation:codesecond 3s linear infinite;animation:codesecond 3s linear infinite;
	animation-delay:1.5s;-webkit-animation-delay:1.5s;-moz-animation-delay:1.5s;
}
.codebar3{
	bottom:54.5%;left:13.3%;
	width:0%;
	background:#edc21a;
	-webkit-animation:codethird 5s linear infinite;-moz-animation:codethird 5s linear infinite;animation:codethird 5s linear infinite;
	animation-delay:1s;-webkit-animation-delay:1s;-moz-animation-delay:1s;
}

.design-illustrated{
	margin:18% 0 0 8%;
}
.lightbar{
	position:absolute;
	opacity:1;
	height:10%;width:1.8%;
	background:#edc21a;
	border-radius:30%;	
	-webkit-animation:lighton 3s infinite;-moz-animation:lighton 3s infinite;animation:lighton 3s infinite;
}
.lightbar1{
	left:0;top:11%;
	transform:rotate(-60deg);-ms-transform:rotate(-60deg); -webkit-transform:rotate(-60deg);
}
.lightbar2{
	left:11%;top:2.3%;
	transform:rotate(-30deg);-ms-transform:rotate(-30deg); -webkit-transform:rotate(-30deg);
}
.lightbar3{
	left:30.3%;top:0;
}
.lightbar4{
	left:49.3%;top:2.3%;
	transform:rotate(30deg);-ms-transform:rotate(30deg); -webkit-transform:rotate(30deg);
}
.lightbar5{
	left:auto;top:11%;right:37%;
	transform:rotate(60deg);-ms-transform:rotate(60deg); -webkit-transform:rotate(60deg);
}

/* work */
.workitem{
	position:relative;
	display:inline-block;
	width:33.33%;height:17%;height:24.5vw;
	cursor:pointer;
}
.workitem:first-child img, .workitem:nth-child(6) img, .workitem:nth-child(7) img{
	max-width:45%;
}
.workitem:nth-child(4) img, .workitem:nth-child(2) img, .workitem:nth-child(8) img, .workitem:nth-child(9) img{
	max-width:55%;
}
.workitem:nth-child(2n+2){
	background:#f4ede7;
}
.workitem img{
	position:absolute;
	margin:auto auto;
	top:0;right:0;bottom:0;left:0;
	max-width:35%;
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
    filter: gray;-webkit-filter: grayscale(100%);filter: grayscale(100%);-moz-filter: grayscale(100%);-o-filter: grayscale(100%);
	transition:bottom .2s;-webkit-transition:bottom .2s;-moz-transition:bottom .2s;-ms-transition:bottom .2s;
}
.workitem:hover img{
	filter:none;-webkit-filter:none;-moz-filter:none;
	bottom:4%;
}

/* contact */
#contact{
	position:relative;
	width:100%;height:100%;
	background:#efc300;
	overflow:hidden;
}
.socials{
	position:absolute;
	top:-5%;left:0;right:0;
	width:100%;height:65%;
	margin:0 auto;
	background:#ec1c24;
	background: -webkit-linear-gradient(left, #ec1c24 , #0bb9b3);
    background: -o-linear-gradient(right, #ec1c24, #0bb9b3);
    background: -moz-linear-gradient(right, #ec1c24, #0bb9b3);
    background: linear-gradient(to right, #ec1c24 , #0bb9b3);
	font-size:0;
	overflow:hidden;
}
.socialbar{
	display:inline-block;
	top:-3%;
	width:25%;height:110%;
	background:#ec1c24;
	font-size:16px;
	vertical-align:top;
	transform:rotate(-7deg);-ms-transform:rotate(-7deg); -webkit-transform:rotate(-7deg);
}

.socialbar2, .socialbar4{
	background:#0bb9b3;
}
.socialbar img{
	position:absolute;
	bottom:17%;left:0;right:0;
	margin:auto auto;
	max-height:15%;
	transform:rotate(7deg);-ms-transform:rotate(7deg); -webkit-transform:rotate(7deg);
	transition:.3s;-webkit-transition:.3s;-ms-transition:.3s;
}
.socialbar3 img{
	max-height:16%;
}
.socialbar1 img{
	max-height:13%;
}
.socialbar:hover img{
	bottom:20%;
}


.knowmore{
	position:absolute;
	margin:auto auto;
	left:0;right:0;bottom:13%;
	width:40%;
	color:#fff;border-color:#fff;
	font-size:1.8em;
	transition:.3s ease-in;-o-transition:.3s ease-in;-ms-transition:.3s ease-in;-moz-transition:.3s ease-in;-webkit-transition:.3s ease-in;
}
.knowmore:hover{
	color:#efc300;
	box-shadow:inset 0 0 0 40px rgba(255,255,255,1);
}


/* slide-outs */
.morelara, .work-detail{
	position:fixed;
	left:-100%;top:0;
	height:100%;width:100%;
	background:#0bb9b3;
	z-index:999;
}
.morelara-content{
	display:none;
	width:50%;min-height:5em;
	margin:0 auto;padding:5% 0 0 0;
}
.morelara-content-img{
	width:16em;height:16em;
	margin:0 auto;
	background:url(/gfx/lara-web.jpg) no-repeat;
	background-size:cover;
	border-radius:50%;
}
.close{
	position:absolute;
	top:5%;right:3.5%;
	width:2em;height:2em;
	background:url(/gfx/close.png);background-size:100%;
	cursor:pointer;
}
.close2{
	top:2.5%;right:1.3%;
	width:1.5em;height:1.5em;
	background:url(/gfx/close2.png);background-size:100%;
	z-index:2000;
}
.work-detail{
	background:#fff;
	overflow:hidden;
}

/* webfonts */
@font-face {
    font-family: 'cubanoregular';
    src: url('/fonts/cubano-regular-webfont.eot');
    src: url('/fonts/cubano-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/cubano-regular-webfont.woff') format('woff'),
         url('/fonts/cubano-regular-webfont.ttf') format('truetype'),
         url('/fonts/cubano-regular-webfont.svg#CubanoRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}