@charset "utf-8";
/* CSS Document */

@font-face {
  font-family: 'Jura';
  src: url('Jura-Light.otf');
}

#menu {
	opacity: 0;
	visibility: hidden;
	z-index: 0;
}

#showMenu {
	font-family: Jura;
	font-size: 200%;
	text-align: center;
	color: #606060; 
	background: #000000; 
	z-index: 0;
	position: fixed;
	width: 15%;
	left: 5%;
	top: 90%;
	height: 6.5%;	
	visibility: visible;
	opacity: 1;
}

#showMenu p {
	margin-top: 0%;
}

#photos {
	list-style-type: none;	
}

#photos li {
	background: #000000;
	color: transparent;
	z-index: -1;
	width: 97%;
    height: 82.5%;  /* 93% */
    position: absolute;
    top: 4.5%;
    left: 1.5%; 
    opacity: 0;
    background-size: contain;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

#photos #photo01 {
	opacity: 1;
    background-image: url(images/gallery01.jpg); 
}

#photos #photo02 {
    background-image: url(images/gallery02.jpg); 
}

#photos #photo03 {
    background-image: url(images/gallery03.jpg); 
}

#photos #photo04 {
    background-image: url(images/gallery04text.jpg); 
}

#photos #photo05 {
    background-image: url(images/gallery05.jpg); 
}

#photos #photo06 {
    background-image: url(images/gallery06.jpg); 
}

#photos #photo07 {
    background-image: url(images/gallery07.jpg); 
}

#photos #photo08 {
    background-image: url(images/gallery08.jpg); 
}

#photos #photo09 {
    background-image: url(images/gallery09.jpg); 
}

#photos #photo10 {
    background-image: url(images/gallery10.jpg); 
}

#photos #photo11 {
    background-image: url(images/gallery11.jpg); 
}

#photos #photo12 {
    background-image: url(images/gallery12.jpg); 
}

#photos #photo13 {
    background-image: url(images/gallery13.jpg); 
}

#photos #photo14 {
    background-image: url(images/gallery14.jpg); 
}

#photos #photo15 {
    background-image: url(images/gallery15.jpg); 
}

#photos #photo16 {
    background-image: url(images/gallery16.jpg); 
}

#arrowLeft {
	position: absolute;
	left: 1%;
	top: 35%;
	opacity: 0.3;
	height: 20%;
}

#arrowLeft:hover, #arrowRight:hover {
	opacity: 0.8;
}

#arrowRight {
	position: absolute;
	left: 94%;
	top: 35%;
	opacity: 0.3;
	height: 20%;
}

#miniatures {
	position: absolute;
	display: inline;
	top: 92%;
	left: 25%;
	opacity: 1;
	width: 50%;
	text-align: center;
}

#miniatures img {
	margin-left: 1%;
}