#site-popup {
    opacity: 0;
    transition: opacity 0.5s ease;
    display: block;
    pointer-events: none;
}
#site-popup.visible {
    opacity: 1;
    pointer-events: auto;
}


#site-popup {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 9999;
    background-color: rgba(0, 0, 0, .7);

    .popup-inner.no-image {
        max-width: 810px !important;
    }

    .popup-inner.no-image .text-wrapper {
        padding-top: 40px !important;
    }

    .popup-inner {
        display: flex;
        flex-direction: row;
        max-width: 1024px;
        margin: 40px auto;
        background-color: white;
        position: relative;
        border-radius: 20px;
        transform: translate(0, -50%);
        top: 50%;
        max-height: calc( 100vh - 50px );

        .mobile-scrollable {
            display: flex;
            flex-direction: row;
            overflow-y: scroll;

            @media all and ( max-width: 1079px ) {
                display: block !important;
            }
        }

        @media all and ( max-width: 1079px ) {
            transform: translate(0, 0);
            top: 0;
            flex-direction: column;
            max-width: 500px;

        }

        @media all and ( max-width: 750px ) {
            margin: 20px;
        }

        .popup-close {
            position: absolute;
            top: -20px;
            right: -20px;
            width: 40px;
            height: 40px;
            font-size: 20px;
            border-radius: 100%;
            border: 1px solid transparent;
            cursor: pointer;
        }

        .popup-image {
            flex: 0 0 auto;
            width: 41.66667%;

            @media all and ( max-width: 1079px ) {
                width: 100%;
            }

            @media all and ( min-width: 1080px ) {
                img.vertical {
                    display: block;
                }
                img.horizontal {
                    display: none;
                }
            }

            @media all and ( max-width: 1079px ) {
                img.vertical {
                    display: none;
                }
                img.horizontal {
                    display: block;
                }
            }

            img {
                object-fit: cover;
                width: 100%;
                height: 100%;
                @media all and ( max-width: 1079px ) {
                    height: auto;
                    aspect-ratio: 16 / 9;
                }
            }

        }

        .popup-image + .popup-content {

        }

        .popup-content {
            padding: 20px;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            border-radius: 20px;
            box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;

            .text-wrapper {
                padding: 20px 0;

                @media all and ( max-width: 1079px ) {
                    padding: 0 !important;
                }

                b, strong {
                    font-weight: bold;
                }

                i {
                    font-style: italic;
                }

                h2, h3, h4, h5, h6 {
                    font-size: 26px;
                    line-height: 1.2;
                    @media all and ( max-width: 1079px ) {
                        font-size: 23px;
                        line-height: 1;
                    }
                }

                h2, h3, h4, h5, h6, p, ul, ol, dl {
                    margin-bottom: 20px;
                    line-height: 1.2;
                    @media all and ( max-width: 1079px ) {
                        margin-bottom: 15px;
                        line-height: 1;
                    }
                }

                @media all and ( max-width: 1079px ) {
                    p, ul, ol, dl, a {
                        font-size: 15px;
                    }
                }

                a {
                    text-decoration: underline;
                }

                ul, ol {
                    margin-left: 2rem;

                    li {
                        display: list-item;
                        text-align: -webkit-match-parent;
                    }

                    li + li {
                        margin-top: 10px;
                    }
                }

                ul li {
                    unicode-bidi: isolate;
                    list-style: disc;
                }

            }

        }

        .form-container {
            .gform_wrapper.gravity-theme .gform_fields {
                grid-row-gap: 10px !important;
            }
            /*Footer*/
            .gform_wrapper.gravity-theme .gform_footer, .gform_wrapper.gravity-theme .gform_page_footer {
                margin: 10px 0 0 0 !important;
                padding: 0 10px 0 10px !important;
            }
            /*body*/
            .gform-body.gform_body {
                .gfield {
                    padding: 0 !important;
                }
            }

            .gform_wrapper.gravity-theme .gfield_label {
                font-size: 14px;
            }

            .gform_wrapper.gravity-theme input[type=color], .gform_wrapper.gravity-theme input[type=date], .gform_wrapper.gravity-theme input[type=datetime-local], .gform_wrapper.gravity-theme input[type=datetime], .gform_wrapper.gravity-theme input[type=email], .gform_wrapper.gravity-theme input[type=month], .gform_wrapper.gravity-theme input[type=number], .gform_wrapper.gravity-theme input[type=password], .gform_wrapper.gravity-theme input[type=search], .gform_wrapper.gravity-theme input[type=tel], .gform_wrapper.gravity-theme input[type=text], .gform_wrapper.gravity-theme input[type=time], .gform_wrapper.gravity-theme input[type=url], .gform_wrapper.gravity-theme input[type=week], .gform_wrapper.gravity-theme select, .gform_wrapper.gravity-theme textarea {
                font-size: 14px;
                height: 40px;
                padding: 5px;
            }

            .gform_wrapper.gravity-theme #field_submit input, .gform_wrapper.gravity-theme .gform_footer input {
                width: 100%;
                height: 50px;
            }



        }

        @media all and (max-width: 750px) {
            .gform_wrapper.gravity-theme input:not([type=radio]):not([type=checkbox]):not([type=image]):not([type=file]) {
                height: 40px !important;
            }
            .gform-body.gform_body {
                padding: 0 !important;
            }
            .gform_footer {
                margin-top: 10px !important;

                input[type=submit] {
                    width: 100% !important;
                }

            }
        }

    }
}