.subsection {
	margin: 1em 0;
	background-color: #efe4d2;
	color: #663300;
}

.subsection div {
	padding: 1em;
}

.subsection > div > .fa {
	font-size: 30pt;
	color: #663300;
	float: right;
	margin: 10px;
}

.subsection p {
	font-size: 10pt;
	text-indent: 0;
}

@media screen and (min-width: 641px) {

	.subsection {
		margin: 0 1em 1em 0;
		display: inline-block;
		width: 46%;
		vertical-align: top;
		cursor: pointer;
		border: 2px solid transparent;
		-webkit-transition: border-color 1s;
		-moz-transition: border-color 1s;
		-o-transition: border-color 1s;
		transition: border-color 1s;
	}

	.subsection:hover {
		border-color: #663300;
	}

	.subsection div {
		position: relative;
		overflow-y: hidden;
		max-height: 150px;
		-webkit-transition: max-height 1s;
		-moz-transition: max-height 1s;
		-o-transition: max-height 1s;
		transition: max-height 1s;
	}

	.subsection div:before {
		content: '';
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 70px;
		/*background-color: rgb(239, 228, 210);*/
		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(239, 228, 210, 0)), color-stop(1, rgba(239, 228, 210, 100)));
		background-image: -webkit-linear-gradient(top, rgba(239, 228, 210, 0), rgba(239, 228, 210, 100));
		background-image: -moz-linear-gradient(top, rgba(239, 228, 210, 0), rgba(239, 228, 210, 100));
		background-image: -ms-linear-gradient(top, rgba(239, 228, 210, 0), rgba(239, 228, 210, 100));
		background-image: -o-linear-gradient(top, rgba(239, 228, 210, 0), rgba(239, 228, 210, 100));
        z-index: 1;
	}

	.subsection div:after {
		content: '';
		position: absolute;
		left: 50%;
		bottom: 10px;
		border-right: 10px solid transparent;
		border-left: 10px solid transparent;
		border-top: 10px solid #9c632b;
		margin-left: -10px;
        z-index: 2;
	}

	.subsection:hover div {
		position: relative;
		max-height: 500px;
		overflow-y: hidden;
	}

	.subsection:hover div:before {
		background-image: none;
	}

	.subsection:hover div:after {
		border-top: 0;
		border-bottom: 10px solid #663300;
	}

	.subsection > div > .fa {
		font-size: 36pt;
	}

	.subsection p {
		font-size: 12pt;
	}
}

@media screen and (min-width: 961px) {

	.subsection {
		width: 30%;
	}
	
	.subsection > div > .fa {
		font-size: 50pt;
	}
}