@import url(http://weloveiconfonts.com/api/?family=entypo);
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}  /* toggle icon */

/* ------ */
/* GENERAL STYLES - NOT necessary for search */
/* ----- */
html, body{
	color:rgb(62, 62, 62);
	font-family: 'Roboto', sans-serif;
	font-size:16px;
	line-height:1.375em;
	padding:10px 30px;
}

/* ------ */
/* SEARCH */
/* ----- */
#searchContainer {  /*  can change item header color here */
	margin-bottom: 20px;
}
#searchContainer input {
	font-size: 16px;
	line-height:1.22222em;
	outline:none;
	padding:5px;
}
#searchContainer h1 {
	font-size: 28px;
	line-height:1.25em;
}
#search{
	width:90%;
}
.searchresults {
	margin-bottom:170px;
	text-align: left;
}
.searchresults li {
	border-bottom: 1px solid #ddd;
	display: inline-block;
	font-size: 10pt;
	list-style-type: none;
	margin:-5px 0 0 -20px; /* results indent */
	padding: 5px 5px 5px 0;
	overflow: hidden;
	transition: background 0.5s ease;
	width: 90%;
}
.searchresults li:hover {
 	 background: #f9f9f9;  /*  changes li colors on hover  */
 	 color: #000;
	 cursor: pointer;
}
.searchresults li img { /* image thumbnails */
	float: left;
	height: 100px;
	padding: 0 10px 0 0;
	transition: all 250ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
}
.searchresults h2 {
	font-size: 18px;
	line-height:1.22222em;
	margin: 3px 0 0 0;
}
.searchresults p{
	color:rgba(29, 29, 29, 1);
}
.searchresults a{
	text-decoration: none;
}
#update{  /* results container */
	max-height:100vh;
	overflow-y:scroll;
}

/* ************************** */
/* GRID / LIST TOGGLE STYLES */
/* ************************ */
.toggler {
  color: #A1A1A4;
  cursor: pointer;
  font-size: 1.25em;
  margin-left: 8px;
  text-align: center;
}
.item {
  transition: all 1s ease;
  width: 100%;
}
.item.box {
	border:5px solid #fff;
	float: left;
	height:230px;
	margin-bottom: 2px;
	overflow:hidden;
	position:relative;
	width:230px;
}
.item.box .inner{
	background-color: rgba(255, 255, 255, 0.55);
	height:100%;
	left:0;
	opacity:0;
	padding:10px;
	position:absolute;
	top:0;
	transition: opacity 300ms;
	width:100%;
}
.item.box:hover > .inner {
	opacity: 1;
}
.item.box .inner p, .item.box .inner h2{
	max-width:170px;
}
.item.box img{
	height: 100%;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%,-50%);
	width: auto;
}