html{color:#000;background:#FFF}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}

body{ font-family:"Verdana",Helvetica,Arial,sans-serif; background:#fff;  }

a{ text-decoration:none; color:#545454;  }
a:hover { text-decoration: none; color: white; background-color: #00acee; text-shadow:0.1px 0.1px 1px rgba(0,0,0,.5);}
#magenta a{ text-decoration:none; color:#545454;  }
#magenta a:hover { text-decoration: none; color: white; background-color: #e32384; text-shadow:0.1px 0.1px 1px rgba(0,0,0,.5);}
#yellow a{ text-decoration:none; color:#545454;  }
#yellow a:hover { text-decoration: none; color: white; background-color: #f6e824; text-shadow:0.1px 0.1px 1px rgba(0,0,0,.5);}

#wrap{ overflow:hidden; padding:3%; }
#pbOverlay.show ~ #wrap{ -webkit-filter:blur(2px) grayscale(.4); }
.main{ float:left; width:30%; color:#000; text-shadow:0.1px 0.1px 1px rgba(0,0,0,.4); font-family:Verdana; }
	.main p{ margin:15px 0; font-size:0.7em; font-family:Verdana;}
		.main footer{ margin-top:50px; text-shadow:none; font-size:0.6em; }

#logo {border:none; background-color: #FFF;}
#logo a{text-decoration: none;}
#logo a:active { text-decoration: none;}
#logo a:visited { text-decoration: none; }
#logo a:hover { text-decoration: none;}
		
#gallery{ float:right; width:68%; }
	#gallery li{ list-style:none; perspective:100px; -webkit-perspective:100px; margin:2px; float:right; position:relative; transition:.1s; -webkit-transition:0.1s; }
		#gallery li.video::before{ content:'\25BA'; color:#FFF; font-size:20px; height:20px; width:20px; line-height:0.9; position:absolute; bottom:3px; left:4px; z-index:1; background:rgba(0,0,0,0.4); box-shadow:0 0 0 3px rgba(0,0,0,0.4); border-radius:0 3px 0 0; pointer-events:none; opacity:0; transition:.5s 0.2s; }
		#gallery li.loaded.video::before{ opacity:1; }
		#gallery a{ display:block; width:100px; height:91px; vertical-align:bottom; overflow:hidden; background:rgba(0,0,0,0.1);
					transition:.4s ease-out; -webkit-transition:0.4s ease-out; -webkit-transform:rotateX(90deg) translate(-50px,-50%); transform:rotateX(90deg) translate(-50px,-50%); }
		#gallery a:active, #gallery a:focus{ outline:none; }
		#gallery a img{ min-height:100%; width:100%; transition:.3s ease-out; -webkit-transition:0.3s ease-out; }
		#gallery .loaded a{ -webkit-transform:rotateX(0deg) translate(0,0); transform:rotateX(0deg) translate(0,0); }
			#gallery li.loaded:hover{ transform:scale(1.5); -webkit-transform:scale(1.5); z-index:2; }
			#gallery li.loaded a:hover{ box-shadow:0 0 0 2px #FFF, 0 0 6px 1px #000; transition:.1s; -webkit-transition:0.1s; }
			#gallery li.loaded:hover img{ transform:scale(1.2); -webkit-transform:scale(1.2); }
			#gallery li.loaded.video:hover::before{ opacity:0; }
	
/*------- media queries -----------*/
@media all and (max-width:700px){
	body{ background-position:0 0; background-attachment:inherit; box-shadow:none; }
	.main, #gallery{ float:none; width:auto; font-size:0.9em; }
	.main h1{ font-size:5.2em; }
	.main h2{ font-size:1.5em; }
	.btn{ position:absolute; right:10px; top:26px; }
	#gallery li{ margin:0; }
	#gallery a{ width:55px; height:50px; }
	#gallery li.loaded:hover img, #gallery li.loaded:hover{ transform:none; -webkit-transform:none; }
	.main footer{ margin:10px 0; }
}