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

	RESPONSIVE

================================================================================================================*/
@media only screen and (min-width : 880px){
.nav-collapse { display:none !important}
#logo.mobile { display:none}
}

@media only screen and (min-width : 880px) and (max-width : 1164px){
#control {
    margin-left: 1%;
	min-width: auto;
}
#main {
    width: 65%;
    margin-right: 1%;
    float: right;
}
h2 {width: 100%;
    margin-left: 0%; margin-bottom:15px}	
h2:after { display:none}
h2:before { text-align:center; margin:auto; display:block;margin-bottom: 6px;}
}
@media only screen and (max-width : 880px) {
	#logo.desktop, .desktop { display:none}
	
	#control {
		width: 100%;
		height: auto !important;
		/*height: 120px;*/
		top: 0;
		right: 0;
		bottom: auto;
		z-index: 10001;
		margin-left:0;
		background:none
	}
	
	#control #side {
    width: 100%;
    padding: 2px 0 0 ;
		float: none;
		overflow: hidden;
		margin:0
	}
	#logo.mobile img{ margin-bottom:0px; width:100%}
	#control #side #logo {
		width: 70%;
		float: left;
		text-align: center;
	}
	
	
	#control #side #logo .sub {
		font-size: 9px;
	}
	#logo h4.sub { display:none}
	
	#control #side #logo a {
		width: auto;
		margin: 0;
		float: none;
	}
	
	#control #side #nav {
width: auto;
    margin-top: 0px;
    overflow: hidden;
	}
	
	#control #side #nav .mobile {
		clear: left;
		float: left;
		margin: 0;
		padding: 0;
		position: relative;
		left: 50%;
		text-align: center;
		display: block;
	}
	#control #side #nav .mobile a span{ display:block; background:none; width:auto}
	#control #side #nav .regular { display: none; }
	
	#control #side #nav ul li {
/*		width: auto;
		display: block;
		clear: none;
		float: left;
		list-style: none;
		margin: 0 10px;
		padding: 0;
		position: relative;
		right: 50%;
		height: 26px;
		margin: 0 10px;*/
	}
	
	#control #side #nav ul li span {
		margin: 0;
	}
	
	#control .info { display:none}
	#control .deco { display:none}
	
	#main {
		width: 100%;
		opacity: 1 !important;
		margin-right: 0%;
    float: none;
	}
	
	#main #content {
		max-width: none;
		padding: 0 9px;
	}
	
	.box {padding:10px}
	.box .in {
    padding: 14px;
}
	
	.panel {
		padding-top: 180px;
	}
	#intro {
    padding: 46% 2% 24%;
}
	#intro h1 {font-size: 58px;}
h2 {width: 100%;
    margin-left: 0%; margin-bottom:15px}	
h2:after { display:none}
h2:before { text-align:center; margin:auto; display:block;margin-bottom: 6px;}


	.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%;
	}
	
}