@charset "UTF-8";
/* CSS Document */
html {
	margin:0;
	padding:0;
	width:100%;
	height:100%;
	overflow:visible;
}
body {
	margin:0;
	padding:0;
	overflow:visible;
	width:100%;
	height:100%;
	text-align:center;
	background-color:#CCC;
	background-color:rgba(238,238,238,1);
}





.header-wrapper {
	position:fixed;
	z-index:40000;
	left:0px;
	top:0px;
	width:100%;
	height:25px;
	overflow:hidden;
	background-color:rgba(37,49,71,0.9);
	text-align:center;
	color:white;
}
.header-wrapper 
	.author-info {
		font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
		font-size:14px;
		line-height:25px;
		color:white;
		margin:0px;
		padding:0px;
	}
.header-wrapper 
	.author-info
		.ai-name {
			font-weight:bold;
		}
.header-wrapper 
	.author-info
		.ai-text {
			font-weight:normal;
			opacity:0.5;
			text-transform:uppercase;
			letter-spacing:1px;
			margin:0px 0px 0px 5px;
		}






.matrix-wrapper {
	display:block;
	margin:15px 0 0 0;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	
}
.matrix-wrapper 
	.m-items {
		list-style:none;
		display:block;
		margin:5px 0 0 5px;
		padding:0;
		font-size:0;
		outline:0px solid red;
	}
.matrix-wrapper 
	.m-items 
		.mi {
			display:inline-block;
			position:relative;
			padding:0;
			margin:0;
			outline:none;
		}
.matrix-wrapper.has-preview
	.m-items 
		.mi:not(.preview)
			.mi-image {
				z-index:0;
				opacity:0.5;
				pointer-events:none;
			}
.matrix-wrapper.has-preview
	.m-items
		.mi.preview
			.mi-image {
				z-index:1;
			}
		
.matrix-wrapper 
	.m-items 
		.mi:hover {
			z-index:10000;
		}
		
.matrix-wrapper 
	.m-items 
		.mi
			.mi-image {
				display:block;
				text-decoration:none;
				width:100px;
				height:100px;
				border-radius:10px;
				text-decoration:none;
				background-position:center center;
				background-repeat:no-repeat;
				background-size:cover;
				background-color:white;
				margin:0px 5px 5px 0px;
				padding:0;
				border:5px solid rgba(200,200,200,1);
				border:5px solid rgba(255,255,255,1);
				box-shadow:0px 3px 10px 0px rgba(0,0,0,0.0);
						filter: grayscale(40%) brightness(65%) contrast(180%);
				-webkit-filter: grayscale(40%) brightness(65%) contrast(180%);
				opacity:0.5;
				transition:all 0.3s ease;
			}
.matrix-wrapper:not(.has-preview)
	.m-items
		.mi
			.mi-image:hover {
				box-shadow:0px 3px 20px 0px rgba(0,0,0,0.5);
				border:5px solid black;
						filter: grayscale(0%) brightness(100%) contrast(100%);
				-webkit-filter: grayscale(0%) brightness(100%) contrast(100%); /* Safari 6.0 - 9.0 */
				opacity:1;
			}
			
.matrix-wrapper
	.m-items 
		.mi
			.mb-image-holder {
				position:fixed;
				display:block;
				left:-10000px;
				top:-10000px;
				width:0px;
				height:0px;
				overflow:hidden;
				background-color:rgba(51,204,255,0.5);
				background-color:rgba(238,238,238,0.7);
			}
.matrix-wrapper
	.m-items 
		.mi
			.mb-image-holder
				.mb-image {
					width:100%;
					height:100%;
					background-position:center center;
					background-repeat:no-repeat;
					background-size:auto;
				}
			
.matrix-wrapper
	.m-items 
		.mi.preload
			.mb-image-holder {
				visibility:hidden;
				display:block;
				opacity:0;
				pointer-events:none;
				transition:opacity 0.3s ease, visibility 0s ease 0.3s;
			}
.matrix-wrapper
	.m-items 
		.mi.preview
			.mb-image-holder {
				z-index:100;
				visibility:visible;
				left:-800px;
				top:-400px;
				width:calc(100% + 1600px);
				height:calc(100% + 800px);
				opacity:1;
				transition:opacity 0.3s ease, visibility 0s ease 0s;
			}

.matrix-wrapper 
	.m-items 
		.mi
			.mb-image-holder
				.mb-image
					img {
						opacity:0;
						max-width:300px;
						max-height:300px;
						transition:opacity 0.5s ease, max-width 0.3s ease, max-height 0.3s ease, visibility 0s linear 1s;
						transition:opacity 0.5s ease, visibility 0s linear 1s;
					}
.matrix-wrapper.has-preview
	.m-items
		.mi
			.mb-image-holder
				.mb-image
					img {
						opacity:1;
						max-width:800px;
						max-height:800px;
						transition:opacity 0.3s ease, max-width 0.3s ease, max-height 0.3s ease;
						transition:opacity 0.3s ease;
					}
					
.matrix-wrapper 
	.m-items 
		.mi
			.mb-image-holder
				.mb-image
					img {
						z-index:1;
						position:relative;
						top:50%;
						transform:translateY(-50%);
						width:auto;
						height:auto;
						visibility:visible;
					}
.matrix-wrapper 
	.m-items 
		.mi.jpg
			.mb-image-holder
				.mb-image
					img {
						border:5px solid #EEE;
						box-shadow:0px 5px 35px 0px rgba(0,0,0,0.3);
					}






.buttons-wrapper {
	display:block;
	position:fixed;
	z-index:30000;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
}
.buttons-wrapper.hidden {
	display:none;
}


.mb-button.hidden {
	visibility:hidden;
	opacity:0;
	transition:opacity 0.5s ease, visibility 0s linear 0.5s;
}
.mb-button {
	z-index:20000;
	visibility:visible;
	opacity:1;
	transition:opacity 0.5s ease, visibility 0s linear 0s;
}
.mb-button {
	position:absolute;
	text-decoration:none;
	overflow:hidden;
	cursor:pointer;
	display:block;
	border:5px solid white;
	width:24px;
	height:24px;
	margin:0px 0px 0px 0px;
	border-radius:24px;
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	font-size:24px;
	line-height:24px;
	font-weight:bold;
	color:white;
	background-color:black;
}
.mb-button.mb-prev {
	left:10px;
	top:50%;
}
.mb-button.mb-next {
	right:10px;
	top:50%;
}
.mb-button.mb-close {
	right:10px;
	top:35px;
}

.mb-button.mb-prev:before { color:inherit; background-color:inherit; content:"<"; }
.mb-button.mb-next:before { color:inherit; background-color:inherit; content:">"; }
.mb-button.mb-close:before { color:inherit; background-color:inherit; content:"×"; }
			
.mb-button:hover { background-color:#FF3333; }
		
					
			



	@media screen and (min-width: 1600px) {
		/* XXL */
		.matrix-wrapper														{	width:850px; }
	}
	@media screen and (min-width: 1200px) and  (max-width: 1599px) {
		/* XL */
		.matrix-wrapper														{	width:700px; }
	}
	@media screen and (min-width: 1000px) and  (max-width: 1199px) {
		/* L */
		.matrix-wrapper														{	width:900px; }
		.matrix-wrapper .m-items .mi .mi-image								{	border:5px solid rgba(255,255,255,0); width:100px; height:100px; }
		.matrix-wrapper .m-items .mi .mb-image-holder .mb-image img			{	max-width:750px; max-height:600px; height:auto; }
	}
	@media screen and (min-width: 800px) and (max-width: 999px) {
		/* M */
		.matrix-wrapper														{	width:600px; }
		.matrix-wrapper .m-items .mi .mi-image								{	border:5px solid rgba(255,255,255,0); width:90px; height:90px; }
		.matrix-wrapper .m-items .mi .mb-image-holder .mb-image img			{	max-width:450px; max-height:400px; height:auto; }
	}
	@media screen and (min-width: 600px) and (max-width: 799px) {
		/* S */
		.matrix-wrapper														{	width:600px; }
		.matrix-wrapper .m-items .mi .mi-image								{	border:5px solid rgba(255,255,255,0); width:90px; height:90px; }
		.matrix-wrapper .m-items .mi .mb-image-holder .mb-image img			{	max-width:550px; max-height:400px; height:auto; }
	}
	@media screen and (min-width: 400px) and (max-width: 599px) {
		/* XS */
		.matrix-wrapper														{	width:400px; }
		.matrix-wrapper .m-items .mi .mi-image								{	border:3px solid rgba(255,255,255,0); width:65px; height:65px; }
		.matrix-wrapper .m-items .mi .mb-image-holder .mb-image img			{	max-width:300px; height:auto; }
	}
	@media screen and (max-width: 399px) {
		/* XXS */
		.matrix-wrapper														{	width:360px; }
		.matrix-wrapper .m-items .mi .mi-image								{	border:3px solid rgba(255,255,255,0); width:50px; height:50px; margin:0px 4px 4px 0px; }
		.matrix-wrapper .m-items .mi .mb-image-holder .mb-image 			{	transform:scale(0.3,0.3);	}
		.matrix-wrapper .m-items .mi .mb-image-holder .mb-image img			{	max-width:300px; max-height:600px; }
		.matrix-wrapper .m-items .mi .mi-image								{	filter:none; -webkit-filter:none; transition:none; }		
		.matrix-wrapper .m-items .mi.preload .mb-image-holder				{	transition:none; }
	}