/*
============================================
STYLING SPECIFIC TO OUTREACH MINISTRIES LIST
============================================
*/

/* "Type of Ministry" List */

#outreach-info {
	overflow: hidden; /* added this to correctly scale html height when ministries are hidden via the filter */
}

	#outreach-info #filter {
		list-style-type: none;
		margin: 0;
		padding: 1rem 0;
		overflow: auto; /* Controlling the float that follows */
	}

		#outreach-info #filter a.active {
			background: #E3E5E3;
			color: #444744;
		}

	#outreach-info .ministries li {
		float: left;
		margin: 0;
		padding: 0;
	}

		#outreach-info .ministries li a {
			background: #666;
			color: #FFF;
			display: block;
			font-size: .75em;
			font-weight: bold;
			margin: 0 5px 5px 0;
			padding: 5px 10px;
			position: relative;
			text-decoration: none;
		}

			#outreach-info .ministries li a[data-selected='true'] {
				color: #383838;
				text-decoration: none;
			}

	/* Ministry info cards */

	#outreach-info #ministries_main {
		z-index: 100;
		clear: both;
		position: relative;
	}

		#outreach-info #ministries_main .item {
			background: #FFF;
			cursor: default;
			margin: 10px 25px 5px 0;
			position: relative;
			text-align: left;
			border: 1px solid #e3e5e3;
		}

			#outreach-info #ministries_main .item a {
				text-decoration: none;
				background-image: none; /* removes the default underline graphic */
				color: #444744; /* otherwise link text turns red */
				display: block;
				float: left;
			}

				#outreach-info #ministries_main .item a:hover,
				#outreach-info #ministries_main .item a:active {
					box-shadow: 0 2px 5px rgba(0,0,0,0.5);
					background-color: #FFF;
				}

	#outreach-info .ministries .ministry {
		height: 290px; /* This declaration keeps the horizontal grid even */
	}

		#outreach-info .ministries .ministry .img-container {
			height: 125px;
			margin: 20px 20px 5px 20px;
			width: 200px;
			display: block;
		}

		#outreach-info .ministries .ministry h4 {
			font-size: 1.2em;
			line-height: 1;
			color: #242B65;
			margin-left: 20px;
			margin-bottom: 10px;
			width: 200px;
			padding: 0;
		}

		#outreach-info .ministries .ministry h5 {
			font-size: .8em;
			font-weight: bold;
			line-height: 1;
			color: #383838;
			margin-bottom: 8px;
			width: 200px;
			margin-left: 20px;
			padding: 0;
		}

		#outreach-info .ministries .ministry p {
			font-size: 14px;
			line-height: 1.2;
			width: 200px;
			margin-left: 20px;
			height: 51px;
			position: relative;
			overflow: hidden;
			padding: 0;
		}

			#outreach-info .ministries .ministry p::after {
				position: absolute;
				bottom: 0;
				right: 0;
				content: " (...)";
				float: right;
				background-color: white;
				text-align: right;
				font-weight: bold;
				color: #25486d;
				padding: 0 0 4px 9px;
			}

#main #outreach-info .ministries > p {
	font-weight: bold;
	padding-left: 0;
	padding-top: 1rem;
	padding-bottom: 0;
}


.outreach .info-block {
	text-align: center;
}

	.outreach .info-block img {
		width: 40%;
	}

/* Medium Screen and larger */
@media screen and (min-width: 40em) {
	.outreach .info-block {
		text-align: left;
	}

		.outreach .info-block img {
			width: 75%;
		}
}

/* 	Little bit of Foundation video overriding going on. */

#main .outreach .responsive-embed {
	padding-bottom: 56.25%; /* should correct the video ratio */
}