/*whatsapp*/
.call-center {
    border-radius: 20px;
    width: 240px;
    background: rgba(129, 129, 129, 1);
    background: #000;
}

.call-center-title {
    background: #927b54;
    text-align: center;
    border-radius: 20px 20px 0 0;
    height: 60px;
}

.call-center-phones a {
    border-bottom: 1px solid rgba(202, 179, 119, 0.2);
    display: block;
    text-align: right;
    padding: 10px 0;
    color: #fff;
    transition: margin-right 1s;
}

.call-center-phones a:hover {
    color: #fff !important;
    margin-right: 15px;
}

.call-center-phones {
    padding: 0 8px;
}

.call-center-phones a img {
    width: 40px;
    height: 40px;
    display: inline-block;
    vertical-align: middle;
    border-radius: 0;
    margin-left: 8px;
}

.call-center-phones a div {
    display: inline-block;
    vertical-align: middle;
    margin-right: 13px;
    line-height: 20px;
}

.call-center-phones a span {
    color: #cab377;
    /*font-weight: 200;*/
    display: block;
}

.whatsapp-call-center-icon {
    border-radius: 30px;
    vertical-align: middle;
    margin-top: 20px;
    cursor: pointer;
    width: 240px;
    color: #252324;
    display: flex;
    align-items: flex-end;
    position: fixed;
    bottom: 20px;
    right: 30px;
    word-spacing: -2px;
    z-index: 10000;
    mix-blend-mode: difference;
}

.whatsapp-icon {
    border-radius: 50%;
}

.whatsapp-black-icon {
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    margin: 8px;
    width: 32px;
    height: 32px;
    background: url(https://yuccahq.com/wp-content/themes/child-theme/images/whatsapp-black-icon.png) no-repeat center;
    background-size: contain;
}

.whatsapp-text {
    font-size: 14px;
    word-spacing: -3px;
    /* background-color: #d2d2d2; */
    width: 220px;
    padding-right: 32px;
    margin-right: -32px;
    height: 25px;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    display: flex;
    z-index: -1;
    border-radius: 20px;
}

.fa-times {
    border: 1px solid #fff;
    width: 15px;
    border-radius: 50%;
    height: 15px;
    line-height: 15px !important;
    font-size: 13px !important;
    vertical-align: middle;
    display: inline-block;
    text-align: center;
}

.call-center-title p {
    display: inline-block;
    vertical-align: middle;
    margin: 10px;
    word-spacing: -2px;
    text-align: center;
    line-height: 23px;
    font-size: 14px;
    color: #fff;
}

.call-center {
    position: absolute;
    right: 0;
    bottom: 100%;
    display: none;
}

ul li:hover .sub {
    display: block;
    -webkit-animation: dropFadeInUp 300ms;
    animation: dropFadeInUp 300ms;
}

.show-call-center {
    width: 240px;
    height: 250px;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 1;
}

.show-call-center .whatsapp-call-center-icon .origin {
    border: 1px solid rgba(198, 156, 109, 0.5) !important;
}

/* .whatsapp-call-center-icon:hover+.call-center { */
.show-call-center:hover .call-center {
    display: block;
    -webkit-animation: dropFadeInUp 300ms;
    animation: dropFadeInUp 400ms;
    position: fixed;
    bottom: 80px;
    right: 30px;
}

@keyframes dropFadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 40px, 0);
        transform: translate3d(0, 40px, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.rotate-in-up-left {
    animation: rotate-in-up-left 2s ease infinite;
}

@keyframes rotate-in-up-left {
    0% {
        transform-origin: left bottom;
        transform: rotate(90deg);
        opacity: 0;
    }
    100% {
        transform-origin: left bottom;
        transform: rotate(0);
        opacity: 1;
    }
}

.bounce-in-right {
    animation: bounce-in-right 1.5s ease 1;
}

@keyframes bounce-in-right {
    0% {
        opacity: 0;
        transform: translateX(2000px);
    }
    60% {
        opacity: 1;
        transform: translateX(-30px);
    }
    80% {
        transform: translateX(10px);
    }
    100% {
        transform: translateX(0);
    }
}

.bounce-in-left {
    animation: bounce-in-left 1.5s ease 1;
}

@keyframes bounce-in-left {
    0% {
        opacity: 0;
        transform: translateX(-2000px);
    }
    60% {
        opacity: 1;
        transform: translateX(+30px);
    }
    80% {
        transform: translateX(-10px);
    }
    100% {
        transform: translateX(0);
    }
}

.hithere {
    animation: hithere 25s ease infinite;
}

@keyframes hithere {
    47% {
        transform: scale(1.01);
    }
    49%,
    51% {
        transform: rotate(-15deg) scale(1.01);
    }
    50% {
        transform: rotate(15deg) scale(1.01);
    }
    53% {
        transform: rotate(0deg) scale(1.01);
    }
    56% {
        transform: scale(1);
    }
    100% {
        transform: scale(1);
    }
}

/*@keyframes hithere {*/
.origin {
    background: #fff;
}

@media only screen and (max-width: 768px) {
    .origin {
        transition: background-color 50ms ease-in-out;
    }
}

/* tel box */
a.tel-box {
    position: fixed;
    display: flex;
    bottom: 20px;
    left: 30px;
    word-spacing: -2px;
    z-index: 10000;
    align-items: flex-end;
    color: #252324;
    text-decoration: none;
    mix-blend-mode: difference;
}

.tel-box .tel-icon {
    border-radius: 50%;
    /* background-color: #d2d2d2; */
}

.tel-box .tel-black-icon {
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    margin: 8px;
    width: 32px;
    height: 32px;
    background: url(https://yuccahq.com/wp-content/themes/child-theme/images/call-black-icon.png) no-repeat center;
    background-size: contain;
}

.tel-box .tel-text {
    font-size: 14px;
    word-spacing: -3px;
    /* background-color: #d2d2d2; */
    width: 220px;
    padding-right: 32px;
    margin-right: -32px;
    height: 25px;
    align-items: center;
    justify-content: center;
    display: flex;
    z-index: -1;
    border-radius: 20px;
    font-weight: 800;
}

span#tel-fa-pre {
    font-weight: bolder;
}

span#tel-fa {
    margin-right: 5px;
}

.contact-box {
    display: none;
    transition: display 0.5s ease-in-out;
}

.show-contact-box {
    display: block;
}

@media only screen and (max-width: 768px) {
    .tel-box .tel-text,
    .whatsapp-text {
        display: none;
    }
}