@charset "utf-8";
html{
	 -webkit-text-size-adjust: none;
}
/* ----------------------------------------------------- regular screen */
.Btn_close:before {background-image:url("image/sprite.png");}
.Btn_arrow:before{background-image:url("image/sprite.png");}
 #GridBtn {background-image:url("image/sprite.png");}

@media
screen and (-webkit-min-device-pixel-ratio: 1),
screen and (   min--moz-device-pixel-ratio: 1),
screen and (     -o-min-device-pixel-ratio: 1),
screen and (    -ms-min-device-pixel-ratio: 1),
screen and (        min-device-pixel-ratio: 1)
{ 
    .Btn_close:before {background-image:url("image/sprite.png");}
    .Btn_arrow:before{background-image:url(image/sprite.png);}
    #GridBtn {background-image:url("image/sprite.png");}
}
/* ----------------------------------------------------- retina screen */
@media
screen and (-webkit-min-device-pixel-ratio: 1.5),
screen and (   min--moz-device-pixel-ratio: 1.5),
screen and (     -o-min-device-pixel-ratio: 3/2),
screen and (    -ms-min-device-pixel-ratio: 1.5),
screen and (        min-device-pixel-ratio: 1.5) 
{ 
    .Btn_close:before {
        background-image:url("image/sprite_2x.png");
        background-size:67px;
    }
    .Btn_arrow:before{
        background-image:url(image/sprite_2x.png);
        background-size:67px;
    }
    #GridBtn {
        background-image:url("image/sprite_2x.png"); 
        background-size:67px;
    }
    #T1{opacity:0;}
}
/*------------------------------------------------------ item header respond behavior */
@media screen and (max-height: 356px) and (max-width:1365px) and (min-width:640px) {
    #ItemHdrGroup {display:none;}
    .itemList .itemHeader {display:block; position:relative;}
    #Lightbox .ctrlHeader {top:-100%;}
}
@media screen and (min-height: 357px) and (max-width:1365px) and (min-width:640px) {
    #ItemHdrGroup {display:block;}
    .itemList .itemHeader {display:none;}
    #Lightbox .ctrlHeader {top:-200%;}
}

/*------------------------------------------------------ desktop */
@media screen and (max-height: 864px) and (min-width:1366px) {#Cover, .page, #ItemBg, #Lightbox .ctrlHeader, #ItemHdrGroup, .itemBox, #Swipe {margin-top:88px;}}
@media screen and (min-height: 865px) and (max-height:992px)and (min-width:1366px) {#Cover, .page, #ItemBg, #Lightbox .ctrlHeader, #ItemHdrGroup,.itemBox, #Swipe {margin-top:160px;}}
@media screen and (min-height: 993px) and (max-height: 1152px) and (min-width:1366px) {#Cover, .page, #ItemBg, #Lightbox .ctrlHeader, #ItemHdrGroup, .itemBox, #Swipe {margin-top:240px;}}
@media screen and (min-height: 1153px) and (min-width:1366px) {#Cover, .page, #ItemBg, #Lightbox .ctrlHeader, #ItemHdrGroup,.itemBox, #Swipe {margin-top:320px;}}
@media screen and (min-width: 1366px){
	body{
		overflow-y:hidden;
		min-height:722px;
	}
	#CoverBox{
		position:relative;
		z-index:1;
	}
	.intro{ padding-bottom:31px;}
	#Nav{ padding:34px 0 21px 0;}
	#Cover .titleTxt{ margin-bottom:32px;}
	#Contact{ margin-top:36px;}
	#Cover{
		left:64px;
        border-right:352px solid #e5e5e5;
	}
	#Swipe{
		position:absolute;
		width:316px;
		height:544px;
		background-image:url(image/swipe_h_1.png);
		background-repeat:no-repeat;
        border-right:400px solid #e5e5e5;
        z-index:20;
		margin-left:288px;
        opacity:0.9;
	}
    .page {
        position:absolute;
		margin-left:384px;
        z-index:100;
    }
    .pageContent {
        height:100%;*/
        position:absolute;
        height:544px;
        white-space:nowrap;
    }
    #C_Project {top:0;}
	.card{
        position:relative;
		display:inline-block;
		width:272px;
		height:544px;
		/*background-color:#fff;*/
		border-right:16px solid #e5e5e5;
		font-size:13px;
        white-space:normal;
	}
    .cardImg {
        position:absolute;
        width:272px;
        height:272px;
        background-color:#ccc;
    }
    .cardTxt {
    position:absolute; 
    margin:293px 20px 0 15px;   
    height:256px;
    }
    .cardTxt .titleTxt {
        font-size:20px;
        line-height:24px;
        width:180px;
        overflow:visible;
    }
    .cardDescription {
        margin:16px 0;
        font-size:13px;
        line-height: 17px;
        color:#999;
        position:absolute;
        /*top:157px;*/
		bottom:9px;
    }
    #C_Resume {top:100%;}
    #ResumeContent {
        font-size:0;
        white-space:nowrap; 
        background-color:#fff;    
        margin-right:32px;
    }
	.col05{
		 width:248px;	
	}
    .col1 {
        width:496px;
    }
    .col2 {
        width:992px;
    }
    .section {
        display:inline-block;
        margin:32px 0 32px 32px;
        height:480px;
        white-space:normal;
        vertical-align:top;
        min-width:160px;
    }
    .sectionContent {
        position:relative;
        height:440px;
    }
    .sectionContent.flow {
        writing-mode:tb-lr;
	    -webkit-writing-mode:vertical-lr;
        font-size:0;
        overflow:visible;
    }
    .sectionBlock {
        width:432px;
        font-size:16px;
        margin:0 64px 40px 0;
        writing-mode:lr-tb;
	    -webkit-writing-mode:horizontal-tb;
        display:inline-block;
    }
    .column {
        float:left;
        width:496px;
    }
    #Lightbox {
		top:100%;
        left:0;
        right:0;
    }
    .ctrlHeader{
		display:none;
        position:absolute;
        background-color:rgba(229, 229, 229, 0.95);
        width:100%;
		top:0;
    }
     #Lightbox .ctrlHeader {
         position:absolute;
         display:block;
         background-color:transparent;
         width:288px;
         height:536px;
         margin-left:16px;
         padding-top:8px;
         z-index:3;
     }
	.Btn_arrow:before{
		width:16px;
		height:8px;
		margin:16px;
	}
	#Arrow_pre{
		bottom:8px;
	}
	#Arrow_pre:before{background-position:-35px 0;}
	#Arrow_next{
		left:40px;
		bottom:8px;
	}
	#Arrow_next:before{background-position:-35px -8px;}
    #ItemBg {
        position:relative;
        width:100%;
        height:544px;
    }
    #ItemHdrGroup{
        position:absolute;
        width:288px;
        height:544px;
        padding: 0 16px;
        overflow:hidden;
        top:0;
        background-color:rgba(255, 255, 255, 0.95);
        z-index:2;
    }
    .itemList {
        position:absolute;
        top:0;
        bottom:0;
        overflow-x:scroll;
        overflow-y:hidden;
        -webkit-overflow-scrolling: touch;
        width:100%;
    }
    .itemBox {
        position:relative;
        width:100%;
        height:544px;
    }
    .item{
        position:absolute;
        width:100%;
        height:100%;
        font-size:0;
    }
     .itemList .itemHeader {display:none;}
    .itemNow {z-index:1;}
    .itemPre .item{top:-120%;}
    .itemNow .item{top:0;}
    .itemNext .item{top:120%;}
    .hdrPre{top:-120%;}
    .hdrNow {top:0;}
    .hdrNext {top:120%;}
    .itemHeader {
        position:absolute;
        width:288px;
        margin:104px 0 0 0;
    }
    #Lightbox .titleTxt {margin:0 16px 30px 16px;}
    .imgList {
        position:absolute;
        left:0;
        right:0;
        height:544px;
        margin-left:320px;
        white-space:nowrap;
    }
    .itemImg {
        display:inline-block;
        width:816px;
        height:544px;
    }

    #profileImg {
        width:416px;
        height:544px;
        background-image:url("image/profileImg.jpg");
        background-repeat:no-repeat;
        background-size: cover;
        background-clip:content-box;
        background-position:-120px 0;
        display:inline-block;
        vertical-align:top;
        margin-right:16px;
    }
    #C_FF .sectionBlock {margin-top:-2px;}
    #ResumePDF{margin-top:35px;}
    #GridBtn {
        top: 16px;
        right: 16px;
    }
	body.showResume #C_Resume{ top:0;}
    body.showResume #C_Project{ top:-100%;}
    body.showOverlay {overflow:hidden;}
    body.showLightbox #Lightbox {top:0;}
    .clipped {overflow:hidden;}
}
/*------------------------------------------------------ tablet landscape */
@media screen and (min-width: 960px) and (max-width:1365px){
	body{
		overflow-x:hidden;
		overflow-y:scroll;
	}
	#CoverBox{
		position:relative;
		width:832px;
		margin-right:auto;
		margin-left:auto;
		z-index:1;
	}
	#Cover{margin-top:48px;}
	.intro{ padding-bottom:31px;}
	#Nav{ padding:34px 0 21px 0;}
	#Cover .titleTxt{ margin-bottom:32px;}
	#Contact{ margin-top:35px;}
	#Swipe{
		display:none;
	}
    .page {
        position:absolute;
        width:100%;
        top:48px;
    }
    .pageContent {
        position:relative;
        width:544px;
        padding-left:288px;
        margin:0 auto 0 auto;
        height:100%;
    }
    #C_Project {right:0;}
	.card{
        position:relative;
		display:block;
		width:544px;
		height:272px;
		/*background-color:#fff;*/
		border-bottom:16px solid #e5e5e5;		
	}
    .cardImg {
        position:absolute;
        width:272px;
        height:272px;
        background-color:#ccc;
        white-space:normal;
    }
    .cardTxt {
    position:absolute; 
    margin:53px 16px 0 304px;   
    height:256px;
    }
    .cardTxt .titleTxt {
        font-size:20px;
        line-height:24px;
        width:200px;
        overflow:visible;
    }
    .cardDescription {
        margin:13px 0;
        font-size:13px;
        line-height: 17px;
        width:180px;
        color:#999;
    }
    #C_Resume {
        right:-100%;
    }
     #ResumeContent {
        background-color:#fff;
        padding:32px;
        margin-bottom:16px;
    }
    .section {
        margin:0 0 80px 0;
    }
     .section:last-child {
        margin-bottom:-16px;
    }
    .sectionBlock {
        margin:0 0 40px 0;
    }
    .sectionList li {
        margin-left:16px;
    }
    #Lightbox {
		top:100%;
        left:0;
        right:0;
    }
    .ctrlHeader{
		display:none;
        position:absolute;
        background-color:rgba(229, 229, 229, 0.95);
        width:100%;
		top:0;
    }
     #Lightbox .ctrlHeader {
         position:relative;
         display:block;
         background-color:transparent;
         width:272px;
         border-right:560px solid rgba(255, 255, 255, 0);
         margin:0 auto;
         padding: 0 0 0 16px;
         z-index:2;
     }
	.Btn_arrow:before{
		width:8px;
		height:16px;
		margin:16px;
	}
	#Arrow_pre{
		right:40px;
		top:0;
	}
	#Arrow_pre:before{background-position:-17px 0;}
	#Arrow_next{
		right:0;
		top:0;
	}
	#Arrow_next:before{background-position:-26px 0;}
    #ItemBg {
        position:relative;
        width:832px;
        height:100%;
        margin:0 auto;
    }
    #ItemHdrGroup{
        top:-100%;
        position:relative;
        width:832px;
        height:100%;
        margin:0 auto;
        overflow:hidden;
    }
    .itemList {
        position:absolute;
        top:0;
        bottom:0;
        overflow-x:hidden;
        overflow-y:scroll;
        -webkit-overflow-scrolling: touch;
        width:100%;
    }
    .itemBox {
        position:relative;
        width:832px;
        height:100%;
        margin:0 auto;
    }
    .item{
        position:absolute;
        width:100%;
        height:100%;
    }
    .itemNow {z-index:1;}
    .itemPre .item{right:120%;}
    .itemNow .item{right:0;}
    .itemNext .item{right:-120%;}
    .hdrPre{left:-120%;}
    .hdrNow {left:0;}
    .hdrNext {left:120%;}
    .itemHeader {
        position:absolute;
        width:272px;
        margin:88px 0 0 0;
        padding: 0 8px;
    }
    #Lightbox .titleTxt {margin:0 16px 30px 16px;}
    .imgList {
        position:absolute;
        top:0;
        bottom:0;
        width:544px;
        margin-left:288px;
    }
    .itemImg {
        width:544px;
        height:361px;
    }
     #profileImg {
        width:544px;
        height:336px;
        background-image:url("image/profileImg.jpg");
        background-repeat:no-repeat;
        background-size: cover;
        background-clip:content-box;
        background-position:-64px 0;
        margin:-32px -32px 40px -32px;
    }
    #C_FF .section {margin-top:-18px;}
    #ResumePDF{margin:0 0 30px 0;}
     #GridBtn {
        top: 45px;
        right: 16px;
        display:none;
    }
	body.showResume #C_Project{right:-100%;}
	body.showResume #C_Resume{right:0;}
    body.showOverlay {overflow:hidden;}
    body.showLightbox #Lightbox {top:0;}
    .clipped {overflow:hidden;}
}
/*------------------------------------------------------ tablet portrait */
@media screen and (min-width: 640px) and (max-width:959px){
     body{
		position:absolute;
		top:0;
		bottom:0;
		left:0;
		right:0;
        overflow-x:hidden;
		overflow-y:scroll;
	}
	#CoverBox{
		position:relative;
		width:544px;
		margin:0 auto;
		z-index:1;
	}
	#Cover{
		width:544px;
		margin-top:32px;
		border-bottom:320px solid #e5e5e5;
	}
     .page {
        position:absolute;
        width:100%;
        top:304px;
        z-index:100;
    }
    .pageContent {
        position:relative;
        width:544px;
        margin:0 auto 0 auto;
        height:100%;
    }
	.intro{ padding-bottom:31px;}
	#Cover .titleTxt{ margin-bottom:32px;}
    #Swipe{
		position:relative;
		width:544px;
		height:316px;
        margin:320px auto 0 auto;
		background-image:url(image/swipe_v_1.png);
		background-repeat:no-repeat;
        border-bottom:400px solid #e5e5e5;
		z-index:20;
	}
	#Nav{
		text-align:right;
		position:absolute;
		top:-24px;  
		right:0;
		padding:34px 0 21px 0;
	}
	#Contact{
		margin-top:-149px;
		text-align:right;
		position:absolute;
		right:0;
	}
    #C_Project {right:0;}
	.card{
		display:block;
		width:544px;
		height:272px;
		/*background-color:#fff;*/
		border-bottom:16px solid #e5e5e5;
        white-space:normal;			
	}
    .cardImg {
        position:absolute;
        width:272px;
        height:272px;
        background-color:#ccc;
    }
    .cardTxt {
    position:absolute; 
    margin:53px 16px 0 304px;   
    height:256px;
    }
    .cardTxt .titleTxt {
        font-size:20px;
        line-height:24px;
        width:200px;
        overflow:visible;
    }
    .cardDescription {
        margin:13px 0;
        font-size:13px;
        line-height: 17px;
        width:180px;
        color:#999;
    }
    #C_Resume {
        right:-100%;
    }
    #ResumeContent {
        background-color:#fff;
        padding:32px;
        margin-bottom:16px;
    }
    .section {
        margin:0 0 80px 0;
    }
     .section:last-child {
        margin-bottom:-16px;
    }
    .sectionBlock {
        margin:0 0 40px 0;
    }
    .sectionList li {
        margin-left:16px;
    }
    #Lightbox{
		top:100%;
        left:0;
        right:0;
    }
    .ctrlHeader{
		display:none;
        position:absolute;
        background-color:rgba(229, 229, 229, 0.95);
        width:100%;
		top:0;
    }
     #Lightbox .ctrlHeader {
         position:relative;
         display:block;
         background-color:rgba(255,255,255,0.95);
         width:528px;
         margin:0 auto;
         padding:0 8px;
         z-index:2;
     }
	.Btn_arrow:before{
		width:8px;
		height:16px;
		margin:16px;
	}
	#Arrow_pre{
		right:40px;
		top:0;
	}
	#Arrow_pre:before{background-position:-17px 0;}
	#Arrow_next{
		right:0;
		top:0;
	}
	#Arrow_next:before{background-position:-26px 0;}
    #ItemBg {
        position:relative;
        width:544px;
        height:100%;
        margin:0 auto;
    }
     #ItemHdrGroup{
        top:-100%;
        position:relative;
        width:544px;
        height:100%;
        margin:0 auto;
        overflow:hidden;
    }
    .itemList {
        position:absolute;
        top:0;
        bottom:0;
        overflow-x:hidden;
        overflow-y:scroll;
        -webkit-overflow-scrolling: touch;
        width:100%;
    }
    .itemBox {
        position:relative;
        width:544px;
        height:100%;
        margin:0 auto;
    }
    .item{
        position:absolute;
        width:100%;
        height:100%;
    }
    .itemNow {z-index:1;}
    .itemPre .item{right:120%;}
    .itemNow .item{right:0;}
    .itemNext .item{right:-120%;}
    .hdrPre{left:-120%;}
    .hdrNow {left:0;}
    .hdrNext {left:120%;}
    .itemHeader {
        position:absolute;
        width:528px;
        margin:72px 0 0 0;
        padding: 0 8px;
    }
    #Lightbox .titleTxt {margin:0 16px 30px 16px;}
    .imgList {
        position:absolute;
        top:296px;
        bottom:0;
        width:544px;
    }
    .itemImg {
        width:544px;
        height:361px;
    }
     #profileImg {
        width:544px;
        height:336px;
        background-image:url("image/profileImg.jpg");
        background-repeat:no-repeat;
        background-size: cover;
        background-clip:content-box;
        background-position:-64px 0;
        margin:-32px -32px 40px -32px;
    }
    #C_FF .sectionBlock {margin-top:-18px;}
    #ResumePDF{margin:0 0 30px 0;}
    #GridBtn {
        top: 36px;
        right: 16px;
        display:none;
    }
    body.showResume #C_Project{right:100%;}
	body.showResume #C_Resume{right:0;}
    body.showOverlay {overflow:hidden;}
    body.showLightbox #Lightbox {top:0;}
    .clipped {overflow:hidden;}
}
/*------------------------------------------------------ phone */
@media screen and (max-width: 639px){
    body{
		position:absolute;
		top:0;
		bottom:0;
		left:0;
		right:0;
        overflow:hidden;
	}
	#CoverBox{
		position:absolute;
        width:100%;
		height:100%;
		overflow-x:hidden;
		-webkit-overflow-scrolling: touch;
		z-index:1;
	}
	body #Cover{
		position:absolute;
		margin:32px 0 0 16px;
		padding-bottom:32px;
	}
    .page {
        position: absolute;
        width:100%;
        height:100%;
        z-index:100;
        overflow:hidden;
        background-color:#e5e5e5;
    }
    .pageContent {
        position:relative;
        width:100%;
        height:100%;
        margin:0 auto;
    }

	.intro{	padding-bottom:23px;}
	#Nav{
		padding:18px 0 5px 0;
		border:none;
	}
	#Cover .titleTxt{ margin-bottom:24px;}
    body .linkGroup {
        overflow:visible;
        margin-top:40px;
        padding:8px 0;
    }
	#Contact{margin:19px 0 0 0;}
	#ProjectList, #ResumeContent{
		position:absolute;
		width:100%;
		top:0;
		bottom:0;
		padding-top:48px;
		overflow-x:hidden;
		overflow-y:scroll;
		-webkit-overflow-scrolling: touch;
	}
    #C_Project {right:-100%; display:none;}
    #C_Resume {right:100%;}
	.card{
        position:relative;
		display:block;
		width:288px;
		height:144px;
        margin:0 auto;
		/*background-color:#fff;*/
		border-bottom:8px solid #e5e5e5;
        white-space:normal;			
	}
    .card:last-child{border-bottom:16px solid #e5e5e5;}
    .cardImg {
        position:absolute;
        width:144px;
        height:144px;
        background-color:#ccc;
    }
    .cardTxt {
    position:absolute; 
    margin:30px 16px 0 160px;   
    }
    .cardTxt .titleTxt {
        font-size:16px;
        line-height:24px;
    }
     .cardDescription {
        display:none;
    }

    #Resume{
        width:100%;
		background-color:#e5e5e5;
	}
    .section {
        margin:0 16px;
        padding:32px 24px;
        background-color:#fff;
    }
    .section:last-child {
        margin-bottom:16px;
        padding-bottom:32px;
    }
    .sectionBlock {
        margin:0 0 48px 0;
    }
    .sectionList li {
        margin-left:16px;
    }
    #Lightbox {
        width:100%;
        right:-100%;
    }
    .ctrlHeader{
        position:absolute;
        background-color:rgba(229, 229, 229, 0.95);
        width:100%;
		top:0;
    }
     #Lightbox .ctrlHeader {
         position:absolute;
         display:block;
         background-color:rgba(255,255,255,0.95);
         width:100%;
         z-index:2;
     }
	.Btn_arrow:before{
		width:8px;
		height:16px;
		margin:16px;
	}
	#Arrow_pre{
		right:40px;
		top:0;
	}
	#Arrow_pre:before{background-position:-17px 0;}
	#Arrow_next{
		right:0;
		top:0;
	}
	#Arrow_next:before{background-position:-26px 0;}
    #ItemBg {
        position:relative;
        width:100%;
        height:100%;
    }
     #ItemHdrGroup{
        display:none;
    }
    .itemList {
        position:absolute;
        top:0;
        bottom:0;
        overflow-x:hidden;
        overflow-y:scroll;
        -webkit-overflow-scrolling: touch;
        width:100%;
        height:100%;
    }
    .itemBox {
        position:relative;
        width:100%;
        height:100%;
    }
    .item{
        position:absolute;
        width:100%;
        height:100%;
    }
    .itemNow {z-index:1;}
    .itemPre .item{right:120%;}
    .itemNow .item{right:0;}
    .itemNext .item{right:-120%;}
    .hdrPre{left:-120%;}
    .hdrNow {left:0;}
    .hdrNext {left:120%;}
    .itemHeader {
        position:relative;
        width:100%;
        margin:80px 0 0 0;
    }
    #Lightbox .titleTxt {
        position:relative;
        width:288px;
        margin:0 auto 30px auto;
    }
    #Lightbox .itemDescription {
        position:relative;
        width:288px;
        margin:0 auto;
    }
    .imgList {
        position:relative;
        top:42px;
        bottom:0;
        width:100%;
        margin:0 0 0 0;
    }
    .itemImg {
        position:relative;
        width:288px;
        height:191px;
        margin:0 auto;
    }
     #profileImg {
        height:248px;
        background-image:url("image/profileImg.jpg");
        background-repeat:no-repeat;
        background-size: cover;
        background-clip:content-box;
        margin: 0 16px;
    }
     #C_FF .sectionBlock {margin-top:-18px;}
     #ResumePDF{margin:0 0 30px 0;}
     #GridBtn {
        display:none;
    }
	.expand{height:100%;}
	body.showProject #CoverBox, body.showResume #CoverBox{position:fixed;}
	body.showProject #C_Project{right:0;}
	body.showResume #C_Resume{right:0;}
    body.showOverlay {overflow:hidden;}
    body.showLightbox #Lightbox {right:0;}
}

body{
	margin:0;
    padding:0;
	background-color:#e5e5e5;
    font-family: Georgia, "Times New Roman", Times, serif;
	color:#333;
}
a{
	text-decoration:none;
}
a.major, a.major:visited, a.major:active{
	color:#333;
}
a.major:hover{
	color:#5BA7C4;
}
a.minor, a.minor:visited, a.minor:active{
	color:#666;
}
a.minor:hover{
	color:#333;
}
a.tel{
	color:#666;
}
#ResumeContent #ResumePDF a{color:#666;}
#ResumeContent #ResumePDF a:hover{color:#5BA7C4;}
.intro{
	width:80px;
	border-bottom:1px solid #ccc;
	overflow:visible;
}

#FFContent {
    background-color:#fff;
    padding:32px;
}

#ResumeContent a{
    color:#5BA7C4;
    font-size:16px;
    word-wrap:break-word;
}
#Cover{
	position:fixed;
}
.titleTxt{
	font-size:24px;
	line-height:32px;
}
#Cover .titleTxt{
	width:256px;
}
#Cover .titleTxt:last-child{
	margin-bottom:0;
}

#Nav{
	width:80px;
	border-bottom:1px solid #ccc;
	overflow:visible;
}

#Nav a{
	font-size:16px;
	line-height:16px;
	text-transform:uppercase;
	display:block;
	margin-bottom:24px;	
}

.linkPanel {
    position:relative;
    top:-40px;
    transition:all 0.25s ease-out;
	-webkit-transition:all 0.25s ease-out;
	-ms-transition:all 0.25s ease-out;
	-o-transition:all 0.25s ease-out;
	-moz-transition:all 0.25s ease-out;
}
.linkGroup {
    height:32px;
    overflow:hidden;
}

body.showResume #Nav .linkPanel {top:0;}
.animate{
    transition-property:left, right,top, opacity, background-color;
    -webkit-transition-property:left, right,top, opacity, background-color;
    -ms-transition-property:left, right,top, opacity, background-color;
    -o-transition-property:left, right,top, opacity, background-color;
    -moz-transition-property:left, right,top, opacity, background-color;
    /**/
    transition-duration:0.35s;
    -webkit-transition-duration:0.35s;
    -ms-transition-duration:0.35s;
    -o-transition-duration:0.35s;
    -moz-transition-duration:0.35s;
    /**/
    transition-timing-function:cubic-bezier(0.08,0,0.15,1);
    -webkit-transition-timing-function:cubic-bezier(0.08,0,0.15,1);
    -ms-transition-timing-function:cubic-bezier(0.08,0,0.15,1);
    -o-transition-timing-function:cubic-bezier(0.08,0,0.15,1);
    -moz-transition-timing-function:cubic-bezier(0.08,0,0.15,1);
}
.animate_fade {
    transition:opacity 0.25s ease-out;
    -webkit-transition:opacity 0.25s ease-out;
    -ms-transition:opacity 0.25s ease-out;
    -o-transition:opacity 0.25s ease-out;
    -moz-transition:opacity 0.25s ease-out;
}

.cHover {
    transition: background 0.25s ease-in-out;
    -webkit-transition: background 0.35s ease-in-out;
    -ms-transition: background 0.35s ease-in-out;
    -o-transition: background 0.35s ease-in-out;
    -moz-transition: background 0.35s ease-in-out;
}

#Contact{
	font-size:13px;
	color:#666;
}

#Contact a{
	display:block;
	margin-top:16px;
}

.card{
    cursor:pointer;
    background-color:#fff;
   }
/*.card:hover {background-color:#f5f5f5;}*/
.cardImg img {
    width:100%;
    height:100%;
}


#Overlay{
	position:fixed;
	top:0;
	left:0;
	bottom:0;
	right:0;
	background-color:#e5e5e5;
	opacity:0;
	z-index:200;
	display:none;
}

body.showOverlay #Overlay{
    opacity:0.85;

}
#Lightbox{
	position:fixed;
	width:100%;
    height:100%;
	z-index:300;
	display:none;
	overflow:hidden;
}

#ItemBg{background-color:#fff;}
.imgList {background-color:#fff;}



.Btn_close{
	font-size:0;
	cursor:pointer;
	width:16px;
	height:16px;
	padding:16px;
	}
.Btn_close:before {
	content:"";
	display:block;
    width:16px;
    height:16px;
    background-repeat:no-repeat;
}
.Btn_arrow{
	position:absolute;
	font-size:0;
	cursor:pointer;
}
.Btn_arrow:before{
	content:"";
	display:block;
	background-repeat:no-repeat;
}

.Btn_close:hover, .Btn_arrow:hover{background-color:rgba(0, 0, 0, 0.02); }
.Btn_arrow.disabled:hover{background-color:transparent; }

#ItemListGroup {
    position:relative;
    height:100%;
    margin:0 auto;
    background-color:#fff;
}

.itemDescription {
    font-size:16px;
    line-height:24px;
    margin: 0 16px;
    color:#777;
}

.itemImg {
    background-color:#ccc;
}
.itemImg img {
    width:100%;
    height:100%;
    }

.section {color:#333;}
.sectionTitle {
    text-transform:uppercase;
    margin:-2px 0 24px 0;
}
.sectionTitle, .sectionSubtitle{
    font-size:16px;
    line-height:24px;
}
.sectionTxt {
    font-size:16px;
    line-height:24px;
    color:#777;
    margin-top: 8px;
}

.sectionList {
    margin:0;
    padding:0;
    color:#777;
    list-style:none;
    list-style-type:none;
    font-size:16px;
    writing-mode:lr-tb;
	-webkit-writing-mode:horizontal-tb;
}
.sectionList li {
    line-height:24px;
    margin-bottom:8px;
}

.sectionList li:before {
   content:"-";
   display:block;
   position:absolute;
   margin:0 0 0 -16px;
}
.show{display:block}
.hide {opacity:0;}
.disabled{
	opacity:0.25;
	cursor:default;
}


#T1 {
    position:absolute;
    width:100px;
    height:0;
    overflow-y:scroll;
}
body.dark {
    background-color:#b1b1b1;
    color:#fff;
}
#GridDiv {
   position:fixed;
   top:0;
   right:0;
   bottom:0;
   left:0;
   background-image:url("image/grid.png"); 
   	background-attachment:fixed;
    display:none;
    z-index:3000;
}
#GridTxt {
   font-size:13px;
   color:#ff0000;
   position:absolute;
   top:19px;
   right:48px;
}
#GridBtn {
    position:fixed;
    width:16px;
    height:16px;
    background-repeat:no-repeat;
    background-position:-51px 0;
    z-index:3100;
    cursor:pointer;
}
ui-loading .ui-loader {display:none;}
div.ui-loader { display: none !important; }
.fullHeight{height:100%;}