@charset "utf-8";

/* CSS Document */



* {

	outline:0;

	border:0;

}



body {

	background-repeat:repeat-x;

	margin:0px;

	height:100%;

	font-family: Arial, cursive, Verdana;

	font-size: 12px;

	text-decoration:none;

	color: #666;

	background-color:#0f0f0f;

	background-image: url(../images/assets/background_gradient.png);

}



div#preloaded-images {

   position: absolute;

   overflow: hidden;

   left: -9999px; 

   top: -9999px;

   height: 1px;

   width: 1px;

}



#Wrapper {

	margin-left:auto;

	margin-right:auto;

	width: 980px;

	height:auto;	

}



#left {

	float:left;

	width:163px;

	display:block;

	text-align:right;



}



/*here start the left menu*/



ul#menu {

	list-style-type:none;

	margin:0px 0px 0px 10px;

}



#menu li {

	display:block;

	height:25px;

	float:right;

	margin-bottom:10px;

	padding-right:12px;

}

	

#menu a {

	display:block;

	height:25px;

}



/*Menu Home*/

#menu-home {

	background:url(../images/assets/buttons_sprite.png) 6px 0px no-repeat;

	width:60px;

	height:25px;

}



#menu-home:hover {

	background:url(../images/assets/buttons_sprite.png) 6px -26px no-repeat;

	width:60px;

	height:25px;

}







/*Menu About Me*/

#menu-aboutme {

	background:url(../images/assets/buttons_sprite.png) -59px 0px no-repeat;

	width:84px;

	height:25px;		

}



#menu-aboutme:hover {

	background:url(../images/assets/buttons_sprite.png) -59px -26px no-repeat;

	width:84px;

	height:25px;	

}



li.active#menu-aboutme {

	background:url(../images/assets/buttons_sprite.png) -59px -52px no-repeat;

	width:84px;

	height:25px;	

}



/*Menu Sketches*/

#menu-sketches {

	background:url(../images/assets/buttons_sprite.png) -145px 0px no-repeat;

	width:82px;

	height:25px;

}



#menu-sketches:hover {

	background:url(../images/assets/buttons_sprite.png) -145px -26px no-repeat;

	width:82px;

	height:25px;	

}



li.active#menu-sketches {

	background:url(../images/assets/buttons_sprite.png) -145px -52px no-repeat;

	width:82px;

	height:25px;	

}



/*Menu Illustrations*/

#menu-illustrations {

	background:url(../images/assets/buttons_sprite.png) -229px 0px no-repeat;

	width:96px;

	height:25px;

}



#menu-illustrations:hover {

	background:url(../images/assets/buttons_sprite.png) -229px -26px no-repeat;

	width:96px;

	height:25px;

}



li.active#menu-illustrations {

	background:url(../images/assets/buttons_sprite.png) -229px -52px no-repeat;

	width:96px;

	height:25px;

}



/* Menu 3d Images */

#menu-3dimages {

	background:url(../images/assets/buttons_sprite.png) -327px 0px no-repeat;

	width:90px;

	height:25px;

}



#menu-3dimages:hover {

	background:url(../images/assets/buttons_sprite.png) -327px -26px no-repeat;

	width:90px;

	height:25px;

}



li.active#menu-3dimages {

	background:url(../images/assets/buttons_sprite.png) -327px -52px no-repeat;

	width:90px;

	height:25px;

}



/* Menu Animations */

#menu-animations {

	background:url(../images/assets/buttons_sprite.png) -419px 0px no-repeat;

	width:94px;

	height:25px;

}



#menu-animations:hover {

	background:url(../images/assets/buttons_sprite.png) -419px -26px no-repeat;

	width:94px;

	height:25px;

}



li.active#menu-animations {

	background:url(../images/assets/buttons_sprite.png) -419px -52px no-repeat;

	width:94px;

	height:25px;

}

/* --------------Here ends the left menu ------------------*/



#container {

	float:none;

	width:850px;

}



#menucontainer {

	width:833px;

	margin-left:163px;

}



#right {

	width:163px;

	float:right;

}



#maincontain {

	width:817px;

	margin-left:163px;

}



#smallpics {

	width:817px;

	margin-left:163px;

	margin-top:20px;

}



#smallpics img {

	margin-right:17px;

}



#logo {

	width:651px;

	display:block;

	margin-left:166px;

	padding-top:70px;

	margin-bottom:8px;

}



#breadcrumbs   {

	text-align: right;

	display: inline;

	float: right;

	font-size: 14px;

	color: #019AE1;

	width: auto;

	margin-top: 15px;

	padding-right:3px;

}



#bfooter {

	width:654px;

	clear:both;

	margin-left:163px;

	margin-top:20px;
	
	text-align:center;

}

#aboutmetexten {
	width:490px;
	text-align:justify;
	float:left;
	
}

#aboutmetexten p {
	margin:0;
	padding:0;
}

#aboutmetextgr {
	width:490px;
	text-align:justify;
	float:left;
	
}

#aboutmetextgr p {
	margin:0;
	padding:0;
}

#aboutmephoto {
	width:160px;
	float:left;
	display:block;
}
/*Here starts maincontain css for every gallery*/



/*Sketeches*/

#maincontain-sk {

	margin-left:163px;

	float:none;

	

}



#maincontain-sk img {

	padding:0px 2px 2px 0px;

	filter:alpha(opacity=50);

	opacity:0.5;

	

}



#maincontain-sk img:hover {

	filter:alpha(opacity=100);

	opacity:1;

}

.animationtextgr {
	font:Myriad Pro, Arial, Helvetica;
	font-size:10px;
	color:#818181;
}

.animationtexten {
	font:Myriad Pro, Arial, Helvetica;
	font-size:10px;
	color:#2e2e2e;
}



/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
 
.fade-in {
    opacity:0;  /* make things invisible upon start */
    -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    -moz-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;
 
    -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
 
    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    animation-duration:1s;
}
 
.fade-in.one {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
}