/* colours */

.image-grid-container {
	background-color:#222;
	color:#fff;
	border-radius:4px;
}

.image-grid-details-overlay {
	background-color:#222;
	opacity:0.9;
}

.item-active img {
	border:4px solid #3977bb;
	opacity:0.3;
}

/* style */

.image-grid-container {
	position:relative;
	overflow:hidden;
}

.image-grid {
	position:relative;
	overflow:hidden;
	padding:20px 0 10px 0;
}

.image-grid-thumb-outer {
	position:relative;
	overflow:auto;
	overflow-x:scroll;
	margin:auto;
}

.image-grid-thumb {
	white-space: nowrap;
	transition-property: transform;
	transition-timing-function: cubic-bezier(1, 1, 1, 1);
	transition-duration: 600ms;
}

.image-grid-thumb-item {
	margin:auto;
	cursor:pointer;
	height:100px;
	width:100px;
}

.image-grid-thumb-item img {
	margin:0;
	height:100px;
	width:100px;
}

.image-grid img {
	margin:auto;
}

.image-grid .image-grid-move {
	position:absolute;
	cursor:pointer;
	z-index:102;
}

.image-grid .image-grid-prev {
	left:0;
}

.image-grid .image-grid-next {
	right:3px;
}

.image-grid .glyphicon {
	font-size: 40px;
}

.image-grid-details-overlay {
	position:absolute;
	z-index:-100;
	bottom:0;
	left:0;
	right:0;
	top:0;
}

.image-grid-details-container {
	position:absolute;
	z-index:1;
	bottom:0;
	left:0;
	right:0;
}

.image-grid-details-text {
	padding:20px 40px 20px 40px;
	overflow:auto;
	text-align:center;
}

.image-grid-details-toggle {
	text-align:center;
	cursor:pointer;
	padding-bottom:10px;
}

.image-grid-details-toggle .glyphicon {
	font-size: 1.2em;
}

/* Extra Small */
@media(max-width:767px) {
   
	.image-grid {
		padding-bottom:20px;
	}	
	.image-grid img {
		height:150px;
	}
	.image-grid-move {
		top:75px;
	}
	.image-grid-move .glyphicon {
		font-size:2em;
	}
	.image-grid-details-toggle {
		display:none;
	}
}

/* Small */
@media(min-width:768px) and (max-width:991px) {
	
	.image-grid img {
		height:250px;
	}
	.image-grid-move {
		top:125px;
	}
	.image-grid-details-text,
	.image-grid-details-text .glyphicon	{
		font-size:0.8em;
	}
	.image-grid-details-text h4	{
		font-size:1.2em;
	}
}

/* Medium */
@media(min-width:992px) and (max-width:1199px) {
	
	.image-grid img {
		height:350px;
	}
	.image-grid-move {
		top:175px;
	}
	.image-grid-details-text,
	.image-grid-details-text .glyphicon	{
		font-size:1em;
	}
	.image-grid-details-text h4	{
		font-size:1.2em;
	}
}

/* Large */
@media(min-width:1200px) {
	
	.image-grid img {
		height:400px;
	}
	.image-grid-move {
		top:200px;
	}
	.image-grid-details-text .glyphicon	{
		font-size:1em;
	}
}