@charset "utf-8";
/* CSS Document */

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary{display:block;}
audio, canvas, progress, video{display:inline-block;vertical-align:baseline;}
audio:not([controls]){display:none;height:0px;}
[hidden], template{display:none;}
a{background:transparent;}
a:active, a:hover{outline:0;}
abbr[title]{border-bottom:1px dotted; }
b, strong{font-weight:bold;}
dfn{font-style:italic;}
img{border:0;}
svg:not(:root){overflow:hidden;}

@-webkit-keyframes service{
	0%{opacity:0;}
	100%{opacity:1;}
}

@-moz-keyframes service{
	0%{opacity:0;}
	100%{opacity:1;}
}

@keyframes service {
	0%{opacity:0;}
	100%{opacity:1;}
}

body{
	color:#fff;
	background:#333;
	opacity:0;
	margin:50px 0px 0px;
	-webkit-animation:service 2s ease-out forwards;
	-moz-animation:service 2s ease-out forwards;
	animation:service 2s ease-out forwards;
}

section{overflow:hidden;}
.wrapper{*zoom:1;max-width:68em;margin-left:auto;margin-right:auto;}
.wrapper:before, .wrapper:after{content:" ";display:table;}
.wrapper:after{clear:both;}

.navbar{
	-webkit-box-shadow:0px 5px 15px 0px rgba(0,0,0,0.5);
	-moz-box-shadow:0px 5px 15px 0px rgba(0,0,0,0.5);
	box-shadow:0px 5px 15px 0px rgba(0,0,0,0.75);
	border:0px;
}

@media screen and (min-width: 53.75em){
	#about-me{padding:80px 0px 0px;}
	#skills{padding:80px 0px 0px;}
	#my-services{padding:80px 0px 0px;}
	#portfolio{padding:80px 0px 0px;}
	#education{padding:80px 0px 0px;}
	#contact{padding:80px 0px 0px;}
}
@media screen and (min-width: 40em){
	#about-me{padding:80px 30px;}
	#skills{padding:80px 30px;}
	#my-services{padding:80px 30px;}
	#portfolio{padding:80px 30px;}
	#education{padding:80px 30px;}
	#contact{padding:80px 30px;}
}

#about{text-align:center;padding:50px 30px;position:relative;background:#7A86ad;min-height:773px;}
#about .icons{text-align:center;margin-top:40px;}
#about .icons a{
	margin:0 1%;
	width:48px;
	height:48px;
	display:inline-block;
	background:#46658c;
	-webkit-border-radius:10px 0px 10px 0px;
	border-radius:10px 0px 10px 0px;
	color:#fff;
}
#about .icons a:hover{background:#000;}
#about .icons span.fa{font-size:30px;padding-top:8px;padding-left:5px;}
#about .logo{margin:0px auto;}

#skills{text-align:center;padding:50px 30px;position:relative;background:#505f90;min-height:773px;}

#services{text-align:center;padding:50px 30px;position:relative;background:#2e3f73;min-height:773px;}
.service{padding:20px 0px;}
.service .icon{
	background-color:#173153;
	border:5px solid #030f1f;
	display:block;
	margin-bottom:10px;
	text-align:center;
}
.service .icon img{padding-top:10px;}
.service .icon .fa{padding:10px;font-size:100px;}
.service .info{text-align:left;}
.service .info a{color:#fff;text-decoration:underline;font-style:italic;}
.service .info a:hover{color:#ccc;}

#experience{text-align:center;padding:50px 30px;position:relative;background:#172556;min-height:773px;}
.experience{}
.experience .info{text-align:left;background-color:rgba(0, 0, 0, 0.5);margin:10px;padding:10px;border-radius:10px;}

#contact{text-align:center;padding:50px 30px;position:relative;background:#07123a;min-height:773px;}
#contact form{text-align:left;}

.footer{background:#000;color:#999;text-align:center;padding:10px 0px;position:relative;}
.footer .fa{font-size:20px;}
.footer a{color:#999;}
.footer a:hover{color:#666;text-decoration:none;}

.alien{
	position:absolute;
	bottom:40px;
	right:40px;
	z-index:999;
}