.page-template-portfolio {

	.site-main {

		.button-group {
			text-align: center;

			button {
				font-size: 1.25em;
				font-weight: 500;
				color: #5c5c5c;
				background: none;
				border: none;
				padding: 0;
				text-transform: capitalize;
				margin-right: 2%;
				margin-left: 2%;
				margin-bottom: 20px;

				&:hover, &.is-checked {
					color: $primary_color;
				}
			}//button
		}//.button-group

		.portfolio-block {
			float: left;
			width: 33.33%;
			padding: 15px;

			&:hover .portfolio-block-content {
				opacity: 1;
				filter: alpha(opacity=100);
				visibility: visible;
			}
		}//.portfolio-block

		.portfolio-block-content {
			position: absolute;
			top: 15px;
			left: 15px;
			right: 15px;
			bottom: 15px;
			background: rgba(0,0,0,0.6);
			text-align: center;
			display: flex;
			flex: 1;
			flex-direction: column;
			justify-content: center;
			padding: 15px;
			opacity: 0;
			visibility: hidden;
			@include transition(all ease 0.35s);

			.portfolio-title {
				margin: 0;
				color: #fff;
				font-weight: 600;
				font-size: 1.375em;
			}//.portfolio-title

			.portfolio-category {
				font-size: 0.875em;
				color: #c7c7c7;

				.port-cat-item {
					display: inline-block;
					vertical-align: middle;

					&:after {
						content: "/";
						margin: 0 5px;
					}

					&:last-child {

						&:after {
							display: none;
						}
					}
				}
			}//.portfolio-category
		}//.portfolio-block-content
	}//.site-main
}//.page-template-portfolio

@media screen and (max-width: 1024px) {
	.page-template-portfolio {

		.site-main {

			.portfolio-block {
				width: 50%;
			}//.portfolio-block
		}//.site-main
	}//.page-template-portfolio
}//max-width: 1024px

@media screen and (max-width: 767px) {
	.page-template-portfolio {

		.site-main {

			.button-group {

				button {
					font-size: 1em;
				}
			}//.button-group

			.portfolio-block {
				width: 100%;
				float: none;
				padding-left: 0;
				padding-right: 0;
			}//.portfolio-block

			.portfolio-block-content {
				left: 0;
				right: 0;
			}//.portfolio-block-content
		}//.site-main
	}//.page-template-portfolio	
}//max-width: 767px