/*
 * StyleName:		homepage.responsive.css
 * Email:		trung.styles@gmail.com
 *
 */

@media screen and (max-width: 640px) {
	#nav li {
		display: inline-block;
		margin: 0 .5em;
		min-width: 125px;
	}
	#nav a {
		padding: .5em 1em;
		font-size: 20px;
	}
	#nav a:before {
		height: 1px;
	}

	#developer {
		margin: 3em auto;
		width: 35em;
		height: 35em;
	}
	#developer .human {
		width: 200px;
		height: 200px;
	}
	#developer .html5 {
		animation: developer-w640-html5 .5s 7.7s both;
	}
	#developer .css3 {
		animation: developer-w640-css3 .5s 7.85s both;
	}
	#developer .js {
		animation: developer-w640-js .5s 8s both;
	}
	#developer .jquery {
		animation: developer-w640-jquery .5s 8.15s both;
	}
	#developer .ajax {
		animation: developer-w640-ajax .5s 8.3s both;
	}
	#developer .json {
		animation: developer-w640-json .5s 8.45s both;
	}
	#developer .php {
		animation: developer-w640-php .5s 8.6s both;
	}
	#developer .codeigniter {
		animation: developer-w640-codeigniter .5s 8.75s both;
	}
	#developer .mysql {
		animation: developer-w640-mysql .5s 8.9s both;
	}
}
@media screen and (max-width: 480px) {
	#nav li {
		display: inline-block;
		margin: 0 .35em;
		min-width: 100px;
	}
	#nav a {
		padding: .25em .5em;
		font-size: 18px;
	}

	#developer {
		margin: 2em auto;
		width: 25em;
		height: 25em;
	}
	#developer .human {
		width: 150px;
		height: 150px;
	}
	#developer .html5 {
		animation: developer-w480-html5 .5s 7.7s both;
	}
	#developer .css3 {
		animation: developer-w480-css3 .5s 7.85s both;
	}
	#developer .js {
		animation: developer-w480-js .5s 8s both;
	}
	#developer .jquery {
		animation: developer-w480-jquery .5s 8.15s both;
	}
	#developer .ajax {
		animation: developer-w480-ajax .5s 8.3s both;
	}
	#developer .json {
		animation: developer-w480-json .5s 8.45s both;
	}
	#developer .php {
		animation: developer-w480-php .5s 8.6s both;
	}
	#developer .codeigniter {
		animation: developer-w480-codeigniter .5s 8.75s both;
	}
	#developer .mysql {
		animation: developer-w480-mysql .5s 8.9s both;
	}
}
@media screen and (max-width: 320px) {
	#developer {
		margin: 1em auto;
		width: 20em;
		height: 20em;
	}
	#developer .human {
		width: 100px;
		height: 100px;
	}
	#developer .html5 {
		animation: developer-w320-html5 .5s 7.7s both;
	}
	#developer .css3 {
		animation: developer-w320-css3 .5s 7.85s both;
	}
	#developer .js {
		animation: developer-w320-js .5s 8s both;
	}
	#developer .jquery {
		animation: developer-w320-jquery .5s 8.15s both;
	}
	#developer .ajax {
		animation: developer-w320-ajax .5s 8.3s both;
	}
	#developer .json {
		animation: developer-w320-json .5s 8.45s both;
	}
	#developer .php {
		animation: developer-w320-php .5s 8.6s both;
	}
	#developer .codeigniter {
		animation: developer-w320-codeigniter .5s 8.75s both;
	}
	#developer .mysql {
		animation: developer-w320-mysql .5s 8.9s both;
	}
}
#developer.md,
#developer.sm {
	padding: 0 0 3em;
	width: 95%;
	height: auto;
	border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
}
#developer.sm .human,
#developer.md .human {
	margin: 3em auto;
	width: 90%;
	height: auto;
	position: static;
}
#developer.md .lang,
#developer.sm .lang {
	display: inline-block;
	margin: 0 3%;
	width: 25%;
	height: auto;
	position: static;
	transform: none !important;
	-moz-transform: none !important;
	transform: none !important;
}