@charset "UTF-8";
/* CSS Document */
@font-face {
    font-family: 'denseregular';
    src: url('assets/fonts/dense-regular-webfont.eot');
    src: url('assets/fonts/dense-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('assets/fonts/dense-regular-webfont.woff2') format('woff2'),
         url('assets/fonts/dense-regular-webfont.woff') format('woff'),
         url('assets/fonts/dense-regular-webfont.ttf') format('truetype'),
         url('assets/fonts/dense-regular-webfont.svg#denseregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

.half {
	display: block;
	width: 50%;
float: left;
	
	
	}
	
	
	



body {
 
  font-family: 'denseregular';
  color: #282828;
}



.skills {
  width: 80%;
  max-width: 960px;
  height: 343px;
  margin-left: 3%;
  
  position: relative;
}

.lines {
  height: 100%;
  position: relative;
}
  .line {
    height: inherit;
    width: 2px;
    
    position: absolute;
    
    background: rgba(#eee, 0.6);
  }
    .l--0 {
      left: 0;      
    }
    .l--25 {
      left: 25%;      
    }
    .l--50 {
      left: 50%;      
    }
    .l--75 {
      left: 75%;      
    }
    .l--100 {
      left: calc(100% - 1px);      
    }
    
    .line__label {
      display: block;
      width: 100px;
      text-align: center;
      
      position: absolute;
      bottom: -20px;
      right: -50px;
	}
      .title {
        text-transform: uppercase;
        font-weight: bold;
      }
  

.charts {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

.chart {
  margin: 30px 0 0;
  
 
  }


.chart__title {
  display: block;
  
font-size: 2em;
  
  

}
  .chart--dev {
  }
  .chart--prod {
    animation-delay: 3s;
  }
  .chart--design {
    animation-delay: 4.2s;
  }

.chart--horiz {
  overflow: hidden;
}

.chart__bar {
  border-rad: 4px;
  height: 30px;
  margin-bottom: 10px;

  background: linear-gradient(to left, #000000, #000000);
  border-top-right-radius: border-rad;
  border-bottom-right-radius: border-rad;
  opacity: 0; 

  animation: 1s anim-lightspeed-in ease forwards;
}
  .chart--dev  {
    @include stagger-anim-delay(9, .5s, 0.2s);    
  }
  .chart--prod  {
    @include stagger-anim-delay(2, 3.5s, 0.2s);
  }
  .chart--design  {
    @include stagger-anim-delay(3, 4.7s, 0.2s);
  }

  [data-skill='35'] {
    width: 35%;
  }
  [data-skill='40'] {
    width: 40%;
  }
  [data-skill='45'] {
    width: 45%;
  }
  [data-skill='50'] {
    width: 50%;
  }
  [data-skill='55'] {
    width: 55%;
  }
  [data-skill='60'] {
    width: 60%;
  }
  [data-skill='65'] {
    width: 65%;
  }
  [data-skill='70'] {
    width: 70%;
  }
  [data-skill='75'] {
    width: 75%;
  }
  [data-skill='80'] {
    width: 80%;
  }
  [data-skill='85'] {
    width: 85%;
  }
  [data-skill='90'] {
    width: 90%;
  }
  [data-skill='95'] {
    width: 95%;
  }


.chart__label {
  padding-left: 10px;
  line-height: 30px;
  color: white;
  text-transform: uppercase;
}



@keyframes anim-lightspeed-in {
  0%   { 
    transform: translateX(-200%);
    opacity: 1; 
  }
  100% { 
    transform: translateX(0);
    opacity: 1; 
  }
}
	
	
	
a {
	
	text-decoration: none;
	}
	p {
		
		font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
		
		line-height: 1.3em;
		}
#splash  {
	display: block;
	width: 100%;
	background-color: hsla(285,8%,10%,1.00);
	
	position: relative;
	}

	#splash img.square{
	display: block;
	margin: 0 auto;
	width: 30%;
	max-width: 960px;
		}
#splash h3 {
	display: block;
	text-align: center;
	margin-bottom: 3em;
	color: #22E0AA;
	font-size: 2em;
	font-family: 'denseregular';
	}
	#splash h3 a {
		color: #22E0AA;
		}
		/*.home {
			display: block;
			background-color: rgba(33,224,170,1.00);
			}*/
body {
	display: block;
	width: 100%;
	
	}
	.home {
		background-image: url(assets/images/background40x1.gif);
	
	background-position: center;
	background-repeat:repeat-y;
		
		}
.individual .short img {
	display: block;
	width: 100%;
	}

	h1 {
		display: block;
		 font-family: 'denseregular';
   padding: .2em;
   font-size: 9em;
   position: fixed;
	left: 0;
	
		}
		
		h2 {
		display: block;
		 font-family: 'denseregular';
   padding: .4em;
   font-size: 3em;
   }
   h3 {
		display: block;
		 font-family: 'denseregular';
   padding: .4em .4em 0em .4em;
   font-size: 2em;
   }
   .description p {
	   display: block;
	   width: 85%;
	   padding: 1em;
	   }
wrapper{
	display: block;
	width: 100%;
	position: relative;
	}
header{
	display: block;
	min-height: 6em;
	height: 100%;
	background-color: hsla(285,8%,10%,1.00);
	padding-top: 0em;
	padding-right: 0;
	padding-left: 0;
	padding-bottom: 2em;
	}
header a.logo img{
	display: block;
position: absolute;
left: 5%;
top: 1em;
	width: 84px;
	height: 95px;
	z-index: 100;
	}
	header a.logo  {

	width: 84px;
	lenght: 95px;
		}
nav{
	display: block;
	width: 100%;
	position: absolute;
	right: 5%;
	top: 3em;

	}
nav ul li {
	display: block;
	float: right;
	width: 10%;
	color: white;
	font-family: 'denseregular';
	font-size: 2em;
	}
	
nav ul li a {
	text-decoration: none;
	color: white;
	}
.content {
	position: relative;

	
	}	
.left{
	display: block;
	width: 50%;
	height: 100%;
	background-color: #22E0AA;
	background-image:url(assets/images/texture754x300.png);
	background-repeat: no-repeat;
	background-position-x: 90px;
    background-position-y: -70px;
	position: absolute;
	left: 0;
	
	}
	.individual .left {
	width: 30%;	
	background-color: #B4EF11;	
	background-image:url(assets/images/texture754x300.png);
	background-repeat: no-repeat;
	   background-position-x: -100px;
    background-position-y: -170px;
	}
	.thumb img{
		display: block;
		width: 100%;
		
		
		}
.print .left {
	background-color: #B4EF11;
	}
.web .left{
	background-color: #22E0AA;
	
	}
	
	.art .left{
	background-color: #FF8E08;
	
	}		
.right{
	display: block;
	width: 50%;
	height: 100%;
	background-color: white;
	margin-left: 50%;
	
	}
	.short {
		display: block;
	width: 70%;
	height: 100%;
	background-color: white;
	margin-left: 30%;
	min-height: 35em;		}
	
	.right p{
		
		padding: 1em;
		font-size: 1.2em;
		}
	.home .right p {
		padding: 5em;
    	padding-top: 25%;
		line-height: 1.3em
		}	
		.short p{
			padding: 1em;
		font-size: 1.0em;
			}
		.project {
		display: block;
		position: relative;
		}
	a.overlay{
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		color: white;
		font-family: 'denseregular';
	font-size: 3em;
		opacity: 0;
		text-decoration: none;
		text-align: center;
		line-height: 8em;
		}
		
		a.overlay{
			background-color: hsla(0,0%,0%,0.50);
		
		opacity: 0;
   transition: opacity .35s ease-in-out;
   -moz-transition: opacity .35s ease-in-out;
   -webkit-transition: opacity .35s ease-in-out;
			}
			
			
	a.overlay:hover{
		
		display: block;
		background-color: hsla(0,0%,0%,0.50);
		opacity: 1;
		}
		
		.home footer {
		position: fixed;
		bottom: 0;
		}
footer{
	height: 2em;
	padding: 1em 0 1em 0;
	background-color: hsla(285,8%,10%,1.00);
	width: 100%;
	color: white;
	z-index: 11;
	
	
	}
	
footer p {
	display: block;
	font-family: 'denseregular';
	font-size: 1.6em;
	text-indent: 1em;
	}
	
	#nav-trigger {
  display: none;
  text-align: center; }
  #nav-trigger span {
    display: inline-block;
    padding: 50px 30px;
    background-color: #1A171B;
	
    color: white;
    cursor: pointer;
	float: right;
	font-family: 'denseregular';
	font-size: 1.4em;
    text-transform: uppercase; 
	}
    #nav-trigger span:after {
      display: inline-block;
      margin-left: 10px;
      width: 20px;
      height: 10px;
      content: "";
      border-left: solid 10px transparent;
        border-top: 10px solid rgb(255, 255, 255);
      border-right: solid 10px transparent; }
    #nav-trigger span:hover {
       background-color: #1A171B;
	    }
    #nav-trigger span.open:after {
      border-left: solid 10px transparent;
      border-top: none;
      border-bottom: solid 10px #fff;
      border-right: solid 10px transparent; }

nav {
	margin: 0;
  }
  nav {
    display: block;
    width: 100%;
    position: absolute;
    right: 0%;
    top: 3em;
}

nav#nav-main {
  background-color: #1A171B;
  padding: 10px 0; 
  width: 120%;}
  nav#nav-main ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center; }
  nav#nav-main li {
    display: inline-block;
    border-right: solid 1px #1A171B;
    padding: 0 5px; 
	}
    nav#nav-main li:last-child {
      border-right: none; }
  nav#nav-main a {
    display: block;
    color: white;
    padding: 10px 4px;
	
	 }
    nav#nav-main a:hover {
      background-color: #1A171B;
      color: #fff; }

nav#nav-mobile {
  position: relative;
  display: none; }
  nav#nav-mobile ul {
    display: none;
    list-style-type: none;
	    z-index: 5;
    position: absolute;
    left: 0;
    right: 0;
	margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    background-color: #1A171B; }
  nav#nav-mobile li {
    display: block;
    padding: 5px 0;
    margin: 0 5px;
    border-bottom: solid 1px #1A171B; }
    nav#nav-mobile li:last-child {
      border-bottom: none; }
  nav#nav-mobile a {
    display: block;
    color: white;
    padding: 10px 30px;
	 }
    nav#nav-mobile a:hover {
     text-decoration: underline;
      color: #fff; }
	  
	  #top-bar {
  background-color: #1A171B; }

#top-bar a {
  color: white;
  font-size: 14px;
  text-transform: uppercase;
  display: inline-block;
  margin: 0;
  padding: 10px; }

#top-bar a:hover {
  background-color: #1A171B; 
  text-decoration: underline;
  }

span.all-labs,
span.back-to-tutorial {
  display: block;
  width: 50%; }

span.all-labs {
  float: left;
  text-align: left; }

span.back-to-tutorial {
  float: right;
  text-align: right; }
  
  /* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0; }

a img {
  border: none; }
  .video {
	  display: block;
	  
	  margin: 0 auto;
	  margin-bottom: 20px;
	  padding-top: 20px;
	  }
  
 
  .web div.mac iframe.inmac{
	   display: block;
	   
	    position: absolute;
	 top: 3.1em;
	 left: 12.9%;
	  padding-top: 3em;
	  z-index: 1;
	  width: 1280px;
height: 802px;
overflow: hidden;
transform: scale(0.217);
-webkit-transform: scale(0.217);
-o-transform: scale(0.217);
-ms-transform: scale(0.217);
-moz-transform: scale(0.217);
transform-origin: top left;
-webkit-transform-origin: top left;
-o-transform-origin: top left;
-ms-transform-origin: top left;
-moz-transform-origin: top left;
	  }
 .web div.mac{
	  display: block;
	   max-width: 360px;
	    position: absolute;
	 top: .1em;
	 left: 46%;
	  padding-top: 3em;
	  
	  }
	   .web div.desk .indesk{
	  display: block;
    position: absolute;
    top: 1.7em;
    left: 15%;
    z-index: 1;
    width: 960px;
    height: 601px;

transform: scale(0.241);
-webkit-transform: scale(0.241);
-o-transform: scale(0.241);
-ms-transform: scale(0.241);
-moz-transform: scale(0.241);
transform-origin: top left;
-webkit-transform-origin: top left;
-o-transform-origin: top left;
-ms-transform-origin: top left;
-moz-transform-origin: top left;
	  }
 .web div.desk{
	 display: block;
    width: 328px;
    position: absolute;
    top: 110px;
    left: 69%;
    z-index: 2;
	  }
	   .web div.ipad .inipad{
	  display: block;
    position: absolute;
    top: 1.78em;
    left: 17.2%;
    z-index: 1;
    width: 768px;
    height: 1024px;

transform: scale(0.243);
-webkit-transform: scale(0.143);
-o-transform: scale(0.243);
-ms-transform: scale(0.243);
-moz-transform: scale(0.243);
transform-origin: top left;
-webkit-transform-origin: top left;
-o-transform-origin: top left;
-ms-transform-origin: top left;
-moz-transform-origin: top left;
	  }
 .web div.ipad{
	   display: block;
    width: 166px;
    position: absolute;
    top: 116px;
    left: 34%;
    z-index: 4;
	  }
	  
	  .web div.iphone .iniphone{
	   display: block;
    position: absolute;
    top: 2.84em;
    left: 28.1%;
    z-index: 1;
    width: 380px;
    height: 668px;
	
transform: scale(0.135);
-webkit-transform: scale(0.135);
-o-transform: scale(0.135);
-ms-transform: scale(0.135);
-moz-transform: scale(0.135);
transform-origin: top left;
-webkit-transform-origin: top left;
-o-transform-origin: top left;
-ms-transform-origin: top left;
-moz-transform-origin: top left;
	  }
	  
  .web div.iphone{
	      display: block;
    width: 106px;
    position: absolute;
    top: 151px;
    left: 41%;
    z-index: 5;
	  }
	  a {
		 text-decoration: none;
		 color: white;
		  
		  }
  
	  .button a {
		  
		  text-decoration: none;
		  color: white;
		   display: block;
	  background-color: black;
	  
	  width: 30%;
	position: absolute;
	top: 350px;
	left: 45%;
	text-align: center;
	padding:10px 0  10px 0;
		  }
		  
		  .description p.btn {
	  
	    text-decoration: none;
		  color: white;
		   display: block;
	  background-color: black;
	  
	  width: 100%;
	
	text-align: center;
	padding: 0;
	margin: none;
	
	padding:10px 0  10px 0;
	  }
		  
  .button a:hover {
	  background-color: #21E0AA;
	  
	  } 
 ul li a#green {
		color:#B4EF10;
		}
		
ul li a#orange  {
				color:#FF8E08;
				
				}
ul li a#blue  {
				color:#21E0AA;
				
				}
				.ab {
	min-height: 57em;
	
	}