/* GENERAL STYLES FOR EXAMPLE PAGE */
@import url('https://fonts.googleapis.com/css?family=Raleway:100, 300,400');
@mainColor: #ff4062;

.nbuttons {
  bottom: 16px;
  position: fixed;
  margin: 1em;
  right: -30px;
  z-index: 995;
}

/* STYLE 1 VERTICAL */
.action-button {
	position: absolute;
	.ab-link {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		background: #e94761;
		color: #fff;
		margin: 0;
		padding: 0;
		position: relative;
		display: flex;
    justify-content: center;
    align-items: center;
		font-size: 80px;
		font-weight: 100;
		cursor: pointer;
		transition: all .2s;
		box-shadow: 0px 6px 24px -2px rgba(0, 0, 0, 0.3);
		z-index: 3;
		line-height: 1;
		&:hover {
			transform: scale(1.1) translateZ(0) translateY(0);
			background: #cd2c47;
		}		
	}
	&.open {
			.ab-link {
				transform: rotate(45deg);
				background: #cd2c47;
				&:hover {
					transform: scale(1.1) rotate(45deg) translateZ(0) translateY(0);
				}		
			}
			.action-list {
				span {
					display: block;
					opacity: 0;
				}
				li:hover {
					span {
						opacity: 1;
						transform: scale(0.9) translateZ(0) translateY(0);
					}
				}
			}
		}
	.action-list {
		list-style-type: none;
		margin: 0;
		position: absolute;
		padding: 0;
		transition: all .2s;
		li {
			width: 60px;
			height: 60px;
			background: #fff;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 15px;
			font-size: 25px;
			box-shadow: 0px 6px 24px -2px rgba(0, 0, 0, 0.3);
			cursor: pointer;
			transition: all .2s;
			position: absolute;
    	z-index: 1;
			opacity: 0;
			&:hover {
				transform: scale(1.1) translateZ(0) translateY(0);
				i {
					color: #fff;
				}
			}
			&.active {
				i {
					color: #fff;
				}
				span {
					opacity: 1;
					color: #000;
					background: #fff;
				}
			}
			i {
				color: #fff;
				transition: all .2s;
			}
			span {
				display: none;
				position: absolute;
				left: 80px;
				font-size: 14px;
				background: #fff;
				white-space: nowrap;
				box-shadow: 0px 6px 24px -2px rgba(0, 0, 0, 0.3);
				padding: 3px 12px;
				font-weight: 700;
				transition: all .2s;
			}
		}
	}
}


.action-button.bottom-right {
	bottom: 40px;
	right: 30px;
	.action-list li span {
		right: 80px;
		left: initial;
	}
	.action-list {
		margin-top: -45px;
	}
	li {bottom: 0;}
}