/********************
*  navigation       *
*********************/
#nav {
	position: fixed;
	top: 50%;
	margin-top: -100px; /* should be 1/2 nav height, must be updated when nav changes */
	margin-left: -10px; /* this value should be #content's padding - #nav width */

	border-right: 2px solid rgb(0, 0, 0);
	padding: 8px 8px 8px 0px;
}

.focus {
	font-size:1.2em;
}

.navItem, .backToTop {
	/* remove link styling for these backToTop links */
	text-decoration: none;
}

.backToTop {
	color:#888;
	display: none;
	float: right;
	margin-top: 8px;
}

.navItem {
	color: black;
}

ul {
	text-align: right;
	margin-bottom: 0;
}

li {
	list-style: none;
	margin: 0;
	width: 110px; /* influences #nav margin-left */
	font-size: 14px; /* needs to match the jquery animation default */
 }



/********************
*  page structure   *
*********************/
.section {
		/* padding-left: 3000px;
		margin-left: -3000px;
	    padding-right: 3000px;
		margin-right: -3000px; */

		/* this allows the div to be more centered on the page when you click to it from the menu bar */
		padding-top: 200px;
		margin-top: -200px;
}

/* need this to prevent the page becoming 6000 px wide */
body { overflow-x: hidden; }

/* alternating background colors */
.section:nth-of-type(odd) {
	/*background-color: #F5F5F5; this was a good idea, but it gets all funky with the waypoints and the large padding */
}

.lastSection {
	margin-bottom: 100px;
}

.firstSection {
	padding-top: 25px;
	margin-top: 0px;
}

#content {
	padding-left: 80px; /* needs to update as the nav updates */
}

.container {
	padding-top: 45px;
	padding-bottom: 25px;
}

#main {
	padding-top: 0px;
}


/********************
*  Content          *
*********************/

img {
	width:100%;
}

.icon {
	float:left;
	height:40px;
	padding-right: 15px;
}

.photo-row {
	margin-top: 12px;
}

.section-image-30 {
	width: 30%;
	float:left;
	margin-right: 5%;
	margin-bottom:1em;
}

.section-image-60 {
	width: 60%;
	float:left;
	margin-right: 5%;
	margin-bottom:1em;
}

.firstSection {
	padding-top: 0px;
}

.first-text-spacer {
		height: 120px;
}

@media (max-width: 550px) { /* note this value is also used in the js */
	#content { 
		padding-left: 0px;
	}
	#nav {
		position: relative;
		margin: 0;
		border-right: none;
		padding-top: 30px;
	}
	#nav li {
		margin: 0 auto;
		text-align: center;
	}
	#nav li a {
		font-size: 20px;
	}
	.backToTop {
		display: inline;
	}
	img {
		margin-bottom: 2.5rem;
	}

	.first-text-spacer {
		height: 0px;
	}
	.section {
		padding-top: 0px;
		margin-top: 0px;
	}
	.container {
		padding-top: 25px;
		padding-bottom: 0px;
	}
}

/******* lightbox *******/
#imagelightbox
{
	cursor: pointer;
	position: fixed;
	z-index: 10000;

	-ms-touch-action: none;
	touch-action: none;

	-webkit-box-shadow: 0 0 3.125em rgba( 0, 0, 0, .5 ); /* 50 */
	box-shadow: 0 0 3.125em rgba( 0, 0, 0, .5 ); /* 50 */
}

#imagelightbox-overlay
{
	background-color: #fff;
	background-color: rgba( 0, 0, 0, .9 );
	position: fixed;
	z-index: 9998;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

#imagelightbox-loading,
#imagelightbox-overlay,
#imagelightbox-close,
#imagelightbox-caption,
#imagelightbox-nav,
.imagelightbox-arrow
{
	-webkit-animation: fade-in .25s linear;
	animation: fade-in .25s linear;
}
	@-webkit-keyframes fade-in
	{
		from	{ opacity: 0; }
		to		{ opacity: 1; }
	}
	@keyframes fade-in
	{
		from	{ opacity: 0; }
		to		{ opacity: 1; }
	}

/* ARROWS */
.imagelightbox-arrow
{
	width: 3.75em; /* 60 */
	height: 7.5em; /* 120 */
	background-color: #444;
	background-color: rgba( 0, 0, 0, .5 );
	vertical-align: middle;
	position: fixed;
	z-index: 10001;
	top: 50%;
	margin-top: -3.75em; /* 60 */
}
.imagelightbox-arrow:hover,
.imagelightbox-arrow:focus
{
	background-color: #666;
	background-color: rgba( 0, 0, 0, .75 );
}
.imagelightbox-arrow:active
{
	background-color: #111;
}
	.imagelightbox-arrow-left
	{
		left: 2.5em; /* 40 */
	}
	.imagelightbox-arrow-right
	{
		right: 2.5em; /* 40 */
	}
	.imagelightbox-arrow:before
	{
		width: 0;
		height: 0;
		border: 1em solid transparent;
		content: '';
		display: inline-block;
		margin-bottom: -0.125em; /* 2 */
	}
		.imagelightbox-arrow-left:before
		{
			border-left: none;
			border-right-color: #fff;
			margin-left: -0.313em; /* 5 */
		}
		.imagelightbox-arrow-right:before
		{
			border-right: none;
			border-left-color: #fff;
			margin-right: -0.313em; /* 5 */
		}

@media only screen and (max-width: 41.250em) /* 660 */
{
	#container
	{
		width: 100%;
	}
	#imagelightbox-close
	{
		top: 1.25em; /* 20 */
		right: 1.25em; /* 20 */
	}
	#imagelightbox-nav
	{
		bottom: 1.25em; /* 20 */
	}

	.imagelightbox-arrow
	{
		width: 2.5em; /* 40 */
		height: 3.75em; /* 60 */
		margin-top: -2.75em; /* 30 */
	}
	.imagelightbox-arrow-left
	{
		left: 1.25em; /* 20 */
	}
	.imagelightbox-arrow-right
	{
		right: 1.25em; /* 20 */
	}
}

@media only screen and (max-width: 20em) /* 320 */
{
	.imagelightbox-arrow-left
	{
		left: 0;
	}
	.imagelightbox-arrow-right
	{
		right: 0;
	}
}