_components.scss

/*
 * Reusable Components Style
 */

.button{
	display: inline-block;
	background: $secondary-color;
	background: linear-gradient($secondary-color,#ec8940);
	border-bottom: 1px solid darken(#ec8940, 10%);
	box-shadow: 0 1px 1px rgba(0,0,0,.1);
	padding: 10px 25px;
	border-radius: 30px;
	color: #86450c;

	img{vertical-align: middle}
}

.space{
	border: none;
	height: 50px;
}


.feature{
	text-align: center;
	.feature-icon{
		width: 130px;
		height: 130px;
		border-radius: 50%;
		background: $accent-color;
		text-align: center;
		margin: 0 auto 30px;
		padding-top: 25px;
	}

	.feature-title{
		@include em(30);
		color: $accent-color;
	}
}

.pastor{
	text-align: center;
	margin-bottom: 30px;

	.pastor-image{
		width: 170px;
		height: 170px;
		border-radius: 50%;
		margin: 0 auto 10px;
	}
	.pastor-name{
		@include em(18);
		color: white;
		margin: 0 0 10px;
	}
	.date{
		color: #aea1c3;
		@include em(14);

	}
}
.text-center{
	text-align: center;
}
.text-right{text-align: right;}

.prev-events,.next-events{
	border-radius: 30px;
	border: 1px solid lighten($body-color,10%);
	padding: 5px 10px;
	display: inline-block;
	margin: 0 10px 30px;
	img{display: block}

	&:hover{
		border-color: darken($body-color,10%);
	}
}
.prev-events{padding-right: 50px;}
.next-events{padding-left: 50px;}
.event{
	text-align: center;
	margin-bottom: 30px;

	.event-image{
		width: 100%;
		max-width: 100%;
		height: auto;
		margin-bottom: 20px;
	}
	.event-title{
		margin-bottom: 20px;
		@include em(18);
	}
	.event-meta{
		margin-bottom: 30px;
		span{
			margin: 0 10px;
			.fa{
				margin-right: 5px;
				display: inline-block;
			}
		}
	}
}

.seremon-list{
	list-style: none;
	margin-bottom: 30px;

	li{
		padding: 30px 0;
		border-top: 1px solid rgba(255,255,255,.2);
		color: #aea1c3;
		&:last-child{
			border-bottom: 1px solid rgba(255,255,255,.2);
		}
	}

	.seremon-title{
		margin-bottom: 10px;
		a{
			color: $secondary-color;
		}
	}
	.seremon-meta{
		margin-bottom: 30px;
		span{
			margin-right: 20px;

			strong{color:#79619f}
			.fa{margin-right: 5px;}
		}
	}
}
.family-list{
	text-align: center;
	margin: 0 -15px;
}
.family{
	width: 160px;
	height: 160px;
	border-radius: 50%;
	overflow: hidden;
	display: inline-block;
	margin: 0 15px 30px 15px;
	position: relative;

	img{
		width: 100%;
		max-width: 100%;
	}

	&:hover{
		figcaption{
			transform: scale(1);
			opacity: 1;
		}
	}

	figcaption{
		background: rgba($accent-color,.8);
		@include cover;
		display: block;
		text-align: center;
		color: white;
		padding-top: 70px;
		transition: .3s ease;
		opacity: 0;
		transform: scale(0);
		border-radius: 50%;
		cursor: pointer;

		.family-name{margin-bottom: 10px;}

		.arrow{
			width: 29px;
			height: 13px;
			display: block;
			margin: 0 auto;
			background: url(images/arrow.png) no-repeat;
		}
	}
}

.contact-detail{
	text-align: center;
	margin-bottom: 30px;

	span{
		margin: 0 10px;
		@include em(18);
		color: #aea1c3;
		img{
			vertical-align: middle;
			margin-right: 5px;
		}
	}
}

.contact-form{

	.control{
		position: relative;
		margin-bottom: 20px;
		input,textarea{
			width: 100%;
			padding: 20px 20px 20px 60px;
			border-radius: 40px;
			border: none;
			background: #31204d;
			box-shadow: inset 0 2px 2px rgba(0,0,0,.3);
			border: 2px solid transparent;
			color: $secondary-color;
			transition: .3s ease;

			&:hover,&:focus{
				border: 2px solid $secondary-color;
			}
		}
		textarea{min-height: 220px}

		.fa,.icon{
			position: absolute;
			top: 20px;
			left: 20px;
		}
	}
}

.map{
	min-height: 450px;
}