/* Controls
---------------------------------------------------------------------- */

.toggle-filter{
	display: none;
}

.controls {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 40px;
}

.filter {
	position: relative;
	cursor: pointer;
	font-size: 16px;
	color: #3B1E00;
	background: transparent;
	border-bottom: solid 3px transparent;
	transition: background 150ms;
	line-height: 30px;
	padding: 5px 30px;
	border-radius: 4px;
	width: 22%;
	text-align: center;
	margin-bottom: 30px;
}

.filter img{
	width: 25px;
	position: absolute;
	right: 0;
	top: -5px;
}




.filter.active{
	font-weight: bold;
	border-bottom: solid 3px #FFDD00;
	color: #3B1E00;
}

.mixitup-control-active[data-filter]:after {
	background: transparent;
}

.filter:last-of-type {
	border-radius: 0 3px 3px 0;
}

.filter[data-filter] + .filter[data-sort] {
	margin-left: .75rem;
}


/* Container
---------------------------------------------------------------------- */

.container {
	position: relative;
}


/* Target Elements
---------------------------------------------------------------------- */

.Pie_List .mix,
.Pie_List .gap {
	display: none;
	vertical-align: top;
}

.Pie_List .mix {
	background: transparent;
	padding: 10px;
}


/* Grid Breakpoints
---------------------------------------------------------------------- */


/* 3 Columns */

.Pie_List .mix,
.Pie_List .gap {
	width: calc(100%/3 - (((4 - 1) * 1rem) / 4));
}

/* 2 Columns */
@media screen and (max-width: 768px) {
	.Pie_List .mix,
	.Pie_List .gap {
		width: calc(100%/2 - (((3 - 1) * 1rem) / 3));
	}
	.filter{
		width: 50%;
	}
}

/* 1 Columns */
@media screen and (max-width: 480px) {
	.Pie_List .mix,
	.Pie_List .gap {
		width: 100%;
		padding: 10px 0;
	}
	.filter{
		width: 100%;
	}
}