/* 22SLIDES */
		
	h1, h2, h3, h4, h5 {
		line-height: 1em;
		}
		
	a {
		color: inherit;
		text-decoration: none;
		}

/* Item Listing
------------------------------------------------------------------------------- */		
		
	#content {
	
		}

/* Files and Folders
------------------------------------------------------------------------------- */		

	.files {
		float: left;
		width: 100%;
		padding: 20px 65px 10px;
		background: rgba(0,0,0, .1);
		}
		
	.files li {
		float: left;
		width: 16.5%;
		padding: 0 10px 10px 0;
		}
		
	.files a {
		float: left;
		padding: 10px;
		width: 100%;
		height: 48px;
		transition: background-color .15s ease-out;
		background: rgba(255,255,255, .9);
		position: relative;
		border-radius: 3px;
		}
		
	.files a:hover {
		background: rgba(255,255,255, .25);
		}
	
	.files div {
		float: left;
		margin: 0 10px 0 0;
		width: 28px;
		height: 28px;
		border-radius: 100px;
		position: relative;
		transition: background-color .15s ease-out;
		}
				
	.files i {
		font-size: 23px;
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		}
		
	.files strong {
		font-size: 13px;
		line-height: 17px;
		font-weight: normal;
		display: block;
		position: absolute;
		top: 50%;
		left: 48px;
		transform: translateY(-50%);
		overflow: hidden;
		text-overflow: ellipsis;
		}
		

	.files .back {
		margin-left: -65px;
		width: auto;
		}
		
	.files .back a {
		width: 55px;
		}
	.files .back em {
		display: block;
		text-indent: 100%;
		overflow: hidden;
		white-space: nowrap;
		width: 100%;
		height: 100%;
		background: url('../_images/icon-back.svg') center center no-repeat;
		background-size: 75%;
		}
		
/* Responsiveness */

	@media screen and (max-width: 1950px) {
		.files .file, .files .folder { width: 20%; }
	}	
	
	@media screen and (max-width: 1150px) {
		.files .file, .files .folder { width: 25%; }
	}	
	
	@media screen and (max-width: 880px) {
		header { 
			padding-left: 20px;
			padding-right: 20px;
			}
		.files { 
			padding-right: 0;
			}	
		.files .file, .files .folder { width: 33%; }
	}		

	@media screen and (max-width: 600px) {
		.files.root { padding-left: 10px; }
		.files .file, .files .folder { width: 50%; }
	}	
	
	@media screen and (max-width: 440px) {
		header h1 {
			float: none;
			width: auto;
			margin: 0 auto;
			border: none;
			padding-right: 0;
			}
		header h2 { line-height: 1em !important; }
		.files .file, .files .folder { width: 100%; }
	}		


	/*
	.files {
		float: left;
		width: 100%;
		padding: 20px 20px 15px;
		border-bottom: 1px dashed #000;
		}
		
	.files li {
		float: left;
		margin: 5px;
		}
		
	.files a {
		display: block;
		text-align: center;
		padding: 10px;
		width: 120px;
		height: 140px;
		transition: opacity .15s ease-out;
		color: #000;
		}
	
	.files div {
		width: 75px;
		height: 75px;
		border-radius: 100px;
		border: 1px solid #000;
		margin: 0 auto 10px;
		position: relative;
		transition: background-color .15s ease-out;
		}
		
	.files a:hover div {
		background: #000;
		}
				
		
	.files img {
		display: block;
		max-width: 50%;
		max-height: 50%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		}
		
	.files strong {
		font-size: 13px;
		font-weight: normal;
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		}
		*/

/* Images			
------------------------------------------------------------------------------- */
	
	.images {
		float: left;
		width: 100%;
		padding: 10px;
		opacity: 0;
		transition: opacity .5s ease-out;
		}
		
	.images li {
		float: left;
		}
			
	.images a {
		display: block;
		height: 350px;
		transition: opacity .15s ease-out;
		}
		
	.images a:hover {
		opacity: .75 !important;
		}
		
	.images img {
		display: block;
		transition: opacity .5s ease-out;
		opacity: 0;
		}
		
	.images img.loaded {
		opacity: 1;
		}
		
	.images strong { display: none; }
	
/* Defaults */


		
	/*	
	.grid li {
		float: left;
		margin: 5px;
		}
	
	.grid a {
		display: block;
		position: relative;
		padding: 10px;
		border-radius: 5px;
		-webkit-transition: opacity .15s ease-out;
		-moz-transition: opacity .15s ease-out;
		transition: opacity .15s ease-out;
		text-align: center;
		text-overflow: ellipsis;
		}
		
	.grid div.image {
		position: relative;
		width: 250px;
		height: 250px;
		}
		
	.grid strong {
		display: block;
		position: absolute;
		top: 53%;
		left: 50%;
		transform: translate(-50%,-50%);
		width: 100%;
		max-width: 200px;
		padding: 10px;
		color: #555;
		font: normal 14px/1.2em "Helvetica Neue", Helvetica, Arial, sans-serif;
		text-align: center;
		}
		
	.grid em {
		display: block;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		font-style: normal;
		color: #444;
		text-align: center;
		display: none;
		}
		
	.grid span {
		display: block;
		position: absolute;
		bottom: -20px;
		right: 10%;
		font-style: normal;
		color: #444;
		text-align: right;
		font-size: 10px;
		display: none;
		}
		*/
		
/* Hover 

	.grid a:hover {
		opacity: .6;
		}
		
	.grid a:hover em {
		display: block;
		}
		
	.grid a:hover span {
		display: block;
		}		
		
/* Folders 
		
	.grid li.folder img {
		max-width: 150px;
		width: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		}
		
	.grid li.folder .locked {
		display: block;
		text-indent: 100%;
		overflow: hidden;
		white-space: nowrap;
		width: 30px;
		height: 30px;
		background: url('../_images/icon-lock.svg') center center no-repeat;
		background-size: 100%;
		position: absolute;
		top: 65%;
		right: 42px;
		opacity: .5;
		transform: translate(-50%, -40%);
		}
		
/* Files 
		
	.grid li.file img {
		max-width: 120px;
		width: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		}
		
/* Images 	
		
	.grid li.image img {
		max-width: 100%;
		max-height: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		}
		
	.grid li.image strong,
	.grid li.image em { display: none !important; }
		

		
/* Prompt
------------------------------------------------------------------------------- */		

	.prompt {
		clear: both;
		margin: 0 auto 150px;
		padding: 20px 0 0;
		font-size: 13px;
		line-height: 18px;
		color: #000;
		background: rgba(0,0,0, .1);
		text-align: center;
		}
		
	.prompt h3 {
		color: #fff;
		background: #000;
		font-size: 48px;
		line-height:75px;
		width: 75px;
		height: 75px;
		border-radius: 100px;
		margin: 20px auto;
		clear: both;
		}
		
/* Form */
		
	input[type="password"] {
		display: block;
		font: bold 13px/1.5em "Helvetica Neue", Helvetica, Arial, sans-serif;
		color: #000;
		background: transparent !important;
		border: none;
		padding: 10px 0;
		width: 200px;
		outline: none;
		text-align: center;
		margin: 0 auto 20px;
		}
		
	input[type="submit"] {
		float: none;
		clear: both;
		text-align: center;
		width: 200px;
		margin: 0 auto 120px;
		padding: 20px 0;
		font-size: 14px;
		border-radius: 0;
		transition: opacity .15s ease-out;
		outline: none;
		background: #000;
		color: #fff;
		}
		
	input[type="submit"]:hover {
		opacity: .75;
		}
		
/* Empty
------------------------------------------------------------------------------- */

	.empty {
		display: block;
		clear: both;
		padding: 200px 0;
		text-align: center;
		}