#pop-up-container {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        position: fixed;
        z-index: 11;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    #pop-up-wrapper {
        width: 94%;
        min-width: 350px;
        max-width: 500px;
        min-height: 210px;
        position: relative;
        z-index: 11;
        overflow: visible;
        border-radius: 5px;
        box-shadow: 0 1px 2px rgba(255, 255, 255, 0.07), 0 2px 4px rgba(255, 255, 255, 0.07),
            0 4px 8px rgba(255, 255, 255, 0.07), 0 8px 16px rgba(255, 255, 255, 0.07), 0 16px 32px rgba(255, 255, 255, 0.07),
            0 32px 64px rgba(255, 255, 255, 0.07);
    }

    #pop-up-wrapper img {
        width: 100%;
        border-radius: 5px 5px 0 0;
    }

    #pop-up-wrapper button {
        width: 100%;
        padding: 0.75rem;
        font-size: 1.25rem;
        font-weight: 700;
        border: none;
        border-radius: 0 0 5px 5px;
        margin: 0;
        background-color: #50a5cc;
    }

    .gray-bg {
        background: #777 no-repeat;
    }

    .swirl-in-fwd {
        -webkit-animation: swirl-in-fwd 0.6s ease-out both;
        animation: swirl-in-fwd 0.6s ease-out both;
    }

    .x-mark-container {
        position: absolute;
        top: 5px;
        right: 5px;
        background-color: black;
        border-radius: 50%;
        width: 8%;
    }

    #bg-black {
        background-color: rgba(0, 0, 0, 0.75);
        position: fixed;
        z-index: 10;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    @-webkit-keyframes swirl-in-fwd {
        0% {
            -webkit-transform: rotate(-540deg) scale(0);
            transform: rotate(-540deg) scale(0);
            opacity: 0;
        }

        100% {
            -webkit-transform: rotate(0) scale(1);
            transform: rotate(0) scale(1);
            opacity: 1;
        }
    }

    @keyframes swirl-in-fwd {
        0% {
            -webkit-transform: rotate(-540deg) scale(0);
            transform: rotate(-540deg) scale(0);
            opacity: 0;
        }

        100% {
            -webkit-transform: rotate(0) scale(1);
            transform: rotate(0) scale(1);
            opacity: 1;
        }
    }

    .swirl-out-bck {
        -webkit-animation: swirl-out-bck 0.6s ease-in both;
        animation: swirl-out-bck 0.6s ease-in both;
    }

    @-webkit-keyframes swirl-out-bck {
        0% {
            -webkit-transform: rotate(0) scale(1);
            transform: rotate(0) scale(1);
            opacity: 1;
        }

        100% {
            -webkit-transform: rotate(-540deg) scale(0);
            transform: rotate(-540deg) scale(0);
            opacity: 0;
        }
    }

    @keyframes swirl-out-bck {
        0% {
            -webkit-transform: rotate(0) scale(1);
            transform: rotate(0) scale(1);
            opacity: 1;
        }

        100% {
            -webkit-transform: rotate(-540deg) scale(0);
            transform: rotate(-540deg) scale(0);
            opacity: 0;
        }
    }

    .fade-in {
        -webkit-animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
        animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
    }

    @-webkit-keyframes fade-in {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @keyframes fade-in {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    .fade-out {
        -webkit-animation: fade-out 1s ease-out both;
        animation: fade-out 12s ease-out both;
    }

    @-webkit-keyframes fade-out {
        0% {
            opacity: 1;
        }

        100% {
            opacity: 0;
        }
    }

    @keyframes fade-out {
        0% {
            opacity: 1;
        }

        100% {
            opacity: 0;
        }
    }