.volunteers-grid {
	@include media-query(400px) {
		> .col  {
			width: 95%;
			margin: 0 0 0 2.3%;
		}
	}
	
	.box {
		position: relative;

		&:hover .hover-text {
			opacity: 1;

			> div {
				bottom: 0;
				opacity: 1;
			}
		}
	}

	.hover-text {
		background-color: transparentize($dark-gray, 0.2);
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		text-align: center;
		overflow: hidden;
		opacity: 0;
		@include transition-time(0.5s);

		& > div {
			width: 100%;
			position: absolute;
			bottom: -20%;
			opacity: 0;
			@include transition-time(0.5s);
		}

		h4,
		a {
			color: $white;
		}

		h4 {
			font-size: 20px;
			margin: 0;
			text-transform: uppercase;

			@include media-query(767px) {
				font-size: 16px;
			}
		}

		span {
			display: block;
			font-size: 14px;
			color: $theme-primary-color;
			margin-bottom: 1em;
		}

		.social-links {
			top: 0;
			
			li {
				width: 33.33%;
				margin: 0;
				padding: 0;

				&:first-child {
					a {
						background-color: $facebook-color;
					}

					a:hover {
						background-color: darken($facebook-color, 5%);
					}
				}

				&:nth-child(2) {
					a {
						background-color: $twitter-color;
					}
					a:hover {
						background-color: darken($twitter-color, 5%);
					}
				}

				&:last-child {
					a {
						background-color: $linkedin-color;
						border-right: 0;
					}
					a:hover {
						background-color: darken($linkedin-color, 5%);
					}
				}
			}

			a {
				padding: 0;
				display: block;
				font-size: 34px;
				padding: 12px 0;
				border-right: 1px solid $dark-gray;

				@include media-query(767px) {
					font-size: 20px;
				}
				
				&:hover {
					color: $white;
				}
			}
		}
	}
}