@charset "utf-8";


input[type="checkbox"] {
display: none;
}

.btn {
	border: none;
	border-radius: 20%;
}

.btn--large {
width: 80px;
height: 80px;
}

.btn--menu:after,.btn--menu:before {
content: "";
display: block;
width: 40px;
height: 4px;
background: #fff;
position: absolute;
top: 38px;
left: 21px;
transition: transform 100ms;
}

.btn--menu:after {
transform: translateY(-5px);
}
.btn--menu:before {
transform: translateY(5px);
}

.btn--cont1 {
	background-color: #ABD5B7;
}
.btn--cont2 {
	background-color: #B3B3B3;
}
.btn--cont3 {
	background-color: #0071BB;
}
.btn--cont4 {
	background-color: #FAAF3B;
}
.btn--cont5 {
	background-color: #009145;
}
.btn--cont6 {
	background-color: #F05A24;
}
.btn--cont7 {
	background-color: #58C2D8;
}


.actions-menu {
	position: fixed;
	width: 80px;
	height: 80px;
	right: 50px;
	bottom: 50px;
	background-color: #000000;
	border: none;
	border-radius: 50%;
	z-index: 99999999 !important;
}

.actions-menu .btn {
	position: absolute;
	width: 350px;
	height: 80px;
	opacity: 0;
	border-radius: 0px;
	transition: top 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275),
left 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275),
opacity 200ms;
	padding-left: 15px;
	left: -1000px;
}

.actions-menu .btn--menu {
position: absolute;
opacity: 1;
top: 0;
left: 0;
z-index: 0;
}


.btn--menu, #actionMenuButton:checked + .actions-menu > .btn {
opacity: 1;
}
#actionMenuButton:checked + .actions-menu > .btn--menu:after {
transform: rotate(45deg);
}
#actionMenuButton:checked + .actions-menu > .btn--menu:before {
transform: rotate(-45deg);
}


#actionMenuButton:checked + .actions-menu > .btn--cont1 {
top: -590px;
left: -270px;
}
#actionMenuButton:checked + .actions-menu > .btn--cont2 {
top: -500px;
left: -300px;
}
#actionMenuButton:checked + .actions-menu > .btn--cont3 {
top: -410px;
left: -330px;
}
#actionMenuButton:checked + .actions-menu > .btn--cont4 {
top: -320px;
left: -360px;
}
#actionMenuButton:checked + .actions-menu > .btn--cont5 {
top: -230px;
left: -390px;
}
#actionMenuButton:checked + .actions-menu > .btn--cont6 {
top: -140px;
left: -420px;
}
#actionMenuButton:checked + .actions-menu > .btn--cont7 {
top: -50px;
left: -450px;
}

.btn .btnmenu1 {
	font-size: 24px;
	line-height: 30px;
	color: #FFFFFF !important;
	text-align: left;
	font-weight: 600;
	display: block;
}

.btn .btnmenu2 {
	font-size: 14px;
	line-height: 16px;
	color: #FFFFFF !important;
	text-align: left;
	display: block;
}