/**
 * UI grid
 */

.contentContainer {
	max-width: 1140px;
	border-bottom: 0;
}

@media screen and (min-width: 650px) and (max-width: 979px) {
	.opo-project-filter-inner > div {
		width: 30%;
	}

	#opo-project-selection-filter,
	#opo-project-region-filter {
		margin-bottom: 2.5em;
	}
}

/**
 * List
 */

.opo-project-list-container {
	padding: 0 20px;
}

.opo-project-list {
	margin: 0;
	border-top: 1px solid #c7dfe9;
	list-style: none;
	overflow: hidden;
}

.opopl-project {
	overflow: hidden;
	padding: 1.5em 0;
	border-bottom: 1px solid #c7dfe9;
}

.project-thumb {
	float: left;
	height: 140px;
	margin-right: 30px;
	background: rgba(239, 245, 249, 1);
}

.opopl-project-body {
	margin-left: 170px;
}

.oc-country,
.oc-partner-name {
	position: relative;
	line-height: 24px;
	color: #999;
}

.oc-country:after {
	content: '';
	display: inline-block;
	height: 17px;
	margin: 3px .2em 0 .4em;
	border-right: 1px solid #b8c4de;
	vertical-align: top;
}

.oc-flag {
	display: inline-block;
	height: 24px;
	margin-right: .3em;
	vertical-align: top;
}

.opopl-project h3 {
	margin-top: .55em;
}

.opopl-project:hover h3 {
	color: #c6285f;
}

@media screen and (max-width: 649px) {
	.oc-partner-name,
	.opopl-project p {
		display: none;
	}

	.opopl-project-body {
		margin-left: 105px;
	}

	.project-thumb {
		width: 80px;
		height: 80px;
		margin-right: 25px;
	}

	.oc-country:after {
		content: none;
	}

	.opopl-project h3 {
		margin-right: 25px; /** Make room for the arrow */
	}

	.opopl-project .opoplp-detail-page {
		visibility: hidden;
		position: absolute;
		right: 0;
		top: 50%;
		width: 20px;
		height: 20px;
		margin-top: -10px;
		padding: 0;
		overflow: hidden;
		text-align: center;
		transition: right .2s;
	}

	.opopl-project .opoplp-detail-page:before {
		font-family: "icons";
		font-style: normal;
		font-weight: normal;
		speak: none;
		display: inline-block;
		text-decoration: inherit;
		width: 1em;
		margin-right: 0;
		text-align: center;
		font-variant: normal;
		text-transform: none;
		line-height: 1em;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;

		content: '\21d2';
		visibility: visible;
		color: #1586be;
	}

	/** Hover styling */
	.opopl-project:hover .opoplp-detail-page:before {
		color: #c6285f;
	}

	.opopl-project:hover .opoplp-detail-page {
		right: -4px;
	}
}

/**
 * Details
 */

#opo-result-count-container {
	padding: 0;
}

.opo-project-list-count {
	display: inline-block;
	float: right;
	color: #999;
	margin: 1.5em 0 1em;
}

@media screen and (min-width: 980px) {
	.opo-project-list-count {
		display: none;
	}
}