@import url('https://fonts.googleapis.com/css?family=Roboto') ! important;
/* offset-x > | offset-y ^| blur-radius | spread-radius | color */
@keyframes pulse {
    0% {
        transform: scale(1, 1) ! important;
    }
    50% {
        opacity: 0.3 ! important;
    }
    100% {
        transform: scale(1.45) ! important;
        opacity: 0 ! important;
    }
}
.pulse {
    -webkit-animation-name: pulse ! important;
    animation-name: pulse ! important;
}
.nav-bottom {
    display: flex ! important;
    flex-direction: row ! important;
    justify-content: flex-end ! important;
    align-content: flex-end ! important;
    width: auto ! important;
    height: auto ! important;
    position: fixed ! important;
    z-index: 8 ! important;
    bottom: 0px ! important;
    right: 0px ! important;
    padding: 5px ! important;
    margin: 0px ! important;
}
@media (max-width: 360px) {
    .nav-bottom {
        width: 320px ! important;
    }
}
.whatsapp-button {
    display: flex ! important;
    justify-content: center ! important;
    align-content: center ! important;
    width: 60px ! important;
    height: 60px ! important;
    z-index: 8 ! important;
    transition: 0.3s ! important;
    margin: 10px ! important;
    padding: 7px ! important;
    border: none ! important;
    outline: none ! important;
    cursor: pointer ! important;
    border-radius: 50% ! important;
    background-color: #fff ! important;
    /* offset-x > | offset-y ^| blur-radius | spread-radius | color */
    -webkit-box-shadow: 1px 1px 6px 0px rgba(68, 68, 68, 0.705) ! important;
    -moz-box-shadow: 1px 1px 6px 0px rgba(68, 68, 68, 0.705) ! important;
    box-shadow: 1px 1px 6px 0px rgba(68, 68, 68, 0.705) ! important;
}
.circle-anime {
    display: flex ! important;
    position: absolute ! important;
    justify-content: center ! important;
    align-content: center ! important;
    width: 60px ! important;
    height: 60px ! important;
    top: 15px ! important;
    right: 15px ! important;
    border-radius: 50% ! important;
    transition: 0.3s ! important;
    background-color: #77bb4a ! important;
    animation: pulse 1.2s 4s ease 4 ! important;
}
.popup-whatsapp {
    display: none ! important;
    position: absolute ! important;
    flex-direction: column ! important;
    justify-content: flex-start ! important;
    align-items: flex-start ! important;
    width: auto ! important;
    height: auto ! important;
    padding: 10px ! important;
    bottom: 85px ! important;
    right: 6px ! important;
    transition: 0.5s ! important;
    border-radius: 10px ! important;
    background-color: #fff ! important;
    /* offset-x > | offset-y ^| blur-radius | spread-radius | color */
    -webkit-box-shadow: 2px 1px 6px 0px rgba(68, 68, 68, 0.705) ! important;
    -moz-box-shadow: 2px 1px 6px 0px rgba(68, 68, 68, 0.705) ! important;
    box-shadow: 2px 1px 6px 0px rgba(68, 68, 68, 0.705) ! important;
    animation: slideInRight 0.6s 0s both ! important;
}
.popup-whatsapp > div {
    margin: 5px ! important;
}
@media (max-width: 680px) {
    .popup-whatsapp p {
        font-size: 0.9em ! important;
    }
}
.popup-whatsapp > .content-whatsapp.-top {
    display: flex ! important;
    flex-direction: column ! important;
}
.popup-whatsapp > .content-whatsapp.-top p {
    color: #585858 ! important;
    font-family: Montserrat, sans-serif ! important;
    font-weight: 400 ! important;
    font-size: 1em ! important;
}
.popup-whatsapp > .content-whatsapp.-bottom {
    display: flex ! important;
    flex-direction: row ! important;
}
.closePopup {
    display: flex ! important;
    justify-content: center ! important;
    align-items: center ! important;
    width: 28px ! important;
    height: 28px ! important;
    margin: 0px 0px 15px 0px ! important;
    border-radius: 50% ! important;
    border: none ! important;
    outline: none ! important;
    cursor: pointer ! important;
    background-color: #f76060 ! important;
    -webkit-box-shadow: 1px 1px 2px 0px rgba(68, 68, 68, 0.705) ! important;
    -moz-box-shadow: 1px 1px 2px 0px rgba(68, 68, 68, 0.705) ! important;
    box-shadow: 1px 1px 2px 0px rgba(68, 68, 68, 0.705) ! important;
    padding: 10px 10px !important;
}
.closePopup:hover {
    background-color: #f71d1d ! important;
    transition: 0.3s ! important;
}
.send-msPopup {
    display: flex ! important;
    justify-content: center ! important;
    align-items: center ! important;
    width: 40px ! important;
    height: 40px ! important;
    border-radius: 50% ! important;
    background-color: #fff ! important;
    margin: 0px 0px 0px 5px ! important;
    border: none ! important;
    outline: none ! important;
    cursor: pointer ! important;
    padding: 10px 10px !important;
    -webkit-box-shadow: 1px 1px 2px 0px rgba(68, 68, 68, 0.705) ! important;
    -moz-box-shadow: 1px 1px 2px 0px rgba(68, 68, 68, 0.705) ! important;
    box-shadow: 1px 1px 2px 0px rgba(68, 68, 68, 0.705) ! important;
}
.send-msPopup:hover {
    background-color: #f8f8f8 ! important;
    transition: 0.3s ! important;
}
.is-active-whatsapp-popup {
    display: flex ! important;
    animation: slideInRight 0.6s 0s both ! important;
}
input.whats-input[type=text] {
    width: 250px ! important;
    height: 40px ! important;
    box-sizing: border-box ! important;
    border: 0px solid #fff ! important;
    border-radius: 20px ! important;
    font-size: 1em ! important;
    background-color: #fff ! important;
    padding: 0px 0px 0px 10px ! important;
    -webkit-transition: width 0.3s ease-in-out ! important;
    transition: width 0.3s ease-in-out ! important;
    outline: none ! important;
    transition: 0.3s ! important;
    color: black !important;
}
@media (max-width: 420px) {
    input.whats-input[type=text] {
        width: 225px ! important;
    }
}
input.whats-input {
    /* Most modern browsers support this now. */
}
input.whats-input::placeholder {
    color: rgba(68, 68, 68, 0.705) ! important;
    opacity: 1 ! important;
}
input.whats-input[type=text]:focus {
    background-color: #f8f8f8 ! important;
    -webkit-transition: width 0.3s ease-in-out ! important;
    transition: width 0.3s ease-in-out ! important;
    transition: 0.3s ! important;
}
.icon-whatsapp-small {
    width: 24px ! important;
    height: 24px ! important;
}
.icon-whatsapp {
    width: 45px ! important;
    height: 45px ! important;
}
.icon-font-color {
    color: #fff ! important;
}
.icon-font-color--black {
    color: #333 ! important;
}
