/* CSS Document */

@charset "UTF-8";
/* CSS Document */



.qbl_fab {
	position: fixed;
	bottom: 32px;
	right: 32px;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	background: #f44336;
	box-shadow: 1px 2px 4px grey;
	z-index: 999999!important;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.qbl_fab:hover {
	cursor: pointer;
}

.qbl_fab img {
	width: 45%;
	transform: rotate(45deg);
	transition: 400ms;
}

.qbl_box {
	z-index: 999990!important;
	position: fixed;
	bottom: 44px;
	right: 5px;
	height: 0px;
	transition-delay: 300ms;
	width: 80px;
	transition: 500ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.item {
	overflow: hidden;
	border-radius: 50%;
	transition: 400ms ease-in;
	width: 44px;
	height: 44px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	box-shadow: 1px 1px 3px grey;
}

.item1 {
	transition-delay: 200ms;
	background: #1565c0;
}

.item2 {
	transition-delay: 200ms;
	background: #ff4336;
}

.item3 {
	transition-delay: 200ms;
	background: #405DE6;
}

.item4 {
	transition-delay: 200ms;
	background: #29b6fc;
}

.item5 {
	transition-delay: 200ms;
	background: #00CB94;
}


.item6 {
	transition-delay: 200ms;
	background: green;
	margin-bottom: 5px;
}

.item:hover {
	cursor: pointer;
} 

.item:hover img{
	transform: rotate(360deg);
	transition: all 500ms;
} 

.box-active{
	height: 400px;
}

.fab-active img {
	transform: rotate(270deg);
	width: 40%;
}