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

/* Laptop Display 100% width */
.dropdown-burger{
	display:none;
}
.worksNav{
	-webkit-transition:left .3s linear;
	transition:left .3s linear;
}
.worksMiniNav{
	-webkit-transition:right .3s linear;
	transition:right .3s linear;
}
.worksHeaderLeft div:nth-of-type(1){
	transition: margin-left .3s linear;
	-webkit-transition: margin-left .3s linear;
}
.col-sm-8{
	transition: width .3s linear;
	-webkit-transition: width .3s linear;
}
.container-works{
	transition: width .3s linear;
	-webkit-transition: width .3s linear;
}
/*.col-sm-4{
	transition: width .3s linear;
	-webkit-transition: width .3s linear;
}*/

/* 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 */
	
	/* Universal Body Section */
	[class*="col-"]{
		width:100%;
	}

	/* Header Section CSS */
	.worksHeaderBreadCrumb{
		display:none;
	}
	.worksHeaderRight{
		display:none;
	}
	.versionNumber{
		display:none;
	}
	.worksHeaderLeft{
		width:100%;
	}
	.worksHeaderLeft div:nth-of-type(1){
		margin-left:10px;
	}

	/* Left Navigation Section */
	.worksNav{
		left:-57px;
	}
	 .worksHeaderDropdown{
		display:none;
	}
	.caret{
		display:none;
	}
	.worksHeaderDropdownMenu{
		position:absolute;
		top:62px;
		left:-328px;
		width:411px;
/*		padding-left:40px;*/
	}
	.dropdown-burger, .dropdown-burger:active,
	.dropdown-burger:visited{
		position:relative;
		left:-10px;
		display:inline-block;
		margin-top:15px;
		cursor:pointer;
		width:30px;
		height:30px;
		background: url(sprite-30x30.png) no-repeat 0 -720px;
	}
	.dropdown-burger:hover{
		background: url(sprite-30x30.png) no-repeat 0 -750px;
	}

	/* Mini Navigation Section */
	.worksMiniNav{
		right:-61px;
	}

	/* Works Preview Section */
	.container-works{
		width:100%;
		text-align:center;
	}
	.works-preview-outsider{
		padding:0;
	}
	.col-sm-8{
		display:none;
	}
	h4, p{
		text-align: left;
		padding:0 50px;
	}
	.badgeIconsSection{
		padding:0 50px;
	}
		.badgeIconsSection div{
		margin-right:5px;
	}
	.btn-explore{
		width:100%;
		text-align: center;
	}
	.btn-explore span{
		font-weight: 400;
	}

	/* Works Previews Sections */
		#AR-preview-foodie, #AR-preview-MonopolyAR, 
		#AR-preview-herAR, #AR-preview-jiro,
		#UXUI-preview-library, #UXUI-preview-iconography,
		#UXUI-preview-portAuthority, #UXUI-preview-seeddiary,
		#UXUI-preview-ethnote, #UXUI-preview-edp,
		#UXUI-preview-how, #UXUI-preview-homeMade,
		#UXUI-preview-coupost, #UXUI-preview-dataVisualization,
		#UXUI-preview-dataPreparation,
		#animation-preview-taobaoLogo, #animation-preview-supershop,
		#animation-preview-mascot, #animation-preview-faceOff,
		#animation-preview-hellyJoTravel, #animation-preview-taoFigure,
		#animation-preview-hellyJoHome, #animation-preview-myTaobao{
		padding:80px 0;
	}

	/* Individual Projects Preview Section Customized CSS*/
	#UXUI-preview-dataPreparation{
		height:610px;
	}
	#UXUI-preview-edp, #UXUI-preview-how, #UXUI-preview-coupost{
		height:480px;
	}

}
@media only screen and (min-width:412px) and (max-width:790px){
	.worksHeaderBreadCrumb{
		display:none;
	}
	.worksHeaderRight{
		display:none;
	}
	.versionNumber{
		display:none;
	}
	.col-sm-4{
		width:100%;
	}
	.col-sm-8{
		width:0%;
		display:none;
	}
	.container-works{
		width:100%;
		text-align:center;
	}
	.badgeIconsSection{
		width:320px;
		margin:20px auto;
	}
	.btn-explore{
		width:100%;
		text-align: center;
	}
	.box-responsive-preview-p{
		width:90%;
		text-align: center;
		margin:auto;
	}
	p{
		text-align: left;
	}
	.worksHeaderDropdownMenu {
		position:absolute;
		top:60px;
		left:-80px;
	}
}

/*@media only screen and (min-width:768px) and (max-width:790px)*/
@media only screen and (min-width:791px) and (max-width:960px){
	.col-sm-8{
		padding-top:40px;
		width:38%;
	}
	.col-sm-8 img{
		width:80%;
	}
	.col-sm-8 ol{
		top:240px;
	}
	.col-sm-4{
		width:25%;
	}
	.col-sm-4 img{
		width:95%;
	}
	.badgeIconsSection div{
		margin-right:5px;
	}
	#UXUI-preview-dataPreparation, #UXUI-preview-seeddiary{
		height:580px;
	}

}

/*@media only screen and (min-width:961px) and (max-width:1211px)*/
@media only screen and (min-width:961px) and (max-width:1211px){
	.col-sm-8{
		padding-top:40px;
		width:45%;
	}
	.col-sm-8 img{
		width:80%;
	}
	.col-sm-8 ol{
		top:280px;
	}
}