@charset "UTF-8";
/* CSS Document */
@media only screen and (max-width: 1160px){
	 .web div.mac iframe.inmac{
	 
	 top: 3.1em;
	 left: 12.9%;
	overflow-y:auto;


	  }
	  .constain {
		  display: block;
		  max-height: 184px;
		  overflow-y:auto;
		  }
 .web div.mac{
	 
	 top: .1em;
	 left: 41%;
	  padding-top: 3em;
	  
	overflow-y:auto;
	
	  }
	 
 .web div.desk{
	  
	
	 left: 63%;
	
	 
	  }
	 
 .web div.ipad{
	  
	 
	  left: 30%;
	
	  }
	  
	
  .web div.iphone{
	 
	 
	  left: 40%;
	 
	  }
	
	}
	
	@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  { 

iframe.hide {
	display: none !important;
	
	
	}
}




@media only screen and (max-width: 920px){
	
 .web div.mac{
	 
	top: .1em;
    left: 34%;
    padding-top: 3em;
	  
	  }
	
 .web div.desk{
	  
	
	     left: 56%;
    top: 359px;
	
	 
	  }
	
 .web div.ipad{
	  
	 
	    left: 35%;
    top: 361px;
	
	  }
	  
	
	  
  .web div.iphone{
	 
	 
	    left: 78%;
	 
	  }
	  .button a {
		  
		
    width: 26%;
  
    top: 406px;
    left: 1.7%;
  
		  }
		  .video {
			  width: 90%;
			  }
	
	}
@media only screen and (max-width: 960px) {
	.home .right p {
		padding: 2em;
    	padding-top: 25%;
		
		}
	#splash img.square{
	
	margin: 0 auto;
	width: 50%;
	max-width: 960px;
		}
	
	}
	@media only screen and (max-width: 980px){
		h1 {
		
   font-size: 8em;
  
	
		}
		}
	
	@media only screen and (max-width: 760px){



#owl {
    top: 452px;
    left: 1%;
}
.individual .short img#fix {
	width: 800px;
	
	}
 .web div.mac{
	 
	        top: 14.1em;
    left: 15%;
    padding-top: 3em;
	  
	  }
	
 .web div.desk{
	  
	
	   left: 45%;
       top: 538px;
	
	 
	  }
	
 .web div.ipad{
	  
	 
	     left: 18%;
       top: 540px;
	
	  }
	  
	
	  
  .web div.iphone{
	 
	     left: 67%;
        top: 375px;
	 
	  }
	  .button a {
		  
		
       width: 66%;
       top: 756px;
    left: 19.7%;
  
		  }

.content {
	display: block;
    position: relative;
    overflow: auto;
			}
			.print .content {
	display: block;
   
    overflow: hidden;
	
			}
			
			
		.print footer {
			clear: both;
			}
			
.left{
	display: block;
    width: 100%;
    height: 30em;
    background-color: #22E0AA;
    position: static;
	
	}
	
	.right{
	    display: block;
    width: 100%;
    background-color: white;
    clear: both;
    margin: 0;
    float: left;
	
	}
	.individual .left {
    width: 100%;
	height: 100%;
	padding-bottom: 1em;
	}
	.description p {
		 display: block;
	   width: 85%;
	   padding-top: .1em;
		}
	.print .left {
		    height: 20em;
			
		
		}
	.individual .short {
    margin: 0 auto;
    width: 100%;
}
		.project {
		display: block;
		position: relative;
		width: 50%;
		float: left;
		}
	
		.home footer {
			display: block;
		position: static;
		
		}
		h1 {
		display: block;
		 font-family: 'denseregular';
   padding: .2em;
   font-size: 8em;
   position: static;
	
		}
		.home .right p {
		padding: 5em;
    	padding-top: 10%;
		line-height: 1.3em
		}	
		body#splash{
			display: block;
			position: relative;
			
			}
			 .video {
			  width: 95%;
			 
			  }
		
	}
	@media only screen and (max-width: 635px) {
		
		 .web div.mac{
	 
	        top: 14.1em;
    left: 7%;
    padding-top: 3em;
	  
	  }
	
 .web div.desk{
	  
	
	   left: 41%;
       top: 538px;
	
	 
	  }
	
 .web div.ipad{
	  
	 
	     left: 11%;
       top: 540px;
	
	  }
	  
	
	  
  .web div.iphone{
	 
	     left: 67%;
        top: 375px;
	 
	  }
	  .button a {
		  
		
       width: 66%;
       top: 756px;
    left: 19.7%;
  
		  }
		
		}
@media only screen and (max-width:555px){
	.half {
	display: block;
	width: 100%;
float: left;
	
	
	}
	 .web div.mac{
	 
	          top: 17.1em;
    left: 17%;
    padding-top: 3em;
	  }
	
 .web div.desk{
	  
	
	      left: 21%;
    top: 608px;
	
	 
	  }
	
 .web div.ipad{
	  
	 
	      left: 27%;
    top: 840px;
	
	  }
	  
	
	  
  .web div.iphone{
	 
	       left: 57%;
    top: 875px;
	  }
	  .button a {
		  
		
     width: 66%;
    top: 1064px;
    left: 19.7%;
		  }
		  .web .short {
			  min-height: 55em;
			  }
		  
	}
	@media only screen and (max-width: 495px){
		
		.web div.mac{
	 
	          top: 17.1em;
    left: 7%;
    padding-top: 3em;
	  }
	
 .web div.desk{
	  
	
	      left: 12%;
    top: 608px;
	
	 
	  }
	
 .web div.ipad{
	  
	 
	      left: 15%;
    top: 840px;
	
	  }
	  
	
	  
  .web div.iphone{
	 
	       left: 57%;
    top: 875px;
	  }
	  .button a {
		  
		
     width: 66%;
    top: 1064px;
    left: 16.7%;
		  }
		  .web .short {
			  min-height: 55em;
			  }
		}
	@media only screen and (max-width: 460px){
		.home .right p {
		padding: 2.5em;
    	padding-top: 10%;
		line-height: 1.3em
		}
		 .video {
			  width: 100%;
			 
			  }
		}
@media only screen and (max-width: 380px){

	  .web div.mac{
	 
	          top: 17.1em;
    left: 0%;
    padding-top: 3em;
	  }
	
 .web div.desk{
	  
	
	      left: 5%;
    top: 608px;
	
	 
	  }
	
	  
 
		  .web .short {
			  min-height: 55em;
			  }
	#splash img.square{
	
	margin: 30% auto;
	width: 70%;
	max-width: 960px;
		}
	h1 {
		display: block;
		 font-family: 'denseregular';
   padding: .2em;
   font-size: 9em;
   position: static;
	
		}
		.print h1 {
		
   font-size: 8em;
  
	
		}
		
	.left{
	display: block;
    width: 100%;
    height: 31.5em;
    background-color: #22E0AA;
    position: static;
	
	}
	.home .right p {
		padding: 2em;
    	padding-top: 10%;
		line-height: 1.3em
		}
	a.overlay{
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		color: white;
		font-family: 'denseregular';
	font-size: 1em;
		opacity: 0;
		text-decoration: none;
		text-align: center;
		line-height: 7em;
		}

	}
	@media only screen and (max-width: 320px){
		.web div.mac {
    top: 19.1em;
    left: -5%;
    padding-top: 3em;
}
.web div.mac .inmac {
   
    transform: scale(0.202);
    -webkit-transform: scale(0.202);
    -o-transform: scale(0.202);
    -ms-transform: scale(0.202);
    -moz-transform: scale(0.202);
 
}
		.web div.desk {
    left: -2%;
    top: 608px;
}

.web div.ipad {
    left: 8%;
    top: 840px;
}

		h1 {
		
   font-size: 8em;
   
	
		}
		.print h1, .web h1 {
			
		
   font-size: 7em;
  
	
		}
		.print .left {
		    height: 16em;
			
		
		}
		.left{
	display: block;
    width: 100%;
    height: 30em;
    background-color: #22E0AA;
    position: static;
	
	}
		}
		@media all and (max-width: 600px) {
  a.overlay{
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		color: white;
		font-family: 'denseregular';
	font-size: 2em;
		opacity: 0;
		text-decoration: none;
		text-align: center;
		line-height: 7em;
		}

  .container {
    width: 100%; }

  #top-bar a {
    display: block; }

  span.all-labs,
  span.back-to-tutorial {
    width: 100%; }

  span.all-labs,
  span.back-to-tutorial {
    float: none;
    text-align: center; }

  span.all-labs {
    border-bottom: solid 1px #FFFFFF; }

  #title h1 {
    font-size: 20px; }

  #title h2 {
    font-size: 16px; } }
	
	@media all and (max-width: 600px) {
  #nav-trigger {
    display: block; }

  nav#nav-main {
    display: none;
	width: 100%;
	
	 }

  nav#nav-mobile {
    display: block; } 
	
	nav#nav-mobile li {
    display: block;
    padding: 0px 0;
    margin: 0 auto;
    border-bottom: solid 1px #1A171B;
	
	}
	nav ul li {
    display: block;
    float: none;
    width: 100%;
    color: white;
    font-family: 'denseregular';
    font-size: 2em;
}
	}