.float{
	position:fixed;
	width:60px;
	height:60px;
	bottom:40px;
	right:40px;
	background-color:#25d366;
	color:var(--background-color);
	border-radius:50px;
	text-align:center;
    align-items:center;
    font-size:30px;
	/*box-shadow: 2px 2px 3px #999;*/
    z-index:100;
    fill: var(--background-color);
    transition: fill 0.3s ease;
    
}

svg{
    align-items: center;
    margin-top:5px;
}

/*hidden element*/
.round p{
    position:relative;
    left: 0px;
    top: 3px;
}

.round{
    position:fixed;
	width:150px;
	height:30px;
	bottom:55px;
	right:140px;
    display:block;
    border-radius: 20px;
    background-color: rgb(247, 246, 246);
    box-shadow: 2px 2px 3px #999;
    font-family:sans-serif;
    color:gray;
    font-weight:lighter;
    text-align:center;
    opacity: 0;
    transition: opacity 1s;
}

.round .triangle{
    position:absolute;
    display: block;
	right:-19px;
    bottom: 0.5px;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 14px solid transparent;
    border-left: 30px solid rgb(247, 246, 246);
    opacity:0;
    transition: opacity 1s;
}

/*whatsapp bubble*/


a.float#whats:hover + .round .triangle {
    transition: opacity 1s;
    opacity:1;
}



a.float#whats:hover + .round {
    transition: box-shadow 0.3s;
    filter: contrast(1.1);
    display:block;
    opacity:1;
    
    transition: opacity 1s;
}



a.float#whats:hover {
    cursor: pointer;
    fill:rgb(255, 255, 255) !important;
    fill: white !important;
    transition: fill 0.3s ease;
}


a.float#whats {
    animation: fade-left 1s ease-out;
    animation: fade-in 1s ease-out;
}

@media all and (max-width:768px) {
    .float{
        right:20px;
    }
}