/* CSS Document*/
/*Copyright 2016, Jo Lam(Xu Lin)*/
/* www.jolamux.com Home CSS */

/* Affix */
.affix{
	top:0;
	width:100%;
	z-index:9998 !important;
}

/* General Sections Settings */
#sectionWelcome{
	height:860px;
	background:url(BG-texture-grey-9x9.png) repeat;
}
#sectionStory{
	height:750px;
	position:relative;
}

#sectionWork{
	height:710px;
	position:relative;
	background:url(repeatbg.png) fixed;
}

#sectionContact{
	position:relative;
	height:450px;
	background: url(BG-texture-grey-9x9.png)repeat;
	
}

/* Home Welcome Page Section */
.welcomeMessage{
	color:#5D5D5D;
	font-weight: 200;
	padding: 1px 20px 10px 20px;
}
.welcomeContent{
	position:relative;
	top:100px;
}
.welcomeIllustration{
	height:508px;
	padding:0;
}


/* Story Carousel Section */
.carousel-inner img{
	margin:auto;
}
.carousel-indicators{
	position:relative;
	top:700px;
}
.carousel-indicators-higer{
	position:relative;
	top:800px;
}
.carousel-indicators li, .carousel-indicators li.active{
	border:2px solid #25abdd;
	width:13px;
	height:13px;
	margin-right:5px;
}
.carousel-indicators li.active, .carousel-indicators li.active:hover{
	position:relative;
	top:-1px;
	background-color:#e44970;
	border:2px solid #e44970;
}
.carousel-indicators li:hover{
	background-color:#a5ddff;
}
.left.carousel-control, .right.carousel-control{
	background:none;
	top:50%;
}
.carousel-control, .carousel-control:visited, .carousel-control:focus, .carousel-control:active{
	color:#e9e9e9;
	text-shadow:none;
	opacity:1;
}
.carousel-control:hover{
	color:#25abdd;
}
.carousel-control .glyphicons-chevron-left, .carousel-control .glyphicons-chevron-right{
	transform: scale(0.8, 0.8);
	-webkit-transform: scale (0.8, 0.8);
	-ms-transform: scale(0.8, 0.8);
}

/* Works Welcome Section */
.miniWorkSection{
	height:300px;
	text-align: center;
	box-sizing:border-box;
	padding:0px;
}

#homeWork-UXUI-FG, #homeWork-AR3D-FG, #homeWork-VC-FG, 
#homeWork-animation-FG, #homeWork-designThinking-FG, 
#homeWork-3Dprinting-FG{
	padding-top:80px;
	display:block;
	position:relative;
	z-index:1;
	top:0;
	left:0;
	right:0;
	bottom:0;
}

#homeWork-UXUI-FG::after, #homeWork-AR3D-FG::after, #homeWork-VC-FG::after, 
#homeWork-animation-FG::after, #homeWork-designThinking-FG::after, 
#homeWork-3Dprinting-FG::after{
	width:100%;
	height:300px;
	z-index: -1;
	content:"";
	position: absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	opacity:0;
	transition: opacity 0.2s;
	-webkit-transition:opacity 0.2s;
}

#homeWork-UXUI-FG::after{
	background: url(img-work-UXUI.jpg) no-repeat;
}
#homeWork-AR3D-FG::after{
	background: url(img-work-AR3D.jpg) no-repeat;
}
#homeWork-VC-FG::after{
	background: url(img-work-VC.jpg) no-repeat;
}
#homeWork-animation-FG::after{
	background: url(img-work-animation.jpg) no-repeat;
}
#homeWork-designThinking-FG::after{
	background: url(img-work-designThinking.jpg) no-repeat;
}
#homeWork-3Dprinting-FG::after{
	background: url(img-work-3Dprinting.jpg) no-repeat;
}

.icn-work-circle{
	border:2px solid rgba(0,0,0,0);
	border-radius:60px;
	width:110px;
	height:110px;
	padding:10px;
	margin:auto;
	transition: border 0.5s, background-color 0.1s;
	-webkit-transition: border 0.5s, background-color 0.1s;
}

.miniWorkSection:hover .icn-work-circle{
	background-color:rgba(0,0,0,0.5);
}

#homeWork-UXUI:hover .icn-work-circle{
	border:2px solid #25abdd;
}
#homeWork-AR3D:hover .icn-work-circle{
	border:2px solid #ffb400;
}
#homeWork-VC:hover .icn-work-circle{
	border:2px solid #ff3690;
}
#homeWork-animation:hover .icn-work-circle{
	border:2px solid #61c442;
}
#homeWork-designThinking:hover .icn-work-circle{
	border:2px solid #f56a27;
}
#homeWork-3Dprinting:hover .icn-work-circle{
	border:2px solid #0ec1af;
}

.miniWorkSection:hover #homeWork-UXUI-FG::after, .miniWorkSection:hover #homeWork-AR3D-FG::after,
 .miniWorkSection:hover #homeWork-VC-FG::after, .miniWorkSection:hover #homeWork-animation-FG::after,
 .miniWorkSection:hover #homeWork-designThinking-FG::after, .miniWorkSection:hover  #homeWork-3Dprinting-FG::after{
	opacity: 1;
}

.miniWorkSection:hover h5{
	visibility: hidden;
}

.miniWorkSection:hover .popOver-homeWork-jo{	
	bottom:0px;
	opacity:1;
}

/* Travel Section */
.TravelMap{
	margin-bottom:20px;
	height:720px;
	width:100%;
	background-color:#ededed !important;
	box-shadow: 0 1px 3px rgba(167, 167, 167, 0.6);
}
.infobox{
	margin:0px;
	padding:0px;
	position: absolute;
	background-color:#fff;
	border-radius:3px;
	box-shadow: 0 1px 8px rgba(102, 102, 102, 0.6);
	width:228px;
	height:175px;
}
.infobox img{
	position: absolute;
	top:0;
}
.infobox p{
	width: 100%;
	float: left;
	border-left:5px solid #0d9fff;
	padding-right:0px;
	padding-left:10px;
	margin:0px;
	position: relative;
	top:128px;
	color:#000;
	font-size:1.2em;
	font-weight: 200;
	font-family:  'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.infobox .travelCurrent{
	border-left:5px solid #f56a27;
}
.infobox .travelCurrent span{
	color:#f56a27;
}
.infobox .travelHome{
	border-left:5px solid #05b434;
}
.infobox .travelHome span{
	color:#05b434;
}
.infobox span{
	font-size:0.9em;
	color:#0d9fff;
}
.infobox i{
	padding:3px 5px 0 0;
	float: right;
	font-size:0.8em;
	color:#a7a7a7;
}
.infobox .close {
	z-index: 1;
	font-weight: 200;
	text-shadow:none;
	color:#fff;
	background-color:#000;
	cursor: pointer;
	float: right;
	font-size: 17px;
	width: 25px;
	height: 25px;
	line-height: 22px;
	position: relative;
	right: 0;
	top: 0;
	text-align: center;
/*	opacity: 1;*/
}
.infobox .infoBoxTriangle{
	float: left;
	position: relative;
	top:131px;
	left:104px;
	text-align: center;
	width:0;
	height:0;
	border-left:8px solid transparent;
	border-right:8px solid transparent;
	border-top:10px solid #fff;
}

/* Contact Section */
.contactIllustration{
	width: 790px;
	height:326px;
	border:1px dashed #a7a7a7;
	background: url(img-contact-illustration.png) no-repeat;
	background-color:#25acde;
}
.contact-bgTexture{
	background:url("../img/universal/BG-texture-black-1x1.png") repeat;
	width:100%;
	height:100%;
}
.download-resume{
	color:#25abdd;
	line-height: 38px;
	padding-left: 20px;
}
.download-resume:hover{
	color:#e44970;
}