@import url(https://fonts.googleapis.com/css?family=EB+Garamond);

@font-face {
	font-family: 'ChunkFive';
    src: url('fonts/Chunkfive-webfont.eot');
    src: url('fonts/Chunkfive-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Chunkfive-webfont.woff') format('woff'),
         url('fonts/Chunkfive-webfont.ttf') format('truetype'),
         url('fonts/Chunkfive-webfont.svg#ChunkFiveRegular') format('svg');
	font-weight: normal;
	font-style: normal;
}



.alpha {
behavior: url("/library/backend/iepngfix.htc");
}

.preload #header img,
.preload #portfolio .thumb img{
opacity:0;
filter:alpha(opacity=0);
transition: opacity 0.7s;
}

.preload #portfolio .custom-view img{
opacity:1;
filter:alpha(opacity=100);
}

.preload #header img.fade-in,
.preload #portfolio img.fade-in{
opacity:1;
filter:alpha(opacity=100);
}

body{
margin:0;
padding:0;
background:#322516;
_text-align:center;
color:white;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

#page{
width:950px;
margin:auto;
_text-align:left;
background:url(../images/page-shadow.gif) repeat-y top right #1d1100;
}


#header{
height:375px;
}

#intro{
text-align:center;
width:450px;
position:relative;
text-transform:uppercase;
margin:auto;
_margin-left:242px;
margin-top:-100px;
}

#logo{
display:block;
margin:auto;
margin-bottom:20px;
}

h1{
font-family:"ChunkFive", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-weight:normal;
letter-spacing:6px;
font-size:24px;
margin:0;
text-align:left;
margin-bottom:7px;
position:relative;
}

#cs{
font-size:14px;
letter-spacing:4px;
position:absolute;
display:block;
right:0;
bottom:3px;;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
zoom:1;
_position:relative;
_display:inline;
}

#services{
color:#9e8b7a;
clear:both;
font-size:15px;
letter-spacing:3px;
border: 1px solid #716150;
border-left:0;
border-right:0;
padding:5px 0;
zoom:1;
}


#contact{
padding:10px 0;
border-bottom: 1px solid #716150;
}


#phone{
display: inline-block;
vertical-align: middle;
transition: opacity 0.6s;
cursor: default;
font-size:16px;
letter-spacing:3px;
color:#ffe1c6;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;

}
#phone:hover{
opacity: 0.6;
}



#intro a{
text-decoration:none;
color:#5d4c3d;
font-family:"ChunkFive", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
display:block;
transition: color 0.6s;
}

#intro a:hover{
color:#ffe1c6;
}

#intro #send{
display:inline-block;
vertical-align: middle;
}

#email{
transition: opacity 0.6s;
display: block;
}
#email:hover{
opacity: 0.6;
}



#secret-id-link{
font-size:27px;
letter-spacing:6px;
text-align:right;
margin:10px 0;
padding-top:2px;
}

	
	#secret-id-link:hover img,
	#secret-id-link.open img{
	opacity: 1;
	}

#secret-id-link.open{
color:#a38d77;
}

#secret-id-arrow{
transition: 0.6s;
opacity:0.3;
filter:alpha(opacity=30);
display: inline-block;
vertical-align: middle;
margin-bottom: 4px;
}

#secret-id-link.open #secret-id-arrow {
transform: rotate(90deg);
transition: 0.3s;
}

.preload #secret-id{
height:0px;
opacity:0;
filter:alpha(opacity=0);
}

#secret-id{
width:936px;
height:400px;
margin-left:-250px;	
overflow:hidden;	
position:relative;
background:url(../images/secret-id-bg.jpg) no-repeat;
text-transform:none;
text-align:left;
}

.preload #secret-id{
height: 0;
opacity: 0;
transition: 0.4s;
}

#secret-id.open{
height: 400px;
opacity: 1;
filter:alpha(opacity=100);
}

#secret-id-content{
margin-left: 227px;
position: relative;
height: 360px;
}

#secret-id p,
#secret-id h2{
background:none;
}

#secret-id ul{
margin:0;
padding:0;
}

#secret-id li{
list-style-type:none;
margin:0;
padding:0;
}


	#secret-id-photo{
	position: absolute;
	top:20px;
	bottom:0;
	left:0;
	width:230px;
	height: 360px;
	box-shadow: inset 0 0 20px rgba(0,0,0,1);
	background: url(../images/alex-wong.jpg) top center no-repeat;
	}

	#secret-id-intro{
	color:white; 
	position:absolute; 
	text-align:left; 
	top:45px; 
	left:100px; 
	line-height:30px; 
	border-bottom:1px solid #746659; 
	padding-bottom:6px;
	margin: 0;
	}
	
		#secret-id-name{ 
		font-family:'ChunkFive'; 
		font-size:28px; 
		letter-spacing:1px;
		
		}
		
		#secret-id-intro-text{ 
		padding-left:0.5em;
		font-size:15px; 
		text-transform:uppercase; 
		letter-spacing:3px;
		}
	
	#superpowers{ 
	position:absolute; 
	top:124px; 
	left:0px; 
	width:330px; 
	height:230px; 
	border-right:1px solid #746659;
	text-align:right;
	}
	
		#superpowers-head{ 
		position:absolute; 
		top:1px; 
		right:16px
		}
		
		#superpowers-list{ 
		color:#1d1100; 
		line-height:24px; 
		position:absolute; 
		top:28px; 
		right: 22px;
		}

	
	#master-talents{
	position:absolute; 
	top:126px; 
	left:360px;
	}
		
		#master-talents-head{
		color:white; 
		font-size:16px; 
		font-family:"ChunkFive"; 
		font-weight:normal; 
		text-transform:uppercase; 
		font-size:16px; 
		letter-spacing:5px;
		margin-top: 0;
		margin-bottom: 10px;
		}
		
		#master-talents-list{
		text-align:left;
		line-height:20px;
		text-transform:uppercase;
		font-size:14px;
		letter-spacing:1px;
		}
		
		#master-talents li{
		list-style-type:square;	
		margin-bottom:3px;
		}
		
	#degree{
	font-family:Georgia, 'Times New Roman', Times, serif; 
	font-style:italic; 
	color:#1d1100; 
	font-size:15px; 
	margin-top:6px; 
	padding-top:6px; 
	border-top:1px solid #746659;
	}



#instagram-header{
text-transform: none;
font-size: 30px;
display: block;
padding: 10px 0;
position: relative;
}

a#instagram-header{
color:#ffe1c6;
}
a#instagram-header:hover{
color:#a38d77;
}


	#instagram-header img{
	margin-right: 10px;
	opacity: 1;
	transition: opacity 0.6s;
	}
	
	#instagram-header:hover img{
	opacity: 0.6;
	}
	
	#instagram-header span {
	background: #1D1100;
	position: relative;
	z-index: 2;
	padding: 0 10px;
	}
	
	#instagram-header:before{
	content:'';
	border-bottom: 1px solid #716150;
	width: 100%;
	height: 1px;
	position: absolute;
	z-index: 1;
	top:50%;
	left:0;
	}



#close-secret-id{
width:22px;
height:22px;
position:absolute;
right:0;
top:18px;
overflow:hidden;
background:url(../images/close-secret-id.png) no-repeat top right;
opacity:0.5;
filter:alpha(opacity=50);
cursor:pointer;
display:none;
transition: opacity 0.3s;
}

.preload #close-secret-id{
display:block;	
}

#close-secret-id:hover{
opacity:1;
filter:alpha(opacity=100);
}

#portfolio-link{
font-size:55px;
letter-spacing:15px;
padding-left: 2px;
}

#portfolio{
position:relative;
width:880px;
padding-left:55px;
margin-top:30px;
}

#vertical-watermark{
position:absolute;
top:12px;
left:-34px;
}

.fixed{
position:fixed!important;
top:10px!important;
_position:absolute!important;
_top:12px!important;
}


/*:::::: Portfolio :::::::*/
#portfolio h2{
background:url(../images/rule.gif) repeat-x center center;
font-family:"ChunkFive", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color:#7C6D5C;
font-size:20px;
letter-spacing:10px;
font-weight:normal;
text-align:center;
text-transform:uppercase;
margin:60px 0 5px;
padding-right:35px;
}


#portfolio a{
display:block;
}

#portfolio h2 span{
padding: 0 20px 0 40px;
position:relative;
background:#1d1100;
}


.portfolio-hover #portfolio .thumb>img,
.viewport-expanded #portfolio .thumb>img{
opacity: 0.2;
}

#portfolio .thumb:hover img,
#portfolio .thumb.active img{
opacity: 1;
}

.thumb{
display:block;
position:relative;
width:880px;
height:100px;
}


.thumb img{
transition:opacity 0.3s;
display: block;
}

img{
border:0;
}

.viewport{
height:0;
position:relative;
overflow: hidden;
}


/*Fixes iframe white background showing during load */
.preload .viewport iframe{
visibility:hidden;	
}

/*:::::: Gallery :::::::*/

.viewport .gallery{
position:relative;
}

.viewport .gallery img{
display:block;
width:880px;
height:540px;
position:absolute;
top:0;
left:0;
filter:inherit;
}


	.viewport .gallery img.swipe-left{
	transition: 0.5s;
	left:-100% !important;
	opacity: 0!important;
	}
	.viewport .gallery img.swipe-right{
	transition: 0.5s;
	left:100%!important;
	opacity: 0!important;
	}
	
	.viewport .gallery img.reset-drag{
	left:0 !important;
	}

.gallery .nav{
position:absolute;
top:550px;
height:30px;
width:100%;
}

.close-button{
width:30px;
height:30px;
cursor:pointer;
position:absolute;
display:block;
right:10px;
background:url(../images/close-button.gif) no-repeat center center;
opacity:0.5;
filter:alpha(opacity=50);
transition: opacity 0.3s;
}

.close-button:hover{
opacity:1;
filter:alpha(opacity=100);
}

.nav-item-box{
float:left;
}

.nav-item{
width:30px;
height:30px;
cursor:pointer;
float:left;
background:url(../images/nav-item.gif) no-repeat center center;
display:block;
position:relative;
opacity: 0.3;
filter:alpha(opacity=30);
transition:opacity 0.3s;
}

.nav-item.active,
.nav-item:hover{
opacity: 1;
filter:alpha(opacity=100);
}

.viewport div{
position:relative;
zoom:1;
}

.launch{
color:white;
display:block;
float:left;
text-transform:uppercase;
font-size:12px;
letter-spacing:2px;
padding-left:15px;
text-decoration:none;
color:#675647;
padding-top:6px;
background:#1D1100;
transition: color 0.3s;
}

.launch:hover{
color:white;
}

.loading{
background:url(../images/loading.gif) no-repeat 432px 263px;	
}

#superpowers{
font-family: "EB Garamond", "Times New Roman", Times, serif;
}

#superpowers-head{
font-family: "Times New Roman", Times, serif;
font-weight:bold; 
text-transform:uppercase; 
font-size:17px; 
color:#1d1100; 
text-align:right; 
letter-spacing:7px;
margin: 0;
}

#superpowers ul span{
font-size:20px;
}

#superpowers li{
border-top:1px solid #84776c;	
padding:5px 0 6px 0;
font-size:20px;
}


#custom-view{
position:relative;	
}



#portfolio #instgram-portfolio h2{
text-transform: none;
letter-spacing: 2px;
font-size: 26px;
transition: color 0.3s;
}

	#instgram-portfolio {
	color:#7C6D5C;
	text-decoration: none;
	transition: color 0.3s;
	padding-bottom: 50px;
	display: block;
	height: auto;
	}
	
	#instgram-portfolio:hover,
	#instgram-portfolio:hover h2{
	color:#FFE1C6;
	}
	
	#instgram-portfolio h2 img{
	display: inline-block;
	vertical-align: middle;
	margin-right: 10px;
	opacity: 0.5 !important;
	transition: opacity 0.3s;
	}
	
	#instgram-portfolio:hover h2 img{
	opacity: 1 !important;
	}
	
		#instagram-view-more{
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
		display: block;
		margin-bottom: 10px;
		letter-spacing: 2px;
		}