/* List-icon (type: stack).
############################################################ */
.listicon {
	position:relative;
    display:block;
    right:0;
    width:27px;
    height:21px;
    cursor: pointer;
}

.listicon:hover {
	background-color: lavender;
	border-radius:2px;
}

.listicon .listbar1 {
	position:absolute;
	left:2px;
	top:3px;
	display:flex;
	width: 23px;
	height: 3px;
	background-color:rgba(178, 34, 34, 0.0);
	transition: 0.4s;
	}
.listicon .listbar2 {
	position:absolute;
	left:2px;
	top:9px;
	display:flex;
	width: 23px;
	height: 3px;
	background-color:rgba(178, 34, 34, 0.0);
	transition: 0.4s;
	}
.listicon .listbar3 {
	position:absolute;
	left:2px;
	top:15px;
	display:flex;
	width: 23px;
	height: 3px;
	background-color:rgba(178, 34, 34, 0.0);
	transition: 0.4s;
	}
.listicon .listbar4 {
	position:absolute;
	left:2px;
	top:9px;
	display:flex;
	width: 23px;
	height: 3px;
	background-color:rgba(178, 34, 34, 0.0);
	transition: 0.4s;
	}
	
.listdot {
	
	display:block;
	width:3px;
	height:3px;
	margin-right:2px;
	background-color:rgba(178, 34, 34, 1.0);
}

.listbar {
	display:block;
	width:18px;
	height:3px;
	background-color:rgba(178, 34, 34, 1.0);
}

/* Cross */
.listicon-x .listbar1 {
	-webkit-transform:translate(0px,6px) scale(0,0);
	transform:translate(0px,6px) scale(0,0);
}
.listicon-x .listbar2 {
	-webkit-transform:rotate(41deg) scale(1.2,1.0);
	transform:rotate(41deg) scale(1.2,1.0);
}
.listicon-x .listbar3 {
	-webkit-transform:translate(0px,-6px) scale(0,0);
	transform:translate(0px,-6px) scale(0,0);
}
.listicon-x .listbar4 {
	-webkit-transform:rotate(-41deg) scale(1.2,1.0);
	transform:rotate(-41deg) scale(1.2,1.0);
}