/* CSS Document*/
/*Copyright 2016, Jo Lam(Xu Lin)*/
/* www.jolamux.com Responsive Design CSS for Home Page (Index)*/

/* Laptop Display 100% width */

/*.container-fluid{
	-webkit-transition: width .3s linear;
	transition: width .3s linear;
}*/
.responsive-home-dropdown{
	display:none;
}
.navbar-header{
	display:flex;
	display:-webkit-flex;
}
/* Header Works Dropdown Menu */
.worksHeaderDropdownMenu-Home{
	box-sizing:border-box;
	width:411px;
	position:absolute;
	top:62px;
	left:-15px;
	border-radius:0px;
	background-color:#fff;
	border:1px solid #cfcfcf;
	border-top:3px solid #25abdd;
	box-shadow: 0 1px 3px rgba(167, 167, 167, 0.5);
	background-color:#fff;
}
.worksHeaderDropdownMenu-Home li a{
	margin:0;
	height:36px;
	font-weight: 200;
	color:#666;
	padding:8px 20px;
	border-left:3px solid #fff;
}
.worksHeaderDropdownMenu-Home li a:hover{
	border-radius:0px;
	background-color:#fff;
	box-shadow: 0 0 3px rgba(167, 167, 167, 0.5);
}
.worksHeaderDropdownMenu-Home .worksDropdown-UXUI a:hover{
	color:#25abdd;
	border-left:3px solid #25abdd;
}
.worksHeaderDropdownMenu-Home .worksDropdown-AR a:hover{
	color:#ffb400;
	border-left:3px solid #ffb400;
}
.worksHeaderDropdownMenu-Home .worksDropdown-VC a:hover{
	color:#ff3690;
	border-left:3px solid #ff3690;
}
.worksHeaderDropdownMenu-Home .worksDropdown-Animation a:hover{
	color:#61c442;
	border-left:3px solid #61c442;
}
.worksHeaderDropdownMenu-Home .worksDropdown-DesignThinking a:hover{
	color:#f56a27;
	border-left:3px solid #f56a27;
}
.worksHeaderDropdownMenu-Home .worksDropdown-3Dprinting a:hover{
	color:#0ec1af;
	border-left:3px solid #0ec1af;
}


/*@media only screen and (min-width:1024px) and (max-width:1224px)*/
@media only screen and (min-width:1024px) and (max-width:1223px){
	/* Welcome Section */
	.welcomeIllustration img{
		padding-top:40px;
		width:90%;
	}

	/* Works Section */
	#sectionStory{
		margin:auto;
	}
	#sectionWork{
		margin:auto;
	}
	/* Works Section */
	#sectionTravel{
		height:850px;
		margin:auto;
	}
	#sectionContact{
		height:480px;
		margin:auto;
	}

	.container-fluid{
		width: 100%;
	}

	/* Popup Section */
	#sectionWork .popoverWhite{
		height:65px;
	}
	#sectionTravel .popoverWhite{
		height:80px;
	}
	#sectionContact .popoverWhite{
		height:65px;
	}
	.TravelMap{
		margin-top:20px;
	}
	#sectionContact .row:nth-of-type(2){
		margin-top:20px;
	}

	/* Works Popover Description Section */
	.popOver-homeWork-jo{
		height:65px;
	}
}
/*@media only screen and (min-width:875px) and (max-width:1024px)*/
@media only screen and (min-width:875px) and (max-width:1023px){
	.versionNumber{
		display: none;
	}
	.welcomeIllustration img{
		width:90%;
		padding-top:80px;
	}

	/* Works Section */
	#sectionStory{
		margin:auto;
	}
	#sectionWork{
		margin:auto;
	}
	/* Works Section */
	#sectionTravel{
		height:850px;
		margin:auto;
	}
	#sectionContact{
		height:480px;
		margin:auto;
	}
	
	.container-fluid{
		width: 100%;
	}

	/* Popup Section */
	#sectionWork .popoverWhite{
		height:65px;
	}
	#sectionTravel .popoverWhite{
		height:80px;
	}
	#sectionContact .popoverWhite{
		height:65px;
	}
	.TravelMap{
		margin-top:20px;
	}
	#sectionContact .row:nth-of-type(2){
		margin-top:20px;
	}

	/* Works Popover Description Section */
	.popOver-homeWork-jo{
		height:75px;
	}
}
/*@media only screen and (min-width:411px) and (max-width:875px)*/
@media only screen and (min-width:412px) and (max-width:874px){
	
	/* Home Welcome Section */
	[class*="col-"]{
		width:100%;
	}
	.container-fluid{
		width:100%;
	}

	#sectionWelcome{
		height:1200px;
	}
	.home-logo-section{
		text-align: center;
	}
	.home-logo-section img{
		width:379px;
		height:221px;
	}
	.versionNumber{
		display:none;
	}
	.welcomeContent{
		top:40px;
	}
	.welcomeIllustration{
		padding:0;
		margin-top:40px;
		text-align: center;
	}
	.welcomeIllustration img{
		height:75%;
	}

	/* Navigation Section */
	.navbar .col-sm-8{
		display:none;
	}
	.responsive-home-dropdown{
		display:block;
	}
	.dropdown-burger, .dropdown-burger:active,
	.dropdown-burger:visited{
		position:relative;
		left:20px;
		display:inline-block;
		margin-top:15px;
		cursor:pointer;
		width:30px;
		height:30px;
		background:url("../img/works/icn-miniNav-Menu-30x30.png") no-repeat;
	}
	.dropdown-burger:hover{
		background:url("../img/works/icn-miniNav-Menu-Hover-30x30.png") no-repeat;
	}
	.navbar-header{
		padding-left:30px;
	}

	/* Home Story Section */
	#sectionStory{
		height:600px;
	}
	.left.carousel-control{
		position:absolute;
		left:-50px;
	}
	.right.carousel-control{
		position: absolute;
		right:-50px;
	}
	.glyphicons-chevron-left, .glyphicons-chevron-right{
		font-size:2em;
		opacity:.5;
	}
	.carousel-indicators{
		top:560px;
	}

	/* Home Works Section */
	#sectionWork{
		top:50px;
		height:1600px;
	}
	.whiteBgPopOver{
		padding:0px;
		height:100%;
		flex-direction:column;
		-webkit-flex-direction:column;
	}
	.popOver-universal-jo{
		position: relative;
		top:1px;
	}
	#sectionWork .popoverWhite{
		height:100px;
	}
	.responsive-home-6works{
		position:relative;
		top:110px;
	}
	.miniWorkSection{
		height:230px;
	}
	.popOver-homeWork-jo{
		display:none;
	}
	#homeWork-UXUI-FG, #homeWork-AR3D-FG, #homeWork-VC-FG, 
	#homeWork-animation-FG, #homeWork-designThinking-FG, 
	#homeWork-3Dprinting-FG{
		padding-top:40px;
	}
	#homeWork-UXUI-FG::after, #homeWork-AR3D-FG::after, #homeWork-VC-FG::after, 
	#homeWork-animation-FG::after, #homeWork-designThinking-FG::after, 
	#homeWork-3Dprinting-FG::after{
		height:230px;
		background:none;
	}
	.miniWorkSection:hover .icn-work-circle{
	background-color:rgba(255,255,255,.5);
}

	/* Home Travels Sectioin */
	#sectionTravel{
		height:670px;
	}
	#sectionTravel .popoverWhite{
		height:100px;
	}
	.TravelMap{
		margin-top:80px;
		height:400px;
	}

	/* Home contact */
	#sectionContact{
		height:580px;
		position:relative;
		top:110px;
	}
	#sectionContact .popoverWhite{
		height:100px;
	}
	#sectionContact .col-sm-4{
		display:none;
	}
	#sectioncontact .col-sm-8{
		width:100%;
	}
	.contactIllustration{
		margin-top:80px;
	}
}

/* iPhone 6 = 375px */
/*@media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (width:375px) and (height:559px) and (orientation : portrait) and (device-aspect-ratio:375/667) and (aspect-ratio:375/559) and (device-pixel-ratio: 2) and (-webkit-min-device-pixel-ratio:2) {*/
@media only screen and (max-width:411px){
	/* If browser window is smaller than 411px, then execute the following CSS */
	
	/* Home Welcome Section */
	[class*="col-"]{
		width:100%;
	}
	.container-fluid{
		width:100%;
		padding:0 30px;
	}
	#sectionWelcome{
		height:1200px;
	}
	.home-logo-section{
		text-align: center;
	}
	.home-logo-section img{
		width:90%;
		height:auto;
	}

	.versionNumber{
		display:none;
	}
	.welcomeContent{
		top:40px;
	}
	.welcomeIllustration{
		padding:0;
		margin-top:40px;
	}
	.welcomeIllustration img{
		width:370px;
	}

	/* Navigation Section */
	.navbar .col-sm-8{
		display:none;
	}
	.responsive-home-dropdown{
		display:block;
	}
	.dropdown-burger, .dropdown-burger:active,
	.dropdown-burger:visited{
		position:relative;
		left:20px;
		display:inline-block;
		margin-top:15px;
		cursor:pointer;
		width:30px;
		height:30px;
		background: url('../img/works/sprite-30x30.png') no-repeat 0 -720px;
	}
	.dropdown-burger:hover{
		background: url('../img/works/sprite-30x30.png') no-repeat 0 -750px;
	}
	.navbar-header{
		padding-left:30px;
	}

	/* Home Story Section */
	#sectionStory{
		height:300px;
	}
	#sectionStory ol{
		top:250px;
	}
	.carousel-indicators{
		-webkit-transform:scale(1.3,1.3);
		transform:scale(1.3,1.3);
		margin:0;
		left:0;
		width:100%;
	}
	.left.carousel-control{
		position:absolute;
		left:-30px;
	}
	.right.carousel-control{
		position: absolute;
		right:-30px;
	}
	.glyphicons-chevron-left, .glyphicons-chevron-right{
		font-size:2em;
		opacity:.5;
	}

	/* Home Works Section */
	#sectionWork{
		height:1600px;
	}
	.whiteBgPopOver{
		padding:0px;
		height:100%;
		flex-direction:column;
		-webkit-flex-direction:column;
	}
	.popOver-universal-jo{
		position: relative;
		top:1px;
	}
	#sectionWork .popoverWhite{
		height:150px;
	}
	.responsive-home-6works{
		position:relative;
		top:110px;
	}
	.miniWorkSection{
		height:230px;
	}
	.popOver-homeWork-jo{
		display:none;
	}
	#homeWork-UXUI-FG, #homeWork-AR3D-FG, #homeWork-VC-FG, 
	#homeWork-animation-FG, #homeWork-designThinking-FG, 
	#homeWork-3Dprinting-FG{
		padding-top:40px;
	}
	#homeWork-UXUI-FG::after, #homeWork-AR3D-FG::after, #homeWork-VC-FG::after, 
	#homeWork-animation-FG::after, #homeWork-designThinking-FG::after, 
	#homeWork-3Dprinting-FG::after{
		height:230px;
	}

	/* Home Travels Sectioin */
	#sectionTravel{
		height:670px;
	}
	#sectionTravel .popoverWhite{
		height:180px;
	}
	.TravelMap{
		top:150px;
		height:400px;
	}

	/* Home contact */
	#sectionContact{
		height:500px;
		position:relative;
	}
	#sectionContact .popoverWhite{
		height:160px;
	}
	#sectionContact .col-sm-4{
		display:none;
	}
	#sectioncontact .col-sm-8{
		width:100%;
	}
	.contactIllustration{
		position:relative;
		top:130px;
		width:340px;
		height:221px;
		background:url("../img/home/img-contact-illustration-340-221.jpg") no-repeat;
	}
}