/**** TWIN ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ****/
.has-float::before,
.has-float::after {
	clear: both;
	content: '';
	display: block;
}

/**** ISOTOPE ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ****/
.tpfo-iso-notfirst-grid,
.tpfo-iso-notfirst-grid + .tpfo-iso-grid-footer {
	display: none;
}
.tpfo-iso-container {
	overflow: hidden;
}
.tpfo-iso-grid {
	list-style-type: none;
	margin: 0 -10px;
	padding: 0;
}
.tpfo-iso-grid-footer {
	text-align: center;
}
.tpfo-iso-notfirst-grid.on + .tpfo-iso-grid-footer {
	display: block;
}
.tpfo-iso-more-button {
	margin: 20px 0;
}

/**** REFERENCE ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ****/
.tpfo-ref-iso-item {
	width: 25%;
}
.tpfo-ref-item-outer {
	padding: 10px;
}
.tpfo-ref-item {
	border: 1px solid rgba(0, 0, 0, 0.1);
	display: block;
	overflow: hidden;
	position: relative;
}
.tpfo-iso-image {
	max-width: 100%;
	vertical-align: top;
	width: 100%;
}
.tpfo-ref-item-info {
	height: 100%;
	position: absolute;
	top: 100%;
	transition: top 0.4s;
	width: 100%;
}
.tpfo-ref-item-info-content {
	padding: 20px;
}
.tpfo-ref-item:hover > .tpfo-ref-item-info {
	top: 0;
}

/**** MEDIA QUERIES ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ****/
@media screen and (max-width: 768px) {
	.tpfo-ref-iso-item {
		width: 50%;
	}
}
@media screen and (max-width: 425px) {
	.tpfo-ref-iso-item {
		width: 100%;
	}
}