@charset "utf-8";


/*
	
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	padding: 0px;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	text-align: justify;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

:focus {
	outline: 0;
}
body {
	line-height: 1;
	background: black;
}
ol, ul {
	list-style: none;
}

table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}


body, html {
	width: 100%;
	height: 100%;
}


html {
	overflow: hidden;
}

body {
	margin: 0;
	padding: 0;
	background-color: transparent;
	background-image: url(../images/bg.gif);
	font-family: "Arial", Tahoma, , Helvetica, sans-serif;
	visibility: inherit;
}

strong {
	font-weight: bold;
}

/*em {
	font-style: italic;
}*/

.clear {clear:both}

#container {
	width: 100%; max-width: 3700px;
	height: 100%; max-height: 2350px;
	margin-left: auto;
	margin-right: auto;
}

.positioning {
	position: absolute;
	width: 1200px; 
	height: 750px; 
	background-repeat: no-repeat;
	overflow-y: scroll;
	visibility: inherit;
	}

	#home {
		top: 0px;
		left: 1px;
		height: 750px;
		background-image: url(../images/home.jpg);
		background-color: #ea6f45; /*transparent */
		width: 1200px;
	}
	
	#ppt {
		top: 800px;
		left: 0px;
		height: 750px;
		background-image: url(../images/ppt.jpg);
		background-color: #dd696a;
		width: 1200px;
	}
	
	#info {
		top: 1600px;
		left: 0px;
		height: 750px;
		background-image: url(../images/info.jpg);
		background-color: #cbf39d;
		width: 1200px;
	}
	
	#graphics {
		top: 1600px;
		left: 1250px;
		height: 750px;
		background-image: url(../images/graphics.jpg);
		background-color: #423633;
		width: 1200px;
	}
				
	#presentations {
		top: 800px;
		left: 1250px;
		height: 750px;
		background-image: url(../images/presentations.jpg);
		background-color: #e7d29d; /*#f2c88c*/
		width: 1200px;
	}
		
	#motion {
		top: 0px;
		left: 1250px;
		height: 750px;
		background-image: url(../images/mg.jpg);
		background-color: #013656; 
		width: 1200px;
	}
	
	#reach {
		top: 0px;
		left: 2500px;
		height: 750px;
		width: 1200px;
		overflow-x: hidden; /* Hide horizontal scrollbar */
	}
		
	#works {
		top: 800px;
		left: 2500px;
		height: 750px;
		background-image: url(../images/work.jpg);
		background-color: #e6710a; 
		width: 1200px;
		overflow-x: hidden;  /* Hide horizontal scrollbar */
	}

	#profile {
		top: 1600px;
		left: 2500px;
		height: 750px;
		background-image: url(../images/profile.jpg);
		background-color: #e1cc97;
		width: 1200px;
	}

#content {
		height: 1050px;
		background-repeat: no-repeat;
		}

/*#about #content {
		background-image:url(../images/about.jpg);
		background-color: #360508;
		}*/

#reach #content {
		background-image: url(../images/reach.jpg);
		background-color: #dcf1ac; /*#aae42d;*/
		}
		
.left-sidebar {
  margin: 0;
  padding: 0 0 0 115px;
  padding-top: 20px;
 }
 
#left-sidebar{
  position: absolute;
  top: 0;
  left: 0;
  width: 700px;
  height: 100%;
 }
 
.right-sidebar {
	float: right;
	margin: 0;
	padding-top: 30px;
	padding: 0 139px 0 0;
	text-align: right;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
 }
 
#right-sidebar {
  position:absolute;
  top: 0;
  right: 0;
  width: 180px;
  height: 100%;
 }
 	
.inside {
	margin: 10px 120px;
	width: 700px;
	font-family: inherit;
}
	
	.inside h3 {
		text-transform: uppercase;
		font-size: 15px;
		padding-bottom: 5px;
	}
	
	.inside .text {
	font-family: Arial, Tahoma, Helvetica, sans-serif;
	font-size: 12px;
	color: #000;
	line-height: 22px;
	padding-top: 30px;
	height: 650px;
	width: 950px;
	}
	
	#home .inside .text { 
		width: 740px;
	}
	
	#ppt .inside .text { 
		width: 875px;/*1000px*/
		height: 750px; /*1050px;*/
	}
	
	#works .inside .text { 
		color: #740404;
		width: 780px;
		padding-top: 5px;
		height: 970px;
	}
	
	#info .inside .text { 
		width: 650px;
		/*padding-top: 5px;*/		
	}
	
	#graphics .inside .text { 
		width: 750px;
		padding-top: 5px;
	}
		
	#profile .inside .text {
	    padding: 0;
		height: 1050px;
	}
	
	#reach .inside .text { 
		color: #020107;
	}
	
	#presentations .inside .text { 
		height: 1000px;
	}
	
	#motion .inside .text { 
		width: 700px;
	}




#slideout {
			position: absolute;
			top: 380px;
			left: 0;
			width: 50px;
			padding: 0;
			text-align: center;
			cursor: pointer;
			-webkit-transition-duration: 0.3s;
			-moz-transition-duration: 0.3s;
			-o-transition-duration: 0.3s;
			transition-duration: 0.3s;
			-webkit-border-radius: 0 5px 5px 0;
			-moz-border-radius: 0 5px 5px 0;
			border-radius: 0 5px 5px 0;
		}
		
		#slideout_inner {
			position: fixed;
			top: 370px;
			left: -550px;
			background: #ae845a; /*#cf8d41*/
			width: 500px;
			padding: 25px;
			height: 90px;
			-webkit-transition-duration: 0.3s;
			-moz-transition-duration: 0.3s;
			-o-transition-duration: 0.3s;
			transition-duration: 0.3s;
			text-align: left;
			-webkit-border-radius: 0 0 5px 0;
			-moz-border-radius: 0 0 5px 0;
			border-radius: 0 0 5px 0;
			color: #fff;
			font-family: Arial, Helvetica, sans-serif;
			font-size: 13px;
		}
		
		#slideout_inner textarea {
			width: 190px;
			height: 300px;
			margin-bottom: 6px;
		}
		
		#slideout:hover {
			left: 550px;
		}

		#slideout:hover #slideout_inner {
			left: 0;
		}

#slideout1 {
			position: absolute;
			top: 360px;
			right: 0;
			width: 50px;
			padding: 0;
			text-align: center;
			cursor: pointer;
			-webkit-transition-duration: 0.3s;
			-moz-transition-duration: 0.3s;
			-o-transition-duration: 0.3s;
			transition-duration: 0.3s;
			-webkit-border-radius: 0 5px 5px 0;
			-moz-border-radius: 0 5px 5px 0;
			border-radius: 0 5px 5px 0;
		}
		
		#slideout_inner1 {
			position: fixed;
			top: 320px;
			right: -755px;
			background: #e6710a; 
			border: 2px solid #740404;
			width: 700px;
			padding-top: 45px;			
			padding: 25px;
			height: 140px;
			-webkit-transition-duration: 0.3s;
			-moz-transition-duration: 0.3s;
			-o-transition-duration: 0.3s;
			transition-duration: 0.3s;
			text-align: left;
			-webkit-border-radius: 0 0 5px 0;
			-moz-border-radius: 0 0 5px 0;
			border-radius: 0 0 5px 0;
			color: #740404;
			font-family: Arial, Helvetica, sans-serif;
			font-size: 13px;
		}
		#slideout_inner1 textarea {
			width: 190px;
			height: 300px;
			margin-bottom: 6px;
		}
		#slideout1:hover {
			right: 750px;
		}
		#slideout1:hover #slideout_inner1 {
			right: 0;
		}

#slideout2 {
			position: absolute;
			top: 420px;
			right: 0;
			width: 40px;
			padding: 0;
			text-align: center;
			cursor: pointer;
			-webkit-transition-duration: 0.3s;
			-moz-transition-duration: 0.3s;
			-o-transition-duration: 0.3s;
			transition-duration: 0.3s;
			-webkit-border-radius: 0 5px 5px 0;
			-moz-border-radius: 0 5px 5px 0;
			border-radius: 0 5px 5px 0;
		}
		
		#slideout_inner2 {
			position: fixed;
			top: 340px;
			right: -420px;
			background: #e1dd9d;
			border: 4px solid #636131;
			width: 380px;
			padding: 10px 10px 20px 20px;			
			height: 194px;
			-webkit-transition-duration: 0.3s;
			-moz-transition-duration: 0.3s;
			-o-transition-duration: 0.3s;
			transition-duration: 0.3s;
			text-align: left;
			-webkit-border-radius: 0 0 5px 0;
			-moz-border-radius: 0 0 5px 0;
			border-radius: 0 0 5px 0;
		}
		#slideout_inner2 textarea {
			width: 325px;
			height: 154px;
			margin-bottom: 6px;
		}
		#slideout2:hover {
			right: 420px;
		}
		#slideout2:hover #slideout_inner2 {
			right: 0;
		}
		
#slideout3 {
			position: absolute;
			top: 305px;
			left: 0;
			width: 50px;
			padding: 0;
			text-align: center;
			cursor: pointer;
			-webkit-transition-duration: 0.3s;
			-moz-transition-duration: 0.3s;
			-o-transition-duration: 0.3s;
			transition-duration: 0.3s;
			-webkit-border-radius: 0 5px 5px 0;
			-moz-border-radius: 0 5px 5px 0;
			border-radius: 0 5px 5px 0;
		}
		
		#slideout_inner3 {
			position: fixed;
			top: 310px;
			left: -700px;
			background: #000; /*#c82834;*/
			width: 650px;
			padding: 15px 25px 15px 25px;
			height: 110px;
			-webkit-transition-duration: 0.3s;
			-moz-transition-duration: 0.3s;
			-o-transition-duration: 0.3s;
			transition-duration: 0.3s;
			text-align: justify;
			line-height: normal;
			-webkit-border-radius: 0 0 5px 0;
			-moz-border-radius: 0 0 5px 0;
			border-radius: 0 0 5px 0;
			color: #e0817b; 
			font-family: Arial, Helvetica, sans-serif;
			font-size: 13px;
		}
		
		#slideout_inner3 textarea {
			width: 190px;
			height: 350px;
			margin-bottom: 6px;
		}
		
		#slideout3:hover {
			left: 700px;
		}

		#slideout3:hover #slideout_inner3 {
			left: 0;
		}
		
#slideout4 {
			position: absolute;
			top: 490px;
			left: 0;
			width: 50px;
			padding: 0;
			text-align: center;
			cursor: pointer;
			-webkit-transition-duration: 0.3s;
			-moz-transition-duration: 0.3s;
			-o-transition-duration: 0.3s;
			transition-duration: 0.3s;
			-webkit-border-radius: 0 5px 5px 0;
			-moz-border-radius: 0 5px 5px 0;
			border-radius: 0 5px 5px 0;
		}
		
		#slideout_inner4{
			position: fixed;
			top: 505px;
			left: -850px;
			background: #c82834;
			width: 800px;
			padding: 15px 25px 15px 25px;
			height: 90px;
			-webkit-transition-duration: 0.3s;
			-moz-transition-duration: 0.3s;
			-o-transition-duration: 0.3s;
			transition-duration: 0.3s;
			text-align: justify;
			-webkit-border-radius: 0 0 5px 0;
			-moz-border-radius: 0 0 5px 0;
			border-radius: 0 0 5px 0;
			color: #e0817b; 
			font-family: Arial, Helvetica, sans-serif;
			font-size: 13px;
		}
		
		#slideout_inner4 textarea {
			width: 190px;
			height: 300px;
			margin-bottom: 6px;
		}
		
		#slideout4:hover {
			left: 850px;
		}

		#slideout4:hover #slideout_inner4 {
			left: 0;
		}	
		
#slideout5 {
			position: absolute;
			top: 515px;
			right: 0;
			width: 50px;
			padding: 0;
			text-align: center;
			cursor: pointer;
			-webkit-transition-duration: 0.3s;
			-moz-transition-duration: 0.3s;
			-o-transition-duration: 0.3s;
			transition-duration: 0.3s;
			-webkit-border-radius: 0 5px 5px 0;
			-moz-border-radius: 0 5px 5px 0;
			border-radius: 0 5px 5px 0;
		}
		
		#slideout_inner5 {
			position: fixed;
			top: 520px;
			right: -600px;
			background-image: url(../images/slide-out5.png);
			/*background-color: #c82834;*/
			width: 650px;
			padding-top: 45px;			
			padding: 15px 40px 15px 25px;
			height: 80px;
			-webkit-transition-duration: 0.3s;
			-moz-transition-duration: 0.3s;
			-o-transition-duration: 0.3s;
			transition-duration: 0.3s;
			text-align: justify;
			-webkit-border-radius: 0 0 5px 0;
			-moz-border-radius: 0 0 5px 0;
			border-radius: 0 0 5px 0;
			color: #e0817b;
			font-family: Arial, Helvetica, sans-serif;
			font-size: 13px;
		}
		#slideout_inner5 textarea {
			width: 350px;
			height: 200px;
			margin-bottom: 6px;
		}
		#slideout5:hover {
			right: 600px;
		}
		#slideout5:hover #slideout_inner5 {
			right: 0;
		}
			
.title {
	background-repeat: no-repeat;
	font-family: "Times New Roman";
	font-size: 50px;
	text-align: left;
	padding-bottom: 10px;
	letter-spacing: -5px;
}

	#home .title {
		color:  #b94220; /*#f3a96c;*/
	}
	
	#ppt .title {
		color: #920608; 
	}

	#presentations .title {
		color: #836241; /*#8e5834*/
	}
	
	#info .title {
		color: #90bd5e; 
	}
	
	#profile .title {
		color: #a99a73 /*#367b8b*/;
	}
	
	#motion .title {
		color: #001d2d; /*#b98ff1;*/
	}
	
	#works .title {
		color: #e6710a;
	}
	
	#graphics .title {
		color: #423633; /* #986c63;*/
	}

ul.navigation {
	float: right;
	display: block;
	width: 321px;
	padding: 0px;
	padding-top: 5px;
	font-family: "Arial", Tahoma, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	text-align: right;
	list-style: none;
	z-index: 5;
}

ul.navigation li {
	display: block;
	float: left;
	position: relative;
}

/*#about ul.navigation { margin: 0 0; float: none; }*/

#reach ul.navigation { margin: 0 0; float: none; }

a.navigator {
	cursor: pointer;
	display: block;
	vertical-align: middle;
	width: 62px;
	color: #fff;
	text-align: center;
	margin-left: 1px;
	padding: 5px;	
}

	#home .navigator { background-color: #b94220;  }
	#ppt .navigator { background-color: #c4222d; }
	#presentations .navigator { background-color: #836241; }
	#profile .navigator { background-color: #a99a73; /*#367b8b;*/ }
	#works .navigator { background-color: #e6710a; }
	#motion .navigator { background-color: #001d2d; }
	#info .navigator { background-color: #90bd5e; }
	#graphics .navigator { background-color: #423633; /*#38342b;*/ }
	#reach .navigator { background-color: #639d11; }
	
	
	#home .present .navigator,
	#ppt .present .navigator,
	#presentations .present .navigator,
	#profile .present .navigator,
	#works .present .navigator,
	#motion .present .navigator,
	#info .present .navigator,
	#graphics .present .navigator,
	#reach .present .navigator { background-color: #000; color: #fff;}

a {
	text-decoration: none;
	cursor: pointer;
	margin: 1px;
	padding: 3px;
}

a:hover {
	color: #fff;
}
	
	#home a {
		color: #efa17d; /*#fcc2a6*/
		background-color: #b94220;
	}
	
	#ppt a {
		color: #dd696a;
		background-color: #c4222d;
	}
	
	#presentations a {
		color: #e7d29d; /*#cf8d41*/
		background-color: #836241; /*#8e5834*/
	}
	
	#profile a {
		color: #e1d297 /*#a3c5ce*/;
		background-color: #a99a73;
	}
	
	#works a {
		color: #fcc840; 
		background-color: #e6710a; 
	}
	
	#motion a {
		color: #0076a3; 
		background-color: #001d2d;
	}
	
	#info a {
		color: #cbf29f;
		background-color: #90bd5e;
	}
	
	#graphics a {
		color: #977a58;
		background-color: #423633; /*#301e10;*/
	}
	
	#reach a {
		color:#ceed90; /*#452321; #dfb380;*/
		background-color: #639d11;
	}

li ul{
	display: none;
	position: absolute;
	left: 0;
	top: 100%;
}

li:hover ul {
	display: block;
}

li .ul li {
	padding: 0;
	padding-top: 10px;
}

li .ul li .ul {
	left: 100%;
	top: 0;
	padding-left: 1px;
}

li .ul li .ul li {
	width: 230px;
}

a li:hover {
	background: #000;
}

/*.folio-item {
	display: block;
	float: left;
	width: 135px;
	height: 185px;
	cursor: pointer;
	margin-right: 100px;
	padding: 0;
}*/

.case-item {
	display: block;
	float: right;
	width: 185px;
	height: 185px;
	cursor: pointer;
	margin-right: 195px;
	padding: 0;
	margin-top: -20px;
}


.portfolio-item {
	display: block;
	float: left;
	width: 185px;
	height: 135px;
	cursor: pointer;
	margin-right: 70px;
	padding: 0;
}

	#case-item-2 { background-image: url(../images/abt%20me.jpg);}
	#case-item-1 { background-image: url(../images/profile%20ppt.jpg);}
			
	#portfolio-item-1 { background-image: url(../images/works.jpg);}
	#portfolio-item-2 { background-image: url(../images/works1.jpg);}
	#portfolio-item-3 { background-image: url(../images/works2.jpg);}

.strip {
	padding-top: 20px;
}

#works .strip {
	padding-top: 5px;
}

.showcase {
	font-size: 13px;
	text-align: justify;
	padding: 20px;
	color: #fff;
	line-height: 18px;
	background-color: #e7337f; 
}

	
#works .showcase {
	background-color: transparent;
	padding: 5px;
	}
	
/*#info .showcase {
	width: 670px;
	}*/
	
#profile .showcase {
	font-size: 12px;
	padding: 0px 0px 0px 20px;
	margin-left: 160px;	
	width: 660px;
	color: #000; /*#a99a73*/
	background-color: transparent;
	}

	/*#profile .showcase { background-color: #90bd5e;}*/
	#works .showcase { background-color: transparent;}

	#profile .showcasename { color: #a99a73;}
	#works .showcasename { color: #ca6309;
}

.showcase img {
	border: 5px solid #fdb3de;
	margin: 0 auto;
	margin-bottom: 0px;
	display: block;
}

#works .showcase img {
	border: none;
	margin: 0 auto;
}

.close-profile, .close-works{
	float:right;
	display: block;
	font-weight: bold;
	cursor: pointer;
	font-size: 9px;
	font-family: "Arial", Tahoma, Helvetica, sans-serif;
	text-transform: uppercase;
	background-color: #000;
	color: #fff;
	padding: 1px 6px;
	margin-left: 4px;
	margin-bottom: 4px;
}

.scroll {
	display: block;
	padding: 5px;
	margin-top: 5px;
	width: 300px;
	height: 50px;
	overflow-y: scroll;
	/* overflow-x: hidden;  Hide horizontal scrollbar */
}

html {scrollbar-base-color: #000000; /*#ccc;*/}

html, body, #container { height: 100%; }
body #container { height: auto; min-height: 100%; }

#footer {
 clear: both;
 text-align: center;
 position: relative;
 z-index: 10;
 height: 4em;
 margin-top: -3em;
 font-family: "Arial", Tahoma, Helvetica, sans-serif;
 font-size: 11px;
 color: #fff;
}

#content { padding-bottom: 3em; }

#home #footer {
	color: #000;
	}
	
#motion #footer {
	color: #000;
	}

#reach #footer {
	color: #000;
	}
	
#profile #footer {
	color: #000;
	margin-top: -10em; /*(1em=11px)*/
	}
		
#ppt #footer {
	color: #000;
	margin-top: -10em;
	}
	
#presentations #footer {
	margin-top: -10em;
	color: #000;
	}	

#works #footer {
	margin-top: -10em;
	}
		
#info #footer {
	color: #000;
	margin-top: -10em;
	}
	
#graphics #footer {
	color: #000;
	margin-top: -41em;
	}

@media screen(min-width:1366px) {
	#container {
		width: 100%; 
		height: 100%; 
	}
}

@media screen(max-width:1366px) {
	#container {
		width: 100%; 
		height: 100%; 
	}
	.positioning {
		width: 100%; max-width: 1370px;
		height: 100%; max-height: 750px;
		}
}

@media screen(max-width:1024px) {
	.positioning {
		width: 100%; max-width: 1370px;
		height: 100%; max-height: 650px;
		}
}

@media screen(max-width:768px) {
	.positioning {
		width: 100%; max-width: 1370px;
		height: 100%; max-height: 650px;
		}
}

@media screen and (-webkit-min-device-pixel-ratio : 1.5), and (min-device-pixel-ratio : 1.5), and (max-resolution: 192dpi){
  body {
    font-size: 90%;
  }
}

@media screen and (-webkit-min-device-pixel-ratio : 1.5), and (min-device-pixel-ratio : 1.5), and (max-resolution: 192dpi) {
  body {
    font-size: 90%;
  }
}

@media screen(max-width:480px) {
	.positioning {
		width: 100%; max-width: 1370px;
		height: 100%; max-height: 650px;
		}
}

@media screen(min-width:320px) {
	.positioning {
		width: 100%; max-width: 1370px;
		height: 100%; max-height: 650px;
		}
}







