.content-mask-select {
	position: relative;
	overflow: hidden;
	display: block;
	margin: auto;
	width: 210px;
	height: 100%;
	border-bottom: 0px;
	border-radius: 3px;
	box-shadow: 0px 1em 2em -1.5em rgba(0, 0, 0, 0.5);
}

.content-mask-select svg {
	width: 16px;
	stroke: #444;
	position: relative;
	top: 2px;
}

.content-mask-select .option svg {
	margin-right: 10px;
}

.content-mask-select > .toggle {
	pointer-events: none;
	position: absolute;
	z-index: 4;
	right: 1.5em;
	top: 1.8em;
	color: #ccc;
}

.content-mask-select .title,
.content-mask-select .placeholder {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	padding: 1.5em 2em;
	background: white;
	border-top: 1px solid rgba(0, 0, 0, 0.05);
	cursor: pointer;
}

.content-mask-select > input:checked ~ .toggle.svg-arrow-down {
	display: none;
}

.content-mask-select > input:checked ~ .toggle.svg-arrow-up {
	display: block;
}

.content-mask-select > input:checked div.options label.option .title {
	display: none !important;
}

.content-mask-select > input:not(:checked) {
	z-index: 4;
}

.content-mask-select > input:not(:checked) ~ label.option > span.title {
	display: none;
}

.content-mask-select > input:not(:checked) ~ .toggle.svg-arrow-up {
	display: none;
}

.content-mask-select > input:not(:checked) ~ .toggle.svg-arrow-down {
	display: block;
}

.content-mask-select > input:disabled {
	cursor: no-drop;
}

.content-mask-select > span.placeholder {
	position: relative;
	z-index: 0;
	display: inline-block;
	width: 100%;
	color: #999;
	border-top: 0px;
}

.content-mask-select label.option {
	display: block;
	overflow: hidden;
	z-index: 1;
	width: 100%;
	transition: all 1s ease-out;
}

.content-mask-select label.option span.title {
	position: relative;
	z-index: 2;
	transition: background .3s ease-out;
}

.content-mask-select label.option span.title i.icon {
	padding-right: 8px;
	color: #92a8d1;
	position: relative;
	top: 1px;
}

.content-mask-select label.option span.title:hover {
	color: #fff;
	background: #6b96ae;
	box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.1);
}

.content-mask-select input:checked ~ label.option span.title:hover svg {
	stroke: #fff;
}

.content-mask-select label.option input {
	display: none;
}

.content-mask-select label.option input:checked ~ span.title {
	position: absolute;
	display: block;
	z-index: 3;
	top: 0px;
	background: #fff;
	border-top: 0px;
	box-shadow: none;
	color: inherit;
	width: 100%;
}

.content-mask-select-toggle {
	position: absolute !important;
	width: 100% !important;
	height: 57px !important;
	margin: 0 !important;
	border: none !important;
	box-shadow: none !important;
	background: transparent !important;
	opacity: 0;
}