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

/* ---------- RESET ----------
   --------------------------- */
   
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,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:top;background:transparent;}
body{line-height:1;text-align:left;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
:focus {outline:0;}
ins{text-decoration:none;}
del{text-decoration:line-through;}
table{border-collapse:collapse;border-spacing:0;}

/* ---------- STYLE ----------
   --------------------------- */

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

}

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

}

html, body { 
	height: 100%;
	width: 100%;
	font-family: 'chevindemibold', sans-serif;;
	font-size:14px;
	line-height: 36px;
	letter-spacing:1px;
	color:#323232;
	background-color:#FFFFF3;
}

/*#top{
	width:auto;
	height:7px;
	background:#969696;
	display:block;
	position: relative;
}
	*/
#wrapper{
	width:972px;
	height:auto;
	margin: 50px auto;
}
	
a:link {color:#323232; text-decoration:none}
a:visited {color:#323232;} 	
a:hover {color:#969696; text-decoration:none}
a:active {color:#969696; text-decoration:none} 
	
#logo{
	width:400px;
	height:100px;
	margin:0px auto;
}

#logo a:link{border:none;}
#logo a:hover {color:#FFF; background-color:#FFFFF3;}

#info a:link{border-bottom: 1px dotted; }
#info a:hover {color:#FFF; background-color:#969696; border:none }
#info a:active {color:#FFF; background-color:#969696; border:none }

#project_info a:link{border-bottom: 1px dotted; }
#project_info a:hover {color:#FFF; background-color:#969696; border:none }
#project_info a:active {color:#FFF; background-color:#969696; border:none }

#contact a:link{border-bottom: 1px dotted; }
#contact a:hover {color:#FFF; background-color:#969696; border:none }
#contact a:active {color:#FFF; background-color:#969696; border:none }


/* navigation */	
#navigation{
	width:960px;
	height:52px;
	float:left;
	margin:50px 6px 0px 6px;
	text-align:center;
	font-size:18px;
  	display: inline-block;
  	vertical-align: middle;
  	line-height: 50px;    
  	display:block;
}

#navigation a:link {color:#323232; text-decoration:none; border:none}
#navigation a:visited {color:#323232;} 	
#navigation a:hover {color:#FFF; background-color:#969696; text-decoration:none}
#navigation a:active {color:#FFF; background-color:#969696; text-decoration:none} 

.menu{
	padding-left:39px;
	padding-right:39px;
	letter-spacing:2px;
}

#on_menu{
	padding-left:39px;
	padding-right:39px;
	letter-spacing:2px;
	color:#FFF; 
	background-color:#969696; 
	text-decoration:none
}

hr{
	height:1px;
    background-color:#323232;
    border:none
}

#intro{
	width:960px;
	height:autopx;
	margin-left:6px;
	margin-right:6px;
	margin-top:60px;
	float:left
}

#hi{
	width:312px;
	height:auto;
	font-size:48px;
	letter-spacing:3px;
	float:left;
	margin-right:6px;
}

#project_name{
	width:312px;
	height:auto;
	font-size:40px;
	letter-spacing:3px;
	float:left;
	margin-right:6px;
}


#info{
	width:636px;
	height:auto;
	margin-left:6px;
	float:left
}

#line{
	width:960px;
	height:5px;
	margin-right:6px;
	background:#323232;
	float:left;
	margin-top:30px;
}

#portfolio{
	width:972px;
	height:1490px;
	float:left;
}

#main_portfolio{
	width:972px;
	height:1490px;
	float:left;
	margin-top:60px
}

#list_portfolio{
	width:972px;
	height:500px;
	float:left;
}

.column{
	width:312px;
	height:1470px;
	float:left;
	margin-left:6px;
	margin-right:6px;
}

/* hover thumbnail */

.imgWrap_portrait {
    display: inline-block;
	position: relative;
	height: 480px;
	width: 312px;
    background-color: #969696;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
	margin-bottom:12px;
}

.imgWrap_portrait img {
    opacity: 1;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

.imgWrap_portrait:hover {
    background-color: #969696;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

img:hover,
.imgWrap_portrait:hover img {
    opacity: 0;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

.imgDescription {
  overflow: hidden;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  color:#FFF;
  visibility: hidden;
  opacity:0;
  margin-left:12px;
}

.imgWrap_portrait:hover .imgDescription {
  visibility: visible;
  opacity: 1;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;}

.imgWrap_landscape {
    display: inline-block;
	position: relative;
	width: 312px;
	height: 234px;
    background-color: #969696;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
	margin-bottom:12px;
}

.imgWrap_landscape img {
    opacity: 1;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

.imgWrap_landscape:hover {
    background-color: #969696;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

img:hover, .imgWrap_landscape:hover img {
    opacity: 0;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

.imgWrap_landscape:hover .imgDescription {
  visibility: visible;
  opacity: 1;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

.imgWrap_landscape:hover .imgDescription {
  visibility: visible;
  opacity: 1;
}

.short_Description{
	font-size:14px;
}

.imgWrap {
    display: inline-block;
	position: relative;
	height: 150px;
	width: 231px;
    background-color: #969696;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
	margin:6px;
	float:left;
}

.imgWrap img {
    opacity: 1;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

.imgWrap:hover {
    background-color: #969696;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

img:hover,
.imgWrap:hover img {
    opacity: 0;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

.imgWrap:hover .imgDescription {
	margin-top:20px;
	text-align:center;
  visibility: visible;
  opacity: 1;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

.imgWrap .imgDescription {
  margin-left:0px;
}

/* footer */	

#footer{
	width:960px;
	height:90px;
	float:left;
	margin-left:6px;
	display:block;
	background-image:url(images/footer.png);
	text-align:center;
}	

#about{
	width:520px;
	height:650px;
	float:left
}

#contact{
	width:393px;
	height:650px;
	float:left;
	margin-left:47px;
}

#full_info{
	width:960px;
	height:650px;
	float:left;
	margin-top:60px;
	margin-left:6px;
}

#logo img:hover{
  visibility: visible;
  opacity: 1;
}

#project_info{
	width:636px;
	height:auto;
	margin-left:6px;
	float:left
}

#project_images{
	width:972px;
	height:auto;
	float:left;
}

#project_images img{
	width:960px;
	height:auto;
	margin-left:6px;
	margin-bottom:24px;
}

#project_images img:hover{
  visibility: visible;
  opacity: 1;
}

/*
Back to top button 
*/
#back-top {
	position: fixed;
	bottom: 100px;
	margin-left: 990px;
}
#back-top a {
	width: 50px;
	display: block;
	/* background color transition */
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	transition: 0.5s;
}
#back-top a:hover {
	color: #000;
}
/* arrow icon (span tag) */
#back-top span {
	width: 50px;
	height: 50px;
	display: block;
	margin-bottom: 7px;
	background: #ddd url(images/bt_top.png) no-repeat center center;
	/* rounded corners */
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	border-radius: 25px;
	/* background color transition */
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	transition: 0.5s;
    opacity: 0.3;
}
#back-top a:hover span {
    opacity: 1;
}

#recent{
	width:960px;
	height:52px;
	float:left;
	margin:0px 6px 50px 6px;
	font-size:18px;
  	display: inline-block;
  	vertical-align: middle;
  	line-height: 50px;    
  	display:block;
}