/*================================================================================================================

	RESPONSIVE

================================================================================================================*/

@media only screen and (max-width : 880px) {
	
	#control {
		width: 100%;
		height: 150px;
		top: 0;
		right: 0;
		bottom: auto;
		z-index: 10001;
	}
	
	#control #side {
		width: 88%;
		padding: 20px 6% 0 6%;
		float: none;
		overflow: hidden;
	}
	
	#control #side #logo {
		width: 100%;
		float: left;
		text-align: center;
	}
	
	#control #side #logo h1 {
		font-size: 24px;
		margin: 0 -5px 10px 0;
		text-align: center;
	}
	
	#control #side #logo .sub {
		font-size: 12px;
	}
	
	#control #side #logo a {
		width: 214px;
		margin: 0 auto;
		float: none;
	}
	
	#control #side #nav {
		float: left;
		position: relative;
		margin: 0;
	}
	
	#control #side #nav .mobile {
		clear: left;
		float: left;
		margin: 0;
		padding: 0;
		position: relative;
		left: 50%;
		text-align: center;
		display: block;
	}
	#control #side #nav .regular { display: none; }
	
	#control #side #nav ul li {
		width: auto;
		display: block;
		clear: none;
		float: left;
		list-style: none;
		margin: 0;
		padding: 0;
		position: relative;
		right: 50%;
		height: 26px;
		margin: 0 10px;
	}
	
	#control #side #nav ul li span {
		margin: 0;
	}
	
	#main {
		width: 100%;
		opacity: 1 !important;
	}
	
	#main #content {
		max-width: none;
		padding: 0 20px;
	}
	
	.panel {
		padding-top: 180px;
	}
	
	.skill .bar {
		height: 32px;
		line-height: 32px;
	}
	
	.skill .bar div {
		height: 32px;
	}
	
}

@media only screen and (max-width : 540px) {

	.one-half, .one-third, .two-thirds, .one-fourth, .three-fourths, .one-fifth, .two-fifths, .three-fifths, .four-fifths, .one-sixth { width: 96%; }
	
	.skill .bar {
		height: 24px;
		line-height: 24px;
	}
	
	.skill .bar div {
		height: 24px;
	}
	
}

@media only screen and (max-width : 320px) {

	#works ul li {
		width: 100%;
	}
	
}