.bot-div {
    background-color: #fff;
    bottom: 8vh;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    left: 15px;
    height: 0px;
    display: none;
    margin-right: auto;
    margin-left: auto;
    position: fixed;
    right: 15px;
    z-index: 1000;
}

/*.close-button {
    display: none;
    position: fixed;
    left: 45%;
    bottom: 1vh;
    z-index: 99999;
    text-align: center;
    font-size: 32px;
    margin: 4px 2px;
    height: 50px;
    width: 50px;
    cursor: pointer;
    color: white;
    background-color: #f45042;
    border-radius: 50%;
    border: none;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)
}*/

.close-button {
    display: none;
    position: fixed;
    left: 45%;
    bottom: 1vh;
    z-index: 99999;
    text-align: center;
    font-size: 32px;
    margin: 4px 2px;
    height: 50px;
    width: 50px;
    cursor: pointer;
    color: white;
    background-color: #1976D2;
    border-radius: 50%;
    border: 2px #fff solid;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    background-image:url("/media/jiigwnvx/noun-minimize-1154733.svg");
    background-position: 50% 55%;
    background-repeat: no-repeat;
    background-size: 80%;
    
}

@media only screen and (min-width: 768px) {
    .bot-div {
        height: 0px;
        display: none;
        left: 70%;
        width: 29%;
        position: fixed;
        bottom: 8vh;
        z-index: 1000;
        background-color: #fff;
        box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    }

    .close-button {
        left: 95%;
    }
}


.chatbot-promo {
    animation: slide-up-down 8s ease;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
    bottom: 0;
    box-sizing: border-box;
    height: 10vh;
    top: 90vh;
    opacity: 0;
    position: fixed;
    width: 100%;
    z-index: 3;
}

    .chatbot-promo .screen {
        background-color: #d4e7ff;
        bottom: 26px;
        box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.3);
        height: 64px;
        position: absolute;
        width: 100%;
    }

        .chatbot-promo .screen .text-wrapper {
            float: right;
            margin: 0;
            padding: 0 100px 0 0;
            position: relative;
            text-align: right;
        }

            .chatbot-promo .screen .text-wrapper h1 {
                display: block;
                font-family: "Century Gothic", sans-serif;
                font-size: 24px;
                font-weight: bold;
                letter-spacing: -1px;
                padding: 10px 0 0 0;
                margin: 0;
                text-transform: uppercase;
            }

            .chatbot-promo .screen .text-wrapper h3 {
                display: inline-block;
                font-family: "Century Gothic", sans-serif;
                font-size: 15px;
                margin: 0;
                padding: 0;
                position: relative;
                text-align: right;
                top: -9px;
            }

            .chatbot-promo .screen .text-wrapper .arrow {
                display: inline-block;
                height: 22px;
                width: 22px;
                position: relative;
                top: -2px;
            }

    .chatbot-promo .text {
        background-color: #b8d1f2;
        bottom: 0px;
        display: inline-block;
        height: 26px;
        position: absolute;
        width: 100%;
    }

        .chatbot-promo .text .text-wrapper {
            float: right;
            margin: 0;
            padding: 0 100px 0 0;
            position: relative;
            text-align: right;
        }

        .chatbot-promo .text p {
            color: #2e78d6;
            font-family: "Century Gothic", sans-serif;
            font-size: 11px;
            font-weight: bold;
            height: 26px;
            letter-spacing: 3px;
            line-height: 26px;
            padding: 0;
            position: relative;
            text-align: right;
            text-transform: uppercase;
        }

            .chatbot-promo .text p a {
                color: #344760;
                text-decoration: none;
            }

.chatbot-question {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    animation-name: shakeMe;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    bottom: 3px;
    height: 10vh;
    top: 90vh;
    opacity: 1;
    position: fixed;
    right: 0;
    width: 94px;
    z-index: 4;
}

@keyframes slide-up {
    0% {
        margin-bottom: -120px;
        opacity: 0;
    }

    100% {
        margin-bottom: 0px;
        opacity: 1;
    }
}

@keyframes slide-up-down {
    0% {
        margin-bottom: -120px;
        opacity: 0;
    }

    10% {
        margin-bottom: 0px;
        opacity: 1;
    }

    80% {
        margin-bottom: 0px;
        opacity: 1;
    }

    100% {
        margin-bottom: -120px;
        opacity: 1;
    }
}

/*@keyframes shakeMe {
    2%, 18% {
        transform: translate3d(-5px, 0, 0);
    }

    4%, 16% {
        transform: translate3d(5px, 0, 0);
    }

    6%, 10%, 14% {
        transform: translate3d(-5px, 0, 0);
    }

    8%, 12% {
        transform: translate3d(5px, 0, 0);
    }

    18.1% {
        transform: translate3d(0px, 0, 0);
    }
}*/