.f-select > span { display: block; --font-size: 1.2rem; padding: 1rem 5rem 1rem 1rem; background: #F5C40F; color: #000; cursor: pointer; font-weight: 700; border-radius: 2px; position: relative; z-index: 1; }
.f-select:after { 
	transition: transform .2s ease;
	content :'';
	position: absolute; top: 50%; right: 1rem; width: .9rem; height: .9rem;
	z-index: 2;
	pointer-events: none;
	
	display: inline-block;
	background: transparent center center no-repeat;
	background-size: contain;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='30px' height='30px' xml:space='preserve'%3E%3Cpolyline points='10,2 23,15 10,28' stroke='%23666666' stroke-width='4' fill='none' /%3E%3C/svg%3E");
}

.f-select:after { transform: translateY(-50%) rotate(90deg); }
.f-select.is-active:after { transform: translateY(-50%) rotate(-90deg); }


.f-select { position: relative; display: block; font-size: .8rem; }
.f-select + .f-select { margin-top: .5rem; }

@media(min-width: 767px){
	.f-select { display: inline-block; }
	.f-select + .f-select { margin-top: 0; margin-left: .5rem; }
}


.f-select ul { position: absolute; z-index: 100; opacity:0; top: 100%; min-width: 100%;  left: 0; right: auto; max-height: 0; background: #fff; padding: 0; white-space: nowrap; box-shadow: 0; border: 1px solid #ccc; overflow: hidden; }
.f-select.is-active  ul { opacity: 1; max-height: 40rem; }

.f-select .all { display: none; }
.f-select.is-act .all { display: block; }

.f-select__item { padding: .5rem 3rem .5rem .75rem; text-decoration: none; cursor: pointer; } 
.f-select__item:hover { background: #f3f3f3; }
.f-select__item--act {  }
.f-select__item.act { background: #ddd; }

.f-select .label-act { display: none; }
.f-select.is-choosen .label { display: none; }
.f-select.is-choosen .label-act { display: block; }