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

body,td,th {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: #FFF;
}
body {
	background-color: #4989d2;
	background-repeat: repeat-x;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-image: url(images/bg.png);
}
h1 {
	font-family:Arial, Helvetica, sans-serif;
	font-size:18px;
	color:#fff;
	font-weight:normal;
	padding-left:15px;
	padding-bottom:0px;
	padding-top:0px;
	margin-top:0px;
	margin-bottom:0px;
}
h3 {
	padding:0px;
	color: #fff;
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
	margin-top:50px;
	margin-bottom:0px;
	margin-left:0px;
	margin-right:0px;
	font-weight:normal;
}
h4 {
	padding:0px;
	color: #fff;
	font-family:Verdana, Geneva, sans-serif;
	font-size:8px;
	margin:0px;
	font-weight:normal;
}
a:link{
	color:#fff;
	text-decoration:none;

}
a:hover{
	color:#9ac1f0;
	text-decoration:underline;

}
a:active{
	color:#fff;
	text-decoration:none;

}
a:visited{
	color:#fff;
	text-decoration:none;

}
#aboutme {
	padding-top:20px; 
	padding-left:187px; 
	padding-right:70px; 
	line-height:20px; 
	font-weight:50;
}
#maintext {
	padding-top:20px; 
	padding-left:187px; 
	padding-right:70px; 
	text-align: justify; 
	line-height:28px; 
	font-weight:50;
}

#maintext a:link{
	font-size:18px;
	color:#99c7ff;
	text-decoration:none;
}
#maintext a:hover{
	font-size:18px;
	color:#FFF;
	background-color:#2e5284;
}
#maintext a:visited{
	font-size:18px;
	color:#99c7ff;
	text-decoration:none;
}
#maintext a:active{
	font-size:18px;
	color:#99c7ff;
	text-decoration:none;
}
#contacttext {
	padding-top:20px; 
	padding-left:187px; 
	padding-right:70px; 
	padding-bottom:0px;
	text-align: justify; 
	line-height:28px; 
	font-weight:50;
}
#contacttext a:link{
	font-size:18px;
	color:#99c7ff;
	text-decoration:none;
}
#contacttext a:hover{
	font-size:18px;
	color:#FFF;
	background-color:#2e5284;
}
#contacttext a:visited{
	font-size:18px;
	color:#99c7ff;
	text-decoration:none;
}
#contacttext a:active{
	font-size:18px;
	color:#99c7ff;
	text-decoration:none;
}
#works {
	padding-top:0px; 
	padding-left:180px; 
	padding-right:30px; 
	line-height:28px; 
	font-weight:50;
}
#portfolio {
	padding-top:10px; 
	padding-left:180px; 
	padding-right:70px; 
	line-height:28px; 
	font-weight:50;
}
#footer {
	padding-top:10px; 
	padding-left:187px; 
	padding-right:70px; 
	line-height:28px; 
	font-weight:50;
	color:#9ac1f0;
}
#bottom {
	padding-top:20px; 
	padding-left:187px; 
	padding-right:70px; 
	text-align: justify; 
	line-height:28px; 
	font-weight:50;
	color:#9ac1f0;

}
.title {
	font-size:18px;
	color:#99c7ff;
}
	.demobox{
		float:left;
		width:222px;
		height:155px;
		border:0;
		overflow:hidden;
		margin-right:20px;
	}
	.details{
		width:222px;
		height:155px;;
		background:#fff;
		color:#000;
		border:0;
		text-align:center;
		margin-right:20px;

	}
	#demo-1 img {
		-webkit-transform: scale(1);
		-webkit-transition-timing-function: ease-out;
		-webkit-transition-duration: 500ms;
	}
	#demo-1 img:hover{
		-webkit-transform: scale(.5);
		-webkit-transition-timing-function: ease-out;
		-webkit-transition-duration: 500ms; 
	}
	
	#demo-2 img {
		opacity: 1;
		-webkit-transition: opacity;
		-webkit-transition-timing-function: ease-out;
		-webkit-transition-duration: 500ms;
	}
	#demo-2 img:hover{
		opacity: .5;
		-webkit-transition: opacity;
		-webkit-transition-timing-function: ease-out;
		-webkit-transition-duration: 500ms; 
	}
	
	#demo-3{position:relative;}
	#demo-3 img{
		opacity:1
		-webkit-transition: opacity;
		-webkit-transition-timing-function: ease-out;
		-webkit-transition-duration: 500ms;
	}
	#demo-3 .details{
		position:absolute;
		top:0;
		left:0;
		opacity: 0;
		-webkit-transition: opacity;
		-webkit-transition-timing-function: ease-out;
		-webkit-transition-duration: 500ms;
	}
	
	#demo-3 .details:hover{
		opacity: .9;
		-webkit-transition: opacity;
		-webkit-transition-timing-function: ease-out;
		-webkit-transition-duration: 500ms;
	}
	
	#demo-4{position:relative;}
	#demo-4 img{
		position:absolute;
		top:0;
		left:0;		
		-webkit-transition: margin-left;
		-webkit-transition-timing-function: ease-in;
		-webkit-transition-duration: 250ms;
	}
	#demo-4:hover img{
		margin-left:200px;
	}
	#demo-4 .details{
		position:absolute;
		top:0;
		left:0;
		z-index:-1;
	}
	
	#demo-5{position:relative;}
	#demo-5 .details{
		opacity: .9;
		position:absolute;
		top:0;
		left:0;
		margin-left:-200px;		
		-webkit-transition: margin-left;
		-webkit-transition-timing-function: ease-in;
		-webkit-transition-duration: 250ms;
	}
	#demo-5:hover .details{
		margin-left:0;
	}
	#demo-6{
		position:relative;
	}
	#demo-6 img{
		position:absolute;
		top:0;
		left:0;
		z-index:0;
	}
	#demo-6 .details{
		opacity: .9;
		position:absolute;
		top:100;
		left:150;
		z-index:999;
		-webkit-transform: scale(0);
		-webkit-transition-timing-function: ease-out;
		-webkit-transition-duration: 250ms;
	}
	#demo-6:hover .details{
		-webkit-transform: scale(1);
		-webkit-transition-timing-function: ease-out;
		-webkit-transition-duration: 250ms; 
	}