/* ============================== */
/* ! Layout for desktop version   */
/* ============================== */

/* SETTING UP */

/* parallax bg test */
.bg_temp {
  width: 800px;
  height: 500px;
  margin: auto;
}

.bg {
  width: 100%;
  height: 100%;
  position: relative;
  background-size: contain;
}

video {
    height: auto;
    max-width: 100%;

}

.invisible_tumbnail {

}

	* { 
		-moz-box-sizing: border-box; 
		-webkit-box-sizing: border-box; 
		box-sizing: border-box;
	}

	body{
		margin: 0 auto;
		padding: 0;
		background: #000 ;
		font-family:'Roboto', Helvetica, Arial, sans-serif;
		color:#666;
		transition:font-size 0.5s;
		-webkit-transition:font-size 0.5s;
		-moz-transition:font-size 0.5s;
		-ms-transition:font-size 0.5s;
		-o-transition:font-size 0.5s;
		font-weight:400;
		font-style:normal;
		overflow-y: scroll;
	}
	#sidepanel, .maincontent { 
	  	-webkit-transition: .4s all ease;
		-moz-transition: .4s all ease;
		transition: .4s all ease; 
		width: 100%; 
	}
	.maincontent {
		position: relative;
		overflow: hidden;
		width: 100%;
		padding-top:30px;
	}
	.maincontent:before {
		content: " ";
		position: absolute;
		z-index: -1;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
	}
	
	.x{clear:both;}
	span.codeit {unicode-bidi:bidi-override; direction: rtl;}

/* TEXT */

	h1, h2, h3, h4, .submitbutton, #pixels{
		font-family:'Roboto', Helvetica, Arial, sans-serif;
		text-transform:capitalize;
		letter-spacing: .1em;
	}
	
	ul.mainmenu {
    overflow: hidden;
	word-wrap:break-word;
	}

	nav ul.mainmenu li > a, nav ul.mainmenu ul.submenu li > a {
		font-family: Impact,Haettenschweiler,Franklin Gothic Bold,Charcoal,Helvetica Inserat,Bitstream Vera Sans Bold,Arial Black,sans serif; 
		letter-spacing: .05em;
		font-size: 2.1em;
		line-height:1.3em;
		color:#ffffff;	
	}


	nav ul.mainmenu ul.submenu{padding:0 0 10px 0;}
	nav ul.mainmenu ul.submenu > li a {
		font-family: Impact,Haettenschweiler,Franklin Gothic Bold,Charcoal,Helvetica Inserat,Bitstream Vera Sans Bold,Arial Black,sans serif; 
		font-size: 1.4em; 
		color:#6ec2fa;
	}
	
	h1, #pixels{
		font-size:1.1em;
	}
	
	h2{
		font-family: Impact,Haettenschweiler,Franklin Gothic Bold,Charcoal,Helvetica Inserat,Bitstream Vera Sans Bold,Arial Black,sans serif; 
		font-size:2em;
		letter-spacing: .02em;
		color:#000000;
		line-height: 1.2em;
	}

	h3{
		font-style:italic;
		font-size:0.9em;
		margin: 6% 0 10% 0;
	}
	.detail h2{margin-top: 2%;}
	.detail h3{margin: 3% 0;}
	.detail p{margin-bottom: 2%;}
	.shop figcaption h2{margin-bottom:6%;}
	
	p{
		font-family: Impact,Haettenschweiler,Franklin Gothic Bold,Charcoal,Helvetica Inserat,Bitstream Vera Sans Bold,Arial Black,sans serif;
		font-size: 1.4em;
		color: #6ec2fa;
	}
	
	p, ul{
		font-size-adjust:0.488;
		font-weight:200;
		font-style:normal;
	}
	
	ul, li{
	list-style-type: none;
	text-align: right;
	}
	
	a{
	font-family: Impact,Haettenschweiler,Franklin Gothic Bold,Charcoal,Helvetica Inserat,Bitstream Vera Sans Bold,Arial Black,sans serif;
		text-decoration: none; 
		color:#000000;
		outline:none !important;

	}
	a:visited, a:active{color:#000000;}
	/*a:hover{color:#e54c10;}*/
	
	img{border: 0;}
	
	input, textarea{
		font-family:'Helvetica Neue', Arial, Helvetica, sans-serif;
		letter-spacing: 0.06em;
		line-height: 1.4em;
		color:#444;
		font-size:0.8em;
		font-weight:200;
		font-style:normal;
	}
	
	.whitebar{
		height:1%;
		background: #fff;
		box-shadow: 0 0 8px 0 #666;
	}
	#logo{
		position:relative;
		z-index: 3000;
		margin:10px 0 20px 0;
	}	
	
  #logoanim{background-image: url(../philllchabbb_files/images/philllchabbblogo_anim_double.gif); background-position: left top; background-size: 100%;}
  #logoanim:hover{background-image: url(../philllchabbb_files/images/philllchabbblogo_anim_double.gif);background-position: left bottom; background-size: 100%;}
  
/* NAV ITEMS */
	nav{
		position:relative;
		z-index: 2500;
		width:100%;
		margin: 20px 0;
	}
	nav a{margin: 1% 0;}	
	nav a img{
		transition: opacity 0.5s;
		-webkit-transition: opacity 0.5s;
		opacity:1;
		filter:alpha(opacity=100);
		width:100%;
		display: block;
    	margin: 0 auto;
	}
	nav a:hover img{
		opacity:0.8;
		filter:alpha(opacity=80);
	}
	
	#mobile-navbar{
		display:none;
		position: fixed;
		width: 100%;
		height: 50px;
		top:0;
		box-shadow: 0 8px 8px -6px #666;
		background: #fff;
		z-index: 8000;
	}
	h1.mobilenav-title, a.hamburger{
		margin-left:20px;
		line-height:50px;
		float:left;
	}
	a.hamburger{padding-top:2px;}
	
	
	#mobile-copyright{
		display:none;
		padding: 0 20px;
		text-align: center;
	}
	
	#sidepanel{display:block;}
	
	/*.container{padding:0;}*/
	
	.interior{display:inline block;}
	.toggleit{
		display:none;
		line-height:50px;
	}
	.toggleit:hover, .notify:hover{cursor:pointer;}
	
	.active{
		background: #e54c10;
		transition: position 0.5s;
		-webkit-transition: position 0.5s;
	}
	
	#header, #intro, #history{width: 100%;}

	.nsection{margin:40px 20px 20px 20px;}
	.nsection h4{
		background: #e54c10;
		padding:1em 2em;
		transition: all 1.2s;
		-webkit-transition: all 1.2s;
	}
	.nsection h4:hover{background:#FFF;color:#e54c10;}
	


/* ITEM ELEMENTS */
	
	#gallery{
		position: relative;
		width: 100%;
		margin:0;
	}
	#gallery .itembox{
	/*margin: 0;*/ 
			box-shadow: 0px 8px 0px 0px rgba(110,194,250,1);
			cursor:pointer;
	}
	
	#gallery .swipeshow{
	cursor: pointer; 
	}
	
	#gallery .item{
		position: relative;
		float: left;
		width: 23%;
		margin:0 2% 2% 0;
		padding:1%;
		box-shadow: 0px 8px 0px 0px rgba(110,194,250,1);
	}
	
	#gallery #grid-sizer{width:25%;}
	#gallery #gutter-sizer{width:2%;}
	

	
	article#contact, article#about {
		padding: 4%;
	}
	
	figure{
		margin:0;
		-webkit-margin-before:0;
		-webkit-margin-after:0;
		-webkit-margin-start:0;
		-webkit-margin-end:0;
		overflow:hidden;
	}
	figcaption {
		position: absolute;
		width: 100%;
		height: 100%;
		background: #fff;
		background: rgba(256,256,256,0.8);
		padding: 10%;
		opacity: 0;
		transition: 		all 0.6s ease;
		-webkit-transition: all 0.6s ease;
		-moz-transition:    all 0.6s ease;
		-o-transition:      all 0.6s ease;
	}
	figure:hover figcaption {opacity: 1;}

	.obscura{
		position: absolute; 
		bottom: 0; 
		left: 0;
		width: 100%; 
		height: 50%;
		margin: 0; 
		padding: 0;
		background-image: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,100));
		background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,100));
	}

	.item{background: #fff;}
	.item:before{bottom: 10px; left: 10px;}
	.item figcaption, .shop figcaption{left: 0; bottom: -30%;}
	.item:hover figcaption, .shop:hover figcaption{bottom: 0;}
	
	#borderImage{
   /* background-image: url(chapter_3_background-small.png); */ /*Your border image*/

    width: 100%;

	overflow: hidden;
}

	figure img{    		
		transition: 		all 0.3s ease-in;
		-webkit-transition: all 0.3s ease-in;
		-moz-transition:    all 0.3s ease-in;
		-o-transition:      all 0.3s ease-in;
	}
	
	figure img:hover {

	}
	
	
	
	a.goback {
		border: 20px solid rgba(255,255,255,0.3);
		position: absolute;
		border-radius: 50%;
		width: 0;
		height: 0;
		margin:3%;
	}
	a.goback .backarrow {
		top: -12px;
		left: -8px;
		position: absolute;
		color:#fff;
	}
	a.goback:hover {border-color:#fff;}
	a.goback:hover .backarrow {color:#666;}
	
	/*software used */
	img.software {
    top: 8px;
    position: relative;
    padding-right: 5px;
	}
	
	.software{
    display: inline-block;
    margin: 0 20px 0 0;
	}
	
	.photoshop {
	width: 153px;
	height: 34px;
	background-image: url(../philllchabbb_files/images/software_photoshop.png);
	}
	
	.threedsmax {
	width: 127px;
	height: 34px;
	background-image: url(../philllchabbb_files/images/software_3dsmax.png);
	}
	
	.flash {
	width: 99px;
	height: 34px;
	background-image: url(../philllchabbb_files/images/software_flash.png);
	}
	
	.illustrator {
	width: 147px;
	height: 34px;
	background-image: url(../philllchabbb_files/images/software_illustrator.png);
	}
	
	.premierepro {
	width: 176px;
	height: 34px;
	background-image: url(../philllchabbb_files/images/software_premierepro.png);
	}
	
	.unity {
	width: 98px;
	height: 34px;
	background-image: url(../philllchabbb_files/images/software_unity.png);
	}
	
/* ISOTOPE FILTERING */
	
	.isotope-item {
	  z-index: 2;
	}
	.isotope-hidden.isotope-item {
	  pointer-events: none;
	  z-index: 1;
	}
	
/* ISOTOPE TRANSITIONS */

	.isotope,
	.isotope .isotope-item {
	  -webkit-transition-duration: 0.8s;
		 -moz-transition-duration: 0.8s;
		  -ms-transition-duration: 0.8s;
		   -o-transition-duration: 0.8s;
			  transition-duration: 0.8s;
	}
	.isotope {
	  -webkit-transition-property: height, width;
		 -moz-transition-property: height, width;
		  -ms-transition-property: height, width;
		   -o-transition-property: height, width;
			  transition-property: height, width;
	}
	.isotope .isotope-item {
	  -webkit-transition-property: -webkit-transform, opacity;
		 -moz-transition-property:    -moz-transform, opacity;
		  -ms-transition-property:     -ms-transform, opacity;
		   -o-transition-property:         top, left, opacity;
			  transition-property:         transform, opacity;
	}
	
/* DISABLING TRANSITIONS */

	.isotope.no-transition,
	.isotope.no-transition .isotope-item,
	.isotope .isotope-item.no-transition {
	  -webkit-transition-duration: 0s;
		 -moz-transition-duration: 0s;
		  -ms-transition-duration: 0s;
		   -o-transition-duration: 0s;
			  transition-duration: 0s;
	}


/* SHOP PAGES */

	.shop{
		width:49%;
		padding:2%;
		box-shadow: 0 8px 8px -6px #666;
		background:#fff;
		float: left;
	}	
	.shop:nth-child(odd) {margin: 0 0 3% 1%;}
	.shop:nth-child(even) {margin: 0 1% 3% 0;}
	

/* ABOUT PAGE */

	.about, .contact, .detail{
		width: 98%;
		margin:0 0 2% 0;
		padding:2%;
		box-shadow: 0 8px 8px -6px #666;
		background:#fff;
	}	
	
	.about h2, .about p{margin-bottom:2%;}
	.about p{
		/*
		width:60%;
		
		column-count: 2;
		column-gap: 2%;
		-moz-column-count: 2;
		-moz-column-gap: 2%;
		-webkit-column-count: 2;
		-webkit-column-gap : 2%;
		*/
	}
	.about a{-webkit-transition: all 0.8s ease; transition: all 0.8s ease; margin-right: 3%;}
	.about a:hover{color:#e54c10;}
	.about .lpic{margin-right: 2%; float:left; width:32%;}
	.about .rtext{width:66%; float: left;}
	a.dwnld {
		 border: 1px solid #ccc;
		 padding: 10px 30px;
		 border-radius: 2px;
		 margin-top: 10px;
		 display: inline-block;
		 color: #666;
	}
	a.dwnld:hover {
		border-color: #e54c10;
	}
	
	.abouttwocol{
	/*
    margin-right: 2%;
    float: left;
    width: 32%;
			height: 200px;
	*/

	width:40%;
	    float: left;
	}
	
	.abouttencol{
	/*
    width: 66%;
    float: left;
	height: 200px;
	*/

	width:60%;
	    float: left;
	}
	
	#aboutholder
	{
	    height: 80px;
	}
	
	.abouticons
	{
		bottom: 0;
	    position: relative;
				transition:all 0.3s ease;
		-webkit-transition:all 0.3s ease;
		-moz-transition:all 0.3s ease;
		-ms-transition:all 0.3s ease;
		-o-transition:all 0.3s ease;
	}
	
	.abouticons:hover
	{
		bottom: 10%;
	}
	
/* CONTACT FORM */	
	
	#contactform{}
	input, textarea{
		position:relative;
		border:none;
		border-radius:0;
		 -webkit-appearance: none;
		width:100%;
		padding:1%;
		margin-top: 2%;
		background: #eee;
	}
	input:active, input:focus, textarea:active, textarea:focus{
		outline:2px solid #81628F;
		box-shadow: none;
		border: none;
	}
	.msgarea{
		min-width:100%;
		max-width:100%;
		min-height:4em;
		max-height:12em;
	}
	.thecatch{display:none;}
	.submitbutton{
		width:100%;
		padding:1em 2em;
		color:#fff;
		background: #81628F;
		font-size:0.8em;
		font-weight:400;
		letter-spacing: .1em;
		text-align:right;
		cursor:pointer;
		transition: all 1.2s;
		-webkit-transition: all 1.2s;
		outline:none;
	}
	.submitbutton:hover{background:#eee;color:#81628F;}
	input.submitbutton:active, input.submitbutton:focus{outline:none;}
	
	.notify{
		position:fixed;
		top: 0;
		z-index:7500;
		background: rgba(256,256,256,0.90);
		padding-top:12%;
		margin:0;
		width:100%;
		height:100%;
	}
	.notify p, .notify a{
		display:block;
		max-width: 1140px;
		margin:0 auto;
		text-align:center;
	}
	a.closeit{margin-top:5%; z-index:7510; text-transform:uppercase;}
	a.closeit:hover{color:#81628F;}
	
	#copyright{
		margin: 20px 0 0 0;
	}
	#copyright p{line-height:2em;font-size:0.6em;}
	
	#copyright img 
	{

	}
	
	.poof {display:block;}
	.tada {display:none;}
	.perm {position:fixed;}

/* ============================= */
/* ! Layout for mobile version   */
/* ============================= */

@media handheld, only screen and (max-width: 767px) {

	.toggleit{
		display:block;
		position:relative;
		z-index:3000;
	}
	.offcanvas{
		/*left: 0 !important;
		-webkit-transform: translate(0,0);
		-moz-transform: translate(0,0);
		-ms-transform: translate(0,0);
		-o-transform: translate(0,0);
		transform: translate(0,0);
		-webkit-transition: -webkit-transform 400 ease;
		-moz-transition: -moz-transform 400 ease;
		-o-transition: -o-transform 400 ease;
		transition: transform 400 ease;*/
	}
	#sidepanel { 
		margin-top: -1000%; 
		float: left; 
		padding:15% 10%;
		z-index:2000; 
		left:0;
	}
	.maincontent { margin-left: 0; float: left; padding:0; }
	body.menuactive #sidepanel { 
		margin-top: 20px; 
		width:100%; 
		height:120%;
		position:fixed; 
		background: #000;
	}
	body.menuactive .maincontent { margin-right: -100%;}
	nav a{
		float:none;
		margin: 1% auto 0 auto;
	}
	nav a img {max-width: 60%;}
	#logo{max-width:80px;}
	nav a img, #logo img{
		width:auto;
		display: block;
    	margin: 0;
	}
	nav a:hover img{
		opacity:0.8;
		filter:alpha(opacity=80);
	}
	.navhalf{float:left; width:50%;}
	
	#mobile-navbar, #mobile-copyright{display:block;}
	.offcanvas{
		/*
		left:0;
		-ms-transform: translate(-100%,0);
		-o-transform: translate(-100%,0);
   		-webkit-transform: translate(-100%,0);
		transform: translate(-100%,0);
		width: 70%;
		height: 100%;
		overflow:hidden;*/
	}
	
	#grid-sizer{width:50%;}
	#gallery{width:auto; margin: 76px 0;}
	#gallery .item{
		width: 49%;
		padding: 2%;
	}
	#gallery .item:nth-child(odd) {margin: 0 1% 3% 0;}
	#gallery .item:nth-child(even) {margin: 0 0 3% 1%;}
	
	.about p{width:auto;}
	
	.notify{padding-top:25%;}
	.notify p, .notify a{margin-left:20px;margin-right:20px;}
	a.closeit{margin-top:10%;}
	
	#copyright{
		height:80px; margin:40px 0 0;
	}
	#copyright h4, #copyright h5{
		margin: 0.8em 0.2em 0.5em 0.2em;
		line-height:1.1em;
		text-align:center;
	}
	#copyright h4{margin-bottom:1em;}
	.runner{padding:0;margin:0;}
	.runner, .maincopy {width:100%;}
	.runner img{margin:20px 15px 10px;}
	.poof {display:none;}
	.tada {display:block;}
}

@media handheld, only screen and (max-width: 480px) {
	#services{height:1900px;}
	#grid-sizer{width:100%;}
	#gallery .item{margin: 0 0 7% 0;}
	#gallery .item, .shop, .about, .contact{
		width: 100%;
		padding:4%;
		margin: 0 0 5% 0 !important;
	}	
	a.dwnld {margin-bottom: 30px;}
	figcaption{visibility:hidden;}
}
@media handheld, only screen and (max-width: 360px) {
	.about .lpic{margin: 0 0 2% 0;width:98%;}
	.about .rtext{width:100%;}
}

/* ========================================== */
/* ! Provide higher res assets for iPhone 4   */
/* ========================================== */

@media only screen and (-webkit-min-device-pixel-ratio: 2) { 

/*	.logo {
		background: url(logo2x.jpg) no-repeat;
		background-size: 212px 303px;
	}*/

}