/* ===================================================
	Mobile Devices
   =================================================== */
@media only screen and (max-width: 767px) {
    /* phones */
    body { 
		font-size: 11px;
	}
	header {
		margin-right: 10px;
		height: auto;
		position: static;
		h1 {
			margin: 10px;
		}
		h2 {
			margin: 10px 0 10px 15px;
			font-size: 20px;
			font-weight: normal;
			text-transform: lowercase;
			vertical-align: top;
			display: block;
			i {
				width: 30px;
				height: 30px;
				margin-right: 15px;
				font-size: 20px;
				display: inline-block;
			}
		}
		h2.studio i {.sprite(2, 0); }	
		h2.projects i {.sprite(2, 0); }	
		h2.consulting i {.sprite(2, 0); }	
		h2.talks i {.sprite(2, 0); }	
		h2.research i {.sprite(2, 0); }	

		.navicon {
			position: absolute;
			top: 0;
			right: 0;
			margin: 15px 5px;
			display: block;
			i {
				width: 30px;
				height: 30px;
				margin: 0 auto;
				display: block;
				font-size: 20px;
				.sprite(0, 5);
			}			
		}	
		nav.main {
			width: 100%;
			padding: 0;
			position: fixed;
			top: 60px;
			background: @white;
			display: none;
			font-size: 20px;
			z-index: 800;
			ul {
				li {
					width: 100%;
					display: block;
					a {
						width: 100%;
						height: 32px;
						padding: 4px 0 4px 10px;
						text-align: left;
						i {
							margin: 0 15px 0 5px;
							float: left;
						}
					}
					a.active {
						display: block;
					}
				}
			}
		}
		nav.sub {
			padding-left: 15px;
			display: block;
			background: white;
			width: 100%;		
			ul li {
				font-size: 18px;
				a.active {
					color: @black;
					font-weight: bold;
				}
			}
		}	
	}
	section#main {
		margin-top: 0;
		top: 0;
		padding-bottom: 0;		
		height: auto;
		> img {
			max-width: 100%;
		}
		.menu {
			padding: 2%;
			.active {
				color: black;
			}
		}
	}
	footer {
		font-size: 11px;
		position: static;
		padding-bottom: 5px;
		ul {
			padding: 0;
			margin: 0;
			list-style-type: none;
			li {
				display: block;
				i {
					display: none;
				}
			}
		}
	}
	img.bg {
		max-width: 100%;
		position: static;
	}
	/* ===================================================
		Home Page
	   =================================================== */
	#main.home {	
		.cycle-slideshow {
			.cycle-overlay {
			    width: 95%; 
			    top: 70px;
			}
			.cycle-pager {
			    top: 60px; 			    	    
			}			
		}
	}	
	
	/* ===================================================
		Page Section
	   =================================================== */
	.page {
		width: auto;
		height: 100%;
		padding: 2%;
		padding-top: 0;
		color: @black;
		top: 100px;
		right: 0;
		z-index: 700;
		position: static;
		background-color: @white;
		nav {	
			display: none;
		}	
	}	

	/* ===================================================
		Default Page
	   =================================================== */	
	.default {
		img {
			margin-top: 3px;
			margin-bottom: 15px;
		}
	}

	/* ===================================================
		Team Page
	   =================================================== */
	#members.team{
		margin: 0 10px;
		width: auto;
		clear: both;
		overflow: auto;
		padding-bottom: 100px;
		article {
			width: 100%;
			max-width: 510px;
			h2 {
				color: @green;
				font-weight: normal;
				margin-top: 5px;
				i {
					width: 20px;
					height: 20px;
					display: inline-block;
					float: right;
				}
				i.show {				
					.sprite(1, 6);
				}				
				i.hide{				
					.sprite(0, 6);
				}	
			}
			.details {
				display: none;
			}
			figure.secondary {
				display: none;
			}				
		}
	}		

	/* ===================================================
		Media Page
	   =================================================== */
	#publications.media {
		width: 100%;
	}	

	/* ===================================================
		Consulting Page
	   =================================================== */
	#consulting.page {
		ul#logos {
			max-width: 320px;
			margin-top: 5%;
			li {
				width: 29%;
				margin-top: 2.6%;
				margin-right: 2.6%;
				vertical-align: top;
				display: inline-block;
				a {
					display: block;
					img {
						width: 100%;			
						height: auto;
					}			
				}
			}
		}
	}	

	/* ===================================================
		Gallery Template
	   =================================================== */
	#main.gallery {
		margin: 0px 15px;
		ul {
			li {
				width: 24%;
				min-width: 300px;	
				margin: 5px; 
				a {
					text-decoration: none;
					figure {				
						position: relative;
						figcaption {
							position: static;
							// top: 45%;
							// left: 0;
							width: 100%;
							display: block;
							margin: 0 auto;
							text-align: left;
							div {
								margin-top: 5px;
							}
							i {
								float: right;
								display: block;
								width: 20px;
								height: 20px;
								margin-top: 3px;
								.sprite(2, 6);
							}
						}
					}
				}		
				a:hover {
					img {
						opacity: 1;
					}
					figcaption {
						display: block;
					}
				}	
			}				
		}
	}

	/* ===================================================
		Project Template
	   =================================================== */	
	#main.project {
		.cycle-slideshow {
			.cycle-pager {
			    position: absolute;
			    top: auto;
			    right: 0;
			    width: 180px;
			    z-index: 600;
			    color: white; 
			    padding: 1%;
			    margin-top: -5px;     
			}	
			img {
				max-width: 100%;
				height: auto;	
			}
			article {
				width: 500px;
				margin: 20px;
				font-size: 18px;
				color: @white;
				position: fixed;
			}
		}		
		.controls {
			padding: 0;
			position: relative;
			top: -5px;
			right: 0;	
			background-color: transparent;			
			span {		
				float: right;
				width: 30px;
				i {
					display: block;
					width: 20px;
					height: 20px;
					margin: 10px 5px;
				}	
			}
			span.show i {				
				.sprite(1, 6);
			}				
			span.hide i {				
				.sprite(0, 6);
			}				
		}
		#intro.page {
			display: block;
			article {
				margin-top: 20px;
				margin-bottom: 100px;
				.details {
					display: none;
				}
			}
		}
	}
	#intro.project {
		article {
			h2 {
				color: @green;
				font-weight: normal;
			}
		}
	}
}