/* ==========================================================
   Bond Promotions Popup
========================================================== */

body.bond-popup-open {
    overflow: hidden;
}

/* Overlay */

.bond-popup-overlay {

    position: fixed;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    display: none;

    justify-content: center;

    align-items: center;

    background: rgba(0,0,0,.75);

    z-index: 999999;

}

/* Popup */

.bond-popup-container {
    margin-left: 35%;
    margin-top: 7%;
    position: relative;
    background: #ffffff;
    width: 100%;
    max-width: 400px;
    max-height: 85vh;
    overflow-y: auto;
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .25);
    animation: bondFadeIn .35s ease;
}

/* Image */

.bond-popup-image img {

    width: 100%;

    display: block;

    height: auto;

}

/* Content */
.bond-popup-content {
    padding: 20px;          /* was 30px */
    text-align: center;
}

/* Title */

.bond-popup-title {
    font-size: 24px;        /* was 32px */
    margin: 0 0 10px;
}

/* Description */

.bond-popup-description {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 18px;
}

.bond-popup-description p {

    margin-bottom: 15px;

}

/* Button */

.bond-popup-button {
    padding: 10px 22px;
    font-size: 14px;
}

.bond-popup-button:hover {

    background: #005f8d;

    color: #ffffff;

}

/* Close Button */

.bond-popup-close {

    position: absolute;

    right: 15px;

    top: 12px;

    width: 38px;

    height: 38px;

    border: none;

    border-radius: 50%;

    background: rgba(0,0,0,.55);

    color: #fff;

    cursor: pointer;

    font-size: 28px;

    line-height: 38px;

    transition: .3s;

    z-index: 10;

}

.bond-popup-close:hover {

    background: #d63638;

}

/* Animation */

@keyframes bondFadeIn {

    from {

        opacity: 0;

        transform: translateY(-40px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

/* Mobile */

@media (max-width:768px) {

    .bond-popup-container {

        width: 95%;

    }

    .bond-popup-content {

        padding: 20px;

    }

    .bond-popup-title {

        font-size: 24px;

    }

    .bond-popup-description {

        font-size: 15px;

    }

    .bond-popup-button {

        width: 100%;

        box-sizing: border-box;

    }

}