@charset "UTF-8";
/* Clear all */
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,font,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 {
	margin:0;
	padding:0;
	background:transparent;
	border:0;
	outline:0;
	vertical-align:baseline;
}

/* core structure */
body { background-color:#000; color:#fff; font-family:'Lato',"Helvetica Neue Light","Helvetica Neue", 'Trebuchet MS',Arial, Helvetica, sans-serif; font-size:12px; line-height:18px; margin:0; padding:0; }
#content { position:relative; width:100%; overflow: hidden; }


/* grid elements */
#content #index-hero-wrapper {
	background: url(../i/img_hero_01.jpg) bottom center no-repeat #000;
	height:800px;
	width:100%;
	position: relative;
	-webkit-background-size: cover;
       -moz-background-size: cover;
        -ms-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
}
#content #index-hero-wrapper #index-hero-content { height:100%; width:100%; position:absolute; }
#content #index-hero-wrapper #index-hero-content #index-hero-text { margin:200px auto 0px; text-align:center; width:100%; }

/* header */
#header-wrapper { position:absolute; width:230px; top:0; left:20px; z-index:7000; }
#header {height:50px; width:54px;}
#header.hover { height:160px;}
#header.open { width:230px;}
.logo { position:relative; margin:20px 0px; }
.logo h1 { position:absolute; left:-10000px; }

/* nav */
#nav { 
	width:54px;
	height:50px;
	position:relative;
    -webkit-perspective:800px;
       -moz-perspective:800px;
        -ms-perspective:800px;
         -o-perspective:800px;
            perspective:800px;
}
#nav #nav-icons { position: absolute; top:50px; width:54px;};
#nav .nav-item { background-color: rgba(0,0,0,0.1); display:block; }
#nav #nav-icons .nav-item { background:url(../i/svg/lp_icon_master.svg) top left no-repeat rgba(0,0,0,0.3); display:block; height:50px; width:54px; border-top:1px solid rgba(255,255,255,0.1); }
#nav #nav-icons .nav-item:hover { border-color:rgba(255,255,255,0.5); }

#nav #nav-details { position:absolute; top:50px; left:54px; width:176px; }
#nav #nav-details .nav-item { 
	background-color:rgba(0,0,0,0.3);
	border-top:1px solid rgba(255,255,255,0.5);
	font-size:13px;
	height:34px;
	width:176px;
	overflow:hidden;
	padding-top:16px;
	text-transform:uppercase;
	text-shadow: 0px 1px 1px rgba(0,0,0,0.5);
	position:absolute;
	top:0px;
	left:0px;
	-webkit-transform-origin: center left;
	   -moz-transform-origin: center left;
	    -ms-transform-origin: center left;
	     -o-transform-origin: center left;
	        transform-origin: center left;
	-webkit-transform-style: preserve-3d;
   	   -moz-transform-style: preserve-3d;
   	    -ms-transform-style: preserve-3d;
         -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
	-webkit-transition: -webkit-transform .2s;
       -moz-transition: -moz-transform .2s;
        -ms-transition: -moz-transform .2s;
         -o-transition: -o-transform .2s;
            transition: transform .2s;
    -webkit-transform: rotateY(120deg);
       -moz-transform: rotateY(120deg);
        -ms-transform: rotateY(120deg);
         -o-transform: rotateY(120deg);
            transform: rotateY(120deg);
    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
         -o-backface-visibility: hidden;
            backface-visibility: hidden;
}
#nav #nav-details .nav-sub { color:#777; }

#nav #nav-details .nav-item.nav-ads { top:51px; }
#nav #nav-details .nav-item.nav-ill { top:102px; }
#nav #nav-details .nav-item.nav-dev { top:153px; }
#nav #nav-details .nav-item.nav-lab { top:204px; }

#nav #logo-icon-main { background:url(../i/svg/lp_icon_master.svg) 2px 0px no-repeat rgba(0,0,0,0.3); height:50px; display:block; }
#nav #logo-icon-main.open { background-color:rgba(255,255,255,0.1); cursor:pointer; }
#nav #logo-icon-main #logo-icon { background-color:#fff; width:18px; height:18px; display:block; margin:16px 0px 0px 19px; }

/* nav icon position */
#nav #nav-icons .nav-item.nav-work { background-position:2px -50px; position: absolute; }
#nav #nav-icons .nav-item.nav-lab { background-position:0px -100px; position: absolute; top:204px; }
#nav #nav-icons .nav-item.nav-ads { background-position:-50px -50px; position: absolute; top:51px; }
#nav #nav-icons .nav-item.nav-ill { background-position:-100px -50px; position: absolute; top:102px; }
#nav #nav-icons .nav-item.nav-dev { background-position:-150px -50px;position: absolute; top:153px; }

#nav #nav-icons .nav-item.nav-work, #nav #nav-icons .nav-item.nav-ads, #nav #nav-icons .nav-item.nav-ill, #nav #nav-icons .nav-item.nav-dev, #nav #nav-icons .nav-item.nav-lab {
	-webkit-transform-origin: center top;
	   -moz-transform-origin: center top;
	    -ms-transform-origin: center top;
	     -o-transform-origin: center top;
	        transform-origin: center top;
	-webkit-transform-style: preserve-3d;
   	   -moz-transform-style: preserve-3d;
   	    -ms-transform-style: preserve-3d;
         -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
	-webkit-transition: -webkit-transform .2s;
       -moz-transition: -moz-transform .2s;
        -ms-transition: -moz-transform .2s;
         -o-transition: -o-transform .2s;
            transition: transform .2s;
    -webkit-transform: rotateX(120deg);
       -moz-transform: rotateX(120deg);
        -ms-transform: rotateX(120deg);
         -o-transform: rotateX(120deg);
            transform: rotateX(120deg);
    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
         -o-backface-visibility: hidden;
            backface-visibility: hidden;
}
#nav #nav-icons .nav-item.nav-work.open, #nav #nav-icons .nav-item.nav-ads.open, #nav #nav-icons .nav-item.nav-ill.open, #nav #nav-icons .nav-item.nav-dev.open, #nav #nav-icons .nav-item.nav-lab.open {
	-webkit-transform: rotateX(0deg);
       -moz-transform: rotateX(0deg);
        -ms-transform: rotateX(0deg);
         -o-transform: rotateX(0deg);
            transform: rotateX(0deg);
}

#nav #nav-details .nav-item.open {
	-webkit-transform: rotateY(0deg);
       -moz-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
         -o-transform: rotateY(0deg);
            transform: rotateY(0deg);
}


/* nav - hovers */
#nav #nav-icons .nav-item.nav-work:hover, #nav #nav-icons .nav-item.nav-ads:hover, #nav #nav-icons .nav-item.nav-ill:hover, #nav #nav-icons .nav-item.nav-dev:hover, #nav #nav-icons .nav-item.nav-lab:hover {
	/*background-color:rgba(0,0,0,0.4);*/
	cursor:pointer;
}

/* footer */
#footer { margin:400px auto 0px;  min-height:180px; position:relative; color:#777; width:900px; text-align: center; }


/* ul's */
ul { list-style:none; }

/* tabular data */

/* links */
a:link, a:visited { color:#75b543; text-decoration:none; }
a:hover { text-decoration:underline; }

#nav #nav-main-elements ul li a:link, #nav #nav-main-elements ul li a:visited { border-top:1px solid rgba(255,255,255,0.1); height:50px; width:230px;}
#nav #nav-main-elements ul li a:hover { background-color:rgba(255,255,255,0.2); }


/* fonts and text */
h2 { font-family:'Lato', serif; font-size:54px; font-weight:100; margin-bottom:24px; text-shadow:0px 1px 1px rgba(0,0,0,0.9); }
h3 { font-family:'Rokkitt', sans-serif; font-size:24px; font-weight:400; text-shadow:0px 1px 1px rgba(0,0,0,0.9); }

/* utilities */
.clear { clear:both; }