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

* {
	user-select: none;
}

body {
	background: #E7E7E7;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
}
body:before {
	content: "";
	margin: auto;
	background: #FEFEFE;
	width: 100%;
	max-width: 1000px;
	height: 2px;
	border-radius: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	box-shadow: 0 0 3px rgba(0, 0, 0, .15);
	animation: about-mask 1.5s .5s both;
}
#about {
	font-size: 22px;
}
#about .content {
	padding: 3vw 0 0;
}
#about .shake {
	display: inline-block;
	animation: about-shake .3s 3s both 25;
}
#about .txt {
	color: #7A7A7A;
	text-align: center;
}
#about .txt1 {
	font-size: 115%;
	font-weight: 500;
	animation: about-me 4s 2.5s both;
}
#about .txt2 {
	font-size: 125%;
	font-weight: 400;
	animation: about-me 4s 2.6s both;
}
#about .txt3 {
	color: #607D8B;
	font-size: 150%;
	font-weight: 600;
	animation: about-me 4s 2.7s both;
}
#about .txt4 {
	font-size: 100%;
	font-weight: 300;
	animation: about-living 1s 6.75s both;
}



#nav {
	margin: 3em 0;
	text-align: center;
	animation: about-nav 1s linear 10s both;
}
#nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#nav li {
	display: inline-block;
	margin: 0 .75em;
	min-width: 170px;
}
#nav a {
	display: block;
	padding: .5em 1.25em;
	color: #3F51B5;
	font-size: 25px;
	position: relative;
	transition: all .3s ease .05s;
}
#nav a:hover {
	color: #FEFEFE;
}
#nav a:before {
	content: "";
	margin: auto;
	background: rgba(200, 200, 200, .5);
	height: 2px;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	transition: all .3s ease;
	z-index: -1;
}
#nav a:hover:before {
	height: 100%;
}



#developer {
	margin: 5em auto;
	text-align: center;
	width: 45em;
	height: 45em;
	border-radius: 100%;
	position: relative;
	animation: developer-visible 4s 7s both;
}
#developer .lang {
	cursor: help;
	margin: auto;
	width: 12%;
	height: 12%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
#developer .lang img {
	position: relative;
	z-index: 1;
}
#developer .lang.done {
	margin: -10%;
	top: 50%;
	left: 50%;
	transform: none !important;
}
#developer .html5 {
	animation: developer-html5 .5s 7.7s both;
}
#developer .css3 {
	animation: developer-css3 .5s 7.85s both;
}
#developer .js {
	animation: developer-js .5s 8s both;
}
#developer .jquery {
	animation: developer-jquery .5s 8.15s both;
}
#developer .ajax {
	animation: developer-ajax .5s 8.3s both;
}
#developer .json {
	animation: developer-json .5s 8.45s both;
}
#developer .php {
	animation: developer-php .5s 8.6s both;
}
#developer .codeigniter {
	animation: developer-codeigniter .5s 8.75s both;
}
#developer .mysql {
	animation: developer-mysql .5s 8.9s both;
}
#developer .human {
	cursor: pointer;
	margin: auto;
	width: 100%;
	height: 100%;
	max-width: 250px;
	max-height: 250px;
	border-radius: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
#developer .human:before {
	content: "";
	opacity: 0;
	border-radius: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	animation: humanPulse 3s linear 12.5s infinite;
	z-index: -1;
}
#developer .human a {
	margin: auto;
	border-radius: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
}
#developer .human a:before {
	content: "";
	pointer-events: none;
	margin: auto;
	background: linear-gradient(135deg, transparent 15%, rgba(255, 255, 255, .3) 15%, transparent 30%);
	background-size: 1000% 100%;
	background-position: -1%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
}
#developer .human:hover a:before,
#developer .human:focus a:before {
	animation: splash-screen 5s linear infinite;
}