/* CSS Document */
#ascrail2000 {
  z-index: 999 !important;
}

html, body{
	height:100%;
}

body{
	margin:0;
	padding:0;
	-webkit-touch-callout:none;
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
	font-family:Arial,Helvetica, Sans-serif;
}

nav ul,
#nav ul{
	margin:0;
	padding:0;
	display:block;
	text-align:center;
}

nav li,
#nav li{
	margin:0;
	padding:0;
	list-style:none;
}


h1{
	margin:0;
	text-transform:uppercase;
}

h2{
	margin:0;
	font-size:16px;
	font-weight:normal;
	text-transform:uppercase;
}

h3{
	padding: 10px 0;
	font-size: 18px;
	font-weight: bold;
	text-align: left;
	margin-bottom: 20px;
}

p{
	font-size:14px;
	line-height:1.5em;
	text-align:justify;
}

#sideArea{
	top: 0;
    left: 0;
    right: 0;
    bottom: 0;
	z-index:2;
	width: 280px;
    display: block;
    position: fixed;
	text-align:center;
}

#sideArea .profileImage{
	width:180px;
	height:180px;
	display:block;
	margin:20px auto;
	border-radius:50%;
}

#sideArea nav a{
	width:200px;
	display:block;
	font-size:20px;
	margin:30px auto;
	padding-bottom:10px;
	text-decoration:none;
}

#mobileMenu{
	top:0;
	left:0;
	right:0;
	z-index:99;
	height:60px;
	display:none;
	position:fixed;
}

#mobileMenu .wrap{
	height:40px;
	display:block;
	position:relative;
}

#mobileMenu .wrap img{
    top: 5px;
    left: 10px;
	width: 50px;
    height: 50px;
	display:block;
    position: absolute;
    border-radius: 50%;
}

#mobileMenu .wrap p{
	top: 10px;
    left: 75px;
    font-size: 14px;
    position: relative;
    line-height: normal;
}

#mobileMenu .wrap p strong{
	font-size: 22px;
}

#mobileMenu .wrap #menu{
	top:12px;
	right:10px;
	font-size:30px;
	position:absolute;
}

#mobileMenu .wrap #nav{
	top:60px;
	left:0;
	right:0;
	display:none;
	position:absolute;
}

#mobileMenu .wrap #nav a{
	padding:25px;
	display:block;
	font-size:18px;
	text-decoration:none;
}

ul.socialMedia{
	left:0;
	right:0;
	margin:0;
	padding:0;
	bottom:40px;
	display:block;
	position:absolute;
}

ul.socialMedia li{
	padding:0;
	margin:0 3px;
	list-style:none;
	display:inline-block;
}

ul.socialMedia li a{
	font-size:28px;
}


#copyright{
	left:0;
	right:0;
	bottom:10px;
	display:block;
	font-size:11px;
	position:absolute;
}

.copyright{
	margin:10px 0;
	display:none;
	font-size:11px;
	text-align:center;
}

#sideContent{
	display:block;
	margin-left:280px;
}

#sideContent .content{
	display:block;
	margin:0 auto;
	max-width:1020px;
	animation-delay: 1s;
	-moz-animation-delay: 1s;
	-ms-animation-delay: 1s;
	-o-animation-delay: 1s;
	-webkit-animation-delay: 1s;
}

section{
	padding:20px 0px;
}

section row{
	margin:10px 0;
}

.about-pic{
	margin-bottom:10px;
}

.skillbar {
	position:relative;
	display:block;
	margin-bottom:10px;
	width:100%;
	height:30px;
	-webkit-transition:0.4s linear;
	-moz-transition:0.4s linear;
	-ms-transition:0.4s linear;
	-o-transition:0.4s linear;
	transition:0.4s linear;
	-webkit-transition-property:width, background-color;
	-moz-transition-property:width, background-color;
	-ms-transition-property:width, background-color;
	-o-transition-property:width, background-color;
	transition-property:width, background-color;
}

.skillbar-title {
	top:0;
	left:0;
	width:110px;
	font-size:12px;
	position:absolute;
}

.skillbar-title span {
	height:30px;
	display:block;
	padding:0 20px;
	line-height:30px;
	background:rgba(0, 0, 0, 0.1);
}

.skillbar-bar {
	width:0px;
	height:30px;
}

.skill-bar-percent {
	top:0;
	right:10px;
	height:30px;
	font-size:11px;
	line-height:30px;
	position:absolute;
}

#contact input, textarea{
	max-width:100% !important;
}
input[type="text"], input[type="email"], input[type="tel"], textarea {
	background-color: transparent !important;
	margin-bottom: 10px;
}

#contact button {
    padding:0 32px !important;
    font-size: 14px;
}

@media only screen and (max-width : 1024px) {
	
	#mobileMenu{
		display:block;
	}
	
	#sideArea{
		display:none;
	}
	
	#sideContent{
		margin-left:0px;
	}
	
	section{
		padding:80px 20px 0px 20px;
	}
	
	.gallery img{
		height:250px !important;
	}

	.copyright{
	
		display:block;
		
	}

}

@media only screen and (max-width : 768px) {
	.gallery img{
		height:215px !important;
	}
}

@media only screen and (max-width : 640px) {
	.gallery img{
		height:auto !important;
	}
}