html, body{
		font-family:Arial, Helvetica, sans-serif;
		/*color: #464646;*/
		margin:0;
		padding:0;
	}

	html {
		background: url(../images/bg.gif) repeat;
	}

	body {
		background: url(../images/backgroundTop.gif) no-repeat top left;
		font-size:62.5%;
	}
		h1, h2, h3, h4, h5, h6 , ul, li , ol, p, a, dl, dd, dt, blockquote{
		list-style: none;
		margin: 0;
		padding: 0;
	}
	/*p { text-align: justify; text-justify: newspaper; }*/
	a img
	{
	  border:none;
	}
table.hovertable {
	font-family: verdana,arial,sans-serif;
	font-size:11px;
	color:#333333;
	border-width: 1px;
	border-color: #999999;
	border-collapse: collapse;
	text-align:center;
	
}
table.hovertable th {
	background-color:#c3dde0;
	border-width: 1px;
	padding: 2px;
	border-style: solid;
	border-color: #a9c6c9;
}
table.hovertable tr {
	background-color:#d4e3e5;
}
table.hovertable td {
	border-width: 1px;
	padding: 1px;
	border-style: solid;
	border-color: #a9c6c9;
}

		.wrapper {
		 width: 940px;
		 position: relative;
		 overflow: hidden;
		 padding: 0;
		 margin: auto;
	  }
	  	@-webkit-keyframes spaceboots {
			0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
			10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
			20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
			30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
			40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
			50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
			60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
			70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
			80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
			90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
			100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
		}
		
	  	#logo {
		padding-top:30px;
		padding-left: 30px;
		z-index:30;
		position:relative;		
	}

		#logo a,
		#logo img {
			border:0;
	/*-webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;*/
		}
		#logo img:hover{
	/*-webkit-transform: translate(38em,0em) scale(1.05);
    -moz-transform: translate(-1em,1em) scale(1.1);
    -o-transform: translate(-1em,1em) scale(1.1);
    -ms-transform: translate(-1em,1em) scale(1.1);
    transform: translate(-1em,1em) scale(1.1);*/
	-webkit-animation-name: spaceboots;
	-webkit-animation-duration: 0.5s;
	-webkit-transform-origin:50% 50%;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
			}
		
/*------------*/

#content {
		background: white;
		width: 940px;
		float:left;
		padding: 30px;
		margin-top: 20px;
		position:relative;
	}
	
		#content h1 {
			float:left;
			color: #171717;
			letter-spacing:-1px;
			font-size:2.4em;
			font-weight:normal;
			line-height:1.4em;
			width: 675px;
			padding-bottom: 20px;
		}
		
		#content h1 a{text-decoration:none; color:#70d4d2;}
		
			#content p {
			float:left;
			font-size:1.2em;
			line-height:1.6em;
			width: 675px;
			}
			
				#content img.workSelection  { position:relative; padding-left: 50px; 
	-webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
	}
				#content img.workSelection:hover  { 	-webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -o-transform:  scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
	 }
	
	#content ul {float:left;width:100%;}
	
	#content li {
	float:left;
	width:421px;
	border-bottom: 1px dotted #d9d9d9;
	margin-top: 10px;
	margin-right: 20px;
	margin-bottom: 25px;
	margin-left: 0;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 20px;
	padding-left: 0;
	}
	
		#content li a {
			float:left;
			width:421px;
			min-height:259px;
			display:block;
			margin-bottom: 10px;
		}
		
		#content li img {border: 0;}
		
			#content li p {
				font-size:1.2em;
				line-height: 1.6em;
				color: #464646;
				width:421px;
			}

	  /*--------------*/
	  
	  #intro {
	 background: white;
	 width: 940px;
	 float:left;
	 margin: 20px 0 60px 0;
	 padding: 30px 28px;
	 }
	 
	 #intro h2 {
		color:#0b0b0b;
		font-size:1.6em;
		border-bottom: 1px dotted #d9d9d9;
		padding-bottom: 10px;
		padding-left: 10px;
		margin-bottom: 20px;
	 }
	 
		#intro p, #intro li {
			font-size: 1.2em;
			line-height:1.6em;
			padding-left: 10px;
		}
		
			
	/*----------------------------------*/
		#footer {
	background:#111 url(../images/backgroundFooter.jpg) no-repeat top center;
	float:left;
	width:100%;
	font-size: 1.4em;
	min-height: 165px;
	position:relative;
	}
	
		#footer .navigation {
	float:left;
	width: 350px;
	color: #FFF;
	padding: 30px 40px;
	font-weight: normal;
		}
		
		#footer .navigation a{padding: 0 5px;}
		
		#footer .copyright {
	float:right;
	color: #7d7c7c;
	width: 350px;
	padding-top: 30px;
	padding-right: 0px;
	padding-bottom: 30px;
	padding-left: 30px;
		}
		
		#footer .copyright img{padding-right:10px;}
	
	/*---------------------------*/
	
	nav {
		overflow:hidden;
		width: 350px;
	}
	
		nav h2 {
			display: none
		}
		
			nav ul {
	position:absolute;
	z-index: 30;
	top: 2px;
	left: 524px;
	padding: 0;
	margin: 0;
	width: 411px;
			}
			
				nav li {
					float: left;
					margin: 0;
					padding: 0;
				}

					nav li a {
	float: left;
	display:block;
	height: 87px;
	width: 71px;
	text-indent:-5000px;
	margin-top: 4px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	/* [disabled]padding-top: 2; */
	/* [disabled]padding-right: 4px; */
	padding-bottom: 0;
	padding-left: 4px;
					}
		
						nav li.hello {background: url(../images/B_STUDIO.gif) no-repeat 0px 0px;
						  -webkit-transition:0.3s all ease-in-out;
						  -moz-transition:0.3s all ease-in-out;
						  -o-transition:0.3s all ease-in-out;
						  -ms-transition:0.3s all ease-in-out}
						nav li.hello a.active {background:url(../images/B1_STUDIO.gif) no-repeat 0px -10px; min-height: 125px;	  
						  -webkit-transition:0.2s all ease-in-out;
						  -moz-transition:0.2s all ease-in-out;
						  -o-transition:0.2s all ease-in-out;
						  -ms-transition:0.2s all ease-in-out
						  }
						nav li.hello a.active:hover {
							background:url(../images/B1_STUDIO.gif) no-repeat 0px 4px;	min-height: 125px;
						}
						nav li.hello:hover {background:url(../images/B1_STUDIO.gif) no-repeat 0px 4px; min-height: 125px;}
						
						
						nav li.about {background: url(../images/B_ABOUT.gif) no-repeat 0px 0px;
						  -webkit-transition:0.3s all ease-in-out;
						  -moz-transition:0.3s all ease-in-out;
						  -o-transition:0.3s all ease-in-out;
						  -ms-transition:0.3s all ease-in-out}
						nav li.about a.active {background:url(../images/B1_ABOUT.gif) no-repeat 0px -10px; min-height: 125px; 
						  -webkit-transition:0.2s all ease-in-out;
						  -moz-transition:0.2s all ease-in-out;
						  -o-transition:0.2s all ease-in-out;
						  -ms-transition:0.2s all ease-in-out}
						nav li.about a.active:hover {
							background:url(../images/B1_ABOUT.gif) no-repeat 0px 4px;	min-height: 125px;
						}
						nav li.about:hover {background:url(../images/B1_ABOUT.gif) no-repeat 0px 4px; min-height: 125px;}
						
						
						nav li.email {background: url(../images/B_EMAIL.gif) no-repeat 0px 0px;
						  -webkit-transition:0.3s all ease-in-out;
						  -moz-transition:0.3s all ease-in-out;
						  -o-transition:0.3s all ease-in-out;
						  -ms-transition:0.3s all ease-in-out}
						nav li.email a.active {background:url(../images/B1_EMAIL.gif) no-repeat 0px -10px; min-height: 125px; 
						  -webkit-transition:0.2s all ease-in-out;
						  -moz-transition:0.2s all ease-in-out;
						  -o-transition:0.2s all ease-in-out;
						  -ms-transition:0.2s all ease-in-out}
						nav li.email a.active:hover {
							background:url(../images/B1_EMAIL.gif) no-repeat 0px 4px;	min-height: 125px;
						}
						nav li.email:hover {background:url(../images/B1_EMAIL.gif) no-repeat 0px 4px; min-height: 125px;}
						  
						nav li.works {background: url(../images/B_SERVICE.gif) no-repeat 0px 0px;
						  -webkit-transition:0.3s all ease-in-out;
						  -moz-transition:0.3s all ease-in-out;
						  -o-transition:0.3s all ease-in-out;
						  -ms-transition:0.3s all ease-in-out}
						nav li.works a.active {background:url(../images/B1_SERVICE.gif) no-repeat 0px -10px; min-height: 125px; 
						  -webkit-transition:0.1s all ease-in-out;
						  -moz-transition:0.1s all ease-in-out;
						  -o-transition:0.1s all ease-in-out;
						  -ms-transition:0.1s all ease-in-out}
						nav li.works a.active:hover {
							background:url(../images/B1_SERVICE.gif) no-repeat 0px 4px;	min-height: 125px;
						}
						nav li.works:hover {background:url(../images/B1_SERVICE.gif) no-repeat 0px 4px; min-height: 125px;}
						
						nav li.family {background: url(../images/B_FAMILY.gif) no-repeat 0px 0px;
						  -webkit-transition:0.3s all ease-in-out;
						  -moz-transition:0.3s all ease-in-out;
						  -o-transition:0.3s all ease-in-out;
						  -ms-transition:0.3s all ease-in-out}
						nav li.family a.active {background:url(../images/B1_FAMILY.gif) no-repeat 0px -10px; min-height: 125px; 
						  -webkit-transition:0.2s all ease-in-out;
						  -moz-transition:0.2s all ease-in-out;
						  -o-transition:0.2s all ease-in-out;
						  -ms-transition:0.2s all ease-in-out}
						nav li.family a.active:hover {
							background:url(../images/B1_FAMILY.gif) no-repeat 0px 4px;	min-height: 125px;
						}
						nav li.family:hover {background:url(../images/B1_FAMILY.gif) no-repeat 0px 4px; min-height: 125px;}
	/*
  nav li{
	  position:relative;
	  width:71px;
	  height:88px;
	  border:1px solid #666;
	  color:#fff;
	  -webkit-transition:1s all ease-in-out;
	  -moz-transition:1s all ease-in-out;
	  -o-transition:1s all ease-in-out;
	  -ms-transition:1s all ease-in-out
	  }
	  
  nav li:hover{height:125px}
*/


/*Overlay Showreel*/
a.activator{
	z-index:1;
	cursor:pointer;
}
        /* Style for overlay and box */
        .overlay{
            background:transparent url(../images/overlay.png) repeat top left;
            position:fixed;
            top:0px;
            bottom:0px;
            left:0px;
            right:0px;
            z-index:100;
        }
        .box{
            position:fixed;
            top:-1200px;
            left: 30%;
            /*right:30%;*/
            background-color:#fff;
            color:#7F7F7F;
            padding:10px;
            border:1px solid #ccc;
            -moz-border-radius: 10px;
            -webkit-border-radius:10px;
            -khtml-border-radius:10px;
            -moz-box-shadow: 0 1px 5px #333;
            -webkit-box-shadow: 0 1px 5px #333;
            z-index:101;
        }
        .box h1{
	border-bottom: 1px dashed #7F7F7F;
	margin:-10px -10px 0px -10px;
	padding:10px;
	background-color:#333;
	color:#CCC;
	-moz-border-radius:10px 10px 0px 0px;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-khtml-border-top-left-radius: 10px;
	-khtml-border-top-right-radius: 10px;
        }
        a.boxclose{
            float:right;
            width:26px;
            height:26px;
            background:transparent url(../images/cancel.png) repeat top left;
            margin-top:-20px;
            margin-right:-20px;
            cursor:pointer;
        }
/*End Overlay Showreel*/