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

.bottom-button {
align-items: center;
background-color: rgba(170,170,170,0.5);
justify-content: center;
padding: 0 16px;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
z-index: 2;
}
.bottom-button .bg-blue {
margin: 16px 0!important;
}
.bottom-button .button-like {
border-radius: 100px;
height: 45px;
margin: 0 auto 16px;
width: 170px;
}
.bottom-button .bg-green {
min-width: 250px!important;
position: absolute;
right: 2%;
}
.bottom-button .button-like i {
display: inline-block;
}
.bottom-button .button-like span {
font-size: 100%;
margin-left: 5px;
}
.bottom-button .balloon {
background: #7ab5cc;
border-radius: 100px;
display: none;
max-width: 100%;
min-width: 120px;
padding: 7px 15px;
position: absolute;
right: 3.5%;
top: -40px;
}
.bottom-button .balloon:before {
border: 15px solid transparent;
border-top: 15px solid #7ab5cc;
content: "";
margin-left: -15px;
position: absolute;
top: 100%;
left: 50%;
}
.bottom-button .balloon p {
color: #fff;
margin: 0;
padding: 0;
}

@media screen and (min-width: 1024px){
.bottom-button {
display: flex;
}
.bottom-button .button-like {
margin: 0 0 0 20px;
}
.bottom-button .balloon {
display: block;
}
}