@import url("fonts.css");

#photoDisplayContainer {
	position: absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	background-color: #000;
}

#logoTopLeft {
	position: absolute;
	top:7px;
	left:20px;
	z-index: 10;
	display: none;
}

#bottomBar {
	position: fixed;
	bottom: 0;
	width: 100%;
	height:50px;
	background-color: #000;
	background-color: rgba(0,0,0,0.5);
	z-index: 10;
}

#bottomBar a { color:#fff;}
#bottomBar a:visited { color:#fff;}

#bottomBarLeft {
	position: absolute;
	left:20px;
	height: 50px;
	line-height: 50px;
	color: #fff;
	font-family: 'bebas_neue_regular';
	font-size: 20px;
}

@media screen and (max-width: 720px) /* Mobile */ {
	#bottomBarLeft {
		display: none;
	}
}

#bottomBarRight {
	position: absolute;
	right:0;
	height: 50px;
	line-height: 50px;
	color: #fff;
	font-family: 'bebas_neue_regular';
	font-size: 20px;
}

#bottomBarRight ul li {
	display: inline-block;
	padding: 0 12px;
	-webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
	-moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
	-o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
	transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
}


#bottomBarRight ul li.border {
	text-align: center;
	width: 30px;
}

#bottomBarRight ul li.border:hover {
	color:#ed008c;
}

#bottomBarRight ul li:hover {
	color:#ed008c;
	cursor: pointer;
}

#close {
	width: 100%;
}

#closeExp {
	position: absolute;
	bottom:50px;
	right: 0;
	padding:0 12px;
	display: none;
}

#nav {
	position: absolute;
	top:100px;
	right: 0;
	z-index: 10;
	width:50px;
	color: #fff;
	font-size: 18px;
	background-color: #000;
	background-color: rgba(0,0,0,0.5);
}

#nav .navLogo {
	position: absolute;
	top:0;
	left: 20px;
	line-height: 50px;
	display: none;
}

#nav .navLogo img {
	vertical-align: middle;
}

#nav .navButton {
	height:50px;
	line-height: 50px;
	text-align: center;
	font-family: 'bebas_neue_regular';
	-webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
	-moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
	-o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
	transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
}

#nav .navButton img {
	vertical-align: middle;
}

#nav .hoverable:hover {
	cursor: pointer;
	color: #ed008c;
}

#nav .toggled {
	color: #ed008c;
}

#photoHolder {
	position: absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
}

.photoWrap {
	position: absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	z-index: 1;
	opacity: 0;
	text-align: center;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: top;
}

@media screen and (orientation: portrait) { /* Center image if device is in portrait */
	.photoWrap {
		background-position: center;
	}
}

.active {
	opacity: 1 !important;
}

#photoInfo {
	position: absolute;
	top:320px;
	right: 0;
	z-index: 10;
	width: 300px;
	height:100px;
	color: #fff;
	text-align: right;
	display: none;
}

#photoInfo .photoInfoDetail {
	position: absolute;
	top:0;
	right: 0;
	padding: 5px;
	text-align: right;
	font-family: bebas_neue_regular;
	display: none;
	text-shadow: 0 0 34px rgba(0,0,0,0.75);
}

#photoInfo .active {
	display: block;
}

.photoInfoDetail h1 {
	font-size: 26px;
}

.photoInfoDetail h2 {
	font-size: 18px;
	font-family: bebas_neue_light;
}

.photoInfoDetail h3 {
	font-size: 14px;
	font-family: bebas_neue_light;
}

.photoInfoDetail .numbers {
	margin-top: -5px;
	font-size: 12px;
	font-family: bebas_neue_light;
}

.photoInfoDetail .numbersMargin {
	margin-left: 6px;
}

.photoInfoDetail .numbersMargin img {
	margin: 0 2px;
}

@media screen and (max-width: 1023px) /* Small screen */ {

	#logoTopLeft {
		display: block;
	}
	#nav {
		top: 0;
		width:100%;
		height:50px;
		text-align: right;
	}
	#nav .navLogo {
		display: block;
	}
	.navButton {
		display: inline;
		height:50px;
	}

	.navButton .fa {
		width: 50px;
	}
	#photoInfo {
		top:50px;
	}
}

@media screen and (max-width: 340px) /* Hide logo on overlap */ {
	#nav .navLogo {
		display: none;
	}
}

@media screen and (max-width: 370px) /* Hide 500px logo on overlap */ {
	#bottomBarRight #pxLink {
		display: none;
	}
}

@media screen and (max-width: 325px) /* Hide 500px logo on overlap */ {
	#bottomBarRight #fbLink {
		display: none;
	}
}

sub, sup {
  /* Specified in % so that the sup/sup is the right size relative to the surrounding text */
  font-size: 55%;

  /* Zero out the line-height so that it doesn't interfere with the positioning that follows */
  line-height: 0;

  /* Where the magic happens: makes all browsers position the sup/sup properly, relative to the surrounding text */
  position: relative;

  /* Note that if you're using Eric Meyer's reset.css, this is already set and you can remove this rule */
  vertical-align: baseline;
}

sup {
  /* Move the superscripted text up */
  top: -0.5em;
}