@import url("reset.css");

/* layout */
body {
	background:#000000;
	font-family:'PT Sans Narrow', Arial, Helvetica, sans-serif;
	font-size:10vw;
	color:#000000;
	line-height:18px;
}

/* center the main container */
#portfolio {
	position:fixed;
	top:50%;
	left:50%;
	z-index:1;
	width:1000px;
	height:500px;
	/* top right bottom left */
	margin:-250px 0 0 -500px;
}

/* background image that creates the spotlight effect */
#background {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:2;
	background:url(../images/bg.png) no-repeat center;
}

#portfolio .glowfield {
	z-index:-999;
	background-color:blue;
	opacity:30%;
	position:fixed;
	top:40%;
	left:50%;
	width:1000px;
	height:600px;
	/* top right bottom left */
	margin:-250px 0 0 -500px;
}

.clickfield {
	z-index:1001;
	opacity:0.00;
	position:fixed;
	/*background-color:red;*/
	top:50%;
	left:50%;
	width:600px;
	height:400px;
	opacity:100%;
	/* top right bottom left */
	margin:-250px 0 0 -300px;
	cursor:pointer;
}

/* position absolutely */
#portfolio .gallery,
#portfolio .gallery .inside {
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
}

/* gallery occupies all the space of the portfolio */
#portfolio .gallery {
	width:100%;
	height:100%;
	overflow:hidden;
}
/* fixed z-index to keep stacking right */
#portfolio .gallery .inside {
	z-index:1;
}

/* the arrows */
#portfolio .arrows {
	z-index:10000;
}
#portfolio .arrows a {
	position:fixed;
	z-index:10000; /* was 3 */
	width:32px;
	height:32px;
	background-image:url(../images/arrows.png);
	background-repeat:no-repeat;
	outline:none;
	text-indent:-9999px;
}
#portfolio .arrows .prev,
#portfolio .arrows .up {
	display:none;
}
#portfolio .arrows .up,
#portfolio .arrows .down {
	left:50%;
	margin-left:-16px;
}
#portfolio .arrows .prev,
#portfolio .arrows .next {
	top:40%; /*180px*/
}
#portfolio .arrows .up {
	background-position:0 -64px;
	top:80px;
}
#portfolio .arrows .down {
	background-position:0 -96px;
	bottom:80px;
	position:absolute;
}
#portfolio .arrows .prev {
	background-position:0 -32px;
	left:12%;
	/*margin-left:60px;
	margin-right:60px;*/
}
#portfolio .arrows .next {
	background-position:0 0;
	right:12%;
	/*margin-left:60px;
	margin-right:60px;*/
}
#portfolio .arrows .up:hover {
	background-position:-32px -64px;
}
#portfolio .arrows .down:hover {
	background-position:-32px -96px;
}
#portfolio .arrows .next:hover {
	background-position:-32px 0;
}
#portfolio .arrows .prev:hover {
	background-position:-32px -32px;
}

/* the images themselves */
#portfolio .item {
	position:absolute;
	top:0;
	width:1000px;
	height:400px;
}
#portfolio .item div {
	position:absolute;
	left:0;
	width:100%;
	height:100%;
}
#portfolio .item div img {
	position:relative;
	top:0;
	left:50%;
	margin-left:-300px;
	object-fit: cover;
}
#portfolio .goblin {
	margin-left:0px;
	margin-right:0px;
}

/*#portfolio .goblin img {
	width:6000px;
	height:4000px;
	text-align: center;
}*/

/*#portfolio .img {
	overflow:hidden;
	background-color:transparent;
	text-align: center;
}*/

/* zelda 1 style map*/

#portfolio .paths {
	position:absolute;
	bottom:5%;
	left:50%;
	opacity:0.5;
	margin-left:-30px;
	margin-bottom:50px;
	z-index:4;
}
#portfolio .paths div {
	position:absolute;
	top:0;
}
#portfolio .paths a {
	background:#7700ff75;
	display:block;
	position:absolute;
	left:0;
	outline:none;
}
#portfolio .paths a:hover,
#portfolio .paths .active {
	background:rgb(238, 255, 0);
}

/* anchors */
a {
	text-decoration:none;
	color:#fff;
}

/* title area */
h1{
	font-size:2.8vh;
	text-shadow:1px 1px 1px #000;
	position:relative;
	z-index:1000;
	color:#fff;
	font-weight:normal;
	padding:10px;
	margin-top:10px;
	text-transform:uppercase;
	background:#00000000;
	float:left;
}

/* descriptor */
h2{
	font-size:2.6vh;
	text-shadow:1px 1px 1px #000;
	position:absolute;
	top:20%;
	left:100%;
	z-index:1000;
	text-align:left;
	color:#fff;
	font-weight:normal;
	padding:10px;
	margin-top:100px;
	text-transform:uppercase;
	/*background:#00000000;*/
	background-color: transparent;
	pointer-events:none;
	margin-left:-50%;
	white-space:pre-line;
	/*float:left;*/
}

/*overlay zoom*/
#divLargerImage {
	position:relative;
	display:block; 
	display:none;
	z-index:9999;
   /*float: right;*/
	/*margin-left: -980px;
	margin-top: -540px;*/
	/*margin-left:auto; 
	margin-right:auto;*/
}
#divOverlay {
   display: none;
   position: absolute;
   top: 0;
   left: 0;
   background-color: #040404;
   opacity: 0.88;
   width: 100%;
   height: 100%;
   z-index: 9998;
}