.m_filters {
/*	align-self: flex-start;*/
	grid-area: filters;
}
/*
.m_filters ul {
	width: 100%;
	height: 100%;
}
*/

.m_filters ul.f_menu.G_flex {
	align-items: center;
	position: relative;
	height: 100%;
	left: 2%;
	/*	justify-content: var( --m_jst_filter );*/
}

ul.f_menu > li {
	width: var( --m_width_li_filter );
	height: var( --m_height_li_filter );
	grid-template-columns: var( --m_height_li_filter ) auto 0 0;
	grid-template-rows: 100% auto;
	grid-template-areas: "f_icon f_text f_select_icon f_select_div" "f_icon f_select f_select_icon f_select_div";
/*	transition: 0.25s;*/
	background-color: var( --main_bkg_rgb_color_0-25 );
}

ul.f_menu li.f_item:hover {
/*	border-color: cyan;*/
	box-shadow: inset 0 0 10px rgba(0,255,255,0.25);
}
ul.f_menu li.f_item:hover .fi_ico {
	background-position: right;
}


ul.f_menu > li.f_item.G_grid {
	align-items: center;
}
ul.f_menu > li .fi_name {
	grid-area: f_text;
	padding-left: 7%;
	font-size: 1.5vw;
	transition: font-size 0.25s;
}

ul.f_menu > li .fi_ico {
	grid-area: f_icon;
	background-color: white;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: left;
	cursor: pointer;
}

ul.f_menu > li .fi_selected {
	grid-area: f_select;
	padding-left: 7%;
	height: 0;
	font-size: 0;
	transition: height 0.25s 0.25s, font-size 0.25s;
}

.fi_selected .row_pic {
 display: none;
 position: absolute;
 top: 0;
 right: 0;
 width: calc(var(--m_height_li_filter) / 2 - 0.5vw );
 height: calc( var(--m_height_li_filter) - 1vw );
 margin: 0.5vw 0.5vw 0.5vw 0;
 background: url(/imgs/filters/arr_pic.png) no-repeat left;
 background-size: cover;
 cursor: pointer;
}
li.f_item.active .row_pic {
 display: block;
}
li.f_item.active:hover .row_pic {
 background-position: center;
}
li.f_item.active.selecting .row_pic {
 background-position: right;
}

ul.f_menu > li .fi_selection {
	display: none;
	grid-area: f_select_div;
	z-index: 100;
}

.fi_selection > ul {
	margin-top: -35%;
}
.fi_selection li {
	height: var( --m_height_li_filter );
	margin-bottom: 15%;
	font-size: 0.75em;
	border-radius: calc( var( --m_height_li_filter )/2 );
	cursor: pointer;
	background-color: var( --CTAcolorHSL );
}

li.f_item.active.selecting {
	background-color: var( --CTAcolorHSL );
}

/* ACTIVE */
li.f_item.active {
	grid-template-columns: var( --m_height_li_filter ) auto calc( var( --m_height_li_filter )/2 ) 0;
	grid-template-rows: 45% auto;
	background-color: var( --secondGreenColorHSL );
}
/*
ul.f_menu li.f_item.active .fi_ico {
	background-position: right;
}
*/
ul.f_menu li.f_item.active:hover .fi_ico {
	background-position: right;
}
ul.f_menu li.f_item.active .fi_name {
	font-size: 0.55em;
}
ul.f_menu li.f_item.active .fi_selected {
	height: 80%;
	font-size: 0.75em;
	transition: height 0s, font-size 0.25s;
}

/* SELECTING */
ul.f_menu li.f_item.selecting .fi_selection {
	display: block;
	width: 9vw;
}

li[data-f_id="F_01"] .fi_ico {
	background-image: url("/imgs/filters/F_01.png");
}
li[data-f_id="F_02"] .fi_ico {
	background-image: url("/imgs/filters/F_02.png");
}
li[data-f_id="F_03"] .fi_ico {
	background-image: url("/imgs/filters/F_03.png");
}
li[data-f_id="F_04"] .fi_ico {
	background-image: url("/imgs/filters/F_04.png");
}
li[data-f_id="F_05"] .fi_ico {
	background-image: url("/imgs/filters/F_05.png");
}