@font-face {
    font-family: Barmeno;
    src: url(Barmeno-Roman.ttf) format("truetype");
}
html, body {
	padding: 0;
	margin: 0;
	color: white;
	background: black;
	font-family: Helvetica, Arial, Sans-Serif;
}

#layout {
	min-width: 600px;
	padding: 0px 0 0 0;
	margin-left: -37px;
	overflow:hidden;
	-webkit-font-smoothing: antialiased;
}
.gallery {
	zoom: 1;
	position:relative;
	margin: 0;
}
.gallery-inner {
	position:relative;
	z-index: 1;
}
.gallery-inner:after {
	display:block;
	clear:both;
	content:'';
}
.photo {
	float: left;
	margin-left: 37px;
	margin-bottom: 37px;
	height: 200px;
	width: 140px;
	overflow:hidden;
	line-height: 0;
	position: relative;
	cursor:pointer;
	background: black;
}
.photo * {
	-webkit-transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
	-o-transition: opacity 0.3s ease-in-out;
	-ms-transition: opacity 0.3s ease-in-out;	
	transition: opacity 0.3s ease;
}
.photo img {
	height: 100%;
	opacity: 1;
}
.photo:hover img {
	opacity: 0.3;
}
#logo {
	line-height: 21px;
	font-size: 15px;
	color: white;
	background: rgba(0,0,0,1.0);
	display:none;
	height: 200px;
	width: 354px;
	margin-left: 0px;
	float:left;
}
.gallery #logo {
	display: table;
}
.gallery #logo > div {
	display: table-cell;
	vertical-align: top;
	padding-left: 35px;
}
h1 {
	text-align: center;
	font-size: 22px;
	margin-top: 40px;
}
.photo .note { 
	font-size: 17px;
	opacity: 1;
	line-height: 20px;
	height: 100%;
	width: 100%;
	position: absolute;
	display: table;
	top: 0;
	left: 0;
	opacity: 0;
}
.photo:hover .note {
	opacity: 1;
}
.photo .note div {
	display: table-cell;
	vertical-align:middle;
	text-align:center;
	padding: 8px;
}

/* Gallery background */
/*.gallery-bg {
	position:absolute;
	left: -177px;
	right: -177px;
	top: -237px;
	bottom: -237px;
	z-index: 0;
}*/
.gallery-bg {
	position:absolute;
	left: 0;
	right: -177px;
	top: 0;
	bottom: 237px;
	z-index: 0;
}
.gallery-bg .photo img,
.gallery-bg .photo:hover img {
	opacity: 0.5;
	cursor:default;
}


/* Overlay and popup */
.overlay {
	width: 100%;
	height: 100%;
	position:fixed;
	left: 0;
	top: 0;
	background: rgba(0, 0, 0, 0.8);
	text-align:center;
	z-index: 2;
}
.popup {
	position: absolute;
	top: 40px;
	bottom: 40px;
	left: 50%;
	min-width: 300px;
}
.popup img {
	height: 100%;
	position:relative;
	z-index: 2;
	cursor:pointer;
}
.img-caption {
	width: 200px;
	position:absolute;
	bottom: 60px;
	right: 60px;
	text-align:right;
	font-size: 80%;
	line-height: 140%;
	z-index: 2;
}

.popup-spinner {
	position:absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
}
#circleG {
	width:46.666666666666664px;
}
.circleG {
	background-color:#000000;
	float:left;
	height:10px;
	margin-left:5px;
	width:10px;
	-webkit-animation-name:bounce_circleG;
	-webkit-border-radius:7px;
	-webkit-animation-duration:0.75s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-direction:linear;
	-moz-animation-name:bounce_circleG;
	-moz-border-radius:7px;
	-moz-animation-duration:0.75s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-direction:linear;
	opacity:0.3;
	-o-animation-name:bounce_circleG;
	border-radius:7px;
	-o-animation-duration:0.75s;
	-o-animation-iteration-count:infinite;
	-o-animation-direction:linear;
	-ms-animation-name:bounce_circleG;
	-ms-animation-duration:0.75s;
	-ms-animation-iteration-count:infinite;
	-ms-animation-direction:linear;
	opacity:0.3
}
#circleG_1 {
	-webkit-animation-delay:0.15000000000000002s;
	-moz-animation-delay:0.15000000000000002s;
	-o-animation-delay:0.15000000000000002s;
	-ms-animation-delay:0.15000000000000002s;
}
#circleG_2 {
	-webkit-animation-delay:0.35000000000000003s;
	-moz-animation-delay:0.35000000000000003s;
	-o-animation-delay:0.35000000000000003s;
	-ms-animation-delay:0.35000000000000003s;
}
#circleG_3 {
	-webkit-animation-delay:0.45s;
	-moz-animation-delay:0.45s;
	-o-animation-delay:0.45s;
	-ms-animation-delay:0.45s;
}
@-webkit-keyframes bounce_circleG {
	0% {
		opacity:0.3
	}
	50% {
		opacity:1;
		background-color:#545454
	}
	100% {
		opacity:0.3
	}
}
@-moz-keyframes bounce_circleG {
	0% {
		opacity:0.3
	}
	50% {
		opacity:1;
		background-color:#545454
	}
	100% {
		opacity:0.3
	}
}
@-o-keyframes bounce_circleG {
	0% {
		opacity:0.3
	}
	50% {
		opacity:1;
		background-color:#545454
	}
	100% {
		opacity:0.3
	}
}
@-ms-keyframes bounce_circleG {
	0% {
		opacity:0.3
	}
	50% {
		opacity:1;
		background-color:#545454
	}
	100% {
		opacity: 0.3
	}
}