/* GENERAL */
		
		
		body {
			padding: 0;
			margin: 0;
			background: #ababab;
			font-family: "Roboto", "Helvetica", "sans-serif";
			line-height: 1.14;
		}

		a:link,
		a:active,
		a:visited {
			text-decoration: none;
			color: #409cb9;
			font-weight: normal;
			box-shadow: 0 3px 0 rgb(125, 194, 219);
		}
		
		#banner {
			padding-bottom: 0;
			/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#dadada+0,72c8e4+20,dadada+39,c66b6e+60,dadada+100&0.6+0,0.6+100 */
			background: -moz-linear-gradient(left, rgba(218,218,218,0.6) 0%, rgba(114,200,228,0.6) 20%, rgba(218,218,218,0.6) 39%, rgba(198,107,110,0.6) 60%, rgba(218,218,218,0.6) 100%); /* FF3.6-15 */
			background: -webkit-linear-gradient(left, rgba(218,218,218,0.6) 0%,rgba(114,200,228,0.6) 20%,rgba(218,218,218,0.6) 39%,rgba(198,107,110,0.6) 60%,rgba(218,218,218,0.6) 100%); /* Chrome10-25,Safari5.1-6 */
			background: linear-gradient(to right, rgba(218,218,218,0.6) 0%,rgba(114,200,228,0.6) 20%,rgba(218,218,218,0.6) 39%,rgba(198,107,110,0.6) 60%,rgba(218,218,218,0.6) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99dadada', endColorstr='#99dadada',GradientType=1 ); /* IE6-9 */
		}
		
		h1 {
			font-family: "Montserrat", "Roboto Condensed", sans-serif;
			text-transform: uppercase;
			margin-bottom: 10px;
			color: #3e99b5;
		    text-shadow: 7px 3px 7px rgb(255, 255, 255), 0 -1px 0 rgba(0,0,0,.5);
		}
		
		.intro {
			max-width: none;
		}
		

		p {
			line-height: 1.35;
		}

		.itemCount {
			font-size: 19px;
		}
		.filtering .itemCount {
			display: none;
		}
		
		
		
		
		/* FILTER UI */
		
		.limitHD {
			color: black;
			font-size: 18px;
			font-weight: 700;
			text-transform: uppercase;
			padding-bottom: 0;
			display: none;
			float: left;
			padding: .5rem .5rem 0 0;
		}
		
		.filtering .limitHD {
			display: block;
			padding-top: 10px;
		}
		
		#addFilter {
			font-weight: 300;
			font-size: 18px;
			float: left;
			display: block;
			margin: 5px 0 0 0;
		}
		

		.filters {
			float: left;
			display: block;
		}
		
		.filters div {
			float: left;
			display: block;
		}

		.filtering .filters div + #addFilter {
			margin-left: 1rem;
		}

		
		.topicsEnabled .filter:before {
			content: "topic: ";
			text-transform: uppercase;
			font-size: 12px;
			color: #666666;
		}
		
		#filterChoices {
			position: absolute;
			background: #eaeaea;
			padding: 0 1rem 1rem 1rem;
			z-index: 100;
			left: 50%;
			width: 500px;
			margin-left: -250px;
			box-shadow: 0 7px 9px rgba(0,0,0,.5);
		}
		/*stopping FOUC */
		#filterChoices.start {
			top: 100%;
		}
		
		#filterChoices.open {
		}
		
		#filterChoices .tabSet {
			top: 0;
		}

		#filterChoices .tab {
			cursor: pointer;
			vertical-align: top;
			display: inline-block;
			background: #cccccc;
			font-size: 18px;
			font-weight: normal;
			text-transform: uppercase;
			padding: .6rem 1rem;
		}
		
		#filterChoices .tab.selected {
			background: #3e99b5; /* #438da5;*/
			color: white;
		}
		
		#filterChoices .choices {
			display: none;
			padding: .5rem;
			background: #cccccc;
		}
		#filterChoices .choices.selected {
			display: block;
			background: #3e99b5;
		}
		
		.filter,
		.availableFilter {
			display: inline-block;
			background: #ffffff;
			padding: .25rem .5rem;
			margin: .25rem;
			cursor: pointer;
			line-height: 1.5;
		}
		
		.remover {
			display: inline-block;
			margin-left: .5rem;
		}
		
		
		button {
			border: none;
			background: #3e99b5; /* #438da5;*/
			font-size: 19px;
			color: white;
			padding: 1px 8px 3px 8px;
			margin: .25rem;
			cursor: pointer;
			line-height: 1.5;
			border-radius: 3px;
		}
	
		
		
		
		.contactSheet {
			max-width: none;
			background: #efefef;
			padding: 30px;
			box-shadow: inset 0px 15px 56px 9px rgba(0, 0, 0, 0.09);
		}


		#columns {
			background: none;
			clear: both;
		}
		
		.contactSheet #columns {
			padding-top: 2rem;
			background: none;
		}
		
		.tileColumn {
			box-sizing: border-box;
			float: left;
			min-height: 500px;
		}

		.col2s {
			width: 48.5%;
		}
		.col2s + .col2s {
			margin-left: 3%;
		}

		
		.col3s {
			width: 31.5%;
		}
		.col3s + .col3s {
			margin-left: 2.625%;
		}

		.col4s {
			width: 23%;
		}
		.col4s + .col4s {
			margin-left: 2.66%;
		}

		
		.col5s {
			width: 18%;
		}
		.col5s + .col5s {
			margin-left: 2.5%;
		}

		.col6s {
			width: 15%;
		}
		.col6s + .col6s {
			margin-left: 1.99%;
		}
		
		#columns {
		}
		
		#columns:after {
			clear: both;
			content: "";
			display: block;
			height: 0;
		}
		
		
		/* this is essentially for non-JS, as JS moves them out of #tileLoadArea
		 */
		#tileLoadArea .item {
			display: inline-block;
			width: 33%;
			opacity: 0;
			text-align: center;
			vertical-align: top;
		}
		
		#tileLoadArea .item	img {
			width: auto;
		}
		
		
		.item {
			box-sizing: border-box;
			margin: 0 0 2rem 0;
			background: white;
			cursor: pointer;
			opacity: 0;
			overflow: hidden;
			box-shadow: 0 0 15px rgba(140,140,140,.25) ;
		}

		.item .itemTitle0,
		.item .itemTitle1 {
			font-size: 18px;
			margin-top: 0;
		}
		
		.item img {
			width: 100%;
			height: auto;
		}
		
		.item .meta {
			padding: 1rem;
		}

		.item .metadata,
		.item .description,
		.item .creator0,
		.item .creator1,
		.item .sharing-icons,
		.item .fullRecord {
			display: none;
		}

		.item.selected {
		}
		
		#detailsMask {
			z-index: 100;
			top: 0; left: 0;
			display: none;
			position: fixed;
			width: 100%;
			height: 100%;
			background: rgba(255,255,255,.7);
		}
		
		#detailsMask {
			z-index: 99;
			background: rgba(189, 189, 189, 0.85);
		}
		
		

		.spacer {
			height: 0;
		}
		

		#detailsBox {
			z-index: 200;
			display: none;
			width: 100%;
			position: absolute;
			left: 0;
			overflow: hidden;
			background: white;
		}
		
		#detailsBox .closer {
			display: block;
			color: #a0a0a0;
			font-size: 40px;
			font-family: Arial, sans-serif;
			float: right;
			padding: .5rem;
			cursor: pointer;
		}
		
		#detailsContent {
			padding: 30px;
		}
		
		#detailsBox .meta {
			box-sizing: border-box;
			float: left;
			width: 40%;
			margin-right: 4%;
		}
		
		#detailsBox .bigImg {
			float: right;
			width: 55%;
			box-shadow: none;
		}
		
		#detailsBox img {
			margin: 0 0 1rem 0;
			width: 100%;
			height: auto;
		}

		#detailsBox.wideImage .meta {
			float: none;
			width: auto;
		}
		
		#detailsBox.wideImage .bigImg {
			float: none;
			width: 90%;
			margin: 0 0 1rem 0;
		}
		
		#detailsBox .itemTitle0 {
			font-style: italic;
			margin-top: 0;
		}

		#detailsBox .itemTitle1 {
			font-size: 25px;
			margin-top: 0;
		}
		
		#detailsBox .creator1 {
			font-size: 18px;
			margin-bottom: .5rem;
		}
		
		#detailsBox .date0,
		#detailsBox .creator0 {
			display: none;
		}
		
		#detailsBox .metadata{
			font-family: "Helvetica", Arial, sans-serif;
			margin: 0 0 .5rem 0;
			font-weight: 300;
			padding: 0;
			font-size: 14px;
		}
		
		#detailsBox .description {
			padding-top: 1rem;
		}
		
		#detailsBox .fullRecord {
			display: block;
			box-shadow: none;
		}
		
		
		#detailsContent::after {
			content: " ";
			display: table;
			clear: both;
		}
		
		
		
	/* credit loading cube animation to: http://tobiasahlin.com/spinkit/ */
	
	#loadingAni {
		overflow: hidden;
		height: 0;
	}
	
	#loadingAni.showing {
		height: 900px;
	}
	
	.sk-cube-grid {
		width: 40px;
		height: 40px;
		margin: auto;
		padding: 60px 0 800px 0;
	}
	
	.sk-cube-grid:after {
		clear: both;
	}
	  
	.sk-cube-grid-col {
	  width: 28%;
	  float: left;
	}
	.sk-cube-grid-col + .sk-cube-grid-col {
		margin-left: 8%;
	}
	  
	.sk-cube-grid .sk-cube {
	  width: 100%;
	  height: 20px;
	  margin-bottom: 3px;
	  background-color: #999;
	  transform: scale3D(0, 0, 1);
	  -webkit-animation: sk-cubeGridScaleDelay .6s infinite ease-in-out;
			  animation: sk-cubeGridScaleDelay .6s infinite ease-in-out; 
	}


	  .sk-cube-grid .sk-cube1 {
		height: 12px;
		-webkit-animation-delay: 0s;
				animation-delay: 0s; }
	  .sk-cube-grid .sk-cube2 {
		height: 20px;
		-webkit-animation-delay: 0.55s;
				animation-delay: 0.55s; }
	  .sk-cube-grid .sk-cube3 {
		height: 10px;
		-webkit-animation-delay: 1.1s;
				animation-delay: 1.1s; }
				
				
	  .sk-cube-grid .sk-cube4 {
		height: 16px;
		-webkit-animation-delay: 0.15s;
				animation-delay: 0.15s; }
	  .sk-cube-grid .sk-cube5 {
		height: 12px;
		-webkit-animation-delay: 0.7s;
				animation-delay: 0.7s; }
	  .sk-cube-grid .sk-cube6 {
		height: 14px;
		-webkit-animation-delay: 1.2s;
				animation-delay: 1.2s; }
				
				
	  .sk-cube-grid .sk-cube7 {
		height: 10px;
		-webkit-animation-delay: 0.3s;
				animation-delay: 0.3s; }
	  .sk-cube-grid .sk-cube8 {
		height: 12px;
		-webkit-animation-delay: 0.45s;
				animation-delay: 0.45s; }
	  .sk-cube-grid .sk-cube9 {
		height: 19px;
		-webkit-animation-delay: .95s;
				animation-delay: .95s; }


	  @keyframes sk-cubeGridScaleDelay {
		20%, 60% {
		  -webkit-transform: scale3D(1, 1, 1);
				  transform: scale3D(1, 1, 1);
		} 0%, 5%, 80%, 100% {
		  -webkit-transform: scale3D(0, 0, 1);
				  transform: scale3D(0, 0, 1);
		} 
	  }
		
		
	
	
	.muchMore {
	    width: 80%;
		margin: auto;
		padding: 1rem;
	}
		
		
		
		
		
		
	@media(max-width: 500px) {

		#filterChoices {
			left: 0;
			top: 10%;
			position: fixed;
			max-height: 90%;
			width: 90%;
			margin-left: 0;
		}
	}